MappingFieldArray() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Organization/SSO/AttributeMapping.tsx lines 159–218

const MappingFieldArray = ({
  form,
  fieldName,
  label,
  required,
  placeholder,
}: {
  form: UseFormReturn<SSOConfigFormSchema>
  fieldName: ProviderAttribute
  label: string
  required: boolean
  placeholder?: string
}) => {
  const { fields, append, remove } = useFieldArray({
    control: form.control,
    name: fieldName,
  })

  return (
    <div className="w-96 space-y-1">
      <div className="flex justify-between items-center">
        <span className="text-foreground-light">{label}</span>
        {required ? <></> : <span className="text-foreground-muted">Optional</span>}
      </div>
      <div className="grid gap-2 w-full">
        {fields.map((field, idx) => (
          <div key={field.id} className="flex gap-2 items-start">
            <FormField_Shadcn_
              name={`${fieldName}.${idx}.value`}
              render={({ field }) => (
                <FormItem_Shadcn_ className="flex-1">
                  <FormControl_Shadcn_>
                    <Input_Shadcn_ {...field} placeholder={placeholder} autoComplete="off" />
                  </FormControl_Shadcn_>
                  <FormMessage_Shadcn_ />
                </FormItem_Shadcn_>
              )}
            />
            <Button
              type="default"
              icon={<Trash size={12} />}
              className="h-[34px] w-[34px]"
              disabled={fields.length <= 1}
              onClick={() => remove(idx)}
            />
          </div>
        ))}

        <Button
          type="text"
          icon={<Plus className="w-4 h-4" />}
          onClick={() => append({ value: '' })}
          className="w-auto self-start justify-self-start"
        >
          Add another
        </Button>
      </div>
    </div>
  )
}