dashboard-shell-shell 1.0.113 → 1.0.115

package/components/form/Footer.vue

@@ -91,10 +91,9 @@ export default defineComponent({
 
 <style lang='scss'>
   .buttons {
-    /* display: grid;
+    display: grid;
     grid-template-areas:  "left right";
-    grid-template-columns: "min-content auto"; */
-    display: flex;
+    grid-template-columns: "min-content auto";
 
     .left {
       grid-area: left;
@@ -106,13 +105,11 @@ export default defineComponent({
     }
 
     .right {
-      /* grid-area: right;
-      text-align: right; */
-      display: flex;
+      grid-area: right;
+      text-align: right;
 
       .btn, button {
-        /* margin: 0 0 0 $column-gutter; */
-        margin: 0 10px 0 0px;
+        margin: 0 0 0 $column-gutter;
       }
     }
   }

package/components/form/HealthCheck.vue

@@ -18,10 +18,10 @@ export default {
   },
 
   data() {
+    const { readinessProbe, livenessProbe, startupProbe } = this.value;
+
     return {
-      readinessProbe: this.value.readinessProbe,
-      livenessProbe:  this.value.livenessProbe,
-      startupProbe:   this.value.startupProbe,
+      readinessProbe, livenessProbe, startupProbe
     };
   },
 

package/components/form/HookOption.vue

@@ -28,18 +28,23 @@ export default {
   },
 
   data() {
+    const selectHook = null;
+
+    const defaultExec = { exec: { command: [] } };
+    const defaultHttpGet = {
+      httpGet: {
+        host:        '',
+        path:        '',
+        port:        null,
+        scheme:      '',
+        httpHeaders: null
+      }
+    };
+
     return {
-      selectHook:     null,
-      defaultExec:    { exec: { command: [] } },
-      defaultHttpGet: {
-        httpGet: {
-          host:        '',
-          path:        '',
-          port:        null,
-          scheme:      '',
-          httpHeaders: null
-        }
-      },
+      selectHook,
+      defaultExec,
+      defaultHttpGet,
       schemeOptions: ['HTTP', 'HTTPS']
     };
   },

package/components/form/KeyValue.vue

@@ -277,7 +277,7 @@ export default {
       const gap = this.canRemove ? ' 50px' : '';
       const size = 2 + this.extraColumns.length;
 
-      return `grid-template-columns: repeat(${ size }, 400px)${ gap };`;
+      return `grid-template-columns: repeat(${ size }, 1fr)${ gap };`;
     },
     usedKeyOptions() {
       return this.rows.map((row) => row[this.keyName]);
@@ -760,7 +760,7 @@ export default {
                     :disabled="disabled || isProtected(row.key)"
                     :mode="mode"
                     :placeholder="_valuePlaceholder"
-                    :min-height="32"
+                    :min-height="40"
                     :spellcheck="false"
                     :aria-label="t('generic.ariaLabel.value', {index: i})"
                     @update:value="queueUpdate"
@@ -823,7 +823,7 @@ export default {
                   type="button"
                   role="button"
                   :disabled="isView || isProtected(row.key) || disabled"
-                  :aria-label="`${removeLabel || t('generic.remove')} ${ i+1 }`"
+                  :aria-label="removeLabel || t('generic.remove')"
                   class="btn role-link"
                   @click="remove(i)"
                 >
@@ -837,7 +837,7 @@ export default {
     </div>
     <div
       v-if="(addAllowed || readAllowed) && !isView"
-      class="footer mt-10"
+      class="footer mt-20"
     >
       <slot
         name="add"
@@ -880,8 +880,8 @@ export default {
   }
   .kv-container {
     display: grid;
-    /* align-items: center; */
-    column-gap: 10px;
+    align-items: center;
+    column-gap: 20px;
     label {
       margin-bottom: 0;
     }
@@ -905,9 +905,6 @@ export default {
       }
       &.value textarea {
         padding: 10px 10px 10px 10px;
-        min-height:32px;
-        line-height: 12px; 
-        border: solid var(--border-width) var(--input-border);       
       }
 
       .text-monospace:not(.conceal) {
@@ -946,14 +943,8 @@ export default {
     }
   }
   input {
-    height: 32px;
+    height: 40px;
     line-height: 1;
-    border: solid var(--border-width) var(--input-border);
-    padding: 4px 11px;
-    &:hover{
-      border: solid var(--border-width) var(--input-border);
-      box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
-    }
   }
   .footer {
     .protip {

package/components/form/LabeledSelect.vue

@@ -50,10 +50,6 @@ export default {
       default: false,
       type:    Boolean
     },
-    isLabel: {
-      default: false,
-      type:    Boolean
-    },
     localizedLabel: {
       default: false,
       type:    Boolean
@@ -231,7 +227,7 @@ export default {
     },
 
     positionDropdown(dropdownList, component, { width }) {
-      calculatePosition(dropdownList, component, width, this.placement, 'label', this.isLabel);
+      calculatePosition(dropdownList, component, width, this.placement);
     },
 
     get,
@@ -282,25 +278,6 @@ export default {
 </script>
 
 <template>
-   <div style="display: flex;">
-    <div
-      :class="{ 'labeled-container': true, raised, empty, [mode]: true, 'is-lable': isLabel }"
-      :style="{ border: 'none', width: '160px',lineHeight: '32px' }"
-    >
-      <label v-if="hasLabel" :id="`labeled-select-uid-${uid}`">
-        <t
-          v-if="labelKey"
-          :k="labelKey"
-        />
-        <template v-else-if="label">{{ label }}</template>
-
-        <span
-          v-if="requiredField"
-          class="required"
-        >*</span>
-      </label>
-    </div>
-    <!-- label -->
   <div
     ref="select"
     class="labeled-select"
@@ -319,13 +296,12 @@ export default {
       }
     ]"
     :tabindex="isView || disabled ? -1 : 0"
-    role="listbox"
     @click="focusSearch"
     @keydown.enter="focusSearch"
     @keydown.down.prevent="focusSearch"
     @keydown.space.prevent="focusSearch"
   >
-    <!-- <div
+    <div
       :class="{ 'labeled-container': true, raised, empty, [mode]: true }"
       :style="{ border: 'none' }"
     >
@@ -344,7 +320,7 @@ export default {
           class="required"
         >*</span>
       </label>
-    </div> -->
+    </div>
     <v-select
       ref="select-input"
       :aria-labelledby="hasLabel ? `labeled-select-uid-${uid}` : ''"
@@ -368,7 +344,7 @@ export default {
       :modelValue="value != null && !loading ? value : ''"
       :dropdown-should-open="dropdownShouldOpen"
       :tabindex="-1"
-      role="listitem"
+      role="listbox"
       @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
       @search:blur="onBlur"
       @search:focus="onFocus"
@@ -378,7 +354,6 @@ export default {
       @option:selecting="$emit('selecting', $event)"
       @option:deselecting="$emit('deselecting', $event)"
     >
-    
       <template #option="option">
         <template v-if="showTagPrompts">
           <div class="only-user-opts">
@@ -398,9 +373,9 @@ export default {
             </div>
           </div>
         </template>
-        <!-- <template v-else-if="option.kind === 'divider'">
-          <hr role="none">
-        </template> -->
+        <template v-else-if="option.kind === 'divider'">
+          <hr>
+        </template>
         <template v-else-if="option.kind === 'highlighted'">
           <div class="option-kind-highlighted">
             {{ option.label }}
@@ -491,7 +466,6 @@ export default {
       :value="validationMessage"
     />
   </div>
-  </div>
 </template>
 
 <style lang='scss' scoped>
@@ -501,11 +475,7 @@ export default {
   // Prevent namespace field from wiggling or changing
   // height when it is toggled from a LabeledInput to a
   // LabeledSelect.
-  &:deep() .vs__actions:after {
-      padding-top: 10px;
-    }
   padding-bottom: 1px;
-  /* flex: 1; */
 
   &.no-label.compact-input {
     :deep() .vs__actions:after {
@@ -519,7 +489,7 @@ export default {
 
   &.no-label:not(.compact-input) {
     height: $input-height;
-    padding-top: 0px;
+    padding-top: 4px;
 
     :deep() .vs__actions:after {
       top: 0;
@@ -581,7 +551,6 @@ export default {
 
   &.taggable {
     :deep() .vs__selected-options {
-
       padding: 3px 0;
       .vs__selected {
         border-color: var(--accent-btn);
@@ -607,7 +576,7 @@ export default {
   }
 
   :deep() .vs__selected-options {
-    margin-top: 0px;
+    margin-top: -5px;
   }
 
   :deep() .v-select:not(.vs--single) {
@@ -619,7 +588,7 @@ export default {
   :deep() .vs__actions {
     &:after {
       position: relative;
-      top: 0px;
+      top: -10px;
     }
   }
 
@@ -657,21 +626,73 @@ export default {
   }
 }
 
-// Styling for option group badge
-.vs__dropdown-menu .vs__dropdown-option .vs__option-kind-group {
-  display: flex;
-  > b {
-    flex: 1;
+$icon-size: 18px;
+
+// This represents the drop down area. Note - it might be attached to body and NOT the parent label select div
+.vs__dropdown-menu {
+
+  // Styling for individual options
+  .vs__dropdown-option .vs__option-kind {
+    &-group {
+      display: flex;
+      align-items: center;
+
+      i { // icon
+        width: $icon-size;
+      }
+
+      > b { // group label
+        flex: 1;
+      }
+
+      > div { // badge
+        background-color: var(--primary);
+        border-radius: 4px;
+        color: var(--primary-text);
+        font-size: 12px;
+        height: 18px;
+        line-height: 18px;
+        margin-top: 1px;
+        padding: 0 10px;
+      }
+    }
+
+    &.has-icon {
+      padding-left: $icon-size;
+    }
   }
-  > div {
-    background-color: var(--primary);
-    border-radius: 4px;
-    color: var(--primary-text);
-    font-size: 12px;
-    height: 18px;
-    line-height: 18px;
-    margin-top: 1px;
-    padding: 0 10px;
+
+    &.has-icon .vs__option-kind div{
+    padding-left: $icon-size;
+  }
+
+  .pagination-slot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-top: 5px;
+
+    .load-more {
+      display: flex;
+      align-items: center;
+      height: 19px;
+
+      a {
+        cursor: pointer;
+      }
+    }
+
+    .count {
+      position: absolute;
+      right: 10px;
+    }
+  }
+
+  .no-options-slot .paginating {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 
@@ -699,8 +720,4 @@ export default {
     margin: 0px calc(-#{$input-padding-sm}/2);
     padding: 3px 20px;
 }
-
-.is-lable{
-  width: 0px !important;
-}
 </style>

package/components/form/LifecycleHooks.vue

@@ -24,10 +24,10 @@ export default {
   },
 
   data() {
+    const { postStart, preStop } = this.value;
+
     return {
-      postStart:   this.value.postStart,
-      preStop:     this.value.preStop,
-      hookOptions: ['postStart', 'preStop']
+      postStart, preStop, hookOptions: ['postStart', 'preStop']
     };
   },
 

package/components/form/MatchExpressions.vue

@@ -70,14 +70,6 @@ export default {
   },
 
   data() {
-    return {
-      ops:    [],
-      rules:  [],
-      custom: []
-    };
-  },
-
-  created() {
     const t = this.$store.getters['i18n/t'];
 
     const podOptions = [
@@ -96,6 +88,8 @@ export default {
       { label: t('workload.scheduling.affinity.matchExpressions.greaterThan'), value: 'Gt' },
     ];
 
+    const ops = this.type === NODE ? nodeOptions : podOptions;
+
     let rules;
 
     // special case for matchFields and matchExpressions
@@ -133,8 +127,11 @@ export default {
       rules.push(newRule);
     }
 
-    this.rules = rules;
-    this.ops = this.type === NODE ? nodeOptions : podOptions;
+    return {
+      ops,
+      rules,
+      custom: []
+    };
   },
 
   computed: {
@@ -245,10 +242,6 @@ export default {
 
 <template>
   <div>
-    <slot
-      v-if="rules.length"
-      name="header"
-    />
     <button
       v-if="showRemove && !isView"
       type="button"
@@ -425,20 +418,14 @@ export default {
     justify-content: center;
   }
 
-  .match-expression-header{
-    margin-top: 24px;
-  }
   .match-expression-row, .match-expression-header {
-    /* display: grid; */
-    display: flex;
-    /* grid-template-columns: 1fr 1fr 1fr; */
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
     margin: 5px 0;
-    /* grid-gap: $column-gutter; */
-    grid-gap: 10px;
+    grid-gap: $column-gutter;
 
     & > LABEL {
       margin: 0;
-      width: 400px;
     }
 
     &:not(.view){
@@ -447,13 +434,7 @@ export default {
   }
 
   .match-expression-row > div > input {
-    min-height: 32px !important;
-    border: solid var(--border-width) var(--input-border);
-    padding: 4px 11px;
-    width: 400px;
-    &:hover{
-      box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
-    }
+    min-height: 40px !important;
   }
   .match-expression-row-matching, .match-expression-header-matching {
     grid-template-columns: 1fr 1fr 1fr 1fr;
@@ -462,8 +443,4 @@ export default {
       grid-template-columns: 1fr 1fr 1fr 1fr 100px;
     }
   }
-
-  .view-item-value{
-    width: 400px;
-  }
-</style>
+</style>