Map the csp, federal, and rgs themes to suse

shell/components/BannerGraphic.vue

@@ -1,8 +1,6 @@
 <script>
 import Closeable from '@shell/mixins/closeable';
 import BrandImage from '@shell/components/BrandImage';
-import { MANAGEMENT } from '@shell/config/types';
-import { SETTING } from '@shell/config/settings';
 import { getBrandMeta } from '@shell/utils/brand';
 
 export default {
@@ -21,9 +19,7 @@ export default {
   },
 
   data() {
-    const globalSettings = this.$store.getters['management/all'](MANAGEMENT.SETTING);
-    const setting = globalSettings?.find((gs) => gs.id === SETTING.BRAND);
-    const brandMeta = getBrandMeta(setting?.value);
+    const brandMeta = getBrandMeta(this.$store.getters['management/brand']);
     const banner = brandMeta?.banner || {};
     const align = banner.textAlign || 'center';
     const bannerClass = banner.bannerClass || '';

shell/components/BrandImage.vue

@@ -36,9 +36,9 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({ theme: 'prefs/theme' }),
+    ...mapGetters({ theme: 'prefs/theme', brand: 'management/brand' }),
 
-    brand() {
+    brandBase() {
       const setting = this.managementSettings.filter((setting) => setting.id === SETTING.BRAND)[0] || {};
 
       return setting.value;
@@ -78,19 +78,30 @@ export default {
       }
     },
 
+    isDark() {
+      return this.theme === 'dark';
+    },
+
     pathToBrandedImage() {
       if (this.fileName === 'rancher-logo.svg' || this.supportCustomLogo) {
-        if (this.theme === 'dark' && this.uiLogoDark) {
+        if (this.isDark && this.uiLogoDark) {
           return this.uiLogoDark;
         }
 
         if (this.uiLogoLight) {
           return this.uiLogoLight;
         }
+
+        // csp, rgs, and federal map to SUSE, but have their own custom logos
+        if (this.brandBase !== this.brand) {
+          try {
+            return require(`~shell/assets/brand/${ this.brandBase }/${ this.isDark ? 'dark/' : '' }${ this.fileName }`);
+          } catch { }
+        }
       }
 
       if (this.fileName === 'banner.svg') {
-        if (this.theme === 'dark' && this.uiBannerDark) {
+        if (this.isDark && this.uiBannerDark) {
           return this.uiBannerDark;
         }
 
@@ -100,7 +111,7 @@ export default {
       }
 
       if (this.fileName === 'login-landscape.svg') {
-        if (this.theme === 'dark' && this.uiLoginBackgroundDark) {
+        if (this.isDark && this.uiLoginBackgroundDark) {
           return this.uiLoginBackgroundDark;
         }
 
@@ -112,7 +123,7 @@ export default {
       if (!this.brand) {
         return this.defaultPathToBrandedImage;
       } else {
-        if (this.theme === 'dark' || this.dark) {
+        if (this.isDark || this.dark) {
           try {
             return require(`~shell/assets/brand/${ this.brand }/dark/${ this.fileName }`);
           } catch {}

shell/config/types.js

@@ -222,6 +222,13 @@ export const MANAGEMENT = {
   OIDC_CLIENT:                   'management.cattle.io.oidcclient'
 };
 
+export const BRAND = {
+  SUSE:    'suse',
+  CSP:     'csp',
+  FEDERAL: 'federal',
+  RGS:     'rgs',
+};
+
 export const EXT = { USER_ACTIVITY: 'ext.cattle.io.useractivity' };
 
 export const CAPI = {

shell/mixins/brand.js

@@ -36,7 +36,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters({ loggedIn: 'auth/loggedIn' }),
+    ...mapGetters({ loggedIn: 'auth/loggedIn', brand: 'management/brand' }),
 
     // added to fix https://github.com/rancher/dashboard/issues/10788
     // because on logout the brand mixin is mounted, but then a management store reset happens
@@ -46,12 +46,6 @@ export default {
       return this.$store.getters['management/all'](MANAGEMENT.SETTING);
     },
 
-    brand() {
-      const setting = this.globalSettings?.find((gs) => gs.id === SETTING.BRAND);
-
-      return setting?.value;
-    },
-
     color() {
       const setting = this.globalSettings?.find((gs) => gs.id === SETTING.PRIMARY_COLOR);
 

shell/pages/auth/login.vue

@@ -137,9 +137,7 @@ export default {
     },
 
     customizations() {
-      const globalSettings = this.$store.getters['management/all'](MANAGEMENT.SETTING);
-      const setting = globalSettings?.find((gs) => gs.id === SETTING.BRAND);
-      const brandMeta = getBrandMeta(setting?.value);
+      const brandMeta = getBrandMeta(this.$store.getters['management/brand']);
       const login = brandMeta?.login || {};
 
       return {

shell/plugins/dashboard-store/getters.js

@@ -1,5 +1,8 @@
 
-import { SCHEMA, COUNT, POD } from '@shell/config/types';
+import {
+  SCHEMA, COUNT, POD, MANAGEMENT, BRAND
+} from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
 
 import { matches } from '@shell/utils/selector';
 import { typeMunge, typeRef, SIMPLE_TYPES } from '@shell/utils/create-yaml';
@@ -204,6 +207,20 @@ export default {
     }
   },
 
+  brand: (state, getters) => {
+    const brand = getters['byId'](MANAGEMENT.SETTING, SETTING.BRAND);
+
+    if (!brand?.value) {
+      return undefined;
+    }
+
+    if ([BRAND.CSP, BRAND.FEDERAL, BRAND.RGS].includes(brand.value)) {
+      return BRAND.SUSE;
+    }
+
+    return brand.value;
+  },
+
   /**
    * Checks a schema for the given path
    *

shell/store/prefs.js

@@ -523,15 +523,14 @@ export const actions = {
   setBrandStyle({ rootState, rootGetters }, dark = false) {
     if (rootState.managementReady) {
       try {
-        const brandSetting = rootGetters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);
+        const brandSetting = rootGetters['management/brand'];
 
-        if (brandSetting && brandSetting.value && brandSetting.value !== '') {
-          const brand = brandSetting.value;
-          const brandMeta = getBrandMeta(brand);
+        if (brandSetting !== '') {
+          const brandMeta = getBrandMeta(brandSetting);
           const hasStylesheet = brandMeta.hasStylesheet === 'true';
 
           if (hasStylesheet) {
-            document.body.classList.add(brand);
+            document.body.classList.add(brandMeta);
           } else {
             // TODO option apply color at runtime
           }

shell/utils/favicon.js

@@ -9,17 +9,17 @@ export function haveSetFavIcon() {
 
 export function setFavIcon(store) {
   const res = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FAVICON);
-  const brandSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);
+  const brandSetting = store.getters['management/brand'];
   const link = findIconLink(document.head.getElementsByTagName('link'));
 
   if (link) {
     let brandImage;
 
-    if (brandSetting?.value === 'suse') {
+    if (brandSetting === 'suse') {
       brandImage = require('~shell/assets/brand/suse/favicon.png');
-    } else if (brandSetting?.value === 'csp') {
+    } else if (brandSetting === 'csp') {
       brandImage = require('~shell/assets/brand/csp/favicon.png');
-    } else if (brandSetting?.value === 'harvester') {
+    } else if (brandSetting === 'harvester') {
       brandImage = require('~shell/assets/brand/harvester/favicon.png');
     }