feat: now workspace can be generated from repo page via SBOM

[nickytonline]

Description

Now you can generate a workspace via a repository page based on the repository's software bill of materials (SBOM).

Analytics also get sent to PostHog when someone clicks the Workspace from SBOM button.

Note that @jpmcb is working on SBOM for Go, but that does not block this PR. Once his stuff lands, it'll no longer report that a Go project isn't supported.

Until we have documentation, I'm linking directly to the https://www.cisa.gov/sbom page in the SBOM button tooltip.

Related Tickets & Documents

Closes #3842
Relates to https://github.com/open-sauced/api/issues/1027

Mobile & Desktop Screenshots/Recordings

The buttons are different colours now as mentioned in the comments below. Dropping a screenshot here as the video isn't up to date.

SBOM.Workspace.Video.mp4

Steps to QA

1. Go to a repository page, e.g. https://deploy-preview-3938--oss-insights.netlify.app/s/microsoft/playwright
2. Click on the Workspace from SBOM in the top right of the repository page.
3. You're redirected to the new workspace page.
4. The name of the workspace is pre-populated with the following text, SBOM for some-org/some-repo, e.g. SBOM for microsoft/playwright.
5. The tracked repos table is in a loading state.
6. Once the SBOM call is completed, the list of repositories is populated in the grid and the loading message disappears.
7. Click on the Create workspace button.
8. You're redirected to the workspace overview.

Note that sometimes it can take a while for the SBOM API call to complete.

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 oss-insights ready!

Name	Link
🔨 Latest commit	90027f0
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/66bbd25a9fd83d0008cf9a5f
😎 Deploy Preview	https://deploy-preview-3938--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.

[netlify]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	90027f0
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/66bbd25aa01d2c000872d25d
😎 Deploy Preview	https://deploy-preview-3938--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.

[bdougie]

Just pointing out have two orange buttons next to each other is giving me Silicon Valley vibes. Is there not a better way to display two options for creating a workspace? dropdown or similar?

example from github

-  Add to Workspace 
  - Generate SBOM

[nickytonline]

Just pointing out have two orange buttons next to each other is giving me Silicon Valley vibes. Is there not a better way to display two options for creating a workspace? dropdown or similar?

example from github

-  Add to Workspace 
  - Generate SBOM

Good call out. I can change it to a drop down button. I believe we have that component in the app already. If for some reason we don't have one, I can make the SBPM button a secondary variant.

I'm going to finish the logged out flow for small screens first. It looks like we don't have that kind of component yet in the project from what I can tell. We have a select, but not exactly the right use case, so just going with the dark variant for that button for the moment.

Once the other things are finished, I'll look into building a simlilar button to GitHub's multi merge button. I'm sure there's one in ShadCN.

[isabensusan]

@bdougie I was going to say the same thing, two primary buttons is a bit too much. I'm ok with the secondary dark version to get it out the door, but the follow up should definitely add a dropdown button.

However we do have the dropdown component, so I wonder if this would be just good enough for now?
For example:

And we can work on a similar component but with a primary button + a down arrow as the dropdown trigger for a follow up

[nickytonline]

@bdougie I was going to say the same thing, two primary buttons is a bit too much. I'm ok with the secondary dark version to get it out the door, but the follow up should definitely add a dropdown button.

However we do have the dropdown component, so I wonder if this would be just good enough for now? For example:

And we can work on a similar component but with a primary button + a down arrow as the dropdown trigger for a follow up

Yeah I think that's the SingleSelect component? I can do a fast follow up on this using that.

[nickytonline]

@bdougie I was going to say the same thing, two primary buttons is a bit too much. I'm ok with the secondary dark version to get it out the door, but the follow up should definitely add a dropdown button.
However we do have the dropdown component, so I wonder if this would be just good enough for now? For example:
And we can work on a similar component but with a primary button + a down arrow as the dropdown trigger for a follow up

Yeah I think that's the SingleSelect component? I can do a fast follow up on this using that.

#3942 will take care of this @bdougie @isabensusan

[nickytonline]

The only thing that might be confusing to someone is the term SBOM as we don't explain what it is anywhere on the page. I'm going to try a tooltip on the button that explains it and links to the GitHub introducing SBOM blog post.

I added a tooltip in 17e89c2

[isabensusan]

lgtm! 🎨