konnosDashboard
EdgeFunctionSecrets.tsx241 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { useParams } from 'common'
3import { Search } from 'lucide-react'
4import { parseAsString, useQueryState } from 'nuqs'
5import { useEffect, useMemo, useState } from 'react'
6import { toast } from 'sonner'
7import { Badge, Card, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
8import { Input } from 'ui-patterns/DataInputs/Input'
9import { ConfirmationModal } from 'ui-patterns/Dialogs/ConfirmationModal'
10import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
11
12import { AddNewSecretForm } from './AddNewSecretForm'
13import { DefaultEdgeFunctionSecrets } from './DefaultEdgeFunctionSecrets'
14import {
15 getVisibleDefaultEdgeFunctionSecrets,
16 isInternalEdgeFunctionSecret,
17} from './DefaultEdgeFunctionSecrets.utils'
18import EdgeFunctionSecret from './EdgeFunctionSecret'
19import { EditSecretSheet } from './EditSecretSheet'
20import { AlertError } from '@/components/ui/AlertError'
21import { DocsButton } from '@/components/ui/DocsButton'
22import { NoPermission } from '@/components/ui/NoPermission'
23import { useSecretsDeleteMutation } from '@/data/secrets/secrets-delete-mutation'
24import { useSecretsQuery } from '@/data/secrets/secrets-query'
25import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
26import { DOCS_URL } from '@/lib/constants'
27
28export const EdgeFunctionSecrets = () => {
29 const { ref: projectRef } = useParams()
30 const [searchString, setSearchString] = useState('')
31
32 const { can: canReadSecrets, isLoading: isLoadingSecretsPermissions } = useAsyncCheckPermissions(
33 PermissionAction.FUNCTIONS_SECRET_READ,
34 '*'
35 )
36 const { can: canUpdateSecrets } = useAsyncCheckPermissions(PermissionAction.SECRETS_WRITE, '*')
37
38 const {
39 data = [],
40 error,
41 isPending: isLoading,
42 isSuccess,
43 isError,
44 } = useSecretsQuery({ projectRef: projectRef }, { enabled: canReadSecrets })
45
46 const customSecrets = useMemo(
47 () => data.filter((secret) => !isInternalEdgeFunctionSecret(secret.name)),
48 [data]
49 )
50
51 const visibleDefaultSecrets = useMemo(
52 () => getVisibleDefaultEdgeFunctionSecrets(new Set(data.map((secret) => secret.name))),
53 [data]
54 )
55
56 const [selectedIdToEdit, setSelectedIdToEdit] = useQueryState(
57 'edit',
58 parseAsString.withOptions({ history: 'push', clearOnDefault: true })
59 )
60 const selectedSecretToEdit = useMemo(
61 () => customSecrets.find((secret) => secret.name === selectedIdToEdit),
62 [customSecrets, selectedIdToEdit]
63 )
64
65 const [selectedIdToDelete, setSelectedIdToDelete] = useQueryState(
66 'delete',
67 parseAsString.withOptions({ history: 'push', clearOnDefault: true })
68 )
69 const selectedSecretToDelete = useMemo(
70 () => customSecrets.find((secret) => secret.name === selectedIdToDelete),
71 [customSecrets, selectedIdToDelete]
72 )
73
74 const {
75 mutate: deleteSecret,
76 isPending: isDeleting,
77 isSuccess: isSuccessDelete,
78 } = useSecretsDeleteMutation({
79 onSuccess: (_, variables) => {
80 toast.success(`Successfully deleted secret “${variables.secrets[0]}”`)
81 setSelectedIdToDelete(null)
82 },
83 })
84
85 const filteredCustomSecrets = useMemo(() => {
86 if (searchString.length === 0) return customSecrets
87 const search = searchString.toLowerCase()
88 return customSecrets.filter((secret) => secret.name.toLowerCase().includes(search))
89 }, [customSecrets, searchString])
90
91 const headers = [
92 <TableHead key="secret-name">Name</TableHead>,
93 <TableHead key="secret-value" className="flex items-center gap-x-2">
94 Digest <Badge variant="default">SHA256</Badge>
95 </TableHead>,
96 <TableHead key="secret-updated-at">Updated</TableHead>,
97 <TableHead key="actions" />,
98 ]
99
100 const showLoadingState = isLoadingSecretsPermissions || (canReadSecrets && isLoading)
101
102 useEffect(() => {
103 if (!!selectedIdToEdit && isSuccess && !selectedSecretToEdit) {
104 toast(`Secret ${selectedIdToEdit} cannot be found`)
105 setSelectedIdToEdit(null)
106 }
107 }, [isSuccess, selectedIdToEdit, selectedSecretToEdit, setSelectedIdToEdit])
108
109 useEffect(() => {
110 if (!!selectedIdToDelete && isSuccess && !selectedSecretToDelete && !isSuccessDelete) {
111 toast(`Secret ${selectedIdToDelete} cannot be found`)
112 setSelectedIdToDelete(null)
113 }
114 }, [
115 isSuccess,
116 isSuccessDelete,
117 selectedIdToDelete,
118 selectedSecretToDelete,
119 setSelectedIdToDelete,
120 ])
121
122 return (
123 <>
124 {showLoadingState ? (
125 <GenericSkeletonLoader />
126 ) : !canReadSecrets ? (
127 <NoPermission resourceText="view this project's edge function secrets" />
128 ) : (
129 <>
130 {isError && <AlertError error={error} subject="Failed to retrieve project secrets" />}
131
132 {isSuccess && (
133 <div className="space-y-10">
134 {canUpdateSecrets ? (
135 <AddNewSecretForm />
136 ) : (
137 <NoPermission resourceText="manage this project's edge function secrets" />
138 )}
139
140 <section className="space-y-4">
141 <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
142 <div className="space-y-1">
143 <h3 className="text-foreground text-base">Custom secrets</h3>
144 <p className="text-sm text-foreground-light">
145 Secrets you have defined for this project
146 </p>
147 </div>
148 <Input
149 size="small"
150 className="w-full md:w-80"
151 placeholder="Search for a secret"
152 value={searchString}
153 onChange={(e) => setSearchString(e.target.value)}
154 icon={<Search />}
155 />
156 </div>
157
158 <Card>
159 <Table>
160 <TableHeader>
161 <TableRow>{headers}</TableRow>
162 </TableHeader>
163 <TableBody>
164 {filteredCustomSecrets.length > 0 ? (
165 filteredCustomSecrets.map((secret) => (
166 <EdgeFunctionSecret
167 key={secret.name}
168 secret={secret}
169 onSelectEdit={() => setSelectedIdToEdit(secret.name)}
170 onSelectDelete={() => setSelectedIdToDelete(secret.name)}
171 />
172 ))
173 ) : customSecrets.length === 0 ? (
174 <TableRow className="[&>td]:hover:bg-inherit">
175 <TableCell colSpan={headers.length}>
176 <p className="text-sm text-foreground">No custom secrets created</p>
177 <p className="text-sm text-foreground-lighter">
178 This project has no custom secrets yet.
179 </p>
180 </TableCell>
181 </TableRow>
182 ) : (
183 <TableRow className="[&>td]:hover:bg-inherit">
184 <TableCell colSpan={headers.length}>
185 <p className="text-sm text-foreground">No results found</p>
186 <p className="text-sm text-foreground-light">
187 Your search for "{searchString}" did not return any results
188 </p>
189 </TableCell>
190 </TableRow>
191 )}
192 </TableBody>
193 </Table>
194 </Card>
195 </section>
196
197 <section className="space-y-4">
198 <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
199 <div className="space-y-1">
200 <h3 className="text-foreground text-base">Default secrets</h3>
201 <p className="text-sm text-foreground-light">
202 Reserved secrets available in every project
203 </p>
204 </div>
205 <DocsButton href={`${DOCS_URL}/guides/functions/secrets#default-secrets`} />
206 </div>
207 <DefaultEdgeFunctionSecrets secrets={visibleDefaultSecrets} />
208 </section>
209 </div>
210 )}
211 </>
212 )}
213
214 <EditSecretSheet
215 secret={selectedSecretToEdit}
216 visible={!!selectedSecretToEdit}
217 onClose={() => setSelectedIdToEdit(null)}
218 />
219
220 <ConfirmationModal
221 variant="destructive"
222 loading={isDeleting}
223 visible={!!selectedSecretToDelete}
224 confirmLabel="Delete secret"
225 confirmLabelLoading="Deleting secret"
226 title={`Delete secret “${selectedSecretToDelete?.name}”`}
227 onCancel={() => setSelectedIdToDelete(null)}
228 onConfirm={() => {
229 if (selectedSecretToDelete) {
230 deleteSecret({ projectRef, secrets: [selectedSecretToDelete.name] })
231 }
232 }}
233 >
234 <p className="text-sm">
235 Ensure none of your edge functions are actively using this secret before deleting it. This
236 action cannot be undone.
237 </p>
238 </ConfirmationModal>
239 </>
240 )
241}