Show badge color for local cluster (rancher#13077)

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 || '';
     },
   },
 

shell/components/nav/TopLevelMenu.helper.ts

@@ -13,6 +13,7 @@ interface TopLevelMenuCluster {
   ready: boolean
   providerNavLogo: string,
   badge: string,
+  iconColor: string,
   isLocal: boolean,
   pinned: boolean,
   description: string,
@@ -143,6 +144,7 @@ export abstract class BaseTopLevelMenuHelper {
       ready:           mgmtCluster.isReady, // && !provCluster?.hasError,
       providerNavLogo: mgmtCluster.providerMenuLogo,
       badge:           mgmtCluster.badge,
+      iconColor:       mgmtCluster.iconColor,
       isLocal:         mgmtCluster.isLocal,
       pinned:          mgmtCluster.pinned,
       description:     provCluster?.description || mgmtCluster.description,

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;