@rancher/shell 3.0.4 → 3.0.5-rc.2

package/components/form/Networking.vue

@@ -29,6 +29,20 @@ export default {
 
   data() {
     const t = this.$store.getters['i18n/t'];
+
+    return {
+      dnsPolicy:   this.value.dnsPolicy || 'ClusterFirst',
+      networkMode: this.value.hostNetwork ? { label: t('workload.networking.networkMode.options.hostNetwork'), value: true } : { label: t('workload.networking.networkMode.options.normal'), value: false },
+      hostAliases: [],
+      nameservers: null,
+      searches:    null,
+      hostname:    null,
+      subdomain:   null,
+      options:     null,
+    };
+  },
+
+  created() {
     const hostAliases = (this.value.hostAliases || []).map((entry) => {
       return {
         ip:        entry.ip,
@@ -38,18 +52,12 @@ export default {
     const { dnsConfig = {}, hostname, subdomain } = this.value;
     const { nameservers, searches, options } = dnsConfig;
 
-    const out = {
-      dnsPolicy:   this.value.dnsPolicy || 'ClusterFirst',
-      networkMode: this.value.hostNetwork ? { label: t('workload.networking.networkMode.options.hostNetwork'), value: true } : { label: t('workload.networking.networkMode.options.normal'), value: false },
-      hostAliases,
-      nameservers,
-      searches,
-      hostname,
-      subdomain,
-      options
-    };
-
-    return out;
+    this.hostAliases = hostAliases;
+    this.nameservers = nameservers;
+    this.searches = searches;
+    this.hostname = hostname;
+    this.subdomain = subdomain;
+    this.options = options;
   },
 
   computed: {

package/components/form/NodeAffinity.vue

@@ -42,31 +42,18 @@ export default {
   data() {
     // VolumeNodeAffinity only has 'required' field
     if (this.value.required) {
-      return { nodeSelectorTerms: this.value.required.nodeSelectorTerms };
     } else {
-      const { preferredDuringSchedulingIgnoredDuringExecution = [], requiredDuringSchedulingIgnoredDuringExecution = {} } = this.value;
-      const { nodeSelectorTerms = [] } = requiredDuringSchedulingIgnoredDuringExecution;
-      const allSelectorTerms = [...preferredDuringSchedulingIgnoredDuringExecution, ...nodeSelectorTerms].map((term) => {
-        const neu = clone(term);
-
-        neu._id = randomStr(4);
-        if (term.preference) {
-          Object.assign(neu, term.preference);
-          delete neu.preference;
-        }
-
-        return neu;
-      });
-
-      return {
-        allSelectorTerms,
-        weightedNodeSelectorTerms: preferredDuringSchedulingIgnoredDuringExecution,
-        defaultWeight:             1,
-        // rules in MatchExpressions.vue can not catch changes what happens on parent component
-        // we need re-render it via key changing
-        rerenderNums:              randomStr(4)
-      };
     }
+
+    return {
+      nodeSelectorTerms:         null,
+      allSelectorTerms:          null,
+      weightedNodeSelectorTerms: null,
+      defaultWeight:             1,
+      // rules in MatchExpressions.vue can not catch changes what happens on parent component
+      // we need re-render it via key changing
+      rerenderNums:              randomStr(4)
+    };
   },
 
   computed: {
@@ -88,6 +75,27 @@ export default {
   },
 
   created() {
+    if (this.value.required) {
+      this.nodeSelectorTerms = this.value.required.nodeSelectorTerms;
+    } else {
+      const { preferredDuringSchedulingIgnoredDuringExecution = [], requiredDuringSchedulingIgnoredDuringExecution = {} } = this.value;
+      const { nodeSelectorTerms = [] } = requiredDuringSchedulingIgnoredDuringExecution;
+      const allSelectorTerms = [...preferredDuringSchedulingIgnoredDuringExecution, ...nodeSelectorTerms].map((term) => {
+        const neu = clone(term);
+
+        neu._id = randomStr(4);
+        if (term.preference) {
+          Object.assign(neu, term.preference);
+          delete neu.preference;
+        }
+
+        return neu;
+      });
+
+      this.allSelectorTerms = allSelectorTerms;
+      this.weightedNodeSelectorTerms = preferredDuringSchedulingIgnoredDuringExecution;
+    }
+
     this.queueUpdate = debounce(this.update, 500);
   },
 

package/components/form/NodeScheduling.vue

@@ -40,6 +40,15 @@ export default {
   },
 
   data() {
+    return {
+      selectNode:   null,
+      nodeName:     '',
+      nodeAffinity: {},
+      nodeSelector: {},
+    };
+  },
+
+  created() {
     const isHarvester = this.$store.getters['currentProduct'].inStore === VIRTUAL;
 
     let { nodeName = '' } = this.value;
@@ -65,9 +74,10 @@ export default {
       nodeAffinity['preferredDuringSchedulingIgnoredDuringExecution'] = [];
     }
 
-    return {
-      selectNode, nodeName, nodeAffinity, nodeSelector
-    };
+    this.selectNode = selectNode;
+    this.nodeName = nodeName;
+    this.nodeAffinity = nodeAffinity;
+    this.nodeSelector = nodeSelector;
   },
 
   computed: {

package/components/form/NotificationSettings.vue

@@ -21,7 +21,12 @@ export default ({
         return [_EDIT, _VIEW].includes(value);
       },
       default: _EDIT,
-    }
+    },
+
+    hiddenAriaDescribedLabel: {
+      type:    String,
+      default: ''
+    },
   },
 
 });
@@ -29,12 +34,20 @@ export default ({
 
 <template>
   <div>
+    <p
+      v-if="hiddenAriaDescribedLabel"
+      id="hidden-label-notification-settings"
+      class="sr-only"
+    >
+      {{ hiddenAriaDescribedLabel }}
+    </p>
     <div class="row mb-20">
       <div class="col span-6">
         <Checkbox
           :mode="mode"
           :value="value.showMessage === 'true'"
           :label="t('notifications.loginError.showCheckboxLabel')"
+          aria-describedby="hidden-label-notification-settings"
           @update:value="value.showMessage = $event.toString()"
         />
       </div>
@@ -48,6 +61,7 @@ export default ({
               :mode="mode"
               :disabled="value.showMessage === 'false'"
               :label="t('notifications.loginError.messageLabel')"
+              aria-describedby="hidden-label-notification-settings"
             />
           </div>
         </div>

package/components/form/Password.vue

@@ -137,6 +137,7 @@ export default {
             tabindex="0"
             class="hide-show"
             role="button"
+            :aria-label="reveal ? t('action.ariaLabel.hidePass', { area: label }) : t('action.ariaLabel.showPass', { area: label })"
             @click.prevent.stop="hideShowFn"
             @keyup.space.prevent.stop="hideShowFn"
           >

package/components/form/PodAffinity.vue

@@ -84,53 +84,14 @@ export default {
   },
 
   data() {
-    if (!this.value[this.field]) {
-      this.value[this.field] = {};
-    }
-    const { podAffinity = {}, podAntiAffinity = {} } = this.value[this.field];
-    const allAffinityTerms = [...(podAffinity.preferredDuringSchedulingIgnoredDuringExecution || []), ...(podAffinity.requiredDuringSchedulingIgnoredDuringExecution || [])].map((term) => {
-      let out = clone(term);
-
-      out._id = randomStr(4);
-      out._anti = false;
-      if (term.podAffinityTerm) {
-        Object.assign(out, term.podAffinityTerm);
-        out = this.parsePodAffinityTerm(out);
-
-        delete out.podAffinityTerm;
-      } else {
-        out = this.parsePodAffinityTerm(out);
-      }
-
-      return out;
-    });
-    const allAntiTerms = [...(podAntiAffinity.preferredDuringSchedulingIgnoredDuringExecution || []), ...(podAntiAffinity.requiredDuringSchedulingIgnoredDuringExecution || [])].map((term) => {
-      let out = clone(term);
-
-      out._id = randomStr(4);
-      out._anti = true;
-      if (term.podAffinityTerm) {
-        Object.assign(out, term.podAffinityTerm);
-        out = this.parsePodAffinityTerm(out);
-
-        delete out.podAffinityTerm;
-      } else {
-        out = this.parsePodAffinityTerm(out);
-      }
-
-      return out;
-    });
-
-    const allSelectorTerms = [...allAffinityTerms, ...allAntiTerms];
-
     return {
-      allSelectorTerms,
-      defaultWeight:   1,
+      allSelectorTerms: [],
+      defaultWeight:    1,
       // rules in MatchExpressions.vue can not catch changes what happens on parent component
       // we need re-render it via key changing
-      rerenderNums:    randomStr(4),
+      rerenderNums:     randomStr(4),
       NAMESPACE_SELECTION_OPTION_VALUES,
-      defaultAddValue: {
+      defaultAddValue:  {
         _namespaceOption: NAMESPACE_SELECTION_OPTION_VALUES.POD,
         matchExpressions: [],
         namespaces:       null,
@@ -138,6 +99,7 @@ export default {
       }
     };
   },
+
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
     isView() {
@@ -226,6 +188,44 @@ export default {
   },
 
   created() {
+    if (!this.value[this.field]) {
+      this.value[this.field] = {};
+    }
+    const { podAffinity = {}, podAntiAffinity = {} } = this.value[this.field];
+    const allAffinityTerms = [...(podAffinity.preferredDuringSchedulingIgnoredDuringExecution || []), ...(podAffinity.requiredDuringSchedulingIgnoredDuringExecution || [])].map((term) => {
+      let out = clone(term);
+
+      out._id = randomStr(4);
+      out._anti = false;
+      if (term.podAffinityTerm) {
+        Object.assign(out, term.podAffinityTerm);
+        out = this.parsePodAffinityTerm(out);
+
+        delete out.podAffinityTerm;
+      } else {
+        out = this.parsePodAffinityTerm(out);
+      }
+
+      return out;
+    });
+    const allAntiTerms = [...(podAntiAffinity.preferredDuringSchedulingIgnoredDuringExecution || []), ...(podAntiAffinity.requiredDuringSchedulingIgnoredDuringExecution || [])].map((term) => {
+      let out = clone(term);
+
+      out._id = randomStr(4);
+      out._anti = true;
+      if (term.podAffinityTerm) {
+        Object.assign(out, term.podAffinityTerm);
+        out = this.parsePodAffinityTerm(out);
+
+        delete out.podAffinityTerm;
+      } else {
+        out = this.parsePodAffinityTerm(out);
+      }
+
+      return out;
+    });
+
+    this.allSelectorTerms = [...allAffinityTerms, ...allAntiTerms];
     this.queueUpdate = debounce(this.update, 500);
   },
 

package/components/form/Probe.vue

@@ -6,6 +6,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import ShellInput from '@shell/components/form/ShellInput';
 import KeyValue from '@shell/components/form/KeyValue';
+import { computed, ref, watch } from 'vue';
 
 const KINDS = [
   'none',
@@ -43,29 +44,29 @@ export default {
     },
   },
 
-  data() {
-    let kind = 'none';
-    let probe = null;
-    let exec = null;
-    let httpGet = null;
-    let tcpSocket = null;
-
-    if ( this.value ) {
-      probe = clone(this.value);
-
-      if ( probe.exec ) {
-        kind = 'exec';
-      } else if ( probe.httpGet ) {
-        if ( (probe.httpGet.scheme || '').toLowerCase() === 'https' ) {
-          kind = 'HTTPS';
+  setup(props, { emit }) {
+    const kind = ref('none');
+    const probe = ref(null);
+    const exec = ref(null);
+    const httpGet = ref(null);
+    const tcpSocket = ref(null);
+
+    if ( props.value ) {
+      probe.value = clone(props.value);
+
+      if ( probe.value.exec ) {
+        kind.value = 'exec';
+      } else if ( probe.value.httpGet ) {
+        if ( (probe.value.httpGet.scheme || '').toLowerCase() === 'https' ) {
+          kind.value = 'HTTPS';
         } else {
-          kind = 'HTTP';
+          kind.value = 'HTTP';
         }
-      } else if ( probe.tcpSocket ) {
-        kind = 'tcp';
+      } else if ( probe.value.tcpSocket ) {
+        kind.value = 'tcp';
       }
     } else {
-      probe = {
+      probe.value = {
         failureThreshold:    3,
         successThreshold:    1,
         initialDelaySeconds: 0,
@@ -77,68 +78,68 @@ export default {
       };
     }
 
-    exec = probe.exec || {};
-    httpGet = probe.httpGet || {};
-    tcpSocket = probe.tcpSocket || {};
+    exec.value = probe.value.exec || {};
+    httpGet.value = probe.value.httpGet || {};
+    tcpSocket.value = probe.value.tcpSocket || {};
 
-    return {
-      probe, kind, exec, httpGet, tcpSocket
-    };
-  },
-
-  computed: {
-    isView() {
-      return this.mode === _VIEW;
-    },
-
-    isNone() {
-      return this.kind === 'none';
-    },
+    const isNone = computed(() => {
+      return kind.value === 'none';
+    });
 
-    kindOptions() {
-      return KINDS.map((k) => {
-        return { label: this.t(`workload.container.healthCheck.kind.${ k }`), value: k };
-      });
-    }
-  },
-
-  watch: {
-    kind() {
-      this.update();
-    }
-  },
-
-  methods: {
-    update() {
-      const probe = this.probe;
-
-      if ( this.isNone ) {
-        this.$emit('update:value', null);
+    const update = () => {
+      if ( isNone.value ) {
+        emit('update:value', null);
 
         return;
       }
 
-      switch ( this.kind ) {
+      switch ( kind.value ) {
       case 'HTTP':
       case 'HTTPS':
-        this.httpGet.scheme = this.kind;
-        probe.httpGet = this.httpGet;
-        probe.tcpSocket = null;
-        probe.exec = null;
+        httpGet.value.scheme = kind.value;
+        probe.value.httpGet = httpGet.value;
+        probe.value.tcpSocket = null;
+        probe.value.exec = null;
         break;
       case 'tcp':
-        probe.httpGet = null;
-        probe.tcpSocket = this.tcpSocket;
-        probe.exec = null;
+        probe.value.httpGet = null;
+        probe.value.tcpSocket = tcpSocket.value;
+        probe.value.exec = null;
         break;
       case 'exec':
-        probe.httpGet = null;
-        probe.tcpSocket = null;
-        probe.exec = this.exec;
+        probe.value.httpGet = null;
+        probe.value.tcpSocket = null;
+        probe.value.exec = exec.value;
         break;
       }
 
-      this.$emit('update:value', probe);
+      emit('update:value', probe.value);
+    };
+
+    watch(kind, () => {
+      update();
+    });
+
+    return {
+      probe,
+      kind,
+      exec,
+      httpGet,
+      tcpSocket,
+      update,
+      isNone,
+    };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    kindOptions() {
+      return KINDS.map((k) => {
+        return { label: this.t(`workload.container.healthCheck.kind.${ k }`), value: k };
+      });
     }
   },
 };
@@ -244,6 +245,7 @@ export default {
           v-if="kind && kind!=='none'"
           :style="{'position':'relative', 'margin':'0px'}"
           class="vertical"
+          role="none"
         >
       </div>
 

package/components/form/ResourceQuota/Project.vue

@@ -28,11 +28,15 @@ export default {
   },
 
   data() {
+    return { typeValues: null };
+  },
+
+  created() {
     this.value['spec'] = this.value.spec || {};
     this.value.spec['namespaceDefaultResourceQuota'] = this.value.spec.namespaceDefaultResourceQuota || { limit: {} };
     this.value.spec['resourceQuota'] = this.value.spec.resourceQuota || { limit: {} };
 
-    return { typeValues: Object.keys(this.value.spec.resourceQuota.limit) };
+    this.typeValues = Object.keys(this.value.spec.resourceQuota.limit);
   },
 
   computed: { ...QUOTA_COMPUTED },

package/components/form/ResourceSelector.vue

@@ -45,16 +45,14 @@ export default {
   },
 
   data() {
-    const matchingResources = {
-      matched: 0,
-      matches: [],
-      none:    true,
-      sample:  null,
-      total:   0,
-    };
-
     return {
-      matchingResources,
+      matchingResources: {
+        matched: 0,
+        matches: [],
+        none:    true,
+        sample:  null,
+        total:   0,
+      },
       allResources:        [],
       allResourcesInScope: [],
       tableHeaders:        this.$store.getters['type-map/headersFor'](

package/components/form/SSHKnownHosts/__tests__/KnownHostsEditDialog.test.ts

@@ -1,6 +1,6 @@
 import { mount, VueWrapper } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
-import KnownHostsEditDialog from '@shell/components/form/SSHKnownHosts/KnownHostsEditDialog.vue';
+import KnownHostsEditDialog from '@shell/dialog/KnownHostsEditDialog.vue';
 import CodeMirror from '@shell/components/CodeMirror.vue';
 import FileSelector from '@shell/components/form/FileSelector.vue';
 
@@ -21,7 +21,7 @@ describe('component: KnownHostsEditDialog', () => {
       attachTo: document.body,
       props:    {
         mode:  _EDIT,
-        value: 'line1\nline2\n',
+        value: 'line1\nline2\n'
       },
       ...requiredSetup(),
     });
@@ -33,8 +33,6 @@ describe('component: KnownHostsEditDialog', () => {
   });
 
   it('should update text from CodeMirror', async() => {
-    await wrapper.setData({ showModal: true });
-
     expect(wrapper.vm.text).toBe('line1\nline2\n');
 
     const codeMirror = wrapper.getComponent(CodeMirror);
@@ -51,8 +49,6 @@ describe('component: KnownHostsEditDialog', () => {
   });
 
   it('should update text from FileSelector', async() => {
-    await wrapper.setData({ showModal: true });
-
     expect(wrapper.vm.text).toBe('line1\nline2\n');
 
     const fileSelector = wrapper.getComponent(FileSelector);
@@ -67,38 +63,34 @@ describe('component: KnownHostsEditDialog', () => {
   });
 
   it('should save changes and close dialog', async() => {
-    await wrapper.setData({
-      showModal: true,
-      text:      'foo',
-    });
+    const closed = jest.spyOn(wrapper.vm, 'closed');
+
+    await wrapper.setData({ text: 'foo' });
 
     expect(wrapper.vm.value).toBe('line1\nline2\n');
     expect(wrapper.vm.text).toBe('foo');
 
     await wrapper.vm.closeDialog(true);
 
-    expect((wrapper.emitted('closed') as any)[0][0].value).toBe('foo');
-
-    const dialog = wrapper.vm.$refs['sshKnownHostsDialog'];
-
-    expect(dialog).toBeNull();
+    expect(closed).toHaveBeenCalledWith({
+      success: true,
+      value:   'foo'
+    });
   });
 
   it('should discard changes and close dialog', async() => {
-    await wrapper.setData({
-      showModal: true,
-      text:      'foo',
-    });
+    const closed = jest.spyOn(wrapper.vm, 'closed');
+
+    await wrapper.setData({ text: 'foo' });
 
     expect(wrapper.vm.value).toBe('line1\nline2\n');
     expect(wrapper.vm.text).toBe('foo');
 
     await wrapper.vm.closeDialog(false);
 
-    expect((wrapper.emitted('closed') as any)[0][0].value).toBe('line1\nline2\n');
-
-    const dialog = wrapper.vm.$refs['sshKnownHostsDialog'];
-
-    expect(dialog).toBeNull();
+    expect(closed).toHaveBeenCalledWith({
+      success: false,
+      value:   'line1\nline2\n'
+    });
   });
 });