feat: add hover card and expand on contributor stack #742

takanome-dev · 2022-12-26T23:54:38Z

What type of PR is this? (check all applicable)

Description

This PR adds a hover card when hovering contributor stack and expand them.

Related Tickets & Documents

Fixes #683

Mobile & Desktop Screenshots/Recordings

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify · 2022-12-26T23:54:43Z

✅ Deploy Preview for oss-insights ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`0de7906`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/63b4a932a2675c00081db20e
😎 Deploy Preview	https://deploy-preview-742--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify · 2022-12-26T23:54:49Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`0de7906`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/63b4a932ee47300008b49c94
😎 Deploy Preview	https://deploy-preview-742--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

takanome-dev · 2022-12-27T17:27:34Z

@bdougie for the stacked contributors, we don't have last_merged_at or last_commit_time. The only info I'm getting is first_commit_time

bdougie · 2022-12-27T18:34:01Z

@bdougie for the stacked contributors, we don't have last_merged_at or last_commit_time. The only info I'm getting is first_commit_time

To be clear, is this the hovercard you are trying to recreate?

bdougie · 2022-12-27T20:01:03Z

This needs to be corrected. As I mentioned in my note from the issue, we are only copying the expansion of avatars from the hot repo. The functionality of the hover radix should be copied. The nivo chart can not be hovered over due to a limit of nivo chart. This limitation does not exist elsewhere.

The hovercard should be the same hovercard used on the contributor calendar

takanome-dev · 2022-12-27T22:25:08Z

This needs to be corrected. As I mentioned in my note from the issue, we are only copying the expansion of avatars from the hot repo. The functionality of the hover radix should be copied. The nivo chart can not be hovered over due to a limit of nivo chart. This limitation does not exist elsewhere.

The hovercard should be the same hovercard used on the contributor calendar

So, if I understand correctly, when hovering the staked avatar, they should expand and when one of them is hovered, the hovercard used in the contributor calendar should appear. Is that correct?

bdougie · 2022-12-27T23:03:26Z

Correct

…-card

bdougie

Can you make avatar link to /users/handle. Eventually all links will be to internal profiles and not github.

https://deploy-preview-742--oss-insights.netlify.app/user/annacmc

0-vortex

LGTM except img tag. Anything blocking the normal implementation?

components/atoms/Avatar/avatar-hover-card.tsx

github-actions

PR Compliance Checks

Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.

Watched Files

This pull request modifies specific files that require careful review by the maintainers.

Files Matched

npm-shrinkwrap.json
package.json

…-card

0-vortex

Needs better anchors, we cannot have div inside a and colliding styles, forcing important. The radix hover card implementation looks good but is colliding with global styles - the global and colliding styles should be removed/debugged

components/molecules/CardProfile/card-profile.tsx

components/molecules/StackedAvatar/stacked-avatar.tsx

…-card

takanome-dev · 2023-01-03T16:59:44Z

@brandonroberts changes made 👍

OgDev-01 · 2023-01-03T20:26:41Z

Hey @takanome-dev, This looks good overall 👍. Just some minor fix

Previous version

Current version

The additional contributors count number at the right of the stacked avatar that shows `+number` is now hidden due to the absolute position set on the stacked avatar... The fix lies in the `repoRow` component on line `190`, aligning the `div` to the end should solve this... A suggestion is using `ml-auto`. Once this is fixed, We are right on track to merge this 🍕

bdougie · 2023-01-03T21:36:44Z

Looks like when expanded on the dashboard, it crosses the boundary. Can you do a quick fix to limit those contributors to 5.

Browser metadata

Path:      /javascript/dashboard/filter/recent
Browser:   Chrome 108.0.0.0 on Mac OS 10.15.7
Viewport:  1280 x 616 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

bdougie

#742 (comment)

takanome-dev · 2023-01-03T21:50:48Z

The additional contributors count number at the right of the stacked avatar that shows +number is now hidden due to the absolute position set on the stacked avatar... The fix lies in the repoRow component on line 190, aligning the div to the end should solve this... A suggestion is using ml-auto. Once this is fixed, We are right on track to merge this

