Files
supabase/apps/studio/data/config/project-storage-config-query.ts
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

66 lines
2.4 KiB
TypeScript

import { useQuery } from '@tanstack/react-query'
import { components } from 'data/api'
import { get, handleError } from 'data/fetchers'
import { IS_PLATFORM } from 'lib/constants'
import type { ResponseError, UseCustomQueryOptions } from 'types'
import { configKeys } from './keys'
export type ProjectStorageConfigVariables = {
projectRef?: string
}
export type ProjectStorageConfigResponse = components['schemas']['StorageConfigResponse']
export async function getProjectStorageConfig(
{ projectRef }: ProjectStorageConfigVariables,
signal?: AbortSignal
) {
if (!projectRef) throw new Error('projectRef is required')
const { data, error } = await get('/platform/projects/{ref}/config/storage', {
params: { path: { ref: projectRef } },
signal,
})
if (error) {
// [Joshen] This is due to API not returning an error message on this endpoint if a 404 is returned
// Should only be a temporary patch, needs to be addressed on the API end
if ((error as any).code === 404) {
handleError({ ...(error as any), message: 'Storage configuration not found.' })
} else {
handleError(error)
}
}
return data
}
export type ProjectStorageConfigData = Awaited<ReturnType<typeof getProjectStorageConfig>>
export type ProjectStorageConfigError = ResponseError
export const useProjectStorageConfigQuery = <TData = ProjectStorageConfigData>(
{ projectRef }: ProjectStorageConfigVariables,
{
enabled = true,
...options
}: UseCustomQueryOptions<ProjectStorageConfigData, ProjectStorageConfigError, TData> = {}
) =>
useQuery<ProjectStorageConfigData, ProjectStorageConfigError, TData>({
queryKey: configKeys.storage(projectRef),
queryFn: ({ signal }) => getProjectStorageConfig({ projectRef }, signal),
enabled: enabled && IS_PLATFORM && typeof projectRef !== 'undefined' && projectRef !== '_',
...options,
})
export const useIsAnalyticsBucketsEnabled = ({ projectRef }: { projectRef?: string }) => {
const { data } = useProjectStorageConfigQuery({ projectRef })
const isIcebergCatalogEnabled = !!data?.features.icebergCatalog?.enabled
return isIcebergCatalogEnabled
}
export const useIsVectorBucketsEnabled = ({ projectRef }: { projectRef?: string }) => {
const { data } = useProjectStorageConfigQuery({ projectRef })
const isVectorBucketsEnabled = !!data?.features.vectorBuckets?.enabled
return isVectorBucketsEnabled
}