feat: Give a pop-up window prompt before deleting the database #1841 (#…

…2151) ### What problem does this PR solve? feat: Give a pop-up window prompt before deleting the database #1841 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
infiniflow · Nov 1, 2024 · 000fcb7 · 000fcb7
1 parent c1901a7
commit 000fcb7
Show file tree

Hide file tree

Showing 9 changed files with 628 additions and 144 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
@@ -30,21 +30,24 @@ export const useHandleClickTreeName = () => {
       name: string;
       parent: TreeParentId;
       data: INode[];
-    }) =>
-      () => {
-        if (level === 3) {
-          const databaseId = getParentIdById(data, parent);
-          if (databaseId) {
-            router.push(`/database/${databaseId}/table/${parent}?tab=${name}`);
-          }
+    }) => {
+      if (level === 3) {
+        const databaseId = getParentIdById(data, parent);
+        if (databaseId) {
+          router.push(`/database/${databaseId}/table/${parent}?tab=${name}`);
         }
-      },
+      }
+    },
     [router]
   );
 
   return { handleClickTreeName };
 };
 
+export interface TreeDataProps {
+  fetchDatabases?: () => Promise<void>;
+}
+
 export const useBuildTreeData = () => {
   const loadedAlertElement = useRef<HTMLDivElement>(null);
   const [data, setData] = useState<INode[]>([]);
@@ -132,28 +135,6 @@ export const useBuildTreeData = () => {
     await fetchTables(element.id as string);
 
     return undefined;
-    // return new Promise((resolve) => {
-    //   setTimeout(() => {
-    //     setData((value) =>
-    //       updateTreeData(value, element.id, [
-    //         {
-    //           name: `Child Node ${value.length}`,
-    //           children: [],
-    //           id: value.length,
-    //           parent: element.id,
-    //           isBranch: true
-    //         },
-    //         {
-    //           name: 'Another child Node',
-    //           children: [],
-    //           id: value.length + 1,
-    //           parent: element.id
-    //         }
-    //       ])
-    //     );
-    //     resolve(undefined);
-    //   }, 1000);
-    // });
   };
 
   const wrappedOnLoadData = async (props: ITreeViewOnLoadDataProps) => {
@@ -180,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,11 +31,15 @@
 }
 
 .tree-node:hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgb(234, 240, 255);
 }
 
-.tree-node--focused {
-  background-color: #d7d7d7;
+.tree .tree-node--focused {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.tree .tree-node--selected {
+  background: rgb(213, 222, 249);
 }
 
 .arrow--open {