UIORGS-356 - Show in version history record view, which fields have b…

…een edited (#658)

* UIORGS-356 Show in version history record view, which fields have been edited

* update card header

* Update labels mapping

* fix old test

* provide keys for arrays items and add tests

* add tests

* updates

* resolve comments

CHANGELOG.md

@@ -3,6 +3,8 @@
 ## 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.
 
 ## [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/ContactPeople/ContactPerson/index.js

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

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();
     });
   });
 
@@ -101,10 +101,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

@@ -21,7 +21,11 @@ import {
 } from '../../common/constants';
 import { HIDDEN_FIELDS_FOR_ORGANIZATION_VERSION_HISTORY } from '../constants';
 import { getOrganizationFieldsLabelMap } from './getOrganizationFieldsLabelMap';
-import { useOrganizationVersions } from './hooks';
+import {
+  useOrganizationVersions,
+  useSelectedOrganizationVersion,
+} from './hooks';
+import { OrganizationVersionView } from './OrganizationVersionView';
 
 const OrganizationVersion = ({
   history,
@@ -62,8 +66,15 @@ const OrganizationVersion = ({
     },
   });
 
+  const {
+    isLoading: isOrganizationVersionLoading,
+    selectedVersion,
+  } = useSelectedOrganizationVersion({ versionId, versions, snapshotPath });
+
   const isVersionLoading = (
-    isOrganizationLoading || isHistoryLoading
+    isOrganizationLoading
+    || isHistoryLoading
+    || isOrganizationVersionLoading
   );
 
   const labelsMap = useMemo(() => getOrganizationFieldsLabelMap(), []);
@@ -84,7 +95,7 @@ const OrganizationVersion = ({
         tags={get(organization, 'tags.tagList', [])}
         versionId={versionId}
       >
-        {/* TODO: https://folio-org.atlassian.net/browse/UIORGS-356 */}
+        <OrganizationVersionView version={selectedVersion} />
       </VersionView>
 
       <VersionHistoryPane

src/Organizations/OrganizationVersion/OrganizationVersion.test.js

@@ -35,7 +35,7 @@ jest.mock('@folio/stripes-acq-components', () => ({
 const { organizationSnapshot, ...auditEvent } = organizationAuditEvent;
 
 const latestSnapshot = {
-  ...organizationSnapshot,
+  ...organizationSnapshot.map,
   edition: 'Second edition',
 };
 const originalSnapshot = { ...organizationSnapshot };

src/Organizations/OrganizationVersion/OrganizationVersionView/OrganizationVersionView.js

@@ -0,0 +1,147 @@
+import PropTypes from 'prop-types';
+import { useRef } from 'react';
+
+import {
+  Accordion,
+  AccordionSet,
+  AccordionStatus,
+  checkScope,
+  Col,
+  collapseAllSections,
+  ExpandAllButton,
+  expandAllSections,
+  HasCommand,
+  Row,
+} from '@folio/stripes/components';
+
+import {
+  ORGANIZATION_SECTION_LABELS,
+  ORGANIZATION_SECTIONS,
+} from '../../constants';
+import {
+  OrganizationAccountsVersionView,
+  OrganizationContactInfoVersionView,
+  OrganizationContactPeopleVersionView,
+  OrganizationInterfacesVersionView,
+  OrganizationSummaryVersionView,
+  OrganizationVendorInfoVersionView,
+  OrganizationVendorTermsVersionView,
+} from '../components';
+
+const initialAccordionStatus = {
+  [ORGANIZATION_SECTIONS.summarySection]: true,
+  [ORGANIZATION_SECTIONS.contactInformationSection]: false,
+  [ORGANIZATION_SECTIONS.contactPeopleSection]: true,
+  [ORGANIZATION_SECTIONS.interfacesSection]: false,
+  [ORGANIZATION_SECTIONS.vendorInformationSection]: false,
+  [ORGANIZATION_SECTIONS.vendorTermsSection]: false,
+  [ORGANIZATION_SECTIONS.integrationDetailsSection]: false,
+  [ORGANIZATION_SECTIONS.accountsSection]: false,
+  [ORGANIZATION_SECTIONS.agreements]: false,
+};
+
+export const OrganizationVersionView = ({ version }) => {
+  const accordionStatusRef = useRef();
+
+  const shortcuts = [
+    {
+      name: 'expandAllSections',
+      handler: (e) => expandAllSections(e, accordionStatusRef),
+    },
+    {
+      name: 'collapseAllSections',
+      handler: (e) => collapseAllSections(e, accordionStatusRef),
+    },
+  ];
+
+  return (
+    <HasCommand
+      commands={shortcuts}
+      isWithinScope={checkScope}
+      scope={document.body}
+    >
+      <AccordionStatus ref={accordionStatusRef}>
+        <Row end="xs">
+          <Col xs={12}>
+            <ExpandAllButton />
+          </Col>
+        </Row>
+
+        <AccordionSet initialStatus={initialAccordionStatus}>
+          <Accordion
+            id={ORGANIZATION_SECTIONS.summarySection}
+            label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.summarySection]}
+          >
+            <OrganizationSummaryVersionView version={version} />
+          </Accordion>
+
+          <Accordion
+            id={ORGANIZATION_SECTIONS.contactInformationSection}
+            label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.contactInformationSection]}
+          >
+            <OrganizationContactInfoVersionView
+              version={version}
+            />
+          </Accordion>
+
+          <Accordion
+            id={ORGANIZATION_SECTIONS.contactPeopleSection}
+            label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.contactPeopleSection]}
+          >
+            <OrganizationContactPeopleVersionView
+              name="contacts"
+              version={version}
+            />
+          </Accordion>
+
+          <Accordion
+            id={ORGANIZATION_SECTIONS.interfacesSection}
+            label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.interfacesSection]}
+          >
+            <OrganizationInterfacesVersionView
+              name="interfaces"
+              version={version}
+            />
+          </Accordion>
+
+          {
+            version?.isVendor && (
+              <>
+                <Accordion
+                  id={ORGANIZATION_SECTIONS.vendorInformationSection}
+                  label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.vendorInformationSection]}
+                >
+                  <OrganizationVendorInfoVersionView version={version} />
+                </Accordion>
+
+                <Accordion
+                  id={ORGANIZATION_SECTIONS.vendorTermsSection}
+                  label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.vendorTermsSection]}
+                >
+                  <OrganizationVendorTermsVersionView
+                    name="agreements"
+                    version={version}
+                  />
+                </Accordion>
+
+                <Accordion
+                  id={ORGANIZATION_SECTIONS.accountsSection}
+                  label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.accountsSection]}
+                >
+                  <OrganizationAccountsVersionView
+                    name="accounts"
+                    version={version}
+                  />
+                </Accordion>
+              </>
+            )
+          }
+        </AccordionSet>
+      </AccordionStatus>
+    </HasCommand>
+  );
+};
+
+OrganizationVersionView.propTypes = {
+  version: PropTypes.object,
+};