Nice catch 👍 I don't really remember why I used absolute positioning, but I revert it

takanome-dev · 2023-01-03T21:51:38Z

Looks like when expanded on the dashboard, it crosses the boundary. Can you do a quick fix to limit those contributors to 5.

Fixed ✔️

OgDev-01 · 2023-01-03T21:58:59Z

All good now 👏

OgDev-01

LGTM

## [1.23.0-beta.10](v1.23.0-beta.9...v1.23.0-beta.10) (2023-01-03) ### 🍕 Features * add hover card and expand on contributor stack ([#742](#742)) ([9f45b3d](9f45b3d))

github-actions · 2023-01-03T22:48:16Z

🎉 This PR is included in version 1.23.0-beta.10 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.23.0](v1.22.2...v1.23.0) (2023-01-05) ### 🧑‍💻 Code Refactoring * update pr velocity indicator ([#707](#707)) ([7e96735](7e96735)), closes [#684](#684) ### 🐛 Bug Fixes * add missing title props ([cdcc28d](cdcc28d)) * correct some tooling and dependency issues ([#749](#749)) ([cb4ec9f](cb4ec9f)) * only pull insights for stacked avatar on insight pages ([#761](#761)) ([80ae119](80ae119)) * overflow x bug on dashboard ([#709](#709)) ([b022dbc](b022dbc)), closes [#677](#677) * user profile auth avatar processing errors ([#755](#755)) ([3ba87a6](3ba87a6)), closes [#733](#733) ### 🍕 Features * add Edit Page button to insight pages ([#738](#738)) ([bde1eb8](bde1eb8)), closes [#685](#685) * add favorite repos on the design system ([#744](#744)) ([c8660b5](c8660b5)), closes [#717](#717) * add hover card and expand on contributor stack ([#742](#742)) ([9f45b3d](9f45b3d)) * adjust search font-size ([c451450](c451450)) * change name to enhace from logarithmic ([#743](#743)) ([4384324](4384324)) * enable repository selection & add to new insights page ([#693](#693)) ([ba6405d](ba6405d)), closes [#593](#593) [#592](#592) * Filter dashboard scatter plot by PR states ([#736](#736)) ([f04093a](f04093a)) * handle close modal when click outside and improve select usage ([#705](#705)) ([105a47b](105a47b)), closes [#689](#689) * update icon PR details row ([#706](#706)) ([dac42ba](dac42ba)), closes [#696](#696)

github-actions · 2023-01-05T22:05:44Z

🎉 This PR is included in version 1.23.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

