* #RI-6341 - Unlimited combobox size

* #RI-6340 - All delimiters between each node item name of folder description tooltip

Author: egor-zalenski

redisinsight/ui/src/helpers/constructKeysToTree.ts

@@ -78,29 +78,29 @@ export const constructKeysToTree = (props: Props): any[] => {
     return treeNodes.map((key, index) => {
       const name = key?.toString()
       const node: any = { nameString: name }
-      const tillNowKeyName = previousKey + name + delimiter
       const path = prevIndex ? `${prevIndex}.${index}` : `${index}`
 
       // populate node with children nodes
       if (!tree[key].isLeaf && Object.keys(tree[key]).length > 0) {
         node.children = formatTreeData(
           tree[key],
-          tillNowKeyName,
+          `${previousKey + name}-`,
           delimiter,
           path,
         )
         node.keyCount = node.children.reduce((a: any, b:any) => a + (b.keyCount || 1), 0)
         node.keyApproximate = (node.keyCount / keys.length) * 100
+        node.fullName = previousKey + name
       } else {
         // populate leaf
         node.isLeaf = true
         node.children = []
         node.nameString = name.slice(0, -keysSymbol.length)
         node.nameBuffer = tree[key]?.name
+        node.fullName = previousKey + name + delimiter
       }
 
       node.path = path
-      node.fullName = tillNowKeyName
       node.id = getUniqueId()
       return node
     })

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

@@ -11,19 +11,19 @@ export const constructKeysToTreeMockResult = [
             isLeaf: true,
             children: [],
             path: '0.0.0',
-            fullName: `empty${delimiterMock + delimiterMock}empty::testkeys${delimiterMock}keys${delimiterMock}`,
+            fullName: `empty--empty::testkeys${delimiterMock}keys${delimiterMock}`,
           }
         ],
         keyCount: 1,
         keyApproximate: 10,
         path: '0.0',
-        fullName: `empty${delimiterMock + delimiterMock}`,
+        fullName: 'empty-',
       }
     ],
     keyCount: 1,
     keyApproximate: 10,
     path: '0',
-    fullName: `empty${delimiterMock}`,
+    fullName: 'empty',
   },
   {
     nameString: 'keys',
@@ -36,54 +36,54 @@ export const constructKeysToTreeMockResult = [
             isLeaf: true,
             children: [],
             path: '1.0.0',
-            fullName: `keys${delimiterMock}1${delimiterMock}keys:1:1keys${delimiterMock}keys${delimiterMock}`,
+            fullName: `keys-1-keys:1:1keys${delimiterMock}keys${delimiterMock}`,
           },
           {
             nameString: 'keys:1:2',
             isLeaf: true,
             children: [],
             path: '1.0.1',
-            fullName: `keys${delimiterMock}1${delimiterMock}keys:1:2keys${delimiterMock}keys${delimiterMock}`,
+            fullName: `keys-1-keys:1:2keys${delimiterMock}keys${delimiterMock}`,
           }
         ],
         keyCount: 2,
         keyApproximate: 20,
         path: '1.0',
-        fullName: `keys${delimiterMock}1${delimiterMock}`,
+        fullName: 'keys-1',
       },
       {
         nameString: 'keys_2',
         isLeaf: true,
         children: [],
         path: '1.1',
-        fullName: `keys${delimiterMock}keys_2keys${delimiterMock}keys${delimiterMock}`,
+        fullName: `keys-keys_2keys${delimiterMock}keys${delimiterMock}`,
       },
       {
         nameString: 'keys:1',
         isLeaf: true,
         children: [],
         path: '1.2',
-        fullName: `keys${delimiterMock}keys:1keys${delimiterMock}keys${delimiterMock}`,
+        fullName: `keys-keys:1keys${delimiterMock}keys${delimiterMock}`,
       },
       {
         nameString: 'keys:2',
         isLeaf: true,
         children: [],
         path: '1.3',
-        fullName: `keys${delimiterMock}keys:2keys${delimiterMock}keys${delimiterMock}`,
+        fullName: `keys-keys:2keys${delimiterMock}keys${delimiterMock}`,
       },
       {
         nameString: 'keys:3',
         isLeaf: true,
         children: [],
         path: '1.4',
-        fullName: `keys${delimiterMock}keys:3keys${delimiterMock}keys${delimiterMock}`,
+        fullName: `keys-keys:3keys${delimiterMock}keys${delimiterMock}`,
       }
     ],
     keyCount: 6,
     keyApproximate: 60,
     path: '1',
