РИ-7256: align icons better in modules popover, replace SVG icons with redis-ui icons

Author: pd-redis

redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx

@@ -12,6 +12,8 @@ import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { ColorText } from 'uiSrc/components/base/text'
 import { RiTooltip } from 'uiSrc/components'
 import { RiIcon } from 'uiSrc/components/base/icons'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { RedisDefaultModules } from 'uiSrc/slices/interfaces'
 import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
 
 import styles from './styles.module.scss'
@@ -46,7 +48,11 @@ const DatabaseListModules = React.memo((props: Props) => {
 
   const newModules: IDatabaseModule[] = sortModules(
     modules?.map(({ name: propName, semanticVersion = '', version = '' }) => {
-      const module: ModuleInfo = DEFAULT_MODULES_INFO[propName]
+      const isValidModuleKey = Object.values(RedisDefaultModules).includes(propName as RedisDefaultModules)
+      
+      const module: ModuleInfo | undefined = isValidModuleKey 
+        ? DEFAULT_MODULES_INFO[propName as RedisDefaultModules]
+        : undefined
       const moduleName = module?.text || propName
 
       const { abbreviation = '', name = moduleName } = getModule(moduleName)
@@ -87,7 +93,12 @@ const DatabaseListModules = React.memo((props: Props) => {
       const hasContent = !!content
       const hasAbbreviation = !!abbreviation
       return (
-        <div className={styles.tooltipItem} key={content || abbreviation}>
+        <Row
+          align="center"
+          gap="m"
+          className={styles.tooltipItem}
+          key={content || abbreviation}
+        >
           {hasIcon && <RiIcon type={icon} />}
           {!hasIcon && hasAbbreviation && (
             <ColorText
@@ -102,8 +113,7 @@ const DatabaseListModules = React.memo((props: Props) => {
               {content}
             </ColorText>
           )}
-          <br />
-        </div>
+        </Row>
       )
     },
   )

redisinsight/ui/src/constants/modules.ts

@@ -20,34 +20,34 @@ const rediSearchIcons: {
   iconDark: AllIconsType
   iconLight: AllIconsType
 } = {
-  iconDark: 'RedisSearchDarkIcon',
-  iconLight: 'RedisSearchLightIcon',
+  iconDark: 'QuerySearchIcon',
+  iconLight: 'QuerySearchIcon',
 }
 
 export const DEFAULT_MODULES_INFO: ModulesInfoType = {
   [RedisDefaultModules.AI]: {
-    iconDark: 'RedisAIDarkIcon',
-    iconLight: 'RedisAILightIcon',
+    iconDark: 'RedisAiIcon',
+    iconLight: 'RedisAiIcon',
     text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.AI],
   },
   [RedisDefaultModules.Bloom]: {
-    iconDark: 'RedisBloomDarkIcon',
-    iconLight: 'RedisBloomLightIcon',
+    iconDark: 'ProbabilisticIcon',
+    iconLight: 'ProbabilisticIcon',
     text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.Bloom],
   },
   [RedisDefaultModules.Gears]: {
-    iconDark: 'RedisGearsDarkIcon',
-    iconLight: 'RedisGearsLightIcon',
+    iconDark: 'RedisGearsIcon',
+    iconLight: 'RedisGearsIcon',
     text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.Gears],
   },
   [RedisDefaultModules.Graph]: {
-    iconDark: 'RedisGraphDarkIcon',
-    iconLight: 'RedisGraphLightIcon',
+    iconDark: 'RedisGraphIcon',
+    iconLight: 'RedisGraphIcon',
     text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.Graph],
   },
   [RedisDefaultModules.RedisGears]: {
-    iconDark: 'RedisGearsDarkIcon',
-    iconLight: 'RedisGearsLightIcon',
+    iconDark: 'RedisGearsIcon',
+    iconLight: 'RedisGearsIcon',
     text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.RedisGears],
   },
   [RedisDefaultModules.RedisGears2]: {
@@ -56,8 +56,8 @@ export const DEFAULT_MODULES_INFO: ModulesInfoType = {
     text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.RedisGears2],
   },
   [RedisDefaultModules.ReJSON]: {
-    iconDark: 'RedisJSONDarkIcon',
-    iconLight: 'RedisJSONLightIcon',
+    iconDark: 'JsonIcon',
+    iconLight: 'JsonIcon',
     text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.ReJSON],
   },
   [RedisDefaultModules.Search]: {
@@ -77,8 +77,8 @@ export const DEFAULT_MODULES_INFO: ModulesInfoType = {
     text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.FTL],
   },
   [RedisDefaultModules.TimeSeries]: {
-    iconDark: 'RedisTimeSeriesDarkIcon',
-    iconLight: 'RedisTimeSeriesLightIcon',
+    iconDark: 'TimeSeriesIcon',
+    iconLight: 'TimeSeriesIcon',
     text: DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.TimeSeries],
   },
 }