refactor(custom): reorganize web app brand module and raise coverage threshold (#33531)

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

web/app/components/header/account-setting/Integrations-page/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
 import type { AccountIntegrate } from '@/models/common'
 import { render, screen } from '@testing-library/react'
 import { useAccountIntegrates } from '@/service/use-common'
-import IntegrationsPage from './index'
+import IntegrationsPage from '../index'
 
 vi.mock('@/service/use-common', () => ({
   useAccountIntegrates: vi.fn(),

web/app/components/header/account-setting/__tests__/constants.spec.ts

@@ -3,7 +3,7 @@ import {
   ACCOUNT_SETTING_TAB,
   DEFAULT_ACCOUNT_SETTING_TAB,
   isValidAccountSettingTab,
-} from './constants'
+} from '../constants'
 
 describe('AccountSetting Constants', () => {
   it('should have correct ACCOUNT_SETTING_MODAL_ACTION', () => {

web/app/components/header/account-setting/__tests__/index.spec.tsx

@@ -0,0 +1,346 @@
+import type { ComponentProps, ReactNode } from 'react'
+import type { AppContextValue } from '@/context/app-context'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useEffect } from 'react'
+import { useAppContext } from '@/context/app-context'
+import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { ACCOUNT_SETTING_TAB } from '../constants'
+import AccountSetting from '../index'
+
+vi.mock('@/context/provider-context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/context/provider-context')>()
+  return {
+    ...actual,
+    useProviderContext: vi.fn(),
+  }
+})
+
+vi.mock('@/context/app-context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/context/app-context')>()
+  return {
+    ...actual,
+    useAppContext: vi.fn(),
+  }
+})
+
+vi.mock('next/navigation', () => ({
+  useRouter: vi.fn(() => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+  })),
+  usePathname: vi.fn(() => '/'),
+  useParams: vi.fn(() => ({})),
+  useSearchParams: vi.fn(() => ({ get: vi.fn() })),
+}))
+
+vi.mock('@/hooks/use-breakpoints', () => ({
+  MediaType: {
+    mobile: 'mobile',
+    tablet: 'tablet',
+    pc: 'pc',
+  },
+  default: vi.fn(),
+}))
+
+vi.mock('@/app/components/billing/billing-page', () => ({
+  default: () => <div data-testid="billing-page">Billing Page</div>,
+}))
+
+vi.mock('@/app/components/custom/custom-page', () => ({
+  default: () => <div data-testid="custom-page">Custom Page</div>,
+}))
+
+vi.mock('@/app/components/header/account-setting/api-based-extension-page', () => ({
+  default: () => <div data-testid="api-based-extension-page">API Based Extension Page</div>,
+}))
+
+vi.mock('@/app/components/header/account-setting/data-source-page-new', () => ({
+  default: () => <div data-testid="data-source-page">Data Source Page</div>,
+}))
+
+vi.mock('@/app/components/header/account-setting/language-page', () => ({
+  default: () => <div data-testid="language-page">Language Page</div>,
+}))
+
+vi.mock('@/app/components/header/account-setting/members-page', () => ({
+  default: () => <div data-testid="members-page">Members Page</div>,
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page', () => ({
+  default: ({ searchText }: { searchText: string }) => (
+    <div data-testid="provider-page">
+      {`provider-search:${searchText}`}
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/header/account-setting/menu-dialog', () => ({
+  default: function MockMenuDialog({
+    children,
+    onClose,
+    show,
+  }: {
+    children: ReactNode
+    onClose: () => void
+    show?: boolean
+  }) {
+    useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Escape')
+          onClose()
+      }
+
+      document.addEventListener('keydown', handleKeyDown)
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown)
+      }
+    }, [onClose])
+
+    if (!show)
+      return null
+
+    return <div role="dialog">{children}</div>
+  },
+}))
+
+const baseAppContextValue: AppContextValue = {
+  userProfile: {
+    id: '1',
+    name: 'Test User',
+    email: 'test@example.com',
+    avatar: '',
+    avatar_url: '',
+    is_password_set: false,
+  },
+  mutateUserProfile: vi.fn(),
+  currentWorkspace: {
+    id: '1',
+    name: 'Workspace',
+    plan: '',
+    status: '',
+    created_at: 0,
+    role: 'owner',
+    providers: [],
+    trial_credits: 0,
+    trial_credits_used: 0,
+    next_credit_reset_date: 0,
+  },
+  isCurrentWorkspaceManager: true,
+  isCurrentWorkspaceOwner: true,
+  isCurrentWorkspaceEditor: true,
+  isCurrentWorkspaceDatasetOperator: false,
+  mutateCurrentWorkspace: vi.fn(),
+  langGeniusVersionInfo: {
+    current_env: 'testing',
+    current_version: '0.1.0',
+    latest_version: '0.1.0',
+    release_date: '',
+    release_notes: '',
+    version: '0.1.0',
+    can_auto_update: false,
+  },
+  useSelector: vi.fn(),
+  isLoadingCurrentWorkspace: false,
+  isValidatingCurrentWorkspace: false,
+}
+
+describe('AccountSetting', () => {
+  const mockOnCancel = vi.fn()
+  const mockOnTabChange = vi.fn()
+
+  const renderAccountSetting = (props: Partial<ComponentProps<typeof AccountSetting>> = {}) => {
+    const queryClient = new QueryClient()
+    const mergedProps: ComponentProps<typeof AccountSetting> = {
+      onCancel: mockOnCancel,
+      ...props,
+    }
+
+    const view = render(
+      <QueryClientProvider client={queryClient}>
+        <AccountSetting {...mergedProps} />
+      </QueryClientProvider>,
+    )
+
+    return {
+      ...view,
+      rerenderAccountSetting(nextProps: Partial<ComponentProps<typeof AccountSetting>>) {
+        view.rerender(
+          <QueryClientProvider client={queryClient}>
+            <AccountSetting {...mergedProps} {...nextProps} />
+          </QueryClientProvider>,
+        )
+      },
+    }
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useProviderContext).mockReturnValue({
+      ...baseProviderContextValue,
+      enableBilling: true,
+      enableReplaceWebAppLogo: true,
+    })
+    vi.mocked(useAppContext).mockReturnValue(baseAppContextValue)
+    vi.mocked(useBreakpoints).mockReturnValue(MediaType.pc)
+  })
+
+  describe('Rendering', () => {
+    it('should render the sidebar with correct menu items', () => {
+      renderAccountSetting()
+
+      expect(screen.getByText('common.userProfile.settings')).toBeInTheDocument()
+      expect(screen.getByTitle('common.settings.provider')).toBeInTheDocument()
+      expect(screen.getByTitle('common.settings.members')).toBeInTheDocument()
+      expect(screen.getByTitle('common.settings.billing')).toBeInTheDocument()
+      expect(screen.getByTitle('common.settings.dataSource')).toBeInTheDocument()
+      expect(screen.getByTitle('common.settings.apiBasedExtension')).toBeInTheDocument()
+      expect(screen.getByTitle('custom.custom')).toBeInTheDocument()
+      expect(screen.getByTitle('common.settings.language')).toBeInTheDocument()
+      expect(screen.getByTestId('members-page')).toBeInTheDocument()
+    })
+
+    it('should respect the activeTab prop', () => {
+      renderAccountSetting({ activeTab: ACCOUNT_SETTING_TAB.DATA_SOURCE })
+
+      expect(screen.getByTestId('data-source-page')).toBeInTheDocument()
+    })
+
+    it('should sync the rendered page when activeTab changes', async () => {
+      const { rerenderAccountSetting } = renderAccountSetting({
+        activeTab: ACCOUNT_SETTING_TAB.DATA_SOURCE,
+      })
+
+      expect(screen.getByTestId('data-source-page')).toBeInTheDocument()
+
+      rerenderAccountSetting({
+        activeTab: ACCOUNT_SETTING_TAB.CUSTOM,
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('custom-page')).toBeInTheDocument()
+      })
+    })
+
+    it('should hide sidebar labels on mobile', () => {
+      vi.mocked(useBreakpoints).mockReturnValue(MediaType.mobile)
+
+      renderAccountSetting()
+
+      expect(screen.queryByText('common.settings.provider')).not.toBeInTheDocument()
+    })
+
+    it('should filter items for dataset operator', () => {
+      vi.mocked(useAppContext).mockReturnValue({
+        ...baseAppContextValue,
+        isCurrentWorkspaceDatasetOperator: true,
+      })
+
+      renderAccountSetting()
+
+      expect(screen.queryByTitle('common.settings.provider')).not.toBeInTheDocument()
+      expect(screen.queryByTitle('common.settings.members')).not.toBeInTheDocument()
+      expect(screen.getByTitle('common.settings.language')).toBeInTheDocument()
+    })
+
+    it('should hide billing and custom tabs when disabled', () => {
+      vi.mocked(useProviderContext).mockReturnValue({
+        ...baseProviderContextValue,
+        enableBilling: false,
+        enableReplaceWebAppLogo: false,
+      })
+
+      renderAccountSetting()
+
+      expect(screen.queryByTitle('common.settings.billing')).not.toBeInTheDocument()
+      expect(screen.queryByTitle('custom.custom')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Tab Navigation', () => {
+    it('should change active tab when clicking on a menu item', async () => {
+      const user = userEvent.setup()
+
+      renderAccountSetting({ onTabChange: mockOnTabChange })
+
+      await user.click(screen.getByTitle('common.settings.provider'))
+
+      expect(mockOnTabChange).toHaveBeenCalledWith(ACCOUNT_SETTING_TAB.PROVIDER)
+      expect(screen.getByTestId('provider-page')).toBeInTheDocument()
+    })
+
+    it.each([
+      ['common.settings.billing', 'billing-page'],
+      ['common.settings.dataSource', 'data-source-page'],
+      ['common.settings.apiBasedExtension', 'api-based-extension-page'],
+      ['custom.custom', 'custom-page'],
+      ['common.settings.language', 'language-page'],
+      ['common.settings.members', 'members-page'],
+    ])('should render the "%s" page when its sidebar item is selected', async (menuTitle, pageTestId) => {
+      const user = userEvent.setup()
+
+      renderAccountSetting()
+
+      await user.click(screen.getByTitle(menuTitle))
+
+      expect(screen.getByTestId(pageTestId)).toBeInTheDocument()
+    })
+  })
+
+  describe('Interactions', () => {
+    it('should call onCancel when clicking the close button', async () => {
+      const user = userEvent.setup()
+
+      renderAccountSetting()
+
+      const closeControls = screen.getByText('ESC').parentElement
+
+      expect(closeControls).not.toBeNull()
+      if (!closeControls)
+        throw new Error('Close controls are missing')
+
+      await user.click(within(closeControls).getByRole('button'))
+
+      expect(mockOnCancel).toHaveBeenCalled()
+    })
+
+    it('should call onCancel when pressing Escape key', () => {
+      renderAccountSetting()
+
+      fireEvent.keyDown(document, { key: 'Escape' })
+
+      expect(mockOnCancel).toHaveBeenCalled()
+    })
+
+    it('should update search value in the provider tab', async () => {
+      const user = userEvent.setup()
+
+      renderAccountSetting()
+
+      await user.click(screen.getByTitle('common.settings.provider'))
+
+      const input = screen.getByRole('textbox')
+      await user.type(input, 'test-search')
+
+      expect(input).toHaveValue('test-search')
+      expect(screen.getByText('provider-search:test-search')).toBeInTheDocument()
+    })
+
+    it('should handle scroll event in panel', () => {
+      renderAccountSetting()
+
+      const scrollContainer = screen.getByRole('dialog').querySelector('.overflow-y-auto')
+
+      expect(scrollContainer).toBeInTheDocument()
+      if (scrollContainer) {
+        fireEvent.scroll(scrollContainer, { target: { scrollTop: 100 } })
+        expect(scrollContainer).toHaveClass('overflow-y-auto')
+
+        fireEvent.scroll(scrollContainer, { target: { scrollTop: 0 } })
+      }
+    })
+  })
+})

