@rancher/shell 3.0.2-rc.6 → 3.0.3

package/assets/styles/global/_layout.scss

@@ -61,6 +61,8 @@ HEADER {
   display: flex;
   flex-direction: column;
   height: 100vh;
+  width: 100vw;
+  position: absolute;
 }
 
 .dashboard-content {
@@ -162,4 +164,4 @@ HEADER {
   opacity: 1;
 }
 
-// !END
+// !END

package/assets/styles/themes/_light.scss

@@ -26,7 +26,6 @@ $disabled  : $medium;
 $primary         : #3D98D3;
 $secondary       : $darker;
 $link            : #3D98D3;
-$keyboard-focus  : #{darken($primary, 10%)};
 
 // Status colors
 $success         : #5D995D;
@@ -54,7 +53,7 @@ BODY, .theme-light {
   --primary-border             : #{$primary};
   --primary-banner-bg          : #{rgba($primary, 0.15)};
   --primary-light-bg           : #{rgba($primary, 0.05)};
-  --primary-keyboard-focus     : #{$keyboard-focus};
+  --primary-keyboard-focus     : hsl(from var(--primary) h s calc(l - 10));
 
 
   .text-primary {

package/assets/styles/themes/_suse.scss

@@ -12,6 +12,7 @@
   --primary-border             : #{$primary};
   --primary-banner-bg          : #{rgba($primary, 0.15)};
   --primary-light-bg           : #{rgba($primary, 0.05)};
+  --primary-keyboard-focus     : hsl(from var(--primary) h s calc(l - 10));
 
   --info                    : #{$info};
   --info-text               : #{contrast-color($info)};

package/assets/translations/en-us.yaml

@@ -239,6 +239,7 @@ nav:
     label: Resource Search
     toolTip: Resource Search {key}
     placeholder: Type to search for a resource...
+    filteringDescription: Using this input will immediately filter the results in the list below
   header:
     setLoginPage: Set as login page
     restoreCards: Restore hidden cards
@@ -545,9 +546,6 @@ authConfig:
     starttls:
       label: Start TLS
       tip: Upgrades non-encrypted connections by wrapping with TLS during the connection process. Can not be used in conjunction with TLS.
-    searchUsingServiceAccount: 
-      label: Enable Service Account Search
-      tip: When enabled, Rancher will use the service account instead of the user account to search for users and groups.
     tls: TLS
     userEnabledAttribute: User Enabled Attribute
     userMemberAttribute: User Member Attribute
@@ -2779,6 +2777,7 @@ hpa:
       label: Metric Name
       placeholder: e.g. packets-per-second
     selector:
+      header: Metric Selector
       label: Add Selector
   metricTarget:
     averageVal:
@@ -5138,6 +5137,9 @@ resourceDetail:
     stage: "Stage from {subtype} {name}"
     view: "{subtype} {name}"
   masthead:
+    ariaLabel:
+      favoriteAction: Add {resource} to your starred/favorites list
+      unfavoriteAction: Remove {resource} from your starred/favorites list
     age: Age
     createdBy: Created by
     restartCount: Pod Restarts
@@ -5490,6 +5492,18 @@ setup:
   welcome: Welcome to {vendor}!
 
 sortableTable:
+  ariaLabel:
+    firstPageBtn: First page of results
+    prevPageBtn: Previous page of results
+    nextPageBtn: Next page of results
+    lastPageBtn: Last page of results
+  alt:
+    firstPageBtn: First page of results icon
+    prevPageBtn: Previous page of results icon
+    nextPageBtn: Next page of results icon
+    lastPageBtn: Last page of results icon
+    sortingIconDesc: Table header descending sort icon
+    sortingIconAsc: Table header ascending sort icon
   genericGroupCheckbox: Table group selection checkbox
   genericRowCheckbox: Table row selection checkbox for item {item}
   tableActionsLabel: More actions - { resource }
@@ -5518,6 +5532,7 @@ sortableTable:
   searchLabel: Filter table results
   in: in
   addFilter: Add Filter
+  filteringDescription: Using this input will immediately filter the results in the table below
   filterFor: Filter for...
   selectCol: Select a column
   resetFilters: Reset

package/chart/monitoring/prometheus/index.vue

@@ -341,22 +341,25 @@ export default {
         </div>
         <div class="row">
           <div class="col span-12">
-            <div class="mb-5 mt-5">
-              <h4 class=" mb-10">
-                {{ t('monitoring.prometheus.storage.selector') }}
-              </h4>
-            </div>
-            <Banner
-              color="warning"
-              :label="t('monitoring.prometheus.storage.selectorWarning', {}, true)"
-            />
             <MatchExpressions
               :initial-empty-row="false"
               :mode="mode"
               :value="matchExpressions"
               :show-remove="false"
               @update:value="matchChanged($event)"
-            />
+            >
+              <template #header>
+                <div class="mb-5 mt-5">
+                  <h4 class=" mb-10">
+                    {{ t('monitoring.prometheus.storage.selector') }}
+                  </h4>
+                </div>
+                <Banner
+                  color="warning"
+                  :label="t('monitoring.prometheus.storage.selectorWarning', {}, true)"
+                />
+              </template>
+            </MatchExpressions>
           </div>
         </div>
       </template>

package/components/ButtonGroup.vue

@@ -77,6 +77,9 @@ export default {
       const tooltip = opt.tooltipKey ? this.t(opt.tooltipKey) : opt.tooltip;
 
       return ariaLabel || tooltip || label || undefined;
+    },
+    isPressed(opt) {
+      return this.value === opt.value;
     }
   }
 };
@@ -97,6 +100,7 @@ export default {
       :disabled="disabled || opt.disabled"
       role="button"
       :aria-label="actionAriaLabel(opt)"
+      :aria-pressed="isPressed(opt)"
       @click="change(opt.value)"
     >
       <slot

package/components/FixedBanner.vue

@@ -37,7 +37,7 @@ export default {
     handleLineBreaksConsentText(banner) {
       if (banner.text?.length) {
         // split text by newline char
-        const textArray = banner.text.split(/\\n/).filter((element) => element);
+        const textArray = banner.text.split('\n').filter((element) => element);
 
         if (textArray.length > 1) {
           textArray.forEach((str, i) => {
@@ -130,11 +130,11 @@ export default {
 
             if (isEmpty(banner)) {
               if (showHeader && this.header) {
-                bannerContent = bannerHeader || {};
+                bannerContent = this.handleLineBreaksConsentText(bannerHeader) || {};
               } else if (showConsent && this.consent) {
                 bannerContent = this.handleLineBreaksConsentText(bannerConsent) || {};
               } else if (showFooter && this.footer) {
-                bannerContent = bannerFooter || {};
+                bannerContent = this.handleLineBreaksConsentText(bannerFooter) || {};
               } else {
                 bannerContent = {};
               }
@@ -168,16 +168,20 @@ export default {
     >
       <!-- text as array to support line breaks programmatically rather than just exposing HTML -->
       <div v-if="isTextAnArray">
-        <p
+        <div
           v-for="(text, index) in banner.text"
           :key="index"
+          class="array-row"
         >
           {{ text }}
-        </p>
+        </div>
       </div>
-      <p v-else>
+      <div
+        v-else
+        class="single-row"
+      >
         {{ banner.text }}
-      </p>
+      </div>
     </div>
     <div v-else-if="showDialog">
       <div class="banner-dialog-glass" />
@@ -192,16 +196,20 @@ export default {
           >
             <!-- text as array to support line breaks programmatically rather than just exposing HTML -->
             <div v-if="isTextAnArray">
-              <p
+              <div
                 v-for="(text, index) in banner.text"
                 :key="index"
+                class="array-row"
               >
                 {{ text }}
-              </p>
+              </div>
             </div>
-            <p v-else>
+            <div
+              v-else
+              class="single-row"
+            >
               {{ banner.text }}
-            </p>
+            </div>
           </div>
           <button
             class="btn role-primary"
@@ -223,7 +231,6 @@ export default {
     padding: 0 20px;
 
     &.banner-consent {
-      position: absolute;
       height: unset;
       min-height: 2em;
       overflow: hidden;

package/components/LocaleSelector.vue

@@ -119,6 +119,7 @@ export default {
                 tabindex="0"
                 role="menuitem"
                 class="hand"
+                :lang="name"
                 @click.stop="switchLocale(name)"
                 @keyup.enter.stop="switchLocale(name)"
                 @keyup.space.stop="switchLocale(name)"
@@ -134,6 +135,7 @@ export default {
       <Select
         :value="selectedOption"
         :options="localesOptions"
+        :is-lang-select="true"
         @update:value="switchLocale($event)"
       />
     </div>

package/components/SortableTable/THead.vue

@@ -282,10 +282,12 @@ export default {
               <i
                 v-if="isCurrent(col) && !descending"
                 class="icon icon-sort-down icon-stack-1x"
+                :alt="t('sortableTable.alt.sortingIconDesc')"
               />
               <i
                 v-if="isCurrent(col) && descending"
                 class="icon icon-sort-up icon-stack-1x"
+                :alt="t('sortableTable.alt.sortingIconAsc')"
               />
             </span>
           </div>

package/components/SortableTable/index.vue

@@ -1081,6 +1081,8 @@ export default {
                 :class="{[bulkActionClass]:true}"
                 :disabled="!act.enabled"
                 :data-testid="componentTestid + '-' + act.action"
+                role="button"
+                :aria-label="act.label"
                 @click="applyTableAction(act, null, $event)"
                 @keydown.enter.stop
                 @mouseover="setBulkActionOfInterest(act)"
@@ -1234,13 +1236,21 @@ export default {
               </div>
             </div>
           </div>
-          <input
+          <p
             v-else-if="search"
+            id="describe-filter-sortable-table"
+            hidden
+          >
+            {{ t('sortableTable.filteringDescription') }}
+          </p>
+          <input
+            v-if="search"
             ref="searchQuery"
             v-model="eventualSearchQuery"
             type="search"
             class="input-sm search-box"
             :aria-label="t('sortableTable.searchLabel')"
+            aria-describedby="describe-filter-sortable-table"
             :placeholder="t('sortableTable.search')"
           >
           <slot name="header-button" />
@@ -1532,18 +1542,28 @@ export default {
         class="btn btn-sm role-multi-action"
         data-testid="pagination-first"
         :disabled="page == 1 || loading"
+        role="button"
+        :aria-label="t('sortableTable.ariaLabel.firstPageBtn')"
         @click="goToPage('first')"
       >
-        <i class="icon icon-chevron-beginning" />
+        <i
+          class="icon icon-chevron-beginning"
+          :alt="t('sortableTable.alt.firstPageBtn')"
+        />
       </button>
       <button
         type="button"
         class="btn btn-sm role-multi-action"
         data-testid="pagination-prev"
         :disabled="page == 1 || loading"
+        role="button"
+        :aria-label="t('sortableTable.ariaLabel.prevPageBtn')"
         @click="goToPage('prev')"
       >
-        <i class="icon icon-chevron-left" />
+        <i
+          class="icon icon-chevron-left"
+          :alt="t('sortableTable.alt.prevPageBtn')"
+        />
       </button>
       <span>
         {{ pagingDisplay }}
@@ -1553,18 +1573,28 @@ export default {
         class="btn btn-sm role-multi-action"
         data-testid="pagination-next"
         :disabled="page == totalPages || loading"
+        role="button"
+        :aria-label="t('sortableTable.ariaLabel.nextPageBtn')"
         @click="goToPage('next')"
       >
-        <i class="icon icon-chevron-right" />
+        <i
+          class="icon icon-chevron-right"
+          :alt="t('sortableTable.alt.nextPageBtn')"
+        />
       </button>
       <button
         type="button"
         class="btn btn-sm role-multi-action"
         data-testid="pagination-last"
         :disabled="page == totalPages || loading"
+        role="button"
+        :aria-label="t('sortableTable.ariaLabel.lastPageBtn')"
         @click="goToPage('last')"
       >
-        <i class="icon icon-chevron-end" />
+        <i
+          class="icon icon-chevron-end"
+          :alt="t('sortableTable.alt.lastPageBtn')"
+        />
       </button>
     </div>
     <button

package/components/StatusBadge.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+
+const STATUS = {
+  success: {
+    color: 'text-success',
+    icon:  'icon-checkmark'
+  },
+  warning: {
+    color: 'text-warning',
+    icon:  'icon-warning'
+  },
+  info: {
+    color: 'text-info',
+    icon:  'icon-info'
+  },
+  error: {
+    color: 'text-error',
+    icon:  'icon-error'
+  }
+};
+
+const { status = 'success', label } = defineProps<{
+  status?: 'success' | 'warning' | 'info' | 'error',
+  label?: string
+}>();
+
+</script>
+<template>
+  <div
+    class="status-badge"
+  >
+    <i
+      class="status-badge__icon icon"
+      :class="{
+        [STATUS[status].icon]: true,
+        [STATUS[status].color]: true
+      }"
+    />
+    <div
+      v-if="label"
+      class="status-badge__label"
+    >
+      {{ label }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.status-badge {
+  align-items: center;
+  display: inline-flex;
+  border: 1px solid;
+  border-color: var(--border);
+  margin-top: 20px;
+
+  & + & {
+    margin-left: 20px;
+  }
+
+  &__label {
+    border-left: 1px solid var(--border);
+    padding: 5px 20px;
+    color: var(--body-text);
+  }
+
+  &__icon {
+    text-align: center;
+    padding: 5px 10px;
+  }
+}
+</style>

package/components/__tests__/FixedBanner.test.ts

@@ -40,7 +40,7 @@ describe('component: FixedBanner', () => {
     expect(wrapper.vm.showHeader).toStrictEqual(true);
 
     const bannerElem = wrapper.find('.banner');
-    const noArrayTextElem = wrapper.find('.banner > p');
+    const noArrayTextElem = wrapper.find('.banner .single-row');
 
     expect(bannerElem.exists()).toBe(true);
     expect(bannerElem.classes()).not.toContain('banner-consent');
@@ -60,7 +60,7 @@ describe('component: FixedBanner', () => {
     expect(wrapper.vm.showFooter).toStrictEqual(true);
 
     const bannerElem = wrapper.find('.banner');
-    const noArrayTextElem = wrapper.find('.banner > p');
+    const noArrayTextElem = wrapper.find('.banner .single-row');
 
     expect(bannerElem.exists()).toBe(true);
     expect(bannerElem.classes()).not.toContain('banner-consent');
@@ -84,7 +84,7 @@ describe('component: FixedBanner', () => {
     const bannerDialogElem = wrapper.find('.banner-dialog');
     const bannerDialogFrameElem = wrapper.find('.banner-dialog-frame');
     const buttonDialog = wrapper.find('.banner-dialog button');
-    const noArrayTextElem = wrapper.find('.banner > p');
+    const noArrayTextElem = wrapper.find('.banner .single-row');
 
     expect(bannerElem.exists()).toBe(true);
     expect(bannerDialogGlassElem.exists()).toBe(true);

package/components/form/MatchExpressions.vue

@@ -242,6 +242,10 @@ export default {
 
 <template>
   <div>
+    <slot
+      v-if="rules.length"
+      name="header"
+    />
     <button
       v-if="showRemove && !isView"
       type="button"

package/components/form/Select.vue

@@ -87,6 +87,10 @@ export default {
       type:    Boolean,
       default: null
     },
+    isLangSelect: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   methods: {
@@ -289,8 +293,13 @@ export default {
       @open="resizeHandler"
       @option:created="(e) => $emit('createdListItem', e)"
     >
-      <template #option="option">
-        <div @mousedown="(e) => onClickOption(option, e)">
+      <template
+        #option="option"
+      >
+        <div
+          :lang="isLangSelect ? option.value : undefined"
+          @mousedown="(e) => onClickOption(option, e)"
+        >
           {{ getOptionLabel(option.label) }}
         </div>
       </template>

package/components/form/UnitInput.vue

@@ -206,7 +206,7 @@ export default {
       }
 
       if (this.outputModifier) {
-        out = out === null ? null : `${ inputValue }${ this.unit }`;
+        out = out === null ? null : `${ parseInt(inputValue) }${ this.unit }`;
       } else if ( this.outputAs === 'string' ) {
         out = out === null ? '' : `${ inputValue }`;
       } else if (out) {
@@ -235,7 +235,7 @@ export default {
     :required="required"
     :placeholder="placeholder"
     :hide-arrows="hideArrows"
-    @change="update($event.target.value)"
+    @update:value="update"
     @blur="update($event.target.value)"
   >
     <template #suffix>

package/components/form/__tests__/UnitInput.test.ts

@@ -11,7 +11,7 @@ describe('component: UnitInput', () => {
     expect(wrapper.isVisible()).toBe(true);
   });
 
-  it.each(['blur', 'change'])('should emit input event when "%p" is fired', async(event) => {
+  it.each(['blur', 'update:value'])('should emit input event when "%p" is fired', async(event) => {
     const wrapper = mount(UnitInput, { props: { value: 1, delay: 0 } });
     const input = wrapper.find('input');
 
@@ -20,7 +20,7 @@ describe('component: UnitInput', () => {
     input.trigger(event);
 
     expect(wrapper.emitted('update:value')).toBeTruthy();
-    expect(wrapper.emitted('update:value')[2]).toStrictEqual([4]);
+    expect(wrapper.emitted('update:value')[1]).toStrictEqual([4]);
   });
 
   it.each([
@@ -184,7 +184,7 @@ describe('component: UnitInput', () => {
     input.trigger('blur');
 
     expect(wrapper.emitted('update:value')).toBeTruthy();
-    expect(wrapper.emitted('update:value')[3][0]).toBe(value);
+    expect(wrapper.emitted('update:value')[0][0]).toBe(value);
   });
 
   describe.each([
@@ -207,7 +207,7 @@ describe('component: UnitInput', () => {
       expect(inputElement.value).toBe('123');
     });
 
-    it.each(['input', 'blur'])('on %p 123 should display input value 123', async(trigger) => {
+    it.each(['update:value', 'blur'])('on %p 123 should display input value 123', async(trigger) => {
       const wrapper = mount(UnitInput, {
         props: {
           value: '0',
@@ -248,7 +248,6 @@ describe('component: UnitInput', () => {
       const input = wrapper.find('input');
 
       await input.trigger('update:value');
-      await input.trigger('input');
 
       expect(input.element.value).toBe('123');
     });

package/components/nav/Favorite.vue

@@ -10,6 +10,9 @@ export default {
   computed: {
     isFavorite() {
       return this.$store.getters['type-map/isFavorite'](this.resource);
+    },
+    ariaLabel() {
+      return this.t(`resourceDetail.masthead.ariaLabel.${ this.isFavorite ? 'unfavoriteAction' : 'favoriteAction' }`, { resource: this.resource });
     }
   },
 
@@ -28,10 +31,11 @@ export default {
 <template>
   <i
     :tabindex="0"
-    :aria-checked="!!isFavorite"
+    :aria-pressed="!!isFavorite"
     class="favorite icon"
     :class="{'icon-star-open': !isFavorite, 'icon-star': isFavorite}"
     aria-role="button"
+    :aria-label="ariaLabel"
     @click.stop.prevent="toggle"
     @keydown.enter.prevent="toggle"
     @keydown.space.prevent="toggle"

package/components/nav/Group.vue

@@ -403,6 +403,10 @@ export default {
           padding: 10px 7px 9px 7px !important;
         }
       }
+
+      &:deep() .type-link > .label {
+        padding-left: 10px;
+      }
     }
 
     &:not(.depth-0) {

package/components/nav/Jump.vue

@@ -71,6 +71,12 @@ export default {
 
 <template>
   <div>
+    <p
+      id="describe-filter-resource-search"
+      hidden
+    >
+      {{ t('nav.resourceSearch.filteringDescription') }}
+    </p>
     <input
       ref="input"
       v-model="value"
@@ -78,6 +84,7 @@ export default {
       class="search"
       role="textbox"
       :aria-label="t('nav.resourceSearch.label')"
+      aria-describedby="describe-filter-resource-search"
       @keyup.esc="$emit('closeSearch')"
     >
     <div class="results">

package/components/nav/Pinned.vue

@@ -36,7 +36,7 @@ export default {
     :aria-checked="!!pinned"
     class="pin icon"
     :class="{'icon-pin-outlined': !pinned, 'icon-pin': pinned}"
-    aria-role="button"
+    role="button"
     :aria-label="t('nav.ariaLabel.pinCluster', { cluster: cluster.label })"
     @click.stop.prevent="toggle"
     @keydown.enter.prevent="toggle"

package/components/nav/TopLevelMenu.vue

@@ -14,7 +14,6 @@ import { SETTING } from '@shell/config/settings';
 import { getProductFromRoute } from '@shell/utils/router';
 import { isRancherPrime } from '@shell/config/version';
 import Pinned from '@shell/components/nav/Pinned';
-import { getGlobalBannerFontSizes } from '@shell/utils/banners';
 import { TopLevelMenuHelperPagination, TopLevelMenuHelperLegacy } from '@shell/components/nav/TopLevelMenu.helper';
 import { debounce } from 'lodash';
 import { sameContents } from '@shell/utils/array';
@@ -82,15 +81,6 @@ export default {
       return this.$store.getters['prefs/get'](PINNED_CLUSTERS);
     },
 
-    sideMenuStyle() {
-      const globalBannerSettings = getGlobalBannerFontSizes(this.$store);
-
-      return {
-        marginBottom: globalBannerSettings?.footerFont,
-        marginTop:    globalBannerSettings?.headerFont
-      };
-    },
-
     showClusterSearch() {
       return this.allClustersCount > this.maxClustersToShow;
     },
@@ -483,7 +473,6 @@ export default {
         data-testid="side-menu"
         class="side-menu"
         :class="{'menu-open': shown, 'menu-close':!shown}"
-        :style="sideMenuStyle"
         tabindex="-1"
         role="navigation"
         :aria-label="t('nav.ariaLabel.topLevelMenu')"
@@ -1002,7 +991,7 @@ export default {
       }
     }
 
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0px;
     bottom: 0;