@rancher/shell 3.0.2-rc.5 → 3.0.2

package/pages/c/_cluster/explorer/__tests__/index.test.ts

@@ -71,7 +71,7 @@ describe('page: cluster dashboard', () => {
   });
 
   describe.each([
-    ['local', 'fleet', true, ['fleetDeployment', 'fleetStatefulSet'], [
+    ['local', 'fleet', true, ['fleetControllerResource', 'fleetAgentResource'], [
       [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, '', 0, 0],
       [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, false, [{ status: 'False' }], 0, 0],
       [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, true, [{ status: 'True' }], 0, 0],
@@ -80,7 +80,7 @@ describe('page: cluster dashboard', () => {
       [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 1],
       [STATES_ENUM.HEALTHY, 'icon-checkmark', true, false, false, [{ status: 'True' }], 1, 0],
     ]],
-    ['downstream RKE2', 'fleet', false, ['fleetStatefulSet'], [
+    ['downstream RKE2', 'fleet', false, ['fleetAgentResource'], [
       [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, '', 0, 0],
       [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, false, [{ status: 'False' }], 0, 0],
       [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, true, [{ status: 'True' }], 0, 0],
@@ -89,7 +89,7 @@ describe('page: cluster dashboard', () => {
       [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 1],
       [STATES_ENUM.HEALTHY, 'icon-checkmark', true, false, false, [{ status: 'True' }], 1, 0],
     ]],
-    ['downstream RKE2', 'cattle', false, ['cattleDeployment'], [
+    ['downstream RKE2', 'cattle', false, ['cattleAgentResource'], [
       [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, '', 0, 0],
       [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, false, [{ status: 'False' }], 0, 0],
       [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, [{ status: 'True' }], 0, 0],
@@ -137,7 +137,7 @@ describe('page: cluster dashboard', () => {
   });
 
   describe.each([
-    ['local', 'fleet', true, ['fleetDeployment', 'fleetStatefulSet'], [
+    ['local', 'fleet', true, ['fleetControllerResource', 'fleetAgentResource'], [
       [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, false, '', 0, 0],
       [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, false, [{ status: 'False' }], 0, 0],
       [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, true, [{ status: 'True' }], 0, 0],
@@ -146,7 +146,7 @@ describe('page: cluster dashboard', () => {
       [STATES_ENUM.WARNING, 'icon-warning', true, true, false, false, [{ status: 'True' }], 0, 1],
       [STATES_ENUM.HEALTHY, 'icon-checkmark', false, true, false, false, [{ status: 'True' }], 1, 0],
     ]],
-    ['downstream RKE2', 'fleet', false, ['fleetStatefulSet'], [
+    ['downstream RKE2', 'fleet', false, ['fleetAgentResource'], [
       [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, false, '', 0, 0],
       [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, false, [{ status: 'False' }], 0, 0],
       [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, true, [{ status: 'True' }], 0, 0],
@@ -155,7 +155,7 @@ describe('page: cluster dashboard', () => {
       [STATES_ENUM.WARNING, 'icon-warning', true, true, false, false, [{ status: 'True' }], 0, 1],
       [STATES_ENUM.HEALTHY, 'icon-checkmark', false, true, false, false, [{ status: 'True' }], 1, 0],
     ]],
-    ['downstream RKE2', 'cattle', false, ['cattleDeployment'], [
+    ['downstream RKE2', 'cattle', false, ['cattleAgentResource'], [
       [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, false, '', 0, 0],
       [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, false, [{ status: 'False' }], 0, 0],
       [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, true, false, [{ status: 'True' }], 0, 0],
@@ -228,9 +228,9 @@ describe('page: cluster dashboard', () => {
     const wrapper = shallowMount(Dashboard, {
       ...options,
       data: () => ({
-        cattleDeployment: 'loading',
-        disconnected:     false,
-        canViewAgents:    true
+        cattleAgentResource: 'loading',
+        disconnected:        false,
+        canViewAgents:       true
       })
     });
 

package/pages/c/_cluster/explorer/index.vue

@@ -134,17 +134,17 @@ export default {
 
     return {
       nodeHeaders,
-      constraints:        [],
-      cattleDeployment:   'loading',
-      fleetDeployment:    'loading',
-      fleetStatefulSet:   'loading',
-      disconnected:       false,
-      events:             [],
-      nodeMetrics:        [],
-      showClusterMetrics: false,
-      showK8sMetrics:     false,
-      showEtcdMetrics:    false,
-      canViewMetrics:     false,
+      constraints:             [],
+      cattleAgentResource:     'loading',
+      fleetControllerResource: 'loading',
+      fleetAgentResource:      'loading',
+      disconnected:            false,
+      events:                  [],
+      nodeMetrics:             [],
+      showClusterMetrics:      false,
+      showK8sMetrics:          false,
+      showEtcdMetrics:         false,
+      canViewMetrics:          false,
       CLUSTER_METRICS_DETAIL_URL,
       CLUSTER_METRICS_SUMMARY_URL,
       K8S_METRICS_DETAIL_URL,
@@ -153,9 +153,9 @@ export default {
       ETCD_METRICS_SUMMARY_URL,
       STATES_ENUM,
       clusterCounts,
-      selectedTab:        'cluster-events',
-      extensionCards:     getApplicableExtensionEnhancements(this, ExtensionPoint.CARD, CardLocation.CLUSTER_DASHBOARD_CARD, this.$route),
-      canViewEvents:      !!this.$store.getters['cluster/schemaFor'](EVENT),
+      selectedTab:             'cluster-events',
+      extensionCards:          getApplicableExtensionEnhancements(this, ExtensionPoint.CARD, CardLocation.CLUSTER_DASHBOARD_CARD, this.$route),
+      canViewEvents:           !!this.$store.getters['cluster/schemaFor'](EVENT),
       clusterServiceIcons,
     };
   },
@@ -197,11 +197,7 @@ export default {
     },
 
     fleetAgentNamespace() {
-      if (this.currentCluster.isLocal) {
-        return this.$store.getters['cluster/canList'](WORKLOAD_TYPES.DEPLOYMENT) && this.$store.getters['cluster/canList'](WORKLOAD_TYPES.STATEFUL_SET) && this.$store.getters['cluster/byId'](NAMESPACE, 'cattle-fleet-system');
-      }
-
-      return this.$store.getters['cluster/canList'](WORKLOAD_TYPES.STATEFUL_SET) && this.$store.getters['cluster/byId'](NAMESPACE, 'cattle-fleet-system');
+      return this.$store.getters['cluster/canList'](WORKLOAD_TYPES.DEPLOYMENT) && this.$store.getters['cluster/byId'](NAMESPACE, 'cattle-fleet-system');
     },
 
     cattleAgentNamespace() {
@@ -331,7 +327,7 @@ export default {
     },
 
     cattleAgent() {
-      const resources = [this.cattleDeployment];
+      const resources = [this.cattleAgentResource];
 
       return this.getAgentStatus(resources, { checkDisconnected: true });
     },
@@ -339,12 +335,12 @@ export default {
     fleetAgent() {
       const resources = this.currentCluster.isLocal ? [
         /**
-         * 'fleetStatefulSet' could take a while to be created by rancher.
-         * During that startup period, only 'fleetDeployment' will be used to calculate the fleet agent status.
+         * 'fleetAgentResource' could take a while to be created by rancher.
+         * During that startup period, only 'fleetControllerResource' will be used to calculate the fleet agent status.
          */
-        ...(this.fleetStatefulSet ? [this.fleetStatefulSet, this.fleetDeployment] : [this.fleetDeployment]),
+        ...(this.fleetAgentResource ? [this.fleetAgentResource, this.fleetControllerResource] : [this.fleetControllerResource]),
       ] : [
-        this.fleetStatefulSet
+        this.fleetAgentResource
       ];
 
       return this.getAgentStatus(resources);
@@ -492,23 +488,23 @@ export default {
     loadAgents() {
       if (this.fleetAgentNamespace) {
         if (this.currentCluster.isLocal) {
-          this.setAgentResource('fleetDeployment', WORKLOAD_TYPES.DEPLOYMENT, 'cattle-fleet-system/fleet-controller');
-          this.setAgentResource('fleetStatefulSet', WORKLOAD_TYPES.STATEFUL_SET, 'cattle-fleet-local-system/fleet-agent');
+          this.setAgentResource('fleetControllerResource', 'cattle-fleet-system/fleet-controller');
+          this.setAgentResource('fleetAgentResource', 'cattle-fleet-local-system/fleet-agent');
         } else {
-          this.setAgentResource('fleetStatefulSet', WORKLOAD_TYPES.STATEFUL_SET, 'cattle-fleet-system/fleet-agent');
+          this.setAgentResource('fleetAgentResource', 'cattle-fleet-system/fleet-agent');
         }
       }
       if (this.cattleAgentNamespace) {
-        this.setAgentResource('cattleDeployment', WORKLOAD_TYPES.DEPLOYMENT, 'cattle-system/cattle-cluster-agent');
+        this.setAgentResource('cattleAgentResource', 'cattle-system/cattle-cluster-agent');
         this.interval = setInterval(() => {
           this.disconnected = !!this.$store.getters['cluster/inError']({ type: NODE });
         }, 1000);
       }
     },
 
-    async setAgentResource(agent, type, id) {
+    async setAgentResource(agent, id) {
       try {
-        this[agent] = await this.$store.dispatch('cluster/find', { type, id });
+        this[agent] = await this.$store.dispatch('cluster/find', { type: WORKLOAD_TYPES.DEPLOYMENT, id });
       } catch (err) {
         this[agent] = null;
       }
@@ -673,11 +669,13 @@ export default {
       </div>
       <div data-testid="created__label">
         <label>{{ t('glance.created') }}: </label>
-        <span><LiveDate
-          :value="currentCluster.metadata.creationTimestamp"
-          :add-suffix="true"
-          :show-tooltip="true"
-        /></span>
+        <span>
+          <LiveDate
+            :value="currentCluster.metadata.creationTimestamp"
+            :add-suffix="true"
+            :show-tooltip="true"
+          />
+        </span>
       </div>
       <div :style="{'flex':1}" />
       <div v-if="showClusterTools">

package/pages/c/_cluster/explorer/tools/index.vue

@@ -60,7 +60,7 @@ export default {
       const out = {};
 
       for (const app of (this.installedApps || [])) {
-        const matching = app.matchingChart();
+        const matching = app.matchingCharts()[0];
 
         if ( !matching ) {
           continue;
@@ -328,8 +328,8 @@ export default {
             >{{ t('catalog.charts.deploysOnWindows') }}</label>
           </div>
           <div class="version">
-            <template v-if="opt.app && opt.app.upgradeAvailable">
-              v{{ opt.app.currentVersion }} <b><i class="icon icon-chevron-right" /> v{{ opt.app.upgradeAvailable }}</b>
+            <template v-if="opt.app && opt.app.upgradeAvailableVersion">
+              v{{ opt.app.currentVersion }} <b><i class="icon icon-chevron-right" /> v{{ opt.app.upgradeAvailableVersion }}</b>
             </template>
             <template v-else-if="opt.app">
               v{{ opt.app.currentVersion }}

package/pages/c/_cluster/fleet/index.vue

@@ -42,15 +42,10 @@ export default {
         inStoreType: 'management',
         type:        FLEET.CLUSTER_GROUP
       },
-      allBundleDeployments: {
-        inStoreType: 'management',
-        type:        FLEET.BUNDLE_DEPLOYMENT,
-      },
       allBundles: {
         inStoreType: 'management',
         type:        FLEET.BUNDLE,
         opt:         { excludeFields: ['metadata.managedFields', 'spec.resources'] },
-        skipWait:    true,
       },
       gitRepos: {
         inStoreType: 'management',

package/pages/c/_cluster/legacy/project/index.vue

@@ -17,7 +17,7 @@ export default {
     project(nue, old) {
       if (nue && !old) {
         // User selected a project while on this page, so redirect to the projects view now that we have a project
-        this.$router.replace({ name: 'c-cluster-legacy-project-page', params: { page: 'apps' } });
+        this.$router.replace({ name: 'c-cluster-legacy-project-page', params: { page: 'config-maps' } });
       }
     }
   }

package/pages/c/_cluster/settings/performance.vue

@@ -10,6 +10,8 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import UnitInput from '@shell/components/form/UnitInput';
 import { STEVE_CACHE } from '@shell/store/features';
 import { NAME as SETTING_PRODUCT } from '@shell/config/product/settings';
+import paginationUtils from '@shell/utils/pagination-utils';
+import Collapse from '@shell/components/Collapse';
 
 const incompatible = {
   incrementalLoading: ['forceNsFilterV2', 'serverPagination'],
@@ -32,7 +34,8 @@ export default {
     AsyncButton,
     Banner,
     LabeledInput,
-    UnitInput
+    UnitInput,
+    Collapse,
   },
 
   async fetch() {
@@ -74,7 +77,8 @@ export default {
           product:  SETTING_PRODUCT,
           resource: MANAGEMENT.FEATURE
         }
-      }).href
+      }).href,
+      ssPApplicableTypesOpen: false,
     };
   },
 
@@ -93,10 +97,15 @@ export default {
       return this.$store.getters['features/get'](STEVE_CACHE);
     },
 
-    steveCacheApplicableResources() {
+    steveCacheAndSSPEnabled() {
+      return this.steveCacheEnabled && this.value.serverPagination.enabled;
+    },
+
+    sspApplicableResources() {
       const storeResources = [];
+      const stores = paginationUtils.getStoreSettings(this.value.serverPagination);
 
-      Object.entries(this.value.serverPagination.stores).forEach(([store, settings]) => {
+      Object.entries(stores).forEach(([store, settings]) => {
         const resources = [];
 
         if (settings.resources.enableAll) {
@@ -173,7 +182,7 @@ export default {
       this.$store.dispatch('cluster/promptModal', {
         component:      'GenericPrompt',
         componentProps: {
-          applyMode: 'enable',
+          applyMode: 'continue',
           confirm:   (confirmed) => {
             this.value[property].enabled = confirmed;
           },
@@ -188,13 +197,6 @@ export default {
         },
       });
     },
-
-    setPaginationDefaults() {
-      this.value = {
-        ...this.value,
-        serverPagination: { ...DEFAULT_PERF_SETTING.serverPagination }
-      };
-    }
   },
 };
 </script>
@@ -207,45 +209,6 @@ export default {
     </h1>
     <div>
       <div class="ui-perf-setting">
-        <!-- Server Side Pagination -->
-        <div class="mt-40">
-          <h2 id="ssp-setting">
-            {{ t('performance.serverPagination.label') }}
-          </h2>
-          <p>{{ t('performance.serverPagination.description') }}</p>
-          <Banner
-            color="error"
-            label-key="performance.experimental"
-          />
-          <Banner
-            v-if="!steveCacheEnabled"
-            v-clean-html="t(`performance.serverPagination.featureFlag`, { ffUrl }, true)"
-            color="warning"
-          />
-          <Checkbox
-            v-model:value="value.serverPagination.enabled"
-            :mode="mode"
-            :label="t('performance.serverPagination.checkboxLabel')"
-            class="mt-10 mb-20"
-            :primary="true"
-            :disabled="(!steveCacheEnabled && !value.serverPagination.enabled)"
-            @update:value="compatibleWarning('serverPagination', $event)"
-          />
-          <p :class="{ 'text-muted': !value.serverPagination.enabled }">
-            {{ t('performance.serverPagination.applicable') }}
-          </p>
-          <p
-            v-clean-html="steveCacheApplicableResources"
-            :class="{ 'text-muted': !value.serverPagination.enabled }"
-          />
-          <button
-            class="btn btn-sm role-primary"
-            style="width: fit-content;"
-            @click.prevent="setPaginationDefaults()"
-          >
-            {{ t('performance.serverPagination.populateDefaults') }}
-          </button>
-        </div>
         <!-- Inactivity -->
         <div class="mt-20">
           <h2>{{ t('performance.inactivity.title') }}</h2>
@@ -287,8 +250,44 @@ export default {
             :primary="true"
           />
         </div>
+        <!-- Server Side Pagination -->
+        <div class="mt-20">
+          <h2 id="ssp-setting">
+            {{ t('performance.serverPagination.label') }}
+          </h2>
+          <p>{{ t('performance.serverPagination.description') }}</p>
+          <Banner
+            v-if="!steveCacheEnabled"
+            v-clean-html="t(`performance.serverPagination.featureFlag`, { ffUrl }, true)"
+            color="warning"
+          />
+          <Banner
+            color="error"
+            label-key="performance.serverPagination.experimental"
+          />
+          <Checkbox
+            v-model:value="value.serverPagination.enabled"
+            :mode="mode"
+            :label="t('performance.serverPagination.checkboxLabel')"
+            class="mt-10 mb-10"
+            :primary="true"
+            :disabled="!steveCacheEnabled"
+            @update:value="compatibleWarning('serverPagination', $event)"
+          />
+          <Collapse
+            :title="t('performance.serverPagination.applicable')"
+            :open="steveCacheAndSSPEnabled && ssPApplicableTypesOpen"
+            :isDisabled="!steveCacheAndSSPEnabled"
+            @update:open="ssPApplicableTypesOpen = !ssPApplicableTypesOpen"
+          >
+            <p
+              v-clean-html="sspApplicableResources"
+              :class="{ 'text-muted': !value.serverPagination.enabled }"
+            />
+          </Collapse>
+        </div>
         <!-- Incremental Loading -->
-        <div class="mt-40">
+        <div class="mt-20">
           <h2>{{ t('performance.incrementalLoad.label') }}</h2>
           <Banner
             color="warning"
@@ -451,7 +450,7 @@ export default {
           />
         </div>
         <!-- Advanced Websocket Worker -->
-        <div class="mt-40">
+        <div class="mt-20">
           <h2>{{ t('performance.advancedWorker.label') }}</h2>
           <Banner
             color="warning"

package/pages/c/_cluster/uiplugins/index.vue

@@ -9,7 +9,7 @@ import { fetchOrCreateSetting } from '@shell/utils/settings';
 import { getVersionData, isRancherPrime } from '@shell/config/version';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { NAME as APP_PRODUCT } from '@shell/config/product/apps';
-import ActionMenu from '@shell/components/ActionMenu';
+import ActionMenu from '@shell/components/ActionMenuShell';
 import Tabbed from '@shell/components/Tabbed/index.vue';
 import Tab from '@shell/components/Tabbed/Tab.vue';
 import IconMessage from '@shell/components/IconMessage.vue';
@@ -45,7 +45,8 @@ const TABS_VALUES = {
   INSTALLED: 'installed',
   UPDATES:   'updates',
   AVAILABLE: 'available',
-  ALL:       'all'
+  BUILTIN:   'builtin',
+  ALL:       'all',
 };
 
 export default {
@@ -210,15 +211,19 @@ export default {
     },
 
     list() {
-      const all = this.available;
+      // If not an extension developer, then don't include built-in extensions
+      const all = this.pluginDeveloper ? this.available : this.available.filter((p) => !p.builtin);
 
       switch (this.view) {
       case TABS_VALUES.INSTALLED:
-        return all.filter((p) => !!p.installed || !!p.installing);
+        // We never show built-in extensions as installed - installed are just the ones the user has installed
+        return all.filter((p) => !p.builtin && (!!p.installed || !!p.installing));
       case TABS_VALUES.UPDATES:
         return this.updates;
       case TABS_VALUES.AVAILABLE:
         return all.filter((p) => !p.installed);
+      case TABS_VALUES.BUILTIN:
+        return all.filter((p) => p.builtin);
       default:
         return all;
       }
@@ -688,25 +693,11 @@ export default {
         </div>
         <!-- extensions menu -->
         <div v-if="hasFeatureFlag && hasMenuActions">
-          <button
-            ref="actions"
-            aria-haspopup="true"
-            type="button"
-            class="btn role-multi-action actions"
-            data-testid="extensions-page-menu"
-            role="button"
-            :aria-label="t('plugins.labels.menu')"
-            @click="setMenu"
-          >
-            <i class="icon icon-actions" />
-          </button>
           <ActionMenu
+            data-testid="extensions-page-menu"
+            button-role="tertiary"
+            :button-aria-label="t('plugins.labels.menu')"
             :custom-actions="menuActions"
-            :open="menuOpen"
-            :use-custom-target-element="true"
-            :custom-target-element="menuTargetElement"
-            :custom-target-event="menuTargetEvent"
-            @close="setMenu(false)"
             @devLoad="showDeveloperLoadDialog"
             @manageRepos="manageRepos"
             @addRancherRepos="showAddExtensionReposDialog"
@@ -790,10 +781,16 @@ export default {
             :weight="18"
             :badge="updates.length"
           />
+          <Tab
+            v-if="pluginDeveloper"
+            :name="TABS_VALUES.BUILTIN"
+            label-key="plugins.tabs.builtin"
+            :weight="17"
+          />
           <Tab
             :name="TABS_VALUES.ALL"
             label-key="plugins.tabs.all"
-            :weight="17"
+            :weight="16"
           />
         </Tabbed>
         <div

package/pages/home.vue

@@ -29,6 +29,8 @@ import { PaginationParamFilter, FilterArgs, PaginationFilterField, PaginationArg
 import ProvCluster from '@shell/models/provisioning.cattle.io.cluster';
 import { sameContents } from '@shell/utils/array';
 import { PagTableFetchPageSecondaryResourcesOpts, PagTableFetchSecondaryResourcesOpts, PagTableFetchSecondaryResourcesReturns } from '@shell/types/components/paginatedResourceTable';
+import { CURRENT_RANCHER_VERSION } from '@shell/config/version';
+import { CAPI as CAPI_LAB_AND_ANO } from '@shell/config/labels-annotations';
 
 export default defineComponent({
   name:       'Home',
@@ -53,17 +55,17 @@ export default defineComponent({
       // Page actions don't change on the Home Page
       pageActions: [
         {
-          labelKey: 'nav.header.setLoginPage',
-          action:   SET_LOGIN_ACTION
+          label:  this.t('nav.header.setLoginPage'),
+          action: SET_LOGIN_ACTION
         },
-        { separator: true },
+        { divider: true },
         {
-          labelKey: 'nav.header.showHideBanner',
-          action:   SHOW_HIDE_BANNER_ACTION
+          label:  this.t('nav.header.showHideBanner'),
+          action: SHOW_HIDE_BANNER_ACTION
         },
         {
-          labelKey: 'nav.header.restoreCards',
-          action:   RESET_CARDS_ACTION
+          label:  this.t('nav.header.restoreCards'),
+          action: RESET_CARDS_ACTION
         },
       ],
       vendor: getVendor(),
@@ -155,11 +157,12 @@ export default defineComponent({
 
       paginationHeaders: [
         STEVE_STATE_COL,
-        // https://github.com/rancher/dashboard/issues/12890 BUG - rke1 cluster's prov cluster metadata.name is the mgmt cluster id rather than true name
         {
           ...STEVE_NAME_COL,
           canBeVariable: true,
-          getValue:      (row: ProvCluster) => row.metadata?.name
+          value:         `metadata.annotations[${ CAPI_LAB_AND_ANO.HUMAN_NAME }]`,
+          sort:          [`metadata.annotations[${ CAPI_LAB_AND_ANO.HUMAN_NAME }]`],
+          search:        `metadata.annotations[${ CAPI_LAB_AND_ANO.HUMAN_NAME }]`,
         },
         {
           label:     this.t('landing.clusters.provider'),
@@ -203,6 +206,8 @@ export default defineComponent({
       ],
 
       clusterCount: 0,
+
+      CURRENT_RANCHER_VERSION
     };
   },
 
@@ -527,7 +532,7 @@ export default defineComponent({
             color="info whats-new"
           >
             <div>
-              {{ t('landing.seeWhatsNew') }}
+              {{ t('landing.seeWhatsNew', { version: CURRENT_RANCHER_VERSION }) }}
             </div>
             <a
               class="hand banner-link"
@@ -535,10 +540,10 @@ export default defineComponent({
               role="link"
               target="_blank"
               rel="noopener noreferrer nofollow"
-              :aria-label="t('landing.whatsNewLink')"
+              :aria-label="t('landing.whatsNewLink', { version: CURRENT_RANCHER_VERSION })"
               @click.stop="showWhatsNew"
               @keyup.stop.enter="showWhatsNew"
-            ><span v-clean-html="t('landing.whatsNewLink')" /></a>
+            ><span v-clean-html="t('landing.whatsNewLink', { version: CURRENT_RANCHER_VERSION })" /></a>
           </Banner>
         </div>
       </div>

package/pages/prefs.vue

@@ -191,11 +191,15 @@ export default {
       v-if="hasMultipleLocales && !isHarvester"
       class="mt-10 mb-10"
     >
-      <h4 v-t="'prefs.language'" />
+      <h4
+        id="prefs-language"
+        v-t="'prefs.language'"
+      />
       <div class="row">
         <div class="col span-4">
           <LocaleSelector
             data-testid="prefs__languageSelector"
+            aria-labelledby="prefs-language"
           />
         </div>
       </div>

package/plugins/shortkey.js

@@ -10,6 +10,7 @@ const ShortKey = {};
 const mapFunctions = {};
 let objAvoided = [];
 let elementAvoided = [];
+let containerAvoided = [];
 let keyPressed = false;
 
 const parseValue = (value) => {
@@ -55,6 +56,7 @@ const unbindValue = (value, el) => {
 
 ShortKey.install = (Vue, options) => {
   elementAvoided = [...(options && options.prevent ? options.prevent : [])];
+  containerAvoided = [...(options && options.preventContainer ? options.preventContainer : [])];
   Vue.directive('shortkey', {
     beforeMount: (el, binding, vnode) => {
       // Mapping the commands
@@ -266,8 +268,15 @@ const mappingFunctions = ({
 const availableElement = (decodedKey) => {
   const objectIsAvoided = !!objAvoided.find((r) => r === document.activeElement);
   const filterAvoided = !!(elementAvoided.find((selector) => document.activeElement && document.activeElement.matches(selector)));
+  const filterAvoidedContainer = !!(containerAvoided.find((selector) => isActiveElementChildOf(selector)));
 
-  return !!mapFunctions[decodedKey] && !(objectIsAvoided || filterAvoided);
+  return !!mapFunctions[decodedKey] && !(objectIsAvoided || filterAvoided) && !filterAvoidedContainer;
+};
+
+const isActiveElementChildOf = (container) => {
+  const activeElement = document.activeElement;
+
+  return activeElement && activeElement.closest(container) !== null;
 };
 
 export default ShortKey;