UIPFAUTH-83 Resolve circular dependency with ui-quick-marc. Clone Qui…

…ckMarcView component from `ui-quick-marc`. (#82)

* UIPFAUTH-83 Resolve circular dependency with ui-quick-marc. Clone QuickMarcView component from `ui-quick-marc`.

* UIPFAUTH-83 Fix eslint issues

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change history for ui-plugin-find-authority
 
+## [3.1.0] (IN PROGRESS)
+
+* [UIPFAUTH-83](https://issues.folio.org/browse/UIPFAUTH-83) Resolve circular dependency with ui-quick-marc. Clone QuickMarcView component from `ui-quick-marc`.
+
 ## [3.0.0] (https://github.com/folio-org/ui-plugin-find-authority/tree/v3.0.0) (2023-10-13)
 
 * [UIPFAUTH-44](https://issues.folio.org/browse/UIPFAUTH-44) Show an error message in modal after linking.

package.json

@@ -54,7 +54,6 @@
     "regenerator-runtime": "^0.13.3"
   },
   "dependencies": {
-    "@folio/quick-marc": "^7.0.0",
     "query-string": "^7.0.1"
   },
   "peerDependencies": {

src/components/MarcAuthorityView/MarcAuthorityView.js

@@ -26,8 +26,8 @@ import {
   useNamespace,
   useStripes,
 } from '@folio/stripes/core';
-import MarcView from '@folio/quick-marc/src/QuickMarcView/QuickMarcView';
 
+import MarcView from '../../temp/QuickMarcView/QuickMarcView';
 import {
   headFieldValue,
   isConsortiaEnv,

src/temp/QuickMarcView/MarcContent/MarcContent.css

@@ -0,0 +1,14 @@
+.marcWrapper {
+  margin-left: 20px;
+}
+
+.marc {
+  table-layout: fixed;
+  border: 0;
+  font-family: courier;
+  white-space: pre-wrap;
+
+  & tr td {
+    vertical-align: top;
+  }
+}

src/temp/QuickMarcView/MarcContent/MarcContent.js

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+
+import { Headline } from '@folio/stripes/components';
+
+import MarcField from '../MarcField';
+import { isControlField } from '../utils';
+import styles from './MarcContent.css';
+
+const propTypes = {
+  isPrint: PropTypes.bool,
+  marc: PropTypes.object.isRequired,
+  marcTitle: PropTypes.node.isRequired,
+  tenantId: PropTypes.string,
+};
+
+const defaultProps = {
+  isPrint: false,
+  tenantId: '',
+};
+
+const MarcContent = ({
+  marcTitle,
+  marc,
+  isPrint,
+  tenantId,
+}) => {
+  const showLinkIcon = marc.recordType === 'MARC_BIB';
+  const parsedContent = marc.parsedRecord.content;
+  const parsedMarc = {
+    leader: parsedContent.leader,
+    fields: [
+      ...parsedContent.fields.filter(isControlField),
+      ...parsedContent.fields.filter(field => !isControlField(field)),
+    ],
+  };
+
+  return (
+    <section className={styles.marcWrapper}>
+      <Headline
+        size="large"
+        margin="small"
+        tag="h3"
+      >
+        {marcTitle}
+      </Headline>
+      <table className={styles.marc}>
+        <tbody>
+          <tr>
+            <td colSpan="4">
+              {`LEADER ${parsedMarc.leader}`}
+            </td>
+          </tr>
+          {parsedMarc.fields.map(field => (
+            <MarcField
+              isPrint={isPrint}
+              field={field}
+              key={field.id}
+              showLinkIcon={showLinkIcon}
+              tenantId={tenantId}
+            />
+          ))}
+        </tbody>
+      </table>
+    </section>
+  );
+};
+
+MarcContent.propTypes = propTypes;
+MarcContent.defaultProps = defaultProps;
+
+export default MarcContent;

src/temp/QuickMarcView/MarcContent/MarcContent.test.js

@@ -0,0 +1,66 @@
+import { render } from '@folio/jest-config-stripes/testing-library/react';
+
+import { runAxeTest } from '@folio/stripes-testing';
+
+import Harness from '../../../../test/jest/helpers/harness';
+
+import MarcContent from './MarcContent';
+
+jest.mock('../MarcField', () => jest.fn(() => <tr><td>MarcField</td></tr>));
+
+const marc = {
+  parsedRecord: {
+    id: 'a178daf3-b10a-4ff9-a4bf-703a0091f043',
+    content: {
+      fields: [{
+        '001': 'in00000000140',
+      }, {
+        '008': '120126r20122010nyu      b    001 0 eng  ',
+      }],
+      leader: '00331cam a2200085 a 4500',
+    },
+  },
+  recordType: 'MARC_BIB',
+};
+
+const renderMarcContent = (props = {}) => render(
+  <Harness>
+    <MarcContent
+      marcTitle={<>fakeMarkTitle</>}
+      marc={marc}
+      {...props}
+    />
+  </Harness>,
+);
+
+describe('Given MarcContent', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render with no axe errors', async () => {
+    const { container } = renderMarcContent();
+
+    await runAxeTest({
+      rootNode: container,
+    });
+  });
+
+  it('should show the marc title', () => {
+    const { getByText } = renderMarcContent();
+
+    expect(getByText('fakeMarkTitle')).toBeVisible();
+  });
+
+  it('should display the content of the marc record', () => {
+    const { getByText } = renderMarcContent();
+
+    expect(getByText('LEADER 00331cam a2200085 a 4500')).toBeVisible();
+  });
+
+  it('should render list of marc fields', () => {
+    const { getAllByText } = renderMarcContent();
+
+    expect(getAllByText('MarcField').length).toBe(2);
+  });
+});

src/temp/QuickMarcView/MarcContent/index.js

@@ -0,0 +1 @@
+export { default } from './MarcContent';

src/temp/QuickMarcView/MarcField.css

@@ -0,0 +1,3 @@
+.indicators {
+  width: 30px;
+}

src/temp/QuickMarcView/MarcField.js

@@ -0,0 +1,60 @@
+import { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import { normalizeIndicator } from './utils';
+
+import styles from './MarcField.css';
+
+const propTypes = {
+  field: PropTypes.object.isRequired,
+};
+
+const MarcField = ({
+  field,
+}) => {
+  const fieldTag = Object.keys(field)[0];
+  const hasIndicators = typeof field[fieldTag] !== 'string';
+  const subFields = hasIndicators
+    ? field[fieldTag].subfields.map(subFieldTag => {
+      const subKey = Object.keys(subFieldTag)[0];
+
+      const subfieldValue = field[fieldTag].isHighlighted
+        ? <mark>{subFieldTag[subKey]}</mark>
+        : subFieldTag[subKey];
+
+      return (
+        <Fragment key={`subfield-${subFieldTag}-${subKey}`}>
+          <span>&#8225;</span>
+          {subKey}
+          {' '}
+          {subfieldValue}
+          {' '}
+        </Fragment>
+      );
+    })
+    : field[fieldTag].replace(/\\/g, ' ');
+
+  return (
+    <tr data-test-instance-marc-field>
+      <td>
+        {fieldTag}
+      </td>
+
+      {
+        hasIndicators && (
+          <td className={styles.indicators}>
+            {`${normalizeIndicator(field[fieldTag].ind1)} ${normalizeIndicator(field[fieldTag].ind2)}`}
+          </td>
+        )
+      }
+
+      <td colSpan={hasIndicators ? 2 : 3}>
+        {subFields}
+      </td>
+    </tr>
+  );
+};
+
+MarcField.propTypes = propTypes;
+
+export default MarcField;

src/temp/QuickMarcView/QuickMarcView.js

@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+
+import {
+  Pane,
+  Paneset,
+} from '@folio/stripes/components';
+
+import MarcContent from './MarcContent';
+
+const propTypes = {
+  isPaneset: PropTypes.bool,
+  lastMenu: PropTypes.node,
+  marc: PropTypes.object.isRequired,
+  marcTitle: PropTypes.node.isRequired,
+  onClose: PropTypes.func.isRequired,
+  paneHeight: PropTypes.string,
+  paneSub: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+  paneTitle: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.string,
+  ]).isRequired,
+  paneWidth: PropTypes.string,
+  tenantId: PropTypes.string,
+};
+
+const defaultProps = {
+  isPaneset: true,
+  paneHeight: null,
+  lastMenu: null,
+  paneSub: null,
+  paneWidth: '',
+  tenantId: '',
+};
+
+/*
+  This is a temporarily copied component from ui-quick-marc to resolve a ciecular dependency.
+  TODO: Remove it from here after https://issues.folio.org/browse/UIQM-570 is done.
+*/
+const QuickMarcView = ({
+  paneTitle,
+  paneSub,
+  paneHeight,
+  marcTitle,
+  marc,
+  onClose,
+  paneWidth,
+  lastMenu,
+  isPaneset,
+  tenantId,
+}) => {
+  const renderContent = () => (
+    <Pane
+      paneTitle={paneTitle}
+      paneSub={paneSub}
+      defaultWidth={paneWidth}
+      id="marc-view-pane"
+      dismissible
+      onClose={onClose}
+      data-test-instance-marc
+      data-testid="marc-view-pane"
+      height={paneHeight}
+      lastMenu={lastMenu}
+    >
+      <MarcContent
+        marcTitle={marcTitle}
+        marc={marc}
+        tenantId={tenantId}
+      />
+    </Pane>
+  );
+
+  return isPaneset
+    ? (
+      <Paneset
+        isRoot
+        data-testid="qm-view-paneset"
+      >
+        {renderContent()}
+      </Paneset>
+    )
+    : renderContent();
+};
+
+QuickMarcView.propTypes = propTypes;
+QuickMarcView.defaultProps = defaultProps;
+
+export default QuickMarcView;