Merge pull request #1467 from RedisInsight/feature/RI-3355_Tree_view_improvments

Feature/ri 3355 tree view improvments

Author: nmammadli

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

@@ -7,14 +7,16 @@ import {
   FixedSizeTree as Tree,
 } from 'react-vtree'
 import { EuiIcon, EuiLoadingSpinner } from '@elastic/eui'
+import { useDispatch } from 'react-redux'
 
-import { getTreeLeafField, Maybe } from 'uiSrc/utils'
+import { findTreeNode, getTreeLeafField, Maybe } from 'uiSrc/utils'
 import { useDisposableWebworker } from 'uiSrc/services'
 import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { DEFAULT_DELIMITER, Theme } from 'uiSrc/constants'
 import KeyLightSVG from 'uiSrc/assets/img/sidebar/browser.svg'
 import KeyDarkSVG from 'uiSrc/assets/img/sidebar/browser_active.svg'
+import { resetBrowserTree } from 'uiSrc/slices/app/context'
 
 import { Node } from './components/Node'
 import { NodeMeta, TreeData, TreeNode } from './interfaces'
@@ -43,6 +45,8 @@ export interface Props {
   setConstructingTree: (status: boolean) => void
 }
 
+export const KEYS = 'keys'
+
 const VirtualTree = (props: Props) => {
   const {
     items,
@@ -64,6 +68,8 @@ const VirtualTree = (props: Props) => {
   const [nodes, setNodes] = useState<TreeNode[]>([])
   const { result, run: runWebworker } = useDisposableWebworker(webworkerFn)
 
+  const dispatch = useDispatch()
+
   useEffect(() =>
     () => setNodes([]),
   [])
@@ -85,13 +91,40 @@ const VirtualTree = (props: Props) => {
     }
 
     if (isArray(nodes) && isEmpty(statusSelected)) {
-      const rootLeaf: Maybe<TreeNode> = nodes?.find(({ children = [] }) => children.length === 0)
+      let selectedLeaf: Maybe<TreeNode> = nodes?.find(({ children = [] }) => children.length === 0)
+
+      // if Keys folder not exists - first folder should be opened
+      if (!selectedLeaf && nodes.length) {
+        selectedLeaf = nodes?.[0]
+
+        onStatusOpen?.(selectedLeaf?.fullName ?? '', true)
+        onStatusSelected?.(
+          `${selectedLeaf?.fullName + KEYS + delimiter + KEYS + delimiter}` ?? '',
+          selectedLeaf?.keys ?? selectedLeaf?.children?.[0]?.keys
+        )
+      } else {
+        // if Keys folder exist - open it
+        onStatusSelected?.(selectedLeaf?.fullName ?? '', selectedLeaf?.keys)
+      }
+
       disableSelectDefaultLeaf?.()
-      onStatusSelected?.(rootLeaf?.fullName ?? '', rootLeaf?.keys)
-      onSelectLeaf?.(rootLeaf?.keys ?? [])
+      onSelectLeaf?.(selectedLeaf?.keys ?? selectedLeaf?.children?.[0]?.keys ?? [])
     }
   }, [nodes, loading, selectDefaultLeaf])
 
+  useEffect(() => {
+    if (isEmpty(statusSelected) || !nodes.length) {
+      return
+    }
+
+    // if selected Keys folder is not exists (after a new search) needs reset Browser state
+    const selectedLeafExists = !!findTreeNode(nodes, Object.keys(statusSelected)?.[0], 'fullName')
+
+    if (!selectedLeafExists) {
+      dispatch(resetBrowserTree())
+    }
+  }, [nodes])
+
   useEffect(() => {
     if (!items?.length) {
       setNodes([])

redisinsight/ui/src/pages/browser/components/filter-key-type/FilterKeyType.spec.tsx

@@ -11,7 +11,6 @@ import {
 import { loadKeys, setFilter } from 'uiSrc/slices/browser/keys'
 import { connectedInstanceOverviewSelector } from 'uiSrc/slices/instances/instances'
 import { KeyTypes } from 'uiSrc/constants'
-import { resetBrowserTree } from 'uiSrc/slices/app/context'
 import FilterKeyType from './FilterKeyType'
 
 let store: typeof mockedStore
@@ -64,7 +63,6 @@ describe('FilterKeyType', () => {
     const expectedActions = [
       setFilter(KeyTypes.Hash),
       loadKeys(),
-      resetBrowserTree()
     ]
     expect(clearStoreActions(store.getActions())).toEqual(
       clearStoreActions(expectedActions)

redisinsight/ui/src/pages/browser/components/filter-key-type/FilterKeyType.tsx

@@ -15,7 +15,6 @@ import { connectedInstanceOverviewSelector } from 'uiSrc/slices/instances/instan
 import { fetchKeys, keysSelector, setFilter } from 'uiSrc/slices/browser/keys'
 import { isVersionHigherOrEquals } from 'uiSrc/utils'
 import HelpTexts from 'uiSrc/constants/help-texts'
-import { resetBrowserTree } from 'uiSrc/slices/app/context'
 import { KeyViewType } from 'uiSrc/slices/interfaces/keys'
 import { FILTER_KEY_TYPE_OPTIONS } from './constants'
 
@@ -82,9 +81,6 @@ const FilterKeyType = () => {
       '0',
       viewType === KeyViewType.Browser ? SCAN_COUNT_DEFAULT : SCAN_TREE_COUNT_DEFAULT,
     ))
-
-    // reset browser tree context
-    dispatch(resetBrowserTree())
   }
 
   const UnsupportedInfo = () => (

redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.tsx

@@ -2,9 +2,11 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useStat
 import cx from 'classnames'
 import { EuiResizableContainer } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
+import { isEmpty } from 'lodash'
 
 import {
   appContextBrowserTree,
+  resetBrowserTree,
   appContextDbConfig,
   setBrowserTreeNodesOpen,
   setBrowserTreeSelectedLeaf
@@ -34,6 +36,10 @@ export interface Props {
 export const firstPanelId = 'tree'
 export const secondPanelId = 'keys'
 
+const parseKeyNames = (keys: GetKeyInfoResponse[]) =>
+  keys.map((item) =>
+    ({ ...item, nameString: item.nameString ?? bufferToString(item.name) }))
+
 const KeyTree = forwardRef((props: Props, ref) => {
   const { selectKey, loadMoreItems, loading, keysState } = props
 
@@ -50,8 +56,8 @@ const KeyTree = forwardRef((props: Props, ref) => {
   const [sizes, setSizes] = useState(panelSizes)
   const [keyListState, setKeyListState] = useState<KeysStoreData>(keysState)
   const [constructingTree, setConstructingTree] = useState(false)
-  const [selectDefaultLeaf, setSelectDefaultLeaf] = useState(true)
-  const [items, setItems] = useState<IKeyPropTypes[]>(keysState.keys ?? [])
+  const [selectDefaultLeaf, setSelectDefaultLeaf] = useState(isEmpty(selectedLeaf))
+  const [items, setItems] = useState<IKeyPropTypes[]>(parseKeyNames(keysState.keys ?? []))
 
   const dispatch = useDispatch()
 
@@ -70,21 +76,22 @@ const KeyTree = forwardRef((props: Props, ref) => {
   }, [openNodes])
 
   useEffect(() => {
-    if (selectedLeaf) {
-      setStatusSelected(selectedLeaf)
-      updateKeysList(Object.values(selectedLeaf)[0])
-    }
+    setStatusSelected(selectedLeaf)
+    updateKeysList(Object.values(selectedLeaf)?.[0])
+
+    setSelectDefaultLeaf(isEmpty(selectedLeaf))
   }, [selectedLeaf])
 
   useEffect(() => {
     setItems(parseKeyNames(keysState.keys))
+
     if (keysState.keys?.length === 0) {
-      dispatch(setBrowserTreeSelectedLeaf({}))
+      updateSelectedKeys()
     }
   }, [keysState.keys])
 
   useEffect(() => {
-    updateSelectedKeys()
+    setItems(parseKeyNames(keysState.keys))
   }, [delimiter, keysState.lastRefreshTime])
 
   const onLoadMoreItems = (props: { startIndex: number, stopIndex: number }) => {
@@ -94,7 +101,8 @@ const KeyTree = forwardRef((props: Props, ref) => {
 
   // select default leaf "Keys" after each change delimiter, filter or search
   const updateSelectedKeys = () => {
-    setItems(parseKeyNames(keysState.keys))
+    dispatch(resetBrowserTree())
+
     setTimeout(() => {
       startTransition(() => {
         setStatusSelected({})
@@ -103,10 +111,6 @@ const KeyTree = forwardRef((props: Props, ref) => {
     }, 0)
   }
 
-  const parseKeyNames = (keys: GetKeyInfoResponse[]) =>
-    keys.map((item) =>
-      ({ ...item, nameString: item.nameString ?? bufferToString(item.name) }))
-
   const updateKeysList = (items:any = {}) => {
     startTransition(() => {
       const newState:KeysStoreData = {

redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeDelimiter/KeyTreeDelimiter.spec.tsx

@@ -2,7 +2,7 @@ import { cloneDeep } from 'lodash'
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { DEFAULT_DELIMITER } from 'uiSrc/constants'
-import { setBrowserTreeDelimiter } from 'uiSrc/slices/app/context'
+import { resetBrowserTree, setBrowserTreeDelimiter } from 'uiSrc/slices/app/context'
 import {
   cleanup,
   clearStoreActions,
@@ -72,6 +72,7 @@ describe('KeyTreeDelimiter', () => {
 
     const expectedActions = [
       setBrowserTreeDelimiter(value),
+      resetBrowserTree(),
     ]
 
     expect(clearStoreActions(store.getActions())).toEqual(
@@ -95,6 +96,7 @@ describe('KeyTreeDelimiter', () => {
 
     const expectedActions = [
       setBrowserTreeDelimiter(DEFAULT_DELIMITER),
+      resetBrowserTree(),
     ]
 
     expect(clearStoreActions(store.getActions())).toEqual(

redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeDelimiter/KeyTreeDelimiter.tsx

@@ -8,7 +8,7 @@ import { replaceSpaces } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import InlineItemEditor from 'uiSrc/components/inline-item-editor'
 import { DEFAULT_DELIMITER } from 'uiSrc/constants'
-import { appContextDbConfig, setBrowserTreeDelimiter } from 'uiSrc/slices/app/context'
+import { appContextDbConfig, resetBrowserTree, setBrowserTreeDelimiter } from 'uiSrc/slices/app/context'
 
 import styles from './styles.module.scss'
 
@@ -51,6 +51,8 @@ const KeyTreeDelimiter = ({ loading }: Props) => {
     })
     closePopover()
     dispatch(setBrowserTreeDelimiter(value || DEFAULT_DELIMITER))
+
+    dispatch(resetBrowserTree())
   }
 
   return (

redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx

@@ -259,6 +259,10 @@ const KeysHeader = (props: Props) => {
 
     dispatch(changeSearchMode(mode))
 
+    if (viewType === KeyViewType.Tree) {
+      dispatch(resetBrowserTree())
+    }
+
     localStorageService.set(BrowserStorageItem.browserSearchMode, mode)
   }
 

redisinsight/ui/src/pages/browser/components/search-key-list/SearchKeyList.spec.tsx

@@ -10,7 +10,6 @@ import {
   screen,
 } from 'uiSrc/utils/test-utils'
 import { loadKeys, setPatternSearchMatch } from 'uiSrc/slices/browser/keys'
-import { resetBrowserTree } from 'uiSrc/slices/app/context'
 import SearchKeyList from './SearchKeyList'
 
 let store: typeof mockedStore
@@ -38,7 +37,7 @@ describe('SearchKeyList', () => {
 
     fireEvent.keyDown(screen.getByTestId('search-key'), { key: keys.ENTER })
 
-    const expectedActions = [setPatternSearchMatch(searchTerm), resetBrowserTree(), loadKeys()]
+    const expectedActions = [setPatternSearchMatch(searchTerm), loadKeys()]
 
     expect(clearStoreActions(store.getActions())).toEqual(
       clearStoreActions(expectedActions)

redisinsight/ui/src/pages/browser/components/search-key-list/SearchKeyList.tsx

@@ -36,8 +36,6 @@ const SearchKeyList = () => {
 
   const handleApply = (match = value) => {
     dispatch(setSearchMatch(match, searchMode))
-    // reset browser tree context
-    dispatch(resetBrowserTree())
 
     dispatch(fetchKeys(
       searchMode,