DisallowAllModal.tsx 1.9 KB

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