From 99a9bf6d560b85a8c26cf241282594228d4ea82a Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 1 Nov 2024 18:36:17 +0800
Subject: [PATCH] feat: support search from marketplace list

---
 web/app/components/plugins/types.ts           |  1 +
 .../workflow/block-selector/all-tools.tsx     | 21 +++++++++++++++++--
 .../market-place-plugin/item.tsx              |  6 ++++--
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/web/app/components/plugins/types.ts b/web/app/components/plugins/types.ts
index 74ba3ecab2..6886330b15 100644
--- a/web/app/components/plugins/types.ts
+++ b/web/app/components/plugins/types.ts
@@ -80,6 +80,7 @@ export type PluginManifestInMarket = {
   brief: Record<Locale, string>
   introduction: string
   verified: boolean
+  install_count: number
 }
 
 export type PluginDetail = {
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index cac8537d00..c7bd877775 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -1,4 +1,5 @@
 import {
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -14,9 +15,10 @@ import ViewTypeSelect, { ViewType } from './view-type-select'
 import cn from '@/utils/classnames'
 import { useGetLanguage } from '@/context/i18n'
 import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list'
-import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
 import ActionButton from '../../base/action-button'
 import { RiAddLine } from '@remixicon/react'
+import { PluginType } from '../../plugins/types'
+import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
 
 type AllToolsProps = {
   className?: string
@@ -62,6 +64,21 @@ const AllTools = ({
     })
   }, [activeTab, buildInTools, customTools, workflowTools, searchText, language])
 
+  const {
+    queryPluginsWithDebounced: fetchPlugins,
+    plugins: notInstalledPlugins,
+  } = useMarketplacePlugins()
+
+  useEffect(() => {
+    if (searchText) {
+      fetchPlugins({
+        query: searchText,
+        category: PluginType.tool,
+      })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchText])
+
   const pluginRef = useRef(null)
   const wrapElemRef = useRef<HTMLDivElement>(null)
 
@@ -112,7 +129,7 @@ const AllTools = ({
         {/* Plugins from marketplace */}
         <PluginList
           wrapElemRef={wrapElemRef}
-          list={[toolNotion, extensionDallE, modelGPT4] as any} ref={pluginRef}
+          list={notInstalledPlugins as any} ref={pluginRef}
           searchText={searchText}
         />
       </div>
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
index b5a73b9743..d257533d62 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
@@ -26,6 +26,8 @@ const Item: FC<Props> = ({
   const { t } = useTranslation()
   const [open, setOpen] = React.useState(false)
   const { locale } = useContext(I18n)
+  const getLocalizedText = (obj: Record<string, string> | undefined) =>
+    obj?.[locale] || obj?.['en-US'] || obj?.en_US || ''
 
   return (
     <div className='group/plugin flex rounded-lg py-1 pr-1 pl-3 hover:bg-state-base-hover'>
@@ -35,8 +37,8 @@ const Item: FC<Props> = ({
       />
       <div className='ml-2 w-0 grow flex'>
         <div className='w-0 grow'>
-          <div className='h-4 leading-4 text-text-primary system-sm-medium truncate '>{payload.label[locale]}</div>
-          <div className='h-5 leading-5 text-text-tertiary system-xs-regular truncate'>{payload.brief[locale]}</div>
+          <div className='h-4 leading-4 text-text-primary system-sm-medium truncate '>{getLocalizedText(payload.label)}</div>
+          <div className='h-5 leading-5 text-text-tertiary system-xs-regular truncate'>{getLocalizedText(payload.brief)}</div>
           <div className='flex text-text-tertiary system-xs-regular space-x-1'>
             <div>{payload.org}</div>
             <div>·</div>