diff --git a/apps/studio/components/interfaces/Replication/CreatePipelineModal.tsx b/apps/studio/components/interfaces/Replication/CreatePipelineModal.tsx index 92b32dec7ee..3075872c4c7 100644 --- a/apps/studio/components/interfaces/Replication/CreatePipelineModal.tsx +++ b/apps/studio/components/interfaces/Replication/CreatePipelineModal.tsx @@ -1,7 +1,10 @@ import { useParams } from 'common' import { useCreatePipelineMutation } from 'data/replication/create-pipeline-mutation' +import { useReplicationPublicationsQuery } from 'data/replication/publications-query' +import { useReplicationSinksQuery } from 'data/replication/sinks-query' +import { useReplicationSourcesQuery } from 'data/replication/sources-query' import { toast } from 'sonner' -import { Button, Form, Input, Modal } from 'ui' +import { Button, Form, Input, Modal, Select } from 'ui' export interface CreatePipelineModalProps { visible: boolean @@ -16,23 +19,41 @@ const CreatePipelineModal = ({ visible, onClose }: CreatePipelineModalProps) => onClose() }, }) + const { data } = useReplicationSourcesQuery({ + projectRef: ref, + }) + + let thisProjectSource = data?.find((s) => s.name === ref) + + if (!thisProjectSource) { + toast.error("Failed to find this project's source") + } + + const { data: sinks_data } = useReplicationSinksQuery({ + projectRef: ref, + }) + const sinks = sinks_data ?? [] + + const { data: pub_data } = useReplicationPublicationsQuery({ + projectRef: ref, + sourceId: thisProjectSource!.id, + }) + + const publications = pub_data ?? [] const validate = (values: any) => { const errors = {} as any - if (!values.source_id) { - errors.source_id = 'Please enter a Source Id for your sink' - } if (!values.sink_id) { - errors.sink_id = 'Please enter a Sink Id for your sink' + errors.sink_id = 'Please select a sink for your pipeline' } if (!values.publication_name) { - errors.publication_name = 'Please enter a Publication Name for your sink' + errors.publication_name = 'Please select a publication for your pipeline' } if (!values.max_size) { - errors.max_size = 'Please enter a Max Size for your sink' + errors.max_size = 'Please enter a Max Size for your pipeline' } if (!values.max_fill_secs) { - errors.max_size = 'Please enter a Max Fill Seconds for your sink' + errors.max_size = 'Please enter a Max Fill Seconds for your pipeline' } return errors } @@ -40,7 +61,7 @@ const CreatePipelineModal = ({ visible, onClose }: CreatePipelineModalProps) => const onSubmit = (values: any) => { createPipeline({ projectRef: ref!, - source_id: Number(values.source_id), + source_id: Number(thisProjectSource!.id), sink_id: Number(values.sink_id), publication_name: values.publication_name, config: { @@ -49,10 +70,11 @@ const CreatePipelineModal = ({ visible, onClose }: CreatePipelineModalProps) => }) } + const first_sink_id = sinks.length > 0 ? sinks[0].id : '' + const first_publication_name = publications.length > 0 ? publications[0].name : '' const initialValues = { - source_id: '', - sink_id: '', - publication_name: '', + sink_id: first_sink_id, + publication_name: first_publication_name, max_size: 10000, max_fill_secs: 10, } @@ -69,34 +91,40 @@ const CreatePipelineModal = ({ visible, onClose }: CreatePipelineModalProps) => return ( <> - - - - + size="small" + label="Sink" + onChange={(e) => { + values.sink_id = e.target.value + }} + > + {sinks.map((sink) => ( + + {sink.name} + + ))} + - + size="small" + label="Publication" + onChange={(e) => { + values.publication_name = e.target.value + }} + > + {publications.map((pub) => ( + + {pub.name} + + ))} + {
Id, - Source Id, - Sink Id, + Source, + Sink, Action, Edit, Delete, @@ -87,7 +86,7 @@ export const ReplicationPipelines = () => { body={ pipelines.length === 0 ? ( - + No pipelines @@ -112,9 +111,8 @@ export const ReplicationPipelines = () => { : 'Stop' return ( - {pipeline.id} - {pipeline.source_id} - {pipeline.sink_id} + This project + {pipeline.sink_name}