feat: local support upgrade

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

@@ -0,0 +1,39 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+
+type Props = {
+  hasInstalled: boolean
+  installedVersion?: string
+  toInstallVersion: string
+}
+
+const Version: FC<Props> = ({
+  hasInstalled,
+  installedVersion,
+  toInstallVersion,
+}) => {
+  return (
+    <>
+      {
+        !hasInstalled
+          ? (
+            <Badge className='mx-1' size="s" state={BadgeState.Default}>{toInstallVersion}</Badge>
+          )
+          : (
+            <>
+              <Badge className='mx-1' size="s" state={BadgeState.Warning}>
+                {`${installedVersion} -> ${toInstallVersion}`}
+              </Badge>
+              {/* <div className='flex px-0.5 justify-center items-center gap-0.5'>
+              <div className='text-text-warning system-xs-medium'>Used in 3 apps</div>
+              <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
+            </div> */}
+            </>
+          )
+      }
+    </>
+  )
+}
+export default React.memo(Version)

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

@@ -7,10 +7,10 @@ import { pluginManifestToCardPluginProps } from '../../utils'
 import Button from '@/app/components/base/button'
 import { Trans, useTranslation } from 'react-i18next'
 import { RiLoader2Line } from '@remixicon/react'
-import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import { useInstallPackageFromLocal } from '@/service/use-plugins'
 import checkTaskStatus from '../../base/check-task-status'
-import { usePluginTaskList } from '@/service/use-plugins'
+import { useInstallPackageFromLocal, usePluginTaskList, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
+import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
+import Version from '../../base/version'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -32,8 +32,19 @@ const Installed: FC<Props> = ({
   onFailed,
 }) => {
   const { t } = useTranslation()
+  const toInstallVersion = payload.version
+  const pluginId = `${payload.author}/${payload.name}`
+  const { installedInfo } = useCheckInstalled({
+    pluginIds: [pluginId],
+    enabled: !!pluginId,
+  })
+  const installedInfoPayload = installedInfo?.[pluginId]
+  const installedVersion = installedInfoPayload?.installedVersion
+  const hasInstalled = !!installedVersion
+
   const [isInstalling, setIsInstalling] = React.useState(false)
   const { mutateAsync: installPackageFromLocal } = useInstallPackageFromLocal()
+  const { mutateAsync: updatePackageFromMarketPlace } = useUpdatePackageFromMarketPlace()
 
   const {
     check,
@@ -52,10 +63,28 @@ const Installed: FC<Props> = ({
     onStartToInstall?.()
 
     try {
-      const {
-        all_installed: isInstalled,
-        task_id: taskId,
-      } = await installPackageFromLocal(uniqueIdentifier)
+      let taskId
+      let isInstalled
+      if (hasInstalled) {
+        const {
+          all_installed,
+          task_id,
+        } = await updatePackageFromMarketPlace({
+          original_plugin_unique_identifier: installedInfoPayload.uniqueIdentifier,
+          new_plugin_unique_identifier: uniqueIdentifier,
+        })
+        taskId = task_id
+        isInstalled = all_installed
+      }
+      else {
+        const {
+          all_installed,
+          task_id,
+        } = await installPackageFromLocal(uniqueIdentifier)
+        taskId = task_id
+        isInstalled = all_installed
+      }
+
       if (isInstalled) {
         onInstalled()
         return
@@ -92,7 +121,11 @@ const Installed: FC<Props> = ({
           <Card
             className='w-full'
             payload={pluginManifestToCardPluginProps(payload)}
-            titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge>}
+            titleLeft={<Version
+              hasInstalled={hasInstalled}
+              installedVersion={installedVersion}
+              toInstallVersion={toInstallVersion}
+            />}
           />
         </div>
       </div>

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

@@ -8,10 +8,10 @@ import { pluginManifestInMarketToPluginProps } from '../../utils'
 import Button from '@/app/components/base/button'
 import { useTranslation } from 'react-i18next'
 import { RiLoader2Line } from '@remixicon/react'
-import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import { useInstallPackageFromMarketPlace, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
 import checkTaskStatus from '../../base/check-task-status'
 import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
+import Version from '../../base/version'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -109,23 +109,7 @@ const Installed: FC<Props> = ({
   }
 
   const versionInfo = useMemo(() => {
-    return (<>{
-      !installedVersion
-        ? (
-          <Badge className='mx-1' size="s" state={BadgeState.Default}>{toInstallVersion}</Badge>
-        )
-        : (
-          <>
-            <Badge className='mx-1' size="s" state={BadgeState.Warning}>
-              {`${installedVersion} -> ${toInstallVersion}`}
-            </Badge>
-            {/* <div className='flex px-0.5 justify-center items-center gap-0.5'>
-              <div className='text-text-warning system-xs-medium'>Used in 3 apps</div>
-              <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
-            </div> */}
-          </>
-        )
-    }</>)
+    return (<></>)
   }, [installedVersion, payload])
 
   return (
@@ -138,7 +122,11 @@ const Installed: FC<Props> = ({
           <Card
             className='w-full'
             payload={pluginManifestInMarketToPluginProps(payload as PluginManifestInMarket)}
-            titleLeft={versionInfo}
+            titleLeft={<Version
+              hasInstalled={hasInstalled}
+              installedVersion={installedVersion}
+              toInstallVersion={toInstallVersion}
+            />}
           />
         </div>
       </div>