kubevirt: VMWizard - implement footer and the wizard flow

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/create-vm-wizard-footer.scss

@@ -0,0 +1,5 @@
+.kubevirt-create-vm-modal__footer-error {
+  width: 100%;
+  margin-bottom: 1em;
+  align-items: center;
+}

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/create-vm-wizard-footer.tsx

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import {
+  Alert,
+  Button,
+  ButtonVariant,
+  WizardContextConsumer,
+  WizardStep,
+} from '@patternfly/react-core';
+import * as _ from 'lodash';
+import { ALL_VM_WIZARD_TABS, VMWizardTab } from './types';
+import {
+  hasStepAllRequiredFilled,
+  isStepLocked,
+  isStepValid,
+} from './selectors/immutable/wizard-selectors';
+import { iGetCreateVMWizardTabs } from './selectors/immutable/selectors';
+import { REVIEW_AND_CREATE } from './strings/strings';
+
+import './create-vm-wizard-footer.scss';
+
+type WizardContext = {
+  onNext: () => void;
+  onBack: () => void;
+  onClose: () => void;
+  activeStep: WizardStep;
+  goToStepById: (id: number | string) => void;
+};
+type CreateVMWizardFooterComponentProps = {
+  stepData: any;
+  createVMText: string;
+};
+
+const CreateVMWizardFooterComponent: React.FC<CreateVMWizardFooterComponentProps> = ({
+  stepData,
+  createVMText,
+}) => {
+  const [showError, setShowError] = React.useState(false);
+  const [prevIsValid, setPrevIsValid] = React.useState(false);
+
+  return (
+    <WizardContextConsumer>
+      {({ onNext, onBack, onClose, activeStep, goToStepById }: WizardContext) => {
+        const activeStepID = activeStep.id as VMWizardTab;
+        const isLocked = _.some(ALL_VM_WIZARD_TABS, (id) => isStepLocked(stepData, id));
+        const isValid = isStepValid(stepData, activeStepID);
+
+        if (isValid !== prevIsValid) {
+          setPrevIsValid(isValid);
+          if (isValid) {
+            setShowError(false);
+          }
+        }
+
+        const isFirstStep = activeStepID === VMWizardTab.VM_SETTINGS;
+        const isFinishingStep = [VMWizardTab.REVIEW, VMWizardTab.RESULT].includes(activeStepID);
+        const isLastStep = activeStepID === VMWizardTab.RESULT;
+
+        const isNextButtonDisabled = isLocked;
+        const isBackButtonDisabled = isFirstStep || isLocked;
+
+        return (
+          <footer className={css(styles.wizardFooter)}>
+            {!isValid && showError && (
+              <Alert
+                title={
+                  hasStepAllRequiredFilled(stepData, activeStepID)
+                    ? 'Please correct the invalid fields.'
+                    : 'Please fill in all required fields.'
+                }
+                isInline
+                variant="danger"
+                className="kubevirt-create-vm-modal__footer-error"
+              />
+            )}
+            {!isLastStep && (
+              <Button
+                variant={ButtonVariant.primary}
+                type="submit"
+                onClick={() => {
+                  setShowError(!isValid);
+                  if (isValid) {
+                    onNext();
+                  }
+                }}
+                isDisabled={isNextButtonDisabled}
+              >
+                {activeStepID === VMWizardTab.REVIEW ? createVMText : 'Next'}
+              </Button>
+            )}
+            {!isFinishingStep && (
+              <Button
+                variant={ButtonVariant.secondary}
+                onClick={() => {
+                  const jumpToStepID =
+                    (isValid &&
+                      !isLocked &&
+                      ALL_VM_WIZARD_TABS.find(
+                        (stepID) => !isStepValid(stepData, stepID) || stepID === VMWizardTab.REVIEW,
+                      )) ||
+                    activeStepID;
+
+                  setShowError(jumpToStepID !== VMWizardTab.REVIEW);
+                  if (jumpToStepID !== activeStepID) {
+                    goToStepById(jumpToStepID);
+                  }
+                }}
+              >
+                {REVIEW_AND_CREATE}
+              </Button>
+            )}
+            {!activeStep.hideBackButton && !isLastStep && (
+              <Button
+                variant={ButtonVariant.secondary}
+                onClick={onBack}
+                className={css(isBackButtonDisabled && 'pf-m-disabled')}
+                isDisabled={isBackButtonDisabled}
+              >
+                Back
+              </Button>
+            )}
+            {!activeStep.hideCancelButton && (
+              <Button variant={ButtonVariant.link} onClick={onClose}>
+                Cancel
+              </Button>
+            )}
+          </footer>
+        );
+      }}
+    </WizardContextConsumer>
+  );
+};
+
+const stateToProps = (state, { wizardReduxId }) => ({
+  stepData: iGetCreateVMWizardTabs(state, wizardReduxId),
+});
+
+export const CreateVMWizardFooter = connect(stateToProps)(CreateVMWizardFooterComponent);

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/create-vm-wizard.tsx

