AllowAllModal.tsx53 lines · main

1	import { useParams } from 'common/hooks'
2	import { Button, Modal } from 'ui'
3
4	import { useNetworkRestrictionsApplyMutation } from '@/data/network-restrictions/network-retrictions-apply-mutation'
5
6	interface AllowAllModalProps {
7	visible: boolean
8	onClose: () => void
9	}
10
11	const AllowAllModal = ({ visible, onClose }: AllowAllModalProps) => {
12	const { ref } = useParams()
13	const { mutate: applyNetworkRestrictions, isPending: isApplying } =
14	useNetworkRestrictionsApplyMutation({
15	onSuccess: () => onClose(),
16	})
17
18	const onSubmit = async () => {
19	if (!ref) return console.error('Project ref is required')
20	applyNetworkRestrictions({
21	projectRef: ref,
22	dbAllowedCidrs: ['0.0.0.0/0'],
23	dbAllowedCidrsV6: ['::/0'],
24	})
25	}
26
27	return (
28	<Modal
29	hideFooter
30	size="small"
31	visible={visible}
32	onCancel={onClose}
33	header="Allow access from all IP addresses"
34	>
35	<Modal.Content className="space-y-4">
36	<p className="text-sm text-foreground-light">
37	This will allow any IP address to access your project's database. Are you sure?
38	</p>
39	</Modal.Content>
40	<Modal.Separator />
41	<Modal.Content className="flex items-center justify-end space-x-2">
42	<Button type="default" disabled={isApplying} onClick={() => onClose()}>
43	Cancel
44	</Button>
45	<Button loading={isApplying} disabled={isApplying} onClick={() => onSubmit()}>
46	Confirm
47	</Button>
48	</Modal.Content>
49	</Modal>
50	)
51	}
52
53	export default AllowAllModal