Files
supabase/apps/studio/data/auth/auth-config-query.ts
T
Danny WhiteandJoshen Lim 487c74f174 feat(studio): sortable projects (#43118)
## What kind of change does this PR introduce?

Feature. Resolves DEPR-390

## What is the current behavior?

Projects aren’t sortable in either the card or table view.

## What is the new behavior?

Projects are sortable in both:

- Card view: sort dropdown
- Table view: sort dropdown or table column headers

| Before | After |
| --- | --- |
| <img width="1382" height="797"
alt="Supabase-4D1BFE40-875D-494C-8F17-A68D92826458"
src="https://github.com/user-attachments/assets/c4f17b77-bc90-447f-90cd-78a11c2e4129"
/> | <img width="1382" height="797"
alt="Supabase-D8C0AC7C-A28D-4AA6-BA7C-0FCD61DB5D11"
src="https://github.com/user-attachments/assets/d926d03d-2702-48e5-9d1f-0e09d163079d"
/> |
| <img width="1382" height="797"
alt="Supabase-0A545C5C-40B5-47F7-9ACD-2200879BB95E"
src="https://github.com/user-attachments/assets/f2103c32-a150-4db7-a78a-8bd610e2a028"
/> | <img width="1382" height="797"
alt="Supabase-0F7AB608-2E86-4F0C-BB60-C85D9B7F3D57"
src="https://github.com/user-attachments/assets/baa63f14-4059-483d-a9d6-33663e5cff43"
/> |

## Additional context

I wonder if this is overkill given most folks only have 1–2 projects.
Some ideas:

- Only sortable in table view via column headers
- Conditional rendering for folks with 2+ projects
- Opt-in feature
- Feature-flag

I’ve opted to make it global and synced for now.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-02-25 10:47:56 +11:00

60 lines
1.8 KiB
TypeScript

import { useQuery, useQueryClient } from '@tanstack/react-query'
import type { components } from 'data/api'
import { get, handleError } from 'data/fetchers'
import { IS_PLATFORM } from 'lib/constants'
import { useCallback } from 'react'
import type { ResponseError, UseCustomQueryOptions } from 'types'
import { authKeys } from './keys'
export type AuthConfigVariables = {
projectRef?: string
}
export type AuthConfigResponse = components['schemas']['GoTrueConfigResponse']
export async function getProjectAuthConfig(
{ projectRef }: AuthConfigVariables,
signal?: AbortSignal
) {
if (!projectRef) throw new Error('projectRef is required')
const { data, error } = await get('/platform/auth/{ref}/config', {
params: { path: { ref: projectRef } },
signal,
})
if (error) handleError(error)
return data
}
export type ProjectAuthConfigData = Awaited<ReturnType<typeof getProjectAuthConfig>>
export type ProjectAuthConfigError = ResponseError
export const useAuthConfigQuery = <TData = ProjectAuthConfigData>(
{ projectRef }: AuthConfigVariables,
{
enabled = true,
...options
}: UseCustomQueryOptions<ProjectAuthConfigData, ProjectAuthConfigError, TData> = {}
) =>
useQuery<ProjectAuthConfigData, ProjectAuthConfigError, TData>({
queryKey: authKeys.authConfig(projectRef),
queryFn: ({ signal }) => getProjectAuthConfig({ projectRef }, signal),
enabled: enabled && IS_PLATFORM && typeof projectRef !== 'undefined' && projectRef !== '_',
...options,
})
export const useAuthConfigPrefetch = ({ projectRef }: AuthConfigVariables) => {
const client = useQueryClient()
return useCallback(() => {
if (projectRef) {
client.prefetchQuery({
queryKey: authKeys.authConfig(projectRef),
queryFn: ({ signal }) => getProjectAuthConfig({ projectRef }, signal),
})
}
}, [client, projectRef])
}