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

package/components/form/LabeledSelect.vue

@@ -53,6 +53,10 @@ export default {
       default: false,
       type:    Boolean
     },
+    isLabel: {
+      default: false,
+      type:    Boolean
+    },
     localizedLabel: {
       default: false,
       type:    Boolean
@@ -114,7 +118,15 @@ export default {
     noOptionsLabelKey: {
       type:    String,
       default: 'labelSelect.noOptions.empty'
-    }
+    },
+    selectWidth: {
+      type: String,
+      default: ''
+    },
+    leftWidth: {
+      type:    String,
+      default: ''
+    },
   },
 
   setup() {
@@ -257,7 +269,7 @@ export default {
     },
 
     positionDropdown(dropdownList, component, { width }) {
-      calculatePosition(dropdownList, component, width, this.placement);
+      calculatePosition(dropdownList, component, width, this.placement, this.selectWidth===''?'label': this.selectWidth, this.isLabel, this.leftWidth);
     },
 
     get,
@@ -312,42 +324,13 @@ export default {
 </script>
 
 <template>
-  <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 style="display: flex;">
     <div
-      :class="{ 'labeled-container': true, raised, empty, [mode]: true }"
-      :style="{ border: 'none' }"
+      v-if="hasLabel"
+      :class="{ 'labeled-container': true, raised, empty, [mode]: true, 'is-lable': isLabel }"
+      :style="{ border: 'none', width: selectWidth===''?'160px':selectWidth,lineHeight: '32px' }"
     >
-      <label
-        v-if="hasLabel"
-        :for="labeledSelectLabelId"
-      >
+      <label v-if="hasLabel" :id="`labeled-select-uid-${uid}`">
         <t
           v-if="labelKey"
           :k="labelKey"
@@ -357,157 +340,186 @@ export default {
         <span
           v-if="requiredField"
           class="required"
-          :aria-hidden="true"
         >*</span>
       </label>
     </div>
-    <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
+    <!-- label -->
+    <div
+      :id="hasLabel ? labeledSelectLabelId : undefined"
+      ref="select"
+      class="labeled-select"
+      :class="[
+        $attrs.class && $attrs.class.replace('mb-20', ''),
+        {
+          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"
     >
-      <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">
+      <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) }}
             <i
-              v-if="option.icon"
-              class="icon"
-              :class="{ [option.icon]: true}"
+              v-if="option.error"
+              class="icon icon-warning pull-right"
+              style="font-size: 20px;"
             />
-            <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)"
+        <!-- Pass down templates provided by the caller -->
+        <template
+          v-for="(_, slot) of $slots"
+          :key="slot"
+          #[slot]="scope"
         >
-          {{ getOptionLabel(option) }}
-          <i
-            v-if="option.error"
-            class="icon icon-warning pull-right"
-            style="font-size: 20px;"
+          <slot
+            :name="slot"
+            v-bind="scope"
           />
-        </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>
 
-      <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>
+        <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>
 
-          <div class="count">
-            {{ optionCounts }}
+            <div class="count">
+              {{ optionCounts }}
+            </div>
           </div>
-        </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" />
+        </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 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"
-    />
+        </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>
   </div>
 </template>
 
@@ -518,7 +530,10 @@ export default {
   // Prevent namespace field from wiggling or changing
   // height when it is toggled from a LabeledInput to a
   // LabeledSelect.
-  padding-bottom: 1px;
+  // padding-bottom: 1px;
+  &:deep() .vs__actions:after {
+    padding-top: 10px;
+  }
 
   &.no-label.compact-input {
     :deep() .vs__actions:after {
@@ -532,7 +547,7 @@ export default {
 
   &.no-label:not(.compact-input) {
     height: $input-height;
-    padding-top: 4px;
+    padding-top: 0px;
 
     :deep() .vs__actions:after {
       top: 0;
@@ -619,7 +634,7 @@ export default {
   }
 
   :deep() .vs__selected-options {
-    margin-top: -5px;
+    margin-top: 0px;
   }
 
   :deep() .v-select:not(.vs--single) {
@@ -631,7 +646,7 @@ export default {
   :deep() .vs__actions {
     &:after {
       position: relative;
-      top: -10px;
+      top: 0px;
     }
   }
 
@@ -669,73 +684,21 @@ export default {
   }
 }
 
-$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;
-    }
+// Styling for option group badge
+.vs__dropdown-menu .vs__dropdown-option .vs__option-kind-group {
+  display: flex;
+  > b {
+    flex: 1;
   }
-
-    &.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;
+  > 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;
   }
 }
 
@@ -763,4 +726,13 @@ $icon-size: 18px;
     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">
-          <h3 v-if="showLabelTitle">
+          <div v-if="showLabelTitle">
             <t k="labels.labels.title" />
-          </h3>
+          </div>
           <ToggleSwitch
             v-if="showToggler"
             v-model:value="toggler"
@@ -172,7 +172,7 @@ export default {
             :on-label="t('labels.labels.show')"
           />
         </div>
-        <p class="mt-10 mb-10">
+        <p class="mb-20">
           <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">
+        <div v-if="isView" class="view-item-value">
           {{ row.key }}
         </div>
         <input
@@ -367,7 +367,7 @@ export default {
       <div
         :data-testid="`input-match-expression-operator-${index}`"
       >
-        <div v-if="isView">
+        <div v-if="isView" class="view-item-value">
           {{ row.operator }}
         </div>
         <Select
@@ -393,7 +393,7 @@ export default {
         v-else
         :data-testid="`input-match-expression-values-${index}`"
       >
-        <div v-if="isView">
+        <div v-if="isView" class="view-item-value">
           {{ row.values }}
         </div>
         <input
@@ -473,14 +473,20 @@ export default {
     justify-content: center;
   }
 
+  .match-expression-header{
+    margin-top: 24px;
+  }
   .match-expression-row, .match-expression-header {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    /* display: grid; */
+    display: flex;
+    /* grid-template-columns: 1fr 1fr 1fr; */
     margin: 5px 0;
-    grid-gap: $column-gutter;
+    /* grid-gap: $column-gutter; */
+    grid-gap: 10px;
 
     & > LABEL {
       margin: 0;
+      width: 400px;
     }
 
     &:not(.view){
@@ -489,8 +495,15 @@ export default {
   }
 
   .match-expression-row > div > input {
-    min-height: 40px !important;
+    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);
+    }
   }
+
   .match-expression-row-matching, .match-expression-header-matching {
     grid-template-columns: 1fr 1fr 1fr 1fr;
 
@@ -498,4 +511,8 @@ export default {
       grid-template-columns: 1fr 1fr 1fr 1fr 100px;
     }
   }
+
+  .view-item-value{
+    width: 400px;
+  }
 </style>

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -232,11 +232,10 @@ export default {
     v-else
     class="cluster-permissions-editor"
   >
-    <div class="row mt-10">
+    <div class="row mt-10 mb-20">
       <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">
+        <div class="column-headers row" style="width: 95%;">
           <div class="col span-6">
             <label class="text-label">{{ t('membershipEditor.user') }}</label>
           </div>