fix(rhsmActions,platformActions): issues/190 toast notifications

* app, moved notificationsPortal from index * platformActions, pass through platform notifications * platformTypes, expand to include platform notifications * rhsmActions, disable automatic API error notifications
RedHatInsights · Feb 13, 2020 · 533250e · 533250e
1 parent c7d9168
commit 533250e
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 28 deletions.
diff --git a/src/components/app.js b/src/components/app.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { NotificationsPortal } from '@redhat-cloud-services/frontend-components-notifications';
 import { connectRouter, reduxActions } from '../redux';
 import { helpers } from '../common/helpers';
 import { I18n } from './i18n/i18n';
@@ -17,6 +18,7 @@ class App extends React.Component {
 
     return (
       <I18n locale={(locale && locale.value) || null}>
+        <NotificationsPortal />
         <Authentication>
           <Router />
         </Authentication>

diff --git a/src/index.js b/src/index.js
@@ -2,15 +2,13 @@ import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
-import { NotificationsPortal } from '@redhat-cloud-services/frontend-components-notifications';
 import { baseName } from './components/router/routerHelpers';
 import { store } from './redux';
 import App from './components/app';
 import './styles/index.scss';
 
 render(
   <Provider store={store}>
-    <NotificationsPortal />
     <BrowserRouter basename={baseName}>
       <App />
     </BrowserRouter>

diff --git a/src/redux/actions/platformActions.js b/src/redux/actions/platformActions.js
@@ -1,6 +1,17 @@
+import {
+  addNotification as RcsAddNotification,
+  removeNotification as RcsRemoveNotification,
+  clearNotifications as RcsClearNotifications
+} from '@redhat-cloud-services/frontend-components-notifications';
 import { platformTypes } from '../types';
 import { platformServices } from '../../services/platformServices';
 
+const addNotification = data => RcsAddNotification(data);
+
+const removeNotification = id => RcsRemoveNotification(id);
+
+const clearNotifications = () => RcsClearNotifications();
+
 const initializeChrome = () => ({
   type: platformTypes.PLATFORM_INIT,
   payload: platformServices.initializeChrome()
@@ -28,6 +39,24 @@ const setNavigation = data => dispatch => {
   return platformServices.setNavigation(data);
 };
 
-const platformActions = { initializeChrome, onNavigation, setAppName, setNavigation };
+const platformActions = {
+  addNotification,
+  removeNotification,
+  clearNotifications,
+  initializeChrome,
+  onNavigation,
+  setAppName,
+  setNavigation
+};
 
-export { platformActions as default, platformActions, initializeChrome, onNavigation, setAppName, setNavigation };
+export {
+  platformActions as default,
+  platformActions,
+  addNotification,
+  removeNotification,
+  clearNotifications,
+  initializeChrome,
+  onNavigation,
+  setAppName,
+  setNavigation
+};
diff --git a/src/redux/actions/rhsmActions.js b/src/redux/actions/rhsmActions.js
@@ -8,13 +8,7 @@ const getGraphReportsCapacity = (id = null, query = {}) => dispatch =>
     meta: {
       id,
       query,
-      notifications: {
-        rejected: {
-          variant: 'info',
-          title: 'Reporting and capacity connection has failed',
-          description: `Product ID: ${id}`
-        }
-      }
+      notifications: {}
     }
   });
 
@@ -25,13 +19,7 @@ const getGraphReports = (id = null, query = {}) => dispatch =>
     meta: {
       id,
       query,
-      notifications: {
-        rejected: {
-          variant: 'info',
-          title: 'Reporting connection has failed',
-          description: `Product ID: ${id}`
-        }
-      }
+      notifications: {}
     }
   });
 
@@ -42,13 +30,7 @@ const getGraphCapacity = (id = null, query = {}) => dispatch =>
     meta: {
       id,
       query,
-      notifications: {
-        rejected: {
-          variant: 'info',
-          title: 'Capacity connection has failed',
-          description: `Product ID: ${id}`
-        }
-      }
+      notifications: {}
     }
   });
 

diff --git a/src/redux/middleware/index.js b/src/redux/middleware/index.js
@@ -11,7 +11,7 @@ const notificationsOptions = {
   fulfilledSuffix: reduxHelpers.FULFILLED_ACTION(), // fulfilled state action suffix
   rejectedSuffix: reduxHelpers.REJECTED_ACTION(), // rejected state action suffix
   autoDismiss: true, // autoDismiss pending and success notifications
-  dismissDelay: 5000, // autoDismiss delay in ms
+  dismissDelay: 3000, // autoDismiss delay in ms
   errorTitleKey: 'title', // path to notification title in error response
   errorDescriptionKey: 'detail' // path to notification description in error response
 };

