mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Ivan VasilovandClaude Opus 4.5
473619bece
## Summary This PR fixes an issue when updating an existing webhook. I've also migrated the Webhooks form from Formik to React Hook Form, following the patterns established in `CreateCronJobSheet`. ## Test Plan - [x] Type check passes - [x] Create webhook with all fields - [x] Edit existing webhook - [x] Validate form errors (missing fields, invalid URL, etc.) - [x] Dirty state shows confirmation on close - [x] Edge function mode switches correctly - [x] Auth header auto-adds for JWT-enabled functions --- See CONTRIBUTING.md for more information. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Refactor** * Improved webhook editing form interface with enhanced validation and cleaner layout * Reorganized HTTP request configuration, parameter management, and header fields for better usability * Streamlined form structure for configuring webhook details, including method, timeout, and event selection <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import { Plus, Trash } from 'lucide-react'
|
|
import { useFieldArray, UseFormReturn } from 'react-hook-form'
|
|
import { Button, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_, SidePanel } from 'ui'
|
|
|
|
import { WebhookFormValues } from './EditHookPanel.constants'
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
import {
|
|
FormSection,
|
|
FormSectionContent,
|
|
FormSectionLabel,
|
|
} from '@/components/ui/Forms/FormSection'
|
|
import { uuidv4 } from '@/lib/helpers'
|
|
|
|
interface HTTPParametersProps {
|
|
form: UseFormReturn<WebhookFormValues>
|
|
}
|
|
|
|
export const HTTPParameters = ({ form }: HTTPParametersProps) => {
|
|
const {
|
|
fields: paramFields,
|
|
append: appendParam,
|
|
remove: removeParam,
|
|
} = useFieldArray({
|
|
control: form.control,
|
|
name: 'httpParameters',
|
|
})
|
|
|
|
return (
|
|
<FormSection
|
|
header={<FormSectionLabel className="lg:!col-span-4">HTTP Parameters</FormSectionLabel>}
|
|
>
|
|
<FormSectionContent loading={false} className="lg:!col-span-8">
|
|
<div className="space-y-2">
|
|
{paramFields.map((field, index) => (
|
|
<div key={field.id} className="flex items-center space-x-2">
|
|
<FormField_Shadcn_
|
|
control={form.control}
|
|
name={`httpParameters.${index}.name`}
|
|
render={({ field }) => (
|
|
<FormControl_Shadcn_>
|
|
<Input_Shadcn_ {...field} className="w-full" placeholder="Parameter name" />
|
|
</FormControl_Shadcn_>
|
|
)}
|
|
/>
|
|
<FormField_Shadcn_
|
|
control={form.control}
|
|
name={`httpParameters.${index}.value`}
|
|
render={({ field }) => (
|
|
<FormControl_Shadcn_>
|
|
<Input_Shadcn_ {...field} className="w-full" placeholder="Parameter value" />
|
|
</FormControl_Shadcn_>
|
|
)}
|
|
/>
|
|
<ButtonTooltip
|
|
type="text"
|
|
className="py-4"
|
|
icon={<Trash />}
|
|
onClick={() => removeParam(index)}
|
|
tooltip={{ content: { side: 'bottom', text: 'Remove parameter' } }}
|
|
/>
|
|
</div>
|
|
))}
|
|
<div>
|
|
<Button
|
|
type="default"
|
|
size="tiny"
|
|
icon={<Plus />}
|
|
onClick={() => appendParam({ id: uuidv4(), name: '', value: '' })}
|
|
>
|
|
Add a new parameter
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</FormSectionContent>
|
|
</FormSection>
|
|
)
|
|
}
|