mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Joshen Lim
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 -->
74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { useForm, useWatch } from 'react-hook-form'
|
|
import {
|
|
FormControl,
|
|
FormField,
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
Switch,
|
|
} from 'ui'
|
|
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
|
|
|
import { SSOConfigFormSchema } from './SSOConfig'
|
|
|
|
export const JoinOrganizationOnSignup = ({
|
|
form,
|
|
}: {
|
|
form: ReturnType<typeof useForm<SSOConfigFormSchema>>
|
|
}) => {
|
|
const joinOrgOnSignup = useWatch({ control: form.control, name: 'joinOrgOnSignup' })
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="joinOrgOnSignup"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
layout="flex-row-reverse"
|
|
label="Automatically add users to organization on sign up"
|
|
description="If disabled, users will need to be invited to the organization after signing up."
|
|
>
|
|
<FormControl className="flex items-center gap-2">
|
|
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
|
</FormControl>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
{joinOrgOnSignup && (
|
|
<FormField
|
|
control={form.control}
|
|
name="roleOnJoin"
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
label="Default role on join"
|
|
description="Select a role for the user when they join the organization"
|
|
layout="flex-row-reverse"
|
|
className="justify-between"
|
|
>
|
|
<FormControl>
|
|
<Select value={field.value} onValueChange={(val) => field.onChange(val)}>
|
|
<SelectTrigger className="w-52">
|
|
<SelectValue placeholder="Select a role" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="Owner">Owner</SelectItem>
|
|
<SelectItem value="Administrator">Administrator</SelectItem>
|
|
<SelectItem value="Developer">Developer</SelectItem>
|
|
<SelectItem value="Read-only">Read-only</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</FormControl>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|