RI-7213: replace EuiImage with img tag

redisinsight/ui/src/components/base/display/image/RiImage.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { RiImageProps, StyledImage } from './image.styles'
+
+const RiImage = ({ $size, src, alt, ...rest }: RiImageProps) => (
+  <StyledImage src={src} alt={alt} $size={$size} {...rest} />
+)
+
+export default RiImage

redisinsight/ui/src/components/base/display/image/image.styles.ts

@@ -0,0 +1,37 @@
+import { HTMLAttributes } from 'react'
+import styled, { css } from 'styled-components'
+
+export const SIZES = ['s', 'm', 'l', 'xl', 'original', 'fullWidth'] as const
+
+export const imageSizeStyles = {
+  s: css`
+    width: 100px;
+  `,
+  m: css`
+    width: 200px;
+  `,
+  l: css`
+    width: 360px;
+  `,
+  xl: css`
+    width: 600px;
+  `,
+  original: css`
+    width: auto;
+  `,
+  fullWidth: css`
+    width: 100%;
+  `,
+}
+
+export type RiImageSize = (typeof SIZES)[number]
+
+export interface RiImageProps extends HTMLAttributes<HTMLImageElement> {
+  $size?: RiImageSize
+  src: string
+  alt: string
+}
+
+export const StyledImage = styled.img<RiImageProps>`
+  ${({ $size = 'original' }) => imageSizeStyles[$size]}
+`

redisinsight/ui/src/components/base/display/index.ts

@@ -1,7 +1,8 @@
 import Loader from './loader/Loader'
 import ProgressBarLoader from './progress-bar/ProgressBarLoader'
+import RiImage from './image/RiImage'
 
-export { Loader, ProgressBarLoader }
+export { Loader, ProgressBarLoader, RiImage }
 export { RICollapsibleNavGroup } from './collapsible-nav-group/RICollapsibleNavGroup'
 
 export type { RICollapsibleNavGroupProps } from './collapsible-nav-group/RICollapsibleNavGroup'

redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx

@@ -1,12 +1,11 @@
 import React from 'react'
-import { EuiImage } from '@elastic/eui'
-
 import { OAuthSsoHandlerDialog } from 'uiSrc/components'
 
 import RedisLogo from 'uiSrc/assets/img/logo_small.svg'
 
 import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
 import { SecondaryButton } from 'uiSrc/components/base/forms/buttons'
+import { RiImage } from 'uiSrc/components/base/display'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -30,7 +29,7 @@ const OAuthSignInButton = (props: Props) => {
           }
           data-testid="cloud-sign-in-btn"
         >
-          <EuiImage className={styles.logo} src={RedisLogo} alt="" />
+          <RiImage className={styles.logo} src={RedisLogo} alt="Redis logo" />
           <span>Cloud sign in</span>
         </SecondaryButton>
       )}

redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
-import { EuiImage } from '@elastic/eui'
 import RedisLogo from 'uiSrc/assets/img/logo.svg'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { Text } from 'uiSrc/components/base/text'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
