fix: workflow plugins list update (#20357)

web/app/components/base/tab-slider/index.tsx

@@ -40,7 +40,7 @@ const TabSlider: FC<TabSliderProps> = ({
     const newIndex = options.findIndex(option => option.value === value)
     setActiveIndex(newIndex)
     updateSliderStyle(newIndex)
-  }, [value, options, pluginList])
+  }, [value, options, pluginList?.total])
 
   return (
     <div className={cn(className, 'relative inline-flex items-center justify-center rounded-[10px] bg-components-segmented-control-bg-normal p-0.5')}>
@@ -69,13 +69,13 @@ const TabSlider: FC<TabSliderProps> = ({
           {option.text}
           {/* if no plugin installed, the badge won't show */}
           {option.value === 'plugins'
-            && (pluginList?.plugins.length ?? 0) > 0
+            && (pluginList?.total ?? 0) > 0
             && <Badge
               size='s'
               uppercase={true}
               state={BadgeState.Default}
             >
-              {pluginList?.plugins.length}
+              {pluginList?.total}
             </Badge>
           }
         </div>

web/app/components/plugins/plugin-page/plugins-panel.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import type { FilterState } from './filter-management'
 import FilterManagement from './filter-management'
 import List from './list'
-import { useInstalledLatestVersion, useInstalledPluginListWithPagination, useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import { useInstalledLatestVersion, useInstalledPluginList, useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
 import { usePluginPageContext } from './context'
 import { useDebounceFn } from 'ahooks'
@@ -17,7 +17,7 @@ const PluginsPanel = () => {
   const { t } = useTranslation()
   const filters = usePluginPageContext(v => v.filters) as FilterState
   const setFilters = usePluginPageContext(v => v.setFilters)
-  const { data: pluginList, isLoading: isPluginListLoading, isFetching, isLastPage, loadNextPage } = useInstalledPluginListWithPagination()
+  const { data: pluginList, isLoading: isPluginListLoading, isFetching, isLastPage, loadNextPage } = useInstalledPluginList()
   const { data: installedLatestVersion } = useInstalledLatestVersion(
     pluginList?.plugins
       .filter(plugin => plugin.source === PluginSource.marketplace)

web/service/use-plugins.ts

@@ -10,7 +10,6 @@ import type {
   GitHubItemAndMarketPlaceDependency,
   InstallPackageResponse,
   InstalledLatestVersionResponse,
-  InstalledPluginListResponse,
   InstalledPluginListWithTotalResponse,
   PackageDependency,
   Permissions,
@@ -67,16 +66,7 @@ export const useCheckInstalled = ({
   })
 }
 
-export const useInstalledPluginList = (disable?: boolean) => {
+export const useInstalledPluginList = (disable?: boolean, pageSize = 100) => {
-  return useQuery<InstalledPluginListResponse>({
-    queryKey: useInstalledPluginListKey,
-    queryFn: () => get<InstalledPluginListResponse>('/workspaces/current/plugin/list'),
-    enabled: !disable,
-    initialData: !disable ? undefined : { plugins: [] },
-  })
-}
-
-export const useInstalledPluginListWithPagination = (pageSize = 100) => {
   const fetchPlugins = async ({ pageParam = 1 }) => {
     const response = await get<InstalledPluginListWithTotalResponse>(
       `/workspaces/current/plugin/list?page=${pageParam}&page_size=${pageSize}`,
@@ -91,8 +81,10 @@ export const useInstalledPluginListWithPagination = (pageSize = 100) => {
     hasNextPage,
     isFetchingNextPage,
     isLoading,
+    isSuccess,
   } = useInfiniteQuery({
-    queryKey: ['installed-plugins', pageSize],
+    enabled: !disable,
+    queryKey: useInstalledPluginListKey,
     queryFn: fetchPlugins,
     getNextPageParam: (lastPage, pages) => {
       const totalItems = lastPage.total
@@ -108,10 +100,12 @@ export const useInstalledPluginListWithPagination = (pageSize = 100) => {
   })
 
   const plugins = data?.pages.flatMap(page => page.plugins) ?? []
+  const total = data?.pages[0].total ?? 0
 
   return {
-    data: {
+    data: disable ? undefined : {
       plugins,
+      total,
     },
     isLastPage: !hasNextPage,
     loadNextPage: () => {
@@ -120,6 +114,7 @@ export const useInstalledPluginListWithPagination = (pageSize = 100) => {
     isLoading,
     isFetching: isFetchingNextPage,
     error,
+    isSuccess,
   }
 }