From 5333fd31fc421e5ce495bbcf30715aef52fc0b84 Mon Sep 17 00:00:00 2001 From: Oleksandr Hladchenko1 Date: Fri, 31 Jan 2025 15:26:33 +0100 Subject: [PATCH] UIIN-3175: Add Version history pane for Item view component --- CHANGELOG.md | 1 + src/views/ItemView.js | 29 +++++++++++++++++- src/views/ItemView.test.js | 35 ++++++++++++++++++++++ src/views/VersionHistory/VersionHistory.js | 27 +++++++++++++++++ src/views/VersionHistory/index.js | 1 + 5 files changed, 92 insertions(+), 1 deletion(-) create mode 100644 src/views/VersionHistory/VersionHistory.js create mode 100644 src/views/VersionHistory/index.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 84ab5393f..95c129c69 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/views/ItemView.js b/src/views/ItemView.js index 7c4b2a1e1..61259c48a 100644 --- a/src/views/ItemView.js +++ b/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 => { { dismissible onClose={onCloseViewItem} actionMenu={getActionMenu} + lastMenu={( + + + + )} > { + {isVersionHistoryOpen && ( + setIsSetVersionHistoryOpen(false)} + paneTitleRef={paneTitleRef} + /> + )} ); diff --git a/src/views/ItemView.test.js b/src/views/ItemView.test.js index 88eb61907..42c0fc014 100644 --- a/src/views/ItemView.test.js +++ b/src/views/ItemView.test.js @@ -296,6 +296,41 @@ describe('ItemView', () => { expect(mockPush).toHaveBeenCalled(); }); }); + + describe('Version history component', () => { + let versionHistoryButton; + + beforeEach(() => { + const { container } = renderWithIntl(, 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', () => { diff --git a/src/views/VersionHistory/VersionHistory.js b/src/views/VersionHistory/VersionHistory.js new file mode 100644 index 000000000..8d06f8eeb --- /dev/null +++ b/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 ( + + Versions + + ); +}; + +VersionHistory.propTypes = { + onClose: PropTypes.func, + paneTitleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), +}; + + +export default VersionHistory; diff --git a/src/views/VersionHistory/index.js b/src/views/VersionHistory/index.js new file mode 100644 index 000000000..01d26d546 --- /dev/null +++ b/src/views/VersionHistory/index.js @@ -0,0 +1 @@ +export { default as VersionHistory } from './VersionHistory';