RI-7213: replace EuiImage with img tag #4760

dantovska · 2025-07-25T14:05:53Z

Simply replacing EuiImage with img tag, no difference visually.

github-actions · 2025-07-25T14:18:53Z

Code Coverage - Frontend unit tests

St.^❔	Category	Percentage	Covered / Total
🟢	Statements	81.45%	18892/23195
🟡	Branches	66.87%	8262/12356
🟡	Functions	75.2%	4931/6557
🟢	Lines	81.86%	18493/22590

Test suite run success

4833 tests passing in 633 suites.

Report generated by 🧪jest coverage report action from 804fe24

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

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

Copilot

Pull Request Overview

This PR replaces EuiImage components from the Elastic UI library with a custom RiImage component throughout the codebase. The change maintains visual consistency while reducing dependency on the Elastic UI library.

Key changes:

Created a new RiImage component with styled-components that mimics EuiImage functionality
Replaced all EuiImage imports and usages across multiple files
Added proper alt text for accessibility where it was missing

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
`redisinsight/ui/src/components/base/display/image/RiImage.tsx`	New RiImage component implementation
`redisinsight/ui/src/components/base/display/image/image.styles.ts`	Styled-components definitions and size configurations for RiImage
`redisinsight/ui/src/components/base/display/index.ts`	Export RiImage from display module
`redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx`	Replace EuiImage with RiImage and update size prop syntax
`redisinsight/ui/src/pages/rdi/home/empty-message/EmptyMessage.tsx`	Replace EuiImage with RiImage
`redisinsight/ui/src/pages/home/components/empty-message/EmptyMessage.tsx`	Replace EuiImage with RiImage
`redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx`	Replace EuiImage with RiImage
`redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.tsx`	Replace EuiImage with RiImage and improve alt text
`redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx`	Replace EuiImage with RiImage and add proper alt text
`redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx`	Replace EuiImage with RiImage and add proper alt text
`redisinsight/ui/src/pages/rdi/home/empty-message/styles.module.scss`	Add padding to subtitle styling

Comments suppressed due to low confidence (1)

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

[nitpick] The constant name 'SIZES' is too generic. Consider renaming it to 'IMAGE_SIZES' or 'RI_IMAGE_SIZES' to be more descriptive and avoid potential naming conflicts.

export const SIZES = ['s', 'm', 'l', 'xl', 'original', 'fullWidth'] as const

Copilot · 2025-07-29T11:41:38Z

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

