Skip to content

Commit 1b4887a

Browse files
jgouxjgoux
committed
delete confirmation dialog
1 parent f3451e9 commit 1b4887a

File tree

9 files changed

+341
-91
lines changed

9 files changed

+341
-91
lines changed

‎apps/postgres-new/components/sidebar/database-list/database-item/database-item-actions/database-item-actions.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import { cn } from '~/lib/utils'
99
import { DatabaseItemRenameAction, RenameDatabaseForm } from './database-item-rename-action'
1010
import { useState } from 'react'
1111
import { DatabaseItemDownloadAction } from './database-item-download-action'
12-
import { DatabaseItemDeployAction } from './database-item-deploy-action'
13-
import { DatabaseItemDeleteAction } from './database-item-delete-action'
12+
import { DatabaseItemDeployAction } from './database-item-deploy-action/database-item-deploy-action'
13+
import { DatabaseItemDeleteAction } from './database-item-delete-action/database-item-delete-action'
1414
import { Button } from '~/components/ui/button'
1515
import { Database } from '~/data/databases/database-type'
1616

@@ -26,6 +26,7 @@ export function DatabaseItemActions(props: DatabaseItemActionsProps) {
2626

2727
function handleDialogOpenChange(open: boolean) {
2828
setHasOpenDialog(open)
29+
console.log({ open })
2930
if (open === false) {
3031
setIsDropdownOpen(false)
3132
}
@@ -72,7 +73,11 @@ export function DatabaseItemActions(props: DatabaseItemActionsProps) {
7273
onDialogOpenChange={handleDialogOpenChange}
7374
/>
7475
<DropdownMenuSeparator />
75-
<DatabaseItemDeleteAction database={props.database} isActive={props.isActive} />
76+
<DatabaseItemDeleteAction
77+
onDialogOpenChange={handleDialogOpenChange}
78+
database={props.database}
79+
isActive={props.isActive}
80+
/>
7681
</div>
7782
)}
7883
</DropdownMenuContent>

‎apps/postgres-new/components/sidebar/database-list/database-item/database-item-actions/database-item-delete-action.tsx

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎apps/postgres-new/components/sidebar/database-list/database-item/database-item-actions/database-item-delete-action/confirm-database-delete-alert.tsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { AlertDialogPortal } from '@radix-ui/react-alert-dialog'
2+
import { Loader } from 'lucide-react'
3+
import { useRouter } from 'next/navigation'
4+
import { useState } from 'react'
5+
import {
6+
AlertDialog,
7+
AlertDialogAction,
8+
AlertDialogCancel,
9+
AlertDialogContent,
10+
AlertDialogDescription,
11+
AlertDialogFooter,
12+
AlertDialogHeader,
13+
AlertDialogTitle,
14+
AlertDialogTrigger,
15+
} from '~/components/ui/alert-dialog'
16+
import { useDatabasesDeleteMutation } from '~/data/databases/database-delete-mutation'
17+
import { Database } from '~/data/databases/database-type'
18+
19+
type ConfirmDatabaseDeleteAlertProps = {
20+
children: React.ReactNode
21+
database: Database
22+
isActive: boolean
23+
onOpenChange: (open: boolean) => void
24+
}
25+
26+
export function ConfirmDatabaseDeleteAlert(props: ConfirmDatabaseDeleteAlertProps) {
27+
const router = useRouter()
28+
const [isOpen, setIsOpen] = useState(false)
29+
const { deleteDatabase, isLoading: isDeleting } = useDatabasesDeleteMutation()
30+
31+
function handleOpenChange(open: boolean) {
32+
setIsOpen(open)
33+
props.onOpenChange(open)
34+
}
35+
36+
async function handleDelete() {
37+
await deleteDatabase(props.database)
38+
setIsOpen(false)
39+
if (props.isActive) {
40+
router.push('/')
41+
}
42+
}
43+
44+
return (
45+
<AlertDialog open={isOpen} onOpenChange={handleOpenChange}>
46+
<AlertDialogTrigger asChild>{props.children}</AlertDialogTrigger>
47+
<AlertDialogPortal>
48+
<AlertDialogContent>
49+
<AlertDialogHeader>
50+
<AlertDialogTitle>Delete database?</AlertDialogTitle>
51+
<AlertDialogDescription>
52+
This will permanently delete "{props.database.name}".
53+
{props.database.deployment && ' All connected applications will lose access.'}
54+
</AlertDialogDescription>
55+
</AlertDialogHeader>
56+
<AlertDialogFooter>
57+
<AlertDialogCancel>Cancel</AlertDialogCancel>
58+
<AlertDialogAction disabled={isDeleting} onClick={handleDelete}>
59+
{isDeleting ? (
60+
<span className="flex items-center">
61+
<Loader
62+
className="animate-spin flex-shrink-0 text-muted-foreground mr-2"
63+
size={16}
64+
strokeWidth={2}
65+
/>{' '}
66+
Deleting
67+
</span>
68+
) : (
69+
'Delete'
70+
)}
71+
</AlertDialogAction>
72+
</AlertDialogFooter>
73+
</AlertDialogContent>
74+
</AlertDialogPortal>
75+
</AlertDialog>
76+
)
77+
}

‎apps/postgres-new/components/sidebar/database-list/database-item/database-item-actions/database-item-delete-action/database-item-delete-action.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Trash2 } from 'lucide-react'
2+
import { DropdownMenuItem } from '~/components/ui/dropdown-menu'
3+
import { Database } from '~/data/databases/database-type'
4+
import { ConfirmDatabaseDeleteAlert } from './confirm-database-delete-alert'
5+
6+
export type DatabaseItemDeleteActionProps = {
7+
database: Database
8+
isActive: boolean
9+
onDialogOpenChange: (isOpen: boolean) => void
10+
}
11+
12+
export function DatabaseItemDeleteAction(props: DatabaseItemDeleteActionProps) {
13+
return (
14+
<ConfirmDatabaseDeleteAlert
15+
database={props.database}
16+
isActive={props.isActive}
17+
onOpenChange={props.onDialogOpenChange}
18+
>
19+
<DropdownMenuItem
20+
className="gap-3"
21+
onSelect={(e) => {
22+
e.preventDefault()
23+
}}
24+
>
25+
<Trash2 size={16} strokeWidth={2} className="flex-shrink-0 text-muted-foreground" />
26+
<span>Delete</span>
27+
</DropdownMenuItem>
28+
</ConfirmDatabaseDeleteAlert>
29+
)
30+
}

