UIQM-574: Allow user to select an authority file when creating a new MARC authority record

CHANGELOG.md

@@ -5,6 +5,7 @@
 * [UIQM-580](https://issues.folio.org/browse/UIQM-580) *BREAKING* Move QuickMarcView, PrintPopup and getHeaders to stripes-marc-components.
 * [UIQM-543](https://issues.folio.org/browse/UIQM-543) Remove eslint deps that are already listed in eslint-config-stripes.
 * [UIQM-573](https://issues.folio.org/browse/UIQM-573) Edit MARC authority | Allow user to Add/Edit 010 $a when linking is based on 001.
+* [UIQM-574](https://issues.folio.org/browse/UIQM-574) Added authority source file selection button and modal to Authority Create view.
 
 ## [7.0.4](https://github.com/folio-org/ui-quick-marc/tree/v7.0.4) (2023-11-09)
 

src/QuickMarcEditor/QuickMarcEditorRows/ControlNumberField/ControlNumberField.js

@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+import { Field } from 'react-final-form';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+
+import { SourceFileLookup } from '../../SourceFileLookup';
+import { ContentField } from '../ContentField';
+import { MARC_TYPES } from '../../../common/constants';
+import { QUICK_MARC_ACTIONS } from '../../constants';
+
+const propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  marcType: PropTypes.string.isRequired,
+  action: PropTypes.string.isRequired,
+};
+
+const ControlNumberField = ({
+  id,
+  name,
+  marcType,
+  action,
+}) => {
+  const intl = useIntl();
+
+  const handleSourceFileSelection = useCallback(() => {
+    // TODO: handle generation of HRID + source file prefix here (UIQM-576)
+  }, []);
+
+  const canSelectSourceFile = marcType === MARC_TYPES.AUTHORITY && action === QUICK_MARC_ACTIONS.CREATE;
+
+  return (
+    <>
+      <Field
+        component={ContentField}
+        aria-label={intl.formatMessage({ id: 'ui-quick-marc.record.subfield' })}
+        name={name}
+        disabled
+        data-testid={id}
+        id={id}
+        parse={v => v}
+      />
+      {canSelectSourceFile && (
+        <SourceFileLookup
+          onSourceFileSelect={handleSourceFileSelection}
+        />
+      )}
+    </>
+  );
+};
+
+ControlNumberField.propTypes = propTypes;
+
+export { ControlNumberField };

src/QuickMarcEditor/QuickMarcEditorRows/ControlNumberField/ControlNumberField.test.js

@@ -0,0 +1,70 @@
+import { render } from '@folio/jest-config-stripes/testing-library/react';
+import { Form } from 'react-final-form';
+import arrayMutators from 'final-form-arrays';
+
+import { ControlNumberField } from './ControlNumberField';
+import { MARC_TYPES } from '../../../common/constants';
+import { QUICK_MARC_ACTIONS } from '../../constants';
+import Harness from '../../../../test/jest/helpers/harness';
+
+const getControlNumberField = (props = {}, initialValues) => (
+  <Form
+    onSubmit={jest.fn()}
+    mutators={{ ...arrayMutators }}
+    initialValues={{
+      controlNumber: 'n 50000331',
+    }}
+    {...initialValues}
+    render={() => (
+      <ControlNumberField
+        id="id-1"
+        name="controlNumber"
+        marcType={MARC_TYPES.AUTHORITY}
+        action={QUICK_MARC_ACTIONS.CREATE}
+        {...props}
+      />
+    )}
+  />
+);
+
+const renderControlNumberField = (props = {}) => render(getControlNumberField(props), { wrapper: Harness });
+
+describe('Given ControlNumberField', () => {
+  it('should render content field', () => {
+    const {
+      getByRole,
+      getByText,
+    } = renderControlNumberField();
+
+    expect(getByRole('textbox')).toBeDefined();
+    expect(getByText('ui-quick-marc.sourceFileLookup')).toBeDefined();
+  });
+
+  describe('when marc type is not AUTHORITY', () => {
+    it('should not render source file lookup', () => {
+      const { queryByText } = renderControlNumberField({
+        marcType: MARC_TYPES.BIB,
+      });
+
+      expect(queryByText('ui-quick-marc.sourceFileLookup')).toBeNull();
+    });
+  });
+
+  describe('when action is not CREATE', () => {
+    beforeAll(() => {
+      jest.mock('../../SourceFileLookup', () => ({
+        SourceFileLookup: ({ onSourceFileSelect }) => (
+          <button type="button" onClick={() => onSourceFileSelect({ target: { value: 'test-source-file-id' } })}>Select file</button>
+        ),
+      }));
+    });
+
+    it('should not render source file lookup', () => {
+      const { queryByText } = renderControlNumberField({
+        action: QUICK_MARC_ACTIONS.EDIT,
+      });
+
+      expect(queryByText('ui-quick-marc.sourceFileLookup')).toBeNull();
+    });
+  });
+});

src/QuickMarcEditor/QuickMarcEditorRows/ControlNumberField/index.js

@@ -0,0 +1 @@
+export * from './ControlNumberField';

src/QuickMarcEditor/QuickMarcEditorRows/QuickMarcEditorRows.js

@@ -34,6 +34,7 @@ import { LocationField } from './LocationField';
 import { DeletedRowPlaceholder } from './DeletedRowPlaceholder';
 import { LinkButton } from './LinkButton';
 import { SplitField } from './SplitField';
+import { ControlNumberField } from './ControlNumberField';
 import {
   hasIndicatorException,
   hasAddException,
@@ -50,6 +51,7 @@ import {
   isLocationRow,
   isContentRow,
   applyCentralTenantInHeaders,
+  isControlNumberRow,
 } from '../utils';
 import { useAuthorityLinking } from '../../hooks';
 import {
@@ -282,6 +284,7 @@ const QuickMarcEditorRows = ({
             const isPhysDescriptionField = isPhysDescriptionRecord(recordRow);
             const isFixedField = isFixedFieldRow(recordRow);
             const isLocationField = isLocationRow(recordRow, marcType);
+            const isControlNumberField = isControlNumberRow(recordRow);
             const isContentField = isContentRow(recordRow, marcType);
             const isMARCFieldProtections = marcType !== MARC_TYPES.HOLDINGS && action === QUICK_MARC_ACTIONS.EDIT;
             const isProtectedField = recordRow.isProtected;
@@ -449,6 +452,17 @@ const QuickMarcEditorRows = ({
                   className={styles.quickMarcEditorRowContent}
                   ref={isLeader ? setRowContentWidthOnce : null}
                 >
+                  {
+                    isControlNumberField && (
+                      <ControlNumberField
+                        id={`control-number-field-${idx}`}
+                        name={`${name}.content`}
+                        marcType={marcType}
+                        action={action}
+                      />
+                    )
+                  }
+
                   {
                     isMaterialCharsField && (
                       <MaterialCharsField

src/QuickMarcEditor/QuickMarcEditorRows/QuickMarcEditorRows.test.js

@@ -258,7 +258,7 @@ describe('Given QuickMarcEditorRows', () => {
     describe('when the subfield is focused', () => {
       it('should have a cursor at the end of the field value', () => {
         const { getByTestId } = renderQuickMarcEditorRows();
-        const subfield = getByTestId('content-field-0');
+        const subfield = getByTestId('content-field-4');
         const valueLength = subfield.value.length;
         const spySetSelectionRange = jest.spyOn(subfield, 'setSelectionRange');
 

src/QuickMarcEditor/SourceFileLookup/SourceFileLookup.js

@@ -0,0 +1,70 @@
+import {
+  useCallback,
+  useState,
+  useMemo,
+} from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+
+import { useStripes } from '@folio/stripes/core';
+import { Button } from '@folio/stripes/components';
+
+import { useAuthoritySourceFiles } from '../../queries';
+import { SourceFileLookupModal } from './SourceFileLookupModal';
+
+const propTypes = {
+  onSourceFileSelect: PropTypes.func.isRequired,
+};
+
+const SourceFileLookup = ({
+  onSourceFileSelect,
+}) => {
+  const stripes = useStripes();
+  const intl = useIntl();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const tenantId = stripes.hasInterface('consortia') ? stripes.user.user?.consortium?.centralTenantId : null;
+  const { sourceFiles } = useAuthoritySourceFiles({ tenantId });
+
+  const openModal = useCallback(() => setIsModalOpen(true), [setIsModalOpen]);
+  const closeModal = useCallback(() => setIsModalOpen(false), [setIsModalOpen]);
+
+  const onCancelModal = useCallback(() => {
+    closeModal();
+  }, [closeModal]);
+
+  const onConfirmModal = useCallback((sourceFileId) => {
+    const selectedSourceFile = sourceFiles.find(sourceFile => sourceFile.id === sourceFileId);
+
+    onSourceFileSelect(selectedSourceFile);
+    closeModal();
+  }, [onSourceFileSelect, closeModal, sourceFiles]);
+
+  const label = intl.formatMessage({ id: 'ui-quick-marc.sourceFileLookup' });
+  const sourceFileOptions = useMemo(() => sourceFiles.map(sourceFile => ({
+    label: sourceFile.name,
+    value: sourceFile.id,
+  })), [sourceFiles]);
+
+  return (
+    <>
+      <Button
+        buttonStyle="link"
+        marginBottom0
+        onClick={openModal}
+      >
+        {label}
+      </Button>
+      <SourceFileLookupModal
+        open={isModalOpen}
+        sourceFileOptions={sourceFileOptions}
+        onConfirm={onConfirmModal}
+        onCancel={onCancelModal}
+      />
+    </>
+  );
+};
+
+SourceFileLookup.propTypes = propTypes;
+
+export { SourceFileLookup };

src/QuickMarcEditor/SourceFileLookup/SourceFileLookup.test.js

@@ -0,0 +1,75 @@
+import {
+  render,
+  fireEvent,
+  waitFor,
+} from '@folio/jest-config-stripes/testing-library/react';
+
+import { SourceFileLookup } from './SourceFileLookup';
+import { useAuthoritySourceFiles } from '../../queries';
+import Harness from '../../../test/jest/helpers/harness';
+
+jest.mock('./SourceFileLookupModal', () => ({
+  SourceFileLookupModal: ({ onConfirm }) => (
+    <>
+      SourceFileLookupModal
+      <button type="button" onClick={() => onConfirm('source-file-id')}>Confirm</button>
+    </>
+  ),
+}));
+
+jest.mock('../../queries', () => ({
+  ...jest.requireActual('../../queries'),
+  useAuthoritySourceFiles: jest.fn(),
+}));
+
+const mockOnSourceFileSelect = jest.fn();
+
+const renderSourceFileLookup = (props = {}) => render(
+  <SourceFileLookup
+    onSourceFileSelect={mockOnSourceFileSelect}
+    {...props}
+  />,
+  { wrapper: Harness },
+);
+
+const sourceFiles = [{
+  id: 'source-file-id',
+  name: 'Test source file',
+}];
+
+describe('Given SourceFileLookup', () => {
+  beforeAll(() => {
+    useAuthoritySourceFiles.mockReturnValue({
+      sourceFiles,
+    });
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the modal trigger button', async () => {
+    const {
+      getByRole,
+      getByText,
+    } = renderSourceFileLookup();
+
+    fireEvent.click(getByRole('button', { name: 'ui-quick-marc.sourceFileLookup' }));
+
+    await waitFor(() => expect(getByText('SourceFileLookupModal')).toBeDefined());
+  });
+
+  describe('when confirming source file selection in modal', () => {
+    it('should call onSourceFileSelect callback with correct source file', async () => {
+      const {
+        getByRole,
+        getByText,
+      } = renderSourceFileLookup();
+
+      fireEvent.click(getByRole('button', { name: 'ui-quick-marc.sourceFileLookup' }));
+      fireEvent.click(getByText('Confirm'));
+
+      expect(mockOnSourceFileSelect).toHaveBeenCalledWith(sourceFiles[0]);
+    });
+  });
+});