@rancher/shell 2.0.0 → 3.0.0-rc.1

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

@@ -22,6 +22,7 @@ const defaultStubs = {
   BadgeState:               true,
   Checkbox:                 true,
   ClusterMembershipEditor:  true,
+  ClusterAppearance:        true,
   DrainOptions:             true,
   LabeledInput:             true,
   Labels:                   true,
@@ -52,31 +53,6 @@ const defaultStubs = {
 
 const mockAgentArgs = { 'cloud-provider-name': { options: [], profile: { options: [{ anything: 'yes' }] } } };
 
-const defaultComputed = {
-  showForm() {
-    return true;
-  },
-  versionOptions() {
-    return [
-      {
-        id: 'v1.25.0+rke2r1', value: 'v1.25.0+rke2r1', serverArgs: {}, agentArgs: mockAgentArgs, charts: {}
-      },
-      {
-        id: 'v1.24.0+rke2r1', value: 'v1.24.0+rke2r1', serverArgs: {}, agentArgs: mockAgentArgs, charts: {}
-      },
-      {
-        id: 'v1.23.0+rke2r1', value: 'v1.23.0+rke2r1', serverArgs: {}, agentArgs: mockAgentArgs, charts: {}
-      },
-      {
-        id: 'v1.25.0+k3s1', value: 'v1.25.0+k3s1', serverArgs: {}, agentArgs: mockAgentArgs, charts: {}
-      },
-      {
-        id: 'v1.24.0+k3s1', value: 'v1.24.0+k3s1', serverArgs: {}, agentArgs: mockAgentArgs, charts: {}
-      }
-    ];
-  }
-};
-
 const defaultGetters = {
   currentStore:                      () => 'current_store',
   'management/schemaFor':            jest.fn(),
@@ -117,7 +93,7 @@ describe('component: rke2', () => {
   ])('should allow creation of RKE2 cluster with provider %p if pool machines are missing (%p)', (provider, result) => {
     const k8s = 'v1.25.0+rke2r1';
     const wrapper = mount(rke2, {
-      propsData: {
+      props: {
         mode:  _CREATE,
         value: {
           spec: {
@@ -130,12 +106,16 @@ describe('component: rke2', () => {
         selectedVersion: { agentArgs: mockAgentArgs },
         provider,
       },
-      computed: defaultComputed,
-      mocks:    {
-        ...defaultMocks,
-        $store: { dispatch: () => jest.fn(), getters: defaultGetters },
+
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
+          $plugin: { getDynamic: jest.fn(() => undefined ) }
+        },
+
+        stubs: defaultStubs,
       },
-      stubs: defaultStubs
     });
 
     expect((wrapper.vm as any).validationPassed).toBe(result);
@@ -144,7 +124,7 @@ describe('component: rke2', () => {
   it('should allow creation of K3 clusters if pool machines are missing', () => {
     const k8s = 'v1.25.0+k3s1';
     const wrapper = mount(rke2, {
-      propsData: {
+      props: {
         mode:  _CREATE,
         value: {
           spec: {
@@ -155,13 +135,18 @@ describe('component: rke2', () => {
         },
         provider: 'custom'
       },
-      data:     () => ({ credentialId: 'I am authenticated' }),
-      computed: defaultComputed,
-      mocks:    {
-        ...defaultMocks,
-        $store: { dispatch: () => jest.fn(), getters: defaultGetters },
+
+      data: () => ({ credentialId: 'I am authenticated' }),
+
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
+          $plugin: { getDynamic: jest.fn(() => undefined ) },
+        },
+
+        stubs: defaultStubs,
       },
-      stubs: defaultStubs
     });
 
     expect((wrapper.vm as any).validationPassed).toBe(true);
@@ -170,7 +155,7 @@ describe('component: rke2', () => {
   it('should initialize machine pools with drain before delete true', async() => {
     const k8s = 'v1.25.0+k3s1';
     const wrapper = mount(rke2, {
-      propsData: {
+      props: {
         mode:  _CREATE,
         value: {
           spec: {
@@ -181,13 +166,18 @@ describe('component: rke2', () => {
         },
         provider: 'custom'
       },
-      data:     () => ({ credentialId: 'I am authenticated' }),
-      computed: defaultComputed,
-      mocks:    {
-        ...defaultMocks,
-        $store: { dispatch: () => jest.fn(), getters: defaultGetters },
+
+      data: () => ({ credentialId: 'I am authenticated' }),
+
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
+          $plugin: { getDynamic: jest.fn(() => undefined ) },
+        },
+
+        stubs: defaultStubs,
       },
-      stubs: defaultStubs
     });
 
     await wrapper.vm.initSpecs();
@@ -206,7 +196,7 @@ describe('component: rke2', () => {
     newSpec.rkeConfig.dataDirectories = { k8sDistro: 'my-k8s-distro-path' };
 
     const wrapper = mount(rke2, {
-      propsData: {
+      props: {
         mode:  _CREATE,
         value: {
           spec: {
@@ -218,27 +208,32 @@ describe('component: rke2', () => {
         },
         provider: 'custom'
       },
+
       data: () => ({
         credentialId: 'I am authenticated',
         credential:   { decodedData: { clusterId: 'some-cluster-id' } },
         machinePools: [],
       }),
-      computed: defaultComputed,
-      mocks:    {
-        ...defaultMocks,
-        $store: {
-          // mock secret creation on "createKubeconfigSecret"
-          dispatch: (action: any, opts: any) => {
-            if (action === 'management/create' && opts.type === SECRET) {
-              return { save: () => jest.fn };
-            } else {
-              return jest.fn();
-            }
+
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store: {
+            // mock secret creation on "createKubeconfigSecret"
+            dispatch: (action: any, opts: any) => {
+              if (action === 'management/create' && opts.type === SECRET) {
+                return { save: () => jest.fn };
+              } else {
+                return jest.fn();
+              }
+            },
+            getters: defaultGetters
           },
-          getters: defaultGetters
+          $plugin: { getDynamic: jest.fn(() => undefined ) },
         },
+
+        stubs: defaultStubs,
       },
-      stubs: defaultStubs
     });
 
     // we need to mock the "save" method from the create-edit-view-mixin
@@ -247,7 +242,7 @@ describe('component: rke2', () => {
 
     await wrapper.vm._doSaveOverride(jest.fn());
 
-    expect(wrapper.vm.chartValues[HARVESTER_CLOUD_PROVIDER].cloudConfigPath).toStrictEqual('my-k8s-distro-path/etc/config-files/cloud-provider-config');
+    expect(wrapper.vm.chartValues[`${ HARVESTER_CLOUD_PROVIDER }.cloudConfigPath`]).toStrictEqual('my-k8s-distro-path/etc/config-files/cloud-provider-config');
   });
 
   // TODO: Complete test after implementing fetch https://github.com/rancher/dashboard/issues/9322
@@ -255,7 +250,7 @@ describe('component: rke2', () => {
   describe.skip('should initialize agent configuration values', () => {
     it('adding default values if none', async() => {
       const wrapper = shallowMount(rke2, {
-        propsData: {
+        props: {
           mode:  'create',
           value: {
             spec:        { ...defaultSpec },
@@ -263,19 +258,23 @@ describe('component: rke2', () => {
           },
           provider: 'custom'
         },
-        computed: defaultComputed,
-        mocks:    {
-          ...defaultMocks,
-          $store: {
-            getters:  defaultGetters,
-            dispatch: {
-              'management/request': jest.fn(),
-              'management/find':    jest.fn(),
-              'management/findAll': () => ([]),
-            }
+
+        global: {
+          mocks: {
+            ...defaultMocks,
+            $store: {
+              getters:  defaultGetters,
+              dispatch: {
+                'management/request': jest.fn(),
+                'management/find':    jest.fn(),
+                'management/findAll': () => ([]),
+              }
+            },
+            $plugin: { getDynamic: jest.fn(() => undefined ) },
           },
+
+          stubs: defaultStubs,
         },
-        stubs: defaultStubs
       });
       const defaultAgentConfig = {
         clusterAgentDeploymentCustomization: {
@@ -300,7 +299,7 @@ describe('component: rke2', () => {
 
     it('should display agent configuration tab', async() => {
       const wrapper = shallowMount(rke2, {
-        propsData: {
+        props: {
           mode:  'create',
           value: {
             spec:        { ...defaultSpec },
@@ -308,19 +307,23 @@ describe('component: rke2', () => {
           },
           provider: 'custom'
         },
-        computed: defaultComputed,
-        mocks:    {
-          ...defaultMocks,
-          $store: {
-            getters:  defaultGetters,
-            dispatch: {
-              'management/request': jest.fn(),
-              'management/find':    jest.fn(),
-              'management/findAll': () => ([]),
-            }
+
+        global: {
+          mocks: {
+            ...defaultMocks,
+            $store: {
+              getters:  defaultGetters,
+              dispatch: {
+                'management/request': jest.fn(),
+                'management/find':    jest.fn(),
+                'management/findAll': () => ([]),
+              }
+            },
+            $plugin: { getDynamic: jest.fn(() => undefined ) },
           },
+
+          stubs: defaultStubs,
         },
-        stubs: defaultStubs
       });
       const agent = wrapper.find('[data-testid="rke2-cluster-agent-config"]');
 
@@ -332,4 +335,202 @@ describe('component: rke2', () => {
       expect(agent.element).toBeDefined();
     });
   });
+
+  it.each([
+    ['v1.25.0+k3s1', 'azure', true],
+    ['v1.31.0+k3s1', 'harvester', true],
+    ['v1.29.0+k3s1', 'harvester', false],
+  ])('should set isAzureProviderUnsupported', (k8s, cloudProvider, value) => {
+    const wrapper = mount(rke2, {
+      propsData: {
+        mode:  _CREATE,
+        value: {
+          spec: {
+            ...defaultSpec,
+            kubernetesVersion: k8s
+          },
+          agentConfig: { 'cloud-provider-name': cloudProvider }
+        },
+        provider: 'custom'
+      },
+      data:   () => ({}),
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
+          $plugin: { getDynamic: jest.fn(() => undefined ) },
+        },
+        stubs: defaultStubs
+      }
+    });
+
+    expect((wrapper.vm as any).isAzureProviderUnsupported).toBe(value);
+  });
+
+  it.each([
+    ['edit', 'v1.31.0+k3s1', 'azure', false],
+    ['edit', 'v1.26.0+k3s1', 'azure', false],
+    ['edit', 'v1.28.0+k3s1', 'harvester', false],
+    ['edit', 'v1.28.0+k3s1', 'azure', true],
+    ['create', 'v1.28.0+k3s1', 'azure', false],
+    ['view', 'v1.28.0+k3s1', 'azure', false],
+  ])('should set canAzureMigrateOnEdit', (mode, k8s, liveCloudProvider, value) => {
+    const wrapper = mount(rke2, {
+      propsData: {
+        mode,
+        liveValue: {
+          spec: {
+            ...defaultSpec,
+            kubernetesVersion: k8s
+          },
+          agentConfig: { 'cloud-provider-name': liveCloudProvider }
+        },
+        value: {
+          spec: {
+            ...defaultSpec,
+            kubernetesVersion: k8s
+          },
+          agentConfig: { 'cloud-provider-name': liveCloudProvider }
+        },
+        provider: 'custom'
+      },
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
+          $plugin: { getDynamic: jest.fn(() => undefined ) },
+        },
+        stubs: defaultStubs
+      }
+    });
+
+    expect((wrapper.vm as any).canAzureMigrateOnEdit).toBe(value);
+  });
+
+  it.each([
+    ['', 'v1.32.0+rke2r1', 'amazon', 'v1.32.0+rke2r1'],
+    ['', 'v1.29.0+rke2r1', 'amazon', 'v1.29.0+rke2r1'],
+    ['', 'v1.29.0+rke2r1', 'azure', 'v1.29.0+rke2r1'],
+    ['not', 'v1.31.0+rke2r1', 'azure', undefined],
+  ])('should %p include version %p if Cloud Provider is %p', async(_, k8s, liveCloudProvider, value) => {
+    const wrapper = mount(rke2, {
+      propsData: {
+        mode:  'create',
+        value: {
+          spec: {
+            ...defaultSpec,
+            kubernetesVersion: k8s
+          },
+          agentConfig: { 'cloud-provider-name': liveCloudProvider }
+        },
+        provider: 'custom'
+      },
+      data:   () => ({}),
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
+          $plugin: { getDynamic: jest.fn(() => undefined ) },
+        },
+        stubs: defaultStubs
+      }
+    });
+
+    wrapper.setData({
+      rke2Versions: [{
+        id:         k8s,
+        version:    k8s,
+        serverArgs: true
+      }]
+    });
+
+    expect((wrapper.vm as any).versionOptions[0]?.value).toBe(value);
+  });
+
+  it.each([
+    ['enable', 'v1.28.0+rke2r1', false],
+    ['disable', 'v1.32.0+rke2r1', true],
+  ])('should %p Azure provider option if version is %p', async(_, k8s, value) => {
+    const wrapper = mount(rke2, {
+      propsData: {
+        mode:  'create',
+        value: {
+          spec: {
+            ...defaultSpec,
+            kubernetesVersion: k8s
+          },
+          agentConfig: { 'cloud-provider-name': 'azure' }
+        },
+        provider: 'custom'
+      },
+      data: () => ({
+        agentArgs: {
+          'cloud-provider-name': {
+            options: [
+              'azure',
+              'amazon'
+            ]
+          }
+        }
+      }),
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
+          $plugin: { getDynamic: jest.fn(() => undefined ) },
+        },
+        stubs: defaultStubs
+      }
+    });
+
+    const azureOption = (wrapper.vm as any).cloudProviderOptions.find((o: any) => o.value === 'azure');
+
+    expect(azureOption.disabled).toBe(value);
+  });
+
+  it.each([
+    ['enable', 'azure', 'v1.28.0+rke2r1', false], // azure provider / current
+    ['enable', 'external', 'v1.28.0+rke2r1', false], // external provider
+    ['enable', 'azure', 'v1.26.0+rke2r1', false], // version mismatch
+    ['disable', 'amazon', 'v1.26.0+rke2r1', true],
+    ['enable', '', 'v1.28.0+rke2r1', true], // default provider
+  ])('should %p provider option %p in edit mode if live provider is Azure and 1.27 <= k8s < 1.30', async(_, cloudProvider, k8s, value) => {
+    const wrapper = mount(rke2, {
+      propsData: {
+        mode:  'edit',
+        value: {
+          spec: {
+            ...defaultSpec,
+            kubernetesVersion: k8s
+          },
+          agentConfig: { 'cloud-provider-name': 'azure' }
+        },
+        provider: 'custom'
+      },
+      data: () => ({
+        canAzureMigrateOnEdit: true,
+        agentArgs:             {
+          'cloud-provider-name': {
+            options: [
+              'azure',
+              'amazon',
+              'external'
+            ]
+          }
+        }
+      }),
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
+          $plugin: { getDynamic: jest.fn(() => undefined ) },
+        },
+        stubs: defaultStubs
+      }
+    });
+
+    const azureOption = (wrapper.vm as any).cloudProviderOptions.find((o: any) => o.value === cloudProvider);
+
+    expect(azureOption.disabled).toBe(value);
+  });
 });

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

@@ -110,7 +110,7 @@ export default {
     },
 
     onMembershipUpdate(update) {
-      this.$set(this, 'membershipUpdate', update);
+      this['membershipUpdate'] = update;
     },
 
     hideHarvesterNotice() {
@@ -150,13 +150,14 @@ export default {
 
     <NameNsDescription
       v-if="!isView"
-      v-model="value"
+      :value="value"
       :mode="mode"
       :namespaced="false"
       name-label="cluster.name.label"
       name-placeholder="cluster.name.placeholder"
       description-label="cluster.description.label"
       description-placeholder="cluster.description.placeholder"
+      @update:value="$emit('input', $event)"
     />
 
     <Tabbed :side-tabs="true">
@@ -179,12 +180,14 @@ export default {
         />
       </Tab>
       <AgentEnv
-        v-model="value"
+        :value="value"
         :mode="mode"
+        @update:value="$emit('input', $event)"
       />
       <Labels
-        v-model="value"
+        :value="value"
         :mode="mode"
+        @update:value="$emit('input', $event)"
       />
     </Tabbed>
   </CruResource>

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

@@ -10,7 +10,6 @@ import {
 } 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 { filterAndArrangeCharts } from '@shell/store/catalog';
 import { CATALOG } from '@shell/config/labels-annotations';
@@ -52,6 +51,10 @@ export default {
 
   mixins: [CreateEditView],
 
+  emits: ['set-subtype'],
+
+  inheritAttrs: false,
+
   props: {
     realMode: {
       type:     String,
@@ -113,15 +116,15 @@ export default {
     this.kontainerDrivers = res.kontainerDrivers || [];
 
     if ( !this.value.spec ) {
-      set(this.value, 'spec', {});
+      this.value.spec = {};
     }
 
     if ( !this.value.id ) {
       if ( !this.value.metadata ) {
-        set(this.value, 'metadata', {});
+        this.value.metadata = {};
       }
 
-      set(this.value.metadata, 'namespace', DEFAULT_WORKSPACE);
+      this.value.metadata.namespace = DEFAULT_WORKSPACE;
     }
 
     // For the node drivers, look for custom UI that we can use to show an icon (if not built-in)
@@ -330,6 +333,14 @@ export default {
           });
         });
 
+        if (isElementalActive) {
+          // !this.subType means we are on the /create screen - we only want to show for rke2
+          // if a subType is selected, always add the ELEMENTAL_CLUSTER_PROVIDER type to cover edit scenarios
+          if ((!this.subType && !this.isRke1) || this.subType) {
+            addType(this.$plugin, ELEMENTAL_CLUSTER_PROVIDER, 'custom2', false);
+          }
+        }
+
         if (this.isRke1 ) {
           machineTypes.forEach((type) => {
             const id = type.spec.displayName || type.id;
@@ -346,10 +357,6 @@ export default {
           });
 
           addType(this.$plugin, 'custom', 'custom2', false);
-
-          if (isElementalActive) {
-            addType(this.$plugin, ELEMENTAL_CLUSTER_PROVIDER, 'custom2', false);
-          }
         }
 
         // Add from extensions
@@ -471,6 +478,15 @@ export default {
     firstCustomClusterItem() {
       return this.groupedSubTypes.findIndex((obj) => ['custom', 'custom1', 'custom2'].includes(obj.name));
     },
+
+    localValue: {
+      get() {
+        return this.value;
+      },
+      set(newValue) {
+        this.$emit('update:value', newValue);
+      }
+    },
   },
 
   methods: {
@@ -600,7 +616,7 @@ export default {
     <template #subtypes>
       <div
         v-for="(obj, i) in groupedSubTypes"
-        :key="obj.id"
+        :key="i"
         class="mb-20"
         style="width: 100%;"
       >
@@ -610,7 +626,7 @@ export default {
             class="grouped-type"
           >
             <ToggleSwitch
-              v-model="provisioner"
+              v-model:value="provisioner"
               data-testid="cluster-manager-create-rke-switch"
               class="rke-switch"
               :off-value="_RKE1"
@@ -635,30 +651,33 @@ export default {
 
     <Import
       v-if="isImport"
-      v-model="value"
+      v-model:value="localValue"
       :mode="mode"
       :provider="subType"
+      @update:value="$emit('input', $event)"
     />
     <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"
+        v-model:value="localValue"
         :initial-value="initialValue"
         :live-value="liveValue"
         :mode="mode"
         :provider="subType"
         :provider-config="selectedSubType.providerConfig"
+        @update:value="$emit('input', $event)"
       />
       <Rke2Config
         v-else
-        v-model="value"
+        v-model:value="localValue"
         :initial-value="initialValue"
         :live-value="liveValue"
         :mode="mode"
         :provider="subType"
         :provider-config="selectedSubType.providerConfig"
+        @update:value="$emit('input', $event)"
       />
     </template>