diff --git a/README.md b/README.md index 2902c59fd..9bf33f779 100644 --- a/README.md +++ b/README.md @@ -270,7 +270,7 @@ All packages are linked together by default, so if you run a `yarn build` in a p Each package has a small playground `package/demo`, where you can test your changes. ```bash -cd packages/pf3-component-mapper +cd packages/pf4-component-mapper yarn start ``` diff --git a/packages/common/src/wizard/wizard.tsx b/packages/common/src/wizard/wizard.tsx index 0c7948ee3..9506c94ca 100644 --- a/packages/common/src/wizard/wizard.tsx +++ b/packages/common/src/wizard/wizard.tsx @@ -127,7 +127,7 @@ const WizardComponent: React.FC = ({ selectNext, }} > - + ); }; diff --git a/packages/pf4-component-mapper/src/tests/wizard/step-buttons.test.js b/packages/pf4-component-mapper/src/tests/wizard/step-buttons.test.js index fdb3107eb..b5d3dd106 100644 --- a/packages/pf4-component-mapper/src/tests/wizard/step-buttons.test.js +++ b/packages/pf4-component-mapper/src/tests/wizard/step-buttons.test.js @@ -287,6 +287,40 @@ describe(' { }); }); + it('shows submit button and advances when next step has isProgressAfterSubmissionStep', async () => { + const handleSubmit = jest.fn(); + const handleNext = jest.fn(); + const wizardFields = [ + { name: 'step-review', nextStep: 'step-finished', fields: [] }, + { name: 'step-finished', isProgressAfterSubmissionStep: true, fields: [] }, + ]; + + render( + + ({ values: {}, validating: false }), + }} + handleNext={handleNext} + nextStep="step-finished" + wizardFields={wizardFields} + buttonLabels={{ ...initialProps.buttonLabels, submit: 'Finish' }} + /> + + ); + + expect(screen.getByText('Finish')).toBeInTheDocument(); + expect(screen.queryByText('Next')).not.toBeInTheDocument(); + + await userEvent.click(screen.getByText('Finish')); + + expect(handleSubmit).toHaveBeenCalled(); + expect(handleNext).toHaveBeenCalledWith('step-finished'); + }); + it('conditional submit step', async () => { const submit = jest.fn(); const schema = { diff --git a/packages/pf4-component-mapper/src/wizard/wizard-components/step-buttons.tsx b/packages/pf4-component-mapper/src/wizard/wizard-components/step-buttons.tsx index 03cf9c142..d5df932d7 100644 --- a/packages/pf4-component-mapper/src/wizard/wizard-components/step-buttons.tsx +++ b/packages/pf4-component-mapper/src/wizard/wizard-components/step-buttons.tsx @@ -19,6 +19,7 @@ interface NextButtonProps { handleSubmit: () => void; submitLabel: string; conditionalSubmitFlag?: any; + wizardFields?: Array<{ name: string; isProgressAfterSubmissionStep?: boolean }>; } const NextButton: React.FC = ({ @@ -30,15 +31,32 @@ const NextButton: React.FC = ({ handleSubmit, submitLabel, conditionalSubmitFlag, + wizardFields, }) => { const nextResult = nextStep ? selectNext(nextStep, getState) : nextStep; - const progressNext = nextResult !== conditionalSubmitFlag && nextStep; + const isNextStepProgressAfterSubmission = Boolean( + wizardFields?.find((f) => f.name === nextResult)?.isProgressAfterSubmissionStep + ); + const progressNext = + nextStep && nextResult !== conditionalSubmitFlag && !isNextStepProgressAfterSubmission; + + const onClick = () => { + if (progressNext) { + handleNext(selectNext(nextStep, getState)); + } else { + handleSubmit(); + if (isNextStepProgressAfterSubmission && nextResult) { + handleNext(nextResult); + } + } + }; + return ( @@ -68,6 +86,7 @@ const WizardStepButtons: React.FC = ({ buttonLabels: { cancel, submit, back, next }, formOptions, conditionalSubmitFlag, + wizardFields, }) => (