#RI-2577 - Selected renamed key is displayed in tree view with old name

Author: egor-zalenski

redisinsight/ui/src/components/virtual-tree/VirtualTree.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import React, { useCallback, useContext, useEffect, useState } from 'react'
 import AutoSizer from 'react-virtualized-auto-sizer'
 import { isArray, isEmpty } from 'lodash'
@@ -18,7 +17,7 @@ import KeyLightSVG from 'uiSrc/assets/img/sidebar/browser.svg'
 import KeyDarkSVG from 'uiSrc/assets/img/sidebar/browser_active.svg'
 
 import { Node } from './components/Node'
-import { NodeMeta, TreeData, TreeNode } from './interfaces'
+import { NodeMeta, TreeData, TreeNode, TREE_LEAF_FIELD } from './interfaces'
 
 import styles from './styles.module.scss'
 
@@ -73,8 +72,6 @@ const VirtualTree = (props: Props) => {
     if (!result) {
       return
     }
-    // [ToDo] remove after tests
-    console.timeEnd(timeLabel)
 
     setNodes(result)
     setConstructingTree?.(false)
@@ -100,8 +97,6 @@ const VirtualTree = (props: Props) => {
       return
     }
 
-    // [ToDo] remove after tests
-    console.time(timeLabel)
     setConstructingTree(true)
     runWebworker?.({ items, separator })
   }, [items])
@@ -137,7 +132,7 @@ const VirtualTree = (props: Props) => {
       updateStatusOpen: handleUpdateOpen,
       leafIcon: theme === Theme.Dark ? KeyDarkSVG : KeyLightSVG,
       keyApproximate: node.keyApproximate,
-      keys: node.keys || node?.['keys:keys'],
+      keys: node.keys || node?.[TREE_LEAF_FIELD],
       isSelected: Object.keys(statusSelected)[0] === node.fullName,
       isOpenByDefault: statusOpen[node.fullName],
     },

redisinsight/ui/src/components/virtual-tree/interfaces.ts

@@ -1,6 +1,8 @@
 import { FixedSizeNodeData } from 'react-vtree'
 import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys'
 
