feat(notifications): issues/11 toast notifications (#107)

* build, platform notifications package * index, add notifications component * rhelActions, notifications metadata * middleware, notifications options-settings * redux reducers, notifications reducer * scss, notifications stylesheet
RedHatInsights · Oct 14, 2019 · cf72c5c · cf72c5c
1 parent b2fdd05
commit cf72c5c
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -81,6 +81,7 @@
     "@patternfly/react-tokens": "2.6.26",
     "@redhat-cloud-services/frontend-components": "0.0.19",
     "@redhat-cloud-services/frontend-components-utilities": "0.0.9",
+    "@redhat-cloud-services/frontend-components-notifications": "0.0.7",
     "axios": "^0.19.0",
     "classnames": "^2.2.6",
     "i18next": "^17.0.14",

diff --git a/src/index.js b/src/index.js
@@ -2,13 +2,15 @@ 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/routerTypes';
 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/rhelActions.js b/src/redux/actions/rhelActions.js
@@ -4,7 +4,16 @@ import rhelServices from '../../services/rhelServices';
 const getGraphReports = (query = {}) => dispatch =>
   dispatch({
     type: rhelTypes.GET_GRAPH_REPORT,
-    payload: rhelServices.getGraphReportsRhsm(query)
+    payload: rhelServices.getGraphReportsRhsm(query),
+    meta: {
+      notifications: {
+        rejected: {
+          variant: 'info',
+          title: 'RHSM connection has failed',
+          description: 'Product ID Red Hat Enterprise Linux'
+        }
+      }
+    }
   });
 
 export { getGraphReports as default, getGraphReports };
diff --git a/src/redux/middleware/index.js b/src/redux/middleware/index.js
@@ -1,11 +1,31 @@
 import { createLogger } from 'redux-logger';
 import promiseMiddleware from 'redux-promise-middleware';
 import thunkMiddleware from 'redux-thunk';
+import { notificationsMiddleware } from '@redhat-cloud-services/frontend-components-notifications';
+import { reduxHelpers } from '../common/reduxHelpers';
 
-const reduxMiddleware = [thunkMiddleware, promiseMiddleware];
+const notificationsOptions = {
+  dispatchDefaultFailure: true, // automatic error notifications
+  pendingSuffix: reduxHelpers.PENDING_ACTION(), // pending state action suffix
+  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
+  errorTitleKey: 'title', // path to notification title in error response
+  errorDescriptionKey: 'detail' // path to notification description in error response
+};
+
+const reduxMiddleware = [thunkMiddleware, promiseMiddleware, notificationsMiddleware(notificationsOptions)];
 
 if (process.env.NODE_ENV !== 'production' && process.env.REACT_APP_DEBUG_MIDDLEWARE === 'true') {
   reduxMiddleware.push(createLogger());
 }
 
-export { reduxMiddleware as default, reduxMiddleware, createLogger, promiseMiddleware, thunkMiddleware };
+export {
+  reduxMiddleware as default,
+  reduxMiddleware,
+  createLogger,
+  notificationsMiddleware,
+  promiseMiddleware,
+  thunkMiddleware
+};
diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js
@@ -1,9 +1,11 @@
 import { combineReducers } from 'redux';
+import { notifications } from '@redhat-cloud-services/frontend-components-notifications';
 import rhelGraphReducer from './rhelGraphReducer';
 import rhelViewReducer from './rhelViewReducer';
 import userReducer from './userReducer';
 
 const reducers = {
+  notifications,
   rhelGraph: rhelGraphReducer,
   rhelView: rhelViewReducer,
   user: userReducer

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,6 +1,7 @@
 // Framework
 @import '~@redhat-cloud-services/frontend-components-utilities/files/Utilities/_all';
 @import '~@redhat-cloud-services/frontend-components/index.css';
+@import '~@redhat-cloud-services/frontend-components-notifications/index.css';
 @import '~@patternfly/patternfly/sass-utilities/all';
 
 // App

diff --git a/yarn.lock b/yarn.lock
@@ -1153,6 +1153,13 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-2.6.31.tgz#3fab62e9ccf4d81f6c10edbcf66836264362b3d3"
   integrity sha512-K9semfLIdf2vECefAbheXPVwZqq8nXY0Hf/VkWh6OBCL6R4FekxajpSBgobeoTQUotmvz5boMngqhkUjE7yChA==
 
+"@redhat-cloud-services/frontend-components-notifications@0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components-notifications/-/frontend-components-notifications-0.0.7.tgz#7306af9215e5b0455bdc7e6acdf078db64ef9676"
+  integrity sha512-HoRwrAKTRy41MdCy7EFL/Q5561ib+G0FF+NW+ZH/IOP3/oBtstVU+FhaSCDjTkDWYAzL7wuw2j7hDdaOWxVY8g==
+  dependencies:
+    "@redhat-cloud-services/frontend-components-utilities" "~0.0.7"
+
 "@redhat-cloud-services/frontend-components-utilities@0.0.9", "@redhat-cloud-services/frontend-components-utilities@~0.0.7":
   version "0.0.9"
   resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components-utilities/-/frontend-components-utilities-0.0.9.tgz#e795f19c855fa848ff03491d7012ed7e064a3a88"