show publications in table

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

@@ -3,8 +3,42 @@ import { FormHeader } from 'components/ui/Forms/FormHeader'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { Plus } from 'lucide-react'
 import Table from 'components/to-be-cleaned/Table'
+import { useReplicationSourcesQuery } from 'data/replication/sources-query'
+import { useParams } from 'common'
+import { useReplicationPublicationsQuery } from 'data/replication/publications-query'
+import { Button } from 'ui'
 
 export const ReplicationPublications = () => {
+  const { ref } = useParams()
+  const { data } = useReplicationSourcesQuery({
+    projectRef: ref,
+  })
+
+  const sources = data ?? []
+  let publication_source_id = null
+
+  for (let i = 0; i < sources.length; i++) {
+    const source = sources[i]
+    if (source.config.Postgres!.host.startsWith(`db.${ref}`)) {
+      if (publication_source_id === null) {
+        publication_source_id = source.id
+      } else {
+        throw new Error(`multiple sources for ref ${ref}`)
+      }
+    }
+  }
+
+  if (publication_source_id === null) {
+    throw new Error(`no sources for ref ${ref}`)
+  }
+
+  const { data: pub_data } = useReplicationPublicationsQuery({
+    projectRef: ref,
+    sourceId: publication_source_id,
+  })
+
+  const publications = pub_data ?? []
+
   return (
     <>
       <ScaffoldContainer>
@@ -29,14 +63,33 @@ export const ReplicationPublications = () => {
               <div className="my-4 w-full">
                 <Table
                   head={[
-                    <Table.th key="icon" className="!px-0" />,
                     <Table.th key="name">Name</Table.th>,
-                    <Table.th key="tables" className="hidden xl:table-cell">
+                    <Table.th key="tables">
                       Num Tables
                     </Table.th>,
-                    <Table.th key="buttons">Edit</Table.th>,
+                    <Table.th key="edit">Edit</Table.th>,
+                    <Table.th key="delete">Delete</Table.th>,
                   ]}
-                  body={<div>No publications</div>}
+                  body={
+                    publications.length === 0 ? (
+                      <Table.tr>
+                        <Table.td colSpan={4}>No publications</Table.td>
+                      </Table.tr>
+                    ) : (
+                      publications.map((pub) => (
+                        <Table.tr key={pub.name}>
+                          <Table.td>{pub.name}</Table.td>
+                          <Table.td>{pub.tables.length}</Table.td>
+                          <Table.td>
+                            <Button>Edit</Button>
+                          </Table.td>
+                          <Table.td>
+                            <Button>Delete</Button>
+                          </Table.td>
+                        </Table.tr>
+                      ))
+                    )
+                  }
                 ></Table>
               </div>
             </div>

apps/studio/data/replication/keys.ts

@@ -1,3 +1,5 @@
 export const replicationKeys = {
   sources: (projectRef: string | undefined) => ['projects', projectRef, 'sources'] as const,
+  publications: (projectRef: string | undefined, source_id: number) =>
+    ['projects', projectRef, 'sources', source_id, 'publications'] as const,
 }

apps/studio/data/replication/publications-query.ts

@@ -0,0 +1,42 @@
+import { UseQueryOptions, useQuery } from '@tanstack/react-query'
+
+import { get, handleError } from 'data/fetchers'
+import { ResponseError } from 'types'
+import { replicationKeys } from './keys'
+
+type ReplicationPublicationsParams = { projectRef?: string; sourceId: number }
+
+async function fetchReplicationPublications(
+  { projectRef, sourceId }: ReplicationPublicationsParams,
+  signal?: AbortSignal
+) {
+  if (!projectRef) throw new Error('projectRef is required')
+
+  const { data, error } = await get(
+    '/platform/replication/{ref}/sources/{source_id}/publications',
+    {
+      params: { path: { ref: projectRef, source_id: sourceId } },
+      signal,
+    }
+  )
+  if (error) {
+    handleError(error)
+  }
+
+  return data
+}
+
+export type ReplicationPublicationsData = Awaited<ReturnType<typeof fetchReplicationPublications>>
+
+export const useReplicationPublicationsQuery = <TData = ReplicationPublicationsData>(
+  { projectRef, sourceId }: ReplicationPublicationsParams,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<ReplicationPublicationsData, ResponseError, TData> = {}
+) =>
+  useQuery<ReplicationPublicationsData, ResponseError, TData>(
+    replicationKeys.publications(projectRef, sourceId),
+    ({ signal }) => fetchReplicationPublications({ projectRef, sourceId }, signal),
+    { enabled: enabled && typeof projectRef !== 'undefined', ...options }
+  )

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

@@ -3325,6 +3325,10 @@ export interface paths {
     /** Creates a replication source */
     post: operations['ReplicationSourcesController_createSource']
   }
+  '/platform/replication/{ref}/sources/{source_id}/publications': {
+    /** Gets source publications */
+    get: operations['ReplicationSourcesController_getPublications']
+  }
   '/platform/reset-password': {
     parameters: {
       query?: never
@@ -10705,6 +10709,10 @@ export interface components {
       saml?: components['schemas']['SamlDescriptor']
       updated_at?: string
     }
+    Publication: {
+      name: string
+      tables: components['schemas']['Table'][]
+    }
     PublicUrlOptions: {
       download?: boolean
       downloadName?: string
@@ -21599,6 +21607,28 @@ export interface operations {
       }
     }
   }
+  /** Gets source publications */
+  ReplicationSourcesController_getPublications: {
+    parameters: {
+      path: {
+        /** @description Project ref */
+        ref: string
+        /** @description Source id */
+        source_id: number
+      }
+    }
+    responses: {
+      200: {
+        content: {
+          'application/json': components['schemas']['Publication'][]
+        }
+      }
+      /** @description Failed to get source publications */
+      500: {
+        content: never
+      }
+    }
+  }
   /** Reset password for email */
   ResetPasswordController_resetPassword: {
     parameters: {