feat: use prime logo when server-flavor is prime

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

pkg/harvester/components/SettingList.vue

@@ -53,7 +53,7 @@ export default {
     };
   },
 
-  computed: { ...mapGetters({ t: 'i18n/t' }) },
+  computed: { ...mapGetters({ t: 'i18n/t', isHarvesterPrime: 'harvester-common/isHarvesterPrime' }) },
 
   watch: {
     settings: {
@@ -269,7 +269,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,7 @@ import {
 } from './table-headers';
 import { ADD_ONS } from './harvester-map';
 import { registerAddonSideNav } from '../utils/dynamic-nav';
+import { setVendor } from '@shell/config/private-label';
 
 const TEMPLATE = HCI.VM_VERSION;
 const MONITORING_GROUP = 'Monitoring & Logging::Monitoring';
@@ -109,15 +110,31 @@ 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) => ({
+        isHarvesterPrime: !!getters['harvester-common/isHarvesterPrime'],
+        isDark:           getters['prefs/theme'] === 'dark',
+        privateLabel:     getters['harvester-common/privateLabel']
+      }),
+      ({ isHarvesterPrime, isDark, privateLabel }) => {
+        const primeLogo = isDark ? require('../assets/images/dark/suse-virtualization.svg') : require('../assets/images/suse-virtualization.svg');
+
+        setVendor(privateLabel || '');
+
+        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/harvester-prime.svg

@@ -1 +0,0 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 165"><defs><style>.cls-1{fill:#30BA78;}.cls-2{fill:#fff;}</style></defs><rect class="cls-1" width="200" height="165" rx="20"/><path class="cls-2" d="M158.93945,121.73682H119.40527a5.0009,5.0009,0,0,1-4.33007-2.5L95.30859,84.99951a4.99813,4.99813,0,0,1,0-5L115.0752,45.7627a5.00088,5.00088,0,0,1,4.33007-2.5h39.53418a5.00088,5.00088,0,0,1,4.33008,2.5l19.7666,34.23681a4.99808,4.99808,0,0,1,0,5l-19.7666,34.23731A5.0009,5.0009,0,0,1,158.93945,121.73682Zm-36.64746-10h33.76074l16.87989-29.23731L156.05273,53.2627H122.292L105.41211,82.49951Z"/><path class="cls-2" d="M147.39258,101.73633H130.95312a5.0009,5.0009,0,0,1-4.33007-2.5L118.40332,85a4.99813,4.99813,0,0,1,0-5l8.21973-14.2373a5.00088,5.00088,0,0,1,4.33007-2.5h16.43946a5.00091,5.00091,0,0,1,4.33008,2.5L159.94238,80a4.99808,4.99808,0,0,1,0,5l-8.21972,14.23633A5.00093,5.00093,0,0,1,147.39258,101.73633Zm-13.55274-10h10.666l5.333-9.23633-5.333-9.2373h-10.666l-5.333,9.2373Z"/><path class="cls-2" d="M50.34082,121.73682H40.958a5.00092,5.00092,0,0,1-4.33008-2.5L16.86133,84.99951a4.99808,4.99808,0,0,1,0-5L36.62793,45.7627a5.0009,5.0009,0,0,1,4.33008-2.5h9.38281a5,5,0,0,1,0,10H43.84473L26.96484,82.49951l16.87989,29.23731h6.49609a5,5,0,1,1,0,10Z"/><path class="cls-2" d="M76.49023,121.73682H67.10742a5.00093,5.00093,0,0,1-4.33008-2.5L43.01074,84.99951a4.99813,4.99813,0,0,1,0-5L62.77734,45.7627a5.00091,5.00091,0,0,1,4.33008-2.5h9.38281a5,5,0,0,1,0,10H69.99414L53.11426,82.49951l16.87988,29.23731h6.49609a5,5,0,0,1,0,10Z"/><path class="cls-2" d="M102.63867,121.73682H93.25684a5.0009,5.0009,0,0,1-4.33008-2.5L69.16016,84.99951a4.99808,4.99808,0,0,1,0-5L88.92676,45.7627a5.00088,5.00088,0,0,1,4.33008-2.5h9.38183a5,5,0,0,1,0,10H96.14355L79.26367,82.49951l16.87988,29.23731h6.49512a5,5,0,1,1,0,10Z"/><path class="cls-2" d="M130.958,73.26367a4.99757,4.99757,0,0,1-4.335-2.501l-11.54785-20a5,5,0,1,1,8.66015-5l11.54785,20a5.00157,5.00157,0,0,1-4.32519,7.501Z"/><path class="cls-2" d="M147.3877,73.26367a5.00157,5.00157,0,0,1-4.3252-7.501l11.54688-20a5,5,0,1,1,8.66015,5l-11.54687,20A4.99758,4.99758,0,0,1,147.3877,73.26367Z"/><path class="cls-2" d="M178.70605,87.5H155.6123a5,5,0,0,1,0-10h23.09375a5,5,0,0,1,0,10Z"/><path class="cls-2" d="M122.7334,87.5H99.63867a5,5,0,1,1,0-10H122.7334a5,5,0,1,1,0,10Z"/><path class="cls-2" d="M119.40039,121.73779a5.00157,5.00157,0,0,1-4.32519-7.501l11.54785-20.00049a5,5,0,1,1,8.66015,5l-11.54785,20.00049A4.99757,4.99757,0,0,1,119.40039,121.73779Z"/><path class="cls-2" d="M158.94434,121.73779a4.99757,4.99757,0,0,1-4.335-2.501L143.0625,99.23633a5,5,0,0,1,8.66016-5l11.54687,20.00049a5.00157,5.00157,0,0,1-4.32519,7.501Z"/><path class="cls-2" d="M101.50195,87.49951H21.19141a5,5,0,0,1,0-10h80.31054a5,5,0,0,1,0,10Z"/></svg>

pkg/harvester/index.ts

@@ -7,11 +7,10 @@ import harvesterStore from './store/harvester-store';
 import customValidators from './validators';
 import { PRODUCT_NAME } from './config/harvester';
 import { defineAsyncComponent } from 'vue';
-import semver from 'semver';
 import './styles/vue-flow.scss';
 
 // Init the package
-export default function(plugin: IPlugin) {
+export default function (plugin: IPlugin) {
   const isDev = process.env.NODE_ENV !== 'production';
   const isSingleVirtualCluster = process.env.rancherEnv === PRODUCT_NAME;
 
@@ -21,19 +20,8 @@ export default function(plugin: IPlugin) {
   // Provide plugin metadata from package.json
   plugin.metadata = require('./package.json');
 
-  const version = semver.parse(plugin.metadata.version);
-  const isHarvesterPrime = (version?.patch ?? 0) > 0;
-  const rancher = typeof plugin.metadata.rancher === 'object' ? plugin.metadata.rancher : {};
-
-  plugin.metadata.description = isHarvesterPrime ? 'Rancher UI Extension for Harvester Prime' : 'Rancher UI Extension for Harvester';
-  plugin.metadata.rancher = {
-    ...rancher,
-    annotations: {
-      ...rancher?.annotations,
-      'catalog.cattle.io/display-name': isHarvesterPrime ? 'SUSE Virtualization' : 'Harvester',
-    },
-  };
-  plugin.metadata.icon = isHarvesterPrime ? require('./harvester-prime.svg') : require('./icon.svg');
+  // Built-in icon
+  plugin.metadata.icon = require('./icon.svg');
 
   plugin.addProduct(require('./config/harvester-cluster'));
 

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:

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