@rancher/shell 3.0.8-rc.5 → 3.0.8-rc.6

package/assets/brand/suse/metadata.json

@@ -5,6 +5,9 @@
     "textAlign": "left"
   },
   "login": {
-    "bannerClass": "suse-login-banner-graphic"
-  }
+    "bannerClass": "suse-login-banner-graphic",
+    "logo": "rancher-logo.svg",
+    "logoClass": "suse-logo-login",
+    "welcomeLabelKey": "login.login"
+  }  
 }

package/assets/styles/themes/_suse.scss

@@ -97,6 +97,16 @@
   .suse-login-banner-graphic {
     object-position: left;
   }
+
+  // Styling for logo image on the login screen
+  .suse-logo-login {
+    $suse-logo-width: 280px;
+
+    width: $suse-logo-width;
+    max-width: $suse-logo-width;
+    align-self: center;
+    margin-bottom: 30px;
+  }  
 }
 
 // Ensure that with a small window size, the banner centers, so that the text does not overlay

package/components/ResourceDetail/index.vue

@@ -310,7 +310,7 @@ export default {
       }), {});
     },
     isFullPageOverride() {
-      return this.isView && this.value.fullDetailPageOverride;
+      return this.isView && this.value.fullDetailPageOverride && !this.isYaml;
     }
   },
 

package/directives/ui-context.ts

@@ -89,15 +89,15 @@ export default {
 
     if (store) {
       delete context.store;
-      el._uiContextId = await store.dispatch('ui-context/add', context);
+      const id = await store.dispatch('ui-context/add', context);
+
+      el._uiContextRemove = async() => await store.dispatch('ui-context/remove', id);
     }
   },
 
