mirror of
https://github.com/supabase/supabase.git
synced 2026-06-14 14:08:31 +08:00
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 -->
72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
import { useParams } from 'common'
|
|
import { toast } from 'sonner'
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from 'ui'
|
|
|
|
import { useDisableReadOnlyModeMutation } from '@/data/config/project-temp-disable-read-only-mutation'
|
|
|
|
interface ConfirmDisableReadOnlyModeModalProps {
|
|
visible: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
const ConfirmDisableReadOnlyModeModal = ({
|
|
visible,
|
|
onClose,
|
|
}: ConfirmDisableReadOnlyModeModalProps) => {
|
|
const { ref } = useParams()
|
|
const { mutateAsync: disableReadOnlyMode, isPending } = useDisableReadOnlyModeMutation({
|
|
onSuccess: () => {
|
|
toast.success('Successfully disabled read-only mode for 15 minutes')
|
|
onClose()
|
|
},
|
|
})
|
|
|
|
return (
|
|
<AlertDialog open={visible} onOpenChange={onClose}>
|
|
<AlertDialogContent size="medium">
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Confirm to temporarily disable read-only mode</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
<div className="flex flex-col space-y-2">
|
|
<p className="text-sm">
|
|
This will temporarily allow writes to your database for the{' '}
|
|
<span className="text-amber-900">next 15 minutes</span>, during which you can reduce
|
|
your database size. After deleting data, you should run a vacuum to reclaim as much
|
|
space as possible.
|
|
</p>
|
|
<p className="text-sm">
|
|
If your database size has not been sufficiently reduced after 15 minutes, read-only
|
|
mode will be toggled back on. Otherwise, it will stay disabled.
|
|
</p>
|
|
</div>
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={async () => {
|
|
if (!ref) return console.error('Project ref is required')
|
|
await disableReadOnlyMode({ projectRef: ref })
|
|
}}
|
|
disabled={isPending}
|
|
loading={isPending}
|
|
>
|
|
Disable read-only mode
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
)
|
|
}
|
|
|
|
export default ConfirmDisableReadOnlyModeModal
|