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

package/chart/__tests__/rancher-monitoring-dashboards-index.test.ts

@@ -0,0 +1,269 @@
+import { shallowMount, flushPromises } from '@vue/test-utils';
+import RancherMonitoringDashboards from '@shell/chart/rancher-monitoring-dashboards/index.vue';
+
+// The component keeps a module-level Map of `chartName -> last selected
+// clusterType.id` so it can restore the user's pick after a Form → YAML → Form
+// remount. To stop this cache from leaking between tests we generate a unique
+// chart name per test.
+let chartNameCounter = 0;
+const uniqueChartName = (prefix = 'chart') => `${ prefix }-${ ++chartNameCounter }`;
+
+describe('rancher-monitoring-dashboards: index', () => {
+  const createWrapper = (
+    {
+      provider = 'rke2',
+      value = {} as Record<string, any>,
+      chart,
+      mode = 'create',
+    }: {
+      provider?: string;
+      value?: Record<string, any>;
+      chart?: Record<string, any>;
+      mode?: string;
+    } = {}
+  ) => {
+    return shallowMount(RancherMonitoringDashboards as any, {
+      props: {
+        value,
+        chart: chart ?? { chartName: uniqueChartName() },
+        mode,
+      },
+      global: {
+        mocks: {
+          $store: {
+            getters: {
+              currentCluster: { status: { provider } },
+              'i18n/t':       (k: string) => k,
+              t:              (k: string) => k,
+            },
+          },
+          t: (k: string) => k,
+        },
+        stubs: { LabeledSelect: true },
+      },
+    });
+  };
+
+  describe('initial cluster type selection', () => {
+    it.each([
+      ['aks'],
+      ['eks'],
+      ['gke'],
+      ['k3s'],
+      ['kubeadm'],
+      ['rke2'],
+    ])('defaults clusterType to the provider %s', (provider) => {
+      const wrapper = createWrapper({ provider });
+
+      expect((wrapper.vm as any).clusterType.id).toBe(provider);
+    });
+
+    it('falls back to "other" when the provider does not match any cluster type', () => {
+      const wrapper = createWrapper({ provider: 'unknown-provider' });
+
+      expect((wrapper.vm as any).clusterType.id).toBe('other');
+    });
+
+    it('lowercases the provider before matching', () => {
+      const wrapper = createWrapper({ provider: 'RKE2' });
+
+      expect((wrapper.vm as any).clusterType.id).toBe('rke2');
+    });
+  });
+
+  describe('applyClusterTypeValues', () => {
+    it('sets k3sServer.enabled=true and etcd.enabled=false for k3s', async() => {
+      const value: Record<string, any> = {};
+
+      createWrapper({ provider: 'k3s', value });
+      await flushPromises();
+
+      expect(value.k3sServer.enabled).toBe(true);
+      expect(value.etcd.enabled).toBe(false);
+    });
+
+    it.each([
+      ['rke2'],
+      ['eks'],
+      ['kubeadm'],
+      ['unknown-provider'],
+    ])('sets etcd.enabled=true and k3sServer.enabled=false for non-k3s provider %s', async(provider) => {
+      const value: Record<string, any> = {};
+
+      createWrapper({ provider, value });
+      await flushPromises();
+
+      expect(value.etcd.enabled).toBe(true);
+      expect(value.k3sServer.enabled).toBe(false);
+    });
+
+    it('creates the etcd and k3sServer objects when missing on value', async() => {
+      const value: Record<string, any> = {};
+
+      createWrapper({ provider: 'rke2', value });
+      await flushPromises();
+
+      expect(value.etcd).toStrictEqual({ enabled: true });
+      expect(value.k3sServer).toStrictEqual({ enabled: false });
+    });
+
+    it('preserves unrelated fields on value', async() => {
+      const value: Record<string, any> = {
+        global: { foo: 'bar' },
+        etcd:   { extraField: 'keep-me' },
+      };
+
+      createWrapper({ provider: 'k3s', value });
+      await flushPromises();
+
+      expect(value.global).toStrictEqual({ foo: 'bar' });
+      expect(value.etcd.extraField).toBe('keep-me');
+      expect(value.etcd.enabled).toBe(false);
+    });
+
+    it('flips values when the user changes the selection', async() => {
+      const value: Record<string, any> = {};
+      const wrapper = createWrapper({ provider: 'rke2', value });
+
+      await flushPromises();
+      expect(value.etcd.enabled).toBe(true);
+      expect(value.k3sServer.enabled).toBe(false);
+
+      const k3sOption = (wrapper.vm as any).clusterTypes.find((c: any) => c.id === 'k3s');
+
+      (wrapper.vm as any).clusterType = k3sOption;
+      await flushPromises();
+
+      expect(value.etcd.enabled).toBe(false);
+      expect(value.k3sServer.enabled).toBe(true);
+    });
+  });
+
+  describe('watch: clusterType', () => {
+    it('ignores empty cluster type and does not mutate value', async() => {
+      const value: Record<string, any> = {};
+      const wrapper = createWrapper({ provider: 'rke2', value });
+
+      await flushPromises();
+
+      const snapshot = JSON.stringify(value);
+
+      (wrapper.vm as any).clusterType = null;
+      await flushPromises();
+
+      expect(JSON.stringify(value)).toBe(snapshot);
+    });
+  });
+
+  describe('cached selection across remounts', () => {
+    it('restores the last user selection when the same chart remounts', async() => {
+      const chart = { chartName: uniqueChartName('same-chart') };
+
+      const first = createWrapper({
+        provider: 'rke2', value: {}, chart
+      });
+
+      await flushPromises();
+      expect((first.vm as any).clusterType.id).toBe('rke2');
+
+      const k3sOption = (first.vm as any).clusterTypes.find((c: any) => c.id === 'k3s');
+
+      (first.vm as any).clusterType = k3sOption;
+      await flushPromises();
+      first.unmount();
+
+      // Simulate a remount on the same chart (e.g. user toggled to YAML and back).
+      const second = createWrapper({
+        provider: 'rke2',
+        value:    { etcd: { enabled: false }, k3sServer: { enabled: true } },
+        chart,
+      });
+
+      expect((second.vm as any).clusterType.id).toBe('k3s');
+    });
+
+    it('preserves a non-k3s selection across remounts (the case value-derivation alone cannot recover)', async() => {
+      const chart = { chartName: uniqueChartName('non-k3s-pick') };
+
+      const first = createWrapper({
+        provider: 'k3s', value: {}, chart
+      });
+
+      await flushPromises();
+      expect((first.vm as any).clusterType.id).toBe('k3s');
+
+      const rke2Option = (first.vm as any).clusterTypes.find((c: any) => c.id === 'rke2');
+
+      (first.vm as any).clusterType = rke2Option;
+      await flushPromises();
+      first.unmount();
+
+      // Both rke2 and the k3s-provider default would write the same value
+      // object, so derivation from `value` alone cannot tell them apart — the
+      // module-level cache is the only thing that keeps "rke2" here.
+      const second = createWrapper({
+        provider: 'k3s',
+        value:    { etcd: { enabled: true }, k3sServer: { enabled: false } },
+        chart,
+      });
+
+      expect((second.vm as any).clusterType.id).toBe('rke2');
+    });
+
+    it('does not leak a selection across different chart names', async() => {
+      const first = createWrapper({
+        provider: 'rke2',
+        value:    {},
+        chart:    { chartName: uniqueChartName('chart-a') },
+      });
+
+      await flushPromises();
+
+      const k3sOption = (first.vm as any).clusterTypes.find((c: any) => c.id === 'k3s');
+
+      (first.vm as any).clusterType = k3sOption;
+      await flushPromises();
+      first.unmount();
+
+      const second = createWrapper({
+        provider: 'rke2',
+        value:    {},
+        chart:    { chartName: uniqueChartName('chart-b') },
+      });
+
+      // Different cache key, so chart-b should still default from its provider.
+      expect((second.vm as any).clusterType.id).toBe('rke2');
+    });
+
+    it('uses chart.name as the cache key when chartName is absent', async() => {
+      const chart = { name: uniqueChartName('fallback-name') };
+
+      const first = createWrapper({
+        provider: 'rke2', value: {}, chart
+      });
+
+      await flushPromises();
+
+      const k3sOption = (first.vm as any).clusterTypes.find((c: any) => c.id === 'k3s');
+
+      (first.vm as any).clusterType = k3sOption;
+      await flushPromises();
+      first.unmount();
+
+      const second = createWrapper({
+        provider: 'rke2', value: {}, chart
+      });
+
+      expect((second.vm as any).clusterType.id).toBe('k3s');
+    });
+  });
+
+  describe('clusterTypes data', () => {
+    it('sorts cluster types by id for the dropdown', () => {
+      const wrapper = createWrapper();
+      const ids = (wrapper.vm as any).clusterTypes.map((c: any) => c.id);
+
+      expect(ids).toStrictEqual([...ids].sort());
+    });
+  });
+});

