mirror of
https://github.com/supabase/supabase.git
synced 2026-06-16 02:26:42 +08:00
43300d43ce
## Problem - API may return a non-array shape that can crash `getKeys` because of an hard coded cast - getting API keys is cumbersome as consumers have to call two functions ## Solution - consolidate `useAPIKeysQuery` + `getKeys` into a single `useAPIKeys` hook - guard `getKeys` so that it doesn't crash if passed a non array value - update usages <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Unified how project API keys are retrieved across the studio, resulting in more consistent loading/error handling and slight responsiveness improvements when showing keys and related command snippets. UI and permissions behavior remain unchanged for end users. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
|
import { useParams } from 'common'
|
|
import { UseFormReturn } from 'react-hook-form'
|
|
import { useWatch } from 'ui'
|
|
import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
|
|
|
|
import { WebhookFormValues } from './EditHookPanel.constants'
|
|
import { buildEdgeFunctionHeaderAddActions } from '@/components/interfaces/Functions/httpHeaderAddActions'
|
|
import {
|
|
FormSection,
|
|
FormSectionContent,
|
|
FormSectionLabel,
|
|
} from '@/components/ui/Forms/FormSection'
|
|
import { useAPIKeys } from '@/data/api-keys/api-keys-query'
|
|
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
|
|
import { uuidv4 } from '@/lib/helpers'
|
|
|
|
interface HTTPHeadersProps {
|
|
form: UseFormReturn<WebhookFormValues>
|
|
}
|
|
|
|
export const HTTPHeaders = ({ form }: HTTPHeadersProps) => {
|
|
const { ref } = useParams()
|
|
const { can: canReadAPIKeys } = useAsyncCheckPermissions(PermissionAction.SECRETS_READ, '*')
|
|
|
|
const { data: apiKeyData } = useAPIKeys(
|
|
{
|
|
projectRef: ref,
|
|
reveal: true,
|
|
},
|
|
{ enabled: canReadAPIKeys }
|
|
)
|
|
const { serviceKey, secretKey } = apiKeyData ?? {}
|
|
const apiKey = secretKey?.api_key ?? serviceKey?.api_key ?? '[YOUR API KEY]'
|
|
|
|
const functionType = useWatch({ control: form.control, name: 'function_type' })
|
|
const addActions =
|
|
functionType === 'supabase_function'
|
|
? buildEdgeFunctionHeaderAddActions({
|
|
apiKey,
|
|
includeApiKeyHeader: serviceKey?.type === 'secret',
|
|
createRow: (name: string, value: string) => ({ id: uuidv4(), name, value }),
|
|
})
|
|
: []
|
|
|
|
return (
|
|
<FormSection
|
|
header={<FormSectionLabel className="lg:col-span-4!">HTTP Headers</FormSectionLabel>}
|
|
>
|
|
<FormSectionContent loading={false} className="lg:col-span-8!">
|
|
<KeyValueFieldArray
|
|
control={form.control}
|
|
name="httpHeaders"
|
|
keyFieldName="name"
|
|
valueFieldName="value"
|
|
createEmptyRow={() => ({ id: uuidv4(), name: '', value: '' })}
|
|
keyPlaceholder="Header name"
|
|
valuePlaceholder="Header value"
|
|
addLabel="Add a new header"
|
|
addActions={addActions}
|
|
/>
|
|
</FormSectionContent>
|
|
</FormSection>
|
|
)
|
|
}
|