chore: new agent enchance (#39040)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

web/app/components/plugins/plugin-auth/__tests__/authorized-in-node.spec.tsx

@@ -8,12 +8,13 @@ import { AuthCategory, CredentialTypeEnum } from '../types'
 // ==================== Mock Setup ====================
 
 const mockGetPluginCredentialInfo = vi.fn()
+const mockIsPluginCredentialInfoLoading = vi.fn()
 const mockGetPluginOAuthClientSchema = vi.fn()
 
 vi.mock('@/service/use-plugins-auth', () => ({
   useGetPluginCredentialInfo: (url: string) => ({
     data: url ? mockGetPluginCredentialInfo() : undefined,
-    isLoading: false,
+    isLoading: mockIsPluginCredentialInfoLoading(),
   }),
   useDeletePluginCredential: () => ({ mutateAsync: vi.fn() }),
   useSetPluginDefaultCredential: () => ({ mutateAsync: vi.fn() }),
@@ -85,6 +86,7 @@ describe('AuthorizedInNode Component', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockIsCurrentWorkspaceManager.mockReturnValue(true)
+    mockIsPluginCredentialInfoLoading.mockReturnValue(false)
     mockGetPluginCredentialInfo.mockReturnValue({
       credentials: [createCredential({ is_default: true })],
       supported_credential_types: [CredentialTypeEnum.API_KEY],
@@ -163,6 +165,25 @@ describe('AuthorizedInNode Component', () => {
     expect(screen.getByText('plugin.auth.authRemoved'))!.toBeInTheDocument()
   })
 
+  it('should not show auth removed while credential info is loading', async () => {
+    const AuthorizedInNode = (await import('../authorized-in-node')).default
+    mockIsPluginCredentialInfoLoading.mockReturnValue(true)
+    mockGetPluginCredentialInfo.mockReturnValue(undefined)
+    const pluginPayload = createPluginPayload()
+
+    render(
+      <AuthorizedInNode
+        pluginPayload={pluginPayload}
+        onAuthorizationItemClick={vi.fn()}
+        credentialId="new-credential-id"
+      />,
+      { wrapper: createWrapper() },
+    )
+
+    expect(screen.queryByText('plugin.auth.authRemoved')).not.toBeInTheDocument()
+    expect(screen.getByText('common.loading')).toBeInTheDocument()
+  })
+
   it('should show unavailable when credential is not allowed', async () => {
     const AuthorizedInNode = (await import('../authorized-in-node')).default
     const credential = createCredential({

web/app/components/plugins/plugin-auth/authorized-in-node.tsx

@@ -26,6 +26,7 @@ const AuthorizedInNode = ({
     canApiKey,
     canOAuth,
     credentials,
+    isLoading,
     invalidPluginCredentialInfo,
     notAllowCustomCredential,
   } = usePluginAuth(pluginPayload, true, credentialId ? [credentialId] : undefined)
@@ -53,8 +54,14 @@ const AuthorizedInNode = ({
         }
       } else {
         const credential = credentials.find((c) => c.id === credentialId)
-        label = credential ? credential.name : t(($) => $['auth.authRemoved'], { ns: 'plugin' })
-        removed = !credential
+        if (credential) label = credential.name
+        else if (isLoading) {
+          label = t(($) => $.loading, { ns: 'common' })
+          color = 'disabled'
+        } else {
+          label = t(($) => $['auth.authRemoved'], { ns: 'plugin' })
+          removed = true
+        }
         unavailable = !!credential?.not_allowed_to_use && !credential?.from_enterprise
 
         if (removed) color = 'error'
@@ -86,7 +93,7 @@ const AuthorizedInNode = ({
         </Button>
       )
     },
-    [credentialId, credentials, t],
+    [credentialId, credentials, isLoading, t],
   )
   const defaultUnavailable = credentials.find((c) => c.is_default)?.not_allowed_to_use
   const extraAuthorizationItems: Credential[] = [

web/app/components/plugins/plugin-auth/hooks/use-plugin-auth.ts

@@ -10,7 +10,11 @@ export const usePluginAuth = (
   enable?: boolean,
   includeCredentialIds?: string[],
 ) => {
-  const { data } = useGetPluginCredentialInfoHook(pluginPayload, enable, includeCredentialIds)
+  const { data, isLoading } = useGetPluginCredentialInfoHook(
+    pluginPayload,
+    enable,
+    includeCredentialIds,
+  )
   const isAuthorized = !!data?.credentials.length
   const canOAuth = data?.supported_credential_types.includes(CredentialTypeEnum.OAUTH2)
   const canApiKey = data?.supported_credential_types.includes(CredentialTypeEnum.API_KEY)
@@ -20,6 +24,7 @@ export const usePluginAuth = (
     isAuthorized,
     canOAuth,
     canApiKey,
+    isLoading,
     credentials: data?.credentials || [],
     notAllowCustomCredential: data?.allow_custom_token === false,
     invalidPluginCredentialInfo,