mirror of
https://github.com/supabase/supabase.git
synced 2026-09-09 03:19:36 +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 -->
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import { useWatch, type UseFormReturn } from 'react-hook-form'
|
|
import { CardContent, CardFooter, Form, FormControl, FormField, FormItem, Switch } from 'ui'
|
|
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
|
|
|
import { DataApiDisabledAlert } from './DataApiDisabledAlert'
|
|
import type { DataApiFormValues } from './DataApiEnableSwitch.types'
|
|
import { FormActions } from '@/components/ui/Forms/FormActions'
|
|
|
|
export const DataApiEnableSwitchForm = ({
|
|
form,
|
|
formId,
|
|
disabled,
|
|
isBusy,
|
|
permissionsHelper,
|
|
onSubmit,
|
|
handleReset,
|
|
}: {
|
|
form: UseFormReturn<DataApiFormValues>
|
|
formId: string
|
|
disabled: boolean
|
|
isBusy: boolean
|
|
permissionsHelper: string | undefined
|
|
onSubmit: (values: DataApiFormValues) => void
|
|
handleReset: () => void
|
|
}) => {
|
|
const watchedEnabled = useWatch({ control: form.control, name: 'enableDataApi' })
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
|
|
<CardContent>
|
|
<FormField
|
|
control={form.control}
|
|
name="enableDataApi"
|
|
render={({ field }) => (
|
|
<FormItem className="space-y-4">
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Enable Data API"
|
|
description="When enabled you will be able to use any Supabase client library and PostgREST endpoints with any schema configured in the Settings tab."
|
|
>
|
|
<FormControl>
|
|
<Switch
|
|
size="large"
|
|
disabled={disabled}
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
</FormItemLayout>
|
|
|
|
{!watchedEnabled && <DataApiDisabledAlert />}
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<FormActions
|
|
form={formId}
|
|
isSubmitting={isBusy}
|
|
hasChanges={form.formState.isDirty}
|
|
handleReset={handleReset}
|
|
disabled={disabled}
|
|
helper={permissionsHelper}
|
|
/>
|
|
</CardFooter>
|
|
</form>
|
|
</Form>
|
|
)
|
|
}
|