feat: Give a pop-up window prompt before deleting the database infini…

…flow#1841
cike8899 · Nov 1, 2024 · f6c95cb · f6c95cb
1 parent 14af712
commit f6c95cb
Show file tree

Hide file tree

Showing 9 changed files with 614 additions and 113 deletions.
diff --git a/gui/app/(dashboard)/database-card.tsx b/gui/app/(dashboard)/database-card.tsx
@@ -1,6 +1,16 @@
 'use client';
 
-import { toast } from '@/components/hooks/use-toast';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@/components/ui/alert-dialog';
 import {
   Card,
   CardDescription,
@@ -10,55 +20,70 @@ import {
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu';
-import { DropOption } from '@/lib/constant/common';
-import { DropdownMenuItem } from '@radix-ui/react-dropdown-menu';
-import { useRouter } from 'next/navigation';
-import { dropDatabase } from './actions';
+import { PropsWithChildren } from 'react';
 import DeleteIcon from '/public/delete.svg';
 import MoreIcon from '/public/more.svg';
 
+interface IProps {
+  deleteItem?: () => void;
+}
+
+const DeleteConfirm = ({
+  children,
+  deleteItem
+}: PropsWithChildren & IProps) => {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you sure you want to delete?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={deleteItem}>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
 export const DeleteDropdown = ({
   children,
   deleteItem
-}: React.PropsWithChildren<{ deleteItem: () => void }>) => {
+}: React.PropsWithChildren<{ deleteItem?: () => void }>) => {
   return (
-    <DropdownMenu>
+    <DropdownMenu modal={false}>
       <DropdownMenuTrigger>{children}</DropdownMenuTrigger>
       <DropdownMenuContent>
-        <DropdownMenuItem className="cursor-pointer" onClick={deleteItem}>
-          <div className="flex items-center justify-between w-full">
-            <span>Drop</span>
-            <DeleteIcon className="h-4 w-4"></DeleteIcon>
-          </div>
-        </DropdownMenuItem>
+        <DeleteConfirm deleteItem={deleteItem}>
+          <DropdownMenuItem
+            className="cursor-pointer"
+            onSelect={(e) => e.preventDefault()}
+          >
+            <div className="flex items-center justify-between w-full">
+              <span>Drop</span>
+              <DeleteIcon className="h-4 w-4"></DeleteIcon>
+            </div>
+          </DropdownMenuItem>
+        </DeleteConfirm>
       </DropdownMenuContent>
     </DropdownMenu>
   );
 };
 
 export function DatabaseCard({ data }: { data: string }) {
-  const router = useRouter();
-  const handleDelete = async () => {
-    const ret = await dropDatabase({
-      database_name: data,
-      drop_option: DropOption.IgnoreIfNotExists
-    });
-    if (ret.error_code === 0) {
-      router.refresh();
-      toast({
-        title: 'Drop Success',
-        description: ''
-      });
-    }
-  };
-
   return (
     <Card className="w-full max-w-sm ">
       <CardHeader className="pt-3">
         <div className="text-right">
-          <DeleteDropdown deleteItem={handleDelete}>
+          <DeleteDropdown deleteItem={() => {}}>
             <MoreIcon className="h-5 w-5 inline-block cursor-pointer"></MoreIcon>
           </DeleteDropdown>
         </div>

diff --git a/gui/app/(dashboard)/database-creating-dialog.tsx b/gui/app/(dashboard)/database-creating-dialog.tsx
@@ -11,13 +11,18 @@ import {
 } from '@/components/ui/dialog';
 import React, { useCallback } from 'react';
 import { DatabaseCreatingForm } from './database-creating-form';
+import { TreeDataProps } from './database/hooks';
 
-export function DatabaseCreatingDialog({ children }: React.PropsWithChildren) {
+export function DatabaseCreatingDialog({
+  children,
+  fetchDatabases
+}: React.PropsWithChildren & TreeDataProps) {
   const [open, setOpen] = React.useState(false);
 
   const hide = useCallback(() => {
     setOpen(false);
-  }, []);
+    fetchDatabases?.();
+  }, [fetchDatabases]);
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>

diff --git a/gui/app/(dashboard)/database/hooks.ts b/gui/app/(dashboard)/database/hooks.ts
@@ -44,6 +44,10 @@ export const useHandleClickTreeName = () => {
   return { handleClickTreeName };
 };
 
+export interface TreeDataProps {
+  fetchDatabases?: () => Promise<void>;
+}
+
 export const useBuildTreeData = () => {
   const loadedAlertElement = useRef<HTMLDivElement>(null);
   const [data, setData] = useState<INode[]>([]);
@@ -157,7 +161,13 @@ export const useBuildTreeData = () => {
     }
   };
 
-  return { wrappedOnLoadData, data, loadedAlertElement, loading };
+  return {
+    wrappedOnLoadData,
+    data,
+    loadedAlertElement,
+    loading,
+    fetchDatabases
+  };
 };
 
 export const useFetchTableColumns = ({

diff --git a/gui/app/(dashboard)/database/styles.css b/gui/app/(dashboard)/database/styles.css
@@ -31,7 +31,7 @@
 }
 
 .tree-node:hover {
-  background: rgb(240, 244, 254);
+  background: rgb(234, 240, 255);
 }
 
 .tree .tree-node--focused {