Merge pull request #2739 from RedisInsight/fe/bugfix/rework-tree

#RI-5095, #RI-5096, #RI-5097, #RI-5098, #RI-5100

Author: egor-zalenski

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

@@ -117,7 +117,6 @@ const KeysHeader = (props: Props) => {
   }
 
   const handleRefreshKeys = () => {
-    dispatch(resetBrowserTree())
     dispatch(fetchKeys(
       {
         searchMode,

redisinsight/ui/src/pages/browser/components/no-keys-found/styles.module.scss

@@ -1,5 +1,6 @@
 .container {
   max-width: 400px;
+  min-height: 440px;
 
   margin: auto;
   text-align: center;

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

@@ -187,6 +187,7 @@ const VirtualTree = (props: Props) => {
       size: node.size,
       type: node.type,
       fullName: node.fullName,
+      shortName: node.nameString?.split(delimiter).pop(),
       nestingLevel,
       deleting,
       path: node.path,

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

@@ -41,6 +41,7 @@ const Node = ({
     path,
     type,
     ttl,
+    shortName,
     size,
     deleting,
     nameString,
@@ -64,12 +65,6 @@ const Node = ({
     }
   }, [])
 
-  useEffect(() => {
-    if (isSelected && nameBuffer) {
-      updateStatusSelected?.(nameBuffer)
-    }
-  }, [isSelected])
-
   const handleClick = () => {
     if (isLeaf && !isSelected) {
       updateStatusSelected?.(nameBuffer)
@@ -98,35 +93,41 @@ const Node = ({
   }
 
   const Folder = () => (
-    <>
-      <div className={styles.nodeName}>
-        <EuiIcon
-          type={isOpen ? 'arrowDown' : 'arrowRight'}
-          className={cx(styles.nodeIcon, styles.nodeIconArrow)}
-          data-test-subj={`node-arrow-icon_${fullName}`}
-        />
-        <EuiIcon
-          type={isOpen ? 'folderOpen' : 'folderClosed'}
-          className={styles.nodeIcon}
-          data-test-subj={`node-folder-icon_${fullName}`}
-        />
-        <span className="truncateText" data-testid={`folder-${nameString}`}>
-          {nameString}
-        </span>
-      </div>
-      <div className={styles.options}>
-        <div className={styles.approximate} data-testid={`percentage_${fullName}`}>
-          {keyApproximate ? `${keyApproximate < 1 ? '<1' : Math.round(keyApproximate)}%` : '' }
+    <EuiToolTip
+      content={tooltipContent}
+      position="bottom"
+      anchorClassName={styles.anchorTooltipNode}
+    >
+      <>
+        <div className={styles.nodeName}>
+          <EuiIcon
+            type={isOpen ? 'arrowDown' : 'arrowRight'}
+            className={cx(styles.nodeIcon, styles.nodeIconArrow)}
+            data-test-subj={`node-arrow-icon_${fullName}`}
+          />
+          <EuiIcon
+            type={isOpen ? 'folderOpen' : 'folderClosed'}
+            className={styles.nodeIcon}
+            data-test-subj={`node-folder-icon_${fullName}`}
+          />
+          <span className="truncateText" data-testid={`folder-${nameString}`}>
+            {nameString}
+          </span>
         </div>
-        <div className={styles.keyCount} data-testid={`count_${fullName}`}>{keyCount ?? ''}</div>
-      </div>
-    </>
+        <div className={styles.options}>
+          <div className={styles.approximate} data-testid={`percentage_${fullName}`}>
+            {keyApproximate ? `${keyApproximate < 1 ? '<1' : Math.round(keyApproximate)}%` : '' }
+          </div>
+          <div className={styles.keyCount} data-testid={`count_${fullName}`}>{keyCount ?? ''}</div>
+        </div>
+      </>
+    </EuiToolTip>
   )
 
   const Leaf = () => (
     <>
       <KeyRowType type={type} nameString={nameString} />
-      <KeyRowName nameString={nameString} />
+      <KeyRowName nameString={shortName} />
       <KeyRowTTL ttl={ttl} nameString={nameString} deletePopoverId={deletePopoverId} rowId={nodeId} />
       <KeyRowSize
         size={size}
@@ -181,16 +182,7 @@ const Node = ({
         }
       )}
     >
-      {isLeaf && Node}
-      {!isLeaf && (
-        <EuiToolTip
-          content={tooltipContent}
-          position="bottom"
-          anchorClassName={styles.anchorTooltipNode}
-        >
-          {Node}
-        </EuiToolTip>
-      )}
+      {Node}
     </div>
   )
 }

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

@@ -1,8 +1,9 @@
 .anchorTooltipNode {
   width: 100%;
   height: 42px;
-  display: inline-block;
+  display: flex !important;
   position: relative;
+  align-items: center;
 }
 
 .nodeContainer {
@@ -39,13 +40,13 @@
 
   :global(.moveOnHoverKey) {
     transition: transform ease 0.3s;
-    &.hide {
+    &:global(.hide) {
       transform: translateX(-8px);
     }
   }
   :global(.showOnHoverKey) {
     display: none !important;
-    &.show {
+    &:global(.show) {
       display: flex !important;
     }
   }

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

@@ -42,6 +42,7 @@ export interface TreeData extends FixedSizeNodeData {
   keyCount: number
   keyApproximate: number
   fullName: string
+  shortName?: string
   leafIcon: string
   type: KeyTypes | ModulesKeyTypes
   ttl: number

yarn.lock

@@ -11797,22 +11797,14 @@ postcss-reduce-transforms@^5.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-selector-parser@^6.0.2:
+postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
   version "6.0.13"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
   integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
-  version "6.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
-  integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
-  dependencies:
-    cssesc "^3.0.0"
-    util-deprecate "^1.0.2"
-
 postcss-svgo@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d"
@@ -11833,7 +11825,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.2.15:
+postcss@^8.2.15, postcss@^8.2.9:
   version "8.4.31"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
   integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
@@ -11842,15 +11834,6 @@ postcss@^8.2.15:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.2.9:
-  version "8.4.23"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.23.tgz#df0aee9ac7c5e53e1075c24a3613496f9e6552ab"
-  integrity sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 postinstall-postinstall@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/postinstall-postinstall/-/postinstall-postinstall-2.1.0.tgz#4f7f77441ef539d1512c40bd04c71b06a4704ca3"