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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.2-rc.2",
+  "version": "3.0.2-rc.4",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -31,7 +31,7 @@
     "@aws-sdk/client-eks": "3.1.0",
     "@aws-sdk/client-iam": "3.658.1",
     "@aws-sdk/client-kms": "3.8.1",
-    "@babel/plugin-proposal-optional-chaining": "7.14.5",
+    "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "@babel/plugin-proposal-private-methods": "7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "7.14.5",
     "@babel/preset-typescript": "7.16.7",
@@ -64,7 +64,7 @@
     "cookie": "0.7.0",
     "core-js": "3.40.0",
     "cron-validator": "1.3.1",
-    "cronstrue": "2.50.0",
+    "cronstrue": "2.53.0",
     "cross-env": "7.0.3",
     "css-loader": "6.7.3",
     "csv-loader": "3.0.3",
@@ -91,6 +91,7 @@
     "express": "4.17.1",
     "file-saver": "2.0.2",
     "floating-vue": "5.2.2",
+    "focus-trap": "7.6.2",
     "frontmatter-markdown-loader": "3.7.0",
     "identicon.js": "2.3.3",
     "intl-messageformat": "7.8.4",
@@ -120,7 +121,7 @@
     "set-cookie-parser": "2.4.6",
     "shell-quote": "1.7.3",
     "sinon": "8.1.1",
-    "start-server-and-test": "1.13.1",
+    "start-server-and-test": "2.0.10",
     "style-loader": "1.2.1",
     "ts-node": "8.10.2",
     "typescript": "5.6.3",

package/pages/account/index.vue

