mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
## Context Addresses a UX confusion where users are unsure of which schema to install database extensions in. Am opting to show a "Default" badge on the extensions schema just to lower the cognitive load for this step if the extension doesn't have a specific schema it needs to be installed in <img width="416" height="322" alt="image" src="https://github.com/user-attachments/assets/b938afdb-31d7-4e9f-a065-7b3b185ac8e1" /> If the extension has a recommended schema, we'll show a badge as well (Related [PR](https://github.com/supabase/supabase/pull/40968)) <img width="429" height="300" alt="image" src="https://github.com/user-attachments/assets/cf42bce3-a99c-4877-9d16-9f2013b91e16" /> Otherwise, if there's a fixed schema, then no badge <img width="427" height="283" alt="image" src="https://github.com/user-attachments/assets/608c0c4f-ea8e-4462-ad66-9e3b3bb43265" /> ## Other changes - Refactored `EnableExtensionModal` to use react hook form + Dialog component - Refactored checking of default schema to use React Query ## To test - [ ] Verify the UI changes - [ ] Verify that you can still enable / disable extensions - and ensure that they're being installed in the right schemas <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Enhanced extension enable dialog with form-driven schema selection, read-only default-schema display, and "create custom schema" flow * "Recommended" and "Default" badges next to schema choices; platform-specific warnings and callouts * Fetches and surfaces extension default/recommended schema to guide selection * **Refactor** * Dialog-based UI with integrated form validation and improved enable workflow <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
|
import { UseCustomQueryOptions } from 'types'
|
|
|
|
import { ExecuteSqlError, executeSql } from '../sql/execute-sql-query'
|
|
import { getDatabaseExtensionDefaultSchemaSQL } from '../sql/queries/get-extension-default-schema'
|
|
import { databaseExtensionsKeys } from './keys'
|
|
|
|
type DatabaseExtensionDefaultSchemaVariables = {
|
|
extension?: string
|
|
projectRef?: string
|
|
connectionString?: string | null
|
|
}
|
|
|
|
async function getDatabaseExtensionDefaultSchema(
|
|
{ extension, projectRef, connectionString }: DatabaseExtensionDefaultSchemaVariables,
|
|
signal?: AbortSignal
|
|
) {
|
|
if (!extension) {
|
|
throw new Error('extension is required')
|
|
}
|
|
|
|
const sql = getDatabaseExtensionDefaultSchemaSQL({ extension })
|
|
|
|
const { result } = await executeSql(
|
|
{
|
|
projectRef,
|
|
connectionString,
|
|
sql,
|
|
queryKey: ['database-extension-default-schema', extension],
|
|
},
|
|
signal
|
|
)
|
|
|
|
return result[0] as { name: string; version: string; schema: string | null }
|
|
}
|
|
|
|
type DatabaseExtensionDefaultSchemaData = Awaited<
|
|
ReturnType<typeof getDatabaseExtensionDefaultSchema>
|
|
>
|
|
type DatabaseExtensionDefaultSchemaError = ExecuteSqlError
|
|
|
|
export const useDatabaseExtensionDefaultSchemaQuery = <TData = DatabaseExtensionDefaultSchemaData>(
|
|
{ projectRef, connectionString, extension }: DatabaseExtensionDefaultSchemaVariables,
|
|
{
|
|
enabled = true,
|
|
...options
|
|
}: UseCustomQueryOptions<
|
|
DatabaseExtensionDefaultSchemaData,
|
|
DatabaseExtensionDefaultSchemaError,
|
|
TData
|
|
> = {}
|
|
) =>
|
|
useQuery<DatabaseExtensionDefaultSchemaData, DatabaseExtensionDefaultSchemaError, TData>({
|
|
queryKey: databaseExtensionsKeys.defaultSchema(projectRef, extension),
|
|
queryFn: ({ signal }) =>
|
|
getDatabaseExtensionDefaultSchema({ projectRef, connectionString, extension }, signal),
|
|
enabled: enabled && typeof projectRef !== 'undefined' && typeof extension !== 'undefined',
|
|
...options,
|
|
})
|