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}