DeleteQueue.tsx60 lines · main

1	import { useRouter } from 'next/router'
2	import { toast } from 'sonner'
3
4	import { TextConfirmModal } from '@/components/ui/TextConfirmModalWrapper'
5	import { useDatabaseQueueDeleteMutation } from '@/data/database-queues/database-queues-delete-mutation'
6	import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
7
8	interface DeleteQueueProps {
9	queueName: string
10	visible: boolean
11	onClose: () => void
12	}
13
14	export const DeleteQueue = ({ queueName, visible, onClose }: DeleteQueueProps) => {
15	const router = useRouter()
16	const { data: project } = useSelectedProjectQuery()
17
18	const { mutate: deleteDatabaseQueue, isPending } = useDatabaseQueueDeleteMutation({
19	onSuccess: () => {
20	toast.success(`Successfully removed queue ${queueName}`)
21	router.push(`/project/${project?.ref}/integrations/queues/queues`)
22	onClose()
23	},
24	})
25
26	async function handleDelete() {
27	if (!project) return console.error('Project is required')
28
29	deleteDatabaseQueue({
30	queueName: queueName,
31	projectRef: project.ref,
32	connectionString: project.connectionString,
33	})
34	}
35
36	if (!queueName) {
37	return null
38	}
39
40	return (
41	<TextConfirmModal
42	variant="destructive"
43	visible={visible}
44	onCancel={() => onClose()}
45	onConfirm={handleDelete}
46	title="Delete this queue"
47	loading={isPending}
48	confirmLabel={`Delete queue ${queueName}`}
49	confirmPlaceholder="Type in name of queue"
50	confirmString={queueName ?? 'Unknown'}
51	text={
52	<>
53	<span>This will delete the queue</span>{' '}
54	<span className="text-bold text-foreground">{queueName}</span>
55	</>
56	}
57	alert={{ title: 'You cannot recover this queue and its messages once deleted.' }}
58	/>
59	)
60	}