feat: handle downgrade install

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

@@ -42,10 +42,8 @@ import { useAllToolProviders } from '@/service/use-tools'
 import DeprecationNotice from '../base/deprecation-notice'
 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 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'
 
@@ -132,17 +130,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
     }
@@ -178,20 +169,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, {
@@ -376,6 +353,7 @@ const DetailHeader = ({
       {
         isShowUpdateModal && (
           <UpdateFromMarketplace
+            pluginId={plugin_id}
             payload={{
               category: detail.declaration.category,
               originalPackageInfo: {
@@ -389,16 +367,10 @@ const DetailHeader = ({
             }}
             onCancel={hideUpdateModal}
             onSave={handleUpdatedFromMarketplace}
+            isShowDowngradeWarningModal={isDowngrade && isAutoUpgradeEnabled}
           />
         )
       }
-      { isShowDowngradeWarningModal && (
-        <DowngradeWarningModal
-          onCancel={hideDowngradeWarningModal}
-          onJustDowngrade={handleUpdatedFromMarketplace}
-          onExcludeAndDowngrade={handleExcludeAndDownload}
-        />
-      )}
     </div>
   )
 }

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>
+    </>
   )
 }
 

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,14 +110,34 @@ 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'}`)}
     >
+      {doShowDowngradeWarningModal && (
+        <DowngradeWarningModal
+          onCancel={onCancel}
+          onJustDowngrade={handleConfirm}
+          onExcludeAndDowngrade={handleExcludeAndDownload}
+        />
+      )}
+    {!doShowDowngradeWarningModal && (
+      <>
         <div className='system-md-regular mb-2 mt-3 text-text-secondary'>
           {t(`${i18nPrefix}.description`)}
         </div>
@@ -148,6 +175,9 @@ const UpdatePluginModal: FC<Props> = ({
             {configBtnText}
           </Button>
         </div>
+      </>
+    )}
+
     </Modal>
   )
 }