From de9eb3a9a7210565d474d361a6d108b8566dbb77 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Fri, 25 Jul 2025 17:04:27 +0300 Subject: [PATCH 1/8] replace Eui Image with img --- .../oauth/oauth-sign-in-button/OAuthSignInButton.tsx | 4 +--- .../oauth/shared/oauth-advantages/OAuthAdvantages.tsx | 3 +-- .../pages/browser/components/no-keys-found/NoKeysFound.tsx | 5 ++--- .../pages/browser/components/virtual-tree/VirtualTree.tsx | 3 +-- .../src/pages/home/components/empty-message/EmptyMessage.tsx | 3 +-- .../ui/src/pages/rdi/home/empty-message/EmptyMessage.tsx | 3 +-- redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx | 3 +-- 7 files changed, 8 insertions(+), 16 deletions(-) diff --git a/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx b/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx index 5bd37ff875..fd87acc596 100644 --- a/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx @@ -1,6 +1,4 @@ import React from 'react' -import { EuiImage } from '@elastic/eui' - import { OAuthSsoHandlerDialog } from 'uiSrc/components' import RedisLogo from 'uiSrc/assets/img/logo_small.svg' @@ -30,7 +28,7 @@ const OAuthSignInButton = (props: Props) => { } data-testid="cloud-sign-in-btn" > - + Cloud sign in )} diff --git a/redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx b/redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx index eb514d198e..6682955ddf 100644 --- a/redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx +++ b/redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx @@ -1,5 +1,4 @@ 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' @@ -10,7 +9,7 @@ import styles from './styles.module.scss' const OAuthAdvantages = () => (
- + Cloud diff --git a/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx b/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx index f4ba3b1fa0..3c17e5cc0b 100644 --- a/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx +++ b/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' @@ -59,10 +58,10 @@ const NoKeysFound = (props: Props) => { return (
- diff --git a/redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx b/redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx index 9be16624aa..4063b7ae39 100644 --- a/redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx +++ b/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' @@ -307,7 +306,7 @@ const VirtualTree = (props: Props) => { className={styles.loadingSpinner} /> {loadingIcon ? ( - <EuiImage + <img className={styles.loadingIcon} src={loadingIcon} alt="loading" diff --git a/redisinsight/ui/src/pages/home/components/empty-message/EmptyMessage.tsx b/redisinsight/ui/src/pages/home/components/empty-message/EmptyMessage.tsx index c02fb4655b..80ebc8d77a 100644 --- a/redisinsight/ui/src/pages/home/components/empty-message/EmptyMessage.tsx +++ b/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' @@ -22,7 +21,7 @@ const EmptyMessage = ({ onAddInstanceClick }: Props) => ( className={styles.noResultsContainer} data-testid="empty-database-instance-list" > - <EuiImage src={CakeIcon} className={styles.icon} alt="empty" /> + <img src={CakeIcon} className={styles.icon} alt="empty" /> <Text className={styles.text}>No databases yet, let's add one!</Text> <PrimaryButton size="m" diff --git a/redisinsight/ui/src/pages/rdi/home/empty-message/EmptyMessage.tsx b/redisinsight/ui/src/pages/rdi/home/empty-message/EmptyMessage.tsx index 3951b0aa93..1c82662cea 100644 --- a/redisinsight/ui/src/pages/rdi/home/empty-message/EmptyMessage.tsx +++ b/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' @@ -32,7 +31,7 @@ const EmptyMessage = ({ onAddInstanceClick }: Props) => { > <Spacer size="xl" /> <Text className={styles.title}>Redis Data Integration</Text> - <EuiImage + <img src={theme === Theme.Dark ? EmptyListDarkIcon : EmptyListLightIcon} className={styles.icon} alt="empty" diff --git a/redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx b/redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx index 6ad319b3d0..1e226bf719 100644 --- a/redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx +++ b/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' @@ -21,7 +20,7 @@ const Empty = ({ rdiInstanceId }: Props) => { return ( <Panel> <div className={styles.emptyPipelineContainer} data-testid="empty-pipeline"> - <EuiImage src={EmptyPipelineIcon} alt="empty" size="s" /> + <img src={EmptyPipelineIcon} alt="empty" size="s" /> <Spacer size="xl" /> <Text>No pipeline deployed yet</Text> <Text className={styles.subTitle}> From 4563f15155d6c907fe6e14aff3f615ab481921e5 Mon Sep 17 00:00:00 2001 From: Dijana Antovska <dijana.antovska@redis.com> Date: Mon, 28 Jul 2025 13:31:55 +0300 Subject: [PATCH 2/8] create ri image component with sizing --- .../components/base/display/image/Image.tsx | 8 ++++ .../base/display/image/image.styles.ts | 41 +++++++++++++++++++ .../ui/src/components/base/display/index.ts | 3 +- 3 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 redisinsight/ui/src/components/base/display/image/Image.tsx create mode 100644 redisinsight/ui/src/components/base/display/image/image.styles.ts diff --git a/redisinsight/ui/src/components/base/display/image/Image.tsx b/redisinsight/ui/src/components/base/display/image/Image.tsx new file mode 100644 index 0000000000..352706e8df --- /dev/null +++ b/redisinsight/ui/src/components/base/display/image/Image.tsx @@ -0,0 +1,8 @@ +import React from 'react' +import { RiImageProps, StyledImage } from './image.styles' + +const RiImage = ({ size, src, alt }: RiImageProps) => ( + <StyledImage src={src} alt={alt} size={size} /> +) + +export default RiImage diff --git a/redisinsight/ui/src/components/base/display/image/image.styles.ts b/redisinsight/ui/src/components/base/display/image/image.styles.ts new file mode 100644 index 0000000000..0618427f86 --- /dev/null +++ b/redisinsight/ui/src/components/base/display/image/image.styles.ts @@ -0,0 +1,41 @@ +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< + Omit<RiImageProps, 'size'> & { + size?: RiImageSize + } +>` + ${({ size = 'original' }) => imageSizeStyles[size]} +` diff --git a/redisinsight/ui/src/components/base/display/index.ts b/redisinsight/ui/src/components/base/display/index.ts index ba2232ae23..5b1978e6c6 100644 --- a/redisinsight/ui/src/components/base/display/index.ts +++ b/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/Image' -export { Loader, ProgressBarLoader } +export { Loader, ProgressBarLoader, RiImage } export { RICollapsibleNavGroup } from './collapsible-nav-group/RICollapsibleNavGroup' export type { RICollapsibleNavGroupProps } from './collapsible-nav-group/RICollapsibleNavGroup' From 60b9bf8a30f557c273da8e11b5dc274e2e3e1ac2 Mon Sep 17 00:00:00 2001 From: Dijana Antovska <dijana.antovska@redis.com> Date: Mon, 28 Jul 2025 13:57:11 +0300 Subject: [PATCH 3/8] include ...rest properties to img --- redisinsight/ui/src/components/base/display/image/Image.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/redisinsight/ui/src/components/base/display/image/Image.tsx b/redisinsight/ui/src/components/base/display/image/Image.tsx index 352706e8df..f8a27cba0c 100644 --- a/redisinsight/ui/src/components/base/display/image/Image.tsx +++ b/redisinsight/ui/src/components/base/display/image/Image.tsx @@ -1,8 +1,8 @@ import React from 'react' import { RiImageProps, StyledImage } from './image.styles' -const RiImage = ({ size, src, alt }: RiImageProps) => ( - <StyledImage src={src} alt={alt} size={size} /> +const RiImage = ({ size, src, alt, loading, ...rest }: RiImageProps) => ( + <StyledImage src={src} alt={alt} size={size} {...rest} /> ) export default RiImage From eff80c80c7e0fe0c1fad48cbb9e0f89a735146d5 Mon Sep 17 00:00:00 2001 From: Dijana Antovska <dijana.antovska@redis.com> Date: Mon, 28 Jul 2025 13:57:26 +0300 Subject: [PATCH 4/8] replace eui with RiImage instead of only img --- .../oauth/oauth-sign-in-button/OAuthSignInButton.tsx | 3 ++- .../oauth/shared/oauth-advantages/OAuthAdvantages.tsx | 3 ++- .../src/pages/browser/components/no-keys-found/NoKeysFound.tsx | 3 ++- .../src/pages/browser/components/virtual-tree/VirtualTree.tsx | 2 +- .../src/pages/home/components/empty-message/EmptyMessage.tsx | 3 ++- .../ui/src/pages/rdi/home/empty-message/EmptyMessage.tsx | 3 ++- .../ui/src/pages/rdi/home/empty-message/styles.module.scss | 1 + redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx | 3 ++- 8 files changed, 14 insertions(+), 7 deletions(-) diff --git a/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx b/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx index fd87acc596..0d427dc833 100644 --- a/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx @@ -5,6 +5,7 @@ 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 { @@ -28,7 +29,7 @@ const OAuthSignInButton = (props: Props) => { } data-testid="cloud-sign-in-btn" > - <img className={styles.logo} src={RedisLogo} alt="" /> + <RiImage className={styles.logo} src={RedisLogo} alt="" /> <span>Cloud sign in</span> </SecondaryButton> )} diff --git a/redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx b/redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx index 6682955ddf..414898c893 100644 --- a/redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx +++ b/redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx @@ -3,13 +3,14 @@ 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"> - <img className={styles.logo} src={RedisLogo} alt="" /> + <RiImage className={styles.logo} src={RedisLogo} alt="" /> <Title size="S" className={styles.title}> Cloud diff --git a/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx b/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx index 3c17e5cc0b..5c9824eae6 100644 --- a/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx +++ b/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx @@ -21,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' @@ -58,7 +59,7 @@ const NoKeysFound = (props: Props) => { return (
- no results ( className={styles.noResultsContainer} data-testid="empty-database-instance-list" > - empty + No databases yet, let's add one! { > Redis Data Integration - empty { return (
- empty + No pipeline deployed yet From 5709eac3e47fb6116fc8d8440712e220e58eeaf3 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Mon, 28 Jul 2025 14:02:57 +0300 Subject: [PATCH 5/8] replace in virtual tree --- .../src/pages/browser/components/virtual-tree/VirtualTree.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx b/redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx index 6c719868b4..9a5a026c43 100644 --- a/redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx +++ b/redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx @@ -306,7 +306,7 @@ const VirtualTree = (props: Props) => { className={styles.loadingSpinner} /> {loadingIcon ? ( - loading Date: Mon, 28 Jul 2025 14:03:41 +0300 Subject: [PATCH 6/8] rename RiImage file --- .../components/base/display/image/{Image.tsx => RiImage.tsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename redisinsight/ui/src/components/base/display/image/{Image.tsx => RiImage.tsx} (69%) diff --git a/redisinsight/ui/src/components/base/display/image/Image.tsx b/redisinsight/ui/src/components/base/display/image/RiImage.tsx similarity index 69% rename from redisinsight/ui/src/components/base/display/image/Image.tsx rename to redisinsight/ui/src/components/base/display/image/RiImage.tsx index f8a27cba0c..0d1b98d502 100644 --- a/redisinsight/ui/src/components/base/display/image/Image.tsx +++ b/redisinsight/ui/src/components/base/display/image/RiImage.tsx @@ -1,7 +1,7 @@ import React from 'react' import { RiImageProps, StyledImage } from './image.styles' -const RiImage = ({ size, src, alt, loading, ...rest }: RiImageProps) => ( +const RiImage = ({ size, src, alt, ...rest }: RiImageProps) => ( ) From cf0fbcdf07d2ebdc42f973f218ea285ed0bb727b Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Mon, 28 Jul 2025 16:06:41 +0300 Subject: [PATCH 7/8] fix import Image -> RiImage --- redisinsight/ui/src/components/base/display/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/redisinsight/ui/src/components/base/display/index.ts b/redisinsight/ui/src/components/base/display/index.ts index 5b1978e6c6..e49d6caa2c 100644 --- a/redisinsight/ui/src/components/base/display/index.ts +++ b/redisinsight/ui/src/components/base/display/index.ts @@ -1,6 +1,6 @@ import Loader from './loader/Loader' import ProgressBarLoader from './progress-bar/ProgressBarLoader' -import RiImage from './image/Image' +import RiImage from './image/RiImage' export { Loader, ProgressBarLoader, RiImage } export { RICollapsibleNavGroup } from './collapsible-nav-group/RICollapsibleNavGroup' From 804fe24d153668c73acbf31cc958fea6796fe1ae Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Tue, 29 Jul 2025 14:21:15 +0300 Subject: [PATCH 8/8] Remove Omit and replace size with $size; make src and alt required --- .../src/components/base/display/image/RiImage.tsx | 4 ++-- .../components/base/display/image/image.styles.ts | 14 +++++--------- .../oauth-sign-in-button/OAuthSignInButton.tsx | 2 +- .../shared/oauth-advantages/OAuthAdvantages.tsx | 2 +- .../ui/src/pages/rdi/statistics/empty/Empty.tsx | 2 +- 5 files changed, 10 insertions(+), 14 deletions(-) diff --git a/redisinsight/ui/src/components/base/display/image/RiImage.tsx b/redisinsight/ui/src/components/base/display/image/RiImage.tsx index 0d1b98d502..e525c85461 100644 --- a/redisinsight/ui/src/components/base/display/image/RiImage.tsx +++ b/redisinsight/ui/src/components/base/display/image/RiImage.tsx @@ -1,8 +1,8 @@ import React from 'react' import { RiImageProps, StyledImage } from './image.styles' -const RiImage = ({ size, src, alt, ...rest }: RiImageProps) => ( - +const RiImage = ({ $size, src, alt, ...rest }: RiImageProps) => ( + ) export default RiImage diff --git a/redisinsight/ui/src/components/base/display/image/image.styles.ts b/redisinsight/ui/src/components/base/display/image/image.styles.ts index 0618427f86..3eb43c8823 100644 --- a/redisinsight/ui/src/components/base/display/image/image.styles.ts +++ b/redisinsight/ui/src/components/base/display/image/image.styles.ts @@ -27,15 +27,11 @@ export const imageSizeStyles = { export type RiImageSize = (typeof SIZES)[number] export interface RiImageProps extends HTMLAttributes { - size?: RiImageSize - src?: string - alt?: string + $size?: RiImageSize + src: string + alt: string } -export const StyledImage = styled.img< - Omit & { - size?: RiImageSize - } ->` - ${({ size = 'original' }) => imageSizeStyles[size]} +export const StyledImage = styled.img` + ${({ $size = 'original' }) => imageSizeStyles[$size]} ` diff --git a/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx b/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx index 0d427dc833..d8c6f6af50 100644 --- a/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx @@ -29,7 +29,7 @@ const OAuthSignInButton = (props: Props) => { } data-testid="cloud-sign-in-btn" > - + Cloud sign in )} diff --git a/redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx b/redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx index 414898c893..d0f9cc204c 100644 --- a/redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx +++ b/redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx @@ -10,7 +10,7 @@ import styles from './styles.module.scss' const OAuthAdvantages = () => (
- + Cloud diff --git a/redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx b/redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx index ee8990d662..0e3c7f880e 100644 --- a/redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx +++ b/redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx @@ -21,7 +21,7 @@ const Empty = ({ rdiInstanceId }: Props) => { return (
- + No pipeline deployed yet