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

web/app/(commonLayout)/plugins/page.tsx

@@ -1,12 +1,14 @@
 import PluginPage from '@/app/components/plugins/plugin-page'
 import PluginsPanel from '@/app/components/plugins/plugin-page/plugins-panel'
 import Marketplace from '@/app/components/plugins/marketplace'
+import { getLocaleOnServer } from '@/i18n/server'
 
 const PluginList = async () => {
+  const locale = await getLocaleOnServer()
   return (
     <PluginPage
       plugins={<PluginsPanel />}
-      marketplace={<Marketplace />}
+      marketplace={<Marketplace locale={locale} />}
     />
   )
 }

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

@@ -56,7 +56,7 @@ const InstallBundle: FC<Props> = ({
       <ReadyToInstall
         step={step}
         onStepChange={setStep}
-        dependencies={fromDSLPayload}
+        allPlugins={fromDSLPayload}
         onClose={onClose}
       />
     </Modal>

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

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
-import type { Dependency, Plugin } from '../../../types'
+import type { GitHubItemAndMarketPlaceDependency, Plugin } from '../../../types'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import { useUploadGitHub } from '@/service/use-plugins'
 import Loading from './loading'
@@ -10,8 +10,9 @@ import LoadedItem from './loaded-item'
 type Props = {
   checked: boolean
   onCheckedChange: (plugin: Plugin) => void
-  dependency: Dependency
+  dependency: GitHubItemAndMarketPlaceDependency
   onFetchedPayload: (payload: Plugin) => void
+  onFetchError: () => void
 }
 
 const Item: FC<Props> = ({
@@ -19,9 +20,10 @@ const Item: FC<Props> = ({
   onCheckedChange,
   dependency,
   onFetchedPayload,
+  onFetchError,
 }) => {
   const info = dependency.value
-  const { data } = useUploadGitHub({
+  const { data, error } = useUploadGitHub({
     repo: info.repo!,
     version: info.version!,
     package: info.package!,
@@ -38,6 +40,12 @@ const Item: FC<Props> = ({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data])
+  useEffect(() => {
+    if (error)
+      onFetchError()
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [error])
   if (!payload) return <Loading />
   return (
     <LoadedItem

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

@@ -0,0 +1,30 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { Plugin } from '../../../types'
+import type { PackageDependency } from '../../../types'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import LoadedItem from './loaded-item'
+
+type Props = {
+  checked: boolean
+  onCheckedChange: (plugin: Plugin) => void
+  payload: PackageDependency
+}
+
+const PackageItem: FC<Props> = ({
+  payload,
+  checked,
+  onCheckedChange,
+}) => {
+  const plugin = pluginManifestToCardPluginProps(payload.value.manifest)
+  return (
+    <LoadedItem
+      payload={plugin}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+    />
+  )
+}
+
+export default React.memo(PackageItem)

web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx

@@ -9,14 +9,14 @@ import type { Dependency, InstallStatusResponse, Plugin } from '../../types'
 type Props = {
   step: InstallStep
   onStepChange: (step: InstallStep) => void,
-  dependencies: Dependency[]
+  allPlugins: Dependency[]
   onClose: () => void
 }
 
 const ReadyToInstall: FC<Props> = ({
   step,
   onStepChange,
-  dependencies,
+  allPlugins,
   onClose,
 }) => {
   const [installedPlugins, setInstalledPlugins] = useState<Plugin[]>([])
@@ -30,7 +30,7 @@ const ReadyToInstall: FC<Props> = ({
     <>
       {step === InstallStep.readyToInstall && (
         <Install
-          fromDSLPayload={dependencies}
+          allPlugins={allPlugins}
           onCancel={onClose}
           onInstalled={handleInstalled}
         />

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

@@ -1,30 +1,34 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useEffect, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import type { Dependency, Plugin } from '../../../types'
+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 produce from 'immer'
 import { useGetState } from 'ahooks'
+import PackageItem from '../item/package-item'
 
 type Props = {
-  fromDSLPayload: Dependency[]
+  allPlugins: Dependency[]
   selectedPlugins: Plugin[]
   onSelect: (plugin: Plugin, selectedIndex: number) => void
   onLoadedAllPlugin: () => void
 }
 
 const InstallByDSLList: FC<Props> = ({
-  fromDSLPayload,
+  allPlugins,
   selectedPlugins,
   onSelect,
   onLoadedAllPlugin,
 }) => {
-  const { isLoading: isFetchingMarketplaceData, data: marketplaceRes } = useFetchPluginsInMarketPlaceByIds(fromDSLPayload.filter(d => d.type === 'marketplace').map(d => d.value.plugin_unique_identifier!))
+  const { isLoading: isFetchingMarketplaceData, data: marketplaceRes } = useFetchPluginsInMarketPlaceByIds(allPlugins.filter(d => d.type === 'marketplace').map(d => d.value.plugin_unique_identifier!))
 
   const [plugins, setPlugins, getPlugins] = useGetState<Plugin[]>([])
-  const handlePlugInFetched = useCallback((index: number) => {
+
+  const [errorIndexes, setErrorIndexes] = useState<number[]>([])
+
+  const handleGitHubPluginFetched = useCallback((index: number) => {
     return (p: Plugin) => {
       const nextPlugins = produce(getPlugins(), (draft) => {
         draft[index] = p
@@ -33,14 +37,20 @@ const InstallByDSLList: FC<Props> = ({
     }
   }, [getPlugins, setPlugins])
 
+  const handleGitHubPluginFetchError = useCallback((index: number) => {
+    return () => {
+      setErrorIndexes([...errorIndexes, index])
+    }
+  }, [errorIndexes])
+
   const marketPlaceInDSLIndex = useMemo(() => {
     const res: number[] = []
-    fromDSLPayload.forEach((d, index) => {
+    allPlugins.forEach((d, index) => {
       if (d.type === 'marketplace')
         res.push(index)
     })
     return res
-  }, [fromDSLPayload])
+  }, [allPlugins])
 
   useEffect(() => {
     if (!isFetchingMarketplaceData && marketplaceRes?.data.plugins && marketplaceRes?.data.plugins.length > 0) {
@@ -57,7 +67,7 @@ const InstallByDSLList: FC<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFetchingMarketplaceData])
 
-  const isLoadedAllData = fromDSLPayload.length === plugins.length && plugins.every(p => !!p)
+  const isLoadedAllData = allPlugins.length === plugins.length && plugins.every(p => !!p)
   useEffect(() => {
     if (isLoadedAllData)
       onLoadedAllPlugin()
@@ -71,22 +81,44 @@ const InstallByDSLList: FC<Props> = ({
   }, [onSelect, plugins])
   return (
     <>
-      {fromDSLPayload.map((d, index) => (
+      {allPlugins.map((d, index) => {
-        d.type === 'github'
+        if (errorIndexes.includes(index)) {
-          ? <GithubItem
+          return (
+            <div key={index}>error</div>
+          )
+        }
+        if (d.type === 'github') {
+          return (<GithubItem
             key={index}
             checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
             onCheckedChange={handleSelect(index)}
-            dependency={d}
+            dependency={d as GitHubItemAndMarketPlaceDependency}
-            onFetchedPayload={handlePlugInFetched(index)}
+            onFetchedPayload={handleGitHubPluginFetched(index)}
-          />
+            onFetchError={handleGitHubPluginFetchError(index)}
-          : <MarketplaceItem
+          />)
+        }
+
+        if (d.type === 'marketplace') {
+          return (
+            <MarketplaceItem
+              key={index}
+              checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
+              onCheckedChange={handleSelect(index)}
+              payload={plugins[index] as Plugin}
+            />
+          )
+        }
+
+        return (
+          <PackageItem
             key={index}
             checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
             onCheckedChange={handleSelect(index)}
-            payload={plugins[index] as Plugin}
+            payload={d as PackageDependency}
           />
-      ))}
+        )
+      })
+      }
     </>
   )
 }

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

@@ -5,19 +5,19 @@ import type { Dependency, InstallStatusResponse, Plugin } from '../../../types'
 import Button from '@/app/components/base/button'
 import { RiLoader2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import InstallByDSLList from './install-by-dsl-list'
+import InstallByDSLList from './install-multi'
 import { useInstallFromMarketplaceAndGitHub } from '@/service/use-plugins'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 const i18nPrefix = 'plugin.installModal'
 
 type Props = {
-  fromDSLPayload: Dependency[]
+  allPlugins: Dependency[]
   onInstalled: (plugins: Plugin[], installStatus: InstallStatusResponse[]) => void
   onCancel: () => void
 }
 
 const Install: FC<Props> = ({
-  fromDSLPayload,
+  allPlugins,
   onInstalled,
   onCancel,
 }) => {
@@ -49,7 +49,7 @@ const Install: FC<Props> = ({
       onInstalled(selectedPlugins, res.map((r, i) => {
         return ({
           ...r,
-          isFromMarketPlace: fromDSLPayload[selectedIndexes[i]].type === 'marketplace',
+          isFromMarketPlace: allPlugins[selectedIndexes[i]].type === 'marketplace',
         })
       }))
       const hasInstallSuccess = res.some(r => r.success)
@@ -58,7 +58,7 @@ const Install: FC<Props> = ({
     },
   })
   const handleInstall = () => {
-    installFromMarketplaceAndGitHub(fromDSLPayload.filter((_d, index) => selectedIndexes.includes(index)))
+    installFromMarketplaceAndGitHub(allPlugins.filter((_d, index) => selectedIndexes.includes(index)))
   }
   return (
     <>
@@ -68,7 +68,7 @@ const Install: FC<Props> = ({
         </div>
         <div className='w-full p-2 rounded-2xl bg-background-section-burn space-y-1'>
           <InstallByDSLList
-            fromDSLPayload={fromDSLPayload}
+            allPlugins={allPlugins}
             selectedPlugins={selectedPlugins}
             onSelect={handleSelect}
             onLoadedAllPlugin={handleLoadedAllPlugin}

web/app/components/plugins/install-plugin/install-from-local-package/index.tsx

@@ -98,7 +98,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
           step={step}
           onStepChange={setStep}
           onClose={onClose}
-          dependencies={dependencies}
+          allPlugins={dependencies}
         />
       ) : (
         <ReadyToInstallPackage

web/app/components/plugins/marketplace/hooks.ts

@@ -14,6 +14,7 @@ import type {
 } from './types'
 import {
   getMarketplaceCollectionsAndPlugins,
+  getPluginIconInMarketplace,
 } from './utils'
 import i18n from '@/i18n/i18next-config'
 import { useMutationPluginsFromMarketplace } from '@/service/use-plugins'
@@ -61,7 +62,10 @@ export const useMarketplacePlugins = () => {
   })
 
   return {
-    plugins: data?.data?.plugins,
+    plugins: data?.data?.plugins.map(plugin => ({
+      ...plugin,
+      icon: getPluginIconInMarketplace(plugin),
+    })),
     resetPlugins: reset,
     queryPlugins,
     queryPluginsWithDebounced,

web/app/components/plugins/marketplace/index.tsx

@@ -9,7 +9,7 @@ import { getMarketplaceCollectionsAndPlugins } from './utils'
 import { TanstackQueryIniter } from '@/context/query-client'
 
 type MarketplaceProps = {
-  locale?: string
+  locale: string
   showInstallButton?: boolean
   searchParams?: SearchParams
 }

web/app/components/plugins/marketplace/list/index.tsx

@@ -10,7 +10,7 @@ type ListProps = {
   marketplaceCollectionPluginsMap: Record<string, Plugin[]>
   plugins?: Plugin[]
   showInstallButton?: boolean
-  locale?: string
+  locale: string
 }
 const List = ({
   marketplaceCollections,

web/app/components/plugins/marketplace/list/list-with-collection.tsx

@@ -2,12 +2,13 @@
 import type { MarketplaceCollection } from '../types'
 import CardWrapper from './card-wrapper'
 import type { Plugin } from '@/app/components/plugins/types'
+import { getLanguage } from '@/i18n/language'
 
 type ListWithCollectionProps = {
   marketplaceCollections: MarketplaceCollection[]
   marketplaceCollectionPluginsMap: Record<string, Plugin[]>
   showInstallButton?: boolean
-  locale?: string
+  locale: string
 }
 const ListWithCollection = ({
   marketplaceCollections,
@@ -23,8 +24,8 @@ const ListWithCollection = ({
             key={collection.name}
             className='py-3'
           >
-            <div className='title-xl-semi-bold text-text-primary'>{collection.name}</div>
+            <div className='title-xl-semi-bold text-text-primary'>{collection.label[getLanguage(locale)]}</div>
-            <div className='system-xs-regular text-text-tertiary'>{collection.description}</div>
+            <div className='system-xs-regular text-text-tertiary'>{collection.description[getLanguage(locale)]}</div>
             <div className='grid grid-cols-4 gap-3 mt-2'>
               {
                 marketplaceCollectionPluginsMap[collection.name].map(plugin => (

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

@@ -11,7 +11,7 @@ type ListWrapperProps = {
   marketplaceCollections: MarketplaceCollection[]
   marketplaceCollectionPluginsMap: Record<string, Plugin[]>
   showInstallButton?: boolean
-  locale?: string
+  locale: string
 }
 const ListWrapper = ({
   marketplaceCollections,

web/app/components/plugins/marketplace/types.ts

@@ -2,7 +2,8 @@ import type { Plugin } from '../types'
 
 export type MarketplaceCollection = {
   name: string
-  description: string
+  label: Record<string, string>
+  description: Record<string, string>
   rule: string
   created_at: string
   updated_at: string

web/app/components/plugins/provider-card.tsx

@@ -64,17 +64,17 @@ const ProviderCard: FC<Props> = ({
         className='hidden group-hover:flex items-center gap-2 absolute bottom-0 left-0 right-0 p-4 pt-8 rounded-xl bg-gradient-to-tr from-[#f9fafb] to-[rgba(249,250,251,0)]'
       >
         <Button
-          className='flex-grow'
+          className='grow'
           variant='primary'
           onClick={showInstallFromMarketplace}
         >
           {t('plugin.detailPanel.operation.install')}
         </Button>
         <Button
-          className='flex-grow'
+          className='grow'
           variant='secondary'
         >
-          <a href={`${MARKETPLACE_URL_PREFIX}/plugin/${payload.org}/${payload.name}`} target='_blank' className='flex items-center gap-0.5'>
+          <a href={`${MARKETPLACE_URL_PREFIX}/plugins/${payload.org}/${payload.name}`} target='_blank' className='flex items-center gap-0.5'>
             {t('plugin.detailPanel.operation.detail')}
             <RiArrowRightUpLine className='w-4 h-4' />
           </a>

web/app/components/plugins/types.ts

@@ -311,7 +311,7 @@ export type PluginsFromMarketplaceResponse = {
   plugins: Plugin[]
 }
 
-export type Dependency = {
+export type GitHubItemAndMarketPlaceDependency = {
   type: 'github' | 'marketplace' | 'package'
   value: {
     repo?: string
@@ -323,6 +323,16 @@ export type Dependency = {
   }
 }
 
+export type PackageDependency = {
+  type: 'github' | 'marketplace' | 'package'
+  value: {
+    unique_identifier: string
+    manifest: PluginDeclaration
+  }
+}
+
+export type Dependency = GitHubItemAndMarketPlaceDependency | PackageDependency
+
 export type Version = {
   plugin_org: string
   plugin_name: string