feat: [DHIS2-15783] Tooltip on long working list names

[eirikhaugstulen]

Summary:

• Added a tooltip for TemplateSelectorChip
• Wrapped it in a button to get keyboard focusability (not supported by UI)

[superskip]

Looks like a decent solution 👍
Perhaps we can make a slight improvement by not showing the tooltip if a name has not been truncated? (I tried to see if ConditionalTooltip could be applied here, but it dosen't quite seem to fit. So I'm thinking more along the lines of using a plain conditional expression for achieving this.)

[simonadomnisoru]

Hey @eirikhaugstulen,
Can you add the same logic on the /search page inside the TemplateSelector component?
Thanks!

[eirikhaugstulen]

Thanks for the review, @simonadomnisoru & @superskip!

Regarding conditionally rendering tooltips; there seems to be a lot of work to make this generic while using ConditionalTooltip. (Chips we can wrap in a separate button, while if we use DHIS2/UI buttons, things work a bit differently.)
If you check my latest commit, you can see how it could be implemented with a separate ConditionalTooltipForChip-component. Could you take a look and see if this is something you want?

[superskip]

Hey @eirikhaugstulen!
I think extracting the style- and ref-stuff into a separate component made the code look better 😄
I'm wondering if we should put the two conditional tooltip components in a common Tooltip folder. I also suggest renaming the new tooltip component to TooltipForChip (no need to make clear in the title that such tooltips can be disabled).

[eirikhaugstulen]

Thanks @superskip, I implemented your changes!
I still feel like this new Tooltip could be named something Conditional as it takes in an enabled prop (required) and it might not show above a chip. But this is not a hill I'll die on, and TooltipForChip makes sense for now!

[superskip]

Very good @eirikhaugstulen! I only have one final minor refactor suggestion, which is to add an index file to the Tooltips folder. Please say no if you think it's too pointless.

EDIT: Regarding the enabled prop, we could maybe make that optional and true by default, if that solves your main concern with the shorter name?

[superskip]

After our discussion I agree with you it's fine as it is now, never mind last comment 🙂

[simonadomnisoru]

Regarding conditionally rendering tooltips; there seems to be a lot of work to make this generic while using ConditionalTooltip. (Chips we can wrap in a separate button, while if we use DHIS2/UI buttons, things work a bit differently.) If you check my latest commit, you can see how it could be implemented with a separate ConditionalTooltipForChip-component. Could you take a look and see if this is something you want?

The latest commits look great! Good job @eirikhaugstulen 👏

[github-actions]

🚀 Deployed on https://deploy-preview-3474--dhis2-capture.netlify.app

[geethaalwan]

Tested successfully on 2.41,2.40.3,2.39.5,2.38.6 versions

[dhis2-bot]

🎉 This PR is included in version 100.48.0 🎉

The release is available on:

• AppHub release
• v100.48.0
• GitHub release

Your semantic-release bot 📦🚀