Feature/59925 show user popover on the name #17692

EinLama · 2025-01-22T09:08:23Z

Ticket

https://community.openproject.org/wp/59925

What are you trying to accomplish?

Enable the hover card not only on avatars, but also when hovering on names.

patch AvatarComponent so that names rendered there will display a hover card.
search application for usernames that show up outside of the AvatarComponent
- linked names in WP journal
- within auto completers
- linked names in WP description and comments
- news
- wiki
- admin: users
- project: members

Notable technical exceptions where the hover card will not render due to technical limitations of our spot modal usage:

work package share dialog
global search
global invitation modal

I am currently working on removing these limitations in a follow-up PR, but wanted to make the current state available for review.

Notable other exceptions where the required effort to patch in hover cards was not worth it in my opinion:

the news block on the my-page: it uses a very different way of constructing links. I skipped it since the necessary increase in complexity is not worth it for a single widget.
some username entries in WP journals that are not links, but plain text. This happens for example when the activity describes someone setting a new assignee on a work package. The new assignee will not be a link to a user, it will just be the username instead. Again skipped due to complexity vs. gain.

Screenshots

hover_card_on_name.mov

What approach did you choose and why?

I applied the same logic to usernames as I did on the avatars. For some user names (e.g. within auto completers), there was no easy way to inject the necessary parameters into the data attributes of the user name span, so I instead introduced a new CSS class: .op-hover-card--data-on-sibling-principal
If a hover card is triggered, but the source element has this class, the hover card data is sourced from sibling elements if possible.

To cover most other links, I extended ObjectLinking#link_to_user to add hover card info to the link.

Fixed some timing and consistency bugs while on it, too.

Merge checklist

Added/updated tests
Added/updated documentation in Lookbook (patterns, previews, etc)
Tested major browsers (Chrome, Firefox, Edge, ...)

HDinger

Hi @EinLama

I don't quite get the necessity for the sibling logic. Maybe we can shortly talk about that. Other than that, I found some issues while testing it:

I managed quite often to get to a state where either the name or the avatar does not trigger a hoverCard any more
There seems to an issue with the helper, but I could not quite get my finger on it. The WP info line shortly shows the author as a link before it switches to a text. That does not happen with all users however, I only saw it when the author is my current logged in user. However, even when there is a link shown, there is no hoverCard when hovering it.

In the acceptance criteria it is said, that there should be no flicker when switching between name and avatar. The card is however disappearing when I leave the name and reopens when hovering the avatar. Due to the delay it does not feel flickering but I'd neverless like to hear the opinion of the product team on this.

frontend/src/app/core/setup/globals/global-listeners/hover-card-trigger.service.ts

EinLama · 2025-02-03T07:57:18Z

Hey @HDinger,

thank you for your review. You already helped me get rid of the unnecessary bloat fetching data from a sibling element. So that one is done.

I managed quite often to get to a state where either the name or the avatar does not trigger a hoverCard any more

I could reproduce this by "jittering" the mouse cursor over the trigger. The hover card trigger service has a safe-guard that - once shown - will not re-show the same hover card again. This safe-guard was too restrictive and did not consider that you could move the mouse cursor away before the hover card is actually shown. So the trigger service thought it had to safe guard a hover card that wasn't there yet. I moved the safe-guard to the appropriate position and that fixed it. If the cause for your observed behavior was the same, that should be fixed, too.

There seems to an issue with the helper, but I could not quite get my finger on it. The WP info line shortly shows the author as a link before it switches to a text. That does not happen with all users however, I only saw it when the author is my current logged in user. However, even when there is a link shown, there is no hoverCard when hovering it.

I could not reproduce this, nor have I ever seen it 🤔

In the acceptance criteria it is said, that there should be no flicker when switching between name and avatar. The card is however disappearing when I leave the name and reopens when hovering the avatar. Due to the delay it does not feel flickering but I'd neverless like to hear the opinion of the product team on this.

Will discuss later today and report back.

EinLama · 2025-02-03T09:10:07Z

The hover card disappearing briefly when alternating between username and avatar has been discussed with product and is deemed okay 👍🏻

HDinger

I only have small remarks left:

The author of a WP is now correctly shown as link (in the little info row next to the status). However, hovering over it does not trigger a HoverCard
When opening a user autocompleter (e.g to set an assignee), I can also see groups. Hovering over a group name triggers an empty hovercard which lays behind the dropdown. There should be no card at all

HDinger · 2025-02-04T07:59:52Z

...hared/components/autocompleter/user-autocompleter/user-autocompleter-template.component.sass

+// For hover cards to work within the auto completer, we have to ensure that the hover event can be properly
+// triggered when mousing over the name. The easiest way to do this is to set it to inline-block.
+.op-user-autocompleter--name.op-hover-card--preview-trigger
+  display: inline-block


I don't quite understand why this is needed at all but it causes problems with long names which are simply cut off:

I added this property since I encountered weird behavior. When you hovered over a name in an autocompleter, the hover card would show up. But as soon as you traced over a space between words, it would disappear - only to re-appear shortly thereafter when you leave the space and enter the next word.

However, this no longer happens now. So there must have been another in-development-state present back then that was the cause for this buggy behavior. Thanks for questioning this, I can remove this hack!

Nesting them is not supported.

used in * news * wiki * activity * and more!

... on the overview page

... on overview page

After rendering a comment or wp description, the hover card should appear when you hover over a mentioned username.

This reverts commit e095361.

my-news uses angular, here we are using rails -> do not mix up the translation keys as they are used with different approaches in mind.

The autocompleter hover cards only worked when there was no search highlighting enabled. As soon as there were results, the child spans were transformed and you could not hover over them anymore, so cards did not trigger. Setting these to `inline-block` fixes that issue.

