UIIN-3170: Add Version history button and Version history pane to det…

…ails view of Instance
folio-org · Feb 7, 2025 · 11828d3 · 11828d3
1 parent 2a2251e
commit 11828d3
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,7 @@
 * Remove hover-over text next to "Shelving order" on the Item record detail view. Refs UIIN-3210.
 * CI: Switch to centralized/shared workflow from https://github.com/folio-org/.github. Fixes UIIN-3218.
 * 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 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)

diff --git a/src/Instance/InstanceDetails/InstanceDetails.js b/src/Instance/InstanceDetails/InstanceDetails.js
@@ -26,7 +26,9 @@ import {
   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 { InstanceRelationshipView } from './InstanceRelationshipView';
 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,6 +95,7 @@ const InstanceDetails = forwardRef(({
   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;
@@ -112,6 +116,7 @@ const InstanceDetails = forwardRef(({
             />
           )
         }
+        <VersionHistoryButton onClick={() => setIsVersionHistoryOpen(true)} />
       </PaneMenu>
     );
   }, [tagsEnabled, tags, intl]);
@@ -156,7 +161,7 @@ const InstanceDetails = forwardRef(({
   };
 
   return (
-    <>
+    <Paneset>
       <Pane
         {...rest}
         data-test-instance-details
@@ -301,6 +306,11 @@ const InstanceDetails = forwardRef(({
           </AccordionSet>
         </AccordionStatus>
       </Pane>
+      {isVersionHistoryOpen && (
+        <VersionHistory
+          onClose={() => setIsVersionHistoryOpen(false)}
+        />
+      )}
       { helperApp &&
         <HelperApp
           getEntity={getEntity}
@@ -309,7 +319,7 @@ const InstanceDetails = forwardRef(({
           onClose={setHelperApp}
         />
       }
-    </>
+    </Paneset>
   );
 });
 

diff --git a/src/Instance/InstanceDetails/InstanceDetails.test.js b/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 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();
+      });
+    });
+  });
 });