@rancher/shell 3.0.5-rc.5 → 3.0.5-rc.7

package/components/fleet/dashboard/ResourceDetails.vue

@@ -76,7 +76,7 @@ export default {
       class="header"
       :data-testid="'fleet-dashboard-resource-details-header'"
     >
-      <div class="title">
+      <h3 class="title">
         <i :class="value.dashboardIcon" />
         <router-link
           class="label"
@@ -90,7 +90,7 @@ export default {
           :class="statePanel.icon"
           :style="{ color: statePanel.color }"
         />
-      </div>
+      </h3>
       <RcButton
         small
         ghost
@@ -104,9 +104,9 @@ export default {
       </RcButton>
     </div>
 
-    <h3>
+    <h4>
       {{ t('fleet.dashboard.source') }}
-    </h3>
+    </h4>
     <div class="mb-15">
       <FleetApplicationSource
         v-if="value.source.value"
@@ -120,9 +120,9 @@ export default {
       </div>
     </div>
 
-    <h3>
+    <h4>
       {{ t('fleet.dashboard.resources') }}
-    </h3>
+    </h4>
     <FleetResources
       :rows="value.resourcesStatuses"
       :cluster-id="clusterId"
@@ -136,7 +136,7 @@ export default {
           <div class="col span-10">
             <LabeledSelect
               v-model:value="clusterId"
-              :label="'Cluster'"
+              :label="t('fleet.cluster.label')"
               :options="clusters"
               :mode="'edit'"
               :disabled="workspace.id === 'fleet-local'"
@@ -168,9 +168,7 @@ export default {
         display: flex;
         align-items: center;
         flex: 1;
-        font-style: normal;
-        font-weight: 600;
-        font-size: 18px;
+        margin-bottom: 0;
 
         .icon {
           font-size: 2em;

package/components/fleet/dashboard/ResourcePanel.vue

@@ -97,18 +97,27 @@ export default {
           legend:  { display: false },
           title:   { display: false },
           tooltip: {
-            yAlign:    'bottom',
-            callbacks: {
+            yAlign:     'bottom',
+            titleFont:  { size: 12 },
+            bodyFont:   { size: 12 },
+            titleAlign: 'center',
+            bodyAlign:  'center',
+            callbacks:  {
               title: (ctx: TooltipItem<'doughnut'>[]) => {
                 const v = ctx[0];
 
-                return `${ v?.formattedValue } ${ lcFirst(v.label) }`;
+                const value = v?.formattedValue || '';
+                const label = lcFirst(v?.label || '');
+
+                const titleLn = `${ value }${ label }`.length;
+
+                return `${ value }${ titleLn > 7 ? '\n' : ' ' }${ label }`;
               },
               label: () => '',
             }
           }
         },
-        cutout:  13,
+        cutout:  14,
         onHover: (event: any) => {
           if (this.selectable && event?.native?.target?.style) {
             event.native.target.style.cursor = 'pointer';
@@ -293,13 +302,11 @@ export default {
 
     .panel-chart-container {
       padding: 3px;
-      min-width: 80px;
-      width: 80px;
+      min-width: 68px;
+      width: 68px;
     }
 
     .details {
-      padding: 5px;
-
       .description {
         .count {
           font-size: 25px;
@@ -330,7 +337,8 @@ export default {
           }
 
           &.bg-error {
-            background: var(--click-badge-error-bg);
+            // background: var(--click-badge-error-bg); TODO revert after dashboard theme colors refactoring
+            background: var(--error);
             color: var(--click-badge-error);
           }
 

package/components/form/ArrayList.vue

@@ -49,6 +49,10 @@ export default {
       type:    Boolean,
       default: false,
     },
+    addClass: {
+      type:    String,
+      default: '',
+    },
     addIcon: {
       type:    String,
       default: '',
@@ -300,6 +304,7 @@ export default {
           :key="idx"
           :data-testid="`${componentTestid}-box${ idx }`"
           class="box"
+          :class="{'hide-remove-is-view': isView}"
           role="group"
         >
           <slot
@@ -358,7 +363,7 @@ export default {
             </div>
           </slot>
           <div
-            v-if="showRemove"
+            v-if="showRemove && !isView"
             class="remove"
           >
             <slot
@@ -400,7 +405,7 @@ export default {
       </div>
       <div
         v-if="showAdd && !isView"
-        class="footer mt-20"
+        class="footer mmt-6"
       >
         <slot
           v-if="showAdd"
@@ -410,6 +415,7 @@ export default {
           <button
             type="button"
             class="btn role-tertiary add"
+            :class="[addClass]"
             :disabled="loading || disableAdd"
             :data-testid="`${componentTestid}-button`"
             :aria-label="_addLabel"
@@ -449,6 +455,11 @@ export default {
       }
     }
   }
+
+  .box.hide-remove-is-view {
+    grid-template-columns: auto;
+  }
+
   .remove {
     text-align: right;
   }

package/components/form/ChangePassword.vue

@@ -331,15 +331,17 @@ export default {
           :value="username"
           tabindex="-1"
           :data-lpignore="!isChange"
+          aria-hidden="true"
         >
         <input
           id="password"
           type="password"
           name="password"
-          autocomplete="password"
+          autocomplete="new-password"
           :value="password"
           tabindex="-1"
           :data-lpignore="!isChange"
+          aria-hidden="true"
         >
         <Password
           v-if="isChange"

package/components/form/FileImageSelector.vue

@@ -132,7 +132,7 @@ $logo: 60px;
       left: 0;
       width: 100%;
       height: 100%;
-      background-color: var(--overlay-bg);
+      background-color: var(--subtle-overlay-bg);
     }
 
   }

package/components/form/Footer.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import AsyncButton, { AsyncButtonCallback } from '@shell/components/AsyncButton.vue';
 import Banner from '@components/Banner/Banner.vue';
 
 export default defineComponent({
-  emits: ['save', 'done'],
+  emits: ['save', 'done', 'closeError'],
 
   components: { AsyncButton, Banner },
 
@@ -20,8 +20,8 @@ export default defineComponent({
     },
 
     errors: {
-      type:    Array,
-      default: null,
+      type:    Array as PropType<string[]>,
+      default: () => []
     },
 
     disableSave: {
@@ -37,6 +37,10 @@ export default defineComponent({
   },
 
   methods: {
+    closeError(index: number) {
+      this.$emit('closeError', index);
+    },
+
     save(buttonCb: AsyncButtonCallback) {
       this.$emit('save', buttonCb);
     },
@@ -58,6 +62,8 @@ export default defineComponent({
       <Banner
         color="error"
         :label="err"
+        :closable="true"
+        @close="closeError(idx)"
       />
     </div>
     <div class="buttons">

package/components/form/KeyValue.vue

@@ -12,6 +12,7 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { asciiLike } from '@shell/utils/string';
 import CodeMirror from '@shell/components/CodeMirror';
 import isEqual from 'lodash/isEqual';
+import { LabeledTooltip } from '@components/LabeledTooltip';
 
 export default {
   name: 'KeyValue',
@@ -22,7 +23,8 @@ export default {
     CodeMirror,
     Select,
     TextAreaAutoGrow,
-    FileSelector
+    FileSelector,
+    LabeledTooltip
   },
   props: {
     value: {
@@ -64,6 +66,12 @@ export default {
       type:    [String, Boolean],
       default: '',
     },
+
+    protipValue: {
+      type:    [String, Boolean],
+      default: '',
+    },
+
     // For asMap=false, the name of the field that goes into the row objects
     keyName: {
       type:    String,
@@ -95,20 +103,6 @@ export default {
       type:    String,
       default: '',
     },
-    /**
-     * List of keys which needs to be disabled and hidden based on toggler
-     */
-    protectedKeys: {
-      type:    Array,
-      default: () => [],
-    },
-    /**
-     * Conditionally display protected keys, if any
-     */
-    toggleFilter: {
-      type:    Boolean,
-      default: false,
-    },
     separatorLabel: {
       type:    String,
       default: '',
@@ -184,6 +178,10 @@ export default {
       type:    String,
       default: '',
     },
+    addClass: {
+      type:    String,
+      default: '',
+    },
     addAllowed: {
       type:    Boolean,
       default: true,
@@ -210,7 +208,7 @@ export default {
     },
     removeIcon: {
       type:    String,
-      default: 'icon-minus',
+      default: '',
     },
     removeAllowed: {
       type:    Boolean,
@@ -240,6 +238,10 @@ export default {
       default: false,
       type:    Boolean
     },
+    keyErrors: {
+      type:    Object,
+      default: () => ({})
+    }
   },
   data() {
     const rows = this.getRows(this.value);
@@ -252,6 +254,10 @@ export default {
   },
   computed: {
     _protip() {
+      if (this.protip === false) {
+        return null;
+      }
+
       return this.protip || this.t('keyValue.protip', null, true);
     },
     _keyLabel() {
@@ -323,10 +329,6 @@ export default {
       }
     },
 
-    isProtected(key) {
-      return this.protectedKeys && this.protectedKeys.includes(key);
-    },
-
     getRows(value) {
       const rows = [];
 
@@ -515,10 +517,16 @@ export default {
       const text = event.clipboardData.getData('text/plain');
       const lines = text.split('\n');
       const splits = lines.map((line) => {
-        const splitter = this.parserSeparators.find((sep) => line.includes(sep));
+        const separatorIndex = line.search(new RegExp(this.parserSeparators.join('|')));
+
+        if (separatorIndex === -1) {
+          return [];
+        }
+        const key = line.substring(0, separatorIndex).trim();
+        const value = line.substring(separatorIndex + 1).trim();
 
-        return splitter ? line.split(splitter) : '';
-      }).filter((split) => split && split.length > 0);
+        return [key, value];
+      }).filter((split) => split.length > 0);
 
       if (splits.length === 0 || (splits.length === 1 && splits[0].length < 2)) {
         return;
@@ -606,8 +614,8 @@ export default {
       <template v-if="rows.length || isView">
         <div class="rowgroup">
           <div class="row">
-            <label
-              class="text-label"
+            <div
+              class="text-label key-value-label"
               role="columnheader"
             >
               {{ _keyLabel }}
@@ -617,21 +625,32 @@ export default {
                 v-stripped-aria-label="_protip"
                 class="icon icon-info"
                 tabindex="0"
+                role="tooltip"
               />
-            </label>
-            <label
-              class="text-label"
+            </div>
+            <div
+              class="text-label key-value-label"
               role="columnheader"
             >
               {{ _valueLabel }}
-            </label>
-            <label
+              <i
+                v-if="protipValue && !isView && addAllowed"
+                v-clean-tooltip="{content: protipValue, triggers: ['hover', 'touch', 'focus'] }"
+                v-stripped-aria-label="protipValue"
+                class="icon icon-info"
+                tabindex="0"
+                role="tooltip"
+              />
+            </div>
+            <div
               v-for="(c, i) in extraColumns"
               :key="i"
               role="columnheader"
             >
-              <slot :name="'label:'+c">{{ c }}</slot>
-            </label>
+              <slot :name="'label:'+c">
+                {{ c }}
+              </slot>
+            </div>
             <slot
               v-if="canRemove"
               name="remove"
@@ -664,10 +683,7 @@ export default {
         v-else
         :key="i"
       >
-        <div
-          class="rowgroup"
-          :class="{'hide': isProtected(row.key) && !toggleFilter}"
-        >
+        <div class="rowgroup">
           <div class="row">
             <!-- Key -->
             <div
@@ -675,6 +691,10 @@ export default {
               role="gridcell"
               :aria-rowindex="i+1"
               :aria-colindex="1"
+              :class="{
+                'labeled-input-key': keyErrors[row.key],
+                'v-popper--has-tooltip': keyErrors[row.key],
+              }"
             >
               <slot
                 name="key"
@@ -690,7 +710,7 @@ export default {
                   ref="key"
                   v-model:value="row[keyName]"
                   :searchable="true"
-                  :disabled="disabled || isProtected(row.key)"
+                  :disabled="disabled"
                   :clearable="false"
                   :taggable="keyTaggable"
                   :options="calculateOptions(row[keyName])"
@@ -702,13 +722,18 @@ export default {
                   v-else
                   ref="key"
                   v-model="row[keyName]"
-                  :disabled="isView || disabled || !keyEditable || isProtected(row.key)"
+                  :disabled="isView || disabled || !keyEditable"
                   :placeholder="_keyPlaceholder"
                   :data-testid="`input-kv-item-key-${i}`"
                   :aria-label="t('generic.ariaLabel.key', {index: i+1})"
                   @input="queueUpdate"
                   @paste="onPaste(i, $event)"
                 >
+                <LabeledTooltip
+                  v-if="keyErrors[row.key]"
+                  :value="keyErrors[row.key]"
+                  :hover="true"
+                />
               </slot>
             </div>
 
@@ -758,7 +783,7 @@ export default {
                     v-model:value="row[valueName]"
                     data-testid="value-multiline"
                     :class="{'conceal': valueConcealed}"
-                    :disabled="disabled || isProtected(row.key)"
+                    :disabled="disabled"
                     :mode="mode"
                     :placeholder="_valuePlaceholder"
                     :min-height="40"
@@ -769,7 +794,7 @@ export default {
                   <input
                     v-else
                     v-model="row[valueName]"
-                    :disabled="isView || disabled || isProtected(row.key)"
+                    :disabled="isView || disabled"
                     :type="valueConcealed ? 'password' : 'text'"
                     :placeholder="_valuePlaceholder"
                     autocorrect="off"
@@ -823,12 +848,16 @@ export default {
                 <button
                   type="button"
                   role="button"
-                  :disabled="isView || isProtected(row.key) || disabled"
+                  :disabled="isView || disabled"
                   :aria-label="t('generic.ariaLabel.remove', {index: i+1})"
                   class="btn role-link"
                   @click="remove(i)"
                 >
                   {{ removeLabel || t('generic.remove') }}
+                  <i
+                    v-if="removeIcon"
+                    :class="[removeIcon]"
+                  />
                 </button>
               </slot>
             </div>
@@ -838,7 +867,7 @@ export default {
     </div>
     <div
       v-if="(addAllowed || readAllowed) && !isView"
-      class="footer mt-20"
+      class="footer mt-10"
     >
       <slot
         name="add"
@@ -849,6 +878,7 @@ export default {
           type="button"
           role="button"
           class="btn role-tertiary add"
+          :class="[addClass]"
           data-testid="add_row_item_button"
           :disabled="loading || disabled || (keyOptions && filteredKeyOptions.length === 0)"
           :aria-label="t('generic.ariaLabel.addKeyValue')"
@@ -885,7 +915,8 @@ export default {
     display: grid;
     align-items: center;
     column-gap: 20px;
-    label {
+
+    .key-value-label {
       margin-bottom: 0;
     }
     & .kv-item {
@@ -962,4 +993,11 @@ export default {
     padding: 0px 0px 0px 10px;
   }
 }
+
+.labeled-input-key {
+  position: relative;
+  display: flex;
+  border-collapse: separate;
+  z-index: 0; // Prevent label from cover other elements outside of the input
+}
 </style>

package/components/form/LabeledSelect.vue

@@ -9,6 +9,9 @@ import { generateRandomAlphaString } from '@shell/utils/string';
 import LabeledSelectPagination from '@shell/components/form/labeled-select-utils/labeled-select-pagination';
 import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSelect';
 import { mapGetters } from 'vuex';
+import { _VIEW } from '@shell/config/query-params';
+import { useClickOutside } from '@shell/composables/useClickOutside';
+import { ref } from 'vue';
 
 export default {
   name: 'LabeledSelect',
@@ -114,12 +117,22 @@ export default {
     }
   },
 
+  setup() {
+    const select = ref(null);
+    const isOpen = ref(false);
+
+    useClickOutside(select, () => {
+      isOpen.value = false;
+    });
+
+    return { isOpen, select };
+  },
+
   data() {
     return {
       selectedVisibility:   'visible',
       shouldOpen:           true,
       labeledSelectLabelId: `ls-label-id-${ generateRandomAlphaString(12) }`,
-      isOpen:               false,
       generatedUid:         `ls-uid-${ generateRandomAlphaString(12) }`
     };
   },
@@ -156,20 +169,24 @@ export default {
   },
 
   methods: {
-    // resizeHandler = in mixin
-    focusSearch(ev) {
-      if (this.isView || this.disabled || this.loading) {
+    // Ensure we only focus on open, otherwise we re-open on close
+    clickSelect() {
+      if (this.mode === _VIEW || this.loading === true || this.disabled === true) {
         return;
       }
 
-      const searchBox = document.querySelector('.vs__search');
+      this.isOpen = !this.isOpen;
 
-      // added to mitigate https://github.com/rancher/dashboard/issues/14361
-      if (!this.isSearchable || (searchBox && document.activeElement && !searchBox.contains(document.activeElement))) {
-        ev.preventDefault();
+      if (this.isOpen) {
+        this.focusSearch();
       }
+    },
 
-      this.$refs['select-input'].open = true;
+    // resizeHandler = in mixin
+    focusSearch() {
+      if (this.isView || this.disabled || this.loading) {
+        return;
+      }
 
       this.$nextTick(() => {
         const el = this.$refs['select-input']?.searchEl;
@@ -180,6 +197,10 @@ export default {
       });
     },
 
+    focusWrapper() {
+      this.$refs.select.focus();
+    },
+
     onFocus() {
       this.selectedVisibility = 'hidden';
       this.onFocusLabeled();
@@ -191,14 +212,27 @@ export default {
     },
 
     onOpen() {
-      this.isOpen = true;
+      this.focusSearch();
       this.$emit('on-open');
       this.resizeHandler();
     },
 
-    onClose() {
+    closeOnSelecting(e) {
+      if (e.value === this.value) {
+        this.close();
+      }
+
+      this.$emit('selecting', e);
+    },
+
+    close() {
       this.isOpen = false;
+      this.onClose();
+    },
+
+    onClose() {
       this.$emit('on-close');
+      this.focusWrapper();
     },
 
     getOptionLabel(option) {
@@ -233,6 +267,10 @@ export default {
     },
 
     dropdownShouldOpen(instance, forceOpen = false) {
+      if (!this.isOpen) {
+        return false;
+      }
+
       const { noDrop, mutableLoading } = instance;
       const { open } = instance;
       const shouldOpen = this.shouldOpen;
@@ -297,10 +335,10 @@ export default {
     :aria-expanded="isOpen"
     :aria-describedby="$attrs['aria-describedby'] || undefined"
     :aria-required="requiredField"
-    @click="focusSearch"
-    @keydown.enter="focusSearch"
-    @keydown.down.prevent="focusSearch"
-    @keydown.space="focusSearch"
+    @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 }"
@@ -327,6 +365,7 @@ export default {
       ref="select-input"
       v-bind="filteredAttrs"
       class="inline"
+      :close-on-select="false"
       :append-to-body="appendToBody"
       :calculate-position="positionDropdown"
       :class="{ 'no-label': !(label || '').length}"
@@ -353,7 +392,8 @@ export default {
       @search="onSearch"
       @open="onOpen"
       @close="onClose"
-      @option:selecting="$emit('selecting', $event)"
+      @option:selecting="closeOnSelecting"
+      @option:selected="close"
       @option:deselecting="$emit('deselecting', $event)"
       @keydown.enter.stop
     >