DropAllReplicasConfirmationModal.tsx80 lines · main

1	import { useQueryClient } from '@tanstack/react-query'
2	import { useParams } from 'common'
3	import { toast } from 'sonner'
4	import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
5
6	import { replicaKeys } from '@/data/read-replicas/keys'
7	import { useReadReplicaRemoveMutation } from '@/data/read-replicas/replica-remove-mutation'
8	import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
9
10	interface DropAllReplicasConfirmationModalProps {
11	visible: boolean
12	onSuccess: () => void
13	onCancel: () => void
14	}
15
16	const DropAllReplicasConfirmationModal = ({
17	visible,
18	onSuccess,
19	onCancel,
20	}: DropAllReplicasConfirmationModalProps) => {
21	const { ref: projectRef } = useParams()
22	const queryClient = useQueryClient()
23	const { data: databases } = useReadReplicasQuery({ projectRef })
24	const { mutateAsync: removeReadReplica, isPending: isRemoving } = useReadReplicaRemoveMutation()
25
26	const onConfirmRemove = async () => {
27	if (!projectRef) return console.error('Project is required')
28	if (databases === undefined) return console.error('Unable to retrieve replicas')
29	if (databases.length === 1) toast('Your project has no read replicas')
30
31	const replicas = databases.filter((db) => db.identifier !== projectRef)
32	try {
33	await Promise.all(
34	replicas.map((db) =>
35	removeReadReplica({
36	projectRef,
37	identifier: db.identifier,
38	invalidateReplicaQueries: false,
39	})
40	)
41	)
42	toast.success(`Tearing down all read replicas`)
43
44	await Promise.all([
45	queryClient.invalidateQueries({ queryKey: replicaKeys.list(projectRef) }),
46	queryClient.invalidateQueries({ queryKey: replicaKeys.loadBalancers(projectRef) }),
47	])
48
49	onSuccess()
50	onCancel()
51	} catch (error) {
52	toast.error('Failed to drop all replicas')
53	}
54	}
55
56	return (
57	<ConfirmationModal
58	variant={'destructive'}
59	size="medium"
60	loading={isRemoving}
61	visible={visible}
62	title="Confirm to drop all read replicas?"
63	confirmLabel="Drop all replicas"
64	confirmLabelLoading="Dropping all replicas"
65	onCancel={() => onCancel()}
66	onConfirm={() => onConfirmRemove()}
67	alert={{
68	title: 'This action cannot be undone',
69	description: 'You may still deploy new replicas in this region thereafter',
70	}}
71	>
72	<p className="text-sm">Before deleting all replicas, consider:</p>
73	<ul className="text-sm text-foreground-light list-disc pl-6">
74	<li>Network traffic from this region may slow down</li>
75	</ul>
76	</ConfirmationModal>
77	)
78	}
79
80	export default DropAllReplicasConfirmationModal