mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +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 -->
57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import { useParams } from 'common/hooks'
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from 'ui'
|
|
|
|
import { useNetworkRestrictionsApplyMutation } from '@/data/network-restrictions/network-retrictions-apply-mutation'
|
|
|
|
interface AllowAllModalProps {
|
|
visible: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
const AllowAllModal = ({ visible, onClose }: AllowAllModalProps) => {
|
|
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: ['0.0.0.0/0'],
|
|
dbAllowedCidrsV6: ['::/0'],
|
|
})
|
|
}
|
|
|
|
return (
|
|
<AlertDialog open={visible} onOpenChange={onClose}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Allow access from all IP addresses</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
This will allow any IP address to access your project's database. Are you sure?
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={isApplying}>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction onClick={onSubmit} disabled={isApplying} loading={isApplying}>
|
|
Confirm
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
)
|
|
}
|
|
|
|
export default AllowAllModal
|