+export const TREE_LEAF_FIELD = 'keys:keys:'
+
 export interface TreeNode {
   children: TreeNode[]
   id: number
@@ -9,7 +11,7 @@ export interface TreeNode {
   fullName: string
   name: string
   keys: any[]
-  'keys:keys'?: any
+  [TREE_LEAF_FIELD]?: any
 }
 
 export interface NodeMeta {

redisinsight/ui/src/helpers/tests/constructKeysToTreeMockResult.ts

@@ -1,6 +1,8 @@
+import { TREE_LEAF_FIELD } from 'uiSrc/components/virtual-tree'
+
 export const constructKeysToTreeMockResult = [
   {
-    name: 'keys:keys',
+    name: TREE_LEAF_FIELD,
     children: [],
     keys: {
       keys2: {
@@ -36,7 +38,7 @@ export const constructKeysToTreeMockResult = [
     name: 'keys',
     children: [
       {
-        name: 'keys:keys',
+        name: TREE_LEAF_FIELD,
         children: [],
         keys: {
           'keys:1': {
@@ -66,7 +68,7 @@ export const constructKeysToTreeMockResult = [
         name: '1',
         children: [
           {
-            name: 'keys:keys',
+            name: TREE_LEAF_FIELD,
             children: [],
             keys: {
               'keys:1:2': {
@@ -103,7 +105,7 @@ export const constructKeysToTreeMockResult = [
         name: '',
         children: [
           {
-            name: 'keys:keys',
+            name: TREE_LEAF_FIELD,
             children: [],
             keys: {
               'empty::test': {

redisinsight/ui/src/pages/browser/BrowserPage.tsx

@@ -24,6 +24,7 @@ import {
   appContextBrowser,
   setBrowserPanelSizes,
   setLastPageContext,
+  updateBrowserTreeSelectedLeaf,
 } from 'uiSrc/slices/app/context'
 import { appAnalyticsInfoSelector } from 'uiSrc/slices/app/info'
 import { resetErrors } from 'uiSrc/slices/app/notifications'
@@ -158,6 +159,14 @@ const BrowserPage = () => {
     }
   }
 
+  const handleEditKey = (key: string, newKey: string) => {
+    setSelectedKey(newKey)
+
+    if (viewType === KeyViewType.Tree) {
+      dispatch(updateBrowserTreeSelectedLeaf({ key, newKey }))
+    }
+  }
+
   return (
     <div className={`browserPage ${styles.container}`}>
       <InstanceHeader />
@@ -238,7 +247,7 @@ const BrowserPage = () => {
                     <KeyDetailsWrapper
                       keyProp={selectedKey}
                       onCloseKey={closeKey}
-                      onEditKey={(newKey: string) => setSelectedKey(newKey)}
+                      onEditKey={(key: string, newKey: string) => handleEditKey(key, newKey)}
                       onDeleteKey={() => setSelectedKey(null)}
                     />
                   )}

redisinsight/ui/src/pages/browser/components/key-details/KeyDetailsWrapper.tsx

@@ -18,7 +18,7 @@ import KeyDetails from './KeyDetails/KeyDetails'
 
 export interface Props {
   onCloseKey: () => void;
-  onEditKey: (newKey: string) => void;
+  onEditKey: (key: string, newKey: string) => void;
   onDeleteKey: () => void;
   keyProp: string | null;
 }
@@ -79,7 +79,7 @@ const KeyDetailsWrapper = ({ onCloseKey, onEditKey, onDeleteKey, keyProp }: Prop
     dispatch(editKeyTTL(key, ttl))
   }
   const handleEditKey = (oldKey: string, newKey: string, onFailure?: () => void) => {
-    dispatch(editKey(oldKey, newKey, () => onEditKey(newKey), onFailure))
+    dispatch(editKey(oldKey, newKey, () => onEditKey(oldKey, newKey), onFailure))
   }
 
   const handleClose = () => {

redisinsight/ui/src/slices/app/context.ts

@@ -1,5 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit'
+import { first } from 'lodash'
 import { Nullable } from 'uiSrc/utils'
+import { TREE_LEAF_FIELD } from 'uiSrc/components/virtual-tree'
 import { RootState } from '../store'
 import { StateAppContext } from '../interfaces'
 
@@ -14,6 +16,7 @@ export const initialState: StateAppContext = {
     },
     panelSizes: {},
     tree: {
+      separator: ':',
       panelSizes: {},
       openNodes: {},
       selectedLeaf: {},
@@ -56,6 +59,29 @@ const appContextSlice = createSlice({
     setBrowserTreeSelectedLeaf: (state, { payload }: { payload: any }) => {
       state.browser.tree.selectedLeaf = payload
     },
+    updateBrowserTreeSelectedLeaf: (state, { payload }) => {
+      const { selectedLeaf, separator } = state.browser.tree
+      const [[selectedLeafField = '', keys = {}]] = Object.entries(selectedLeaf)
+      const [pattern] = selectedLeafField.split(TREE_LEAF_FIELD)
+
+      if (payload.key in keys) {
+        const isFitNewKey = payload.newKey?.startsWith?.(pattern)
+          && (pattern.split(separator)?.length === payload.newKey.split(separator)?.length)
+
+        if (!isFitNewKey) {
+          delete keys[payload.key]
+          return
+        }
+
+        keys[payload.newKey] = {
+          ...keys[payload.key],
+          name: payload.newKey
+        }
+        delete keys[payload.key]
+      }
+
+      state.browser.tree.selectedLeaf[selectedLeafField] = keys
+    },
     setBrowserTreeNodesOpen: (state, { payload }: { payload: { [key: string]: boolean; } }) => {
       state.browser.tree.openNodes = payload
     },
@@ -102,6 +128,7 @@ export const {
   setBrowserPanelSizes,
   setBrowserTreeSelectedLeaf,
   setBrowserTreeNodesOpen,
+  updateBrowserTreeSelectedLeaf,
   resetBrowserTree,
   setBrowserTreePanelSizes,
   setWorkbenchScript,

redisinsight/ui/src/slices/interfaces/app.ts

@@ -2,111 +2,114 @@ import { AxiosError } from 'axios'
 import { Nullable } from 'uiSrc/utils'
 import { GetServerInfoResponse } from 'apiSrc/dto/server.dto'
 import { ICommands } from 'uiSrc/constants'
-import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys';
+import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys'
 
 export interface IError extends AxiosError {
-  id: string;
-  instanceId?: string;
+  id: string
+  instanceId?: string
 }
 
 export interface IMessage {
-  id: string;
-  title: string;
-  message: string;
-  group?: string;
+  id: string
+  title: string
+  message: string
+  group?: string
 }
 
 export interface StateAppInfo {
-  loading: boolean;
-  error: string;
-  server: Nullable<GetServerInfoResponse>;
+  loading: boolean
+  error: string
+  server: Nullable<GetServerInfoResponse>
   analytics: {
-    segmentWriteKey: string;
-    identified: boolean;
-  };
+    segmentWriteKey: string
+    identified: boolean
+  }
   electron: {
-    isUpdateAvailable: Nullable<boolean>;
-    updateDownloadedVersion: string;
-    isReleaseNotesViewed: Nullable<boolean>;
-  };
-  isShortcutsFlyoutOpen: boolean;
+    isUpdateAvailable: Nullable<boolean>
+    updateDownloadedVersion: string
+    isReleaseNotesViewed: Nullable<boolean>
+  }
+  isShortcutsFlyoutOpen: boolean
 }
 
 export interface StateAppContext {
-  contextInstanceId: string;
-  lastPage: string;
+  contextInstanceId: string
+  lastPage: string
   browser: {
     keyList: {
-      isDataLoaded: boolean;
-      scrollTopPosition: number;
-      selectedKey: Nullable<string>;
+      isDataLoaded: boolean
+      scrollTopPosition: number
+      selectedKey: Nullable<string>
     },
     panelSizes: {
-      [key: string]: number;
+      [key: string]: number
     },
     tree: {
+      separator: string
       panelSizes: {
-        [key: string]: number;
+        [key: string]: number
       },
       openNodes: {
-        [key: string]: boolean;
+        [key: string]: boolean
       },
       selectedLeaf: {
-        [key: string]: IKeyPropTypes[];
+        [key: string]: {
+          [key: string]: IKeyPropTypes
+        }
       },
     }
   },
   workbench: {
-    script: string;
+    script: string
     enablementArea: {
-      itemPath: string;
-      itemScrollTop: number;
+      itemPath: string
+      itemScrollTop: number
     },
     panelSizes: {
       vertical: {
-        [key: string]: number;
+        [key: string]: number
       }
     }
   }
 }
 
 export interface StateAppRedisCommands {
-  loading: boolean;
-  error: string;
-  spec: ICommands;
-  commandsArray: string[];
-  commandGroups: string[];
+  loading: boolean
+  error: string
+  spec: ICommands
+  commandsArray: string[]
+  commandGroups: string[]
 }
 
 export interface IPluginVisualization {
-  id: string;
+  id: string
   uniqId: string
-  name: string;
-  plugin: any;
-  activationMethod: string;
-  matchCommands: string[];
-  default?: boolean;
-  iconDark?: string;
-  iconLight?: string;
+  name: string
+  plugin: any
+  activationMethod: string
+  matchCommands: string[]
+  default?: boolean
+  iconDark?: string
+  iconLight?: string
 }
 
 export interface PluginsResponse {
-  static: string;
+  static: string
   plugins: IPlugin[]
 }
 export interface IPlugin {
-  name: string;
-  main: string;
-  styles: string | string[];
-  baseUrl: string;
-  visualizations: any[];
-  internal?: boolean;
+  name: string
+  main: string
+  styles: string | string[]
+  baseUrl: string
+  visualizations: any[]
+  internal?: boolean
 }
 
 export interface StateAppPlugins {
-  loading: boolean;
-  error: string;
-  staticPath: string;
-  plugins: IPlugin[];
-  visualizations: IPluginVisualization[];
+  loading: boolean
+  error: string
+  staticPath: string
+  plugins: IPlugin[]
+  visualizations: IPluginVisualization[]
 }