mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
## Problem Editing a column from the schema visualiser requires many clicks ## Solution When hovering over a column in the schema visualiser, an edit button should appear on the right side. Clicking this button should open the column edit pane on the right side of the screen. This would reduce the number of clicks required and allow users to make edits directly from the visualiser instead of using it only as a visual aid.
125 lines
3.7 KiB
TypeScript
125 lines
3.7 KiB
TypeScript
import type { PostgresTable } from '@supabase/postgres-meta'
|
|
import { useQuery, useQueryClient } from '@tanstack/react-query'
|
|
import { sortBy } from 'lodash'
|
|
import { useCallback } from 'react'
|
|
|
|
import { DEFAULT_PLATFORM_APPLICATION_NAME } from '@supabase/pg-meta/src/constants'
|
|
import { get, handleError } from 'data/fetchers'
|
|
import type { ResponseError, UseCustomQueryOptions } from 'types'
|
|
import { tableKeys } from './keys'
|
|
|
|
export type TablesVariables = {
|
|
projectRef?: string
|
|
connectionString?: string | null
|
|
schema?: string
|
|
/**
|
|
* Defaults to false
|
|
*/
|
|
includeColumns?: boolean
|
|
sortByProperty?: keyof PostgresTable
|
|
}
|
|
|
|
export async function getTables(
|
|
{
|
|
projectRef,
|
|
connectionString,
|
|
schema,
|
|
includeColumns = false,
|
|
sortByProperty = 'name',
|
|
}: TablesVariables,
|
|
signal?: AbortSignal
|
|
) {
|
|
if (!projectRef) {
|
|
throw new Error('projectRef is required')
|
|
}
|
|
|
|
let headers = new Headers()
|
|
if (connectionString) headers.set('x-connection-encrypted', connectionString)
|
|
|
|
let queryParams: Record<string, string> = {
|
|
//include_columns is a string, even though it's true or false
|
|
include_columns: `${includeColumns}`,
|
|
}
|
|
if (schema) {
|
|
queryParams.included_schemas = schema
|
|
}
|
|
|
|
const { data, error } = await get('/platform/pg-meta/{ref}/tables', {
|
|
params: {
|
|
header: {
|
|
'x-connection-encrypted': connectionString!,
|
|
'x-pg-application-name': DEFAULT_PLATFORM_APPLICATION_NAME,
|
|
},
|
|
path: { ref: projectRef },
|
|
query: queryParams as any,
|
|
},
|
|
headers,
|
|
signal,
|
|
})
|
|
|
|
if (!Array.isArray(data) && error) handleError(error)
|
|
|
|
// Sort the data if the sortByName option is true
|
|
if (Array.isArray(data) && sortByProperty) {
|
|
return sortBy(data, (t) => t[sortByProperty]) as PostgresTable[]
|
|
}
|
|
|
|
return data as PostgresTable[]
|
|
}
|
|
|
|
export type TablesData = Awaited<ReturnType<typeof getTables>>
|
|
export type TablesError = ResponseError
|
|
|
|
export const useTablesQuery = <TData = TablesData>(
|
|
{ projectRef, connectionString, schema, includeColumns }: TablesVariables,
|
|
{ enabled = true, ...options }: UseCustomQueryOptions<TablesData, TablesError, TData> = {}
|
|
) => {
|
|
return useQuery<TablesData, TablesError, TData>({
|
|
queryKey: tableKeys.list(projectRef, schema, includeColumns),
|
|
queryFn: ({ signal }) =>
|
|
getTables({ projectRef, connectionString, schema, includeColumns }, signal),
|
|
enabled: enabled && typeof projectRef !== 'undefined',
|
|
...options,
|
|
})
|
|
}
|
|
|
|
/**
|
|
* useGetTables
|
|
* Tries to get tables from the react-query cache, or loads it from the server if it's not cached.
|
|
*/
|
|
export function useGetTables({
|
|
projectRef,
|
|
connectionString,
|
|
}: Pick<TablesVariables, 'projectRef' | 'connectionString'>) {
|
|
const queryClient = useQueryClient()
|
|
|
|
return useCallback(
|
|
(schema?: TablesVariables['schema'], includeColumns?: TablesVariables['includeColumns']) => {
|
|
return queryClient.fetchQuery({
|
|
queryKey: tableKeys.list(projectRef, schema, includeColumns),
|
|
queryFn: ({ signal }) =>
|
|
getTables({ projectRef, connectionString, schema, includeColumns }, signal),
|
|
})
|
|
},
|
|
[connectionString, projectRef, queryClient]
|
|
)
|
|
}
|
|
|
|
export function usePrefetchTables({
|
|
projectRef,
|
|
connectionString,
|
|
}: Pick<TablesVariables, 'projectRef' | 'connectionString'>) {
|
|
const queryClient = useQueryClient()
|
|
|
|
return useCallback(
|
|
(schema?: TablesVariables['schema'], includeColumns?: TablesVariables['includeColumns']) => {
|
|
return queryClient.prefetchQuery({
|
|
queryKey: tableKeys.list(projectRef, schema, includeColumns),
|
|
queryFn: ({ signal }) =>
|
|
getTables({ projectRef, connectionString, schema, includeColumns }, signal),
|
|
})
|
|
},
|
|
[connectionString, projectRef, queryClient]
|
|
)
|
|
}
|