@rancher/shell 1.2.0 → 2.0.0

package/edit/nodeDriver.vue

@@ -0,0 +1,65 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import CruResource from '@shell/components/CruResource.vue';
+import FormValidation from '@shell/mixins/form-validation';
+import CreateDriver from '@shell/components/CreateDriver';
+import { _CREATE } from '@shell/config/query-params';
+
+export default {
+  name: 'NodeDriverEdit',
+
+  components: {
+    CruResource,
+    CreateDriver
+  },
+
+  mixins: [CreateEditView, FormValidation],
+
+  data() {
+    return {
+      fvFormRuleSets: [
+        { path: 'url', rules: ['required', 'url'] },
+        { path: 'uiUrl', rules: ['url'] },
+        { path: 'checksum', rules: ['alphanumeric'] },
+        { path: 'whitelistDomains', rules: ['wildcardHostname'] }
+      ]
+    };
+  },
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+      default:  () => {}
+    },
+    mode: {
+      type:    String,
+      default: _CREATE,
+    },
+  },
+};
+</script>
+
+<template>
+  <CruResource
+    :mode="mode"
+    :show-as-form="true"
+    :can-yaml="false"
+    :resource="value"
+    :errors="fvUnreportedValidationErrors"
+    :validation-passed="fvFormIsValid"
+    :cancel-event="true"
+    :done-route="doneRoute"
+    :apply-hooks="applyHooks"
+    component-testid="node-driver-edit"
+    @done="done"
+    @error="e=>errors = e"
+    @finish="save"
+    @cancel="done"
+  >
+    <CreateDriver
+      :mode="mode"
+      :value="value"
+      :rules="{url:fvGetAndReportPathRules('url'), uiUrl:fvGetAndReportPathRules('uiUrl'), checksum:fvGetAndReportPathRules('checksum'), whitelistDomains:fvGetAndReportPathRules('whitelistDomains')}"
+    />
+  </CruResource>
+</template>

package/edit/persistentvolume/index.vue

