feat: [DHIS2-17771] Org unit context in tables and lists (#3813)

* feat: update client to list converter

* feat: changes in tooltip component

* feat: add orgunit context stages and events widget

* feat: use cache for subvalues

* feat: orgunit context event workspace

* fix: renaming of return statement

src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/hooks/getSubValueForTei.js

@@ -1,6 +1,8 @@
 // @flow
 import type { QuerySingleResource } from 'capture-core/utils/api';
 import { dataElementTypes } from '../../../../metaData';
+import { getOrgUnitNames } from '../../../../metadataRetrieval/orgUnitName';
+
 
 const getImageOrFileResourceSubvalue = async (key: string, querySingleResource: QuerySingleResource) => {
     const { id, displayName: name } = await querySingleResource({ resource: 'fileResources', id: key });
@@ -11,14 +13,8 @@ const getImageOrFileResourceSubvalue = async (key: string, querySingleResource:
 };
 
 const getOrganisationUnitSubvalue = async (key: string, querySingleResource: QuerySingleResource) => {
-    const organisationUnit = await querySingleResource({
-        resource: 'organisationUnits',
-        id: key,
-        params: {
-            fields: 'id,name',
-        },
-    });
-    return { ...organisationUnit };
+    const organisationUnit = await getOrgUnitNames([key], querySingleResource);
+    return organisationUnit[key];
 };
 
 export const subValueGetterByElementType = {

src/core_modules/capture-core/components/Tooltips/TooltipOrgUnit/TooltipOrgUnit.component.js

@@ -1,18 +1,19 @@
 // @flow
 import React from 'react';
 import { Tooltip } from '@dhis2/ui';
+import { useOrgUnitNameWithAncestors } from '../../../metadataRetrieval/orgUnitName';
 
 type Props = {
-    orgUnitName: string,
-    ancestors?: Array<string>,
+    orgUnitId: string,
 };
 
-export const TooltipOrgUnit = ({ orgUnitName, ancestors = [] }: Props) => {
-    const fullPath = [...ancestors, orgUnitName].join(' / ');
+export const TooltipOrgUnit = ({ orgUnitId }: Props) => {
+    const { displayName, ancestors = [] } = useOrgUnitNameWithAncestors(orgUnitId);
+    const fullPath = [...ancestors, displayName].join(' / ');
 
     return (
-        <Tooltip content={fullPath} openDelay={400} maxWidth={900}>
-            <span style={{ textDecoration: 'underline dotted' }}>{orgUnitName}</span>
+        <Tooltip content={fullPath} openDelay={600} maxWidth={900}>
+            <span style={{ textDecoration: 'underline dotted' }}>{displayName}</span>
         </Tooltip>
     );
 };

src/core_modules/capture-core/components/WidgetEnrollment/WidgetEnrollment.component.js

@@ -78,8 +78,8 @@ export const WidgetEnrollmentPlain = ({
     const { displayName: orgUnitName, ancestors } = useOrgUnitNameWithAncestors(enrollment?.orgUnit);
     const { displayName: ownerOrgUnitName, ancestors: ownerAncestors } = useOrgUnitNameWithAncestors(ownerOrgUnit?.id);
 
-    const orgUnitClientValue = { name: orgUnitName, ancestors };
-    const ownerOrgUnitClientValue = { name: ownerOrgUnitName, ancestors: ownerAncestors };
+    const orgUnitClientValue = { id: enrollment?.orgUnit, name: orgUnitName, ancestors };
+    const ownerOrgUnitClientValue = { id: ownerOrgUnit?.id, name: ownerOrgUnitName, ancestors: ownerAncestors };
 
     return (
         <div data-test="widget-enrollment">

src/core_modules/capture-core/components/WidgetProfile/hooks/getSubValueForTei.js

@@ -2,6 +2,7 @@
 import type { QuerySingleResource } from 'capture-core/utils/api';
 import { dataElementTypes } from '../../../metaData';
 import { FEATURES, hasAPISupportForFeature } from '../../../../capture-core-utils';
+import { getOrgUnitNames } from '../../../metadataRetrieval/orgUnitName';
 
 type Attribute = {
     id: string,
@@ -59,22 +60,9 @@ const getImageResourceSubvalue = async ({ attribute, minorServerVersion }: SubVa
     };
 };
 
-const getOrganisationUnitSubvalue = async ({ attribute, querySingleResource }: SubValueFunctionParams) => {
-    const organisationUnit = await querySingleResource({
-        resource: 'organisationUnits',
-        id: attribute.value,
-        params: {
-            fields: 'id,name,ancestors[displayName]',
-        },
-    });
-
-    const orgUnitClientValue = {
-        id: organisationUnit.id,
-        name: organisationUnit.name,
-        ancestors: organisationUnit.ancestors.map(ancestor => ancestor.displayName),
-    };
-
-    return orgUnitClientValue;
+const getOrganisationUnitSubvalue = async ({ attribute: { value }, querySingleResource }: SubValueFunctionParams) => {
+    const organisationUnits = await getOrgUnitNames([value], querySingleResource);
+    return organisationUnits[value];
 };
 
 export const subValueGetterByElementType = {

src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/hooks/helpers.js

@@ -8,7 +8,7 @@ import type { StageDataElement } from '../../../../types/common.types';
 import { Notes } from '../Notes.component';
 import type { QuerySingleResource } from '../../../../../../utils/api/api.types';
 import { isEventOverdue } from '../../../../../../utils/isEventOverdue';
-import { getCachedOrgUnitName } from '../../../../../../metadataRetrieval/orgUnitName';
+import { TooltipOrgUnit } from '../../../../../Tooltips/TooltipOrgUnit/TooltipOrgUnit.component';
 
 const getEventStatus = (event: ApiEnrollmentEvent) => {
     const today = moment().startOf('day');
@@ -58,7 +58,7 @@ const convertStatusForView = (event: ApiEnrollmentEvent) => {
     };
 };
 
-const convertOrgUnitForView = (event: ApiEnrollmentEvent) => getCachedOrgUnitName(event.orgUnit);
+const convertOrgUnitForView = (event: ApiEnrollmentEvent) => <TooltipOrgUnit orgUnitId={event.orgUnit} />;
 
 const convertNoteForView = (event: ApiEnrollmentEvent) => <Notes event={event} />;
 

src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/hooks/useEventList.js

@@ -22,7 +22,7 @@ import {
 } from '../../../../../../metaDataMemoryStoreBuilders/common/helpers/dataElement/unsupportedMultiText';
 import { useOrgUnitNames } from '../../../../../../metadataRetrieval/orgUnitName';
 
-const baseKeys = [{ id: 'status' }, { id: 'occurredAt' }, { id: 'assignedUser' }, { id: 'orgUnitName' }, { id: 'scheduledAt' }, { id: 'notes' }];
+const baseKeys = [{ id: 'status' }, { id: 'occurredAt' }, { id: 'assignedUser' }, { id: 'orgUnit' }, { id: 'scheduledAt' }, { id: 'notes' }];
 const basedFieldTypes = [
     { type: dataElementTypes.STATUS, resolveValue: convertStatusForView },
     { type: dataElementTypes.DATE },

src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/getEventDataWithSubValue.js

@@ -2,6 +2,7 @@
 import { featureAvailable, FEATURES } from 'capture-core-utils';
 import { dataElementTypes } from '../../../../metaData';
 import type { QuerySingleResource } from '../../../../utils/api/api.types';
+import { getOrgUnitNames } from '../../../../metadataRetrieval/orgUnitName';
 
 const getFileResourceSubvalue = async (keys: Object, querySingleResource: QuerySingleResource, eventId: string, absoluteApiPath: string) => {
     const promises = Object.keys(keys)
@@ -57,19 +58,9 @@ const getImageSubvalue = (keys: Object, querySingleResource: QuerySingleResource
 );
 
 const getOrganisationUnitSubvalue = async (keys: Object, querySingleResource: QuerySingleResource) => {
-    const ids = Object.values(keys)
-        .join(',');
-
-    const { organisationUnits = [] } = await querySingleResource({
-        resource: 'organisationUnits',
-        params: { filter: `id:in:[${ids}]` },
-    });
-
-    return organisationUnits
-        .reduce((acc, { id, displayName: name }) => {
-            acc[id] = { id, name };
-            return acc;
-        }, {});
+    const ids = Object.values(keys).map(value => String(value));
+    const orgUnitNames = await getOrgUnitNames(ids, querySingleResource);
+    return orgUnitNames;
 };
 
 const subValueGetterByElementType = {

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/utils/getDataEntryDetails.js

@@ -5,7 +5,7 @@ import i18n from '@dhis2/d2-i18n';
 import { dataElementTypes, type RenderFoundation } from '../../../metaData';
 import { convertClientToView, convertServerToClient } from '../../../converters';
 import type { LinkedEvent } from '../WidgetTwoEventWorkspace.types';
-import { FlatListOrgUnitField } from '../FlatListOrgUnitField';
+import { TooltipOrgUnit } from '../../Tooltips/TooltipOrgUnit';
 
 const convertFn = pipe(convertServerToClient, convertClientToView);
 
@@ -37,7 +37,7 @@ const DataEntryFieldsToInclude = {
         type: dataElementTypes.ORGANISATION_UNIT,
         placement: Placements.TOP,
         label: i18n.t('Organisation unit'),
-        convertFn: orgUnitId => <FlatListOrgUnitField orgUnitId={orgUnitId} />,
+        convertFn: orgUnitId => <TooltipOrgUnit orgUnitId={orgUnitId} />,
     },
     status: {
         apiKey: 'status',

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/utils/getSubValueForDataValue.js

@@ -2,6 +2,7 @@
 import { dataElementTypes } from '../../../metaData';
 import type { QuerySingleResource } from '../../../utils/api';
 import { featureAvailable, FEATURES } from '../../../../capture-core-utils';
+import { getOrgUnitNames } from '../../../metadataRetrieval/orgUnitName';
 
 type SubValueFunctionProps = {
     dataElement: Object,
@@ -44,15 +45,9 @@ const getImageSubvalue = async ({ dataElement, querySingleResource, eventId, abs
     };
 };
 
-const getOrganisationUnitSubvalue = async ({ dataElement, querySingleResource }: SubValueFunctionProps) => {
-    const organisationUnit = await querySingleResource({
-        resource: 'organisationUnits',
-        id: dataElement.value,
-        params: {
-            fields: 'id,name',
-        },
-    });
-    return { ...organisationUnit };
+const getOrganisationUnitSubvalue = async ({ dataElement: { value }, querySingleResource }: SubValueFunctionProps) => {
+    const organisationUnits = await getOrgUnitNames([value], querySingleResource);
+    return organisationUnits[value];
 };
 
 export const subValueGetterByElementType = {

src/core_modules/capture-core/converters/clientToList.js

@@ -8,6 +8,7 @@ import { dataElementTypes, type DataElement } from '../metaData';
 import { convertMomentToDateFormatString } from '../utils/converters/date';
 import { stringifyNumber } from './common/stringifyNumber';
 import { MinimalCoordinates } from '../components/MinimalCoordinates';
+import { TooltipOrgUnit } from '../components/Tooltips/TooltipOrgUnit';
 
 function convertDateForListDisplay(rawValue: string): string {
     const momentDate = moment(rawValue);
@@ -37,6 +38,7 @@ type ImageClientValue = {
     previewUrl: string,
 };
 
+
 function convertFileForDisplay(clientValue: FileClientValue) {
     // Fallback until https://dhis2.atlassian.net/browse/DHIS2-16994 is implemented
     if (typeof clientValue === 'string' || clientValue instanceof String) {
@@ -86,10 +88,13 @@ function convertStatusForDisplay(clientValue: Object) {
     );
 }
 
-function convertOrgUnitForDisplay(rawValue: string | Object) {
-    return (typeof rawValue === 'string' ? rawValue : rawValue.name);
+function convertOrgUnitForDisplay(clientValue: { id: string }) {
+    return (
+        <TooltipOrgUnit orgUnitId={clientValue.id} />
+    );
 }
 
+
 const valueConvertersForType = {
     [dataElementTypes.NUMBER]: stringifyNumber,
     [dataElementTypes.INTEGER]: stringifyNumber,

src/core_modules/capture-core/converters/clientToView.js

@@ -34,11 +34,6 @@ type ImageClientValue = {
     previewUrl: string,
 };
 
-type OrgUnitClientValue = {
-    name: string,
-    ancestors?: Array<string>,
-    tooltip?: string,
-};
 
 function convertFileForDisplay(clientValue: FileClientValue) {
     return (
@@ -57,16 +52,13 @@ function convertImageForDisplay(clientValue: ImageClientValue) {
     return <PreviewImage url={clientValue.url} previewUrl={clientValue.previewUrl} alignLeft />;
 }
 
-function convertOrgUnitForDisplay(clientValue: OrgUnitClientValue) {
+function convertOrgUnitForDisplay(clientValue: { id: string }) {
     return (
-        <TooltipOrgUnit
-            orgUnitName={clientValue.name}
-            ancestors={clientValue.ancestors}
-            tooltip={clientValue.tooltip}
-        />
+        <TooltipOrgUnit orgUnitId={clientValue.id} />
     );
 }
 
+
 const valueConvertersForType = {
     [dataElementTypes.NUMBER]: stringifyNumber,
     [dataElementTypes.INTEGER]: stringifyNumber,

src/core_modules/capture-core/metadataRetrieval/orgUnitName/index.js

@@ -3,5 +3,4 @@ export {
     useOrgUnitNameWithAncestors,
     useOrgUnitNames,
     getOrgUnitNames,
-    getCachedOrgUnitName,
 } from './orgUnitName';

src/core_modules/capture-core/metadataRetrieval/orgUnitName/orgUnitName.js

@@ -209,5 +209,3 @@ export const useOrgUnitNameWithAncestors = (orgUnitId: ?string): {
 
     return { error };
 };
-
-export const getCachedOrgUnitName = (orgUnitId: string): ?string => displayNameCache[orgUnitId]?.displayName;