feat: fill update install payload

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

@@ -1,4 +1,5 @@
 'use client'
+import { toolNeko } from '@/app/components/plugins/card/card-mock'
 import { PluginSource } from '@/app/components/plugins/types'
 import { useModalContext } from '@/context/modal-context'
 import React from 'react'
@@ -11,11 +12,12 @@ const UpdatePlugin = () => {
         type: PluginSource.marketplace,
         marketPlace: {
           originalPackageInfo: {
-            id: 'original_xxx',
+            id: 'langgenius/neko:0.0.1@9e57d693739287c0efdc96847d7ed959ca93f70aa704471f2eb7ed3313821824',
+            payload: toolNeko as any,
           },
           targetPackageInfo: {
             id: 'target_xxx',
-            payload: {} as any,
+            version: '1.2.3',
           },
         },
       },

web/app/components/plugins/card/card-mock.ts

@@ -1,6 +1,64 @@
 import type { PluginDeclaration } from '../types'
 import { PluginType } from '../types'
 
+export const toolNeko: PluginDeclaration = {
+  version: '0.0.1',
+  author: 'langgenius',
+  name: 'neko',
+  description: {
+    en_US: 'Neko is a cute cat.',
+    zh_Hans: '这是一只可爱的小猫。',
+    pt_BR: 'Neko is a cute cat.',
+    ja_JP: 'Neko is a cute cat.',
+  },
+  icon: '241e5209ecc8b5ce6b7a29a8e50388e9c75b89c3047c6ecd8e552f26de758883.svg',
+  label: {
+    en_US: 'Neko',
+    zh_Hans: 'Neko',
+    pt_BR: 'Neko',
+    ja_JP: 'Neko',
+  },
+  category: 'extension' as any,
+  created_at: '2024-07-12T08:03:44.658609Z',
+  resource: {
+    memory: 1048576,
+    permission: {
+      tool: {
+        enabled: true,
+      },
+      model: {
+        enabled: true,
+        llm: true,
+        text_embedding: false,
+        rerank: false,
+        tts: false,
+        speech2text: false,
+        moderation: false,
+      },
+      node: null,
+      endpoint: {
+        enabled: true,
+      },
+      storage: {
+        enabled: true,
+        size: 1048576,
+      },
+    },
+  },
+  plugins: {
+    tools: null,
+    models: null,
+    endpoints: [
+      'provider/neko.yaml',
+    ],
+  },
+  tags: [],
+  verified: false,
+  tool: null,
+  model: null,
+  endpoint: null,
+}
+
 export const toolNotion = {
   type: PluginType.tool,
   org: 'Notion',

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

@@ -40,7 +40,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
       return t(`${i18nPrefix}.installFailed`)
 
     return t(`${i18nPrefix}.installPlugin`)
-  }, [step])
+  }, [step, t])
 
   const { getIconUrl } = useGetIcon()
 
@@ -59,7 +59,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
       icon,
     })
     setStep(InstallStep.readyToInstall)
-  }, [])
+  }, [getIconUrl])
 
   const handleUploadFail = useCallback((errorMsg: string) => {
     setErrorMsg(errorMsg)

web/app/components/plugins/install-plugin/utils.ts

@@ -3,6 +3,7 @@ import type { GitHubUrlInfo } from '@/app/components/plugins/types'
 
 export const pluginManifestToCardPluginProps = (pluginManifest: PluginDeclaration): Plugin => {
   return {
+    plugin_id: pluginManifest.plugin_unique_identifier,
     type: pluginManifest.category,
     category: pluginManifest.category,
     name: pluginManifest.name,
@@ -25,6 +26,7 @@ export const pluginManifestToCardPluginProps = (pluginManifest: PluginDeclaratio
 
 export const pluginManifestInMarketToPluginProps = (pluginManifest: PluginManifestInMarket): Plugin => {
   return {
+    plugin_id: pluginManifest.plugin_unique_identifier,
     type: pluginManifest.category,
     category: pluginManifest.category,
     name: pluginManifest.name,

web/app/components/plugins/types.ts

@@ -54,6 +54,7 @@ export type EndpointListItem = {
 
 // Plugin manifest
 export type PluginDeclaration = {
+  plugin_unique_identifier: string
   version: string
   author: string
   icon: string
@@ -71,6 +72,7 @@ export type PluginDeclaration = {
 }
 
 export type PluginManifestInMarket = {
+  plugin_unique_identifier: string
   name: string
   org: string
   icon: string
@@ -137,10 +139,11 @@ export type Permissions = {
 export type UpdateFromMarketPlacePayload = {
   originalPackageInfo: {
     id: string
+    payload: PluginDeclaration
   },
   targetPackageInfo: {
     id: string
-    payload: PluginDeclaration
+    version: string
   }
 }
 

web/app/components/plugins/update-plugin/from-market-place.tsx

@@ -1,14 +1,15 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { RiInformation2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Card from '@/app/components/plugins/card'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import { toolNotion } from '@/app/components/plugins/card/card-mock'
 import type { UpdateFromMarketPlacePayload } from '../types'
+import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils'
+import useGetIcon from '../install-plugin/base/use-get-icon'
 
 const i18nPrefix = 'plugin.upgrade'
 
@@ -25,10 +26,23 @@ enum UploadStep {
 }
 
 const UpdatePluginModal: FC<Props> = ({
+  payload,
   onSave,
   onCancel,
 }) => {
+  const {
+    originalPackageInfo,
+    targetPackageInfo,
+  } = payload
   const { t } = useTranslation()
+  const { getIconUrl } = useGetIcon()
+  const [icon, setIcon] = useState<string>(originalPackageInfo.payload.icon)
+  useEffect(() => {
+    (async () => {
+      const icon = await getIconUrl(originalPackageInfo.payload.icon)
+      setIcon(icon)
+    })()
+  }, [originalPackageInfo, getIconUrl])
   const [uploadStep, setUploadStep] = useState<UploadStep>(UploadStep.notStarted)
   const configBtnText = useMemo(() => {
     return ({
@@ -65,12 +79,15 @@ const UpdatePluginModal: FC<Props> = ({
       <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
         <Card
           installed={uploadStep === UploadStep.installed}
-          payload={toolNotion as any}
+          payload={pluginManifestToCardPluginProps({
+            ...originalPackageInfo.payload,
+            icon: icon!,
+          })}
           className='w-full'
           titleLeft={
             <>
               <Badge className='mx-1' size="s" state={BadgeState.Warning}>
-                {'1.2.0 -> 1.3.2'}
+                {`${originalPackageInfo.payload.version} -> ${targetPackageInfo.version}`}
               </Badge>
               <div className='flex px-0.5 justify-center items-center gap-0.5'>
                 <div className='text-text-warning system-xs-medium'>{t(`${i18nPrefix}.usedInApps`, { num: 3 })}</div>