From 07c99745fac77a5cae4a028031e9ae706e6faeb2 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 27 Jun 2025 19:05:12 +0800
Subject: [PATCH] feat: handle downgrade install

---
 .../plugin-detail-panel/detail-header.tsx     |  36 +------
 ...arning-modal.tsx => downgrade-warning.tsx} |   9 +-
 .../update-plugin/from-market-place.tsx       | 100 ++++++++++++------
 3 files changed, 71 insertions(+), 74 deletions(-)
 rename web/app/components/plugins/update-plugin/{downgrade-warning-modal.tsx => downgrade-warning.tsx} (87%)

diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
index 6a0e34c40a..4d4f3905e9 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
@@ -37,11 +37,9 @@ import { API_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
 import { AutoUpdateLine } from '../../base/icons/src/vender/system'
 import { timeOfDayToDayjs } from '../reference-setting-modal/auto-update-setting/utils'
-import DowngradeWarningModal from '../update-plugin/downgrade-warning-modal'
 import { getMarketplaceUrl } from '@/utils/var'
 import useReferenceSetting from '../plugin-page/use-reference-setting'
 import { AUTO_UPDATE_MODE } from '../reference-setting-modal/auto-update-setting/types'
-import { useInvalidateReferenceSettings, useRemoveAutoUpgrade } from '@/service/use-plugins'
 
 const i18nPrefix = 'plugin.action'
 
@@ -117,17 +115,10 @@ const DetailHeader = ({
     return false
   }, [autoUpgradeInfo, plugin_id])
 
-  const [isShowDowngradeWarningModal, {
-    setTrue: showDowngradeWarningModal,
-    setFalse: hideDowngradeWarningModal,
-  }] = useBoolean(false)
-
+  const [isDowngrade, setIsDowngrade] = useState(false)
   const handleUpdate = async (isDowngrade?: boolean) => {
     if (isFromMarketplace) {
-      if(isAutoUpgradeEnabled && isDowngrade) {
-        showDowngradeWarningModal()
-        return
-      }
+      setIsDowngrade(!!isDowngrade)
       showUpdateModal()
       return
     }
@@ -163,20 +154,6 @@ const DetailHeader = ({
   const handleUpdatedFromMarketplace = () => {
     onUpdate()
     hideUpdateModal()
-    hideDowngradeWarningModal()
-  }
-
-  const { mutateAsync } = useRemoveAutoUpgrade()
-    const invalidateReferenceSettings = useInvalidateReferenceSettings()
-
-  const handleExcludeAndDownload = async () => {
-    await mutateAsync({
-      plugin_id,
-    })
-    invalidateReferenceSettings()
-    // TODO: missing do upgrade logic
-    handleUpdatedFromMarketplace()
-    hideDowngradeWarningModal()
   }
 
   const [isShowPluginInfo, {
@@ -342,6 +319,7 @@ const DetailHeader = ({
       {
         isShowUpdateModal && (
           <UpdateFromMarketplace
+            pluginId={plugin_id}
             payload={{
               category: detail.declaration.category,
               originalPackageInfo: {
@@ -355,16 +333,10 @@ const DetailHeader = ({
             }}
             onCancel={hideUpdateModal}
             onSave={handleUpdatedFromMarketplace}
+            isShowDowngradeWarningModal={isDowngrade && isAutoUpgradeEnabled}
           />
         )
       }
-      { isShowDowngradeWarningModal && (
-        <DowngradeWarningModal
-          onCancel={hideDowngradeWarningModal}
-          onJustDowngrade={handleUpdatedFromMarketplace}
-          onExcludeAndDowngrade={handleExcludeAndDownload}
-        />
-      )}
     </div>
   )
 }
diff --git a/web/app/components/plugins/update-plugin/downgrade-warning-modal.tsx b/web/app/components/plugins/update-plugin/downgrade-warning.tsx
similarity index 87%
rename from web/app/components/plugins/update-plugin/downgrade-warning-modal.tsx
rename to web/app/components/plugins/update-plugin/downgrade-warning.tsx
index 9443a349ba..a5f6e40e41 100644
--- a/web/app/components/plugins/update-plugin/downgrade-warning-modal.tsx
+++ b/web/app/components/plugins/update-plugin/downgrade-warning.tsx
@@ -1,5 +1,4 @@
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 
 const i18nPrefix = 'plugin.autoUpdate.pluginDowngradeWarning'
@@ -17,11 +16,7 @@ const DowngradeWarningModal = ({
   const { t } = useTranslation()
 
   return (
-    <Modal
-      isShow
-      onClose={() => onCancel()}
-      className='w-[640px] max-w-[640px]'
-    >
+    <>
       <div className='flex flex-col items-start gap-2 self-stretch'>
         <div className='title-2xl-semi-bold text-text-primary'>{t(`${i18nPrefix}.title`)}</div>
         <div className='system-md-regular text-text-secondary'>
@@ -33,7 +28,7 @@ const DowngradeWarningModal = ({
         <Button variant='secondary' destructive onClick={onJustDowngrade}>{t(`${i18nPrefix}.downgrade`)}</Button>
         <Button variant='primary' onClick={onExcludeAndDowngrade}>{t(`${i18nPrefix}.exclude`)}</Button>
       </div>
-    </Modal>
+    </>
   )
 }
 
diff --git a/web/app/components/plugins/update-plugin/from-market-place.tsx b/web/app/components/plugins/update-plugin/from-market-place.tsx
index 98994d9b9c..70bc7399f5 100644
--- a/web/app/components/plugins/update-plugin/from-market-place.tsx
+++ b/web/app/components/plugins/update-plugin/from-market-place.tsx
@@ -13,13 +13,18 @@ import { updateFromMarketPlace } from '@/service/plugins'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
 import { usePluginTaskList } from '@/service/use-plugins'
 import Toast from '../../base/toast'
+import DowngradeWarningModal from './downgrade-warning'
+import { useInvalidateReferenceSettings, useRemoveAutoUpgrade } from '@/service/use-plugins'
+import cn from '@/utils/classnames'
 
 const i18nPrefix = 'plugin.upgrade'
 
 type Props = {
   payload: UpdateFromMarketPlacePayload
+  pluginId: string
   onSave: () => void
   onCancel: () => void
+  isShowDowngradeWarningModal?: boolean
 }
 
 enum UploadStep {
@@ -30,8 +35,10 @@ enum UploadStep {
 
 const UpdatePluginModal: FC<Props> = ({
   payload,
+  pluginId,
   onSave,
   onCancel,
+  isShowDowngradeWarningModal,
 }) => {
   const {
     originalPackageInfo,
@@ -103,51 +110,74 @@ const UpdatePluginModal: FC<Props> = ({
       onSave()
   }, [onSave, uploadStep, check, originalPackageInfo.id, handleRefetch, targetPackageInfo.id])
 
+  const { mutateAsync } = useRemoveAutoUpgrade()
+  const invalidateReferenceSettings = useInvalidateReferenceSettings()
+  const handleExcludeAndDownload = async () => {
+    await mutateAsync({
+      plugin_id: pluginId,
+    })
+    invalidateReferenceSettings()
+    handleConfirm()
+  }
+  const doShowDowngradeWarningModal = isShowDowngradeWarningModal && uploadStep === UploadStep.notStarted
+
   return (
     <Modal
       isShow={true}
       onClose={onCancel}
-      className='min-w-[560px]'
+      className={cn('min-w-[560px]', doShowDowngradeWarningModal && 'min-w-[640px]')}
       closable
-      title={t(`${i18nPrefix}.${uploadStep === UploadStep.installed ? 'successfulTitle' : 'title'}`)}
+      title={!doShowDowngradeWarningModal && t(`${i18nPrefix}.${uploadStep === UploadStep.installed ? 'successfulTitle' : 'title'}`)}
     >
-      <div className='system-md-regular mb-2 mt-3 text-text-secondary'>
-        {t(`${i18nPrefix}.description`)}
-      </div>
-      <div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
-        <Card
-          installed={uploadStep === UploadStep.installed}
-          payload={pluginManifestToCardPluginProps({
-            ...originalPackageInfo.payload,
-            icon: icon!,
-          })}
-          className='w-full'
-          titleLeft={
-            <>
-              <Badge className='mx-1' size="s" state={BadgeState.Warning}>
-                {`${originalPackageInfo.payload.version} -> ${targetPackageInfo.version}`}
-              </Badge>
-            </>
-          }
+      {doShowDowngradeWarningModal && (
+        <DowngradeWarningModal
+          onCancel={onCancel}
+          onJustDowngrade={handleConfirm}
+          onExcludeAndDowngrade={handleExcludeAndDownload}
         />
-      </div>
-      <div className='flex items-center justify-end gap-2 self-stretch pt-5'>
-        {uploadStep === UploadStep.notStarted && (
+      )}
+    {!doShowDowngradeWarningModal && (
+      <>
+        <div className='system-md-regular mb-2 mt-3 text-text-secondary'>
+          {t(`${i18nPrefix}.description`)}
+        </div>
+        <div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
+          <Card
+            installed={uploadStep === UploadStep.installed}
+            payload={pluginManifestToCardPluginProps({
+              ...originalPackageInfo.payload,
+              icon: icon!,
+            })}
+            className='w-full'
+            titleLeft={
+              <>
+                <Badge className='mx-1' size="s" state={BadgeState.Warning}>
+                  {`${originalPackageInfo.payload.version} -> ${targetPackageInfo.version}`}
+                </Badge>
+              </>
+            }
+          />
+        </div>
+        <div className='flex items-center justify-end gap-2 self-stretch pt-5'>
+          {uploadStep === UploadStep.notStarted && (
+            <Button
+              onClick={handleCancel}
+            >
+              {t('common.operation.cancel')}
+            </Button>
+          )}
           <Button
-            onClick={handleCancel}
+            variant='primary'
+            loading={uploadStep === UploadStep.upgrading}
+            onClick={handleConfirm}
+            disabled={uploadStep === UploadStep.upgrading}
           >
-            {t('common.operation.cancel')}
+            {configBtnText}
           </Button>
-        )}
-        <Button
-          variant='primary'
-          loading={uploadStep === UploadStep.upgrading}
-          onClick={handleConfirm}
-          disabled={uploadStep === UploadStep.upgrading}
-        >
-          {configBtnText}
-        </Button>
-      </div>
+        </div>
+      </>
+    )}
+
     </Modal>
   )
 }