feat: downgrade modal

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

@@ -37,6 +37,7 @@ import { API_PREFIX, MARKETPLACE_URL_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'
 
 const i18nPrefix = 'plugin.action'
 
@@ -77,7 +78,6 @@ const DetailHeader = ({
   const [targetVersion, setTargetVersion] = useState({
     version: latest_version,
     unique_identifier: latest_unique_identifier,
-    isDowngrade: false,
   })
   const hasNewVersion = useMemo(() => {
     if (isFromMarketplace)
@@ -105,9 +105,9 @@ const DetailHeader = ({
     setFalse: hideDowngradeWarningModal,
   }] = useBoolean(false)
 
-  const handleUpdate = async () => {
+  const handleUpdate = async (isDowngrade?: boolean) => {
     if (isFromMarketplace) {
-      if(isAutoUpgradeEnabled && targetVersion.isDowngrade) {
+      if(isAutoUpgradeEnabled && isDowngrade) {
         showDowngradeWarningModal()
         return
       }
@@ -198,7 +198,7 @@ const DetailHeader = ({
               currentVersion={version}
               onSelect={(state) => {
                 setTargetVersion(state)
-                handleUpdate()
+                handleUpdate(state.isDowngrade)
               }}
               trigger={
                 <Badge
@@ -233,7 +233,6 @@ const DetailHeader = ({
                   setTargetVersion({
                     version: latest_version,
                     unique_identifier: latest_unique_identifier,
-                    isDowngrade: false,
                   })
                 }
                 handleUpdate()
@@ -328,7 +327,12 @@ const DetailHeader = ({
           />
         )
       }
-      { isShowDowngradeWarningModal && (<div>aaa</div>)}
+      { isShowDowngradeWarningModal && (
+        <DowngradeWarningModal
+          onCancel={hideDowngradeWarningModal}
+          onSave={handleUpdatedFromMarketplace}
+        />
+      )}
     </div>
   )
 }