From d14d017342d12b7bc10e5bd5921f8dc075a78a99 Mon Sep 17 00:00:00 2001
From: Qian Xia <lauraxiaqian@gmail.com>
Date: Mon, 30 Sep 2024 14:08:17 +0800
Subject: [PATCH] [#5042] fix(ui): show the expend arrow when reload tree node
 (#5043)

### What changes were proposed in this pull request?

show the expend arrow when reload tree node
<img width="707" alt="image"
src="https://github.com/user-attachments/assets/338655e6-03ac-4fec-a6fd-05756cfcaced">
<img width="614" alt="image"
src="https://github.com/user-attachments/assets/70e1669c-4faa-45ed-aa86-c6ff7195a091">
<img width="633" alt="image"
src="https://github.com/user-attachments/assets/df09f9a5-18b0-4b47-a4e8-418c88a6cff8">


### Why are the changes needed?
show the correct info after reload tree node

Fix: #5042

### Does this PR introduce _any_ user-facing change?
N/A

### How was this patch tested?
manually
---
 .../app/metalakes/metalake/MetalakeTree.js    |  2 +-
 web/src/lib/store/metalakes/index.js          | 26 +++++++++++++++++--
 web/src/lib/utils/index.js                    |  4 ++-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/web/src/app/metalakes/metalake/MetalakeTree.js b/web/src/app/metalakes/metalake/MetalakeTree.js
index cf1cca7ee93..58b7c138bfb 100644
--- a/web/src/app/metalakes/metalake/MetalakeTree.js
+++ b/web/src/app/metalakes/metalake/MetalakeTree.js
@@ -111,7 +111,7 @@ const MetalakeTree = props => {
         break
       }
       default:
-        dispatch(setIntoTreeNodeWithFetch({ key: nodeProps.data.key }))
+        dispatch(setIntoTreeNodeWithFetch({ key: nodeProps.data.key, reload: true }))
     }
   }
 
diff --git a/web/src/lib/store/metalakes/index.js b/web/src/lib/store/metalakes/index.js
index b0cc84c499b..5dd55501001 100644
--- a/web/src/lib/store/metalakes/index.js
+++ b/web/src/lib/store/metalakes/index.js
@@ -96,7 +96,7 @@ export const updateMetalake = createAsyncThunk('appMetalakes/updateMetalake', as
 
 export const setIntoTreeNodeWithFetch = createAsyncThunk(
   'appMetalakes/setIntoTreeNodeWithFetch',
-  async ({ key }, { getState, dispatch }) => {
+  async ({ key, reload }, { getState, dispatch }) => {
     let result = {
       key,
       data: [],
@@ -137,20 +137,42 @@ export const setIntoTreeNodeWithFetch = createAsyncThunk(
       }
 
       const { identifiers = [] } = res
+      const expandedKeys = getState().metalakes.expandedNodes
+      const loadedNodes = getState().metalakes.loadedNodes
+      let reloadedEpxpandedKeys = []
+      let reloadedKeys = []
 
       result.data = identifiers.map(schemaItem => {
+        if (reload) {
+          if (expandedKeys.includes(`{{${metalake}}}{{${catalog}}}{{${type}}}{{${schemaItem.name}}}`)) {
+            reloadedEpxpandedKeys.push(`{{${metalake}}}{{${catalog}}}{{${type}}}{{${schemaItem.name}}}`)
+          }
+          if (loadedNodes.includes(`{{${metalake}}}{{${catalog}}}{{${type}}}{{${schemaItem.name}}}`)) {
+            reloadedKeys.push(`{{${metalake}}}{{${catalog}}}{{${type}}}{{${schemaItem.name}}}`)
+          }
+        }
+
         return {
           ...schemaItem,
           node: 'schema',
           id: `{{${metalake}}}{{${catalog}}}{{${type}}}{{${schemaItem.name}}}`,
           key: `{{${metalake}}}{{${catalog}}}{{${type}}}{{${schemaItem.name}}}`,
           path: `?${new URLSearchParams({ metalake, catalog, type, schema: schemaItem.name }).toString()}`,
+          isLeaf: reload ? false : undefined,
           name: schemaItem.name,
           title: schemaItem.name,
           tables: [],
           children: []
         }
       })
+      if (reloadedEpxpandedKeys.length > 0) {
+        const epxpanded = expandedKeys.filter(key => !reloadedEpxpandedKeys.includes(key))
+        dispatch(resetExpandNode(epxpanded))
+      }
+      if (reloadedKeys.length > 0) {
+        const loaded = loadedNodes.filter(key => !reloadedKeys.includes(key))
+        dispatch(setLoadedNodes(loaded))
+      }
     } else if (pathArr.length === 4 && type === 'relational') {
       const [err, res] = await to(getTablesApi({ metalake, catalog, schema }))
 
@@ -933,7 +955,7 @@ export const appMetalakesSlice = createSlice({
       state.expandedNodes = expandedNodes
     },
     resetExpandNode(state, action) {
-      state.expandedNodes = []
+      state.expandedNodes = action.payload || []
     },
     resetTableData(state, action) {
       state.tableData = []
diff --git a/web/src/lib/utils/index.js b/web/src/lib/utils/index.js
index bcb04c66238..1524f1a23a7 100644
--- a/web/src/lib/utils/index.js
+++ b/web/src/lib/utils/index.js
@@ -144,12 +144,14 @@ export const updateTreeData = (list = [], key, children = []) => {
     if (node.key === key) {
       return {
         ...node,
+        isLeaf: children?.length === 0,
         children
       }
     }
-    if (node.children) {
+    if (node.children && node.children.length > 0) {
       return {
         ...node,
+        isLeaf: node.children.length === 0,
         children: updateTreeData(node.children, key, children)
       }
     }