konnosDashboard
HTTPHeaders.tsx63 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { useParams } from 'common'
3import { UseFormReturn } from 'react-hook-form'
4import { useWatch } from 'ui'
5import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
6
7import { WebhookFormValues } from './EditHookPanel.constants'
8import { buildEdgeFunctionHeaderAddActions } from '@/components/interfaces/Functions/httpHeaderAddActions'
9import {
10 FormSection,
11 FormSectionContent,
12 FormSectionLabel,
13} from '@/components/ui/Forms/FormSection'
14import { getKeys, useAPIKeysQuery } from '@/data/api-keys/api-keys-query'
15import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
16import { uuidv4 } from '@/lib/helpers'
17
18interface HTTPHeadersProps {
19 form: UseFormReturn<WebhookFormValues>
20}
21
22export const HTTPHeaders = ({ form }: HTTPHeadersProps) => {
23 const { ref } = useParams()
24 const { can: canReadAPIKeys } = useAsyncCheckPermissions(PermissionAction.SECRETS_READ, '*')
25
26 const { data: apiKeys } = useAPIKeysQuery(
27 { projectRef: ref, reveal: true },
28 { enabled: canReadAPIKeys }
29 )
30
31 const { serviceKey, secretKey } = getKeys(apiKeys)
32 const apiKey = secretKey?.api_key ?? serviceKey?.api_key ?? '[YOUR API KEY]'
33
34 const functionType = useWatch({ control: form.control, name: 'function_type' })
35 const addActions =
36 functionType === 'briven_function'
37 ? buildEdgeFunctionHeaderAddActions({
38 apiKey,
39 includeApiKeyHeader: serviceKey?.type === 'secret',
40 createRow: (name: string, value: string) => ({ id: uuidv4(), name, value }),
41 })
42 : []
43
44 return (
45 <FormSection
46 header={<FormSectionLabel className="lg:col-span-4!">HTTP Headers</FormSectionLabel>}
47 >
48 <FormSectionContent loading={false} className="lg:col-span-8!">
49 <KeyValueFieldArray
50 control={form.control}
51 name="httpHeaders"
52 keyFieldName="name"
53 valueFieldName="value"
54 createEmptyRow={() => ({ id: uuidv4(), name: '', value: '' })}
55 keyPlaceholder="Header name"
56 valuePlaceholder="Header value"
57 addLabel="Add a new header"
58 addActions={addActions}
59 />
60 </FormSectionContent>
61 </FormSection>
62 )
63}