user can now delete a publication

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

@@ -0,0 +1,54 @@
+import { useParams } from 'common'
+import { useDeletePublicationMutation } from 'data/replication/delete-publication-mutation'
+import { toast } from 'sonner'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+
+export type DeletePublicationModalProps = {
+  visible: boolean
+  title: string
+  sourceId: number
+  publicationName: string
+  onClose: () => void
+}
+
+export const DeletePublicationModal = ({
+  visible,
+  title,
+  sourceId,
+  publicationName,
+  onClose,
+}: DeletePublicationModalProps) => {
+  const { ref } = useParams()
+  const { mutate: deletePublication, isLoading: isCreating } = useDeletePublicationMutation({
+    onSuccess: (res) => {
+      toast.success('Successfully deleted publication')
+      onClose()
+    },
+  })
+  const onConfirm = () => {
+    deletePublication({
+      projectRef: ref!,
+      sourceId,
+      publicationName,
+    })
+  }
+  return (
+    <ConfirmationModal
+      variant="destructive"
+      visible={visible}
+      title={title}
+      confirmLabel="Delete"
+      confirmLabelLoading="Deleting"
+      onCancel={() => {
+        onClose()
+      }}
+      onConfirm={onConfirm}
+    >
+      <div className="space-y-4">
+        <p className="text-sm text-foreground-light">
+          Are you sure you want to delete the selected publication? This action cannot be undone.
+        </p>
+      </div>
+    </ConfirmationModal>
+  )
+}

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

@@ -10,6 +10,7 @@ import { Button } from 'ui'
 import { useState } from 'react'
 import CreatePublicationModal from './CreatePublicationModal'
 import { toast } from 'sonner'
+import { DeletePublicationModal } from './DeletePublicationModal'
 
 export const ReplicationPublications = () => {
   const { ref } = useParams()
@@ -17,6 +18,8 @@ export const ReplicationPublications = () => {
     projectRef: ref,
   })
   const [showCreatePublicationModal, setShowCreatePublicationModal] = useState(false)
+  const [showDeletePublicationModal, setShowDeletePublicationModal] = useState(false)
+  const [publicationToDelete, setPublicationToDelete] = useState('')
 
   const sources = data ?? []
   let source_id = null
@@ -84,10 +87,18 @@ export const ReplicationPublications = () => {
                           <Table.td>{pub.name}</Table.td>
                           <Table.td>{pub.tables.length}</Table.td>
                           <Table.td>
-                            <Button>Edit</Button>
+                            <Button type="default">Edit</Button>
                           </Table.td>
                           <Table.td>
-                            <Button>Delete</Button>
+                            <Button
+                              type="danger"
+                              onClick={() => {
+                                setPublicationToDelete(pub.name)
+                                setShowDeletePublicationModal(true)
+                              }}
+                            >
+                              Delete
+                            </Button>
                           </Table.td>
                         </Table.tr>
                       ))
@@ -101,9 +112,16 @@ export const ReplicationPublications = () => {
       </ScaffoldContainer>
       <CreatePublicationModal
         visible={showCreatePublicationModal}
-        sourceId={source_id}
+        sourceId={source_id!}
         onClose={() => setShowCreatePublicationModal(false)}
       />
+      <DeletePublicationModal
+        visible={showDeletePublicationModal}
+        title={`Delete publication "${publicationToDelete}"`}
+        publicationName={publicationToDelete}
+        sourceId={source_id!}
+        onClose={() => setShowDeletePublicationModal(false)}
+      />
     </>
   )
 }

apps/studio/data/replication/delete-publication-mutation.ts

@@ -0,0 +1,64 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+
+import type { ResponseError } from 'types'
+import { replicationKeys } from './keys'
+import { handleError, del } from 'data/fetchers'
+
+export type DeletePublicationParams = {
+  projectRef: string
+  sourceId: number
+  publicationName: string
+}
+
+async function deletePublication(
+  { projectRef, sourceId, publicationName: publication_name }: DeletePublicationParams,
+  signal?: AbortSignal
+) {
+  if (!projectRef) throw new Error('projectRef is required')
+
+  const { data, error } = await del(
+    '/platform/replication/{ref}/sources/{source_id}/publications/{publication_name}',
+    {
+      params: { path: { ref: projectRef, source_id: sourceId, publication_name } },
+      signal,
+    }
+  )
+  if (error) {
+    handleError(error)
+  }
+
+  return data
+}
+
+type DeletePublicationData = Awaited<ReturnType<typeof deletePublication>>
+
+export const useDeletePublicationMutation = ({
+  onSuccess,
+  onError,
+  ...options
+}: Omit<
+  UseMutationOptions<DeletePublicationData, ResponseError, DeletePublicationParams>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<DeletePublicationData, ResponseError, DeletePublicationParams>(
+    (vars) => deletePublication(vars),
+    {
+      async onSuccess(data, variables, context) {
+        const { projectRef, sourceId } = variables
+        await queryClient.invalidateQueries(replicationKeys.publications(projectRef, sourceId))
+        await onSuccess?.(data, variables, context)
+      },
+      async onError(data, variables, context) {
+        if (onError === undefined) {
+          toast.error(`Failed to delete publication: ${data.message}`)
+        } else {
+          onError(data, variables, context)
+        }
+      },
+      ...options,
+    }
+  )
+}

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

@@ -3331,6 +3331,10 @@ export interface paths {
     /** Creates a publication */
     post: operations['ReplicationSourcesController_createPublication']
   }
+  '/platform/replication/{ref}/sources/{source_id}/publications/{publication_name}': {
+    /** Deletes a publication */
+    delete: operations['ReplicationSourcesController_deletePublication']
+  }
   '/platform/replication/{ref}/sources/{source_id}/tables': {
     /** Gets source tables */
     get: operations['ReplicationSourcesController_getTables']
@@ -8642,7 +8646,6 @@ export interface components {
       publish_update?: boolean
       tables?: string[] | null
     }
-    CreatePublicationResponse: Record<string, never>
     CreateReplicationPublicationBody: {
       /** @description Publication name */
       name: string
@@ -21680,9 +21683,7 @@ export interface operations {
     }
     responses: {
       201: {
-        content: {
-          'application/json': components['schemas']['CreatePublicationResponse']
-        }
+        content: never
       }
       /** @description Failed to create publication */
       500: {
@@ -21690,6 +21691,28 @@ export interface operations {
       }
     }
   }
+  /** Deletes a publication */
+  ReplicationSourcesController_deletePublication: {
+    parameters: {
+      path: {
+        /** @description Project ref */
+        ref: string
+        /** @description Source id */
+        source_id: number
+        /** @description Publication name */
+        publication_name: string
+      }
+    }
+    responses: {
+      200: {
+        content: never
+      }
+      /** @description Failed to delete publication */
+      500: {
+        content: never
+      }
+    }
+  }
   /** Gets source tables */
   ReplicationSourcesController_getTables: {
     parameters: {