From cf72c5cd71ed623dfbeaca23650c4a1239ddff09 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Wed, 2 Oct 2019 17:15:19 -0400 Subject: [PATCH] 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 --- package.json | 1 + src/index.js | 2 ++ src/redux/actions/rhelActions.js | 11 ++++++++++- src/redux/middleware/index.js | 24 ++++++++++++++++++++++-- src/redux/reducers/index.js | 2 ++ src/styles/index.scss | 1 + yarn.lock | 7 +++++++ 7 files changed, 45 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 396975a25..0e281daa6 100644 --- 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 index 20aef9b01..05bbb89dc 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,7 @@ 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'; @@ -9,6 +10,7 @@ import './styles/index.scss'; render( + diff --git a/src/redux/actions/rhelActions.js b/src/redux/actions/rhelActions.js index 3f277c24a..491296801 100644 --- 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 index 043eb18a3..503fdbb24 100644 --- 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 index 2adf0c76a..f03142de4 100644 --- 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 index 6875ea8b3..72f466bb6 100644 --- 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 index f2992e962..8761f0020 100644 --- 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"