diff --git a/src/redux/types/__tests__/__snapshots__/index.test.js.snap b/src/redux/types/__tests__/__snapshots__/index.test.js.snap
@@ -12,9 +12,12 @@ Object {
       "STATUS_5XX": "5XX",
     },
     "platform": Object {
+      "PLATFORM_ADD_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/ADD_NOTIFICATION",
       "PLATFORM_APP_NAME": "PLATFORM_APP_NAME",
+      "PLATFORM_CLEAR_NOTIFICATIONS": "@@INSIGHTS-CORE/NOTIFICATIONS/CLEAR_NOTIFICATIONS",
       "PLATFORM_INIT": "PLATFORM_INIT",
       "PLATFORM_ON_NAV": "PLATFORM_ON_NAV",
+      "PLATFORM_REMOVE_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/REMOVE_NOTIFICATION",
       "PLATFORM_SET_NAV": "PLATFORM_SET_NAV",
     },
     "rhsm": Object {
@@ -30,9 +33,12 @@ Object {
     },
   },
   "platformTypes": Object {
+    "PLATFORM_ADD_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/ADD_NOTIFICATION",
     "PLATFORM_APP_NAME": "PLATFORM_APP_NAME",
+    "PLATFORM_CLEAR_NOTIFICATIONS": "@@INSIGHTS-CORE/NOTIFICATIONS/CLEAR_NOTIFICATIONS",
     "PLATFORM_INIT": "PLATFORM_INIT",
     "PLATFORM_ON_NAV": "PLATFORM_ON_NAV",
+    "PLATFORM_REMOVE_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/REMOVE_NOTIFICATION",
     "PLATFORM_SET_NAV": "PLATFORM_SET_NAV",
   },
   "reduxTypes": Object {
@@ -41,9 +47,12 @@ Object {
       "STATUS_5XX": "5XX",
     },
     "platform": Object {
+      "PLATFORM_ADD_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/ADD_NOTIFICATION",
       "PLATFORM_APP_NAME": "PLATFORM_APP_NAME",
+      "PLATFORM_CLEAR_NOTIFICATIONS": "@@INSIGHTS-CORE/NOTIFICATIONS/CLEAR_NOTIFICATIONS",
       "PLATFORM_INIT": "PLATFORM_INIT",
       "PLATFORM_ON_NAV": "PLATFORM_ON_NAV",
+      "PLATFORM_REMOVE_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/REMOVE_NOTIFICATION",
       "PLATFORM_SET_NAV": "PLATFORM_SET_NAV",
     },
     "rhsm": Object {
@@ -79,9 +88,12 @@ Object {
     "STATUS_5XX": "5XX",
   },
   "platform": Object {
+    "PLATFORM_ADD_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/ADD_NOTIFICATION",
     "PLATFORM_APP_NAME": "PLATFORM_APP_NAME",
+    "PLATFORM_CLEAR_NOTIFICATIONS": "@@INSIGHTS-CORE/NOTIFICATIONS/CLEAR_NOTIFICATIONS",
     "PLATFORM_INIT": "PLATFORM_INIT",
     "PLATFORM_ON_NAV": "PLATFORM_ON_NAV",
+    "PLATFORM_REMOVE_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/REMOVE_NOTIFICATION",
     "PLATFORM_SET_NAV": "PLATFORM_SET_NAV",
   },
   "rhsm": Object {

diff --git a/src/redux/types/platformTypes.js b/src/redux/types/platformTypes.js
@@ -1,8 +1,35 @@
+import {
+  ADD_NOTIFICATION,
+  REMOVE_NOTIFICATION,
+  CLEAR_NOTIFICATIONS
+} from '@redhat-cloud-services/frontend-components-notifications';
+
+const PLATFORM_ADD_NOTIFICATION = ADD_NOTIFICATION;
+const PLATFORM_REMOVE_NOTIFICATION = REMOVE_NOTIFICATION;
+const PLATFORM_CLEAR_NOTIFICATIONS = CLEAR_NOTIFICATIONS;
 const PLATFORM_INIT = 'PLATFORM_INIT';
 const PLATFORM_APP_NAME = 'PLATFORM_APP_NAME';
 const PLATFORM_ON_NAV = 'PLATFORM_ON_NAV';
 const PLATFORM_SET_NAV = 'PLATFORM_SET_NAV';
 
-const platformTypes = { PLATFORM_INIT, PLATFORM_APP_NAME, PLATFORM_ON_NAV, PLATFORM_SET_NAV };
+const platformTypes = {
+  PLATFORM_ADD_NOTIFICATION,
+  PLATFORM_REMOVE_NOTIFICATION,
+  PLATFORM_CLEAR_NOTIFICATIONS,
+  PLATFORM_INIT,
+  PLATFORM_APP_NAME,
+  PLATFORM_ON_NAV,
+  PLATFORM_SET_NAV
+};
 
-export { platformTypes as default, platformTypes, PLATFORM_INIT, PLATFORM_APP_NAME, PLATFORM_ON_NAV, PLATFORM_SET_NAV };
+export {
+  platformTypes as default,
+  platformTypes,
+  PLATFORM_ADD_NOTIFICATION,
+  PLATFORM_REMOVE_NOTIFICATION,
+  PLATFORM_CLEAR_NOTIFICATIONS,
+  PLATFORM_INIT,
+  PLATFORM_APP_NAME,
+  PLATFORM_ON_NAV,
+  PLATFORM_SET_NAV
+};