Merge branch 'master' into UIFC-262-limit-file-upload-size

Author: slaemmer

CHANGELOG.md

@@ -1,7 +1,9 @@
 # Change history for ui-finc-select
 
 ## 8.2.0 (IN PROGRESS)
-
+* Use EditCard from stripes-leipzig-components ([UIFC-451](https://folio-org.atlassian.net/browse/UIFC-451))
+* Add error handling and loading states to EZB Credentials settings page ([UIFC-457](https://folio-org.atlassian.net/browse/UIFC-457))
+* Include mod-settings global permissions ([UIFC-459](https://folio-org.atlassian.net/browse/UIFC-459))
 * Add file upload size validation and improved error handling ([UIFC-262](https://folio-org.atlassian.net/browse/UIFC-262))
 
 ## [8.1.0](https://github.com/folio-org/ui-finc-select/tree/v8.1.0) (2025-08-21)

package.json

@@ -34,6 +34,7 @@
     "react-router-dom": "^5.2.0"
   },
   "dependencies": {
+    "@folio/stripes-leipzig-components": "^1.0.0",
     "file-saver": "^2.0.0",
     "final-form": "^4.18.7",
     "final-form-arrays": "^3.0.2",
@@ -72,17 +73,26 @@
       "finc-select-ezb-credentials": "1.0",
       "organizations-storage.organizations": "3.0"
     },
+    "stripesDeps": [
+      "@folio/stripes-leipzig-components"
+    ],
     "permissionSets": [
       {
         "permissionName": "module.finc-select.enabled",
         "displayName": "UI: finc-select module is enabled",
+        "subPermissions": [
+          "mod-settings.global.read.stripes-core.prefs.manage",
+          "mod-settings.entries.collection.get"
+        ],
         "visible": false
       },
       {
         "permissionName": "settings.finc-select.enabled",
         "displayName": "Settings (finc-select): display list of settings pages",
         "subPermissions": [
-          "settings.enabled"
+          "settings.enabled",
+          "mod-settings.global.read.stripes-core.prefs.manage",
+          "mod-settings.entries.collection.get"
         ],
         "visible": false
       },

src/components/DisplayUtils/EditCard/EditCard.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { FieldArray } from 'react-final-form-arrays';
 
 import { Accordion } from '@folio/stripes/components';
 import { useStripes } from '@folio/stripes/core';
@@ -30,9 +29,7 @@ const FilterFileForm = ({
       onToggle={onToggle}
       open={expanded}
     >
-      <FieldArray
-        addDocBtnLabel={<FormattedMessage id="ui-finc-select.filter.file.addFile" />}
-        component={DocumentsFieldArray}
+      <DocumentsFieldArray
         name="filterFiles"
         onUploadFile={handleUploadFile}
       />

src/components/DisplayUtils/EditCard/EditCard.test.js

@@ -1,54 +1,40 @@
 import { MemoryRouter } from 'react-router-dom';
 import { Form } from 'react-final-form';
-import { FieldArray } from 'react-final-form-arrays';
+import arrayMutators from 'final-form-arrays';
 
-import { fireEvent, screen, waitFor } from '@folio/jest-config-stripes/testing-library/react';
+import { screen, waitFor } from '@folio/jest-config-stripes/testing-library/react';
 import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
 import { StripesContext, useStripes } from '@folio/stripes/core';
 
 import renderWithIntlConfiguration from '../../../../test/jest/helpers/renderWithIntlConfiguration';
-import FilterForm from '../FilterForm';
 import FilterFileForm from './FilterFileForm';
-import FILTER from '../../../../test/fixtures/filter';
+import fetchWithDefaultOptions from '../../DisplayUtils/fetchWithDefaultOptions';
 
 const onToggle = jest.fn();
-const onDelete = jest.fn();
-const onClose = jest.fn();
-const handleSubmit = jest.fn();
 const onSubmit = jest.fn();
-const onUploadFile = jest.fn();
-const onDownloadFile = jest.fn();
 
 const file = new File(['foo'], 'file.json', { type: 'text/plain' });
 
-const renderFilterFileForm = (stripes, initialValues = FILTER) => {
+jest.mock('../../DisplayUtils/fetchWithDefaultOptions');
+
+const mockPost = jest.fn(() => Promise.resolve({
+  ok: true,
+  text: () => Promise.resolve('34bdd9da-b765-448a-8519-11d460a4df5d'),
+}));
+
+const renderFilterFileForm = (stripes) => {
   return renderWithIntlConfiguration(
     <StripesContext.Provider value={stripes}>
       <MemoryRouter>
         <Form
           onSubmit={onSubmit}
+          mutators={arrayMutators}
           render={() => (
-            <FilterForm
-              initialValues={initialValues}
-              handlers={{ onClose, onDelete }}
-              handleSubmit={handleSubmit}
-              onSubmit={onSubmit}
-              onDelete={onDelete}
-            >
-              <FilterFileForm
-                accordionId="accordionId"
-                expanded
-                onToggle={onToggle}
-                stripes={stripes}
-              >
-                <FieldArray
-                  addDocBtnLabel="Add file to filter"
-                  name="filterFiles"
-                  onDownloadFile={onDownloadFile}
-                  onUploadFile={onUploadFile}
-                />
-              </FilterFileForm>
-            </FilterForm>
+            <FilterFileForm
+              accordionId="accordionId"
+              expanded
+              onToggle={onToggle}
+            />
           )}
         />
       </MemoryRouter>
@@ -59,43 +45,49 @@ const renderFilterFileForm = (stripes, initialValues = FILTER) => {
 jest.unmock('react-intl');
 
 describe('FilterFileForm', () => {
-  let stripes;
+  beforeEach(() => {
+    jest.clearAllMocks();
+    fetchWithDefaultOptions.mockImplementation(mockPost);
+  });
 
   describe('render FilterFileForm', () => {
     beforeEach(() => {
-      stripes = useStripes();
+      const stripes = useStripes();
       renderFilterFileForm(stripes);
     });
 
     test('Add file button is rendered', () => {
-      const selectFile = screen.getByRole('button', {
-        name: 'Add file to filter',
-      });
+      const selectFile = screen.getByRole('button', { name: 'Add file to filter' });
       expect(selectFile).toBeInTheDocument();
     });
 
     describe('Click add file button', () => {
       beforeEach(async () => {
-        const selectFile = screen.getByRole('button', {
-          name: 'Add file to filter',
-        });
+        const selectFile = screen.getByRole('button', { name: 'Add file to filter' });
         await userEvent.click(selectFile);
       });
 
-      test('should render filter file upload button', () => {
-        expect(document.querySelector('#filter-file-label-1')).toBeInTheDocument();
+      it('should render filter file upload card', () => {
+        expect(document.querySelector('#filter-file-label-0')).toBeInTheDocument();
         expect(document.querySelector('#filter-file-upload-button')).toBeInTheDocument();
       });
 
-      test('should render filter file upload button', async () => {
-        const filenameInput = document.querySelector('#filter-file-label-1');
+      test('upload file should call fetch', async () => {
+        const filenameInput = document.querySelector('#filter-file-label-0');
         const uploadFileInput = document.querySelector('#filter-file-input');
-        const saveButton = screen.getByRole('button', { name: 'Save & close' });
 
         await userEvent.type(filenameInput, 'my filename');
-        fireEvent.change(uploadFileInput, { target: { filterFiles: [file] } });
+        await userEvent.upload(uploadFileInput, file);
+
         await waitFor(() => {
-          expect(saveButton).toBeEnabled();
+          expect(fetchWithDefaultOptions).toHaveBeenCalledWith(
+            expect.any(Object),
+            expect.stringContaining('/finc-select/files'),
+            expect.objectContaining({
+              method: 'POST',
+              body: file,
+            })
+          );
         });
       });
     });