mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 12:55:06 +03:00
Danny White
b23c6a7fed
## What kind of change does this PR introduce? Chore that references DEPR-394. ## What is the current behavior? Key/value editors for headers are implemented separately in multiple places. ## What is the new behavior? DEPR-394 is consolidating repeated RHF field-array UIs across Studio and the design system. - adds a shared `KeyValueFieldArray` component in `ui-patterns` - adds a shared `httpHeaderAddActions` helper for preset header rows - migrates the key/value header editors in: - Platform Webhooks - Cron Jobs HTTP headers - Database Webhooks HTTP headers - documents the key/value pattern in the design system with: - a dedicated fragment page - updated forms guidance - updated form pattern demos | Preview | | --- | | <img width="1102" height="420" alt="CleanShot 2026-03-23 at 12 22 18@2x" src="https://github.com/user-attachments/assets/f8d23ff9-7063-462f-8074-b400561f77e9" /> | ## Additional context This is PR 1 of a 3-PR stack for DEPR-394.
54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
|
import { useFormContext } from 'react-hook-form'
|
|
|
|
import { useParams } from 'common'
|
|
import { getKeys, useAPIKeysQuery } from 'data/api-keys/api-keys-query'
|
|
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
|
|
import { FormLabel_Shadcn_, SheetSection } from 'ui'
|
|
import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
|
|
import { CreateCronJobForm } from './CreateCronJobSheet/CreateCronJobSheet.constants'
|
|
import { buildEdgeFunctionHeaderAddActions } from '@/components/interfaces/Functions/httpHeaderAddActions'
|
|
|
|
interface HTTPHeaderFieldsSectionProps {
|
|
variant: 'edge_function' | 'http_request'
|
|
}
|
|
|
|
export const HTTPHeaderFieldsSection = ({ variant }: HTTPHeaderFieldsSectionProps) => {
|
|
const form = useFormContext<CreateCronJobForm>()
|
|
|
|
const { ref } = useParams()
|
|
const { can: canReadAPIKeys } = useAsyncCheckPermissions(PermissionAction.SECRETS_READ, '*')
|
|
const { data: apiKeys } = useAPIKeysQuery(
|
|
{ projectRef: ref, reveal: true },
|
|
{ enabled: canReadAPIKeys }
|
|
)
|
|
|
|
const { serviceKey, secretKey } = getKeys(apiKeys)
|
|
const apiKey = secretKey?.api_key ?? serviceKey?.api_key ?? '[YOUR API KEY]'
|
|
const addActions =
|
|
variant === 'edge_function'
|
|
? buildEdgeFunctionHeaderAddActions({
|
|
apiKey,
|
|
includeApiKeyHeader: serviceKey?.type === 'secret',
|
|
createRow: (name: string, value: string) => ({ name, value }),
|
|
})
|
|
: []
|
|
|
|
return (
|
|
<SheetSection>
|
|
<FormLabel_Shadcn_>HTTP Headers</FormLabel_Shadcn_>
|
|
<KeyValueFieldArray
|
|
control={form.control}
|
|
name="values.httpHeaders"
|
|
keyFieldName="name"
|
|
valueFieldName="value"
|
|
createEmptyRow={() => ({ name: '', value: '' })}
|
|
keyPlaceholder="Header name"
|
|
valuePlaceholder="Header value"
|
|
addLabel="Add a new header"
|
|
addActions={addActions}
|
|
/>
|
|
</SheetSection>
|
|
)
|
|
}
|