feat: repository selection & add to insights

[nightknighto]

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

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• 🧑‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert

Description

• Feature: ability to select 1 or more repositories from the Repository tab.

• Selected Repositories can be used as items for a new insights page for the user.

• Feature: clicking on an already filtered-by repo will remove the filter

• Unsigned users clicking on "Add to Insight" will be lead to login, then after logging in will be redirected to insights/hub with the selected repos.

Implementation: Since logging in always leads to homepage and does a page refresh, we will use session storage to save that we want to redirect to a certain link and also save the selected repos, then in homepage we will check if there's a saved redirect link. If there is, we will redirect to it instead.

Related Tickets & Documents

fixes #593
fixes #592

Mobile & Desktop Screenshots/Recordings

Added tests?

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

Added to documentation?

• 📜 README.md
• 📓 docs.opensauced.pizza
• 🍕 dev.to/opensauced
• 📕 storybook
• 🙅 no documentation needed

[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]

❌ Deploy Preview for oss-insights failed.

Name	Link
🔨 Latest commit	cca056e
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/63b083614d4ac20008e3c539

[netlify]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	cca056e
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/63b08361c4ac150008081fd6
😎 Deploy Preview	https://deploy-preview-693--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.

[bdougie]

This is an excellent first pass. I have a few questions.

1. Why is the button green?
2. This feature should redirect someone to log in at some point. We can't create a page without knowing the user. This should be available for users not logged in. My suggestion is when the user clicks the "Add to Inishgt Page."
3. What happens when you select more than 10 repos?
4. The click-to-filter feature was removed in this PR. Related - bug: Click to un-filter by repo #592

I also found a unrelated bug while QAing this #704

[nightknighto]

1. Why is the button green?

that's the default color design of the pre-existing components in the project: checkbox & button. Thought it was intentional for consistency.

2. This feature should redirect someone to log in at some point. We can't create a page without knowing the user. This should be available for users not logged in. My suggestion is when the user clicks the "Add to Inishgt Page."

Yes sure.

3. What happens when you select more than 10 repos?

It works for any number of repos. Tested with 20 repos and it works. The implementation isn't affected by the number of repos

I also found a unrelated bug while QAing this #704

I just tested it and it works on the live site.

[bdougie]

I also found a unrelated bug while QAing this #704

I just tested it and it works on the live site.

Confirmed this is only an issue on beta

[nightknighto]

The click-to-filter feature was removed in this PR. Related - #592

Well that's wierd. It's supposed to automatically merge that with this PR

[bdougie]

2. This feature should redirect someone to log in at some point. We can't create a page without knowing the user. This should be available for users not logged in. My suggestion is when the user clicks the "Add to Inishgt Page."

For clarification. The feature should be useable to select repos, just redirecting the user when they try to navigate to the create page. There may be a small challenge in storing the saved repos after the redirect.

i.e. I choose 3 repos and get redirected when I hit create to login in. After logging in, I should see the repos in the shopping cart on the create page.

[nightknighto]

I've noticed some janky/buggy behavior in some cases of selecting repos, so I'll add more fixes

[nightknighto]

So I've had a look in UseSupabaseAuth hook, and I've found this

return {
    signIn: (data: SignInWithOAuthCredentials) => supabase.auth.signInWithOAuth({
      ...data,
      options: {
        redirectTo: process.env.NEXT_PUBLIC_BASE_URL ?? "/"
      }
    }),

The part

options: {
        redirectTo: process.env.NEXT_PUBLIC_BASE_URL ?? "/"
      }

is basically hard-coding the sign-in to redirect to the root path, even if a custom redirect was passed to it. Is there a reason why it is implemented that way?

[bdougie]

@brandonroberts can shed light on it. It came down to the authentication not playing nice with next.

I believe there is context in ClickUp

[bdougie]

1. Match the button color to orange
2. Prevent this feature from showing unless the user is logged in
3. Ensure this feature still works bug: Click to un-filter by repo #592

[brandonroberts]

@Deadreyo that may have been a side effect of the auth integration we had at the time. You can modify the method signature to take the additional options and apply them to the sign in redirect.

[nightknighto]

@Deadreyo that may have been a side effect of the auth integration we had at the time. You can modify the method signature to take the additional options and apply them to the sign in redirect.

I've tried playing around a lot with the redirectTo option but it always failed to work. Even changed the above to

signIn: (data: SignInWithOAuthCredentials) => supabase.auth.signInWithOAuth({
      ...data,
      options: {redirectTo: 'http://localhost:3000/hub/insights'}
    }),

and still leads to /

[bdougie]

Would be able to use the api folder and manage this with a serverless function?

https://www.netlify.com/blog/2021/12/11/serverless-functions-made-simple-just-add-files/

[nightknighto]

Would be able to use the api folder and manage this with a serverless function?

https://www.netlify.com/blog/2021/12/11/serverless-functions-made-simple-just-add-files/

Hmm, not sure how that can help here. Signing in happens by going to a github page from the frontend so not sure if it's doable to change the signing in method with a serverless function (that's the usecase I thought of related to serverless functions)

[nightknighto]

Reverted the redirect commit to unblock this PR. Redirect should be handled in a separate issue

[0-vortex]

• Unsigned users clicking on "Add to Insight" will be lead to login, then after logging in will be redirected to insights/hub with the selected repos.

I've investigated the issue of logging in random parts of the app and I don't think it is possible to consistently redirect to the second session managed system by just using redirectTo. Similarly to what @Deadreyo was describing as not working, is actually a more complex redirect system that can lose the origin header in multiple scenarios - this makes it impossible to redirect to something other than / without a middleware system accounting for server and client differences of where the user was in the onboarding process or other similar global state remembering where you were.

For this reason, I think we should abort the selection of repos before logging in, hint at the checkbox with a disabled state, and in case the user clicks to log in, would be redirected to the same page (from the middleware), where one could now select the repos to add to the insight page. This invalidates current checks for user and removes a lot of the boilerplate code to check for that in subsequent onChange functions 🍕

[nightknighto]

I think we should abort the selection of repos before logging in, hint at the checkbox with a disabled state

Done.

[0-vortex]

Code-wise LGTM! 👍

Testing the disabled checkbox now am wondering if some form of extra feedback is needed, like the transition from automatically logging in and being sent to the wrong page versus the checkbox not doing anything while logged, but also not hinting at the user having to log in. Not sure what the best approach is here, let's wait for the triage team to test this out in the UI as well ❤️ 🍕

[brandonroberts]

LGTM

[brandonroberts]

Maybe some alt text on the checkboxes/button to "Connect to GitHub" would be enough on desktop at least

[nightknighto]

Maybe some alt text on the checkboxes/button to "Connect to GitHub" would be enough on desktop at least

Added this

[github-actions]

🎉 This PR is included in version 1.23.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