DisallowAllModal.tsx59 lines · main

1	import { useParams } from 'common'
2	import { Button, Modal } from 'ui'
3
4	import InformationBox from '@/components/ui/InformationBox'
5	import { useNetworkRestrictionsApplyMutation } from '@/data/network-restrictions/network-retrictions-apply-mutation'
6
7	interface DisallowAllModalProps {
8	visible: boolean
9	onClose: () => void
10	}
11
12	const DisallowAllModal = ({ visible, onClose }: DisallowAllModalProps) => {
13	const { ref } = useParams()
14	const { mutate: applyNetworkRestrictions, isPending: isApplying } =
15	useNetworkRestrictionsApplyMutation({ onSuccess: () => onClose() })
16
17	const onSubmit = async () => {
18	if (!ref) return console.error('Project ref is required')
19	await applyNetworkRestrictions({
20	projectRef: ref,
21	dbAllowedCidrs: [],
22	dbAllowedCidrsV6: [],
23	})
24	}
25
26	return (
27	<Modal
28	hideFooter
29	size="medium"
30	visible={visible}
31	onCancel={onClose}
32	header="Restrict access from all IP addresses"
33	>
34	<Modal.Content className="space-y-4">
35	<p className="text-sm text-foreground-light">
36	This will prevent any external IP addresses from accessing your project's database. Are
37	you sure?
38	</p>
39	<InformationBox
40	defaultVisibility
41	hideCollapse
42	title="Note: Restrictions only apply to direct connections to your database and connection pooler"
43	description="They do not currently apply to APIs offered over HTTPS, such as PostgREST, Storage, or Authentication."
44	/>
45	</Modal.Content>
46	<Modal.Separator />
47	<Modal.Content className="flex items-center justify-end space-x-2">
48	<Button type="default" disabled={isApplying} onClick={() => onClose()}>
49	Cancel
50	</Button>
51	<Button loading={isApplying} disabled={isApplying} onClick={() => onSubmit()}>
52	Confirm
53	</Button>
54	</Modal.Content>
55	</Modal>
56	)
57	}
58
59	export default DisallowAllModal