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 -->
64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import { UseFormReturn, useWatch } from 'react-hook-form'
|
|
import {
|
|
FormField,
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupInput,
|
|
InputGroupText,
|
|
Separator,
|
|
SheetSection,
|
|
} from 'ui'
|
|
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
|
|
|
import { CreateQueueForm } from './CreateQueueSheet.schema'
|
|
|
|
export function PartitionConfigFields({ form }: { form: UseFormReturn<CreateQueueForm> }) {
|
|
const queueType = useWatch({ control: form.control, name: 'values.type' })
|
|
|
|
if (queueType !== 'partitioned') return null
|
|
|
|
return (
|
|
<>
|
|
<SheetSection className="flex flex-col gap-3">
|
|
<FormField
|
|
control={form.control}
|
|
name="values.partitionInterval"
|
|
render={({ field: { ref, ...rest } }) => (
|
|
<FormItemLayout
|
|
label="Partition interval"
|
|
description="Number of messages per partition"
|
|
className="gap-1"
|
|
>
|
|
<InputGroup>
|
|
<InputGroupInput {...rest} type="number" placeholder="10000" />
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupText>messages</InputGroupText>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="values.retentionInterval"
|
|
render={({ field: { ref, ...rest } }) => (
|
|
<FormItemLayout
|
|
label="Retention interval"
|
|
description="Partitions older than this many messages behind the latest will be dropped"
|
|
className="gap-1"
|
|
>
|
|
<InputGroup>
|
|
<InputGroupInput {...rest} type="number" placeholder="10000" />
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupText>messages</InputGroupText>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
</SheetSection>
|
|
<Separator />
|
|
</>
|
|
)
|
|
}
|