From ceec4b4962879bd326f9fcb6b43efb4132618040 Mon Sep 17 00:00:00 2001 From: Stephen Zhou <38493346+hyoban@users.noreply.github.com> Date: Fri, 8 May 2026 17:24:18 +0800 Subject: [PATCH] tweaks --- .../detail/access-tab/api-keys.tsx | 26 ++++++------ .../access-tab/developer-api-section.tsx | 20 ++++++++-- .../detail/access-tab/permissions-section.tsx | 40 ++++++++++++------- .../use-access-environment-scope.ts | 40 ------------------- 4 files changed, 55 insertions(+), 71 deletions(-) delete mode 100644 web/features/deployments/detail/access-tab/use-access-environment-scope.ts diff --git a/web/features/deployments/detail/access-tab/api-keys.tsx b/web/features/deployments/detail/access-tab/api-keys.tsx index d96bc395fe..5f55227a6d 100644 --- a/web/features/deployments/detail/access-tab/api-keys.tsx +++ b/web/features/deployments/detail/access-tab/api-keys.tsx @@ -13,7 +13,7 @@ import { useMutation } from '@tanstack/react-query' import { useSetAtom } from 'jotai' import { useState } from 'react' import { useTranslation } from 'react-i18next' -import { consoleClient, consoleQuery } from '@/service/client' +import { consoleQuery } from '@/service/client' import { createdDeveloperApiTokenAtom } from '../../store' import { environmentName } from '../../utils' import { useCopyFeedback } from './use-copy-feedback' @@ -25,21 +25,10 @@ function ApiKeyRow({ appInstanceId, apiKey }: { const { t } = useTranslation('deployments') const { copied, showCopied } = useCopyFeedback() const revokeApiKey = useMutation(consoleQuery.enterprise.appDeploy.deleteDeveloperApiKey.mutationOptions()) + const revealApiKey = useMutation(consoleQuery.enterprise.appDeploy.revealDeveloperApiKey.mutationOptions()) const displayValue = apiKey.maskedKey || apiKey.id || '—' const environmentLabel = environmentName(apiKey.environment) - async function revealApiKey(apiKeyId: string) { - const response = await consoleClient.enterprise.appDeploy.revealDeveloperApiKey({ - params: { - appInstanceId, - apiKeyId, - }, - }) - if (!response.token) - throw new Error('Reveal developer API key did not return a token.') - return response.token - } - function handleRevoke() { if (!apiKey.id) return @@ -57,7 +46,16 @@ function ApiKeyRow({ appInstanceId, apiKey }: { return try { - const token = await revealApiKey(apiKey.id) + const response = await revealApiKey.mutateAsync({ + params: { + appInstanceId, + apiKeyId: apiKey.id, + }, + }) + if (!response.token) + throw new Error('Reveal developer API key did not return a token.') + + const token = response.token await navigator.clipboard.writeText(token) showCopied() toast.success(t('access.copyToast')) diff --git a/web/features/deployments/detail/access-tab/developer-api-section.tsx b/web/features/deployments/detail/access-tab/developer-api-section.tsx index 8c1a79fe20..670b06ca21 100644 --- a/web/features/deployments/detail/access-tab/developer-api-section.tsx +++ b/web/features/deployments/detail/access-tab/developer-api-section.tsx @@ -1,19 +1,26 @@ 'use client' +import type { + ConsoleEnvironment, + EnvironmentAccessRow, +} from '@dify/contracts/enterprise/types.gen' import { Switch } from '@langgenius/dify-ui/switch' -import { useMutation } from '@tanstack/react-query' +import { useMutation, useQuery } from '@tanstack/react-query' import { useAtomValue, useSetAtom } from 'jotai' import { useTranslation } from 'react-i18next' import { consoleQuery } from '@/service/client' import { createdDeveloperApiTokenAtom } from '../../store' import { ApiKeyGenerateMenu, ApiKeyList } from './api-keys' import { CopyPill, Section } from './common' -import { useAccessEnvironmentScope } from './use-access-environment-scope' type DeveloperApiSectionProps = { appInstanceId: string } +function permissionEnvironment(row: EnvironmentAccessRow): ConsoleEnvironment | undefined { + return row.environment?.id ? row.environment : undefined +} + function DeveloperApiSwitch({ appInstanceId, checked }: { appInstanceId: string checked: boolean @@ -78,10 +85,17 @@ export function DeveloperApiSection({ appInstanceId, }: DeveloperApiSectionProps) { const { t } = useTranslation('deployments') - const { accessConfig, environments } = useAccessEnvironmentScope(appInstanceId) + const { data: accessConfig } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceAccess.queryOptions({ + input: { + params: { appInstanceId }, + }, + })) const apiEnabled = accessConfig?.developerApi?.enabled ?? false const apiUrl = accessConfig?.developerApi?.apiUrl const apiKeys = accessConfig?.developerApi?.apiKeys ?? [] + const environments = accessConfig?.permissions + ?.map(permissionEnvironment) + .filter((environment): environment is ConsoleEnvironment => Boolean(environment)) ?? [] return (
+} { + return Boolean(row.environment?.id) +} + export function AccessPermissionsSection({ appInstanceId, }: AccessPermissionsSectionProps) { const { t } = useTranslation('deployments') - const { environments, policies } = useAccessEnvironmentScope(appInstanceId) + const { data: accessConfig } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceAccess.queryOptions({ + input: { + params: { appInstanceId }, + }, + })) + const permissionRows = accessConfig?.permissions?.filter(hasEnvironment) ?? [] return (
- {environments.length === 0 + {permissionRows.length === 0 ? (
{t('access.runAccess.noEnvs')} @@ -28,17 +43,14 @@ export function AccessPermissionsSection({ ) : (
- {environments.map((env) => { - const policy = policies.find(item => item.environment?.id === env.id) - return ( - - ) - })} + {permissionRows.map(row => ( + + ))}
)}
diff --git a/web/features/deployments/detail/access-tab/use-access-environment-scope.ts b/web/features/deployments/detail/access-tab/use-access-environment-scope.ts deleted file mode 100644 index 4eae0fbf42..0000000000 --- a/web/features/deployments/detail/access-tab/use-access-environment-scope.ts +++ /dev/null @@ -1,40 +0,0 @@ -import type { - ConsoleEnvironment, - EnvironmentAccessRow, -} from '@dify/contracts/enterprise/types.gen' -import { useQuery } from '@tanstack/react-query' -import { consoleQuery } from '@/service/client' -import { deployedRows } from '../../utils' - -const EMPTY_ACCESS_PERMISSIONS: EnvironmentAccessRow[] = [] - -function uniqueEnvironments(environments: (ConsoleEnvironment | undefined)[]) { - return environments.filter((environment, index): environment is ConsoleEnvironment => { - if (!environment?.id) - return false - return environments.findIndex(candidate => candidate?.id === environment.id) === index - }) -} - -export function useAccessEnvironmentScope(appInstanceId: string) { - const appInput = { params: { appInstanceId } } - const { data: accessConfig } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceAccess.queryOptions({ - input: appInput, - })) - const { data: environmentDeployments } = useQuery(consoleQuery.enterprise.appDeploy.listRuntimeInstances.queryOptions({ - input: appInput, - })) - const deploymentRows = deployedRows(environmentDeployments?.data) - const policies = accessConfig?.permissions ?? EMPTY_ACCESS_PERMISSIONS - const environments = uniqueEnvironments([ - ...deploymentRows.map(row => row.environment), - ...policies.map(policy => policy.environment), - ...(accessConfig?.accessChannels?.webappRows?.map(row => row.environment) ?? []), - ]) - - return { - accessConfig, - environments, - policies, - } -}