-
Notifications
You must be signed in to change notification settings - Fork 9
feat(sig): Add GitHub connection banner to inbox report list #1561
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
Twixes
wants to merge
6
commits into
main
Choose a base branch
from
posthog-code/inbox-github-connection-banner
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
d9e2aaf
feat(sig): Add GitHub connection banner to inbox report list
Twixes c6a4177
Tweak flow
Twixes 9d3c20e
Add jazz to suggested reviewer presentation
Twixes 9b316bd
Use posthog-code://callback for our use case
Twixes 41ab0f4
Make button nicer
Twixes 9ad2d79
Merge branch 'main' into posthog-code/inbox-github-connection-banner
Twixes File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
86 changes: 86 additions & 0 deletions
86
apps/code/src/renderer/features/inbox/components/list/GitHubConnectionBanner.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import { Button } from "@components/ui/Button"; | ||
| import { useAuthStateValue } from "@features/auth/hooks/authQueries"; | ||
| import { useMeQuery } from "@hooks/useMeQuery"; | ||
| import { | ||
| ArrowSquareOutIcon, | ||
| GithubLogoIcon, | ||
| InfoIcon, | ||
| } from "@phosphor-icons/react"; | ||
| import { trpcClient } from "@renderer/trpc/client"; | ||
| import { getCloudUrlFromRegion } from "@shared/constants/oauth"; | ||
| import type { CloudRegion } from "@shared/types/oauth"; | ||
| import { queryClient } from "@utils/queryClient"; | ||
| import { useEffect, useRef } from "react"; | ||
|
|
||
| /** PostHog Cloud OAuth URL to attach GitHub (`connect_from` is handled by PostHog web after redirect). */ | ||
| function posthogCloudGithubAccountLinkUrl(region: CloudRegion): string { | ||
| const url = new URL("/login/github/", getCloudUrlFromRegion(region)); | ||
| url.searchParams.set("connect_from", "posthog_code"); | ||
| return url.toString(); | ||
| } | ||
|
|
||
| export function GitHubConnectionBanner() { | ||
| const { data: user, isLoading } = useMeQuery(); | ||
| const cloudRegion = useAuthStateValue((s) => s.cloudRegion); | ||
| const awaitingLink = useRef(false); | ||
|
|
||
| // After the user clicks connect and returns to the app, refetch to pick up the new github_login | ||
| useEffect(() => { | ||
| const onFocus = () => { | ||
| if (awaitingLink.current) { | ||
| awaitingLink.current = false; | ||
| void queryClient.invalidateQueries({ queryKey: ["me"] }); | ||
| } | ||
| }; | ||
| window.addEventListener("focus", onFocus); | ||
| return () => window.removeEventListener("focus", onFocus); | ||
| }, []); | ||
|
|
||
| if (isLoading || !user) { | ||
| return null; | ||
| } | ||
|
|
||
| if (user.github_login) { | ||
| return null; | ||
| } | ||
|
|
||
| if (!cloudRegion) { | ||
| return null; | ||
| } | ||
|
|
||
| const connectUrl = posthogCloudGithubAccountLinkUrl(cloudRegion); | ||
|
|
||
| return ( | ||
| <div className="pointer-events-auto absolute inset-x-2 bottom-2 z-20"> | ||
| <Button | ||
| size="1" | ||
| variant="solid" | ||
| color="gray" | ||
| highContrast | ||
| className="h-fit w-full flex-wrap items-center justify-start gap-x-2 gap-y-1 whitespace-normal border-transparent bg-black py-1 text-left text-[12px] text-white leading-tight shadow-none hover:bg-neutral-900" | ||
| tooltipContent={ | ||
| <> | ||
| <InfoIcon size={14} className="mr-0.5" /> | ||
| <div> | ||
| PostHog Code suggests report ownership using cutting-edge{" "} | ||
| <code>git blame</code> technology. | ||
| <br /> | ||
| For this, connect your GitHub profile (different from connecting | ||
| repositories). | ||
| </div> | ||
| </> | ||
| } | ||
| onClick={() => { | ||
| awaitingLink.current = true; | ||
| void trpcClient.os.openExternal.mutate({ url: connectUrl }); | ||
| }} | ||
| > | ||
| <GithubLogoIcon className="flex-none" size={12} /> | ||
| <span className="min-w-0 flex-1 basis-0"> | ||
| {`Connect your GitHub profile to highlight what's relevant to you`} | ||
| </span> | ||
| <ArrowSquareOutIcon className="flex-none" size={11} /> | ||
| </Button> | ||
| </div> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i tried this in dev and the auth flow worked, but the banner never went away -- maybe expected cuz dev?
however, why do we need to show this always?
ghsetup)There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
On the global comment (threads are much better!): Great catch, didn't realize the background there is translucent. Fixing.
As for the banner not disappearing, I think I know why – we only recheck on app focus, and without any polling, so that can get clunky. I'll fix it so that after clicking we go into a "Waiting for auth to complete" state that also gently polls.
We do hide this after we have their details!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice, thank you!
how do we detect details for hiding it? it was there when i opened in dev, and i'm pretty sure i have the github integration set up on the project (i was using team 2) and definitely have
ghauth'dThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, I'm just dumb – I didn't push it :picard: Basically when you have GitHub auth linked → banner = null.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I missed your first point:
This is not the case because connecting your repo(s) and connecting your account are two different things. I would love to combine them, but they're distinct at the API level. In fact one is served by our GitHub GitHub app, while the other by our GitHub OAuth app (makes sense, right).
I've tweaked the wording on the new button's tooltip to make that clearer.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ah i see… does this means we potentially have 3 different github auth flows? github app, oauth app, gh cli?
if so, i think we need to make that much easier
can we do one of these things?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sorry this is claude slop and i will dig in further lol, but sharing in case this makes any sense to you as i'm sure you're more familiar with the gh auth flows:
You don't get both tokens from one redirect, but the user only sees one authorization prompt (the GitHub App authorization). You then separately mint the installation token server-side using your app's private key — no additional user interaction required.