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

Author: egor-zalenski

redisinsight/ui/src/helpers/constructKeysToTree.ts

@@ -4,11 +4,12 @@ import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys'
 interface Props {
   items: IKeyPropTypes[]
   delimiterPattern?: string
+  delimiters?: string[]
   sorting?: SortOrder
 }
 
 export const constructKeysToTree = (props: Props): any[] => {
-  const { items: keys, delimiterPattern = ':', sorting = 'ASC' } = props
+  const { items: keys, delimiterPattern = ':', delimiters = [], sorting = 'ASC' } = props
   const keysSymbol = `keys${delimiterPattern}keys`
   const tree: any = {}
 
@@ -82,9 +83,10 @@ export const constructKeysToTree = (props: Props): any[] => {
 
       // populate node with children nodes
       if (!tree[key].isLeaf && Object.keys(tree[key]).length > 0) {
+        const delimiterView = delimiters.length === 1 ? delimiters[0] : '-'
         node.children = formatTreeData(
           tree[key],
-          `${previousKey + name}-`,
+          `${previousKey + name + delimiterView}`,
           delimiter,
           path,
         )

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

@@ -105,12 +105,12 @@ const VirtualTree = (props: Props) => {
       nodes.current = []
       elements.current = {}
       rerender({})
-      runWebworker?.({ items: [], delimiterPattern, sorting })
+      runWebworker?.({ items: [], delimiterPattern, delimiters, sorting })
       return
     }
 
     setConstructingTree(true)
-    runWebworker?.({ items, delimiterPattern, sorting })
+    runWebworker?.({ items, delimiterPattern, delimiters, sorting })
   }, [items, delimiterPattern])
 
   const handleUpdateSelected = useCallback((name: RedisString) => {

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

@@ -55,6 +55,8 @@ const Node = ({
     updateStatusSelected,
   } = data
 
+  const delimiterView = delimiters.length === 1 ? delimiters[0] : '-'
+
   const [deletePopoverId, setDeletePopoverId] = useState<Maybe<string>>(undefined)
 
   useEffect(() => {
@@ -165,12 +167,14 @@ const Node = ({
   const tooltipContent = (
     <>
       <div className={styles.folderTooltipHeader}>
-        <span className={styles.folderPattern}>{`${fullName}-*`}</span>
-        <span className={styles.delimiters}>
-          {delimiters.map((delimiter) => (
-            <span className={styles.delimiter}>{delimiter}</span>
-          ))}
-        </span>
+        <span className={styles.folderPattern}>{`${fullName + delimiterView}*`}</span>
+        {delimiters.length > 1 && (
+          <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

@@ -145,7 +145,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  white-space: nowrap;
+  word-break: break-all;
 }
 
 .delimiters {
@@ -154,7 +154,9 @@
 }
 
 .folderPattern {
+  font-weight: bold;
   margin-right: 4px;
+  white-space: normal;
 }
 
 .delimiter {