fix: install installed plugin problem (#13384)

web/app/components/plugins/install-plugin/hooks/use-check-installed.tsx

@@ -16,6 +16,7 @@ const useCheckInstalled = (props: Props) => {
     const res: Record<string, VersionInfo> = {}
     data?.plugins.forEach((plugin) => {
       res[plugin.plugin_id] = {
+        installedId: plugin.id,
         installedVersion: plugin.declaration.version,
         uniqueIdentifier: plugin.plugin_unique_identifier,
       }

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

@@ -8,8 +8,9 @@ import Button from '@/app/components/base/button'
 import { Trans, useTranslation } from 'react-i18next'
 import { RiLoader2Line } from '@remixicon/react'
 import checkTaskStatus from '../../base/check-task-status'
-import { useInstallPackageFromLocal, usePluginTaskList, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
+import { useInstallPackageFromLocal, usePluginTaskList } from '@/service/use-plugins'
 import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
+import { uninstallPlugin } from '@/service/plugins'
 import Version from '../../base/version'
 
 const i18nPrefix = 'plugin.installModal'
@@ -50,7 +51,6 @@ const Installed: FC<Props> = ({
 
   const [isInstalling, setIsInstalling] = React.useState(false)
   const { mutateAsync: installPackageFromLocal } = useInstallPackageFromLocal()
-  const { mutateAsync: updatePackageFromMarketPlace } = useUpdatePackageFromMarketPlace()
 
   const {
     check,
@@ -69,27 +69,15 @@ const Installed: FC<Props> = ({
     onStartToInstall?.()
 
     try {
-      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 (hasInstalled)
+        await uninstallPlugin(installedInfoPayload.installedId)
+
+      const {
+        all_installed,
+        task_id,
+      } = await installPackageFromLocal(uniqueIdentifier)
+      const taskId = task_id
+      const isInstalled = all_installed
 
       if (isInstalled) {
         onInstalled()

web/app/components/plugins/types.ts

@@ -373,6 +373,7 @@ export type VersionListResponse = {
 }
 
 export type VersionInfo = {
+  installedId: string, // use to uninstall
   installedVersion: string,
   uniqueIdentifier: string
 }

web/service/use-plugins.ts

@@ -30,6 +30,7 @@ import {
 } from '@tanstack/react-query'
 import { useInvalidateAllBuiltInTools } from './use-tools'
 import usePermission from '@/app/components/plugins/plugin-page/use-permission'
+import { uninstallPlugin } from '@/service/plugins'
 
 const NAME_SPACE = 'plugins'
 
@@ -237,10 +238,20 @@ export const useInstallOrUpdate = ({
             }
           }
           if (isInstalled) {
-            await updatePackageFromMarketPlace({
-              original_plugin_unique_identifier: installedPayload?.uniqueIdentifier,
-              new_plugin_unique_identifier: uniqueIdentifier,
-            })
+            if (item.type === 'package') {
+              await uninstallPlugin(installedPayload.installedId)
+              await post<InstallPackageResponse>('/workspaces/current/plugin/install/pkg', {
+                body: {
+                  plugin_unique_identifiers: [uniqueIdentifier],
+                },
+              })
+            }
+            else {
+              await updatePackageFromMarketPlace({
+                original_plugin_unique_identifier: installedPayload?.uniqueIdentifier,
+                new_plugin_unique_identifier: uniqueIdentifier,
+              })
+            }
           }
           return ({ success: true })
         }