-  async beforeUnmount(el: any, binding: { value: Context, instance: any }) {
-    const store = binding.value?.store || binding.instance.$store || binding.instance.store;
-
-    if (store && el._uiContextId) {
-      await store.dispatch('ui-context/remove', el._uiContextId);
+  async beforeUnmount(el: any) {
+    if (el._uiContextRemove) {
+      await el._uiContextRemove();
     }
   }
 };

package/models/__tests__/chart.test.ts

@@ -2,11 +2,16 @@ import Chart from '@shell/models/chart';
 import { APP_UPGRADE_STATUS } from '@shell/store/catalog';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { ZERO_TIME } from '@shell/config/types';
+import { getLatestCompatibleVersion } from '@shell/utils/chart';
+
+jest.mock('@shell/utils/chart', () => ({ getLatestCompatibleVersion: jest.fn() }));
 
 type MockChartContext = {
   rootGetters: {
     'cluster/all': () => any[];
     'i18n/t': (key: string) => string;
+    currentCluster: { workerOSs: string[] };
+    'prefs/get': (key: string) => boolean;
   };
   dispatch?: jest.Mock;
 };
@@ -58,11 +63,32 @@ describe('class Chart', () => {
   beforeEach(() => {
     ctx = {
       rootGetters: {
-        'cluster/all': () => [],
-        'i18n/t':      t
+        'cluster/all':  () => [],
+        'i18n/t':       t,
+        currentCluster: { workerOSs: [] },
+        'prefs/get':    () => false,
       },
       dispatch
     };
+    (getLatestCompatibleVersion as jest.Mock).mockImplementation((chart) => chart.versions[0]);
+  });
+
+  describe('queryParams', () => {
+    it('should return query params with the latest compatible version', () => {
+      const chart = new Chart(base, ctx);
+      const query = chart.queryParams();
+
+      expect(getLatestCompatibleVersion).toHaveBeenCalledWith(chart, [], false);
+      expect(query).toHaveProperty('version', '1.3.0');
+    });
+
+    it('should reflect a different latest version from the mock', () => {
+      (getLatestCompatibleVersion as jest.Mock).mockImplementation((chart) => chart.versions[1]);
+      const chart = new Chart(base, ctx);
+      const query = chart.queryParams();
+
+      expect(query).toHaveProperty('version', '1.2.3');
+    });
   });
 
   describe('matchingInstalledApps', () => {
@@ -188,6 +214,7 @@ describe('class Chart', () => {
 
       const result = chart.cardContent as CardContent;
 
+      expect(getLatestCompatibleVersion).toHaveBeenCalledWith(chart, [], false);
       expect(result.subHeaderItems).toHaveLength(2);
       expect(result.subHeaderItems[0].label).toBe('1.3.0');
       expect(result.subHeaderItems[1].label).toBe('Mar 10, 2024');
@@ -297,8 +324,10 @@ describe('class Chart', () => {
       };
       const chart = new Chart(chartWithZeroTime, {
         rootGetters: {
-          'cluster/all': () => [],
-          'i18n/t':      (key: string) => key
+          'cluster/all':  () => [],
+          'i18n/t':       (key: string) => key,
+          currentCluster: { workerOSs: [] },
+          'prefs/get':    () => false,
         },
       });
 

package/models/chart.js

@@ -1,8 +1,10 @@
-import { compatibleVersionsFor, APP_UPGRADE_STATUS } from '@shell/store/catalog';
+import { APP_UPGRADE_STATUS } from '@shell/store/catalog';
 import {
   REPO_TYPE, REPO, CHART, VERSION, _FLAGGED, HIDE_SIDE_NAV, CATEGORY, TAG, DEPRECATED as DEPRECATED_QUERY
 } from '@shell/config/query-params';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
+import { SHOW_PRE_RELEASE } from '@shell/store/prefs';
+import { getLatestCompatibleVersion } from '@shell/utils/chart';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { CATALOG, ZERO_TIME } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
@@ -10,17 +12,7 @@ import day from 'dayjs';
 
 export default class Chart extends SteveModel {
   queryParams(from, hideSideNav) {
-    let version;
-    const chartVersions = this.versions;
-    const currentCluster = this.$rootGetters['currentCluster'];
-    const workerOSs = currentCluster?.workerOSs;
-    const compatibleVersions = compatibleVersionsFor(this, workerOSs);
-
-    if (compatibleVersions.length) {
-      version = compatibleVersions[0].version;
-    } else {
-      version = chartVersions[0].version;
-    }
+    const version = this.latestCompatibleVersion.version;
 
     const out = {
       [REPO_TYPE]: this.repoType,
@@ -115,6 +107,26 @@ export default class Chart extends SteveModel {
     return this.isInstalled && this.matchingInstalledApps[0].upgradeAvailable === APP_UPGRADE_STATUS.SINGLE_UPGRADE;
   }
 
+  /**
+   * Retrieves the latest chart version that is compatible with the current cluster's OS and user's pre-release preference.
+   * It caches the result for efficiency.
+   *
+   * @returns {Object} The latest compatible chart version object.
+   */
+  get latestCompatibleVersion() {
+    if (this._latestCompatibleVersion) {
+      return this._latestCompatibleVersion;
+    }
+
+    const currentCluster = this.$rootGetters['currentCluster'];
+    const workerOSs = currentCluster?.workerOSs;
+    const showPrerelease = this.$rootGetters['prefs/get'](SHOW_PRE_RELEASE);
+
+    this._latestCompatibleVersion = getLatestCompatibleVersion(this, workerOSs, showPrerelease);
+
+    return this._latestCompatibleVersion;
+  }
+
   /**
    * Builds structured metadata for display in RcItemCard.vue:
    * - Sub-header (version and last updated)
@@ -125,7 +137,7 @@ export default class Chart extends SteveModel {
    */
   get cardContent() {
     if (!this._cardContent) {
-      const latestVersion = this.versions?.[0] || {};
+      const latestVersion = this.latestCompatibleVersion;
       const subHeaderItems = [];
 
       if (latestVersion) {

package/models/provisioning.cattle.io.cluster.js

@@ -9,7 +9,6 @@ import { get, set } from '@shell/utils/object';
 import { sortBy } from '@shell/utils/sort';
 import { ucFirst } from '@shell/utils/string';
 import { compare } from '@shell/utils/version';
-import { AS, MODE, _VIEW, _YAML } from '@shell/config/query-params';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { CAPI as CAPI_ANNOTATIONS, NODE_ARCHITECTURE } from '@shell/config/labels-annotations';
 import { KEV1 } from '@shell/models/management.cattle.io.kontainerdriver';
@@ -260,26 +259,6 @@ export default class ProvCluster extends SteveModel {
     }
   }
 
-  goToViewYaml() {
-    let location;
-
-    if ( !this.isRke2 ) {
-      location = this.mgmt?.detailLocation;
-    }
-
-    if ( !location ) {
-      location = this.detailLocation;
-    }
-
-    location.query = {
-      ...location.query,
-      [MODE]: _VIEW,
-      [AS]:   _YAML
-    };
-
-    this.currentRouter().push(location);
-  }
-
   get canDelete() {
     return super.canDelete && this.stateObj?.name !== 'removing';
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.8-rc.5",
+  "version": "3.0.8-rc.6",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/pages/auth/login.vue

@@ -142,11 +142,19 @@ export default {
       const brandMeta = getBrandMeta(setting?.value);
       const login = brandMeta?.login || {};
 
-      return login;
+      return {
+        welcomeLabelKey: 'login.welcome',
+        logoClass:       'login-logo',
+        ...login,
+      };
     },
 
     bannerClass() {
       return this.customizations.bannerClass;
+    },
+
+    brandLogo() {
+      return this.customizations.logo;
     }
   },
 
@@ -349,11 +357,20 @@ export default {
     </TabTitle>
     <div class="row gutless mb-20">
       <div class="col span-6 p-20">
-        <p class="text-center">
+        <p
+          v-if="!brandLogo"
+          class="text-center"
+        >
           {{ t('login.howdy') }}
         </p>
+        <BrandImage
+          v-else
+          :class="{[customizations.logoClass]: !!customizations.logoClass}"
+          :file-name="brandLogo"
+          :alt="t('login.landscapeAlt')"
+        />
         <h1 class="text-center login-welcome">
-          {{ t('login.welcome', {vendor}) }}
+          {{ t(customizations.welcomeLabelKey, {vendor}) }}
         </h1>
         <div
           class="login-messages"
@@ -567,6 +584,12 @@ export default {
       margin: 0
     }
 
+    .login-logo {
+      align-self: center;
+      max-width: 260px;
+      margin-bottom: 20px;
+    }
+
     .login-messages {
       display: flex;
       justify-content: center;

package/pages/c/_cluster/apps/charts/index.vue

@@ -7,7 +7,7 @@ import {
   REPO_TYPE, REPO, CHART, VERSION, SEARCH_QUERY, SORT_BY, _FLAGGED, CATEGORY, DEPRECATED, HIDDEN, TAG, STATUS
 } from '@shell/config/query-params';
 import { DOCS_BASE } from '@shell/config/private-label';
-import { APP_STATUS, compatibleVersionsFor, filterAndArrangeCharts, normalizeFilterQuery } from '@shell/store/catalog';
+import { APP_STATUS, filterAndArrangeCharts, normalizeFilterQuery } from '@shell/store/catalog';
 import { lcFirst } from '@shell/utils/string';
 import { sortBy } from '@shell/utils/sort';
 import debounce from 'lodash/debounce';
@@ -24,6 +24,7 @@ import AppChartCardFooter from '@shell/pages/c/_cluster/apps/charts/AppChartCard
 import AddRepoLink from '@shell/pages/c/_cluster/apps/charts/AddRepoLink';
 import StatusLabel from '@shell/pages/c/_cluster/apps/charts/StatusLabel';
 import RichTranslation from '@shell/components/RichTranslation.vue';
+import { getLatestCompatibleVersion } from '@shell/utils/chart';
 import Select from '@shell/components/form/Select';
 
 const createInitialFilters = () => ({
@@ -190,6 +191,13 @@ export default {
         sort:        this.selectedSortOption
       });
 
+      const OSs = this.currentCluster.workerOSs;
+      const showPrerelease = this.$store.getters['prefs/get'](SHOW_PRE_RELEASE);
+
+      res.forEach((chart) => {
+        chart._latestCompatibleVersion = getLatestCompatibleVersion(chart, OSs, showPrerelease);
+      });
+
       // status filtering is separated from other filters because "isInstalled" and "upgradeable" statuses are already calculated in models/chart.js
       // by doing this we won't need to re-calculate it in filterAndArrangeCharts
       if (!statuses.length) {
@@ -265,7 +273,7 @@ export default {
               statuses: chart.cardContent.statuses
             },
             subHeaderItems: chart.cardContent.subHeaderItems,
-            image:          { src: chart.versions[0].icon, alt: { text: this.t('catalog.charts.iconAlt', { app: get(chart, 'chartNameDisplay') }) } },
+            image:          { src: chart.latestCompatibleVersion.icon, alt: { text: this.t('catalog.charts.iconAlt', { app: get(chart, 'chartNameDisplay') }) } },
             content:        { text: chart.chartDescription },
             footerItems:    chart.cardContent.footerItems,
             rawChart:       chart
@@ -343,17 +351,7 @@ export default {
     }, 100),
 
     selectChart(chart) {
-      let version;
-      const OSs = this.currentCluster.workerOSs;
-      const showPrerelease = this.$store.getters['prefs/get'](SHOW_PRE_RELEASE);
-      const compatibleVersions = compatibleVersionsFor(chart, OSs, showPrerelease);
-      const versions = chart.versions;
-
-      if (compatibleVersions.length > 0) {
-        version = compatibleVersions[0].version;
-      } else {
-        version = versions[0].version;
-      }
+      const version = chart.latestCompatibleVersion.version;
 
       const query = {
         [REPO_TYPE]: chart.repoType,

package/types/shell/index.d.ts

@@ -3950,6 +3950,19 @@ export function getIndividualBanners(store: any): {};
 export function overlayIndividualBanners(parsedBanner: any, banners: any): void;
 }
 
+// @shell/utils/chart
+
+declare module '@shell/utils/chart' {
+/**
+ * Get the latest chart version that is compatible with the cluster's OS and user's pre-release preference.
+ * @param {Object} chart - The chart object.
+ * @param {Array<string>} workerOSs - The list of worker OSs for the cluster.
+ * @param {boolean} showPrerelease - Whether to include pre-release versions.
+ * @returns {Object} The latest compatible chart version object.
+ */
+export function getLatestCompatibleVersion(chart: any, workerOSs: Array<string>, showPrerelease: boolean): any;
+}
+
 // @shell/utils/clipboard
 
 declare module '@shell/utils/clipboard' {

package/utils/chart.js

@@ -0,0 +1,18 @@
+import { compatibleVersionsFor } from '@shell/store/catalog';
+
+/**
+ * Get the latest chart version that is compatible with the cluster's OS and user's pre-release preference.
+ * @param {Object} chart - The chart object.
+ * @param {Array<string>} workerOSs - The list of worker OSs for the cluster.
+ * @param {boolean} showPrerelease - Whether to include pre-release versions.
+ * @returns {Object} The latest compatible chart version object.
+ */
+export function getLatestCompatibleVersion(chart, workerOSs, showPrerelease) {
+  if (!chart?.versions?.length) {
+    return {};
+  }
+
+  const compatible = compatibleVersionsFor(chart, workerOSs, showPrerelease);
+
+  return (compatible.length ? compatible[0] : chart.versions[0]) || {};
+}