@@ -45,18 +45,14 @@ import {
   VMWizardProps,
   VMWizardTab,
 } from './types';
-import {
-  CREATE_VM,
-  CREATE_VM_TEMPLATE,
-  REVIEW_AND_CREATE,
-  TabTitleResolver,
-} from './strings/strings';
+import { CREATE_VM, CREATE_VM_TEMPLATE, TabTitleResolver } from './strings/strings';
 import { vmWizardActions } from './redux/actions';
 import { ActionType } from './redux/types';
 import { iGetCommonData, iGetCreateVMWizardTabs } from './selectors/immutable/selectors';
 import { isStepLocked, isStepValid } from './selectors/immutable/wizard-selectors';
 import { VMSettingsTab } from './tabs/vm-settings-tab/vm-settings-tab';
 import { ResourceLoadErrors } from './resource-load-errors';
+import { CreateVMWizardFooter } from './create-vm-wizard-footer';
 
 import './create-vm-wizard.scss';
 
@@ -93,6 +89,7 @@ export class CreateVMWizardComponent extends React.Component<CreateVMWizardCompo
   };
 
   finish() {
+    this.props.lockTab(VMWizardTab.RESULT);
     const create = this.props.isCreateTemplate ? createVmTemplate : createVm;
 
     const enhancedK8sMethods = new EnhancedK8sMethods();
@@ -128,13 +125,15 @@ export class CreateVMWizardComponent extends React.Component<CreateVMWizardCompo
     )
       .then(() => getResults(enhancedK8sMethods))
       .catch((error) => cleanupAndGetResults(enhancedK8sMethods, error))
-      .then(({ results, valid }) => this.props.onResultsChanged(errorsFirstSort(results), valid)) // TODO should distinguish between errors and objects in redux
+      .then(({ results, isValid }) =>
+        this.props.onResultsChanged(errorsFirstSort(results), isValid),
+      ) // TODO should distinguish between errors and objects in redux
       .catch((e) => console.error(e)); // eslint-disable-line no-console
   }
 
   render() {
-    const { isCreateTemplate, stepData } = this.props;
-    const createVmText = isCreateTemplate ? CREATE_VM_TEMPLATE : CREATE_VM;
+    const { isCreateTemplate, reduxID, stepData } = this.props;
+    const createVMText = isCreateTemplate ? CREATE_VM_TEMPLATE : CREATE_VM;
 
     if (this.isClosed) {
       return null;
@@ -145,11 +144,10 @@ export class CreateVMWizardComponent extends React.Component<CreateVMWizardCompo
         id: VMWizardTab.VM_SETTINGS,
         component: (
           <>
-            <ResourceLoadErrors wizardReduxID={this.props.reduxID} />
-            <VMSettingsTab wizardReduxID={this.props.reduxID} />
+            <ResourceLoadErrors wizardReduxID={reduxID} />
+            <VMSettingsTab wizardReduxID={reduxID} />
           </>
         ),
-        nextButtonText: REVIEW_AND_CREATE,
       },
       // {
       //   id: VMWizardTab.NETWORKS,
@@ -159,7 +157,6 @@ export class CreateVMWizardComponent extends React.Component<CreateVMWizardCompo
       // },
       {
         id: VMWizardTab.REVIEW,
-        nextButtonText: createVmText,
         component: <>VM review</>,
       },
       {
@@ -179,31 +176,38 @@ export class CreateVMWizardComponent extends React.Component<CreateVMWizardCompo
       <div className="kubevirt-create-vm-modal__container">
         {!isStepValid(stepData, VMWizardTab.RESULT) && (
           <div className="yaml-editor__header">
-            <h1 className="yaml-editor__header-text">{createVmText}</h1>
+            <h1 className="yaml-editor__header-text">{createVMText}</h1>
           </div>
         )}
         <Wizard
           isInPage
           className="kubevirt-create-vm-modal__wizard-content"
-          title={createVmText}
+          title={createVMText}
           onClose={this.onClose}
           onNext={({ id }) => {
             if (id === VMWizardTab.RESULT) {
               this.finish();
             }
           }}
-          steps={steps.map((step, idx) => {
-            const valid = isStepValid(stepData, step.id);
-            const prevStepValid = idx === 0 ? true : isStepValid(stepData, steps[idx - 1].id);
-            return {
+          steps={steps.reduce((stepAcc, step, idx) => {
+            const prevStep = stepAcc[idx - 1];
+            const isPrevStepValid = idx === 0 ? true : isStepValid(stepData, prevStep.id);
+            const canJumpToPrevStep = idx === 0 ? true : prevStep.canJumpTo;
+
+            stepAcc.push({
               ...step,
               name: TabTitleResolver[step.id],
-              enableNext: !isLocked && valid,
-              canJumpTo: !isLocked && prevStepValid && step.id !== VMWizardTab.RESULT,
-              hideBackButton: isLocked,
+              canJumpTo: isStepLocked(stepData, VMWizardTab.RESULT) // request finished
+                ? step.id === VMWizardTab.RESULT
+                : !isLocked &&
+                  isPrevStepValid &&
+                  canJumpToPrevStep &&
+                  step.id !== VMWizardTab.RESULT,
               component: step.component,
-            };
-          })}
+            });
+            return stepAcc;
+          }, [])}
+          footer={<CreateVMWizardFooter createVMText={createVMText} wizardReduxId={reduxID} />}
         />
       </div>
     );
@@ -230,6 +234,9 @@ const wizardDispatchToProps = (dispatch, props) => ({
       }),
     );
   },