* origin/main: (29 commits) chore(minor): release 1.23.0 [skip ci] chore(minor): release 1.23.0-beta.13 on beta channel [skip ci] feat: update icon PR details row (#706) chore(patch): release 1.23.0-beta.12 on beta channel [skip ci] fix: only pull insights for stacked avatar on insight pages (#761) chore(patch): release 1.23.0-beta.11 on beta channel [skip ci] refactor: update pr velocity indicator (#707) chore(minor): release 1.23.0-beta.10 on beta channel [skip ci] feat: add hover card and expand on contributor stack (#742) chore(patch): release 1.23.0-beta.9 on beta channel [skip ci] fix: user profile auth avatar processing errors (#755) chore(minor): release 1.23.0-beta.8 on beta channel [skip ci] feat: handle close modal when click outside and improve select usage (#705) chore(patch): release 1.23.0-beta.7 on beta channel [skip ci] fix: correct some tooling and dependency issues (#749) chore(minor): release 1.23.0-beta.6 on beta channel [skip ci] fix: add missing title props feat: add Edit Page button to insight pages (#738) feat: enable repository selection & add to new insights page (#693) chore(minor): release 1.23.0-beta.5 on beta channel [skip ci] ...

## [1.23.0-beta.10](open-sauced/app@v1.23.0-beta.9...v1.23.0-beta.10) (2023-01-03) ### 🍕 Features * add hover card and expand on contributor stack ([#742](open-sauced/app#742)) ([9f45b3d](open-sauced/app@9f45b3d))

## [1.23.0](open-sauced/app@v1.22.2...v1.23.0) (2023-01-05) ### 🧑‍💻 Code Refactoring * update pr velocity indicator ([#707](open-sauced/app#707)) ([7e96735](open-sauced/app@7e96735)), closes [#684](open-sauced/app#684) ### 🐛 Bug Fixes * add missing title props ([cdcc28d](open-sauced/app@cdcc28d)) * correct some tooling and dependency issues ([#749](open-sauced/app#749)) ([cb4ec9f](open-sauced/app@cb4ec9f)) * only pull insights for stacked avatar on insight pages ([#761](open-sauced/app#761)) ([80ae119](open-sauced/app@80ae119)) * overflow x bug on dashboard ([#709](open-sauced/app#709)) ([b022dbc](open-sauced/app@b022dbc)), closes [#677](open-sauced/app#677) * user profile auth avatar processing errors ([#755](open-sauced/app#755)) ([3ba87a6](open-sauced/app@3ba87a6)), closes [#733](open-sauced/app#733) ### 🍕 Features * add Edit Page button to insight pages ([#738](open-sauced/app#738)) ([bde1eb8](open-sauced/app@bde1eb8)), closes [#685](open-sauced/app#685) * add favorite repos on the design system ([#744](open-sauced/app#744)) ([c8660b5](open-sauced/app@c8660b5)), closes [#717](open-sauced/app#717) * add hover card and expand on contributor stack ([#742](open-sauced/app#742)) ([9f45b3d](open-sauced/app@9f45b3d)) * adjust search font-size ([c451450](open-sauced/app@c451450)) * change name to enhace from logarithmic ([#743](open-sauced/app#743)) ([4384324](open-sauced/app@4384324)) * enable repository selection & add to new insights page ([#693](open-sauced/app#693)) ([ba6405d](open-sauced/app@ba6405d)), closes [#593](open-sauced/app#593) [#592](open-sauced/app#592) * Filter dashboard scatter plot by PR states ([#736](open-sauced/app#736)) ([f04093a](open-sauced/app@f04093a)) * handle close modal when click outside and improve select usage ([#705](open-sauced/app#705)) ([105a47b](open-sauced/app@105a47b)), closes [#689](open-sauced/app#689) * update icon PR details row ([#706](open-sauced/app#706)) ([dac42ba](open-sauced/app@dac42ba)), closes [#696](open-sauced/app#696)

feat: add hover card and expand on contributor stack

ceafdf1

feat: update hover card infos

4adf9cb

takanome-dev added 2 commits December 27, 2022 23:28

Merge remote-tracking branch 'origin/beta' into 683-contributor-hover…

f30f3ed

…-card

feat: update contributor hover card

2797371

takanome-dev marked this pull request as ready for review December 28, 2022 00:14

takanome-dev requested review from brandonroberts, OgDev-01, 0-vortex, ajcwebdev and nightknighto December 28, 2022 00:14

takanome-dev added the needs review PRs that need review from core engineering team label Dec 28, 2022

bdougie requested changes Dec 28, 2022

View reviewed changes

bdougie added requested changes and removed needs review PRs that need review from core engineering team labels Dec 28, 2022

0-vortex suggested changes Dec 28, 2022

View reviewed changes

components/atoms/Avatar/avatar-hover-card.tsx Show resolved Hide resolved

feat: add link to profile

4c85c40

github-actions bot reviewed Dec 28, 2022

View reviewed changes

Merge remote-tracking branch 'origin/beta' into 683-contributor-hover…

5826f26

…-card

takanome-dev requested review from 0-vortex and bdougie December 28, 2022 19:40

takanome-dev added the needs review PRs that need review from core engineering team label Dec 28, 2022

0-vortex suggested changes Dec 29, 2022

View reviewed changes

components/molecules/CardProfile/card-profile.tsx Show resolved Hide resolved

components/molecules/CardProfile/card-profile.tsx Show resolved Hide resolved

components/molecules/StackedAvatar/stacked-avatar.tsx Outdated Show resolved Hide resolved

refactor: use next/image instead of img tag

b0608ab

Merge remote-tracking branch 'origin/beta' into 683-contributor-hover…

554df7e

…-card

bdougie requested changes Jan 3, 2023

View reviewed changes

bdougie added requested changes and removed needs review PRs that need review from core engineering team labels Jan 3, 2023

fix: limit contributors count and fix contributors count

4a192b7

OgDev-01 requested a review from bdougie January 3, 2023 21:59

OgDev-01 approved these changes Jan 3, 2023

View reviewed changes

takanome-dev added 3 commits January 3, 2023 22:09

fix: merge conflicts

108ec34

fix: merge conflicts

221887f

Merge branch 'beta' into 683-contributor-hover-card

0de7906

0-vortex approved these changes Jan 3, 2023

View reviewed changes

bdougie approved these changes Jan 3, 2023

View reviewed changes

OgDev-01 merged commit 9f45b3d into open-sauced:beta Jan 3, 2023

takanome-dev deleted the 683-contributor-hover-card branch January 3, 2023 22:47

github-actions bot added the released on @beta label Jan 3, 2023

github-actions bot added the released label Jan 5, 2023

takanome-dev mentioned this pull request Jan 31, 2023

feature: Add Global hovercard support for avatars #664

Closed

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add hover card and expand on contributor stack #742

feat: add hover card and expand on contributor stack #742

takanome-dev commented Dec 26, 2022

netlify bot commented Dec 26, 2022 •

edited

Loading

netlify bot commented Dec 26, 2022 •

edited

Loading

takanome-dev commented Dec 27, 2022

bdougie commented Dec 27, 2022 •

edited

Loading

bdougie commented Dec 27, 2022 •

edited

Loading

takanome-dev commented Dec 27, 2022

bdougie commented Dec 27, 2022

bdougie left a comment

0-vortex left a comment

github-actions bot left a comment

0-vortex left a comment

takanome-dev commented Jan 3, 2023

OgDev-01 commented Jan 3, 2023 •

edited

Loading

bdougie commented Jan 3, 2023

bdougie left a comment

takanome-dev commented Jan 3, 2023

takanome-dev commented Jan 3, 2023

OgDev-01 commented Jan 3, 2023

OgDev-01 left a comment

github-actions bot commented Jan 3, 2023

github-actions bot commented Jan 5, 2023

feat: add hover card and expand on contributor stack #742

feat: add hover card and expand on contributor stack #742

Conversation

takanome-dev commented Dec 26, 2022

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify bot commented Dec 26, 2022 • edited Loading

✅ Deploy Preview for oss-insights ready!

netlify bot commented Dec 26, 2022 • edited Loading

✅ Deploy Preview for design-insights ready!

takanome-dev commented Dec 27, 2022

bdougie commented Dec 27, 2022 • edited Loading

bdougie commented Dec 27, 2022 • edited Loading

takanome-dev commented Dec 27, 2022

bdougie commented Dec 27, 2022

bdougie left a comment

Choose a reason for hiding this comment

0-vortex left a comment

Choose a reason for hiding this comment

github-actions bot left a comment

Choose a reason for hiding this comment

PR Compliance Checks

Watched Files

0-vortex left a comment

Choose a reason for hiding this comment

takanome-dev commented Jan 3, 2023

OgDev-01 commented Jan 3, 2023 • edited Loading

Previous version

Current version

bdougie commented Jan 3, 2023

bdougie left a comment

Choose a reason for hiding this comment

takanome-dev commented Jan 3, 2023

takanome-dev commented Jan 3, 2023

OgDev-01 commented Jan 3, 2023

OgDev-01 left a comment

Choose a reason for hiding this comment

github-actions bot commented Jan 3, 2023

github-actions bot commented Jan 5, 2023

netlify bot commented Dec 26, 2022 •

edited

Loading

netlify bot commented Dec 26, 2022 •

edited

Loading

bdougie commented Dec 27, 2022 •

edited

Loading

bdougie commented Dec 27, 2022 •

edited

Loading

OgDev-01 commented Jan 3, 2023 •

edited

Loading