konnosDashboard
Introduction.tsx156 lines · main
1// @ts-nocheck
2import { PermissionAction } from '@supabase/shared-types/out/constants'
3import { useParams } from 'common'
4import { Copy } from 'lucide-react'
5import { useEffect, useState } from 'react'
6import { Button, copyToClipboard } from 'ui'
7import { Input } from 'ui-patterns/DataInputs/Input'
8import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
9
10import ContentSnippet from '../ContentSnippet'
11import { DOCS_CONTENT } from '../ProjectAPIDocs.constants'
12import type { ContentProps } from './Content.types'
13import { getKeys, useAPIKeysQuery } from '@/data/api-keys/api-keys-query'
14import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
15import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
16import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
17import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
18
19export const Introduction = ({ showKeys, language, apikey, endpoint }: ContentProps) => {
20 const { ref } = useParams()
21 const { can: canReadAPIKeys } = useAsyncCheckPermissions(PermissionAction.SECRETS_READ, '*')
22 const { data: apiKeys } = useAPIKeysQuery({ projectRef: ref }, { enabled: canReadAPIKeys })
23 useProjectSettingsV2Query({ projectRef: ref })
24 const { data: org } = useSelectedOrganizationQuery()
25 const { mutate: sendEvent } = useSendEventMutation()
26
27 const [copied, setCopied] = useState<'anon' | 'service'>()
28
29 useEffect(() => {
30 if (copied !== undefined) setTimeout(() => setCopied(undefined), 2000)
31 }, [copied])
32
33 const { anonKey, serviceKey } = getKeys(apiKeys)
34 const anonApiKey = anonKey?.api_key
35 const serviceApiKey = serviceKey?.api_key ?? 'BRIVEN_CLIENT_SERVICE_KEY'
36
37 return (
38 <>
39 <ContentSnippet
40 selectedLanguage={language}
41 apikey={apikey}
42 endpoint={endpoint}
43 snippet={DOCS_CONTENT.init}
44 >
45 <div className="px-4 space-y-6">
46 <div className="flex flex-col space-x-4 mt-8">
47 <FormItemLayout isReactForm={false} layout="horizontal" label="Project URL">
48 <Input disabled readOnly copy size="small" value={endpoint} className="w-full" />
49 </FormItemLayout>
50 </div>
51 <div className="flex flex-col space-x-4">
52 <FormItemLayout
53 isReactForm={false}
54 layout="horizontal"
55 label="Client API key"
56 description="This key is safe to use in a browser if you have enabled Row Level Security (RLS) for your tables and configured policies."
57 >
58 <Input
59 disabled
60 readOnly
61 size="small"
62 value={showKeys ? apikey : 'Reveal API keys via dropdown in the header'}
63 actions={[
64 <Button
65 key="copy"
66 type="default"
67 icon={<Copy />}
68 onClick={() => {
69 setCopied('anon')
70 copyToClipboard(anonApiKey ?? 'BRIVEN_CLIENT_ANON_KEY')
71 sendEvent({
72 action: 'api_docs_code_copy_button_clicked',
73 properties: {
74 title: 'Client API key',
75 selectedLanguage: language,
76 },
77 groups: {
78 project: ref ?? 'Unknown',
79 organization: org?.slug ?? 'Unknown',
80 },
81 })
82 }}
83 >
84 {copied === 'anon' ? 'Copied' : 'Copy'}
85 </Button>,
86 ]}
87 />
88 </FormItemLayout>
89 </div>
90 <div className="flex flex-col space-x-4">
91 <FormItemLayout
92 isReactForm={false}
93 layout="horizontal"
94 label="Service key"
95 description={
96 <p>
97 This key has the ability to bypass Row Level Security.{' '}
98 <span className="text-amber-900">Never share it publicly.</span>
99 </p>
100 }
101 >
102 <Input
103 disabled
104 readOnly
105 size="small"
106 value={
107 showKeys
108 ? (serviceApiKey ?? 'BRIVEN_CLIENT_SERVICE_KEY')
109 : 'Reveal API keys via dropdown in the header'
110 }
111 actions={[
112 <Button
113 key="copy"
114 type="default"
115 icon={<Copy />}
116 onClick={() => {
117 setCopied('service')
118 copyToClipboard(serviceApiKey)
119 sendEvent({
120 action: 'api_docs_code_copy_button_clicked',
121 properties: {
122 title: 'Service key',
123 selectedLanguage: language,
124 },
125 groups: {
126 project: ref ?? 'Unknown',
127 organization: org?.slug ?? 'Unknown',
128 },
129 })
130 }}
131 >
132 {copied === 'service' ? 'Copied' : 'Copy'}
133 </Button>,
134 ]}
135 />
136 </FormItemLayout>
137 </div>
138 </div>
139 </ContentSnippet>
140
141 <ContentSnippet
142 selectedLanguage={language}
143 apikey={apikey}
144 endpoint={endpoint}
145 snippet={DOCS_CONTENT.clientApiKeys}
146 />
147
148 <ContentSnippet
149 selectedLanguage={language}
150 apikey={showKeys ? serviceApiKey : 'BRIVEN_CLIENT_SERVICE_KEY'}
151 endpoint={endpoint}
152 snippet={DOCS_CONTENT.serviceApiKeys}
153 />
154 </>
155 )
156}