Allow disabling back button in Wizard.Pattern. Fixes #527

packages/patternfly-react/src/components/Wizard/Patterns/StatefulWizardPattern.js

@@ -36,13 +36,18 @@ class StatefulWizardPattern extends React.Component {
   };
 
   render() {
-    const { shouldDisableNextStep, ...otherProps } = this.props;
+    const {
+      shouldDisableNextStep,
+      shouldDisablePreviousStep,
+      ...otherProps
+    } = this.props;
     const { activeStepIndex } = this.state;
     // NOTE: the steps array is passed down with ...otherProps, including any shouldPreventEnter or shouldPreventExit functions inside it.
     // These functions are for StatefulWizardPattern only and should not be used in WizardPattern despite being passed down here.
     return (
       <WizardPattern
         nextStepDisabled={shouldDisableNextStep(activeStepIndex)}
+        previousStepDisabled={shouldDisablePreviousStep(activeStepIndex)}
         {...otherProps}
         activeStepIndex={activeStepIndex} // Value from state, as set by getDerivedStateFromProps
         onStepChanged={this.onStepChanged}
@@ -54,7 +59,8 @@ class StatefulWizardPattern extends React.Component {
 StatefulWizardPattern.propTypes = {
   ...excludeKeys(WizardPattern.propTypes, [
     'activeStepIndex',
-    'nextStepDisabled'
+    'nextStepDisabled',
+    'previousStepDisabled'
   ]),
   steps: PropTypes.arrayOf(
     PropTypes.shape({
@@ -64,15 +70,18 @@ StatefulWizardPattern.propTypes = {
     })
   ),
   shouldDisableNextStep: PropTypes.func,
+  shouldDisablePreviousStep: PropTypes.func,
   shouldPreventStepChange: PropTypes.func
 };
 
 StatefulWizardPattern.defaultProps = {
   ...excludeKeys(WizardPattern.defaultProps, [
     'activeStepIndex',
-    'nextStepDisabled'
+    'nextStepDisabled',
+    'previousStepDisabled'
   ]),
   shouldDisableNextStep: noop,
+  shouldDisablePreviousStep: noop,
   shouldPreventStepChange: noop
 };
 

packages/patternfly-react/src/components/Wizard/Patterns/WizardPattern.js

@@ -14,6 +14,7 @@ const WizardPattern = ({
   onNext,
   onBack,
   nextStepDisabled,
+  previousStepDisabled,
   title,
   loadingTitle,
   loadingMessage,
@@ -80,19 +81,20 @@ const WizardPattern = ({
     const preventEnterTarget =
       targetStep.preventEnter ||
       (stepBeforeTarget && stepBeforeTarget.isInvalid);
-    const nextStepClicked = newStepIndex === activeStepIndex + 1;
+    const nextStepClicked = newStepIndex > activeStepIndex;
 
-    return (
-      preventExitActive ||
-      preventEnterTarget ||
-      (nextStepClicked && nextStepDisabled)
-    );
+    return preventExitActive || preventEnterTarget || nextStepClicked
+      ? nextStepDisabled
+      : previousStepDisabled;
   };
 
   const activeStepStr = (activeStepIndex + 1).toString();
 
   const prevStepUnreachable =
-    onFirstStep || activeStep.preventExit || getPrevStep().preventEnter;
+    previousStepDisabled ||
+    onFirstStep ||
+    activeStep.preventExit ||
+    getPrevStep().preventEnter;
   // nextStepUnreachable is still true onFinalStep, because the Next button turns into a Close button
   const nextStepUnreachable =
     nextStepDisabled ||
@@ -168,6 +170,7 @@ WizardPattern.propTypes = {
   closeText: PropTypes.string,
   steps: PropTypes.arrayOf(PropTypes.shape(wizardStepShape)),
   nextStepDisabled: PropTypes.bool,
+  previousStepDisabled: PropTypes.bool,
   stepButtonsDisabled: PropTypes.bool,
   nextButtonRef: PropTypes.func,
   bodyHeader: PropTypes.node,
@@ -191,6 +194,7 @@ WizardPattern.defaultProps = {
   closeText: 'Close',
   steps: [],
   nextStepDisabled: false,
+  previousStepDisabled: false,
   stepButtonsDisabled: false,
   nextButtonRef: noop,
   bodyHeader: null,

packages/patternfly-react/src/components/Wizard/Wizard.test.js

@@ -378,6 +378,7 @@ const testStatefulWizardPattern = props => {
       onExited={onExited}
       title="Wizard Pattern Stateful Example"
       shouldDisableNextStep={() => false}
+      shouldDisablePreviousStep={() => false}
       shouldPreventStepChange={() => false}
       steps={[
         { title: 'General', render: () => <p>General</p> },
@@ -444,6 +445,28 @@ const testDisableNextStepWizard = props => {
   );
 };
 
+const testDisablePreviousStepWizard = props => {
+  const onHide = jest.fn();
+  const onExited = jest.fn();
+  const onStepChanged = jest.fn();
+  return (
+    <Wizard.Pattern.Stateful
+      show
+      onHide={onHide}
+      onExited={onExited}
+      onStepChanged={onStepChanged}
+      title="Wizard Disable Next Step"
+      shouldDisablePreviousStep={() => true}
+      steps={[
+        { title: '1', render: () => <p>1</p> },
+        { title: '2', render: () => <p className=".step2">2</p> },
+        { title: '3', render: () => <p>3</p> }
+      ]}
+      {...props}
+    />
+  );
+};
+
 test('Wizard Stateful with shouldDisableNextStep should disable next step', () => {
   const component = mount(testDisableNextStepWizard());
   expect(
@@ -453,3 +476,18 @@ test('Wizard Stateful with shouldDisableNextStep should disable next step', () =
       .getDOMNode().disabled
   ).toBe(true);
 });
+
+test('Wizard Stateful with shouldDisablePreviousStep should disable previous step', () => {
+  const component = mount(testDisablePreviousStepWizard());
+  component
+    .find('.wizard-pf-footer .btn')
+    .at(2)
+    .simulate('click');
+  expect(component.exists('.step2')).toEqual(true);
+  expect(
+    component
+      .find('.wizard-pf-footer .btn')
+      .at(1)
+      .getDOMNode().disabled
+  ).toBe(true);
+});

packages/patternfly-react/src/components/Wizard/__snapshots__/Wizard.test.js.snap

@@ -109,6 +109,7 @@ exports[`Wizard Stateful Pattern renders properly: Wizard stateful pattern snaps
   onHide={[MockFunction]}
   onNext={[Function]}
   onStepChanged={[Function]}
+  previousStepDisabled={false}
   shouldPreventStepChange={[Function]}
   show={true}
   stepButtonsDisabled={false}