konnosDashboard
RemoveRestrictionModal.tsx98 lines · main
1import { useParams } from 'common'
2import { toast } from 'sonner'
3import { Button, Modal } from 'ui'
4import { Admonition } from 'ui-patterns'
5
6import { useNetworkRestrictionsQuery } from '@/data/network-restrictions/network-restrictions-query'
7import { useNetworkRestrictionsApplyMutation } from '@/data/network-restrictions/network-retrictions-apply-mutation'
8
9interface RemoveRestrictionModalProps {
10 visible: boolean
11 selectedRestriction?: string
12 onClose: () => void
13}
14
15const RemoveRestrictionModal = ({
16 visible,
17 selectedRestriction,
18 onClose,
19}: RemoveRestrictionModalProps) => {
20 const { ref } = useParams()
21
22 const { data } = useNetworkRestrictionsQuery({ projectRef: ref }, { enabled: visible })
23 const ipv4Restrictions = data?.config?.dbAllowedCidrs ?? []
24 // @ts-ignore [Joshen] API typing issue
25 const ipv6Restrictions: string[] = data?.config?.dbAllowedCidrsV6 ?? []
26 const restrictedIps = ipv4Restrictions.concat(ipv6Restrictions)
27
28 const { mutate: applyNetworkRestrictions, isPending: isApplying } =
29 useNetworkRestrictionsApplyMutation({
30 onSuccess: () => onClose(),
31 onError: (error) => {
32 toast.error(`Failed to remove restriction: ${error.message}`)
33 },
34 })
35
36 const isRemovingOnlyRestriction =
37 restrictedIps.length === 1 && restrictedIps[0] === selectedRestriction
38
39 const onSubmit = async () => {
40 if (!ref) return console.error('Project ref is required')
41 if (!selectedRestriction) return console.error('Missing selected restriction')
42
43 const dbAllowedCidrs = ipv4Restrictions.includes(selectedRestriction)
44 ? ipv4Restrictions.filter((ip) => ip !== selectedRestriction)
45 : ipv4Restrictions
46 const dbAllowedCidrsV6 = ipv6Restrictions.includes(selectedRestriction)
47 ? ipv6Restrictions.filter((ip) => ip !== selectedRestriction)
48 : ipv6Restrictions
49
50 if (dbAllowedCidrs.length === 0 && dbAllowedCidrsV6.length === 0) {
51 applyNetworkRestrictions({
52 projectRef: ref,
53 dbAllowedCidrs: ['0.0.0.0/0'],
54 dbAllowedCidrsV6: ['::/0'],
55 })
56 } else {
57 applyNetworkRestrictions({ projectRef: ref, dbAllowedCidrs, dbAllowedCidrsV6 })
58 }
59 }
60
61 return (
62 <Modal
63 hideFooter
64 size="medium"
65 visible={visible}
66 onCancel={onClose}
67 header="Confirm to remove restriction"
68 >
69 <Modal.Content className="space-y-4">
70 <p className="text-sm text-foreground-light">
71 The IPv4 address <code className="text-code-inline">{selectedRestriction}</code> will be
72 removed from your list of network restrictions
73 {isRemovingOnlyRestriction
74 ? '.'
75 : ", and no longer have access to your project's database."}
76 </p>
77 {isRemovingOnlyRestriction && (
78 <Admonition
79 type="warning"
80 title="Database access will no longer be restricted"
81 description="Removing all network restrictions will default to your database being accessible from
82 all IP addresses."
83 />
84 )}
85 </Modal.Content>
86 <Modal.Content className="flex items-center justify-end space-x-2">
87 <Button type="default" disabled={isApplying} onClick={() => onClose()}>
88 Cancel
89 </Button>
90 <Button loading={isApplying} disabled={isApplying} onClick={() => onSubmit()}>
91 Remove restriction
92 </Button>
93 </Modal.Content>
94 </Modal>
95 )
96}
97
98export default RemoveRestrictionModal