dashboard-shell-shell 1.0.122 → 1.0.1000000082

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);
   },
 
@@ -364,14 +364,13 @@ export default {
     <div class="col span-12">
       <ArrayListGrouped
         v-model:value="allSelectorTerms"
-        class="mt-20"
         :default-add-value="defaultAddValue"
         :mode="mode"
         :add-label="addLabel"
         @remove="remove"
       >
         <template #default="props">
-          <div class="row mt-20 mb-20">
+          <div class="row mt-20">
             <div class="col span-6">
               <LabeledSelect
                 :mode="mode"
@@ -393,7 +392,7 @@ export default {
               />
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-20">
             <RadioGroup
               :options="namespaceSelectionOptions"
               :labels="namespaceSelectionLabels"
@@ -439,7 +438,7 @@ export default {
             @update:value="e=>updateLabelSelector(e, props)"
           />
           <div class="row mt-20">
-            <div class="col span-9">
+            <div class="col span-6">
               <LabeledSelect
                 v-if="hasNodes"
                 v-model:value="props.row.value.topologyKey"
@@ -469,7 +468,7 @@ export default {
             </div>
             <div
               v-if="'weight' in props.row.value"
-              class="col span-3"
+              class="col span-6"
             >
               <LabeledInput
                 v-model:value.number="props.row.value.weight"

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

@@ -72,13 +72,13 @@ export default {
 <template>
   <div>
     <div class="headers mb-10">
-      <div class="mr-10">
+      <div style="width: 400px;">
         <label>{{ t('resourceQuota.headers.resourceType') }}</label>
       </div>
-      <div class="mr-10">
+      <div style="width: 400px;">
         <label>{{ t('resourceQuota.headers.projectResourceAvailability') }}</label>
       </div>
-      <div class="mr-20">
+      <div style="width: 400px;">
         <label>{{ t('resourceQuota.headers.limit') }}</label>
       </div>
     </div>
@@ -101,7 +101,7 @@ export default {
 .headers {
     display: flex;
     flex-direction: row;
-    justify-content: space-evenly;
+    justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid var(--border);
     height: 30px;

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -173,16 +173,15 @@ export default {
 <template>
   <div
     v-if="typeOption"
-    class="row"
+    class="rowNew"
   >
     <Select
-      class="mr-10"
       :mode="mode"
       :value="type"
       :disabled="true"
       :options="types"
     />
-    <div class="resource-availability mr-10">
+    <div class="resource-availability">
       <PercentageBar
         v-clean-tooltip="tooltip"
         class="percentage-bar"
@@ -208,13 +207,12 @@ export default {
   .resource-availability {
     align-self: center;
   }
-  .row {
+  .rowNew {
     display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
+    justify-content: space-between;
 
     & > * {
-      width: 100%;
+      width: 400px;
     }
   }
 </style>

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 },
@@ -53,14 +57,14 @@ export default {
 </script>
 <template>
   <div>
-    <div class="headers mb-10">
-      <div class="mr-10">
+    <div style="justify-content: right;" class="headers mb-10">
+      <div style="width: 400px;">
         <label>{{ t('resourceQuota.headers.resourceType') }}</label>
       </div>
-      <div class="mr-20">
+      <div style="width: 400px;">
         <label>{{ t('resourceQuota.headers.projectLimit') }}</label>
       </div>
-      <div class="mr-10">
+      <div style="width: 400px;">
         <label>{{ t('resourceQuota.headers.namespaceDefaultLimit') }}</label>
       </div>
     </div>

package/components/form/ResourceQuota/ProjectRow.vue

@@ -70,11 +70,11 @@ export default {
 <template>
   <div
     v-if="typeOption"
-    class="row"
+    style="justify-content: right;"
+    class="rowNew"
   >
     <Select
       :value="type"
-      class="mr-10"
       :mode="mode"
       :options="types"
       data-testid="projectrow-type-input"
@@ -82,7 +82,6 @@ export default {
     />
     <UnitInput
       :value="resourceQuotaLimit[type]"
-      class="mr-10"
       :mode="mode"
       :placeholder="typeOption.placeholder"
       :increment="typeOption.increment"
@@ -107,9 +106,8 @@ export default {
 </template>
 
 <style lang='scss' scoped>
-  .row {
+  .rowNew {
     display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
+    justify-content: space-between;
   }
 </style>

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>