From 978ebbf9ea7174525687390477cda53e144530cf Mon Sep 17 00:00:00 2001 From: yyh <92089059+lyzno1@users.noreply.github.com> Date: Fri, 20 Mar 2026 14:12:35 +0800 Subject: [PATCH] refactor: migrate high-risk overlay follow-up selectors (#33795) Signed-off-by: yyh Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- .../app/type-selector/index.spec.tsx | 33 ++-- .../components/app/type-selector/index.tsx | 128 ++++++++------ .../list/__tests__/create-card.spec.tsx | 18 +- .../__tests__/edit-pipeline-info.spec.tsx | 24 ++- .../template-card/__tests__/index.spec.tsx | 39 +++-- .../online-documents/__tests__/index.spec.tsx | 34 ++-- .../online-drive/__tests__/index.spec.tsx | 28 +-- .../base/options/__tests__/index.spec.tsx | 47 ++--- .../online-document-preview.spec.tsx | 26 ++- .../__tests__/components.spec.tsx | 29 +++- .../process-documents/__tests__/form.spec.tsx | 28 ++- .../__tests__/tts-params-panel.spec.tsx | 164 ++++++++++-------- .../model-selector/tts-params-panel.tsx | 69 ++++++-- .../create/__tests__/common-modal.spec.tsx | 7 +- .../tools/labels/__tests__/filter.spec.tsx | 97 ++--------- web/app/components/tools/labels/filter.tsx | 115 ++++++------ web/eslint-suppressions.json | 16 +- 17 files changed, 478 insertions(+), 424 deletions(-) diff --git a/web/app/components/app/type-selector/index.spec.tsx b/web/app/components/app/type-selector/index.spec.tsx index e24d963305..711678f0a8 100644 --- a/web/app/components/app/type-selector/index.spec.tsx +++ b/web/app/components/app/type-selector/index.spec.tsx @@ -1,4 +1,4 @@ -import { fireEvent, render, screen, within } from '@testing-library/react' +import { fireEvent, render, screen, waitFor, within } from '@testing-library/react' import * as React from 'react' import { AppModeEnum } from '@/types/app' import AppTypeSelector, { AppTypeIcon, AppTypeLabel } from './index' @@ -14,7 +14,7 @@ describe('AppTypeSelector', () => { render() expect(screen.getByText('app.typeSelector.all')).toBeInTheDocument() - expect(screen.queryByRole('tooltip')).not.toBeInTheDocument() + expect(screen.queryByText('app.typeSelector.workflow')).not.toBeInTheDocument() }) }) @@ -39,24 +39,27 @@ describe('AppTypeSelector', () => { // Covers opening/closing the dropdown and selection updates. describe('User interactions', () => { - it('should toggle option list when clicking the trigger', () => { + it('should close option list when clicking outside', () => { render() - expect(screen.queryByRole('tooltip')).not.toBeInTheDocument() + expect(screen.queryByRole('list')).not.toBeInTheDocument() - fireEvent.click(screen.getByText('app.typeSelector.all')) - expect(screen.getByRole('tooltip')).toBeInTheDocument() + fireEvent.click(screen.getByRole('button', { name: 'app.typeSelector.all' })) + expect(screen.getByRole('list')).toBeInTheDocument() - fireEvent.click(screen.getByText('app.typeSelector.all')) - expect(screen.queryByRole('tooltip')).not.toBeInTheDocument() + fireEvent.pointerDown(document.body) + fireEvent.click(document.body) + return waitFor(() => { + expect(screen.queryByRole('list')).not.toBeInTheDocument() + }) }) it('should call onChange with added type when selecting an unselected item', () => { const onChange = vi.fn() render() - fireEvent.click(screen.getByText('app.typeSelector.all')) - fireEvent.click(within(screen.getByRole('tooltip')).getByText('app.typeSelector.workflow')) + fireEvent.click(screen.getByRole('button', { name: 'app.typeSelector.all' })) + fireEvent.click(within(screen.getByRole('list')).getByRole('button', { name: 'app.typeSelector.workflow' })) expect(onChange).toHaveBeenCalledWith([AppModeEnum.WORKFLOW]) }) @@ -65,8 +68,8 @@ describe('AppTypeSelector', () => { const onChange = vi.fn() render() - fireEvent.click(screen.getByText('app.typeSelector.workflow')) - fireEvent.click(within(screen.getByRole('tooltip')).getByText('app.typeSelector.workflow')) + fireEvent.click(screen.getByRole('button', { name: 'app.typeSelector.workflow' })) + fireEvent.click(within(screen.getByRole('list')).getByRole('button', { name: 'app.typeSelector.workflow' })) expect(onChange).toHaveBeenCalledWith([]) }) @@ -75,8 +78,8 @@ describe('AppTypeSelector', () => { const onChange = vi.fn() render() - fireEvent.click(screen.getByText('app.typeSelector.chatbot')) - fireEvent.click(within(screen.getByRole('tooltip')).getByText('app.typeSelector.agent')) + fireEvent.click(screen.getByRole('button', { name: 'app.typeSelector.chatbot' })) + fireEvent.click(within(screen.getByRole('list')).getByRole('button', { name: 'app.typeSelector.agent' })) expect(onChange).toHaveBeenCalledWith([AppModeEnum.CHAT, AppModeEnum.AGENT_CHAT]) }) @@ -88,7 +91,7 @@ describe('AppTypeSelector', () => { fireEvent.click(screen.getByRole('button', { name: 'common.operation.clear' })) expect(onChange).toHaveBeenCalledWith([]) - expect(screen.queryByRole('tooltip')).not.toBeInTheDocument() + expect(screen.queryByText('app.typeSelector.workflow')).not.toBeInTheDocument() }) }) }) diff --git a/web/app/components/app/type-selector/index.tsx b/web/app/components/app/type-selector/index.tsx index e97da4b7f3..a1475f9eff 100644 --- a/web/app/components/app/type-selector/index.tsx +++ b/web/app/components/app/type-selector/index.tsx @@ -4,13 +4,12 @@ import { useState } from 'react' import { useTranslation } from 'react-i18next' import { BubbleTextMod, ChatBot, ListSparkle, Logic } from '@/app/components/base/icons/src/vender/solid/communication' import { - PortalToFollowElem, - PortalToFollowElemContent, - PortalToFollowElemTrigger, -} from '@/app/components/base/portal-to-follow-elem' + Popover, + PopoverContent, + PopoverTrigger, +} from '@/app/components/base/ui/popover' import { AppModeEnum } from '@/types/app' import { cn } from '@/utils/classnames' -import Checkbox from '../../base/checkbox' export type AppSelectorProps = { value: Array @@ -22,43 +21,43 @@ const allTypes: AppModeEnum[] = [AppModeEnum.WORKFLOW, AppModeEnum.ADVANCED_CHAT const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => { const [open, setOpen] = useState(false) const { t } = useTranslation() + const triggerLabel = value.length === 0 + ? t('typeSelector.all', { ns: 'app' }) + : value.map(type => getAppTypeLabel(type, t)).join(', ') return ( -
- setOpen(v => !v)} - className="block" - > -
0 && 'pr-7', )} + > + + + {value.length > 0 && ( + - )} -
- - -
    + + + )} + +
      {allTypes.map(mode => ( { /> ))}
    - +
- + ) } @@ -173,33 +172,54 @@ type AppTypeSelectorItemProps = { } function AppTypeSelectorItem({ checked, type, onClick }: AppTypeSelectorItemProps) { return ( -
  • - - -
    - -
    +
  • +
    • ) } +function getAppTypeLabel(type: AppModeEnum, t: ReturnType['t']) { + if (type === AppModeEnum.CHAT) + return t('typeSelector.chatbot', { ns: 'app' }) + if (type === AppModeEnum.AGENT_CHAT) + return t('typeSelector.agent', { ns: 'app' }) + if (type === AppModeEnum.COMPLETION) + return t('typeSelector.completion', { ns: 'app' }) + if (type === AppModeEnum.ADVANCED_CHAT) + return t('typeSelector.advanced', { ns: 'app' }) + if (type === AppModeEnum.WORKFLOW) + return t('typeSelector.workflow', { ns: 'app' }) + + return '' +} + type AppTypeLabelProps = { type: AppModeEnum className?: string } export function AppTypeLabel({ type, className }: AppTypeLabelProps) { const { t } = useTranslation() - let label = '' - if (type === AppModeEnum.CHAT) - label = t('typeSelector.chatbot', { ns: 'app' }) - if (type === AppModeEnum.AGENT_CHAT) - label = t('typeSelector.agent', { ns: 'app' }) - if (type === AppModeEnum.COMPLETION) - label = t('typeSelector.completion', { ns: 'app' }) - if (type === AppModeEnum.ADVANCED_CHAT) - label = t('typeSelector.advanced', { ns: 'app' }) - if (type === AppModeEnum.WORKFLOW) - label = t('typeSelector.workflow', { ns: 'app' }) - return {label} + return {getAppTypeLabel(type, t)} } diff --git a/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx index c4702df9c7..7089d5c47e 100644 --- a/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx +++ b/web/app/components/datasets/create-from-pipeline/list/__tests__/create-card.spec.tsx @@ -13,12 +13,20 @@ vi.mock('@/app/components/base/amplitude', () => ({ trackEvent: vi.fn(), })) -vi.mock('@/app/components/base/toast', () => ({ - default: { - notify: vi.fn(), - }, +const { mockToastNotify } = vi.hoisted(() => ({ + mockToastNotify: vi.fn(), })) +vi.mock('@/app/components/base/toast', async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + default: Object.assign(actual.default, { + notify: mockToastNotify, + }), + } +}) + const mockCreateEmptyDataset = vi.fn() const mockInvalidDatasetList = vi.fn() @@ -37,6 +45,8 @@ vi.mock('@/service/knowledge/use-dataset', () => ({ describe('CreateCard', () => { beforeEach(() => { vi.clearAllMocks() + mockToastNotify.mockReset() + mockToastNotify.mockImplementation(() => ({ clear: vi.fn() })) }) describe('Rendering', () => { diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/edit-pipeline-info.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/edit-pipeline-info.spec.tsx index 9c9c80c902..bb744c6c7f 100644 --- a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/edit-pipeline-info.spec.tsx +++ b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/edit-pipeline-info.spec.tsx @@ -1,8 +1,6 @@ import type { PipelineTemplate } from '@/models/pipeline' import { fireEvent, render, screen, waitFor } from '@testing-library/react' import { beforeEach, describe, expect, it, vi } from 'vitest' - -import Toast from '@/app/components/base/toast' import { ChunkingMode } from '@/models/datasets' import EditPipelineInfo from '../edit-pipeline-info' @@ -16,12 +14,21 @@ vi.mock('@/service/use-pipeline', () => ({ useInvalidCustomizedTemplateList: () => mockInvalidCustomizedTemplateList, })) -vi.mock('@/app/components/base/toast', () => ({ - default: { - notify: vi.fn(), - }, +const { mockToastAdd } = vi.hoisted(() => ({ + mockToastAdd: vi.fn(), })) +vi.mock('@/app/components/base/ui/toast', async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + toast: { + ...actual.toast, + add: mockToastAdd, + }, + } +}) + // Mock AppIconPicker to capture interactions let _mockOnSelect: ((icon: { type: 'emoji' | 'image', icon?: string, background?: string, fileId?: string, url?: string }) => void) | undefined let _mockOnClose: (() => void) | undefined @@ -88,6 +95,7 @@ describe('EditPipelineInfo', () => { beforeEach(() => { vi.clearAllMocks() + mockToastAdd.mockReset() _mockOnSelect = undefined _mockOnClose = undefined }) @@ -235,9 +243,9 @@ describe('EditPipelineInfo', () => { fireEvent.click(saveButton) await waitFor(() => { - expect(Toast.notify).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'error', - message: 'Please enter a name for the Knowledge Base.', + title: 'datasetPipeline.editPipelineInfoNameRequired', }) }) }) diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx index 3dcff12e9d..a6a3fb87ce 100644 --- a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx +++ b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx @@ -1,7 +1,6 @@ import type { PipelineTemplate } from '@/models/pipeline' import { fireEvent, render, screen, waitFor } from '@testing-library/react' import { beforeEach, describe, expect, it, vi } from 'vitest' -import Toast from '@/app/components/base/toast' import { ChunkingMode } from '@/models/datasets' import TemplateCard from '../index' @@ -15,12 +14,21 @@ vi.mock('@/app/components/base/amplitude', () => ({ trackEvent: vi.fn(), })) -vi.mock('@/app/components/base/toast', () => ({ - default: { - notify: vi.fn(), - }, +const { mockToastAdd } = vi.hoisted(() => ({ + mockToastAdd: vi.fn(), })) +vi.mock('@/app/components/base/ui/toast', async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + toast: { + ...actual.toast, + add: mockToastAdd, + }, + } +}) + // Mock download utilities vi.mock('@/utils/download', () => ({ downloadBlob: vi.fn(), @@ -174,6 +182,7 @@ describe('TemplateCard', () => { beforeEach(() => { vi.clearAllMocks() + mockToastAdd.mockReset() mockIsExporting = false _capturedOnConfirm = undefined _capturedOnCancel = undefined @@ -228,9 +237,9 @@ describe('TemplateCard', () => { fireEvent.click(chooseButton) await waitFor(() => { - expect(Toast.notify).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'error', - message: expect.any(String), + title: expect.any(String), }) }) }) @@ -291,9 +300,9 @@ describe('TemplateCard', () => { fireEvent.click(chooseButton) await waitFor(() => { - expect(Toast.notify).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'success', - message: expect.any(String), + title: expect.any(String), }) }) }) @@ -309,9 +318,9 @@ describe('TemplateCard', () => { fireEvent.click(chooseButton) await waitFor(() => { - expect(Toast.notify).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'error', - message: expect.any(String), + title: expect.any(String), }) }) }) @@ -458,9 +467,9 @@ describe('TemplateCard', () => { fireEvent.click(exportButton) await waitFor(() => { - expect(Toast.notify).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'success', - message: expect.any(String), + title: expect.any(String), }) }) }) @@ -476,9 +485,9 @@ describe('TemplateCard', () => { fireEvent.click(exportButton) await waitFor(() => { - expect(Toast.notify).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'error', - message: expect.any(String), + title: expect.any(String), }) }) }) diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/__tests__/index.spec.tsx index 894ee60060..f072248de3 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/__tests__/index.spec.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/__tests__/index.spec.tsx @@ -32,16 +32,21 @@ vi.mock('@/service/base', () => ({ ssePost: mockSsePost, })) -// Mock Toast.notify - static method that manipulates DOM, needs mocking to verify calls -const { mockToastNotify } = vi.hoisted(() => ({ - mockToastNotify: vi.fn(), +// Mock toast.add because the component reports errors through the UI toast manager. +const { mockToastAdd } = vi.hoisted(() => ({ + mockToastAdd: vi.fn(), })) -vi.mock('@/app/components/base/toast', () => ({ - default: { - notify: mockToastNotify, - }, -})) +vi.mock('@/app/components/base/ui/toast', async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + toast: { + ...actual.toast, + add: mockToastAdd, + }, + } +}) // Mock useGetDataSourceAuth - API service hook requires mocking const { mockUseGetDataSourceAuth } = vi.hoisted(() => ({ @@ -192,6 +197,7 @@ const createDefaultProps = (overrides?: Partial): OnlineDo describe('OnlineDocuments', () => { beforeEach(() => { vi.clearAllMocks() + mockToastAdd.mockReset() // Reset store state mockStoreState.documentsData = [] @@ -509,9 +515,9 @@ describe('OnlineDocuments', () => { render() await waitFor(() => { - expect(mockToastNotify).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'error', - message: 'Something went wrong', + title: 'Something went wrong', }) }) }) @@ -774,9 +780,9 @@ describe('OnlineDocuments', () => { render() await waitFor(() => { - expect(mockToastNotify).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'error', - message: 'API Error Message', + title: 'API Error Message', }) }) }) @@ -1094,9 +1100,9 @@ describe('OnlineDocuments', () => { render() await waitFor(() => { - expect(mockToastNotify).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'error', - message: 'Failed to fetch documents', + title: 'Failed to fetch documents', }) }) diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/index.spec.tsx index 1721b72e1c..418ceee442 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/index.spec.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/index.spec.tsx @@ -45,15 +45,20 @@ vi.mock('@/service/use-datasource', () => ({ useGetDataSourceAuth: mockUseGetDataSourceAuth, })) -const { mockToastNotify } = vi.hoisted(() => ({ - mockToastNotify: vi.fn(), +const { mockToastAdd } = vi.hoisted(() => ({ + mockToastAdd: vi.fn(), })) -vi.mock('@/app/components/base/toast', () => ({ - default: { - notify: mockToastNotify, - }, -})) +vi.mock('@/app/components/base/ui/toast', async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + toast: { + ...actual.toast, + add: mockToastAdd, + }, + } +}) // Note: zustand/react/shallow useShallow is imported directly (simple utility function) @@ -231,6 +236,7 @@ const resetMockStoreState = () => { describe('OnlineDrive', () => { beforeEach(() => { vi.clearAllMocks() + mockToastAdd.mockReset() // Reset store state resetMockStoreState() @@ -541,9 +547,9 @@ describe('OnlineDrive', () => { render() await waitFor(() => { - expect(mockToastNotify).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'error', - message: errorMessage, + title: errorMessage, }) }) }) @@ -915,9 +921,9 @@ describe('OnlineDrive', () => { render() await waitFor(() => { - expect(mockToastNotify).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'error', - message: errorMessage, + title: errorMessage, }) }) }) diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/__tests__/index.spec.tsx index c147e969a6..d47b083f35 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/__tests__/index.spec.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/__tests__/index.spec.tsx @@ -1,13 +1,26 @@ -import type { MockInstance } from 'vitest' import type { RAGPipelineVariables } from '@/models/pipeline' import { fireEvent, render, screen } from '@testing-library/react' import * as React from 'react' import { BaseFieldType } from '@/app/components/base/form/form-scenarios/base/types' -import Toast from '@/app/components/base/toast' import { CrawlStep } from '@/models/datasets' import { PipelineInputVarType } from '@/models/pipeline' import Options from '../index' +const { mockToastAdd } = vi.hoisted(() => ({ + mockToastAdd: vi.fn(), +})) + +vi.mock('@/app/components/base/ui/toast', async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + toast: { + ...actual.toast, + add: mockToastAdd, + }, + } +}) + // Mock useInitialData and useConfigurations hooks const { mockUseInitialData, mockUseConfigurations } = vi.hoisted(() => ({ mockUseInitialData: vi.fn(), @@ -116,13 +129,9 @@ const createDefaultProps = (overrides?: Partial): OptionsProps => }) describe('Options', () => { - let toastNotifySpy: MockInstance - beforeEach(() => { vi.clearAllMocks() - - // Spy on Toast.notify instead of mocking the entire module - toastNotifySpy = vi.spyOn(Toast, 'notify').mockImplementation(() => ({ clear: vi.fn() })) + mockToastAdd.mockReset() // Reset mock form values Object.keys(mockFormValues).forEach(key => delete mockFormValues[key]) @@ -132,10 +141,6 @@ describe('Options', () => { mockUseConfigurations.mockReturnValue([createMockConfiguration()]) }) - afterEach(() => { - toastNotifySpy.mockRestore() - }) - describe('Rendering', () => { it('should render without crashing', () => { const props = createDefaultProps() @@ -638,7 +643,7 @@ describe('Options', () => { fireEvent.click(screen.getByRole('button')) // Assert - Toast should be called with error message - expect(toastNotifySpy).toHaveBeenCalledWith( + expect(mockToastAdd).toHaveBeenCalledWith( expect.objectContaining({ type: 'error', }), @@ -660,10 +665,10 @@ describe('Options', () => { fireEvent.click(screen.getByRole('button')) // Assert - Toast message should contain field path - expect(toastNotifySpy).toHaveBeenCalledWith( + expect(mockToastAdd).toHaveBeenCalledWith( expect.objectContaining({ type: 'error', - message: expect.stringContaining('email_address'), + title: expect.stringContaining('email_address'), }), ) }) @@ -714,8 +719,8 @@ describe('Options', () => { fireEvent.click(screen.getByRole('button')) // Assert - Toast should be called once (only first error) - expect(toastNotifySpy).toHaveBeenCalledTimes(1) - expect(toastNotifySpy).toHaveBeenCalledWith( + expect(mockToastAdd).toHaveBeenCalledTimes(1) + expect(mockToastAdd).toHaveBeenCalledWith( expect.objectContaining({ type: 'error', }), @@ -738,7 +743,7 @@ describe('Options', () => { fireEvent.click(screen.getByRole('button')) // Assert - No toast error, onSubmit called - expect(toastNotifySpy).not.toHaveBeenCalled() + expect(mockToastAdd).not.toHaveBeenCalled() expect(mockOnSubmit).toHaveBeenCalled() }) @@ -835,7 +840,7 @@ describe('Options', () => { fireEvent.click(screen.getByRole('button')) expect(mockOnSubmit).toHaveBeenCalled() - expect(toastNotifySpy).not.toHaveBeenCalled() + expect(mockToastAdd).not.toHaveBeenCalled() }) it('should fail validation with invalid data', () => { @@ -854,7 +859,7 @@ describe('Options', () => { fireEvent.click(screen.getByRole('button')) expect(mockOnSubmit).not.toHaveBeenCalled() - expect(toastNotifySpy).toHaveBeenCalled() + expect(mockToastAdd).toHaveBeenCalled() }) it('should show error toast message when validation fails', () => { @@ -871,10 +876,10 @@ describe('Options', () => { fireEvent.click(screen.getByRole('button')) - expect(toastNotifySpy).toHaveBeenCalledWith( + expect(mockToastAdd).toHaveBeenCalledWith( expect.objectContaining({ type: 'error', - message: expect.any(String), + title: expect.any(String), }), ) }) diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/__tests__/online-document-preview.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/__tests__/online-document-preview.spec.tsx index 947313cda5..998f34540b 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/preview/__tests__/online-document-preview.spec.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/preview/__tests__/online-document-preview.spec.tsx @@ -1,13 +1,24 @@ import type { NotionPage } from '@/models/common' import { fireEvent, render, screen, waitFor } from '@testing-library/react' import * as React from 'react' -import Toast from '@/app/components/base/toast' import OnlineDocumentPreview from '../online-document-preview' // Uses global react-i18next mock from web/vitest.setup.ts -// Spy on Toast.notify -const toastNotifySpy = vi.spyOn(Toast, 'notify') +const { mockToastAdd } = vi.hoisted(() => ({ + mockToastAdd: vi.fn(), +})) + +vi.mock('@/app/components/base/ui/toast', async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + toast: { + ...actual.toast, + add: mockToastAdd, + }, + } +}) // Mock dataset-detail context - needs mock to control return values const mockPipelineId = vi.fn() @@ -56,6 +67,7 @@ const defaultProps = { describe('OnlineDocumentPreview', () => { beforeEach(() => { vi.clearAllMocks() + mockToastAdd.mockReset() mockPipelineId.mockReturnValue('pipeline-123') mockUsePreviewOnlineDocument.mockReturnValue({ mutateAsync: mockMutateAsync, @@ -258,9 +270,9 @@ describe('OnlineDocumentPreview', () => { render() await waitFor(() => { - expect(toastNotifySpy).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'error', - message: errorMessage, + title: errorMessage, }) }) }) @@ -276,9 +288,9 @@ describe('OnlineDocumentPreview', () => { render() await waitFor(() => { - expect(toastNotifySpy).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'error', - message: 'Network Error', + title: 'Network Error', }) }) }) diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/components.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/components.spec.tsx index c82b5a8468..31363f8784 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/components.spec.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/components.spec.tsx @@ -3,13 +3,24 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react' import * as React from 'react' import * as z from 'zod' import { BaseFieldType } from '@/app/components/base/form/form-scenarios/base/types' -import Toast from '@/app/components/base/toast' import Actions from '../actions' import Form from '../form' import Header from '../header' -// Spy on Toast.notify for validation tests -const toastNotifySpy = vi.spyOn(Toast, 'notify') +const { mockToastAdd } = vi.hoisted(() => ({ + mockToastAdd: vi.fn(), +})) + +vi.mock('@/app/components/base/ui/toast', async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + toast: { + ...actual.toast, + add: mockToastAdd, + }, + } +}) // Test Data Factory Functions @@ -335,7 +346,7 @@ describe('Form', () => { beforeEach(() => { vi.clearAllMocks() - toastNotifySpy.mockClear() + mockToastAdd.mockReset() }) describe('Rendering', () => { @@ -444,9 +455,9 @@ describe('Form', () => { // Assert - validation error should be shown await waitFor(() => { - expect(toastNotifySpy).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'error', - message: '"field1" is required', + title: '"field1" is required', }) }) }) @@ -566,9 +577,9 @@ describe('Form', () => { fireEvent.submit(form) await waitFor(() => { - expect(toastNotifySpy).toHaveBeenCalledWith({ + expect(mockToastAdd).toHaveBeenCalledWith({ type: 'error', - message: '"field1" is required', + title: '"field1" is required', }) }) }) @@ -583,7 +594,7 @@ describe('Form', () => { // Assert - wait a bit and verify onSubmit was not called await waitFor(() => { - expect(toastNotifySpy).toHaveBeenCalled() + expect(mockToastAdd).toHaveBeenCalled() }) expect(onSubmit).not.toHaveBeenCalled() }) diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/form.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/form.spec.tsx index 25ac817284..9b13ce8132 100644 --- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/form.spec.tsx +++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/form.spec.tsx @@ -2,10 +2,23 @@ import type { BaseConfiguration } from '@/app/components/base/form/form-scenario import { fireEvent, render, screen, waitFor } from '@testing-library/react' import { beforeEach, describe, expect, it, vi } from 'vitest' import { z } from 'zod' -import Toast from '@/app/components/base/toast' - import Form from '../form' +const { mockToastAdd } = vi.hoisted(() => ({ + mockToastAdd: vi.fn(), +})) + +vi.mock('@/app/components/base/ui/toast', async (importOriginal) => { + const actual = await importOriginal() + return { + ...actual, + toast: { + ...actual.toast, + add: mockToastAdd, + }, + } +}) + // Mock the Header component (sibling component, not a base component) vi.mock('../header', () => ({ default: ({ onReset, resetDisabled, onPreview, previewDisabled }: { @@ -44,7 +57,7 @@ const defaultProps = { describe('Form (process-documents)', () => { beforeEach(() => { vi.clearAllMocks() - vi.spyOn(Toast, 'notify').mockImplementation(() => ({ clear: vi.fn() })) + mockToastAdd.mockReset() }) // Verify basic rendering of form structure @@ -106,8 +119,11 @@ describe('Form (process-documents)', () => { fireEvent.submit(form) await waitFor(() => { - expect(Toast.notify).toHaveBeenCalledWith( - expect.objectContaining({ type: 'error' }), + expect(mockToastAdd).toHaveBeenCalledWith( + expect.objectContaining({ + type: 'error', + title: '"name" Name is required', + }), ) }) }) @@ -121,7 +137,7 @@ describe('Form (process-documents)', () => { await waitFor(() => { expect(defaultProps.onSubmit).toHaveBeenCalled() }) - expect(Toast.notify).not.toHaveBeenCalled() + expect(mockToastAdd).not.toHaveBeenCalled() }) }) diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/tts-params-panel.spec.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/tts-params-panel.spec.tsx index a5633b30d1..94ac5ab05a 100644 --- a/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/tts-params-panel.spec.tsx +++ b/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/tts-params-panel.spec.tsx @@ -1,4 +1,5 @@ import { fireEvent, render, screen } from '@testing-library/react' +import * as React from 'react' import { beforeEach, describe, expect, it, vi } from 'vitest' // Import component after mocks @@ -17,44 +18,73 @@ vi.mock('@/i18n-config/language', () => ({ ], })) -// Mock PortalSelect component -vi.mock('@/app/components/base/select', () => ({ - PortalSelect: ({ +const MockSelectContext = React.createContext<{ + value: string + onValueChange: (value: string) => void +}>({ + value: '', + onValueChange: () => {}, +}) + +vi.mock('@/app/components/base/ui/select', () => ({ + Select: ({ value, - items, - onSelect, - triggerClassName, - popupClassName, - popupInnerClassName, + onValueChange, + children, }: { value: string - items: Array<{ value: string, name: string }> - onSelect: (item: { value: string }) => void - triggerClassName?: string - popupClassName?: string - popupInnerClassName?: string + onValueChange: (value: string) => void + children: React.ReactNode }) => ( -
    - {value} -
    - {items.map(item => ( - - ))} -
    + +
    {children}
    +     + ), + SelectTrigger: ({ + children, + className, + 'data-testid': testId, + }: { + 'children': React.ReactNode + 'className'?: string + 'data-testid'?: string + }) => ( + + ), + SelectValue: () => { + const { value } = React.useContext(MockSelectContext) + return {value} + }, + SelectContent: ({ + children, + popupClassName, + }: { + children: React.ReactNode + popupClassName?: string + }) => ( +
    + {children}
    ), + SelectItem: ({ + children, + value, + }: { + children: React.ReactNode + value: string + }) => { + const { onValueChange } = React.useContext(MockSelectContext) + return ( + + ) + }, })) // ==================== Test Utilities ==================== @@ -139,7 +169,7 @@ describe('TTSParamsPanel', () => { expect(screen.getByText('appDebug.voice.voiceSettings.voice')).toBeInTheDocument() }) - it('should render two PortalSelect components', () => { + it('should render two Select components', () => { // Arrange const props = createDefaultProps() @@ -147,7 +177,7 @@ describe('TTSParamsPanel', () => { render() // Assert - const selects = screen.getAllByTestId('portal-select') + const selects = screen.getAllByTestId('select-root') expect(selects).toHaveLength(2) }) @@ -159,8 +189,8 @@ describe('TTSParamsPanel', () => { render() // Assert - const selects = screen.getAllByTestId('portal-select') - expect(selects[0]).toHaveAttribute('data-value', 'zh-Hans') + const values = screen.getAllByTestId('selected-value') + expect(values[0]).toHaveTextContent('zh-Hans') }) it('should render voice select with correct value', () => { @@ -171,8 +201,8 @@ describe('TTSParamsPanel', () => { render() // Assert - const selects = screen.getAllByTestId('portal-select') - expect(selects[1]).toHaveAttribute('data-value', 'echo') + const values = screen.getAllByTestId('selected-value') + expect(values[1]).toHaveTextContent('echo') }) it('should only show supported languages in language select', () => { @@ -205,7 +235,7 @@ describe('TTSParamsPanel', () => { // ==================== Props Testing ==================== describe('Props', () => { - it('should apply trigger className to PortalSelect', () => { + it('should apply trigger className to SelectTrigger', () => { // Arrange const props = createDefaultProps() @@ -213,12 +243,11 @@ describe('TTSParamsPanel', () => { render() // Assert - const selects = screen.getAllByTestId('portal-select') - expect(selects[0]).toHaveAttribute('data-trigger-class', 'h-8') - expect(selects[1]).toHaveAttribute('data-trigger-class', 'h-8') + expect(screen.getByTestId('tts-language-select-trigger')).toHaveAttribute('data-class', 'w-full') + expect(screen.getByTestId('tts-voice-select-trigger')).toHaveAttribute('data-class', 'w-full') }) - it('should apply popup className to PortalSelect', () => { + it('should apply popup className to SelectContent', () => { // Arrange const props = createDefaultProps() @@ -226,22 +255,9 @@ describe('TTSParamsPanel', () => { render() // Assert - const selects = screen.getAllByTestId('portal-select') - expect(selects[0]).toHaveAttribute('data-popup-class', 'z-[1000]') - expect(selects[1]).toHaveAttribute('data-popup-class', 'z-[1000]') - }) - - it('should apply popup inner className to PortalSelect', () => { - // Arrange - const props = createDefaultProps() - - // Act - render() - - // Assert - const selects = screen.getAllByTestId('portal-select') - expect(selects[0]).toHaveAttribute('data-popup-inner-class', 'w-[354px]') - expect(selects[1]).toHaveAttribute('data-popup-inner-class', 'w-[354px]') + const contents = screen.getAllByTestId('select-content') + expect(contents[0]).toHaveAttribute('data-popup-class', 'w-[354px]') + expect(contents[1]).toHaveAttribute('data-popup-class', 'w-[354px]') }) }) @@ -411,10 +427,8 @@ describe('TTSParamsPanel', () => { render() // Assert - no voice items (except language items) - const voiceSelects = screen.getAllByTestId('portal-select') - // Second select is voice select, should have no voice items in items-container - const voiceItemsContainer = voiceSelects[1].querySelector('[data-testid="items-container"]') - expect(voiceItemsContainer?.children).toHaveLength(0) + expect(screen.getAllByTestId('select-content')[1].children).toHaveLength(0) + expect(screen.queryByTestId('select-item-alloy')).not.toBeInTheDocument() }) it('should handle currentModel with single voice', () => { @@ -443,8 +457,8 @@ describe('TTSParamsPanel', () => { render() // Assert - const selects = screen.getAllByTestId('portal-select') - expect(selects[0]).toHaveAttribute('data-value', '') + const values = screen.getAllByTestId('selected-value') + expect(values[0]).toHaveTextContent('') }) it('should handle empty voice value', () => { @@ -455,8 +469,8 @@ describe('TTSParamsPanel', () => { render() // Assert - const selects = screen.getAllByTestId('portal-select') - expect(selects[1]).toHaveAttribute('data-value', '') + const values = screen.getAllByTestId('selected-value') + expect(values[1]).toHaveTextContent('') }) it('should handle many voices', () => { @@ -514,14 +528,14 @@ describe('TTSParamsPanel', () => { // Act const { rerender } = render() - const selects = screen.getAllByTestId('portal-select') - expect(selects[0]).toHaveAttribute('data-value', 'en-US') + const values = screen.getAllByTestId('selected-value') + expect(values[0]).toHaveTextContent('en-US') rerender() // Assert - const updatedSelects = screen.getAllByTestId('portal-select') - expect(updatedSelects[0]).toHaveAttribute('data-value', 'zh-Hans') + const updatedValues = screen.getAllByTestId('selected-value') + expect(updatedValues[0]).toHaveTextContent('zh-Hans') }) it('should update when voice prop changes', () => { @@ -530,14 +544,14 @@ describe('TTSParamsPanel', () => { // Act const { rerender } = render() - const selects = screen.getAllByTestId('portal-select') - expect(selects[1]).toHaveAttribute('data-value', 'alloy') + const values = screen.getAllByTestId('selected-value') + expect(values[1]).toHaveTextContent('alloy') rerender() // Assert - const updatedSelects = screen.getAllByTestId('portal-select') - expect(updatedSelects[1]).toHaveAttribute('data-value', 'echo') + const updatedValues = screen.getAllByTestId('selected-value') + expect(updatedValues[1]).toHaveTextContent('echo') }) it('should update voice list when currentModel changes', () => { diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx index 97947f48c1..461b229602 100644 --- a/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx +++ b/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx @@ -1,9 +1,8 @@ import * as React from 'react' import { useMemo } from 'react' import { useTranslation } from 'react-i18next' -import { PortalSelect } from '@/app/components/base/select' +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/app/components/base/ui/select' import { languages } from '@/i18n-config/language' -import { cn } from '@/utils/classnames' type Props = { currentModel: any @@ -12,6 +11,8 @@ type Props = { onChange: (language: string, voice: string) => void } +const supportedLanguages = languages.filter(item => item.supported) + const TTSParamsPanel = ({ currentModel, language, @@ -19,11 +20,11 @@ const TTSParamsPanel = ({ onChange, }: Props) => { const { t } = useTranslation() - const voiceList = useMemo(() => { + const voiceList = useMemo>(() => { if (!currentModel) return [] - return currentModel.model_properties.voices.map((item: { mode: any }) => ({ - ...item, + return currentModel.model_properties.voices.map((item: { mode: string, name: string }) => ({ + label: item.name, value: item.mode, })) }, [currentModel]) @@ -39,27 +40,57 @@ const TTSParamsPanel = ({
    {t('voice.voiceSettings.language', { ns: 'appDebug' })}
    - item.supported)} - onSelect={item => setLanguage(item.value as string)} - /> + onValueChange={(value) => { + if (value == null) + return + setLanguage(value) + }} + > + + + + + {supportedLanguages.map(item => ( + + {item.name} + + ))} + +
    {t('voice.voiceSettings.voice', { ns: 'appDebug' })}
    - setVoice(item.value as string)} - /> + onValueChange={(value) => { + if (value == null) + return + setVoice(value) + }} + > + + + + + {voiceList.map(item => ( + + {item.label} + + ))} + +
    ) diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx index b9953bd249..21a4c3defa 100644 --- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx +++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx @@ -1333,12 +1333,9 @@ describe('CommonCreateModal', () => { mockVerifyCredentials.mockImplementation((params, { onSuccess }) => { onSuccess() }) + const builder = createMockSubscriptionBuilder() - render() - - await waitFor(() => { - expect(mockCreateBuilder).toHaveBeenCalled() - }) + render() fireEvent.click(screen.getByTestId('modal-confirm')) diff --git a/web/app/components/tools/labels/__tests__/filter.spec.tsx b/web/app/components/tools/labels/__tests__/filter.spec.tsx index 7b88cb1bbd..4dc6a8f88c 100644 --- a/web/app/components/tools/labels/__tests__/filter.spec.tsx +++ b/web/app/components/tools/labels/__tests__/filter.spec.tsx @@ -18,32 +18,11 @@ vi.mock('@/app/components/plugins/hooks', () => ({ }), })) -// Mock useDebounceFn to store the function and allow manual triggering -let debouncedFn: (() => void) | null = null -vi.mock('ahooks', () => ({ - useDebounceFn: (fn: () => void) => { - debouncedFn = fn - return { - run: () => { - // Schedule to run after React state updates - setTimeout(() => debouncedFn?.(), 0) - }, - cancel: vi.fn(), - } - }, -})) - describe('LabelFilter', () => { const mockOnChange = vi.fn() beforeEach(() => { vi.clearAllMocks() - vi.useFakeTimers() - debouncedFn = null - }) - - afterEach(() => { - vi.useRealTimers() }) // Rendering Tests @@ -81,36 +60,23 @@ describe('LabelFilter', () => { const trigger = screen.getByText('common.tag.placeholder') - await act(async () => { - fireEvent.click(trigger) - vi.advanceTimersByTime(10) - }) + await act(async () => fireEvent.click(trigger)) mockTags.forEach((tag) => { expect(screen.getByText(tag.label)).toBeInTheDocument() }) }) - it('should close dropdown when trigger is clicked again', async () => { + it('should render search input when dropdown is open', async () => { render() - const trigger = screen.getByText('common.tag.placeholder') + const trigger = screen.getByText('common.tag.placeholder').closest('button') + expect(trigger).toBeInTheDocument() - // Open - await act(async () => { - fireEvent.click(trigger) - vi.advanceTimersByTime(10) - }) + await act(async () => fireEvent.click(trigger!)) expect(screen.getByText('Agent')).toBeInTheDocument() - - // Close - await act(async () => { - fireEvent.click(trigger) - vi.advanceTimersByTime(10) - }) - - expect(screen.queryByRole('textbox')).not.toBeInTheDocument() + expect(screen.getByRole('textbox')).toBeInTheDocument() }) }) @@ -119,17 +85,11 @@ describe('LabelFilter', () => { it('should call onChange with selected label when clicking a label', async () => { render() - await act(async () => { - fireEvent.click(screen.getByText('common.tag.placeholder')) - vi.advanceTimersByTime(10) - }) + await act(async () => fireEvent.click(screen.getByText('common.tag.placeholder'))) expect(screen.getByText('Agent')).toBeInTheDocument() - await act(async () => { - fireEvent.click(screen.getByText('Agent')) - vi.advanceTimersByTime(10) - }) + await act(async () => fireEvent.click(screen.getByText('Agent'))) expect(mockOnChange).toHaveBeenCalledWith(['agent']) }) @@ -137,10 +97,7 @@ describe('LabelFilter', () => { it('should remove label from selection when clicking already selected label', async () => { render() - await act(async () => { - fireEvent.click(screen.getByText('Agent')) - vi.advanceTimersByTime(10) - }) + await act(async () => fireEvent.click(screen.getByText('Agent'))) // Find the label item in the dropdown list const labelItems = screen.getAllByText('Agent') @@ -149,7 +106,6 @@ describe('LabelFilter', () => { await act(async () => { if (dropdownItem) fireEvent.click(dropdownItem) - vi.advanceTimersByTime(10) }) expect(mockOnChange).toHaveBeenCalledWith([]) @@ -158,17 +114,11 @@ describe('LabelFilter', () => { it('should add label to existing selection', async () => { render() - await act(async () => { - fireEvent.click(screen.getByText('Agent')) - vi.advanceTimersByTime(10) - }) + await act(async () => fireEvent.click(screen.getByText('Agent'))) expect(screen.getByText('RAG')).toBeInTheDocument() - await act(async () => { - fireEvent.click(screen.getByText('RAG')) - vi.advanceTimersByTime(10) - }) + await act(async () => fireEvent.click(screen.getByText('RAG'))) expect(mockOnChange).toHaveBeenCalledWith(['agent', 'rag']) }) @@ -179,8 +129,7 @@ describe('LabelFilter', () => { it('should clear all selections when clear button is clicked', async () => { render() - // Find and click the clear button (XCircle icon's parent) - const clearButton = document.querySelector('.group\\/clear') + const clearButton = screen.getByRole('button', { name: 'common.operation.clear' }) expect(clearButton).toBeInTheDocument() fireEvent.click(clearButton!) @@ -203,21 +152,16 @@ describe('LabelFilter', () => { await act(async () => { fireEvent.click(screen.getByText('common.tag.placeholder')) - vi.advanceTimersByTime(10) }) expect(screen.getByRole('textbox')).toBeInTheDocument() await act(async () => { const searchInput = screen.getByRole('textbox') - // Filter by 'rag' which only matches 'rag' name fireEvent.change(searchInput, { target: { value: 'rag' } }) - vi.advanceTimersByTime(10) }) - // Only RAG should be visible (rag contains 'rag') expect(screen.getByTitle('RAG')).toBeInTheDocument() - // Agent should not be in the dropdown list (agent doesn't contain 'rag') expect(screen.queryByTitle('Agent')).not.toBeInTheDocument() }) @@ -226,7 +170,6 @@ describe('LabelFilter', () => { await act(async () => { fireEvent.click(screen.getByText('common.tag.placeholder')) - vi.advanceTimersByTime(10) }) expect(screen.getByRole('textbox')).toBeInTheDocument() @@ -234,7 +177,6 @@ describe('LabelFilter', () => { await act(async () => { const searchInput = screen.getByRole('textbox') fireEvent.change(searchInput, { target: { value: 'nonexistent' } }) - vi.advanceTimersByTime(10) }) expect(screen.getByText('common.tag.noTag')).toBeInTheDocument() @@ -245,26 +187,21 @@ describe('LabelFilter', () => { await act(async () => { fireEvent.click(screen.getByText('common.tag.placeholder')) - vi.advanceTimersByTime(10) }) expect(screen.getByRole('textbox')).toBeInTheDocument() await act(async () => { const searchInput = screen.getByRole('textbox') - // First filter to show only RAG fireEvent.change(searchInput, { target: { value: 'rag' } }) - vi.advanceTimersByTime(10) }) expect(screen.getByTitle('RAG')).toBeInTheDocument() expect(screen.queryByTitle('Agent')).not.toBeInTheDocument() await act(async () => { - // Clear the input const searchInput = screen.getByRole('textbox') fireEvent.change(searchInput, { target: { value: '' } }) - vi.advanceTimersByTime(10) }) // All labels should be visible again @@ -310,17 +247,11 @@ describe('LabelFilter', () => { it('should call onChange with updated array', async () => { render() - await act(async () => { - fireEvent.click(screen.getByText('common.tag.placeholder')) - vi.advanceTimersByTime(10) - }) + await act(async () => fireEvent.click(screen.getByText('common.tag.placeholder'))) expect(screen.getByText('Agent')).toBeInTheDocument() - await act(async () => { - fireEvent.click(screen.getByText('Agent')) - vi.advanceTimersByTime(10) - }) + await act(async () => fireEvent.click(screen.getByText('Agent'))) expect(mockOnChange).toHaveBeenCalledTimes(1) expect(mockOnChange).toHaveBeenCalledWith(['agent']) diff --git a/web/app/components/tools/labels/filter.tsx b/web/app/components/tools/labels/filter.tsx index 9c1b56d88b..1dadad0b4a 100644 --- a/web/app/components/tools/labels/filter.tsx +++ b/web/app/components/tools/labels/filter.tsx @@ -1,7 +1,6 @@ import type { FC } from 'react' import type { Label } from '@/app/components/tools/labels/constant' import { RiArrowDownSLine } from '@remixicon/react' -import { useDebounceFn } from 'ahooks' import { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import { Tag01, Tag03 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce' @@ -9,10 +8,10 @@ import { Check } from '@/app/components/base/icons/src/vender/line/general' import { XCircle } from '@/app/components/base/icons/src/vender/solid/general' import Input from '@/app/components/base/input' import { - PortalToFollowElem, - PortalToFollowElemContent, - PortalToFollowElemTrigger, -} from '@/app/components/base/portal-to-follow-elem' + Popover, + PopoverContent, + PopoverTrigger, +} from '@/app/components/base/ui/popover' import { useTags } from '@/app/components/plugins/hooks' import { cn } from '@/utils/classnames' @@ -30,18 +29,10 @@ const LabelFilter: FC = ({ const { tags: labelList } = useTags() const [keywords, setKeywords] = useState('') - const [searchKeywords, setSearchKeywords] = useState('') - const { run: handleSearch } = useDebounceFn(() => { - setSearchKeywords(keywords) - }, { wait: 500 }) - const handleKeywordsChange = (value: string) => { - setKeywords(value) - handleSearch() - } const filteredLabelList = useMemo(() => { - return labelList.filter(label => label.name.includes(searchKeywords)) - }, [labelList, searchKeywords]) + return labelList.filter(label => label.name.includes(keywords)) + }, [labelList, keywords]) const currentLabel = useMemo(() => { return labelList.find(label => label.name === value[0]) @@ -55,72 +46,70 @@ const LabelFilter: FC = ({ } return ( -
    - setOpen(v => !v)} - className="block" - > -
    -
    - -
    -
    - {!value.length && t('tag.placeholder', { ns: 'common' })} - {!!value.length && currentLabel?.label} -
    - {value.length > 1 && ( -
    {`+${value.length - 1}`}
    - )} - {!value.length && ( -
    - -
    - )} - {!!value.length && ( -
    { - e.stopPropagation() - onChange([]) - }} - > - -
    - )} + > +
    +
    - - -
    +
    + {!value.length && t('tag.placeholder', { ns: 'common' })} + {!!value.length && currentLabel?.label} +
    + {value.length > 1 && ( +
    {`+${value.length - 1}`}
    + )} + {!value.length && ( +
    + +
    + )} + + {!!value.length && ( + + )} + +
    handleKeywordsChange(e.target.value)} - onClear={() => handleKeywordsChange('')} + onChange={e => setKeywords(e.target.value)} + onClear={() => setKeywords('')} />
    {filteredLabelList.map(label => ( -
    selectLabel(label)} >
    {label.label}
    {value.includes(label.name) && } -
    + ))} {!filteredLabelList.length && (
    @@ -130,9 +119,9 @@ const LabelFilter: FC = ({ )}
    - +
    - + ) } diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json index 92774e8d60..1b4b9c2ff8 100644 --- a/web/eslint-suppressions.json +++ b/web/eslint-suppressions.json @@ -1325,9 +1325,6 @@ } }, "app/components/app/type-selector/index.tsx": { - "no-restricted-imports": { - "count": 1 - }, "tailwindcss/enforce-consistent-class-order": { "count": 3 } @@ -5211,14 +5208,11 @@ } }, "app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx": { - "no-restricted-imports": { - "count": 1 - }, "tailwindcss/enforce-consistent-class-order": { "count": 2 }, "ts/no-explicit-any": { - "count": 2 + "count": 1 } }, "app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx": { @@ -5975,14 +5969,6 @@ "count": 1 } }, - "app/components/tools/labels/filter.tsx": { - "no-restricted-imports": { - "count": 1 - }, - "tailwindcss/no-unnecessary-whitespace": { - "count": 1 - } - }, "app/components/tools/labels/selector.tsx": { "no-restricted-imports": { "count": 1