CreateImageWizard: custom buttons for each step

This adds custom buttons for each step, where each button has an id
taking the format `$step-(next|previous|cancel)-button`.

src/Components/CreateImageWizard/formComponents/CustomButtons.js

@@ -4,14 +4,36 @@ import { FormSpy } from '@data-driven-forms/react-form-renderer';
 import WizardContext from '@data-driven-forms/react-form-renderer/wizard-context';
 import PropTypes from 'prop-types';
 
-const CustomButtons = ({ buttonLabels: { cancel, submit, back } }) => {
+const CustomButtons = ({
+  buttonLabels: { cancel, next, submit, back },
+  handleNext,
+  handlePrev,
+  nextStep,
+}) => {
   const [isSaving, setIsSaving] = useState(false);
-  const { handlePrev, formOptions } = useContext(WizardContext);
+  const { currentStep, formOptions } = useContext(WizardContext);
+
+  const onNextOrSubmit = () => {
+    if (currentStep.id === 'wizard-review') {
+      formOptions.onSubmit({
+        values: formOptions.getState().values,
+        setIsSaving,
+      });
+    } else {
+      if (typeof nextStep === 'function') {
+        handleNext(nextStep({ values: formOptions.getState().values }));
+      } else {
+        handleNext(nextStep);
+      }
+    }
+  };
+
   return (
     <FormSpy>
       {() => (
         <React.Fragment>
           <Button
+            id={`${currentStep.id}-next-button`}
             variant="primary"
             type="button"
             isDisabled={
@@ -19,17 +41,17 @@ const CustomButtons = ({ buttonLabels: { cancel, submit, back } }) => {
               formOptions.getState().validating ||
               isSaving
             }
-            isLoading={isSaving}
-            onClick={() => {
-              formOptions.onSubmit({
-                values: formOptions.getState().values,
-                setIsSaving,
-              });
-            }}
+            isLoading={currentStep.id === 'wizard-review' ? isSaving : null}
+            onClick={onNextOrSubmit}
           >
-            {isSaving ? 'Creating image' : submit}
+            {currentStep.id === 'wizard-review'
+              ? isSaving
+                ? 'Creating image'
+                : submit
+              : next}
           </Button>
           <Button
+            id={`${currentStep.id}-previous-button`}
             type="button"
             variant="secondary"
             onClick={handlePrev}
@@ -39,6 +61,7 @@ const CustomButtons = ({ buttonLabels: { cancel, submit, back } }) => {
           </Button>
           <div className="pf-c-wizard__footer-cancel">
             <Button
+              id={`${currentStep.id}-cancel-button`}
               type="button"
               variant="link"
               onClick={formOptions.onCancel}
@@ -58,7 +81,11 @@ CustomButtons.propTypes = {
     cancel: PropTypes.node,
     submit: PropTypes.node,
     back: PropTypes.node,
+    next: PropTypes.node,
   }),
+  handleNext: PropTypes.func,
+  handlePrev: PropTypes.func,
+  nextStep: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   isSaving: PropTypes.bool,
 };
 

src/Components/CreateImageWizard/formComponents/FileSystemConfigButtons.js

@@ -4,8 +4,9 @@ import { Button } from '@patternfly/react-core';
 import WizardContext from '@data-driven-forms/react-form-renderer/wizard-context';
 import PropTypes from 'prop-types';
 
-const FileSystemConfigButtons = ({ nextStep }) => {
-  const { handleNext, handlePrev, formOptions } = useContext(WizardContext);
+// FileSystemconfigButtons are defined separately to display errors inside of the button footer
+const FileSystemConfigButtons = ({ handleNext, handlePrev, nextStep }) => {
+  const { currentStep, formOptions } = useContext(WizardContext);
   const { change, getState } = useFormApi();
   const [hasErrors, setHasErrors] = useState(
     getState()?.errors?.['file-system-configuration'] ? true : false
@@ -24,7 +25,7 @@ const FileSystemConfigButtons = ({ nextStep }) => {
 
   const handleClick = () => {
     if (!hasErrors) {
-      return handleNext(nextStep);
+      handleNext(nextStep);
     }
 
     setNextHasBeenClicked(true);
@@ -34,17 +35,29 @@ const FileSystemConfigButtons = ({ nextStep }) => {
   return (
     <>
       <Button
+        id={`${currentStep.id}-next-button`}
         variant="primary"
+        type="button"
         isDisabled={hasErrors && nextHasBeenClicked}
         onClick={handleClick}
       >
         Next
       </Button>
-      <Button variant="secondary" onClick={handlePrev}>
+      <Button
+        id={`${currentStep.id}-previous-button`}
+        variant="secondary"
+        type="button"
+        onClick={handlePrev}
+      >
         Back
       </Button>
       <div className="pf-c-wizard__footer-cancel">
-        <Button type="button" variant="link" onClick={formOptions.onCancel}>
+        <Button
+          id={`${currentStep.id}-cancel-button`}
+          type="button"
+          variant="link"
+          onClick={formOptions.onCancel}
+        >
           Cancel
         </Button>
       </div>
@@ -53,6 +66,8 @@ const FileSystemConfigButtons = ({ nextStep }) => {
 };
 
 FileSystemConfigButtons.propTypes = {
+  handleNext: PropTypes.func,
+  handlePrev: PropTypes.func,
   nextStep: PropTypes.string,
 };
 

src/Components/CreateImageWizard/steps/aws.js

@@ -5,6 +5,7 @@ import { HelperText, HelperTextItem, Title } from '@patternfly/react-core';
 import nextStepMapper from './imageOutputStepMapper';
 import StepTemplate from './stepTemplate';
 import { DEFAULT_AWS_REGION } from '../../../constants';
+import CustomButtons from '../formComponents/CustomButtons';
 
 export default {
   StepTemplate,
@@ -18,6 +19,7 @@ export default {
   name: 'aws-target-env',
   substepOf: 'Target environment',
   nextStep: ({ values }) => nextStepMapper(values, { skipAws: true }),
+  buttons: CustomButtons,
   fields: [
     {
       component: componentTypes.PLAIN_TEXT,

src/Components/CreateImageWizard/steps/googleCloud.js

@@ -14,6 +14,7 @@ import {
 import PropTypes from 'prop-types';
 import nextStepMapper from './imageOutputStepMapper';
 import StepTemplate from './stepTemplate';
+import CustomButtons from '../formComponents/CustomButtons';
 
 export const googleAccType = {
   googleAccount: 'Google account',
@@ -91,6 +92,7 @@ export default {
   substepOf: 'Target environment',
   nextStep: ({ values }) =>
     nextStepMapper(values, { skipGoogle: true, skipAws: true }),
+  buttons: CustomButtons,
   fields: [
     {
       component: componentTypes.PLAIN_TEXT,

src/Components/CreateImageWizard/steps/imageName.js

@@ -2,6 +2,7 @@ import React from 'react';
 import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
 import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
 import StepTemplate from './stepTemplate';
+import CustomButtons from '../formComponents/CustomButtons';
 
 export default {
   StepTemplate,
@@ -9,6 +10,7 @@ export default {
   name: 'image-name',
   title: 'Name image',
   nextStep: 'review',
+  buttons: CustomButtons,
   fields: [
     {
       component: componentTypes.PLAIN_TEXT,

src/Components/CreateImageWizard/steps/imageOutput.js

@@ -6,6 +6,7 @@ import nextStepMapper from './imageOutputStepMapper';
 import StepTemplate from './stepTemplate';
 import { RHEL_9 } from '../../../constants.js';
 import DocumentationButton from '../../sharedComponents/DocumentationButton';
+import CustomButtons from '../formComponents/CustomButtons';
 
 export default {
   StepTemplate,
@@ -13,6 +14,7 @@ export default {
   title: 'Image output',
   name: 'image-output',
   nextStep: ({ values }) => nextStepMapper(values),
+  buttons: CustomButtons,
   fields: [
     {
       component: componentTypes.PLAIN_TEXT,

src/Components/CreateImageWizard/steps/msAzure.js

@@ -5,6 +5,7 @@ import { Button, Text, TextContent, Title } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import nextStepMapper from './imageOutputStepMapper';
 import StepTemplate from './stepTemplate';
+import CustomButtons from '../formComponents/CustomButtons';
 
 export default {
   StepTemplate,
@@ -23,6 +24,7 @@ export default {
       skipGoogle: true,
       skipAzure: true,
     }),
+  buttons: CustomButtons,
   fields: [
     {
       component: componentTypes.PLAIN_TEXT,

src/Components/CreateImageWizard/steps/packages.js

@@ -2,6 +2,7 @@ import React from 'react';
 import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
 import { Text } from '@patternfly/react-core';
 import StepTemplate from './stepTemplate';
+import CustomButtons from '../formComponents/CustomButtons';
 
 export default {
   StepTemplate,
@@ -10,6 +11,7 @@ export default {
   name: 'packages',
   substepOf: 'System configuration',
   nextStep: 'image-name',
+  buttons: CustomButtons,
   fields: [
     {
       component: componentTypes.PLAIN_TEXT,

src/Components/CreateImageWizard/steps/registration.js

@@ -10,6 +10,7 @@ import {
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
 import StepTemplate from './stepTemplate';
+import CustomButtons from '../formComponents/CustomButtons';
 
 const PopoverActivation = () => {
   return (
@@ -43,6 +44,7 @@ export default {
   title: 'Registration',
   name: 'registration',
   nextStep: 'File system configuration',
+  buttons: CustomButtons,
   fields: [
     {
       component: componentTypes.RADIO,

src/Components/CreateImageWizard/steps/review.js

@@ -1,5 +1,5 @@
 import StepTemplate from './stepTemplate';
-import CustomButtons from '../formComponents/CustomSubmitButtons';
+import CustomButtons from '../formComponents/CustomButtons';
 
 export default {
   StepTemplate,