From f268441d41d598fa229038fbbc0e8973e5d003f2 Mon Sep 17 00:00:00 2001
From: Jacob Kozol <jacobdkozol@gmail.com>
Date: Tue, 2 Mar 2021 18:25:41 +0100
Subject: [PATCH] CreateImageWizard: validate upload destination

The user should not be able to continue without selecting an upload
destination. The uploadDestination fields are now checked to see if one
is selected before enabling the Next button in the footer. Also, the
onSaveInProgress variable is changed to isSaveInProgress to conform with
the other validation variables.
---
 .../CreateImageWizard/ImageWizardFooter.js    | 21 +++++++++++++------
 .../CreateImageWizard/CreateImageWizard.js    | 16 ++++++++++----
 .../CreateImageWizard.test.js                 |  4 ++++
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/PresentationalComponents/CreateImageWizard/ImageWizardFooter.js b/src/PresentationalComponents/CreateImageWizard/ImageWizardFooter.js
index 211bcf60..2923bd0e 100644
--- a/src/PresentationalComponents/CreateImageWizard/ImageWizardFooter.js
+++ b/src/PresentationalComponents/CreateImageWizard/ImageWizardFooter.js
@@ -14,24 +14,32 @@ const ImageWizardFooter = (props) => {
                     {({ activeStep, onNext, onBack, onClose }) => {
                         let nextButtonText = 'Next';
                         if (activeStep.name === 'Review') {
-                            nextButtonText = props.disable ? 'Creating...' : 'Create';
+                            nextButtonText = props.isSaveInProgress ? 'Creating...' : 'Create';
+                        }
+
+                        let nextButtonIsDisabled = props.isSaveInProgress;
+
+                        if ((activeStep.name === 'Image output' || activeStep.name === 'Review') && !props.isValidUploadDestination) {
+                            nextButtonIsDisabled = true;
                         }
 
                         return (
                             <>
                                 <Button aria-label={ activeStep.name === 'Review' ? 'Create' : 'Next' } variant={ ButtonVariant.primary }
-                                    onClick={ onNext } isDisabled={ props.disable }>
+                                    onClick={ onNext } isDisabled={ nextButtonIsDisabled }>
                                     { nextButtonText }
                                 </Button>
                                 <Button aria-label="Back" variant={ ButtonVariant.secondary }
-                                    onClick={ onBack } isDisabled={ props.disable || activeStep.name === 'Image output' }>
+                                    onClick={ onBack } isDisabled={ props.isSaveInProgress || activeStep.name === 'Image output' }>
                                 Back
                                 </Button>
                                 <Button aria-label="Cancel" variant={ ButtonVariant.link }
-                                    onClick={ onClose } isDisabled={ props.disable }>
+                                    onClick={ onClose } isDisabled={ props.isSaveInProgress }>
                                 Cancel
                                 </Button>
-                            </>);}}
+                            </>
+                        );
+                    }}
                 </WizardContextConsumer>
                 { props.error && (
                     <TextContent className="footer-error">
@@ -44,7 +52,8 @@ const ImageWizardFooter = (props) => {
 };
 
 ImageWizardFooter.propTypes = {
-    disable: PropTypes.bool,
+    isValidUploadDestination: PropTypes.bool,
+    isSaveInProgress: PropTypes.bool,
     error: PropTypes.string,
 };
 
diff --git a/src/SmartComponents/CreateImageWizard/CreateImageWizard.js b/src/SmartComponents/CreateImageWizard/CreateImageWizard.js
index ac7d7839..2fa620f7 100644
--- a/src/SmartComponents/CreateImageWizard/CreateImageWizard.js
+++ b/src/SmartComponents/CreateImageWizard/CreateImageWizard.js
@@ -89,7 +89,7 @@ class CreateImageWizard extends Component {
             packagesFilteredComponents: [],
             packagesSelectedNames: [],
             packagesSearchName: '',
-            onSaveInProgress: false,
+            isSaveInProgress: false,
             onSaveError: null,
         };
     }
@@ -289,7 +289,7 @@ class CreateImageWizard extends Component {
 
     onSave() {
         this.setState({
-            onSaveInProgress: true,
+            isSaveInProgress: true,
         });
 
         let requests = [];
@@ -398,7 +398,7 @@ class CreateImageWizard extends Component {
                 this.props.history.push('/landing');
             })
             .catch(err => {
-                this.setState({ onSaveInProgress: false });
+                this.setState({ isSaveInProgress: false });
                 if (err.response.status === 500) {
                     this.setState({ onSaveError: 'Error: Something went wrong serverside' });
                 }
@@ -410,6 +410,10 @@ class CreateImageWizard extends Component {
     }
 
     render() {
+        const isValidUploadDestination = this.state.uploadDestinations.aws ||
+            this.state.uploadDestinations.azure ||
+            this.state.uploadDestinations.google;
+
         const StepImageOutput = {
             name: 'Image output',
             component: <WizardStepImageOutput
@@ -497,6 +501,7 @@ class CreateImageWizard extends Component {
                 nextButtonText: 'Create',
             }
         ];
+
         return (
             <React.Fragment>
                 <Wizard
@@ -506,7 +511,10 @@ class CreateImageWizard extends Component {
                     steps={ steps }
                     onClose={ this.onClose }
                     onSave={ this.onSave }
-                    footer={ <ImageWizardFooter disable={ this.state.onSaveInProgress } error={ this.state.onSaveError } /> }
+                    footer={ <ImageWizardFooter
+                        isValidUploadDestination={ isValidUploadDestination }
+                        isSaveInProgress={ this.state.isSaveInProgress }
+                        error={ this.state.onSaveError } /> }
                     isOpen />
             </React.Fragment>
         );
diff --git a/src/test/SmartComponents/CreateImageWizard/CreateImageWizard.test.js b/src/test/SmartComponents/CreateImageWizard/CreateImageWizard.test.js
index e2c24476..0daf04b4 100644
--- a/src/test/SmartComponents/CreateImageWizard/CreateImageWizard.test.js
+++ b/src/test/SmartComponents/CreateImageWizard/CreateImageWizard.test.js
@@ -355,6 +355,10 @@ describe('Step Packages', () => {
         const { _component, history } = renderWithReduxRouter(<CreateImageWizard />);
         historySpy = jest.spyOn(history, 'push');
 
+        // select aws as upload destination
+        const awsTile = screen.getByTestId('upload-aws');
+        awsTile.click();
+
         // left sidebar navigation
         const sidebar = screen.getByRole('navigation');
         const anchor = getByText(sidebar, 'Packages');