UIORGS-425: Use Save & close button label stripes-component translati…

…on key (#637)
folio-org · Aug 12, 2024 · 427c232 · 427c232
1 parent 19daf93
commit 427c232
Show file tree

Hide file tree

Showing 17 changed files with 215 additions and 122 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * UX Consistency: HTML Page Title display when the third pane (detail record) displays. Refs UIORGS-423.
 * Settings > Organizations > Banking information is not properly fenced off by permissions. Refs UIORGS-436.
+* Use Save & close button label stripes-component translation key - all UI modules. Refs UIORGS-425.
 
 ## [5.1.1](https://github.com/folio-org/ui-organizations/tree/v5.1.1) (2024-04-18)
 [Full Changelog](https://github.com/folio-org/ui-organizations/compare/v5.1.0...v5.1.1)

diff --git a/src/OrganizationIntegration/OrganizationIntegrationForm/OrganizationIntegrationForm.js b/src/OrganizationIntegration/OrganizationIntegrationForm/OrganizationIntegrationForm.js
@@ -55,7 +55,7 @@ const OrganizationIntegrationForm = ({
  disabled={pristine || submitting}
  onClick={handleSubmit}
  >
- <FormattedMessage id="ui-organizations.button.saveAndClose" />
+ <FormattedMessage id="stripes-components.saveAndClose" />
  </Button>
  );
 

diff --git a/...ration/OrganizationIntegrationForm/__snapshots__/OrganizationIntegrationForm.test.js.snap b/...ration/OrganizationIntegrationForm/__snapshots__/OrganizationIntegrationForm.test.js.snap
@@ -1486,7 +1486,7 @@ exports[`OrganizationIntegrationForm should render correct form structure 1`] =
  <span
  class="inner"
  >
- ui-organizations.button.saveAndClose
+ stripes-components.saveAndClose
  </span>
  </button>
  </span>

diff --git a/src/Organizations/OrganizationDetails/OrganizationAccounts/OrganizationAccounts.test.js b/src/Organizations/OrganizationDetails/OrganizationAccounts/OrganizationAccounts.test.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@folio/jest-config-stripes/testing-library/react';
 
+import { QueryClient, QueryClientProvider } from 'react-query';
 import OrganizationAccounts from './OrganizationAccounts';
 
 jest.mock('@folio/stripes-components/lib/NoValue', () => {
@@ -18,10 +19,13 @@ const accounts = [{
  libraryEdiCode: 'ECDA',
  notes: 'Default account',
 }];
+const queryClient = new QueryClient();
 const renderOrganizationAccounts = () => render(
- <OrganizationAccounts
- accounts={accounts}
- />,
+ <QueryClientProvider client={queryClient}>
+ <OrganizationAccounts
+ accounts={accounts}
+ />,
+ </QueryClientProvider>,
 );
 
 describe('OrganizationAccounts', () => {

diff --git a/.../OrganizationDetails/OrganizationAccounts/__snapshots__/OrganizationAccounts.test.js.snap b/.../OrganizationDetails/OrganizationAccounts/__snapshots__/OrganizationAccounts.test.js.snap
@@ -209,5 +209,6 @@ exports[`OrganizationAccounts should render correct structure 1`] = `
  </div>
  </div>
  </div>
+ ,
 </DocumentFragment>
 `;
diff --git a/src/Organizations/OrganizationDetails/OrganizationSummary/OrganizationSummary.test.js b/src/Organizations/OrganizationDetails/OrganizationSummary/OrganizationSummary.test.js
@@ -4,6 +4,7 @@ import { IntlProvider } from 'react-intl';
 
 import '@folio/stripes-acq-components/test/jest/__mock__';
 
+import { QueryClient, QueryClientProvider } from 'react-query';
 import OrganizationSummary from './OrganizationSummary';
 
 const STUB_ORG = {
@@ -52,22 +53,26 @@ const messages = {
  'stripes-components.noValue.noValueSet': 'noValueSet',
 };
 
+const queryClient = new QueryClient();
+
 const renderOrganizationSummary = (organization) => (render(
- <IntlProvider locale="en" messages={messages}>
- <OrganizationSummary
- acqUnitIds={organization.acqUnitIds}
- aliases={organization.aliases}
- code={organization.code}
- description={organization.description}
- erpCode={organization.erpCode}
- isVendor={organization.isVendor}
- language={organization.language}
- metadata={organization.metadata}
- name={organization.name}
- status={organization.status}
- organizationTypes={organization.organizationTypes}
- />
- </IntlProvider>,
+ <QueryClientProvider client={queryClient}>
+ <IntlProvider locale="en" messages={messages}>
+ <OrganizationSummary
+ acqUnitIds={organization.acqUnitIds}
+ aliases={organization.aliases}
+ code={organization.code}
+ description={organization.description}
+ erpCode={organization.erpCode}
+ isVendor={organization.isVendor}
+ language={organization.language}
+ metadata={organization.metadata}
+ name={organization.name}
+ status={organization.status}
+ organizationTypes={organization.organizationTypes}
+ />
+ </IntlProvider>,
+ </QueryClientProvider>,
 ));
 
 describe('OrganizationSummary component', () => {

diff --git a/src/Organizations/OrganizationForm/OrganizationAccountsForm/OrganizationAccountsForm.test.js b/src/Organizations/OrganizationForm/OrganizationAccountsForm/OrganizationAccountsForm.test.js
@@ -4,6 +4,7 @@ import { MemoryRouter } from 'react-router-dom';
 
 import stripesFinalForm from '@folio/stripes/final-form';
 
+import { QueryClient, QueryClientProvider } from 'react-query';
 import OrganizationAccountsForm from './OrganizationAccountsForm';
 
 const TestForm = stripesFinalForm({})(
@@ -29,11 +30,15 @@ const account = {
  notes: '',
  paymentMethod: 'Credit Card',
 };
+const queryClient = new QueryClient();
+
 const renderForm = ({ initialValues = {} } = {}) => render(
- <TestForm
- onSubmit={jest.fn()}
- initialValues={initialValues}
- />,
+ <QueryClientProvider client={queryClient}>
+ <TestForm
+ onSubmit={jest.fn()}
+ initialValues={initialValues}
+ />
+ </QueryClientProvider>,
  { wrapper: MemoryRouter },
 );
 

diff --git a/...nizationForm/OrganizationAccountsForm/__snapshots__/OrganizationAccountsForm.test.js.snap b/...nizationForm/OrganizationAccountsForm/__snapshots__/OrganizationAccountsForm.test.js.snap
@@ -453,8 +453,8 @@ exports[`OrganizationAccountsForm should render correct structure with defined a
  />
  <label
  class="label"
- for="downshift-:r1:-input"
- id="multiselect-label-id-account-acq-units-0"
+ for="account-acq-units-0-input"
+ id="account-acq-units-0-label"
  >
  stripes-acq-components.label.acqUnits
  </label>
@@ -475,7 +475,7 @@ exports[`OrganizationAccountsForm should render correct structure with defined a
  >
  <div
  aria-describedby="multi-describe-control-account-acq-units-0"
- aria-labelledby="multiselect-label-id-account-acq-units-0 multi-value-status-account-acq-units-0"
+ aria-labelledby="account-acq-units-0-label multi-value-status-account-acq-units-0"
  class="multiSelectControl formControl"
  role="searchbox"
  tabindex="0"
@@ -488,7 +488,7 @@ exports[`OrganizationAccountsForm should render correct structure with defined a
  aria-autocomplete="list"
  aria-controls="multiselect-option-list-account-acq-units-0"
  aria-expanded="false"
- aria-labelledby="multiselect-label-id-account-acq-units-0"
+ aria-labelledby="account-acq-units-0-label"
  autocomplete="off"
  class="multiSelectFilterField"
  id="account-acq-units-0-input"
@@ -507,7 +507,7 @@ exports[`OrganizationAccountsForm should render correct structure with defined a
  <button
  aria-controls="multiselect-option-list-account-acq-units-0"
  aria-expanded="false"
- aria-label="toggle menu"
+ aria-label="stripes-components.multiSelection.dropdownTriggerLabel"
  class="multiSelectToggleButton"
  id="downshift-:r1:-toggle-button"
  tabindex="-1"
@@ -525,7 +525,7 @@ exports[`OrganizationAccountsForm should render correct structure with defined a
  <div
  class="multiSelectMenu"
  hidden=""
- style="width: 100%;"
+ style="width: 100px;"
  >
  <div
  class="multiSelectFeedback"
@@ -538,7 +538,7 @@ exports[`OrganizationAccountsForm should render correct structure with defined a
  </div>
  </div>
  <ul
- aria-labelledby="multiselect-label-id-account-acq-units-0"
+ aria-labelledby="account-acq-units-0-label"
  class="multiSelectOptionList"
  id="multiselect-option-list-account-acq-units-0"
  role="listbox"