feat: [DHIS2-17770] Org unit contextualization in self contained widgets

cypress/e2e/WidgetsForEnrollmentPages/WidgetEnrollment/index.js

@@ -66,7 +66,7 @@ Then('the user sees the enrollment organisation unit', () => {
     cy.get('[data-test="widget-enrollment"]').within(() => {
         cy.get('[data-test="widget-enrollment-icon-orgunit"]').should('exist');
         cy.get('[data-test="widget-enrollment-orgunit"]')
-            .contains('Started at Ngelehun CHC')
+            .contains('Started at: Ngelehun CHC')
             .should('exist');
     });
 });
@@ -77,7 +77,7 @@ Then('the user sees the owner organisation unit', () => {
             'exist',
         );
         cy.get('[data-test="widget-enrollment-owner-orgunit"]')
-            .contains('Owned by Ngelehun CHC')
+            .contains('Owned by: Ngelehun CHC')
             .should('exist');
     });
 });
@@ -232,7 +232,7 @@ Then(/^the user successfully transfers the enrollment/, () => {
 
     cy.get('[data-test="widget-enrollment"]').within(() => {
         cy.get('[data-test="widget-enrollment-owner-orgunit"]')
-            .contains('Owned by Njandama MCHP')
+            .contains('Owned by: Njandama MCHP')
             .should('exist');
     });
 });
