#RI-6300 - Multiple delimiters in Tree view

Author: egor-zalenski

redisinsight/ui/src/constants/browser.ts

@@ -1,7 +1,7 @@
 import { EuiComboBoxOptionOption } from '@elastic/eui'
 import { KeyValueFormat, SortOrder } from './keys'
 
-export const DEFAULT_DELIMITER: EuiComboBoxOptionOption[] = [{ label: ':' }]
+export const DEFAULT_DELIMITER: EuiComboBoxOptionOption = { label: ':' }
 export const DEFAULT_TREE_SORTING = SortOrder.ASC
 export const DEFAULT_SHOW_HIDDEN_RECOMMENDATIONS = false
 

redisinsight/ui/src/helpers/constructKeysToTree.ts

@@ -3,20 +3,20 @@ import { IKeyPropTypes } from 'uiSrc/constants/prop-types/keys'
 
 interface Props {
   items: IKeyPropTypes[]
-  delimiter?: string
+  delimiterPattern?: string
   sorting?: SortOrder
 }
 
 export const constructKeysToTree = (props: Props): any[] => {
-  const { items: keys, delimiter = ':', sorting = 'ASC' } = props
-  const keysSymbol = `keys${delimiter}keys`
+  const { items: keys, delimiterPattern = ':', sorting = 'ASC' } = props
+  const keysSymbol = `keys${delimiterPattern}keys`
   const tree: any = {}
 
   keys.forEach((key: any) => {
     // eslint-disable-next-line prefer-object-spread
     let currentNode: any = tree
     const { nameString: name = '' } = key
-    const nameSplitted = name.split(new RegExp(delimiter, 'g'))
+    const nameSplitted = name.split(new RegExp(delimiterPattern, 'g'))
     const lastIndex = nameSplitted.length - 1
 
     nameSplitted.forEach((value:any, index: number) => {
@@ -106,5 +106,5 @@ export const constructKeysToTree = (props: Props): any[] => {
     })
   }
 
-  return formatTreeData(tree, '', delimiter)
+  return formatTreeData(tree, '', delimiterPattern)
 }

redisinsight/ui/src/helpers/tests/constructKeysToTree.spec.ts

@@ -15,7 +15,7 @@ const constructKeysToTreeTests: any[] = [
       { nameString: 'keys:2', type: 'hash', ttl: -1, size: 71 },
       { nameString: 'keys_2', type: 'hash', ttl: -1, size: 71 },
     ],
-    delimiter: delimiterMock
+    delimiterPattern: delimiterMock
   },
   constructKeysToTreeMockResult
   ]

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

