RI-7243 capabilities not displayed

* provide actual icon element to IconButton

* set LikeIcon as default for VoteOption.tsx

Author: pd-redis

redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx

@@ -1,9 +1,20 @@
 import React from 'react'
 import { IconButton as RedisUiIconButton } from '@redis-ui/components'
+import * as Icons from 'uiSrc/components/base/icons/iconRegistry'
+import { AllIconsType } from 'uiSrc/components/base/icons'
 
 export type ButtonProps = React.ComponentProps<typeof RedisUiIconButton>
 
 export type IconType = ButtonProps['icon']
-export const IconButton = (props: ButtonProps) => (
-  <RedisUiIconButton {...props} />
-)
+export type IconButtonProps = Omit<ButtonProps, 'icon'> & {
+  icon: IconType | string
+}
+export const IconButton = ({ icon, size, ...props }: IconButtonProps) => {
+  let buttonIcon: IconType
+  if (typeof icon === 'string') {
+    buttonIcon = Icons[icon as AllIconsType]
+  } else {
+    buttonIcon = icon
+  }
+  return <RedisUiIconButton icon={buttonIcon} {...props} />
+}

redisinsight/ui/src/components/base/icons/RiIcon.tsx

@@ -21,7 +21,6 @@ export type IconComponentProps = Omit<IconProps, 'icon' | 'size'> &
 
 export const RiIcon = ({ type, size, ...props }: IconComponentProps) => {
   const IconType = Icons[type]
-
   if (!IconType) {
     console.warn(`Icon type "${type}" not found, rendering as image`)
     // TODO - 17.06.25 - Replace with icon

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

@@ -10,8 +10,8 @@ import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { DEFAULT_MODULES_INFO, ModuleInfo } from 'uiSrc/constants/modules'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { ColorText } from 'uiSrc/components/base/text'
-import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { RiTooltip } from 'uiSrc/components'
+import { RiIcon } from 'uiSrc/components/base/icons'
 import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
 
 import styles from './styles.module.scss'
@@ -70,7 +70,6 @@ const DatabaseListModules = React.memo((props: Props) => {
       }
     }),
   )
-
   // set count of hidden modules
   if (maxViewModules && newModules.length > maxViewModules + 1) {
     newModules.length = maxViewModules
@@ -83,25 +82,30 @@ const DatabaseListModules = React.memo((props: Props) => {
   }
 
   const Content = sortModules(mainContent).map(
-    ({ icon, content, abbreviation = '' }) => (
-      <div className={styles.tooltipItem} key={content || abbreviation}>
-        {!!icon && <RiIcon type={icon} style={{ marginRight: 10 }} />}
-        {!icon && (
-          <ColorText
-            className={cx(styles.icon, styles.abbr)}
-            style={{ marginRight: 10 }}
-          >
-            {abbreviation}
-          </ColorText>
-        )}
-        {!!content && (
-          <ColorText className={cx(styles.tooltipItemText)}>
-            {content}
-          </ColorText>
-        )}
-        <br />
-      </div>
-    ),
+    ({ icon, content, abbreviation = '' }) => {
+      const hasIcon = !!icon
+      const hasContent = !!content
+      const hasAbbreviation = !!abbreviation
+      return (
+        <div className={styles.tooltipItem} key={content || abbreviation}>
+          {hasIcon && <RiIcon type={icon} />}
+          {!hasIcon && hasAbbreviation && (
+            <ColorText
+              className={cx(styles.icon, styles.abbr)}
+              style={{ marginRight: 10 }}
+            >
+              {abbreviation}
+            </ColorText>
+          )}
+          {hasContent && (
+            <ColorText className={cx(styles.tooltipItemText)}>
+              {content}
+            </ColorText>
+          )}
+          <br />
+        </div>
+      )
+    },
   )
 
   const Module = (

redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx

@@ -106,7 +106,7 @@ const VoteOption = (props: Props) => {
         >
           <IconButton
             disabled={!isAnalyticsEnable}
-            icon={iconType[voteOption] ?? 'default'}
+            icon={iconType[voteOption] ?? 'LikeIcon'}
             className={cx('vote__btn', { selected: vote === voteOption })}
             aria-label="vote useful"
             data-testid={`${voteOption}-vote-btn`}

redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx

@@ -24,6 +24,7 @@ import {
   EditIcon,
   TagIcon,
   CopyIcon,
+  RiIcon,
 } from 'uiSrc/components/base/icons'
 import DatabaseListModules from 'uiSrc/components/database-list-modules/DatabaseListModules'
 import ItemList from 'uiSrc/components/item-list'
@@ -80,7 +81,6 @@ import { Tag } from 'uiSrc/slices/interfaces/tag'
 import { FeatureFlagComponent } from 'uiSrc/components'
 import { RiPopover, RiTooltip } from 'uiSrc/components/base'
 import { EmptyButton, IconButton } from 'uiSrc/components/base/forms/buttons'
-import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { Link } from 'uiSrc/components/base/link/Link'
 import { RIResizeObserver } from 'uiSrc/components/base/utils'