diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx index da0c782d4f..88d1e1774d 100644 --- a/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx +++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx @@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react' import type { Dependency, GitHubItemAndMarketPlaceDependency, PackageDependency, Plugin } from '../../../types' import MarketplaceItem from '../item/marketplace-item' import GithubItem from '../item/github-item' -import { useFetchPluginsInMarketPlaceByIds } from '@/service/use-plugins' +import { useFetchPluginsInMarketPlaceByIds, useFetchPluginsInMarketPlaceByInfo } from '@/service/use-plugins' import produce from 'immer' import { useGetState } from 'ahooks' import PackageItem from '../item/package-item' @@ -23,8 +23,8 @@ const InstallByDSLList: FC = ({ onSelect, onLoadedAllPlugin, }) => { - const { isLoading: isFetchingMarketplaceData, data: marketplaceRes } = useFetchPluginsInMarketPlaceByIds(allPlugins.filter(d => d.type === 'marketplace').map(d => (d as GitHubItemAndMarketPlaceDependency).value.plugin_unique_identifier!)) - // console.log(allPlugins) + const { isLoading: isFetchingMarketplaceDataFromDSL, data: marketplaceFromDSLRes } = useFetchPluginsInMarketPlaceByIds(allPlugins.filter(d => d.type === 'marketplace').map(d => (d as GitHubItemAndMarketPlaceDependency).value.plugin_unique_identifier!)) + const { isLoading: isFetchingMarketplaceDataFromLocal, data: marketplaceResFromLocalRes } = useFetchPluginsInMarketPlaceByInfo(allPlugins.filter(d => d.type === 'marketplace').map(d => (d as GitHubItemAndMarketPlaceDependency).value!)) const [plugins, setPlugins, getPlugins] = useGetState<(Plugin | undefined)[]>((() => { const hasLocalPackage = allPlugins.some(d => d.type === 'package') if (!hasLocalPackage) @@ -70,8 +70,8 @@ const InstallByDSLList: FC = ({ }, [allPlugins]) useEffect(() => { - if (!isFetchingMarketplaceData && marketplaceRes?.data.plugins) { - const payloads = marketplaceRes?.data.plugins + if (!isFetchingMarketplaceDataFromDSL && marketplaceFromDSLRes?.data.plugins) { + const payloads = marketplaceFromDSLRes?.data.plugins const failedIndex: number[] = [] const nextPlugins = produce(getPlugins(), (draft) => { marketPlaceInDSLIndex.forEach((index, i) => { @@ -84,10 +84,34 @@ const InstallByDSLList: FC = ({ setPlugins(nextPlugins) if (failedIndex.length > 0) setErrorIndexes([...errorIndexes, ...failedIndex]) - // marketplaceRes?.data.plugins } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isFetchingMarketplaceData]) + }, [isFetchingMarketplaceDataFromDSL]) + + useEffect(() => { + if (!isFetchingMarketplaceDataFromLocal && marketplaceResFromLocalRes?.data.versions) { + const payloads = marketplaceResFromLocalRes?.data.versions + const failedIndex: number[] = [] + const nextPlugins = produce(getPlugins(), (draft) => { + marketPlaceInDSLIndex.forEach((index, i) => { + if (payloads[i]) { + const item = payloads[i] + draft[index] = { // TODO: wait for api change + name: 'xxx', + plugin_id: item.unique_identifier, + } as Plugin + } + else { + failedIndex.push(index) + } + }) + }) + setPlugins(nextPlugins) + if (failedIndex.length > 0) + setErrorIndexes([...errorIndexes, ...failedIndex]) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isFetchingMarketplaceDataFromLocal]) const isLoadedAllData = (plugins.filter(p => !!p).length + errorIndexes.length) === allPlugins.length useEffect(() => { diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx index 258b179a16..389cb3d9ca 100644 --- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx +++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx @@ -58,7 +58,10 @@ const Install: FC = ({ }, }) const handleInstall = () => { - installFromMarketplaceAndGitHub(allPlugins.filter((_d, index) => selectedIndexes.includes(index))) + installFromMarketplaceAndGitHub({ + payload: allPlugins.filter((_d, index) => selectedIndexes.includes(index)), + plugin: selectedPlugins, + }) } return ( <> diff --git a/web/app/components/plugins/types.ts b/web/app/components/plugins/types.ts index 5edd3f7cc9..db684b37ce 100644 --- a/web/app/components/plugins/types.ts +++ b/web/app/components/plugins/types.ts @@ -310,6 +310,13 @@ export type UninstallPluginResponse = { export type PluginsFromMarketplaceResponse = { plugins: Plugin[] } +export type PluginsFromMarketplaceByInfoResponse = { + versions: { + plugin_name: string + plugin_org: string + unique_identifier: string + }[] +} export type GitHubItemAndMarketPlaceDependency = { type: 'github' | 'marketplace' | 'package' diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts index 150092239b..6e14d039ab 100644 --- a/web/service/use-plugins.ts +++ b/web/service/use-plugins.ts @@ -7,7 +7,9 @@ import type { InstalledPluginListResponse, PackageDependency, Permissions, + Plugin, PluginTask, + PluginsFromMarketplaceByInfoResponse, PluginsFromMarketplaceResponse, VersionListResponse, uploadGitHubResponse, @@ -117,8 +119,12 @@ export const useInstallFromMarketplaceAndGitHub = ({ onSuccess?: (res: { success: boolean }[]) => void }) => { return useMutation({ - mutationFn: (payload: Dependency[]) => { - return Promise.all(payload.map(async (item) => { + mutationFn: (data: { + payload: Dependency[], + plugin: Plugin[], + }) => { + const { payload, plugin } = data + return Promise.all(payload.map(async (item, i) => { try { if (item.type === 'github') { const data = item as GitHubItemAndMarketPlaceDependency @@ -136,7 +142,7 @@ export const useInstallFromMarketplaceAndGitHub = ({ await post('/workspaces/current/plugin/install/marketplace', { body: { - plugin_unique_identifiers: [data.value.plugin_unique_identifier!], + plugin_unique_identifiers: [data.value.plugin_unique_identifier! || plugin[i]?.plugin_id], }, }) } @@ -231,7 +237,25 @@ export const useFetchPluginsInMarketPlaceByIds = (unique_identifiers: string[]) unique_identifiers, }, }), - enabled: unique_identifiers.filter(i => !!i).length > 0, // loaded then fetch + enabled: unique_identifiers?.filter(i => !!i).length > 0, + retry: 0, + }) +} + +export const useFetchPluginsInMarketPlaceByInfo = (infos: Record[]) => { + return useQuery({ + queryKey: [NAME_SPACE, 'fetchPluginsInMarketPlaceByInfo', infos], + queryFn: () => postMarketplace<{ data: PluginsFromMarketplaceByInfoResponse }>('/plugins/versions', { + body: { + plugin_tuples: infos.map(info => ({ + org: info.organization, + name: info.plugin, + version: info.version, + })), + }, + }), + enabled: infos?.filter(i => !!i).length > 0, + retry: 0, }) }