UIIN-1872: Display a Conflict Detection banner (folio-org#1568)

* UIIN-1872: Display a Conflict Detection banner
VSnehalatha · Jan 26, 2022 · 7bd7c51 · 7bd7c51
1 parent aae92aa
commit 7bd7c51
Show file tree

Hide file tree

Showing 15 changed files with 171 additions and 15 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -16,7 +16,8 @@
     {
       "files": [ "src/**"],
       "rules": {
-        "react-hooks/exhaustive-deps": "off"
+        "react-hooks/exhaustive-deps": "off",
+        "react/forbid-prop-types": [ 1, { "forbid": [ "array" ] } ]
       }
     }
   ],

diff --git a/package.json b/package.json
@@ -830,6 +830,7 @@
     "file-saver": "^2.0.0",
     "final-form": "^4.18.2",
     "final-form-arrays": "^3.0.1",
+    "history": "^5.0.0",
     "ky": "^0.23.0",
     "lodash": "^4.17.4",
     "moment": "~2.24.0",

diff --git a/src/Holding/EditHolding/EditHolding.js b/src/Holding/EditHolding/EditHolding.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { cloneDeep } from 'lodash';
@@ -17,23 +17,27 @@ import {
 } from '../../hooks';
 import HoldingsForm from '../../edit/holdings/HoldingsForm';
 import withLocation from '../../withLocation';
+import { parseHttpError } from '../../utils';
 
 const EditHolding = ({
   goTo,
   history,
   holdingId,
   instanceId,
-  location: { search, state: locationState },
+  location,
   referenceTables,
 }) => {
   const callout = useCallout();
+  const { search, state: locationState } = location;
   const stripes = useStripes();
+  const [httpError, setHttpError] = useState();
   const { instance, isLoading: isInstanceLoading } = useInstanceQuery(instanceId);
   const { holding, isLoading: isHoldingLoading } = useHolding(holdingId);
   const { totalRecords: itemCount, isLoading: isItemsLoading } = useHoldingItemsQuery(holdingId, {
     searchParams: { limit: 1 },
   });
 
+
   const isMARCRecord = useMemo(() => (
     referenceTables?.holdingsSources?.find(source => source.id === holding?.sourceId)?.name === 'MARC'
   ), [holding]);
@@ -57,6 +61,11 @@ const EditHolding = ({
     });
   }, [onCancel, callout]);
 
