UIORGS-356 Properly display mapped ref values

src/Organizations/OrganizationVersion/components/OrganizationSummaryVersionView/OrganizationSummaryVersionView.js

@@ -84,7 +84,7 @@ export const OrganizationSummaryVersionView = ({ version }) => {
           <VersionKeyValue
             name="organizationTypes"
             label={<FormattedMessage id="ui-organizations.summary.type" />}
-            value={version?.organizationTypes?.join(', ') || <NoValue />}
+            value={version?.organizationTypesResolved || <NoValue />}
             multiple
           />
         </Col>

src/Organizations/OrganizationVersion/hooks/useSelectedOrganizationVersion/useSelectedOrganizationVersion.js

@@ -5,25 +5,25 @@ import get from 'lodash/fp/get';
 import keyBy from 'lodash/fp/keyBy';
 import uniq from 'lodash/fp/uniq';
 import { useMemo } from 'react';
-import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
 
 import {
   useNamespace,
   useOkapiKy,
 } from '@folio/stripes/core';
-import { getFullName } from '@folio/stripes/util';
 import {
   fetchAcqUnitsByIds,
   getVersionMetadata,
   useOrganization,
   useUsersBatch,
+  useVersionHistoryValueResolvers,
 } from '@folio/stripes-acq-components';
 import { currenciesByCode } from '@folio/stripes/components';
 
 import {
   useContactsByIds,
   useInterfacesByIds,
+  useTypes,
 } from '../../../../common/hooks';
 
 const getUniqItems = (arr) => (
@@ -34,11 +34,13 @@ const getUniqItems = (arr) => (
 );
 
 export const useSelectedOrganizationVersion = ({ versionId, versions, snapshotPath }, options = {}) => {
-  const intl = useIntl();
   const ky = useOkapiKy();
   const [namespace] = useNamespace({ key: 'organization-version-data' });
 
-  const deletedRecordLabel = intl.formatMessage({ id: 'stripes-acq-components.versionHistory.deletedRecord' });
+  const {
+    getObjectPropertyById,
+    getUserFullNameById,
+  } = useVersionHistoryValueResolvers();
 
   const currentVersion = useMemo(() => (
     versions?.find(({ id }) => id === versionId)
@@ -72,6 +74,11 @@ export const useSelectedOrganizationVersion = ({ versionId, versions, snapshotPa
     isLoading: isInterfacesLoading,
   } = useInterfacesByIds(versionSnapshot?.interfaces);
 
+  const {
+    organizationTypes,
+    isLoading: isOrganizationTypesLoading,
+  } = useTypes();
+
   const {
     isLoading: isVersionDataLoading,
     data = {},
@@ -101,9 +108,9 @@ export const useSelectedOrganizationVersion = ({ versionId, versions, snapshotPa
         ...versionSnapshot,
         accounts: versionSnapshot?.accounts?.map((account) => ({
           ...account,
-          acqUnits: account?.acqUnitIds?.map((acqUnitId) => acqUnitsMap[acqUnitId]?.name || deletedRecordLabel),
+          acqUnits: account?.acqUnitIds?.map((id) => getObjectPropertyById(id, 'name', acqUnitsMap)),
         })),
-        acqUnits: acqUnitsIds.map(acqUnitsId => acqUnitsMap[acqUnitsId]?.name || deletedRecordLabel).join(', '),
+        acqUnits: acqUnitsIds.map((id) => getObjectPropertyById(id, 'name', acqUnitsMap)).join(', '),
         vendorCurrenciesValue,
         metadata,
       };
@@ -113,26 +120,34 @@ export const useSelectedOrganizationVersion = ({ versionId, versions, snapshotPa
   });
 
   const selectedVersion = useMemo(() => {
-    const versionUsersMap = keyBy('id', users);
-
-    const createdByUser = versionUsersMap[createdByUserId]
-      ? getFullName(versionUsersMap[createdByUserId])
-      : deletedRecordLabel;
+    const versionUsersDict = keyBy('id', users);
+    const organizationTypesDict = keyBy('id', organizationTypes);
 
     return {
       ...data,
-      createdByUser: createdByUserId && createdByUser,
+      organizationTypesResolved: data.organizationTypes?.map((id) => getObjectPropertyById(id, 'name', organizationTypesDict))?.join(', '),
+      createdByUser: getUserFullNameById(createdByUserId, versionUsersDict),
       contactsList: contacts,
       interfacesList: interfaces,
     };
-  }, [users, createdByUserId, deletedRecordLabel, data, contacts, interfaces]);
+  }, [
+    getObjectPropertyById,
+    getUserFullNameById,
+    users,
+    createdByUserId,
+    data,
+    contacts,
+    interfaces,
+    organizationTypes,
+  ]);
 
   const isLoading = (
     isOrganizationLoading
     || isUsersLoading
     || isVersionDataLoading
     || isContactsLoading
     || isInterfacesLoading
+    || isOrganizationTypesLoading
   );
 
   return {

src/Organizations/OrganizationVersion/hooks/useSelectedOrganizationVersion/useSelectedOrganizationVersion.test.js

@@ -19,6 +19,7 @@ import { organizationAuditEvent } from 'fixtures';
 import {
   useContactsByIds,
   useInterfacesByIds,
+  useTypes,
 } from '../../../../common/hooks';
 import { useSelectedOrganizationVersion } from './useSelectedOrganizationVersion';
 
@@ -33,6 +34,7 @@ jest.mock('../../../../common/hooks', () => ({
   ...jest.requireActual('../../../../common/hooks'),
   useContactsByIds: jest.fn(),
   useInterfacesByIds: jest.fn(),
+  useTypes: jest.fn(),
 }));
 
 const versionId = organizationAuditEvent.id;
@@ -43,6 +45,10 @@ const contacts = [{ id: 'contact1' }];
 const interfaces = [{ id: 'interface1' }];
 const organization = { id: 'org1' };
 const users = [{ id: 'user1', personal: { firstName: 'John', lastName: 'Doe' } }];
+const organizationTypes = [{
+  id: 'e7e9af00-c12c-448f-8ad1-d15ff209605a',
+  name: 'Type name',
+}];
 
 const queryClient = new QueryClient();
 const wrapper = ({ children }) => (
@@ -58,6 +64,7 @@ describe('useSelectedOrganizationVersion', () => {
     useUsersBatch.mockReturnValue({ users, isLoading: false });
     useContactsByIds.mockReturnValue({ contacts, isLoading: false });
     useInterfacesByIds.mockReturnValue({ interfaces, isLoading: false });
+    useTypes.mockReturnValue({ organizationTypes, isLoading: false });
   });
 
   afterEach(() => {
@@ -79,8 +86,10 @@ describe('useSelectedOrganizationVersion', () => {
         acqUnits: [],
       })),
       acqUnits: '',
+      createdByUser: null,
       contactsList: contacts,
       interfacesList: interfaces,
+      organizationTypesResolved: 'Type name',
       vendorCurrenciesValue: 'US Dollar (USD)',
       metadata: getVersionMetadata(organizationAuditEvent, organization),
     });