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