+  const onError = async error => {
+    const parsedError = await parseHttpError(error.response);
+    setHttpError(parsedError);
+  };
+
   const { mutateHolding } = useHoldingMutation({ onSuccess });
 
   const onSubmit = useCallback(holdingValues => {
@@ -65,13 +74,15 @@ const EditHolding = ({
     if (clonedHolding.permanentLocationId === '') delete clonedHolding.permanentLocationId;
     if (clonedHolding.temporaryLocationId === '') delete clonedHolding.temporaryLocationId;
 
-    return mutateHolding(clonedHolding);
+    return mutateHolding(clonedHolding).catch(onError);
   }, [mutateHolding]);
 
   if (isInstanceLoading || isItemsLoading || isHoldingLoading) return <LoadingView />;
 
   return (
     <HoldingsForm
+      httpError={httpError}
+      location={location}
       initialValues={holding}
       onSubmit={onSubmit}
       onCancel={onCancel}

diff --git a/src/Holding/EditHolding/EditHolding.test.js b/src/Holding/EditHolding/EditHolding.test.js
@@ -55,13 +55,13 @@ const renderEditHolding = (props = {}) => render(
 );
 
 describe('EditHolding', () => {
-  const mockMutate = jest.fn();
+  const mutateHolding = jest.fn(() => Promise.resolve({ data: {} }));
 
   beforeEach(() => {
     useInstanceQuery.mockClear();
     useHolding.mockClear();
     useHoldingItemsQuery.mockClear();
-    useHoldingMutation.mockClear().mockReturnValue({ mutateHolding: mockMutate });
+    useHoldingMutation.mockClear().mockReturnValue({ mutateHolding });
   });
 
   it('should render HoldingsForm', () => {
@@ -87,6 +87,21 @@ describe('EditHolding', () => {
       temporaryLocationId: '',
     });
 
-    expect(mockMutate).toHaveBeenCalled();
+    expect(mutateHolding).toHaveBeenCalled();
+  });
+
+  it('should handle optimistic locking exception', () => {
+    const error = new Error({ response: 'optimistic locking' });
+    mutateHolding.mockClear().mockImplementation(() => Promise.reject(error));
+
+    renderEditHolding();
+
+    HoldingsForm.mock.calls[0][0].onSubmit({
+      id: 'holdingId',
+      permanentLocationId: '',
+      temporaryLocationId: '',
+    });
+
+    expect(mutateHolding).toHaveBeenCalled();
   });
 });
diff --git a/src/Instance/InstanceEdit/InstanceEdit.js b/src/Instance/InstanceEdit/InstanceEdit.js
@@ -24,6 +24,7 @@ import InstanceForm from '../../edit/InstanceForm';
 import {
   marshalInstance,
   unmarshalInstance,
+  parseHttpError,
 } from '../../utils';
 import useLoadSubInstances from '../../hooks/useLoadSubInstances';
 import useCallout from '../../hooks/useCallout';
@@ -63,11 +64,16 @@ const InstanceEdit = ({
     goBack();
   }, [callout, goBack]);
 
+  const onError = async error => {
+    const parsedError = await parseHttpError(error);
+    setHttpError(parsedError);
+  };
+
   const onSubmit = useCallback((updatedInstance) => {
     return mutator.instanceEdit.PUT(marshalInstance(updatedInstance, identifierTypesByName))
       .then(() => onSuccess(updatedInstance))
-      .catch(err => setHttpError(err));
-  }, [identifierTypesByName, setHttpError]);
+      .catch(onError);
+  }, [identifierTypesByName, onError]);
 
   if (isInstanceLoading) return <LoadingView />;
 
@@ -77,13 +83,14 @@ const InstanceEdit = ({
     <>
       <InstanceForm
         onSubmit={onSubmit}
+        httpError={httpError}
         initialValues={initialValues}
         instanceSource={instance?.source}
         referenceTables={referenceData}
         stripes={stripes}
         onCancel={goBack}
       />
-      {httpError &&
+      {httpError && !httpError?.errorType &&
         <ErrorModal
           open
           label={<FormattedMessage id="ui-inventory.instance.saveError" />}

diff --git a/src/Instance/InstanceEdit/InstanceEdit.test.js b/src/Instance/InstanceEdit/InstanceEdit.test.js
@@ -16,7 +16,6 @@ import translations from '../../../test/jest/helpers/translationsProperties';
 import { instance } from '../../../test/fixtures';
 import InstanceEdit from './InstanceEdit';
 
-
 const queryClient = new QueryClient();
 const referenceData = {
   locationsById: {},

diff --git a/src/Item/EditItem/EditItem.js b/src/Item/EditItem/EditItem.js
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   useHistory,
@@ -17,6 +17,7 @@ import {
 } from '../../common';
 import ItemForm from '../../edit/items/ItemForm';
 import useCallout from '../../hooks/useCallout';
+import { parseHttpError } from '../../utils';
 import {
   useItem,
   useItemMutation,
@@ -30,7 +31,7 @@ const EditItem = ({
 }) => {
   const history = useHistory();
   const location = useLocation();
-
+  const [httpError, setHttpError] = useState();
   const { isLoading: isInstanceLoading, instance } = useInstanceQuery(instanceId);
   const { isLoading: isHoldingLoading, holding } = useHolding(holdingId);
   const { isLoading: isItemLoading, item } = useItem(itemId);
@@ -57,20 +58,28 @@ const EditItem = ({
     });
   }, [callout, instanceId, holdingId]);
 
+  const onError = async error => {
+    const parsedError = await parseHttpError(error.response);
+
+    setHttpError(parsedError);
+  };
+
+
   const { mutateItem } = useItemMutation({ onSuccess });
 
   const onSubmit = useCallback((values) => {
     if (!values.barcode) {
       delete item.barcode;
     }
 
-    return mutateItem(values);
+    return mutateItem(values).catch(onError);
   }, [mutateItem]);
 
   if (isInstanceLoading || isHoldingLoading || isItemLoading) return <LoadingView />;
 
   return (
     <ItemForm
+      httpError={httpError}
       form={`itemform_${holding.id}`}
       id={holding.id}
       key={holding.id}

diff --git a/src/Item/EditItem/EditItem.test.js b/src/Item/EditItem/EditItem.test.js
@@ -9,8 +9,9 @@ import {
   useInstanceQuery,
   useHolding,
 } from '../../common/hooks';
-import { useItem } from '../hooks';
+import { useItem, useItemMutation } from '../hooks';
 import EditItem from './EditItem';
+import ItemForm from '../../edit/items/ItemForm';
 
 jest.mock('../../edit/items/ItemForm', () => jest.fn().mockReturnValue('ItemForm'));
 jest.mock('../../hooks/useCallout', () => jest.fn().mockReturnValue({ sendCallout: jest.fn() }));
@@ -22,6 +23,7 @@ jest.mock('../../common/hooks', () => ({
 jest.mock('../hooks', () => ({
   ...jest.requireActual('../hooks'),
   useItem: jest.fn().mockReturnValue({ item: {}, isLoading: false }),
+  useItemMutation: jest.fn().mockReturnValue({ mutateItem: jest.fn() }),
 }));
 
 const defaultProps = {
@@ -51,10 +53,13 @@ const renderEditItem = (props = {}) => render(
 
 
 describe('EditItem', () => {
+  const mutateItem = jest.fn(() => Promise.resolve({ data: {} }));
+
   beforeEach(() => {
     useInstanceQuery.mockClear();
     useHolding.mockClear();
     useItem.mockClear();
+    useItemMutation.mockClear().mockReturnValue({ mutateItem });
   });
 
   it('should render ItemForm', () => {
@@ -70,4 +75,28 @@ describe('EditItem', () => {
 
     expect(screen.getByText('LoadingView')).toBeInTheDocument();
   });
+
+
+  it('should render LoadingView if page is loading', () => {
+    useInstanceQuery.mockReturnValue({ isLoading: true });
+
+    renderEditItem();
+
+    expect(screen.getByText('LoadingView')).toBeInTheDocument();
+  });
+
+  it('should handle optimistic locking exception', () => {
+    const error = new Error({ response: 'optimistic locking' });
+    mutateItem.mockClear().mockImplementation(() => Promise.reject(error));
+
+    renderEditItem();
+
+    ItemForm.mock.calls[0][0].onSubmit({
+      id: 'itemId',
+      permanentLocationId: '',
+      temporaryLocationId: '',
+    });
+
+    expect(mutateItem).toHaveBeenCalled();
+  });
 });
diff --git a/src/components/OptimisticLockingBanner/OptimisticLockingBanner.js b/src/components/OptimisticLockingBanner/OptimisticLockingBanner.js
@@ -0,0 +1,27 @@
+import { useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import { ConflictDetectionBanner } from '@folio/stripes/components';
+
+import { ERROR_TYPES } from '../../constants';
+
+const OptimisticLockingBanner = ({ latestVersionLink, httpError }) => {
+  const conflictDetectionBannerRef = useRef(null);
+  const focusConflictDetectionBanner = () => conflictDetectionBannerRef.current.focus();
+
+  return (
+    httpError?.errorType === ERROR_TYPES.OPTIMISTIC_LOCKING &&
+    <ConflictDetectionBanner
+      latestVersionLink={latestVersionLink}
+      conflictDetectionBannerRef={conflictDetectionBannerRef}
+      focusConflictDetectionBanner={focusConflictDetectionBanner}
+    />
+  );
+};
+
+OptimisticLockingBanner.propTypes = {
+  latestVersionLink: PropTypes.string,
+  httpError: PropTypes.object,
+};
+
+export default OptimisticLockingBanner;
diff --git a/src/components/OptimisticLockingBanner/index.js b/src/components/OptimisticLockingBanner/index.js
@@ -0,0 +1 @@
+export { default } from './OptimisticLockingBanner';
diff --git a/src/constants.js b/src/constants.js
@@ -283,3 +283,7 @@ export const FACETS_SETTINGS = {
   [FACETS_CQL.HOLDINGS_PERMANENT_LOCATION]: FACETS_OPTIONS.HOLDINGS_PERMANENT_LOCATION_OPTIONS,
   [FACETS_CQL.STATISTICAL_CODES]: FACETS_OPTIONS.STATISTICAL_CODES_OPTIONS,
 };
+
+export const ERROR_TYPES = {
+  OPTIMISTIC_LOCKING: 'optimisticLocking',
+};
diff --git a/src/edit/InstanceForm.js b/src/edit/InstanceForm.js
@@ -31,9 +31,11 @@ import {
   collapseAllSections,
   expandAllSections,
 } from '@folio/stripes/components';
+
 import stripesFinalForm from '@folio/stripes/final-form';
 
 import RepeatableField from '../components/RepeatableField';
+import OptimisticLockingBanner from '../components/OptimisticLockingBanner';
 
 import AlternativeTitles from './alternativeTitles';
 import AdministrativeNoteFields from './administrativeNoteFields';
@@ -249,6 +251,7 @@ class InstanceForm extends React.Component {
       pristine,
       submitting,
       history,
+      httpError,
       id,
     } = this.props;
 
@@ -344,6 +347,12 @@ class InstanceForm extends React.Component {
               actionMenu={this.getActionMenu}
               id={id}
             >
+              <OptimisticLockingBanner
+                httpError={httpError}
+                latestVersionLink={`/inventory/view/${initialValues.id}`}
+                conflictDetectionBannerRef={this.conflictDetectionBannerRef}
+                focusConflictDetectionBanner={this.focusConflictDetectionBanner}
+              />
               <div>
                 <Headline
                   size="large"
@@ -767,6 +776,7 @@ InstanceForm.propTypes = {
   instanceSource: PropTypes.string,
   history: PropTypes.object.isRequired,
   id: PropTypes.string,
+  httpError: PropTypes.object,
 };
 InstanceForm.defaultProps = {
   instanceSource: 'FOLIO',
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default } from './OptimisticLockingBanner';