konnosDashboard
DisableExternalReplicationDialog.tsx74 lines · main
1import { useParams } from 'common'
2import { toast } from 'sonner'
3import {
4 AlertDialog,
5 AlertDialogAction,
6 AlertDialogCancel,
7 AlertDialogContent,
8 AlertDialogDescription,
9 AlertDialogFooter,
10 AlertDialogHeader,
11 AlertDialogTitle,
12 Button,
13} from 'ui'
14
15import { useDeleteReplicationTenantMutation } from '@/data/replication/delete-tenant-mutation'
16
17interface DisableExternalReplicationDialogProps {
18 open: boolean
19 setOpen: (value: boolean) => void
20}
21
22export const DisableExternalReplicationDialog = ({
23 open,
24 setOpen,
25}: DisableExternalReplicationDialogProps) => {
26 const { ref: projectRef } = useParams()
27
28 const { mutateAsync: deleteReplicationTenant, isPending: isSubmitting } =
29 useDeleteReplicationTenantMutation({
30 onSuccess: () => {
31 toast.success('External replication has been disabled')
32 setOpen(false)
33 },
34 })
35
36 const onConfirm = async () => {
37 if (!projectRef) return console.error('Project ref is required')
38 await deleteReplicationTenant({ projectRef })
39 }
40
41 return (
42 <AlertDialog open={open} onOpenChange={(open) => !isSubmitting && setOpen(open)}>
43 <AlertDialogContent size="medium">
44 <AlertDialogHeader>
45 <AlertDialogTitle>Confirm to disable external replication</AlertDialogTitle>
46 <AlertDialogDescription className="space-y-2 text-sm">
47 <p>
48 This will remove the <code className="text-code-inline">etl</code> schema and all
49 connected resources from your database. Any active pipelines sending changes to
50 external destinations will stop.
51 </p>
52 <p>Read replicas are not affected.</p>
53 </AlertDialogDescription>
54 </AlertDialogHeader>
55 <AlertDialogFooter>
56 <AlertDialogCancel disabled={isSubmitting}>Cancel</AlertDialogCancel>
57 <AlertDialogAction variant="danger" asChild>
58 <Button
59 type="danger"
60 loading={isSubmitting}
61 disabled={isSubmitting}
62 onClick={(e) => {
63 e.preventDefault()
64 onConfirm()
65 }}
66 >
67 Disable external replication
68 </Button>
69 </AlertDialogAction>
70 </AlertDialogFooter>
71 </AlertDialogContent>
72 </AlertDialog>
73 )
74}