diff --git a/CHANGELOG.md b/CHANGELOG.md
index 60577005..9465c947 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
## 5.3.0 (IN PROGRESS)
+* Display all versions in change log in fourth pane. Refs UIORGS-355.
+
## [5.2.0](https://github.com/folio-org/ui-organizations/tree/v5.2.0) (2024-10-31)
[Full Changelog](https://github.com/folio-org/ui-organizations/compare/v5.1.1...v5.2.0)
diff --git a/src/Organizations/OrganizationDetails/OrganizationDetails.js b/src/Organizations/OrganizationDetails/OrganizationDetails.js
index d0990cf8..fca690ff 100644
--- a/src/Organizations/OrganizationDetails/OrganizationDetails.js
+++ b/src/Organizations/OrganizationDetails/OrganizationDetails.js
@@ -39,10 +39,12 @@ import {
TagsPane,
useAcqRestrictions,
useModalToggle,
+ VersionHistoryButton,
} from '@folio/stripes-acq-components';
import {
NOTES_ROUTE,
+ ORGANIZATION_VERSIONS_VIEW_ROUTE,
ORGANIZATIONS_ROUTE,
} from '../../common/constants';
import {
@@ -135,6 +137,13 @@ const OrganizationDetails = ({
if (isDetailsPaneInFocus) paneTitleRef.current.focus();
}, [isDetailsPaneInFocus]);
+ const openVersionHistory = useCallback(() => {
+ history.push({
+ pathname: ORGANIZATION_VERSIONS_VIEW_ROUTE.replace(':id', organization.id),
+ search: location.search,
+ });
+ }, [history, location.search, organization.id]);
+
const getActionMenu = useCallback(
({ onToggle }) => {
return (
@@ -200,6 +209,7 @@ const OrganizationDetails = ({
tagsQuantity={get(organization, 'tags.tagList', []).length}
tagsToggle={toggleTagsPane}
/>
+
);
diff --git a/src/Organizations/OrganizationVersion/OrganizationVersion.js b/src/Organizations/OrganizationVersion/OrganizationVersion.js
new file mode 100644
index 00000000..35c5b956
--- /dev/null
+++ b/src/Organizations/OrganizationVersion/OrganizationVersion.js
@@ -0,0 +1,107 @@
+import get from 'lodash/get';
+import {
+ memo,
+ useCallback,
+} from 'react';
+import ReactRouterPropTypes from 'react-router-prop-types';
+
+import {
+ useOrganization,
+ VersionHistoryPane,
+ VersionView,
+ VersionViewContextProvider,
+} from '@folio/stripes-acq-components';
+import { TitleManager } from '@folio/stripes/core';
+
+import {
+ ORGANIZATION_VERSIONS_VIEW_ROUTE,
+ ORGANIZATIONS_ROUTE,
+ VIEW_ORG_DETAILS,
+} from '../../common/constants';
+import { HIDDEN_FIELDS_FOR_VERSION_HISTORY } from '../constants';
+import { useOrganizationVersions } from './hooks';
+
+const OrganizationVersion = ({
+ history,
+ location,
+ match,
+}) => {
+ const { id: organizationId, versionId } = match.params;
+ const snapshotPath = 'organizationSnapshot.map';
+
+ const {
+ isLoading: isOrganizationLoading,
+ organization,
+ } = useOrganization(organizationId);
+
+ const onHistoryClose = useCallback(() => history.push({
+ pathname: `${VIEW_ORG_DETAILS}${organizationId}`,
+ search: location.search,
+ }), [history, location.search, organizationId]);
+
+ const onVersionClose = useCallback(() => history.push({
+ pathname: ORGANIZATIONS_ROUTE,
+ search: location.search,
+ }), [history, location.search]);
+
+ const onSelectVersion = useCallback((_versionId) => {
+ history.push({
+ pathname: `${ORGANIZATION_VERSIONS_VIEW_ROUTE}/${_versionId}`,
+ search: location.search,
+ });
+ }, [history, location.search]);
+
+ const {
+ versions,
+ isLoading: isHistoryLoading,
+ } = useOrganizationVersions(organizationId, {
+ onSuccess: ({ organizationAuditEvents }) => {
+ if (!versionId && organizationAuditEvents[0]?.id) onSelectVersion(organizationAuditEvents[0].id);
+ },
+ });
+
+ const isVersionLoading = (
+ isOrganizationLoading || isHistoryLoading
+ );
+
+ return (
+
+
+
+ {/* TODO: https://folio-org.atlassian.net/browse/UIORGS-356 */}
+
+
+
+
+ );
+};
+
+OrganizationVersion.propTypes = {
+ history: ReactRouterPropTypes.history,
+ location: ReactRouterPropTypes.location,
+ match: ReactRouterPropTypes.match,
+};
+
+export default memo(OrganizationVersion);
diff --git a/src/Organizations/OrganizationVersion/hooks/index.js b/src/Organizations/OrganizationVersion/hooks/index.js
new file mode 100644
index 00000000..ecff7cfd
--- /dev/null
+++ b/src/Organizations/OrganizationVersion/hooks/index.js
@@ -0,0 +1 @@
+export { useOrganizationVersions } from './useOrganizationVersions';
diff --git a/src/Organizations/OrganizationVersion/hooks/useOrganizationVersions/index.js b/src/Organizations/OrganizationVersion/hooks/useOrganizationVersions/index.js
new file mode 100644
index 00000000..ecff7cfd
--- /dev/null
+++ b/src/Organizations/OrganizationVersion/hooks/useOrganizationVersions/index.js
@@ -0,0 +1 @@
+export { useOrganizationVersions } from './useOrganizationVersions';
diff --git a/src/Organizations/OrganizationVersion/hooks/useOrganizationVersions/useOrganizationVersions.js b/src/Organizations/OrganizationVersion/hooks/useOrganizationVersions/useOrganizationVersions.js
new file mode 100644
index 00000000..ba5d1ccc
--- /dev/null
+++ b/src/Organizations/OrganizationVersion/hooks/useOrganizationVersions/useOrganizationVersions.js
@@ -0,0 +1,34 @@
+import { useQuery } from 'react-query';
+
+import {
+ useNamespace,
+ useOkapiKy,
+} from '@folio/stripes/core';
+
+import { AUDIT_ACQ_EVENTS_API } from '@folio/stripes-acq-components';
+
+const DEFAULT_DATA = [];
+
+export const useOrganizationVersions = (organizationId, options = {}) => {
+ const ky = useOkapiKy();
+ const [namespace] = useNamespace({ key: 'organization-versions' });
+
+ const searchParams = {
+ sortBy: 'event_date',
+ sortOrder: 'desc',
+ };
+
+ const { isLoading, data } = useQuery(
+ [namespace, organizationId],
+ ({ signal }) => ky.get(`${AUDIT_ACQ_EVENTS_API}/organization/${organizationId}`, { signal, searchParams }).json(),
+ {
+ enabled: Boolean(organizationId),
+ ...options,
+ },
+ );
+
+ return {
+ isLoading,
+ versions: data?.organizationAuditEvents || DEFAULT_DATA,
+ };
+};
diff --git a/src/Organizations/OrganizationVersion/index.js b/src/Organizations/OrganizationVersion/index.js
new file mode 100644
index 00000000..8a312a96
--- /dev/null
+++ b/src/Organizations/OrganizationVersion/index.js
@@ -0,0 +1 @@
+export { default as OrganizationVersion } from './OrganizationVersion';
diff --git a/src/Organizations/OrganizationsList/OrganizationsList.js b/src/Organizations/OrganizationsList/OrganizationsList.js
index d054d860..2b4522f8 100644
--- a/src/Organizations/OrganizationsList/OrganizationsList.js
+++ b/src/Organizations/OrganizationsList/OrganizationsList.js
@@ -44,10 +44,12 @@ import {
} from '@folio/plugin-find-organization';
import {
+ ORGANIZATION_VERSIONS_VIEW_ROUTE,
ORGANIZATIONS_ROUTE,
VIEW_ORG_DETAILS,
} from '../../common/constants';
import { OrganizationDetailsContainer } from '../OrganizationDetails';
+import { OrganizationVersion } from '../OrganizationVersion';
import OrganizationsListLastMenu from './OrganizationsListLastMenu';
const resultsPaneTitle = ;
@@ -251,9 +253,16 @@ const OrganizationsList = ({
+
+
);
diff --git a/src/Organizations/constants.js b/src/Organizations/constants.js
index 9f59e372..809620ae 100644
--- a/src/Organizations/constants.js
+++ b/src/Organizations/constants.js
@@ -46,3 +46,5 @@ export const MAP_FIELD_ACCORDION = {
};
export const BANKING_INFORMATION_FIELD_NAME = 'bankingInformation';
+
+export const HIDDEN_FIELDS_FOR_VERSION_HISTORY = [];
diff --git a/src/common/constants/routes.js b/src/common/constants/routes.js
index 455f24f9..c7e40458 100644
--- a/src/common/constants/routes.js
+++ b/src/common/constants/routes.js
@@ -1,3 +1,4 @@
export const NOTES_ROUTE = '/organizations/notes';
export const ORGANIZATIONS_ROUTE = '/organizations';
export const VIEW_ORG_DETAILS = '/organizations/view/';
+export const ORGANIZATION_VERSIONS_VIEW_ROUTE = `${VIEW_ORG_DETAILS}:id/versions`;