Merge pull request ManageIQ#8867 from jeffibm/fix-notification-duplic…

…ates

Fix duplicate notifications and toasters

app/javascript/components/breadcrumbs/index.jsx

@@ -1,10 +1,20 @@
+/* eslint-disable react/destructuring-assignment */
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Breadcrumbs } from './breadcrumbs';
 import { NotificationsToggle } from './notifications-toggle';
 
 export const BreadcrumbsBar = (props) => (
   <>
     <Breadcrumbs {...props} />
-    <NotificationsToggle />
+    <NotificationsToggle jsRequest={props.jsRequest} />
   </>
 );
+
+BreadcrumbsBar.propTypes = {
+  jsRequest: PropTypes.bool,
+};
+
+BreadcrumbsBar.defaultProps = {
+  jsRequest: false,
+};

app/javascript/components/breadcrumbs/notifications-toggle.jsx

@@ -1,12 +1,13 @@
 import cx from 'classnames';
 import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button } from 'carbon-components-react';
 import { TOGGLE_DRAWER_VISIBILITY } from '../../miq-redux/actions/notifications-actions';
 import MiqIcon from '../../menu/icon';
 import NotificationDrawer from '../notification-drawer/notification-drawer';
 
-export const NotificationsToggle = () => {
+export const NotificationsToggle = ({ jsRequest }) => {
   const dispatch = useDispatch();
   const { isDrawerVisible, unreadCount } = useSelector(({ notificationReducer }) => notificationReducer);
 
@@ -39,7 +40,15 @@ export const NotificationsToggle = () => {
         {' '}
         <MiqIcon icon={unreadCount ? 'carbon--NotificationNew' : 'carbon--Notification'} />
       </Button>
-      <NotificationDrawer />
+      <NotificationDrawer jsRequest={jsRequest} />
     </div>
   );
 };
+
+NotificationsToggle.propTypes = {
+  jsRequest: PropTypes.bool,
+};
+
+NotificationsToggle.defaultProps = {
+  jsRequest: false,
+};

app/javascript/components/notification-drawer/notification-drawer.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import moment from 'moment';
 import { useDispatch, useSelector } from 'react-redux';
 import { ChevronLeft16, Close16 } from '@carbon/icons-react';
@@ -13,15 +14,17 @@ import {
 
 import initNotifications from '../../notifications/init';
 
-const NotificationDrawer = () => {
+const NotificationDrawer = ({ jsRequest }) => {
   const dispatch = useDispatch();
   const drawerTitle = __('Notifications');
   const [isDrawerExpanded, setDrawerExpanded] = useState(false);
   const {
     isDrawerVisible, unreadCount, notifications, totalNotificationsCount, maxNotifications,
   } = useSelector(({ notificationReducer }) => notificationReducer);
   useEffect(() => {
-    initNotifications();
+    if (!jsRequest) {
+      initNotifications();
+    }
   }, []);
   return (
     isDrawerVisible ? (
@@ -192,3 +195,11 @@ const NotificationDrawer = () => {
 };
 
 export default NotificationDrawer;
+
+NotificationDrawer.propTypes = {
+  jsRequest: PropTypes.bool,
+};
+
+NotificationDrawer.defaultProps = {
+  jsRequest: false,
+};

app/javascript/components/toast-list/toast-item.jsx

@@ -33,6 +33,7 @@ const ToastItem = ({ toastNotification }) => {
       caption={EMPTY}
       subtitle={toastNotification.message}
       onClick={() => dispatch(markNotificationRead(toastNotification))}
+      timeout={6000}
     >
       {toastNotification.data.link && (
         <div className="pull-right toast-pf-action">

app/javascript/miq-redux/notification-reducer.js

@@ -20,25 +20,39 @@ const notificationInitialState = {
   maxNotifications,
 };
 
+/** Function to filter out the toastNotification that are already displayed. */
+const filterToastNotification = ({ payload }, toastNotifications) => {
+  const exists = toastNotifications.find((item) => item.id === payload.id);
+  return exists ? toastNotifications : [payload, ...toastNotifications];
+};
+
+/** Function to filter out the notification that are already displayed. */
+const filterNotifications = ({ payload }, notifications) => {
+  const exists = notifications.find((item) => item.id === payload.id);
+  return exists ? notifications : [payload, ...notifications].slice(0, 100);
+};
+
 export const notificationReducer = (state = notificationInitialState, action) => {
   switch (action.type) {
     case INIT_NOTIFICATIONS:
       return {
         ...state,
         notifications: action.payload.notifications,
-        unreadCount: action.payload.notifications.filter(notification => notification.unread).length,
+        unreadCount: action.payload.notifications.filter((notification) => notification.unread).length,
         totalNotificationsCount: action.payload.count,
       };
 
     case ADD_NOTIFICATION:
-      const notifications = [action.payload, ...state.notifications].slice(0, 100);
+    {
+      const notifications = filterNotifications(action, state.notifications);
       return {
         ...state,
         notifications,
-        unreadCount: notifications.filter(notification => notification.unread).length,
+        unreadCount: notifications.filter((notification) => notification.unread).length,
         totalNotificationsCount: state.totalNotificationsCount + 1,
-        toastNotifications: [action.payload, ...state.toastNotifications],
+        toastNotifications: filterToastNotification(action, state.toastNotifications),
       };
+    }
 
     case TOGGLE_DRAWER_VISIBILITY:
       return { ...state, isDrawerVisible: !state.isDrawerVisible };

app/javascript/spec/breadcrumbs/__snapshots__/breadcrumbs.spec.js.snap

@@ -35,6 +35,7 @@ exports[`Breadcrumbs component is correctly rendered 1`] = `
           },
         ]
       }
+      jsRequest={false}
       title="Title"
     >
       <Breadcrumbs
@@ -58,6 +59,7 @@ exports[`Breadcrumbs component is correctly rendered 1`] = `
             },
           ]
         }
+        jsRequest={false}
         title="Title"
       >
         <Breadcrumb
@@ -136,7 +138,9 @@ exports[`Breadcrumbs component is correctly rendered 1`] = `
           </nav>
         </Breadcrumb>
       </Breadcrumbs>
-      <NotificationsToggle>
+      <NotificationsToggle
+        jsRequest={false}
+      >
         <div
           className="notification-module"
         >
@@ -212,7 +216,9 @@ exports[`Breadcrumbs component is correctly rendered 1`] = `
               </MiqIcon>
             </button>
           </Button>
-          <NotificationDrawer />
+          <NotificationDrawer
+            jsRequest={false}
+          />
         </div>
       </NotificationsToggle>
     </BreadcrumbsBar>

app/javascript/spec/notification-drawer/__snapshots__/notification-drawer.spec.js.snap

@@ -13,7 +13,9 @@ exports[`Notification drawer tests should render correctly 1`] = `
     }
   }
 >
-  <NotificationDrawer>
+  <NotificationDrawer
+    jsRequest={false}
+  >
     <div
       id="miq-notifications-drawer-container"
     >

app/javascript/spec/toast-list/__snapshots__/toast-list.spec.js.snap

@@ -42,6 +42,7 @@ exports[`Toast list tests should render correctly with notifications 1`] = `
           lowContrast={true}
           onClick={[Function]}
           subtitle="Plan has completed with errors"
+          timeout={6000}
           title=""
         >
           <ToastNotification
@@ -55,7 +56,7 @@ exports[`Toast list tests should render correctly with notifications 1`] = `
             onCloseButtonClick={[Function]}
             role="alert"
             subtitle="Plan has completed with errors"
-            timeout={0}
+            timeout={6000}
             title=""
           >
             <div
@@ -224,6 +225,7 @@ exports[`Toast list tests should render correctly with notifications 1`] = `
           lowContrast={true}
           onClick={[Function]}
           subtitle="Plan has completed successfully"
+          timeout={6000}
           title=""
         >
           <ToastNotification
@@ -237,7 +239,7 @@ exports[`Toast list tests should render correctly with notifications 1`] = `
             onCloseButtonClick={[Function]}
             role="alert"
             subtitle="Plan has completed successfully"
-            timeout={0}
+            timeout={6000}
             title=""
           >
             <div

app/views/layouts/_breadcrumbs.html.haml

@@ -2,4 +2,5 @@
 = react('BreadcrumbsBar',
         :items => (data_for_breadcrumbs({:right_cell_text => right_cell_text}) if respond_to?(:data_for_breadcrumbs)),
         :controllerName => controller_name,
-        :title => @title)
+        :title => @title,
+        :jsRequest => request.format.js?)