feat: Fixed the issue where the tree loading status displayed incorrectly when there was no table in the database #1841

gui/app/(dashboard)/database/hooks.ts

@@ -1,6 +1,7 @@
 import { ITableColumns, ITableIndex } from '@/lib/databse-interface';
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { INode } from 'react-accessible-treeview';
 import {
   listDatabase,
   listTable,
@@ -9,7 +10,7 @@ import {
   showTableSegments
 } from '../actions';
 import { initialData } from './constants';
-import { DatabaseRouteParams, TreeNode, TreeParentId } from './interface';
+import { DatabaseRouteParams, TreeParentId } from './interface';
 import { buildLeafData, getParentIdById, updateTreeData } from './utils';
 
 export const useHandleClickTreeName = () => {
@@ -25,7 +26,7 @@ export const useHandleClickTreeName = () => {
       level: number;
       name: string;
       parent: TreeParentId;
-      data: TreeNode[];
+      data: INode[];
     }) =>
       () => {
         if (level === 3) {
@@ -43,7 +44,7 @@ export const useHandleClickTreeName = () => {
 
 export const useBuildTreeData = () => {
   const loadedAlertElement = useRef(null);
-  const [data, setData] = useState<TreeNode[]>(initialData);
+  const [data, setData] = useState<INode[]>(initialData);
   const [nodesAlreadyLoaded, setNodesAlreadyLoaded] = useState<any[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
 
@@ -76,7 +77,7 @@ export const useBuildTreeData = () => {
     const ret = await listTable(databaseName);
     if (ret?.tables?.length > 0) {
       setData((value) => {
-        const tablePropertyList: TreeNode[] = [];
+        const tablePropertyList: INode[] = [];
         const tableList = ret.tables.map((x: string) => {
           const leafs = buildLeafData(x);
           tablePropertyList.push(...leafs);
@@ -95,14 +96,24 @@ export const useBuildTreeData = () => {
           ...tablePropertyList
         ];
       });
+    } else {
+      setData((value) =>
+        value.map((x) => {
+          let metadata = x.metadata ?? {};
+          if (x.id === databaseName) {
+            metadata['isEmpty'] = true;
+          }
+          return { ...x, metadata };
+        })
+      );
     }
   }, []);
 
   useEffect(() => {
     fetchDatabases();
   }, [fetchDatabases]);
 
-  const onLoadData = async ({ element }: { element: TreeNode }) => {
+  const onLoadData = async ({ element }: { element: INode }) => {
     if (element.children.length > 0) {
       return;
     }

gui/app/(dashboard)/database/interface.ts

@@ -2,14 +2,6 @@ import { Leaf } from './constants';
 
 export type TreeParentId = string | number | null;
 
-export interface TreeNode {
-  name: string;
-  id: string | number;
-  children: Array<string | number>;
-  parent: TreeParentId;
-  isBranch?: boolean;
-}
-
 export interface DatabaseRouteParams {
   params: { databaseId: string; tableId: string };
   searchParams: { tab: Leaf };

gui/app/(dashboard)/database/tree.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import cx from 'classnames';
-import TreeView from 'react-accessible-treeview';
+import TreeView, { INode } from 'react-accessible-treeview';
 import { AiOutlineLoading } from 'react-icons/ai';
 import { IoMdArrowDropright } from 'react-icons/io';
 import { Leaf, LeafIconMap } from './constants';
@@ -56,8 +56,10 @@ function AsyncTree() {
           handleSelect,
           handleExpand
         }) => {
-          const branchNode = (isExpanded: any, element: any) => {
-            return isExpanded && element.children.length === 0 ? (
+          const branchNode = (isExpanded: boolean, element: INode) => {
+            return isExpanded &&
+              !element.metadata?.isEmpty &&
+              element.children.length === 0 ? (
               <>
                 <span
                   role="alert"

gui/app/(dashboard)/database/utils.ts

@@ -1,10 +1,11 @@
+import { INode } from 'react-accessible-treeview';
 import { Leaf } from './constants';
-import { TreeNode, TreeParentId } from './interface';
+import { TreeParentId } from './interface';
 
 export const updateTreeData = (
   list: any[],
   id: string | number,
-  children: Array<TreeNode>
+  children: Array<INode>
 ) => {
   const data = list.map((node) => {
     if (node.id === id) {
@@ -40,6 +41,6 @@ export const buildLeafData = (parent: string) => {
   ];
 };
 
-export const getParentIdById = (data: TreeNode[], id: TreeParentId) => {
+export const getParentIdById = (data: INode[], id: TreeParentId) => {
   return data.find((x) => x.id === id)?.parent;
 };