From 477fa50bea89a7621298e929863a125739e9d7ea Mon Sep 17 00:00:00 2001 From: Mo Mesgin Date: Wed, 15 Jan 2025 12:58:24 -0800 Subject: [PATCH] backport fix for the badge background color issue --- shell/components/ClusterIconMenu.vue | 2 +- shell/components/nav/TopLevelMenu.vue | 1 + shell/models/management.cattle.io.cluster.js | 7 ++++++- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/shell/components/ClusterIconMenu.vue b/shell/components/ClusterIconMenu.vue index 661821dd8bc..6bbe093972f 100644 --- a/shell/components/ClusterIconMenu.vue +++ b/shell/components/ClusterIconMenu.vue @@ -25,7 +25,7 @@ export default { }, customColor() { - return !this.cluster.removePreviewColor && this.cluster.badge?.iconText ? this.cluster.badge?.color : ''; + return this.cluster.iconColor || ''; }, }, diff --git a/shell/components/nav/TopLevelMenu.vue b/shell/components/nav/TopLevelMenu.vue index fe5d7b6f6e7..aa4de6d64b8 100644 --- a/shell/components/nav/TopLevelMenu.vue +++ b/shell/components/nav/TopLevelMenu.vue @@ -119,6 +119,7 @@ export default { osLogo: mgmtCluster.providerOsLogo, providerNavLogo: mgmtCluster.providerMenuLogo, badge: mgmtCluster.badge, + iconColor: mgmtCluster.iconColor, isLocal: mgmtCluster.isLocal, isHarvester: mgmtCluster.isHarvester, pinned: mgmtCluster.pinned, diff --git a/shell/models/management.cattle.io.cluster.js b/shell/models/management.cattle.io.cluster.js index 933ec785c70..3f616ba47f0 100644 --- a/shell/models/management.cattle.io.cluster.js +++ b/shell/models/management.cattle.io.cluster.js @@ -296,6 +296,11 @@ export default class MgmtCluster extends SteveModel { return this.providerLogo; } + // Color to use as the underline for the icon in the app bar + get iconColor() { + return this.metadata?.annotations[CLUSTER_BADGE.COLOR]; + } + // Custom badge to show for the Cluster (if the appropriate annotations are set) get badge() { const icon = this.metadata?.annotations?.[CLUSTER_BADGE.ICON_TEXT]; @@ -305,7 +310,7 @@ export default class MgmtCluster extends SteveModel { return undefined; } - let color = this.metadata?.annotations[CLUSTER_BADGE.COLOR] || DEFAULT_BADGE_COLOR; + let color = this.iconColor || DEFAULT_BADGE_COLOR; const iconText = this.metadata?.annotations[CLUSTER_BADGE.ICON_TEXT] || ''; let foregroundColor;