Skip to content

Conversation

@valkirilov
Copy link
Member

Description

Update the visuals of the toast notification when the sample data import finishes successfully, and make it look less broken:

  • rework the interface for the success notifications to allow us to customize the visibility of the action buttons and the default dismiss button
  • update the notification itself, to use Redis UI styles only, and make it look not broken
Before After
Screenshot 2025-09-23 at 14 22 23 Screenshot 2025-09-23 at 14 57 30

How it was tested

  1. Open Redis Insight and connect to the existing database (or establish a connection to a new instance)
  2. Go to the Browser page and make sure the database is empty, so you can see the "Load sample data" button
  3. Confirm the import and wait for the notification to appear

PS: You can use the flushdb command in the CLI to wipe all data from the Redis instance, if it's not empty

Old Before After
Screenshot 2025-09-23 at 14 26 53 Screenshot 2025-09-23 at 14 22 23 Screenshot 2025-09-23 at 14 57 30
Screenshot 2025-09-23 at 14 27 07 Screenshot 2025-09-23 at 14 22 38 Screenshot 2025-09-23 at 14 57 39

Other use cases

The same notification can be used by a Workbench tutorial that I wasn't able to find how to trigger via action in the app, but I have fixed the visual of the notification, and you can manually trigger it via the following action:

const data: IBulkActionOverview = {
      id: 'empty',
      databaseId: '867c2756-d291-4e03-b19e-f95d6ca89248',
      type: BulkActionType.Upload,
      summary: {
        processed: 234,
        succeed: 234,
        failed: 0,
        errors: [],
        keys: [],
      },
      status: BulkActionsStatus.Completed,
      duration: 34,

      // Not relevant for this notification, but required in the interface
      progress: {
        total: 0,
        scanned: 0,
      },
      filter: { type: RedisDataType.Hash, match: '*' },
}

dispatch(addMessageNotification(successMessages.UPLOAD_DATA_BULK(data)))
Light Dark
Screenshot 2025-09-23 at 14 57 03 Screenshot 2025-09-23 at 14 57 11

- allow overriding the default actions buttons
- allow show/hide the default dismiss button

re #RI-7484
@github-actions
Copy link
Contributor

Code Coverage - Frontend unit tests

St.
Category Percentage Covered / Total
🟢 Statements 82.09% 19977/24335
🟡 Branches 67.47% 8660/12835
🟡 Functions 76.19% 5315/6976
🟢 Lines 82.52% 19560/23703

Test suite run success

5150 tests passing in 677 suites.

Report generated by 🧪jest coverage report action from 186f46a

Copy link
Contributor

@ArtemHoruzhenko ArtemHoruzhenko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lgtm

@valkirilov valkirilov self-assigned this Sep 24, 2025
@valkirilov valkirilov merged commit 8c9f9ba into main Sep 24, 2025
51 of 60 checks passed
@valkirilov valkirilov deleted the fe/bugfix/RI-7484_sample-data-success-notification branch September 24, 2025 08:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants