feat: change logo based on server-flavor setting (#1151)

* feat: use prime logo when server-flavor is prime

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

* feat: expose server-flavor setting

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/SettingList.vue

@@ -10,6 +10,7 @@ import { docLink } from '../utils/feature-flags';
 const CATEGORY = {
   ui: [
     'branding',
+    HCI_SETTING.SERVER_FLAVOR,
     'ui-source',
     'ui-index',
   ]
@@ -53,7 +54,7 @@ export default {
     };
   },
 
-  computed: { ...mapGetters({ t: 'i18n/t' }) },
+  computed: { ...mapGetters({ t: 'i18n/t', isHarvesterPrime: 'harvester-common/isHarvesterPrime' }) },
 
   watch: {
     settings: {
@@ -269,7 +270,8 @@ export default {
           v-if="!setting.hide"
           class="settings-value"
         >
-          <pre v-if="setting.kind === 'json'">{{ setting.json }}</pre>
+          <pre v-if="setting.id === 'branding' && isHarvesterPrime">{{ $store.getters['harvester-common/privateLabel'] }}</pre>
+          <pre v-else-if="setting.kind === 'json'">{{ setting.json }}</pre>
           <pre v-else-if="setting.kind === 'multiline'">{{ setting.data.value || setting.data.default }}</pre>
           <pre v-else-if="setting.kind === 'enum'">{{ t(setting.enum) }}</pre>
           <pre v-else-if="setting.kind === 'custom' && setting.custom">{{ setting.custom }}</pre>

pkg/harvester/config/harvester-cluster.js

@@ -57,6 +57,8 @@ import {
 } from './table-headers';
 import { ADD_ONS } from './harvester-map';
 import { registerAddonSideNav } from '../utils/dynamic-nav';
+import { setVendor } from '@shell/config/private-label';
+import { createCssVars } from '@shell/utils/color';
 
 const TEMPLATE = HCI.VM_VERSION;
 const MONITORING_GROUP = 'Monitoring & Logging::Monitoring';
@@ -109,15 +111,51 @@ export function init($plugin, store) {
       }
     };
 
-    store.dispatch('setIsSingleProduct', {
-      productName:       PRODUCT_NAME,
-      logo:              require(`@shell/assets/images/providers/harvester.svg`),
-      productNameKey:    'harvester.productLabel',
-      getVersionInfo:    (store) => store.getters[`${ PRODUCT_NAME }/byId`]?.(HCI.SETTING, 'server-version')?.value || 'unknown',
-      afterLoginRoute:   home,
-      logoRoute:         home,
-      supportCustomLogo: true
-    });
+    store.watch(
+      (_state, getters) => JSON.stringify([
+        !!getters['harvester-common/isHarvesterPrime'],
+        getters['prefs/theme'] === 'dark',
+        getters['harvester-common/privateLabel']
+      ]),
+      (value) => {
+        const [isHarvesterPrime, isDark, privateLabel] = JSON.parse(value);
+        const primeLogo = isDark ? require('../assets/images/dark/suse-virtualization.svg') : require('../assets/images/suse-virtualization.svg');
+
+        setVendor(privateLabel || '');
+
+        let primaryColorStyle = document.getElementById('harvester-prime-primary-color');
+
+        // set harvester prime primary color style to #4dd192 (Cyan Green)
+        if (isHarvesterPrime) {
+          if (!primaryColorStyle) {
+            primaryColorStyle = document.createElement('style');
+            primaryColorStyle.id = 'harvester-prime-primary-color';
+            document.head.appendChild(primaryColorStyle);
+            primaryColorStyle.sheet.insertRule('body.theme-light, body.theme-dark {}', 0);
+          }
+
+          const colors = createCssVars('#4dd192', isDark ? 'dark' : 'light');
+          const rule = primaryColorStyle.sheet.cssRules[0];
+
+          Object.entries(colors).forEach(([property, color]) => rule.style.setProperty(property.trim(), color));
+        } else {
+          primaryColorStyle?.remove();
+        }
+
+        const primeLabelKey = privateLabel ? 'harvester.branding.primeLabel' : 'harvester.branding.primeEmptyLabel';
+
+        store.dispatch('setIsSingleProduct', {
+          productName:       PRODUCT_NAME,
+          logo:              isHarvesterPrime ? primeLogo : require(`@shell/assets/images/providers/harvester.svg`),
+          productNameKey:    isHarvesterPrime ? primeLabelKey : 'harvester.productLabel',
+          getVersionInfo:    (store) => store.getters[`${ PRODUCT_NAME }/byId`]?.(HCI.SETTING, 'server-version')?.value || 'unknown',
+          afterLoginRoute:   home,
+          logoRoute:         home,
+          supportCustomLogo: !isHarvesterPrime
+        });
+      },
+      { immediate: true }
+    );
   }
 
   product({

pkg/harvester/config/settings.ts

@@ -3,6 +3,7 @@ export const HCI_SETTING = {
   CONTAINERD_REGISTRY:                      'containerd-registry',
   LOG_LEVEL:                                'log-level',
   SERVER_VERSION:                           'server-version',
+  SERVER_FLAVOR:                            'server-flavor',
   UI_INDEX:                                 'ui-index',
   UPGRADE_CHECKER_ENABLED:                  'upgrade-checker-enabled',
   UPGRADE_CHECKER_URL:                      'upgrade-checker-url',
@@ -68,6 +69,7 @@ export const HCI_ALLOWED_SETTINGS = {
     kind: 'json', from: 'import', featureFlag: 'csiOnlineExpandValidation'
   },
   [HCI_SETTING.SERVER_VERSION]:               { readOnly: true },
+  [HCI_SETTING.SERVER_FLAVOR]:                { readOnly: true },
   [HCI_SETTING.UPGRADE_CHECKER_ENABLED]:      { kind: 'boolean' },
   [HCI_SETTING.UPGRADE_CHECKER_URL]:          { kind: 'url' },
   [HCI_SETTING.HTTP_PROXY]:                   { kind: 'json', from: 'import' },

pkg/harvester/l10n/en-us.yaml

@@ -84,6 +84,8 @@ dialog:
 
 harvester:
   branding:
+    primeLabel: '{vendor}'
+    primeEmptyLabel: ''
     logos:
       tip: 'Upload a logo to replace the Harvester logo in the top-level navigation header. Image height should be 21 pixels with a max width of 200 pixels. Max file size is 20KB. Accepted formats: JPEG, PNG, SVG.'
     favicon:
@@ -2445,6 +2447,7 @@ advancedSettings:
     'harv-containerd-registry': Containerd Registry Configuration to connect private registries.
     'harv-log-level': Configure Harvester server log level. Defaults to Info.
     'harv-server-version': Harvester server version.
+    'harv-server-flavor': "Indicates the Harvester edition: Prime or Community."
     'harv-upgrade-checker-enabled': Specifies whether to enable Harvester upgrade check or not. Default is True.
     'harv-upgrade-checker-url': Default Harvester upgrade check url. Only used when the <code>upgrade-checker-enabled</code> is equal to True.
     'harv-ui-source': Configure how to load the UI source. The `External` option is used to load the UI from a ui-index URL, while the `Bundled` option loads the UI from the local Harvester server.

pkg/harvester/models/management/management.cattle.io.setting.js

@@ -0,0 +1,14 @@
+import ManagementSetting from '@shell/models/management.cattle.io.setting';
+import { HCI_SETTING } from '../../config/settings';
+
+export default class HarvesterManagementSetting extends ManagementSetting {
+  get _availableActions() {
+    const actions = super._availableActions;
+
+    if (this.$rootGetters['isStandaloneHarvester'] && this.id === HCI_SETTING.UI_PL) {
+      return actions.filter((action) => !['goToClone', 'promptRemove'].includes(action.action));
+    }
+
+    return actions;
+  }
+}

pkg/harvester/pages/c/_cluster/brand/index.vue

@@ -63,6 +63,7 @@ export default {
     return {
       vendor:             getVendor(),
       uiPLSetting:        {},
+      privateLabelDraft:  null,
       uiLogoDarkSetting:  {},
       uiLogoDark:         '',
       uiLogoLightSetting: {},
@@ -81,6 +82,17 @@ export default {
     };
   },
   computed: {
+    isHarvesterPrime() {
+      return !!this.$store.getters['harvester-common/isHarvesterPrime'];
+    },
+    privateLabel: {
+      get() {
+        return this.privateLabelDraft ?? (this.isHarvesterPrime ? this.$store.getters['harvester-common/privateLabel'] : this.uiPLSetting.value);
+      },
+      set(value) {
+        this.privateLabelDraft = value;
+      }
+    },
     mode() {
       const schema = this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
 
@@ -112,7 +124,7 @@ export default {
       this.errors.push(e);
     },
     async save(btnCB) {
-      this.uiPLSetting.value = this.uiPLSetting.value.replaceAll(/[\<>&=#()"]/gm, '');
+      this.uiPLSetting.value = (this.privateLabel || '').replaceAll(/[\<>&=#()"]/gm, '');
       if (this.customizeLogo) {
         this.uiLogoLightSetting.value = this.uiLogoLight;
         this.uiLogoDarkSetting.value = this.uiLogoDark;
@@ -169,7 +181,7 @@ export default {
       <div class="row mb-20">
         <div class="col span-6">
           <LabeledInput
-            v-model:value="uiPLSetting.value"
+            v-model:value="privateLabel"
             :label="t('branding.uiPL.label')"
             :mode="mode"
             :maxlength="100"

pkg/harvester/store/harvester-common.js

@@ -1,4 +1,6 @@
 import Parse from 'url-parse';
+import { MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
 import { HCI } from '../types';
 import { PRODUCT_NAME } from '../config/harvester';
 import { featureEnabled, getVersion } from '../utils/feature-flags';
@@ -64,6 +66,23 @@ const mutations = {
 };
 
 const getters = {
+  isHarvesterPrime: (_state, _getters, _rootState, rootGetters) => {
+    const setting = rootGetters['harvester/byId']?.(HCI.SETTING, 'server-flavor');
+
+    return (setting?.value || setting?.default) === 'prime';
+  },
+
+  privateLabel: (_state, getters, _rootState, rootGetters) => {
+    const setting = rootGetters['management/byId']?.(MANAGEMENT.SETTING, SETTING.PL);
+    const value = setting?.value || '';
+
+    if (getters.isHarvesterPrime && value === (setting?.default || 'Harvester')) {
+      return '';
+    }
+
+    return value;
+  },
+
   getBundleId(state) {
     return state.latestBundleId;
   },