@rancher/shell 3.0.8-rc.1 → 3.0.8-rc.10

package/pages/auth/login.vue

@@ -32,6 +32,7 @@ import loadPlugins from '@shell/plugins/plugin';
 import Loading from '@shell/components/Loading';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import TabTitle from '@shell/components/TabTitle.vue';
+import { getBrandMeta } from '@shell/utils/brand';
 
 export default {
   name:       'Login',
@@ -134,6 +135,25 @@ export default {
     hasLoginMessage() {
       return this.errorToDisplay || this.loggedOut || this.timedOut;
     },
+
+    customizations() {
+      const brandMeta = getBrandMeta(this.$store.getters['management/brand']);
+      const login = brandMeta?.login || {};
+
+      return {
+        welcomeLabelKey: 'login.welcome',
+        logoClass:       'login-logo',
+        ...login,
+      };
+    },
+
+    bannerClass() {
+      return this.customizations.bannerClass;
+    },
+
+    brandLogo() {
+      return this.customizations.logo;
+    }
   },
 
   async fetch() {
@@ -335,11 +355,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"
@@ -524,6 +553,7 @@ export default {
         </div>
       </div>
       <BrandImage
+        :class="bannerClass"
         class="col span-6 landscape"
         data-testid="login-landscape__img"
         file-name="login-landscape.svg"
@@ -552,6 +582,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/__tests__/chart.test.ts

@@ -0,0 +1,135 @@
+import Chart from '@shell/pages/c/_cluster/apps/charts/chart.vue';
+
+jest.mock('clipboard-polyfill', () => ({ writeText: () => {} }));
+
+describe('page: Chart Detail', () => {
+  describe('computed: maintainers', () => {
+    it('should return an empty array if no maintainers are provided', () => {
+      const thisContext = {
+        version:     {},
+        versionInfo: null,
+      };
+      const result = (Chart.computed!.maintainers as () => any[]).call(thisContext);
+
+      expect(result).toStrictEqual([]);
+    });
+
+    it('should return an empty array for empty maintainers arrays', () => {
+      const thisContext = {
+        version:     { maintainers: [] },
+        versionInfo: { chart: { maintainers: [] } },
+      };
+      const result = (Chart.computed!.maintainers as () => any[]).call(thisContext);
+
+      expect(result).toStrictEqual([]);
+    });
+
+    it('should prioritize maintainers from "version"', () => {
+      const thisContext = {
+        version: {
+          maintainers: [
+            { name: 'Version Maintainer', email: 'version@test.com' }
+          ]
+        },
+        versionInfo: {
+          chart: {
+            maintainers: [
+              { name: 'VersionInfo Maintainer', email: 'versioninfo@test.com' }
+            ]
+          }
+        },
+      };
+      const result = (Chart.computed!.maintainers as () => any[]).call(thisContext);
+
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe('Version Maintainer');
+    });
+
+    it('should fall back to maintainers from "versionInfo"', () => {
+      const thisContext = {
+        version:     {},
+        versionInfo: {
+          chart: {
+            maintainers: [
+              { name: 'VersionInfo Maintainer', email: 'versioninfo@test.com' }
+            ]
+          }
+        },
+      };
+      const result = (Chart.computed!.maintainers as () => any[]).call(thisContext);
+
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe('VersionInfo Maintainer');
+    });
+
+    it('should correctly map all maintainer fields', () => {
+      const thisContext = {
+        version: {
+          maintainers: [
+            {
+              name: 'Full Maintainer', email: 'full@test.com', url: 'http://full.com'
+            }
+          ]
+        },
+        versionInfo: null,
+      };
+      const result = (Chart.computed!.maintainers as () => any[]).call(thisContext);
+      const expected = {
+        id:    'Full Maintainer-0',
+        name:  'Full Maintainer',
+        href:  'http://full.com',
+        label: 'Full Maintainer'
+      };
+
+      expect(result[0]).toStrictEqual(expected);
+    });
+
+    it('should handle maintainers with missing optional fields', () => {
+      const thisContext = {
+        version: {
+          maintainers: [
+            { name: 'No Email Maintainer', url: 'http://noemail.com' },
+            { name: 'No URL Maintainer', email: 'nourl@test.com' },
+            { name: 'Name Only Maintainer' },
+            { url: 'http://noname.com' },
+            { email: 'noname@test.com' }
+          ]
+        },
+        versionInfo: null,
+      };
+      const result = (Chart.computed!.maintainers as () => any[]).call(thisContext);
+
+      expect(result).toHaveLength(5);
+      expect(result[0]).toStrictEqual({
+        id:    'No Email Maintainer-0',
+        name:  'No Email Maintainer',
+        href:  'http://noemail.com',
+        label: 'No Email Maintainer'
+      });
+      expect(result[1]).toStrictEqual({
+        id:    'No URL Maintainer-1',
+        name:  'No URL Maintainer',
+        href:  'mailto:nourl@test.com',
+        label: 'No URL Maintainer'
+      });
+      expect(result[2]).toStrictEqual({
+        id:    'Name Only Maintainer-2',
+        name:  'Name Only Maintainer',
+        href:  null,
+        label: 'Name Only Maintainer'
+      });
+      expect(result[3]).toStrictEqual({
+        id:    'undefined-3',
+        name:  undefined,
+        href:  'http://noname.com',
+        label: 'http://noname.com'
+      });
+      expect(result[4]).toStrictEqual({
+        id:    'undefined-4',
+        name:  undefined,
+        href:  'mailto:noname@test.com',
+        label: 'noname@test.com'
+      });
+    });
+  });
+});

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

@@ -84,11 +84,21 @@ export default {
     maintainers() {
       const maintainers = this.version.maintainers || this.versionInfo?.chart?.maintainers || [];
 
-      return maintainers.map((m) => {
+      return maintainers.map((m, i) => {
+        const label = m.name || m.url || m.email || this.t('generic.unknown');
+        let href = null;
+
+        if (m.url) {
+          href = m.url;
+        } else if (m.email) {
+          href = `mailto:${ m.email }`;
+        }
+
         return {
-          id:   m.name,
-          text: m.name,
-          url:  m.email ? `mailto:${ m.email }` : m.url
+          id:   `${ m.name }-${ i }`,
+          name: m.name,
+          label,
+          href
         };
       });
     },
@@ -456,18 +466,26 @@ export default {
             data-testid="chart-home-link"
           >{{ home }}<i class="icon icon-external-link" /><span class="sr-only">{{ t('generic.opensInNewTab') }}</span></a>
         </div>
-        <div
-          v-if="maintainers.length"
-          class="chart-body__info-section"
-        >
+        <div class="chart-body__info-section">
           <h4>{{ t('catalog.chart.info.maintainers') }}</h4>
-          <a
-            v-for="m of maintainers"
-            :key="m.id"
-            :href="m.url"
-            rel="nofollow noopener noreferrer"
-            target="_blank"
-          >{{ m.text }}<span class="sr-only">{{ t('generic.opensInNewTab') }}</span></a>
+          <template v-if="maintainers.length">
+            <div
+              v-for="m of maintainers"
+              :key="m.id"
+            >
+              <a
+                v-if="m.href"
+                v-clean-tooltip="m.name ? t('catalog.chart.info.maintainerContactTooltip', { maintainer: m.name }) : undefined"
+                :href="m.href"
+                rel="nofollow noopener noreferrer"
+                target="_blank"
+              >
+                {{ m.label }}
+              </a>
+              <span v-else>{{ m.label }}</span>
+            </div>
+          </template>
+          <span v-else>{{ t('generic.unknown') }}</span>
         </div>
         <div
           v-if="version.sources"

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/pages/c/_cluster/apps/charts/install.vue

@@ -1203,7 +1203,7 @@ export default {
         const { allValues, values: crdValues } = versionInfo;
 
         // only save crd values that differ from the defaults defined in chart values.yaml
-        const customizedCrdValues = diff(crdValues, allValues);
+        const customizedCrdValues = diff(crdValues, allValues, true);
 
         // CRD globals should be overwritten by main chart globals
         // we want to avoid including globals present on crd values and not main chart values

package/pages/c/_cluster/explorer/index.vue

@@ -222,7 +222,7 @@ export default {
     displayProvider() {
       const other = 'other';
 
-      let provider = this.currentCluster?.status?.provider || other;
+      let provider = this.currentCluster?.status?.provider || this.currentCluster?.status?.driver.toLowerCase() || other;
 
       if (provider === 'rke.windows') {
         provider = 'rkeWindows';
@@ -484,6 +484,12 @@ export default {
     hasNodes() {
       return this.nodes?.length > 0;
     },
+    kubernetesVersion() {
+      const base = this.currentCluster?.kubernetesVersionBase || '';
+      const extension = this.currentCluster?.kubernetesVersionExtension || '';
+
+      return `${ base }${ extension }`;
+    }
   },
 
   methods: {
@@ -661,11 +667,7 @@ export default {
       </div>
       <div data-testid="kubernetesVersion__label">
         <label>{{ t('glance.version') }}: </label>
-        <span>{{ currentCluster.kubernetesVersionBase }}</span>
-        <span
-          v-if="currentCluster.kubernetesVersionExtension"
-          style="font-size: 0.75em"
-        >{{ currentCluster.kubernetesVersionExtension }}</span>
+        <span>{{ kubernetesVersion }}</span>
       </div>
       <div
         v-if="hasNodes"

package/pages/c/_cluster/manager/hostedprovider/index.vue

@@ -0,0 +1,220 @@
+<script>
+import { MANAGEMENT, HOSTED_PROVIDER } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+import { STATE, NAME } from '@shell/config/table-headers';
+import ResourceTable from '@shell/components/ResourceTable';
+import Masthead from '@shell/components/ResourceList/Masthead';
+import Banner from '@components/Banner/Banner.vue';
+import RcStatusBadge from '@components/Pill/RcStatusBadge/RcStatusBadge.vue';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { isRancherPrime } from '@shell/config/version';
+import { stateDisplay, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import { getHostedProviders } from '@shell/utils/provider';
+
+export default {
+  name:       'HostedProviders',
+  components: {
+    ResourceTable, Masthead, RcStatusBadge, Banner
+  },
+  data() {
+    return {
+      errors:          [],
+      rows:            [],
+      allProviders:    null,
+      resource:        HOSTED_PROVIDER,
+      schema:          this.$store.getters['rancher/schemaFor'](HOSTED_PROVIDER),
+      prime:           isRancherPrime(),
+      settingResource: null
+    };
+  },
+  fetch() {
+    this.allProviders = this.getProviders();
+    this.getSettings();
+    this.generateRows();
+  },
+  watch: {
+    settings() {
+      this.generateRows();
+    },
+    allProviders() {
+      this.generateRows();
+    }
+  },
+  computed: {
+    headers() {
+      return [
+        STATE,
+        NAME,
+      ];
+    },
+    settings() {
+      const providerTypesJSON = this.settingResource?.value;
+      const providerTypes = providerTypesJSON ? JSON.parse(providerTypesJSON) : [];
+      const settingsDict = {};
+
+      providerTypes.forEach((p) => {
+        settingsDict[p.name] = p.active;
+      });
+
+      return settingsDict;
+    },
+
+  },
+  methods: {
+    getProviders() {
+      const context = {
+        dispatch:   this.$store.dispatch,
+        getters:    this.$store.getters,
+        axios:      this.$store.$axios,
+        $extension: this.$store.app.$extension,
+        t:          (...args) => this.t.apply(this, args),
+      };
+
+      return getHostedProviders(context);
+    },
+    getSettings() {
+      this.settingResource = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.KEV2_OPERATORS );
+    },
+    stateDisplay(row) {
+      if (!row.active) {
+        return stateDisplay(STATES_ENUM.INACTIVE);
+      }
+
+      return stateDisplay(STATES_ENUM.ACTIVE);
+    },
+    async setSetting(resources, active) {
+      try {
+        const providerTypes = this.settingResource.value ? JSON.parse(this.settingResource.value) : [];
+        const providerMap = new Map(providerTypes.map((prov) => [prov.name, prov]));
+
+        resources.forEach((resource) => {
+          const provider = providerMap.get(resource.id);
+
+          if (provider) {
+            provider.active = active;
+          } else {
+            providerMap.set(resource.id, { name: resource.id, active });
+          }
+        });
+
+        this.settingResource.value = JSON.stringify(Array.from(providerMap.values()));
+        await this.settingResource.save();
+        this.getSettings();
+      } catch (e) {
+        this.errors = exceptionToErrorsArray(e);
+      }
+    },
+    async generateRows() {
+      this.rows = this.allProviders.map((p) => {
+        const active = p.id in this.settings ? this.settings[p.id] : true;
+        const canNotPrime = p.prime && !this.prime;
+        const canNotChangeSettings = !this.settingResource?.canUpdate;
+        const enableAction = {
+          action:   'activate',
+          label:    this.t('action.activate'),
+          icon:     'icon icon-play',
+          bulkable: true,
+          enabled:  !active && !canNotPrime && !canNotChangeSettings,
+          invoke:   async(opts, resources) => {
+            await this.setSetting(resources, true);
+          }
+        };
+        const disableAction = {
+          action:   'deactivate',
+          label:    this.t('action.deactivate'),
+          icon:     'icon icon-pause',
+          bulkable: true,
+          enabled:  active && !canNotChangeSettings,
+          weight:   -1,
+          invoke:   async(opts, resources) => {
+            await this.setSetting(resources, false);
+          }
+        };
+        const availableActions = [enableAction, disableAction];
+
+        return {
+          id:          p.id,
+          name:        p.label,
+          nameDisplay: p.label,
+          description: p.description || '',
+          prime:       p.prime,
+          active,
+          availableActions
+        };
+      }) || [];
+    },
+    closeError(index) {
+      this.errors.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Masthead
+      :schema="schema"
+      :resource="resource"
+      :type-display="t('providers.hosted.title')"
+      :is-creatable="false"
+    />
+    <Banner
+      color="warning"
+      :label="t('providers.hosted.warning')"
+      :closable="false"
+    />
+    <Banner
+      v-for="(err, i) in errors"
+      :key="i"
+      color="error"
+      :label="err"
+      :closable="true"
+      @close="closeError(i)"
+    />
+    <ResourceTable
+      :schema="schema"
+      :resource="resource"
+      :rows="rows"
+      :headers="headers"
+      :row-actions="true"
+      :table-actions="true"
+      :data-testid="'hosted-provider-list'"
+      key-field="id"
+    >
+      <template #cell:state="{row}">
+        <RcStatusBadge
+          :status="!row.active ? 'error' : 'success'"
+        >
+          {{ stateDisplay(row) }}
+        </RcStatusBadge>
+      </template>
+      <template #cell:name="{row}">
+        <div class="col">
+          <div class="row">
+            <span class="mr-10">{{ row.name }}</span>
+            <RcStatusBadge
+              v-if="row.prime"
+              class="prime-badge"
+              status="success"
+            >
+              {{ t('providers.hosted.prime') }}
+            </RcStatusBadge>
+          </div>
+          <div
+            v-if="row.description"
+            class="description text-muted text-small"
+          >
+            {{ row.description }}
+          </div>
+        </div>
+      </template>
+    </ResourceTable>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.prime-badge {
+  font-size: 10px;
+  line-height: 15px;
+}
+</style>

package/pages/c/_cluster/settings/brand.vue

@@ -18,7 +18,7 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { setFavIcon } from '@shell/utils/favicon';
 import TabTitle from '@shell/components/TabTitle';
 
-const Color = require('color');
+import Color from 'color';
 
 export default {
   components: {

package/pages/c/_cluster/uiplugins/__tests__/index.test.ts

@@ -164,6 +164,13 @@ describe('page: UI plugins/Extensions', () => {
   });
 
   describe('getFooterItems', () => {
+    it('should return "developer" label for isDeveloper plugins', () => {
+      const plugin = { isDeveloper: true };
+      const items = wrapper.vm.getFooterItems(plugin);
+
+      expect(items[0].labels).toContain('plugins.labels.isDeveloper');
+    });
+
     it('should return "builtin" label for builtin plugins', () => {
       const plugin = { builtin: true };
       const items = wrapper.vm.getFooterItems(plugin);