UIIN-340: Add ability to add related instance title

CHANGELOG.md

@@ -36,6 +36,7 @@ Inventory causes an error. Refs UIIN-2012.
 * Update locations in `<ViewHoldingsRecord>` after edit. Fixes UIIN-1980.
 * Retrieve up to 5000 locations when viewing Instances. Refs UIIN-2016.
 * Remove `react-hot-loader`. Refs UIIN-1981.
+* Add ability to add related instance title. Refs UIIN-340.
 
 ## [9.0.0](https://github.com/folio-org/ui-inventory/tree/v9.0.0) (2022-03-03)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v8.0.0...v9.0.0)

package.json

@@ -84,7 +84,8 @@
       "configuration": "2.0",
       "tags": "1.0",
       "inventory-record-bulk": "1.0",
-      "data-export": "5.0"
+      "data-export": "5.0",
+      "related-instance-types": "1.0"
     },
     "optionalOkapiInterfaces": {
       "copycat-imports": "1.0",
@@ -541,7 +542,9 @@
           "orders.collection.get",
           "orders.item.get",
           "organizations.organizations.item.get",
-          "acquisitions-units.units.collection.get"
+          "acquisitions-units.units.collection.get",
+          "inventory-storage.related-instance-types.collection.get",
+          "inventory-storage.related-instance-types.item.get"
         ],
         "visible": true
       },

src/Instance/InstanceEdit/InstanceEdit.js

@@ -42,14 +42,16 @@ const InstanceEdit = ({
   const { instance, isLoading: isInstanceLoading } = useInstance(instanceId, mutator.instanceEdit);
   const parentInstances = useLoadSubInstances(instance?.parentInstances, 'superInstanceId');
   const childInstances = useLoadSubInstances(instance?.childInstances, 'subInstanceId');
+  const relatedInstances = useLoadSubInstances(instance?.relatedInstances, 'relatedInstanceId');
 
   useEffect(() => {
     setInitialValues({
       ...unmarshalInstance(instance, identifierTypesById),
       parentInstances,
       childInstances,
+      relatedInstances,
     });
-  }, [instance, identifierTypesById, parentInstances, childInstances]);
+  }, [instance, identifierTypesById, parentInstances, childInstances, relatedInstances]);
 
   const goBack = useGoBack(`/inventory/view/${instanceId}`);
 
