Merge pull request #247 from RedisInsight/feature/RI-6514_Support_multiple_key_name_delimiter

#RI-6514 - Support multiple key name delimiters

Author: vlad-dargel

.eslintrc.js

@@ -48,6 +48,7 @@ module.exports = {
         code: 140,
       },
     ],
+    'jsx-quotes': ['error', 'prefer-double'],
     'class-methods-use-this': 'off',
     // https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports
     'react-refresh/only-export-components': ['warn'],

l10n/bundle.l10n.json

@@ -17,7 +17,7 @@
   "Recommended": "Recommended",
   "Page was not found": "Page was not found",
   "Settings": "Settings",
-  "Delimiter to separate namespaces": "Delimiter to separate namespaces",
+  "Delimiter": "Delimiter",
   "key(s)": "key(s)",
   "({0}{1} Scanned)": "({0}{1} Scanned)",
   "All Key Types": "All Key Types",

package.json

@@ -145,6 +145,7 @@
     "dev:key": "cross-env RI_DATA_ROUTE=main/key vite dev",
     "dev:database": "cross-env RI_DATA_ROUTE=main/add_database vite dev",
     "dev:sidebar": "cross-env RI_DATA_ROUTE=sidebar vite dev",
+    "dev:settings": "cross-env RI_DATA_ROUTE=main/settings vite dev",
     "l10n:collect": "npx @vscode/l10n-dev export -o ./l10n ./src",
     "watch": "tsc -watch -p ./",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",

src/webviews/src/components/index.ts

@@ -11,10 +11,12 @@ export { NoDatabases } from './no-databases/NoDatabases'
 export { MonacoLanguages } from './monaco-languages/MonacoLanguages'
 export { UploadFile } from './upload-file/UploadFile'
 export { SuperSelect } from './super-select/SuperSelect'
+export { MultiSelect } from './multi-select/MultiSelect'
 export { SuperSelectRemovableOption } from './super-select/components/removable-option/RemovableOption'
 export { AutoRefresh } from './auto-refresh/AutoRefresh'
 export * from './database-form'
 export * from './consents-option'
 export * from './consents-privacy'
 
 export type { SuperSelectOption } from './super-select/SuperSelect'
+export type { MultiSelectOption } from './multi-select/MultiSelect'

src/webviews/src/components/multi-select/MultiSelect.spec.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+
+import { render, constants } from 'testSrc/helpers'
+import { MultiSelect, Props } from './MultiSelect'
+
+const mockedProps = mock<Props>()
+
+describe('MultiSelect', () => {
+  it('should render', async () => {
+    expect(render(
+      <MultiSelect {...instance(mockedProps)} options={constants.SUPER_SELECT_OPTIONS} />),
+    ).toBeTruthy()
+  })
+})

src/webviews/src/components/multi-select/MultiSelect.tsx

@@ -0,0 +1,57 @@
+import React, { FC } from 'react'
+import cx from 'classnames'
+import Select, { CreatableProps } from 'react-select/creatable'
+import { GroupBase } from 'react-select'
+
+import { Maybe } from 'uiSrc/interfaces'
+import styles from './styles.module.scss'
+
+export interface MultiSelectOption {
+  label: string
+  value: string
+  testid?: string
+}
+
+export interface Props extends CreatableProps<MultiSelectOption, true, GroupBase<MultiSelectOption>> {
+  options?: Maybe<MultiSelectOption[]>
+  selectedOption?: Maybe<MultiSelectOption>
+  containerClassName?: string
+  itemClassName?: string
+  testid?: string
+}
+
+const components = {
+  DropdownIndicator: null,
+}
+
+const MultiSelect: FC<Props> = (props) => {
+  const {
+    containerClassName,
+    testid,
+  } = props
+
+  return (
+    <div className={cx(styles.container, containerClassName)}>
+      <Select<MultiSelectOption, true>
+        {...props}
+        isMulti
+        isClearable
+        components={components}
+        menuIsOpen={false}
+        inputId={testid}
+        classNames={{
+          container: () => styles.selectContainer,
+          control: () => styles.control,
+          multiValue: () => styles.multiValue,
+          multiValueRemove: () => styles.multiValueRemove,
+          menu: () => '!hidden',
+          input: () => styles.input,
+          indicatorsContainer: () => '!hidden',
+          indicatorSeparator: () => '!hidden',
+        }}
+      />
+    </div>
+  )
+}
+
+export { MultiSelect }

src/webviews/src/components/multi-select/styles.module.scss