@@ -160,6 +160,8 @@ export default {
       <div>
         <button
           v-if="canChangePassword"
+          role="button"
+          :aria-label="t('accountAndKeys.account.change')"
           type="button"
           class="btn role-primary"
           data-testid="account_change_password"
@@ -182,6 +184,8 @@ export default {
       </div>
       <button
         v-if="apiKeySchema"
+        role="button"
+        :aria-label="t('accountAndKeys.apiKeys.add.label')"
         class="btn role-primary add mb-20"
         data-testid="account_create_api_keys"
         @click="addKey"

package/pages/c/_cluster/apps/charts/index.vue

@@ -455,6 +455,8 @@ export default {
           class="input-sm"
           :placeholder="t('catalog.charts.search')"
           data-testid="charts-filter-input"
+          :aria-label="t('catalog.charts.search')"
+          role="textbox"
         >
 
         <button
@@ -463,6 +465,8 @@ export default {
           @shortkey="focusSearch()"
         />
         <AsyncButton
+          role="button"
+          :aria-label="t('catalog.charts.refresh')"
           class="refresh-btn"
           mode="refresh"
           size="sm"

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

@@ -26,16 +26,18 @@ export default {
 <template>
   <div class="config-badge">
     <div>
-      <a
+      <button
         class="badge-install btn btn-sm role-secondary"
         data-testid="add-custom-cluster-badge"
+        role="button"
+        tabindex="0"
         @click="customBadgeDialog"
       >
         <i
           v-clean-tooltip="tooltip"
           class="icon icon-brush-icon"
         />
-      </a>
+      </button>
     </div>
   </div>
 </template>

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

@@ -641,12 +641,14 @@ export default {
       <div data-testid="clusterProvider__label">
         <label>{{ t('glance.provider') }}: </label>
         <span v-if="isHarvesterCluster">
-          <a
+          <button
+            class="btn role-link harvester-cluster-link"
             role="button"
+            :aria-label="displayProvider"
             @click="goToHarvesterCluster"
           >
             {{ displayProvider }}
-          </a>
+          </button>
         </span>
         <span v-else>
           {{ displayProvider }}
@@ -682,6 +684,8 @@ export default {
         <router-link
           :to="{name: 'c-cluster-explorer-tools'}"
           class="cluster-tools-link"
+          role="link"
+          :aria-label="t('nav.clusterTools')"
         >
           <span>{{ t('nav.clusterTools') }}</span>
         </router-link>
@@ -871,6 +875,13 @@ export default {
   grid-row-gap: 20px;
 }
 
+.harvester-cluster-link {
+  line-height: inherit;
+  min-height: inherit;
+  padding: 0;
+  vertical-align: bottom;
+}
+
 @media only screen and (max-width: map-get($breakpoints, "--viewport-9")) {
   .extension-card-container {
     grid-template-columns: 1fr !important;
@@ -935,10 +946,6 @@ export default {
     line-height: inherit;
     margin-right: 4px;
   }
-
-  &:focus {
-    outline: 0;
-  }
 }
 
 .cert-table-link {

package/pages/c/_cluster/fleet/GitRepoGraphConfig.js

@@ -77,7 +77,7 @@ export const gitRepoGraphConfig = {
           id:                    bd.id,
           matchingId:            bd.id,
           type:                  bd.type,
-          clusterId:             cluster ? cluster.id : undefined,
+          clusterLabel:          cluster ? cluster.namespacedName : undefined,
           clusterDetailLocation: cluster ? cluster.detailLocation : undefined,
           state:                 bd.state,
           stateLabel:            bd.stateDisplay,
@@ -210,7 +210,7 @@ export const gitRepoGraphConfig = {
         type:     'title-link',
         labelKey: 'fleet.fdc.id',
         valueObj: {
-          id:             data.id,
+          label:          data.id,
           detailLocation: data.detailLocation
         }
       }
@@ -221,7 +221,7 @@ export const gitRepoGraphConfig = {
         type:     'title-link',
         labelKey: 'fleet.fdc.cluster',
         valueObj: {
-          id:             data.clusterId,
+          label:          data.clusterLabel,
           detailLocation: data.clusterDetailLocation
         }
       });

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

@@ -2,7 +2,12 @@
 import { mapState } from 'vuex';
 import { FLEET } from '@shell/config/types';
 import { WORKSPACE } from '@shell/store/prefs';
-import { STATES_ENUM, STATES, getStateLabel } from '@shell/plugins/dashboard-store/resource-class';
+import {
+  getStateLabel,
+  primaryDisplayStatusFromCount,
+  STATES,
+  STATES_ENUM,
+} from '@shell/plugins/dashboard-store/resource-class';
 import Loading from '@shell/components/Loading';
 import CollapsibleCard from '@shell/components/CollapsibleCard.vue';
 import ResourceTable from '@shell/components/ResourceTable';
@@ -37,10 +42,15 @@ 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',
@@ -98,7 +108,6 @@ export default {
         }
       ],
       schema:              {},
-      allBundles:          [],
       gitRepos:            [],
       fleetWorkspacesData: [],
       isCollapsed:         {},
@@ -138,14 +147,24 @@ export default {
       });
     },
     workspacesData() {
-      return this.fleetWorkspaces.filter((ws) => ws.repos && ws.repos.length);
+      return this.fleetWorkspaces.filter((ws) => ws.counts.gitRepos > 0);
     },
     emptyWorkspaces() {
-      return this.fleetWorkspaces.filter((ws) => !ws.repos || !ws.repos.length);
+      return this.fleetWorkspaces.filter((ws) => ws.counts.gitRepos === 0);
     },
     areAllCardsExpanded() {
       return Object.keys(this.isCollapsed).every((key) => !this.isCollapsed[key]);
-    }
+    },
+    gitReposCounts() {
+      return this.gitRepos.reduce((prev, gitRepo) => {
+        prev[gitRepo.id] = {
+          bundles:   gitRepo.allBundlesStatuses,
+          resources: gitRepo.allResourceStatuses,
+        };
+
+        return prev;
+      }, {});
+    },
   },
   methods: {
     setWorkspaceFilterAndLinkToGitRepo(value) {
@@ -160,108 +179,71 @@ export default {
         },
       });
     },
-    getStatusInfo(area, row) {
+    getStatusInfo(area, row, rowCounts) {
       const defaultStatusInfo = {
         badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-default`,
         icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
       };
 
       // classes are defined in the themes SASS files...
-      return this.getBadgeClassAndIcon(area, row) || defaultStatusInfo;
+      return this.getBadgeClassAndIcon(area, row, rowCounts) || defaultStatusInfo;
     },
-    getBadgeClassAndIcon(area, row) {
-      let group;
-
+    getBadgeClassAndIcon(area, row, rowCounts) {
       if (!this.admissableAreas.includes(area)) {
         return false;
       }
 
+      let group;
+
       if (area === 'clusters') {
-        if (row.clusterInfo?.ready === row.clusterInfo?.total && row.clusterInfo?.ready) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ACTIVE].color,
-            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
-          };
-        }
-      } else if (area === 'bundles') {
-        group = row.bundles;
-      } else if (area === 'resources') {
-        group = row.status?.resources;
-      }
+        const clusterInfo = row.clusterInfo;
+        const state = clusterInfo.ready === clusterInfo.total ? STATES_ENUM.ACTIVE : STATES_ENUM.NOT_READY;
 
-      if (group?.length && group?.every((item) => item.state?.toLowerCase() === STATES_ENUM.ACTIVE)) {
-        return {
-          badgeClass: STATES[STATES_ENUM.ACTIVE].color ? STATES[STATES_ENUM.ACTIVE].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-          icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon ? STATES[STATES_ENUM.ACTIVE].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
-        };
-      }
-      if (group?.length && group?.some((item) => item.state?.toLowerCase() === STATES_ENUM.ERR_APPLIED)) {
         return {
-          badgeClass: STATES[STATES_ENUM.ERR_APPLIED].color ? STATES[STATES_ENUM.ERR_APPLIED].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-          icon:       STATES[STATES_ENUM.ERR_APPLIED].compoundIcon ? STATES[STATES_ENUM.ERR_APPLIED].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
+          badgeClass: `${ STATES[state].color } badge-class-area-${ area }`,
+          icon:       STATES[state].compoundIcon
         };
+      } else if (area === 'bundles') {
+        group = rowCounts[row.id].bundles;
+      } else if (area === 'resources') {
+        group = rowCounts[row.id].resources;
+      } else {
+        // unreachable
+        return false;
       }
-      if (group?.length && group?.some((item) => item.state?.toLowerCase() === STATES_ENUM.NOT_READY)) {
+
+      if (group.total === group.states.ready) {
         return {
-          badgeClass: STATES[STATES_ENUM.NOT_READY].color ? STATES[STATES_ENUM.NOT_READY].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon ? STATES[STATES_ENUM.NOT_READY].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
+          badgeClass: STATES[STATES_ENUM.ACTIVE].color,
+          icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon,
         };
       }
-
-      if (area === 'resources') {
-        if (row.status?.resourceCounts?.desiredReady === row.status?.resourceCounts?.ready && row.status?.resourceCounts?.desiredReady) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ACTIVE].color,
-            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
-          };
-        }
-      }
+      const state = primaryDisplayStatusFromCount(group.states);
 
       return {
-        badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-${ area }`,
-        icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
+        badgeClass: STATES[state].color ? STATES[state].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
+        icon:       STATES[state].compoundIcon ? STATES[state].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
       };
     },
-    getTooltipInfo(area, row) {
-      let group;
-
+    getTooltipInfo(area, row, rowCounts) {
       if (!this.admissableAreas.includes(area)) {
         return {};
       }
 
-      if (area === 'clusters') {
-        group = '';
-      } else if (area === 'bundles') {
-        group = row.bundles;
+      if (area === 'bundles') {
+        return this.generateTooltipData(rowCounts[row.id].bundles.states);
       } else if (area === 'resources') {
-        group = row.status?.resources;
-      }
-
-      if (group?.length) {
-        return this.generateTooltipData(group);
+        return this.generateTooltipData(rowCounts[row.id].resources.states);
       }
 
       return '';
     },
-    generateTooltipData(data) {
-      const infoObj = {};
-      let tooltipData = '';
-
-      data.forEach((item) => {
-        if (!infoObj[item.state]) {
-          infoObj[item.state] = 0;
-        }
-
-        infoObj[item.state]++;
-      });
-
-      Object.keys(infoObj).forEach((key) => {
-        tooltipData += `${ getStateLabel(key) }: ${ infoObj[key] }<br>`;
-      });
-
-      return tooltipData;
+    generateTooltipData(infoObj) {
+      return Object.keys(infoObj)
+        .filter((key) => infoObj[key] > 0) // filter zero values
+        .map((key) => `${ getStateLabel(key) }: ${ infoObj[key] }<br>`).join('');
     },
-    getBadgeValue(area, row) {
+    getBadgeValue(area, row, rowCounts) {
       let value;
 
       if (!this.admissableAreas.includes(area)) {
@@ -269,11 +251,15 @@ export default {
       }
 
       if (area === 'clusters') {
-        return `${ row.clusterInfo.ready }/${ row.clusterInfo.total }`;
+        value = `${ row.clusterInfo.ready }/${ row.clusterInfo.total }`;
       } else if (area === 'bundles') {
-        value = xOfy(row.bundlesReady?.length, row.bundles?.length);
+        const bundles = rowCounts[row.id].bundles;
+
+        value = xOfy(bundles.states.ready || 0, bundles.total);
       } else if (area === 'resources') {
-        value = xOfy(row.status?.resourceCounts?.ready, row.status?.resourceCounts?.desiredReady);
+        const resources = rowCounts[row.id].resources;
+
+        value = xOfy(resources.states.ready || 0, resources.total);
       }
 
       return value;
@@ -413,10 +399,10 @@ export default {
               <CompoundStatusBadge
                 v-else
                 data-testid="clusters-ready"
-                :tooltip-text="getTooltipInfo('clusters', row)"
-                :badge-class="getStatusInfo('clusters', row).badgeClass"
-                :icon="getStatusInfo('clusters', row).icon"
-                :value="getBadgeValue('clusters', row)"
+                :tooltip-text="getTooltipInfo('clusters', row, gitReposCounts)"
+                :badge-class="getStatusInfo('clusters', row, gitReposCounts).badgeClass"
+                :icon="getStatusInfo('clusters', row, gitReposCounts).icon"
+                :value="getBadgeValue('clusters', row, gitReposCounts)"
               />
             </template>
             <template #cell:bundlesReady="{row}">
@@ -424,19 +410,19 @@ export default {
               <CompoundStatusBadge
                 v-else
                 data-testid="bundles-ready"
-                :tooltip-text="getTooltipInfo('bundles', row)"
-                :badge-class="getStatusInfo('bundles', row).badgeClass"
-                :icon="getStatusInfo('bundles', row).icon"
-                :value="getBadgeValue('bundles', row)"
+                :tooltip-text="getTooltipInfo('bundles', row, gitReposCounts)"
+                :badge-class="getStatusInfo('bundles', row, gitReposCounts).badgeClass"
+                :icon="getStatusInfo('bundles', row, gitReposCounts).icon"
+                :value="getBadgeValue('bundles', row, gitReposCounts)"
               />
             </template>
             <template #cell:resourcesReady="{row}">
               <CompoundStatusBadge
                 data-testid="resources-ready"
-                :tooltip-text="getTooltipInfo('resources', row)"
-                :badge-class="getStatusInfo('resources', row).badgeClass"
-                :icon="getStatusInfo('resources', row).icon"
-                :value="getBadgeValue('resources', row)"
+                :tooltip-text="getTooltipInfo('resources', row, gitReposCounts)"
+                :badge-class="getStatusInfo('resources', row, gitReposCounts).badgeClass"
+                :icon="getStatusInfo('resources', row, gitReposCounts).icon"
+                :value="getBadgeValue('resources', row, gitReposCounts)"
               />
             </template>
 

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

@@ -10,7 +10,7 @@ import KeyValue from '@shell/components/form/KeyValue';
 import { mapGetters } from 'vuex';
 import { isRancherPrime } from '@shell/config/version';
 import DefaultLinksEditor from './DefaultLinksEditor';
-import { CUSTOM_LINKS_COLLECTIVE_VERSION, fetchLinks } from '@shell/config/home-links';
+import { CUSTOM_LINKS_APP_CO_VERSION, fetchLinks } from '@shell/config/home-links';
 import TabTitle from '@shell/components/TabTitle';
 
 export default {
@@ -47,7 +47,7 @@ export default {
 
     allValues() {
       return {
-        version:  CUSTOM_LINKS_COLLECTIVE_VERSION,
+        version:  CUSTOM_LINKS_APP_CO_VERSION,
         defaults: this.value.defaults.filter((obj) => obj.enabled).map((obj) => obj.key),
         custom:   this.value.custom
       };

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

@@ -42,7 +42,8 @@ export default {
           branch: UI_PLUGINS_REPOS.PARTNERS.BRANCH,
         }
       },
-      isDialogActive: false,
+      isDialogActive:      false,
+      returnFocusSelector: '[data-testid="extensions-page-menu"]'
     };
   },
 
@@ -109,6 +110,7 @@ export default {
     :title="t('plugins.addRepos.title')"
     mode="add"
     data-testid="add-extensions-repos-modal"
+    :return-focus-selector="returnFocusSelector"
     @okay="doAddRepos"
     @closed="isDialogActive = false"
   >

package/pages/c/_cluster/uiplugins/CatalogList/CatalogLoadDialog.vue

@@ -128,6 +128,7 @@ export default {
       ...initialState(),
       secondaryResourceData: null,
       showModal:             false,
+      returnFocusSelector:   '[data-testid="extensions-catalog-load-dialog"]'
     };
   },
 
@@ -434,6 +435,8 @@ export default {
     name="catalogLoadDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
     @close="closeDialog()"
   >
     <Loading

package/pages/c/_cluster/uiplugins/CatalogList/CatalogUninstallDialog.vue

@@ -23,7 +23,11 @@ export default {
 
   data() {
     return {
-      catalog: undefined, busy: false, plugins: null, showModal: false,
+      catalog:             undefined,
+      busy:                false,
+      plugins:             null,
+      showModal:           false,
+      returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]'
     };
   },
 
@@ -121,6 +125,8 @@ export default {
     name="uninstallCatalogDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
     @close="closeDialog(false)"
   >
     <div

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

@@ -95,10 +95,12 @@ export default {
         <template #header-left>
           <div>
             <button
-              class="btn bg-primary mr-10"
+              class="btn role-primary mr-10"
               type="button"
               aria-haspopup="dialog"
               data-testid="extensions-catalog-load-dialog"
+              role="button"
+              :aria-label="t('plugins.manageCatalog.imageLoad.load')"
               @click="$emit('showCatalogLoadDialog')"
             >
               {{ t('plugins.manageCatalog.imageLoad.load') }}

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

@@ -18,17 +18,18 @@ export default {
 
   data() {
     return {
-      name:              '',
-      location:          '',
-      persist:           false,
-      canModifyName:     true,
-      canModifyLocation: true,
-      showModal:         false,
+      name:                '',
+      location:            '',
+      persist:             false,
+      canModifyName:       true,
+      canModifyLocation:   true,
+      showModal:           false,
+      returnFocusSelector: '[data-testid="extensions-page-menu"]'
     };
   },
 
   watch: {
-    name(neu, old) {
+    name(neu) {
       if (this.canModifyLocation) {
         this.location = `/pkg/${ neu }/${ neu }.umd.min.js`;
       }
@@ -154,6 +155,8 @@ export default {
     name="developerInstallPluginDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
     @close="closeDialog()"
   >
     <div class="plugin-install-dialog">

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

@@ -74,6 +74,10 @@ export default {
 
     chartVersionLoadsWithoutAuth() {
       return this.chartVersionInfo?.values?.plugin?.noAuth;
+    },
+
+    returnFocusSelector() {
+      return `[data-testid="extension-card-${ this.mode }-btn-${ this.plugin?.name }"]`;
     }
   },
 
@@ -251,6 +255,9 @@ export default {
     name="installPluginDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
+    :return-focus-first-iterable-node-selector="'#extensions-main-page'"
     @close="closeDialog(false)"
   >
     <div