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.

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,
 };
 

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>
         );

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');