From 809a6cff1ebd1ac5d32f7a40304e9e2caa2c345c Mon Sep 17 00:00:00 2001 From: yyh <92089059+lyzno1@users.noreply.github.com> Date: Tue, 18 Aug 2026 04:05:26 +0000 Subject: [PATCH] refactor(web): standardize label search inputs (#40914) --- oxlint-suppressions.json | 10 ---------- .../tools/labels/__tests__/filter.spec.tsx | 16 ++++++++-------- .../tools/labels/__tests__/selector.spec.tsx | 16 ++++++++-------- web/app/components/tools/labels/filter.tsx | 10 ++-------- web/app/components/tools/labels/selector.tsx | 10 ++-------- 5 files changed, 20 insertions(+), 42 deletions(-) diff --git a/oxlint-suppressions.json b/oxlint-suppressions.json index 9aca34bd8d3..4c280c7382f 100644 --- a/oxlint-suppressions.json +++ b/oxlint-suppressions.json @@ -3303,16 +3303,6 @@ "count": 1 } }, - "web/app/components/tools/labels/filter.tsx": { - "no-restricted-imports": { - "count": 1 - } - }, - "web/app/components/tools/labels/selector.tsx": { - "no-restricted-imports": { - "count": 1 - } - }, "web/app/components/tools/mcp/mcp-server-param-item.tsx": { "typescript/no-explicit-any": { "count": 1 diff --git a/web/app/components/tools/labels/__tests__/filter.spec.tsx b/web/app/components/tools/labels/__tests__/filter.spec.tsx index 82dfb9320f2..72db41139a2 100644 --- a/web/app/components/tools/labels/__tests__/filter.spec.tsx +++ b/web/app/components/tools/labels/__tests__/filter.spec.tsx @@ -70,7 +70,7 @@ describe('LabelFilter', () => { await act(async () => fireEvent.click(trigger!)) expect(screen.getByText('Agent')).toBeInTheDocument() - expect(screen.getByRole('textbox')).toBeInTheDocument() + expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toBeInTheDocument() }) }) @@ -147,10 +147,10 @@ describe('LabelFilter', () => { fireEvent.click(screen.getByText('common.tag.tags')) }) - expect(screen.getByRole('textbox')).toBeInTheDocument() + expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toBeInTheDocument() await act(async () => { - const searchInput = screen.getByRole('textbox') + const searchInput = screen.getByRole('searchbox', { name: 'common.operation.search' }) fireEvent.change(searchInput, { target: { value: 'rag' } }) }) @@ -165,10 +165,10 @@ describe('LabelFilter', () => { fireEvent.click(screen.getByText('common.tag.tags')) }) - expect(screen.getByRole('textbox')).toBeInTheDocument() + expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toBeInTheDocument() await act(async () => { - const searchInput = screen.getByRole('textbox') + const searchInput = screen.getByRole('searchbox', { name: 'common.operation.search' }) fireEvent.change(searchInput, { target: { value: 'nonexistent' } }) }) @@ -182,10 +182,10 @@ describe('LabelFilter', () => { fireEvent.click(screen.getByText('common.tag.tags')) }) - expect(screen.getByRole('textbox')).toBeInTheDocument() + expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toBeInTheDocument() await act(async () => { - const searchInput = screen.getByRole('textbox') + const searchInput = screen.getByRole('searchbox', { name: 'common.operation.search' }) fireEvent.change(searchInput, { target: { value: 'rag' } }) }) @@ -193,7 +193,7 @@ describe('LabelFilter', () => { expect(screen.queryByRole('button', { name: 'Agent' })).not.toBeInTheDocument() await act(async () => { - const searchInput = screen.getByRole('textbox') + const searchInput = screen.getByRole('searchbox', { name: 'common.operation.search' }) fireEvent.change(searchInput, { target: { value: '' } }) }) diff --git a/web/app/components/tools/labels/__tests__/selector.spec.tsx b/web/app/components/tools/labels/__tests__/selector.spec.tsx index 9a20087662c..85b8ea6f164 100644 --- a/web/app/components/tools/labels/__tests__/selector.spec.tsx +++ b/web/app/components/tools/labels/__tests__/selector.spec.tsx @@ -112,7 +112,7 @@ describe('LabelSelector', () => { vi.advanceTimersByTime(10) }) - expect(screen.queryByRole('textbox')).not.toBeInTheDocument() + expect(screen.queryByRole('searchbox')).not.toBeInTheDocument() }) }) @@ -192,10 +192,10 @@ describe('LabelSelector', () => { vi.advanceTimersByTime(10) }) - expect(screen.getByRole('textbox')).toBeInTheDocument() + expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toBeInTheDocument() await act(async () => { - const searchInput = screen.getByRole('textbox') + const searchInput = screen.getByRole('searchbox', { name: 'common.operation.search' }) // Filter by 'rag' which only matches 'rag' name fireEvent.change(searchInput, { target: { value: 'rag' } }) vi.advanceTimersByTime(10) @@ -215,10 +215,10 @@ describe('LabelSelector', () => { vi.advanceTimersByTime(10) }) - expect(screen.getByRole('textbox')).toBeInTheDocument() + expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toBeInTheDocument() await act(async () => { - const searchInput = screen.getByRole('textbox') + const searchInput = screen.getByRole('searchbox', { name: 'common.operation.search' }) fireEvent.change(searchInput, { target: { value: 'nonexistent' } }) vi.advanceTimersByTime(10) }) @@ -234,10 +234,10 @@ describe('LabelSelector', () => { vi.advanceTimersByTime(10) }) - expect(screen.getByRole('textbox')).toBeInTheDocument() + expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toBeInTheDocument() await act(async () => { - const searchInput = screen.getByRole('textbox') + const searchInput = screen.getByRole('searchbox', { name: 'common.operation.search' }) // First filter to show only RAG fireEvent.change(searchInput, { target: { value: 'rag' } }) vi.advanceTimersByTime(10) @@ -248,7 +248,7 @@ describe('LabelSelector', () => { await act(async () => { // Clear the input - const searchInput = screen.getByRole('textbox') + const searchInput = screen.getByRole('searchbox', { name: 'common.operation.search' }) fireEvent.change(searchInput, { target: { value: '' } }) vi.advanceTimersByTime(10) }) diff --git a/web/app/components/tools/labels/filter.tsx b/web/app/components/tools/labels/filter.tsx index 6b55a9727c1..9d2512b5a45 100644 --- a/web/app/components/tools/labels/filter.tsx +++ b/web/app/components/tools/labels/filter.tsx @@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next' import { Tag03 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce' 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 { SearchInput } from '@/app/components/base/search-input' import { useTags } from '@/app/components/plugins/hooks' type LabelFilterProps = { @@ -76,13 +76,7 @@ const LabelFilter: FC = ({ value, onChange }) => { >
- setKeywords(e.target.value)} - onClear={() => setKeywords('')} - /> +
{filteredLabelList.map((label) => ( diff --git a/web/app/components/tools/labels/selector.tsx b/web/app/components/tools/labels/selector.tsx index 5f910f1aac5..4f283a5d635 100644 --- a/web/app/components/tools/labels/selector.tsx +++ b/web/app/components/tools/labels/selector.tsx @@ -6,7 +6,7 @@ import { useDebounceFn } from 'ahooks' import { useState } from 'react' import { useTranslation } from 'react-i18next' import { Tag03 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce' -import Input from '@/app/components/base/input' +import { SearchInput } from '@/app/components/base/search-input' import { useTags } from '@/app/components/plugins/hooks' type LabelSelectorProps = { @@ -66,13 +66,7 @@ function LabelSelector({ value, onChange }: LabelSelectorProps) { >
- handleKeywordsChange(e.target.value)} - onClear={() => handleKeywordsChange('')} - /> +
$['createTool.toolInput.labelPlaceholder'], { ns: 'tools' })}