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';