Files
supabase/apps/studio/data/config/github-config-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

70 lines
2.0 KiB
TypeScript

import { useQuery } from '@tanstack/react-query'
import type { components } from 'api-types'
import { z } from 'zod'
import { gitHubConfigTomlSchema } from '@/components/interfaces/ConfigDrift/github-config.types'
import { get, handleError } from '@/data/fetchers'
import type { UseCustomQueryOptions } from '@/types'
export type GitHubConfigVariables = {
connectionId?: number
branch?: string
}
type GithubConfigQueryResponse = components['schemas']['GetGitHubConnectionConfigResponse'] & {
config: z.infer<typeof gitHubConfigTomlSchema>
}
export const githubConfigKeys = {
all: ['github-config'] as const,
connection: (connectionId?: number, branch?: string) =>
[...githubConfigKeys.all, connectionId, branch] as const,
}
export async function getGitHubConfig(
{ connectionId, branch }: GitHubConfigVariables,
signal?: AbortSignal
) {
if (!connectionId) throw new Error('connectionId is required')
const { data, error } = await get(
'/platform/integrations/github/connections/{connection_id}/config',
{
params: {
path: { connection_id: connectionId },
query: { ref: branch },
},
signal,
}
)
if (error) return handleError(error)
const parsed = gitHubConfigTomlSchema.safeParse(data.config)
if (parsed.error) {
return handleError(
new Error(`Invalid response from Github config API: ${parsed.error.message}`)
)
}
return {
...data,
config: parsed.data,
}
}
export const useGitHubConfigQuery = <TData = GithubConfigQueryResponse>(
variables: GitHubConfigVariables,
{
enabled = true,
...options
}: UseCustomQueryOptions<GithubConfigQueryResponse, Error, TData> = {}
) =>
useQuery<GithubConfigQueryResponse, Error, TData>({
// eslint-disable-next-line @tanstack/query/exhaustive-deps
queryKey: githubConfigKeys.connection(variables.connectionId, variables.branch),
queryFn: ({ signal }) => getGitHubConfig(variables, signal),
enabled: enabled && typeof variables.connectionId !== 'undefined',
staleTime: 30_000,
...options,
})