UIIN-3172: Add Version history button and Version history pane to details view of Item

CHANGELOG.md

@@ -15,6 +15,7 @@
 * ECS: Disable opening item details if a user is not affiliated with item's member tenant. Fixes UIIN-3187.
 * Correctly depend on `inflected`. Refs UIIN-3203.
 * Decrease the amount of rerenders in `ConsortialHoldings` component. Fixes UIIN-3196.
+* Add Version history button and Version history pane to details view of Item. Refs UIIN-3172.
 
 ## [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/views/ItemView.js

@@ -52,6 +52,7 @@ import {
   MenuSection,
   NoValue,
   TextLink,
+  PaneMenu,
 } from '@folio/stripes/components';
 
 import {
@@ -69,6 +70,7 @@ import {
   useOkapiKy,
 } from '@folio/stripes/core';
 
+import { VersionHistoryButton } from '@folio/stripes-acq-components';
 import { requestsStatusString } from '../Instance/ViewRequests/utils';
 
 import ModalContent from '../components/ModalContent';
@@ -117,6 +119,7 @@ import {
   useHoldingMutation,
   useUpdateOwnership,
 } from '../hooks';
+import { VersionHistory } from './VersionHistory';
 
 export const requestStatusFiltersString = map(REQUEST_OPEN_STATUSES, requestStatus => `requestStatus.${requestStatus}`).join(',');
 
@@ -161,6 +164,7 @@ const ItemView = props => {
   const [updateOwnershipData, setUpdateOwnershipData] = useState({});
   const [tenants, setTenants] = useState([]);
   const [targetTenant, setTargetTenant] = useState({});
+  const [isVersionHistoryOpen, setIsSetVersionHistoryOpen] = useState(false);
 
   const intl = useIntl();
   const calloutContext = useContext(CalloutContext);
@@ -621,6 +625,10 @@ const ItemView = props => {
   const temporaryHoldingsLocation = locationsById[holdingsRecord?.temporaryLocationId];
   const tagsEnabled = !tagSettings?.records?.length || tagSettings?.records?.[0]?.value === 'true';
 
+  const openVersionHistory = useCallback(() => {
+    setIsSetVersionHistoryOpen(true);
+  }, []);
+
   const refLookup = (referenceTable, id) => {
     const ref = (referenceTable && id) ? referenceTable.find(record => record.id === id) : {};
 
@@ -984,7 +992,8 @@ const ItemView = props => {
       <Paneset isRoot>
         <Pane
           data-test-item-view-page
-          defaultWidth="100%"
+          defaultWidth="fill"
+          id="item-view-pane"
           appIcon={(
             <AppIcon
               app="inventory"
@@ -1014,6 +1023,11 @@ const ItemView = props => {
           dismissible
           onClose={onCloseViewItem}
           actionMenu={getActionMenu}
+          lastMenu={(
+            <PaneMenu>
+              <VersionHistoryButton onClick={openVersionHistory} />
+            </PaneMenu>
+          )}
         >
           <UpdateItemOwnershipModal
             isOpen={isUpdateOwnershipModalOpen}
@@ -1732,6 +1746,11 @@ const ItemView = props => {
             </AccordionSet>
           </AccordionStatus>
         </Pane>
+        {isVersionHistoryOpen && (
+          <VersionHistory
+            onClose={() => setIsSetVersionHistoryOpen(false)}
+          />
+        )}
       </Paneset>
     </HasCommand>
   );

src/views/ItemView.test.js

@@ -8,6 +8,7 @@ import {
   fireEvent,
   within,
 } from '@folio/jest-config-stripes/testing-library/react';
+import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
 import { runAxeTest } from '@folio/stripes-testing';
 
 import '../../test/jest/__mock__';
@@ -296,6 +297,41 @@ describe('ItemView', () => {
         expect(mockPush).toHaveBeenCalled();
       });
     });
+
+    describe('Version history component', () => {
+      let versionHistoryButton;
+
+      beforeEach(() => {
+        const { container } = renderWithIntl(<ItemViewSetup />, translationsProperties);
+
+        versionHistoryButton = container.querySelector('#version-history-btn');
+      });
+
+      it('should render version history button', () => {
+        expect(versionHistoryButton).toBeInTheDocument();
+      });
+
+      describe('when click the button', () => {
+        it('should render version history pane', async () => {
+          await 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 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 userEvent.click(closeButton);
+
+          expect(screen.queryByRole('region', { name: /version history/i })).not.toBeInTheDocument();
+        });
+      });
+    });
   });
 
   describe('action menu', () => {

src/views/VersionHistory/VersionHistory.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+
+import {
+  VersionHistoryPane,
+  VersionViewContextProvider,
+} from '@folio/stripes-acq-components';
+
+const VersionHistory = ({ onClose }) => {
+  return (
+    <VersionViewContextProvider
+      snapshotPath=""
+      versions={[]}
+      versionId={null}
+    >
+      <VersionHistoryPane
+        currentVersion={null}
+        id="inventory"
+        isLoading={false}
+        onClose={onClose}
+        onSelectVersion={() => {}}
+        snapshotPath=""
+        labelsMap={{}}
+        versions={[]}
+        hiddenFields={[]}
+      />
+    </VersionViewContextProvider>
+  );
+};
+
+VersionHistory.propTypes = {
+  onClose: PropTypes.func,
+};
+
+
+export default VersionHistory;

src/views/VersionHistory/index.js

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

translations/ui-inventory/en.json

@@ -879,5 +879,7 @@
   "settings.section.displaySettings": "Display settings",
   "settings.displaySettings.defaultSort": "Default sort",
 
-  "instance.linked.id": "Linked instance ID - {id}"
+  "instance.linked.id": "Linked instance ID - {id}",
+
+  "versionHistory.paneTitle": "Version history"
 }