package/chart/rancher-monitoring-dashboards/index.vue

@@ -0,0 +1,155 @@
+<script>
+import { mapGetters } from 'vuex';
+import isEmpty from 'lodash/isEmpty';
+import sortBy from 'lodash/sortBy';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { findBy } from '@shell/utils/array';
+
+// Survives Form → YAML → Form tab switches (which unmount/remount this
+// component) because the module is loaded once. Keyed by chart name so a
+// different chart's install doesn't restore a stale selection.
+const cachedSelections = new Map();
+
+const CLUSTER_TYPES = [
+  {
+    group: 'managed',
+    id:    'aks',
+    label: 'cluster.provider.azureaks',
+  },
+  {
+    group: 'managed',
+    id:    'eks',
+    label: 'cluster.provider.amazoneks',
+  },
+  {
+    group: 'managed',
+    id:    'gke',
+    label: 'cluster.provider.googlegke',
+  },
+  {
+    group: 'k3s',
+    id:    'k3s',
+    label: 'cluster.provider.k3s',
+  },
+  {
+    group: 'kubeadm',
+    id:    'kubeadm',
+    label: 'cluster.provider.kubeAdmin',
+  },
+  {
+    group: 'other',
+    id:    'other',
+    label: 'cluster.provider.other',
+  },
+  {
+    group: 'rke',
+    id:    'rke2',
+    label: 'cluster.provider.rke2',
+  },
+];
+
+export default {
+  emits: ['input'],
+
+  components: { LabeledSelect },
+
+  props: {
+    chart: {
+      type:    Object,
+      default: () => ({}),
+    },
+
+    mode: {
+      type:    String,
+      default: 'create',
+    },
+
+    value: {
+      type:    Object,
+      default: () => ({}),
+    },
+  },
+
+  data() {
+    return {
+      clusterType:  null,
+      clusterTypes: sortBy(CLUSTER_TYPES, 'id'),
+    };
+  },
+
+  computed: {
+    ...mapGetters(['currentCluster']),
+    provider() {
+      return this.currentCluster.status.provider.toLowerCase();
+    },
+    cacheKey() {
+      return this.chart?.chartName || this.chart?.name || '__default__';
+    },
+  },
+
+  watch: {
+    clusterType(clusterType) {
+      if (isEmpty(clusterType)) {
+        return;
+      }
+
+      cachedSelections.set(this.cacheKey, clusterType.id);
+      this.applyClusterTypeValues(clusterType);
+    },
+  },
+
+  created() {
+    const cachedId = cachedSelections.get(this.cacheKey);
+    const cached = cachedId ? findBy(this.clusterTypes, 'id', cachedId) : null;
+
+    if (cached) {
+      this.clusterType = cached;
+
+      return;
+    }
+
+    const matched = findBy(this.clusterTypes, 'id', this.provider);
+
+    this.clusterType = matched || findBy(this.clusterTypes, 'id', 'other');
+  },
+
+  methods: {
+    applyClusterTypeValues(clusterType) {
+      const isK3s = clusterType.group === 'k3s';
+
+      if (!this.value.etcd) {
+        this.value.etcd = {};
+      }
+      if (!this.value.k3sServer) {
+        this.value.k3sServer = {};
+      }
+
+      this.value.etcd.enabled = !isK3s;
+      this.value.k3sServer.enabled = isK3s;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="config-monitoring-dashboards-container">
+    <div class="row">
+      <div class="col span-6">
+        <LabeledSelect
+          v-model:value="clusterType"
+          :label="t('monitoring.clusterType.label')"
+          :placeholder="t('monitoring.clusterType.placeholder')"
+          :localized-label="true"
+          :options="clusterTypes"
+          :mode="mode"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.config-monitoring-dashboards-container {
+  padding: 10px 0;
+}
+</style>

package/cloud-credential/__tests__/generic.test.ts

@@ -0,0 +1,132 @@
+import { shallowMount } from '@vue/test-utils';
+import Generic, { INPUT_TYPES } from '@shell/cloud-credential/generic.vue';
+import { SCHEMA } from '@shell/config/types';
+
+const DRIVER_NAME = 'testdriver';
+const CONFIG_ID = `testdrivercredentialconfig`;
+
+/**
+ * Build a normanSchema whose resourceFields include one field per INPUT_TYPE
+ * plus a plain "string" field (which should fall back to "text").
+ */
+const buildResourceFields = () => {
+  const fields: Record<string, { type: string }> = {};
+
+  INPUT_TYPES.forEach((t) => {
+    fields[`${ t }Field`] = { type: t };
+  });
+  fields.stringField = { type: 'string' };
+
+  return fields;
+};
+
+const normanSchema = { resourceFields: buildResourceFields() };
+
+const mockedStore = () => ({
+  getters: {
+    'i18n/t':                           (key: string) => key,
+    t:                                  (key: string) => key,
+    'plugins/credentialFieldForDriver': () => DRIVER_NAME,
+    'plugins/fieldNamesForDriver':      () => [],
+  },
+  dispatch: jest.fn((_action: string, args: any) => {
+    if (args?.type === SCHEMA && args?.id === CONFIG_ID) {
+      return Promise.resolve(normanSchema);
+    }
+
+    return Promise.resolve(null);
+  }),
+});
+
+const mountGeneric = () => {
+  const store = mockedStore();
+  const value = {
+    decodedData: {} as Record<string, string>,
+    setData:     jest.fn(),
+  };
+
+  return shallowMount(Generic, {
+    props: {
+      driverName: DRIVER_NAME,
+      value,
+      mode:       'edit',
+    },
+    global: {
+      mocks: {
+        $store:      store,
+        $fetchState: { pending: false },
+      },
+    },
+    data() {
+      return {
+        normanSchema,
+        keyOptions: Object.keys(normanSchema.resourceFields),
+      } as any;
+    },
+  });
+};
+
+describe('generic cloud credential', () => {
+  describe('typeForField', () => {
+    it.each(INPUT_TYPES)('should return "%s" for a field with type "%s"', (inputType) => {
+      const wrapper = mountGeneric();
+
+      expect((wrapper.vm as any).typeForField(`${ inputType }Field`)).toBe(inputType);
+    });
+
+    it('should fall back to "text" for a field type not in INPUT_TYPES', () => {
+      const wrapper = mountGeneric();
+
+      expect((wrapper.vm as any).typeForField('stringField')).toBe('text');
+    });
+
+    it('should fall back to "text" when no normanSchema could be located', () => {
+      const store = {
+        ...mockedStore(),
+        dispatch: jest.fn(() => Promise.resolve(null)),
+      };
+
+      const wrapper = shallowMount(Generic, {
+        props: {
+          driverName: DRIVER_NAME,
+          value:      { decodedData: {}, setData: jest.fn() },
+          mode:       'edit',
+        },
+        global: {
+          mocks: {
+            $store:      store,
+            $fetchState: { pending: false },
+          },
+        },
+        data() {
+          return { normanSchema: null, keyOptions: [] };
+        },
+      });
+
+      expect((wrapper.vm as any).typeForField('passwordField')).toBe('text');
+      expect((wrapper.vm as any).typeForField('cronField')).toBe('text');
+      expect((wrapper.vm as any).typeForField('anyField')).toBe('text');
+    });
+  });
+
+  describe('LabeledInput rendering', () => {
+    it('should render a LabeledInput inside the KeyValue value slot', () => {
+      const wrapper = mountGeneric();
+      const keyValue = wrapper.findComponent({ name: 'KeyValue' });
+
+      expect(keyValue.exists()).toBe(true);
+
+      // The component registers LabeledInput and passes typeForField via the slot template
+      expect((wrapper.vm as any).$options.components.LabeledInput).toBeDefined();
+    });
+
+    it('should pass typeForField result as the type prop to LabeledInput', () => {
+      const wrapper = mountGeneric();
+
+      // Validate the integration: typeForField returns the correct type for each INPUT_TYPE field
+      INPUT_TYPES.forEach((inputType) => {
+        expect((wrapper.vm as any).typeForField(`${ inputType }Field`)).toBe(inputType);
+      });
+    });
+  });
+});

package/cloud-credential/generic.vue

@@ -5,13 +5,24 @@ import { Banner } from '@components/Banner';
 import { simplify, iffyFields, likelyFields } from '@shell/store/plugins';
 import Loading from '@shell/components/Loading';
 import { SCHEMA } from '@shell/config/types';
+import { LabeledInput } from '@components/Form/LabeledInput';
+
+export const INPUT_TYPES = [
+  'number',
+  'password',
+  'text',
+];
 
 export default {
   emits: ['validationChanged'],
 
   components: {
-    KeyValue, Banner, Loading
+    KeyValue,
+    Banner,
+    Loading,
+    LabeledInput
   },
+
   mixins: [CreateEditView],
 
   props: {
@@ -60,6 +71,7 @@ export default {
     return {
       errors:       null,
       normanSchema: null,
+      keyOptions:   [],
     };
   },
 
@@ -72,7 +84,14 @@ export default {
   methods: {
     update(val) {
       this.value.setData(val);
-    }
+    },
+
+    typeForField(fieldName = '') {
+      const fieldSchema = this.normanSchema?.resourceFields?.[fieldName] || {};
+      const fieldType = fieldSchema.type || '';
+
+      return INPUT_TYPES.includes(fieldType) ? fieldType : 'text';
+    },
   },
 
   computed: {
@@ -103,6 +122,17 @@ export default {
       :remove-allowed="!hasSupport"
       :initial-empty-row="true"
       @update:value="update"
-    />
+    >
+      <template #value="{row, mode, queueUpdate}">
+        <LabeledInput
+          v-model:value="row.value"
+          :mode="mode"
+          :type="typeForField(row.key)"
+          :aria-label="row.key || t('generic.value')"
+          placeholder-key="keyValue.valuePlaceholder"
+          @update:value="queueUpdate"
+        />
+      </template>
+    </KeyValue>
   </div>
 </template>

package/components/EtcdInfoBanner.vue

@@ -3,23 +3,13 @@ import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import { mapGetters } from 'vuex';
 import { hasLeader, leaderChanges, failedProposals } from '@shell/utils/grafana';
-import { CATALOG } from '@shell/config/types';
+import { fetchMonitoringVersion } from '@shell/utils/monitoring';
 
 export default {
   components: { Banner, Loading },
   async fetch() {
     const inStore = this.$store.getters['currentProduct'].inStore;
-    let monitoringVersion = '';
-
-    if (this.$store.getters[`${ inStore }/canList`](CATALOG.APP)) {
-      try {
-        const res = await this.$store.dispatch(`${ inStore }/find`, { type: CATALOG.APP, id: 'cattle-monitoring-system/rancher-monitoring' });
-
-        monitoringVersion = res?.currentVersion;
-      } catch (err) {
-
-      }
-    }
+    const monitoringVersion = await fetchMonitoringVersion(this.$store, inStore);
 
     const leader = await hasLeader(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
 

package/components/GrafanaDashboard.vue

@@ -2,7 +2,7 @@
 import Loading from '@shell/components/Loading';
 import { Banner } from '@components/Banner';
 import { computeDashboardUrl } from '@shell/utils/grafana';
-import { CATALOG } from '@shell/config/types';
+import { fetchMonitoringVersion } from '@shell/utils/monitoring';
 
 export default {
   components: { Banner, Loading },
@@ -41,13 +41,7 @@ export default {
   async fetch() {
     const inStore = this.$store.getters['currentProduct'].inStore;
 
-    if (this.$store.getters[`${ inStore }/canList`](CATALOG.APP)) {
-      try {
-        const res = await this.$store.dispatch(`${ inStore }/find`, { type: CATALOG.APP, id: 'cattle-monitoring-system/rancher-monitoring' });
-
-        this.monitoringVersion = res?.currentVersion;
-      } catch (err) {}
-    }
+    this.monitoringVersion = await fetchMonitoringVersion(this.$store, inStore);
   },
   data() {
     return {