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..4c82c1703 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,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(({ /> ) } + setIsVersionHistoryOpen(true)} /> ); }, [tagsEnabled, tags, intl]); @@ -156,7 +161,7 @@ const InstanceDetails = forwardRef(({ }; return ( - <> + + {isVersionHistoryOpen && ( + setIsVersionHistoryOpen(false)} + /> + )} { helperApp && } - + ); }); diff --git a/src/Instance/InstanceDetails/InstanceDetails.test.js b/src/Instance/InstanceDetails/InstanceDetails.test.js index f6b198366..af5c85c28 100644 --- a/src/Instance/InstanceDetails/InstanceDetails.test.js +++ b/src/Instance/InstanceDetails/InstanceDetails.test.js @@ -1,7 +1,12 @@ import React 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,38 @@ describe('InstanceDetails', () => { expect(screen.queryByRole('button', { name: 'Consortial holdings' })).not.toBeInTheDocument(); }); }); + + describe('Version history component', () => { + let versionHistoryButton; + + beforeEach(async () => { + 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(); + }); + }); + }); });