@@ -16,6 +16,107 @@ import styles from "@/components/Flow/Flow.module.css";
1616import { ClientContext } from "./context/clientContext" ;
1717import { ClientContextType } from "./@types/client" ;
1818
19+
20+ const BacalhauDestinationNode : FC < NodeProps > = memo ( ( { id, data, selected } ) => {
21+ const instance = useReactFlow ( ) ;
22+ const { clients } = useContext ( ClientContext ) as ClientContextType ;
23+
24+ let initialValues = useMemo ( ( ) => {
25+ return {
26+ client : data . client ? data . client : "-" ,
27+ job : data . job ? data . job : "job" ,
28+ jobstore : data . jobstore ? data . jobstore : "jobstore" ,
29+ } ;
30+ } , [ ] ) ;
31+
32+ const handleChange = useCallback ( ( name : string , value : string ) => {
33+ instance . setNodes ( ( nodes ) =>
34+ nodes . map ( ( node ) => {
35+ if ( node . id === id ) {
36+ node . data = {
37+ ...node . data ,
38+ [ name ] : value ,
39+ } ;
40+ }
41+
42+ return node ;
43+ } ) ,
44+ ) ;
45+ } , [ ] ) ;
46+
47+ useEffect ( ( ) => {
48+ handleChange ( "client" , initialValues . client ) ;
49+ handleChange ( "job" , initialValues . job ) ;
50+ handleChange ( "jobstore" , initialValues . jobstore ) ;
51+ } , [ ] ) ;
52+
53+ let classNames = `${ styles . customNode } ;
54+ if ( selected ) {
55+ classNames = classNames + `${ styles . selected } ;
56+ }
57+
58+ const removeNode = useCallback ( ( id : string ) => {
59+ const node = instance . getNode ( id ) ;
60+ if ( node === undefined ) {
61+ return ;
62+ }
63+ instance . deleteElements ( {
64+ edges : getConnectedEdges ( [ node ] , [ ] ) ,
65+ nodes : [ node ] ,
66+ } ) ;
67+ } , [ ] ) ;
68+
69+ return (
70+ < div className = { classNames } >
71+ < div className = " grid grid-cols-1 gap-x-6 gap-y-2" >
72+ < h2 className = "text-slate-400 font-normal" > HelloWorld Destination</ h2 >
73+ < button
74+ onClick = { ( ) => {
75+ if ( confirm ( "Are you sure you want to delete this node?" ) ) {
76+ removeNode ( id ) ;
77+ }
78+ } }
79+ type = "button"
80+ className = "absolute right-1 top-1 rounded bg-red-200 text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-800"
81+ title = "delete"
82+ >
83+ < XMarkIcon className = "h-5 w-5" aria-hidden = "true" />
84+ </ button >
85+ < Select
86+ name = "client"
87+ label = "Client"
88+ placeholder = "Pick one"
89+ defaultValue = { initialValues . client }
90+ options = { ( clients || [ ] ) . map ( ( c ) => c . id ) }
91+ onChange = { ( value ) => {
92+ handleChange ( "client" , value || "" ) ;
93+ } }
94+ />
95+ < TextInput
96+ name = "jobstore"
97+ label = "Job Store"
98+ placeholder = { initialValues . jobstore }
99+ defaultValue = { initialValues . jobstore }
100+ onChange = { ( event ) => {
101+ handleChange ( "jobstore" , event . currentTarget . value )
102+ } }
103+ />
104+ < TextInput
105+ name = "job"
106+ label = "Job"
107+ placeholder = { initialValues . job }
108+ defaultValue = { initialValues . job }
109+ onChange = { ( event ) => {
110+ handleChange ( "job" , event . currentTarget . value )
111+ } }
112+ />
113+
114+ < Handle type = "target" position = { Position . Left } id = { id } />
115+ </ div >
116+ </ div >
117+ ) ;
118+ } ) ;
119+
19120const HelloWorldDestinationNode : FC < NodeProps > = memo ( ( { id, data, selected } ) => {
20121 const instance = useReactFlow ( ) ;
21122 const { clients } = useContext ( ClientContext ) as ClientContextType ;
@@ -1401,7 +1502,7 @@ const PostgresConnectorDestinationNode: FC<NodeProps> = memo(({ id, data, select
14011502
14021503 let initialValues = useMemo ( ( ) => {
14031504 return {
1404- url :
data . url ?
data . url :
"postgres://root:[email protected] :5432/test" , 1505+ url :
data . url ?
data . url :
"postgres://root:[email protected] :5432/test" , 14051506 client : data . client ? data . client : "-" ,
14061507 } ;
14071508 } , [ ] ) ;
@@ -1485,7 +1586,7 @@ const MysqlConnectorDestinationNode: FC<NodeProps> = memo(({ id, data, selected
14851586
14861587 let initialValues = useMemo ( ( ) => {
14871588 return {
1488- url :
data . url ?
data . url :
"mysql://root:[email protected] :3306/test" , 1589+ url :
data . url ?
data . url :
"mysql://root:[email protected] :3306/test" , 14891590 client : data . client ? data . client : "-" ,
14901591 } ;
14911592 } , [ ] ) ;
@@ -1745,6 +1846,7 @@ export {
17451846 KafkaDestination ,
17461847 SnowflakeSourceNode ,
17471848 SnowflakeDestinationNode ,
1849+ BacalhauDestinationNode ,
17481850 HelloWorldSourceNode ,
17491851 HelloWorldDestinationNode ,
17501852 PostgresConnectorSourceNode ,
0 commit comments