UIORGS-425: Use Save & close button label stripes-component translation key

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)

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>
       );
 

src/OrganizationIntegration/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>

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', () => {

src/Organizations/OrganizationDetails/OrganizationAccounts/__snapshots__/OrganizationAccounts.test.js.snap

@@ -209,5 +209,6 @@ exports[`OrganizationAccounts should render correct structure 1`] = `
       </div>
     </div>
   </div>
+  ,
 </DocumentFragment>
 `;

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', () => {

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

src/Organizations/OrganizationForm/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"