UIDATIMP-1503: Match profile: update options for Item "Incoming records"

UIDATIMP-1505: Match profile: update options for MARC Authority "Incoming records"
folio-org · Sep 22, 2023 · 1d3bf7e · 1d3bf7e
1 parent 9752f4a
commit 1d3bf7e
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 110 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,8 @@
 * Extend schema for profile relations manipulations (UIDATIMP-1471)
 * Change validation messages which were represented in code format (UIDATIMP-1473)
 * *BREAKING* bump `react` to `v18`, and dev-deps accordingly (UIDATIMP-1485)
+* Match profile: update options for Item "Incoming records" (UIDATIMP-1503)
+* Match profile: update options for MARC Authority "Incoming records" (UIDATIMP-1505)
 * Update Node.js to v18 in GitHub Actions (UIDATIMP-1507)
 * leverage jest-config-stripes for all jest and testing-library packages (UIDATIMP-1508)
 * *BREAKING* bump `react-intl` to `v6.4.4` (UIDATIMP-1520)

diff --git a/src/components/RecordTypesSelect/RecordTypesSelect.js b/src/components/RecordTypesSelect/RecordTypesSelect.js
@@ -2,11 +2,13 @@ import React, {
   memo,
   useState,
   useEffect,
+  useMemo,
 } from 'react';
 import PropTypes from 'prop-types';
 import {
   debounce,
   noop,
+  pick,
 } from 'lodash';
 
 import { FOLIO_RECORD_TYPES } from '@folio/stripes-data-transfer-components';
