@rancher/shell 0.5.3 → 1.2.0

package/edit/provisioning.cattle.io.cluster/__tests__/Basics.tests.ts

@@ -0,0 +1,237 @@
+import { mount } from '@vue/test-utils';
+import Basics from '@shell/edit/provisioning.cattle.io.cluster/Basics';
+
+const defaultStubs = {
+  Banner:        true,
+  LabeledSelect: true,
+  YamlEditor:    true,
+  Checkbox:      true
+};
+
+const defaultComputed = {
+  showk8s21LegacyWarning() {
+    return false;
+  },
+  profileOptions() {
+    return [{ label: 'anything', value: 'anything' }];
+  }
+};
+
+const mockAgentArgs = { 'cloud-provider-name': { options: [], profile: { options: [{ anything: 'yes' }] } } };
+const mockServerArgs = { disable: {}, cni: { options: [] } };
+
+const rke2Versions =
+  [
+    {
+      id: 'v1.25.0+rke2r1', value: 'v1.25.0+rke2r1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+    },
+    {
+      id: 'v1.24.0+rke2r1', value: 'v1.24.0+rke2r1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+    },
+    {
+      id: 'v1.23.0+rke2r1', value: 'v1.23.0+rke2r1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+    }
+  ];
+const k3sVersions = [
+  {
+    id: 'v1.25.0+k3s1', value: 'v1.25.0+k3s1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+  },
+  {
+    id: 'v1.24.0+k3s1', value: 'v1.24.0+k3s1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+  },
+  {
+    id: 'v1.23.0+k3s1', value: 'v1.23.0+k3s1', serverArgs: mockServerArgs, agentArgs: mockAgentArgs, charts: {}
+  }
+];
+const mockVersionOptions = [...rke2Versions, ...k3sVersions];
+
+const defaultGetters = {
+  currentStore:                     () => 'current_store',
+  'management/schemaFor':           jest.fn(),
+  'current_store/all':              jest.fn(),
+  'i18n/t':                         jest.fn(),
+  'i18n/withFallback':              jest.fn(),
+  'plugins/cloudProviderForDriver': jest.fn()
+};
+
+const defaultMocks = {
+  $route: {
+    name:  'anything',
+    query: { AS: 'yaml' },
+  },
+};
+
+const defaultSpec = {
+  rkeConfig:   { etcd: { disableSnapshots: false }, machineGlobalConfig: { cni: 'calico' } },
+  chartValues: {},
+};
+
+describe('component: Basics', () => {
+  /**
+   * DISCLAIMER ***************************************************************************************
+   * Logs are prevented to avoid polluting the test output.
+   ****************************************************************************************************
+  */
+  // eslint-disable-next-line jest/no-hooks
+  beforeEach(() => {
+    jest.spyOn(console, 'log').mockImplementation(() => { });
+  });
+
+  it.each(mockVersionOptions)('should display PSA option', (k8s) => {
+    const label = 'whatever';
+    const wrapper = mount(Basics, {
+      propsData: {
+        mode:  'create',
+        value: {
+          spec: {
+            ...defaultSpec,
+            defaultPodSecurityAdmissionConfigurationTemplateName: label,
+            kubernetesVersion:                                    k8s.value
+          },
+          agentConfig: { 'cloud-provider-name': '' },
+        },
+        provider:                    'whatever',
+        userChartValues:             {},
+        cisOverride:                 false,
+        cisPsaChangeBanner:          true,
+        allPsas:                     [],
+        needsPsp:                    false,
+        selectedVersion:             k8s,
+        versionOptions:              mockVersionOptions,
+        isHarvesterDriver:           false,
+        isHarvesterIncompatible:     false,
+        showDeprecatedPatchVersions: false,
+        clusterIsAlreadyCreated:     false,
+        isElementalCluster:          false,
+        hasPsaTemplates:             false,
+        isK3s:                       true,
+        haveArgInfo:                 false,
+        showCni:                     true,
+        showCloudProvider:           true,
+        unsupportedCloudProvider:    false,
+        cloudProviderOptions:        [{ label: 'Default - RKE2 Embedded', value: '' }],
+      },
+      computed: defaultComputed,
+      mocks:    {
+        ...defaultMocks,
+        $store: { getters: defaultGetters },
+      },
+      stubs: defaultStubs
+    });
+
+    const select = wrapper.find('[data-testid="rke2-custom-edit-psa"]');
+
+    expect((select.vm as unknown as any).options[0].label).toBe(`${ label } (Current)`);
+  });
+
+  it.each([
+    ['v1.25.0+rke2r1', 'none'],
+    ['v1.24.0+rke2r1', 'default'],
+    ['v1.23.0+rke2r1', 'default'],
+    ['v1.25.0+k3s1', 'none'],
+    ['v1.24.0+k3s1', 'default'],
+    ['v1.23.0+k3s1', 'default'],
+  ])('should display for version %p PSA option label %p', (k8s, partialLabel) => {
+    const label = `cluster.rke2.defaultPodSecurityAdmissionConfigurationTemplateName.option.${ partialLabel }`;
+    const wrapper = mount(Basics, {
+      propsData: {
+        mode:  'create',
+        value: {
+          spec: {
+            ...defaultSpec,
+            defaultPodSecurityAdmissionConfigurationTemplateName: label,
+            kubernetesVersion:                                    k8s
+          },
+          agentConfig: { 'cloud-provider-name': '' },
+        },
+        provider:                    'whatever',
+        userChartValues:             {},
+        cisOverride:                 false,
+        cisPsaChangeBanner:          true,
+        allPsas:                     [],
+        needsPsp:                    false,
+        selectedVersion:             mockVersionOptions[0],
+        versionOptions:              mockVersionOptions,
+        isHarvesterDriver:           false,
+        isHarvesterIncompatible:     false,
+        showDeprecatedPatchVersions: false,
+        clusterIsAlreadyCreated:     false,
+        isElementalCluster:          false,
+        hasPsaTemplates:             false,
+        isK3s:                       true,
+        haveArgInfo:                 false,
+        showCni:                     true,
+        showCloudProvider:           true,
+        unsupportedCloudProvider:    false,
+        cloudProviderOptions:        [{ label: 'Default - RKE2 Embedded', value: '' }],
+      },
+      computed: defaultComputed,
+      mocks:    {
+        ...defaultMocks,
+        $store: { getters: defaultGetters },
+      },
+      stubs: defaultStubs
+    });
+
+    const select = wrapper.find('[data-testid="rke2-custom-edit-psa"]');
+
+    expect((select.vm as unknown as any).options[0].label).toStrictEqual(`${ label } (Current)`);
+  });
+
+  it.each([
+    ['anything', false, true],
+    ['', false, false],
+    ['', true, false],
+  ])('given CIS value as %p and its override as %p, it should set PSA dropdown as disabled %p', (cis, override, disabled) => {
+    const label = 'whatever';
+    const k8s = 'v1.25.0+rke2r1';
+    const wrapper = mount(Basics, {
+      propsData: {
+        mode:  'create',
+        value: {
+          agentConfig: { profile: cis, 'cloud-provider-name': '' },
+          spec:        {
+            ...defaultSpec,
+            defaultPodSecurityAdmissionConfigurationTemplateName: label,
+            kubernetesVersion:                                    k8s
+          }
+        },
+        provider:           'custom',
+        userChartValues:    {},
+        cisPsaChangeBanner: true,
+        allPsas:            [],
+        needsPsp:           false,
+        cisOverride:        override,
+        selectedVersion:    mockVersionOptions[0],
+        versionOptions:     [{
+          value:     k8s,
+          agentArgs: { profile: { options: [cis] } },
+          charts:    {},
+          profile:   { options: [cis] }
+        }],
+        isHarvesterDriver:           false,
+        isHarvesterIncompatible:     false,
+        showDeprecatedPatchVersions: false,
+        clusterIsAlreadyCreated:     false,
+        isElementalCluster:          false,
+        hasPsaTemplates:             true,
+        isK3s:                       true,
+        haveArgInfo:                 false,
+        showCni:                     true,
+        showCloudProvider:           true,
+        unsupportedCloudProvider:    false,
+        cloudProviderOptions:        [{ label: 'Default - RKE2 Embedded', value: '' }],
+      },
+      computed: { ...defaultComputed },
+      mocks:    {
+        ...defaultMocks,
+        $store: { getters: defaultGetters },
+      },
+      stubs: defaultStubs
+    });
+
+    const select = wrapper.find('[data-testid="rke2-custom-edit-psa"]');
+
+    expect((select.vm as unknown as any).disabled).toBe(disabled);
+  });
+});

package/edit/provisioning.cattle.io.cluster/__tests__/{CustomCommand.test.ts → CustomCommand.tests.ts}

@@ -1,9 +1,5 @@
 import { mount } from '@vue/test-utils';
 import CustomCommand from '@shell/edit/provisioning.cattle.io.cluster/CustomCommand.vue';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
-jest.mock('@shell/utils/clipboard', () => {
-  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
-});
 
 describe('component: CustomCommand', () => {
   const token = 'MY_TOKEN';
@@ -39,8 +35,6 @@ describe('component: CustomCommand', () => {
       taints:          [],
       worker:          true,
     }),
-
-    directives: { cleanHtmlDirective }
   });
 
   it('should return linux commands with the right flags based on cluster information', () => {

package/edit/provisioning.cattle.io.cluster/__tests__/DrainOptions.test.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import DrainOptions from '@shell/edit/provisioning.cattle.io.cluster/tabs/upgrade/DrainOptions';
+import DrainOptions from '@shell/edit/provisioning.cattle.io.cluster/DrainOptions.vue';
 import { DefaultProps } from 'vue/types/options';
 import { ExtendedVue, Vue } from 'vue/types/vue';
 

package/edit/provisioning.cattle.io.cluster/__tests__/rke2.test.ts

@@ -39,13 +39,7 @@ const defaultStubs = {
   UnitInput:                true,
   YamlEditor:               true,
   MemberRoles:              true,
-  Basics:                   true,
-  Etcd:                     true,
-  Networking:               true,
-  Upgrade:                  true,
-  Registries:               true,
-  AddOnConfig:              true,
-  Advanced:                 true
+  Basics:                   true
 };
 
 const mockAgentArgs = { 'cloud-provider-name': { options: [], profile: { options: [{ anything: 'yes' }] } } };

package/edit/provisioning.cattle.io.cluster/import.vue

@@ -14,8 +14,8 @@ import { NAME as HARVESTER_MANAGER } from '@shell/config/harvester-manager-types
 import { HARVESTER as HARVESTER_FEATURE, mapFeature } from '@shell/store/features';
 import { addObject } from '@shell/utils/array';
 import { HIDE_DESC, mapPref } from '@shell/store/prefs';
-import Labels from '@shell/edit/provisioning.cattle.io.cluster/Labels';
-import AgentEnv from '@shell/edit/provisioning.cattle.io.cluster/AgentEnv';
+import Labels from './Labels';
+import AgentEnv from './AgentEnv';
 
 const HARVESTER_HIDE_KEY = 'cm-harvester-import';
 

package/edit/provisioning.cattle.io.cluster/index.vue

@@ -6,16 +6,16 @@ import SelectIconGrid from '@shell/components/SelectIconGrid';
 import EmberPage from '@shell/components/EmberPage';
 import { ToggleSwitch } from '@components/Form/ToggleSwitch';
 import {
-  CHART, FROM_CLUSTER, SUB_TYPE, RKE_TYPE, _EDIT, _IMPORT, _CONFIG, _VIEW
+  CHART, FROM_CLUSTER, SUB_TYPE, _EDIT, _IMPORT, _CONFIG, _VIEW
 } from '@shell/config/query-params';
 import { mapGetters } from 'vuex';
 import { sortBy } from '@shell/utils/sort';
 import { set } from '@shell/utils/object';
-import { PROVISIONER, _RKE1, _RKE2 } from '@shell/store/prefs';
+import { mapPref, PROVISIONER, _RKE1, _RKE2 } from '@shell/store/prefs';
 import { filterAndArrangeCharts } from '@shell/store/catalog';
 import { CATALOG } from '@shell/config/labels-annotations';
 import { CAPI, MANAGEMENT, DEFAULT_WORKSPACE } from '@shell/config/types';
-import { mapFeature, RKE2 as RKE2_FEATURE, RKE1_UI } from '@shell/store/features';
+import { mapFeature, RKE2 as RKE2_FEATURE } from '@shell/store/features';
 import { allHash } from '@shell/utils/promise';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 import { ELEMENTAL_PRODUCT_NAME, ELEMENTAL_CLUSTER_PROVIDER } from '../../config/elemental-types';
@@ -163,7 +163,6 @@ export default {
 
   data() {
     const subType = this.$route.query[SUB_TYPE] || null;
-    const rkeType = this.$route.query[RKE_TYPE] || null;
     const chart = this.$route.query[CHART] || null;
     const isImport = this.realMode === _IMPORT;
 
@@ -172,7 +171,6 @@ export default {
       kontainerDrivers: [],
       extensions:       [],
       subType,
-      rkeType,
       chart,
       isImport,
       providerCluster:  null,
@@ -183,32 +181,12 @@ export default {
   computed: {
     ...mapGetters({ allCharts: 'catalog/charts' }),
     ...mapGetters('type-map', ['activeProducts']),
-    // needed to recreate logic on mapPref in order to incorporate the logic around the rkeType query param
-    // https://github.com/rancher/dashboard/issues/6299
-    preferredProvisioner: {
-      get() {
-        if (this.rkeType) {
-          return this.rkeType;
-        }
-
-        return this.$store.getters['prefs/get'](PROVISIONER);
-      },
-      set(value) {
-        this.$store.dispatch('prefs/set', { key: PROVISIONER, value });
-      }
-    },
-    _RKE1: () => _RKE1,
-    _RKE2: () => _RKE2,
+    preferredProvisioner: mapPref(PROVISIONER),
+    _RKE1:                () => _RKE1,
+    _RKE2:                () => _RKE2,
 
     emberLink() {
       if (this.value) {
-        if (this.value.provisioner) {
-          const matchingSubtype = this.subTypes.find((st) => st.id.toLowerCase() === this.value.provisioner.toLowerCase());
-
-          if (matchingSubtype) {
-            this.selectType(matchingSubtype.id, false);
-          }
-        }
         // For custom RKE2 clusters, don't load an Ember page.
         // It should be the dashboard.
         if ( this.value.isRke2 && ((this.value.isCustom && this.mode === _EDIT) || (this.value.isCustom && this.as === _CONFIG && this.mode === _VIEW) || (this.subType || '').toLowerCase() === 'custom')) {
@@ -227,14 +205,12 @@ export default {
           return '';
         }
         if ( this.subType ) {
-          // if driver type has a custom form component, don't load an ember page
-          if (this.selectedSubType.component) {
-            return '';
-          }
           // For RKE1 and hosted Kubernetes Clusters, set the ember link
           // so that we load the page rather than using RKE2 create
-          if (this.selectedSubType?.emberLink) {
-            return this.selectedSubType.emberLink;
+          const selected = this.subTypes.find((s) => s.id === this.subType);
+
+          if (selected?.link) {
+            return selected.link;
           }
 
           this.selectType(this.subType, false);
@@ -251,13 +227,7 @@ export default {
       return '';
     },
 
-    rke2Enabled:   mapFeature(RKE2_FEATURE),
-    rke1UiEnabled: mapFeature(RKE1_UI),
-
-    // todo nb is this info stored anywhere else..?
-    selectedSubType() {
-      return this.subType ? this.subTypes.find((s) => s.id === this.subType) : null;
-    },
+    rke2Enabled: mapFeature(RKE2_FEATURE),
 
     provisioner: {
       get() {
@@ -267,10 +237,6 @@ export default {
           return _RKE1;
         }
 
-        if ( !this.rke1UiEnabled ) {
-          return _RKE2;
-        }
-
         return this.preferredProvisioner;
       },
 
@@ -284,7 +250,7 @@ export default {
     },
 
     isRke2() {
-      return this.value.isRke2 || !this.isRke1;
+      return this.value.isRke2;
     },
 
     templateOptions() {
@@ -301,11 +267,12 @@ export default {
       const getters = this.$store.getters;
       const isImport = this.isImport;
       const isElementalActive = !!this.activeProducts.find((item) => item.name === ELEMENTAL_PRODUCT_NAME);
-      let out = [];
+
+      const out = [];
 
       const templates = this.templateOptions;
       const vueKontainerTypes = getters['plugins/clusterDrivers'];
-      const machineTypes = this.nodeDrivers.filter((x) => x.spec.active && x.state === 'active');
+      const machineTypes = this.nodeDrivers.filter((x) => x.spec.active && x.state === 'active').map((x) => x.spec.displayName || x.id);
 
       this.kontainerDrivers.filter((x) => (isImport ? x.showImport : x.showCreate)).forEach((obj) => {
         if ( vueKontainerTypes.includes(obj.driverName) ) {
@@ -330,18 +297,19 @@ export default {
         });
 
         if (this.isRke1 ) {
-          machineTypes.forEach((type) => {
-            const id = type.spec.displayName || type.id;
-
-            addType(id, _RKE1, false, `/g/clusters/add/launch/${ id }`, this.iconClasses[id], type);
+          machineTypes.forEach((id) => {
+            addType(id, 'rke1', false, `/g/clusters/add/launch/${ id }`, this.iconClasses[id]);
           });
 
           addType('custom', 'custom1', false, '/g/clusters/add/launch/custom');
         } else {
-          machineTypes.forEach((type) => {
-            const id = type.spec.displayName || type.id;
+          machineTypes.forEach((id) => {
+            addType(id, 'rke2', false);
+          });
 
-            addType(id, _RKE2, false, null, undefined, type);
+          // Add from extensions
+          this.extensions.forEach((ext) => {
+            addExtensionType(ext, getters);
           });
 
           addType('custom', 'custom2', false);
@@ -350,22 +318,6 @@ export default {
             addType(ELEMENTAL_CLUSTER_PROVIDER, 'custom2', false);
           }
         }
-
-        // Add from extensions
-        this.extensions.forEach((ext) => {
-          // if the rke toggle is set to rke1, don't add extensions that specify rke2 group
-          // default group is rke2
-          if (!this.isRke2 && (ext.group === _RKE2 || !ext.group)) {
-            return;
-          }
-          // Do not show the extension provisioner on the import cluster page unless its explicitly set to do so
-          if (isImport && !ext.showImport) {
-            return;
-          }
-          // Allow extensions to overwrite provisioners with the same id
-          out = out.filter((type) => type.id !== ext.id);
-          addExtensionType(ext, getters);
-        });
       }
 
       return out;
@@ -386,17 +338,16 @@ export default {
           description: ext.description,
           icon,
           iconClass,
-          group:       ext.group || _RKE2,
+          group:       ext.group || 'rke2',
           disabled:    ext.disabled || false,
           link:        ext.link,
-          tag:         ext.tag,
-          component:   ext.component
+          tag:         ext.tag
         };
 
         out.push(subtype);
       }
 
-      function addType(id, group, disabled = false, emberLink = null, iconClass = undefined, providerConfig = undefined) {
+      function addType(id, group, disabled = false, link = null, iconClass = undefined) {
         const label = getters['i18n/withFallback'](`cluster.provider."${ id }"`, null, id);
         const description = getters['i18n/withFallback'](`cluster.providerDescription."${ id }"`, null, '');
         const tag = '';
@@ -421,9 +372,8 @@ export default {
           iconClass,
           group,
           disabled,
-          emberLink,
-          tag,
-          providerConfig
+          link,
+          tag
         };
 
         out.push(subtype);
@@ -535,13 +485,8 @@ export default {
 
         return;
       }
-      if (obj.link) {
-        this.$router.push(obj.link);
 
-        return;
-      }
-
-      this.$router.applyQuery({ [SUB_TYPE]: id, [RKE_TYPE]: this.preferredProvisioner });
+      this.$router.applyQuery({ [SUB_TYPE]: id });
       this.selectType(id);
     },
 
@@ -600,16 +545,16 @@ export default {
       >
         <h4>
           <div
-            v-if="showRkeToggle(i) && rke1UiEnabled"
+            v-if="showRkeToggle(i)"
             class="grouped-type"
           >
             <ToggleSwitch
               v-model="provisioner"
               data-testid="cluster-manager-create-rke-switch"
               class="rke-switch"
-              :off-value="_RKE1"
+              off-value="rke1"
               :off-label="t('cluster.toggle.v1')"
-              :on-value="_RKE2"
+              on-value="rke2"
               :on-label="t('cluster.toggle.v2')"
             />
           </div>
@@ -633,28 +578,14 @@ export default {
       :mode="mode"
       :provider="subType"
     />
-    <template v-else-if="subType">
-      <!-- allow extensions to provide their own cluster provisioning form -->
-      <component
-        :is="selectedSubType.component"
-        v-if="selectedSubType && selectedSubType.component"
-        v-model="value"
-        :initial-value="initialValue"
-        :live-value="liveValue"
-        :mode="mode"
-        :provider="subType"
-        :provider-config="selectedSubType.providerConfig"
-      />
-      <Rke2Config
-        v-else
-        v-model="value"
-        :initial-value="initialValue"
-        :live-value="liveValue"
-        :mode="mode"
-        :provider="subType"
-        :provider-config="selectedSubType.providerConfig"
-      />
-    </template>
+    <Rke2Config
+      v-else-if="subType"
+      v-model="value"
+      :initial-value="initialValue"
+      :live-value="liveValue"
+      :mode="mode"
+      :provider="subType"
+    />
 
     <template
       v-if="subType"