RI-7040: replace eui icon

package.json

@@ -234,9 +234,9 @@
   "dependencies": {
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "34.6.0",
-    "@redis-ui/components": "^38.1.3",
+    "@redis-ui/components": "^38.1.4",
     "@redis-ui/icons": "^4.16.1",
-    "@redis-ui/styles": "^11.0.2",
+    "@redis-ui/styles": "^11.4.0",
     "@redis-ui/table": "^2.4.0",
     "@reduxjs/toolkit": "^1.6.2",
     "@stablelib/snappy": "^1.0.2",

redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import { EuiIcon } from '@elastic/eui'
 import cx from 'classnames'
 import { ChevronDownIcon, RefreshIcon } from 'uiSrc/components/base/icons'
 import {
@@ -13,6 +12,7 @@ import { localStorageService } from 'uiSrc/services'
 import { BrowserStorageItem } from 'uiSrc/constants'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { ColorText } from 'uiSrc/components/base/text'
+import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { SwitchInput } from 'uiSrc/components/base/inputs'
 import { RiPopover, RiTooltip } from 'uiSrc/components/base'
 import {
@@ -284,7 +284,7 @@ const AutoRefresh = ({
             >
               {`${refreshRate} s`}
               <div className={styles.refreshRatePencil}>
-                <EuiIcon type="pencil" />
+                <RiIcon type="EditIcon" />
               </div>
             </ColorText>
           )}

redisinsight/ui/src/components/base/external-link/ExternalLink.tsx

@@ -1,22 +1,20 @@
 import React from 'react'
-import { EuiIcon } from '@elastic/eui'
 import { EuiLinkProps } from '@elastic/eui/src/components/link/link'
-
-import { IconSize } from '@elastic/eui/src/components/icon/icon'
+import { IconProps } from 'uiSrc/components/base/icons'
+import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { Link } from 'uiSrc/components/base/link/Link'
-import styles from './styles.module.scss'
 
 export type Props = EuiLinkProps & {
   href: string
   iconPosition?: 'left' | 'right'
-  iconSize?: IconSize
+  iconSize?: IconProps['size']
 }
 
 const ExternalLink = (props: Props) => {
-  const { iconPosition = 'right', iconSize = 'm', children, ...rest } = props
+  const { iconPosition = 'right', iconSize = 'M', children, ...rest } = props
 
   const ArrowIcon = () => (
-    <EuiIcon type="sortUp" size={iconSize} className={styles.linkIcon} />
+    <RiIcon type="ArrowDiagonalIcon" size={iconSize} color="informative400" />
   )
 
   return (

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

@@ -3,5 +3,5 @@ import { Icon, IconProps } from 'uiSrc/components/base/icons'
 import BanIconSvg from 'uiSrc/assets/img/monitor/ban.svg?react'
 
 export const BannedIcon = (props: IconProps) => (
-  <Icon icon={BanIconSvg} {...props} />
+  <Icon icon={BanIconSvg} {...props} isSvg />
 )

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

@@ -3,5 +3,5 @@ import BulkActionsIcon from 'uiSrc/assets/img/icons/bulk_actions.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const BulkActions = (props: IconProps) => (
-  <Icon icon={BulkActionsIcon} {...props} />
+  <Icon icon={BulkActionsIcon} {...props} isSvg />
 )

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

@@ -2,4 +2,4 @@ import React from 'react'
 import CloudIcon from 'uiSrc/assets/img/oauth/cloud.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
-export const Cloud = (props: IconProps) => <Icon icon={CloudIcon} {...props} />
+export const Cloud = (props: IconProps) => <Icon icon={CloudIcon} {...props} isSvg />

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

@@ -3,5 +3,5 @@ import CopilotSvg from 'uiSrc/assets/img/icons/copilot.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const CopilotIcon = (props: IconProps) => (
-  <Icon icon={CopilotSvg} {...props} />
+  <Icon icon={CopilotSvg} {...props} isSvg />
 )

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

@@ -4,5 +4,5 @@ import DislikeSvg from 'uiSrc/assets/img/icons/dislike.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const DislikeIcon = (props: IconProps) => (
-  <Icon icon={DislikeSvg} {...props} />
+  <Icon icon={DislikeSvg} {...props} isSvg />
 )

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

@@ -3,5 +3,5 @@ import ExtendSvg from 'uiSrc/assets/img/icons/extend.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const ExtendIcon = (props: IconProps) => (
-  <Icon icon={ExtendSvg} {...props} />
+  <Icon icon={ExtendSvg} {...props} isSvg />
 )

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

@@ -3,5 +3,5 @@ import GroupModeIcon from 'uiSrc/assets/img/icons/group_mode.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const Group = (props: IconProps) => (
-  <Icon icon={GroupModeIcon} {...props} />
+  <Icon icon={GroupModeIcon} {...props} isSvg />
 )

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

