RI-7039: replace eui #4548

pd-redis · 2025-05-14T07:25:23Z

this is the base branch where all ui updates should be merged initially before pushing back to main

# Conflicts: # redisinsight/ui/src/components/connectivity-error/ConnectivityError.tsx # redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx # redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx # redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx # redisinsight/ui/src/components/query/query-actions/QueryActions.tsx # redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx # redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx # redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx # redisinsight/ui/src/pages/browser/components/add-key/AddKeyList/AddKeyList.tsx # redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.tsx # redisinsight/ui/src/pages/browser/components/add-key/AddKeySet/AddKeySet.tsx # redisinsight/ui/src/pages/browser/components/add-key/AddKeyStream/AddKeyStream.tsx # redisinsight/ui/src/pages/browser/components/add-key/AddKeyString/AddKeyString.tsx # redisinsight/ui/src/pages/browser/components/add-key/AddKeyZset/AddKeyZset.tsx # redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx # redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/add-set-members/AddSetMembers.tsx # redisinsight/ui/src/pages/database-analysis/components/header/Header.tsx # redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx # redisinsight/ui/src/pages/home/components/database-manage-tags-modal/ManageTagsModal.tsx # redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.tsx # redisinsight/ui/src/pages/settings/components/cloud-settings/components/user-api-keys-table/UserApiKeysTable.tsx # redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx

* replace Eui Image with RiImage

* 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]>

valkirilov · 2025-07-30T12:36:42Z

package.json

