Merge pull request #8948 from jeffibm/fix-missing-toast-notifications

Fix for missing toast notifications (cherry picked from commit f436db4)
ManageIQ · Nov 2, 2023 · 0f19da3 · 0f19da3
1 parent cc9606b
commit 0f19da3
Show file tree

Hide file tree

Showing 4 changed files with 311 additions and 249 deletions.
diff --git a/app/javascript/components/toast-list/toast-item.jsx b/app/javascript/components/toast-list/toast-item.jsx
@@ -0,0 +1,51 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { ToastNotification, Link } from 'carbon-components-react';
+import { useDispatch } from 'react-redux';
+import { markNotificationRead, MARK_NOTIFICATION_READ } from '../../miq-redux/actions/notifications-actions';
+
+const notificationTimerDelay = 8000;
+const EMPTY = '';
+
+/** Component to render the toast notification.
+ *  The toastNotification is removed from the list after the time mentioned in notificationTimerDelay. */
+const ToastItem = ({ toastNotification }) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      // This filters out this toastNotification from the toastNotification's array. No API is called.
+      dispatch({
+        type: MARK_NOTIFICATION_READ,
+        payload: toastNotification.id,
+      });
+    }, notificationTimerDelay);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <ToastNotification
+      key={toastNotification.id}
+      kind={toastNotification.type}
+      lowContrast
+      title={EMPTY}
+      caption={EMPTY}
+      subtitle={toastNotification.message}
+      onClick={() => dispatch(markNotificationRead(toastNotification))}
+    >
+      {toastNotification.data.link && (
+        <div className="pull-right toast-pf-action">
+          <Link href={toastNotification.data.link}>{__('View details')}</Link>
+        </div>
+      )}
+      <span>{toastNotification.messages}</span>
+    </ToastNotification>
+  );
+};
+
+export default ToastItem;
+
+ToastItem.propTypes = {
+  toastNotification: PropTypes.objectOf(PropTypes.any).isRequired,
+};
diff --git a/app/javascript/components/toast-list/toast-list.jsx b/app/javascript/components/toast-list/toast-list.jsx
@@ -1,39 +1,16 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { ToastNotification, Link } from 'carbon-components-react';
-import { markNotificationRead } from '../../miq-redux/actions/notifications-actions';
-
-const notificationTimerDelay = 8000;
-const EMPTY = '';
+import { useSelector } from 'react-redux';
+import ToastItem from './toast-item';
 
 const ToastList = () => {
-  const dispatch = useDispatch();
   const toastNotifications = useSelector(({ notificationReducer: { toastNotifications } }) => toastNotifications);
 
   return (
     toastNotifications.length > 0 ? (
       <div id="toastnotification" className="toast-notification">
-        {toastNotifications.map((toastNotification) => (
-          <ToastNotification
-            key={toastNotification.id}
-            kind={toastNotification.type}
-            lowContrast
-            title={EMPTY}
-            caption={EMPTY}
-            subtitle={toastNotification.message}
-            onClick={() => {
-                return dispatch(markNotificationRead(toastNotification));
-            }}
-            timeout={notificationTimerDelay}
-          >
-            {toastNotification.data.link && (
-              <div className="pull-right toast-pf-action">
-                <Link href={toastNotification.data.link}>{__('View details')}</Link>
-              </div>
-            )}
-            <span>{toastNotification.messages}</span>
-          </ToastNotification>
+        {toastNotifications.slice(-3).map((toastNotification) => (
+          <ToastItem toastNotification={toastNotification} key={toastNotification.id} />
         ))}
       </div>
     ) : null

diff --git a/app/javascript/miq-redux/notification-reducer.js b/app/javascript/miq-redux/notification-reducer.js
@@ -37,7 +37,7 @@ export const notificationReducer = (state = notificationInitialState, action) =>
         notifications,
         unreadCount: notifications.filter(notification => notification.unread).length,
         totalNotificationsCount: state.totalNotificationsCount + 1,
-        toastNotifications: [action.payload, ...state.toastNotifications].slice(0, 3),
+        toastNotifications: [action.payload, ...state.toastNotifications],
       };
 
     case TOGGLE_DRAWER_VISIBILITY: