APIKeyDeleteDialog.tsx40 lines · main

1	import { PermissionAction } from '@supabase/shared-types/out/constants'
2	import { Trash2 } from 'lucide-react'
3
4	import { DropdownMenuItemTooltip } from '@/components/ui/DropdownMenuItemTooltip'
5	import type { APIKeysData } from '@/data/api-keys/api-keys-query'
6	import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
7
8	interface APIKeyDeleteDialogProps {
9	apiKey: Extract<APIKeysData[number], { type: 'secret' | 'publishable' }>
10	setKeyToDelete: (id: string | null) => void
11	}
12
13	export const APIKeyDeleteDialog = ({ apiKey, setKeyToDelete }: APIKeyDeleteDialogProps) => {
14	const { can: canDeleteAPIKeys } = useAsyncCheckPermissions(
15	PermissionAction.TENANT_SQL_ADMIN_WRITE,
16	'*'
17	)
18
19	return (
20	<DropdownMenuItemTooltip
21	className="flex gap-2"
22	onClick={() => {
23	if (canDeleteAPIKeys) {
24	setKeyToDelete(apiKey.id)
25	}
26	}}
27	disabled={!canDeleteAPIKeys}
28	tooltip={{
29	content: {
30	side: 'left',
31	text: !canDeleteAPIKeys
32	? 'You need additional permissions to delete API keys'
33	: undefined,
34	},
35	}}
36	>
37	<Trash2 size={14} /> Delete API key
38	</DropdownMenuItemTooltip>
39	)
40	}