RI-7254 Update the visuals of the toast notifications

[valkirilov]

Description

Update the visuals of the infinite notification to resemble more closely the Redis UI toasts, and the FIgma designs.

• update the interface and the way we serve the data for the infinite notification, so it will resemble more closely the expected format by Redis UI, and make all infinite notifications use it
• rework the way we show the default "X" button for dismissing notifications
• update the variant to reflect the expected design

How it was tested

There are numerous use cases in which we use infinite notifications. Although we have a common way to dispatch these types of notifications, I still had to update the way we build up the data for each notification. Here are all of the updated notifications:

Authenticating

1. Click on the "Cloud Login" button in the top right corner, and login via one of the providers
2. Once you're redirected back to the app, you'll see the notification for a second

Or, dispatch manually the notification anywhere in the code:

 dispatch(addInfiniteNotification(INFINITE_MESSAGES.AUTHENTICATING()))

Old	Before	After

Pending cloud database creation

1. Go to Databases and click on the + Add Redis Database button
2. Under the "Get started with Redis Cloud account" section, click on the "New database" option
3. Make sure to confirm the new cloud database creation in the modal, and you'll see the toast notification

Or, dispatch manually the notification anywhere in the code:

dispatch(addInfiniteNotification(INFINITE_MESSAGES.PENDING_CREATE_DB()))

_Note: This notification can display different titles, based on the step in the process:

• Processing Cloud API keys…
• Processing Cloud subscriptions…
• Creating a free trial Cloud database…
• Importing a free trial Cloud database…_

Old	Before	After

Successfully created Cloud database

Follow the steps from the previous use case (#Pending cloud database creation) and wait till the end, to see the success toast notification.

Or, dispatch manually the notification anywhere in the code:

dispatch(
      addInfiniteNotification(
        INFINITE_MESSAGES.SUCCESS_CREATE_DB(
          {
            provider: OAuthProvider.AWS,
            region: 'us-east-1',
          },
          () => alert('Success create DB'),
          CloudJobName.CreateFreeDatabase,
        ),
      ),
)

Note: Here, we don't use the action button, because we have a lot of content and it becomes very ugly if we reduce it width (to make room for the two action buttons). Still, we can't use the semantic colored buttons, so the following visuals look off.

Old	Before	After

Database already exists

Follow the steps from the previous use case ([#Successfully created Cloud database](#successfully-created-cloud database)) and wait till the end, to see the toast notification that such a database already exists.

Or, dispatch manually the notification anywhere in the code:

dispatch(
      addInfiniteNotification(
        INFINITE_MESSAGES.DATABASE_EXISTS(
          () => alert('Import'),
          () => alert('Close'),
        ),
      ),
)

Old	Before	After

Cloud Import Forbidden

I was not able to find a way to reproduce this scenario in the app, but you can manually open the notification this way:

dispatch(
      addInfiniteNotification(
        INFINITE_MESSAGES.DATABASE_IMPORT_FORBIDDEN(() => alert('Close')),
      ),
)

Before	After

Subscription already exists

I was not able to find a way to reproduce this scenario in the app, but you can manually open the notification this way:

 dispatch(
      addInfiniteNotification(
        INFINITE_MESSAGES.SUBSCRIPTION_EXISTS(
          () => alert('Create'),
          () => alert('Cancel'),
        ),
      ),
)

Before	After

Automatic creation of a database

I was not able to find a way to reproduce this scenario in the app, but you can manually open the notification this way:

dispatch(
      addInfiniteNotification(INFINITE_MESSAGES.AUTO_CREATING_DATABASE()),
)

Before	After

App Update Available

1. Download an older version of the app from the archive

Wait for a minute, and you'll notice the notification, suggesting you to restart the app

Or, dispatch manually the notification anywhere in the code:

dispatch(
  addInfiniteNotification(
    INFINITE_MESSAGES.APP_UPDATE_AVAILABLE('2.74', () => {
      console.log('Restarting...')
    })
  )
)

Old	Before	After

Successfully deployed RDI pipeline

1. Go to the Databases page and click on the Redis Data Integration tab
2. Open an existing RDI instance (or create a new one, but it's complicated)
3. From the top right corner, click on Deploy Pipeline button

Wait for the action to complete, and you'll see the notification.

Or, dispatch the notification manually anywhere in the code:

dispatch(
  addInfiniteNotification(
    INFINITE_MESSAGES.SUCCESS_DEPLOY_PIPELINE()
  )
)

Old	Before	After

[github-actions]

Code Coverage - Frontend unit tests

St.❔	Category	Percentage	Covered / Total
🟢	Statements	82.1%	19959/24311
🟡	Branches	67.45%	8647/12820
🟡	Functions	76.19%	5312/6972
🟢	Lines	82.53%	19542/23679

Test suite run success

5129 tests passing in 676 suites.

Report generated by 🧪jest coverage report action from 6490b87

[valkirilov]

Redis UI depends on React Toastify, which supports out of the box a callback handler when you dismiss a notification. If we want to follow the Figma design, we should rely on the built-in "dismiss" button, instead of adding a custom action button with an icon, and this is the only way to preserve the telemetry collection on close.

Before

We used to render an action button, with "X" icon and attach callback handler to it.

Also, when having more than a single action, we can't order them, and we end up with the dismiss action left to the primary one, which I think looks wrong.

After

However, Redis UI provides a built-in way to show a dismiss button.
So, here it is, the same thing, but using the native dismiss button.

And also, when we need to pair it with an action button.