Connect GitHub during project creation#44884
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
6 Skipped Deployments
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
📝 WalkthroughWalkthroughThis PR adds GitHub integration support to the project creation flow. It introduces schema fields to collect GitHub installation and repository IDs, creates a new repository selection component with custom hooks for fetching repositories from GitHub, updates the project creation mutation to pass these IDs to the backend API, integrates GitHub selection into the new project wizard, and refactors the project home UI to display GitHub connection status and compute badges in the ActivityStats card. Changes
Sequence DiagramsequenceDiagram
actor User
participant GitHubRepositoryField as GitHub<br/>Repository Field
participant Hook as useGitHub<br/>RepositoryOptions
participant GitHub API
participant ProjectForm as Project<br/>Creation Form
participant ProjectMutation as Project<br/>Creation Mutation
participant Backend API
User->>GitHubRepositoryField: Click Connect GitHub
GitHubRepositoryField->>GitHub API: Open auth window
User->>GitHub API: Authorize
GitHub API-->>GitHubRepositoryField: Authorization complete
GitHubRepositoryField->>Hook: Refetch repositories
Hook->>GitHub API: Fetch user repositories
GitHub API-->>Hook: Return repository list
Hook-->>GitHubRepositoryField: Repositories loaded
GitHubRepositoryField->>User: Display repo list
User->>GitHubRepositoryField: Select repository
GitHubRepositoryField->>ProjectForm: Update installation ID, repo ID, repo name
User->>ProjectForm: Submit form
ProjectForm->>ProjectMutation: Create project with GitHub fields
ProjectMutation->>Backend API: POST with github_installation_id, github_repository_id
Backend API-->>ProjectMutation: Project created
ProjectMutation-->>User: Success
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎭 Playwright Test Results
Details
Skipped testsFeatures › auth-users.spec.ts › should show web3 users as enabled when the matching web3 provider is enabled |
| githubRepos, | ||
| hasPartialResponseDueToSSO: githubReposData?.partial_response_due_to_sso ?? false, | ||
| isLoadingGitHubAuthorization, | ||
| isLoadingGitHubRepos, |
There was a problem hiding this comment.
Maybe return a single isLoading: isLoadingGitHubAuthorization || isLoadingGitHubRepos?
Also note that if useGitHubRepositoriesQuery isn't enabled, its isPending state will be true. Maybe we should handle the case of an invalid authorization?
|
@SaxonF will this automatically lead to new Supabase branching projects being created when a GH branch is created? |
|
Thanks! Yeah otherwise I could foresee the surprise bill tickets coming in left and right 😅 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx (1)
52-85:⚠️ Potential issue | 🟠 Major
isLoadingstaystrueindefinitely when GitHub is not authorized.
useGitHubRepositoriesQueryis disabled viaenabled: Boolean(gitHubAuthorization). When the user is not authorized, the repos query never runs, soisLoadingGitHubRepos(react-queryisPending) remainstruefor the lifetime of the component. Consumers readingisLoadingfrom this hook (e.g. the new project wizard) will observe a permanently-loading state for unauthorized users. Consider usingisFetchinginstead, or short-circuiting withgitHubAuthorization == null.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx` around lines 52 - 85, The hook currently uses isPending (aliased isLoadingGitHubRepos) from useGitHubRepositoriesQuery which stays true when the query is disabled; update the logic so that the loading flag reflects the disabled state by either switching to the query's isFetching value or short-circuiting when gitHubAuthorization is falsy: replace uses of isLoadingGitHubRepos with the query's isFetching (e.g. const { isFetching: isFetchingGitHubRepos, ... } = useGitHubRepositoriesQuery(...)) or set isLoadingGitHubRepos = false when gitHubAuthorization == null, then update the returned isLoading to use isLoadingGitHubAuthorization || isFetchingGitHubRepos (or the short-circuited value); ensure refetchGitHubRepositories and refetchGitHubAuthorizationAndRepositories behavior remains unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx`:
- Around line 383-405: The current gating hides the repository/settings UI when
gitHubAuthorization is missing by combining connection and authorization state
in the disabled/render logic of GitHubRepositoryField; update the logic so the
component still renders (and the settings/footer with the "Disable integration"
action remains available) whenever connection is present, but only disable
interactive actions when appropriate. Concretely, change the disabled
prop/conditions around GitHubRepositoryField (and any similar checks in the
nearby render blocks) to not use gitHubAuthorization to decide whether to render
the settings/footer—keep rendering when connection exists and only use
canCreateGitHubConnection/canUpdateGitHubConnection (or set disabled=true) to
prevent edits if auth is missing. Ensure the footer/disconnect UI code path that
relies on connection is left intact so users can remove an existing integration
without needing active auth.
In `@apps/studio/pages/new/`[slug].tsx:
- Around line 151-153: When the selected organization changes, reset the
GitHub-related form state so stale repo values aren't submitted: clear
githubRepositoryId, githubInstallationId, and githubRepositoryName (and any
related GitHub selection state) in the org-change handler or in a useEffect that
watches the selected organization; update the function that sets the selected
org (or add a useEffect tied to selectedOrganization) to explicitly set those
fields back to ''/undefined so onSubmit cannot forward IDs from the previous org
(also apply the same reset logic where similar org switches occur around the
other referenced blocks).
In `@packages/api-types/types/platform.d.ts`:
- Around line 5335-5338: The two fields github_installation_id and
github_repository_id were added/edited directly in the generated type file;
instead, update the OpenAPI spec that defines these properties (the source of
truth) to add/modify github_installation_id and github_repository_id with the
desired descriptions and optionality, then regenerate the types using
openapi-typescript so packages/api-types/types/platform.d.ts is produced from
the spec rather than edited by hand.
---
Duplicate comments:
In
`@apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsx`:
- Around line 52-85: The hook currently uses isPending (aliased
isLoadingGitHubRepos) from useGitHubRepositoriesQuery which stays true when the
query is disabled; update the logic so that the loading flag reflects the
disabled state by either switching to the query's isFetching value or
short-circuiting when gitHubAuthorization is falsy: replace uses of
isLoadingGitHubRepos with the query's isFetching (e.g. const { isFetching:
isFetchingGitHubRepos, ... } = useGitHubRepositoriesQuery(...)) or set
isLoadingGitHubRepos = false when gitHubAuthorization == null, then update the
returned isLoading to use isLoadingGitHubAuthorization || isFetchingGitHubRepos
(or the short-circuited value); ensure refetchGitHubRepositories and
refetchGitHubAuthorizationAndRepositories behavior remains unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 88f11a4e-62a0-476c-8c8c-48ba4b825ca1
📒 Files selected for processing (11)
apps/studio/components/interfaces/ProjectCreation/ProjectCreation.schema.tsapps/studio/components/interfaces/ProjectHome/ActivityStats.tsxapps/studio/components/interfaces/ProjectHome/HighAvailabilityBadge.tsxapps/studio/components/interfaces/ProjectHome/TopSection.tsxapps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsxapps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField.tsxapps/studio/data/projects/project-create-mutation.test.tsapps/studio/data/projects/project-create-mutation.tsapps/studio/pages/new/[slug].tsxpackages/api-types/types/platform.d.tspackages/common/telemetry-constants.ts
|
@coderabbitai review please |
🧩 Analysis chainThe PR description image shows a dark-themed "Create a new project" form with a new GitHub repo section featuring a "Connect GitHub" button and descriptive text about agent-first workflows. Let me fetch the relevant files to conduct a thorough review. 🏁 Script executed: Length of output: 268465
PR Review: Connect GitHub during project creationThe overall approach is well-structured: decoupling the GitHub repository selection into a reusable Issues1. Hardcoded 2-second polling delay in In const refetchGitHubAuthorizationAndRepositories = () => {
setTimeout(() => {
refetchGitHubAuthorization()
refetchGitHubRepositories()
}, 2000)
}This is a fire-and-forget // Safer alternative: refetch on focus
useEffect(() => {
const handler = () => {
refetchGitHubAuthorization()
refetchGitHubRepositories()
}
window.addEventListener('focus', handler)
return () => window.removeEventListener('focus', handler)
}, [refetchGitHubAuthorization, refetchGitHubRepositories])2. No loading/skeleton state for the GitHub stat card in The const { data: githubConnections } = useGitHubConnectionsQuery(...)While migrations, backups, and branches each show a const { data: githubConnections, isPending: isLoadingGithubConnections } = useGitHubConnectionsQuery(...)
// ...
value={
isLoadingGithubConnections ? (
<Skeleton className="h-6 w-24" />
) : (
<p ...>{githubLabelText}</p>
)
}3. Type-unsafe In form.setValue(installationIdField, repo.installation_id as never, { shouldDirty: true })
form.setValue(repositoryNameField, repo.name as never, { shouldDirty: true })Using 4. Index-based deduplication in value={`${repo.name.replaceAll('"', '')}-${i}`}Using the list index value={`${repo.name.replaceAll('"', '')}-${repo.id}`}5. The second test asserts expect(mockPost).toHaveBeenCalledWith('/platform/projects', {
body: expect.objectContaining({
github_installation_id: undefined,
github_repository_id: undefined,
}),
})
...(githubInstallationId !== undefined && { github_installation_id: githubInstallationId }),
...(githubRepositoryId !== undefined && { github_repository_id: githubRepositoryId }),Minor notes
Overall this is a solid feature addition. The main items I'd prioritise are the ✅ Actions performedReview triggered.
|
|
minor UI feedback here - but reckon "optional" can be a badge on the field label? instead of the field description - easier to spot also tiny nit - text size for GH repo input field differs from the rest (text-xs vs text-sm probably) |
Braintrust eval report
|
5 participants
GitHub integration is now available on the free plan and so we'd like to start promoting code-first workflows as much as possible. One way to do that is to set the tone straight away by asking a user to connecting their GitHub repository to a project as part of project creation.
This PR:
To test locally:
Note:
Summary by CodeRabbit
Release Notes