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 (
+ <>
+
+
+ {({ activeStep, onNext, onBack, onClose }) => {
+ let nextButtonText = 'Next';
+ if (activeStep.name === 'Review') {
+ nextButtonText = props.disable ? 'Creating...' : 'Create';
+ }
+
+ return (
+ <>
+
+
+
+ >);}}
+
+ { props.error && (
+
+ {props.error}
+
+ )}
+
+ >
+ );
+};
+
+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={ }
isOpen />
);