+import { RiImage } from 'uiSrc/components/base/display'
 import { OAUTH_ADVANTAGES_ITEMS } from './constants'
 
 import styles from './styles.module.scss'
 
 const OAuthAdvantages = () => (
   <div className={styles.container} data-testid="oauth-advantages">
-    <EuiImage className={styles.logo} src={RedisLogo} alt="" />
+    <RiImage className={styles.logo} src={RedisLogo} alt="Redis logo" />
     <Title size="S" className={styles.title}>
       Cloud
     </Title>

redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { EuiImage } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import TelescopeImg from 'uiSrc/assets/img/telescope-dark.svg'
@@ -22,6 +21,7 @@ import { TutorialsIds } from 'uiSrc/constants'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
 import { Title } from 'uiSrc/components/base/text/Title'
+import { RiImage } from 'uiSrc/components/base/display'
 import LoadSampleData from '../load-sample-data'
 
 import styles from './styles.module.scss'
@@ -59,10 +59,10 @@ const NoKeysFound = (props: Props) => {
 
   return (
     <div className={styles.container} data-testid="no-result-found-msg">
-      <EuiImage
+      <RiImage
         className={styles.img}
         src={TelescopeImg}
-        alt="no results image"
+        alt="no results"
       />
       <Spacer />
       <Title className={styles.title} size="S">

redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx

@@ -7,7 +7,6 @@ import React, {
 import AutoSizer from 'react-virtualized-auto-sizer'
 import { debounce, get, set } from 'lodash'
 import { TreeWalker, TreeWalkerValue, FixedSizeTree as Tree } from 'react-vtree'
-import { EuiImage } from '@elastic/eui'
 import { useDispatch } from 'react-redux'
 
 import { bufferToString, Maybe, Nullable } from 'uiSrc/utils'
@@ -21,7 +20,7 @@ import {
 } from 'uiSrc/constants'
 import { RedisResponseBuffer, RedisString } from 'uiSrc/slices/interfaces'
 import { fetchKeysMetadataTree } from 'uiSrc/slices/browser/keys'
-import { Loader, ProgressBarLoader } from 'uiSrc/components/base/display'
+import { Loader, ProgressBarLoader, RiImage } from 'uiSrc/components/base/display'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { GetKeyInfoResponse } from 'apiSrc/modules/browser/keys/dto'
 
@@ -307,7 +306,7 @@ const VirtualTree = (props: Props) => {
                   className={styles.loadingSpinner}
                 />
                 {loadingIcon ? (
-                  <EuiImage
+                  <RiImage
                     className={styles.loadingIcon}
                     src={loadingIcon}
                     alt="loading"

redisinsight/ui/src/pages/home/components/empty-message/EmptyMessage.tsx

@@ -1,4 +1,3 @@
-import { EuiImage } from '@elastic/eui'
 import React from 'react'
 
 import CakeIcon from 'uiSrc/assets/img/databases/cake.svg'
@@ -11,6 +10,7 @@ import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
 import { Text } from 'uiSrc/components/base/text'
 import { Link } from 'uiSrc/components/base/link/Link'
+import { RiImage } from 'uiSrc/components/base/display'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -22,7 +22,7 @@ const EmptyMessage = ({ onAddInstanceClick }: Props) => (
     className={styles.noResultsContainer}
     data-testid="empty-database-instance-list"
   >
-    <EuiImage src={CakeIcon} className={styles.icon} alt="empty" />
+    <RiImage src={CakeIcon} className={styles.icon} alt="empty" />
     <Text className={styles.text}>No databases yet, let&apos;s add one!</Text>
     <PrimaryButton
       size="m"

redisinsight/ui/src/pages/rdi/home/empty-message/EmptyMessage.tsx

@@ -1,4 +1,3 @@
-import { EuiImage } from '@elastic/eui'
 import React, { useContext } from 'react'
 
 import { EXTERNAL_LINKS, UTM_MEDIUMS } from 'uiSrc/constants/links'
@@ -14,6 +13,7 @@ import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { Link } from 'uiSrc/components/base/link/Link'
+import { RiImage } from 'uiSrc/components/base/display'
 import styles from './styles.module.scss'
 
 const subTitleText =
@@ -32,7 +32,7 @@ const EmptyMessage = ({ onAddInstanceClick }: Props) => {
     >
       <Spacer size="xl" />
       <Text className={styles.title}>Redis Data Integration</Text>
-      <EuiImage
+      <RiImage
         src={theme === Theme.Dark ? EmptyListDarkIcon : EmptyListLightIcon}
         className={styles.icon}
         alt="empty"

redisinsight/ui/src/pages/rdi/home/empty-message/styles.module.scss

@@ -15,6 +15,7 @@
   font-size: 14px !important;
   margin-top: 34px;
   margin-bottom: 34px;
+  padding: 0 34px;
 }
 
 .icon {

redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx

@@ -1,4 +1,3 @@
-import { EuiImage } from '@elastic/eui'
 import React from 'react'
 import { useHistory } from 'react-router-dom'
 
@@ -7,6 +6,7 @@ import { Pages } from 'uiSrc/constants'
 import { Text } from 'uiSrc/components/base/text'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
+import { RiImage } from 'uiSrc/components/base/display'
 import Panel from '../components/panel'
 
 import styles from './styles.module.scss'
@@ -21,7 +21,7 @@ const Empty = ({ rdiInstanceId }: Props) => {
   return (
     <Panel>
       <div className={styles.emptyPipelineContainer} data-testid="empty-pipeline">
-        <EuiImage src={EmptyPipelineIcon} alt="empty" size="s" />
+        <RiImage src={EmptyPipelineIcon} alt="empty" $size="s" />
         <Spacer size="xl" />
         <Text>No pipeline deployed yet</Text>
         <Text className={styles.subTitle}>