feat: handle on update show update modal

web/app/components/plugins/plugin-detail-panel/detail-header.tsx

@@ -28,7 +28,7 @@ import { Github } from '@/app/components/base/icons/src/public/common'
 import { uninstallPlugin } from '@/service/plugins'
 import { useGetLanguage } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
-
+import UpdateFromMarketplace from '@/app/components/plugins/update-plugin/from-market-place'
 import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
 
@@ -55,17 +55,35 @@ const DetailHeader = ({
     source,
     tenant_id,
     version,
+    latest_unique_identifier,
     latest_version,
     meta,
   } = detail
   const { author, name, label, description, icon, verified } = detail.declaration
   const isFromGitHub = source === PluginSource.github
+  const isFromMarketplace = source === PluginSource.marketplace
 
   const hasNewVersion = useMemo(() => {
-    return source === PluginSource.github && latest_version !== version
-  }, [source, latest_version, version])
+    if (isFromGitHub)
+      return latest_version !== version
+
+    if (isFromMarketplace)
+      return !!latest_version && latest_version !== version
+
+    return false
+  }, [isFromGitHub, isFromMarketplace, latest_version, version])
+
+  const [isShowUpdateModal, {
+    setTrue: showUpdateModal,
+    setFalse: hideUpdateModal,
+  }] = useBoolean(false)
 
   const handleUpdate = async () => {
+    if (isFromMarketplace) {
+      showUpdateModal()
+      return
+    }
+
     try {
       const fetchedReleases = await fetchReleases(author, name)
       if (fetchedReleases.length === 0)
@@ -106,6 +124,11 @@ const DetailHeader = ({
     }
   }
 
+  const handleUpdatedFromMarketplace = () => {
+    onUpdate()
+    hideUpdateModal()
+  }
+
   const [isShowPluginInfo, {
     setTrue: showPluginInfo,
     setFalse: hidePluginInfo,
@@ -222,6 +245,24 @@ const DetailHeader = ({
           isDisabled={deleting}
         />
       )}
+      {
+        isShowUpdateModal && (
+          <UpdateFromMarketplace
+            payload={{
+              originalPackageInfo: {
+                id: detail.plugin_unique_identifier,
+                payload: detail.declaration,
+              },
+              targetPackageInfo: {
+                id: latest_unique_identifier,
+                version: latest_version,
+              },
+            }}
+            onCancel={hideUpdateModal}
+            onSave={handleUpdatedFromMarketplace}
+          />
+        )
+      }
     </div>
   )
 }

web/app/components/plugins/types.ts

@@ -100,6 +100,7 @@ export type PluginDetail = {
   endpoints_active: number
   version: string
   latest_version: string
+  latest_unique_identifier: string
   source: PluginSource
   meta?: MetaData
 }

web/app/components/plugins/update-plugin/from-market-place.tsx

@@ -69,23 +69,30 @@ const UpdatePluginModal: FC<Props> = ({
   const handleConfirm = useCallback(async () => {
     if (uploadStep === UploadStep.notStarted) {
       setUploadStep(UploadStep.upgrading)
-      const {
-        all_installed: isInstalled,
-        task_id: taskId,
-      } = await updateFromMarketPlace({
-        original_plugin_unique_identifier: originalPackageInfo.id,
-        new_plugin_unique_identifier: targetPackageInfo.id,
-      })
-      if (isInstalled) {
+      try {
+        const {
+          all_installed: isInstalled,
+          task_id: taskId,
+        } = await updateFromMarketPlace({
+          original_plugin_unique_identifier: originalPackageInfo.id,
+          new_plugin_unique_identifier: targetPackageInfo.id,
+        })
+
+        if (isInstalled) {
+          onSave()
+          return
+        }
+        setPluginTasksWithPolling()
+        await check({
+          taskId,
+          pluginUniqueIdentifier: targetPackageInfo.id,
+        })
         onSave()
-        return
       }
-      setPluginTasksWithPolling()
-      await check({
-        taskId,
-        pluginUniqueIdentifier: targetPackageInfo.id,
-      })
-      onSave()
+      catch (e) {
+        setUploadStep(UploadStep.notStarted)
+      }
+      return
     }
     if (uploadStep === UploadStep.installed) {
       onSave()