Files
supabase/apps/studio/data/database-extensions/database-extension-schema-query.ts
Joshen LimandAlaister Young 1706a67335 Joshen/fe 2410 add default label to pg cron extension schema selector (#42281)
## 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>
2026-02-02 17:50:39 +08:00

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,
})