dashboard-shell-shell 3.0.5-test.2 → 3.0.5-test.21

package/components/form/ResourceQuota/ProjectRow.vue

@@ -72,41 +72,47 @@ export default {
     v-if="typeOption"
     class="rowNew"
   >
-    <Select
-      :value="type"
-      :mode="mode"
-      :options="types"
-      data-testid="projectrow-type-input"
-      @update:value="updateType($event)"
-    />
-    <UnitInput
-      :value="resourceQuotaLimit[type]"
-      :mode="mode"
-      :placeholder="typeOption.placeholder"
-      :increment="typeOption.increment"
-      :input-exponent="typeOption.inputExponent"
-      :base-unit="typeOption.baseUnit"
-      :output-modifier="true"
-      data-testid="projectrow-project-quota-input"
-      @update:value="updateQuotaLimit('resourceQuota', type, $event)"
-    />
-    <UnitInput
-      :value="namespaceDefaultResourceQuotaLimit[type]"
-      :mode="mode"
-      :placeholder="typeOption.placeholder"
-      :increment="typeOption.increment"
-      :input-exponent="typeOption.inputExponent"
-      :base-unit="typeOption.baseUnit"
-      :output-modifier="true"
-      data-testid="projectrow-namespace-quota-input"
-      @update:value="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
-    />
+    <div style="width: 450px;">
+      <Select
+        :value="type"
+        :mode="mode"
+        :options="types"
+        data-testid="projectrow-type-input"
+        @update:value="updateType($event)"
+      />
+    </div>
+    <div style="width: 450px;">
+      <UnitInput
+        :value="resourceQuotaLimit[type]"
+        :mode="mode"
+        :placeholder="typeOption.placeholder"
+        :increment="typeOption.increment"
+        :input-exponent="typeOption.inputExponent"
+        :base-unit="typeOption.baseUnit"
+        :output-modifier="true"
+        data-testid="projectrow-project-quota-input"
+        @update:value="updateQuotaLimit('resourceQuota', type, $event)"
+      />
+    </div>
+    <div style="width: 450px;">
+      <UnitInput
+        :value="namespaceDefaultResourceQuotaLimit[type]"
+        :mode="mode"
+        :placeholder="typeOption.placeholder"
+        :increment="typeOption.increment"
+        :input-exponent="typeOption.inputExponent"
+        :base-unit="typeOption.baseUnit"
+        :output-modifier="true"
+        data-testid="projectrow-namespace-quota-input"
+        @update:value="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
+      />
+    </div>
   </div>
 </template>
 
 <style lang='scss' scoped>
   .rowNew {
     display: flex;
-    justify-content: space-between;
+    justify-content: left;
   }
 </style>

package/components/form/ResourceSelector.vue

@@ -125,7 +125,7 @@ export default {
       </div>
     </div>
     <div class="row">
-      <div class="col span-12">
+      <div class="span-12">
         <Banner :color="(matchingResources.none ? 'warning' : 'success')">
           <span v-clean-html="t('generic.selectors.matchingResources.matchesSome', matchingResources)" />
         </Banner>

package/components/form/Security.vue

@@ -157,7 +157,6 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer" />
 
     <div>
       <div class="row">
@@ -191,11 +190,10 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer" />
 
     <div
       data-testid="input-security-runAsUser"
-      class="row mb-10"
+      class="row"
     >
       <div class="col span-6">
         <LabeledInput

package/components/form/Select.vue

@@ -392,6 +392,10 @@ export default {
   .unlabeled-select {
     position: relative;
 
+    :deep() .vs__actions:after {
+      padding-top: 2px;
+    }
+
     :deep() .v-select.select-input-view {
       .vs__actions {
         visibility: hidden;
@@ -409,7 +413,8 @@ export default {
 
     :deep() .vs__selected-options {
       display: flex;
-      margin: 3px;
+      align-items: center;
+      margin: 0px;
 
       .vs__selected {
           width: initial;

package/components/form/ServiceNameSelect.vue

@@ -120,11 +120,8 @@ export default {
 
 <template>
   <div>
-    <div class="spacer" />
-    <div class="row mb-10">
-      <h3 class="col span-6">
-        {{ t('workload.serviceAccountName.label') }}
-      </h3>
+    <div class="row mb-10 mt-40">
+      <h3>{{ t('workload.serviceAccountName.label') }}</h3>
     </div>
     <div class="row span-6">
       <LabeledSelect

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

@@ -112,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,12 @@ 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;
+  .unlabeled-select{
+    width: auto;
+  }
 }
 
 .rule {
@@ -308,10 +311,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;