Merge pull request #4276 from RedisInsight/fe/bugfix/RI-6592-rename-data-type-bugfix

RI-5547 not show graph key when no graph module

Author: mariasergeenko

redisinsight/ui/src/pages/browser/components/browser-search-panel/BrowserSearchPanel.tsx

@@ -224,7 +224,7 @@ const BrowserSearchPanel = (props: Props) => {
           {SearchModeSwitch()}
         </OnboardingTour>
         {searchMode === SearchMode.Pattern ? (
-          <FilterKeyType />
+          <FilterKeyType modules={modules} />
         ) : (
           <RediSearchIndexesList onCreateIndex={handleCreateIndexPanel} />
         )}

redisinsight/ui/src/pages/browser/components/filter-key-type/FilterKeyType.spec.tsx

@@ -14,6 +14,7 @@ import { loadKeys, setFilter } from 'uiSrc/slices/browser/keys'
 import { connectedInstanceOverviewSelector } from 'uiSrc/slices/instances/instances'
 import { FeatureFlags, KeyTypes } from 'uiSrc/constants'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { RedisDefaultModules } from 'uiSrc/slices/interfaces'
 import FilterKeyType from './FilterKeyType'
 
 let store: typeof mockedStore
@@ -120,9 +121,18 @@ describe('FilterKeyType', () => {
     })
   })
 
+  it('should filter out graph if redis db does not have graph module', () => {
+    const { queryByText } = render(<FilterKeyType modules={[]} />)
+
+    fireEvent.click(screen.getByTestId(filterSelectId))
+
+    const graphElement = queryByText('Graph')
+    expect(graphElement).not.toBeInTheDocument()
+  })
+
   it('should not filter out items if required feature flags are set to true', () => {
     const { queryByText } = render(
-      <FilterKeyType />
+      <FilterKeyType modules={[{ name: RedisDefaultModules.Graph, version: 1, semanticVersion: '1.3' }]} />
     )
 
     fireEvent.click(screen.getByTestId(filterSelectId))

redisinsight/ui/src/pages/browser/components/filter-key-type/FilterKeyType.tsx

@@ -20,13 +20,18 @@ import { FilterNotAvailable } from 'uiSrc/components'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { resetBrowserTree } from 'uiSrc/slices/app/context'
 import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
+import { AdditionalRedisModule } from 'uiSrc/slices/interfaces'
 import { FILTER_KEY_TYPE_OPTIONS } from './constants'
 
 import styles from './styles.module.scss'
 
 const ALL_KEY_TYPES_VALUE = 'all'
 
-const FilterKeyType = () => {
+export interface Props {
+  modules?: AdditionalRedisModule[]
+}
+
+const FilterKeyType = ({ modules }: Props) => {
   const [isSelectOpen, setIsSelectOpen] = useState<boolean>(false)
   const [typeSelected, setTypeSelected] = useState<string>('all')
   const [isVersionSupported, setIsVersionSupported] = useState<boolean>(true)
@@ -53,7 +58,12 @@ const FilterKeyType = () => {
   }, [filter])
 
   const options: EuiSuperSelectOption<string>[] = FILTER_KEY_TYPE_OPTIONS
-    .filter(({ featureFlag }) => !featureFlag || features[featureFlag]?.flag)
+    .filter(({ featureFlag, skipIfNoModule }) => {
+      if (skipIfNoModule && !modules?.some(({ name }) => name === skipIfNoModule)) {
+        return false
+      }
+      return !featureFlag || features[featureFlag]?.flag
+    })
     .map(
       (item) => {
         const { value, color, text } = item

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

@@ -4,6 +4,7 @@ import {
   ModulesKeyTypes,
   FeatureFlags
 } from 'uiSrc/constants'
+import { RedisDefaultModules } from 'uiSrc/slices/interfaces'
 
 export const FILTER_KEY_TYPE_OPTIONS = [
   {
@@ -45,10 +46,11 @@ export const FILTER_KEY_TYPE_OPTIONS = [
     text: 'Graph',
     value: ModulesKeyTypes.Graph,
     color: GROUP_TYPES_COLORS[ModulesKeyTypes.Graph],
+    skipIfNoModule: RedisDefaultModules.Graph,
     featureFlag: FeatureFlags.envDependent
   },
   {
-    text: 'TS',
+    text: 'Time Series',
     value: ModulesKeyTypes.TimeSeries,
     color: GROUP_TYPES_COLORS[ModulesKeyTypes.TimeSeries],
   },

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

@@ -9,7 +9,6 @@ import {
   GetListElementsResponse,
 } from 'apiSrc/modules/browser/list/dto'
 import { Database as DatabaseInstanceResponse } from 'apiSrc/modules/database/models/database'
-import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
 import { SearchZSetMembersResponse } from 'apiSrc/modules/browser/z-set/dto'
 import { SentinelMaster } from 'apiSrc/modules/redis-sentinel/models/sentinel-master'
 import { CreateSentinelDatabaseDto } from 'apiSrc/modules/redis-sentinel/dto/create.sentinel.database.dto'
@@ -55,6 +54,12 @@ export interface Instance extends Partial<DatabaseInstanceResponse> {
   isFreeDb?: boolean
 }
 
+export interface AdditionalRedisModule {
+  name: string
+  version: number
+  semanticVersion: string
+}
+
 interface CaCertificate {
   id?: string
   name?: string

tests/e2e/helpers/constants.ts

@@ -7,7 +7,7 @@ export enum KeyTypesTexts {
     ReJSON = 'JSON',
     Stream = 'Stream',
     Graph = 'Graph',
-    TimeSeries = 'TS',
+    TimeSeries = 'Time Series',
 }
 export const keyLength = 50;
 

tests/e2e/tests/web/critical-path/browser/filtering.e2e.ts

@@ -105,7 +105,7 @@ test
             await browserPage.selectFilterGroupType(textType);
             // Check key type label
             await t.expect((await browserPage.filterByKeyTypeDropDown.innerText).toUpperCase).eql(textType.toUpperCase, `The label of type ${textType} is displayed`);
-            if (['Stream', 'Graph', 'TS'].includes(textType)) {
+            if (['Stream', 'Graph', 'Time Series'].includes(textType)) {
                 await t.expect(browserPage.keysNumberOfResults.textContent).eql('0', 'Number of found keys');
             }
             else {