mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 19:05:06 +03:00
Danny White
70c4659452
## What kind of change does this PR introduce? Chore that references DEPR-394. ## What is the current behavior? This stack is consolidating RHF key/value array UIs in smaller reviewable steps. After PR 1, Database Webhooks HTTP parameters and Database Functions configuration parameters still use separate bespoke implementations. ## What is the new behavior? - reuses the shared `KeyValueFieldArray` for Database Webhooks HTTP parameters - reuses the shared `KeyValueFieldArray` for Database Functions configuration parameters - keeps existing form shapes and submission logic intact - adds focused tests for those two follow-up consumers ## Additional context This is PR 2 of a 3-PR stack for DEPR-394. Base PR: #43938
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { UseFormReturn } from 'react-hook-form'
|
|
import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
|
|
|
|
import { WebhookFormValues } from './EditHookPanel.constants'
|
|
import {
|
|
FormSection,
|
|
FormSectionContent,
|
|
FormSectionLabel,
|
|
} from '@/components/ui/Forms/FormSection'
|
|
import { uuidv4 } from '@/lib/helpers'
|
|
|
|
interface HTTPParametersProps {
|
|
form: UseFormReturn<WebhookFormValues>
|
|
}
|
|
|
|
export const HTTPParameters = ({ form }: HTTPParametersProps) => {
|
|
return (
|
|
<FormSection
|
|
header={<FormSectionLabel className="lg:!col-span-4">HTTP Parameters</FormSectionLabel>}
|
|
>
|
|
<FormSectionContent loading={false} className="lg:!col-span-8">
|
|
<KeyValueFieldArray
|
|
control={form.control}
|
|
name="httpParameters"
|
|
keyFieldName="name"
|
|
valueFieldName="value"
|
|
createEmptyRow={() => ({ id: uuidv4(), name: '', value: '' })}
|
|
keyPlaceholder="Parameter name"
|
|
valuePlaceholder="Parameter value"
|
|
addLabel="Add a new parameter"
|
|
removeLabel="Remove parameter"
|
|
/>
|
|
</FormSectionContent>
|
|
</FormSection>
|
|
)
|
|
}
|