RI-7598 Change visuals of the "Import sample data" popover #5036

valkirilov · 2025-10-06T09:47:03Z

Description

Update the colors of the "Import sample data" popover to follow the color palette defined by Redis UI.
a.k.a remove a custom color override introduced for EUI 4 years ago.

Before	After

How it was tested

Open the Databases page and connect to an existing database (or establish a connection with a new instance)
Open the Browser tab from the top navigation

Note: Make sure that you have a clean database. If not, you can run flushdb in the CLI.

Before	After

Note

Also, this is a global change, so it does affect all the popovers in the application that was using the blue color. Now, they all should follow the Redis UI color palette.

Tutorials

Open the Insights panel from the top right corner
Open the Tutorials tab
Pick the "How To Query Your Data" tutorial

And you can run any of the code snippets under the "EXACT MATCH" section

Before	After

Tips

Open the Insights panel from the top right corner
Open the Tips tab
Open existing tip (if you don't have such, make sure to insert some data in the database, and maybe analyze it)
Scroll down to the bottom of the tip and click on the voting buttons (confirmation popover will apear)

Before	After

RDI

Open the Redis Data Integration tab from the top navbar
Open an existing RDI configuration, or create a new one

Click on the "Deploy Pipeline" button from the top right corner
click on the 3 dots to open more option, in the top right corner next to the rest of the actions buttons

Before	After

JSON key override

Open the "Databases" tab and establish a connection to a database
Go to the "Browse" tab from the main navbar
Add a JSON key
From the JSON UI editor, try to add key with the same name, Clicking the confirmation checkmark icon should shuold force a confirmation popover

Before	After

Delete multiple List keys

Note: This info popover is visible only on Redis versions less than 6.2

docker run -d --name redis5 -p 6405:6379 redis:5

Open the "Databases" tab and establish a connection to a database
Go to the "Browse" tab from the main navbar
Add a LIST key
Click on the "Remove" elements button in the top right corner of the Key Details panel.

It will open a form at the bottom of the page, with an info icon + popover

Before	After

Create Redisearch index

Open the "Databases" tab and establish a connection to a database
Go to the "Browse" tab from the main navbar
Next to the "Filter" icon in the top left corner, click on the "Search by Values or Keys" icon
Click on the "Create Index" button
Click on the info icon next to the "Identifier" field

Before	After

Redis Copilot

Open Redis Copilot from the top right corner
Chat with the bot (confirmation popover will appear the first time, or use generalChatAgreements in the local storage)
Click on the erase icon in the top right corner of the chat (confirmation popover will appear)
Click on the "My Data" tab and trigger the info icon on the top right corner (info popover will appear)

Before	After

Notifications Center

Open Redis Insight
Open the Notifications Center from the left side nav

Before	After

…les of the popovers re RI-7598

valkirilov · 2025-10-06T09:48:30Z

redisinsight/ui/src/components/markdown/CodeButtonBlock/components/RunConfirmationPopover.tsx

      />
      <div className={styles.popoverFooter}>
-        <div>
+        <Row gap="m" justify="end">


Bonus Points: Not related to the changes of the popover colors, but I fixed this minimal spacing issue as well.

Before After

…opover

valkirilov · 2025-10-06T10:03:42Z

...owser/modules/key-details/components/rejson-details/components/add-item/ConfirmOverwrite.tsx

-
-    <div className={styles.confirmDialogActions}>
+    <Spacer size="l" />
+    <Row justify="end" gap="m">


Bonus Points: Not related to the changes of the popover colors, but I fixed this minimal spacing issue as well.

Before After

github-actions · 2025-10-06T10:17:41Z

Code Coverage - Frontend unit tests

St.^❔	Category	Percentage	Covered / Total
🟢	Statements	82.12%	20027/24387
🟡	Branches	67.46%	8664/12843
🟡	Functions	76.22%	5329/6992
🟢	Lines	82.54%	19607/23754

Test suite run success

5162 tests passing in 677 suites.

Report generated by 🧪jest coverage report action from 8fa8548

…om list key

valkirilov · 2025-10-06T10:58:03Z

...wser/modules/key-details/components/list-details/remove-list-elements/RemoveListElements.tsx

+                </FormField>
+              </FlexItem>
+
+              {!canRemoveMultiple ? (


Bonus Points: Not related to the changes of the popover colors, but I fixed this minimal spacing issue as well, so it will look like in the old version, before the EUI replacement.

Old Before After

valkirilov · 2025-10-06T11:35:09Z

...src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx

        {notification.title}
      </Title>
-
+      <Spacer size="s" />


Bonus Points: Not related to the changes of the popover colors, but I fixed this minimal spacing issue and the blue colors as well.

Old Before After

valkirilov · 2025-10-06T11:36:02Z

redisinsight/ui/src/styles/components/_popover.scss

  }
 }

 .popoverLikeTooltip {


This is the actual change related to this PR. Sorry for the other minor fixes and refactoring.

ArtemHoruzhenko

well done! thank you

valkirilov added 3 commits October 6, 2025 11:26

fix(ui): remove additional background color overrides changng the sty…

4a8f13d

…les of the popovers re RI-7598

fix(ui): added spacing between the buttons in the tutorial popovers

c5e601e

refactor(ui): cleanup no longer used styles

ce0a625

valkirilov requested review from KrumTy, pawelangelow, dantovska, ArtemHoruzhenko and pd-redis as code owners October 6, 2025 09:47

valkirilov commented Oct 6, 2025

View reviewed changes

valkirilov self-assigned this Oct 6, 2025

fix(ui): added spacing between the buttons in the JSON key override p…

464c02a

…opover

valkirilov commented Oct 6, 2025

View reviewed changes

fix(ui): fix position of info button when removing multiple fields fr…

faa04e5

…om list key

valkirilov commented Oct 6, 2025

View reviewed changes

fix(ui): update popover notifications spacing

8fa8548

valkirilov force-pushed the fe/bugfix/RI-7598_import-sample-data-popover branch from bd2101f to 8fa8548 Compare October 6, 2025 11:34

valkirilov commented Oct 6, 2025

View reviewed changes

ArtemHoruzhenko approved these changes Oct 6, 2025

View reviewed changes

valkirilov merged commit 05335fc into main Oct 7, 2025
18 checks passed

valkirilov deleted the fe/bugfix/RI-7598_import-sample-data-popover branch October 7, 2025 06:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

RI-7598 Change visuals of the "Import sample data" popover #5036

RI-7598 Change visuals of the "Import sample data" popover #5036

Uh oh!

valkirilov commented Oct 6, 2025 •

edited

Loading

Uh oh!

valkirilov Oct 6, 2025

Uh oh!

valkirilov Oct 6, 2025

Uh oh!

github-actions bot commented Oct 6, 2025 •

edited

Loading

Uh oh!

valkirilov Oct 6, 2025

Uh oh!

valkirilov Oct 6, 2025

Uh oh!

valkirilov Oct 6, 2025

Uh oh!

ArtemHoruzhenko left a comment

Uh oh!

Uh oh!

Uh oh!

RI-7598 Change visuals of the "Import sample data" popover #5036

RI-7598 Change visuals of the "Import sample data" popover #5036

Uh oh!

Conversation

valkirilov commented Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How it was tested

Note

Tutorials

Tips

RDI

JSON key override

Delete multiple List keys

Create Redisearch index

Redis Copilot

Notifications Center

Uh oh!

valkirilov Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

valkirilov Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 6, 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!

valkirilov Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

valkirilov Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

valkirilov Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

ArtemHoruzhenko left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

valkirilov commented Oct 6, 2025 •

edited

Loading

github-actions bot commented Oct 6, 2025 •

edited

Loading