Merge branch 'UIIN-3171' of https://github.com/folio-org/ui-inventory …

…into UIIN-3171

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.
 * Add Version history button and Version history pane to details view of Holdings. Refs UIIN-3171.
 
 ## [12.0.12](https://github.com/folio-org/ui-inventory/tree/v12.0.12) (2025-01-27)

src/views/ItemView.js

@@ -1023,7 +1023,11 @@ const ItemView = props => {
           dismissible
           onClose={onCloseViewItem}
           actionMenu={getActionMenu}
-          lastMenu={<PaneMenu><VersionHistoryButton onClick={openVersionHistory} /></PaneMenu>}
+          lastMenu={(
+            <PaneMenu>
+              <VersionHistoryButton onClick={openVersionHistory} />
+            </PaneMenu>
+          )}
         >
           <UpdateItemOwnershipModal
             isOpen={isUpdateOwnershipModalOpen}

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', () => {

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"
 }