Files
supabase/apps/studio/data/integrations/github-connections-query.ts
Ivan Vasilov e10f7cc808 feat: Add a config drift page in Studio (#48906)
## New Features
- Initial work for showing configuration drift in Studio
- This only works for Github-connected projects and it'll show a banner
if the project state differs from the git-tracked `config.toml`
- Currently behind a feature-flag `ConfigDrift`, enabled on local and
staging.
- There might be drift shown without changing any setting, this is
work-in-progress.

<img width="1217" height="1195" alt="Screenshot 2026-08-19 at 23 12 10"
src="https://github.com/user-attachments/assets/fb0b18d8-1a93-4595-85cc-e8b8a3462847"
/>

## How to test
1. Connect a project to a Github repo
2. Resync the branch on `/dashboard/project/_/branches`. This will
trigger deployment of the `config.toml` on your project
3. Change some settings (I recommend
`dashboard/project/_/auth/providers`
4. A banner should appear on all project pages with a link 


## Tests
- Added coverage for configuration conversion, normalization, matching,
drift detection, and unmanaged settings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-25 13:56:40 +02:00

62 lines
1.9 KiB
TypeScript

import { useQuery } from '@tanstack/react-query'
import { integrationKeys } from './keys'
import { get, handleError } from '@/data/fetchers'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import type { ResponseError, UseCustomQueryOptions } from '@/types'
export type GitHubConnectionsVariables = {
organizationId?: number
}
export async function getGitHubConnections(
{ organizationId }: GitHubConnectionsVariables,
signal?: AbortSignal
) {
if (!organizationId) throw new Error('organizationId is required')
const { data, error } = await get('/platform/integrations/github/connections', {
params: {
query: {
organization_id: organizationId,
},
},
signal,
})
if (error) handleError(error)
return data.connections
}
export type GitHubConnectionsData = Awaited<ReturnType<typeof getGitHubConnections>>
export type GitHubConnectionsError = ResponseError
export type GitHubConnection = GitHubConnectionsData[0]
export const useGitHubConnectionsQuery = <TData = GitHubConnectionsData>(
{ organizationId }: GitHubConnectionsVariables,
{
enabled = true,
...options
}: UseCustomQueryOptions<GitHubConnectionsData, GitHubConnectionsError, TData> = {}
) => {
return useQuery<GitHubConnectionsData, GitHubConnectionsError, TData>({
queryKey: integrationKeys.githubConnectionsList(organizationId),
queryFn: ({ signal }) => getGitHubConnections({ organizationId }, signal),
enabled: enabled && typeof organizationId !== 'undefined',
staleTime: 30 * 60 * 1000,
...options,
})
}
export const useProjectGitHubConnectionQuery = ({ ref }: { ref?: string }) => {
const { data: organization } = useSelectedOrganizationQuery()
return useGitHubConnectionsQuery(
{ organizationId: organization?.id },
{
enabled: !!ref && !!organization?.id,
select: (data) => data?.find((c) => c.project.ref === ref),
}
)
}