UIIN-2605: ECS: Check when sharing instance with source=MARC is compl…

…ete before re-fetching it (#2300)

CHANGELOG.md

@@ -103,6 +103,7 @@
 * Use `==` for exact phrase search in Advanced Search for all full-text and term fields. Refs UIIN-2612.
 * Provide an instance `tenantId` to the PO line form when creating an order from the instance. Refs UIIN-2614.
 * Bump @folio/stripes-acq-components dependency version to 5.0.0. Refs UIIN-2620.
+* ECS: Check when sharing instance with source=MARC is complete before re-fetching it. Refs UIIN-2605.
 
 ## [9.4.12](https://github.com/folio-org/ui-inventory/tree/v9.4.12) (2023-09-21)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v9.4.11...v9.4.12)

src/Instance/InstanceDetails/InstanceDetails.js

@@ -19,6 +19,7 @@ import {
   PaneMenu,
   Row,
   MessageBanner,
+  Icon,
 } from '@folio/stripes/components';
 
 import { InstanceTitle } from './InstanceTitle';
@@ -36,9 +37,17 @@ import { InstanceNewHolding } from './InstanceNewHolding';
 import { InstanceAcquisition } from './InstanceAcquisition';
 import HelperApp from '../../components/HelperApp';
 
-import { getAccordionState } from './utils';
 import { DataContext } from '../../contexts';
 import { ConsortialHoldings } from './ConsortialHoldings';
+import {
+  getAccordionState,
+  getPublishingInfo,
+} from './utils';
+import {
+  getDate,
+  isInstanceShadowCopy,
+  isUserInConsortiumMode,
+} from '../../utils';
 
 const accordions = {
   administrative: 'acc01',
@@ -57,21 +66,22 @@ const accordions = {
 const InstanceDetails = forwardRef(({
   children,
   instance,
-  paneTitle,
-  paneSubtitle,
   onClose,
   actionMenu,
   tagsEnabled,
+  isShared,
+  isLoading,
   ...rest
 }, ref) => {
-  const stripes = useStripes();
   const intl = useIntl();
+  const stripes = useStripes();
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
 
   const referenceData = useContext(DataContext);
   const accordionState = useMemo(() => getAccordionState(instance, accordions), [instance]);
   const [helperApp, setHelperApp] = useState();
+
   const tags = instance?.tags?.tagList;
   const isUserInCentralTenant = checkIfUserInCentralTenant(stripes);
 
@@ -93,14 +103,61 @@ const InstanceDetails = forwardRef(({
     );
   }, [tagsEnabled, tags, intl]);
 
+  if (isLoading) {
+    return (
+      <Pane
+        id="pane-instancedetails"
+        defaultWidth="fill"
+        paneTitle={intl.formatMessage({ id: 'ui-inventory.edit' })}
+        appIcon={<AppIcon app="inventory" iconKey="instance" />}
+        dismissible
+        onClose={onClose}
+      >
+        <div style={{ paddingTop: '1rem' }}>
+          <Icon
+            icon="spinner-ellipsis"
+            width="100px"
+          />
+        </div>
+      </Pane>
+    );
+  }
+
+  const renderPaneTitle = () => {
+    const isInstanceShared = Boolean(isShared || isInstanceShadowCopy(instance?.source));
+
+    return (
+      <FormattedMessage
+        id={`ui-inventory.${isUserInConsortiumMode(stripes) ? 'consortia.' : ''}instanceRecordTitle`}
+        values={{
+          isShared: isInstanceShared,
+          title: instance?.title,
+          publisherAndDate: getPublishingInfo(instance),
+        }}
+      />
+    );
+  };
+
+  const renderPaneSubtitle = () => {
+    return (
+      <FormattedMessage
+        id="ui-inventory.instanceRecordSubtitle"
+        values={{
+          hrid: instance?.hrid,
+          updatedDate: getDate(instance?.metadata?.updatedDate),
+        }}
+      />
+    );
+  };
+
   return (
     <>
       <Pane
         {...rest}
         data-test-instance-details
         appIcon={<AppIcon app="inventory" iconKey="instance" />}
-        paneTitle={paneTitle}
-        paneSub={paneSubtitle}
+        paneTitle={renderPaneTitle()}
+        paneSub={renderPaneSubtitle()}
         dismissible
         onClose={onClose}
         actionMenu={actionMenu}
@@ -232,15 +289,17 @@ InstanceDetails.propTypes = {
   actionMenu: PropTypes.func,
   onClose: PropTypes.func.isRequired,
   instance: PropTypes.object,
-  paneTitle: PropTypes.object,
-  paneSubtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   tagsToggle: PropTypes.func,
   tagsEnabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isShared: PropTypes.bool,
 };
 
 InstanceDetails.defaultProps = {
   instance: {},
   tagsEnabled: false,
+  isLoading: false,
+  isShared: false,
 };
 
 export default InstanceDetails;

src/Instance/InstanceDetails/utils.js

@@ -20,7 +20,7 @@ export const getPublishingInfo = instance => {
   return undefined;
 };
 
-export const getAccordionState = (instance, accordions) => {
+export const getAccordionState = (instance = {}, accordions = {}) => {
   const instanceData = pick(
     instance,
     ['hrid', 'source', 'catalogedDate', 'statusId', 'statusUpdatedDate', 'modeOfIssuanceId', 'statisticalCodeIds'],