From fba468e8ad562ffec78ea19b8de793e9bc351b4e Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 28 Nov 2024 13:50:04 +0800
Subject: [PATCH 1/4] fix: handle install the same version

---
 .../install-from-marketplace/steps/install.tsx           | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
index 1cb0594e32..d8de71c4de 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 // import { RiInformation2Line } from '@remixicon/react'
 import type { Plugin, PluginManifestInMarket } from '../../../types'
 import Card from '../../../card'
@@ -51,6 +51,11 @@ const Installed: FC<Props> = ({
     stop,
   } = checkTaskStatus()
 
+  useEffect(() => {
+    if (hasInstalled && toInstallVersion === installedVersion)
+      onInstalled()
+  }, [hasInstalled, toInstallVersion, installedVersion])
+
   const handleCancel = () => {
     stop()
     onCancel()
@@ -107,7 +112,7 @@ const Installed: FC<Props> = ({
     return (<>{
       !installedVersion
         ? (
-          <Badge className='mx-1' size="s" state={BadgeState.Default}>{ }</Badge>
+          <Badge className='mx-1' size="s" state={BadgeState.Default}>{toInstallVersion}</Badge>
         )
         : (
           <>

From 3e601c4ef52c9a35f542d39cca6641a97c759f48 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 28 Nov 2024 14:09:05 +0800
Subject: [PATCH 2/4] feat: local support upgrade

---
 .../plugins/install-plugin/base/version.tsx   | 39 +++++++++++++++
 .../steps/install.tsx                         | 49 ++++++++++++++++---
 .../steps/install.tsx                         | 26 +++-------
 3 files changed, 87 insertions(+), 27 deletions(-)
 create mode 100644 web/app/components/plugins/install-plugin/base/version.tsx

diff --git a/web/app/components/plugins/install-plugin/base/version.tsx b/web/app/components/plugins/install-plugin/base/version.tsx
new file mode 100644
index 0000000000..891294f095
--- /dev/null
+++ b/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)
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
index 43c2a03319..e917199a81 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
+++ b/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>
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
index d8de71c4de..5059460fad 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
+++ b/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>

From 073e8475242672c2f851be85d5dbf9a386fc5c4b Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 28 Nov 2024 14:13:43 +0800
Subject: [PATCH 3/4] fix: installed

---
 .../install-from-local-package/steps/install.tsx           | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
index e917199a81..37f2bde06f 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useEffect } from 'react'
 import type { PluginDeclaration } from '../../../types'
 import Card from '../../../card'
 import { pluginManifestToCardPluginProps } from '../../utils'
@@ -42,6 +42,11 @@ const Installed: FC<Props> = ({
   const installedVersion = installedInfoPayload?.installedVersion
   const hasInstalled = !!installedVersion
 
+  useEffect(() => {
+    if (hasInstalled && toInstallVersion === installedVersion)
+      onInstalled()
+  }, [hasInstalled, toInstallVersion, installedVersion])
+
   const [isInstalling, setIsInstalling] = React.useState(false)
   const { mutateAsync: installPackageFromLocal } = useInstallPackageFromLocal()
   const { mutateAsync: updatePackageFromMarketPlace } = useUpdatePackageFromMarketPlace()

From 51f0f21a4770dc638fabab98a6eaaa9859045927 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 28 Nov 2024 14:30:31 +0800
Subject: [PATCH 4/4] chore: not load updateInfo can not install

---
 .../install-from-local-package/steps/install.tsx     |  6 +++---
 .../install-from-marketplace/steps/install.tsx       | 12 ++++--------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
index 37f2bde06f..d37275f19a 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
@@ -34,7 +34,7 @@ const Installed: FC<Props> = ({
   const { t } = useTranslation()
   const toInstallVersion = payload.version
   const pluginId = `${payload.author}/${payload.name}`
-  const { installedInfo } = useCheckInstalled({
+  const { installedInfo, isLoading } = useCheckInstalled({
     pluginIds: [pluginId],
     enabled: !!pluginId,
   })
@@ -126,7 +126,7 @@ const Installed: FC<Props> = ({
           <Card
             className='w-full'
             payload={pluginManifestToCardPluginProps(payload)}
-            titleLeft={<Version
+            titleLeft={!isLoading && <Version
               hasInstalled={hasInstalled}
               installedVersion={installedVersion}
               toInstallVersion={toInstallVersion}
@@ -144,7 +144,7 @@ const Installed: FC<Props> = ({
         <Button
           variant='primary'
           className='min-w-[72px] flex space-x-0.5'
-          disabled={isInstalling}
+          disabled={isInstalling || isLoading}
           onClick={handleInstall}
         >
           {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
index 5059460fad..0b3728e2a1 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useEffect, useMemo } from 'react'
+import React, { useEffect } from 'react'
 // import { RiInformation2Line } from '@remixicon/react'
 import type { Plugin, PluginManifestInMarket } from '../../../types'
 import Card from '../../../card'
@@ -35,7 +35,7 @@ const Installed: FC<Props> = ({
   const { t } = useTranslation()
   const toInstallVersion = payload.version || payload.latest_version
   const pluginId = (payload as Plugin).plugin_id
-  const { installedInfo } = useCheckInstalled({
+  const { installedInfo, isLoading } = useCheckInstalled({
     pluginIds: [pluginId],
     enabled: !!pluginId,
   })
@@ -108,10 +108,6 @@ const Installed: FC<Props> = ({
     }
   }
 
-  const versionInfo = useMemo(() => {
-    return (<></>)
-  }, [installedVersion, payload])
-
   return (
     <>
       <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
@@ -122,7 +118,7 @@ const Installed: FC<Props> = ({
           <Card
             className='w-full'
             payload={pluginManifestInMarketToPluginProps(payload as PluginManifestInMarket)}
-            titleLeft={<Version
+            titleLeft={!isLoading && <Version
               hasInstalled={hasInstalled}
               installedVersion={installedVersion}
               toInstallVersion={toInstallVersion}
@@ -140,7 +136,7 @@ const Installed: FC<Props> = ({
         <Button
           variant='primary'
           className='min-w-[72px] flex space-x-0.5'
-          disabled={isInstalling}
+          disabled={isInstalling || isLoading}
           onClick={handleInstall}
         >
           {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}