Merge branch 'master' into feat/number_generator

# Conflicts:
#	CHANGELOG.md
#	src/common/hooks/index.js

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Change history for ui-organizations
 
 ## 6.0.0 (IN PROGRESS)
+
+* *BREAKING* Display all versions in change log in fourth pane. Refs UIORGS-355.
+* Show in version history record view, which fields have been edited. Refs UIORGS-356.
+* Adapt organization metadata fields to version history mechanism. Refs UIORGS-359.
 * *BREAKING* Add number generator for vendor code including settings page. Refs UIORGS-336, UIORGS-337.
 
 ## [5.2.0](https://github.com/folio-org/ui-organizations/tree/v5.2.0) (2024-10-31)

package.json

@@ -19,6 +19,7 @@
     "home": "/organizations",
     "okapiInterfaces": {
       "acquisition-methods": "1.0",
+      "acquisition-organization-events": "1.0",
       "banking-information": "1.0",
       "data-export-spring": "1.0 2.0",
       "configuration": "2.0",
@@ -68,6 +69,7 @@
         "replaces": ["ui-organizations.third-party-services"],
         "visible": false,
         "subPermissions": [
+          "acquisition.organization.events.get",
           "acquisitions-units.memberships.collection.get",
           "acquisitions-units.units.collection.get",
           "configuration.entries.collection.get",

src/ContactPeople/ContactPerson/index.js

@@ -1 +1,2 @@
 export { default } from './ContactPerson';
+export { default as ContactPersonSection } from './ContactPersonSection';

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/OrganizationForm/OrganizationBankingInfoForm/OrganizationBankingInfoForm.test.js

@@ -92,7 +92,7 @@ describe('OrganizationBankingInfoForm', () => {
     await user.click(screen.getAllByText('stripes-components.selection.controlLabel')[1]);
 
     bankingAccountTypes.forEach(({ name }) => {
-      expect(screen.getByText(name)).toBeInTheDocument();
+      expect(screen.getAllByText(name)[0]).toBeInTheDocument();
     });
   });
 
@@ -102,10 +102,10 @@ describe('OrganizationBankingInfoForm', () => {
       renderOrganizationBankingInfoForm();
 
       await addField();
-      await user.click(screen.getAllByText('stripes-components.selection.controlLabel')[0]);
+      await user.click(screen.getByRole('button', { name: 'ui-organizations.data.bankingInformation.addressCategory' }));
 
       categories.forEach(({ value }) => {
-        expect(within(screen.getByTestId('banking-information-card')).getByText(value)).toBeInTheDocument();
+        expect(screen.getAllByText(value)[0]).toBeInTheDocument();
       });
     });
 

src/Organizations/OrganizationVersion/OrganizationVersion.js

@@ -0,0 +1,122 @@
+import get from 'lodash/get';
+import {
+  memo,
+  useCallback,
+  useMemo,
+} 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_ORGANIZATION_VERSION_HISTORY } from '../constants';
+import { getOrganizationFieldsLabelMap } from './getOrganizationFieldsLabelMap';
+import {
+  useOrganizationVersions,
+  useSelectedOrganizationVersion,
+} from './hooks';
+import { OrganizationVersionView } from './OrganizationVersionView';
+
+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.replace(':id', organizationId)}/${_versionId}`,
+      search: location.search,
+    });
+  }, [history, location.search, organizationId]);
+
+  const {
+    versions,
+    isLoading: isHistoryLoading,
+  } = useOrganizationVersions(organizationId, {
+    onSuccess: ({ organizationAuditEvents }) => {
+      if (!versionId && organizationAuditEvents[0]?.id) onSelectVersion(organizationAuditEvents[0].id);
+    },
+  });
+
+  const {
+    isLoading: isOrganizationVersionLoading,
+    selectedVersion,
+  } = useSelectedOrganizationVersion({ versionId, versions, snapshotPath });
+
+  const isVersionLoading = (
+    isOrganizationLoading
+    || isHistoryLoading
+    || isOrganizationVersionLoading
+  );
+
+  const labelsMap = useMemo(() => getOrganizationFieldsLabelMap(), []);
+
+  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}
+      >
+        <OrganizationVersionView version={selectedVersion} />
+      </VersionView>
+
+      <VersionHistoryPane
+        currentVersion={versionId}
+        id="organization"
+        isLoading={isHistoryLoading}
+        onClose={onHistoryClose}
+        onSelectVersion={onSelectVersion}
+        snapshotPath={snapshotPath}
+        labelsMap={labelsMap}
+        versions={versions}
+        hiddenFields={HIDDEN_FIELDS_FOR_ORGANIZATION_VERSION_HISTORY}
+      />
+    </VersionViewContextProvider>
+  );
+};
+
+OrganizationVersion.propTypes = {
+  history: ReactRouterPropTypes.history,
+  location: ReactRouterPropTypes.location,
+  match: ReactRouterPropTypes.match,
+};
+
+export default memo(OrganizationVersion);

src/Organizations/OrganizationVersion/OrganizationVersion.test.js

@@ -0,0 +1,141 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+} from 'react-query';
+import {
+  MemoryRouter,
+  Route,
+  Switch,
+  withRouter,
+} from 'react-router-dom';
+
+import {
+  render,
+  screen,
+} from '@folio/jest-config-stripes/testing-library/react';
+import user from '@folio/jest-config-stripes/testing-library/user-event';
+import { useOkapiKy } from '@folio/stripes/core';
+import {
+  AUDIT_ACQ_EVENTS_API,
+  useOrganization,
+} from '@folio/stripes-acq-components';
+
+import {
+  organization,
+  organizationAuditEvent,
+} from 'fixtures';
+import { ORGANIZATION_VERSIONS_VIEW_ROUTE } from '../../common/constants';
+import OrganizationVersion from './OrganizationVersion';
+
+jest.mock('@folio/stripes-acq-components', () => ({
+  ...jest.requireActual('@folio/stripes-acq-components'),
+  useOrganization: jest.fn(() => ({})),
+}));
+
+const { organizationSnapshot, ...auditEvent } = organizationAuditEvent;
+
+const latestSnapshot = {
+  ...organizationSnapshot.map,
+  edition: 'Second edition',
+};
+const originalSnapshot = { ...organizationSnapshot };
+
+const versions = [
+  {
+    ...auditEvent,
+    id: 'testAuditEventId',
+    organizationSnapshot: { map: latestSnapshot },
+  },
+  {
+    ...auditEvent,
+    organizationSnapshot: { map: originalSnapshot },
+  },
+];
+
+const kyMock = {
+  get: jest.fn((url) => ({
+    json: async () => {
+      const result = {};
+
+      if (url.startsWith(`${AUDIT_ACQ_EVENTS_API}/organization/`)) {
+        result.organizationAuditEvents = versions;
+      }
+
+      return Promise.resolve({
+        isLoading: false,
+        ...result,
+      });
+    },
+  })),
+};
+
+const queryClient = new QueryClient();
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    <MemoryRouter
+      initialEntries={[{
+        pathname: ORGANIZATION_VERSIONS_VIEW_ROUTE.replace(':id', organization.id),
+      }]}
+    >
+      {children}
+    </MemoryRouter>
+  </QueryClientProvider>
+);
+
+const Component = withRouter(OrganizationVersion);
+const mockDefaultContent = 'Hello world';
+
+const renderOrganizationVersion = (props = {}) => render(
+  <Switch>
+    <Route
+      path={ORGANIZATION_VERSIONS_VIEW_ROUTE}
+      render={() => (
+        <Component
+          {...props}
+        />
+      )}
+    />
+    <Route
+      render={() => (
+        <div>{mockDefaultContent}</div>
+      )}
+    />
+  </Switch>,
+  { wrapper },
+);
+
+describe('OrganizationVersion', () => {
+  beforeEach(() => {
+    useOkapiKy.mockReturnValue(kyMock);
+    useOrganization.mockReturnValue({
+      isLoading: false,
+      organization,
+    });
+  });
+
+  it('should close version view when \'Version close\' button was clicked', async () => {
+    renderOrganizationVersion();
+
+    await screen.findAllByRole('button', { name: 'stripes-acq-components.versionHistory.card.select.tooltip' })
+      .then(async ([selectVersionBtn]) => user.click(selectVersionBtn));
+
+    await screen.findAllByRole('button', { name: 'stripes-components.closeItem' })
+      .then(async ([closeVersionBtn]) => user.click(closeVersionBtn));
+
+    expect(screen.queryByText(organization.name)).not.toBeInTheDocument();
+    expect(screen.getByText(mockDefaultContent)).toBeInTheDocument();
+  });
+
+  it('should close version view when \'History close\' button was clicked', async () => {
+    renderOrganizationVersion();
+
+    await screen.findAllByRole('button', { name: 'stripes-acq-components.versionHistory.card.select.tooltip' })
+      .then(async ([selectVersionBtn]) => user.click(selectVersionBtn));
+
+    await screen.findAllByRole('button', { name: 'stripes-components.closeItem' })
+      .then(async ([_, closeHistoryBtn]) => user.click(closeHistoryBtn));
+
+    expect(screen.queryByText(organization.name)).not.toBeInTheDocument();
+    expect(screen.getByText(mockDefaultContent)).toBeInTheDocument();
+  });
+});