This reverts commit 4fdc18c.

* use cuprite * get rid of unneeded empty grid setup (that is ignored) * expect a location that exists

Yes, it has many conditions. But throwing in additional methods won't help with reducing its complexity.

this is no longer needed

EinLama · 2025-02-04T08:56:04Z

The author of a WP is now correctly shown as link (in the little info row next to the status). However, hovering over it does not trigger a HoverCard

Thank you, fixed!

When opening a user autocompleter (e.g to set an assignee), I can also see groups. Hovering over a group name triggers an empty hovercard which lays behind the dropdown. There should be no card at all

That was a side-efffect of me removing the sibling logic. Fixed now so that hover cards are only shown for principals of type user.

EinLama · 2025-02-04T09:51:46Z

The red spec is flaky, have seen this a couple of times 😵

HDinger

Nice job 👍 🌟

EinLama force-pushed the feature/59925-show-user-popover-on-the-name branch 6 times, most recently from 84926fc to cf1c93e Compare January 29, 2025 07:25

EinLama marked this pull request as ready for review January 30, 2025 09:03

HDinger requested changes Jan 31, 2025

View reviewed changes

frontend/src/app/core/setup/globals/global-listeners/hover-card-trigger.service.ts Outdated Show resolved Hide resolved

EinLama force-pushed the feature/59925-show-user-popover-on-the-name branch from 967ddd3 to 960f58c Compare February 3, 2025 07:47

EinLama added the feature label Feb 3, 2025

HDinger requested changes Feb 4, 2025

View reviewed changes

EinLama added 17 commits February 4, 2025 09:54

[#59925] principal renderer shows hover card on name hover

e49936b

[#59925] fix: do not allow user hovecard within wp hover card

95b4924

Nesting them is not supported.

[#59925] show hover card in wp activity

1bfd8ba

[#59925] show hover card for user links

3f1dfed

used in * news * wiki * activity * and more!

[#59925] shared helper for rendering primer user links

1db694c

[#59925] hover card in news block

f76668d

... on the overview page

[#59925] hover card in new users block

6aeba72

... on overview page

[#59925] hover card in admin user table

605d62c

[#59925] refactor

2bb8840

[#59925] fix specs

c9d230d

[#59925] make text formatter work with hover cards

ed890b3

After rendering a comment or wp description, the hover card should appear when you hover over a mentioned username.

[#59925] Revert "[#59925] hover card in news block"

aa00d3a

This reverts commit e095361.

[#59925] use designated label for different use case

bf9df37

my-news uses angular, here we are using rails -> do not mix up the translation keys as they are used with different approaches in mind.

[#59925] adjust for new translation

6c1a865

[#59925] fix user login display in user list

4c8ece6

[#59925] enable hover cards for auto completer labels

4962087

[#59925] use more jQuery

c4ffff7

EinLama added 13 commits February 4, 2025 09:54

[#59925] ensure correct modal is closed

ab3baa9

[#59925] fix spec

e006666

[#59925] Revert "[#59925] ensure correct modal is closed"

a66d78b

This reverts commit 4fdc18c.

[#59925] Ensure hover cards play nice with other modals

8db9044

[#59925] Provide some comments

19b5097

[#59925] fix faulty spec

3f80031

* use cuprite * get rid of unneeded empty grid setup (that is ignored) * expect a location that exists

[#59925] ignore rubocop for this method

455a865

Yes, it has many conditions. But throwing in additional methods won't help with reducing its complexity.

[#59925] Get hover card data directly from username

f6a31d6

[#59925] allow hover card to open even when mouse cursor is jittering

287e214

[#59925] show hover card for work package author

7c7c91a

[#59925] remove css hack

4d59b15

this is no longer needed

[#59925] autocompleters: only show hover card for users

3eb1fa7

EinLama force-pushed the feature/59925-show-user-popover-on-the-name branch from 5a24300 to 3eb1fa7 Compare February 4, 2025 08:54

EinLama requested a review from HDinger February 4, 2025 08:57

[#59925] spec was fixed upstream, make green again

6643c02

HDinger approved these changes Feb 4, 2025

View reviewed changes

EinLama merged commit d9cb693 into dev Feb 4, 2025
13 of 14 checks passed

EinLama deleted the feature/59925-show-user-popover-on-the-name branch February 4, 2025 10:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/59925 show user popover on the name #17692

Feature/59925 show user popover on the name #17692

EinLama commented Jan 22, 2025 •

edited

Loading

HDinger left a comment •

edited by EinLama

Loading

EinLama commented Feb 3, 2025

EinLama commented Feb 3, 2025

HDinger left a comment

HDinger Feb 4, 2025

EinLama Feb 4, 2025

EinLama commented Feb 4, 2025

EinLama commented Feb 4, 2025

HDinger left a comment

Feature/59925 show user popover on the name #17692

Feature/59925 show user popover on the name #17692

Conversation

EinLama commented Jan 22, 2025 • edited Loading

Ticket

What are you trying to accomplish?

Screenshots

What approach did you choose and why?

Merge checklist

HDinger left a comment • edited by EinLama Loading

Choose a reason for hiding this comment

EinLama commented Feb 3, 2025

EinLama commented Feb 3, 2025

HDinger left a comment

Choose a reason for hiding this comment

HDinger Feb 4, 2025

Choose a reason for hiding this comment

EinLama Feb 4, 2025

Choose a reason for hiding this comment

EinLama commented Feb 4, 2025

EinLama commented Feb 4, 2025

HDinger left a comment

Choose a reason for hiding this comment

EinLama commented Jan 22, 2025 •

edited

Loading

HDinger left a comment •

edited by EinLama

Loading