@@ -237,9 +237,9 @@ export default {
       <div class="row">
         <div class="col span-6 text-center">
           <label class="text-muted">Persistent Volume Claim:</label>&nbsp;
-          <n-link :to="currentClaim.detailLocation">
+          <router-link :to="currentClaim.detailLocation">
             {{ currentClaim.namespacedName }}
-          </n-link>
+          </router-link>
         </div>
         <div class="col span-6 text-center">
           <label class="text-muted">Age:</label>&nbsp;

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

@@ -8,6 +8,7 @@ import NameNsDescription from '@shell/components/form/NameNsDescription';
 import { Banner } from '@components/Banner';
 import { CAPI } from '@shell/config/labels-annotations';
 import { clear } from '@shell/utils/array';
+import cloneDeep from 'lodash/cloneDeep';
 
 const _NEW = '_NEW';
 const _NONE = '_NONE';
@@ -31,9 +32,10 @@ export default {
     },
 
     cancel: {
-      type:     Function,
-      required: true,
+      type:    Function,
+      default: null
     },
+
     showingForm: {
       type:     Boolean,
       required: true,
@@ -66,12 +68,13 @@ export default {
 
   data() {
     return {
-      allCredentials:         [],
-      nodeComponent:          null,
-      credentialId:           this.value || _NONE,
-      newCredential:          null,
-      createValidationPassed: false,
-      originalId:             this.value
+      allCredentials:                [],
+      nodeComponent:                 null,
+      credentialId:                  this.value || _NONE,
+      newCredential:                 null,
+      credCustomComponentValidation: false,
+      nameRequiredValidation:        false,
+      originalId:                    this.value
     };
   },
 
@@ -102,13 +105,18 @@ export default {
     },
 
     options() {
-      const out = this.filteredCredentials.map((obj) => {
-        return {
-          label: obj.nameDisplay,
-          value: obj.id,
-        };
+      const duplicates = {};
+
+      this.filteredCredentials.forEach((cred) => {
+        duplicates[cred.nameDisplay] = duplicates[cred.nameDisplay] === null ? true : null;
       });
 
+      const out = this.filteredCredentials.map((obj) => ({
+        // if credential name is duplicated we add the id to the label
+        label: duplicates[obj.nameDisplay] ? `${ obj.nameDisplay } (${ obj.id })` : obj.nameDisplay,
+        value: obj.id,
+      }));
+
       if ( this.originalId && !out.find((x) => x.value === this.originalId) ) {
         out.unshift({
           label: `${ this.originalId.replace(/^cattle-global-data:/, '') } (current)`,
@@ -144,7 +152,7 @@ export default {
       }
 
       if ( this.credentialId === _NEW ) {
-        return this.createValidationPassed;
+        return this.credCustomComponentValidation && this.nameRequiredValidation;
       }
 
       return !!this.credentialId;
@@ -162,10 +170,15 @@ export default {
   },
 
   methods: {
+    handleNameRequiredValidation() {
+      this.nameRequiredValidation = !!this.newCredential?.name?.length;
+    },
+
     async save(btnCb) {
       if ( this.errors ) {
         clear(this.errors);
       }
+      const fullCredential = cloneDeep(this.newCredential);
 
       if ( typeof this.$refs.create?.test === 'function' ) {
         try {
@@ -193,6 +206,8 @@ export default {
         const res = await this.newCredential.save();
 
         this.credentialId = res.id;
+        // full cloud credential data is not stored in the cloud credentail CRD, but consuming components may want to use it
+        this.$emit('credential-created', fullCredential);
         btnCb(true);
       } catch (e) {
         this.errors = [e];
@@ -201,7 +216,7 @@ export default {
     },
 
     createValidationChanged(passed) {
-      this.createValidationPassed = passed;
+      this.credCustomComponentValidation = passed;
     },
 
     backToExisting() {
@@ -241,8 +256,8 @@ export default {
         name-key="name"
         name-label="cluster.credential.name.label"
         name-placeholder="cluster.credential.name.placeholder"
-        :name-required="false"
         mode="create"
+        @change="handleNameRequiredValidation"
       />
 
       <component
@@ -265,8 +280,10 @@ export default {
         v-model="credentialId"
         :label="t('cluster.credential.label')"
         :options="options"
+        option-key="value"
         :mode="mode"
         :selectable="option => !option.disabled"
+        data-testid="cluster-prov-select-credential"
       />
     </div>
 

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

@@ -0,0 +1,276 @@
+/* eslint-disable jest/no-hooks */
+import { mount, Wrapper } from '@vue/test-utils';
+import Advanced from '@shell/edit/provisioning.cattle.io.cluster/tabs/Advanced.vue';
+import { _EDIT, _YAML, _VIEW } from '@shell/config/query-params';
+import { clone } from '@shell/utils/object';
+import { PROV_CLUSTER, VERSION_CLUSTER } from '@shell/edit/provisioning.cattle.io.cluster/__tests__/utils/cluster';
+
+describe('component: Advanced', () => {
+  let wrapper: Wrapper<InstanceType<typeof Advanced>>;
+
+  const mountOptions = {
+    propsData: {
+      value:           {},
+      mode:            _VIEW,
+      haveArgInfo:     true,
+      selectedVersion: VERSION_CLUSTER
+    },
+    mocks: {
+      $store: {
+        getters: {
+          currentStore:              () => 'current_store',
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          'i18n/t':                  jest.fn(),
+          'i18n/exists':             jest.fn(),
+        }
+      },
+      $route:  { query: { AS: _YAML } },
+      $router: { applyQuery: jest.fn() },
+    }
+  };
+
+  describe('cluster configurations', () => {
+    it(`should support empty machineSelectorConfig`, () => {
+      const value = clone(PROV_CLUSTER);
+
+      value.spec.rkeConfig.machineSelectorConfig = [];
+
+      mountOptions.propsData.value = value;
+
+      wrapper = mount(
+        Advanced,
+        mountOptions
+      );
+
+      const inputElem = wrapper.find('[data-testid="array-list-box0"]').element as HTMLElement;
+
+      expect(inputElem).toBeUndefined();
+    });
+
+    it(`should support undefined machineSelectorConfig.config`, () => {
+      const value = clone(PROV_CLUSTER);
+
+      value.spec.rkeConfig.machineSelectorConfig[0].config = undefined;
+
+      mountOptions.propsData.value = value;
+
+      wrapper = mount(
+        Advanced,
+        mountOptions
+      );
+
+      const inputElem = wrapper.find('[data-testid="array-list-box0"]').element as HTMLElement;
+
+      expect(inputElem.textContent).toContain('—');
+    });
+
+    describe(`'protect-kernel-defaults'`, () => {
+      it(`should show value from machineGlobalConfig`, () => {
+        const value = clone(PROV_CLUSTER);
+
+        value.spec.rkeConfig.machineGlobalConfig['protect-kernel-defaults'] = true;
+        value.spec.rkeConfig.machineSelectorConfig = [{
+          config:               {},
+          machineLabelSelector: {
+            matchExpressions: [{
+              key:      'foo',
+              operator: 'In',
+              values:   ['bar'],
+            }],
+            matchLabels: { foo1: 'bar1' },
+          }
+        }];
+
+        mountOptions.propsData.mode = _VIEW;
+        mountOptions.propsData.value = value;
+
+        wrapper = mount(
+          Advanced,
+          mountOptions
+        );
+
+        const checkbox = wrapper.find('[data-testid="protect-kernel-defaults"]').find('[type="checkbox"]').element as HTMLInputElement;
+
+        expect(checkbox.value).toBe('true');
+      });
+
+      it(`should show value from machineSelectorConfig.config`, () => {
+        const value = clone(PROV_CLUSTER);
+
+        value.spec.rkeConfig.machineGlobalConfig['protect-kernel-defaults'] = false;
+        value.spec.rkeConfig.machineSelectorConfig = [{
+          config:               {},
+          machineLabelSelector: {
+            config:           { 'protect-kernel-defaults': true },
+            matchExpressions: [{
+              key:      'foo',
+              operator: 'In',
+              values:   ['bar'],
+            }],
+            matchLabels: { foo1: 'bar1' },
+          }
+        }];
+
+        mountOptions.propsData.mode = _VIEW;
+        mountOptions.propsData.value = value;
+
+        wrapper = mount(
+          Advanced,
+          mountOptions
+        );
+
+        const checkbox = wrapper.find('[data-testid="protect-kernel-defaults"]').find('[type="checkbox"]').element as HTMLInputElement;
+
+        expect(checkbox.value).toBe('true');
+      });
+    });
+
+    describe(`'kubelet-arg'`, () => {
+      describe.each([
+        _VIEW,
+        _EDIT
+      ])(`mode: %s`, (mode) => {
+        it(`should show value from machineSelectorConfig only`, () => {
+          const value = clone(PROV_CLUSTER);
+
+          value.spec.rkeConfig.machineSelectorConfig[0].config['kubelet-arg'] = ['config-from-machineSelectorConfig'];
+
+          mountOptions.propsData.mode = mode;
+          mountOptions.propsData.value = value;
+
+          wrapper = mount(
+            Advanced,
+            mountOptions
+          );
+
+          const globalContainer = wrapper.find('[data-testid="global-kubelet-arg"]');
+          const selectorContainer = wrapper.find('[data-testid="selector-kubelet-arg"]');
+
+          const globalInputElem = globalContainer.element as HTMLInputElement;
+          const selectorInputElem = selectorContainer.find('[data-testid="input-0"]').element as HTMLInputElement;
+
+          expect(globalInputElem).toBeUndefined();
+          expect(selectorInputElem.value).toContain('config-from-machineSelectorConfig');
+        });
+
+        it(`should show value from machineGlobalConfig only`, () => {
+          const value = clone(PROV_CLUSTER);
+
+          value.spec.rkeConfig.machineGlobalConfig['kubelet-arg'] = ['config-from-machineGlobalConfig'];
+
+          mountOptions.propsData.mode = mode;
+          mountOptions.propsData.value = value;
+
+          wrapper = mount(
+            Advanced,
+            mountOptions
+          );
+
+          const globalContainer = wrapper.find('[data-testid="global-kubelet-arg"]');
+          const selectorContainer = wrapper.find('[data-testid="selector-kubelet-arg"]');
+
+          const selectorInputElem = selectorContainer.element as HTMLInputElement;
+          const globalInputElem = globalContainer.find('[data-testid="input-0"]').element as HTMLInputElement;
+
+          expect(selectorInputElem).toBeUndefined();
+          expect(globalInputElem.value).toContain('config-from-machineGlobalConfig');
+        });
+
+        it(`should show value from machineGlobalConfig and machineSelectorConfig`, () => {
+          const value = clone(PROV_CLUSTER);
+
+          value.spec.rkeConfig.machineSelectorConfig[0].config['kubelet-arg'] = ['config-from-machineSelectorConfig'];
+          value.spec.rkeConfig.machineGlobalConfig['kubelet-arg'] = ['config-from-machineGlobalConfig'];
+
+          mountOptions.propsData.mode = mode;
+          mountOptions.propsData.value = value;
+
+          wrapper = mount(
+            Advanced,
+            mountOptions
+          );
+
+          const globalContainer = wrapper.find('[data-testid="global-kubelet-arg"]');
+          const selectorContainer = wrapper.find('[data-testid="selector-kubelet-arg"]');
+
+          const selectorInputElem = selectorContainer.find('[data-testid="input-0"]').element as HTMLInputElement;
+          const globalInputElem = globalContainer.find('[data-testid="input-0"]').element as HTMLInputElement;
+
+          expect(selectorInputElem.value).toContain('config-from-machineSelectorConfig');
+          expect(globalInputElem.value).toContain('config-from-machineGlobalConfig');
+        });
+      });
+
+      it(`mode: edit, should show empty value'`, () => {
+        const value = clone(PROV_CLUSTER);
+
+        value.spec.rkeConfig.machineSelectorConfig[0].config['kubelet-arg'] = [];
+        value.spec.rkeConfig.machineGlobalConfig['kubelet-arg'] = [];
+
+        mountOptions.propsData.mode = 'view';
+        mountOptions.propsData.value = value;
+
+        wrapper = mount(
+          Advanced,
+          mountOptions
+        );
+
+        const globalContainer = wrapper.find('[data-testid="global-kubelet-arg"]');
+        const selectorContainer = wrapper.find('[data-testid="selector-kubelet-arg"]');
+
+        const selectorInputElem = selectorContainer.find('[data-testid="input-0"]').element as HTMLInputElement;
+        const globalInputElem = globalContainer.find('[data-testid="input-0"]').element as HTMLInputElement;
+
+        const emptyCharacter = wrapper.find('.info-box').find('.text-muted').element;
+
+        const globalAddButton = globalContainer.find('[data-testid="array-list-button"]').element;
+        const selectorAddButton = selectorContainer.find('[data-testid="array-list-button"]').element;
+
+        const removeButtonConfig = globalContainer.find('[data-testid="remove-item-0"]').element;
+
+        expect(selectorInputElem).toBeUndefined();
+        expect(globalInputElem).toBeUndefined();
+        expect(globalAddButton).toBeUndefined();
+        expect(selectorAddButton).toBeUndefined();
+        expect(emptyCharacter).toBeDefined();
+        expect(removeButtonConfig).toBeFalsy();
+      });
+
+      it(`mode: view, should show empty value'`, () => {
+        const value = clone(PROV_CLUSTER);
+
+        value.spec.rkeConfig.machineSelectorConfig[0].config['kubelet-arg'] = [];
+        value.spec.rkeConfig.machineGlobalConfig['kubelet-arg'] = [];
+
+        mountOptions.propsData.mode = 'edit';
+        mountOptions.propsData.value = value;
+
+        wrapper = mount(
+          Advanced,
+          mountOptions
+        );
+
+        const globalContainer = wrapper.find('[data-testid="global-kubelet-arg"]');
+        const selectorContainer = wrapper.find('[data-testid="selector-kubelet-arg"]');
+
+        const selectorInputElem = selectorContainer.find('[data-testid="input-0"]').element as HTMLInputElement;
+        const globalInputElem = globalContainer.find('[data-testid="input-0"]').element as HTMLInputElement;
+
+        const emptyCharacter = wrapper.find('.info-box').find('.text-muted').element;
+
+        const globalAddButton = globalContainer.find('[data-testid="array-list-button"]').element;
+        const selectorAddButton = selectorContainer.find('[data-testid="array-list-button"]').element;
+
+        const removeButtonConfig = globalContainer.find('[data-testid="remove-item-0"]').element;
+
+        expect(selectorInputElem).toBeUndefined();
+        expect(globalInputElem).toBeUndefined();
+        expect(globalAddButton).toBeDefined();
+        expect(selectorAddButton).toBeDefined();
+        expect(emptyCharacter).toBeUndefined();
+        expect(removeButtonConfig).toBeFalsy();
+      });
+    });
+  });
+});