dashboard-shell-shell 1.0.113 → 1.0.114

package/components/form/PodAffinity.vue

@@ -84,14 +84,53 @@ 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,
@@ -99,7 +138,6 @@ export default {
       }
     };
   },
-
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
     isView() {
@@ -188,44 +226,6 @@ 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);
   },
 
@@ -364,6 +364,7 @@ export default {
     <div class="col span-12">
       <ArrayListGrouped
         v-model:value="allSelectorTerms"
+        class="mt-20"
         :default-add-value="defaultAddValue"
         :mode="mode"
         :add-label="addLabel"

package/components/form/Probe.vue

@@ -6,7 +6,6 @@ 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',
@@ -44,29 +43,29 @@ export default {
     },
   },
 
-  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';
+  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';
         } else {
-          kind.value = 'HTTP';
+          kind = 'HTTP';
         }
-      } else if ( probe.value.tcpSocket ) {
-        kind.value = 'tcp';
+      } else if ( probe.tcpSocket ) {
+        kind = 'tcp';
       }
     } else {
-      probe.value = {
+      probe = {
         failureThreshold:    3,
         successThreshold:    1,
         initialDelaySeconds: 0,
@@ -78,68 +77,68 @@ export default {
       };
     }
 
-    exec.value = probe.value.exec || {};
-    httpGet.value = probe.value.httpGet || {};
-    tcpSocket.value = probe.value.tcpSocket || {};
+    exec = probe.exec || {};
+    httpGet = probe.httpGet || {};
+    tcpSocket = probe.tcpSocket || {};
 
-    const isNone = computed(() => {
-      return kind.value === 'none';
-    });
+    return {
+      probe, kind, exec, httpGet, tcpSocket
+    };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    isNone() {
+      return this.kind === 'none';
+    },
 
-    const update = () => {
-      if ( isNone.value ) {
-        emit('update:value', null);
+    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);
 
         return;
       }
 
-      switch ( kind.value ) {
+      switch ( this.kind ) {
       case 'HTTP':
       case 'HTTPS':
-        httpGet.value.scheme = kind.value;
-        probe.value.httpGet = httpGet.value;
-        probe.value.tcpSocket = null;
-        probe.value.exec = null;
+        this.httpGet.scheme = this.kind;
+        probe.httpGet = this.httpGet;
+        probe.tcpSocket = null;
+        probe.exec = null;
         break;
       case 'tcp':
-        probe.value.httpGet = null;
-        probe.value.tcpSocket = tcpSocket.value;
-        probe.value.exec = null;
+        probe.httpGet = null;
+        probe.tcpSocket = this.tcpSocket;
+        probe.exec = null;
         break;
       case 'exec':
-        probe.value.httpGet = null;
-        probe.value.tcpSocket = null;
-        probe.value.exec = exec.value;
+        probe.httpGet = null;
+        probe.tcpSocket = null;
+        probe.exec = this.exec;
         break;
       }
 
-      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 };
-      });
+      this.$emit('update:value', probe);
     }
   },
 };
@@ -245,7 +244,6 @@ export default {
           v-if="kind && kind!=='none'"
           :style="{'position':'relative', 'margin':'0px'}"
           class="vertical"
-          role="none"
         >
       </div>
 

package/components/form/ResourceQuota/Project.vue

@@ -28,15 +28,11 @@ 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: {} };
 
-    this.typeValues = Object.keys(this.value.spec.resourceQuota.limit);
+    return { typeValues: Object.keys(this.value.spec.resourceQuota.limit) };
   },
 
   computed: { ...QUOTA_COMPUTED },

package/components/form/ResourceSelector.vue

@@ -45,14 +45,16 @@ export default {
   },
 
   data() {
+    const matchingResources = {
+      matched: 0,
+      matches: [],
+      none:    true,
+      sample:  null,
+      total:   0,
+    };
+
     return {
-      matchingResources: {
-        matched: 0,
-        matches: [],
-        none:    true,
-        sample:  null,
-        total:   0,
-      },
+      matchingResources,
       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,9 +40,8 @@ export default {
 
     return {
       codeMirrorOptions,
-      text:                this.value,
-      showModal:           false,
-      returnFocusSelector: '#known-ssh-hosts-trigger'
+      text:      this.value,
+      showModal: false,
     };
   },
 
@@ -84,8 +83,6 @@ 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,17 +14,6 @@ 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>';
@@ -32,7 +21,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,18 +65,12 @@ 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"
-          :alt="t('secret.ssh.editKnownHosts.title')"
-        />
+        <i class="icon icon-edit" />
       </button>
 
       <KnownHostsEditDialog
@@ -100,16 +94,8 @@ 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,45 +5,6 @@ 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'],
 
@@ -64,27 +25,68 @@ export default {
   },
 
   data() {
-    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 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'];
 
-  created() {
-    const { capabilities = {} } = this.value;
+    const {
+      capabilities = {},
+      runAsNonRoot = false,
+      readOnlyRootFilesystem = false,
+      privileged = false,
+      allowPrivilegeEscalation = false,
+      runAsUser
+    } = this.value;
     const {
       add = [],
       drop = []
     } = capabilities;
 
-    this.add = add;
-    this.drop = drop;
+    return {
+      privileged,
+      allowPrivilegeEscalation,
+      allCapabilities,
+      runAsNonRoot,
+      readOnlyRootFilesystem,
+      add,
+      drop,
+      runAsUser
+    };
   },
 
   computed: {

package/components/form/Select.vue

@@ -2,12 +2,11 @@
 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', 'on-open', 'on-close'],
+  emits: ['update:value', 'createdListItem'],
 
   components: { LabeledTooltip },
   mixins:     [
@@ -88,17 +87,8 @@ export default {
       type:    Boolean,
       default: null
     },
-    isLangSelect: {
-      type:    Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      isOpen:       false,
-      generatedUid: `s-uid-${ generateRandomAlphaString(12) }`
-    };
   },
+
   methods: {
     // resizeHandler = in mixin
     getOptionLabel(option) {
@@ -197,26 +187,14 @@ 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() {
@@ -277,10 +255,6 @@ 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"
@@ -308,23 +282,15 @@ export default {
       :modelValue="value != null ? value : ''"
       :dropdownShouldOpen="handleDropdownOpen"
       :tabindex="-1"
-      role="listitem"
-      :uid="generatedUid"
-      :aria-label="'-'"
+      role="listbox"
       @update:modelValue="$emit('update:value', $event)"
       @search:blur="onBlur"
       @search:focus="onFocus"
-      @open="onOpen"
-      @close="onClose"
+      @open="resizeHandler"
       @option:created="(e) => $emit('createdListItem', e)"
     >
-      <template
-        #option="option"
-      >
-        <div
-          :lang="isLangSelect ? option.value : undefined"
-          @mousedown="(e) => onClickOption(option, e)"
-        >
+      <template #option="option">
+        <div @mousedown="(e) => onClickOption(option, e)">
           {{ getOptionLabel(option.label) }}
         </div>
       </template>

package/components/form/ShellInput.vue

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