diff --git a/web/app/components/plugins/marketplace/home/__tests__/marketplace-plugin-search.spec.tsx b/web/app/components/plugins/marketplace/home/__tests__/marketplace-plugin-search.spec.tsx new file mode 100644 index 00000000000..e7e17b99bf5 --- /dev/null +++ b/web/app/components/plugins/marketplace/home/__tests__/marketplace-plugin-search.spec.tsx @@ -0,0 +1,22 @@ +import { screen, waitFor } from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import { describe, expect, it } from 'vite-plus/test' +import { renderWithNuqs } from '@/test/nuqs-testing' +import MarketplacePluginSearch from '../marketplace-plugin-search' + +describe('MarketplacePluginSearch', () => { + it('updates the catalog query as the user types without opening suggestions', async () => { + const user = userEvent.setup() + const { onUrlUpdate } = renderWithNuqs() + + const input = screen.getByRole('searchbox', { name: 'Search plugins' }) + await user.type(input, 'google') + + expect(input).toHaveValue('google') + await waitFor(() => { + expect(onUrlUpdate.mock.calls.at(-1)?.[0].searchParams.get('q')).toBe('google') + }) + expect(screen.queryByRole('combobox')).not.toBeInTheDocument() + expect(screen.queryByRole('listbox')).not.toBeInTheDocument() + }) +}) diff --git a/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.spec.tsx b/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.spec.tsx index b683cf2ac22..bf2aec9a0bd 100644 --- a/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.spec.tsx +++ b/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.spec.tsx @@ -176,6 +176,46 @@ describe('MarketplaceSearchAutocomplete', () => { expect(mockTemplateSearch).not.toHaveBeenCalled() }) + it('submits the route search form when a suggestion is chosen', async () => { + mockPluginSearch.mockResolvedValue({ + data: { + plugins: [ + { + type: 'plugin', + org: 'langgenius', + name: 'google-search', + label: { en_US: 'Google Search' }, + brief: { en_US: 'Search the web from your workflow.' }, + category: 'tool', + }, + ], + total: 1, + }, + }) + const user = userEvent.setup() + const handleSubmit = vi.fn((event: Event) => { + event.preventDefault() + }) + + const { container } = render( + , + { wrapper: Wrapper }, + ) + + container.querySelector('form')?.addEventListener('submit', handleSubmit) + + await user.type(screen.getByRole('combobox'), 'google') + await user.click(await screen.findByText('Google Search')) + + expect(handleSubmit).toHaveBeenCalledOnce() + }) + it('does not offer the previous term suggestions while a new search is pending', async () => { const googleResponse = { data: { diff --git a/web/app/components/plugins/marketplace/home/marketplace-plugin-search.tsx b/web/app/components/plugins/marketplace/home/marketplace-plugin-search.tsx index 8ea8619594b..8c0fbd97043 100644 --- a/web/app/components/plugins/marketplace/home/marketplace-plugin-search.tsx +++ b/web/app/components/plugins/marketplace/home/marketplace-plugin-search.tsx @@ -1,28 +1,37 @@ 'use client' -import { useLocale } from '@/context/i18n' -import { useActivePluginType, useSearchPluginText } from '../atoms' -import { MarketplaceSearchAutocomplete } from './marketplace-search-autocomplete' +import { useSearchPluginText } from '../atoms' type MarketplacePluginSearchProps = { placeholder: string } export default function MarketplacePluginSearch({ placeholder }: MarketplacePluginSearchProps) { - const locale = useLocale() - const [category] = useActivePluginType() const [value, setValue] = useSearchPluginText() return ( - { - void setValue(nextValue) +
{ + event.preventDefault() }} - placeholder={placeholder} - scope="plugins" - value={value} - /> + > + + { + void setValue(event.target.value) + }} + placeholder={placeholder} + className="h-9 w-full rounded-[10px] border-[0.5px] border-components-input-border-active bg-components-input-bg-normal py-2 pr-3 pl-9 text-sm text-text-primary outline-none placeholder:text-text-quaternary focus:border-state-accent-solid" + /> + ) } diff --git a/web/app/components/plugins/marketplace/templates/index.tsx b/web/app/components/plugins/marketplace/templates/index.tsx index b8c45014b49..eb0909b9325 100644 --- a/web/app/components/plugins/marketplace/templates/index.tsx +++ b/web/app/components/plugins/marketplace/templates/index.tsx @@ -18,7 +18,7 @@ import HomeHero from '../home/home-hero' import HomeSearch from '../home/home-search' import { HomeShell } from '../home/home-shell' import styles from '../home/home-sticky.module.css' -import { MarketplaceSearchForm } from '../home/marketplace-search-autocomplete' +import MarketplaceLiveSearch from '../home/marketplace-live-search' import { GRID_CLASS } from '../list/collection-constants' import TemplateCard from './template-card' import TemplateCategoryNavigation from './template-category-navigation' @@ -211,14 +211,11 @@ export async function EmbeddedTemplatesMarketplace({ } search={ - $['newAppFromTemplate.searchAllTemplate'], { ns: 'app' })} query={query} - scope="templates" /> }