@@ -246,7 +246,7 @@ Then(/^the user types in (.*)/, (orgunit) => {
 Given(/^the enrollment owner organisation unit is (.*)/, (orgunit) => {
     cy.get('[data-test="widget-enrollment"]').within(() => {
         cy.get('[data-test="widget-enrollment-owner-orgunit"]')
-            .contains(`Owned by ${orgunit}`)
+            .contains(`Owned by: ${orgunit}`)
             .should('exist');
     });
 });

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-08-10T10:42:21.141Z\n"
-"PO-Revision-Date: 2024-08-10T10:42:21.141Z\n"
+"POT-Creation-Date: 2024-09-02T11:08:16.281Z\n"
+"PO-Revision-Date: 2024-09-02T11:08:16.281Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1281,12 +1281,6 @@ msgstr "Enrollment widget could not be loaded. Please try again later"
 msgid "Follow-up"
 msgstr "Follow-up"
 
-msgid "Started at {{orgUnitName}}"
-msgstr "Started at {{orgUnitName}}"
-
-msgid "Owned by {{ownerOrgUnit}}"
-msgstr "Owned by {{ownerOrgUnit}}"
-
 msgid "Cancelled"
 msgstr "Cancelled"
 

src/core_modules/capture-core/components/CardList/CardListItem.component.js

@@ -15,7 +15,7 @@ import { searchScopes } from '../SearchBox';
 import { enrollmentTypes } from './CardList.constants';
 import { ListEntry } from './ListEntry.component';
 import { dataElementTypes, getTrackerProgramThrowIfNotFound } from '../../metaData';
-import { useOrgUnitName } from '../../metadataRetrieval/orgUnitName';
+import { useOrgUnitNameWithAncestors } from '../../metadataRetrieval/orgUnitName';
 import type { ListItem, RenderCustomCardActions } from './CardList.types';
 
 type OwnProps = $ReadOnly<{|
@@ -144,7 +144,7 @@ const CardListItemIndex = ({
     const enrollments = item.tei ? item.tei.enrollments : [];
     const enrollmentType = deriveEnrollmentType(enrollments, currentProgramId);
     const { orgUnitId, enrolledAt } = deriveEnrollmentOrgUnitIdAndDate(enrollments, enrollmentType, currentProgramId);
-    const { displayName: orgUnitName } = useOrgUnitName(orgUnitId);
+    const { displayName: orgUnitName } = useOrgUnitNameWithAncestors(orgUnitId);
     const program = enrollments && enrollments.length
         ? deriveProgramFromEnrollment(enrollments, currentSearchScopeType)
         : undefined;

src/core_modules/capture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.component.js

@@ -8,7 +8,7 @@ import { useScopeInfo } from '../../../hooks/useScopeInfo';
 import { scopeTypes } from '../../../metaData';
 import { TrackedEntityInstanceDataEntry } from '../TrackedEntityInstance';
 import { useCurrentOrgUnitId } from '../../../hooks/useCurrentOrgUnitId';
-import { useOrgUnitName } from '../../../metadataRetrieval/orgUnitName';
+import { useOrgUnitNameWithAncestors } from '../../../metadataRetrieval/orgUnitName';
 import type { Props, PlainProps } from './TeiRegistrationEntry.types';
 import { DiscardDialog } from '../../Dialogs/DiscardDialog.component';
 import { withSaveHandler } from '../../DataEntry';
@@ -54,7 +54,7 @@ const TeiRegistrationEntryPlain =
       const { scopeType } = useScopeInfo(selectedScopeId);
       const { formId, formFoundation } = useMetadataForRegistrationForm({ selectedScopeId });
       const orgUnitId = useCurrentOrgUnitId();
-      const { displayName: orgUnitName } = useOrgUnitName(orgUnitId);
+      const { displayName: orgUnitName } = useOrgUnitNameWithAncestors(orgUnitId);
 
       const handleOnCancel = () => {
           if (!isUserInteractionInProgress) {

src/core_modules/capture-core/components/ScopeSelector/ScopeSelector.container.js

@@ -3,7 +3,7 @@ import React, { type ComponentType, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { ScopeSelectorComponent } from './ScopeSelector.component';
 import type { OwnProps } from './ScopeSelector.types';
-import { useOrgUnitName } from '../../metadataRetrieval/orgUnitName';
+import { useOrgUnitNameWithAncestors } from '../../metadataRetrieval/orgUnitName';
 import { resetOrgUnitIdFromScopeSelector } from './ScopeSelector.actions';
 
 
@@ -34,7 +34,7 @@ export const ScopeSelector: ComponentType<OwnProps> = ({
 }) => {
     const dispatch = useDispatch();
     const [selectedOrgUnit, setSelectedOrgUnit] = useState({ name: undefined, id: selectedOrgUnitId });
-    const { displayName, error: ouNameError } = useOrgUnitName(selectedOrgUnit.id);
+    const { displayName, error: ouNameError } = useOrgUnitNameWithAncestors(selectedOrgUnit.id);
 
     useEffect(() => {
         if (displayName && selectedOrgUnit.name !== displayName) {

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

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

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

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

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

@@ -4,7 +4,7 @@ import cx from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import { colors, IconInfo16, IconWarning16 } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
-import { useOrgUnitName } from '../../../../metadataRetrieval/orgUnitName';
+import { useOrgUnitNameWithAncestors } from '../../../../metadataRetrieval/orgUnitName';
 import { OrgUnitScopes } from '../hooks/useTransferValidation';
 import { ProgramAccessLevels } from '../hooks/useProgramAccessLevel';
 
@@ -48,8 +48,8 @@ const InfoBoxesPlain = ({
     orgUnitScopes,
     classes,
 }: Props) => {
-    const { displayName: ownerOrgUnitName } = useOrgUnitName(ownerOrgUnitId);
-    const { displayName: newOrgUnitName } = useOrgUnitName(validOrgUnitId);
+    const { displayName: ownerOrgUnitName } = useOrgUnitNameWithAncestors(ownerOrgUnitId);
+    const { displayName: newOrgUnitName } = useOrgUnitNameWithAncestors(validOrgUnitId);
 
     const showWarning = [ProgramAccessLevels.PROTECTED, ProgramAccessLevels.CLOSED].includes(programAccessLevel)
         && orgUnitScopes.destination === OrgUnitScopes.SEARCH;

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

@@ -17,7 +17,8 @@ import { Widget } from '../Widget';
 import type { PlainProps } from './enrollment.types';
 import { Status } from './Status';
 import { dataElementTypes } from '../../metaData';
-import { useOrgUnitName } from '../../metadataRetrieval/orgUnitName';
+import { convertValue } from '../../converters/clientToView';
+import { useOrgUnitNameWithAncestors } from '../../metadataRetrieval/orgUnitName';
 import { Date } from './Date';
 import { Actions } from './Actions';
 import { MiniMap } from './MiniMap';
@@ -69,11 +70,16 @@ export const WidgetEnrollmentPlain = ({
     onUpdateEnrollmentStatusError,
     onUpdateEnrollmentStatusSuccess,
     onAccessLostFromTransfer,
+    type = dataElementTypes.ORGANISATION_UNIT,
 }: PlainProps) => {
     const [open, setOpenStatus] = useState(true);
     const { fromServerDate } = useTimeZoneConversion();
     const geometryType = getGeometryType(enrollment?.geometry?.type);
-    const { displayName: orgUnitName } = useOrgUnitName(enrollment?.orgUnit);
+    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 };
 
     return (
         <div data-test="widget-enrollment">
@@ -130,19 +136,16 @@ export const WidgetEnrollmentPlain = ({
                             <span className={classes.icon} data-test="widget-enrollment-icon-orgunit">
                                 <IconDimensionOrgUnit16 color={colors.grey600} />
                             </span>
-                            {i18n.t('Started at {{orgUnitName}}', {
-                                orgUnitName,
-                                interpolation: { escapeValue: false },
-                            })}
+                            {i18n.t('Started at: ')}
+                            {convertValue(orgUnitClientValue, type)}
                         </div>
 
                         <div className={classes.row} data-test="widget-enrollment-owner-orgunit">
                             <span className={classes.icon} data-test="widget-enrollment-icon-owner-orgunit">
                                 <IconDimensionOrgUnit16 color={colors.grey600} />
                             </span>
-                            {i18n.t('Owned by {{ownerOrgUnit}}', {
-                                ownerOrgUnit: ownerOrgUnit.displayName,
-                            })}
+                            {i18n.t('Owned by: ')}
+                            {convertValue(ownerOrgUnitClientValue, type)}
                         </div>
 
                         <div className={classes.row} data-test="widget-enrollment-last-update">

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

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { errorCreator } from 'capture-core-utils';
 import log from 'loglevel';
 import { WidgetEnrollment as WidgetEnrollmentNote } from './WidgetEnrollment.component';
-import { useOrgUnitName } from '../../metadataRetrieval/orgUnitName';
+import { useOrgUnitNameWithAncestors } from '../../metadataRetrieval/orgUnitName';
 import { useTrackedEntityInstances } from './hooks/useTrackedEntityInstances';
 import { useEnrollment } from './hooks/useEnrollment';
 import { useProgram } from './hooks/useProgram';
@@ -68,7 +68,7 @@ export const WidgetEnrollment = ({
         enrollments,
         refetch: refetchTEI,
     } = useTrackedEntityInstances(teiId, programId);
-    const { error: errorOrgUnit, displayName } = useOrgUnitName(
+    const { error: errorOrgUnit, displayName } = useOrgUnitNameWithAncestors(
         typeof ownerOrgUnit === 'string' ? ownerOrgUnit : undefined,
     );
     const { error: errorLocale, locale } = useUserLocale();

src/core_modules/capture-core/components/WidgetEventSchedule/WidgetEventSchedule.container.js

@@ -4,7 +4,7 @@ import i18n from '@dhis2/d2-i18n';
 import { useDispatch } from 'react-redux';
 import moment from 'moment';
 import { getProgramAndStageForProgram, TrackerProgram, getProgramEventAccess, dataElementTypes } from '../../metaData';
-import { useOrgUnitName } from '../../metadataRetrieval/orgUnitName';
+import { useOrgUnitNameWithAncestors } from '../../metadataRetrieval/orgUnitName';
 import { useLocationQuery } from '../../utils/routing';
 import type { ContainerProps } from './widgetEventSchedule.types';
 import { WidgetEventScheduleComponent } from './WidgetEventSchedule.component';
@@ -37,7 +37,7 @@ export const WidgetEventSchedule = ({
 }: ContainerProps) => {
     const { program, stage } = useMemo(() => getProgramAndStageForProgram(programId, stageId), [programId, stageId]);
     const dispatch = useDispatch();
-    const orgUnit = { id: orgUnitId, name: useOrgUnitName(orgUnitId).displayName };
+    const orgUnit = { id: orgUnitId, name: useOrgUnitNameWithAncestors(orgUnitId).displayName };
     const { programStageScheduleConfig } = useScheduleConfigFromProgramStage(stageId);
     const { programConfig } = useScheduleConfigFromProgram(programId);
     const suggestedScheduleDate = useDetermineSuggestedScheduleDate({

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

@@ -97,10 +97,10 @@ const WidgetProfilePlain = ({
     const displayInListAttributes = useMemo(() => clientAttributesWithSubvalues
         .filter(item => item.displayInList)
         .map((clientAttribute) => {
-            const { attribute, key } = clientAttribute;
+            const { attribute, key, valueType } = clientAttribute;
             const value = convertClientToView(clientAttribute);
             return {
-                attribute, key, value, reactKey: attribute,
+                attribute, key, value, valueType, reactKey: attribute,
             };
         }), [clientAttributesWithSubvalues]);
 

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

@@ -51,10 +51,17 @@ const getOrganisationUnitSubvalue = async ({ attribute, querySingleResource }: S
         resource: 'organisationUnits',
         id: attribute.value,
         params: {
-            fields: 'id,name',
+            fields: 'id,name,ancestors[displayName]',
         },
     });
-    return { ...organisationUnit };
+
+    const orgUnitClientValue = {
+        id: organisationUnit.id,
+        name: organisationUnit.name,
+        ancestors: organisationUnit.ancestors.map(ancestor => ancestor.displayName),
+    };
+
+    return orgUnitClientValue;
 };
 
 export const subValueGetterByElementType = {

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/FlatListOrgUnitField/FlatListOrgUnitField.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { useOrgUnitName } from '../../../metadataRetrieval/orgUnitName';
+import { useOrgUnitNameWithAncestors } from '../../../metadataRetrieval/orgUnitName';
 
 type Props = {
     orgUnitId: string,
@@ -9,7 +9,7 @@ type Props = {
 export const FlatListOrgUnitField = ({
     orgUnitId,
 }: Props) => {
-    const { displayName } = useOrgUnitName(orgUnitId);
+    const { displayName } = useOrgUnitNameWithAncestors(orgUnitId);
 
     return (
         <span>

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

@@ -7,36 +7,39 @@ 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 convertDateForView(rawValue: string): string {
     const momentDate = moment(rawValue);
     return convertMomentToDateFormatString(momentDate);
 }
-
 function convertDateTimeForView(rawValue: string): string {
     const momentDate = moment(rawValue);
     const dateString = convertMomentToDateFormatString(momentDate);
     const timeString = momentDate.format('HH:mm');
     return `${dateString} ${timeString}`;
 }
-
 function convertTimeForView(rawValue: string): string {
     const momentDate = moment(rawValue, 'HH:mm', true);
     return momentDate.format('HH:mm');
 }
-
 type FileClientValue = {
     name: string,
     url: string,
     value: string,
 };
-
 type ImageClientValue = {
     ...FileClientValue,
     previewUrl: string,
 };
 
+type OrgUnitClientValue = {
+    name: string,
+    ancestors?: Array<string>,
+    tooltip?: string,
+};
+
 function convertFileForDisplay(clientValue: FileClientValue) {
     return (
         <a
@@ -54,6 +57,16 @@ function convertImageForDisplay(clientValue: ImageClientValue) {
     return <PreviewImage url={clientValue.url} previewUrl={clientValue.previewUrl} alignLeft />;
 }
 
+function convertOrgUnitForDisplay(clientValue: OrgUnitClientValue) {
+    return (
+        <TooltipOrgUnit
+            orgUnitName={clientValue.name}
+            ancestors={clientValue.ancestors}
+            tooltip={clientValue.tooltip}
+        />
+    );
+}
+
 const valueConvertersForType = {
     [dataElementTypes.NUMBER]: stringifyNumber,
     [dataElementTypes.INTEGER]: stringifyNumber,
@@ -70,26 +83,23 @@ const valueConvertersForType = {
     [dataElementTypes.AGE]: convertDateForView,
     [dataElementTypes.FILE_RESOURCE]: convertFileForDisplay,
     [dataElementTypes.IMAGE]: convertImageForDisplay,
-    [dataElementTypes.ORGANISATION_UNIT]: (rawValue: Object) => rawValue.name,
+    [dataElementTypes.ORGANISATION_UNIT]: convertOrgUnitForDisplay,
     [dataElementTypes.POLYGON]: () => 'Polygon',
 };
 
 export function convertValue(value: any, type: $Keys<typeof dataElementTypes>, dataElement?: ?DataElement) {
     if (!value && value !== 0 && value !== false) {
         return value;
     }
-
     if (dataElement && dataElement.optionSet) {
         if (dataElement.type === dataElementTypes.MULTI_TEXT) {
             return dataElement.optionSet.getMultiOptionsText(value);
         }
         return dataElement.optionSet.getOptionText(value);
     }
-
     // $FlowFixMe dataElementTypes flow error
     return valueConvertersForType[type] ? valueConvertersForType[type](value) : value;
 }
-
 export function convertDateWithTimeForView(rawValue?: ?string): string {
     if (!rawValue) { return ''; }
     if (!moment(rawValue).hours() && !moment(rawValue).minutes()) {

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

@@ -1,6 +1,6 @@
 // @flow
 export {
-    useOrgUnitName,
+    useOrgUnitNameWithAncestors,
     useOrgUnitNames,
     getOrgUnitNames,
     getCachedOrgUnitName,