‎apps/postgres-new/components/sidebar/database-list/database-item/database-item-actions/database-item-deploy-action/database-deployed-dialog.tsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { DeployedDatabaseFields } from '~/components/deployed-database-fields'
2+
import {
3+
Dialog,
4+
DialogContent,
5+
DialogHeader,
6+
DialogPortal,
7+
DialogTitle,
8+
} from '~/components/ui/dialog'
9+
import { Database } from '~/data/databases/database-type'
10+
import { DeployedDatabaseCreateResult } from '~/data/deployed-databases/deployed-database-create-mutation'
11+
12+
export type DatabaseDeployedDialogProps = {
13+
open: boolean
14+
onOpenChange: (open: boolean) => void
15+
database: Database
16+
} & DeployedDatabaseCreateResult
17+
18+
export function DatabaseDeployedDialog(props: DatabaseDeployedDialogProps) {
19+
return (
20+
<Dialog open={props.open} onOpenChange={props.onOpenChange}>
21+
<DialogPortal>
22+
<DialogContent className="max-w-2xl">
23+
<DialogHeader>
24+
<DialogTitle>Database {props.database.name} deployed</DialogTitle>
25+
<div className="py-2 border-b" />
26+
</DialogHeader>
27+
<p className="text-sm text-muted-foreground">
28+
Your database has been deployed to a serverless{' '}
29+
<a
30+
className="underline font-bold"
31+
href="https://pglite.dev"
32+
target="_blank"
33+
rel="noopener noreferrer"
34+
>
35+
PGlite
36+
</a>{' '}
37+
instance so that it can be accessed outside the browser using any Postgres client.
38+
</p>
39+
<DeployedDatabaseFields {...props} />
40+
{props.password && (
41+
<div className="flex justify-center pt-2">
42+
<p className="text-sm text-muted-foreground">
43+
Please{' '}
44+
<span className="font-bold text-destructive-foreground">save your password</span>,
45+
it will not be shown again!
46+
</p>
47+
</div>
48+
)}
49+
</DialogContent>
50+
</DialogPortal>
51+
</Dialog>
52+
)
53+
}

