feat: YoloChart in repo pages

[zeucapua]

Description

Implements the YoloChart in repo pages to show YOLO coders, contributors that push commits directly on the "main" branch.

Related Tickets & Documents

Closes #3644
Closes #3584

Mobile & Desktop Screenshots/Recordings

Screen.Recording.2024-07-05.at.10.32.19.mov

Steps to QA

Tier (staff will fill in)

• Tier 1
• Tier 2
• Tier 3
• Tier 4

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

[netlify]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	2add587
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/668c1a9a2b3728000845e7c2
😎 Deploy Preview	https://deploy-preview-3658--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 configuration.

[netlify]

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	2add587
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/668c1a9a5ac72e0009ba45ba
😎 Deploy Preview	https://deploy-preview-3658--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 configuration.

[bdougie]

This is really cool to see live. I notice a lot more projects than expected have a link to YOLOs.

I.e. Facebook/react might be due to how they do merge queues. Not sure though.

We might to do a similar maintainer QA in the slack channel to get feedback on this.

Also, the link to why this would be a problem goes to the docs. Is there a docs issues for that?

[BekahHW]

@zeucapua I have the docs up for it, so as soon as it's reviewed, you can link to them.

open-sauced/docs#348

[brandonroberts]

The pill is a little stretched when expanding the screen

[isabensusan]

Thank you for this @zeucapua !

1. One extra comment for big screens:

• let's add extra padding to make the button bigger so it doesn't look disproportionate (px-1 and py-1 should work)
• can we add a "Show more" text next to the arrow to fill the button more and make it feel less empty?

2. Can we add the little "YOLO Coder" icon to the Lottery factor table to signal yolo coders?

• icon on hover should display the simple tooltip saying "YOLO coder"
• icon on click should reveal the YOLO view

3. This is probably an api side issue, but if we could remove bots from the response that'd be amazing.

4. Can we get rid of the extra bottom border on the last item of the YOLO table? (and if possible, do the same for the lottery factor table)

[isabensusan]

see comment above

[jpmcb]

This is probably an api side issue, but if we could remove bots from the response that'd be amazing.

This is worth having a quick discussion on:

I believe it would be interesting for maintainers to see what bot are pushing directly to main, partially because bots (like in your example the k8s prow bot or the k8s test infra bot) make up a HUGE part of a project's secure software supply chain. I.e., bots (and the software they consume) are just another piece of the ever expanding puzzle that makes up building and shipping secure software.

Bots committing directly to main are a common practice (generally safer than a maintainer sending something directly to main and are useful in release processes) but can still be compromised: compromised in sometimes extremely catostrophic ways. The SolarWinds attack and data breach was as bad as it was because hacked build system dependencies (like bots or other pieces of build automation) went unnoticed for so long, malicious third party actors were able to inject back doors into many of their products. Then resulting in all their customers becoming compromised.

We can remove bot commits API side for this early iteration. But I'd be more supportive of a long term option that makes it on/off optional. Or we think over / design another piece of this component that incorporates bot commits directly to main.

[nickytonline]

This is probably an api side issue, but if we could remove bots from the response that'd be amazing.

This is worth having a quick discussion on:

I believe it would be interesting for maintainers to see what bot are pushing directly to main, partially because bots (like in your example the k8s prow bot or the k8s test infra bot) make up a HUGE part of a project's secure software supply chain. I.e., bots (and the software they consume) are just another piece of the ever expanding puzzle that makes up building and shipping secure software.

Bots committing directly to main are a common practice (generally safer than a maintainer sending something directly to main and are useful in release processes) but can still be compromised: compromised in sometimes extremely catostrophic ways. The SolarWinds attack and data breach was as bad as it was because hacked build system dependencies (like bots or other pieces of build automation) went unnoticed for so long, malicious third party actors were able to inject back doors into many of their products. Then resulting in all their customers becoming compromised.

We can remove bot commits API side for this early iteration. But I'd be more supportive of a long term option that makes it on/off optional. Or we think over / design another piece of this component that incorporates bot commits directly to main.

I think a toggle for this is a good idea.

[brandonroberts]

[nickytonline]

I left some UI/UX feedback, but won't block this since it'd be good to get this out.

🚢

[isabensusan]

left comments on responsiveness! I keep adding reviews as comments 🤦‍♀️

[isabensusan]

@zeucapua for the bots toggle, here's two ideas:
I prefer the one on the right, but understand the one on the left is possibly easier to implement responsively

[zeucapua]

YOLO Banner breakpoint designs implemented cc @isabensusan

Screen.Recording.2024-07-05.at.10.20.12.mov

[jpmcb]

FYI, quickly worth calling out, the bots toggle won't work for accounts that don't end in [bot]. So, the kubernetes bot accounts won't get filtered. I've opened this issue to explore a "well known bot account" service of some kind to start solving for this: https://github.com/open-sauced/api/issues/929

[isabensusan]

@zeucapua looking SO much better now!!!! Thank you for the extra effort

It looks great in basically every breakpoint, except between 1440px - 1650px where it breaks, which unfortunately is exactly the default breakpoint for 13 inch macbooks 😢

If we can make sure that it looks nice at 1512px, then this is good to ship!

[zeucapua]

Banner should be fixed for the macbook 13 size cc @isabensusan
https://github.com/open-sauced/app/assets/20603494/ac0d375b-419f-4070-95bc-4289c2aa08a0

[isabensusan]

Thank you!!! Can confirm it now looks perfect :)