ConfirmDisableReadOnlyModal.tsx53 lines · main

1	import { useParams } from 'common'
2	import { toast } from 'sonner'
3	import { Modal } from 'ui'
4
5	import { useDisableReadOnlyModeMutation } from '@/data/config/project-temp-disable-read-only-mutation'
6
7	interface ConfirmDisableReadOnlyModeModalProps {
8	visible: boolean
9	onClose: () => void
10	}
11
12	const ConfirmDisableReadOnlyModeModal = ({
13	visible,
14	onClose,
15	}: ConfirmDisableReadOnlyModeModalProps) => {
16	const { ref } = useParams()
17	const { mutate: disableReadOnlyMode, isPending } = useDisableReadOnlyModeMutation({
18	onSuccess: () => {
19	toast.success('Successfully disabled read-only mode for 15 minutes')
20	onClose()
21	},
22	})
23
24	return (
25	<Modal
26	alignFooter="right"
27	visible={visible}
28	onCancel={onClose}
29	loading={isPending}
30	confirmText="Disable read-only mode"
31	header="Confirm to temporarily disable read-only mode"
32	onConfirm={() => {
33	if (!ref) return console.error('Project ref is required')
34	disableReadOnlyMode({ projectRef: ref })
35	}}
36	>
37	<Modal.Content className="space-y-2">
38	<p className="text-sm">
39	This will temporarily allow writes to your database for the{' '}
40	<span className="text-amber-900">next 15 minutes</span>, during which you can reduce your
41	database size. After deleting data, you should run a vacuum to reclaim as much space as
42	possible.
43	</p>
44	<p className="text-sm">
45	If your database size has not been sufficiently reduced after 15 minutes, read-only mode
46	will be toggled back on. Otherwise, it will stay disabled.
47	</p>
48	</Modal.Content>
49	</Modal>
50	)
51	}
52
53	export default ConfirmDisableReadOnlyModeModal