feat: more cautious redeploy dialog

Author: gregnr

apps/postgres-new/components/deploy/redeploy-alert-dialog.tsx

@@ -0,0 +1,83 @@
+import { TriangleAlert } from 'lucide-react'
+import { useState } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '~/components/ui/dialog'
+import { Input } from '~/components/ui/input'
+import { Database } from '~/lib/db'
+import { Button } from '../ui/button'
+
+export type RedeployDialogProps = {
+  database: Database
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export function RedeployDialog({
+  database,
+  isOpen,
+  onOpenChange,
+  onConfirm,
+  onCancel,
+}: RedeployDialogProps) {
+  const [confirmedValue, setConfirmedValue] = useState('')
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle className="mb-4">Confirm redeploy of {database.name}</DialogTitle>
+          <DialogDescription className="flex flex-col gap-4">
+            <div className="flex gap-2 items-center rounded-md border-destructive bg-destructive/25 p-2">
+              <TriangleAlert size={16} />
+              This action cannot be undone.
+            </div>
+            <p>
+              Redeploying will completely overwrite the existing deployed database with the latest
+              version of your browser database. Existing schema and data in the deployed database
+              will be lost.
+            </p>
+            <div className="my-1 border-b" />
+            <div className="flex flex-col gap-3">
+              <p>
+                Type <strong>{database.name}</strong> to confirm.
+              </p>
+              <Input
+                className="placeholder:text-primary/25"
+                placeholder="Type the database name here"
+                value={confirmedValue}
+                onChange={(e) => setConfirmedValue(e.target.value)}
+              />
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="mt-1">
+          <Button
+            variant="secondary"
+            onClick={() => {
+              onOpenChange(false)
+              onCancel()
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            className="bg-destructive text-primary hover:text-secondary"
+            onClick={() => {
+              onConfirm()
+            }}
+            disabled={confirmedValue !== database.name}
+          >
+            I understand, overwrite the database
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

apps/postgres-new/components/deploy/redeploy-dialog.tsx

@@ -35,7 +35,7 @@ import { cn } from '~/lib/utils'
 import { useApp } from './app-provider'
 import { DeployDialog } from './deploy/deploy-dialog'
 import { IntegrationDialog } from './deploy/integration-dialog'
-import { RedeployAlertDialog } from './deploy/redeploy-alert-dialog'
+import { RedeployDialog } from './deploy/redeploy-dialog'
 import { LiveShareIcon } from './live-share-icon'
 import SignInButton from './sign-in-button'
 import { SupabaseIcon } from './supabase-icon'
@@ -330,7 +330,7 @@ function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) {
 
   const [isIntegrationDialogOpen, setIsIntegrationDialogOpen] = useState(false)
   const [isDeployDialogOpen, setIsDeployDialogOpen] = useState(false)
-  const [isRedeployAlertDialogOpen, setIsRedeployAlertDialogOpen] = useState(false)
+  const [isRedeployDialogOpen, setIsRedeployDialogOpen] = useState(false)
   const [deployUrl, setDeployUrl] = useState<string | null>(null)
 
   const [isDeploying, setIsDeploying] = useState(false)
@@ -366,9 +366,10 @@ function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) {
           router.push(deployUrl)
         }}
       />
-      <RedeployAlertDialog
-        isOpen={isRedeployAlertDialogOpen}
-        onOpenChange={setIsRedeployAlertDialogOpen}
+      <RedeployDialog
+        database={database}
+        isOpen={isRedeployDialogOpen}
+        onOpenChange={setIsRedeployDialogOpen}
         onConfirm={() => {
           router.push(deployUrl!)
         }}
@@ -526,8 +527,10 @@ function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) {
                           e.preventDefault()
                           if (!supabaseIntegration) {
                             setIsIntegrationDialogOpen(true)
-                          } else {
+                          } else if (!database.isDeployed) {
                             setIsDeployDialogOpen(true)
+                          } else {
+                            setIsRedeployDialogOpen(true)
                           }
                         }}
                       >