konnosDashboard
ProjectAPIDocs.tsx147 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { useParams } from 'common'
3import { useState } from 'react'
4import { Button, SidePanel } from 'ui'
5
6import { Bucket } from './Content/Bucket'
7import { EdgeFunction } from './Content/EdgeFunction'
8import { EdgeFunctions } from './Content/EdgeFunctions'
9import { Entities } from './Content/Entities'
10import { Entity } from './Content/Entity'
11import { Introduction } from './Content/Introduction'
12import { Realtime } from './Content/Realtime'
13import { RPC } from './Content/RPC'
14import { Storage } from './Content/Storage'
15import { StoredProcedures } from './Content/StoredProcedures'
16import { UserManagement } from './Content/UserManagement'
17import { FirstLevelNav } from './FirstLevelNav'
18import LanguageSelector from './LanguageSelector'
19import { SecondLevelNav } from './SecondLevelNav'
20import { getKeys, useAPIKeysQuery } from '@/data/api-keys/api-keys-query'
21import { useProjectApiUrl } from '@/data/config/project-endpoint-query'
22import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
23import { useAppStateSnapshot } from '@/state/app-state'
24
25/**
26 * [Joshen] Reminder: when we choose to release this as a main feature
27 * Ensure that UX is better than the existing, and make sure we do the
28 * necessary communications around releasing this.
29 *
30 * Problems:
31 * - Needs URL support
32 * - Language selector is not clear, users are missing the bash language option
33 * - GraphiQL needs a better home, cannot be placed under Database as its "API"
34 */
35
36export const ProjectAPIDocs = () => {
37 const { ref } = useParams()
38 const snap = useAppStateSnapshot()
39 const isIntroduction =
40 snap.activeDocsSection.length === 1 && snap.activeDocsSection[0] === 'introduction'
41 const isEntityDocs =
42 snap.activeDocsSection.length === 2 && snap.activeDocsSection[0] === 'entities'
43
44 const [showKeys, setShowKeys] = useState(false)
45 const language = snap.docsLanguage
46
47 const { can: canReadAPIKeys } = useAsyncCheckPermissions(PermissionAction.SECRETS_READ, '*')
48 const { data: apiKeys } = useAPIKeysQuery(
49 { projectRef: ref },
50 { enabled: snap.showProjectApiDocs && canReadAPIKeys }
51 )
52
53 const { data: endpoint } = useProjectApiUrl(
54 { projectRef: ref },
55 { enabled: snap.showProjectApiDocs }
56 )
57
58 const { anonKey } = getKeys(apiKeys)
59 const apikey = showKeys
60 ? (anonKey?.api_key ?? 'BRIVEN_CLIENT_ANON_KEY')
61 : 'BRIVEN_CLIENT_ANON_KEY'
62
63 return (
64 <SidePanel
65 hideFooter
66 size="xxlarge"
67 className="max-w-5xl"
68 visible={snap.showProjectApiDocs}
69 onCancel={() => snap.setShowProjectApiDocs(false)}
70 >
71 <div className="flex items-start h-full">
72 <div className="w-72 border-r h-full">
73 <div className="border-b px-4 py-2 flex items-center justify-between">
74 <h4>API Docs</h4>
75 <div className="flex items-center space-x-1">
76 {!isEntityDocs && <LanguageSelector simplifiedVersion />}
77 {isIntroduction && (
78 <Button type="default" onClick={() => setShowKeys(!showKeys)}>
79 {showKeys ? 'Hide keys' : 'Show keys'}
80 </Button>
81 )}
82 </div>
83 </div>
84
85 {snap.activeDocsSection.length === 1 ? <FirstLevelNav /> : <SecondLevelNav />}
86 </div>
87
88 <div className="flex-1 divide-y space-y-4 max-h-screen overflow-auto">
89 {snap.activeDocsSection[0] === 'introduction' && (
90 <Introduction
91 showKeys={showKeys}
92 language={language}
93 apikey={apikey}
94 endpoint={endpoint}
95 />
96 )}
97
98 {snap.activeDocsSection[0] === 'user-management' && (
99 <UserManagement language={language} apikey={apikey} endpoint={endpoint} />
100 )}
101
102 {snap.activeDocsSection[0] === 'realtime' && <Realtime language={language} />}
103
104 {snap.activeDocsSection[0] === 'storage' && (
105 <>
106 {snap.activeDocsSection[1] !== undefined ? (
107 <Bucket language={language} apikey={apikey} endpoint={endpoint} />
108 ) : (
109 <Storage language={language} />
110 )}
111 </>
112 )}
113
114 {snap.activeDocsSection[0] === 'edge-functions' && (
115 <>
116 {snap.activeDocsSection[1] !== undefined ? (
117 <EdgeFunction language={language} apikey={apikey} endpoint={endpoint} />
118 ) : (
119 <EdgeFunctions language={language} />
120 )}
121 </>
122 )}
123
124 {snap.activeDocsSection[0] === 'entities' && (
125 <>
126 {snap.activeDocsSection[1] !== undefined ? (
127 <Entity language={language} apikey={apikey} endpoint={endpoint} />
128 ) : (
129 <Entities language={language} />
130 )}
131 </>
132 )}
133
134 {snap.activeDocsSection[0] === 'stored-procedures' && (
135 <>
136 {snap.activeDocsSection[1] !== undefined ? (
137 <RPC language={language} />
138 ) : (
139 <StoredProcedures language={language} />
140 )}
141 </>
142 )}
143 </div>
144 </div>
145 </SidePanel>
146 )
147}