CreateImageWizard: Notification on successful compose response

package.json

@@ -8,6 +8,7 @@
     "@patternfly/react-core": "^4.97.3",
     "@patternfly/react-table": "^4.23.1",
     "@redhat-cloud-services/frontend-components": "^2.4.23",
+    "@redhat-cloud-services/frontend-components-notifications": "^3.0.4",
     "@redhat-cloud-services/frontend-components-utilities": "^2.2.7",
     "classnames": "^2.2.6",
     "react": "^16.12.0",

src/App.js

@@ -4,6 +4,7 @@ import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { Routes } from './Routes';
 import './App.scss';
+import { NotificationsPortal } from '@redhat-cloud-services/frontend-components-notifications';
 
 import api from './api.js';
 import PermissionDenied from './PresentationalComponents/LandingPage/PermissionDenied';
@@ -38,6 +39,7 @@ class App extends Component {
     render () {
         return (
             <React.Fragment>
+                <NotificationsPortal />
                 { this.state.permission ? <Routes childProps={ this.props } /> : <PermissionDenied /> }
             </React.Fragment>
         );

src/SmartComponents/CreateImageWizard/CreateImageWizard.js

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { actions } from '../redux';
 
 import { Wizard, TextContent } from '@patternfly/react-core';
+import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
 
 import WizardStepImageOutput from '../../PresentationalComponents/CreateImageWizard/WizardStepImageOutput';
 import WizardStepUploadAWS from '../../PresentationalComponents/CreateImageWizard/WizardStepUploadAWS';
@@ -286,7 +287,7 @@ class CreateImageWizard extends Component {
         });
     }
 
-    onSave () {
+    onSave() {
         this.setState({
             onSaveInProgress: true,
         });
@@ -389,7 +390,13 @@ class CreateImageWizard extends Component {
         });
 
         Promise.all(composeRequests)
-            .then(() => this.props.history.push('/landing'))
+            .then(() => {
+                this.props.addNotification({
+                    variant: 'success',
+                    title: 'Your image is being created',
+                });
+                this.props.history.push('/landing');
+            })
             .catch(err => {
                 this.setState({ onSaveInProgress: false });
                 if (err.response.status === 500) {
@@ -509,11 +516,13 @@ class CreateImageWizard extends Component {
 function mapDispatchToProps(dispatch) {
     return {
         updateCompose: (compose) => dispatch(actions.updateCompose(compose)),
+        addNotification: (not) => dispatch(addNotification(not)),
     };
 }
 
 CreateImageWizard.propTypes = {
     updateCompose: PropTypes.func,
+    addNotification: PropTypes.func,
     history: PropTypes.object,
 };
 

src/store/index.js

@@ -1,5 +1,6 @@
 import ReducerRegistry from '@redhat-cloud-services/frontend-components-utilities/files/ReducerRegistry';
 import promiseMiddleware from 'redux-promise-middleware';
+import { notificationsReducer } from '@redhat-cloud-services/frontend-components-notifications/redux';
 
 import { composeReducer } from '../SmartComponents/redux/reducers';
 
@@ -17,6 +18,7 @@ export function init (...middleware) {
 
     registry.register({
         composes: composeReducer,
+        notifications: notificationsReducer,
     });
 
     return registry;