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

package/components/Questions/Reference.vue

@@ -1,7 +1,8 @@
 <script>
 import { LabeledInput } from '@components/Form/LabeledInput';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { filterBy } from '@shell/utils/array';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect.vue';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+
 import { PVC, STORAGE_CLASS } from '@shell/config/types';
 import Question from './Question';
 
@@ -14,7 +15,7 @@ const LEGACY_MAP = {
 export default {
   emits: ['update:value'],
 
-  components: { LabeledInput, LabeledSelect },
+  components: { LabeledInput, ResourceLabeledSelect },
   mixins:     [Question],
 
   props: {
@@ -29,12 +30,6 @@ export default {
     },
   },
 
-  async fetch() {
-    if ( this.typeSchema ) {
-      this.all = await this.$store.dispatch(`${ this.inStore }/findAll`, { type: this.typeName });
-    }
-  },
-
   data() {
     const t = this.question.type;
 
@@ -57,29 +52,61 @@ export default {
     return {
       typeName,
       typeSchema,
-      all: [],
+      all:                 [],
+      allResourceSettings: {
+        updateResources: (all) => {
+          // Filter to only include required namespaced resources
+          const resources = this.isNamespaced ? all.filter((r) => r.metadata.namespace === this.targetNamespace) : all;
+
+          return this.mapResourcesToOptions(resources);
+        }
+      },
+      paginateResourceSetting: {
+        updateResources: (resources) => {
+          return this.mapResourcesToOptions(resources);
+        },
+        /**
+          * of type PaginateTypeOverridesFn
+          * @param [LabelSelectPaginationFunctionOptions] opts
+          * @returns LabelSelectPaginationFunctionOptions
+         */
+        requestSettings: (opts) => {
+          // Filter to only include required namespaced resources
+          const filters = this.isNamespaced ? [
+            PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: this.targetNamespace }),
+          ] : [];
+
+          return {
+            ...opts,
+            filters,
+            groupByNamespace: false,
+            classify:         true,
+          };
+        }
+      },
     };
   },
 
+  methods: {
+    mapResourcesToOptions(resources) {
+      return resources.map((r) => {
+        if (r.id) {
+          return {
+            label: r.nameDisplay || r.metadata.name,
+            value: r.metadata.name
+          };
+        } else {
+          return r;
+        }
+      });
+    },
+
+  },
+
   computed: {
     isNamespaced() {
       return !!this.typeSchema?.attributes?.namespaced;
     },
-
-    options() {
-      let out = this.all;
-
-      if ( this.isNamespaced ) {
-        out = filterBy(this.all, 'metadata.namespace', this.targetNamespace);
-      }
-
-      return out.map((x) => {
-        return {
-          label: x.nameDisplay || x.metadata.name,
-          value: x.metadata.name
-        };
-      });
-    }
   },
 };
 </script>
@@ -90,15 +117,17 @@ export default {
     class="row"
   >
     <div class="col span-6">
-      <LabeledSelect
-        :mode="mode"
-        :options="options"
+      <ResourceLabeledSelect
+        :resource-type="typeName"
+        :in-store="inStore"
         :disabled="$fetchState.pending || disabled"
         :label="displayLabel"
         :placeholder="question.description"
         :required="question.required"
         :value="value"
         :tooltip="displayTooltip"
+        :paginated-resource-settings="paginateResourceSetting"
+        :all-resources-settings="allResourceSettings"
         @update:value="!$fetchState.pending && $emit('update:value', $event)"
       />
     </div>

package/components/SelectIconGrid.vue

@@ -104,6 +104,10 @@ export default {
       :is="asLink ? 'a' : 'div'"
       v-for="(r, idx) in rows"
       :key="get(r, keyField)"
+      :role="asLink ? 'link' : null"
+      :aria-disabled="asLink && get(r, disabledField) === true ? true : null"
+      :aria-label="get(r, nameField)"
+      :tabindex="get(r, disabledField) === true ? -1 : 0"
       :href="asLink ? get(r, linkField) : null"
       :target="get(r, targetField)"
       :rel="rel"
@@ -111,9 +115,12 @@ export default {
       :data-testid="componentTestid + '-' + get(r, nameField)"
       :class="{
         'has-description': !!get(r, descriptionField),
-        'has-side-label': !!get(r, sideLabelField), [colorFor(r, idx)]: true, disabled: get(r, disabledField) === true
+        'has-side-label': !!get(r, sideLabelField),
+        [colorFor(r, idx)]: true,
+        disabled: get(r, disabledField) === true
       }"
       @click="select(r, idx)"
+      @keyup.enter.space="select(r, idx)"
     >
       <div
         class="side-label"
@@ -212,6 +219,10 @@ export default {
       text-decoration: none !important;
       color: $color;
 
+      &:focus-visible {
+        @include focus-outline;
+      }
+
       &:hover:not(.disabled) {
         box-shadow: 0 0 30px var(--shadow);
         transition: box-shadow 0.1s ease-in-out;

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,12 @@ 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="select(tab.name, $event)"
+          @keyup.space="select(tab.name, $event)"
         >
           <span>{{ tab.labelDisplay }}</span>
           <span
@@ -403,6 +406,14 @@ export default {
           text-decoration: underline;
         }
       }
+
+      &:focus-visible {
+        @include focus-outline;
+
+        span {
+          text-decoration: underline;
+        }
+      }
     }
 
     .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/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"