feat: show users who added a reactji

[BartoszJarocki]

Description

Fixes no issue, I just think we need that!

Demo

Hover over a reacji

Testing scenarios

• [ ] open any discussion thread, add emoji, hover over it, and see if a tooltip appears
• [ ] sign in as another user, add another emoji and see if hovering over it from another browser shows the correct user
• [ ] open standup meeting and repeat the scenarios above

Final checklist

• [x] I checked the code review guidelines
• [x] I have added Metrics Representative as reviewer(s) if my PR invovles metrics/data/analytics related changes
• [x] I have performed a self-review of my code, the same way I'd do it for any other team member
• [x] I have tested all cases I listed in the testing scenarios and I haven't found any issues or regressions
• [x] Whenever I took a non-obvious choice I added a comment explaining why I did it this way
• [x] I added the label One Review Required if the PR introduces only minor changes, does not contain any architectural changes or does not introduce any new patterns and I think one review is sufficient'
• [x] PR title is human readable and could be used in changelog

[enriquesanchez]

@BartoszJarocki This is nice!

I have one request and one question:

Request: Can the hover area include the reactji number? Currently the tooltip only appears when hovering the reactji, but if you hover the number count nothing happens. I assume the hover action can be set to the whole button element?

https://user-images.githubusercontent.com/3276087/191547624-9609979e-b972-4850-816d-b3566469b3ce.mp4

Question: How does it behave when there are a lot of user names in the tooltip? Is there a max number of users? Does it wrap?

[BartoszJarocki]

@enriquesanchez thank you for looking into it!

Can the hover area include the reactji number? Currently the tooltip only appears when hovering the reactji, but if you hover the number count nothing happens. I assume the hover action can be set to the whole button element?

for sure!

Question: How does it behave when there are a lot of user names in the tooltip? Is there a max number of users? Does it wrap?

well, it'll probably grow horizontally right now, which isn't perfect. do you have any ideas on how we can make the UI better? 🙏

[enriquesanchez]

I like what Slack does, where once it reaches a specific width (800px), it starts to wrap and grow vertically:

But I still think we should plan for extreme cases, for example, what would happen if 50 people react with the same reactji? What about 100?

This feels ugly, but setting a max-height and adding scrolling would solve it. What do you think?

For our case, maybe something like 600px wide by 300px tall would work best?

[BartoszJarocki]

@enriquesanchez thank you! here's what I came up with wdyt?

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

[enriquesanchez]

@BartoszJarocki Nice! I think we can get rid of the emoji in this tooltip, no need to repeat it and it will let us keep it small. How does that sound?

[BartoszJarocki]

@enriquesanchez no strong opinions either way. I borrowed the design from slack 😅

[github-actions[bot]]

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR will be delayed and might be rejected due to its size.

[BartoszJarocki]

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR will be delayed and might be rejected due to its size.

hey, be fair and stop counting yarn.lock lines

[BartoszJarocki]

@nickoferrall could you please take a look at this one? thank you!

[BartoszJarocki]

@nickoferrall would you mind doing another round? thank you!