‎apps/postgres-new/components/sidebar/database-list/database-item/database-item-actions/database-item-deploy-action.tsx renamed to ‎apps/postgres-new/components/sidebar/database-list/database-item/database-item-actions/database-item-deploy-action/database-item-deploy-action.tsx

Lines changed: 2 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,13 @@
11
import { Loader, Upload } from 'lucide-react'
22
import { useState } from 'react'
33
import { useApp } from '~/components/app-provider'
4-
import { DeployedDatabaseFields } from '~/components/deployed-database-fields'
5-
import {
6-
Dialog,
7-
DialogContent,
8-
DialogHeader,
9-
DialogPortal,
10-
DialogTitle,
11-
} from '~/components/ui/dialog'
124
import { DropdownMenuItem } from '~/components/ui/dropdown-menu'
135
import { Database } from '~/data/databases/database-type'
146
import {
157
DeployedDatabaseCreateResult,
168
useDeployedDatabaseCreateMutation,
179
} from '~/data/deployed-databases/deployed-database-create-mutation'
10+
import { DatabaseDeployedDialog } from './database-deployed-dialog'
1811

1912
export type DatabaseItemDeployActionProps = {
2013
database: Database
@@ -36,7 +29,7 @@ export function DatabaseItemDeployAction(props: DatabaseItemDeployActionProps) {
3629
}}
3730
/>
3831
{deployResult && (
39-
<DatabaseItemDeployActionDialog
32+
<DatabaseDeployedDialog
4033
open={isDialogOpen}
4134
onOpenChange={props.onDialogOpenChange}
4235
database={props.database}
@@ -89,46 +82,3 @@ function DatabaseItemDeployActionMenuItem(props: DatabaseItemDeployActionMenuIte
8982
</DropdownMenuItem>
9083
)
9184
}
92-
93-
type DatabaseItemDeployActionDialogProps = {
94-
open: boolean
95-
onOpenChange: (open: boolean) => void
96-
database: Database
97-
} & DeployedDatabaseCreateResult
98-
99-
function DatabaseItemDeployActionDialog(props: DatabaseItemDeployActionDialogProps) {
100-
return (
101-
<Dialog open={props.open} onOpenChange={props.onOpenChange}>
102-
<DialogPortal>
103-
<DialogContent className="max-w-2xl">
104-
<DialogHeader>
105-
<DialogTitle>Database {props.database.name} deployed</DialogTitle>
106-
<div className="py-2 border-b" />
107-
</DialogHeader>
108-
<p className="text-sm text-muted-foreground">
109-
Your database has been deployed to a serverless{' '}
110-
<a
111-
className="underline font-bold"
112-
href="https://pglite.dev"
113-
target="_blank"
114-
rel="noopener noreferrer"
115-
>
116-
PGlite
117-
</a>{' '}
118-
instance so that it can be accessed outside the browser using any Postgres client.
119-
</p>
120-
<DeployedDatabaseFields {...props} />
121-
{props.password && (
122-
<div className="flex justify-center pt-2">
123-
<p className="text-sm text-muted-foreground">
124-
Please{' '}
125-
<span className="font-bold text-destructive-foreground">save your password</span>,
126-
it will not be shown again!
127-
</p>
128-
</div>
129-
)}
130-
</DialogContent>
131-
</DialogPortal>
132-
</Dialog>
133-
)
134-
}

0 commit comments

Comments
 (0)