#RI-2539 - Namespaces and number of keys do not have space between them when resizing tree area

#RI-2540 - Part of "No Limit" column is hiding under the "Key name" column when resizing the tree area
#RI-2544 - Selector in the list of keys is not according to the mockups
#RI-2545 - Part of the tree area is hiding when resizing it
#RI-2547 - Autoselect for keys doesn't work for filtering or searching
#RI-2548 - Long name of folder is not truncated in tree area
#RI-2552 - Keys are saved in the context for the previous view when goes back to Tree view from Browser page
#RI-2554 - Font size and font weight for number of keys and percentages are not according with the mockups

Author: egor-zalenski

redisinsight/ui/src/components/virtual-table/styles.module.scss

@@ -56,8 +56,9 @@ $footerHeight: 38px;
   .tableRow {
     cursor: pointer;
     border-top-width: 0;
-    & > div:last-of-type {
-      border-right: 1px solid transparent;
+
+    & > div:first-of-type {
+      border-left: 3px solid transparent;
     }
   }
 
@@ -66,14 +67,10 @@ $footerHeight: 38px;
   }
 
   :global(.table-row-selected) {
-    background: var(--tableRowSelectedColor) !important;
-    border-top: 1px solid var(--euiColorPrimary) !important;
-    border-bottom: 1px solid var(--euiColorPrimary) !important;
+    background: var(--browserViewTypeActive) !important;
     & > div:first-of-type {
-      border-left: 1px solid var(--euiColorPrimary) !important;
-    }
-    & > div:last-of-type {
-      border-right: 1px solid var(--euiColorPrimary) !important;
+      border-left: 3px solid transparent;
+      border-left-color: var(--euiColorPrimary) !important;
     }
   }
 

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

