@rancher/shell 3.0.2-rc.2 → 3.0.2-rc.4

package/components/SideNav.vue

@@ -19,10 +19,11 @@ import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import { TYPE_MODES } from '@shell/store/type-map';
 import { NAME as NAVLINKS } from '@shell/config/product/navlinks';
 import Group from '@shell/components/nav/Group';
+import LocaleSelector from '@shell/components/LocaleSelector';
 
 export default {
   name:       'SideNav',
-  components: { Group },
+  components: { Group, LocaleSelector },
   data() {
     return {
       groups:        [],
@@ -112,9 +113,7 @@ export default {
   computed: {
     ...mapState(['managementReady', 'clusterReady']),
     ...mapGetters(['isStandaloneHarvester', 'productId', 'clusterId', 'currentProduct', 'rootProduct', 'isSingleProduct', 'namespaceMode', 'isExplorer', 'isVirtualCluster']),
-    ...mapGetters({
-      locale: 'i18n/selectedLocaleLabel', availableLocales: 'i18n/availableLocales', hasMultipleLocales: 'i18n/hasMultipleLocales'
-    }),
+    ...mapGetters({ locale: 'i18n/selectedLocaleLabel', hasMultipleLocales: 'i18n/hasMultipleLocales' }),
     ...mapGetters('type-map', ['activeProducts']),
 
     favoriteTypes: mapPref(FAVORITE_TYPES),
@@ -360,10 +359,6 @@ export default {
       });
     },
 
-    switchLocale(locale) {
-      this.$store.dispatch('i18n/switchTo', locale);
-    },
-
     syncNav() {
       const refs = this.$refs.groups;
 
@@ -427,6 +422,8 @@ export default {
       <router-link
         :to="supportLink"
         class="pull-right"
+        role="link"
+        :aria-label="t('nav.support', {hasSupport: true})"
       >
         {{ t('nav.support', {hasSupport: true}) }}
       </router-link>
@@ -439,36 +436,11 @@ export default {
       </span>
 
       <!-- locale selector -->
-      <span v-if="isSingleProduct && hasMultipleLocales && !isStandaloneHarvester">
-        <v-dropdown
-          popperClass="localeSelector"
-          placement="top"
-          :triggers="['click']"
-        >
-          <a
-            data-testid="locale-selector"
-            class="locale-chooser"
-          >
-            {{ locale }}
-          </a>
-
-          <template #popper>
-            <ul
-              class="list-unstyled dropdown"
-              style="margin: -1px;"
-            >
-              <li
-                v-for="(label, name) in availableLocales"
-                :key="name"
-                class="hand"
-                @click="switchLocale(name)"
-              >
-                {{ label }}
-              </li>
-            </ul>
-          </template>
-        </v-dropdown>
-      </span>
+      <LocaleSelector
+        v-if="isSingleProduct && hasMultipleLocales && !isStandaloneHarvester"
+        mode="login"
+        :show-icon="false"
+      />
     </div>
     <!-- SideNav footer alternative -->
     <div
@@ -478,6 +450,8 @@ export default {
       <router-link
         v-if="singleProductAbout"
         :to="singleProductAbout"
+        role="link"
+        :aria-label="t('nav.ariaLabel.productAboutPage')"
       >
         {{ displayVersion }}
       </router-link>

package/components/SortableTable/index.vue

@@ -1213,6 +1213,7 @@ export default {
             v-model="eventualSearchQuery"
             type="search"
             class="input-sm search-box"
+            :aria-label="t('sortableTable.searchLabel')"
             :placeholder="t('sortableTable.search')"
           >
           <slot name="header-button" />

package/components/Tabbed/index.vue

@@ -258,7 +258,6 @@ export default {
       role="tablist"
       class="tabs"
       :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs}"
-      tabindex="0"
       data-testid="tabbed-block"
       @keydown.right.prevent="selectNext(1)"
       @keydown.left.prevent="selectNext(-1)"
@@ -277,8 +276,11 @@ export default {
           :data-testid="`btn-${tab.name}`"
           :aria-controls="'#' + tab.name"
           :aria-selected="tab.active"
+          :aria-label="tab.labelDisplay || ''"
           role="tab"
+          tabindex="0"
           @click.prevent="select(tab.name, $event)"
+          @keyup.enter.space="select(tab.name, $event)"
         >
           <span>{{ tab.labelDisplay }}</span>
           <span
@@ -403,6 +405,12 @@ export default {
           text-decoration: underline;
         }
       }
+
+      &:focus-visible {
+        @include focus-outline;
+        outline-offset: -4px;
+        text-decoration: none;
+      }
     }
 
     .conditions-alert-icon {

package/components/YamlEditor.vue

@@ -126,6 +126,7 @@ export default {
             cm.indentSelection('subtract');
           }
         },
+        screenReaderLabel: this.t('import.editor.label'),
         // @TODO find a better way to display the outline
         // foldOptions: {
         //   widget: (from, to) => {

package/components/__tests__/Carousel.test.ts

@@ -1,35 +1,41 @@
 import { mount } from '@vue/test-utils';
 import Carousel from '@shell/components/Carousel.vue';
 
+const sliders = [
+  {
+    key:              'key-0',
+    repoName:         'some-repo-name-0',
+    chartNameDisplay: 'chart-name-display-0',
+    chartDescription: 'chart-description-0'
+  },
+  {
+    key:              'key-1',
+    repoName:         'some-repo-name-1',
+    chartNameDisplay: 'chart-name-display-1',
+    chartDescription: 'chart-description-1'
+  },
+  {
+    key:              'key-2',
+    repoName:         'some-repo-name-2',
+    chartNameDisplay: 'chart-name-display-2',
+    chartDescription: 'chart-description-2'
+  },
+  {
+    key:              'key-3',
+    repoName:         'some-repo-name-3',
+    chartNameDisplay: 'chart-name-display-3',
+    chartDescription: 'chart-description-3'
+  },
+  {
+    key:              'key-4',
+    repoName:         'some-repo-name-4',
+    chartNameDisplay: 'chart-name-display-4',
+    chartDescription: 'chart-description-4'
+  }
+];
+
 describe('component: Carousel', () => {
   it('should render component with the correct data applied', async() => {
-    const sliders = [
-      {
-        key:              'key-0',
-        repoName:         'some-repo-name-0',
-        chartNameDisplay: 'chart-name-display-0',
-        chartDescription: 'chart-description-0'
-      },
-      {
-        key:              'key-1',
-        repoName:         'some-repo-name-1',
-        chartNameDisplay: 'chart-name-display-1',
-        chartDescription: 'chart-description-1'
-      },
-      {
-        key:              'key-2',
-        repoName:         'some-repo-name-2',
-        chartNameDisplay: 'chart-name-display-2',
-        chartDescription: 'chart-description-2'
-      },
-      {
-        key:              'key-3',
-        repoName:         'some-repo-name-3',
-        chartNameDisplay: 'chart-name-display-3',
-        chartDescription: 'chart-description-3'
-      }
-    ];
-
     const wrapper = mount(Carousel, {
       props:  { sliders },
       global: { mocks: { $store: { getters: { clusterId: () => 'some-cluster-id' } } } }
@@ -40,4 +46,27 @@ describe('component: Carousel', () => {
       expect(wrapper.find(`#slide${ index } h1`).text()).toContain(slider.chartNameDisplay);
     });
   });
+
+  it.each([
+    [sliders.slice(0, 2)],
+    [sliders.slice(0, 3)],
+    [sliders.slice(0, 4)],
+    [sliders.slice(0, 5)]
+  ])('should have the correct width and left position', async(sliders) => {
+    const wrapper = mount(Carousel, {
+      props:  { sliders },
+      global: { mocks: { $store: { getters: { clusterId: () => 'some-cluster-id' } } } }
+    });
+
+    const width = 60 * (wrapper.vm.slider.length + 2);
+    const initialLeft = -(40 + wrapper.vm.activeItemId * 60);
+
+    expect(wrapper.vm.trackStyle).toContain(`width: ${ width }%`);
+    expect(wrapper.vm.trackStyle).toContain(`left: ${ initialLeft }`);
+
+    wrapper.vm.activeItemId = wrapper.vm.activeItemId + 1; // next slide
+    expect(wrapper.vm.trackStyle).toContain(`left: ${ -(40 + wrapper.vm.activeItemId * 60) }`);
+    wrapper.vm.activeItemId = wrapper.vm.activeItemId - 1; // previous slide
+    expect(wrapper.vm.trackStyle).toContain(`left: ${ initialLeft }`);
+  });
 });

package/components/auth/Principal.vue

@@ -85,9 +85,11 @@ export default {
         class="name"
       >
         <table>
-          <tr><td>{{ t('principal.name') }}: </td><td>{{ principal.name || principal.loginName }}</td></tr>
-          <tr><td>{{ t('principal.loginName') }}: </td><td>{{ principal.loginName }}</td></tr>
-          <tr><td>{{ t('principal.type') }}: </td><td>{{ principal.displayType }}</td></tr>
+          <tbody>
+            <tr><td>{{ t('principal.name') }}: </td><td>{{ principal.name || principal.loginName }}</td></tr>
+            <tr><td>{{ t('principal.loginName') }}: </td><td>{{ principal.loginName }}</td></tr>
+            <tr><td>{{ t('principal.type') }}: </td><td>{{ principal.displayType }}</td></tr>
+          </tbody>
         </table>
       </div>
       <template v-else>

package/components/fleet/FleetClusters.vue

@@ -1,10 +1,11 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
+import Tag from '@shell/components/Tag.vue';
 import { STATE, NAME, AGE, FLEET_SUMMARY } from '@shell/config/table-headers';
 import { FLEET, MANAGEMENT } from '@shell/config/types';
 
 export default {
-  components: { ResourceTable },
+  components: { ResourceTable, Tag },
 
   props: {
     rows: {
@@ -75,6 +76,12 @@ export default {
         pluralLabel:   this.$store.getters['type-map/labelFor'](schema, 99),
       };
     },
+  },
+
+  methods: {
+    toggleCustomLabels(row) {
+      row['displayCustomLabels'] = !row.displayCustomLabels;
+    }
   }
 };
 </script>
@@ -85,6 +92,7 @@ export default {
     :schema="schema"
     :headers="headers"
     :rows="rows"
+    :sub-rows="true"
     :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
     key-field="_key"
@@ -123,5 +131,78 @@ export default {
         :class="{'text-error': !row.bundleInfo.total}"
       >{{ row.bundleInfo.total }}</span>
     </template>
+
+    <template #sub-row="{fullColspan, row, onRowMouseEnter, onRowMouseLeave}">
+      <tr
+        class="labels-row sub-row"
+        @mouseenter="onRowMouseEnter"
+        @mouseleave="onRowMouseLeave"
+      >
+        <template v-if="row.customLabels.length">
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td :colspan="fullColspan-2">
+            <span
+              v-if="row.customLabels.length"
+              class="mt-5"
+            > {{ t('fleet.cluster.labels') }}:
+              <span
+                v-for="(label, i) in row.customLabels"
+                :key="i"
+                class="mt-5 labels"
+              >
+                <Tag
+                  v-if="i < 7"
+                  class="mr-5 label"
+                >
+                  {{ label }}
+                </Tag>
+                <Tag
+                  v-else-if="i > 6 && row.displayCustomLabels"
+                  class="mr-5 label"
+                >
+                  {{ label }}
+                </Tag>
+              </span>
+              <a
+                v-if="row.customLabels.length > 7"
+                href="#"
+                @click.prevent="toggleCustomLabels(row)"
+              >
+                {{ t(`fleet.cluster.${row.displayCustomLabels? 'hideLabels' : 'showLabels'}`) }}
+              </a>
+            </span>
+          </td>
+        </template>
+        <td
+          v-else
+          :colspan="fullColspan"
+        >
+&nbsp;
+        </td>
+      </tr>
+    </template>
   </ResourceTable>
 </template>
+
+<style lang='scss' scoped>
+  .labels-row {
+    td {
+      padding-top:0;
+      .tag {
+        margin-right: 5px;
+        display: inline-block;
+        margin-top: 2px;
+      }
+    }
+  }
+  .labels {
+    display: inline;
+    flex-wrap: wrap;
+
+    .label {
+      display: inline-block;
+      margin-top: 2px;
+    }
+  }
+</style>

package/components/fleet/FleetRepos.vue

@@ -6,17 +6,15 @@ import FleetIntro from '@shell/components/fleet/FleetIntro';
 
 import {
   AGE,
-  STATE,
-  NAME,
-  FLEET_SUMMARY,
   FLEET_REPO,
-  FLEET_REPO_TARGET,
-  FLEET_REPO_CLUSTERS_READY,
   FLEET_REPO_CLUSTER_SUMMARY,
-  FLEET_REPO_PER_CLUSTER_STATE
-
+  FLEET_REPO_CLUSTERS_READY,
+  FLEET_REPO_PER_CLUSTER_STATE,
+  FLEET_REPO_TARGET,
+  FLEET_SUMMARY,
+  NAME,
+  STATE,
 } from '@shell/config/table-headers';
-import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 
 // i18n-ignore repoDisplay
 export default {
@@ -77,31 +75,18 @@ export default {
 
     headers() {
       // Cluster summary is only shown in the cluster view
-      const fleetClusterSummary = {
+      const summary = this.isClusterView ? [{
         ...FLEET_REPO_CLUSTER_SUMMARY,
-        formatterOpts: {
-          // Fleet uses labels to identify clusters
-          clusterLabel: this.clusterId
-        },
-      };
+        formatterOpts: { clusterId: this.clusterId },
+      }] : [FLEET_REPO_CLUSTERS_READY, FLEET_SUMMARY];
 
       // if hasPerClusterState then use the repo state
-      const fleetPerClusterState = {
+      const state = this.isClusterView ? {
         ...FLEET_REPO_PER_CLUSTER_STATE,
-        value: (row) => {
-          const statePerCluster = row.clusterResourceStatus?.find((c) => {
-            return c.clusterLabel === this.clusterId;
-          });
-
-          return statePerCluster ? statePerCluster?.status?.displayStatus : STATES_ENUM.ACTIVE;
-        },
-      };
+        value: (repo) => repo.clusterState(this.clusterId),
+      } : STATE;
 
-      const summary = this.isClusterView ? [fleetClusterSummary] : [FLEET_REPO_CLUSTERS_READY, FLEET_SUMMARY];
-
-      const state = this.isClusterView ? fleetPerClusterState : STATE;
-
-      const out = [
+      return [
         state,
         NAME,
         FLEET_REPO,
@@ -109,8 +94,6 @@ export default {
         ...summary,
         AGE
       ];
-
-      return out;
     },
   },
   methods: {

package/components/fleet/ForceDirectedTreeChart/index.vue

@@ -386,10 +386,10 @@ export default {
                   <router-link
                     :to="item.valueObj.detailLocation"
                   >
-                    {{ item.valueObj.id }}
+                    {{ item.valueObj.label }}
                   </router-link>
                 </span>
-                <span v-else>{{ item.valueObj.id }}</span>
+                <span v-else>{{ item.valueObj.label }}</span>
               </td>
               <!-- state-badge template -->
               <td

package/components/form/ChangePassword.vue

@@ -407,6 +407,8 @@ export default {
         <Banner
           v-for="(err, i) in errorMessages"
           :key="i"
+          role="alert"
+          :aria-label="err"
           color="error"
           :label="err"
           class="mb-0"

package/components/form/ColorInput.vue

@@ -73,7 +73,21 @@ export default {
   mounted() {
     // Ensures that if the default value is used, the model is updated with it
     this.$emit('update:value', this.inputValue);
-  }
+  },
+
+  methods: {
+    handleKeyup(ev) {
+      if (this.isDisabled) {
+        return '';
+      }
+
+      return this.$refs.input.click(ev);
+    }
+  },
+
+  // according to https://www.w3.org/TR/html-aria/
+  // input type="color" has no applicable role
+  // and only aria-label and aria-disabled
 };
 </script>
 
@@ -82,6 +96,8 @@ export default {
     class="color-input"
     :class="{[mode]:mode, disabled: isDisabled}"
     :data-testid="componentTestid + '-color-input'"
+    :tabindex="isDisabled ? -1 : 0"
+    @keyup.enter.space.stop="handleKeyup($event)"
   >
     <label class="text-label"><t
       v-if="labelKey"
@@ -99,8 +115,11 @@ export default {
       >
         <input
           ref="input"
+          :aria-disabled="isDisabled ? 'true' : 'false'"
+          :aria-label="t('generic.colorPicker')"
           type="color"
           :disabled="isDisabled"
+          tabindex="-1"
           :value="inputValue"
           @input="$emit('update:value', $event.target.value)"
         >
@@ -116,6 +135,10 @@ export default {
   border-radius: var(--border-radius);
   padding: 10px;
 
+  &:focus-visible {
+    @include focus-outline;
+  }
+
   &.disabled, &.disabled .selected, &[disabled], &[disabled]:hover {
     color: var(--input-disabled-text);
     background-color: var(--input-disabled-bg);

package/components/form/FileSelector.vue

@@ -148,7 +148,9 @@ export default {
   <button
     v-if="!isView"
     :disabled="disabled"
+    :aria-label="label"
     type="button"
+    role="button"
     class="file-selector btn"
     data-testid="file-selector__uploader-button"
     @click="selectFile"