diff --git a/apps/studio/components/interfaces/Replication/DeleteSinkModal.tsx b/apps/studio/components/interfaces/Replication/DeleteSinkModal.tsx new file mode 100644 index 00000000000..813c35e05fd --- /dev/null +++ b/apps/studio/components/interfaces/Replication/DeleteSinkModal.tsx @@ -0,0 +1,46 @@ +import { useParams } from 'common' +import { useDeleteSinkMutation } from 'data/replication/delete-sink-mutation' +import { toast } from 'sonner' +import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' + +export type DeleteSinkModalProps = { + visible: boolean + title: string + sinkId: number + onClose: () => void +} + +export const DeleteSinkModal = ({ visible, title, sinkId, onClose }: DeleteSinkModalProps) => { + const { ref } = useParams() + const { mutate: deleteSink, isLoading: isCreating } = useDeleteSinkMutation({ + onSuccess: (res) => { + toast.success('Successfully deleted sink') + onClose() + }, + }) + const onConfirm = () => { + deleteSink({ + projectRef: ref!, + sinkId, + }) + } + return ( + { + onClose() + }} + onConfirm={onConfirm} + > +
+

+ Are you sure you want to delete the selected sink? This action cannot be undone. +

+
+
+ ) +} diff --git a/apps/studio/components/interfaces/Replication/Sinks.tsx b/apps/studio/components/interfaces/Replication/Sinks.tsx index 7ce7170e08a..8bfb84dd225 100644 --- a/apps/studio/components/interfaces/Replication/Sinks.tsx +++ b/apps/studio/components/interfaces/Replication/Sinks.tsx @@ -9,6 +9,7 @@ import { useState } from 'react' import CreateSinkModal from './CreateSinkModal' import { Button } from 'ui' import { toast } from 'sonner' +import { DeleteSinkModal } from './DeleteSinkModal' export const ReplicationSinks = () => { const { ref } = useParams() @@ -16,6 +17,8 @@ export const ReplicationSinks = () => { projectRef: ref, }) const [showCreateSinkModal, setShowCreateSinkModal] = useState(false) + const [showDeleteSinkModal, setShowDeleteSinkModal] = useState(false) + const [sinkIdToDelete, setSinkIdToDelete] = useState(-1) const sinks = sinks_data ?? [] @@ -73,7 +76,8 @@ export const ReplicationSinks = () => {