opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-09-05 00:31:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): standardize label search inputs (#40914)

Browse Source
This commit is contained in:
yyh 2026-08-18 04:05:26 +00:00 committed by GitHub
parent 32c11fd06e
commit 809a6cff1e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 20 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
oxlint-suppressions.json
View File

@ -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

16
web/app/components/tools/labels/__tests__/filter.spec.tsx
View File

@ -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: '' } })
})

16
web/app/components/tools/labels/__tests__/selector.spec.tsx
View File

@ -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)
})

10
web/app/components/tools/labels/filter.tsx
View File

@ -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<LabelFilterProps> = ({ value, onChange }) => {
>
<div className="relative">
<div className="p-2">
<Input
showLeftIcon
showClearIcon
value={keywords}
onChange={(e) => setKeywords(e.target.value)}
onClear={() => setKeywords('')}
/>
<SearchInput value={keywords} onValueChange={setKeywords} />
</div>
<div className="p-1">
{filteredLabelList.map((label) => (

10
web/app/components/tools/labels/selector.tsx
View File

@ -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) {
>
<div className="relative w-147.75 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
<div className="border-b-[0.5px] border-divider-regular p-2">
<Input
showLeftIcon
showClearIcon
value={keywords}
onChange={(e) => handleKeywordsChange(e.target.value)}
onClear={() => handleKeywordsChange('')}
/>
<SearchInput value={keywords} onValueChange={handleKeywordsChange} />
</div>
<CheckboxGroup
aria-label={t(($) => $['createTool.toolInput.labelPlaceholder'], { ns: 'tools' })}