fix(dashboards): Tooltip for all teams with access in access selector #83681
Conversation
github-actions
bot
added
the
Scope: Frontend
| <Tooltip | ||
| title={collapsedAvatarTooltip ?? `${numCollapsedAvatars} other ${typeAvatars}`} | ||
| skipWrapper={!collapsedAvatarTooltip} | ||
| isHoverable={!!collapsedAvatarTooltip} | ||
| overlayStyle={collapsedAvatarTooltipStyle} | ||
| > | ||
| <CollapsedAvatars | ||
| size={avatarSize} | ||
| data-test-id="avatarList-collapsedavatars" | ||
| collapsedAvatarActions={collapsedAvatarActions} | ||
| > | ||
| {numCollapsedAvatars < 99 && <Plus>+</Plus>} | ||
| {numCollapsedAvatars} | ||
| </CollapsedAvatars> |
There was a problem hiding this comment.
I'm a little hesitant to add these kinds of changes because they're very specific to our use case right now with how we're assigning collapsedAvatarActions. Do you think it's possible to add a function that renders a different output for the collapsed avatars and in our code have the specific implementation we need with the hovering?
e.g. a custom renderer called renderCollapsedAvatars which would be used something like:
{
renderCollapsedAvatars?.(... whatever props would be necessary for collapsed avatars) ??
<the default stuff here>
}Just trying to keep the interface generic but a bit easier to understand 🤔 let me know what you think
There was a problem hiding this comment.
yup agreed! good point. I just pushed the changes for that :)
Bundle ReportChanges will increase total bundle size by 237.4kB (0.76%) ⬆️. This is within the configured threshold ✅ Detailed changes
|
| onMouseEnter={() => collapsedAvatarActions?.onMouseEnter?.()} | ||
| onMouseLeave={() => collapsedAvatarActions?.onMouseLeave?.()} |
There was a problem hiding this comment.
We can drop a bunch of these changes now, right?
There was a problem hiding this comment.
we can't drop this because i use them to detect tooltip conflicts, however i'm open to other suggestions 👀
|
|
||
| const CollapsedAvatarTooltip = styled('div')` | ||
| max-height: 200px; | ||
| overflow-y: scroll; |
There was a problem hiding this comment.
I think we want something like overflow-y: auto because if you use scroll, the scroll bar is always visible even if there isn't any scrolling to do, e.g.
…#83681) There was a request to have a tooltip displaying all teams that have access to a dashboard in [this slack thread](https://sentry.slack.com/archives/C072KUA8R1U/p1736457766301069). Now hovering over the +(a number) bubble in the avatar list will give a tooltip of all the teams (some of them are scrollable due to the large amount of teams). Here's what it looks like: <img width="778" alt="image" src="https://github.com/user-attachments/assets/40086f9c-9562-40a6-ab11-a1195ebf6471" />
There was a request to have a tooltip displaying all teams that have access to a dashboard in this slack thread. Now hovering over the +(a number) bubble in the avatar list will give a tooltip of all the teams (some of them are scrollable due to the large amount of teams).
Here's what it looks like:
