refactor: remove carouselCollectionNames prop from CollectionHeader and CollectionList components for improved clarity

2026-05-10 05:56:31 +08:00 · 2026-03-09 15:19:03 +08:00 · 2026-03-09 15:19:03 +08:00 · 5c31468567
commit 5c31468567
parent 22d22f2b77
9 changed files with 45 additions and 19 deletions
--- a/web/app/components/plugins/marketplace/list/collection-list.tsx
+++ b/web/app/components/plugins/marketplace/list/collection-list.tsx
@ -59,7 +59,6 @@ type CollectionHeaderProps<TCollection extends BaseCollection> = {
  collection: TCollection
  itemsLength: number
  locale: Locale
-  carouselCollectionNames: string[]
  viewMore: React.ReactNode
 }

@ -67,11 +66,10 @@ export function CollectionHeader<TCollection extends BaseCollection>({
  collection,
  itemsLength,
  locale,
-  carouselCollectionNames,
  viewMore,
 }: CollectionHeaderProps<TCollection>) {
-  const showViewMore = (collection.searchable || collection.search_params)
-    && !carouselCollectionNames.includes(collection.name)
+  const showViewMore = collection.searchable
+    && !!collection.search_params
    && itemsLength > GRID_DISPLAY_LIMIT

  return (
@ -146,8 +144,6 @@ type CollectionListProps<TItem, TCollection extends BaseCollection> = {
  /** Field name to use as item key (e.g. 'plugin_id', 'id'). */
  itemKeyField: keyof TItem
  renderCard: (item: TItem) => React.ReactNode
-  /** Collection names that use carousel layout (e.g. ['partners'], ['featured']). */
-  carouselCollectionNames: string[]
  /** Search tab for ViewMoreButton (e.g. 'templates' for template collections). */
  viewMoreSearchTab?: SearchTab
  gridClassName?: string
@ -161,7 +157,6 @@ function CollectionList<TItem, TCollection extends BaseCollection>({
  collectionItemsMap,
  itemKeyField,
  renderCard,
-  carouselCollectionNames,
  viewMoreSearchTab,
  gridClassName = GRID_CLASS,
  cardContainerClassName,
@ -183,7 +178,6 @@ function CollectionList<TItem, TCollection extends BaseCollection>({
      {
        collectionsWithItems.map((collection) => {
          const items = collectionItemsMap[collection.name]
-          const isCarouselCollection = carouselCollectionNames.includes(collection.name)

          return (
            <div
@ -194,10 +188,9 @@ function CollectionList<TItem, TCollection extends BaseCollection>({
                collection={collection}
                itemsLength={items.length}
                locale={locale}
-                carouselCollectionNames={carouselCollectionNames}
                viewMore={<ViewMoreButton searchParams={collection.search_params} searchTab={viewMoreSearchTab} />}
              />
-              {isCarouselCollection
+              {!collection.searchable
                ? (
                    <CarouselCollection
                      items={items}
--- a/web/app/components/plugins/marketplace/list/index.spec.tsx
+++ b/web/app/components/plugins/marketplace/list/index.spec.tsx
@ -588,7 +588,7 @@ describe('ListWithCollection', () => {
  // View More Button Tests
  // ================================
  describe('View More Button', () => {
-    it('should render View More button when non-carousel collection is searchable and exceeds display limit', () => {
+    it('should render View More button when collection is searchable and exceeds display limit', () => {
      const collections = [createMockCollection({
        name: 'searchable-collection',
        searchable: true,
@ -681,7 +681,7 @@ describe('ListWithCollection', () => {
  // Grid Display Limit Tests
  // ================================
  describe('Grid Display Limit', () => {
-    it('should render at most 4 cards for non-carousel collections', () => {
+    it('should render at most 4 cards for searchable collections', () => {
      const collections = createMockCollectionList(1)
      const pluginsMap: Record<string, Plugin[]> = {
        'collection-0': createMockPluginList(8),
@ -699,6 +699,27 @@ describe('ListWithCollection', () => {
      expect(cards.length).toBe(4)
    })

+    it('should render all cards for non-searchable collections in carousel mode', () => {
+      const collections = [createMockCollection({
+        name: 'carousel-collection',
+        searchable: false,
+      })]
+      const pluginsMap: Record<string, Plugin[]> = {
+        'carousel-collection': createMockPluginList(8),
+      }
+
+      const { container } = render(
+        <ListWithCollection
+          {...defaultProps}
+          collections={collections}
+          collectionItemsMap={pluginsMap}
+        />,
+      )
+
+      const cards = container.querySelectorAll('[data-testid^="card-plugin-"]')
+      expect(cards.length).toBe(8)
+    })
+
    it('should render all cards when count is within the display limit', () => {
      const collections = createMockCollectionList(1)
      const pluginsMap: Record<string, Plugin[]> = {
--- a/web/app/components/plugins/marketplace/list/list-with-collection.tsx
+++ b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
@ -4,7 +4,6 @@ import type { PluginCollection, Template, TemplateCollection } from '../types'
 import type { Plugin } from '@/app/components/plugins/types'
 import { useTranslation } from '#i18n'
 import CardWrapper from './card-wrapper'
-import { CAROUSEL_COLLECTION_NAMES } from './collection-constants'
 import CollectionList from './collection-list'
 import TemplateCard from './template-card'

@ -58,7 +57,6 @@ const ListWithCollection = (props: ListWithCollectionProps) => {
        collectionItemsMap={collectionItemsMap}
        itemKeyField="plugin_id"
        renderCard={renderPluginCard}
-        carouselCollectionNames={[CAROUSEL_COLLECTION_NAMES.partners, CAROUSEL_COLLECTION_NAMES.featured]}
        cardContainerClassName={cardContainerClassName}
      />
    )
@ -76,7 +74,7 @@ const ListWithCollection = (props: ListWithCollectionProps) => {
      collectionItemsMap={collectionItemsMap}
      itemKeyField="id"
      renderCard={renderTemplateCard}
-      carouselCollectionNames={[CAROUSEL_COLLECTION_NAMES.featured]}
+      viewMoreSearchTab="templates"
      cardContainerClassName={cardContainerClassName}
      emptyText={t('marketplace.noTemplateFound', { ns: 'plugin' })}
    />
--- a/web/app/components/plugins/plugin-page/nav-operations.tsx
+++ b/web/app/components/plugins/plugin-page/nav-operations.tsx
@ -82,7 +82,7 @@ export const SubmitRequestDropdown = () => {
        >
          <RiAddLine className="h-4 w-4 shrink-0 lg:hidden" />
          <span className="system-sm-medium hidden lg:inline">
-            {t('requestSubmitPlugin', { ns: 'plugin' })}
+            {t('requestSubmit', { ns: 'plugin' })}
          </span>
        </Button>
      </PortalToFollowElemTrigger>
--- a/web/i18n/en-US/plugin.json
+++ b/web/i18n/en-US/plugin.json
@ -268,7 +268,7 @@
  "readmeInfo.noReadmeAvailable": "No README available",
  "readmeInfo.title": "README",
  "requestAPlugin": "Request a plugin",
-  "requestSubmitPlugin": "Request / Submit",
+  "requestSubmit": "Request / Submit",
  "search": "Search",
  "searchCategories": "Search Categories",
  "searchInMarketplace": "Search in Marketplace",
--- a/web/i18n/ja-JP/plugin.json
+++ b/web/i18n/ja-JP/plugin.json
@ -63,6 +63,7 @@
  "autoUpdate.upgradeMode.partial": "選択されたもののみ",
  "autoUpdate.upgradeModePlaceholder.exclude": "選択されたプラグインは自動更新されません",
  "autoUpdate.upgradeModePlaceholder.partial": "選択されたプラグインのみが自動更新されます。現在選択されているプラグインはないため、プラグインは自動更新されません。",
+  "badge.new": "NEW",
  "category.agents": "エージェント戦略",
  "category.all": "すべて",
  "category.bundles": "バンドル",
@ -78,6 +79,7 @@
  "categorySingle.model": "モデル",
  "categorySingle.tool": "ツール",
  "categorySingle.trigger": "トリガー",
+  "createPublishTemplates": "テンプレートの作成 / 公開",
  "debugInfo.title": "デバッグ",
  "debugInfo.viewDocs": "ドキュメントを見る",
  "deprecated": "非推奨",
@ -212,6 +214,7 @@
  "pluginInfoModal.release": "リリース",
  "pluginInfoModal.repository": "リポジトリ",
  "pluginInfoModal.title": "プラグイン情報",
+  "plugins": "プラグイン",
  "privilege.admins": "管理者",
  "privilege.everyone": "みんな",
  "privilege.noone": "誰もいない",
@ -224,6 +227,7 @@
  "readmeInfo.noReadmeAvailable": "READMEは利用できません",
  "readmeInfo.title": "リードミー",
  "requestAPlugin": "プラグインをリクエストする",
+  "requestSubmit": "リクエスト / 提出",
  "search": "検索",
  "searchCategories": "検索カテゴリ",
  "searchInMarketplace": "マーケットプレイスで検索",
@ -243,6 +247,7 @@
  "task.installingWithSuccess": "{{installingLength}}個のプラグインをインストール中、{{successLength}}個成功しました。",
  "task.runningPlugins": "Installing Plugins",
  "task.successPlugins": "Successfully Installed Plugins",
+  "templates": "テンプレート",
  "upgrade.close": "閉じる",
  "upgrade.description": "次のプラグインをインストールしようとしています",
  "upgrade.successfulTitle": "インストールに成功しました",
--- a/web/i18n/pt-BR/plugin.json
+++ b/web/i18n/pt-BR/plugin.json
@ -63,6 +63,7 @@
  "autoUpdate.upgradeMode.partial": "Somente selecionado",
  "autoUpdate.upgradeModePlaceholder.exclude": "Plugins selecionados não serão atualizados automaticamente",
  "autoUpdate.upgradeModePlaceholder.partial": "Apenas plugins selecionados serão atualizados automaticamente. Nenhum plugin está atualmente selecionado, então nenhum plugin será atualizado automaticamente.",
+  "badge.new": "NEW",
  "category.agents": "Estratégias do agente",
  "category.all": "Todo",
  "category.bundles": "Pacotes",
@ -78,6 +79,7 @@
  "categorySingle.model": "Modelo",
  "categorySingle.tool": "Ferramenta",
  "categorySingle.trigger": "Gatilho",
+  "createPublishTemplates": "Criar / Publicar templates",
  "debugInfo.title": "Depuração",
  "debugInfo.viewDocs": "Ver documentos",
  "deprecated": "Obsoleto",
@ -212,6 +214,7 @@
  "pluginInfoModal.release": "Soltar",
  "pluginInfoModal.repository": "Repositório",
  "pluginInfoModal.title": "Informações do plugin",
+  "plugins": "Plugins",
  "privilege.admins": "Administradores",
  "privilege.everyone": "Todos",
  "privilege.noone": "Ninguém",
@ -224,6 +227,7 @@
  "readmeInfo.noReadmeAvailable": "Nenhum README disponível",
  "readmeInfo.title": "LEIA-ME",
  "requestAPlugin": "Solicitar um plugin",
+  "requestSubmit": "Solicitar / Enviar",
  "search": "Procurar",
  "searchCategories": "Categorias de pesquisa",
  "searchInMarketplace": "Pesquisar no Marketplace",
@ -243,6 +247,7 @@
  "task.installingWithSuccess": "Instalando plugins {{installingLength}}, {{successLength}} sucesso.",
  "task.runningPlugins": "Installing Plugins",
  "task.successPlugins": "Successfully Installed Plugins",
+  "templates": "Templates",
  "upgrade.close": "Fechar",
  "upgrade.description": "Prestes a instalar o seguinte plugin",
  "upgrade.successfulTitle": "Instalação bem-sucedida",
--- a/web/i18n/zh-Hans/plugin.json
+++ b/web/i18n/zh-Hans/plugin.json
@ -268,7 +268,7 @@
  "readmeInfo.noReadmeAvailable": "README 文档不可用",
  "readmeInfo.title": "README",
  "requestAPlugin": "申请插件",
-  "requestSubmitPlugin": "申请并发布插件",
+  "requestSubmit": "申请 / 发布",
  "search": "搜索",
  "searchCategories": "搜索类别",
  "searchInMarketplace": "在 Marketplace 中搜索",
--- a/web/i18n/zh-Hant/plugin.json
+++ b/web/i18n/zh-Hant/plugin.json
@ -63,6 +63,7 @@
  "autoUpdate.upgradeMode.partial": "僅選擇",
  "autoUpdate.upgradeModePlaceholder.exclude": "選定的插件將不會自動更新",
  "autoUpdate.upgradeModePlaceholder.partial": "只有選定的插件會自動更新。目前未選定任何插件，因此不會自動更新任何插件。",
+  "badge.new": "NEW",
  "category.agents": "代理策略",
  "category.all": "都",
  "category.bundles": "束",
@ -213,6 +214,7 @@
  "pluginInfoModal.release": "釋放",
  "pluginInfoModal.repository": "存儲庫",
  "pluginInfoModal.title": "插件資訊",
+  "plugins": "插件",
  "privilege.admins": "管理員",
  "privilege.everyone": "每個人 都",
  "privilege.noone": "沒人",
@ -224,7 +226,8 @@
  "readmeInfo.needHelpCheckReadme": "需要幫忙嗎？查看自述檔。",
  "readmeInfo.noReadmeAvailable": "沒有可用的自述文件",
  "readmeInfo.title": "自述檔",
-  "requestAPlugin": "申请插件",
+  "requestAPlugin": "申請插件",
+  "requestSubmit": "申請 / 發佈",
  "search": "搜索",
  "searchCategories": "搜索類別",
  "searchInMarketplace": "在 Marketplace 中搜索",
@ -244,6 +247,7 @@
  "task.installingWithSuccess": "安裝 {{installingLength}} 個插件，{{successLength}} 成功。",
  "task.runningPlugins": "Installing Plugins",
  "task.successPlugins": "Successfully Installed Plugins",
+  "templates": "範本",
  "upgrade.close": "關閉",
  "upgrade.description": "即將安裝以下插件",
  "upgrade.successfulTitle": "安裝成功",