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}

web/app/components/workflow/block-selector/market-place-plugin/list.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react'
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll'
 import Item from './item'
@@ -8,10 +8,9 @@ import cn from '@/utils/classnames'
 import Link from 'next/link'
 import { marketplaceUrlPrefix } from '@/config'
 import { RiArrowRightUpLine, RiSearchLine } from '@remixicon/react'
-// import { RiArrowRightUpLine } from '@remixicon/react'
 import { noop } from 'lodash-es'
 
-type Props = {
+export type ListProps = {
   wrapElemRef: React.RefObject<HTMLElement>
   list: Plugin[]
   searchText: string
@@ -20,17 +19,16 @@ type Props = {
   disableMaxWidth?: boolean
 }
 
-const List = (
-  {
-    ref,
-    wrapElemRef,
-    searchText,
-    tags,
-    list,
-    toolContentClassName,
-    disableMaxWidth = false,
-  },
-) => {
+export type ListRef = { handleScroll: () => void }
+
+const List = forwardRef<ListRef, ListProps>(({
+  wrapElemRef,
+  searchText,
+  tags,
+  list,
+  toolContentClassName,
+  disableMaxWidth = false,
+}, ref) => {
   const { t } = useTranslation()
   const hasFilter = !searchText
   const hasRes = list.length > 0
@@ -126,7 +124,7 @@ const List = (
       </div>
     </>
   )
-}
+})
 
 List.displayName = 'List'