refactor(components): reorder class names for consistency in various plugin components and add unit tests for CardMoreInfo and other components

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

@@ -1,22 +1,6 @@
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import AuthorizedInDataSourceNode from './authorized-in-data-source-node'
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => {
-      const map: Record<string, string> = {
-        'auth.authorization': '1 Authorization',
-        'auth.authorizations': 'Multiple Authorizations',
-      }
-      return map[key] || key
-    },
-  }),
-}))
-
-vi.mock('@remixicon/react', () => ({
-  RiEqualizer2Line: () => <span data-testid="equalizer-icon" />,
-}))
+import AuthorizedInDataSourceNode from '../authorized-in-data-source-node'
 
 vi.mock('@/app/components/header/indicator', () => ({
   default: ({ color }: { color: string }) => <span data-testid="indicator" data-color={color} />,
@@ -40,12 +24,12 @@ describe('AuthorizedInDataSourceNode', () => {
 
   it('renders singular text for 1 authorization', () => {
     render(<AuthorizedInDataSourceNode authorizationsNum={1} onJumpToDataSourcePage={mockOnJump} />)
-    expect(screen.getByText('1 Authorization')).toBeInTheDocument()
+    expect(screen.getByText('plugin.auth.authorization')).toBeInTheDocument()
   })
 
   it('renders plural text for multiple authorizations', () => {
     render(<AuthorizedInDataSourceNode authorizationsNum={3} onJumpToDataSourcePage={mockOnJump} />)
-    expect(screen.getByText('Multiple Authorizations')).toBeInTheDocument()
+    expect(screen.getByText('plugin.auth.authorizations')).toBeInTheDocument()
   })
 
   it('calls onJumpToDataSourcePage when button is clicked', () => {
@@ -54,8 +38,8 @@ describe('AuthorizedInDataSourceNode', () => {
     expect(mockOnJump).toHaveBeenCalledTimes(1)
   })
 
-  it('renders equalizer icon', () => {
+  it('renders settings button', () => {
     render(<AuthorizedInDataSourceNode authorizationsNum={1} onJumpToDataSourcePage={mockOnJump} />)
-    expect(screen.getByTestId('equalizer-icon')).toBeInTheDocument()
+    expect(screen.getByRole('button')).toBeInTheDocument()
   })
 })

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

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react'
-import type { Credential, PluginPayload } from './types'
+import type { Credential, PluginPayload } from '../types'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { AuthCategory, CredentialTypeEnum } from './types'
+import { AuthCategory, CredentialTypeEnum } from '../types'
 
 // ==================== Mock Setup ====================
 
@@ -109,7 +109,7 @@ describe('AuthorizedInNode Component', () => {
   })
 
   it('should render with workspace default when no credentialId', async () => {
-    const AuthorizedInNode = (await import('./authorized-in-node')).default
+    const AuthorizedInNode = (await import('../authorized-in-node')).default
     const pluginPayload = createPluginPayload()
     render(
       <AuthorizedInNode pluginPayload={pluginPayload} onAuthorizationItemClick={vi.fn()} />,
@@ -119,7 +119,7 @@ describe('AuthorizedInNode Component', () => {
   })
 
   it('should render credential name when credentialId matches', async () => {
-    const AuthorizedInNode = (await import('./authorized-in-node')).default
+    const AuthorizedInNode = (await import('../authorized-in-node')).default
     const credential = createCredential({ id: 'selected-id', name: 'My Credential' })
     mockGetPluginCredentialInfo.mockReturnValue({
       credentials: [credential],
@@ -135,7 +135,7 @@ describe('AuthorizedInNode Component', () => {
   })
 
   it('should show auth removed when credentialId not found', async () => {
-    const AuthorizedInNode = (await import('./authorized-in-node')).default
+    const AuthorizedInNode = (await import('../authorized-in-node')).default
     mockGetPluginCredentialInfo.mockReturnValue({
       credentials: [createCredential()],
       supported_credential_types: [CredentialTypeEnum.API_KEY],
@@ -150,7 +150,7 @@ describe('AuthorizedInNode Component', () => {
   })
 
   it('should show unavailable when credential is not allowed', async () => {
-    const AuthorizedInNode = (await import('./authorized-in-node')).default
+    const AuthorizedInNode = (await import('../authorized-in-node')).default
     const credential = createCredential({
       id: 'unavailable-id',
       not_allowed_to_use: true,
@@ -171,7 +171,7 @@ describe('AuthorizedInNode Component', () => {
   })
 
   it('should show unavailable when default credential is not allowed', async () => {
-    const AuthorizedInNode = (await import('./authorized-in-node')).default
+    const AuthorizedInNode = (await import('../authorized-in-node')).default
     const credential = createCredential({
       is_default: true,
       not_allowed_to_use: true,
@@ -191,7 +191,7 @@ describe('AuthorizedInNode Component', () => {
   })
 
   it('should call onAuthorizationItemClick when clicking', async () => {
-    const AuthorizedInNode = (await import('./authorized-in-node')).default
+    const AuthorizedInNode = (await import('../authorized-in-node')).default
     const onAuthorizationItemClick = vi.fn()
     const pluginPayload = createPluginPayload()
     render(
@@ -204,7 +204,7 @@ describe('AuthorizedInNode Component', () => {
   })
 
   it('should be memoized', async () => {
-    const AuthorizedInNodeModule = await import('./authorized-in-node')
+    const AuthorizedInNodeModule = await import('../authorized-in-node')
     expect(typeof AuthorizedInNodeModule.default).toBe('object')
   })
 })

web/app/components/plugins/plugin-auth/__tests__/index.spec.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
-import type { Credential, PluginPayload } from './types'
+import type { Credential, PluginPayload } from '../types'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { describe, expect, it, vi } from 'vitest'
-import { AuthCategory, CredentialTypeEnum } from './types'
+import { AuthCategory, CredentialTypeEnum } from '../types'
 
 const mockGetPluginCredentialInfo = vi.fn()
 const mockDeletePluginCredential = vi.fn()
@@ -136,7 +136,7 @@ const _createCredentialList = (count: number, overrides: Partial<Credential>[] =
 
 describe('Index Exports', () => {
   it('should export all required components and hooks', async () => {
-    const exports = await import('./index')
+    const exports = await import('../index')
 
     expect(exports.AddApiKeyButton).toBeDefined()
     expect(exports.AddOAuthButton).toBeDefined()
@@ -151,7 +151,7 @@ describe('Index Exports', () => {
   }, 15000)
 
   it('should export AuthCategory enum', async () => {
-    const exports = await import('./index')
+    const exports = await import('../index')
 
     expect(exports.AuthCategory).toBeDefined()
     expect(exports.AuthCategory.tool).toBe('tool')
@@ -161,7 +161,7 @@ describe('Index Exports', () => {
   }, 15000)
 
   it('should export CredentialTypeEnum', async () => {
-    const exports = await import('./index')
+    const exports = await import('../index')
 
     expect(exports.CredentialTypeEnum).toBeDefined()
     expect(exports.CredentialTypeEnum.OAUTH2).toBe('oauth2')

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

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react'
-import type { Credential, PluginPayload } from './types'
+import type { Credential, PluginPayload } from '../types'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { AuthCategory, CredentialTypeEnum } from './types'
+import { AuthCategory, CredentialTypeEnum } from '../types'
 
 // ==================== Mock Setup ====================
 
@@ -109,7 +109,7 @@ describe('PluginAuthInAgent Component', () => {
   })
 
   it('should render Authorize when not authorized', async () => {
-    const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
+    const PluginAuthInAgent = (await import('../plugin-auth-in-agent')).default
     mockGetPluginCredentialInfo.mockReturnValue({
       credentials: [],
       supported_credential_types: [CredentialTypeEnum.API_KEY],
@@ -124,7 +124,7 @@ describe('PluginAuthInAgent Component', () => {
   })
 
   it('should render Authorized with workspace default when authorized', async () => {
-    const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
+    const PluginAuthInAgent = (await import('../plugin-auth-in-agent')).default
     const pluginPayload = createPluginPayload()
     render(
       <PluginAuthInAgent pluginPayload={pluginPayload} />,
@@ -135,7 +135,7 @@ describe('PluginAuthInAgent Component', () => {
   })
 
   it('should show credential name when credentialId is provided', async () => {
-    const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
+    const PluginAuthInAgent = (await import('../plugin-auth-in-agent')).default
     const credential = createCredential({ id: 'selected-id', name: 'Selected Credential' })
     mockGetPluginCredentialInfo.mockReturnValue({
       credentials: [credential],
@@ -151,7 +151,7 @@ describe('PluginAuthInAgent Component', () => {
   })
 
   it('should show auth removed when credential not found', async () => {
-    const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
+    const PluginAuthInAgent = (await import('../plugin-auth-in-agent')).default
     mockGetPluginCredentialInfo.mockReturnValue({
       credentials: [createCredential()],
       supported_credential_types: [CredentialTypeEnum.API_KEY],
@@ -166,7 +166,7 @@ describe('PluginAuthInAgent Component', () => {
   })
 
   it('should show unavailable when credential is not allowed to use', async () => {
-    const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
+    const PluginAuthInAgent = (await import('../plugin-auth-in-agent')).default
     const credential = createCredential({
       id: 'unavailable-id',
       name: 'Unavailable Credential',
@@ -188,7 +188,7 @@ describe('PluginAuthInAgent Component', () => {
   })
 
   it('should call onAuthorizationItemClick when item is clicked', async () => {
-    const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
+    const PluginAuthInAgent = (await import('../plugin-auth-in-agent')).default
     const onAuthorizationItemClick = vi.fn()
     const pluginPayload = createPluginPayload()
     render(
@@ -201,7 +201,7 @@ describe('PluginAuthInAgent Component', () => {
   })
 
   it('should trigger handleAuthorizationItemClick and close popup when item is clicked', async () => {
-    const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
+    const PluginAuthInAgent = (await import('../plugin-auth-in-agent')).default
     const onAuthorizationItemClick = vi.fn()
     const credential = createCredential({ id: 'test-cred-id', name: 'Test Credential' })
     mockGetPluginCredentialInfo.mockReturnValue({
@@ -223,7 +223,7 @@ describe('PluginAuthInAgent Component', () => {
   })
 
   it('should call onAuthorizationItemClick with credential id when specific credential is clicked', async () => {
-    const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
+    const PluginAuthInAgent = (await import('../plugin-auth-in-agent')).default
     const onAuthorizationItemClick = vi.fn()
     const credential = createCredential({
       id: 'specific-cred-id',
@@ -249,7 +249,7 @@ describe('PluginAuthInAgent Component', () => {
   })
 
   it('should be memoized', async () => {
-    const PluginAuthInAgentModule = await import('./plugin-auth-in-agent')
+    const PluginAuthInAgentModule = await import('../plugin-auth-in-agent')
     expect(typeof PluginAuthInAgentModule.default).toBe('object')
   })
 })

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

@@ -1,21 +1,6 @@
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import PluginAuthInDataSourceNode from './plugin-auth-in-datasource-node'
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => {
-      const map: Record<string, string> = {
-        'integrations.connect': 'Connect',
-      }
-      return map[key] || key
-    },
-  }),
-}))
-
-vi.mock('@remixicon/react', () => ({
-  RiAddLine: () => <span data-testid="add-icon" />,
-}))
+import PluginAuthInDataSourceNode from '../plugin-auth-in-datasource-node'
 
 describe('PluginAuthInDataSourceNode', () => {
   const mockOnJump = vi.fn()
@@ -30,18 +15,17 @@ describe('PluginAuthInDataSourceNode', () => {
 
   it('renders connect button when not authorized', () => {
     render(<PluginAuthInDataSourceNode onJumpToDataSourcePage={mockOnJump} />)
-    expect(screen.getByText('Connect')).toBeInTheDocument()
-    expect(screen.getByTestId('add-icon')).toBeInTheDocument()
+    expect(screen.getByText('common.integrations.connect')).toBeInTheDocument()
   })
 
   it('renders connect button', () => {
     render(<PluginAuthInDataSourceNode onJumpToDataSourcePage={mockOnJump} />)
-    expect(screen.getByRole('button', { name: /Connect/ })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /common\.integrations\.connect/ })).toBeInTheDocument()
   })
 
   it('calls onJumpToDataSourcePage when connect button is clicked', () => {
     render(<PluginAuthInDataSourceNode onJumpToDataSourcePage={mockOnJump} />)
-    fireEvent.click(screen.getByRole('button', { name: /Connect/ }))
+    fireEvent.click(screen.getByRole('button', { name: /common\.integrations\.connect/ }))
     expect(mockOnJump).toHaveBeenCalledTimes(1)
   })
 
@@ -51,7 +35,7 @@ describe('PluginAuthInDataSourceNode', () => {
         <div data-testid="child-content">Data Source Connected</div>
       </PluginAuthInDataSourceNode>,
     )
-    expect(screen.queryByText('Connect')).not.toBeInTheDocument()
+    expect(screen.queryByText('common.integrations.connect')).not.toBeInTheDocument()
     expect(screen.getByTestId('child-content')).toBeInTheDocument()
   })
 
@@ -61,7 +45,7 @@ describe('PluginAuthInDataSourceNode', () => {
         <div data-testid="child-content">Data Source Connected</div>
       </PluginAuthInDataSourceNode>,
     )
-    expect(screen.getByText('Connect')).toBeInTheDocument()
+    expect(screen.getByText('common.integrations.connect')).toBeInTheDocument()
     expect(screen.queryByTestId('child-content')).not.toBeInTheDocument()
   })
 })

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

@@ -1,14 +1,14 @@
 import { cleanup, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import PluginAuth from './plugin-auth'
-import { AuthCategory } from './types'
+import PluginAuth from '../plugin-auth'
+import { AuthCategory } from '../types'
 
 const mockUsePluginAuth = vi.fn()
-vi.mock('./hooks/use-plugin-auth', () => ({
+vi.mock('../hooks/use-plugin-auth', () => ({
   usePluginAuth: (...args: unknown[]) => mockUsePluginAuth(...args),
 }))
 
-vi.mock('./authorize', () => ({
+vi.mock('../authorize', () => ({
   default: ({ pluginPayload }: { pluginPayload: { provider: string } }) => (
     <div data-testid="authorize">
       Authorize:
@@ -17,7 +17,7 @@ vi.mock('./authorize', () => ({
   ),
 }))
 
-vi.mock('./authorized', () => ({
+vi.mock('../authorized', () => ({
   default: ({ pluginPayload }: { pluginPayload: { provider: string } }) => (
     <div data-testid="authorized">
       Authorized:

web/app/components/plugins/plugin-auth/__tests__/utils.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { transformFormSchemasSecretInput } from './utils'
+import { transformFormSchemasSecretInput } from '../utils'
 
 describe('plugin-auth/utils', () => {
   describe('transformFormSchemasSecretInput', () => {

web/app/components/plugins/plugin-auth/authorize/__tests__/add-api-key-button.spec.tsx

@@ -1,10 +1,10 @@
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { AuthCategory } from '../types'
-import AddApiKeyButton from './add-api-key-button'
+import { AuthCategory } from '../../types'
+import AddApiKeyButton from '../add-api-key-button'
 
 let _mockModalOpen = false
-vi.mock('./api-key-modal', () => ({
+vi.mock('../api-key-modal', () => ({
   default: ({ onClose, onUpdate }: { onClose: () => void, onUpdate?: () => void }) => {
     _mockModalOpen = true
     return (

web/app/components/plugins/plugin-auth/authorize/__tests__/add-oauth-button.spec.tsx

@@ -1,17 +1,11 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { AuthCategory } from '../types'
+import { AuthCategory } from '../../types'
 
 const mockGetPluginOAuthUrl = vi.fn().mockResolvedValue({ authorization_url: 'https://auth.example.com' })
 const mockOpenOAuthPopup = vi.fn()
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 vi.mock('@/hooks/use-i18n', () => ({
   useRenderI18nObject: () => (obj: Record<string, string> | string) => typeof obj === 'string' ? obj : obj.en_US || '',
 }))
@@ -20,7 +14,7 @@ vi.mock('@/hooks/use-oauth', () => ({
   openOAuthPopup: (...args: unknown[]) => mockOpenOAuthPopup(...args),
 }))
 
-vi.mock('../hooks/use-credential', () => ({
+vi.mock('../../hooks/use-credential', () => ({
   useGetPluginOAuthUrlHook: () => ({
     mutateAsync: mockGetPluginOAuthUrl,
   }),
@@ -36,7 +30,7 @@ vi.mock('../hooks/use-credential', () => ({
   }),
 }))
 
-vi.mock('./oauth-client-settings', () => ({
+vi.mock('../oauth-client-settings', () => ({
   default: ({ onClose }: { onClose: () => void }) => (
     <div data-testid="oauth-settings-modal">
       <button data-testid="oauth-settings-close" onClick={onClose}>Close</button>
@@ -52,23 +46,17 @@ vi.mock('@/utils/classnames', () => ({
   cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
 }))
 
-vi.mock('@remixicon/react', () => ({
-  RiClipboardLine: () => <span data-testid="icon-clipboard" />,
-  RiEqualizer2Line: () => <span data-testid="icon-equalizer" />,
-  RiInformation2Fill: () => <span data-testid="icon-info" />,
-}))
-
 const basePayload = {
   category: AuthCategory.tool,
   provider: 'test-provider',
 }
 
 describe('AddOAuthButton', () => {
-  let AddOAuthButton: (typeof import('./add-oauth-button'))['default']
+  let AddOAuthButton: (typeof import('../add-oauth-button'))['default']
 
   beforeEach(async () => {
     vi.clearAllMocks()
-    const mod = await import('./add-oauth-button')
+    const mod = await import('../add-oauth-button')
     AddOAuthButton = mod.default
   })
 

web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx

@@ -1,27 +1,21 @@
-import type { ApiKeyModalProps } from './api-key-modal'
+import type { ApiKeyModalProps } from '../api-key-modal'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { AuthCategory } from '../types'
+import { AuthCategory } from '../../types'
 
 const mockNotify = vi.fn()
 const mockAddPluginCredential = vi.fn().mockResolvedValue({})
 const mockUpdatePluginCredential = vi.fn().mockResolvedValue({})
 const mockFormValues = { isCheckValidated: true, values: { __name__: 'My Key', api_key: 'sk-123' } }
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 vi.mock('@/app/components/base/toast', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
 }))
 
-vi.mock('../hooks/use-credential', () => ({
+vi.mock('../../hooks/use-credential', () => ({
   useAddPluginCredentialHook: () => ({
     mutateAsync: mockAddPluginCredential,
   }),
@@ -36,11 +30,11 @@ vi.mock('../hooks/use-credential', () => ({
   }),
 }))
 
-vi.mock('../../readme-panel/entrance', () => ({
+vi.mock('../../../readme-panel/entrance', () => ({
   ReadmeEntrance: () => <div data-testid="readme-entrance" />,
 }))
 
-vi.mock('../../readme-panel/store', () => ({
+vi.mock('../../../readme-panel/store', () => ({
   ReadmeShowType: { modal: 'modal' },
 }))
 
@@ -93,14 +87,14 @@ describe('ApiKeyModal', () => {
 
   beforeEach(async () => {
     vi.clearAllMocks()
-    const mod = await import('./api-key-modal')
+    const mod = await import('../api-key-modal')
     ApiKeyModal = mod.default
   })
 
   it('should render modal with correct title', () => {
     render(<ApiKeyModal pluginPayload={basePayload} />)
 
-    expect(screen.getByTestId('modal-title')).toHaveTextContent('auth.useApiAuth')
+    expect(screen.getByTestId('modal-title')).toHaveTextContent('plugin.auth.useApiAuth')
   })
 
   it('should render auth form when data is loaded', () => {

web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx

@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react'
-import type { PluginPayload } from '../types'
+import type { PluginPayload } from '../../types'
 import type { FormSchema } from '@/app/components/base/form/types'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { AuthCategory } from '../types'
+import { AuthCategory } from '../../types'
 
 // Create a wrapper with QueryClientProvider
 const createTestQueryClient = () =>
@@ -36,7 +36,7 @@ const mockAddPluginCredential = vi.fn()
 const mockUpdatePluginCredential = vi.fn()
 const mockGetPluginCredentialSchema = vi.fn()
 
-vi.mock('../hooks/use-credential', () => ({
+vi.mock('../../hooks/use-credential', () => ({
   useGetPluginOAuthUrlHook: () => ({
     mutateAsync: mockGetPluginOAuthUrl,
   }),
@@ -117,12 +117,12 @@ const createFormSchema = (overrides: Partial<FormSchema> = {}): FormSchema => ({
 
 // ==================== AddApiKeyButton Tests ====================
 describe('AddApiKeyButton', () => {
-  let AddApiKeyButton: typeof import('./add-api-key-button').default
+  let AddApiKeyButton: typeof import('../add-api-key-button').default
 
   beforeEach(async () => {
     vi.clearAllMocks()
     mockGetPluginCredentialSchema.mockReturnValue([])
-    const importedAddApiKeyButton = await import('./add-api-key-button')
+    const importedAddApiKeyButton = await import('../add-api-key-button')
     AddApiKeyButton = importedAddApiKeyButton.default
   })
 
@@ -327,7 +327,7 @@ describe('AddApiKeyButton', () => {
 
   describe('Memoization', () => {
     it('should be a memoized component', async () => {
-      const AddApiKeyButtonDefault = (await import('./add-api-key-button')).default
+      const AddApiKeyButtonDefault = (await import('../add-api-key-button')).default
       expect(typeof AddApiKeyButtonDefault).toBe('object')
     })
   })
@@ -335,7 +335,7 @@ describe('AddApiKeyButton', () => {
 
 // ==================== AddOAuthButton Tests ====================
 describe('AddOAuthButton', () => {
-  let AddOAuthButton: typeof import('./add-oauth-button').default
+  let AddOAuthButton: typeof import('../add-oauth-button').default
 
   beforeEach(async () => {
     vi.clearAllMocks()
@@ -347,7 +347,7 @@ describe('AddOAuthButton', () => {
       redirect_uri: 'https://example.com/callback',
     })
     mockGetPluginOAuthUrl.mockResolvedValue({ authorization_url: 'https://oauth.example.com/auth' })
-    const importedAddOAuthButton = await import('./add-oauth-button')
+    const importedAddOAuthButton = await import('../add-oauth-button')
     AddOAuthButton = importedAddOAuthButton.default
   })
 
@@ -856,7 +856,7 @@ describe('AddOAuthButton', () => {
 
 // ==================== ApiKeyModal Tests ====================
 describe('ApiKeyModal', () => {
-  let ApiKeyModal: typeof import('./api-key-modal').default
+  let ApiKeyModal: typeof import('../api-key-modal').default
 
   beforeEach(async () => {
     vi.clearAllMocks()
@@ -870,7 +870,7 @@ describe('ApiKeyModal', () => {
       isCheckValidated: false,
       values: {},
     })
-    const importedApiKeyModal = await import('./api-key-modal')
+    const importedApiKeyModal = await import('../api-key-modal')
     ApiKeyModal = importedApiKeyModal.default
   })
 
@@ -1272,13 +1272,13 @@ describe('ApiKeyModal', () => {
 
 // ==================== OAuthClientSettings Tests ====================
 describe('OAuthClientSettings', () => {
-  let OAuthClientSettings: typeof import('./oauth-client-settings').default
+  let OAuthClientSettings: typeof import('../oauth-client-settings').default
 
   beforeEach(async () => {
     vi.clearAllMocks()
     mockSetPluginOAuthCustomClient.mockResolvedValue({})
     mockDeletePluginOAuthCustomClient.mockResolvedValue({})
-    const importedOAuthClientSettings = await import('./oauth-client-settings')
+    const importedOAuthClientSettings = await import('../oauth-client-settings')
     OAuthClientSettings = importedOAuthClientSettings.default
   })
 
@@ -2193,7 +2193,7 @@ describe('OAuthClientSettings', () => {
 
   describe('Memoization', () => {
     it('should be a memoized component', async () => {
-      const OAuthClientSettingsDefault = (await import('./oauth-client-settings')).default
+      const OAuthClientSettingsDefault = (await import('../oauth-client-settings')).default
       expect(typeof OAuthClientSettingsDefault).toBe('object')
     })
   })
@@ -2216,7 +2216,7 @@ describe('Authorize Components Integration', () => {
 
   describe('AddApiKeyButton -> ApiKeyModal Flow', () => {
     it('should open ApiKeyModal when AddApiKeyButton is clicked', async () => {
-      const AddApiKeyButton = (await import('./add-api-key-button')).default
+      const AddApiKeyButton = (await import('../add-api-key-button')).default
       const pluginPayload = createPluginPayload()
 
       render(<AddApiKeyButton pluginPayload={pluginPayload} />, { wrapper: createWrapper() })
@@ -2231,7 +2231,7 @@ describe('Authorize Components Integration', () => {
 
   describe('AddOAuthButton -> OAuthClientSettings Flow', () => {
     it('should open OAuthClientSettings when setup button is clicked', async () => {
-      const AddOAuthButton = (await import('./add-oauth-button')).default
+      const AddOAuthButton = (await import('../add-oauth-button')).default
       const pluginPayload = createPluginPayload()
       mockGetPluginOAuthClientSchema.mockReturnValue({
         schema: [createFormSchema({ name: 'client_id', label: 'Client ID' })],

web/app/components/plugins/plugin-auth/authorize/__tests__/index.spec.tsx

@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react'
-import type { PluginPayload } from '../types'
+import type { PluginPayload } from '../../types'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { AuthCategory } from '../types'
-import Authorize from './index'
+import { AuthCategory } from '../../types'
+import Authorize from '../index'
 
 // Create a wrapper with QueryClientProvider for real component testing
 const createTestQueryClient = () =>
@@ -29,7 +29,7 @@ const createWrapper = () => {
 // Mock API hooks - only mock network-related hooks
 const mockGetPluginOAuthClientSchema = vi.fn()
 
-vi.mock('../hooks/use-credential', () => ({
+vi.mock('../../hooks/use-credential', () => ({
   useGetPluginOAuthUrlHook: () => ({
     mutateAsync: vi.fn().mockResolvedValue({ authorization_url: '' }),
   }),
@@ -568,7 +568,7 @@ describe('Authorize', () => {
   // ==================== Component Memoization ====================
   describe('Component Memoization', () => {
     it('should be a memoized component (exported with memo)', async () => {
-      const AuthorizeDefault = (await import('./index')).default
+      const AuthorizeDefault = (await import('../index')).default
       expect(AuthorizeDefault).toBeDefined()
       // memo wrapped components are React elements with $$typeof
       expect(typeof AuthorizeDefault).toBe('object')

web/app/components/plugins/plugin-auth/authorize/__tests__/oauth-client-settings.spec.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { AuthCategory } from '../types'
+import { AuthCategory } from '../../types'
 
 const mockNotify = vi.fn()
 const mockSetPluginOAuthCustomClient = vi.fn().mockResolvedValue({})
@@ -9,19 +9,13 @@ const mockDeletePluginOAuthCustomClient = vi.fn().mockResolvedValue({})
 const mockInvalidPluginOAuthClientSchema = vi.fn()
 const mockFormValues = { isCheckValidated: true, values: { __oauth_client__: 'custom', client_id: 'test-id' } }
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 vi.mock('@/app/components/base/toast', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
 }))
 
-vi.mock('../hooks/use-credential', () => ({
+vi.mock('../../hooks/use-credential', () => ({
   useSetPluginOAuthCustomClientHook: () => ({
     mutateAsync: mockSetPluginOAuthCustomClient,
   }),
@@ -31,11 +25,11 @@ vi.mock('../hooks/use-credential', () => ({
   useInvalidPluginOAuthClientSchemaHook: () => mockInvalidPluginOAuthClientSchema,
 }))
 
-vi.mock('../../readme-panel/entrance', () => ({
+vi.mock('../../../readme-panel/entrance', () => ({
   ReadmeEntrance: () => <div data-testid="readme-entrance" />,
 }))
 
-vi.mock('../../readme-panel/store', () => ({
+vi.mock('../../../readme-panel/store', () => ({
   ReadmeShowType: { modal: 'modal' },
 }))
 
@@ -89,11 +83,11 @@ const defaultSchemas = [
 ] as never
 
 describe('OAuthClientSettings', () => {
-  let OAuthClientSettings: (typeof import('./oauth-client-settings'))['default']
+  let OAuthClientSettings: (typeof import('../oauth-client-settings'))['default']
 
   beforeEach(async () => {
     vi.clearAllMocks()
-    const mod = await import('./oauth-client-settings')
+    const mod = await import('../oauth-client-settings')
     OAuthClientSettings = mod.default
   })
 
@@ -105,7 +99,7 @@ describe('OAuthClientSettings', () => {
       />,
     )
 
-    expect(screen.getByTestId('modal-title')).toHaveTextContent('auth.oauthClientSettings')
+    expect(screen.getByTestId('modal-title')).toHaveTextContent('plugin.auth.oauthClientSettings')
   })
 
   it('should render auth form', () => {

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

@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react'
-import type { Credential, PluginPayload } from '../types'
+import type { Credential, PluginPayload } from '../../types'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { AuthCategory, CredentialTypeEnum } from '../types'
-import Authorized from './index'
+import { AuthCategory, CredentialTypeEnum } from '../../types'
+import Authorized from '../index'
 
 // ==================== Mock Setup ====================
 
@@ -13,7 +13,7 @@ const mockDeletePluginCredential = vi.fn()
 const mockSetPluginDefaultCredential = vi.fn()
 const mockUpdatePluginCredential = vi.fn()
 
-vi.mock('../hooks/use-credential', () => ({
+vi.mock('../../hooks/use-credential', () => ({
   useDeletePluginCredentialHook: () => ({
     mutateAsync: mockDeletePluginCredential,
   }),
@@ -1620,7 +1620,7 @@ describe('Authorized Component', () => {
   // ==================== Memoization Test ====================
   describe('Memoization', () => {
     it('should be memoized', async () => {
-      const AuthorizedModule = await import('./index')
+      const AuthorizedModule = await import('../index')
       // memo returns an object with $$typeof
       expect(typeof AuthorizedModule.default).toBe('object')
     })

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

@@ -1,8 +1,8 @@
-import type { Credential } from '../types'
+import type { Credential } from '../../types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { CredentialTypeEnum } from '../types'
-import Item from './item'
+import { CredentialTypeEnum } from '../../types'
+import Item from '../item'
 
 // ==================== Test Utilities ====================
 
@@ -829,7 +829,7 @@ describe('Item Component', () => {
   // ==================== Memoization Test ====================
   describe('Memoization', () => {
     it('should be memoized', async () => {
-      const ItemModule = await import('./item')
+      const ItemModule = await import('../item')
       // memo returns an object with $$typeof
       expect(typeof ItemModule.default).toBe('object')
     })

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

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { AuthCategory, CredentialTypeEnum } from '../types'
+import { AuthCategory, CredentialTypeEnum } from '../../types'
 import {
   useAddPluginCredentialHook,
   useDeletePluginCredentialHook,
@@ -14,7 +14,7 @@ import {
   useSetPluginDefaultCredentialHook,
   useSetPluginOAuthCustomClientHook,
   useUpdatePluginCredentialHook,
-} from './use-credential'
+} from '../use-credential'
 
 // Mock service hooks
 const mockUseGetPluginCredentialInfo = vi.fn().mockReturnValue({ data: null, isLoading: false })

web/app/components/plugins/plugin-auth/hooks/__tests__/use-get-api.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
-import { AuthCategory, CredentialTypeEnum } from '../types'
-import { useGetApi } from './use-get-api'
+import { AuthCategory, CredentialTypeEnum } from '../../types'
+import { useGetApi } from '../use-get-api'
 
 describe('useGetApi', () => {
   const provider = 'test-provider'

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

@@ -3,27 +3,21 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { act, renderHook } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { usePluginAuthAction } from '../hooks/use-plugin-auth-action'
-import { AuthCategory } from '../types'
+import { usePluginAuthAction } from '../../hooks/use-plugin-auth-action'
+import { AuthCategory } from '../../types'
 
 const mockDeletePluginCredential = vi.fn().mockResolvedValue({})
 const mockSetPluginDefaultCredential = vi.fn().mockResolvedValue({})
 const mockUpdatePluginCredential = vi.fn().mockResolvedValue({})
 const mockNotify = vi.fn()
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 vi.mock('@/app/components/base/toast', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),
 }))
 
-vi.mock('../hooks/use-credential', () => ({
+vi.mock('../../hooks/use-credential', () => ({
   useDeletePluginCredentialHook: () => ({
     mutateAsync: mockDeletePluginCredential,
   }),

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

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { AuthCategory, CredentialTypeEnum } from '../types'
-import { usePluginAuth } from './use-plugin-auth'
+import { AuthCategory, CredentialTypeEnum } from '../../types'
+import { usePluginAuth } from '../use-plugin-auth'
 
 // Mock dependencies
 const mockCredentials = [
@@ -17,7 +17,7 @@ const mockCredentialInfo = vi.fn().mockReturnValue({
 
 const mockInvalidate = vi.fn()
 
-vi.mock('./use-credential', () => ({
+vi.mock('../use-credential', () => ({
   useGetPluginCredentialInfoHook: (_payload: unknown, enable?: boolean) => ({
     data: enable ? mockCredentialInfo() : undefined,
     isLoading: false,