feat: can upload and parse bundle

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

@@ -3,9 +3,8 @@ 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, InstallStatusResponse, Plugin } from '../../types'
-import Install from './steps/install'
-import Installed from './steps/installed'
+import type { Dependency } from '../../types'
+import ReadyToInstall from './ready-to-install'
 import { useTranslation } from 'react-i18next'
 
 const i18nPrefix = 'plugin.installModal'
@@ -30,8 +29,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<InstallStatusResponse[]>([])
+
   const getTitle = useCallback(() => {
     if (step === InstallStep.uploadFailed)
       return t(`${i18nPrefix}.uploadFailed`)
@@ -43,12 +41,6 @@ const InstallBundle: FC<Props> = ({
     return t(`${i18nPrefix}.installPlugin`)
   }, [step, t])
 
-  const handleInstalled = useCallback((plugins: Plugin[], installStatus: InstallStatusResponse[]) => {
-    setInstallStatus(installStatus)
-    setInstalledPlugins(plugins)
-    setStep(InstallStep.installed)
-  }, [])
-
   return (
     <Modal
       isShow={true}
@@ -61,20 +53,12 @@ const InstallBundle: FC<Props> = ({
           {getTitle()}
         </div>
       </div>
-      {step === InstallStep.readyToInstall && (
-        <Install
-          fromDSLPayload={fromDSLPayload}
-          onCancel={onClose}
-          onInstalled={handleInstalled}
-        />
-      )}
-      {step === InstallStep.installed && (
-        <Installed
-          list={installedPlugins}
-          installStatus={installStatus}
-          onCancel={onClose}
-        />
-      )}
+      <ReadyToInstall
+        step={step}
+        onStepChange={setStep}
+        dependencies={fromDSLPayload}
+        onClose={onClose}
+      />
     </Modal>
   )
 }

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

@@ -0,0 +1,48 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import { InstallStep } from '../../types'
+import Install from './steps/install'
+import Installed from './steps/installed'
+import type { Dependency, InstallStatusResponse, Plugin } from '../../types'
+
+type Props = {
+  step: InstallStep
+  onStepChange: (step: InstallStep) => void,
+  dependencies: Dependency[]
+  onClose: () => void
+}
+
+const ReadyToInstall: FC<Props> = ({
+  step,
+  onStepChange,
+  dependencies,
+  onClose,
+}) => {
+  const [installedPlugins, setInstalledPlugins] = useState<Plugin[]>([])
+  const [installStatus, setInstallStatus] = useState<InstallStatusResponse[]>([])
+  const handleInstalled = useCallback((plugins: Plugin[], installStatus: InstallStatusResponse[]) => {
+    setInstallStatus(installStatus)
+    setInstalledPlugins(plugins)
+    onStepChange(InstallStep.installed)
+  }, [onStepChange])
+  return (
+    <>
+      {step === InstallStep.readyToInstall && (
+        <Install
+          fromDSLPayload={dependencies}
+          onCancel={onClose}
+          onInstalled={handleInstalled}
+        />
+      )}
+      {step === InstallStep.installed && (
+        <Installed
+          list={installedPlugins}
+          installStatus={installStatus}
+          onCancel={onClose}
+        />
+      )}
+    </>
+  )
+}
+export default React.memo(ReadyToInstall)

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

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import type { Plugin } from '../../../types'
+import type { InstallStatusResponse, Plugin } from '../../../types'
 import Card from '@/app/components/plugins/card'
 import Button from '@/app/components/base/button'
 import { useTranslation } from 'react-i18next'
@@ -11,7 +11,7 @@ import { MARKETPLACE_API_PREFIX } from '@/config'
 
 type Props = {
   list: Plugin[]
-  installStatus: { success: boolean, isFromMarketPlace: boolean }[]
+  installStatus: InstallStatusResponse[]
   onCancel: () => void
 }
 

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

@@ -2,14 +2,13 @@
 
 import React, { useCallback, useState } from 'react'
 import Modal from '@/app/components/base/modal'
-import type { PluginDeclaration } from '../../types'
+import type { Dependency, PluginDeclaration } from '../../types'
 import { InstallStep } from '../../types'
 import Uploading from './steps/uploading'
-import Install from './steps/install'
-import Installed from '../base/installed'
 import { useTranslation } from 'react-i18next'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
-import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import ReadyToInstallPackage from './ready-to-install'
+import ReadyToInstallBundle from '../install-bundle/ready-to-install'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -29,7 +28,8 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
   const [uniqueIdentifier, setUniqueIdentifier] = useState<string | null>(null)
   const [manifest, setManifest] = useState<PluginDeclaration | null>(null)
   const [errorMsg, setErrorMsg] = useState<string | null>(null)
-  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const isBundle = file.name.endsWith('.bundle')
+  const [dependencies, setDependencies] = useState<Dependency[]>([])
 
   const getTitle = useCallback(() => {
     if (step === InstallStep.uploadFailed)
@@ -44,7 +44,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
 
   const { getIconUrl } = useGetIcon()
 
-  const handleUploaded = useCallback(async (result: {
+  const handlePackageUploaded = useCallback(async (result: {
     uniqueIdentifier: string
     manifest: PluginDeclaration
   }) => {
@@ -61,22 +61,16 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
     setStep(InstallStep.readyToInstall)
   }, [getIconUrl])
 
+  const handleBundleUploaded = useCallback((result: Dependency[]) => {
+    setDependencies(result)
+    setStep(InstallStep.readyToInstall)
+  }, [])
+
   const handleUploadFail = useCallback((errorMsg: string) => {
     setErrorMsg(errorMsg)
     setStep(InstallStep.uploadFailed)
   }, [])
 
-  const handleInstalled = useCallback(() => {
-    invalidateInstalledPluginList()
-    setStep(InstallStep.installed)
-  }, [invalidateInstalledPluginList])
-
-  const handleFailed = useCallback((errorMsg?: string) => {
-    setStep(InstallStep.installFailed)
-    if (errorMsg)
-      setErrorMsg(errorMsg)
-  }, [])
-
   return (
     <Modal
       isShow={true}
@@ -91,33 +85,32 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
       </div>
       {step === InstallStep.uploading && (
         <Uploading
+          isBundle={isBundle}
           file={file}
           onCancel={onClose}
-          onUploaded={handleUploaded}
+          onPackageUploaded={handlePackageUploaded}
+          onBundleUploaded={handleBundleUploaded}
           onFailed={handleUploadFail}
         />
       )}
-      {
-        step === InstallStep.readyToInstall && (
-          <Install
-            uniqueIdentifier={uniqueIdentifier!}
-            payload={manifest!}
-            onCancel={onClose}
-            onInstalled={handleInstalled}
-            onFailed={handleFailed}
-          />
-        )
-      }
-      {
-        ([InstallStep.uploadFailed, InstallStep.installed, InstallStep.installFailed].includes(step)) && (
-          <Installed
-            payload={manifest}
-            isFailed={[InstallStep.uploadFailed, InstallStep.installFailed].includes(step)}
-            errMsg={errorMsg}
-            onCancel={onClose}
-          />
-        )
-      }
+      {isBundle ? (
+        <ReadyToInstallBundle
+          step={step}
+          onStepChange={setStep}
+          onClose={onClose}
+          dependencies={dependencies}
+        />
+      ) : (
+        <ReadyToInstallPackage
+          step={step}
+          onStepChange={setStep}
+          onClose={onClose}
+          uniqueIdentifier={uniqueIdentifier}
+          manifest={manifest}
+          errorMsg={errorMsg}
+          onError={setErrorMsg}
+        />
+      )}
     </Modal>
   )
 }

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

@@ -0,0 +1,68 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import type { PluginDeclaration } from '../../types'
+import { InstallStep } from '../../types'
+import Install from './steps/install'
+import Installed from '../base/installed'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+
+type Props = {
+  step: InstallStep
+  onStepChange: (step: InstallStep) => void,
+  onClose: () => void
+  uniqueIdentifier: string | null,
+  manifest: PluginDeclaration | null,
+  errorMsg: string | null,
+  onError: (errorMsg: string) => void,
+}
+
+const ReadyToInstall: FC<Props> = ({
+  step,
+  onStepChange,
+  onClose,
+  uniqueIdentifier,
+  manifest,
+  errorMsg,
+  onError,
+}) => {
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+
+  const handleInstalled = useCallback(() => {
+    invalidateInstalledPluginList()
+    onStepChange(InstallStep.installed)
+  }, [invalidateInstalledPluginList, onStepChange])
+
+  const handleFailed = useCallback((errorMsg?: string) => {
+    onStepChange(InstallStep.installFailed)
+    if (errorMsg)
+      onError(errorMsg)
+  }, [onError, onStepChange])
+
+  return (
+    <>
+      {
+        step === InstallStep.readyToInstall && (
+          <Install
+            uniqueIdentifier={uniqueIdentifier!}
+            payload={manifest!}
+            onCancel={onClose}
+            onInstalled={handleInstalled}
+            onFailed={handleFailed}
+          />
+        )
+      }
+      {
+        ([InstallStep.uploadFailed, InstallStep.installed, InstallStep.installFailed].includes(step)) && (
+          <Installed
+            payload={manifest}
+            isFailed={[InstallStep.uploadFailed, InstallStep.installFailed].includes(step)}
+            errMsg={errorMsg}
+            onCancel={onClose}
+          />
+        )
+      }
+    </>
+  )
+}
+export default React.memo(ReadyToInstall)

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

@@ -3,34 +3,37 @@ import type { FC } from 'react'
 import React from 'react'
 import { RiLoader2Line } from '@remixicon/react'
 import Card from '../../../card'
-import type { PluginDeclaration } from '../../../types'
+import type { Dependency, PluginDeclaration } from '../../../types'
 import Button from '@/app/components/base/button'
 import { useTranslation } from 'react-i18next'
-import { uploadPackageFile } from '@/service/plugins'
+import { uploadFile } from '@/service/plugins'
 const i18nPrefix = 'plugin.installModal'
 
 type Props = {
+  isBundle: boolean
   file: File
   onCancel: () => void
-  onUploaded: (result: {
+  onPackageUploaded: (result: {
     uniqueIdentifier: string
     manifest: PluginDeclaration
   }) => void
+  onBundleUploaded: (result: Dependency[]) => void
   onFailed: (errorMsg: string) => void
 }
 
 const Uploading: FC<Props> = ({
+  isBundle,
   file,
   onCancel,
-  onUploaded,
+  onPackageUploaded,
+  onBundleUploaded,
   onFailed,
 }) => {
   const { t } = useTranslation()
   const fileName = file.name
   const handleUpload = async () => {
     try {
-      const res = await uploadPackageFile(file)
-      onUploaded(res)
+      await uploadFile(file, isBundle)
     }
     catch (e: any) {
       if (e.response?.message) {
@@ -38,7 +41,11 @@ const Uploading: FC<Props> = ({
       }
       else { // Why it would into this branch?
         const res = e.response
-        onUploaded({
+        if (isBundle) {
+          onBundleUploaded(res)
+          return
+        }
+        onPackageUploaded({
           uniqueIdentifier: res.unique_identifier,
           manifest: res.manifest,
         })