HttpHeaderFieldsSection.tsx53 lines · main

1	import { PermissionAction } from '@supabase/shared-types/out/constants'
2	import { useParams } from 'common'
3	import { useFormContext } from 'react-hook-form'
4	import { FormLabel, SheetSection } from 'ui'
5	import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
6
7	import { CreateCronJobForm } from './CreateCronJobSheet/CreateCronJobSheet.constants'
8	import { buildEdgeFunctionHeaderAddActions } from '@/components/interfaces/Functions/httpHeaderAddActions'
9	import { getKeys, useAPIKeysQuery } from '@/data/api-keys/api-keys-query'
10	import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
11
12	interface HTTPHeaderFieldsSectionProps {
13	variant: 'edge_function' | 'http_request'
14	}
15
16	export const HTTPHeaderFieldsSection = ({ variant }: HTTPHeaderFieldsSectionProps) => {
17	const form = useFormContext<CreateCronJobForm>()
18
19	const { ref } = useParams()
20	const { can: canReadAPIKeys } = useAsyncCheckPermissions(PermissionAction.SECRETS_READ, '*')
21	const { data: apiKeys } = useAPIKeysQuery(
22	{ projectRef: ref, reveal: true },
23	{ enabled: canReadAPIKeys }
24	)
25
26	const { serviceKey, secretKey } = getKeys(apiKeys)
27	const apiKey = secretKey?.api_key ?? serviceKey?.api_key ?? '[YOUR API KEY]'
28	const addActions =
29	variant === 'edge_function'
30	? buildEdgeFunctionHeaderAddActions({
31	apiKey,
32	includeApiKeyHeader: serviceKey?.type === 'secret',
33	createRow: (name: string, value: string) => ({ name, value }),
34	})
35	: []
36
37	return (
38	<SheetSection>
39	<FormLabel>HTTP Headers</FormLabel>
40	<KeyValueFieldArray
41	control={form.control}
42	name="values.httpHeaders"
43	keyFieldName="name"
44	valueFieldName="value"
45	createEmptyRow={() => ({ name: '', value: '' })}
46	keyPlaceholder="Header name"
47	valuePlaceholder="Header value"
48	addLabel="Add a new header"
49	addActions={addActions}
50	/>
51	</SheetSection>
52	)
53	}