@@ -1,10 +1,19 @@
 import React from 'react'
 import { useTheme } from '@redis-ui/styles'
+import cx from 'classnames'
+import { IconSizeType } from '@redis-ui/icons'
 import { MonochromeIconProps } from 'uiSrc/components/base/icons'
 
-type BaseIconProps = MonochromeIconProps & {
+type BaseIconProps = Omit<MonochromeIconProps, 'color' | 'size'> & {
   icon: React.ComponentType<any>
+  color?:
+    | keyof ReturnType<typeof useTheme>['semantic']['color']['icon']
+    | 'currentColor'
+    | (string & {})
+  size?: IconSizeType | null
+  isSvg?: boolean
 }
+
 const sizesMap = {
   XS: 8,
   S: 12,
@@ -28,27 +37,43 @@ function isValidIconColor(
 
 export const Icon = ({
   icon: IconComponent,
+  isSvg = false,
   customSize,
   customColor,
-  title: titleProp,
   color = 'primary600',
-  size = 'L',
+  size,
+  className,
   ...rest
 }: BaseIconProps) => {
-  const sizeValue = customSize || sizesMap[size]
+  let sizeValue: number | string | undefined
+  if (size && sizesMap[size]) {
+    sizeValue = sizesMap[size]
+  } else if (typeof size === 'undefined') {
+    sizeValue = 'L'
+  }
+  if (customSize) {
+    sizeValue = customSize
+  }
   const theme = useTheme()
   let colorValue = customColor
   if (!colorValue && isValidIconColor(theme, color)) {
     colorValue = theme.semantic.color.icon[color]
+  } else if (color === 'currentColor') {
+    colorValue = 'currentColor'
   }
-  const props = {
+
+  const svgProps = {
     color: colorValue,
     width: sizeValue,
     height: sizeValue,
     ...rest,
   }
 
-  return <IconComponent {...props} />
+  const props = isSvg
+    ? svgProps
+    : { color, customColor, size, customSize, ...rest }
+
+  return <IconComponent {...props} className={cx(className, 'RI-Icon')} />
 }
 
 export type IconProps = Omit<BaseIconProps, 'icon'>

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

@@ -3,4 +3,4 @@ import React from 'react'
 import LikeSvg from 'uiSrc/assets/img/icons/like.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
-export const LikeIcon = (props: IconProps) => <Icon icon={LikeSvg} {...props} />
+export const LikeIcon = (props: IconProps) => <Icon icon={LikeSvg} {...props} isSvg />

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

@@ -3,5 +3,5 @@ import MinusInCircleSvg from 'uiSrc/assets/img/icons/minus_in_circle.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const MinusInCircleIcon = (props: IconProps) => (
-  <Icon icon={MinusInCircleSvg} {...props} />
+  <Icon icon={MinusInCircleSvg} {...props} isSvg />
 )

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

@@ -2,4 +2,4 @@ import React from 'react'
 import PlayIcon from 'uiSrc/assets/img/icons/play.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
-export const Play = (props: IconProps) => <Icon icon={PlayIcon} {...props} />
+export const Play = (props: IconProps) => <Icon icon={PlayIcon} {...props} isSvg />

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

@@ -3,5 +3,5 @@ import PlayFilledSvg from 'uiSrc/assets/img/icons/play-filled.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const PlayFilledIcon = (props: IconProps) => (
-  <Icon icon={PlayFilledSvg} {...props} />
+  <Icon icon={PlayFilledSvg} {...props} isSvg />
 )

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

@@ -3,5 +3,5 @@ import PlusInCircleSvg from 'uiSrc/assets/img/icons/plus_in_circle.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const PlusInCircle = (props: IconProps) => (
-  <Icon icon={PlusInCircleSvg} {...props} />
+  <Icon icon={PlusInCircleSvg} {...props} isSvg />
 )

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

@@ -3,5 +3,5 @@ import ProfilerSvg from 'uiSrc/assets/img/icons/profiler.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const ProfilerIcon = (props: IconProps) => (
-  <Icon icon={ProfilerSvg} {...props} />
+  <Icon icon={ProfilerSvg} {...props} isSvg />
 )

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

@@ -3,5 +3,5 @@ import ResetSvg from 'uiSrc/assets/img/rdi/reset.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const RiResetIcon = (props: IconProps) => (
-  <Icon icon={ResetSvg} {...props} />
+  <Icon icon={ResetSvg} {...props} isSvg />
 )

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

