Convert admin/users view - user popover error
Problem to solve
The user popover only accepts a target element type HTMLAnchorElement
, however the Vue user avatar component is using a HTMLDivElement
, causing a console error for each row. Additionally the user popover should only display when a user's profile link is in focus like it does in the HAML view. However in the Vue table it currently shows when hovering over the entire avatar component and not just the profile link.
Screenshots
HAML | Vue |
---|---|
![]() |
![]() |
Proposed solution
We could update the UserPopover
accept both HTMLAnchorElement
and HTMLDivElement
as a quick fix.
A full solution would include creating a custom avatar component or modifying GlAvatarLabaled
to include a template slot for the label
which would then include the popover class & data, like so:
<gl-avatar-labeled>
<template #label>
<a class="js-user-link" :data-user-id="" :data-username="" href="#" class="gl-link gl-avatar-link">
<span class="gl-avatar-labeled-label">Username</span>
</a>
</template>
</gl-avatar-labeled>
Edited by Jiaan Louw