-    fullName: `keys${delimiterMock}`,
+    fullName: 'keys',
   },
   {
     nameString: 'keys1',

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

@@ -69,7 +69,8 @@ const KeyTree = forwardRef((props: Props, ref) => {
   const [items, setItems] = useState<IKeyPropTypes[]>(parseKeyNames(keysState.keys ?? []))
 
   // escape regexp symbols and join and transform to regexp
-  const delimiterPattern = comboBoxToArray(treeViewDelimiter)
+  const delimiters = comboBoxToArray(treeViewDelimiter)
+  const delimiterPattern = delimiters
     .map(escapeRegExp)
     .join('|')
 
@@ -194,6 +195,7 @@ const KeyTree = forwardRef((props: Props, ref) => {
         <VirtualTree
           items={items}
           loadingIcon={TreeViewSVG}
+          delimiters={delimiters}
           delimiterPattern={delimiterPattern}
           sorting={sorting}
           deleting={deleting}

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

@@ -91,6 +91,8 @@
     height: 30px !important;
   }
   :global(.euiComboBox__inputWrap) {
+    max-height: 200px;
+    overflow: auto;
     max-width: 210px !important;
     padding: 2px 4px !important;
     min-height: 34px !important;

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

@@ -28,6 +28,7 @@ import styles from './styles.module.scss'
 export interface Props {
   items: IKeyPropTypes[]
   delimiterPattern: string
+  delimiters: string[]
   loadingIcon?: string
   loading: boolean
   deleting: boolean
@@ -53,6 +54,7 @@ const VirtualTree = (props: Props) => {
   const {
     items,
     delimiterPattern,
+    delimiters,
     loadingIcon = 'empty',
     statusOpen = {},
     statusSelected,
@@ -191,6 +193,7 @@ const VirtualTree = (props: Props) => {
       type: node.type,
       fullName: node.fullName,
       shortName: node.nameString?.split(new RegExp(delimiterPattern, 'g')).pop(),
+      delimiters,
       nestingLevel,
       deleting,
       path: node.path,

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

@@ -47,6 +47,7 @@ const Node = ({
     nameString,
     keyApproximate,
     isSelected,
+    delimiters = [],
     getMetadata,
     onDelete,
     onDeleteClicked,
@@ -163,8 +164,14 @@ const Node = ({
 
   const tooltipContent = (
     <>
-      <b>{`${fullName}*`}</b>
-      <br />
+      <div className={styles.folderTooltipHeader}>
+        <span className={styles.folderPattern}>{`${fullName}-*`}</span>
+        <span className={styles.delimiters}>
+          {delimiters.map((delimiter) => (
+            <span className={styles.delimiter}>{delimiter}</span>
+          ))}
+        </span>
+      </div>
       <span>{`${keyCount} key(s) (${Math.round(keyApproximate * 100) / 100}%)`}</span>
     </>
   )

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

@@ -140,3 +140,27 @@
 .deletePopover {
   max-width: 400px !important;
 }
+
+.folderTooltipHeader {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.delimiters {
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+
+.folderPattern {
+  margin-right: 4px;
+}
+
+.delimiter {
+  margin-bottom: 2px;
+  padding: 2px 5px;
+  margin-right: 4px;
+  border-radius: 2px;
+  background-color: var(--euiColorLightestShade);
+}

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

@@ -50,6 +50,7 @@ export interface TreeData extends FixedSizeNodeData {
   nestingLevel: number
   deleting: boolean
   isSelected: boolean
+  delimiters: string[]
   children?: TreeData[]
   updateStatusOpen: (fullName: string, value: boolean) => void
   updateStatusSelected: (key: RedisString) => void