src/Organizations/OrganizationVersion/OrganizationVersionView/OrganizationVersionView.test.js

@@ -0,0 +1,68 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+} from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
+
+import {
+  render,
+  screen,
+} from '@folio/jest-config-stripes/testing-library/react';
+import { useCategories } from '@folio/stripes-acq-components';
+
+import {
+  organization,
+  organizationAuditEvent,
+} from 'fixtures';
+import { ORGANIZATION_VERSIONS_VIEW_ROUTE } from '../../../common/constants';
+import { OrganizationVersionView } from './OrganizationVersionView';
+
+jest.mock('@folio/stripes-acq-components', () => ({
+  ...jest.requireActual('@folio/stripes-acq-components'),
+  useCategories: jest.fn(),
+}));
+
+const { organizationSnapshot } = organizationAuditEvent;
+
+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 renderOrganizationVersionView = (props = {}) => render(
+  <OrganizationVersionView
+    version={organizationSnapshot.map}
+    {...props}
+  />,
+  { wrapper },
+);
+
+describe('OrganizationVersion', () => {
+  beforeEach(() => {
+    useCategories.mockReturnValue({ categories: [{ id: 'f52ceea4-8e35-404b-9ebd-5c7db6613195', value: 'cat' }] });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render version history view', async () => {
+    renderOrganizationVersionView();
+
+    expect(screen.getByText('ui-organizations.summary')).toBeInTheDocument();
+    expect(screen.getByText('ui-organizations.contactInformation')).toBeInTheDocument();
+    expect(screen.getByText('ui-organizations.contactPeople')).toBeInTheDocument();
+    expect(screen.getByText('ui-organizations.interface')).toBeInTheDocument();
+    expect(screen.getByText('ui-organizations.vendorInformation')).toBeInTheDocument();
+    expect(screen.getByText('ui-organizations.vendorTerms')).toBeInTheDocument();
+    expect(screen.getByText('ui-organizations.accounts')).toBeInTheDocument();
+  });
+});

src/Organizations/OrganizationVersion/OrganizationVersionView/index.js

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