EKS: fix node group versioning and name input (rancher#11267)

* fix resource tags not being set

* fix input mode when pool is being added to provisioned cluster

* add node group version inputs and tests

* fix lint

* disable k8s checkbox in view mode

pkg/eks/components/CruEKS.vue

@@ -60,6 +60,7 @@ export const DEFAULT_NODE_GROUP_CONFIG = {
   tags:                 {},
   type:                 'nodeGroup',
   userData:             '',
+  _isNew:               true,
 };
 
 const DEFAULT_EKS_CONFIG = {
@@ -250,7 +251,11 @@ export default defineComponent({
     },
 
     'config.kubernetesVersion'(neu) {
-      this.nodeGroups.forEach((group: EKSNodeGroup) => this.$set(group, 'version', neu));
+      this.nodeGroups.forEach((group: EKSNodeGroup) => {
+        if (group._isNew) {
+          this.$set(group, 'version', neu);
+        }
+      });
     }
   },
 
@@ -601,9 +606,13 @@ export default defineComponent({
             :max-size.sync="node.maxSize"
             :request-spot-instances.sync="node.requestSpotInstances"
             :labels.sync="node.labels"
+            :version.sync="node.version"
+            :cluster-version="config.kubernetesVersion"
+            :original-cluster-version="originalVersion"
             :region="config.region"
             :amazon-credential-secret="config.amazonCredentialSecret"
             :is-new-or-unprovisioned="isNewOrUnprovisioned"
+            :pool-is-new="node._isNew"
             :mode="mode"
             :instance-type-options="instanceTypeOptions"
             :spot-instance-type-options="spotInstanceTypeOptions"

pkg/eks/components/NodeGroup.vue

@@ -138,6 +138,22 @@ export default defineComponent({
       type:    Object,
       default: () => {}
     },
+
+    version: {
+      type:    String,
+      default: ''
+    },
+
+    clusterVersion: {
+      type:    String,
+      default: ''
+    },
+
+    originalClusterVersion: {
+      type:    String,
+      default: ''
+    },
+
     mode: {
       type:    String,
       default: _EDIT
@@ -151,6 +167,11 @@ export default defineComponent({
       default: true
     },
 
+    poolIsNew: {
+      type:    Boolean,
+      default: false
+    },
+
     instanceTypeOptions: {
       type:    Array,
       default: () => []
@@ -202,6 +223,7 @@ export default defineComponent({
     const t = store.getters['i18n/t'];
 
     return {
+      originalNodeVersion:   this.version,
       defaultTemplateOption: { LaunchTemplateName: t('eks.defaultCreateOne') } as AWS.LaunchTemplate,
 
       defaultNodeRoleOption:          { RoleName: t('eks.defaultCreateOne') },
@@ -343,14 +365,43 @@ export default defineComponent({
 
     userDataPlaceholder() {
       return DEFAULT_USER_DATA;
+    },
+
+    poolIsUnprovisioned() {
+      return this.isNewOrUnprovisioned || this.poolIsNew;
+    },
+
+    clusterWillUpgrade() {
+      return this.clusterVersion !== this.originalClusterVersion;
+    },
+
+    nodeCanUpgrade() {
+      return !this.clusterWillUpgrade && this.originalNodeVersion !== this.clusterVersion && !this.poolIsNew;
+    },
+
+    willUpgrade: {
+      get() {
+        return this.nodeCanUpgrade && this.version === this.clusterVersion;
+      },
+      set(neu: boolean) {
+        if (neu) {
+          this.$emit('update:version', this.clusterVersion);
+        } else {
+          this.$emit('update:version', this.originalNodeVersion);
+        }
+      }
+    },
+
+    isView() {
+      return this.mode === _VIEW;
     }
   },
 
   methods: {
     async fetchLaunchTemplateVersionInfo(launchTemplate: AWS.LaunchTemplate) {
       const { region, amazonCredentialSecret } = this;
 
-      if (!region || !amazonCredentialSecret || this.mode === _VIEW) {
+      if (!region || !amazonCredentialSecret || this.isView) {
         return;
       }
       const store = this.$store as Store<any>;
@@ -447,7 +498,7 @@ export default defineComponent({
           :value="nodegroupName"
           label-key="eks.nodeGroups.name.label"
           :mode="mode"
-          :disabled="!isNewOrUnprovisioned"
+          :disabled="!poolIsUnprovisioned"
           :rules="rules.nodegroupName"
           data-testid="eks-nodegroup-name"
           required
@@ -463,7 +514,7 @@ export default defineComponent({
           :options="[defaultNodeRoleOption, ...ec2Roles]"
           option-label="RoleName"
           option-key="Arn"
-          :disabled="!isNewOrUnprovisioned"
+          :disabled="!poolIsUnprovisioned"
           :loading="loadingRoles"
         />
       </div>
@@ -522,6 +573,7 @@ export default defineComponent({
           :read-allowed="false"
           :as-map="true"
           :value="tags"
+          data-testid="eks-resource-tags-input"
           @input="$emit('update:tags', $event)"
         >
           <template #title>
@@ -532,7 +584,29 @@ export default defineComponent({
     </div>
     <hr class="mb-20">
     <h3>Node Template Details</h3>
+    <Banner
+      v-if="clusterWillUpgrade && !poolIsUnprovisioned"
+      color="info"
+      label-key="eks.nodeGroups.kubernetesVersion.clusterWillUpgrade"
+      data-testid="eks-version-upgrade-banner"
+    />
     <div class="row mb-10">
+      <div class="col span-4 upgrade-version">
+        <LabeledInput
+          v-if="!nodeCanUpgrade"
+          label-key="eks.nodeGroups.kubernetesVersion.label"
+          :disabled="true"
+          :value="version"
+          data-testid="eks-version-display"
+        />
+        <Checkbox
+          v-else
+          v-model="willUpgrade"
+          :label="t('eks.nodeGroups.kubernetesVersion.upgrade', {from: originalNodeVersion, to: clusterVersion})"
+          data-testid="eks-version-upgrade-checkbox"
+          :disabled="isView"
+        />
+      </div>
       <div class="col span-4">
         <LabeledSelect
           v-model="selectedLaunchTemplate"
@@ -541,7 +615,7 @@ export default defineComponent({
           :options="launchTemplateOptions"
           option-label="LaunchTemplateName"
           option-key="LaunchTemplateId"
-          :disabled="!isNewOrUnprovisioned"
+          :disabled="!poolIsUnprovisioned"
           :loading="loadingLaunchTemplates"
           data-testid="eks-launch-template-dropdown"
         />
@@ -691,6 +765,7 @@ export default defineComponent({
           :disabled="hasUserLaunchTemplate"
           :read-allowed="false"
           :as-map="true"
+          @input="$emit('update:resourceTags', $event)"
         >
           <template #title>
             <label class="text-label">{{ t('eks.nodeGroups.resourceTags.label') }}</label>
@@ -707,4 +782,9 @@ export default defineComponent({
     float: right;
   }
 }
+
+.upgrade-version {
+  display: flex;
+  align-items: center;
+}
 </style>

pkg/eks/components/__tests__/CruEKS.test.ts

@@ -1,6 +1,6 @@
 import flushPromises from 'flush-promises';
 import { shallowMount, Wrapper } from '@vue/test-utils';
-import { EKSConfig } from 'types';
+import { EKSConfig, EKSNodeGroup } from 'types';
 import CruEKS from '@pkg/eks/components/CruEKS.vue';
 
 const mockedValidationMixin = {
@@ -116,4 +116,34 @@ describe('eKS provisioning form', () => {
     expect(wrapper.vm.normanCluster.name).toStrictEqual('def');
     expect(nameInput.props().value).toStrictEqual('def');
   });
+
+  it('should set _isNew to true when a pool is added', async() => {
+    const wrapper = shallowMount(CruEKS, {
+      propsData: { value: {}, mode: 'edit' },
+      ...requiredSetup()
+    });
+
+    wrapper.setData({ nodeGroups: [{ name: 'abc' }] });
+    wrapper.vm.addGroup();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.nodeGroups).toHaveLength(2);
+    expect(wrapper.vm.nodeGroups.filter((group: EKSNodeGroup) => !group._isNew)).toHaveLength(1);
+  });
+
+  it('should update new node pools\' version when cluster version is updated', async() => {
+    const wrapper = shallowMount(CruEKS, {
+      propsData: { value: {}, mode: 'edit' },
+      ...requiredSetup()
+    });
+
+    wrapper.setData({ nodeGroups: [{ name: 'abc' }] });
+    wrapper.vm.addGroup();
+    await wrapper.vm.$nextTick();
+
+    wrapper.setData({ config: { kubernetesVersion: '1.24' } });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.nodeGroups.filter((group: EKSNodeGroup) => group.version === '1.24')).toHaveLength(1);
+  });
 });