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'