@rancher/shell 3.0.3 → 3.0.5-rc.1

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 };
+      });
     }
   },
 };

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/KnownHostsEditDialog.vue

@@ -22,7 +22,7 @@ export default {
     mode: {
       type:    String,
       default: _EDIT
-    },
+    }
   },
 
   data() {
@@ -40,8 +40,9 @@ export default {
 
     return {
       codeMirrorOptions,
-      text:      this.value,
-      showModal: false,
+      text:                this.value,
+      showModal:           false,
+      returnFocusSelector: '#known-ssh-hosts-trigger'
     };
   },
 
@@ -83,6 +84,8 @@ export default {
     data-testid="sshKnownHostsDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
     @close="closeDialog(false)"
   >
     <div

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

@@ -14,6 +14,17 @@ const requiredSetup = () => {
   return { global: { mocks: { $store: mockedStore() } } };
 };
 
+jest.mock('focus-trap', () => {
+  return {
+    createFocusTrap: jest.fn().mockImplementation(() => {
+      return {
+        activate:   jest.fn(),
+        deactivate: jest.fn(),
+      };
+    }),
+  };
+});
+
 describe('component: KnownHostsEditDialog', () => {
   beforeEach(() => {
     document.body.innerHTML = '<div id="modals"></div>';
@@ -21,7 +32,7 @@ describe('component: KnownHostsEditDialog', () => {
       attachTo: document.body,
       props:    {
         mode:  _EDIT,
-        value: 'line1\nline2\n',
+        value: 'line1\nline2\n'
       },
       ...requiredSetup(),
     });

package/components/form/SSHKnownHosts/index.vue

@@ -65,12 +65,18 @@ export default defineComponent({
     </div>
     <template v-if="!isViewMode">
       <button
+        id="known-ssh-hosts-trigger"
         ref="button"
+        role="button"
+        :aria-label="t('secret.ssh.editKnownHosts.title')"
         data-testid="input-known-ssh-hosts_open-dialog"
         class="show-dialog-btn btn"
         @click="openDialog"
       >
-        <i class="icon icon-edit" />
+        <i
+          class="icon icon-edit"
+          :alt="t('secret.ssh.editKnownHosts.title')"
+        />
       </button>
 
       <KnownHostsEditDialog
@@ -94,8 +100,16 @@ export default defineComponent({
     }
 
     .show-dialog-btn {
-      display: contents;
       background-color: transparent;
+      padding: 4px;
+      height: 22px;
+      margin: -3px -3px 0 0;
+      min-height: unset;
+
+      &:focus-visible {
+        @include focus-outline;
+        outline-offset: 1px;
+      }
     }
   }
 </style>

package/components/form/Security.vue

@@ -5,6 +5,45 @@ import { _VIEW } from '@shell/config/query-params';
 import { mapGetters } from 'vuex';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
+const allCapabilities = ['ALL',
+  'AUDIT_CONTROL',
+  'AUDIT_WRITE',
+  'BLOCK_SUSPEND',
+  'CHOWN',
+  'DAC_OVERRIDE',
+  'DAC_READ_SEARCH',
+  'FOWNER',
+  'FSETID',
+  'IPC_LOCK',
+  'IPC_OWNER',
+  'KILL',
+  'LEASE',
+  'LINUX_IMMUTABLE',
+  'MAC_ADMIN',
+  'MAC_OVERRIDE',
+  'MKNOD',
+  'NET_ADMIN',
+  'NET_BIND_SERVICE',
+  'NET_BROADCAST',
+  'NET_RAW',
+  'SETFCAP',
+  'SETGID',
+  'SETPCAP',
+  'SETUID',
+  'SYSLOG',
+  'SYS_ADMIN',
+  'SYS_BOOT',
+  'SYS_CHROOT',
+  'SYS_MODULE',
+  'SYS_NICE',
+  'SYS_PACCT',
+  'SYS_PTRACE',
+  'SYS_RAWIO',
+  'SYS_RESOURCE',
+  'SYS_TIME',
+  'SYS_TTY_CONFIG',
+  'WAKE_ALARM'];
+
 export default {
   emits: ['update:value'],
 
@@ -25,68 +64,27 @@ export default {
   },
 
   data() {
-    const allCapabilities = ['ALL',
-      'AUDIT_CONTROL',
-      'AUDIT_WRITE',
-      'BLOCK_SUSPEND',
-      'CHOWN',
-      'DAC_OVERRIDE',
-      'DAC_READ_SEARCH',
-      'FOWNER',
-      'FSETID',
-      'IPC_LOCK',
-      'IPC_OWNER',
-      'KILL',
-      'LEASE',
-      'LINUX_IMMUTABLE',
-      'MAC_ADMIN',
-      'MAC_OVERRIDE',
-      'MKNOD',
-      'NET_ADMIN',
-      'NET_BIND_SERVICE',
-      'NET_BROADCAST',
-      'NET_RAW',
-      'SETFCAP',
-      'SETGID',
-      'SETPCAP',
-      'SETUID',
-      'SYSLOG',
-      'SYS_ADMIN',
-      'SYS_BOOT',
-      'SYS_CHROOT',
-      'SYS_MODULE',
-      'SYS_NICE',
-      'SYS_PACCT',
-      'SYS_PTRACE',
-      'SYS_RAWIO',
-      'SYS_RESOURCE',
-      'SYS_TIME',
-      'SYS_TTY_CONFIG',
-      'WAKE_ALARM'];
+    return {
+      privileged:               this.value.privileged || false,
+      allowPrivilegeEscalation: this.value.allowPrivilegeEscalation || false,
+      allCapabilities,
+      runAsNonRoot:             this.value.runAsNonRoot || false,
+      readOnlyRootFilesystem:   this.value.readOnlyRootFilesystem || false,
+      add:                      [],
+      drop:                     [],
+      runAsUser:                this.value.runAsUser
+    };
+  },
 
-    const {
-      capabilities = {},
-      runAsNonRoot = false,
-      readOnlyRootFilesystem = false,
-      privileged = false,
-      allowPrivilegeEscalation = false,
-      runAsUser
-    } = this.value;
+  created() {
+    const { capabilities = {} } = this.value;
     const {
       add = [],
       drop = []
     } = capabilities;
 
-    return {
-      privileged,
-      allowPrivilegeEscalation,
-      allCapabilities,
-      runAsNonRoot,
-      readOnlyRootFilesystem,
-      add,
-      drop,
-      runAsUser
-    };
+    this.add = add;
+    this.drop = drop;
   },
 
   computed: {

package/components/form/Select.vue

@@ -2,11 +2,12 @@
 import { get } from '@shell/utils/object';
 import LabeledFormElement from '@shell/mixins/labeled-form-element';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
+import { generateRandomAlphaString } from '@shell/utils/string';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
 
 export default {
-  emits: ['update:value', 'createdListItem'],
+  emits: ['update:value', 'createdListItem', 'on-open', 'on-close'],
 
   components: { LabeledTooltip },
   mixins:     [
@@ -90,9 +91,14 @@ export default {
     isLangSelect: {
       type:    Boolean,
       default: false
-    },
+    }
+  },
+  data() {
+    return {
+      isOpen:       false,
+      generatedUid: `s-uid-${ generateRandomAlphaString(12) }`
+    };
   },
-
   methods: {
     // resizeHandler = in mixin
     getOptionLabel(option) {
@@ -191,14 +197,26 @@ export default {
         return Math.random(100000);
       }
     },
+
     report(e) {
       alert(e);
     },
+
     handleDropdownOpen(args) {
       // function that prevents the "opening dropdown on focus"
       // default behaviour of v-select
       return args.noDrop || args.disabled ? false : args.open;
-    }
+    },
+    onOpen() {
+      this.isOpen = true;
+      this.$emit('on-open');
+      this.resizeHandler();
+    },
+
+    onClose() {
+      this.isOpen = false;
+      this.$emit('on-close');
+    },
   },
   computed: {
     requiredField() {
@@ -259,6 +277,10 @@ export default {
       [$attrs.class]: $attrs.class
     }"
     :tabindex="disabled || isView ? -1 : 0"
+    role="combobox"
+    :aria-expanded="isOpen"
+    :aria-label="$attrs['aria-label'] || undefined"
+    :aria-describedby="$attrs['aria-describedby'] || undefined"
     @click="focusSearch"
     @keydown.enter="focusSearch"
     @keydown.down.prevent="focusSearch"
@@ -286,11 +308,14 @@ export default {
       :modelValue="value != null ? value : ''"
       :dropdownShouldOpen="handleDropdownOpen"
       :tabindex="-1"
-      role="listbox"
+      role="listitem"
+      :uid="generatedUid"
+      :aria-label="'-'"
       @update:modelValue="$emit('update:value', $event)"
       @search:blur="onBlur"
       @search:focus="onFocus"
-      @open="resizeHandler"
+      @open="onOpen"
+      @close="onClose"
       @option:created="(e) => $emit('createdListItem', e)"
     >
       <template

package/components/form/ShellInput.vue

@@ -21,6 +21,10 @@ export default {
       causes $emit 'input' of ["-c", "sleep 600"]
   */
   data() {
+    return { userValue: '' };
+  },
+
+  created() {
     let userValue = '';
 
     if ( this.value ) {
@@ -36,7 +40,7 @@ export default {
       }, '').trim();
     }
 
-    return { userValue };
+    this.userValue = userValue;
   },
 
   methods: {

package/components/form/Tolerations.vue

@@ -29,6 +29,10 @@ export default {
   },
 
   data() {
+    return { rules: [] };
+  },
+
+  created() {
     const rules = [];
 
     // on creation in agent configuration, the backend "eats"
@@ -49,7 +53,7 @@ export default {
       });
     }
 
-    return { rules };
+    this.rules = rules;
   },
 
   computed: {