refactor(DSL imports): using organization/name/version to fetch DSL dependencies. (#20757)

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, VersionInfo } from '../../../types'
 import MarketplaceItem from '../item/marketplace-item'
 import GithubItem from '../item/github-item'
-import { useFetchPluginsInMarketPlaceByIds, useFetchPluginsInMarketPlaceByInfo } from '@/service/use-plugins'
+import { useFetchPluginsInMarketPlaceByInfo } from '@/service/use-plugins'
 import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
 import produce from 'immer'
 import PackageItem from '../item/package-item'
@@ -26,7 +26,18 @@ const InstallByDSLList: FC<Props> = ({
   isFromMarketPlace,
 }) => {
   // DSL has id, to get plugin info to show more info
-  const { isLoading: isFetchingMarketplaceDataById, data: infoGetById, error: infoByIdError } = useFetchPluginsInMarketPlaceByIds(allPlugins.filter(d => d.type === 'marketplace').map(d => (d as GitHubItemAndMarketPlaceDependency).value.marketplace_plugin_unique_identifier!))
+  const { isLoading: isFetchingMarketplaceDataById, data: infoGetById, error: infoByIdError } = useFetchPluginsInMarketPlaceByInfo(allPlugins.filter(d => d.type === 'marketplace').map((d) => {
+    const dependecy = (d as GitHubItemAndMarketPlaceDependency).value
+    // split org, name, version by / and :
+    // and remove @ and its suffix
+    const [orgPart, nameAndVersionPart] = dependecy.marketplace_plugin_unique_identifier!.split('@')[0].split('/')
+    const [name, version] = nameAndVersionPart.split(':')
+    return {
+      organization: orgPart,
+      plugin: name,
+      version,
+    }
+  }))
   // has meta(org,name,version), to get id
   const { isLoading: isFetchingDataByMeta, data: infoByMeta, error: infoByMetaError } = useFetchPluginsInMarketPlaceByInfo(allPlugins.filter(d => d.type === 'marketplace').map(d => (d as GitHubItemAndMarketPlaceDependency).value!))
 
@@ -82,11 +93,11 @@ const InstallByDSLList: FC<Props> = ({
   }, [allPlugins])
 
   useEffect(() => {
-    if (!isFetchingMarketplaceDataById && infoGetById?.data.plugins) {
+    if (!isFetchingMarketplaceDataById && infoGetById?.data.list) {
       const sortedList = allPlugins.filter(d => d.type === 'marketplace').map((d) => {
         const p = d as GitHubItemAndMarketPlaceDependency
         const id = p.value.marketplace_plugin_unique_identifier?.split(':')[0]
-        return infoGetById.data.plugins.find(item => item.plugin_id === id)!
+        return infoGetById.data.list.find(item => item.plugin.plugin_id === id)?.plugin
       })
       const payloads = sortedList
       const failedIndex: number[] = []