UXPROD-4125: Add Change log icon to details view of Instance, Holdings, Items

CHANGELOG.md

@@ -20,6 +20,9 @@
 * CI: Switch to centralized/shared workflow from https://github.com/folio-org/.github. Fixes UIIN-3218.
 * Set correct widths for Call number browse results columns. Fixes UIIN-3229.
 * Display actual instance state (shared or local) when user is using "Drag and drop" to move inventory records. Fixes UIIN-3185.
+* Add Version history button and Version history pane to details view of Item. Refs UIIN-3172.
+* Add Version history button and Version history pane to details view of Holdings. Refs UIIN-3171.
+* Add Version history button and Version history pane to details view of Instance. Refs UIIN-3170.
 
 ## [12.0.12](https://github.com/folio-org/ui-inventory/tree/v12.0.12) (2025-01-27)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v12.0.11...v12.0.12)

src/Instance/InstanceDetails/InstanceDetails.js

@@ -26,7 +26,9 @@
   Row,
   MessageBanner,
   PaneCloseLink,
+  Paneset,
 } from '@folio/stripes/components';
+import { VersionHistoryButton } from '@folio/stripes-acq-components';
 
 import { InstanceTitle } from './InstanceTitle';
 import { InstanceAdministrativeView } from './InstanceAdministrativeView';
@@ -42,6 +44,7 @@
 import { InstanceNewHolding } from './InstanceNewHolding';
 import { InstanceAcquisition } from './InstanceAcquisition';
 import HelperApp from '../../components/HelperApp';
+import { VersionHistory } from '../../views/VersionHistory';
 
 import { DataContext } from '../../contexts';
 import { ConsortialHoldings } from '../HoldingsList/consortium/ConsortialHoldings';
@@ -92,11 +95,13 @@
   const accordionState = useMemo(() => getAccordionState(instance, accordions), [instance]);
   const [helperApp, setHelperApp] = useState();
   const [isAllExpanded, setIsAllExpanded] = useState();
+  const [isVersionHistoryOpen, setIsVersionHistoryOpen] = useState(false);
 
   const canCreateHoldings = stripes.hasPerm('ui-inventory.holdings.create');
   const tags = instance?.tags?.tagList;
   const isUserInCentralTenant = checkIfUserInCentralTenant(stripes);
   const isConsortialHoldingsVisible = instance?.shared || isInstanceShadowCopy(instance?.source);
+  const isUserInConsortium = isUserInConsortiumMode(stripes);
 
   const detailsLastMenu = useMemo(() => {
     return (
@@ -112,6 +117,7 @@
             />
           )
         }
+        <VersionHistoryButton onClick={() => setIsVersionHistoryOpen(true)} />
       </PaneMenu>
     );
   }, [tagsEnabled, tags, intl]);
@@ -122,32 +128,35 @@
 
   const getEntity = () => instance;
 
-  const renderPaneTitle = () => {
-    const isInstanceShared = Boolean(isShared || isInstanceShadowCopy(instance?.source));
+  const paneTitle = useMemo(
+    () => {
+      const isInstanceShared = Boolean(isShared || isInstanceShadowCopy(instance?.source));
 
-    return (
-      <FormattedMessage
-        id={`ui-inventory.${isUserInConsortiumMode(stripes) ? 'consortia.' : ''}instanceRecordTitle`}
-        values={{
+      return intl.formatMessage(
+        { id: `ui-inventory.${isUserInConsortium ? 'consortia.' : ''}instanceRecordTitle` },
+        {
           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),
-        }}
-      />
-    );
-  };
+        }
+      );
+    },
+    [isShared, instance?.source, isUserInConsortium],
+  );
+  const paneSubTitle = useMemo(
+    () => {
+      return (
+        <FormattedMessage
+          id="ui-inventory.instanceRecordSubtitle"
+          values={{
+            hrid: instance?.hrid,
+            updatedDate: getDate(instance?.metadata?.updatedDate),
+          }}
+        />
+      );
+    },
+    [instance?.hrid, instance?.metadata?.updatedDate],
+  );
 
   const onToggle = newState => {
     const isExpanded = Object.values(newState)[0];
@@ -161,14 +170,14 @@
         {...rest}
         data-test-instance-details
         appIcon={<AppIcon app="inventory" iconKey="instance" />}
-        paneTitle={renderPaneTitle()}
-        paneSub={renderPaneSubtitle()}
+        paneTitle={paneTitle}
+        paneSub={paneSubTitle}
         actionMenu={actionMenu}
         firstMenu={(
           <PaneCloseLink
             autoFocus={location.state?.isClosingFocused}
             onClick={onClose}
-            aria-label={intl.formatMessage({ id: 'stripes-components.closeItem' }, { item: renderPaneTitle() })}
+            aria-label={intl.formatMessage({ id: 'stripes-components.closeItem' }, { item: paneTitle })}
           />
         )}
         lastMenu={detailsLastMenu}
@@ -301,6 +310,11 @@
           </AccordionSet>
         </AccordionStatus>
       </Pane>
+      {isVersionHistoryOpen && (
+        <VersionHistory
+          onClose={() => setIsVersionHistoryOpen(false)}
+        />
+      )}
       { helperApp &&
         <HelperApp
           getEntity={getEntity}

src/Instance/InstanceDetails/InstanceDetails.test.js

@@ -1,7 +1,12 @@
-import React from 'react';
+import React, { act } from 'react';
 import '../../../test/jest/__mock__';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { screen, fireEvent } from '@folio/jest-config-stripes/testing-library/react';
+import {
+  screen,
+  fireEvent,
+  within,
+} from '@folio/jest-config-stripes/testing-library/react';
+import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
 import { DataContext } from '../../contexts';
 import { renderWithIntl, translationsProperties } from '../../../test/jest/helpers';
@@ -206,4 +211,40 @@ describe('InstanceDetails', () => {
       expect(screen.queryByRole('button', { name: 'Consortial holdings' })).not.toBeInTheDocument();
     });
   });
+
+  describe('Version history component', () => {
+    let versionHistoryButton;
+
+    beforeEach(async () => {
+      await act(async () => { renderInstanceDetails(); });
+
+      versionHistoryButton = screen.getByRole('button', { name: /version history/i });
+    });
+
+    it('should render version history button', async () => {
+      expect(versionHistoryButton).toBeInTheDocument();
+    });
+
+    describe('when click the button', () => {
+      it('should render version history pane', async () => {
+        await act(() => userEvent.click(versionHistoryButton));
+
+        expect(screen.getByRole('region', { name: /version history/i })).toBeInTheDocument();
+      });
+    });
+
+    describe('when click the close button', () => {
+      it('should hide the pane', async () => {
+        await act(() => userEvent.click(versionHistoryButton));
+
+        const versionHistoryPane = await screen.findByRole('region', { name: /version history/i });
+        expect(versionHistoryPane).toBeInTheDocument();
+
+        const closeButton = await within(versionHistoryPane).findByRole('button', { name: /close/i });
+        await act(() => userEvent.click(closeButton));
+
+        expect(screen.queryByRole('region', { name: /version history/i })).not.toBeInTheDocument();
+      });
+    });
+  });
 });