show source/sink names on pipelines page

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 (
             <>
               <Modal.Content>
-                <Input
-                  id="source_id"
-                  name="source_id"
-                  type="text"
-                  className="w-full"
-                  layout="vertical"
-                  label="Source Id"
-                />
-              </Modal.Content>
-              <Modal.Content>
-                <Input
+                <Select
+                  autoFocus
                   id="sink_id"
                   name="sink_id"
-                  type="text"
-                  className="w-full"
-                  layout="vertical"
-                  label="Sink Id"
-                />
+                  size="small"
+                  label="Sink"
+                  onChange={(e) => {
+                    values.sink_id = e.target.value
+                  }}
+                >
+                  {sinks.map((sink) => (
+                    <Select.Option key={sink.id} value={String(sink.id)}>
+                      {sink.name}
+                    </Select.Option>
+                  ))}
+                </Select>
               </Modal.Content>
               <Modal.Content>
-                <Input
+                <Select
+                  autoFocus
                   id="publication_name"
                   name="publication_name"
-                  type="text"
-                  className="w-full"
-                  layout="vertical"
-                  label="Publication Name"
-                ></Input>
+                  size="small"
+                  label="Publication"
+                  onChange={(e) => {
+                    values.publication_name = e.target.value
+                  }}
+                >
+                  {publications.map((pub) => (
+                    <Select.Option key={pub.name} value={pub.name}>
+                      {pub.name}
+                    </Select.Option>
+                  ))}
+                </Select>
               </Modal.Content>
               <Modal.Content>
                 <Input

apps/studio/components/interfaces/Replication/Pipelines.tsx

@@ -77,9 +77,8 @@ export const ReplicationPipelines = () => {
               <div className="my-4 w-full">
                 <Table
                   head={[
-                    <Table.th key="id">Id</Table.th>,
-                    <Table.th key="source_id">Source Id</Table.th>,
-                    <Table.th key="sink_id">Sink Id</Table.th>,
+                    <Table.th key="source_name">Source</Table.th>,
+                    <Table.th key="sink_name">Sink</Table.th>,
                     <Table.th key="action">Action</Table.th>,
                     <Table.th key="edit">Edit</Table.th>,
                     <Table.th key="delete">Delete</Table.th>,
@@ -87,7 +86,7 @@ export const ReplicationPipelines = () => {
                   body={
                     pipelines.length === 0 ? (
                       <Table.tr>
-                        <Table.td align="center" colSpan={6}>
+                        <Table.td align="center" colSpan={5}>
                           No pipelines
                         </Table.td>
                       </Table.tr>
@@ -112,9 +111,8 @@ export const ReplicationPipelines = () => {
                                   : 'Stop'
                         return (
                           <Table.tr key={pipeline.id}>
-                            <Table.td>{pipeline.id}</Table.td>
-                            <Table.td>{pipeline.source_id}</Table.td>
-                            <Table.td>{pipeline.sink_id}</Table.td>
+                            <Table.td>This project</Table.td>
+                            <Table.td>{pipeline.sink_name}</Table.td>
                             <Table.td>
                               <Button
                                 onClick={() => {

apps/studio/components/interfaces/Replication/Publications.tsx

@@ -14,34 +14,23 @@ import { DeletePublicationModal } from './DeletePublicationModal'
 
 export const ReplicationPublications = () => {
   const { ref } = useParams()
-  const { data } = useReplicationSourcesQuery({
+  const { data: sources_data } = useReplicationSourcesQuery({
     projectRef: ref,
   })
   const [showCreatePublicationModal, setShowCreatePublicationModal] = useState(false)
   const [showDeletePublicationModal, setShowDeletePublicationModal] = useState(false)
   const [publicationToDelete, setPublicationToDelete] = useState('')
 
-  const sources = data ?? []
-  let source_id = null
+  const sources = sources_data ?? []
+  const thisProjectSource = sources.find((s) => s.name === ref)
 
-  for (let i = 0; i < sources.length; i++) {
-    const source = sources[i]
-    if (source.config.Postgres!.host.startsWith(`db.${ref}`)) {
-      if (source_id === null) {
-        source_id = source.id
-      } else {
-        toast.error('failed to load sources for ref')
-      }
-    }
-  }
-
-  if (source_id === null) {
-    toast.error('failed to load sources for ref')
+  if (!thisProjectSource) {
+    toast.error("Failed to find this project's source")
   }
 
   const { data: pub_data } = useReplicationPublicationsQuery({
     projectRef: ref,
-    sourceId: source_id!,
+    sourceId: thisProjectSource!.id,
   })
 
   const publications = pub_data ?? []
@@ -121,14 +110,14 @@ export const ReplicationPublications = () => {
       </ScaffoldContainer>
       <CreatePublicationModal
         visible={showCreatePublicationModal}
-        sourceId={source_id!}
+        sourceId={thisProjectSource!.id}
         onClose={() => setShowCreatePublicationModal(false)}
       />
       <DeletePublicationModal
         visible={showDeletePublicationModal}
         title={`Delete publication "${publicationToDelete}"`}
         publicationName={publicationToDelete}
-        sourceId={source_id!}
+        sourceId={thisProjectSource!.id}
         onClose={() => setShowDeletePublicationModal(false)}
       />
     </>

packages/api-types/types/api.d.ts

@@ -10858,7 +10858,9 @@ export interface components {
       publication_name: string
       replicator_id: number
       sink_id: number
+      sink_name: string
       source_id: number
+      source_name: string
       tenant_id: string
     }
     ReplicationPipelinesStatusResponse: {