feat: support upload pkg

web/app/components/plugins/install-plugin/base/installed.tsx

@@ -6,31 +6,37 @@ import Card from '../../card'
 import Button from '@/app/components/base/button'
 import { pluginManifestToCardPluginProps } from '../utils'
 import { useTranslation } from 'react-i18next'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
 
 type Props = {
-  payload: PluginDeclaration
+  payload?: PluginDeclaration | null
   isFailed: boolean
+  errMsg?: string | null
   onCancel: () => void
 }
 
 const Installed: FC<Props> = ({
   payload,
   isFailed,
+  errMsg,
   onCancel,
 }) => {
   const { t } = useTranslation()
   return (
     <>
       <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
-        <p className='text-text-secondary system-md-regular'>{t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p>
-        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
-          <Card
-            className='w-full'
-            payload={pluginManifestToCardPluginProps(payload)}
-            installed={!isFailed}
-            installFailed={isFailed}
-          />
-        </div>
+        <p className='text-text-secondary system-md-regular'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p>
+        {payload && (
+          <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+            <Card
+              className='w-full'
+              payload={pluginManifestToCardPluginProps(payload)}
+              installed={!isFailed}
+              installFailed={isFailed}
+              titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge>}
+            />
+          </div>
+        )}
       </div>
       {/* Action Buttons */}
       <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>

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

@@ -8,7 +8,6 @@ import Uploading from './steps/uploading'
 import Install from './steps/install'
 import Installed from '../base/installed'
 import { useTranslation } from 'react-i18next'
-import { toolNotionManifest } from '../../card/card-mock'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -23,19 +22,21 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
   onClose,
 }) => {
   const { t } = useTranslation()
-  // uploading -> readyToInstall -> installed/failed
+  // uploading -> !uploadFailed -> readyToInstall -> installed/failed
   const [step, setStep] = useState<InstallStep>(InstallStep.uploading)
-
   const [uniqueIdentifier, setUniqueIdentifier] = useState<string | null>(null)
-
+  const [manifest, setManifest] = useState<PluginDeclaration | null>(null)
+  const [errorMsg, setErrorMsg] = useState<string | null>(null)
   const getTitle = useCallback(() => {
+    if (step === InstallStep.uploadFailed)
+      return t(`${i18nPrefix}.uploadFailed`)
     if (step === InstallStep.installed)
       return t(`${i18nPrefix}.installedSuccessfully`)
     if (step === InstallStep.installFailed)
       return t(`${i18nPrefix}.installFailed`)
+
     return t(`${i18nPrefix}.installPlugin`)
   }, [step])
-  const [manifest, setManifest] = useState<PluginDeclaration | null>(toolNotionManifest)
 
   const handleUploaded = useCallback((result: {
     uniqueIdentifier: string
@@ -46,6 +47,11 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
     setStep(InstallStep.readyToInstall)
   }, [])
 
+  const handleUploadFail = useCallback((errorMsg: string) => {
+    setErrorMsg(errorMsg)
+    setStep(InstallStep.uploadFailed)
+  }, [])
+
   const handleInstalled = useCallback(async () => {
     setStep(InstallStep.installed)
   }, [])
@@ -71,6 +77,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
           file={file}
           onCancel={onClose}
           onUploaded={handleUploaded}
+          onFailed={handleUploadFail}
         />
       )}
       {
@@ -84,10 +91,11 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
         )
       }
       {
-        ([InstallStep.installed, InstallStep.installFailed].includes(step)) && (
+        ([InstallStep.uploadFailed, InstallStep.installed, InstallStep.installFailed].includes(step)) && (
           <Installed
-            payload={manifest!}
-            isFailed={step === InstallStep.installFailed}
+            payload={manifest}
+            isFailed={[InstallStep.uploadFailed, InstallStep.installFailed].includes(step)}
+            errMsg={errorMsg}
             onCancel={onClose}
           />
         )

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

@@ -8,6 +8,7 @@ import Button from '@/app/components/base/button'
 import { sleep } from '@/utils'
 import { Trans, useTranslation } from 'react-i18next'
 import { RiLoader2Line } from '@remixicon/react'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -51,6 +52,7 @@ const Installed: FC<Props> = ({
           <Card
             className='w-full'
             payload={pluginManifestToCardPluginProps(payload)}
+            titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge>}
           />
         </div>
       </div>

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

@@ -5,10 +5,8 @@ import { RiLoader2Line } from '@remixicon/react'
 import Card from '../../../card'
 import type { PluginDeclaration } from '../../../types'
 import Button from '@/app/components/base/button'
-import { sleep } from '@/utils'
 import { useTranslation } from 'react-i18next'
-import { toolNotionManifest } from '../../../card/card-mock'
-
+import { uploadPackageFile } from '@/service/plugins'
 const i18nPrefix = 'plugin.installModal'
 
 type Props = {
@@ -18,21 +16,30 @@ type Props = {
     uniqueIdentifier: string
     manifest: PluginDeclaration
   }) => void
+  onFailed: (errorMsg: string) => void
 }
 
 const Uploading: FC<Props> = ({
   file,
   onCancel,
   onUploaded,
+  onFailed,
 }) => {
   const { t } = useTranslation()
   const fileName = file.name
   const handleUpload = async () => {
-    await sleep(3000)
-    onUploaded({
-      uniqueIdentifier: 'yeuoly/neko:0.0.1@5395654da2c0b919b3d9b946a1a0545b737004380765e5f3b8c49976d3276c87',
-      manifest: toolNotionManifest,
-    })
+    try {
+      const res = await uploadPackageFile(file)
+      onUploaded(res)
+    }
+    catch (e: any) {
+      if (e.response?.message) {
+        onFailed(e.response?.message)
+      }
+      else { // Why it would into this branch?
+        onUploaded(e.response)
+      }
+    }
   }
 
   React.useEffect(() => {

web/app/components/plugins/types.ts

@@ -168,6 +168,7 @@ export type UpdateEndpointRequest = {
 
 export enum InstallStep {
   uploading = 'uploading',
+  uploadFailed = 'uploadFailed',
   readyToInstall = 'readyToInstall',
   installing = 'installing',
   installed = 'installed',

web/i18n/en-US/plugin.ts

@@ -63,6 +63,7 @@ const translation = {
     installPlugin: 'Install Plugin',
     installedSuccessfully: 'Installation successful',
     installedSuccessfullyDesc: 'The plugin has been installed successfully.',
+    uploadFailed: 'Upload failed',
     installFailed: 'Installation failed',
     installFailedDesc: 'The plugin has been installed failed.',
     install: 'Install',

web/i18n/zh-Hans/plugin.ts

@@ -63,6 +63,7 @@ const translation = {
     installPlugin: '安装插件',
     installedSuccessfully: '安装成功',
     installedSuccessfullyDesc: '插件已成功安装。',
+    uploadFailed: '上传失败',
     installFailed: '安装失败',
     installFailedDesc: '插件安装失败。',
     install: '安装',

web/service/plugins.ts

@@ -1,5 +1,5 @@
 import type { Fetcher } from 'swr'
-import { del, get, post } from './base'
+import { del, get, post, upload } from './base'
 import type {
   CreateEndpointRequest,
   EndpointOperationResponse,
@@ -49,3 +49,12 @@ export const installPackageFromGitHub: Fetcher<InstallPackageResponse, { repo: s
 export const fetchDebugKey = async () => {
   return get<DebugInfoTypes>('/workspaces/current/plugin/debugging-key')
 }
+
+export const uploadPackageFile = async (file: File) => {
+  const formData = new FormData()
+  formData.append('pkg', file)
+  return upload({
+    xhr: new XMLHttpRequest(),
+    data: formData,
+  }, false, '/workspaces/current/plugin/upload/pkg')
+}