refactor & perf: improve type safety of component PluginList (#17498)

web/app/components/workflow/block-selector/all-tools.tsx

@@ -15,7 +15,8 @@ import { useToolTabs } from './hooks'
 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 type { ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
+import PluginList, { type ListProps } from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import ActionButton from '../../base/action-button'
 import { RiAddLine } from '@remixicon/react'
 import { PluginType } from '../../plugins/types'
@@ -26,7 +27,7 @@ type AllToolsProps = {
   className?: string
   toolContentClassName?: string
   searchText: string
-  tags: string[]
+  tags: ListProps['tags']
   buildInTools: ToolWithProvider[]
   customTools: ToolWithProvider[]
   workflowTools: ToolWithProvider[]
@@ -36,11 +37,14 @@ type AllToolsProps = {
   onShowAddCustomCollectionModal?: () => void
   selectedTools?: ToolValue[]
 }
+
+const DEFAULT_TAGS: AllToolsProps['tags'] = []
+
 const AllTools = ({
   className,
   toolContentClassName,
   searchText,
-  tags = [],
+  tags = DEFAULT_TAGS,
   onSelect,
   buildInTools,
   workflowTools,
@@ -97,7 +101,7 @@ const AllTools = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchText, tags, enable_marketplace])
 
-  const pluginRef = useRef(null)
+  const pluginRef = useRef<ListRef>(null)
   const wrapElemRef = useRef<HTMLDivElement>(null)
 
   return (
@@ -136,7 +140,7 @@ const AllTools = ({
       <div
         ref={wrapElemRef}
         className='max-h-[464px] overflow-y-auto'
-        onScroll={(pluginRef.current as any)?.handleScroll}
+        onScroll={pluginRef.current?.handleScroll}
       >
         <Tools
           className={toolContentClassName}
@@ -149,8 +153,9 @@ const AllTools = ({
         />
         {/* Plugins from marketplace */}
         {enable_marketplace && <PluginList
+          ref={pluginRef}
           wrapElemRef={wrapElemRef}
-          list={notInstalledPlugins as any} ref={pluginRef}
+          list={notInstalledPlugins}
           searchText={searchText}
           toolContentClassName={toolContentClassName}
           tags={tags}