@@ -0,0 +1,44 @@
+.container {
+  @apply min-w-[210px] #{!important};
+}
+
+.selectContainer {
+  @apply min-h-8 #{!important};
+}
+
+.control {
+  @apply bg-vscode-dropdown-background border-solid border border-vscode-input-border rounded-none min-h-8 max-h-40 cursor-pointer overflow-auto #{!important};
+
+  scroll-padding-bottom: 8px;
+}
+
+.multiValue {
+  background-color: var(--vscode-banner-background) !important;
+
+  div {
+    color: var(--vscode-banner-iconForeground) !important;
+  }
+}
+
+.multiValueRemove {
+  @apply h-[14px] w-[14px] pl-[2px] mt-1 ml-0.5 mr-1 #{!important};
+  border-radius: 50% !important;
+  background-color: var(--vscode-banner-iconForeground) !important;
+  transition: transform 0.1s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+
+  svg {
+    @apply h-[10px] w-[10px] min-w-[10px] #{!important};
+    path {
+      fill: var(--vscode-inlineChat-background) #{!important};
+    }
+  }
+}
+
+.input {
+  @apply text-vscode-foreground max-w-full truncate #{!important};
+}
+

src/webviews/src/components/super-select/components/removable-option/RemovableOption.tsx

@@ -47,8 +47,8 @@ const SuperSelectRemovableOption = (props: Props) => {
             text={l10n.t('will be removed from Redis for VS Code.')}
             item={(options[i] as SuperSelectOption).value}
             suffix={suffix}
-            triggerClassName='absolute right-2.5'
-            position='right center'
+            triggerClassName="absolute right-2.5"
+            position="right center"
             deleting={activeOptionId}
             showPopover={showPopover}
             handleDeleteItem={handleRemoveOption}

src/webviews/src/constants/core/eventKeys.ts

@@ -0,0 +1,6 @@
+export enum EventKeys {
+  ENTER = 'Enter',
+  SPACE = ' ',
+  ESCAPE = 'Escape',
+  TAB = 'Tab',
+}

src/webviews/src/constants/index.ts

@@ -4,6 +4,7 @@ export * from './core/apiErrors'
 export * from './core/app'
 export * from './core/storage'
 export * from './core/commands'
+export * from './core/eventKeys'
 export * from './connections/databases'
 export * from './keys/types'
 export * from './keys/tree'

src/webviews/src/index.tsx

@@ -12,6 +12,7 @@ import { Config } from 'uiSrc/modules'
 import { AppRoutes } from 'uiSrc/Routes'
 import { PostMessage, SelectKeyAction, SetDatabaseAction } from 'uiSrc/interfaces'
 import { VscodeMessageAction } from 'uiSrc/constants'
+import { migrateLocalStorageData } from 'uiSrc/services'
 import { useAppInfoStore } from './store/hooks/use-app-info-store/useAppInfoStore'
 import {
   processCliAction,
@@ -26,6 +27,8 @@ import { MonacoLanguages } from './components'
 import './styles/main.scss'
 import '../vscode.css'
 
+migrateLocalStorageData()
+
 document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('message', handleMessage)
 
@@ -71,7 +74,7 @@ document.addEventListener('DOMContentLoaded', () => {
         useAppInfoStore.getState().updateUserConfigSettingsSuccess(message.data)
         break
       case VscodeMessageAction.UpdateSettingsDelimiter:
-        useAppInfoStore.getState().setDelimiter(message.data)
+        useAppInfoStore.getState().setDelimiters(message.data)
         break
 
       // CLI

src/webviews/src/interfaces/vscode/api.ts

@@ -91,7 +91,7 @@ export interface UpdateSettingsAction {
 
 export interface UpdateSettingsDelimiterAction {
   action: VscodeMessageAction.UpdateSettingsDelimiter
-  data: string
+  data: string[]
 }
 
 export interface SaveAppInfoAction {

src/webviews/src/modules/add-key/components/AddKeyList/AddKeyList.tsx

@@ -91,17 +91,17 @@ export const AddKeyList = (props: Props) => {
     <>
       <form onSubmit={onFormSubmit} className="key-footer-items-container pl-0 h-full">
         <h3 className="font-bold uppercase pb-3">{l10n.t('Element')}</h3>
-          <div className="w-1/3 mr-2 mb-3">
-            <Select
-              position="below"
-              options={optionsDestinations}
-              containerClassName={styles.select}
-              itemClassName={styles.selectOption}
-              idSelected={destination}
-              onChange={(value) => setDestination(value as ListElementDestination)}
-              testid="destination-select"
+        <div className="w-1/3 mr-2 mb-3">
+          <Select
+            position="below"
+            options={optionsDestinations}
+            containerClassName={styles.select}
+            itemClassName={styles.selectOption}
+            idSelected={destination}
+            onChange={(value) => setDestination(value as ListElementDestination)}
+            testid="destination-select"
             />
-          </div>
+        </div>
         {elements.map((item, index) => (
           <div key={index}>
             <div className="flex items-center mb-3">

src/webviews/src/modules/key-details-header/KeyDetailsHeader.tsx

@@ -123,7 +123,7 @@ const KeyDetailsHeader = ({
               <KeyDetailsHeaderTTL onEditTTL={handleEditTTL} />
               <div className="flex ml-auto">
                 <div className={styles.subtitleActionBtns}>
-                  <Actions width={width} key='auto-refresh'>
+                  <Actions width={width} key="auto-refresh">
                     <AutoRefresh
                       postfix={type}
                       disabled={refreshing || refreshDisabled}

src/webviews/src/modules/keys-tree/KeysTree.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
-import { isString, isUndefined } from 'lodash'
+import { isUndefined, escapeRegExp } from 'lodash'
 
 import { KeyInfo, Nullable, RedisString } from 'uiSrc/interfaces'
 import { AllKeyTypes, VscodeMessageAction } from 'uiSrc/constants'
@@ -26,12 +26,14 @@ export interface Props {
 }
 
 export const KeysTree = ({ database }: Props) => {
-  const delimiter = useAppInfoStore((state) => state.delimiter)
+  const delimiters = useAppInfoStore((state) => state.delimiters)
   const openNodes = useContextInContext((state) => state.keys.tree.openNodes)
   const sorting = useContextInContext((state) => state.dbConfig.treeViewSort)
 
-  const selectedKeyName = useSelectedKeyStore((state) => state.data?.nameString) || ''
-  const selectedKey = useSelectedKeyStore((state) => state.data?.name) || null
+  const { selectedKeyName, selectedKey } = useSelectedKeyStore((state) => ({
+    selectedKeyName: state.data?.nameString || '',
+    selectedKey: state.data?.name || null,
+  }))
 
   const keysState = useKeysInContext((state) => state.data)
   const loading = useKeysInContext((state) => state.loading)
@@ -45,6 +47,11 @@ export const KeysTree = ({ database }: Props) => {
   const [firstDataLoaded, setFirstDataLoaded] = useState<boolean>(!!keysState.keys?.length)
   const [items, setItems] = useState<KeyInfo[]>(parseKeyNames(keysState.keys ?? []))
 
+  // escape regexp symbols and join and transform to regexp
+  const delimiterPattern = delimiters
+    .map(escapeRegExp)
+    .join('|')
+
   useEffect(() => {
     if (!firstDataLoaded) {
       keysApi.fetchPatternKeysAction()
@@ -58,9 +65,9 @@ export const KeysTree = ({ database }: Props) => {
 
   // open all parents for selected key
   const openSelectedKey = (selectedKeyName: Nullable<string> = '') => {
-    if (selectedKeyName && isString(selectedKeyName)) {
-      const parts = selectedKeyName?.split(delimiter)
-      const parents = parts.map((_, index) => parts.slice(0, index + 1).join(delimiter) + delimiter)
+    if (selectedKeyName) {
+      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()
@@ -80,7 +87,7 @@ export const KeysTree = ({ database }: Props) => {
   useEffect(() => {
     setFirstDataLoaded(true)
     setItems(parseKeyNames(keysState.keys))
-  }, [sorting, delimiter, keysState.lastRefreshTime])
+  }, [sorting, delimiterPattern, keysState.lastRefreshTime])
 
   useEffect(() => {
     openSelectedKey(selectedKeyName)
@@ -167,7 +174,8 @@ export const KeysTree = ({ database }: Props) => {
     >
       <VirtualTree
         items={items}
-        delimiter={delimiter}
+        delimiters={delimiters}
+        delimiterPattern={delimiterPattern}
         sorting={sorting}
         database={database}
         statusSelected={selectedKeyName}

src/webviews/src/modules/keys-tree/components/key-row-name/KeyRowName.tsx

@@ -29,17 +29,19 @@ export const KeyRowName = (props: Props) => {
 
   return (
     <Tooltip
+      repositionOnResize
+      keepTooltipInside={false}
+      position="bottom center"
       title={nameTooltipTitle}
       content={nameTooltipContent}
       mouseEnterDelay={300}
-      className={cx(styles.keyNameContainer)}
     >
-      <>
+      <div className="flex flex-row truncate">
         <VscKey className={cx(styles.icon)} />
         <div className={cx(styles.keyName)} data-testid={`key-${shortString}`}>
           {nameContent}
         </div>
-      </>
+      </div>
     </Tooltip>
   )
 }

src/webviews/src/modules/keys-tree/components/key-row-name/styles.module.scss

@@ -3,10 +3,6 @@
   margin-top: 7px;
 }
 
-.keyNameContainer {
-  @apply flex truncate h-full;
-}
-
 .keyName {
   @apply inline-block truncate;
   padding-left: 10px;