mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
Joshen Lim
2b393377c6
## Context A project could already have a GitHub integration set up by another member, which will show up in the branch management side navigation as such: <img width="259" height="255" alt="image" src="https://github.com/user-attachments/assets/8bc12ef2-5f25-4245-9c89-4563b08a42a8" /> However if the user hasn't authenticated with GitHub, the project settings -> integrations page will obfuscate the integration details with a "Connect GitHub" CTA, which is a confusing UX as it hints that there's no integration set up + conflicts with what's on the branch management page <img width="768" height="318" alt="image" src="https://github.com/user-attachments/assets/a68409c0-f2db-407d-9bac-c109a0d14214" /> ## Changes involved Opting to show the integration details if there's one set up irregardless of whether the user has authenticated with GH, but we'll require the user to complete the authentication to manage the integration settings as such (all input fields will also be disabled until the auth is complete): <img width="1031" height="511" alt="image" src="https://github.com/user-attachments/assets/6fad387b-6e76-475e-b4e6-76972d8f76b6" /> Note that you can still disable the integration nonetheless irregardless of the GH connection status Also fixes the "Remove connection" CTA from Account Preferences - we were invalidating the GH authorization query cache but the GH authorization requests normally fails with a 404 if there's no auth set up, so the query cache would remain stale. Opting to clear the query cache instead of invalidating ## To test - [ ] Set up a GH integration for your project under project settings -> integrations - [ ] Head to account preferences to remove your GH connection - [ ] Go back to the project settings -> integrations page, should still see the GH integration details, just unable to edit - [ ] Connect with GH, and you should be able to edit the integration details thereafter
29 lines
495 B
TypeScript
29 lines
495 B
TypeScript
import { Button } from 'ui'
|
|
|
|
import { openInstallGitHubIntegrationWindow } from '@/lib/github'
|
|
|
|
export const ConnectGitHubButton = ({
|
|
id,
|
|
onConnectClick,
|
|
refetch,
|
|
}: {
|
|
id?: string
|
|
|
|
onConnectClick?: () => void
|
|
refetch: () => void
|
|
}) => {
|
|
return (
|
|
<Button
|
|
id={id}
|
|
size="tiny"
|
|
type="button"
|
|
onClick={() => {
|
|
onConnectClick?.()
|
|
openInstallGitHubIntegrationWindow('authorize', refetch)
|
|
}}
|
|
>
|
|
Connect GitHub
|
|
</Button>
|
|
)
|
|
}
|