@@ -69,7 +69,7 @@ const KeyTree = forwardRef((props: Props, ref) => {
   const [items, setItems] = useState<IKeyPropTypes[]>(parseKeyNames(keysState.keys ?? []))
 
   // escape regexp symbols and join and transform to regexp
-  const delimiter = comboBoxToArray(treeViewDelimiter)
+  const delimiterPattern = comboBoxToArray(treeViewDelimiter)
     .map(escapeRegExp)
     .join('|')
 
@@ -92,8 +92,8 @@ const KeyTree = forwardRef((props: Props, ref) => {
   // open all parents for selected key
   const openSelectedKey = (selectedKeyName: Nullable<string> = '') => {
     if (selectedKeyName) {
-      const parts = selectedKeyName.split(delimiter)
-      const parents = parts.map((_, index) => parts.slice(0, index + 1).join(delimiter) + delimiter)
+      const parts = selectedKeyName.split(delimiterPattern)
+      const parents = parts.map((_, index) => parts.slice(0, index + 1).join(delimiterPattern) + delimiterPattern)
 
       // remove key name from parents
       parents.pop()
@@ -116,7 +116,7 @@ const KeyTree = forwardRef((props: Props, ref) => {
     }
 
     setItems(parseKeyNames(keysState.keys))
-  }, [keysState.lastRefreshTime, delimiter, sorting])
+  }, [keysState.lastRefreshTime, delimiterPattern, sorting])
 
   useEffect(() => {
     openSelectedKey(selectedKeyName)
@@ -194,7 +194,7 @@ const KeyTree = forwardRef((props: Props, ref) => {
         <VirtualTree
           items={items}
           loadingIcon={TreeViewSVG}
-          delimiter={delimiter}
+          delimiterPattern={delimiterPattern}
           sorting={sorting}
           deleting={deleting}
           statusSelected={selectedKeyName}

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

@@ -24,7 +24,6 @@ let store: typeof mockedStore
 const APPLY_BTN = 'tree-view-apply-btn'
 const TREE_SETTINGS_TRIGGER_BTN = 'tree-view-settings-btn'
 const SORTING_SELECT = 'tree-view-sorting-select'
-const DELIMITER_INPUT = 'tree-view-delimiter-input'
 const SORTING_DESC_ITEM = 'tree-view-sorting-item-DESC'
 
 beforeEach(() => {
@@ -130,7 +129,7 @@ describe('KeyTreeDelimiter', () => {
       event: TelemetryEvent.TREE_VIEW_DELIMITER_CHANGED,
       eventData: {
         databaseId: INSTANCE_ID_MOCK,
-        from: comboBoxToArray(DEFAULT_DELIMITER),
+        from: comboBoxToArray([DEFAULT_DELIMITER]),
         to: [value],
       }
     })
@@ -164,7 +163,7 @@ describe('KeyTreeDelimiter', () => {
     })
 
     const expectedActions = [
-      setBrowserTreeDelimiter(DEFAULT_DELIMITER),
+      setBrowserTreeDelimiter([DEFAULT_DELIMITER]),
       resetBrowserTree(),
     ]
 

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

@@ -42,7 +42,7 @@ const sortOptions = [SortOrder.ASC, SortOrder.DESC].map((value) => ({
 const KeyTreeSettings = ({ loading }: Props) => {
   const { instanceId = '' } = useParams<{ instanceId: string }>()
   const {
-    treeViewDelimiter = DEFAULT_DELIMITER,
+    treeViewDelimiter = [DEFAULT_DELIMITER],
     treeViewSort = DEFAULT_TREE_SORTING,
   } = useSelector(appContextDbConfig)
   const [sorting, setSorting] = useState<SortOrder>(treeViewSort)
@@ -86,7 +86,7 @@ const KeyTreeSettings = ({ loading }: Props) => {
 
   const handleApply = () => {
     if (!isEqual(delimiters, treeViewDelimiter)) {
-      const delimitersValue = delimiters.length ? delimiters : DEFAULT_DELIMITER
+      const delimitersValue = delimiters.length ? delimiters : [DEFAULT_DELIMITER]
 
       dispatch(setBrowserTreeDelimiter(delimitersValue))
       sendEventTelemetry({

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

@@ -27,7 +27,7 @@ import styles from './styles.module.scss'
 
 export interface Props {
   items: IKeyPropTypes[]
-  delimiter: string
+  delimiterPattern: string
   loadingIcon?: string
   loading: boolean
   deleting: boolean
@@ -52,7 +52,7 @@ export const KEYS = 'keys'
 const VirtualTree = (props: Props) => {
   const {
     items,
-    delimiter,
+    delimiterPattern,
     loadingIcon = 'empty',
     statusOpen = {},
     statusSelected,
@@ -103,13 +103,13 @@ const VirtualTree = (props: Props) => {
       nodes.current = []
       elements.current = {}
       rerender({})
-      runWebworker?.({ items: [], delimiter, sorting })
+      runWebworker?.({ items: [], delimiterPattern, sorting })
       return
     }
 
     setConstructingTree(true)
-    runWebworker?.({ items, delimiter, sorting })
-  }, [items, delimiter])
+    runWebworker?.({ items, delimiterPattern, sorting })
+  }, [items, delimiterPattern])
 
   const handleUpdateSelected = useCallback((name: RedisString) => {
     onStatusSelected?.(name)
@@ -190,7 +190,7 @@ const VirtualTree = (props: Props) => {
       size: node.size,
       type: node.type,
       fullName: node.fullName,
-      shortName: node.nameString?.split(new RegExp(delimiter, 'g')).pop(),
+      shortName: node.nameString?.split(new RegExp(delimiterPattern, 'g')).pop(),
       nestingLevel,
       deleting,
       path: node.path,

redisinsight/ui/src/slices/app/context.ts

@@ -38,7 +38,7 @@ export const initialState: StateAppContext = {
   contextRdiInstanceId: '',
   lastPage: '',
   dbConfig: {
-    treeViewDelimiter: DEFAULT_DELIMITER,
+    treeViewDelimiter: [DEFAULT_DELIMITER],
     treeViewSort: DEFAULT_TREE_SORTING,
     slowLogDurationUnit: DEFAULT_SLOWLOG_DURATION_UNIT,
     showHiddenRecommendations: DEFAULT_SHOW_HIDDEN_RECOMMENDATIONS,
@@ -127,7 +127,7 @@ const appContextSlice = createSlice({
       state.workspace = payload || AppWorkspace.Databases
     },
     setDbConfig: (state, { payload }) => {
-      state.dbConfig.treeViewDelimiter = payload?.treeViewDelimiter ?? DEFAULT_DELIMITER
+      state.dbConfig.treeViewDelimiter = payload?.treeViewDelimiter ?? [DEFAULT_DELIMITER]
       state.dbConfig.treeViewSort = payload?.treeViewSort ?? DEFAULT_TREE_SORTING
       state.dbConfig.slowLogDurationUnit = payload?.slowLogDurationUnit ?? DEFAULT_SLOWLOG_DURATION_UNIT
       state.dbConfig.showHiddenRecommendations = payload?.showHiddenRecommendations

redisinsight/ui/src/utils/common.ts

@@ -1,4 +1,3 @@
-import { EuiComboBoxOptionOption } from '@elastic/eui'
 import { IpcInvokeEvent } from 'uiSrc/electron/constants'
 
 const baseApiUrl = process.env.RI_BASE_API_URL
@@ -51,5 +50,3 @@ export const openNewWindowDatabase = (location: string) => {
     { location },
   )
 }
-
-export const comboBoxToArray = (items: EuiComboBoxOptionOption[]) => [...items].map(({ label }) => label)

redisinsight/ui/src/utils/tests/transformers/browser.spec.ts

@@ -0,0 +1,16 @@
+import { comboBoxToArray } from 'uiSrc/utils'
+
+const getOutputForFormatToTextTests: any[] = [
+  [[], []],
+  [[{ label: '123' }, { label: 'test' }], ['123', 'test']],
+  [[{ label1: '123' }], []],
+  [[{ label: '123' }, { label: 'test' }], ['123', 'test']],
+]
+
+describe('formatToText', () => {
+  it.each(getOutputForFormatToTextTests)('for input: %s (reply), should be output: %s',
+    (reply, expected) => {
+      const result = comboBoxToArray(reply)
+      expect(result).toEqual(expected)
+    })
+})