diff --git a/web/app/components/plugins/marketplace/search-box/index.spec.tsx b/web/app/components/plugins/marketplace/search-box/index.spec.tsx index 3b5774ad49..018efd4676 100644 --- a/web/app/components/plugins/marketplace/search-box/index.spec.tsx +++ b/web/app/components/plugins/marketplace/search-box/index.spec.tsx @@ -28,6 +28,8 @@ vi.mock('#i18n', () => ({ 'plugin.marketplace.searchDropdown.showAllResults': 'Show all search results', 'plugin.marketplace.searchDropdown.enter': 'Enter', 'plugin.marketplace.searchDropdown.byAuthor': `by ${options?.author || ''}`, + 'plugin.marketplace.searchDropdown.noMatchesTitle': 'No matches', + 'plugin.marketplace.searchDropdown.noMatchesDesc': 'Try different filter options.', } return translations[fullKey] || key }, @@ -582,6 +584,22 @@ describe('SearchDropdown', () => { expect(screen.getByText('Tool')).toBeInTheDocument() expect(screen.getByText('206 installs')).toBeInTheDocument() }) + + it('should render empty state when no results', () => { + render( + , + ) + + expect(screen.getByText('No matches')).toBeInTheDocument() + expect(screen.getByText('Try different filter options.')).toBeInTheDocument() + expect(screen.queryByText('Show all search results')).not.toBeInTheDocument() + }) }) describe('Interactions', () => { diff --git a/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx b/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx index 962d31ca1c..eea0bdb6f3 100644 --- a/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx +++ b/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx @@ -70,8 +70,8 @@ const SearchBoxWrapper = ({ [dropdownQuery.data?.creators.items], ) - const handleSubmit = () => { - const trimmed = draftSearch.trim() + const handleSubmit = (queryOverride?: string) => { + const trimmed = (queryOverride ?? draftSearch).trim() if (!trimmed) return @@ -141,7 +141,7 @@ const SearchBoxWrapper = ({ templates={dropdownTemplates} creators={dropdownCreators} includeSource={includeSource} - onShowAll={handleSubmit} + onShowAll={() => handleSubmit(debouncedDraft)} isLoading={dropdownQuery.isLoading} /> diff --git a/web/app/components/plugins/marketplace/search-box/search-dropdown/index.tsx b/web/app/components/plugins/marketplace/search-box/search-dropdown/index.tsx index b75a516af8..d9e155ec66 100644 --- a/web/app/components/plugins/marketplace/search-box/search-dropdown/index.tsx +++ b/web/app/components/plugins/marketplace/search-box/search-dropdown/index.tsx @@ -1,7 +1,7 @@ import type { Creator, Template } from '../../types' import type { Plugin } from '@/app/components/plugins/types' import { useTranslation } from '#i18n' -import { RiArrowRightLine } from '@remixicon/react' +import { RiArrowRightLine, RiFilter3Line } from '@remixicon/react' import { Fragment } from 'react' import AppIcon from '@/app/components/base/app-icon' import Loading from '@/app/components/base/loading' @@ -27,6 +27,16 @@ const DropdownSection = ({ title, children }: { title: string, children: React.R ) +const EmptyState = ({ title, description }: { title: string, description: string }) => ( +
+ +
+
{title}
+
{description}
+
+
+) + const DropdownItem = ({ href, icon, children }: { href: string icon: React.ReactNode @@ -162,6 +172,12 @@ const SearchDropdown = ({ )} + {!isLoading && !hasResults && ( + + )} {sections.map((section, i) => ( @@ -170,23 +186,25 @@ const SearchDropdown = ({ ))} -
- -
+ + + {t('marketplace.searchDropdown.enter', { ns: 'plugin' })} + + + + + + )} ) } diff --git a/web/i18n/en-US/plugin.json b/web/i18n/en-US/plugin.json index 1d9f55c2cf..ec840dfbc1 100644 --- a/web/i18n/en-US/plugin.json +++ b/web/i18n/en-US/plugin.json @@ -220,6 +220,8 @@ "marketplace.searchBreadcrumbSearch": "Search", "marketplace.searchDropdown.byAuthor": "by {{author}}", "marketplace.searchDropdown.enter": "Enter", + "marketplace.searchDropdown.noMatchesDesc": "Try different filter options.", + "marketplace.searchDropdown.noMatchesTitle": "No matches", "marketplace.searchDropdown.plugins": "Plugins", "marketplace.searchDropdown.showAllResults": "Show all search results", "marketplace.searchFilterAll": "All", diff --git a/web/i18n/zh-Hans/plugin.json b/web/i18n/zh-Hans/plugin.json index 0cd7e31816..e6a1004f44 100644 --- a/web/i18n/zh-Hans/plugin.json +++ b/web/i18n/zh-Hans/plugin.json @@ -220,6 +220,8 @@ "marketplace.searchBreadcrumbSearch": "搜索", "marketplace.searchDropdown.byAuthor": "由 {{author}} 提供", "marketplace.searchDropdown.enter": "输入", + "marketplace.searchDropdown.noMatchesDesc": "尝试其他筛选条件。", + "marketplace.searchDropdown.noMatchesTitle": "无匹配结果", "marketplace.searchDropdown.plugins": "插件", "marketplace.searchDropdown.showAllResults": "显示所有搜索结果", "marketplace.searchFilterAll": "全部",