From b67c091244d522a51b408b68a8b01495aae3198b Mon Sep 17 00:00:00 2001
From: itsmeakhil <akhiledathadan007@gmail.com>
Date: Wed, 17 Jun 2026 17:55:47 +0530
Subject: [PATCH] fix(nosql): replace browser confirm() with AlertDialog in
 connection-form, clean up handlers

Replace window.confirm() in connection-form delete handler with AlertDialog for consistent in-app modal UI. Remove unnecessary async keywords from dialog trigger handlers (handleDropDatabase, handleDropCollection) since they don't await anything. This ensures all destructive actions use shadcn AlertDialog instead of browser native dialogs.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../nosql-explorer/connection-form.tsx        | 38 +++++++++++++++++--
 .../nosql-explorer/explorer-sidebar.tsx       |  9 ++---
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/nosql-explorer/connection-form.tsx b/apps/web/src/components/nosql-explorer/connection-form.tsx
index 32cfbc43..32a1e428 100644
--- a/apps/web/src/components/nosql-explorer/connection-form.tsx
+++ b/apps/web/src/components/nosql-explorer/connection-form.tsx
@@ -18,6 +18,16 @@ import type { Locale } from "date-fns";
 import { cn } from "@/lib/utils";
 import { useTranslations, useLocale } from "next-intl";
 import { af, ar, ca, cs as csLocale, da, de, el, enUS, es, faIR, fr as frLocale, ms, nb, nl, pt, zhCN } from "date-fns/locale";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
 interface ConnectionFormProps {
     onConnect: (connectionString: string) => Promise<void>;
@@ -41,6 +51,7 @@ export function ConnectionForm({ onConnect, loading, error }: ConnectionFormProp
     const [isLoadingConnections, setIsLoadingConnections] = useState(false);
     const [isTesting, setIsTesting] = useState(false);
     const [editingId, setEditingId] = useState<string | null>(null);
+    const [deleteConnDialog, setDeleteConnDialog] = useState<{ open: boolean; id: string | null }>({ open: false, id: null });
 
     useEffect(() => {
         if (user) {
@@ -124,16 +135,22 @@ export function ConnectionForm({ onConnect, loading, error }: ConnectionFormProp
 
     const handleDeleteConnection = async (e: React.MouseEvent, id: string) => {
         e.stopPropagation();
-        if (!user) return;
-        if (!confirm(t("confirmDelete"))) return;
+        setDeleteConnDialog({ open: true, id });
+    };
+
+    const confirmDeleteConnection = async () => {
+        const id = deleteConnDialog.id;
+        if (!user || !id) return;
 
         try {
             await deleteConnection(user.uid, id);
             toast.success(t("toastDeletedConn"));
             if (editingId === id) handleCancelEdit();
-            loadConnections();
+            await loadConnections();
         } catch (error) {
             toast.error(t("toastDeleteFail"));
+        } finally {
+            setDeleteConnDialog({ open: false, id: null });
         }
     };
 
@@ -313,6 +330,21 @@ export function ConnectionForm({ onConnect, loading, error }: ConnectionFormProp
                     </CardContent>
                 </Card>
             </div>
+
+            <AlertDialog open={deleteConnDialog.open} onOpenChange={(open) => setDeleteConnDialog(prev => ({ ...prev, open }))}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>{t("confirmDelete")}</AlertDialogTitle>
+                        <AlertDialogDescription>{t("toastDeletedConn")}</AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+                        <AlertDialogAction onClick={confirmDeleteConnection} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+                            {t("menuDeleteConnection")}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
         </div>
     );
 }
diff --git a/apps/web/src/components/nosql-explorer/explorer-sidebar.tsx b/apps/web/src/components/nosql-explorer/explorer-sidebar.tsx
index 2757ea2d..00336e49 100644
--- a/apps/web/src/components/nosql-explorer/explorer-sidebar.tsx
+++ b/apps/web/src/components/nosql-explorer/explorer-sidebar.tsx
@@ -268,9 +268,8 @@ export function ExplorerSidebar({
         }
     };
 
-    const handleDeleteConnection = async (index: number) => {
+    const handleDeleteConnection = (index: number) => {
         setDeleteConnDialog({ open: true, index });
-        return;
     };
 
     const confirmDeleteConnection = async () => {
@@ -289,9 +288,8 @@ export function ExplorerSidebar({
         }
     };
 
-    const handleDropDatabase = async (connIndex: number, dbName: string) => {
+    const handleDropDatabase = (connIndex: number, dbName: string) => {
         setDropDbDialog({ open: true, connIndex, dbName });
-        return;
     };
 
     const confirmDropDatabase = async () => {
@@ -315,9 +313,8 @@ export function ExplorerSidebar({
         }
     };
 
-    const handleDropCollection = async (connIndex: number, dbName: string, collectionName: string) => {
+    const handleDropCollection = (connIndex: number, dbName: string, collectionName: string) => {
         setDropCollDialog({ open: true, connIndex, dbName, collectionName });
-        return;
     };
 
     const confirmDropCollection = async () => {