tweaks

web/features/deployments/detail/access-tab/api-keys.tsx

@@ -9,11 +9,9 @@ import {
   DropdownMenuTrigger,
 } from '@langgenius/dify-ui/dropdown-menu'
 import { useMutation } from '@tanstack/react-query'
-import { useSetAtom } from 'jotai'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { consoleQuery } from '@/service/client'
-import { createdDeveloperApiTokenAtom } from '../../store'
 import { environmentName } from '../../utils'
 
 function ApiKeyRow({ appInstanceId, apiKey }: {
@@ -79,14 +77,14 @@ export function ApiKeyList({ appInstanceId, apiKeys }: {
   )
 }
 
-export function ApiKeyGenerateMenu({ appInstanceId, environments, apiKeys }: {
+export function ApiKeyGenerateMenu({ appInstanceId, environments, apiKeys, onCreatedToken }: {
   appInstanceId: string
   environments: ConsoleEnvironment[]
   apiKeys: DeveloperApiKeyRow[]
+  onCreatedToken: (token: string) => void
 }) {
   const { t } = useTranslation('deployments')
   const [open, setOpen] = useState(false)
-  const setCreatedApiToken = useSetAtom(createdDeveloperApiTokenAtom)
   const generateApiKey = useMutation(consoleQuery.enterprise.appDeploy.createDeveloperApiKey.mutationOptions())
   const selectableEnvironments = environments.filter(env => env.id)
   const disabled = selectableEnvironments.length === 0
@@ -114,7 +112,7 @@ export function ApiKeyGenerateMenu({ appInstanceId, environments, apiKeys }: {
       {
         onSuccess: (response) => {
           if (response.token)
-            setCreatedApiToken({ appInstanceId, token: response.token })
+            onCreatedToken(response.token)
         },
       },
     )

web/features/deployments/detail/access-tab/developer-api-section.tsx

@@ -6,10 +6,9 @@ import type {
 } from '@dify/contracts/enterprise/types.gen'
 import { Switch } from '@langgenius/dify-ui/switch'
 import { useMutation, useQuery } from '@tanstack/react-query'
-import { useAtomValue, useSetAtom } from 'jotai'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { consoleQuery } from '@/service/client'
-import { createdDeveloperApiTokenAtom } from '../../store'
 import { Section } from '../common'
 import { ApiKeyGenerateMenu, ApiKeyList } from './api-keys'
 import { CopyPill } from './common'
@@ -18,6 +17,11 @@ type DeveloperApiSectionProps = {
   appInstanceId: string
 }
 
+type CreatedApiToken = {
+  appInstanceId: string
+  token: string
+}
+
 function permissionEnvironment(row: EnvironmentAccessRow): ConsoleEnvironment | undefined {
   return row.environment?.id ? row.environment : undefined
 }
@@ -41,18 +45,11 @@ function DeveloperApiSwitch({ appInstanceId, checked }: {
   )
 }
 
-function CreatedApiTokenCard({ appInstanceId }: {
-  appInstanceId: string
+function CreatedApiTokenCard({ token, onDismiss }: {
+  token: string
+  onDismiss: () => void
 }) {
   const { t } = useTranslation('deployments')
-  const createdApiToken = useAtomValue(createdDeveloperApiTokenAtom)
-  const setCreatedApiToken = useSetAtom(createdDeveloperApiTokenAtom)
-  const visibleCreatedApiToken = createdApiToken?.appInstanceId === appInstanceId
-    ? createdApiToken.token
-    : undefined
-
-  if (!visibleCreatedApiToken)
-    return null
 
   return (
     <div className="flex flex-col gap-2 rounded-lg border border-components-panel-border bg-components-panel-bg-blur p-3">
@@ -67,7 +64,7 @@ function CreatedApiTokenCard({ appInstanceId }: {
         </div>
         <button
           type="button"
-          onClick={() => setCreatedApiToken(undefined)}
+          onClick={onDismiss}
           aria-label={t('access.api.dismissToken')}
           className="flex size-6 shrink-0 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
         >
@@ -76,7 +73,7 @@ function CreatedApiTokenCard({ appInstanceId }: {
       </div>
       <CopyPill
         label={t('access.api.newTokenLabel')}
-        value={visibleCreatedApiToken}
+        value={token}
       />
     </div>
   )
@@ -86,6 +83,7 @@ export function DeveloperApiSection({
   appInstanceId,
 }: DeveloperApiSectionProps) {
   const { t } = useTranslation('deployments')
+  const [createdApiToken, setCreatedApiToken] = useState<CreatedApiToken>()
   const { data: accessConfig } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceAccess.queryOptions({
     input: {
       params: { appInstanceId },
@@ -97,6 +95,9 @@ export function DeveloperApiSection({
   const environments = accessConfig?.permissions
     ?.map(permissionEnvironment)
     .filter((environment): environment is ConsoleEnvironment => Boolean(environment)) ?? []
+  const visibleCreatedApiToken = createdApiToken?.appInstanceId === appInstanceId
+    ? createdApiToken.token
+    : undefined
 
   return (
     <Section
@@ -131,9 +132,15 @@ export function DeveloperApiSection({
                   appInstanceId={appInstanceId}
                   environments={environments}
                   apiKeys={apiKeys}
+                  onCreatedToken={token => setCreatedApiToken({ appInstanceId, token })}
                 />
               </div>
-              <CreatedApiTokenCard appInstanceId={appInstanceId} />
+              {visibleCreatedApiToken && (
+                <CreatedApiTokenCard
+                  token={visibleCreatedApiToken}
+                  onDismiss={() => setCreatedApiToken(undefined)}
+                />
+              )}
               {apiKeys.length === 0
                 ? (
                     <div className="rounded-lg border border-dashed border-components-panel-border bg-components-panel-bg-blur px-4 py-6 text-center system-sm-regular text-text-tertiary">

web/features/deployments/list/index.tsx

@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import { consoleQuery } from '@/service/client'
 import { CreateInstanceModal } from '../components/create-instance-modal'
-import { DeployDrawer } from '../components/deploy-drawer'
 import { SOURCE_APPS_PAGE_SIZE } from '../data'
 import { EnvironmentFilter } from './environment-filter'
 import { InstanceCard } from './instance-card'
@@ -92,7 +91,6 @@ export function DeploymentsMain() {
     <>
       <DeploymentsList />
       <CreateInstanceModal />
-      <DeployDrawer />
     </>
   )
 }

web/features/deployments/store.ts

@@ -6,18 +6,12 @@ type OpenDeployDrawerParams = {
   releaseId?: string
 }
 
-type CreatedDeveloperApiToken = {
-  appInstanceId: string
-  token: string
-}
-
 export const deployDrawerOpenAtom = atom(false)
 export const deployDrawerAppInstanceIdAtom = atom<string | undefined>(undefined)
 export const deployDrawerEnvironmentIdAtom = atom<string | undefined>(undefined)
 export const deployDrawerReleaseIdAtom = atom<string | undefined>(undefined)
 
 export const createInstanceModalOpenAtom = atom(false)
-export const createdDeveloperApiTokenAtom = atom<CreatedDeveloperApiToken | undefined>(undefined)
 
 export const openDeployDrawerAtom = atom(null, (_get, set, params: OpenDeployDrawerParams) => {
   set(deployDrawerAppInstanceIdAtom, params.appInstanceId)