web/app/components/header/account-setting/__tests__/menu-dialog.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import MenuDialog from './menu-dialog'
+import MenuDialog from '../menu-dialog'
 
 describe('MenuDialog', () => {
   beforeEach(() => {

web/app/components/header/account-setting/api-based-extension-page/__tests__/empty.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import Empty from './empty'
+import Empty from '../empty'
 
 describe('Empty State', () => {
   describe('Rendering', () => {

web/app/components/header/account-setting/api-based-extension-page/__tests__/index.spec.tsx

@@ -4,7 +4,7 @@ import type { ApiBasedExtension } from '@/models/common'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { useModalContext } from '@/context/modal-context'
 import { useApiBasedExtensions } from '@/service/use-common'
-import ApiBasedExtensionPage from './index'
+import ApiBasedExtensionPage from '../index'
 
 vi.mock('@/service/use-common', () => ({
   useApiBasedExtensions: vi.fn(),

web/app/components/header/account-setting/api-based-extension-page/__tests__/item.spec.tsx

@@ -5,7 +5,7 @@ import { fireEvent, render, screen, waitFor, within } from '@testing-library/rea
 import * as reactI18next from 'react-i18next'
 import { useModalContext } from '@/context/modal-context'
 import { deleteApiBasedExtension } from '@/service/common'
-import Item from './item'
+import Item from '../item'
 
 // Mock dependencies
 vi.mock('@/context/modal-context', () => ({

web/app/components/header/account-setting/api-based-extension-page/__tests__/modal.spec.tsx

@@ -5,7 +5,7 @@ import * as reactI18next from 'react-i18next'
 import { ToastContext } from '@/app/components/base/toast/context'
 import { useDocLink } from '@/context/i18n'
 import { addApiBasedExtension, updateApiBasedExtension } from '@/service/common'
-import ApiBasedExtensionModal from './modal'
+import ApiBasedExtensionModal from '../modal'
 
 vi.mock('@/context/i18n', () => ({
   useDocLink: vi.fn(),

web/app/components/header/account-setting/api-based-extension-page/__tests__/selector.spec.tsx

@@ -5,7 +5,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
 import { useApiBasedExtensions } from '@/service/use-common'
-import ApiBasedExtensionSelector from './selector'
+import ApiBasedExtensionSelector from '../selector'
 
 vi.mock('@/context/modal-context', () => ({
   useModalContext: vi.fn(),

web/app/components/header/account-setting/collapse/__tests__/index.spec.tsx

@@ -1,6 +1,6 @@
-import type { IItem } from './index'
+import type { IItem } from '../index'
 import { fireEvent, render, screen } from '@testing-library/react'
-import Collapse from './index'
+import Collapse from '../index'
 
 describe('Collapse', () => {
   const mockItems: IItem[] = [

web/app/components/header/account-setting/data-source-page-new/__tests__/card.spec.tsx

@@ -1,4 +1,4 @@
-import type { DataSourceAuth } from './types'
+import type { DataSourceAuth } from '../types'
 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import { usePluginAuthAction } from '@/app/components/plugins/plugin-auth'
@@ -8,8 +8,8 @@ import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import { useGetDataSourceOAuthUrl, useInvalidDataSourceAuth, useInvalidDataSourceListAuth, useInvalidDefaultDataSourceListAuth } from '@/service/use-datasource'
 import { useInvalidDataSourceList } from '@/service/use-pipeline'
-import Card from './card'
-import { useDataSourceAuthUpdate } from './hooks'
+import Card from '../card'
+import { useDataSourceAuthUpdate } from '../hooks'
 
 vi.mock('@/app/components/plugins/plugin-auth', () => ({
   ApiKeyModal: vi.fn(({ onClose, onUpdate, onRemove, disabled, editValues }: { onClose: () => void, onUpdate: () => void, onRemove: () => void, disabled: boolean, editValues: Record<string, unknown> }) => (
@@ -43,7 +43,7 @@ vi.mock('@/service/use-datasource', () => ({
   useInvalidDefaultDataSourceListAuth: vi.fn(() => vi.fn()),
 }))
 
-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
   useDataSourceAuthUpdate: vi.fn(),
 }))
 

web/app/components/header/account-setting/data-source-page-new/__tests__/configure.spec.tsx

@@ -1,10 +1,10 @@
-import type { DataSourceAuth } from './types'
+import type { DataSourceAuth } from '../types'
 import type { FormSchema } from '@/app/components/base/form/types'
 import type { AddApiKeyButtonProps, AddOAuthButtonProps, PluginPayload } from '@/app/components/plugins/plugin-auth/types'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import { AuthCategory } from '@/app/components/plugins/plugin-auth/types'
-import Configure from './configure'
+import Configure from '../configure'
 
 /**
  * Configure Component Tests

web/app/components/header/account-setting/data-source-page-new/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import type { UseQueryResult } from '@tanstack/react-query'
-import type { DataSourceAuth } from './types'
+import type { DataSourceAuth } from '../types'
 import { render, screen } from '@testing-library/react'
 import { useTheme } from 'next-themes'
 import { usePluginAuthAction } from '@/app/components/plugins/plugin-auth'
@@ -7,8 +7,8 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { useGetDataSourceListAuth, useGetDataSourceOAuthUrl } from '@/service/use-datasource'
 import { defaultSystemFeatures } from '@/types/feature'
-import { useDataSourceAuthUpdate, useMarketplaceAllPlugins } from './hooks'
-import DataSourcePage from './index'
+import { useDataSourceAuthUpdate, useMarketplaceAllPlugins } from '../hooks'
+import DataSourcePage from '../index'
 
 /**
  * DataSourcePage Component Tests
@@ -33,7 +33,7 @@ vi.mock('@/service/use-datasource', () => ({
   useGetDataSourceOAuthUrl: vi.fn(),
 }))
 
-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
   useDataSourceAuthUpdate: vi.fn(),
   useMarketplaceAllPlugins: vi.fn(),
 }))

web/app/components/header/account-setting/data-source-page-new/__tests__/install-from-marketplace.spec.tsx

@@ -1,10 +1,10 @@
-import type { DataSourceAuth } from './types'
+import type { DataSourceAuth } from '../types'
 import type { Plugin } from '@/app/components/plugins/types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { useTheme } from 'next-themes'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
-import { useMarketplaceAllPlugins } from './hooks'
-import InstallFromMarketplace from './install-from-marketplace'
+import { useMarketplaceAllPlugins } from '../hooks'
+import InstallFromMarketplace from '../install-from-marketplace'
 
 /**
  * InstallFromMarketplace Component Tests
@@ -54,7 +54,7 @@ vi.mock('@/app/components/plugins/provider-card', () => ({
   ),
 }))
 
-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
   useMarketplaceAllPlugins: vi.fn(),
 }))
 

web/app/components/header/account-setting/data-source-page-new/__tests__/item.spec.tsx

@@ -1,7 +1,7 @@
-import type { DataSourceCredential } from './types'
+import type { DataSourceCredential } from '../types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
-import Item from './item'
+import Item from '../item'
 
 /**
  * Item Component Tests

web/app/components/header/account-setting/data-source-page-new/__tests__/operator.spec.tsx

@@ -1,7 +1,7 @@
-import type { DataSourceCredential } from './types'
+import type { DataSourceCredential } from '../types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
-import Operator from './operator'
+import Operator from '../operator'
 
 /**
  * Operator Component Tests

web/app/components/header/account-setting/data-source-page-new/hooks/__tests__/use-data-source-auth-update.spec.ts

@@ -5,7 +5,7 @@ import {
   useInvalidDefaultDataSourceListAuth,
 } from '@/service/use-datasource'
 import { useInvalidDataSourceList } from '@/service/use-pipeline'
-import { useDataSourceAuthUpdate } from './use-data-source-auth-update'
+import { useDataSourceAuthUpdate } from '../use-data-source-auth-update'
 
 /**
  * useDataSourceAuthUpdate Hook Tests

web/app/components/header/account-setting/data-source-page-new/hooks/__tests__/use-marketplace-all-plugins.spec.ts

@@ -5,7 +5,7 @@ import {
   useMarketplacePluginsByCollectionId,
 } from '@/app/components/plugins/marketplace/hooks'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
-import { useMarketplaceAllPlugins } from './use-marketplace-all-plugins'
+import { useMarketplaceAllPlugins } from '../use-marketplace-all-plugins'
 
 /**
  * useMarketplaceAllPlugins Hook Tests

web/app/components/header/account-setting/data-source-page/data-source-notion/__tests__/index.spec.tsx

@@ -4,7 +4,7 @@ import type { DataSourceNotion as TDataSourceNotion } from '@/models/common'
 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { useAppContext } from '@/context/app-context'
 import { useDataSourceIntegrates, useInvalidDataSourceIntegrates, useNotionConnection } from '@/service/use-common'
-import DataSourceNotion from './index'
+import DataSourceNotion from '../index'
 
 /**
  * DataSourceNotion Component Tests

web/app/components/header/account-setting/data-source-page/data-source-notion/operate/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common'
 import { useInvalidDataSourceIntegrates } from '@/service/use-common'
-import Operate from './index'
+import Operate from '../index'
 
 /**
  * Operate Component (Notion) Tests

web/app/components/header/account-setting/data-source-page/data-source-website/__tests__/config-firecrawl-modal.spec.tsx

@@ -3,7 +3,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { createDataSourceApiKeyBinding } from '@/service/datasets'
-import ConfigFirecrawlModal from './config-firecrawl-modal'
+import ConfigFirecrawlModal from '../config-firecrawl-modal'
 
 /**
  * ConfigFirecrawlModal Component Tests

web/app/components/header/account-setting/data-source-page/data-source-website/__tests__/config-jina-reader-modal.spec.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'
 
 import { DataSourceProvider } from '@/models/common'
 import { createDataSourceApiKeyBinding } from '@/service/datasets'
-import ConfigJinaReaderModal from './config-jina-reader-modal'
+import ConfigJinaReaderModal from '../config-jina-reader-modal'
 
 /**
  * ConfigJinaReaderModal Component Tests

web/app/components/header/account-setting/data-source-page/data-source-website/__tests__/config-watercrawl-modal.spec.tsx

@@ -3,7 +3,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { createDataSourceApiKeyBinding } from '@/service/datasets'
-import ConfigWatercrawlModal from './config-watercrawl-modal'
+import ConfigWatercrawlModal from '../config-watercrawl-modal'
 
 /**
  * ConfigWatercrawlModal Component Tests

web/app/components/header/account-setting/data-source-page/data-source-website/__tests__/index.spec.tsx

@@ -5,7 +5,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { useAppContext } from '@/context/app-context'
 import { DataSourceProvider } from '@/models/common'
 import { fetchDataSources, removeDataSourceApiKeyBinding } from '@/service/datasets'
-import DataSourceWebsite from './index'
+import DataSourceWebsite from '../index'
 
 /**
  * DataSourceWebsite Component Tests

web/app/components/header/account-setting/data-source-page/panel/__tests__/config-item.spec.tsx

@@ -1,7 +1,7 @@
-import type { ConfigItemType } from './config-item'
+import type { ConfigItemType } from '../config-item'
 import { fireEvent, render, screen } from '@testing-library/react'
-import ConfigItem from './config-item'
-import { DataSourceType } from './types'
+import ConfigItem from '../config-item'
+import { DataSourceType } from '../types'
 
 /**
  * ConfigItem Component Tests
@@ -9,7 +9,7 @@ import { DataSourceType } from './types'
  */
 
 // Mock Operate component to isolate ConfigItem unit tests.
-vi.mock('../data-source-notion/operate', () => ({
+vi.mock('../../data-source-notion/operate', () => ({
   default: ({ onAuthAgain, payload }: { onAuthAgain: () => void, payload: { id: string, total: number } }) => (
     <div data-testid="mock-operate">
       <button onClick={onAuthAgain} data-testid="operate-auth-btn">Auth Again</button>

web/app/components/header/account-setting/data-source-page/panel/__tests__/index.spec.tsx

@@ -1,15 +1,15 @@
-import type { ConfigItemType } from './config-item'
+import type { ConfigItemType } from '../config-item'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { DataSourceProvider } from '@/models/common'
-import Panel from './index'
-import { DataSourceType } from './types'
+import Panel from '../index'
+import { DataSourceType } from '../types'
 
 /**
  * Panel Component Tests
  * Tests layout, conditional rendering, and interactions for data source panels (Notion and Website).
  */
 
-vi.mock('../data-source-notion/operate', () => ({
+vi.mock('../../data-source-notion/operate', () => ({
   default: () => <div data-testid="mock-operate" />,
 }))
 

web/app/components/header/account-setting/index.spec.tsx

@@ -1,334 +0,0 @@
-import type { AppContextValue } from '@/context/app-context'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { useAppContext } from '@/context/app-context'
-import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
-import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import { ACCOUNT_SETTING_TAB } from './constants'
-import AccountSetting from './index'
-
-vi.mock('@/context/provider-context', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/context/provider-context')>()
-  return {
-    ...actual,
-    useProviderContext: vi.fn(),
-  }
-})
-
-vi.mock('@/context/app-context', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/context/app-context')>()
-  return {
-    ...actual,
-    useAppContext: vi.fn(),
-  }
-})
-
-vi.mock('next/navigation', () => ({
-  useRouter: vi.fn(() => ({
-    push: vi.fn(),
-    replace: vi.fn(),
-    prefetch: vi.fn(),
-  })),
-  usePathname: vi.fn(() => '/'),
-  useParams: vi.fn(() => ({})),
-  useSearchParams: vi.fn(() => ({ get: vi.fn() })),
-}))
-
-vi.mock('@/hooks/use-breakpoints', () => ({
-  MediaType: {
-    mobile: 'mobile',
-    tablet: 'tablet',
-    pc: 'pc',
-  },
-  default: vi.fn(),
-}))
-
-vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
-  useDefaultModel: vi.fn(() => ({ data: null, isLoading: false })),
-  useUpdateDefaultModel: vi.fn(() => ({ trigger: vi.fn() })),
-  useUpdateModelList: vi.fn(() => vi.fn()),
-  useModelList: vi.fn(() => ({ data: [], isLoading: false })),
-  useSystemDefaultModelAndModelList: vi.fn(() => [null, vi.fn()]),
-}))
-
-vi.mock('@/service/use-datasource', () => ({
-  useGetDataSourceListAuth: vi.fn(() => ({ data: { result: [] } })),
-}))
-
-vi.mock('@/service/use-common', () => ({
-  useApiBasedExtensions: vi.fn(() => ({ data: [], isPending: false })),
-  useMembers: vi.fn(() => ({ data: { accounts: [] }, refetch: vi.fn() })),
-  useProviderContext: vi.fn(),
-}))
-
-const baseAppContextValue: AppContextValue = {
-  userProfile: {
-    id: '1',
-    name: 'Test User',
-    email: 'test@example.com',
-    avatar: '',
-    avatar_url: '',
-    is_password_set: false,
-  },
-  mutateUserProfile: vi.fn(),
-  currentWorkspace: {
-    id: '1',
-    name: 'Workspace',
-    plan: '',
-    status: '',
-    created_at: 0,
-    role: 'owner',
-    providers: [],
-    trial_credits: 0,
-    trial_credits_used: 0,
-    next_credit_reset_date: 0,
-  },
-  isCurrentWorkspaceManager: true,
-  isCurrentWorkspaceOwner: true,
-  isCurrentWorkspaceEditor: true,
-  isCurrentWorkspaceDatasetOperator: false,
-  mutateCurrentWorkspace: vi.fn(),
-  langGeniusVersionInfo: {
-    current_env: 'testing',
-    current_version: '0.1.0',
-    latest_version: '0.1.0',
-    release_date: '',
-    release_notes: '',
-    version: '0.1.0',
-    can_auto_update: false,
-  },
-  useSelector: vi.fn(),
-  isLoadingCurrentWorkspace: false,
-  isValidatingCurrentWorkspace: false,
-}
-
-describe('AccountSetting', () => {
-  const mockOnCancel = vi.fn()
-  const mockOnTabChange = vi.fn()
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.mocked(useProviderContext).mockReturnValue({
-      ...baseProviderContextValue,
-      enableBilling: true,
-      enableReplaceWebAppLogo: true,
-    })
-    vi.mocked(useAppContext).mockReturnValue(baseAppContextValue)
-    vi.mocked(useBreakpoints).mockReturnValue(MediaType.pc)
-  })
-
-  describe('Rendering', () => {
-    it('should render the sidebar with correct menu items', () => {
-      // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
-
-      // Assert
-      expect(screen.getByText('common.userProfile.settings')).toBeInTheDocument()
-      expect(screen.getByText('common.settings.provider')).toBeInTheDocument()
-      expect(screen.getAllByText('common.settings.members').length).toBeGreaterThan(0)
-      expect(screen.getByText('common.settings.billing')).toBeInTheDocument()
-      expect(screen.getByText('common.settings.dataSource')).toBeInTheDocument()
-      expect(screen.getByText('common.settings.apiBasedExtension')).toBeInTheDocument()
-      expect(screen.getByText('custom.custom')).toBeInTheDocument()
-      expect(screen.getAllByText('common.settings.language').length).toBeGreaterThan(0)
-    })
-
-    it('should respect the activeTab prop', () => {
-      // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} activeTab={ACCOUNT_SETTING_TAB.DATA_SOURCE} />
-        </QueryClientProvider>,
-      )
-
-      // Assert
-      // Check that the active item title is Data Source
-      const titles = screen.getAllByText('common.settings.dataSource')
-      // One in sidebar, one in header.
-      expect(titles.length).toBeGreaterThan(1)
-    })
-
-    it('should hide sidebar labels on mobile', () => {
-      // Arrange
-      vi.mocked(useBreakpoints).mockReturnValue(MediaType.mobile)
-
-      // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
-
-      // Assert
-      // On mobile, the labels should not be rendered as per the implementation
-      expect(screen.queryByText('common.settings.provider')).not.toBeInTheDocument()
-    })
-
-    it('should filter items for dataset operator', () => {
-      // Arrange
-      vi.mocked(useAppContext).mockReturnValue({
-        ...baseAppContextValue,
-        isCurrentWorkspaceDatasetOperator: true,
-      })
-
-      // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
-
-      // Assert
-      expect(screen.queryByText('common.settings.provider')).not.toBeInTheDocument()
-      expect(screen.queryByText('common.settings.members')).not.toBeInTheDocument()
-      expect(screen.getByText('common.settings.language')).toBeInTheDocument()
-    })
-
-    it('should hide billing and custom tabs when disabled', () => {
-      // Arrange
-      vi.mocked(useProviderContext).mockReturnValue({
-        ...baseProviderContextValue,
-        enableBilling: false,
-        enableReplaceWebAppLogo: false,
-      })
-
-      // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
-
-      // Assert
-      expect(screen.queryByText('common.settings.billing')).not.toBeInTheDocument()
-      expect(screen.queryByText('custom.custom')).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Tab Navigation', () => {
-    it('should change active tab when clicking on menu item', () => {
-      // Arrange
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} onTabChange={mockOnTabChange} />
-        </QueryClientProvider>,
-      )
-
-      // Act
-      fireEvent.click(screen.getByText('common.settings.provider'))
-
-      // Assert
-      expect(mockOnTabChange).toHaveBeenCalledWith(ACCOUNT_SETTING_TAB.PROVIDER)
-      // Check for content from ModelProviderPage
-      expect(screen.getByText('common.modelProvider.models')).toBeInTheDocument()
-    })
-
-    it('should navigate through various tabs and show correct details', () => {
-      // Act & Assert
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
-
-      // Billing
-      fireEvent.click(screen.getByText('common.settings.billing'))
-      // Billing Page renders plansCommon.plan if data is loaded, or generic text.
-      // Checking for title in header which is always there
-      expect(screen.getAllByText('common.settings.billing').length).toBeGreaterThan(1)
-
-      // Data Source
-      fireEvent.click(screen.getByText('common.settings.dataSource'))
-      expect(screen.getAllByText('common.settings.dataSource').length).toBeGreaterThan(1)
-
-      // API Based Extension
-      fireEvent.click(screen.getByText('common.settings.apiBasedExtension'))
-      expect(screen.getAllByText('common.settings.apiBasedExtension').length).toBeGreaterThan(1)
-
-      // Custom
-      fireEvent.click(screen.getByText('custom.custom'))
-      // Custom Page uses 'custom.custom' key as well.
-      expect(screen.getAllByText('custom.custom').length).toBeGreaterThan(1)
-
-      // Language
-      fireEvent.click(screen.getAllByText('common.settings.language')[0])
-      expect(screen.getAllByText('common.settings.language').length).toBeGreaterThan(1)
-
-      // Members
-      fireEvent.click(screen.getAllByText('common.settings.members')[0])
-      expect(screen.getAllByText('common.settings.members').length).toBeGreaterThan(1)
-    })
-  })
-
-  describe('Interactions', () => {
-    it('should call onCancel when clicking close button', () => {
-      // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
-      const buttons = screen.getAllByRole('button')
-      fireEvent.click(buttons[0])
-
-      // Assert
-      expect(mockOnCancel).toHaveBeenCalled()
-    })
-
-    it('should call onCancel when pressing Escape key', () => {
-      // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
-      fireEvent.keyDown(document, { key: 'Escape' })
-
-      // Assert
-      expect(mockOnCancel).toHaveBeenCalled()
-    })
-
-    it('should update search value in provider tab', () => {
-      // Arrange
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
-      fireEvent.click(screen.getByText('common.settings.provider'))
-
-      // Act
-      const input = screen.getByRole('textbox')
-      fireEvent.change(input, { target: { value: 'test-search' } })
-
-      // Assert
-      expect(input).toHaveValue('test-search')
-      expect(screen.getByText('common.modelProvider.models')).toBeInTheDocument()
-    })
-
-    it('should handle scroll event in panel', () => {
-      // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
-      const scrollContainer = screen.getByRole('dialog').querySelector('.overflow-y-auto')
-
-      // Assert
-      expect(scrollContainer).toBeInTheDocument()
-      if (scrollContainer) {
-        // Scroll down
-        fireEvent.scroll(scrollContainer, { target: { scrollTop: 100 } })
-        expect(scrollContainer).toHaveClass('overflow-y-auto')
-
-        // Scroll back up
-        fireEvent.scroll(scrollContainer, { target: { scrollTop: 0 } })
-      }
-    })
-  })
-})

web/app/components/header/account-setting/key-validator/__tests__/KeyInput.spec.tsx

@@ -1,8 +1,8 @@
 import type { ComponentProps } from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { useState } from 'react'
-import { ValidatedStatus } from './declarations'
-import KeyInput from './KeyInput'
+import { ValidatedStatus } from '../declarations'
+import KeyInput from '../KeyInput'
 
 type Props = ComponentProps<typeof KeyInput>
 

web/app/components/header/account-setting/key-validator/__tests__/Operate.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import Operate from './Operate'
+import Operate from '../Operate'
 
 describe('Operate', () => {
   it('should render cancel and save when editing is open', () => {

web/app/components/header/account-setting/key-validator/__tests__/ValidateStatus.spec.tsx

@@ -4,7 +4,7 @@ import {
   ValidatedErrorMessage,
   ValidatedSuccessIcon,
   ValidatingTip,
-} from './ValidateStatus'
+} from '../ValidateStatus'
 
 describe('ValidateStatus', () => {
   beforeEach(() => {

web/app/components/header/account-setting/key-validator/__tests__/declarations.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { ValidatedStatus } from './declarations'
+import { ValidatedStatus } from '../declarations'
 
 describe('declarations', () => {
   describe('ValidatedStatus', () => {

web/app/components/header/account-setting/key-validator/__tests__/hooks.spec.ts

@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react'
-import { ValidatedStatus } from './declarations'
-import { useValidate } from './hooks'
+import { ValidatedStatus } from '../declarations'
+import { useValidate } from '../hooks'
 
 describe('useValidate', () => {
   beforeEach(() => {

web/app/components/header/account-setting/key-validator/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'react'
-import type { Form } from './declarations'
+import type { Form } from '../declarations'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import KeyValidator from './index'
+import KeyValidator from '../index'
 
 let subscriptionCallback: ((value: string) => void) | null = null
 const mockEmit = vi.fn((value: string) => {
@@ -22,7 +22,7 @@ vi.mock('@/context/event-emitter', () => ({
 const mockValidate = vi.fn()
 const mockUseValidate = vi.fn()
 
-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
   useValidate: (...args: unknown[]) => mockUseValidate(...args),
 }))
 

web/app/components/header/account-setting/language-page/__tests__/index.spec.tsx

@@ -4,7 +4,7 @@ import { ToastProvider } from '@/app/components/base/toast'
 import { languages } from '@/i18n-config/language'
 import { updateUserProfile } from '@/service/common'
 import { timezones } from '@/utils/timezone'
-import LanguagePage from './index'
+import LanguagePage from '../index'
 
 const mockRefresh = vi.fn()
 const mockMutateUserProfile = vi.fn()

web/app/components/header/account-setting/members-page/__tests__/index.spec.tsx

@@ -10,7 +10,7 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useProviderContext } from '@/context/provider-context'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 import { useMembers } from '@/service/use-common'
-import MembersPage from './index'
+import MembersPage from '../index'
 
 vi.mock('@/context/app-context')
 vi.mock('@/context/global-public-context')
@@ -18,7 +18,7 @@ vi.mock('@/context/provider-context')
 vi.mock('@/hooks/use-format-time-from-now')
 vi.mock('@/service/use-common')
 
-vi.mock('./edit-workspace-modal', () => ({
+vi.mock('../edit-workspace-modal', () => ({
   default: ({ onCancel }: { onCancel: () => void }) => (
     <div>
       <div>Edit Workspace Modal</div>
@@ -26,12 +26,12 @@ vi.mock('./edit-workspace-modal', () => ({
     </div>
   ),
 }))
-vi.mock('./invite-button', () => ({
+vi.mock('../invite-button', () => ({
   default: ({ onClick, disabled }: { onClick: () => void, disabled: boolean }) => (
     <button onClick={onClick} disabled={disabled}>Invite</button>
   ),
 }))
-vi.mock('./invite-modal', () => ({
+vi.mock('../invite-modal', () => ({
   default: ({ onCancel, onSend }: { onCancel: () => void, onSend: (results: Array<{ email: string, status: 'success', url: string }>) => void }) => (
     <div>
       <div>Invite Modal</div>
@@ -40,7 +40,7 @@ vi.mock('./invite-modal', () => ({
     </div>
   ),
 }))
-vi.mock('./invited-modal', () => ({
+vi.mock('../invited-modal', () => ({
   default: ({ onCancel }: { onCancel: () => void }) => (
     <div>
       <div>Invited Modal</div>
@@ -48,13 +48,13 @@ vi.mock('./invited-modal', () => ({
     </div>
   ),
 }))
-vi.mock('./operation', () => ({
+vi.mock('../operation', () => ({
   default: () => <div>Member Operation</div>,
 }))
-vi.mock('./operation/transfer-ownership', () => ({
+vi.mock('../operation/transfer-ownership', () => ({
   default: ({ onOperate }: { onOperate: () => void }) => <button onClick={onOperate}>Transfer ownership</button>,
 }))
-vi.mock('./transfer-ownership-modal', () => ({
+vi.mock('../transfer-ownership-modal', () => ({
   default: ({ onClose }: { onClose: () => void }) => (
     <div>
       <div>Transfer Ownership Modal</div>

web/app/components/header/account-setting/members-page/__tests__/invite-button.spec.tsx

@@ -5,7 +5,7 @@ import { vi } from 'vitest'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useWorkspacePermissions } from '@/service/use-workspace'
-import InviteButton from './invite-button'
+import InviteButton from '../invite-button'
 
 vi.mock('@/context/app-context')
 vi.mock('@/context/global-public-context')

web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx

@@ -6,7 +6,7 @@ import { vi } from 'vitest'
 import { ToastContext } from '@/app/components/base/toast/context'
 import { useAppContext } from '@/context/app-context'
 import { updateWorkspaceInfo } from '@/service/common'
-import EditWorkspaceModal from './index'
+import EditWorkspaceModal from '../index'
 
 vi.mock('@/context/app-context')
 vi.mock('@/service/common')

web/app/components/header/account-setting/members-page/invite-modal/__tests__/index.spec.tsx

@@ -5,7 +5,7 @@ import { vi } from 'vitest'
 import { ToastContext } from '@/app/components/base/toast/context'
 import { useProviderContextSelector } from '@/context/provider-context'
 import { inviteMember } from '@/service/common'
-import InviteModal from './index'
+import InviteModal from '../index'
 
 vi.mock('@/context/provider-context', () => ({
   useProviderContextSelector: vi.fn(),

web/app/components/header/account-setting/members-page/invite-modal/__tests__/role-selector.spec.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react'
 import { vi } from 'vitest'
 import { createMockProviderContextValue } from '@/__mocks__/provider-context'
 import { useProviderContext } from '@/context/provider-context'
-import RoleSelector from './role-selector'
+import RoleSelector from '../role-selector'
 
 vi.mock('@/context/provider-context')
 

web/app/components/header/account-setting/members-page/invited-modal/__tests__/index.spec.tsx

@@ -1,6 +1,6 @@
 import type { InvitationResult } from '@/models/common'
 import { render, screen } from '@testing-library/react'
-import InvitedModal from './index'
+import InvitedModal from '../index'
 
 const mockConfigState = vi.hoisted(() => ({ isCeEdition: true }))
 

web/app/components/header/account-setting/members-page/invited-modal/__tests__/invitation-link.spec.tsx

@@ -1,7 +1,7 @@
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import copy from 'copy-to-clipboard'
-import InvitationLink from './invitation-link'
+import InvitationLink from '../invitation-link'
 
 vi.mock('copy-to-clipboard')
 

web/app/components/header/account-setting/members-page/operation/__tests__/index.spec.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
 import { ToastContext } from '@/app/components/base/toast/context'
-import Operation from './index'
+import Operation from '../index'
 
 const mockUpdateMemberRole = vi.fn()
 const mockDeleteMemberOrCancelInvitation = vi.fn()

web/app/components/header/account-setting/members-page/operation/__tests__/transfer-ownership.spec.tsx

@@ -6,7 +6,7 @@ import { vi } from 'vitest'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useWorkspacePermissions } from '@/service/use-workspace'
-import TransferOwnership from './transfer-ownership'
+import TransferOwnership from '../transfer-ownership'
 
 vi.mock('@/context/app-context')
 vi.mock('@/context/global-public-context')

web/app/components/header/account-setting/members-page/transfer-ownership-modal/__tests__/index.spec.tsx

@@ -7,13 +7,13 @@ import { ToastContext } from '@/app/components/base/toast/context'
 import { useAppContext } from '@/context/app-context'
 import { ownershipTransfer, sendOwnerEmail, verifyOwnerEmail } from '@/service/common'
 import { useMembers } from '@/service/use-common'
-import TransferOwnershipModal from './index'
+import TransferOwnershipModal from '../index'
 
 vi.mock('@/context/app-context')
 vi.mock('@/service/common')
 vi.mock('@/service/use-common')
 
-vi.mock('./member-selector', () => ({
+vi.mock('../member-selector', () => ({
   default: ({ onSelect }: { onSelect: (id: string) => void }) => (
     <button onClick={() => onSelect('new-owner-id')}>Select member</button>
   ),

web/app/components/header/account-setting/members-page/transfer-ownership-modal/__tests__/member-selector.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
 import { useMembers } from '@/service/use-common'
-import MemberSelector from './member-selector'
+import MemberSelector from '../member-selector'
 
 vi.mock('@/service/use-common')
 

web/app/components/header/account-setting/model-provider-page/__tests__/hooks.spec.ts

@@ -6,7 +6,7 @@ import type {
   DefaultModelResponse,
   Model,
   ModelProvider,
-} from './declarations'
+} from '../declarations'
 import { act, renderHook, waitFor } from '@testing-library/react'
 import { useLocale } from '@/context/i18n'
 import { fetchDefaultModal, fetchModelList, fetchModelProviderCredentials } from '@/service/common'
@@ -18,7 +18,7 @@ import {
   ModelStatusEnum,
   ModelTypeEnum,
   PreferredProviderTypeEnum,
-} from './declarations'
+} from '../declarations'
 import {
   useAnthropicBuyQuota,
   useCurrentProviderAndModel,
@@ -35,8 +35,8 @@ import {
   useTextGenerationCurrentProviderAndModelAndModelList,
   useUpdateModelList,
   useUpdateModelProviders,
-} from './hooks'
-import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
+} from '../hooks'
+import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from '../provider-added-card'
 
 // Mock dependencies
 vi.mock('@tanstack/react-query', () => ({

web/app/components/header/account-setting/model-provider-page/__tests__/index.spec.tsx

@@ -4,8 +4,8 @@ import {
   CurrentSystemQuotaTypeEnum,
   CustomConfigurationStatusEnum,
   QuotaUnitEnum,
-} from './declarations'
-import ModelProviderPage from './index'
+} from '../declarations'
+import ModelProviderPage from '../index'
 
 vi.mock('@/context/app-context', () => ({
   useAppContext: () => ({
@@ -73,23 +73,23 @@ const mockDefaultModelState: {
   isLoading: false,
 }
 
-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
   useDefaultModel: () => mockDefaultModelState,
 }))
 
-vi.mock('./install-from-marketplace', () => ({
+vi.mock('../install-from-marketplace', () => ({
   default: () => <div data-testid="install-from-marketplace" />,
 }))
 
-vi.mock('./provider-added-card', () => ({
+vi.mock('../provider-added-card', () => ({
   default: ({ provider }: { provider: { provider: string } }) => <div data-testid="provider-card">{provider.provider}</div>,
 }))
 
-vi.mock('./provider-added-card/quota-panel', () => ({
+vi.mock('../provider-added-card/quota-panel', () => ({
   default: () => <div data-testid="quota-panel" />,
 }))
 
-vi.mock('./system-model-selector', () => ({
+vi.mock('../system-model-selector', () => ({
   default: () => <div data-testid="system-model-selector" />,
 }))
 

web/app/components/header/account-setting/model-provider-page/__tests__/install-from-marketplace.spec.tsx

@@ -1,10 +1,10 @@
 import type { Mock } from 'vitest'
-import type { ModelProvider } from './declarations'
+import type { ModelProvider } from '../declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
 
 import { describe, expect, it, vi } from 'vitest'
-import { useMarketplaceAllPlugins } from './hooks'
-import InstallFromMarketplace from './install-from-marketplace'
+import { useMarketplaceAllPlugins } from '../hooks'
+import InstallFromMarketplace from '../install-from-marketplace'
 
 // Mock dependencies
 vi.mock('next/link', () => ({
@@ -39,7 +39,7 @@ vi.mock('@/app/components/plugins/provider-card', () => ({
   default: ({ payload }: { payload: { name: string } }) => <div>{payload.name}</div>,
 }))
 
-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
   useMarketplaceAllPlugins: vi.fn(() => ({
     plugins: [],
     isLoading: false,

web/app/components/header/account-setting/model-provider-page/__tests__/utils.spec.ts

@@ -6,12 +6,12 @@ import {
   validateModelLoadBalancingCredentials,
   validateModelProvider,
 } from '@/service/common'
-import { ValidatedStatus } from '../key-validator/declarations'
+import { ValidatedStatus } from '../../key-validator/declarations'
 import {
   ConfigurationMethodEnum,
   FormTypeEnum,
   ModelTypeEnum,
-} from './declarations'
+} from '../declarations'
 import {
   genModelNameFormSchema,
   genModelTypeFormSchema,
@@ -22,7 +22,7 @@ import {
   sizeFormat,
   validateCredentials,
   validateLoadBalancingCredentials,
-} from './utils'
+} from '../utils'
 
 // Mock service/common functions
 vi.mock('@/service/common', () => ({

web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/add-credential-in-load-balancing.spec.tsx

@@ -1,7 +1,7 @@
 import type { CustomModel, ModelCredential, ModelProvider } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { ConfigurationMethodEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import AddCredentialInLoadBalancing from './add-credential-in-load-balancing'
+import AddCredentialInLoadBalancing from '../add-credential-in-load-balancing'
 
 vi.mock('@/app/components/header/account-setting/model-provider-page/model-auth', () => ({
   Authorized: ({
@@ -112,7 +112,7 @@ describe('AddCredentialInLoadBalancing', () => {
     // Must invalidate module cache so the component picks up the new mock
     vi.resetModules()
     try {
-      const { default: AddCredentialLB } = await import('./add-credential-in-load-balancing')
+      const { default: AddCredentialLB } = await import('../add-credential-in-load-balancing')
 
       const { container } = render(
         <AddCredentialLB

web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/add-custom-model.spec.tsx

@@ -1,13 +1,13 @@
 import type { ModelProvider } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import AddCustomModel from './add-custom-model'
+import AddCustomModel from '../add-custom-model'
 
 // Mock hooks
 const mockHandleOpenModalForAddNewCustomModel = vi.fn()
 const mockHandleOpenModalForAddCustomModelToModelList = vi.fn()
 
-vi.mock('./hooks/use-auth', () => ({
+vi.mock('../hooks/use-auth', () => ({
   useAuth: (_provider: unknown, _configMethod: unknown, _fixedFields: unknown, options: { mode: string }) => {
     if (options.mode === 'config-custom-model') {
       return { handleOpenModal: mockHandleOpenModalForAddNewCustomModel }
@@ -20,12 +20,12 @@ vi.mock('./hooks/use-auth', () => ({
 }))
 
 let mockCanAddedModels: { model: string, model_type: string }[] = []
-vi.mock('./hooks/use-custom-models', () => ({
+vi.mock('../hooks/use-custom-models', () => ({
   useCanAddedModels: () => mockCanAddedModels,
 }))
 
 // Mock components
-vi.mock('../model-icon', () => ({
+vi.mock('../../model-icon', () => ({
   default: () => <div data-testid="model-icon" />,
 }))
 

web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/config-model.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import ConfigModel from './config-model'
+import ConfigModel from '../config-model'
 
 // Mock icons
 vi.mock('@remixicon/react', () => ({

web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/config-provider.spec.tsx

@@ -1,15 +1,15 @@
 import type { ModelProvider } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import ConfigProvider from './config-provider'
+import ConfigProvider from '../config-provider'
 
 const mockUseCredentialStatus = vi.fn()
 
-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
   useCredentialStatus: () => mockUseCredentialStatus(),
 }))
 
-vi.mock('./authorized', () => ({
+vi.mock('../authorized', () => ({
   default: ({ renderTrigger }: { renderTrigger: () => React.ReactNode }) => (
     <div>
       {renderTrigger()}

web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/credential-selector.spec.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import CredentialSelector from './credential-selector'
+import CredentialSelector from '../credential-selector'
 
-vi.mock('./authorized/credential-item', () => ({
+vi.mock('../authorized/credential-item', () => ({
   default: ({ credential, onItemClick }: { credential: { credential_name: string }, onItemClick?: (c: unknown) => void }) => (
     <button type="button" onClick={() => onItemClick?.(credential)}>
       {credential.credential_name}

web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/manage-custom-model-credentials.spec.tsx

@@ -1,10 +1,10 @@
 import type { ModelProvider } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { render, screen } from '@testing-library/react'
-import ManageCustomModelCredentials from './manage-custom-model-credentials'
+import ManageCustomModelCredentials from '../manage-custom-model-credentials'
 
 // Mock hooks
 const mockUseCustomModels = vi.fn()
-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
   useCustomModels: () => mockUseCustomModels(),
   useAuth: () => ({
     handleOpenModal: vi.fn(),
@@ -12,14 +12,34 @@ vi.mock('./hooks', () => ({
 }))
 
 // Mock Authorized
-vi.mock('./authorized', () => ({
-  default: ({ renderTrigger, items, popupTitle }: { renderTrigger: (o?: boolean) => React.ReactNode, items: Array<{ selectedCredential?: unknown }>, popupTitle: string }) => (
+vi.mock('../authorized', () => ({
+  default: ({
+    renderTrigger,
+    items,
+    popupTitle,
+  }: {
+    renderTrigger: (o?: boolean) => React.ReactNode
+    items: Array<{
+      model?: { model?: string }
+      selectedCredential?: { credential_id?: string }
+    }>
+    popupTitle: string
+  }) => (
     <div data-testid="authorized-mock">
       <div data-testid="trigger-closed">{renderTrigger()}</div>
       <div data-testid="trigger-open">{renderTrigger(true)}</div>
       <div data-testid="popup-title">{popupTitle}</div>
       <div data-testid="items-count">{items.length}</div>
-      <div data-testid="items-selected">{items.map((it, i) => <span key={i} data-testid={`selected-${i}`}>{it.selectedCredential ? 'has-cred' : 'no-cred'}</span>)}</div>
+      <div data-testid="items-selected">
+        {items.map((item, index) => (
+          <span
+            key={item.model?.model ?? item.selectedCredential?.credential_id ?? `missing-${popupTitle}`}
+            data-testid={`selected-${index}`}
+          >
+            {item.selectedCredential ? 'has-cred' : 'no-cred'}
+          </span>
+        ))}
+      </div>
     </div>
   ),
 }))

web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/switch-credential-in-load-balancing.spec.tsx

@@ -1,10 +1,10 @@
 import type { CustomModel, ModelProvider } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import SwitchCredentialInLoadBalancing from './switch-credential-in-load-balancing'
+import SwitchCredentialInLoadBalancing from '../switch-credential-in-load-balancing'
 
 // Mock components
-vi.mock('./authorized', () => ({
+vi.mock('../authorized', () => ({
   default: ({ renderTrigger, onItemClick, items }: { renderTrigger: () => React.ReactNode, onItemClick: (c: unknown) => void, items: { credentials: unknown[] }[] }) => (
     <div data-testid="authorized-mock">
       <div data-testid="trigger-container" onClick={() => onItemClick(items[0].credentials[0])}>

web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/authorized-item.spec.tsx

@@ -1,13 +1,13 @@
-import type { Credential, CustomModelCredential, ModelProvider } from '../../declarations'
+import type { Credential, CustomModelCredential, ModelProvider } from '../../../declarations'
 import { render, screen } from '@testing-library/react'
-import { ModelTypeEnum } from '../../declarations'
-import { AuthorizedItem } from './authorized-item'
+import { ModelTypeEnum } from '../../../declarations'
+import { AuthorizedItem } from '../authorized-item'
 
-vi.mock('../../model-icon', () => ({
+vi.mock('../../../model-icon', () => ({
   default: ({ modelName }: { modelName: string }) => <div data-testid="model-icon">{modelName}</div>,
 }))
 
-vi.mock('./credential-item', () => ({
+vi.mock('../credential-item', () => ({
   default: ({ credential, onEdit, onDelete, onItemClick }: {
     credential: Credential
     onEdit?: (credential: Credential) => void

web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/credential-item.spec.tsx

@@ -1,6 +1,6 @@
-import type { Credential } from '../../declarations'
+import type { Credential } from '../../../declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
-import CredentialItem from './credential-item'
+import CredentialItem from '../credential-item'
 
 vi.mock('@remixicon/react', () => ({
   RiCheckLine: () => <div data-testid="check-icon" />,

web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
-import type { Credential, CustomModel, ModelProvider } from '../../declarations'
+import type { Credential, CustomModel, ModelProvider } from '../../../declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { ConfigurationMethodEnum, ModelTypeEnum } from '../../declarations'
-import Authorized from './index'
+import { ConfigurationMethodEnum, ModelTypeEnum } from '../../../declarations'
+import Authorized from '../index'
 
 const mockHandleOpenModal = vi.fn()
 const mockHandleActiveCredential = vi.fn()
@@ -12,7 +12,7 @@ const mockHandleConfirmDelete = vi.fn()
 let mockDeleteCredentialId: string | null = null
 let mockDoingAction = false
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useAuth: () => ({
     openConfirmDelete: mockOpenConfirmDelete,
     closeConfirmDelete: mockCloseConfirmDelete,
@@ -24,7 +24,7 @@ vi.mock('../hooks', () => ({
   }),
 }))
 
-vi.mock('./authorized-item', () => ({
+vi.mock('../authorized-item', () => ({
   default: ({ credentials, model, onEdit, onDelete, onItemClick }: {
     credentials: Credential[]
     model?: CustomModel

web/app/components/header/account-setting/model-provider-page/model-auth/hooks/__tests__/use-auth-service.spec.tsx

@@ -1,8 +1,8 @@
-import type { CustomModel } from '../../declarations'
+import type { CustomModel } from '../../../declarations'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook } from '@testing-library/react'
-import { ModelTypeEnum } from '../../declarations'
-import { useAuthService, useGetCredential } from './use-auth-service'
+import { ModelTypeEnum } from '../../../declarations'
+import { useAuthService, useGetCredential } from '../use-auth-service'
 
 vi.mock('@/service/use-models', () => ({
   useGetProviderCredential: vi.fn(),

web/app/components/header/account-setting/model-provider-page/model-auth/hooks/__tests__/use-auth.spec.tsx

@@ -3,11 +3,11 @@ import type {
   Credential,
   CustomModel,
   ModelProvider,
-} from '../../declarations'
+} from '../../../declarations'
 import { act, renderHook } from '@testing-library/react'
 import { ToastContext } from '@/app/components/base/toast/context'
-import { ConfigurationMethodEnum, ModelModalModeEnum, ModelTypeEnum } from '../../declarations'
-import { useAuth } from './use-auth'
+import { ConfigurationMethodEnum, ModelModalModeEnum, ModelTypeEnum } from '../../../declarations'
+import { useAuth } from '../use-auth'
 
 const mockNotify = vi.fn()
 const mockHandleRefreshModel = vi.fn()
@@ -39,7 +39,7 @@ vi.mock('@/service/use-models', () => ({
   useDeleteModel: () => ({ mutateAsync: mockDeleteModelService }),
 }))
 
-vi.mock('./use-auth-service', () => ({
+vi.mock('../use-auth-service', () => ({
   useAuthService: () => ({
     getDeleteCredentialService: (isModel: boolean) => (isModel ? mockDeleteModelCredential : mockDeleteProviderCredential),
     getActiveCredentialService: (isModel: boolean) => (isModel ? mockActiveModelCredential : mockActiveProviderCredential),

web/app/components/header/account-setting/model-provider-page/model-auth/hooks/__tests__/use-credential-data.spec.tsx

@@ -1,13 +1,13 @@
-import type { Credential, CustomModelCredential, ModelProvider } from '../../declarations'
+import type { Credential, CustomModelCredential, ModelProvider } from '../../../declarations'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook } from '@testing-library/react'
-import { useCredentialData } from './use-credential-data'
+import { useCredentialData } from '../use-credential-data'
 
-vi.mock('./use-auth-service', () => ({
+vi.mock('../use-auth-service', () => ({
   useGetCredential: vi.fn(),
 }))
 
-const { useGetCredential } = await import('./use-auth-service')
+const { useGetCredential } = await import('../use-auth-service')
 
 describe('useCredentialData', () => {
   let queryClient: QueryClient

web/app/components/header/account-setting/model-provider-page/model-auth/hooks/__tests__/use-credential-status.spec.tsx

@@ -1,6 +1,6 @@
-import type { ModelProvider } from '../../declarations'
+import type { ModelProvider } from '../../../declarations'
 import { renderHook } from '@testing-library/react'
-import { useCredentialStatus } from './use-credential-status'
+import { useCredentialStatus } from '../use-credential-status'
 
 describe('useCredentialStatus', () => {
   it('computes authorized and authRemoved status correctly', () => {

web/app/components/header/account-setting/model-provider-page/model-auth/hooks/__tests__/use-custom-models.spec.tsx

@@ -1,6 +1,6 @@
-import type { ModelProvider } from '../../declarations'
+import type { ModelProvider } from '../../../declarations'
 import { renderHook } from '@testing-library/react'
-import { useCanAddedModels, useCustomModels } from './use-custom-models'
+import { useCanAddedModels, useCustomModels } from '../use-custom-models'
 
 describe('useCustomModels and useCanAddedModels', () => {
   it('extracts custom models from provider correctly', () => {

web/app/components/header/account-setting/model-provider-page/model-auth/hooks/__tests__/use-model-form-schemas.spec.tsx

@@ -2,13 +2,13 @@ import type {
   Credential,
   CustomModelCredential,
   ModelProvider,
-} from '../../declarations'
+} from '../../../declarations'
 import { renderHook } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import { FormTypeEnum } from '@/app/components/base/form/types'
-import { useModelFormSchemas } from './use-model-form-schemas'
+import { useModelFormSchemas } from '../use-model-form-schemas'
 
-vi.mock('../../utils', () => ({
+vi.mock('../../../utils', () => ({
   genModelNameFormSchema: vi.fn(() => ({
     type: FormTypeEnum.textInput,
     variable: '__model_name',

web/app/components/header/account-setting/model-provider-page/model-badge/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import ModelBadge from './index'
+import ModelBadge from '../index'
 
 describe('ModelBadge', () => {
   beforeEach(() => {

web/app/components/header/account-setting/model-provider-page/model-icon/__tests__/index.spec.tsx

@@ -1,12 +1,12 @@
-import type { Model } from '../declarations'
+import type { Model } from '../../declarations'
 import { render, screen } from '@testing-library/react'
 import { Theme } from '@/types/app'
 import {
   ConfigurationMethodEnum,
   ModelStatusEnum,
   ModelTypeEnum,
-} from '../declarations'
-import ModelIcon from './index'
+} from '../../declarations'
+import ModelIcon from '../index'
 
 type I18nText = {
   en_US: string
@@ -20,7 +20,7 @@ vi.mock('@/hooks/use-theme', () => ({
   default: () => ({ theme: mockTheme }),
 }))
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useLanguage: () => mockLanguage,
 }))
 

web/app/components/header/account-setting/model-provider-page/model-modal/Input.test.tsx

@@ -1,16 +0,0 @@
-import { render } from '@testing-library/react'
-import Input from './Input'
-
-it('Input renders correctly as password type with no autocomplete', () => {
-  const { asFragment, getByPlaceholderText } = render(
-    <Input
-      type="password"
-      placeholder="API Key"
-      onChange={vi.fn()}
-    />,
-  )
-  const input = getByPlaceholderText('API Key')
-  expect(input).toHaveAttribute('type', 'password')
-  expect(input).not.toHaveAttribute('autocomplete')
-  expect(asFragment()).toMatchSnapshot()
-})

web/app/components/header/account-setting/model-provider-page/model-modal/__snapshots__/Input.test.tsx.snap

@@ -1,24 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Input renders correctly as password type with no autocomplete 1`] = `
-<DocumentFragment>
-  <div
-    class="relative"
-  >
-    <input
-      class="
-          block h-8 w-full appearance-none rounded-lg border border-transparent bg-components-input-bg-normal px-3 text-sm
-          text-components-input-text-filled caret-primary-600 outline-none
-          placeholder:text-sm placeholder:text-text-tertiary
-          hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active
-          focus:bg-components-input-bg-active focus:shadow-xs
-          
-          
-        "
-      placeholder="API Key"
-      tabindex="0"
-      type="password"
-    />
-  </div>
-</DocumentFragment>
-`;

web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/Form.spec.tsx

@@ -7,11 +7,11 @@ import type {
   CredentialFormSchemaSelect,
   CredentialFormSchemaTextInput,
   FormValue,
-} from '../declarations'
+} from '../../declarations'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { FormTypeEnum } from '../declarations'
-import Form from './Form'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { FormTypeEnum } from '../../declarations'
+import Form from '../Form'
 
 type CustomSchema = Omit<CredentialFormSchemaBase, 'type'> & { type: 'custom-type' }
 
@@ -23,7 +23,7 @@ const modelSelectorPropsSpy = vi.hoisted(() => vi.fn())
 const toolSelectorPropsSpy = vi.hoisted(() => vi.fn())
 
 const mockLanguageRef = { value: 'en_US' }
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useLanguage: () => mockLanguageRef.value,
 }))
 
@@ -84,7 +84,7 @@ vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference
   },
 }))
 
-vi.mock('../../key-validator/ValidateStatus', () => ({
+vi.mock('../../../key-validator/ValidateStatus', () => ({
   ValidatingTip: () => <div>Validating...</div>,
 }))
 
@@ -202,7 +202,7 @@ describe('Form', () => {
 
   // Interaction updates
   describe('Interactions', () => {
-    it('should update values and clear dependent fields when a field changes', () => {
+    it('should update values and clear dependent fields when a field changes', async () => {
       const formSchemas: AnyFormSchema[] = [
         createTextSchema({
           variable: 'api_key',
@@ -232,8 +232,10 @@ describe('Form', () => {
 
       fireEvent.change(screen.getByPlaceholderText('API Key'), { target: { value: 'new-key' } })
 
-      expect(onChange).toHaveBeenCalledWith({ api_key: 'new-key', dependent: 'reset' })
-      expect(screen.getByText('Validating...')).toBeInTheDocument()
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalledWith({ api_key: 'new-key', dependent: 'reset' })
+        expect(screen.getByText('Validating...')).toBeInTheDocument()
+      })
     })
 
     it('should render radio options based on show conditions and ignore edit-locked changes', () => {
@@ -447,9 +449,9 @@ describe('Form', () => {
           showOnVariableMap={{}}
           isEditMode={false}
           fieldMoreInfo={() => <div>Extra Info</div>}
-          override={[[FormTypeEnum.textInput], () => <div>Override Field</div>]}
+          override={[[FormTypeEnum.textInput], () => <div key="override-field">Override Field</div>]}
           customRenderField={schema => (
-            <div>
+            <div key={schema.variable}>
               Custom Render:
               {schema.variable}
             </div>

web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/Input.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import Input from './Input'
+import Input from '../Input'
 
 describe('Input', () => {
   beforeEach(() => {
@@ -19,6 +19,21 @@ describe('Input', () => {
     expect(screen.getByPlaceholderText('API Key')).toHaveValue('hello')
   })
 
+  it('should render password inputs without autocomplete attributes', () => {
+    render(
+      <Input
+        type="password"
+        placeholder="Secret"
+        onChange={vi.fn()}
+      />,
+    )
+
+    const input = screen.getByPlaceholderText('Secret')
+
+    expect(input).toHaveAttribute('type', 'password')
+    expect(input).not.toHaveAttribute('autocomplete')
+  })
+
   // User interaction
   it('should call onChange when the user types', () => {
     const onChange = vi.fn()

web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react'
-import type { Credential, CredentialFormSchema, CustomModel, ModelProvider } from '../declarations'
+import type { Credential, CredentialFormSchema, CustomModel, ModelProvider } from '../../declarations'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import {
@@ -10,8 +10,8 @@ import {
   ModelTypeEnum,
   PreferredProviderTypeEnum,
   QuotaUnitEnum,
-} from '../declarations'
-import ModelModal from './index'
+} from '../../declarations'
+import ModelModal from '../index'
 
 type CredentialData = {
   credentials: Record<string, unknown>
@@ -45,7 +45,7 @@ const mockHandlers = vi.hoisted(() => ({
   handleActiveCredential: vi.fn(),
 }))
 
-vi.mock('../model-auth/hooks', () => ({
+vi.mock('../../model-auth/hooks', () => ({
   useCredentialData: () => ({
     isLoading: mockState.isLoading,
     credentialData: mockState.credentialData,
@@ -75,7 +75,7 @@ vi.mock('@/hooks/use-i18n', () => ({
   useRenderI18nObject: () => (value: { en_US: string }) => value.en_US,
 }))
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useLanguage: () => 'en_US',
 }))
 
@@ -164,7 +164,7 @@ vi.mock('@/app/components/base/form/form-scenarios/auth', () => ({
   }),
 }))
 
-vi.mock('../model-auth', () => ({
+vi.mock('../../model-auth', () => ({
   CredentialSelector: ({ onSelect }: { onSelect: (val: unknown) => void }) => (
     <button onClick={() => onSelect({ addNewCredential: true })} data-testid="credential-selector">
       Select Credential

web/app/components/header/account-setting/model-provider-page/model-name/__tests__/index.spec.tsx

@@ -1,12 +1,12 @@
-import type { ModelItem } from '../declarations'
+import type { ModelItem } from '../../declarations'
 import { render, screen } from '@testing-library/react'
 import {
   ConfigurationMethodEnum,
   ModelFeatureEnum,
   ModelStatusEnum,
   ModelTypeEnum,
-} from '../declarations'
-import ModelName from './index'
+} from '../../declarations'
+import ModelName from '../index'
 
 let mockLocale = 'en-US'
 

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/agent-model-trigger.spec.tsx

@@ -1,5 +1,5 @@
 import type { MouseEvent } from 'react'
-import type { ModelProvider } from '../declarations'
+import type { ModelProvider } from '../../declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { vi } from 'vitest'
 import {
@@ -7,8 +7,8 @@ import {
   CustomConfigurationStatusEnum,
   ModelTypeEnum,
   QuotaUnitEnum,
-} from '../declarations'
-import AgentModelTrigger from './agent-model-trigger'
+} from '../../declarations'
+import AgentModelTrigger from '../agent-model-trigger'
 
 let modelProviders: ModelProvider[] = []
 let pluginInfo: { latest_package_identifier: string } | null = null
@@ -31,21 +31,21 @@ vi.mock('@/service/use-plugins', () => ({
   usePluginInfo: () => ({ data: pluginInfo, isLoading: pluginLoading }),
 }))
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useModelModalHandler: () => handleOpenModal,
   useUpdateModelList: () => updateModelList,
   useUpdateModelProviders: () => updateModelProviders,
 }))
 
-vi.mock('../model-icon', () => ({
+vi.mock('../../model-icon', () => ({
   default: () => <div>Icon</div>,
 }))
 
-vi.mock('./model-display', () => ({
+vi.mock('../model-display', () => ({
   default: () => <div>ModelDisplay</div>,
 }))
 
-vi.mock('./status-indicators', () => ({
+vi.mock('../status-indicators', () => ({
   default: () => <div>StatusIndicators</div>,
 }))
 

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/configuration-button.spec.tsx

@@ -1,8 +1,8 @@
 import type { ComponentProps } from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { vi } from 'vitest'
-import { ConfigurationMethodEnum } from '../declarations'
-import ConfigurationButton from './configuration-button'
+import { ConfigurationMethodEnum } from '../../declarations'
+import ConfigurationButton from '../configuration-button'
 
 describe('ConfigurationButton', () => {
   it('should render and handle click', () => {

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import ModelParameterModal from './index'
+import ModelParameterModal from '../index'
 
 let isAPIKeySet = true
 let parameterRules: Array<Record<string, unknown>> | undefined = [
@@ -53,7 +53,7 @@ vi.mock('@/service/use-common', () => ({
   }),
 }))
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useTextGenerationCurrentProviderAndModelAndModelList: () => ({
     currentProvider,
     currentModel,
@@ -61,7 +61,7 @@ vi.mock('../hooks', () => ({
   }),
 }))
 
-vi.mock('./parameter-item', () => ({
+vi.mock('../parameter-item', () => ({
   default: ({ parameterRule, onChange, onSwitch }: {
     parameterRule: { name: string, label: { en_US: string } }
     onChange: (v: number) => void
@@ -76,7 +76,7 @@ vi.mock('./parameter-item', () => ({
   ),
 }))
 
-vi.mock('../model-selector', () => ({
+vi.mock('../../model-selector', () => ({
   default: ({ onSelect }: { onSelect: (value: { provider: string, model: string }) => void }) => (
     <div data-testid="model-selector">
       <button onClick={() => onSelect({ provider: 'openai', model: 'gpt-4.1' })}>Select GPT-4.1</button>
@@ -84,13 +84,13 @@ vi.mock('../model-selector', () => ({
   ),
 }))
 
-vi.mock('./presets-parameter', () => ({
+vi.mock('../presets-parameter', () => ({
   default: ({ onSelect }: { onSelect: (id: number) => void }) => (
     <button onClick={() => onSelect(1)}>Preset 1</button>
   ),
 }))
 
-vi.mock('./trigger', () => ({
+vi.mock('../trigger', () => ({
   default: () => <button>Open Settings</button>,
 }))
 

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/model-display.spec.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react'
 import { vi } from 'vitest'
-import ModelDisplay from './model-display'
+import ModelDisplay from '../model-display'
 
-vi.mock('../model-name', () => ({
+vi.mock('../../model-name', () => ({
   default: ({ modelItem }: { modelItem: { model: string } }) => <div>{modelItem.model}</div>,
 }))
 

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/parameter-item.spec.tsx

@@ -1,8 +1,8 @@
-import type { ModelParameterRule } from '../declarations'
+import type { ModelParameterRule } from '../../declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
-import ParameterItem from './parameter-item'
+import ParameterItem from '../parameter-item'
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useLanguage: () => 'en_US',
 }))
 

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/presets-parameter.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { vi } from 'vitest'
-import PresetsParameter from './presets-parameter'
+import PresetsParameter from '../presets-parameter'
 
 describe('PresetsParameter', () => {
   beforeEach(() => {

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/status-indicators.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
-import StatusIndicators from './status-indicators'
+import StatusIndicators from '../status-indicators'
 
 let installedPlugins = [{ name: 'demo-plugin', plugin_unique_identifier: 'demo@1.0.0' }]
 

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/trigger.spec.tsx

@@ -1,9 +1,9 @@
 import type { ComponentProps } from 'react'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import Trigger from './trigger'
+import Trigger from '../trigger'
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useLanguage: () => 'en_US',
 }))
 
@@ -13,11 +13,11 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
-vi.mock('../model-icon', () => ({
+vi.mock('../../model-icon', () => ({
   default: () => <div data-testid="model-icon">Icon</div>,
 }))
 
-vi.mock('../model-name', () => ({
+vi.mock('../../model-name', () => ({
   default: ({ modelItem }: { modelItem: { model: string } }) => <div>{modelItem.model}</div>,
 }))
 

web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/deprecated-model-trigger.spec.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import DeprecatedModelTrigger from './deprecated-model-trigger'
+import DeprecatedModelTrigger from '../deprecated-model-trigger'
 
-vi.mock('../model-icon', () => ({
+vi.mock('../../model-icon', () => ({
   default: ({ modelName }: { modelName: string }) => <span>{modelName}</span>,
 }))
 

web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/empty-trigger.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import EmptyTrigger from './empty-trigger'
+import EmptyTrigger from '../empty-trigger'
 
 describe('EmptyTrigger', () => {
   beforeEach(() => {

web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/feature-icon.spec.tsx

@@ -2,8 +2,8 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import {
   ModelFeatureEnum,
   ModelFeatureTextEnum,
-} from '../declarations'
-import FeatureIcon from './feature-icon'
+} from '../../declarations'
+import FeatureIcon from '../feature-icon'
 
 describe('FeatureIcon', () => {
   beforeEach(() => {

web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/index.spec.tsx

@@ -1,25 +1,25 @@
-import type { Model, ModelItem } from '../declarations'
+import type { Model, ModelItem } from '../../declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
 import {
   ConfigurationMethodEnum,
   ModelStatusEnum,
   ModelTypeEnum,
-} from '../declarations'
-import ModelSelector from './index'
+} from '../../declarations'
+import ModelSelector from '../index'
 
-vi.mock('./model-trigger', () => ({
+vi.mock('../model-trigger', () => ({
   default: () => <div>model-trigger</div>,
 }))
 
-vi.mock('./deprecated-model-trigger', () => ({
+vi.mock('../deprecated-model-trigger', () => ({
   default: ({ modelName }: { modelName: string }) => <div>{`deprecated:${modelName}`}</div>,
 }))
 
-vi.mock('./empty-trigger', () => ({
+vi.mock('../empty-trigger', () => ({
   default: () => <div>empty-trigger</div>,
 }))
 
-vi.mock('./popup', () => ({
+vi.mock('../popup', () => ({
   default: ({ onHide, onSelect }: { onHide: () => void, onSelect: (provider: string, model: ModelItem) => void }) => (
     <>
       <button type="button" onClick={() => onSelect('openai', { model: 'gpt-4' } as ModelItem)}>

web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/model-trigger.spec.tsx

@@ -1,25 +1,25 @@
-import type { Model, ModelItem } from '../declarations'
+import type { Model, ModelItem } from '../../declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
 import {
   ConfigurationMethodEnum,
   ModelStatusEnum,
   ModelTypeEnum,
-} from '../declarations'
-import ModelTrigger from './model-trigger'
+} from '../../declarations'
+import ModelTrigger from '../model-trigger'
 
-vi.mock('../hooks', async () => {
-  const actual = await vi.importActual<typeof import('../hooks')>('../hooks')
+vi.mock('../../hooks', async () => {
+  const actual = await vi.importActual<typeof import('../../hooks')>('../../hooks')
   return {
     ...actual,
     useLanguage: () => 'en_US',
   }
 })
 
-vi.mock('../model-icon', () => ({
+vi.mock('../../model-icon', () => ({
   default: ({ modelName }: { modelName: string }) => <span>{modelName}</span>,
 }))
 
-vi.mock('../model-name', () => ({
+vi.mock('../../model-name', () => ({
   default: ({ modelItem }: { modelItem: ModelItem }) => <span>{modelItem.label.en_US}</span>,
 }))
 

web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popup-item.spec.tsx

@@ -1,19 +1,19 @@
-import type { DefaultModel, Model, ModelItem } from '../declarations'
+import type { DefaultModel, Model, ModelItem } from '../../declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
 import {
   ConfigurationMethodEnum,
   ModelFeatureEnum,
   ModelStatusEnum,
   ModelTypeEnum,
-} from '../declarations'
-import PopupItem from './popup-item'
+} from '../../declarations'
+import PopupItem from '../popup-item'
 
 const mockUpdateModelList = vi.hoisted(() => vi.fn())
 const mockUpdateModelProviders = vi.hoisted(() => vi.fn())
 const mockLanguageRef = vi.hoisted(() => ({ value: 'en_US' }))
 
-vi.mock('../hooks', async () => {
-  const actual = await vi.importActual<typeof import('../hooks')>('../hooks')
+vi.mock('../../hooks', async () => {
+  const actual = await vi.importActual<typeof import('../../hooks')>('../../hooks')
   return {
     ...actual,
     useLanguage: () => mockLanguageRef.value,
@@ -22,15 +22,15 @@ vi.mock('../hooks', async () => {
   }
 })
 
-vi.mock('../model-badge', () => ({
+vi.mock('../../model-badge', () => ({
   default: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
 }))
 
-vi.mock('../model-icon', () => ({
+vi.mock('../../model-icon', () => ({
   default: ({ modelName }: { modelName: string }) => <span>{modelName}</span>,
 }))
 
-vi.mock('../model-name', () => ({
+vi.mock('../../model-name', () => ({
   default: ({ modelItem }: { modelItem: ModelItem }) => <span>{modelItem.label.en_US}</span>,
 }))
 

web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popup.spec.tsx

@@ -1,4 +1,4 @@
-import type { Model, ModelItem } from '../declarations'
+import type { Model, ModelItem } from '../../declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { tooltipManager } from '@/app/components/base/tooltip/TooltipManager'
 import {
@@ -6,8 +6,8 @@ import {
   ModelFeatureEnum,
   ModelStatusEnum,
   ModelTypeEnum,
-} from '../declarations'
-import Popup from './popup'
+} from '../../declarations'
+import Popup from '../popup'
 
 let mockLanguage = 'en_US'
 
@@ -23,15 +23,15 @@ vi.mock('@/utils/tool-call', () => ({
   supportFunctionCall: mockSupportFunctionCall,
 }))
 
-vi.mock('../hooks', async () => {
-  const actual = await vi.importActual<typeof import('../hooks')>('../hooks')
+vi.mock('../../hooks', async () => {
+  const actual = await vi.importActual<typeof import('../../hooks')>('../../hooks')
   return {
     ...actual,
     useLanguage: () => mockLanguage,
   }
 })
 
-vi.mock('./popup-item', () => ({
+vi.mock('../popup-item', () => ({
   default: ({ model }: { model: Model }) => <div>{model.provider}</div>,
 }))
 

web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/add-model-button.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import AddModelButton from './add-model-button'
+import AddModelButton from '../add-model-button'
 
 describe('AddModelButton', () => {
   it('should render button with text', () => {

web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/cooldown-timer.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react'
-import CooldownTimer from './cooldown-timer'
+import CooldownTimer from '../cooldown-timer'
 
 describe('CooldownTimer', () => {
   beforeEach(() => {

web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/credential-panel.spec.tsx

@@ -1,9 +1,9 @@
-import type { ModelProvider } from '../declarations'
+import type { ModelProvider } from '../../declarations'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { ToastContext } from '@/app/components/base/toast/context'
 import { changeModelProviderPriority } from '@/service/common'
-import { ConfigurationMethodEnum } from '../declarations'
-import CredentialPanel from './credential-panel'
+import { ConfigurationMethodEnum } from '../../declarations'
+import CredentialPanel from '../credential-panel'
 
 const mockEventEmitter = { emit: vi.fn() }
 const mockNotify = vi.fn()
@@ -53,12 +53,12 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/model-auth/
   useCredentialStatus: () => mockCredentialStatus,
 }))
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useUpdateModelList: () => mockUpdateModelList,
   useUpdateModelProviders: () => mockUpdateModelProviders,
 }))
 
-vi.mock('./priority-selector', () => ({
+vi.mock('../priority-selector', () => ({
   default: ({ value, onSelect }: { value: string, onSelect: (key: string) => void }) => (
     <button data-testid="priority-selector" onClick={() => onSelect('custom')}>
       Priority Selector
@@ -68,7 +68,7 @@ vi.mock('./priority-selector', () => ({
   ),
 }))
 
-vi.mock('./priority-use-tip', () => ({
+vi.mock('../priority-use-tip', () => ({
   default: () => <div data-testid="priority-use-tip">Priority Tip</div>,
 }))
 

web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/index.spec.tsx

@@ -1,8 +1,8 @@
-import type { ModelItem, ModelProvider } from '../declarations'
+import type { ModelItem, ModelProvider } from '../../declarations'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { fetchModelProviderModelList } from '@/service/common'
-import { ConfigurationMethodEnum } from '../declarations'
-import ProviderAddedCard from './index'
+import { ConfigurationMethodEnum } from '../../declarations'
+import ProviderAddedCard from '../index'
 
 let mockIsCurrentWorkspaceManager = true
 const mockEventEmitter = {
@@ -27,11 +27,11 @@ vi.mock('@/context/event-emitter', () => ({
 }))
 
 // Mock internal components to simplify testing of the index file
-vi.mock('./credential-panel', () => ({
+vi.mock('../credential-panel', () => ({
   default: () => <div data-testid="credential-panel" />,
 }))
 
-vi.mock('./model-list', () => ({
+vi.mock('../model-list', () => ({
   default: ({ onCollapse, onChange }: { onCollapse: () => void, onChange: (provider: string) => void }) => (
     <div data-testid="model-list">
       <button type="button" onClick={onCollapse}>collapse list</button>
@@ -40,11 +40,11 @@ vi.mock('./model-list', () => ({
   ),
 }))
 
-vi.mock('../provider-icon', () => ({
+vi.mock('../../provider-icon', () => ({
   default: () => <div data-testid="provider-icon" />,
 }))
 
-vi.mock('../model-badge', () => ({
+vi.mock('../../model-badge', () => ({
   default: ({ children }: { children: string }) => <div data-testid="model-badge">{children}</div>,
 }))
 

web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-list-item.spec.tsx

@@ -1,8 +1,8 @@
-import type { ModelItem, ModelProvider } from '../declarations'
+import type { ModelItem, ModelProvider } from '../../declarations'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { disableModel, enableModel } from '@/service/common'
-import { ModelStatusEnum } from '../declarations'
-import ModelListItem from './model-list-item'
+import { ModelStatusEnum } from '../../declarations'
+import ModelListItem from '../model-list-item'
 
 let mockModelLoadBalancingEnabled = false
 let mockPlanType: string = 'pro'
@@ -25,19 +25,19 @@ vi.mock('@/service/common', () => ({
   disableModel: vi.fn(),
 }))
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useUpdateModelList: () => vi.fn(),
 }))
 
-vi.mock('../model-icon', () => ({
+vi.mock('../../model-icon', () => ({
   default: () => <div data-testid="model-icon" />,
 }))
 
-vi.mock('../model-name', () => ({
+vi.mock('../../model-name', () => ({
   default: ({ children }: { children: React.ReactNode }) => <div data-testid="model-name">{children}</div>,
 }))
 
-vi.mock('../model-auth', () => ({
+vi.mock('../../model-auth', () => ({
   ConfigModel: ({ onClick }: { onClick: () => void }) => (
     <button type="button" onClick={onClick}>modify load balancing</button>
   ),

web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-list.spec.tsx

@@ -1,7 +1,7 @@
-import type { ModelItem, ModelProvider } from '../declarations'
+import type { ModelItem, ModelProvider } from '../../declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { ConfigurationMethodEnum } from '../declarations'
-import ModelList from './model-list'
+import { ConfigurationMethodEnum } from '../../declarations'
+import ModelList from '../model-list'
 
 const mockSetShowModelLoadBalancingModal = vi.fn()
 let mockIsCurrentWorkspaceManager = true
@@ -17,7 +17,7 @@ vi.mock('@/context/modal-context', () => ({
     selector({ setShowModelLoadBalancingModal: mockSetShowModelLoadBalancingModal }),
 }))
 
-vi.mock('./model-list-item', () => ({
+vi.mock('../model-list-item', () => ({
   default: ({ model, onModifyLoadBalancing }: { model: ModelItem, onModifyLoadBalancing: (model: ModelItem) => void }) => (
     <button type="button" onClick={() => onModifyLoadBalancing(model)}>
       {model.model}

web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-configs.spec.tsx

@@ -4,13 +4,13 @@ import type {
   ModelCredential,
   ModelLoadBalancingConfig,
   ModelProvider,
-} from '../declarations'
+} from '../../declarations'
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useState } from 'react'
 import { AddCredentialInLoadBalancing } from '@/app/components/header/account-setting/model-provider-page/model-auth'
-import { ConfigurationMethodEnum } from '../declarations'
-import ModelLoadBalancingConfigs from './model-load-balancing-configs'
+import { ConfigurationMethodEnum } from '../../declarations'
+import ModelLoadBalancingConfigs from '../model-load-balancing-configs'
 
 let mockModelLoadBalancingEnabled = true
 
@@ -22,7 +22,7 @@ vi.mock('@/context/provider-context', () => ({
   useProviderContextSelector: (selector: (state: { modelLoadBalancingEnabled: boolean }) => boolean) => selector({ modelLoadBalancingEnabled: mockModelLoadBalancingEnabled }),
 }))
 
-vi.mock('./cooldown-timer', () => ({
+vi.mock('../cooldown-timer', () => ({
   default: ({ secondsRemaining, onFinish }: { secondsRemaining?: number, onFinish?: () => void }) => (
     <button type="button" onClick={onFinish} data-testid="cooldown-timer">
       {secondsRemaining}

web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/model-load-balancing-modal.spec.tsx

@@ -1,9 +1,9 @@
-import type { ModelItem, ModelProvider } from '../declarations'
+import type { ModelItem, ModelProvider } from '../../declarations'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { ToastContext } from '@/app/components/base/toast/context'
-import { ConfigurationMethodEnum } from '../declarations'
-import ModelLoadBalancingModal from './model-load-balancing-modal'
+import { ConfigurationMethodEnum } from '../../declarations'
+import ModelLoadBalancingModal from '../model-load-balancing-modal'
 
 vi.mock('@headlessui/react', () => ({
   Transition: ({ show, children }: { show: boolean, children: React.ReactNode }) => (show ? <>{children}</> : null),
@@ -74,7 +74,7 @@ vi.mock('@/service/use-models', () => ({
   }),
 }))
 
-vi.mock('../model-auth/hooks/use-auth', () => ({
+vi.mock('../../model-auth/hooks/use-auth', () => ({
   useAuth: () => ({
     doingAction: false,
     deleteModel: mockDeleteModel,
@@ -84,11 +84,11 @@ vi.mock('../model-auth/hooks/use-auth', () => ({
   }),
 }))
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useRefreshModel: () => ({ handleRefreshModel: mockHandleRefreshModel }),
 }))
 
-vi.mock('./model-load-balancing-configs', () => ({
+vi.mock('../model-load-balancing-configs', () => ({
   default: ({ onUpdate, onRemove }: {
     onUpdate?: (payload?: unknown, formValues?: Record<string, unknown>) => void
     onRemove?: (credentialId: string) => void
@@ -107,11 +107,11 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/model-auth'
   ),
 }))
 
-vi.mock('../model-icon', () => ({
+vi.mock('../../model-icon', () => ({
   default: () => <div>model-icon</div>,
 }))
 
-vi.mock('../model-name', () => ({
+vi.mock('../../model-name', () => ({
   default: () => <div>model-name</div>,
 }))
 

web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/priority-selector.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import PrioritySelector from './priority-selector'
+import PrioritySelector from '../priority-selector'
 
 describe('PrioritySelector', () => {
   const mockOnSelect = vi.fn()

web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/priority-use-tip.spec.tsx

@@ -2,7 +2,7 @@ import type { i18n } from 'i18next'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as reactI18next from 'react-i18next'
-import PriorityUseTip from './priority-use-tip'
+import PriorityUseTip from '../priority-use-tip'
 
 describe('PriorityUseTip', () => {
   beforeEach(() => {

web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/quota-panel.spec.tsx

@@ -1,7 +1,7 @@
-import type { ModelProvider } from '../declarations'
+import type { ModelProvider } from '../../declarations'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import QuotaPanel from './quota-panel'
+import QuotaPanel from '../quota-panel'
 
 let mockWorkspace = {
   trial_credits: 100,
@@ -28,7 +28,7 @@ vi.mock('@/context/global-public-context', () => ({
   }),
 }))
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useMarketplaceAllPlugins: () => ({
     plugins: mockPlugins,
   }),

web/app/components/header/account-setting/model-provider-page/provider-icon/__tests__/index.spec.tsx

@@ -1,9 +1,9 @@
-import type { ModelProvider } from '../declarations'
+import type { ModelProvider } from '../../declarations'
 import { render, screen } from '@testing-library/react'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import { useLanguage } from '../hooks'
-import ProviderIcon from './index'
+import { useLanguage } from '../../hooks'
+import ProviderIcon from '../index'
 
 type UseThemeReturnType = ReturnType<typeof useTheme>
 
@@ -29,7 +29,7 @@ vi.mock('@/hooks/use-theme', () => {
   return { default: mockFn }
 })
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useLanguage: vi.fn(() => 'en_US'),
 }))