Merge pull request #56 from RedisInsight/feature/RI-2063_command-groups

#RI-2063 - dynamically display command groups

Author: rsergeenko

redisinsight/ui/src/components/cli/components/cli-search/CliSearchFilter/CliSearchFilter.spec.tsx

@@ -1,9 +1,23 @@
 import React from 'react'
 import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
-
-import { FILTER_GROUP_TYPE_OPTIONS } from './constants'
+import { GROUP_TYPES_DISPLAY } from 'uiSrc/constants'
 import CliSearchFilter from './CliSearchFilter'
 
+const redisCommandsPath = 'uiSrc/slices/app/redis-commands'
+
+const commandGroupsMock = ['list', 'hash', 'set']
+
+jest.mock(redisCommandsPath, () => {
+  const defaultState = jest.requireActual(redisCommandsPath).initialState
+  return {
+    ...jest.requireActual(redisCommandsPath),
+    appRedisCommandsSelector: jest.fn().mockReturnValue({
+      ...defaultState,
+      commandGroups: commandGroupsMock
+    }),
+  }
+})
+
 describe('CliSearchFilter', () => {
   it('should render', () => {
     expect(render(<CliSearchFilter submitFilter={jest.fn()} />)).toBeTruthy()
@@ -12,9 +26,10 @@ describe('CliSearchFilter', () => {
   it('should call submitFilter after choose options', () => {
     const submitFilter = jest.fn()
     const { queryByText } = render(<CliSearchFilter submitFilter={submitFilter} />)
+    const testGroup = commandGroupsMock[0]
     fireEvent.click(screen.getByTestId('select-filter-group-type'))
-    fireEvent.click(queryByText(FILTER_GROUP_TYPE_OPTIONS[0].text) || document)
+    fireEvent.click(queryByText((GROUP_TYPES_DISPLAY as any)[testGroup]) || document)
 
-    expect(submitFilter).toBeCalledWith(FILTER_GROUP_TYPE_OPTIONS[0].value)
+    expect(submitFilter).toBeCalledWith(testGroup)
   })
 })

redisinsight/ui/src/components/cli/components/cli-search/CliSearchFilter/CliSearchFilter.tsx

@@ -9,8 +9,9 @@ import {
 } from '@elastic/eui'
 import { useSelector } from 'react-redux'
 
+import { GROUP_TYPES_DISPLAY } from 'uiSrc/constants'
+import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
 import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings'
-import { FILTER_GROUP_TYPE_OPTIONS } from 'uiSrc/components/cli/components/cli-search/CliSearchFilter/constants'
 
 import styles from './styles.module.scss'
 
@@ -20,6 +21,8 @@ export interface Props {
 }
 
 const CliSearchFilter = ({ submitFilter, isLoading }: Props) => {
+  const { commandGroups = [] } = useSelector(appRedisCommandsSelector)
+
   const [isSelectOpen, setIsSelectOpen] = useState<boolean>(false)
   const [typeSelected, setTypeSelected] = useState<string>('')
 
@@ -35,17 +38,22 @@ const CliSearchFilter = ({ submitFilter, isLoading }: Props) => {
     setTypeSelected('')
   }, [matchedCommand])
 
-  const options: EuiSuperSelectOption<string>[] = FILTER_GROUP_TYPE_OPTIONS.map(
+  const groupOptions = [...commandGroups].sort().map((group: string) => ({
+    text: (GROUP_TYPES_DISPLAY as any)[group] || group.replace(/_/g, ' '),
+    value: group
+  }))
+
+  const options: EuiSuperSelectOption<string>[] = groupOptions.map(
     (item) => {
       const { value, text } = item
       return {
         value,
         inputDisplay: (
-          <EuiText className={styles.selectedType} size="s">
+          <EuiText className={cx(styles.selectedType, 'text-capitalize')} size="s">
             {text}
           </EuiText>
         ),
-        dropdownDisplay: <EuiText>{text}</EuiText>,
+        dropdownDisplay: <EuiText className="text-capitalize">{text}</EuiText>,
         'data-test-subj': `filter-option-group-type-${value}`,
       }
     }

redisinsight/ui/src/components/cli/components/cli-search/CliSearchFilter/constants.ts

@@ -3,7 +3,7 @@ import { EuiBadge, EuiText } from '@elastic/eui'
 import { CommandGroup, KeyTypes, GROUP_TYPES_COLORS, GROUP_TYPES_DISPLAY } from 'uiSrc/constants'
 
 export interface Props {
-  type: KeyTypes | CommandGroup;
+  type: KeyTypes | CommandGroup | string;
   name?: string,
   className?: string
 }
@@ -15,7 +15,7 @@ const GroupBadge = ({ type, name = '', className = '' }: Props) => (
     data-testid={`badge-${type} ${name}`}
   >
     <EuiText style={{ color: 'var(--euiTextSubduedColorHover)' }} className="text-uppercase" size="xs">
-      {GROUP_TYPES_DISPLAY[type] ?? type}
+      {(GROUP_TYPES_DISPLAY as any)[type] ?? type.replace(/_/g, ' ')}
     </EuiText>
   </EuiBadge>
 )

redisinsight/ui/src/components/group-badge/GroupBadge.tsx

@@ -20,7 +20,7 @@ export const GROUP_TYPES_DISPLAY = Object.freeze({
   [KeyTypes.Hash]: 'Hash',
   [KeyTypes.List]: 'List',
   [KeyTypes.Set]: 'Set',
-  [KeyTypes.ZSet]: 'Zset',
+  [KeyTypes.ZSet]: 'Sorted Set',
   [KeyTypes.String]: 'String',
   [KeyTypes.ReJSON]: 'JSON',
   [KeyTypes.JSON]: 'JSON',
@@ -32,11 +32,12 @@ export const GROUP_TYPES_DISPLAY = Object.freeze({
   [CommandGroup.Connection]: 'Connection',
   [CommandGroup.Geo]: 'Geo',
   [CommandGroup.Generic]: 'Generic',
-  [CommandGroup.PubSub]: 'PubSub',
+  [CommandGroup.PubSub]: 'Pub/Sub',
   [CommandGroup.Scripting]: 'Scripting',
   [CommandGroup.Transactions]: 'Transactions',
+  [CommandGroup.TimeSeries]: 'TimeSeries',
   [CommandGroup.Server]: 'Server',
-  [CommandGroup.SortedSet]: 'ZSet',
+  [CommandGroup.SortedSet]: 'Sorted Set',
   [CommandGroup.HyperLogLog]: 'HyperLogLog',
 })
 

redisinsight/ui/src/constants/keys.ts

@@ -7,7 +7,7 @@ export const ADD_KEY_TYPE_OPTIONS = [
     color: GROUP_TYPES_COLORS[KeyTypes.Hash],
   },
   {
-    text: 'Zset',
+    text: 'Sorted Set',
     value: KeyTypes.ZSet,
     color: GROUP_TYPES_COLORS[KeyTypes.ZSet],
   },

redisinsight/ui/src/pages/browser/components/add-key/constants/key-type-options.ts

@@ -11,7 +11,7 @@ export const FILTER_KEY_TYPE_OPTIONS = [
     color: GROUP_TYPES_COLORS[KeyTypes.Hash],
   },
   {
-    text: 'Zset',
+    text: 'Sorted Set',
     value: KeyTypes.ZSet,
     color: GROUP_TYPES_COLORS[KeyTypes.ZSet],
   },

redisinsight/ui/src/pages/browser/components/filter-key-type/constants.ts

@@ -1,6 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit'
+import { uniqBy } from 'lodash'
 import { apiService } from 'uiSrc/services'
-import { ApiEndpoints } from 'uiSrc/constants'
+import { ApiEndpoints, ICommand, ICommands } from 'uiSrc/constants'
 import { getApiErrorMessage, isStatusSuccessful } from 'uiSrc/utils'
 import { GetServerInfoResponse } from 'apiSrc/dto/server.dto'
 
@@ -11,7 +12,8 @@ export const initialState: StateAppRedisCommands = {
   loading: false,
   error: '',
   spec: {},
-  commandsArray: []
+  commandsArray: [],
+  commandGroups: [],
 }
 
 // A slice for recipes
@@ -22,10 +24,12 @@ const appRedisCommandsSlice = createSlice({
     getRedisCommands: (state) => {
       state.loading = true
     },
-    getRedisCommandsSuccess: (state, { payload }) => {
+    getRedisCommandsSuccess: (state, { payload }: { payload: ICommands }) => {
       state.loading = false
       state.spec = payload
       state.commandsArray = Object.keys(state.spec).sort()
+      state.commandGroups = uniqBy(Object.values(payload), 'group')
+        .map((item: ICommand) => item.group)
     },
     getRedisCommandsFailure: (state, { payload }) => {
       state.loading = false

redisinsight/ui/src/slices/app/redis-commands.ts

@@ -60,8 +60,9 @@ export interface StateAppContext {
 export interface StateAppRedisCommands {
   loading: boolean;
   error: string;
-  spec: ICommands,
-  commandsArray: string[],
+  spec: ICommands;
+  commandsArray: string[];
+  commandGroups: string[];
 }
 
 export interface IPluginVisualization {

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

@@ -1,7 +1,7 @@
-import { cloneDeep } from 'lodash'
+import { cloneDeep, uniqBy } from 'lodash'
 import { cleanup, initialStateDefault, mockedStore, } from 'uiSrc/utils/test-utils'
 import { apiService } from 'uiSrc/services'
-import { MOCK_COMMANDS_SPEC } from 'uiSrc/constants'
+import { ICommand, MOCK_COMMANDS_SPEC } from 'uiSrc/constants'
 import reducer, {
   initialState,
   getRedisCommands,
@@ -60,7 +60,9 @@ describe('slices', () => {
       const state = {
         ...initialState,
         spec: data,
-        commandsArray: Object.keys(data).sort()
+        commandsArray: Object.keys(data).sort(),
+        commandGroups: uniqBy(Object.values(data), 'group')
+          .map((item: ICommand) => item.group)
       }
 
       // Act