konnosDashboard
ConfirmRestoreDialog.tsx80 lines · main
1import {
2 Button,
3 Dialog,
4 DialogContent,
5 DialogDescription,
6 DialogFooter,
7 DialogHeader,
8 DialogSection,
9 DialogTitle,
10} from 'ui'
11
12import { AdditionalMonthlySpend } from './AdditionalMonthlySpend'
13import { NewProjectPrice } from './RestoreToNewProject.utils'
14import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
15import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
16
17interface ConfirmRestoreDialogProps {
18 open: boolean
19 onOpenChange: (value: boolean) => void
20 onSelectContinue: () => void
21 additionalMonthlySpend: NewProjectPrice
22}
23
24export const ConfirmRestoreDialog = ({
25 open,
26 onOpenChange,
27 onSelectContinue,
28 additionalMonthlySpend,
29}: ConfirmRestoreDialogProps) => {
30 const { data: project } = useSelectedProjectQuery()
31 const { data: organization } = useSelectedOrganizationQuery()
32
33 return (
34 <Dialog open={open} onOpenChange={onOpenChange}>
35 <DialogContent>
36 <DialogHeader className="border-b">
37 <DialogTitle>Confirm restore to a new project</DialogTitle>
38 <DialogDescription>
39 This process will create a new project and restore your database to it.
40 </DialogDescription>
41 </DialogHeader>
42 <DialogSection className="prose pb-6 space-y-4 text-sm">
43 <ul className="space-y-2">
44 <li>
45 Project organization will stay the same: <code>{organization?.name}</code>
46 </li>
47 <li>
48 Project region will stay the same: <code>{project?.region || ''}</code>
49 </li>
50 </ul>
51 <ul>
52 <li>What will be transferred?</li>
53 <ul className="ml-4">
54 <li>Database schema (tables, views, procedures)</li>
55 <li>All data and indexes</li>
56 <li>Database roles, permissions and users</li>
57 </ul>
58 </ul>
59 <ul>
60 <li>What needs manual reconfiguration?</li>
61 <ul className="ml-4">
62 <li>Storage objects & settings</li>
63 <li>Edge Functions</li>
64 <li>Auth settings & API keys</li>
65 <li>Database extensions and settings</li>
66 <li>Read replicas</li>
67 </ul>
68 </ul>
69 </DialogSection>
70 <AdditionalMonthlySpend additionalMonthlySpend={additionalMonthlySpend} />
71 <DialogFooter>
72 <Button type="outline" onClick={() => onOpenChange(false)}>
73 Cancel
74 </Button>
75 <Button onClick={() => onSelectContinue()}>Continue</Button>
76 </DialogFooter>
77 </DialogContent>
78 </Dialog>
79 )
80}