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

[henrikmv]

DHIS2-17770

• Adds a dotted line under the organization unit name where a tooltip is shown when hovering.
• Updates cache and all functions in OrgUnitName.js to include ancestors.
• New structure for cache, example:
  DiszpKrYNg8: Object { displayName: "Ngelehun CHC", ancestor: "YuQRtpLP10I" }.
  ancestor contains the id to the parent orgUnit in the orgUnit tree. With this structure for the cache, we are storing information about an orgUnit only once.
• use recursion to build the ancestor when cached

Please see the comment on Jira for more information about the cache structure.

Note: Wrong issue number on branch. The correct number is DHIS2-17770

[simonadomnisoru]

Hey @henrikmv,
I didn't see any changes to the organizational unit in the stages&events widget as mentioned in the Jira ticket. The places where I saw the tooltip with the ancestors were the enrollment and profile widget. Did the scope of the feature change?
I also added a few comments and questions throughout the code.
Thanks!

[simonadomnisoru]

Does it make sense to keep the orgUnitName as part of the translatable string? In other languages, the order of the words can be different than in English. One suggestion is to pass an optional prop to TooltipOrgUnit and to display it instead of {orgUnitName}. Something like this:

<TooltipOrgUnit
    orgUnitName={orgUnitName}
    ancestors={ancestors}
    tooltip={i18n.t('Started at {{orgUnitName}}', {
            orgUnitName,
             interpolation: { escapeValue: false },
     })}
 />

// inside TooltipOrgUnit.component.js

 <Tooltip content={orgUnitNameFullPath} openDelay={400}>
     <span style={{ textDecoration: 'underline dotted' }}>
            {tooltip ? tooltip : orgUnitName}
     </span>
</Tooltip>

This change will apply the dotted line to the whole label. WYDT? Thanks!

[JoakimSM]

Talked to Henrik about this one. I agree it's important to be conscious about this problem, but in this case I suggest we simplify as you could really think of the string as two columns ("started at" and then the org unit name).

EDIT: Let's add a colon to be 100% sure (Started at: Ngelehun CHC)

[superskip]

Looks very close to done now 👍

[superskip]

Great work! 🎉

[eirikhaugstulen]

Well done, @henrikmv! 🎉

[geethaalwan]

Tested successfully on 2.42,2.41.2,2.40.6,2.39.7 versions

[dhis2-bot]

🎉 This PR is included in version 101.5.0 🎉

The release is available on:

• AppHub release
• v101.5.0
• GitHub release

Your semantic-release bot 📦🚀