feat: support upload pkg

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(() => {