mirror of
https://github.com/supabase/supabase.git
synced 2026-06-13 10:09:12 +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 -->
54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
|
import { useParams } from 'common'
|
|
import { useFormContext } from 'react-hook-form'
|
|
import { FormLabel, SheetSection } from 'ui'
|
|
import { KeyValueFieldArray } from 'ui-patterns/form/KeyValueFieldArray/KeyValueFieldArray'
|
|
|
|
import { CreateCronJobForm } from './CreateCronJobSheet/CreateCronJobSheet.constants'
|
|
import { buildEdgeFunctionHeaderAddActions } from '@/components/interfaces/Functions/httpHeaderAddActions'
|
|
import { useAPIKeys } from '@/data/api-keys/api-keys-query'
|
|
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
|
|
|
|
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: apiKeysData } = useAPIKeys(
|
|
{ projectRef: ref, reveal: true },
|
|
{ enabled: canReadAPIKeys }
|
|
)
|
|
const { serviceKey, secretKey } = apiKeysData ?? {}
|
|
|
|
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>HTTP Headers</FormLabel>
|
|
<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>
|
|
)
|
|
}
|