From ef0f5e4a8df54edef79da82651e1d72734fdff4f Mon Sep 17 00:00:00 2001
From: Sanne Raymaekers <sanne.raymaekers@gmail.com>
Date: Thu, 4 Mar 2021 13:01:20 +0100
Subject: [PATCH] CreateImageWizard: Move footer to custom component

Adds an error message in some error cases.
---
 .../CreateImageWizard/ImageWizardFooter.js    | 51 +++++++++++++++++++
 .../CreateImageWizard/ImageWizardFooter.scss  |  4 ++
 .../CreateImageWizard/CreateImageWizard.js    | 18 ++++++-
 3 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/PresentationalComponents/CreateImageWizard/ImageWizardFooter.js
 create mode 100644 src/PresentationalComponents/CreateImageWizard/ImageWizardFooter.scss

diff --git a/src/PresentationalComponents/CreateImageWizard/ImageWizardFooter.js b/src/PresentationalComponents/CreateImageWizard/ImageWizardFooter.js
new file mode 100644
index 00000000..211bcf60
--- /dev/null
+++ b/src/PresentationalComponents/CreateImageWizard/ImageWizardFooter.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, ButtonVariant, Text, TextContent, WizardContextConsumer, WizardFooter } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+
+import './ImageWizardFooter.scss';
+
+const ImageWizardFooter = (props) => {
+    return (
+        <>
+            <WizardFooter>
+                <WizardContextConsumer>
+                    {({ activeStep, onNext, onBack, onClose }) => {
+                        let nextButtonText = 'Next';
+                        if (activeStep.name === 'Review') {
+                            nextButtonText = props.disable ? 'Creating...' : 'Create';
+                        }
+
+                        return (
+                            <>
+                                <Button aria-label={ activeStep.name === 'Review' ? 'Create' : 'Next' } variant={ ButtonVariant.primary }
+                                    onClick={ onNext } isDisabled={ props.disable }>
+                                    { nextButtonText }
+                                </Button>
+                                <Button aria-label="Back" variant={ ButtonVariant.secondary }
+                                    onClick={ onBack } isDisabled={ props.disable || activeStep.name === 'Image output' }>
+                                Back
+                                </Button>
+                                <Button aria-label="Cancel" variant={ ButtonVariant.link }
+                                    onClick={ onClose } isDisabled={ props.disable }>
+                                Cancel
+                                </Button>
+                            </>);}}
+                </WizardContextConsumer>
+                { props.error && (
+                    <TextContent className="footer-error">
+                        <Text><ExclamationCircleIcon /> <strong>{props.error}</strong></Text>
+                    </TextContent>
+                )}
+            </WizardFooter>
+        </>
+    );
+};
+
+ImageWizardFooter.propTypes = {
+    disable: PropTypes.bool,
+    error: PropTypes.string,
+};
+
+export default ImageWizardFooter;
diff --git a/src/PresentationalComponents/CreateImageWizard/ImageWizardFooter.scss b/src/PresentationalComponents/CreateImageWizard/ImageWizardFooter.scss
new file mode 100644
index 00000000..dcf20e1a
--- /dev/null
+++ b/src/PresentationalComponents/CreateImageWizard/ImageWizardFooter.scss
@@ -0,0 +1,4 @@
+.footer-error {
+    flex-basis: 100%;
+    color: var(--pf-global--palette--red-100);
+}
diff --git a/src/SmartComponents/CreateImageWizard/CreateImageWizard.js b/src/SmartComponents/CreateImageWizard/CreateImageWizard.js
index e5e7da1d..28365acf 100644
--- a/src/SmartComponents/CreateImageWizard/CreateImageWizard.js
+++ b/src/SmartComponents/CreateImageWizard/CreateImageWizard.js
@@ -13,6 +13,7 @@ import WizardStepPackages from '../../PresentationalComponents/CreateImageWizard
 import WizardStepUploadGoogle from '../../PresentationalComponents/CreateImageWizard/WizardStepUploadGoogle';
 import WizardStepRegistration from '../../PresentationalComponents/CreateImageWizard/WizardStepRegistration';
 import WizardStepReview from '../../PresentationalComponents/CreateImageWizard/WizardStepReview';
+import ImageWizardFooter from '../../PresentationalComponents/CreateImageWizard/ImageWizardFooter';
 
 import api from './../../api.js';
 import './CreateImageWizard.scss';
@@ -87,6 +88,8 @@ class CreateImageWizard extends Component {
             packagesFilteredComponents: [],
             packagesSelectedNames: [],
             packagesSearchName: '',
+            onSaveInProgress: false,
+            onSaveError: null,
         };
     }
 
@@ -284,6 +287,10 @@ class CreateImageWizard extends Component {
     }
 
     onSave () {
+        this.setState({
+            onSaveInProgress: true,
+        });
+
         let requests = [];
         if (this.state.uploadDestinations.aws) {
             let request = {
@@ -380,7 +387,15 @@ class CreateImageWizard extends Component {
             });
             composeRequests.push(composeRequest);
         });
-        Promise.all(composeRequests).then(() => this.props.history.push('/landing'));
+
+        Promise.all(composeRequests)
+            .then(() => this.props.history.push('/landing'))
+            .catch(err => {
+                this.setState({ onSaveInProgress: false });
+                if (err.response.status === 500) {
+                    this.setState({ onSaveError: 'Error: Something went wrong serverside' });
+                }
+            });
     }
 
     onClose () {
@@ -484,6 +499,7 @@ class CreateImageWizard extends Component {
                     steps={ steps }
                     onClose={ this.onClose }
                     onSave={ this.onSave }
+                    footer={ <ImageWizardFooter disable={ this.state.onSaveInProgress } error={ this.state.onSaveError } /> }
                     isOpen />
             </React.Fragment>
         );