@@ -3,5 +3,5 @@ import RocketSvg from 'uiSrc/assets/img/rdi/rocket.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const RiRocketIcon = (props: IconProps) => (
-  <Icon icon={RocketSvg} {...props} />
+  <Icon icon={RocketSvg} {...props} isSvg />
 )

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

@@ -3,5 +3,5 @@ import StopIconSvg from 'uiSrc/assets/img/rdi/stopFilled.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const RiStopIcon = (props: IconProps) => (
-  <Icon icon={StopIconSvg} {...props} />
+  <Icon icon={StopIconSvg} {...props} isSvg />
 )

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

@@ -3,5 +3,5 @@ import RawModeIcon from 'uiSrc/assets/img/icons/raw_mode.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const RawMode = (props: IconProps) => (
-  <Icon icon={RawModeIcon} {...props} />
+  <Icon icon={RawModeIcon} {...props} isSvg />
 )

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

@@ -3,5 +3,5 @@ import RedisLogoSvg from 'uiSrc/assets/img/logo_small.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const RedisLogo = (props: IconProps) => (
-  <Icon icon={RedisLogoSvg} {...props} />
+  <Icon icon={RedisLogoSvg} {...props} isSvg />
 )

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

@@ -3,5 +3,5 @@ import RedisLogoSvg from 'uiSrc/assets/img/logo.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const RedisLogoFullIcon = (props: IconProps) => (
-  <Icon icon={RedisLogoSvg} {...props} />
+  <Icon icon={RedisLogoSvg} {...props} isSvg />
 )

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

@@ -0,0 +1,76 @@
+import React, { ImgHTMLAttributes, SVGProps } from 'react'
+import cx from 'classnames'
+import { IconProps } from './Icon'
+import * as Icons from './index'
+
+// Create a type that excludes the IconProps type
+export type AllIconsType = Exclude<
+  keyof typeof Icons,
+  | 'IconProps'
+  | 'Icon'
+  | 'IconSizeType'
+  | 'IconColorType'
+  | 'ColorIconProps'
+  | 'MonochromeIconProps'
+  | 'IconType'
+>
+
+export type IconComponentProps = Omit<IconProps, 'icon' | 'size'> &
+  Omit<SVGProps<SVGSVGElement>, 'color' | 'size'> & {
+    type: AllIconsType
+    size?:
+      | IconProps['size']
+      | 'm'
+      | 's'
+      | 'xs'
+      | 'l'
+      | 'xl'
+      | 'xxl'
+      | 'original'
+  }
+
+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
+    //  There are a few cases where type is just imported image asset. In most cases, it seems
+    //  that the image is an svg in the plugins folder - http://localhost:5540/static/plugins/redisearch/./dist/table_view_icon_light.svg
+    //  we can either just scratch the plugins and move assets in to the main project, or look into dynamically loading as icons in runtime
+    return (
+      <img
+        {...(props as ImgHTMLAttributes<HTMLImageElement>)}
+        alt={props.title ? props.title : ''}
+        src={type}
+        className={cx(type, props.className)}
+        style={props.style}
+      />
+    )
+  }
+  let iconSize: IconProps['size']
+
+  switch (size?.toLowerCase()) {
+    case 'm':
+      iconSize = 'M'
+      break
+    case 's':
+      iconSize = 'S'
+      break
+    case 'xs':
+      iconSize = 'XS'
+      break
+    case 'xl':
+    case 'xxl':
+      iconSize = 'XL'
+      break
+    case 'original':
+      iconSize = null
+      break
+    case 'l':
+    default:
+      iconSize = 'L'
+  }
+  // @ts-ignore
+  return <IconType {...props} size={iconSize} />
+}

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

@@ -3,5 +3,5 @@ import ShrinkSvg from 'uiSrc/assets/img/icons/shrink.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const ShrinkIcon = (props: IconProps) => (
-  <Icon icon={ShrinkSvg} {...props} />
+  <Icon icon={ShrinkSvg} {...props} isSvg />
 )

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

@@ -3,5 +3,5 @@ import SnoozeSvg from 'uiSrc/assets/img/icons/snooze.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const SnoozeIcon = (props: IconProps) => (
-  <Icon icon={SnoozeSvg} {...props} />
+  <Icon icon={SnoozeSvg} {...props} isSvg />
 )

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

@@ -3,5 +3,5 @@ import StarsSvg from 'uiSrc/assets/img/icons/stars.svg?react'
 import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const StarsIcon = (props: IconProps) => (
-  <Icon icon={StarsSvg} {...props} />
+  <Icon icon={StarsSvg} {...props} isSvg />
 )