UIIN-3175: Add Version history pane for Item view component

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.
+* Item view page: Display View history button and View history second pane. Refs UIIN-3175.
 
 ## [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,13 +164,21 @@ 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);
   const accordionStatusRef = useRef();
+  const paneTitleRef = useRef();
   const { mutateHolding } = useHoldingMutation(targetTenant?.id);
   const { updateOwnership } = useUpdateOwnership(UPDATE_OWNERSHIP_API.ITEMS);
 
+  useEffect(() => {
+    if (paneTitleRef.current) {
+      paneTitleRef.current.focus();
+    }
+  }, [isVersionHistoryOpen]);
+
   useEffect(() => {
     if (checkIfUserInMemberTenant(stripes)) {
       setTenants(omitCurrentAndCentralTenants(stripes));
@@ -621,6 +632,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 +999,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 +1030,11 @@ const ItemView = props => {
           dismissible
           onClose={onCloseViewItem}
           actionMenu={getActionMenu}
+          lastMenu={(
+            <PaneMenu>
+              <VersionHistoryButton onClick={openVersionHistory} />
+            </PaneMenu>
+          )}
         >
           <UpdateItemOwnershipModal
             isOpen={isUpdateOwnershipModalOpen}
@@ -1732,6 +1753,12 @@ const ItemView = props => {
             </AccordionSet>
           </AccordionStatus>
         </Pane>
+        {isVersionHistoryOpen && (
+          <VersionHistory
+            onClose={() => setIsSetVersionHistoryOpen(false)}
+            paneTitleRef={paneTitleRef}
+          />
+        )}
       </Paneset>
     </HasCommand>
   );

src/views/ItemView.test.js

@@ -296,6 +296,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', () => {
+          fireEvent.click(versionHistoryButton);
+
+          expect(screen.getByRole('region', { name: /version history/i })).toBeInTheDocument();
+        });
+      });
+
+      describe('when click the close button', () => {
+        it('should hide the pane', () => {
+          fireEvent.click(versionHistoryButton);
+
+          expect(screen.getByRole('region', { name: /version history/i })).toBeInTheDocument();
+
+          const closeButton = screen.getByRole('button', { name: /close version history/i });
+          fireEvent.click(closeButton);
+
+          expect(screen.queryByRole('region', { name: /version history/i })).not.toBeInTheDocument();
+        });
+      });
+    });
   });
 
   describe('action menu', () => {

src/views/VersionHistory/VersionHistory.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+
+import { Pane } from '@folio/stripes/components';
+
+
+const VersionHistory = ({ onClose, paneTitleRef }) => {
+  return (
+    <Pane
+      id="version-history-pane"
+      defaultWidth="20%"
+      onClose={onClose}
+      paneTitle="Version history"
+      dismissible
+      paneTitleRef={paneTitleRef}
+    >
+      <span>Versions</span>
+    </Pane>
+  );
+};
+
+VersionHistory.propTypes = {
+  onClose: PropTypes.func,
+  paneTitleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+};
+
+
+export default VersionHistory;

src/views/VersionHistory/index.js

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