From d0c329ccb203986f11b7fe262f90ab2d4a300d4e Mon Sep 17 00:00:00 2001 From: Stojan Dimitrovski Date: Sat, 7 Jun 2025 12:04:06 +0200 Subject: [PATCH] feat: UI improvements for new API keys + edge functions --- .../APIKeys/CreateNewAPIKeysButton.tsx | 5 +++ .../APIKeys/CreateSecretAPIKeyDialog.tsx | 31 ++++++++++++++++++- .../EdgeFunctionSecret.tsx | 5 ++- .../EdgeFunctionSecrets.tsx | 14 ++++----- .../data/api-keys/api-key-create-mutation.ts | 2 ++ 5 files changed, 48 insertions(+), 9 deletions(-) diff --git a/apps/studio/components/interfaces/APIKeys/CreateNewAPIKeysButton.tsx b/apps/studio/components/interfaces/APIKeys/CreateNewAPIKeysButton.tsx index 1a932864101..e1504228c4b 100644 --- a/apps/studio/components/interfaces/APIKeys/CreateNewAPIKeysButton.tsx +++ b/apps/studio/components/interfaces/APIKeys/CreateNewAPIKeysButton.tsx @@ -33,6 +33,11 @@ export const CreateNewAPIKeysButton = () => { name: 'default', }) + // sleep 1 second to allow functions secret creation to settle + await new Promise((accept) => { + setTimeout(accept, 1000) + }) + // Create secret key await createAPIKey({ projectRef, diff --git a/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx b/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx index c7a00c370e1..b3ddd3c7675 100644 --- a/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx +++ b/apps/studio/components/interfaces/APIKeys/CreateSecretAPIKeyDialog.tsx @@ -1,5 +1,5 @@ import { zodResolver } from '@hookform/resolvers/zod' -import { useState } from 'react' +import { useState, useMemo } from 'react' import { SubmitHandler, useForm } from 'react-hook-form' import { Button, @@ -14,8 +14,10 @@ import { DialogTrigger, FormControl_Shadcn_, FormField_Shadcn_, + FormLabel_Shadcn_, Form_Shadcn_, Input_Shadcn_, + Switch, } from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import * as z from 'zod' @@ -28,6 +30,7 @@ const FORM_ID = 'create-secret-api-key' const SCHEMA = z.object({ name: z.string(), description: z.string().trim(), + expose_as_env: z.boolean(), }) const CreateSecretAPIKeyDialog = () => { @@ -43,6 +46,7 @@ const CreateSecretAPIKeyDialog = () => { defaultValues: { name: '', description: '', + expose_as_env: true, }, }) @@ -55,6 +59,7 @@ const CreateSecretAPIKeyDialog = () => { type: 'secret', name: values.name, description: values.description, + expose_as_env: values.expose_as_env, }, { onSuccess: () => { @@ -123,6 +128,30 @@ const CreateSecretAPIKeyDialog = () => { )} /> + { + const name = form.watch('name').toUpperCase() + + return ( + '} in Edge Functions and other integrations that support them.`} + > + + field.onChange(value)} + /> + + + ) + }} + /> diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx index 4821b1a3093..1c23f669ec9 100644 --- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx +++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx @@ -16,7 +16,10 @@ const EdgeFunctionSecret = ({ secret, onSelectDelete }: EdgeFunctionSecretProps) const canUpdateSecrets = useCheckPermissions(PermissionAction.SECRETS_WRITE, '*') // [Joshen] Following API's validation: // https://github.com/supabase/infrastructure/blob/develop/api/src/routes/v1/projects/ref/secrets/secrets.controller.ts#L106 - const isReservedSecret = !!secret.name.match(/^(SUPABASE_).*/) + const isReservedSecret = !!( + secret.name.match(/^(SUPABASE_).*/) && + !secret.name.match(/^SUPABASE_(PUBLISHABLE|SECRET)_[A-Z0-9_]+$/) + ) return ( diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx index 98c2e51e065..31c8ab839d9 100644 --- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx +++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx @@ -38,9 +38,9 @@ const EdgeFunctionSecrets = () => { const secrets = searchString.length > 0 - ? data?.filter((secret) => secret.name.toLowerCase().includes(searchString.toLowerCase())) ?? - [] - : data ?? [] + ? (data?.filter((secret) => secret.name.toLowerCase().includes(searchString.toLowerCase())) ?? + []) + : (data ?? []) return ( <> @@ -76,10 +76,10 @@ const EdgeFunctionSecrets = () => { head={[ Name, - Digest{' '} SHA256 - + {' '} + Digest or prefix , Updated at, , @@ -95,7 +95,7 @@ const EdgeFunctionSecrets = () => { )) ) : secrets.length === 0 && searchString.length > 0 ? ( - +

No results found

Your search for "{searchString}" did not return any results @@ -104,7 +104,7 @@ const EdgeFunctionSecrets = () => { ) : ( - +

No secrets created

There are no secrets associated with your project yet diff --git a/apps/studio/data/api-keys/api-key-create-mutation.ts b/apps/studio/data/api-keys/api-key-create-mutation.ts index b550dfa90d5..6a7f84f5356 100644 --- a/apps/studio/data/api-keys/api-key-create-mutation.ts +++ b/apps/studio/data/api-keys/api-key-create-mutation.ts @@ -9,6 +9,7 @@ export type APIKeyCreateVariables = { projectRef?: string name: string description?: string + expose_as_env?: boolean } & ( | { type: 'publishable' @@ -44,6 +45,7 @@ export async function createAPIKey(payload: APIKeyCreateVariables) { type: payload.type, name: payload.name, description: payload.description || null, + expose_as_env: payload.expose_as_env, }, })