mirror of
https://github.com/supabase/supabase.git
synced 2026-10-13 13:19:09 +03:00
Gildas GarciaandIvan Vasilov
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import { Plus, Trash } from 'lucide-react'
|
|
import { useFieldArray, useForm } from 'react-hook-form'
|
|
import { Button, FormControl, FormField, FormItem, FormMessage, Input } from 'ui'
|
|
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
|
|
|
import { SSOConfigFormSchema } from './SSOConfig'
|
|
|
|
export const SSODomains = ({ form }: { form: ReturnType<typeof useForm<SSOConfigFormSchema>> }) => {
|
|
const { fields, append, remove } = useFieldArray({
|
|
control: form.control,
|
|
name: 'domains',
|
|
})
|
|
|
|
const domainsError = form.formState.errors.domains
|
|
// Handle different error structures - could be root error or direct error
|
|
const arrayLevelError =
|
|
domainsError &&
|
|
typeof domainsError === 'object' &&
|
|
'message' in domainsError &&
|
|
typeof domainsError.message === 'string'
|
|
? domainsError.message
|
|
: domainsError &&
|
|
typeof domainsError === 'object' &&
|
|
'root' in domainsError &&
|
|
domainsError.root &&
|
|
typeof domainsError.root === 'object' &&
|
|
'message' in domainsError.root
|
|
? String(domainsError.root.message)
|
|
: null
|
|
|
|
return (
|
|
<>
|
|
<FormItemLayout
|
|
label="Email Domains"
|
|
layout="flex-row-reverse"
|
|
description="Users with these email domains will be redirected to your identity provider when logging in from Supabase."
|
|
>
|
|
<div className="grid gap-2 w-full">
|
|
{fields.map((field, idx) => (
|
|
<div key={field.id} className="flex gap-2 items-top">
|
|
<FormField
|
|
name={`domains.${idx}.value`}
|
|
render={({ field }) => (
|
|
<FormItem className="flex-1">
|
|
<FormControl>
|
|
<Input {...field} autoComplete="off" placeholder="example.com" />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<Button
|
|
variant="default"
|
|
icon={<Trash size={12} />}
|
|
className="h-[34px] w-[34px]"
|
|
onClick={() => remove(idx)}
|
|
/>
|
|
</div>
|
|
))}
|
|
<div>
|
|
<Button
|
|
variant="default"
|
|
icon={<Plus className="w-4 h-4" />}
|
|
size="tiny"
|
|
onClick={() => append({ value: '' })}
|
|
>
|
|
Add another
|
|
</Button>
|
|
</div>
|
|
{arrayLevelError && (
|
|
<p className="text-sm font-medium text-destructive">{arrayLevelError}</p>
|
|
)}
|
|
</div>
|
|
</FormItemLayout>
|
|
</>
|
|
)
|
|
}
|