@@ -19,7 +21,7 @@ import { MATCH_INCOMING_RECORD_TYPES } from '../../utils';
 const useForceUpdate = () => useState()[1];
 
 const useUpdateOnResize = () => {
-  // forceUpdate is used to re-render elements that are depending on DOM such as TreeLine
+  // forceUpdate is used to re-render elements that depend on DOM such as TreeLine
   const forceUpdate = useForceUpdate();
 
   useEffect(() => {
@@ -33,29 +35,75 @@ const useUpdateOnResize = () => {
 
 export const RecordTypesSelect = memo(({
   id,
-  existingRecordType,
-  incomingRecordType,
+  existingRecordType: initialExistingRecord,
+  incomingRecordType: initialIncomingRecord,
   onExistingSelect,
   onIncomingSelect,
   isEditable,
 }) => {
   const IS_LOCALE_LTR = document.dir === HTML_LANG_DIRECTIONS.LEFT_TO_RIGHT;
 
   useUpdateOnResize();
-  const [existingRecord, setExistingRecord] = useState(undefined);
-  const [incomingRecord, setIncomingRecord] = useState(undefined);
+  const [existingRecord, setExistingRecord] = useState(FOLIO_RECORD_TYPES[initialExistingRecord]);
+  const [incomingRecord, setIncomingRecord] = useState(MATCH_INCOMING_RECORD_TYPES[initialIncomingRecord]);
+  const existingRecordType = existingRecord?.type;
 
-  useEffect(() => {
-    setExistingRecord(FOLIO_RECORD_TYPES?.[existingRecordType]);
-  }, [existingRecordType]);
+  const getIncomingRecordOptions = (recordType) => {
+    switch (recordType) {
+      case FOLIO_RECORD_TYPES.INSTANCE.type: {
+        return pick(MATCH_INCOMING_RECORD_TYPES, [
+          MATCH_INCOMING_RECORD_TYPES.MARC_BIBLIOGRAPHIC.type,
+          MATCH_INCOMING_RECORD_TYPES.STATIC_VALUE.type,
+        ]);
+      }
+      case FOLIO_RECORD_TYPES.HOLDINGS.type: {
+        return pick(MATCH_INCOMING_RECORD_TYPES, [
+          MATCH_INCOMING_RECORD_TYPES.MARC_BIBLIOGRAPHIC.type,
+          MATCH_INCOMING_RECORD_TYPES.STATIC_VALUE.type,
+        ]);
+      }
+      case FOLIO_RECORD_TYPES.ITEM.type: {
+        return pick(MATCH_INCOMING_RECORD_TYPES, [
+          MATCH_INCOMING_RECORD_TYPES.MARC_BIBLIOGRAPHIC.type,
+          MATCH_INCOMING_RECORD_TYPES.STATIC_VALUE.type,
+        ]);
+      }
+      case FOLIO_RECORD_TYPES.MARC_BIBLIOGRAPHIC.type: {
+        return pick(MATCH_INCOMING_RECORD_TYPES, [
+          MATCH_INCOMING_RECORD_TYPES.MARC_BIBLIOGRAPHIC.type,
+          MATCH_INCOMING_RECORD_TYPES.STATIC_VALUE.type,
+        ]);
+      }
+      case FOLIO_RECORD_TYPES.MARC_AUTHORITY.type: {
+        return pick(MATCH_INCOMING_RECORD_TYPES, [
+          MATCH_INCOMING_RECORD_TYPES.MARC_AUTHORITY.type,
+          MATCH_INCOMING_RECORD_TYPES.STATIC_VALUE.type,
+        ]);
+      }
+      default: {
+        return MATCH_INCOMING_RECORD_TYPES;
+      }
+    }
+  };
 
-  useEffect(() => {
-    setIncomingRecord(MATCH_INCOMING_RECORD_TYPES?.[incomingRecordType]);
-  }, [incomingRecordType]);
+  const incomingRecordOptions = useMemo(
+    () => getIncomingRecordOptions(existingRecordType),
+    [existingRecordType],
+  );
 
-  const handleSelect = selectedRecord => {
-    setExistingRecord(selectedRecord);
+  const handleIncomingRecordSelect = selectedRecord => {
+    onIncomingSelect(selectedRecord);
+    setIncomingRecord(selectedRecord);
+  };
+
+  const handleExistingRecordSelect = selectedRecord => {
     onExistingSelect(selectedRecord);
+    setExistingRecord(selectedRecord);
+
+    const updatedIncomingRecordOptions = getIncomingRecordOptions(selectedRecord.type);
+    const defaultIncomingRecord = Object.values(updatedIncomingRecordOptions)[0];
+
+    handleIncomingRecordSelect(defaultIncomingRecord);
   };
 
   return (
@@ -69,16 +117,17 @@ export const RecordTypesSelect = memo(({
             id={id}
             incomingRecord={incomingRecord}
             existingRecord={existingRecord}
-            setExistingRecord={handleSelect}
-            setIncomingRecord={onIncomingSelect}
+            setExistingRecord={handleExistingRecordSelect}
+            setIncomingRecord={handleIncomingRecordSelect}
+            incomingRecordOptions={incomingRecordOptions}
             isEditable={isEditable}
             isLocalLTR={IS_LOCALE_LTR}
           />
         )
         : (
           <InitialRecordSelect
             id={id}
-            onItemSelect={handleSelect}
+            onItemSelect={handleExistingRecordSelect}
             isEditable={isEditable}
             isLocalLTR={IS_LOCALE_LTR}
           />

diff --git a/src/components/RecordTypesSelect/components/CompareRecordSelect.js b/src/components/RecordTypesSelect/components/CompareRecordSelect.js
@@ -38,6 +38,7 @@ export const CompareRecordSelect = memo(({
   existingRecord,
   setExistingRecord,
   setIncomingRecord,
+  incomingRecordOptions,
   isEditable,
   isLocalLTR,
 }) => {
@@ -145,6 +146,7 @@ export const CompareRecordSelect = memo(({
             className={css.incomingRecord}
             style={{ height }}
             isEditable={isEditable}
+            incomingRecordOptions={incomingRecordOptions}
           />
           <div
             ref={compareElemRef}
@@ -193,6 +195,7 @@ CompareRecordSelect.propTypes = {
   setIncomingRecord: PropTypes.func,
   incomingRecord: PropTypes.object,
   existingRecord: PropTypes.object,
+  incomingRecordOptions: PropTypes.object,
   isEditable: PropTypes.bool,
   isLocalLTR: PropTypes.bool,
 };

diff --git a/src/components/RecordTypesSelect/components/CompareRecordSelect.test.js b/src/components/RecordTypesSelect/components/CompareRecordSelect.test.js
@@ -8,6 +8,7 @@ import {
 import '../../../../test/jest/__mock__';
 
 import { CompareRecordSelect } from './CompareRecordSelect';
+import { MATCH_INCOMING_RECORD_TYPES } from '../../../utils';
 
 const compareRecordSelectProps = {
   id: 'match.value-type.static-value',
@@ -33,6 +34,7 @@ const renderCompareRecordSelect = ({
     <CompareRecordSelect
       existingRecord={existingRecord}
       incomingRecord={incomingRecord}
+      incomingRecordOptions={MATCH_INCOMING_RECORD_TYPES}
       isLocalLTR={isLocalLTR}
       id={id}
     />

diff --git a/src/components/RecordTypesSelect/components/IncomingRecordMenu.js b/src/components/RecordTypesSelect/components/IncomingRecordMenu.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import { omit } from 'lodash';
 
 import {
   Button,
@@ -16,9 +15,8 @@ export const IncomingRecordMenu = ({
   onToggle,
   keyHandler,
   dataAttributes,
+  incomingRecordOptions,
 }) => {
-  const incomingRecordTypes = omit(MATCH_INCOMING_RECORD_TYPES, MATCH_INCOMING_RECORD_TYPES.MARC_HOLDINGS.type);
-
   return (
     <DropdownMenu
       role="menu"
@@ -29,7 +27,7 @@ export const IncomingRecordMenu = ({
       open={open}
       minWidth="auto"
     >
-      {Object.keys(incomingRecordTypes).map((recordType, i) => {
+      {Object.keys(incomingRecordOptions).map((recordType, i) => {
         return (
           <Button
             key={i}
@@ -47,6 +45,7 @@ export const IncomingRecordMenu = ({
 };
 
 IncomingRecordMenu.propTypes = {
+  incomingRecordOptions: PropTypes.object.isRequired,
   open: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
   onToggle: PropTypes.func.isRequired,

diff --git a/src/components/RecordTypesSelect/components/IncomingRecordMenu.test.js b/src/components/RecordTypesSelect/components/IncomingRecordMenu.test.js
@@ -10,6 +10,7 @@ import {
 import '../../../../test/jest/__mock__';
 
 import { IncomingRecordMenu } from './IncomingRecordMenu';
+import { MATCH_INCOMING_RECORD_TYPES } from '../../../utils';
 
 const onClick = jest.fn();
 
@@ -20,6 +21,7 @@ const renderIncomingRecordMenu = ({ open }) => {
       onClick={onClick}
       onToggle={noop}
       keyHandler={noop}
+      incomingRecordOptions={MATCH_INCOMING_RECORD_TYPES}
     />
   );
 

diff --git a/src/components/RecordTypesSelect/components/RecordItem.js b/src/components/RecordTypesSelect/components/RecordItem.js
@@ -26,6 +26,7 @@ export const RecordItem = memo(({
   onClick,
   isEditable,
   onToggle,
+  incomingRecordOptions,
 }) => {
   const ref = useRef();
   const [recordSelectorOpen, setRecordSelectorOpen] = useState(false);
@@ -55,6 +56,7 @@ export const RecordItem = memo(({
         onClick(record);
         setRecordSelectorOpen(!recordSelectorOpen);
       }}
+      incomingRecordOptions={incomingRecordOptions}
       {...menuProps}
     />
   );
@@ -117,6 +119,7 @@ RecordItem.propTypes = {
   onClick: PropTypes.func,
   isEditable: PropTypes.bool,
   onToggle: PropTypes.func,
+  incomingRecordOptions: PropTypes.object,
 };
 
 RecordItem.defaultProps = {

diff --git a/src/components/RecordTypesSelect/components/RecordItem.test.js b/src/components/RecordTypesSelect/components/RecordItem.test.js
@@ -9,6 +9,7 @@ import {
 import '../../../../test/jest/__mock__';
 
 import { RecordItem } from './RecordItem';
+import { MATCH_INCOMING_RECORD_TYPES } from '../../../utils';
 
 const onClick = jest.fn();
 
@@ -31,6 +32,7 @@ const renderRecordItem = ({
       className={className}
       isEditable={isEditable}
       onClick={onClick}
+      incomingRecordOptions={MATCH_INCOMING_RECORD_TYPES}
     />
   );
 

diff --git a/src/settings/MatchProfiles/MatchProfilesForm.js b/src/settings/MatchProfiles/MatchProfilesForm.js
@@ -117,11 +117,11 @@ const validate = values => {
     }
   };
 
-  if (isMARCType(incomingRecordType)) {
+  if (isMARCType(incomingRecordType) && !isEmpty(incomingRecordFields)) {
     validateMARCRecordFields('incoming', incomingRecordFields);
   }
 
-  if (isMARCType(existingRecordType)) {
+  if (isMARCType(existingRecordType) && !isEmpty(existingRecordFields)) {
     validateMARCRecordFields('existing', existingRecordFields);
   } else if (!existingRecordFields[0].value) {
     set(errors, 'profile.matchDetails[0].existingMatchExpression.fields[0].value', enterValueMessage);
@@ -147,8 +147,8 @@ export const MatchProfilesFormComponent = memo(({
 
   const { profile } = initialValues;
   const {
-    existingRecordType,
-    incomingRecordType,
+    existingRecordType: initialExistingRecordType,
+    incomingRecordType: initialIncomingRecordType,
     name,
     matchDetails,
   } = profile;
@@ -161,8 +161,8 @@ export const MatchProfilesFormComponent = memo(({
 
   const currentStaticValueType = get(form.getState(), ['values', 'profile', 'matchDetails', '0', 'incomingMatchExpression', 'staticValueDetails', 'staticValueType'], null);
 
-  const [incomingRecord, setIncomingRecord] = useState(MATCH_INCOMING_RECORD_TYPES[incomingRecordType]);
-  const [existingRecord, setExistingRecord] = useState(existingRecordType || '');
+  const [incomingRecord, setIncomingRecord] = useState(MATCH_INCOMING_RECORD_TYPES[initialIncomingRecordType]);
+  const [existingRecord, setExistingRecord] = useState(FOLIO_RECORD_TYPES[initialExistingRecordType]);
   const [existingRecordFields, setExistingRecordFields] = useState([]);
   const [staticValueType, setStaticValueType] = useState(currentStaticValueType);
   const [isConfirmEditModalOpen, setConfirmModalOpen] = useState(false);
@@ -182,7 +182,7 @@ export const MatchProfilesFormComponent = memo(({
 
   const getInitialFields = (matchFields, getDropdownOptions) => {
     if (isEditMode || isDuplicateMode) {
-      const matches = matchFields(jsonSchemas[existingRecordType], existingRecordType);
+      const matches = matchFields(jsonSchemas[initialExistingRecordType], initialExistingRecordType);
 
       return getDropdownOptions(matches);
     }
@@ -243,11 +243,12 @@ export const MatchProfilesFormComponent = memo(({
     }
   };
 
-  const handleExistingRecordChange = (type, matchFields, getDropdownOptions) => {
+  const handleExistingRecordChange = (record, matchFields, getDropdownOptions) => {
+    const { type } = record;
     const matches = matchFields(jsonSchemas[type], type);
     const options = getDropdownOptions(matches);
 
-    setExistingRecord(type);
+    setExistingRecord(record);
     setExistingRecordFields(options);
     changeFormState('profile.existingRecordType', type);
     matchDetails.forEach((item, i) => {
@@ -268,7 +269,7 @@ export const MatchProfilesFormComponent = memo(({
     ? formatMessage({ id: incomingRecord.captionId })
     : '';
   const existingRecordLabel = !isEmpty(existingRecord)
-    ? formatMessage({ id: FOLIO_RECORD_TYPES[existingRecord].captionId })
+    ? formatMessage({ id: existingRecord.captionId })
     : '';
 
   return (
@@ -337,9 +338,9 @@ export const MatchProfilesFormComponent = memo(({
                   <>
                     <RecordTypesSelect
                       id="panel-existing-edit"
-                      existingRecordType={existingRecordType}
-                      incomingRecordType={incomingRecordType}
-                      onExistingSelect={({ type }) => handleExistingRecordChange(type, matchFields, getDropdownOptions)}
+                      existingRecordType={initialExistingRecordType}
+                      incomingRecordType={initialIncomingRecordType}
+                      onExistingSelect={(record) => handleExistingRecordChange(record, matchFields, getDropdownOptions)}
                       onIncomingSelect={handleIncomingRecordChange}
                     />
                     <Accordion
@@ -356,8 +357,8 @@ export const MatchProfilesFormComponent = memo(({
                           <MatchCriterion
                             repeatableIndex={index}
                             matchDetails={field}
-                            incomingRecordType={incomingRecord.type}
-                            existingRecordType={existingRecord}
+                            incomingRecordType={incomingRecord?.type}
+                            existingRecordType={existingRecord?.type}
                             staticValueType={staticValueType}
                             incomingRecordLabel={incomingRecordLabel}
                             existingRecordLabel={existingRecordLabel}