🔥 [open-formulieren/open-forms#4544] Removed LiteralsProvider from Bu…

…ttonsToolbar Removed literals property from ButtonsToolbar, and moved LiteralsProvider from ButtonsToolbar to SubmitRow
open-formulieren · Oct 9, 2024 · 11ab95f · 11ab95f
1 parent 629df27
commit 11ab95f
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 66 deletions.
diff --git a/src/components/ButtonsToolbar/index.js b/src/components/ButtonsToolbar/index.js
@@ -3,14 +3,13 @@ import React from 'react';
 
 import AbortButton from 'components/AbortButton';
 import {OFButton} from 'components/Button';
-import {Literal, LiteralsProvider} from 'components/Literal';
+import {Literal} from 'components/Literal';
 import Loader from 'components/Loader';
 import PreviousLink from 'components/PreviousLink';
 import {Toolbar, ToolbarList} from 'components/Toolbar';
 import {SUBMISSION_ALLOWED} from 'components/constants';
 
 const ButtonsToolbar = ({
- literals,
  canSubmitStep,
  canSubmitForm,
  canSuspendForm,
@@ -27,56 +26,53 @@ const ButtonsToolbar = ({
 
  return (
  <>
- <LiteralsProvider literals={literals}>
- <Toolbar modifiers={['mobile-reverse-order', 'bottom']}>
+ <Toolbar modifiers={['mobile-reverse-order', 'bottom']}>
+ <ToolbarList>
+ {previousPage && (
+ <PreviousLink to={previousPage} onClick={onNavigatePrevPage} position="end" />
+ )}
+ </ToolbarList>
+ <ToolbarList>
+ {/* TODO: refactor: `const canSuspendForm = onFormSave === undefined` - this does not
+ need to be its own prop */}
+ {canSuspendForm && (
+ <OFButton
+ type="button"
+ appearance="secondary-action-button"
+ name="save"
+ onClick={onFormSave}
+ >
+ <Literal name="saveText" />
+ </OFButton>
+ )}
+ {showSubmitButton && (
+ <OFButton
+ type="submit"
+ appearance="primary-action-button"
+ name="next"
+ disabled={!canSubmitStep}
+ >
+ {isCheckingLogic ? (
+ <Loader modifiers={['centered', 'only-child', 'small', 'gray']} />
+ ) : (
+ <Literal name="nextText" />
+ )}
+ </OFButton>
+ )}
+ </ToolbarList>
+ </Toolbar>
+ {!hideAbortButton && (
+ <Toolbar modifiers={['bottom', 'reverse']}>
  <ToolbarList>
- {previousPage && (
- <PreviousLink to={previousPage} onClick={onNavigatePrevPage} position="end" />
- )}
- </ToolbarList>
- <ToolbarList>
- {/* TODO: refactor: `const canSuspendForm = onFormSave === undefined` - this does not
- need to be its own prop */}
- {canSuspendForm && (
- <OFButton
- type="button"
- appearance="secondary-action-button"
- name="save"
- onClick={onFormSave}
- >
- <Literal name="saveText" />
- </OFButton>
- )}
- {showSubmitButton && (
- <OFButton
- type="submit"
- appearance="primary-action-button"
- name="next"
- disabled={!canSubmitStep}
- >
- {isCheckingLogic ? (
- <Loader modifiers={['centered', 'only-child', 'small', 'gray']} />
- ) : (
- <Literal name="nextText" />
- )}
- </OFButton>
- )}
+ <AbortButton isAuthenticated={isAuthenticated} onDestroySession={onDestroySession} />
  </ToolbarList>
  </Toolbar>
- {!hideAbortButton && (
- <Toolbar modifiers={['bottom', 'reverse']}>
- <ToolbarList>
- <AbortButton isAuthenticated={isAuthenticated} onDestroySession={onDestroySession} />
- </ToolbarList>
- </Toolbar>
- )}
- </LiteralsProvider>
+ )}
  </>
  );
 };
 
 ButtonsToolbar.propTypes = {
- literals: PropTypes.object,
  canSubmitStep: PropTypes.bool.isRequired,
  canSubmitForm: PropTypes.string.isRequired,
  canSuspendForm: PropTypes.bool.isRequired,

diff --git a/src/components/ButtonsToolbar/test.spec.js b/src/components/ButtonsToolbar/test.spec.js
@@ -6,6 +6,7 @@ import {act} from 'react-dom/test-utils';
 import {IntlProvider} from 'react-intl';
 import {MemoryRouter} from 'react-router-dom';
 
+import {LiteralsProvider} from 'components/Literal';
 import {SUBMISSION_ALLOWED} from 'components/constants';
 
 import ButtonsToolbar from './index';
@@ -37,7 +38,9 @@ const LITERALS = {
 
 const Wrap = ({children}) => (
  <IntlProvider locale="nl" messages={messagesNL}>
- <MemoryRouter>{children}</MemoryRouter>
+ <MemoryRouter>
+ <LiteralsProvider literals={LITERALS}>{children}</LiteralsProvider>
+ </MemoryRouter>
  </IntlProvider>
 );
 
@@ -48,7 +51,6 @@ it('Last step of submittable form, button is present', () => {
  root.render(
  <Wrap>
  <ButtonsToolbar
- literals={LITERALS}
  canSubmitStep={true}
  canSubmitForm={SUBMISSION_ALLOWED.yes}
  canSuspendForm={true}
@@ -80,7 +82,6 @@ it('Last step of non-submittable form with overview, button is present', () => {
  root.render(
  <Wrap>
  <ButtonsToolbar
- literals={LITERALS}
  canSubmitStep={true}
  canSubmitForm={SUBMISSION_ALLOWED.noWithOverview}
  canSuspendForm={true}
@@ -112,7 +113,6 @@ it('Last step of non-submittable form without overview, button is NOT present',
  root.render(
  <Wrap>
  <ButtonsToolbar
- literals={LITERALS}
  canSubmitStep={true}
  canSubmitForm={SUBMISSION_ALLOWED.noWithoutOverview}
  canSuspendForm={true}
@@ -143,7 +143,6 @@ it('Non-last step of non-submittable form without overview, button IS present',
  root.render(
  <Wrap>
  <ButtonsToolbar
- literals={LITERALS}
  canSubmitStep={true}
  canSubmitForm={SUBMISSION_ALLOWED.noWithoutOverview}
  canSuspendForm={true}
@@ -174,7 +173,6 @@ it('Suspending form allowed, button is present', () => {
  renderTest(
  <Wrap>
  <ButtonsToolbar
- literals={LITERALS}
  canSubmitStep={true}
  canSubmitForm={SUBMISSION_ALLOWED.yes}
  canSuspendForm={true}
@@ -198,7 +196,6 @@ it('Suspending form not allowed, button is NOT present', () => {
  renderTest(
  <Wrap>
  <ButtonsToolbar
- literals={LITERALS}
  canSubmitStep={true}
  canSubmitForm={SUBMISSION_ALLOWED.yes}
  canSuspendForm={false}

diff --git a/src/components/FormStep/index.js b/src/components/FormStep/index.js
@@ -909,7 +909,6 @@ const FormStep = ({form, submission, onLogicChecked, onStepSubmitted, onDestroyS
  />
  {config.debug ? <FormStepDebug data={getCurrentFormData()} /> : null}
  <ButtonsToolbar
- literals={formStep.literals}
  canSubmitStep={canSubmit}
  canSubmitForm={submission.submissionAllowed}
  canSuspendForm={form.suspensionAllowed}

diff --git a/src/components/appointments/SubmitRow.js b/src/components/appointments/SubmitRow.js
@@ -3,30 +3,34 @@ import React from 'react';
 import {useNavigate} from 'react-router-dom';
 
 import ButtonsToolbar from 'components/ButtonsToolbar';
+import {LiteralsProvider} from 'components/Literal';
 import {SUBMISSION_ALLOWED} from 'components/constants';
 
 const SubmitRow = ({canSubmit, nextText, previousText = '', navigateBackTo = ''}) => {
  const navigate = useNavigate();
 
  return (
- <ButtonsToolbar
+ <LiteralsProvider
  literals={{
  nextText: {resolved: nextText},
  previousText: {resolved: previousText},
  }}
- canSubmitStep={canSubmit}
- canSubmitForm={SUBMISSION_ALLOWED.yes}
- canSuspendForm={false}
- isAuthenticated={false} // TODO -> if authenticated (for prefill), logout must be shown
- isLastStep={false}
- isCheckingLogic={false}
- loginRequired={false}
- hideAbortButton
- previousPage={navigateBackTo ? `../${navigateBackTo}` : ''}
- onFormSave={() => {}}
- onNavigatePrevPage={navigateBackTo ? () => navigate(`../${navigateBackTo}`) : undefined}
- onDestroySession={() => {}}
- />
+ >
+ <ButtonsToolbar
+ canSubmitStep={canSubmit}
+ canSubmitForm={SUBMISSION_ALLOWED.yes}
+ canSuspendForm={false}
+ isAuthenticated={false} // TODO -> if authenticated (for prefill), logout must be shown
+ isLastStep={false}
+ isCheckingLogic={false}
+ loginRequired={false}
+ hideAbortButton
+ previousPage={navigateBackTo ? `../${navigateBackTo}` : ''}
+ onFormSave={() => {}}
+ onNavigatePrevPage={navigateBackTo ? () => navigate(`../${navigateBackTo}`) : undefined}
+ onDestroySession={() => {}}
+ />
+ </LiteralsProvider>
  );
 };