Merge branch 'feat/plugins' into dev/plugin-deploy

web/app/components/plugins/install-plugin/install-bundle/index.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import Modal from '@/app/components/base/modal'
 import React, { useCallback, useState } from 'react'
 import { InstallStep } from '../../types'
-import type { Dependency, Plugin } from '../../types'
+import type { Dependency, InstallStatusResponse, Plugin } from '../../types'
 import Install from './steps/install'
 import Installed from './steps/installed'
 import { useTranslation } from 'react-i18next'
@@ -31,7 +31,7 @@ const InstallBundle: FC<Props> = ({
   const { t } = useTranslation()
   const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
   const [installedPlugins, setInstalledPlugins] = useState<Plugin[]>([])
-  const [installStatus, setInstallStatus] = useState<{ success: boolean }[]>([])
+  const [installStatus, setInstallStatus] = useState<InstallStatusResponse[]>([])
   const getTitle = useCallback(() => {
     if (step === InstallStep.uploadFailed)
       return t(`${i18nPrefix}.uploadFailed`)
@@ -43,7 +43,7 @@ const InstallBundle: FC<Props> = ({
     return t(`${i18nPrefix}.installPlugin`)
   }, [step, t])
 
-  const handleInstalled = useCallback((plugins: Plugin[], installStatus: { success: boolean }[]) => {
+  const handleInstalled = useCallback((plugins: Plugin[], installStatus: InstallStatusResponse[]) => {
     setInstallStatus(installStatus)
     setInstalledPlugins(plugins)
     setStep(InstallStep.installed)

web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx

@@ -6,17 +6,20 @@ import Card from '../../../card'
 import Checkbox from '@/app/components/base/checkbox'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import useGetIcon from '../../base/use-get-icon'
+import { MARKETPLACE_API_PREFIX } from '@/config'
 
 type Props = {
   checked: boolean
   onCheckedChange: (plugin: Plugin) => void
   payload: Plugin
+  isFromMarketPlace?: boolean
 }
 
 const LoadedItem: FC<Props> = ({
   checked,
   onCheckedChange,
   payload,
+  isFromMarketPlace,
 }) => {
   const { getIconUrl } = useGetIcon()
   return (
@@ -30,7 +33,7 @@ const LoadedItem: FC<Props> = ({
         className='grow'
         payload={{
           ...payload,
-          icon: getIconUrl(payload.icon),
+          icon: isFromMarketPlace ? `${MARKETPLACE_API_PREFIX}/plugins/${payload.org}/${payload.name}/icon` : getIconUrl(payload.icon),
         }}
         titleLeft={payload.version ? <Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge> : null}
       />

web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx

@@ -22,6 +22,7 @@ const MarketPlaceItem: FC<Props> = ({
       checked={checked}
       onCheckedChange={onCheckedChange}
       payload={payload}
+      isFromMarketPlace
     />
   )
 }

web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
-import type { Dependency, Plugin } from '../../../types'
+import type { Dependency, InstallStatusResponse, Plugin } from '../../../types'
 import Button from '@/app/components/base/button'
 import { RiLoader2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
@@ -12,7 +12,7 @@ const i18nPrefix = 'plugin.installModal'
 
 type Props = {
   fromDSLPayload: Dependency[]
-  onInstalled: (plugins: Plugin[], installStatus: { success: boolean }[]) => void
+  onInstalled: (plugins: Plugin[], installStatus: InstallStatusResponse[]) => void
   onCancel: () => void
 }
 
@@ -45,8 +45,13 @@ const Install: FC<Props> = ({
 
   // Install from marketplace and github
   const { mutate: installFromMarketplaceAndGitHub, isPending: isInstalling } = useInstallFromMarketplaceAndGitHub({
-    onSuccess: (res: { success: boolean }[]) => {
-      onInstalled(selectedPlugins, res)
+    onSuccess: (res: InstallStatusResponse[]) => {
+      onInstalled(selectedPlugins, res.map((r, i) => {
+        return ({
+          ...r,
+          isFromMarketPlace: fromDSLPayload[selectedIndexes[i]].type === 'marketplace',
+        })
+      }))
       const hasInstallSuccess = res.some(r => r.success)
       if (hasInstallSuccess)
         invalidateInstalledPluginList()

web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx

@@ -7,10 +7,11 @@ import Button from '@/app/components/base/button'
 import { useTranslation } from 'react-i18next'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import useGetIcon from '../../base/use-get-icon'
+import { MARKETPLACE_API_PREFIX } from '@/config'
 
 type Props = {
   list: Plugin[]
-  installStatus: { success: boolean }[]
+  installStatus: { success: boolean, isFromMarketPlace: boolean }[]
   onCancel: () => void
 }
 
@@ -33,7 +34,7 @@ const Installed: FC<Props> = ({
                 className='w-full'
                 payload={{
                   ...plugin,
-                  icon: getIconUrl(plugin.icon),
+                  icon: installStatus[index].isFromMarketPlace ? `${MARKETPLACE_API_PREFIX}/plugins/${plugin.org}/${plugin.name}/icon` : getIconUrl(plugin.icon),
                 }}
                 installed={installStatus[index].success}
                 installFailed={!installStatus[index].success}

web/app/components/plugins/marketplace/list/card-wrapper.tsx

@@ -56,7 +56,7 @@ const CardWrapper = ({
               <Button
                 className='flex-1'
               >
-                <a href={`${MARKETPLACE_URL_PREFIX}/plugin/${plugin.org}/${plugin.name}?language=${localeFromLocale}`} target='_blank' className='flex items-center gap-0.5'>
+                <a href={`${MARKETPLACE_URL_PREFIX}/plugins/${plugin.org}/${plugin.name}?language=${localeFromLocale}`} target='_blank' className='flex items-center gap-0.5'>
                   {t('plugin.detailPanel.operation.detail')}
                   <RiArrowRightUpLine className='ml-1 w-4 h-4' />
                 </a>

web/app/components/plugins/types.ts

@@ -238,6 +238,11 @@ export type InstallPackageResponse = {
   task_id: string
 }
 
+export type InstallStatusResponse = {
+  success: boolean,
+  isFromMarketPlace?: boolean
+}
+
 export type updatePackageResponse = {
   all_installed: boolean
   task_id: string