+
+export type RiImageSize = (typeof SIZES)[number]
+
+export interface RiImageProps extends HTMLAttributes<HTMLImageElement> {


The interface extends HTMLAttributes but overrides 'src' and 'alt' as required properties. This could cause TypeScript conflicts since HTMLImageElement attributes make these optional. Consider using Omit<HTMLAttributes, 'src' | 'alt'> to avoid conflicts.

Suggested change

export interface RiImageProps extends HTMLAttributes<HTMLImageElement> {

export interface RiImageProps extends Omit<HTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {

* RI-7226: fix RiTooltip when content is empty (#4742) * RI-7226: fix RiTooltip when content is empty * add unit tests for RiTooltip * electron upgraded from 33.* to 36.* (#4740) * Update Electron from 33.2.0 to 36.4.0 and related dependencies - Update electron from EOL version 33.2.0 to supported 36.4.0 - Update electron-builder from 24.13.3 to 26.0.12 - Update electron-updater from 6.3.9 to 6.6.2 - Add node-abi 4.12.0 for better Electron version support - Update yarn.lock files with new dependency versions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> * rolled back local changes * rolled back local changes * Update Node.js version from 22.11.0 to 22.12.0 for node-abi compatibility The [email protected] package requires Node.js >=22.12.0 but CI was using 22.11.0. This update ensures compatibility with the upgraded Electron dependencies. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> * Testing slightly different config to fix the resolutions after install * Fix electron-builder 26.0.12 configuration compatibility - Update Linux desktop configuration to use desktop.entry structure - Change Mac notarize from object to boolean (temporarily disabled) - Replace Windows publisherName with legalTrademarks - Remove electron-builder install-app-deps from postinstall script These changes address breaking changes in electron-builder 26.0.12. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> * Restore Mac notarization and disable native module rebuilding - Restore Mac notarization with teamId configuration (good security practice) - Add npmRebuild: false, nodeGypRebuild: false, buildDependenciesFromSource: false to disable native module rebuilding which fails due to ABI compatibility issues - This allows electron-builder to proceed without trying to rebuild native modules like keytar and sqlite3 that cause ABI detection errors with Electron 36 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> * Update Mac notarize configuration to boolean for electron-builder 26.0.12 In electron-builder 26.0.12, notarize must be a boolean value. The actual notarization configuration (teamId, etc.) is now handled via environment variables such as APPLE_TEAM_ID=UUK47G4BAZ instead of in the config file. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> * Reverting unneeded changes * Reverting unneeded changes * reverting yarn.lock in the api folder for testing --------- Co-authored-by: Claude <[email protected]> * RI-7212: replace EuiFormFieldset with FormFieldset (#4739) * RI-7212: replace EuiFormFieldset with FormFieldset * update display legend logic * add FormFieldset unit tests * RI-7226: fix RiTooltip when title/content is empty (#4747) * RI-7226: fix RiTooltip when title/content is empty * update test name * RI-7236 replace settings icon (#4745) * Remove settings icons * fix keys summary alignment * entirely remove settings svgs * RI-7211: replace eui form * replace EuiForm with form, replace eui/keys with uiSrc/constants/keys * RI-7208 replace eui collapsible nav group * add RICollapsibleNavGroup * replace EuiCollapsibleNavGroup * Remove unused PageBreadcrumbs component (#4746) * RI-7228 - key details - space is missing between Add / Cancel (#4761) * RI-7228 - key details - space is missing between Add / Cancel * RI-7228 - key details - space is missing between Add / Cancel * RI-7228 - key details - space is missing between Add / Cancel - returned classnames for test purposes * RI-7239 - Workbench results - the execution time has a broken layout (#4763) * RI-7030 - on workbench page, the text in the executing queries has broken styles and has blue square all over the screen (#4764) * RI-7210 replace eui file picker * add RiFilePicker.tsx * replace EuiFilePicker * Fe/feature/ri 7233 key details on web and full screen do not expand to the width of the container and do not have space between each other (#4762) * RI-7233 - key details on web and full screen do not expand to the width of the container and do not have space between each other - fixed spacing between name and ttl, and below the same row * RI-7233 - key details on web and full screen do not expand to the width of the container and do not have space between each other - fixed spacing between different input components * RI-7233 - key details on web and full screen do not expand to the width of the container and do not have space between each other - fixed styles to stretch from one end to the other * RI-7224 - in messages - ACK / CLAIM buttons need space between (#4769) * RI-7213: replace EuiImage with img tag (#4760) * replace Eui Image with RiImage * RI-7209 - Replace EuiFieldText with Input (#4775) * RI-7209 - Replace EuiFieldText with Input * Update redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagInputField.tsx Co-authored-by: Copilot <[email protected]> * Update redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.tsx Co-authored-by: Copilot <[email protected]> * Update redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/AddItem.tsx Co-authored-by: Copilot <[email protected]> * Update redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/AddItem.tsx Co-authored-by: Copilot <[email protected]> * Update redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx Co-authored-by: Copilot <[email protected]> * redisinsight/ui/src/components/multi-search/MultiSearch.tsx * RI-7209 - Replace EuiFieldText with Input - fixed tests (some?), added tooltip provider for the tooltip * RI-7209 - Replace EuiFieldText with Input - fixed tests * RI-7209 - Replace EuiFieldText with Input - fixed tests * RI-7209 - Replace EuiFieldText with Input - fixed tests * RI-7209 - Replace EuiFieldText with Input - fixed tests * Update redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx Co-authored-by: pd-redis <[email protected]> * Update redisinsight/ui/src/components/multi-search/MultiSearch.tsx Co-authored-by: pd-redis <[email protected]> * Update redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx Co-authored-by: pd-redis <[email protected]> * Update redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx Co-authored-by: pd-redis <[email protected]> * Update redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/AddItem.tsx Co-authored-by: pd-redis <[email protected]> * Update redisinsight/ui/src/pages/browser/components/add-key/AddKeyCommonFields/AddKeyCommonFields.tsx Co-authored-by: pd-redis <[email protected]> * RI-7209 - Replace EuiFieldText with Input - fixed tests --------- Co-authored-by: Copilot <[email protected]> Co-authored-by: pd-redis <[email protected]> * RI-7214: Replace EUI loading logo with custom bouncing logo component (#4768) * create loading logo component * add sizing to the component * RI-7235 new navigation (#4777) * add AppNavigation.tsx * add useNavigation.ts, move AppNavigation to InstancePageTemplate.tsx * RI-7207: Replace RUI Button Group with Redis Button Group (#4773) * replace the accordion component; change some styling to look nice with the accordion * replace button group component --------- Co-authored-by: Kristiyan Ivanov <[email protected]> Co-authored-by: Claude <[email protected]> Co-authored-by: dantovska <[email protected]> Co-authored-by: pd-redis <[email protected]> Co-authored-by: Copilot <[email protected]>

dantovska requested a review from Copilot July 25, 2025 14:05

dantovska self-assigned this Jul 25, 2025

dantovska requested review from KrumTy, pawelangelow, ArtemHoruzhenko, pd-redis and KIvanow as code owners July 25, 2025 14:05

This comment was marked as outdated.

Sign in to view

valkirilov previously approved these changes Jul 28, 2025

View reviewed changes

dantovska dismissed valkirilov’s stale review via c715b2f July 28, 2025 10:57

dantovska requested a review from Copilot July 28, 2025 10:57

This comment was marked as outdated.

Sign in to view

dantovska requested a review from valkirilov July 28, 2025 10:59

valkirilov previously approved these changes Jul 28, 2025

View reviewed changes

dantovska dismissed valkirilov’s stale review via a09327e July 28, 2025 11:03

dantovska requested review from Copilot and valkirilov July 28, 2025 11:04

This comment was marked as outdated.

Sign in to view

valkirilov previously approved these changes Jul 28, 2025

View reviewed changes

dantovska dismissed valkirilov’s stale review via 1d394c7 July 28, 2025 13:06

valkirilov previously approved these changes Jul 29, 2025

View reviewed changes

redisinsight/ui/src/components/base/display/image/RiImage.tsx Show resolved Hide resolved

pd-redis reviewed Jul 29, 2025

View reviewed changes

redisinsight/ui/src/components/base/display/image/image.styles.ts Outdated Show resolved Hide resolved

redisinsight/ui/src/components/base/display/image/image.styles.ts Outdated Show resolved Hide resolved

dantovska added 7 commits July 29, 2025 14:24

replace Eui Image with img

de9eb3a

create ri image component with sizing

4563f15

include ...rest properties to img

60b9bf8

replace eui with RiImage instead of only img

eff80c8

replace in virtual tree

5709eac

rename RiImage file

1553f1a

fix import Image -> RiImage

cf0fbcd

Remove Omit and replace size with $size; make src and alt required

804fe24

dantovska dismissed valkirilov’s stale review via 804fe24 July 29, 2025 11:24

dantovska force-pushed the fe/feature/RI-7213-replace-eui-image branch from 1d394c7 to 804fe24 Compare July 29, 2025 11:24

dantovska requested a review from Copilot July 29, 2025 11:41

Copilot AI reviewed Jul 29, 2025

View reviewed changes

pawelangelow approved these changes Jul 29, 2025

View reviewed changes

dantovska merged commit 16e5768 into fe/feature/RI-7039-replace-eui Jul 29, 2025
17 checks passed

dantovska deleted the fe/feature/RI-7213-replace-eui-image branch July 29, 2025 15:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

RI-7213: replace EuiImage with img tag #4760

RI-7213: replace EuiImage with img tag #4760

dantovska commented Jul 25, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

github-actions bot commented Jul 25, 2025 •

edited

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jul 29, 2025

Uh oh!

Uh oh!

Uh oh!


		export type RiImageSize = (typeof SIZES)[number]

		export interface RiImageProps extends HTMLAttributes<HTMLImageElement> {

	export interface RiImageProps extends HTMLAttributes<HTMLImageElement> {
	export interface RiImageProps extends Omit<HTMLAttributes<HTMLImageElement>, 'src' \| 'alt'> {

RI-7213: replace EuiImage with img tag #4760

RI-7213: replace EuiImage with img tag #4760

Conversation

dantovska commented Jul 25, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

github-actions bot commented Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage - Frontend unit tests

Test suite run success

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jul 25, 2025 •

edited

Loading