From 0437f04238967b91e92c5bd7544fead5a6107191 Mon Sep 17 00:00:00 2001 From: Mariia_Aloshyna Date: Fri, 7 Feb 2025 14:23:36 +0200 Subject: [PATCH] UIIN-3170: Add Version history button and Version history pane to details view of Instance --- CHANGELOG.md | 1 + .../InstanceDetails/InstanceDetails.js | 68 +++++++++++-------- .../InstanceDetails/InstanceDetails.test.js | 45 +++++++++++- src/views/VersionHistory/VersionHistory.js | 9 ++- 4 files changed, 92 insertions(+), 31 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 33674e48b..6a7a8711c 100644 --- 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 index cb800f56f..3a248feb6 100644 --- 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,11 +95,13 @@ 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; const isUserInCentralTenant = checkIfUserInCentralTenant(stripes); const isConsortialHoldingsVisible = instance?.shared || isInstanceShadowCopy(instance?.source); + const isUserInConsortium = isUserInConsortiumMode(stripes); const detailsLastMenu = useMemo(() => { return ( @@ -112,6 +117,7 @@ const InstanceDetails = forwardRef(({ /> ) } + setIsVersionHistoryOpen(true)} /> ); }, [tagsEnabled, tags, intl]); @@ -122,32 +128,35 @@ const InstanceDetails = forwardRef(({ const getEntity = () => instance; - const renderPaneTitle = () => { - const isInstanceShared = Boolean(isShared || isInstanceShadowCopy(instance?.source)); + const paneTitle = useMemo( + () => { + const isInstanceShared = Boolean(isShared || isInstanceShadowCopy(instance?.source)); - return ( - - ); - }; - - const renderPaneSubtitle = () => { - return ( - - ); - }; + } + ); + }, + [isShared, instance?.source, isUserInConsortium], + ); + const paneSubTitle = useMemo( + () => { + return ( + + ); + }, + [instance?.hrid, instance?.metadata?.updatedDate], + ); const onToggle = newState => { const isExpanded = Object.values(newState)[0]; @@ -156,19 +165,19 @@ const InstanceDetails = forwardRef(({ }; return ( - <> + } - paneTitle={renderPaneTitle()} - paneSub={renderPaneSubtitle()} + paneTitle={paneTitle} + paneSub={paneSubTitle} actionMenu={actionMenu} firstMenu={( )} lastMenu={detailsLastMenu} @@ -301,6 +310,11 @@ const InstanceDetails = forwardRef(({ + {isVersionHistoryOpen && ( + setIsVersionHistoryOpen(false)} + /> + )} { helperApp && } - + ); }); diff --git a/src/Instance/InstanceDetails/InstanceDetails.test.js b/src/Instance/InstanceDetails/InstanceDetails.test.js index f6b198366..872c34005 100644 --- 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 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(); + }); + }); + }); }); diff --git a/src/views/VersionHistory/VersionHistory.js b/src/views/VersionHistory/VersionHistory.js index 4a1921840..205d77b4d 100644 --- a/src/views/VersionHistory/VersionHistory.js +++ b/src/views/VersionHistory/VersionHistory.js @@ -6,14 +6,19 @@ import { } from '@folio/stripes-acq-components'; const VersionHistory = ({ onClose }) => { + // TODO: remove once API for inventory version history is implemented and pass currentVersion and versionId to props + // set mocked data to avoid unit tests warnings, because these props are required + const currentVersion = 'mockedVersion'; + const versionId = 'mockedVersionId'; + return (