diff --git a/web/app/components/plugins/marketplace/list/flat-list.tsx b/web/app/components/plugins/marketplace/list/flat-list.tsx index e94faf4f1d..3145388205 100644 --- a/web/app/components/plugins/marketplace/list/flat-list.tsx +++ b/web/app/components/plugins/marketplace/list/flat-list.tsx @@ -2,6 +2,7 @@ import type { Template } from '../types' import type { Plugin } from '@/app/components/plugins/types' +import { useTranslation } from '#i18n' import Empty from '../empty' import CardWrapper from './card-wrapper' import { GRID_CLASS } from './collection-constants' @@ -21,11 +22,17 @@ type TemplatesVariant = { type FlatListProps = PluginsVariant | TemplatesVariant const FlatList = (props: FlatListProps) => { - if (!props.items.length) - return + const { items, variant } = props + const { t } = useTranslation() - if (props.variant === 'plugins') { - const { items, showInstallButton } = props + if (!items.length) { + if (variant === 'templates') + return + return + } + + if (variant === 'plugins') { + const { showInstallButton } = props return (
{items.map(plugin => ( @@ -39,7 +46,6 @@ const FlatList = (props: FlatListProps) => { ) } - const { items } = props return (
{items.map(template => ( diff --git a/web/app/components/plugins/marketplace/list/index.spec.tsx b/web/app/components/plugins/marketplace/list/index.spec.tsx index e6f2b0ff48..29b503d33c 100644 --- a/web/app/components/plugins/marketplace/list/index.spec.tsx +++ b/web/app/components/plugins/marketplace/list/index.spec.tsx @@ -21,6 +21,7 @@ vi.mock('#i18n', () => ({ 'plugin.marketplace.viewMore': 'View More', 'plugin.marketplace.pluginsResult': `${options?.num || 0} plugins found`, 'plugin.marketplace.noPluginFound': 'No plugins found', + 'plugin.marketplace.noTemplateFound': 'No template found', 'plugin.detailPanel.operation.install': 'Install', 'plugin.detailPanel.operation.detail': 'Detail', } @@ -164,9 +165,9 @@ vi.mock('../sort-dropdown', () => ({ // Mock Empty component vi.mock('../empty', () => ({ - default: ({ className }: { className?: string }) => ( + default: ({ className, text }: { className?: string, text?: string }) => (
- No plugins found + {text || 'No plugins found'}
), })) @@ -910,6 +911,32 @@ describe('ListWrapper', () => { expect(screen.queryByTestId('loading-component')).not.toBeInTheDocument() }) + + it('should render template empty state with flex content wrapper when templates are empty', () => { + delete (mockMarketplaceData as Record).pluginCollections + delete (mockMarketplaceData as Record).pluginCollectionPluginsMap + ;(mockMarketplaceData as Record).templateCollections = [] + ;(mockMarketplaceData as Record).templateCollectionTemplatesMap = {} + ;(mockMarketplaceData as Record).templates = [] + + const { container } = render() + + expect(screen.getByTestId('empty-component')).toBeInTheDocument() + expect(screen.getByText('No template found')).toBeInTheDocument() + expect(container.querySelector('.relative.flex.grow.flex-col')).toBeInTheDocument() + }) + + it('should keep plugin empty text when plugins are empty', () => { + mockMarketplaceData.plugins = [] + mockMarketplaceData.pluginsTotal = 0 + mockMarketplaceData.pluginCollections = [] + mockMarketplaceData.pluginCollectionPluginsMap = {} + + render() + + expect(screen.getByTestId('empty-component')).toBeInTheDocument() + expect(screen.getByText('No plugins found')).toBeInTheDocument() + }) }) // ================================ diff --git a/web/app/components/plugins/marketplace/list/list-wrapper.tsx b/web/app/components/plugins/marketplace/list/list-wrapper.tsx index 41c0155fb9..312927e7a2 100644 --- a/web/app/components/plugins/marketplace/list/list-wrapper.tsx +++ b/web/app/components/plugins/marketplace/list/list-wrapper.tsx @@ -56,7 +56,7 @@ const ListWrapper = ({ showInstallButton }: ListWrapperProps) => { className="relative flex grow flex-col bg-background-default-subtle px-12 pt-2" > {isSearchMode && } -
+
{isLoading && page === 1 && (