import { PermissionAction } from '@supabase/shared-types/out/constants'
import { Key } from 'lucide-react'
import { useMemo } from 'react'
import { toast } from 'sonner'
import { Badge, copyToClipboard } from 'ui'
import type { ICommand } from 'ui-patterns/CommandMenu'
import {
PageType,
useRegisterCommands,
useRegisterPage,
useResetCommandMenu,
useSetCommandMenuOpen,
useSetPage,
} from 'ui-patterns/CommandMenu'
import { COMMAND_MENU_SECTIONS } from './CommandMenu.utils'
import { orderCommandSectionsByPriority } from './ordering'
import { getKeys, useAPIKeysQuery } from '@/data/api-keys/api-keys-query'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
const API_KEYS_PAGE_NAME = 'API Keys'
export function useApiKeysCommands() {
const setIsOpen = useSetCommandMenuOpen()
const resetCommandMenu = useResetCommandMenu()
const setPage = useSetPage()
const { data: project } = useSelectedProjectQuery()
const ref = project?.ref || '_'
const { can: canReadAPIKeys } = useAsyncCheckPermissions(PermissionAction.SECRETS_READ, '*')
const { data: apiKeys } = useAPIKeysQuery(
{ projectRef: project?.ref, reveal: true },
{ enabled: canReadAPIKeys }
)
const commands = useMemo(() => {
const { anonKey, serviceKey, publishableKey, allSecretKeys } = canReadAPIKeys
? getKeys(apiKeys)
: {}
return [
project &&
publishableKey && {
id: 'publishable-key',
name: `Copy publishable key`,
action: () => {
copyToClipboard(publishableKey.api_key ?? '', () => {
toast.success('Publishable key copied to clipboard')
})
setIsOpen(false)
resetCommandMenu()
},
badge: () => (
Project: {project?.name}
{publishableKey.type}
),
icon: () => ,
},
...(project && allSecretKeys
? allSecretKeys.map((key) => ({
id: key.id,
name: `Copy secret key (${key.name})`,
action: () => {
copyToClipboard(key.api_key ?? '', () => {
toast.success('Secret key copied to clipboard')
})
setIsOpen(false)
resetCommandMenu()
},
badge: () => (
Project: {project?.name}
{key.type}
),
icon: () => ,
}))
: []),
project &&
anonKey && {
id: 'anon-key',
name: `Copy anonymous API key`,
action: () => {
copyToClipboard(anonKey.api_key ?? '', () => {
toast.success('Anonymous API key copied to clipboard')
})
setIsOpen(false)
resetCommandMenu()
},
badge: () => (
Project: {project?.name}
Public
{anonKey.type}
),
icon: () => ,
},
project &&
serviceKey && {
id: 'service-key',
name: `Copy service API key`,
action: () => {
copyToClipboard(serviceKey.api_key ?? '', () => {
toast.success('Service key copied to clipboard')
})
setIsOpen(false)
resetCommandMenu()
},
badge: () => (
Project: {project?.name}
Secret
{serviceKey.type}
),
icon: () => ,
},
!(anonKey || serviceKey) && {
id: 'api-keys-project-settings',
name: 'See API keys in Project Settings',
route: `/project/${ref}/settings/api-keys`,
icon: () => ,
},
].filter(Boolean) as ICommand[]
}, [apiKeys, canReadAPIKeys, project, ref, resetCommandMenu, setIsOpen])
useRegisterPage(
API_KEYS_PAGE_NAME,
{
type: PageType.Commands,
sections: [
{
id: 'api-keys',
name: 'API keys',
commands,
},
],
},
{ deps: [commands], enabled: !!project && commands.length > 0 }
)
useRegisterCommands(
COMMAND_MENU_SECTIONS.ACTIONS,
[
{
id: 'api-keys',
name: 'Get API keys...',
action: () => setPage(API_KEYS_PAGE_NAME),
icon: () => ,
},
],
{
enabled: !!project && commands.length > 0,
orderSection: orderCommandSectionsByPriority,
sectionMeta: { priority: 3 },
}
)
}