DeleteAnalyticsBucketModal.tsx69 lines · main

1	import { useParams } from 'common'
2	import { toast } from 'sonner'
3
4	import { useAnalyticsBucketDeleteCleanUp } from './AnalyticsBucketDetails/useAnalyticsBucketAssociatedEntities'
5	import { TextConfirmModal } from '@/components/ui/TextConfirmModalWrapper'
6	import { useAnalyticsBucketDeleteMutation } from '@/data/storage/analytics-bucket-delete-mutation'
7	import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
8
9	export interface DeleteAnalyticsBucketModalProps {
10	visible: boolean
11	bucketId?: string
12	onClose: () => void
13	onSuccess?: () => void
14	}
15
16	export const DeleteAnalyticsBucketModal = ({
17	visible,
18	bucketId,
19	onClose,
20	onSuccess,
21	}: DeleteAnalyticsBucketModalProps) => {
22	const { ref: projectRef } = useParams()
23	const { data: project } = useSelectedProjectQuery()
24
25	const { mutateAsync: deleteAnalyticsBucketCleanUp, isPending: isCleaningUpAnalyticsBucket } =
26	useAnalyticsBucketDeleteCleanUp({ projectRef, bucketId })
27
28	const { mutate: deleteAnalyticsBucket, isPending: isDeletingAnalyticsBucket } =
29	useAnalyticsBucketDeleteMutation({
30	onSuccess: async () => {
31	if (project?.connectionString) await deleteAnalyticsBucketCleanUp()
32	toast.success(`Successfully deleted analytics bucket ${bucketId}`)
33	onClose()
34	onSuccess?.()
35	},
36	})
37
38	const onConfirmDelete = async () => {
39	if (!projectRef) return console.error('Project ref is required')
40	if (!bucketId) return console.error('No bucket is selected')
41	deleteAnalyticsBucket({ projectRef, id: bucketId })
42	}
43
44	const isDeleting = isDeletingAnalyticsBucket || isCleaningUpAnalyticsBucket
45
46	return (
47	<TextConfirmModal
48	visible={visible}
49	size="medium"
50	variant="destructive"
51	title={`Delete bucket “${bucketId}”`}
52	loading={isDeleting}
53	confirmPlaceholder="Type bucket name"
54	confirmString={bucketId ?? ''}
55	confirmLabel="Delete bucket"
56	onCancel={onClose}
57	onConfirm={onConfirmDelete}
58	alert={{
59	title: 'You cannot recover this bucket once deleted',
60	description: 'This action cannot be undone',
61	}}
62	>
63	<p className="text-sm">
64	Your bucket <span className="font-bold text-foreground">{bucketId}</span> and all of its
65	contents will be permanently deleted.
66	</p>
67	</TextConfirmModal>
68	)
69	}