diff --git a/web/app/components/plugins/marketplace/search-box/__tests__/index.spec.tsx b/web/app/components/plugins/marketplace/search-box/__tests__/index.spec.tsx
index 8609ba5539..51b4087659 100644
--- a/web/app/components/plugins/marketplace/search-box/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/marketplace/search-box/__tests__/index.spec.tsx
@@ -62,31 +62,38 @@ vi.mock('@/app/components/plugins/hooks', () => ({
}),
}))
-// Mock portal-to-follow-elem with shared open state
+// Mock popover with shared open state
let mockPortalOpenState = false
+let mockPopoverOnOpenChange: ((open: boolean) => void) | undefined
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
- PortalToFollowElem: ({ children, open }: {
+vi.mock('@langgenius/dify-ui/popover', () => ({
+ Popover: ({ children, open, onOpenChange }: {
children: React.ReactNode
open: boolean
+ onOpenChange?: (open: boolean) => void
}) => {
mockPortalOpenState = open
+ mockPopoverOnOpenChange = onOpenChange
return (
)
},
- PortalToFollowElemTrigger: ({ children, onClick, className }: {
- children: React.ReactNode
- onClick: () => void
+ PopoverTrigger: ({ children, render, className }: {
+ children?: React.ReactNode
+ render?: React.ReactNode
className?: string
}) => (
-
- {children}
+
mockPopoverOnOpenChange?.(!mockPortalOpenState)}
+ className={className}
+ >
+ {render ?? children}
),
- PortalToFollowElemContent: ({ children, className }: {
+ PopoverContent: ({ children, className }: {
children: React.ReactNode
className?: string
}) => {
diff --git a/web/app/components/plugins/marketplace/search-box/__tests__/tags-filter.spec.tsx b/web/app/components/plugins/marketplace/search-box/__tests__/tags-filter.spec.tsx
index 117b8cdfab..e87022fe38 100644
--- a/web/app/components/plugins/marketplace/search-box/__tests__/tags-filter.spec.tsx
+++ b/web/app/components/plugins/marketplace/search-box/__tests__/tags-filter.spec.tsx
@@ -1,10 +1,19 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import {
+ fireEvent,
+ render,
+ screen,
+ within,
+} from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import TagsFilter from '../tags-filter'
+const { mockTranslate } = vi.hoisted(() => ({
+ mockTranslate: vi.fn((key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key),
+}))
+
vi.mock('#i18n', () => ({
useTranslation: () => ({
- t: (key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key,
+ t: mockTranslate,
}),
}))
@@ -46,20 +55,7 @@ vi.mock('@/app/components/base/input', () => ({
),
}))
-vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
- const _React = await import('react')
- return {
- PortalToFollowElem: ({ children }: { children: React.ReactNode }) =>
{children}
,
- PortalToFollowElemTrigger: ({
- children,
- onClick,
- }: {
- children: React.ReactNode
- onClick: () => void
- }) =>
,
- PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) =>
{children}
,
- }
-})
+vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
vi.mock('../trigger/marketplace', () => ({
default: ({ selectedTagsLength }: { selectedTagsLength: number }) => (
@@ -80,8 +76,16 @@ vi.mock('../trigger/tool-selector', () => ({
}))
describe('TagsFilter', () => {
+ const ensurePopoverOpen = () => {
+ if (!screen.queryByTestId('popover-content'))
+ fireEvent.click(screen.getByTestId('popover-trigger'))
+
+ return screen.getByTestId('popover-content')
+ }
+
beforeEach(() => {
vi.clearAllMocks()
+ mockTranslate.mockImplementation((key: string, options?: { ns?: string }) => options?.ns ? `${options.ns}.${key}` : key)
})
it('renders marketplace trigger when used in marketplace', () => {
@@ -100,6 +104,7 @@ describe('TagsFilter', () => {
it('filters tag options by search text', () => {
render(
)
+ fireEvent.click(screen.getByTestId('popover-trigger'))
expect(screen.getByText('Agent')).toBeInTheDocument()
expect(screen.getByText('RAG')).toBeInTheDocument()
@@ -116,11 +121,20 @@ describe('TagsFilter', () => {
const onTagsChange = vi.fn()
const { rerender } = render(
)
- fireEvent.click(screen.getByText('Agent'))
+ fireEvent.click(within(ensurePopoverOpen()).getByText('Agent'))
expect(onTagsChange).toHaveBeenCalledWith([])
rerender(
)
- fireEvent.click(screen.getByText('RAG'))
+ fireEvent.click(within(ensurePopoverOpen()).getByText('RAG'))
expect(onTagsChange).toHaveBeenCalledWith(['agent', 'rag'])
})
+
+ it('falls back to an empty placeholder when translation is missing', () => {
+ mockTranslate.mockImplementation(() => undefined as unknown as string)
+
+ render(
)
+ fireEvent.click(screen.getByTestId('popover-trigger'))
+
+ expect(screen.getByLabelText('tags-search')).toHaveAttribute('placeholder', '')
+ })
})
diff --git a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
index b078dbaa9b..d97420b672 100644
--- a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
+++ b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
@@ -1,14 +1,14 @@
'use client'
import { useTranslation } from '#i18n'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
import { useState } from 'react'
import Checkbox from '@/app/components/base/checkbox'
import Input from '@/app/components/base/input'
-import {
- PortalToFollowElem,
- PortalToFollowElemContent,
- PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
import { useTags } from '@/app/components/plugins/hooks'
import MarketplaceTrigger from './trigger/marketplace'
import ToolSelectorTrigger from './trigger/tool-selector'
@@ -37,43 +37,45 @@ const TagsFilter = ({
const selectedTagsLength = tags.length
return (
-
- setOpen(v => !v)}
+
+ {
+ usedInMarketplace && (
+
+ )
+ }
+ {
+ !usedInMarketplace && (
+
+ )
+ }
+