mirror of
https://github.com/supabase/supabase.git
synced 2026-09-08 19:08:44 +08:00
fcfb0f0222
## Context Replaces all usage of `form.watch()` to use `useWatch` instead + follows the "name what you watch" convention as specified in the react-hook-form skills. There's also a small refactor in `SmtpForm.tsx` which removes the unnecessary use of a `useState` to track if SMTP is enabled or not <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Updated many Studio forms to watch specific fields more precisely, improving live UI updates for previews, warnings, conditional sections, and validation messages. * Enhanced responsiveness across settings, authentication, billing, storage, integrations, and support flows while keeping save/update behavior the same. * **Refined Experiences** * Improved the analytics table creation flow with tighter, enum-based column type validation and structured, type-specific column options. * **Preserved Behavior** * Maintained existing permission checks, submission flows, and account-management workflows. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { UseFormReturn, useWatch } from 'react-hook-form'
|
|
import { FormField, SheetSection } from 'ui'
|
|
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
|
|
|
import { CreateCronJobForm } from './CreateCronJobSheet/CreateCronJobSheet.constants'
|
|
import FunctionSelector from '@/components/ui/FunctionSelector'
|
|
import { SchemaSelector } from '@/components/ui/SchemaSelector'
|
|
|
|
interface SqlFunctionSectionProps {
|
|
form: UseFormReturn<CreateCronJobForm>
|
|
}
|
|
|
|
export const SqlFunctionSection = ({ form }: SqlFunctionSectionProps) => {
|
|
const schema = useWatch({ control: form.control, name: 'values.schema' })
|
|
|
|
return (
|
|
<SheetSection className="flex flex-col gap-3 2xl:flex-row 2xl:[&>div]:w-full">
|
|
<FormField
|
|
control={form.control}
|
|
name="values.schema"
|
|
render={({ field }) => (
|
|
<FormItemLayout label="Schema" className="gap-1">
|
|
<SchemaSelector
|
|
size="small"
|
|
className="w-56 2xl:w-full"
|
|
selectedSchemaName={field.value}
|
|
stopScrollPropagation
|
|
onSelectSchema={(name) => {
|
|
field.onChange(name)
|
|
// deselect the selected function when the schema is changed
|
|
form.resetField('values.functionName')
|
|
}}
|
|
/>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="values.functionName"
|
|
render={({ field }) => (
|
|
<FormItemLayout label="Function name" className="gap-1">
|
|
<FunctionSelector
|
|
size="small"
|
|
className="w-56 2xl:w-full"
|
|
schema={schema}
|
|
value={field.value}
|
|
stopScrollPropagation
|
|
onChange={(name) => field.onChange(name)}
|
|
/>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</SheetSection>
|
|
)
|
|
}
|