@@ -115,7 +117,7 @@ InstanceEdit.manifest = Object.freeze({
 InstanceEdit.propTypes = {
   instanceId: PropTypes.string.isRequired,
   mutator: PropTypes.object.isRequired,
-  referenceData: PropTypes.object.isRequired,
+  referenceData: PropTypes.object,
   stripes: stripesShape.isRequired,
 };
 

src/Instance/InstanceEdit/RelatedInstanceField/RelatedInstanceField.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Field } from 'react-final-form';
+
+import {
+  KeyValue,
+  Row,
+  Col,
+  Select,
+} from '@folio/stripes/components';
+
+import InstancePlugin from '../../../components/InstancePlugin';
+import TitleLabel from '../../../components/TitleLabel';
+import { getIdentifiers, convertInstanceFormatIdsToNames } from '../../../utils';
+import { indentifierTypeNames } from '../../../constants';
+import useReferenceData from '../../../hooks/useReferenceData';
+
+const InstanceField = ({
+  field,
+  index,
+  fields,
+  isDisabled,
+  relatedInstanceTypes,
+}) => {
+  const intl = useIntl();
+  const { identifierTypesById, instanceFormatsById } = useReferenceData();
+  const { update, value } = fields;
+  const instance = value[index];
+  const {
+    id,
+    hrid,
+    title,
+    identifiers,
+    instanceFormatIds,
+  } = instance;
+  const {
+    ISSN,
+    ISBN,
+  } = indentifierTypeNames;
+  const issn = getIdentifiers(identifiers, ISSN, identifierTypesById);
+  const isbn = getIdentifiers(identifiers, ISBN, identifierTypesById);
+  const format = convertInstanceFormatIdsToNames(instanceFormatIds, instanceFormatsById);
+
+  const handleSelect = (inst) => {
+    update(index, {
+      ...inst,
+      relatedInstanceId: inst.id,
+    });
+  };
+
+  return (
+    <Row>
+      <Col xs={2}>
+        <KeyValue
+          data-test={`related-instance-title-${index}`}
+          label={
+            <TitleLabel
+              label={<FormattedMessage id="ui-inventory.precedingField.title" />}
+              subLabel={id && <FormattedMessage id="ui-inventory.precedingField.connected" />}
+              required
+            />
+          }
+          value={title || <FormattedMessage id="ui-inventory.notAvailable" />}
+        />
+      </Col>
+      <Col xs={1}>
+        <InstancePlugin onSelect={handleSelect} isDisabled={isDisabled} />
+      </Col>
+      <Col xs>
+        <KeyValue
+          label={<FormattedMessage id="ui-inventory.instanceHrid" />}
+          value={hrid || <FormattedMessage id="ui-inventory.notAvailable" />}
+        />
+      </Col>
+      <Col xs>
+        <KeyValue
+          label={<FormattedMessage id="ui-inventory.isbn" />}
+          value={isbn || <FormattedMessage id="ui-inventory.notAvailable" />}
+        />
+      </Col>
+      <Col xs>
+        <KeyValue
+          label={<FormattedMessage id="ui-inventory.issn" />}
+          value={issn || <FormattedMessage id="ui-inventory.notAvailable" />}
+        />
+      </Col>
+      <Col xs>
+        <KeyValue
+          label={<FormattedMessage id="ui-inventory.format" />}
+          value={format || <FormattedMessage id="ui-inventory.notAvailable" />}
+        />
+      </Col>
+      <Col xs>
+        <Field
+          component={Select}
+          label={<FormattedMessage id="ui-inventory.typeOfRelation" />}
+          name={`${field}.relatedInstanceTypeId`}
+          dataOptions={relatedInstanceTypes}
+          placeholder={intl.formatMessage({ id: 'ui-inventory.selectType' })}
+          required
+          disabled={isDisabled}
+        />
+      </Col>
+    </Row>
+  );
+};
+
+InstanceField.propTypes = {
+  field: PropTypes.string,
+  fields: PropTypes.object,
+  index: PropTypes.number,
+  isDisabled: PropTypes.bool,
+  relatedInstanceTypes: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default InstanceField;

src/Instance/InstanceEdit/RelatedInstanceField/index.js

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

src/Instance/InstanceEdit/RelatedInstanceFields/RelatedInstanceFields.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FieldArray } from 'react-final-form-arrays';
+import { FormattedMessage } from 'react-intl';
+
+import { RepeatableField } from '@folio/stripes/components';
+
+import RelatedInstanceField from '../RelatedInstanceField';
+
+const RelatedInstanceFields = ({
+  canAdd,
+  canEdit,
+  canDelete,
+  isDisabled,
+  relatedInstanceTypes,
+}) => (
+  <FieldArray
+    addLabel={<FormattedMessage id="ui-inventory.addRelatedInstance" />}
+    id="clickable-add-related-instance"
+    component={RepeatableField}
+    name="relatedInstances"
+    canAdd={canAdd}
+    canRemove={canDelete}
+    canEdit={canEdit}
+    renderField={(field, index, fields) => (
+      <RelatedInstanceField
+        field={field}
+        index={index}
+        fields={fields}
+        isDisabled={isDisabled}
+        relatedInstanceTypes={relatedInstanceTypes}
+      />
+    )}
+  />
+);
+
+RelatedInstanceFields.propTypes = {
+  canAdd: PropTypes.bool,
+  canEdit: PropTypes.bool,
+  canDelete: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  relatedInstanceTypes: PropTypes.arrayOf(PropTypes.object),
+};
+
+RelatedInstanceFields.defaultProps = {
+  canAdd: true,
+  canEdit: true,
+  canDelete: true,
+  isDisabled: false,
+};
+
+export default RelatedInstanceFields;

src/Instance/InstanceEdit/RelatedInstanceFields/RelatedInstanceFields.test.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { noop, keyBy } from 'lodash';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Button } from '@folio/stripes-testing';
+
+import '../../../../test/jest/__mock__';
+
+import { StripesContext } from '@folio/stripes-core/src/StripesContext';
+import stripesFinalForm from '@folio/stripes/final-form';
+
+import { DataContext } from '../../../contexts';
+import {
+  renderWithIntl,
+  translationsProperties,
+  stripesStub,
+} from '../../../../test/jest/helpers';
+import {
+  identifierTypes,
+  instanceRelationshipTypes,
+  relatedInstances,
+  relatedInstanceTypes,
+} from '../../../../test/fixtures';
+
+import RelatedInstanceFields from './RelatedInstanceFields';
+
+export const relatedInstanceOptions = relatedInstanceTypes.map(it => ({
+  label: it.name,
+  value: it.id,
+}));
+
+const Form = stripesFinalForm({})(({ children }) => <form>{children}</form>);
+
+const RelatedInstanceFieldsSetup = () => (
+  <Router>
+    <StripesContext.Provider value={stripesStub}>
+      <DataContext.Provider value={{
+        contributorTypes: [],
+        identifierTypes,
+        identifierTypesById: keyBy(identifierTypes, 'id'),
+        identifierTypesByName: keyBy(identifierTypes, 'name'),
+        instanceRelationshipTypes,
+        instanceRelationshipTypesById: keyBy(identifierTypes, 'id'),
+        instanceFormats: [],
+        modesOfIssuance: [],
+        natureOfContentTerms: [],
+        tagsRecords: [],
+      }}
+      >
+        <Form onSubmit={noop} initialValues={{ relatedInstances }}>
+          <RelatedInstanceFields relationshipTypes={relatedInstanceOptions} />
+        </Form>
+      </DataContext.Provider>
+    </StripesContext.Provider>
+  </Router>
+);
+
+describe('RelatedInstanceFields', () => {
+  beforeEach(() => {
+    renderWithIntl(
+      <RelatedInstanceFieldsSetup />,
+      translationsProperties
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render related instances', () => {
+    expect(document.querySelectorAll('#clickable-add-related-instance li').length).toEqual(1);
+  });
+
+  describe('change related instance', () => {
+    beforeEach(async () => {
+      await Button('+').click();
+    });
+
+    it('should change instance', () => {
+      expect(document.querySelectorAll('[data-test="related-instance-title-0"] .kvValue')[0].innerHTML).toEqual('new instance');
+    });
+  });
+
+  describe('add related instance', () => {
+    beforeEach(async () => {
+      await Button('Add related instance').click();
+    });
+
+    it('should add related instance', () => {
+      expect(document.querySelectorAll('#clickable-add-related-instance li').length).toEqual(2);
+    });
+  });
+});

src/Instance/InstanceEdit/RelatedInstanceFields/index.js

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