dashboard-shell-shell 3.0.5-test.4 → 3.0.5-test.6

package/components/form/LabeledSelect.vue

@@ -53,10 +53,6 @@ export default {
       default: false,
       type:    Boolean
     },
-    isLabel: {
-      default: false,
-      type:    Boolean
-    },
     localizedLabel: {
       default: false,
       type:    Boolean
@@ -118,15 +114,7 @@ export default {
     noOptionsLabelKey: {
       type:    String,
       default: 'labelSelect.noOptions.empty'
-    },
-    selectWidth: {
-      type: String,
-      default: ''
-    },
-    leftWidth: {
-      type:    String,
-      default: ''
-    },
+    }
   },
 
   setup() {
@@ -269,7 +257,7 @@ export default {
     },
 
     positionDropdown(dropdownList, component, { width }) {
-      calculatePosition(dropdownList, component, width, this.placement, this.selectWidth===''?'label': this.selectWidth, this.isLabel, this.leftWidth);
+      calculatePosition(dropdownList, component, width, this.placement);
     },
 
     get,
@@ -324,12 +312,42 @@ export default {
 </script>
 
 <template>
-  <div style="display: flex;">
+  <div
+    :id="hasLabel ? labeledSelectLabelId : undefined"
+    ref="select"
+    class="labeled-select"
+    :class="[
+      $attrs.class,
+      {
+        disabled: isView || disabled,
+        focused,
+        [mode]: true,
+        [status]: status,
+        taggable: $attrs.taggable,
+        taggable: $attrs.multiple,
+        hoverable: hoverTooltip,
+        'compact-input': isCompact,
+        'no-label': !hasLabel
+      }
+    ]"
+    :tabindex="isView || disabled ? -1 : 0"
+    role="combobox"
+    :aria-expanded="isOpen"
+    :aria-describedby="$attrs['aria-describedby'] || undefined"
+    :aria-required="requiredField"
+    @click="clickSelect"
+    @keydown.self.enter="clickSelect"
+    @keydown.self.down.prevent="clickSelect"
+    @keydown.self.space.prevent="clickSelect"
+  >
     <div
-      :class="{ 'labeled-container': true, raised, empty, [mode]: true, 'is-lable': isLabel }"
-      :style="{ border: 'none', width: selectWidth===''?'160px':selectWidth,lineHeight: '32px' }"
+      :class="{ 'labeled-container': true, raised, empty, [mode]: true }"
+      :style="{ border: 'none' }"
     >
-      <label v-if="hasLabel" :id="`labeled-select-uid-${uid}`">
+      <label
+        v-if="hasLabel"
+        :for="labeledSelectLabelId"
+      >
         <t
           v-if="labelKey"
           :k="labelKey"
@@ -339,186 +357,157 @@ export default {
         <span
           v-if="requiredField"
           class="required"
+          :aria-hidden="true"
         >*</span>
       </label>
     </div>
-    <!-- label -->
-    <div
-      :id="hasLabel ? labeledSelectLabelId : undefined"
-      ref="select"
-      class="labeled-select"
-      :class="[
-        $attrs.class,
-        {
-          disabled: isView || disabled,
-          focused,
-          [mode]: true,
-          [status]: status,
-          taggable: $attrs.taggable,
-          taggable: $attrs.multiple,
-          hoverable: hoverTooltip,
-          'compact-input': isCompact,
-          'no-label': !hasLabel
-        }
-      ]"
-      :tabindex="isView || disabled ? -1 : 0"
-      role="combobox"
-      :aria-expanded="isOpen"
-      :aria-describedby="$attrs['aria-describedby'] || undefined"
-      :aria-required="requiredField"
-      @click="clickSelect"
-      @keydown.self.enter="clickSelect"
-      @keydown.self.down.prevent="clickSelect"
-      @keydown.self.space.prevent="clickSelect"
+    <v-select
+      ref="select-input"
+      v-bind="filteredAttrs"
+      class="inline"
+      :close-on-select="false"
+      :append-to-body="appendToBody"
+      :calculate-position="positionDropdown"
+      :class="{ 'no-label': !(label || '').length}"
+      :clearable="clearable"
+      :disabled="isView || disabled || loading"
+      :get-option-key="getOptionKey"
+      :get-option-label="(opt) => getOptionLabel(opt)"
+      :label="optionLabel"
+      :options="_options"
+      :map-keydown="mappedKeys"
+      :placeholder="placeholder"
+      :reduce="(x) => reduce(x)"
+      :filterable="isFilterable"
+      :searchable="isSearchable"
+      :selectable="selectable"
+      :modelValue="value != null && !loading ? value : ''"
+      :dropdown-should-open="dropdownShouldOpen"
+      :tabindex="-1"
+      :uid="generatedUid"
+      :aria-label="'-'"
+      @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
+      @search:blur="onBlur"
+      @search:focus="onFocus"
+      @search="onSearch"
+      @open="onOpen"
+      @close="onClose"
+      @option:selecting="closeOnSelecting"
+      @option:selected="close"
+      @option:deselecting="$emit('deselecting', $event)"
+      @keydown.enter.stop
     >
-      <v-select
-        ref="select-input"
-        v-bind="filteredAttrs"
-        class="inline"
-        :close-on-select="false"
-        :append-to-body="appendToBody"
-        :calculate-position="positionDropdown"
-        :class="{ 'no-label': !(label || '').length}"
-        :clearable="clearable"
-        :disabled="isView || disabled || loading"
-        :get-option-key="getOptionKey"
-        :get-option-label="(opt) => getOptionLabel(opt)"
-        :label="optionLabel"
-        :options="_options"
-        :map-keydown="mappedKeys"
-        :placeholder="placeholder"
-        :reduce="(x) => reduce(x)"
-        :filterable="isFilterable"
-        :searchable="isSearchable"
-        :selectable="selectable"
-        :modelValue="value != null && !loading ? value : ''"
-        :dropdown-should-open="dropdownShouldOpen"
-        :tabindex="-1"
-        :uid="generatedUid"
-        :aria-label="'-'"
-        @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
-        @search:blur="onBlur"
-        @search:focus="onFocus"
-        @search="onSearch"
-        @open="onOpen"
-        @close="onClose"
-        @option:selecting="closeOnSelecting"
-        @option:selected="close"
-        @option:deselecting="$emit('deselecting', $event)"
-        @keydown.enter.stop
-      >
-        <template #option="option">
-          <template v-if="showTagPrompts">
-            <div class="only-user-opts">
-              {{ t('labeledSelect.pressEnter', {input:getOptionLabel(option.label)}) }}
-            </div>
-          </template>
-          <template v-else-if="option.kind === 'group'">
-            <div class="vs__option-kind-group">
-              <i
-                v-if="option.icon"
-                class="icon"
-                :class="{ [option.icon]: true}"
-              />
-              <b>{{ getOptionLabel(option) }}</b>
-              <div v-if="option.badge">
-                {{ option.badge }}
-              </div>
-            </div>
-          </template>
-          <template v-else-if="option.kind === 'divider'">
-            <hr role="none">
-          </template>
-          <template v-else-if="option.kind === 'highlighted'">
-            <div class="option-kind-highlighted">
-              {{ option.label }}
-            </div>
-          </template>
-          <div
-            v-else
-            class="vs__option-kind"
-            :class="{ 'has-icon' : hasGroupIcon}"
-            @mousedown="(e) => onClickOption(option, e)"
-          >
-            {{ getOptionLabel(option) }}
+      <template #option="option">
+        <template v-if="showTagPrompts">
+          <div class="only-user-opts">
+            {{ t('labeledSelect.pressEnter', {input:getOptionLabel(option.label)}) }}
+          </div>
+        </template>
+        <template v-else-if="option.kind === 'group'">
+          <div class="vs__option-kind-group">
             <i
-              v-if="option.error"
-              class="icon icon-warning pull-right"
-              style="font-size: 20px;"
+              v-if="option.icon"
+              class="icon"
+              :class="{ [option.icon]: true}"
             />
+            <b>{{ getOptionLabel(option) }}</b>
+            <div v-if="option.badge">
+              {{ option.badge }}
+            </div>
           </div>
         </template>
-        <!-- Pass down templates provided by the caller -->
-        <template
-          v-for="(_, slot) of $slots"
-          :key="slot"
-          #[slot]="scope"
+        <template v-else-if="option.kind === 'divider'">
+          <hr role="none">
+        </template>
+        <template v-else-if="option.kind === 'highlighted'">
+          <div class="option-kind-highlighted">
+            {{ option.label }}
+          </div>
+        </template>
+        <div
+          v-else
+          class="vs__option-kind"
+          :class="{ 'has-icon' : hasGroupIcon}"
+          @mousedown="(e) => onClickOption(option, e)"
         >
-          <slot
-            :name="slot"
-            v-bind="scope"
+          {{ getOptionLabel(option) }}
+          <i
+            v-if="option.error"
+            class="icon icon-warning pull-right"
+            style="font-size: 20px;"
           />
-        </template>
+        </div>
+      </template>
+      <!-- Pass down templates provided by the caller -->
+      <template
+        v-for="(_, slot) of $slots"
+        :key="slot"
+        #[slot]="scope"
+      >
+        <slot
+          :name="slot"
+          v-bind="scope"
+        />
+      </template>
 
-        <template #list-footer>
-          <div
-            v-if="canPaginate && totalResults && pages > 1"
-            class="pagination-slot"
-          >
-            <div class="load-more">
-              <i
-                v-if="paginating"
-                class="icon icon-spinner icon-spin"
-              />
-              <div v-else>
-                <a
-                  v-if="canLoadMore"
-                  @click="loadMore"
-                > {{ t('labelSelect.pagination.more') }}</a>
-              </div>
+      <template #list-footer>
+        <div
+          v-if="canPaginate && totalResults && pages > 1"
+          class="pagination-slot"
+        >
+          <div class="load-more">
+            <i
+              v-if="paginating"
+              class="icon icon-spinner icon-spin"
+            />
+            <div v-else>
+              <a
+                v-if="canLoadMore"
+                @click="loadMore"
+              > {{ t('labelSelect.pagination.more') }}</a>
             </div>
+          </div>
 
-            <div class="count">
-              {{ optionCounts }}
-            </div>
+          <div class="count">
+            {{ optionCounts }}
           </div>
-        </template>
-        <template #no-options="{ search }">
-          <div class="no-options-slot">
-            <template v-if="showTagPrompts">
-              <span v-if="!searching">{{ t('labeledSelect.startTyping') }}</span>
-            </template>
-            <div
-              v-else-if="paginating"
-              class="paginating"
-            >
-              <i class="icon icon-spinner icon-spin" />
-            </div>
-            <template v-else-if="search">
-              {{ t('labelSelect.noOptions.noMatch') }}
-            </template>
-            <template v-else>
-              {{ t(noOptionsLabelKey) }}
-            </template>
+        </div>
+      </template>
+      <template #no-options="{ search }">
+        <div class="no-options-slot">
+          <template v-if="showTagPrompts">
+            <span v-if="!searching">{{ t('labeledSelect.startTyping') }}</span>
+          </template>
+          <div
+            v-else-if="paginating"
+            class="paginating"
+          >
+            <i class="icon icon-spinner icon-spin" />
           </div>
-        </template>
-      </v-select>
-      <i
-        v-if="loading"
-        class="icon icon-spinner icon-spin icon-lg"
-      />
-      <LabeledTooltip
-        v-if="tooltip && !focused"
-        :hover="hoverTooltip"
-        :value="tooltip"
-        :status="status"
-      />
-      <LabeledTooltip
-        v-if="!!validationMessage"
-        :hover="hoverTooltip"
-        :value="validationMessage"
-      />
-    </div>
+          <template v-else-if="search">
+            {{ t('labelSelect.noOptions.noMatch') }}
+          </template>
+          <template v-else>
+            {{ t(noOptionsLabelKey) }}
+          </template>
+        </div>
+      </template>
+    </v-select>
+    <i
+      v-if="loading"
+      class="icon icon-spinner icon-spin icon-lg"
+    />
+    <LabeledTooltip
+      v-if="tooltip && !focused"
+      :hover="hoverTooltip"
+      :value="tooltip"
+      :status="status"
+    />
+    <LabeledTooltip
+      v-if="!!validationMessage"
+      :hover="hoverTooltip"
+      :value="validationMessage"
+    />
   </div>
 </template>
 
@@ -530,9 +519,6 @@ export default {
   // height when it is toggled from a LabeledInput to a
   // LabeledSelect.
   padding-bottom: 1px;
-  &:deep() .vs__actions:after {
-    padding-top: 10px;
-  }
 
   &.no-label.compact-input {
     :deep() .vs__actions:after {
@@ -546,7 +532,7 @@ export default {
 
   &.no-label:not(.compact-input) {
     height: $input-height;
-    padding-top: 0px;
+    padding-top: 4px;
 
     :deep() .vs__actions:after {
       top: 0;
@@ -633,7 +619,7 @@ export default {
   }
 
   :deep() .vs__selected-options {
-    margin-top: 0px;
+    margin-top: -5px;
   }
 
   :deep() .v-select:not(.vs--single) {
@@ -645,7 +631,7 @@ export default {
   :deep() .vs__actions {
     &:after {
       position: relative;
-      top: 0px;
+      top: -10px;
     }
   }
 
@@ -683,21 +669,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;
   }
 }
 
@@ -725,13 +763,4 @@ export default {
     margin: 0px calc(-#{$input-padding-sm}/2);
     padding: 3px 20px;
 }
-
-.is-lable{
-  width: 0px !important;
-}
-
-.gafanana-select{
-  width: 300px;
-
-}
 </style>

package/components/form/Labels.vue

@@ -162,9 +162,9 @@ export default {
     <div :class="defaultSectionClass">
       <div class="labels">
         <div class="labels__header">
-          <div v-if="showLabelTitle">
+          <h3 v-if="showLabelTitle">
             <t k="labels.labels.title" />
-          </div>
+          </h3>
           <ToggleSwitch
             v-if="showToggler"
             v-model:value="toggler"
@@ -172,7 +172,7 @@ export default {
             :on-label="t('labels.labels.show')"
           />
         </div>
-        <p class="mb-20">
+        <p class="mt-10 mb-10">
           <t k="labels.labels.description" />
         </p>
         <div :class="columnsClass">

package/components/form/MatchExpressions.vue

@@ -344,7 +344,7 @@ export default {
       <div
         :data-testid="`input-match-expression-key-${index}`"
       >
-        <div v-if="isView" class="view-item-value">
+        <div v-if="isView">
           {{ row.key }}
         </div>
         <input
@@ -367,7 +367,7 @@ export default {
       <div
         :data-testid="`input-match-expression-operator-${index}`"
       >
-        <div v-if="isView" class="view-item-value">
+        <div v-if="isView">
           {{ row.operator }}
         </div>
         <Select
@@ -393,7 +393,7 @@ export default {
         v-else
         :data-testid="`input-match-expression-values-${index}`"
       >
-        <div v-if="isView" class="view-item-value">
+        <div v-if="isView">
           {{ row.values }}
         </div>
         <input
@@ -473,20 +473,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){
@@ -495,15 +489,8 @@ 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;
 
@@ -511,8 +498,4 @@ export default {
       grid-template-columns: 1fr 1fr 1fr 1fr 100px;
     }
   }
-
-  .view-item-value{
-    width: 400px;
-  }
 </style>

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -232,10 +232,11 @@ export default {
     v-else
     class="cluster-permissions-editor"
   >
-    <div class="row mt-10 mb-20">
+    <div class="row mt-10">
       <div class="col span-12">
         <SelectPrincipal
           v-focus
+          class="mb-20"
           :mode="mode"
           :retain-selection="true"
           data-testid="cluster-member-select"

package/components/form/Members/MembershipEditor.vue

@@ -170,7 +170,7 @@ export default {
   >
     <template #column-headers>
       <div class="box mb-0">
-        <div class="column-headers row" style="width: 95%;">
+        <div class="column-headers row">
           <div class="col span-6">
             <label class="text-label">{{ t('membershipEditor.user') }}</label>
           </div>