konnosDashboard
ApiKeysTabContent.tsx76 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { useParams } from 'common'
3import { AlertCircle, ExternalLink, Loader2 } from 'lucide-react'
4import Link from 'next/link'
5import type { ReactNode } from 'react'
6import { Button } from 'ui'
7import { Input } from 'ui-patterns/DataInputs/Input'
8
9import type { projectKeys } from './Connect.types'
10import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
11
12function KeyRow({ label, value }: { label: ReactNode; value: string }) {
13 return (
14 <div className="flex flex-col gap-5 lg:grid lg:grid-cols-12">
15 <div className="col-span-4">
16 <h3 className="text-sm text-foreground">{label}</h3>
17 </div>
18 <div className="col-span-8">
19 <Input readOnly copy className="font-mono" value={value} />
20 </div>
21 </div>
22 )
23}
24
25export function ApiKeysTabContent({ projectKeys }: { projectKeys: projectKeys }) {
26 const { ref: projectRef } = useParams()
27
28 const { isLoading: isLoadingPermissions, can: canReadAPIKeys } = useAsyncCheckPermissions(
29 PermissionAction.SECRETS_READ,
30 '*'
31 )
32
33 if (isLoadingPermissions) {
34 return (
35 <div className="flex items-center justify-center py-8 space-x-2">
36 <Loader2 className="animate-spin" size={16} strokeWidth={1.5} />
37 <p className="text-sm text-foreground-light">Retrieving API keys</p>
38 </div>
39 )
40 }
41
42 if (!canReadAPIKeys) {
43 return (
44 <div className="flex items-center py-8 space-x-2">
45 <AlertCircle size={16} strokeWidth={1.5} />
46 <p className="text-sm text-foreground-light">You don't have permission to view API keys.</p>
47 </div>
48 )
49 }
50
51 return (
52 <div className="flex flex-col gap-8">
53 <KeyRow label="Project URL" value={projectKeys.apiUrl ?? ''} />
54
55 <KeyRow label="Publishable Key" value={projectKeys.publishableKey ?? ''} />
56
57 <KeyRow
58 label={
59 <>
60 Anon Key <span className="text-foreground-lighter font-normal">(Legacy)</span>
61 </>
62 }
63 value={projectKeys.anonKey ?? ''}
64 />
65
66 <div className="gap-5 lg:grid lg:grid-cols-12">
67 <div className="col-start-5 col-span-8 pl-2 flex items-center justify-between">
68 <p className="text-xs text-foreground-lighter">For secret keys, see API settings.</p>
69 <Button asChild type="default" icon={<ExternalLink size={14} />}>
70 <Link href={`/project/${projectRef}/settings/api-keys`}>API settings</Link>
71 </Button>
72 </div>
73 </div>
74 </div>
75 )
76}