mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 10:55:06 +03:00
Gildas Garcia
3c2255c27c
## Problem Database settings still uses the deprecated `Modal` for: - readonly toggle - password reset - disk size configuration - network restrictions ## Solution - use `Dialog` instead - use `AlertDialog` when it makes sense <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Replaced various Database settings modals with unified Dialog/AlertDialog components for a consistent look and behavior. * Confirmation flows now await async submit actions; confirm/cancel controls are disabled and show loading while operations are pending. * Validation, loading/disabled states, and user-facing success/error messaging remain intact. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46270?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import { useParams } from 'common'
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from 'ui'
|
|
|
|
import InformationBox from '@/components/ui/InformationBox'
|
|
import { useNetworkRestrictionsApplyMutation } from '@/data/network-restrictions/network-retrictions-apply-mutation'
|
|
|
|
interface DisallowAllModalProps {
|
|
visible: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
const DisallowAllModal = ({ visible, onClose }: DisallowAllModalProps) => {
|
|
const { ref } = useParams()
|
|
const { mutateAsync: applyNetworkRestrictions, isPending: isApplying } =
|
|
useNetworkRestrictionsApplyMutation({ onSuccess: () => onClose() })
|
|
|
|
const onSubmit = async () => {
|
|
if (!ref) return console.error('Project ref is required')
|
|
await applyNetworkRestrictions({
|
|
projectRef: ref,
|
|
dbAllowedCidrs: [],
|
|
dbAllowedCidrsV6: [],
|
|
})
|
|
}
|
|
|
|
return (
|
|
<AlertDialog open={visible} onOpenChange={onClose}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Restrict access from all IP addresses</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
<div className="flex flex-col space-y-4">
|
|
<p>
|
|
This will prevent any external IP addresses from accessing your project's database.
|
|
Are you sure?
|
|
</p>
|
|
<InformationBox
|
|
defaultVisibility
|
|
hideCollapse
|
|
title="Note: Restrictions only apply to direct connections to your database and connection pooler"
|
|
description="They do not currently apply to APIs offered over HTTPS, such as PostgREST, Storage, or Authentication."
|
|
/>
|
|
</div>
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={isApplying}>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction onClick={onSubmit} disabled={isApplying} loading={isApplying}>
|
|
Confirm
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
)
|
|
}
|
|
|
|
export default DisallowAllModal
|