Skip to content

RI-7254 Update the visuals of the toast notifications #4963

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Sep 19, 2025
Merged

RI-7254 Update the visuals of the toast notifications #4963

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3b6445f
fix(fe): rework the infinite notifications
valkirilov Sep 17, 2025
72e26b5
refactor(ui): update "app update available" notification
valkirilov Sep 17, 2025
ae2eec9
refactor(ui): add a way to customize the variant of the infinite noti…
valkirilov Sep 17, 2025
8a7b9f6
fix(ui): update "successfully deployed pipeline" toast notification
valkirilov Sep 18, 2025
b7491d7
feat(ui): extend the infinite toasts to support custom icons
valkirilov Sep 18, 2025
61797ad
fix(ui): update the visuals of the "authenticating" toast notification
valkirilov Sep 18, 2025
83b1855
fix(ui): update the visuals of the "pending create database" toast no…
valkirilov Sep 18, 2025
db70b36
fix(ui): update the visuals of the "successfully create database" toa…
valkirilov Sep 18, 2025
29b5a56
feat(ui): extend the infinite toasts to support custom onCLose callbacks
valkirilov Sep 18, 2025
546b14d
fix(ui): update the visuals of the "database already exist" toast not…
valkirilov Sep 18, 2025
632fa71
refactor(ui): change the way we control the close button in the infin…
valkirilov Sep 18, 2025
3dfaf86
feat(ui): extend external links to provide a way to customize the var…
valkirilov Sep 18, 2025
8ca9f1c
fix(ui): update the visuals of the "database import forbidden" toast …
valkirilov Sep 18, 2025
9de0f8b
fix(ui): update the visuals of the "subscription exists" toast notifi…
valkirilov Sep 18, 2025
90375d8
fix(ui): update the visuals of the "auto creating database" toast not…
valkirilov Sep 18, 2025
6490b87
refactor(ui): cleanup leftovers from the old infinte notifications to…
valkirilov Sep 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 5 additions & 20 deletions redisinsight/ui/src/components/base/display/toast/RiToast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,21 @@ import {
ToastContentParams,
ToastOptions,
} from '@redis-ui/components'
import { ToastOptions as RcToastOptions } from 'react-toastify'

import { CommonProps } from 'uiSrc/components/base/theme/types'
import { CancelIcon } from 'uiSrc/components/base/icons'
import { ColorText, Text } from 'uiSrc/components/base/text'
import { Spacer } from '../../layout'

type RiToastProps = React.ComponentProps<typeof Toast>
export const RiToast = (props: RiToastProps) => <Toast {...props} />

type RiToastType = ToastContentParams &
export type RiToastType = ToastContentParams &
CommonProps & {
onClose?: VoidFunction
}
export const riToast = (
{ onClose, actions, message, ...content }: RiToastType,
{ onClose, message, ...content }: RiToastType,
options?: ToastOptions | undefined,
) => {
const toastContent: ToastContentParams = {
Expand All @@ -44,26 +44,11 @@ export const riToast = (
toastContent.message = message
}

if (onClose) {
toastContent.showCloseButton = false
toastContent.actions = {
...actions,
secondary: {
label: '',
icon: CancelIcon,
closes: true,
onClick: onClose,
},
}
}
if (actions && !onClose) {
toastContent.showCloseButton = false
toastContent.actions = actions
}
const toastOptions: ToastOptions = {
const toastOptions: ToastOptions & RcToastOptions = {
...options,
delay: 100,
closeOnClick: false,
onClose,
Copy link
Member Author

@valkirilov valkirilov Sep 17, 2025

Choose a reason for hiding this comment

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

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.

Image

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.

Image

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.

Image

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

Image

}
return toast(<RiToast {...toastContent} />, toastOptions)
}
Expand Down
8 changes: 3 additions & 5 deletions redisinsight/ui/src/components/base/external-link/ExternalLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react'
import { EuiLinkProps } from '@elastic/eui/src/components/link/link'
import { LinkButtonVariants } from '@redis-ui/components'
import { IconProps } from 'uiSrc/components/base/icons'
import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
import { Link } from 'uiSrc/components/base/link/Link'
Expand All @@ -8,6 +9,7 @@ export type Props = EuiLinkProps & {
href: string
iconPosition?: 'left' | 'right'
iconSize?: IconProps['size']
variant?: LinkButtonVariants
}

const ExternalLink = (props: Props) => {
Expand All @@ -18,11 +20,7 @@ const ExternalLink = (props: Props) => {
)

return (
<Link
{...rest}
target="_blank"
rel="noopener noreferrer"
>
<Link {...rest} target="_blank" rel="noopener noreferrer">
{iconPosition === 'left' && <ArrowIcon />}
{children}
{iconPosition === 'right' && <ArrowIcon />}
Expand Down
23 changes: 19 additions & 4 deletions redisinsight/ui/src/components/notifications/Notifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,12 +142,26 @@ const Notifications = () => {
infiniteToastIdsRef.current.delete(toastId)
}, 50)
})
data.forEach((message: InfiniteMessage) => {
const { id, Inner, className = '' } = message
data.forEach((notification: InfiniteMessage) => {
const {
id,
message,
description,
actions,
className = '',
variant,
customIcon,
showCloseButton = true,
onClose: onCloseCallback,
} = notification
const toastId = riToast(
{
className: cx(styles.infiniteMessage, className),
description: Inner,
message: message,
description: description,
actions,
showCloseButton,
customIcon,
onClose: () => {
switch (id) {
case InfiniteMessagesIds.oAuthProgress:
Expand Down Expand Up @@ -175,10 +189,11 @@ const Notifications = () => {
}

dispatch(removeInfiniteNotification(id))
onCloseCallback?.()
},
},
{
variant: riToast.Variant.Informative,
variant: variant ?? riToast.Variant.Notice,
autoClose: ONE_HOUR,
toastId: id,
},
Expand Down
Loading
Loading