From d4223ad2aee9fa0981a938779d94fd74c02d5e22 Mon Sep 17 00:00:00 2001
From: Andy Lee <andy.lee@suse.com>
Date: Thu, 16 Jul 2026 11:24:51 +0800
Subject: [PATCH] feat: keep upgrade button appear (#1003)

* feat: keep upgrade button appear

Signed-off-by: Andy Lee <andy.lee@suse.com>

* refactor: copilot review

Signed-off-by: Andy Lee <andy.lee@suse.com>

---------

Signed-off-by: Andy Lee <andy.lee@suse.com>
---
 pkg/harvester/components/HarvesterUpgrade.vue | 41 +++++++++++++++----
 pkg/harvester/l10n/en-us.yaml                 |  2 +
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/pkg/harvester/components/HarvesterUpgrade.vue b/pkg/harvester/components/HarvesterUpgrade.vue
index efe84f3e..dfbc6eb5 100644
--- a/pkg/harvester/components/HarvesterUpgrade.vue
+++ b/pkg/harvester/components/HarvesterUpgrade.vue
@@ -55,8 +55,12 @@ export default {
         !this.latestUpgrade.isUpgradeFailed;
     },
 
+    canUpgrade() {
+      return this.versionOptions.length > 0 && !this.isUpgradeInProgress;
+    },
+
     versionOptions() {
-      const versions = this.$store.getters['harvester/all'](HCI.VERSION);
+      const versions = this.$store.getters['harvester/all'](HCI.VERSION) || [];
 
       return versions.map((V) => V.metadata.name);
     },
@@ -154,14 +158,23 @@ export default {
           :cluster="currentCluster.nameDisplay"
         />
       </h1>
-      <button
-        v-if="versionOptions.length && !isUpgradeInProgress"
-        type="button"
-        class="btn bg-warning btn-sm"
-        @click="open"
+      <span
+        v-clean-tooltip="{
+          content: canUpgrade ? t('harvester.upgradePage.upgradeAvailable') : t('harvester.upgradePage.upgradeUnavailable'),
+          triggers: ['hover', 'focus', 'touch'],
+        }"
+        class="upgrade-btn-wrap"
+        :tabindex="canUpgrade ? -1 : 0"
       >
-        <t k="harvester.upgradePage.upgrade" />
-      </button>
+        <button
+          :disabled="!canUpgrade"
+          type="button"
+          class="btn bg-warning btn-sm"
+          @click="open"
+        >
+          <t k="harvester.upgradePage.upgrade" />
+        </button>
+      </span>
     </header>
 
     <ModalWithCard
@@ -296,6 +309,18 @@ export default {
     line-height: 23px;
   }
 
+  .upgrade-btn-wrap {
+    display: inline-flex;
+
+    button {
+      color: #000 !important;
+    }
+
+    button:hover {
+      color: #000 !important;
+    }
+  }
+
   .currentVersion {
     margin-top: 10px;
     display: flex;
diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
index c6b4e2a4..89237f9a 100644
--- a/pkg/harvester/l10n/en-us.yaml
+++ b/pkg/harvester/l10n/en-us.yaml
@@ -1099,6 +1099,8 @@ harvester:
       downloadLog: Download Log
       logStatus: Log Download Status
     dismissMessage: Dismiss it
+    upgradeAvailable: Upgrade Available
+    upgradeUnavailable: Upgrade Unavailable
     upgradeInfo:
       warning: WARNING
       doc: Read the <a href="{url}" target="_blank">documentation</a> before starting the upgrade process. Ensure that you complete procedures that are relevant to your environment and the version you are upgrading to.