RI-7040: replace eui icon

* replace EuiIcon

Author: pd-redis

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/assets/img/icons/keyboard-shortcuts.svg

@@ -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/assets/img/overview/time_tip.svg

@@ -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/assets/img/workbench/vis_tag_cloud.svg

@@ -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/auto-refresh/AutoRefresh.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/external-link/ExternalLink.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/BannedIcon.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 />
 )