RI-7247: older notifications are displayed

Author: pd-redis

redisinsight/ui/src/components/base/display/toast/RiToast.tsx

@@ -17,16 +17,12 @@ const StyledMessage = styled.div<{ theme: Theme }>`
   margin-bottom: ${({ theme }) => theme.core.space.space100};
 `
 
+type RiToastType = ToastContentParams &
+  CommonProps & {
+    onClose?: VoidFunction
+  }
 export const riToast = (
-  {
-    onClose,
-    actions,
-    message,
-    ...content
-  }: ToastContentParams &
-    CommonProps & {
-      onClose?: VoidFunction
-    },
+  { onClose, actions, message, ...content }: RiToastType,
   options?: ToastOptions | undefined,
 ) => {
   const toastContent: ToastContentParams = {

redisinsight/ui/src/components/notifications/Notifications.tsx

@@ -56,7 +56,15 @@ const Notifications = () => {
 
   const showSuccessToasts = (data: IMessage[]) =>
     data.forEach(({ id = '', title = '', message = '', className, group }) => {
-      riToast(
+      const handleClose = () => {
+        onSubmitNotification(id, group)
+        removeToast(id)
+      }
+      if (toastIdsRef.current.has(id)) {
+        removeToast(id)
+        return
+      }
+      const toastId = riToast(
         {
           className,
           message: title,
@@ -66,15 +74,13 @@ const Notifications = () => {
             primary: {
               closes: true,
               label: 'Ok',
-              onClick: () => {
-                onSubmitNotification(id, group)
-                removeToast(id)
-              },
+              onClick: handleClose,
             },
           },
         },
         { variant: riToast.Variant.Success },
       )
+      toastIdsRef.current.set(id, toastId)
     })
 
   const showErrorsToasts = (errors: IError[]) =>
@@ -87,6 +93,10 @@ const Notifications = () => {
         title = DEFAULT_ERROR_TITLE,
         additionalInfo,
       }) => {
+        if (toastIdsRef.current.has(id)) {
+          removeToast(id)
+          return
+        }
         let toastId: ReturnType<typeof riToast>
         if (ApiEncryptionErrors.includes(name)) {
           toastId = errorMessages.ENCRYPTION(() => removeToast(id), instanceId)
@@ -117,8 +127,12 @@ const Notifications = () => {
   const showInfiniteToasts = (data: InfiniteMessage[]) =>
     data.forEach((message: InfiniteMessage) => {
       const { id, Inner, className = '' } = message
-
-      riToast(
+      if (toastIdsRef.current.has(id)) {
+        removeToast(id)
+        dispatch(removeInfiniteNotification(id))
+        return
+      }
+      const toastId = riToast(
         {
           className: cx(styles.infiniteMessage, className),
           description: Inner,
@@ -153,6 +167,7 @@ const Notifications = () => {
         },
         { variant: riToast.Variant.Notice, autoClose: ONE_HOUR },
       )
+      toastIdsRef.current.set(id, toastId)
     })
 
   useEffect(() => {

redisinsight/ui/src/slices/app/notifications.ts

@@ -84,7 +84,9 @@ const notificationsSlice = createSlice({
       state.errors.push(error)
     },
     removeError: (state, { payload = '' }: { payload: string }) => {
-      state.errors = state.errors.filter((error) => error.id !== payload)
+      if (state.errors.find((error) => error.id === payload)) {
+        state.errors = state.errors.filter((error) => error.id !== payload)
+      }
     },
     resetErrors: (state) => {
       state.errors = []
@@ -97,10 +99,14 @@ const notificationsSlice = createSlice({
       })
     },
     removeMessage: (state, { payload = '' }: { payload: string }) => {
-      state.messages = state.messages.filter(
-        (message) => message.id !== payload,
-      )
-      state.errors = state.errors.filter((error) => error.id !== payload)
+      if (state.messages.find((message) => message.id === payload)) {
+        state.messages = state.messages.filter(
+          (message) => message.id !== payload,
+        )
+      }
+      if (state.errors.find((error) => error.id === payload)) {
+        state.errors = state.errors.filter((error) => error.id !== payload)
+      }
     },
     resetMessages: (state) => {
       state.messages = []
@@ -166,9 +172,11 @@ const notificationsSlice = createSlice({
       }
     },
     removeInfiniteNotification: (state, { payload }: PayloadAction<string>) => {
-      state.infiniteMessages = state.infiniteMessages.filter(
-        (message) => message.id !== payload,
-      )
+      if (state.infiniteMessages.find((message) => message.id === payload)) {
+        state.infiniteMessages = state.infiniteMessages.filter(
+          (message) => message.id !== payload,
+        )
+      }
     },
   },
 })