@@ -88,6 +88,7 @@ describe('VirtualTree', () => {
     render(
       <VirtualTree
         {...instance(mockedProps)}
+        selectDefaultLeaf
         items={mockedItems}
         setConstructingTree={mockConstructingTreeFn}
         onStatusSelected={mockOnStatusSelected}

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

@@ -9,6 +9,7 @@ import {
 } from 'react-vtree'
 import { EuiIcon, EuiLoadingSpinner } from '@elastic/eui'
 
+import { Maybe } from 'uiSrc/utils'
 import { useDisposableWebworker } from 'uiSrc/services'
 import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
@@ -26,6 +27,7 @@ export interface Props {
   separator?: string
   loadingIcon?: string
   loading: boolean
+  selectDefaultLeaf?: boolean
   statusSelected: {
     [key: string]: IKeyPropTypes[]
   }
@@ -34,6 +36,7 @@ export interface Props {
   }
   webworkerFn: (...args: any) => any
   onSelectLeaf?: (items: any[]) => void
+  disableSelectDefaultLeaf?: () => void
   onStatusOpen?: (name: string, value: boolean) => void
   onStatusSelected?: (id: string, keys: any) => void
   setConstructingTree: (status: boolean) => void
@@ -48,18 +51,17 @@ const VirtualTree = (props: Props) => {
     statusOpen = {},
     statusSelected = {},
     loading,
+    selectDefaultLeaf,
     onStatusOpen,
     onStatusSelected,
     onSelectLeaf,
     setConstructingTree,
+    disableSelectDefaultLeaf,
     webworkerFn = () => {}
   } = props
 
   const { theme } = useContext(ThemeContext)
-
   const [nodes, setNodes] = useState<TreeNode[]>([])
-  const [firstConstruct, setFirstConstruct] = useState(false)
-
   const { result, run: runWebworker } = useDisposableWebworker(webworkerFn)
 
   useEffect(() =>
@@ -76,15 +78,21 @@ const VirtualTree = (props: Props) => {
 
     setNodes(result)
     setConstructingTree?.(false)
+  }, [result])
+
+  // select "root" Keys after render a new tree (construct a tree)
+  useEffect(() => {
+    if (nodes.length === 0 || !selectDefaultLeaf) {
+      return
+    }
 
-    // set "root" keys after first render (construct a tree)
-    if (!firstConstruct && isArray(result) && isEmpty(statusSelected)) {
-      const rootLeaf = result?.find(({ children = [] }) => children.length === 0) ?? {}
-      setFirstConstruct(true)
-      onStatusSelected?.(rootLeaf?.fullName, rootLeaf?.keys)
+    if (isArray(nodes) && isEmpty(statusSelected)) {
+      const rootLeaf: Maybe<TreeNode> = nodes?.find(({ children = [] }) => children.length === 0)
+      disableSelectDefaultLeaf?.()
+      onStatusSelected?.(rootLeaf?.fullName ?? '', rootLeaf?.keys)
       onSelectLeaf?.(rootLeaf?.keys ?? [])
     }
-  }, [result])
+  }, [nodes, selectDefaultLeaf])
 
   useEffect(() => {
     if (!items?.length) {

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

@@ -60,7 +60,7 @@ const Node = ({
       onFocus={() => {}}
       data-testid={fullName}
     >
-      <div>
+      <div className={styles.nodeName}>
         {!isLeaf && (
         <>
           <EuiIcon
@@ -78,17 +78,17 @@ const Node = ({
         )}
 
         {isLeaf && (
-        <>
-          <EuiIcon
-            type={leafIcon}
-            className={cx(styles.nodeIcon, styles.nodeIconLeaf)}
-            data-test-subj={`leaf-icon_${fullName}`}
-          />
-          Keys
-        </>
+          <>
+            <EuiIcon
+              type={leafIcon}
+              className={cx(styles.nodeIcon, styles.nodeIconLeaf)}
+              data-test-subj={`leaf-icon_${fullName}`}
+            />
+            Keys
+          </>
         )}
       </div>
-      <div data-testid={`count_${fullName}`}>
+      <div className={styles.options} data-testid={`count_${fullName}`}>
         <span>{keyCount ?? ''}</span>
         <span className={styles.approximate} data-testid={`percentage_${fullName}`}>
           {keyApproximate ? `${keyApproximate < 1 ? '<1' : Math.round(keyApproximate)}%` : '' }

redisinsight/ui/src/components/virtual-tree/components/Node/styles.module.scss

@@ -28,7 +28,6 @@
 }
 
 .nodeSelected {
-  // border-left: 3px solid transparent;
   border-left-color: var(--euiColorPrimary) !important;
   background-color: var(--browserTreeNodeOpen);
 
@@ -37,6 +36,12 @@
   }
 }
 
+.nodeName {
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .nodeIcon {
   margin-right: 8px;
 
@@ -60,3 +65,9 @@
   width: 36px;
   text-align: end;
 }
+
+.options {
+  padding-left: 12px;
+  font-size: 12px;
+  font-weight: 300;
+}

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

@@ -170,7 +170,7 @@ const BrowserPage = () => {
                   id={firstPanelId}
                   scrollable={false}
                   initialSize={sizes[firstPanelId] ?? 50}
-                  minSize="670px"
+                  minSize="600px"
                   paddingSize="none"
                   wrapperProps={{
                     className: cx(styles.resizePanelLeft, {

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

@@ -1,6 +1,5 @@
 import { cloneDeep } from 'lodash'
 import React from 'react'
-import { instance, mock } from 'ts-mockito'
 import {
   cleanup,
   clearStoreActions,
@@ -12,7 +11,7 @@ import {
 import { loadKeys, setFilter } from 'uiSrc/slices/keys'
 import { connectedInstanceOverviewSelector } from 'uiSrc/slices/instances'
 import { KeyTypes } from 'uiSrc/constants'
-import { setBrowserTreeNodesOpen, setBrowserTreeSelectedLeaf } from 'uiSrc/slices/app/context'
+import { resetBrowserTree } from 'uiSrc/slices/app/context'
 import FilterKeyType from './FilterKeyType'
 
 let store: typeof mockedStore
@@ -65,8 +64,7 @@ describe('FilterKeyType', () => {
     const expectedActions = [
       setFilter(KeyTypes.Hash),
       loadKeys(),
-      setBrowserTreeNodesOpen({}),
-      setBrowserTreeSelectedLeaf({})
+      resetBrowserTree()
     ]
     expect(clearStoreActions(store.getActions())).toEqual(
       clearStoreActions(expectedActions)

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

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

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

@@ -198,18 +198,6 @@ const KeyList = (props: Props) => {
         )
       }
     },
-    {
-      id: 'actions',
-      label: '',
-      alignment: TableCellAlignment.Center,
-      absoluteWidth: 50,
-      minWidth: 50,
-      render: () => (
-        <span className={styles.action}>
-          <EuiIcon style={{ cursor: 'pointer' }} type="arrowRight" />
-        </span>
-      ),
-    },
   ]
 
   return (

redisinsight/ui/src/pages/browser/components/key-list/styles.module.scss

@@ -1,7 +1,6 @@
 .page {
   height: 100%;
   overflow: hidden;
-  padding-right: 1px;
 }
 
 .tooltip {