UIORGS-355 Display all versions in change log in fourth pane

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)
 

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}
       />
+      <VersionHistoryButton onClick={openVersionHistory} />
     </PaneMenu>
   );
 

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 (
+    <VersionViewContextProvider
+      snapshotPath={snapshotPath}
+      versions={versions}
+      versionId={versionId}
+    >
+      <TitleManager record={organization?.name} />
+      <VersionView
+        id="organization"
+        dismissible
+        isLoading={isVersionLoading}
+        onClose={onVersionClose}
+        paneTitle={organization?.name}
+        tags={get(organization, 'tags.tagList', [])}
+        versionId={versionId}
+      >
+        {/* TODO: https://folio-org.atlassian.net/browse/UIORGS-356 */}
+      </VersionView>
+
+      <VersionHistoryPane
+        currentVersion={versionId}
+        id="organization"
+        isLoading={isHistoryLoading}
+        onClose={onHistoryClose}
+        onSelectVersion={onSelectVersion}
+        snapshotPath={snapshotPath}
+        labelsMap={{}}
+        versions={versions}
+        hiddenFields={HIDDEN_FIELDS_FOR_VERSION_HISTORY}
+      />
+    </VersionViewContextProvider>
+  );
+};
+
+OrganizationVersion.propTypes = {
+  history: ReactRouterPropTypes.history,
+  location: ReactRouterPropTypes.location,
+  match: ReactRouterPropTypes.match,
+};
+
+export default memo(OrganizationVersion);

src/Organizations/OrganizationVersion/hooks/index.js

@@ -0,0 +1 @@
+export { useOrganizationVersions } from './useOrganizationVersions';

src/Organizations/OrganizationVersion/hooks/useOrganizationVersions/index.js

@@ -0,0 +1 @@
+export { useOrganizationVersions } from './useOrganizationVersions';

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,
+  };
+};

src/Organizations/OrganizationVersion/index.js

@@ -0,0 +1 @@
+export { default as OrganizationVersion } from './OrganizationVersion';

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 = <FormattedMessage id="ui-organizations.meta.title" />;
@@ -251,9 +253,16 @@ const OrganizationsList = ({
         </ResultsPane>
 
         <Route
+          exact
           path={`${VIEW_ORG_DETAILS}:id`}
           render={renderOrganizationDetails}
         />
+
+        <Route
+          exact
+          path={ORGANIZATION_VERSIONS_VIEW_ROUTE}
+          component={OrganizationVersion}
+        />
       </PersistedPaneset>
     </HasCommand>
   );

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 = [];

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