MXS-3681 Remove active_tree_node from localStorage

`active_tree_node` is used to automatically query preview data when
user refreshes the browser. Though this brings convenience but querying
preview data with large number of rows causes slow response effect
on user interface. In addition, user can always set max rows to any number,
so on inital rendering, pre-query should be avoided.

This keeps `active_tree_node` in memory. i.e. to store it in `db_tree_map` and
release when browser refreshes.

Author: mariadb-ThienLy

maxgui/src/pages/QueryPage/DbListTree.vue

@@ -131,11 +131,12 @@ export default {
     },
     computed: {
         ...mapState({
-            active_tree_node: state => state.query.active_tree_node,
             expanded_nodes: state => state.query.expanded_nodes,
+            active_wke_id: state => state.query.active_wke_id,
         }),
         ...mapGetters({
             getDbTreeData: 'query/getDbTreeData',
+            getActiveTreeNode: 'query/getActiveTreeNode',
         }),
         filter() {
             return (item, search, textKey) => item[textKey].indexOf(search) > -1
@@ -145,11 +146,18 @@ export default {
         },
         activeNodes: {
             get() {
-                return [this.active_tree_node]
+                return [this.getActiveTreeNode]
             },
             set(v) {
                 const activeNodes = this.minimizeNodes(v)
-                if (activeNodes.length) this.SET_ACTIVE_TREE_NODE(activeNodes[0])
+                if (activeNodes.length) {
+                    this.UPDATE_DB_TREE_MAP({
+                        id: this.active_wke_id,
+                        payload: {
+                            active_tree_node: activeNodes[0],
+                        },
+                    })
+                }
             },
         },
     },
@@ -167,7 +175,7 @@ export default {
     },
     methods: {
         ...mapMutations({
-            SET_ACTIVE_TREE_NODE: 'query/SET_ACTIVE_TREE_NODE',
+            UPDATE_DB_TREE_MAP: 'query/UPDATE_DB_TREE_MAP',
             SET_EXPANDED_NODES: 'query/SET_EXPANDED_NODES',
         }),
         addExpandedNodesWatcher() {

maxgui/src/pages/QueryPage/PreviewDataTab.vue

@@ -7,7 +7,7 @@
                     <truncate-string
                         :maxWidth="260"
                         :nudgeLeft="16"
-                        :text="$typy(active_tree_node, 'id').safeObject"
+                        :text="$typy(getActiveTreeNode, 'id').safeObject"
                     />
                 </div>
                 <v-tabs
@@ -130,21 +130,20 @@ export default {
     },
     computed: {
         ...mapState({
-            active_tree_node: state => state.query.active_tree_node,
             SQL_QUERY_MODES: state => state.app_config.SQL_QUERY_MODES,
             curr_query_mode: state => state.query.curr_query_mode,
             curr_cnct_resource: state => state.query.curr_cnct_resource,
-            active_wke_id: state => state.query.active_wke_id,
         }),
         ...mapGetters({
             getPrvwDataRes: 'query/getPrvwDataRes',
             getPrvwSentTime: 'query/getPrvwSentTime',
             getPrvwExeTime: 'query/getPrvwExeTime',
             getPrvwTotalDuration: 'query/getPrvwTotalDuration',
             getLoadingPrvw: 'query/getLoadingPrvw',
+            getActiveTreeNode: 'query/getActiveTreeNode',
         }),
         validConn() {
-            return Boolean(this.active_tree_node.id && this.curr_cnct_resource.id)
+            return Boolean(this.getActiveTreeNode.id && this.curr_cnct_resource.id)
         },
         isPrwDataLoading() {
             return (
@@ -168,9 +167,8 @@ export default {
             if (!this.isPrwDataLoading && this.validConn) await this.handleFetch(activeView)
         },
     },
-    async activated() {
+    activated() {
         this.setHeaderHeight()
-        await this.autoFetchActiveNode()
     },
     methods: {
         ...mapMutations({
@@ -183,21 +181,7 @@ export default {
             if (!this.$refs.header) return
             this.headerHeight = this.$refs.header.clientHeight
         },
-        async autoFetchActiveNode() {
-            if (this.curr_cnct_resource.id)
-                switch (this.activeView) {
-                    // Auto fetch preview data if there is active_tree_node in localStorage
-                    case this.SQL_QUERY_MODES.PRVW_DATA_DETAILS:
-                    case this.SQL_QUERY_MODES.PRVW_DATA: {
-                        const hasActiveNode = this.$typy(this.active_tree_node, 'id').safeObject
-                        const isFetchingAlready = this.getLoadingPrvw(this.activeView)
-                        const isDataEmpty = this.$typy(this.getPrvwDataRes(this.activeView))
-                            .isEmptyObject
-                        if (hasActiveNode && !isFetchingAlready && isDataEmpty)
-                            await this.fetchActiveNodeData(this.activeView)
-                    }
-                }
-        },
+
         /**
          * This function checks if there is no preview data or details data
          * before dispatching action to fetch either preview data or details
@@ -219,7 +203,7 @@ export default {
          */
         async fetchActiveNodeData(SQL_QUERY_MODE) {
             await this.fetchPrvw({
-                tblId: this.$typy(this.active_tree_node, 'id').safeObject,
+                tblId: this.$typy(this.getActiveTreeNode, 'id').safeObject,
                 prvwMode: SQL_QUERY_MODE,
             })
         },

maxgui/src/store/query.js

@@ -30,7 +30,6 @@ function sidebarStates() {
         is_sidebar_collapsed: false,
         search_schema: '',
         active_db: '',
-        active_tree_node: {},
         expanded_nodes: [],
     }
 }
@@ -120,7 +119,7 @@ export default {
         is_fullscreen: false,
         rc_target_names_map: {},
         // sidebar states
-        db_tree_map: [],
+        db_tree_map: {},
         // results states
         prvw_data_map: {},
         prvw_data_details_map: {},
@@ -165,9 +164,6 @@ export default {
                     ...{ [id]: { ...state.db_tree_map[id], ...payload } },
                 }
         },
-        SET_ACTIVE_TREE_NODE(state, payload) {
-            patch_wke_property(state, { obj: { active_tree_node: payload }, scope: this })
-        },
         SET_EXPANDED_NODES(state, payload) {
             patch_wke_property(state, { obj: { expanded_nodes: payload }, scope: this })
         },
@@ -947,6 +943,9 @@ export default {
         },
         // sidebar getters
         getCurrDbTree: state => state.db_tree_map[state.active_wke_id] || {},
+        getActiveTreeNode: (state, getters) => {
+            return getters.getCurrDbTree.active_tree_node || {}
+        },
         getDbTreeData: (state, getters) => {
             return getters.getCurrDbTree.data || []
         },