feat(studio): improve new secret form ux (#40142)

Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
This commit is contained in:
Kalleby Santos
2025-11-07 20:04:25 +00:00
committed by GitHub
parent 2415776436
commit 5606d07fc2
4 changed files with 377 additions and 30 deletions

View File

@@ -15,11 +15,17 @@ import { Input } from 'ui-patterns/DataInputs/Input'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import AddNewSecretForm from './AddNewSecretForm'
import EdgeFunctionSecret from './EdgeFunctionSecret'
import { EditSecretSheet } from './EditSecretSheet'
type SelectedProjectSecret = {
secret: ProjectSecret
op: 'delete' | 'edit'
}
const EdgeFunctionSecrets = () => {
const { ref: projectRef } = useParams()
const [searchString, setSearchString] = useState('')
const [selectedSecret, setSelectedSecret] = useState<ProjectSecret>()
const [selectedSecret, setSelectedSecret] = useState<SelectedProjectSecret>()
const { can: canReadSecrets, isLoading: isLoadingPermissions } = useAsyncCheckPermissions(
PermissionAction.SECRETS_READ,
@@ -33,7 +39,7 @@ const EdgeFunctionSecrets = () => {
const { mutate: deleteSecret, isLoading: isDeleting } = useSecretsDeleteMutation({
onSuccess: () => {
toast.success(`Successfully deleted ${selectedSecret?.name}`)
toast.success(`Successfully deleted ${selectedSecret?.secret.name}`)
setSelectedSecret(undefined)
},
})
@@ -99,7 +105,8 @@ const EdgeFunctionSecrets = () => {
<EdgeFunctionSecret
key={secret.name}
secret={secret}
onSelectDelete={() => setSelectedSecret(secret)}
onSelectEdit={() => setSelectedSecret({ secret, op: 'edit' })}
onSelectDelete={() => setSelectedSecret({ secret, op: 'delete' })}
/>
))
) : secrets.length === 0 && searchString.length > 0 ? (
@@ -131,17 +138,23 @@ const EdgeFunctionSecrets = () => {
</>
)}
<EditSecretSheet
secret={selectedSecret?.secret}
visible={selectedSecret?.op === 'edit'}
onClose={() => setSelectedSecret(undefined)}
/>
<ConfirmationModal
variant="destructive"
loading={isDeleting}
visible={selectedSecret !== undefined}
visible={selectedSecret?.op === 'delete'}
confirmLabel="Delete secret"
confirmLabelLoading="Deleting secret"
title={`Confirm to delete secret "${selectedSecret?.name}"`}
title={`Confirm to delete secret "${selectedSecret?.secret.name}"`}
onCancel={() => setSelectedSecret(undefined)}
onConfirm={() => {
if (selectedSecret !== undefined) {
deleteSecret({ projectRef, secrets: [selectedSecret.name] })
deleteSecret({ projectRef, secrets: [selectedSecret.secret.name] })
}
}}
>