fix: add tooltip for long title in list view ui

[saumeya]

closes #9752

Signed-off-by: saumeya saumeyakatyal@gmail.com

Note on DCO:

If the DCO action in the integration test fails, one or more of your commits are not signed off. Please click on the Details link next to the DCO action for instructions on how to resolve this.

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• Optional. My organization is added to USERS.md.
• I have signed off all my commits as required by DCO
• I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
• My build is green (troubleshooting builds).

[codecov]

Codecov Report

Base: 45.76% // Head: 45.76% // No change to project coverage 👍

Coverage data is based on head (5dcd578) compared to base (49487ea).
Patch has no changes to coverable lines.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #9792   +/-   ##
=======================================
  Coverage   45.76%   45.76%           
=======================================
  Files         236      236           
  Lines       28529    28529           
=======================================
  Hits        13055    13055           
  Misses      13669    13669           
  Partials     1805     1805           

Impacted Files	Coverage Δ
util/settings/settings.go	51.36% <0.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[ciiay]

Hi Saumeya, I see you hard coded the length where you want to add the tooltip. There should be a better/smarter way to decide whether or not to display the tooltip. Check this link out and see if it makes sense to you.

[saumeya]

Hi Saumeya, I see you hard coded the length where you want to add the tooltip. There should be a better/smarter way to decide whether or not to display the tooltip. Check this link out and see if it makes sense to you.

Makes sense Yi, I would look into this. Thanks!

[saumeya]

Hi @ciiay I took a look at this suggestion, the problem to implement that is we need to use useRef hook to get the div to check if ellipsis exists. Given that this field is within a table (loop) the ref doesn't get updated each time. There could be other possible solutions, but I guess given that this issue is minor, a constant length should be fine.

[keithchong]

I agree with @ciiay . The constant there doesn't fit in all situations. For example, if you adjust the browser's zoom (zoom out), so that there is no truncation, then the tooltip still appears.

Why not just show the tooltip all the time, whether it is needed or not? The Source URL in the column to the right of the Name, does that:

argo-cd/ui/src/app/applications/components/applications-list/applications-source.tsx

Line 10 in 3f858f5

<Tooltip content={sourceString}>

[saumeya]

@keithchong @ciiay could you review and merge?

[keithchong]

LGTM. Something that is independent of this fix, but the layout of the row seems unpolished when the width of the table is decreased.