HTTPParameters.tsx36 lines · main

1	import { UseFormReturn } from 'react-hook-form'
2	import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
3
4	import { WebhookFormValues } from './EditHookPanel.constants'
5	import {
6	FormSection,
7	FormSectionContent,
8	FormSectionLabel,
9	} from '@/components/ui/Forms/FormSection'
10	import { uuidv4 } from '@/lib/helpers'
11
12	interface HTTPParametersProps {
13	form: UseFormReturn<WebhookFormValues>
14	}
15
16	export const HTTPParameters = ({ form }: HTTPParametersProps) => {
17	return (
18	<FormSection
19	header={<FormSectionLabel className="lg:col-span-4!">HTTP Parameters</FormSectionLabel>}
20	>
21	<FormSectionContent loading={false} className="lg:col-span-8!">
22	<KeyValueFieldArray
23	control={form.control}
24	name="httpParameters"
25	keyFieldName="name"
26	valueFieldName="value"
27	createEmptyRow={() => ({ id: uuidv4(), name: '', value: '' })}
28	keyPlaceholder="Parameter name"
29	valuePlaceholder="Parameter value"
30	addLabel="Add a new parameter"
31	removeLabel="Remove parameter"
32	/>
33	</FormSectionContent>
34	</FormSection>
35	)
36	}