@@ -234,6 +234,10 @@
  "dependencies": {
    "@elastic/datemath": "^5.0.3",
    "@elastic/eui": "34.6.0",
+    "@redis-ui/components": "^38.1.4",


Badge component in @redis-ui/components v38.6.0 supports custom color out of the box (docs), something we need for the Vector Search feature.

Unfortunately, it's dependent on @redis-ui/styles which comes with some breaking changes in its latest version, so the upgrade process might need additional effort.

…#4768) * create loading logo component * add sizing to the component

* add AppNavigation.tsx * add useNavigation.ts, move AppNavigation to InstancePageTemplate.tsx

* replace the accordion component; change some styling to look nice with the accordion * replace button group component

* import the modal components * apply the form dialog; vefiry for the database connection form; delete unneeded styles * replace filter key type modal * remove filter key type eui styles * replace browser search panel / module not loaded * replace consents settings popup modal * replace rdi import modal(s) * add ids to buttons * replace the start rdi pipeline modal * remove background colors * remove :global styling * remove the advantages background * replace select account dialog modal * replace select plan modal * replace oauth sso dialog modal * finalize form dialog and manage tags modal * round up the width, set too 601 for no reason (: * format form dialog file * use width modal prop instead of as part of the class * fix the rebase issues - use the propper RI file picker * and fix the upload warning container * refactor size capital to small letter; format * change rdi error configuration file icon and add color; align items * return the exported type and format file * use cx when multiple classes applied * fix some of the tests failing due to issues with the modal header; skip the ones that are tied directly to the header as the header is set to null * fix upload dialog tests * fix database panel dialog * change oauth sso dialog and browser search panel dialog to null * fix width * remove duplicate styling * remove not needed code * fix oauth select account dialog * fix all tests regarding the buggy modal title * reverting changes to the features config.json --------- Co-authored-by: Kristiyan Ivanov <[email protected]>

…d the implementation around the main content under the new navigation (#4784) * RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - added border above the new navigation * RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - updated main content brackgrounds to use the proper colors * RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - added borders to the keys list and key details to mimic the new DS * RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - removed background for the bottom buttons (add, cancel, save, etc). In the new DS there is no different BG and it only makes it mroe complciated to keep track * RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - add padding on top of the search bar to distance it from the new navigation * RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - updated the cli row to look like the previews * RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - updated spacing under the navigation to be handled in one place * RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - fixed paddings for the CLI row * RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - Updated uses of theme to be through useTheme, instead of a direct import

* create loading logo component * move import from layout to display * add sizing to the component * use $ for size and bounceSpeed instead of Omit * implement redis theme sizing * Rename folder logo-loading -> loading-logo * create and export RiEmptyPrompt component * replace the eui component with the new one * Include the ...rest in the empty prompt component * Extended spacer to support theme sizes --------- Co-authored-by: Kristiyan Ivanov <[email protected]>

* RI-7244 -Edit-and-remove-buttons-are-not-aligned * Update redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx Co-authored-by: pd-redis <[email protected]> * Update redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx Co-authored-by: pd-redis <[email protected]> --------- Co-authored-by: pd-redis <[email protected]>

valkirilov · 2025-08-04T07:30:26Z

package.json

@@ -234,6 +234,10 @@
  "dependencies": {
    "@elastic/datemath": "^5.0.3",
    "@elastic/eui": "34.6.0",
+    "@redis-ui/components": "^38.1.4",


Section component in @redis-ui/components v38.7.1 comes with a bug fix that we need for the Vector Search page -> Manage Indexes drawer -> Index info boxes

When the box section is collapsed, it should display summary information about the index. However, there was a bug in Redis UI that makes this information not appear once the component is rendered inside a Drawer. They resolved the issue on their end, and we have to update Redis UI dependencies.

Update them in a branch and when everything is running, make a PR

* provide actual icon element to IconButton * set LikeIcon as default for VoteOption.tsx

* reverse link behavior

* RI-7252 - RDI---Broken-layout-for-the-list-of-jobs - added size props for the inline item editor's action section * RI-7252 - RDI---Broken-layout-for-the-list-of-jobs - added size props for the inline item editor's action section

* RI-7279 - "test" element is visible on top of the db keys list * RI-7278 - Remove the old navigation for DBs * RI-7278 - Remove the old navigation for DBs - removed unused variables and updated tests

…4805)

…h redis-ui icons

pd-redis added 30 commits May 7, 2025 12:28

add redis-ui

d377072

add forms/button

3a3696b

run format

ba385ab

add icons

049a991

add general export

3c3b65f

re-export icons from ui-icons

1832c1a

add theme config in themeContext.tsx

e5ed77b

make SecondaryButton.tsx outlined by default

8026a6c

add EmptyButton.tsx

36e23a1

add key panels

e2a9bfe

icon button added

f580b98

edit json icons

192aa1f

analysis page

e9358e0

update font size

f1051e2

DatetimeForm.tsx

31da78e

CloudSettings.tsx

40cbb55

add play and play filled icons

75db002

QueryCardHeader.tsx

52771a4

QueryActions.tsx

d07d5d2

InternalPage.tsx

eee47b2

move all icon imports

6301a55

checkpoint

05ef986

add db dialog

88bfbe9

notifications

4966145

remove unused imports

226baf2

fix ZSetDetails.tsx overflow

1acb93a

command helper

e836924

refactor window controls

f744afc

checkpoint

0f0e74f

KIvanow and others added 3 commits July 29, 2025 14:05

RI-7224 - in messages - ACK / CLAIM buttons need space between (#4769)

d0997b0

RI-7213: replace EuiImage with img tag (#4760)

16e5768

* replace Eui Image with RiImage

valkirilov reviewed Jul 30, 2025

View reviewed changes

dantovska and others added 11 commits July 31, 2025 10:20

RI-7214: Replace EUI loading logo with custom bouncing logo component (…

3016ee7

…#4768) * create loading logo component * add sizing to the component

RI-7235 new navigation (#4777)

31b21bb

* add AppNavigation.tsx * add useNavigation.ts, move AppNavigation to InstancePageTemplate.tsx

RI-7207: Replace RUI Button Group with Redis Button Group (#4773)

37686f6

* replace the accordion component; change some styling to look nice with the accordion * replace button group component

RI-7252 - RDI-empty-screen-is-missaligned (#4792)

1e70c67

RI-7250 - RDI---the-loading-message-is-not-aligned (#4791)

c355c70

RI-7249 - RDI---Connection-test-results-are-broken (#4790)

36a272b

RI-7248 - RDI---deploy-button-has-broken-styles (#4787)

22d55f1

valkirilov reviewed Aug 4, 2025

View reviewed changes

pd-redis and others added 11 commits August 4, 2025 10:34

RI-7243 capabilities not displayed

bcc8946

* provide actual icon element to IconButton * set LikeIcon as default for VoteOption.tsx

RI-7223 links should have underline only on hover

a9db370

* reverse link behavior

RI-7253: make delete buttons same size

93ab1e1

RI-7240 - White-area-below-the-tooltip-in-connection-forms (#4798)

bf5aa14

RI-7247: older notifications are displayed

ed3b7bd

Fe/feature/ri 7278 and ri 7279 (#4802)

83f64a6

* RI-7279 - "test" element is visible on top of the db keys list * RI-7278 - Remove the old navigation for DBs * RI-7278 - Remove the old navigation for DBs - removed unused variables and updated tests

RI-7246 - The "Create free Cloud db" window has different font sizes (#…

353498f

…4805)

RI-0000 improving the navigation centering (#4810)

a278079

resolved conflicts with main

9484d6d

РИ-7256: align icons better in modules popover, replace SVG icons wit…

5172c03

…h redis-ui icons

KIvanow approved these changes Aug 6, 2025

View reviewed changes

KIvanow merged commit 75b6799 into main Aug 6, 2025
4 checks passed

github-actions bot added the e2e-approved label Aug 6, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

RI-7039: replace eui #4548

RI-7039: replace eui #4548

Uh oh!

pd-redis commented May 14, 2025

Uh oh!

valkirilov Jul 30, 2025

Uh oh!

valkirilov Aug 4, 2025

Uh oh!

pd-redis Aug 4, 2025

Uh oh!

Uh oh!

Uh oh!

RI-7039: replace eui #4548

RI-7039: replace eui #4548

Uh oh!

Conversation

pd-redis commented May 14, 2025

Uh oh!

valkirilov Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

valkirilov Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

pd-redis Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!