+  lockTab: (tabID) => {
+    dispatch(vmWizardActions[ActionType.SetTabLocked](props.reduxId, tabID, true));
+  },
   onCommonDataChanged: (commonData: CommonData, changedCommonData: ChangedCommonData) => {
     dispatch(
       vmWizardActions[ActionType.UpdateCommonData](props.reduxID, commonData, changedCommonData),

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/redux/actions.ts

@@ -73,13 +73,16 @@ export const vmWizardActions: VMWizardActions = {
 
     updateAndValidateState({ id, dispatch, changedCommonData: changedProps, getState, prevState });
   },
-  [ActionType.SetNetworks]: (id, value: any, valid: boolean, locked: boolean) => (dispatch) => {
-    dispatch(vmWizardInternalActions[InternalActionType.SetNetworks](id, value, valid, locked));
+  [ActionType.SetTabLocked]: (id, value: any, isLocked: boolean) => (dispatch) => {
+    dispatch(vmWizardInternalActions[InternalActionType.SetTabLocked](id, value, isLocked));
   },
-  [ActionType.SetStorages]: (id, value: any, valid: boolean, locked: boolean) => (dispatch) => {
-    dispatch(vmWizardInternalActions[InternalActionType.SetStorages](id, value, valid, locked));
+  [ActionType.SetNetworks]: (id, value: any, isValid: boolean, isLocked: boolean) => (dispatch) => {
+    dispatch(vmWizardInternalActions[InternalActionType.SetNetworks](id, value, isValid, isLocked));
   },
-  [ActionType.SetResults]: (id, value: any, valid: boolean) => (dispatch) => {
-    dispatch(vmWizardInternalActions[InternalActionType.SetResults](id, value, valid));
+  [ActionType.SetStorages]: (id, value: any, isValid: boolean, isLocked: boolean) => (dispatch) => {
+    dispatch(vmWizardInternalActions[InternalActionType.SetStorages](id, value, isValid, isLocked));
+  },
+  [ActionType.SetResults]: (id, value: any, isValid: boolean) => (dispatch) => {
+    dispatch(vmWizardInternalActions[InternalActionType.SetResults](id, value, isValid));
   },
 };

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/redux/initial-state/initial-state.ts

@@ -21,5 +21,5 @@ export const getTabInitialState = (tabKey: VMWizardTab, props: CommonData) => {
     result = getter(props);
   }
 
-  return result || { value: {}, valid: false };
+  return result || { value: {}, isValid: false, isLocked: false, hasAllRequiredFilled: false };
 };

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/redux/initial-state/networks-tab-initial-state.ts

@@ -14,5 +14,6 @@ export const podNetwork = {
 
 export const getNetworksInitialState = () => ({
   value: [podNetwork],
-  valid: true,
+  isValid: true,
+  hasAllRequiredFilled: true,
 });

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/redux/initial-state/result-tab-initial-state.ts

@@ -1,4 +1,4 @@
 export const getResultInitialState = () => ({
   value: {},
-  valid: null, // result of the request
+  isValid: null, // result of the request
 });

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/redux/initial-state/review-tab-initial-state.ts

@@ -1,4 +1,5 @@
 export const getReviewInitialState = () => ({
   value: {},
-  valid: true,
+  isValid: true,
+  hasAllRequiredFilled: true,
 });

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/redux/initial-state/storage-tab-initial-state.ts

@@ -29,5 +29,6 @@ export const getInitialDisk = (provisionSource: ProvisionSource) => {
 
 export const getStorageInitialState = () => ({
   value: [],
-  valid: true, // empty Storages are valid
+  isValid: true, // empty Storages are valid
+  hasAllRequiredFilled: true,
 });

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/redux/initial-state/vm-settings-tab-initial-state.ts

@@ -59,5 +59,5 @@ export const getInitialVmSettings = (common: CommonData) => {
 
 export const getVmSettingsInitialState = (props) => ({
   value: getInitialVmSettings(props),
-  valid: false,
+  isValid: false,
 });