dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.2

package/components/form/ServicePorts.vue

@@ -125,7 +125,7 @@ export default {
 <template>
   <div>
     <div v-if="rows.length">
-      <div
+      <!-- <div
         class="ports-headers"
         :class="{'show-protocol':showProtocol, 'show-node-port':showNodePort}"
       >
@@ -169,77 +169,13 @@ export default {
           v-if="showRemove"
           class="remove"
         />
-      </div>
+      </div> -->
       <div
         v-for="(row, idx) in rows"
         :key="idx"
         class="ports-row"
         :class="{'show-protocol':showProtocol, 'show-node-port':showNodePort}"
       >
-        <div
-          v-if="padLeft"
-          class="left"
-        />
-        <div class="port-name">
-          <span v-if="isView">{{ row.name }}</span>
-          <input
-            v-else
-            ref="port-name"
-            v-model.number="row.name"
-            type="text"
-            :placeholder="t('servicePorts.rules.name.placeholder')"
-            @input="queueUpdate"
-          >
-        </div>
-        <div class="port">
-          <span v-if="isView">{{ row.port }}</span>
-          <input
-            v-else
-            ref="port"
-            v-model.number="row.port"
-            type="number"
-            min="1"
-            max="65535"
-            :placeholder="t('servicePorts.rules.listening.placeholder')"
-            @input="queueUpdate"
-          >
-        </div>
-        <div
-          v-if="showProtocol"
-          class="port-protocol"
-        >
-          <span v-if="isView">{{ row.protocol }}</span>
-          <Select
-            v-else
-            v-model:value="row.protocol"
-            :options="protocolOptions"
-            @update:value="queueUpdate"
-          />
-        </div>
-        <div class="target-port">
-          <span v-if="isView">{{ row.targetPort }}</span>
-          <input
-            v-else
-            v-model="row.targetPort"
-            :placeholder="t('servicePorts.rules.target.placeholder')"
-            @input="queueUpdate"
-          >
-        </div>
-        <div
-          v-if="showNodePort"
-          class="node-port"
-        >
-          <span v-if="isView">{{ row.nodePort }}</span>
-          <input
-            v-else
-            v-model.number="row.nodePort"
-            type="number"
-            min="1"
-            max="65535"
-            :placeholder="t('servicePorts.rules.node.placeholder')"
-            @input="queueUpdate"
-          >
-        </div>
         <div
           v-if="showRemove"
           class="remove"
@@ -252,7 +188,106 @@ export default {
             <t k="generic.remove" />
           </button>
         </div>
+        <div class="flex">
+          <span class="port-name">
+            <t k="servicePorts.rules.name.label" />
+          </span>
+          <div class="port-name">
+            <span v-if="isView">{{ row.name }}</span>
+            <input
+              v-else
+              ref="port-name"
+              v-model.number="row.name"
+              type="text"
+              :placeholder="t('servicePorts.rules.name.placeholder')"
+              @input="queueUpdate"
+            >
+          </div>
+        </div>
+        <div class="flex">
+          <span class="port">
+            <t k="servicePorts.rules.listening.label" />
+            <i
+              v-clean-tooltip="t('servicesPage.listeningPorts')"
+              class="icon icon-info flex"
+            />
+            <span class="text-error">*</span>
+          </span>
+          <div class="port">
+            <span v-if="isView">{{ row.port }}</span>
+            <input
+              v-else
+              ref="port"
+              v-model.number="row.port"
+              type="number"
+              min="1"
+              max="65535"
+              :placeholder="t('servicePorts.rules.listening.placeholder')"
+              @input="queueUpdate"
+            >
+          </div>
+        </div>
+        <div class="flex" v-if="showProtocol">
+          <span
+            class="port-protocol"
+          >
+            <t k="servicePorts.rules.protocol.label" />
+          </span>
+          <div
+            class="port-protocol"
+          >
+            <span v-if="isView">{{ row.protocol }}</span>
+            <Select
+              v-else
+              v-model:value="row.protocol"
+              :options="protocolOptions"
+              @update:value="queueUpdate"
+            />
+          </div>
+        </div>
+        <div class="flex">
+          <span class="target-port">
+            <t k="servicePorts.rules.target.label" />
+            <i
+              v-clean-tooltip="t('servicesPage.targetPorts')"
+              class="icon icon-info flex"
+            />
+            <span class="text-error">*</span>
+
+          </span>
+          <div class="target-port">
+            <span v-if="isView">{{ row.targetPort }}</span>
+            <input
+              v-else
+              v-model="row.targetPort"
+              :placeholder="t('servicePorts.rules.target.placeholder')"
+              @input="queueUpdate"
+            >
+          </div>
+        </div>
+        <div class="flex" v-if="showNodePort">
+          <span
+            class="node-port"
+          >
+            <t k="servicePorts.rules.node.label" />
+          </span>
+          <div
+            class="node-port"
+          >
+            <span v-if="isView">{{ row.nodePort }}</span>
+            <input
+              v-else
+              v-model.number="row.nodePort"
+              type="number"
+              min="1"
+              max="65535"
+              :placeholder="t('servicePorts.rules.node.placeholder')"
+              @input="queueUpdate"
+            >
+          </div>
+        </div>
         <Error
+          style="margin-bottom: 24px;"
           :value="{...row, idx}"
           :rules="rules"
         />
@@ -286,22 +321,60 @@ export default {
   }
 
   .ports-headers, .ports-row{
-    display: grid;
-    grid-column-gap: $column-gutter;
-    margin-bottom: 10px;
+    // display: grid;
+    // grid-column-gap: $column-gutter;
+    // margin-bottom: 10px;
+    // align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    // &.show-protocol{
+    //   grid-template-columns: 23% 23% 10% 15% 15% 10%;
+    //   &:not(.show-node-port){
+    //     grid-template-columns: 31% 31% 10% 15% 10%;
+    //   }
+    // }
+    // &.show-node-port:not(.show-protocol){
+    //   grid-template-columns: 28% 28% 15% 15% 10%;
+    // }
+  }
+  .flex{
+    display: flex;
     align-items: center;
+    margin-bottom: 24px;
+    >span:nth-child(1){
+      min-width: 160px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+    }
 
-    &.show-protocol{
-      grid-template-columns: 23% 23% 10% 15% 15% 10%;
-      &:not(.show-node-port){
-        grid-template-columns: 31% 31% 10% 15% 10%;
+    .port-name:not(span){
+      width: 400px;
+
+    }
+    .port:not(span){
+      width: 400px;
+      INPUT{
+        height: 32px;
+        padding-left: 11px;
       }
     }
-    &.show-node-port:not(.show-protocol){
-      grid-template-columns: 28% 28% 15% 15% 10%;
+    .target-port:not(span){
+      width: 400px;
+    }
+    .node-port:not(span){
+      width: 400px;
+      INPUT{
+        height: 32px;
+        padding-left: 11px;
+      }
     }
   }
 
+  .flex:nth-last-child{
+    margin-bottom: 0px;
+  }
   .ports-headers {
     color: var(--input-label);
   }
@@ -312,6 +385,7 @@ export default {
 
   .remove BUTTON {
     padding: 0px;
+    min-width: auto;
   }
 
   .ports-row {

package/components/form/SimpleSecretSelector.vue

@@ -76,8 +76,11 @@ export default {
       key:                props.initialKey,
       none:               NONE,
       SECRET,
+      /**
+       * Of type @ResourceLabeledSelectSettings
+       */
       allSecretsSettings: {
-        mapResult: (secrets) => {
+        updateResources: (secrets) => {
           const allSecretsInNamespace = secrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
           const mappedSecrets = this.mapSecrets(allSecretsInNamespace.sort((a, b) => a.name.localeCompare(b.name)));
 
@@ -86,9 +89,12 @@ export default {
           return mappedSecrets;
         }
       },
+      /**
+       * Of type @ResourceLabeledSelectPaginateSettings
+       */
       paginateSecretsSetting: {
         requestSettings: this.paginatePageOptions,
-        mapResult:       (secrets) => {
+        updateResources: (secrets) => {
           const mappedSecrets = this.mapSecrets(secrets);
 
           this.secrets = secrets; // We need the key from the selected secret. When paginating we won't touch the store, so just pass back here
@@ -151,11 +157,18 @@ export default {
     paginatePageOptions(opts) {
       const { opts: { filter } } = opts;
 
-      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+      const filters = !!filter ? [PaginationParamFilter.createSingleField({
+        field: 'metadata.name', value: filter, exact: false, equals: true
+      })] : [];
 
       filters.push(
         PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: this.namespace }),
-        PaginationParamFilter.createSingleField({ field: 'metadata.fields.1', value: this.types.join(',') })
+        PaginationParamFilter.createMultipleFields(this.types.map((t) => ({
+          field:  'metadata.fields.1',
+          equals: true,
+          exact:  true,
+          value:  t
+        })))
       );
 
       return {

package/components/form/Taints.vue

@@ -30,7 +30,19 @@ export default {
     effectValues: {
       type:    Object,
       default: () => DEFAULT_EFFECT_VALUES
-    }
+    },
+    title: {
+      type:    String,
+      default: ''
+    },
+    addIcon: {
+      type:    String,
+      default: '',
+    },
+    addClass: {
+      type:    String,
+      default: '',
+    },
   },
 
   data() {
@@ -38,6 +50,10 @@ export default {
   },
 
   computed: {
+    _title() {
+      return this.title || this.t('tableHeaders.taints');
+    },
+
     localValue: {
       get() {
         return this.value;
@@ -60,7 +76,7 @@ export default {
     <KeyValue
       :value="value"
       data-testid="taints-keyvalue"
-      :title="t('tableHeaders.taints')"
+      :title="_title"
       :mode="mode"
       :as-map="false"
       :read-allowed="false"
@@ -70,6 +86,8 @@ export default {
       :extra-columns="['effect']"
       :preserve-keys="['effect']"
       :add-label="t('labels.addTaint')"
+      :add-icon="addIcon"
+      :add-class="addClass"
       :disabled="disabled"
       @update:value="(e) => $emit('update:value', e)"
     >
@@ -82,6 +100,7 @@ export default {
           v-model:value="row.effect"
           :data-testid="`taints-effect-row-${i}`"
           :options="effectOptions"
+          :mode="mode"
           :disabled="disabled"
           class="compact-select"
           @update:value="queueUpdate"
@@ -93,6 +112,7 @@ export default {
 
 <style lang="scss" scoped>
   .compact-select {
-    height: 40px;
+    height: 32px;
+    overflow: hidden;
   }
 </style>

package/components/form/Tolerations.vue

@@ -202,7 +202,7 @@ export default {
       :key="index"
       class="rule"
     >
-      <div class="col">
+      <div>
         <LabeledInput
           v-model:value="rule.key"
           :mode="mode"
@@ -211,7 +211,7 @@ export default {
           @update:value="update"
         />
       </div>
-      <div class="col">
+      <div>
         <Select
           id="operator"
           v-model:value="rule.operator"
@@ -222,7 +222,7 @@ export default {
         />
       </div>
       <template v-if="rule.operator==='Exists'">
-        <div class="col">
+        <div>
           <LabeledInput
             value="n/a"
             :mode="mode"
@@ -232,7 +232,7 @@ export default {
         </div>
       </template>
       <template v-else>
-        <div class="col">
+        <div>
           <LabeledInput
             v-model:value="rule.value"
             :mode="mode"
@@ -242,7 +242,7 @@ export default {
           />
         </div>
       </template>
-      <div class="col">
+      <div>
         <Select
           v-model:value="rule.effect"
           :options="effectOpts"
@@ -251,7 +251,7 @@ export default {
           @update:value="e=>updateEffect(e, rule)"
         />
       </div>
-      <div class="col">
+      <div>
         <UnitInput
           v-model:value="rule.tolerationSeconds"
           :disabled="rule.effect !== 'NoExecute'"
@@ -262,7 +262,7 @@ export default {
           @update:value="update"
         />
       </div>
-      <div class="col remove">
+      <div class="remove">
         <button
           v-if="!isView"
           type="button"
@@ -294,9 +294,13 @@ export default {
 
 .rule, .toleration-headers{
   display: grid;
-  grid-template-columns: 20% 10% 20% 15% 20% 15%;
+  grid-template-columns: 13% 13% 13% 13% 13% 13%;
   grid-gap: 10px;
   align-items: center;
+  margin-bottom: 10px;
+  .unlabeled-select{
+    width: auto;
+  }
 }
 
 .rule {
@@ -308,10 +312,10 @@ export default {
 
 .toleration-headers SPAN {
   color: var(--input-label);
-  margin-bottom: 10px;
 }
 .remove BUTTON {
   padding: 0px;
+  min-width: auto;
 }
 .height-adjust-input {
   min-height: 42px;

package/components/form/UnitInput.vue

@@ -2,6 +2,7 @@
 import { parseSi, formatSi, UNITS, FRACTIONAL } from '@shell/utils/units';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { _EDIT } from '@shell/config/query-params';
+import { generateRandomAlphaString } from '@shell/utils/string';
 
 export default {
   components: { LabeledInput },
@@ -134,6 +135,22 @@ export default {
       type:    Boolean,
       default: false,
     },
+
+    disabled: {
+      type:    Boolean,
+      default: false,
+    },
+    /**
+     * The sub-label for the Labeled Input.
+     */
+    subLabel: {
+      type:    String,
+      default: null
+    }
+  },
+
+  data() {
+    return { describedById: `unit-describedbyid-${ generateRandomAlphaString(12) }` };
   },
 
   computed: {
@@ -227,6 +244,7 @@ export default {
     type="number"
     :min="min"
     :mode="mode"
+    :disabled="disabled"
     :label="label"
     :delay="delay"
     :label-key="labelKey"
@@ -235,12 +253,15 @@ export default {
     :required="required"
     :placeholder="placeholder"
     :hide-arrows="hideArrows"
+    :aria-describedby="displayUnit ? describedById : undefined"
+    :sub-label="subLabel"
     @update:value="update"
     @blur="update($event.target.value)"
   >
     <template #suffixNew>
       <div
         v-if="displayUnit"
+        :id="describedById"
         class="addonNew"
         :class="{'with-tooltip': tooltip || tooltipKey}"
       >