dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.2

package/components/GrowlManager.vue

@@ -27,10 +27,18 @@ export default {
 
   methods: {
     translateError,
-    close(growl) {
+    remove(growl) {
       this.$store.dispatch('growl/remove', growl.id);
     },
 
+    close(growl) {
+      this.$store.dispatch('growl/close', growl.id);
+
+      // If a user closes a growl, we won't get the mouse leave event, so we won't start the auto removal
+      // again, leaving to stuck growls that should timeout
+      this.startAutoRemove();
+    },
+
     closeAll() {
       this.$store.dispatch('growl/clear');
     },
@@ -38,13 +46,18 @@ export default {
     closeExpired() {
       const now = new Date().getTime();
 
+      // Check that we should still be running the auto-close interval timer
+      if (!this.shouldRun) {
+        this.stopAutoRemove();
+      }
+
       for ( const growl of this.stack ) {
         if ( !growl.timeout ) {
           continue;
         }
 
         if ( growl.started + growl.timeout < now ) {
-          this.close(growl);
+          this.remove(growl);
         }
       }
     },
@@ -126,18 +139,6 @@ export default {
         </div>
       </div>
     </div>
-    <div
-      v-if="stack.length > 1"
-      class="text-right mr-10 mt-10"
-    >
-      <button
-        type="button"
-        class="btn btn-sm role-primary"
-        @click="closeAll()"
-      >
-        {{ t('growl.clearAll') }}
-      </button>
-    </div>
   </div>
 </template>
 
@@ -145,7 +146,7 @@ export default {
   .growl-container {
     z-index: 1000;
     position: absolute;
-    top: 0;
+    top: var(--header-height);
     right: 0;
     width: 100%;
 

package/components/IconOrSvg.vue

@@ -44,6 +44,10 @@ export default {
       type:    String,
       default: () => undefined,
     },
+    imgAlt: {
+      type:    String,
+      default: () => undefined,
+    },
     color: {
       type:    String,
       default: () => 'primary',
@@ -61,41 +65,16 @@ export default {
   },
 
   methods: {
+    getComputedStyleFor(cssVar) {
+      return normalizeHex(mapStandardColors((window.getComputedStyle(document.body).getPropertyValue(cssVar)).trim()));
+    },
+
     setColor() {
-      const currTheme = this.$store.getters['prefs/theme'];
-      let uiColor, hoverColor;
-
-      // grab css vars values based on the actual stylesheets, depending on the theme applied
-      // use for loops to minimize computation
-      for (let i = 0; i < Object.keys(document.styleSheets).length; i++) {
-        let found = false;
-        const stylesheet = document.styleSheets[i];
-
-        if (stylesheet && stylesheet.cssRules) {
-          for (let x = 0; x < Object.keys(stylesheet.cssRules).length; x++) {
-            const cssRules = stylesheet.cssRules[x];
-
-            if (cssRules.selectorText && ((currTheme === 'light' && (cssRules.selectorText.includes('body') || cssRules.selectorText.includes('BODY')) &&
-              cssRules.selectorText.includes('.theme-light') && cssRules.style.cssText.includes('--link:')) ||
-              (currTheme === 'dark' && cssRules.selectorText.includes('.theme-dark')))) {
-              // grab the colors to be used on the icon from the css rules
-              uiColor = mapStandardColors(cssRules.style.getPropertyValue(colors[this.color].color).trim());
-              hoverColor = mapStandardColors(cssRules.style.getPropertyValue(colors[this.color].hover).trim());
-
-              // normalize hex colors (#xxx to #xxxxxx)
-              uiColor = normalizeHex(uiColor);
-              hoverColor = normalizeHex(hoverColor);
-
-              found = true;
-              break;
-            }
-          }
-        }
-        if (found) {
-          break;
-        } else {
-          continue;
-        }
+      const uiColor = this.getComputedStyleFor(colors[this.color].color);
+      const hoverColor = this.getComputedStyleFor(colors[this.color].hover);
+
+      if (!uiColor || !hoverColor) {
+        return;
       }
 
       const uiColorRGB = colorToRgb(uiColor);
@@ -142,7 +121,11 @@ export default {
           }
           a.option:hover > img.${ className } {
             ${ hoverFilter };
-          }      `;
+          }
+          a.option.active-menu-link > img.${ className } {
+            ${ hoverFilter };
+          }
+        `;
 
         const styleSheet = document.createElement('style');
 
@@ -164,6 +147,7 @@ export default {
     :src="src"
     class="svg-icon"
     :class="className"
+    :alt="imgAlt"
   >
   <i
     v-else-if="icon"

package/components/KeyValueView.vue

@@ -225,7 +225,7 @@ export default {
 .key-value {
   width: 100%;
 
-  .kv-container{
+  .kv-container {
     display: grid;
     align-items: center;
     grid-template-columns: auto 1fr;

package/components/LandingPagePreference.vue

@@ -108,6 +108,7 @@ export default {
       :value="afterLoginRoute"
       name="login-route"
       :options="routeRadioOptions"
+      :aria-label="`${t('prefs.landing.label')} - ${ t('landing.landingPrefs.body')}`"
       @update:value="updateLoginRoute"
     >
       <template #label>
@@ -119,6 +120,7 @@ export default {
         <div class="custom-page">
           <RadioButton
             :label="option.label"
+            :radio-option-id="option.radioOptionId"
             :val="false"
             :value="afterLoginRoute=== 'home' || afterLoginRoute === 'last-visited'"
             :v-bind="$attrs"

package/components/Loading.vue

@@ -59,7 +59,7 @@ export default {
 <style lang="scss" scoped>
   .overlay {
     align-items: center;
-    background-color: var(--overlay-bg);
+    background-color: var(--subtle-overlay-bg);
     display: flex;
     justify-content: center;
     position: absolute;

package/components/LocaleSelector.vue

@@ -4,7 +4,7 @@ import Select from '@shell/components/form/Select.vue';
 import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
 
 export default {
-  name: 'LocalSelector',
+  name: 'LocaleSelector',
 
   components: {
     Select,
@@ -71,7 +71,12 @@ export default {
 <template>
   <div>
     <div v-if="mode === 'login'">
-      <rc-dropdown v-if="showLocale">
+      <rc-dropdown
+        v-if="showLocale"
+        :aria-label="$attrs['aria-label'] || undefined"
+        :aria-labelledby="$attrs['aria-labelledby'] || undefined"
+        :aria-describedby="$attrs['aria-describedby'] || undefined"
+      >
         <rc-dropdown-trigger
           data-testid="locale-selector"
           link
@@ -105,6 +110,9 @@ export default {
     </div>
     <div v-else>
       <Select
+        :aria-label="$attrs['aria-label'] || undefined"
+        :aria-labelledby="$attrs['aria-labelledby'] || undefined"
+        :aria-describedby="$attrs['aria-describedby'] || undefined"
         :value="selectedOption"
         :options="localesOptions"
         :is-lang-select="true"

package/components/PaginatedResourceTable.vue

@@ -36,6 +36,35 @@ export default defineComponent({
       default: null,
     },
 
+    groupTooltip: {
+      type:    String,
+      default: 'resourceTable.groupBy.namespace',
+    },
+
+    /**
+     * Field to group rows by, row[groupBy] must be something that can be a map key (or also use groupSort)
+     */
+    groupBy: {
+      type:    String,
+      default: null,
+    },
+
+    /**
+     * Field to order groups by, defaults to groupBy
+     */
+    groupSort: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Override any product based group options
+     */
+    groupOptions: {
+      type:    Array,
+      default: null
+    },
+
     groupable: {
       type:    Boolean,
       default: null, // Null: auto based on namespaced and type custom groupings
@@ -58,6 +87,14 @@ export default defineComponent({
       default: null,
     },
 
+    /**
+     * Use this store instead of the store `inStore` getters
+     */
+    overrideInStore: {
+      type:    String,
+      default: undefined,
+    },
+
     /**
      * Information may be required from resources other than the primary one shown per row
      *
@@ -79,7 +116,7 @@ export default defineComponent({
 
   async fetch() {
     const promises = [
-      this.$fetchType(this.resource, [], this.inStore),
+      this.$fetchType(this.resource, [], this.overrideInStore || this.inStore),
     ];
 
     if (this.fetchSecondaryResources) {
@@ -95,6 +132,12 @@ export default defineComponent({
 
       return customHeaders || this.$store.getters['type-map/headersFor'](this.schema, this.canPaginate);
     }
+  },
+
+  methods: {
+    clearSelection() {
+      this.$refs.table.clearSelection();
+    },
   }
 });
 
@@ -103,18 +146,27 @@ export default defineComponent({
 <template>
   <div>
     <ResourceTable
+      ref="table"
       v-bind="$attrs"
       :schema="schema"
       :rows="rows"
       :alt-loading="canPaginate && !isFirstLoad"
       :loading="loading"
+
+      :group-by="groupBy"
+      :group-sort="groupSort"
       :groupable="groupable"
+      :groupTooltip="groupTooltip"
+      :groupOptions="groupOptions"
+
+      :override-in-store="overrideInStore"
 
       :headers="safeHeaders"
       :namespaced="namespaced"
 
       :external-pagination-enabled="canPaginate"
       :external-pagination-result="paginationResult"
+
       @pagination-changed="paginationChanged"
     >
       <!-- Pass down templates provided by the caller -->

package/components/ProgressBarMulti.vue

@@ -122,6 +122,7 @@ function toPercent(value, min, max) {
     v-trim-whitespace
     :class="{progress: true, multi: pieces.length > 1}"
     :aria-label="ariaLabelText"
+    role="progressbar"
   >
     <div
       v-for="(piece, idx) of pieces"

package/components/PromptModal.vue

@@ -22,7 +22,6 @@ export default {
 
   computed: {
     ...mapState('action-menu', ['showModal', 'modalData']),
-
     resources() {
       let resources = this.modalData?.resources;
 
@@ -32,11 +31,28 @@ export default {
 
       return resources || [];
     },
-
+    testId() {
+      return this.modalData?.testId || 'prompt-modal-generic-testid';
+    },
+    returnFocusSelector() {
+      return this.modalData?.returnFocusSelector || undefined;
+    },
+    returnFocusFirstIterableNodeSelector() {
+      return this.modalData?.returnFocusFirstIterableNodeSelector || undefined;
+    },
     modalWidth() {
       // property set from workload.js to overwrite modal default width of 600px, with fallback value as well
       return this.modalData?.modalWidth || '610px';
     },
+    customClass() {
+      return this.modalData?.customClass || undefined;
+    },
+    styles() {
+      return this.modalData?.styles || undefined;
+    },
+    height() {
+      return this.modalData?.height || undefined;
+    },
     component() {
       // Looks for a dialog component by looking up in plugins and @shell/dialog/${name}.
       return this.$store.getters['type-map/importDialog'](this.modalData?.component);
@@ -52,6 +68,9 @@ export default {
     },
     closeOnClickOutside() {
       return this.modalData?.closeOnClickOutside;
+    },
+    modalName() {
+      return this.modalData?.modalName;
     }
   },
 
@@ -67,13 +86,18 @@ export default {
       // so that we know when the component is rendered
       this.componentRendered = true;
     },
-    close() {
+    close(data) {
       if (!this.opened) {
         return;
       }
 
       this.errors = [];
-      this.$store.commit('action-menu/togglePromptModal');
+
+      // Guard against events that can be implicitly passed by components
+      const modalData = data instanceof Event ? undefined : data;
+
+      this.$store.commit('action-menu/togglePromptModal', modalData);
+
       if (this.backgroundClosing) {
         this.backgroundClosing();
       }
@@ -93,11 +117,18 @@ export default {
 <template>
   <app-modal
     v-if="opened && component"
+    :name="modalName"
     :click-to-close="closeOnClickOutside"
     :width="modalWidth"
-    :trigger-focus-trap-watcher-based="true"
+    :data-testid="testId"
+    :custom-class="customClass"
+    :styles="styles"
+    :height="height"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
+    :return-focus-first-iterable-node-selector="returnFocusFirstIterableNodeSelector"
     :focus-trap-watcher-based-variable="componentRendered"
-    @close="close()"
+    @close="close"
   >
     <component
       v-bind="modalData.componentProps || {}"
@@ -105,7 +136,7 @@ export default {
       :resources="resources"
       :register-background-closing="registerBackgroundClosing"
       @vue:mounted="onSlotComponentMounted"
-      @close="close()"
+      @close="close"
     />
   </app-modal>
 </template>

package/components/PromptRemove.vue

@@ -44,6 +44,7 @@ export default {
       chartsToRemoveIsApp: false,
       chartsDeleteCrd:     false,
       showModal:           false,
+      cachedDoneLocation:  null
     };
   },
   computed: {
@@ -222,6 +223,7 @@ export default {
       this.error = '';
       this.chartsDeleteCrd = false;
       this.chartsToRemoveIsApp = false;
+      this.cachedDoneLocation = null;
       this.$store.commit('action-menu/togglePromptRemove');
     },
 
@@ -229,6 +231,8 @@ export default {
       if (this.doneLocation) {
         // doneLocation will recompute to undefined when delete request completes
         this.cachedDoneLocation = { ...this.doneLocation };
+      } else {
+        this.cachedDoneLocation = null;
       }
 
       if (this.hasCustomRemove && this.$refs?.customPrompt?.remove) {
@@ -296,7 +300,7 @@ export default {
       }
     },
     done() {
-      if ( this.cachedDoneLocation && !isEmpty(this.cachedDoneLocation) ) {
+      if (!isEmpty(this.cachedDoneLocation) && this.currentRouter) {
         this.currentRouter.push(this.cachedDoneLocation);
       }
       this.close();

package/components/PromptRestore.vue

@@ -7,7 +7,7 @@ import Date from '@shell/components/formatter/Date.vue';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import { exceptionToErrorsArray } from '@shell/utils/error';
-import { CAPI, NORMAN, SNAPSHOT } from '@shell/config/types';
+import { CAPI, SNAPSHOT } from '@shell/config/types';
 import { set } from '@shell/utils/object';
 import ChildHook, { BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
 import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
@@ -47,14 +47,13 @@ export default {
   },
 
   computed: {
-    // toRestore can be a provisioning.cattle.io.cluster or a rke.cattle.io.etcdsnapshot or an etcdBackup resource
+    // toRestore can be a provisioning.cattle.io.cluster or a rke.cattle.io.etcdsnapshot resource
     ...mapState('action-menu', ['showPromptRestore', 'toRestore']),
     ...mapGetters({ t: 'i18n/t' }),
 
     // Was the dialog opened to restore a specific snapshot, or opened on a cluster to choose
     isCluster() {
-      const isSnapshot = this.toRestore[0]?.type.toLowerCase() === NORMAN.ETCD_BACKUP ||
-      this.toRestore[0]?.type.toLowerCase() === SNAPSHOT;
+      const isSnapshot = this.toRestore[0]?.type.toLowerCase() === SNAPSHOT;
 
       return !isSnapshot;
     },
@@ -79,9 +78,7 @@ export default {
       }
     },
     restoreModeOptions() {
-      const etcdOption = this.isRke2 ? 'none' : 'etcd';
-
-      return [etcdOption, 'kubernetesVersion', 'all'];
+      return ['none', 'kubernetesVersion', 'all'];
     }
   },
 
@@ -112,20 +109,12 @@ export default {
       }
 
       const cluster = this.toRestore?.[0];
-      let promise;
-
-      if (!cluster?.isRke2) {
-        promise = this.$store.dispatch('rancher/findAll', { type: NORMAN.ETCD_BACKUP }).then((snapshots) => {
-          return snapshots.filter((s) => s.state === STATES_ENUM.ACTIVE && s.clusterId === cluster.metadata.name);
-        });
-      } else {
-        promise = this.$store.dispatch('management/findAll', { type: SNAPSHOT }).then((snapshots) => {
-          const toRestoreClusterName = cluster?.clusterName || cluster?.metadata?.name;
+      const promise = this.$store.dispatch('management/findAll', { type: SNAPSHOT }).then((snapshots) => {
+        const toRestoreClusterName = cluster?.clusterName || cluster?.metadata?.name;
 
-          return snapshots.filter((s) => s?.snapshotFile?.status === STATES_ENUM.SUCCESSFUL && s.clusterName === toRestoreClusterName
-          );
-        });
-      }
+        return snapshots.filter((s) => s?.snapshotFile?.status === STATES_ENUM.SUCCESSFUL && s.clusterName === toRestoreClusterName
+        );
+      });
 
       // Map of snapshots by name
       const allSnapshots = await promise.then((snapshots) => {
@@ -154,30 +143,19 @@ export default {
 
     async apply(buttonDone) {
       try {
-        if ( this.isRke2 ) {
-          const cluster = this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, this.snapshot.clusterId);
-
-          await this.applyHooks(BEFORE_SAVE_HOOKS);
-
-          const now = cluster.spec?.rkeConfig?.etcdSnapshotRestore?.generation || 0;
-
-          set(cluster, 'spec.rkeConfig.etcdSnapshotRestore', {
-            generation:       now + 1,
-            name:             this.snapshot.name,
-            restoreRKEConfig: this.restoreMode,
-          });
-
-          await cluster.save();
-        } else {
-          await this.$store.dispatch('rancher/request', {
-            url:    `/v3/clusters/${ escape(this.snapshot.clusterId) }?action=restoreFromEtcdBackup`,
-            method: 'post',
-            data:   {
-              etcdBackupId:     this.snapshot.id,
-              restoreRkeConfig: this.restoreMode,
-            },
-          });
-        }
+        const cluster = this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, this.snapshot.clusterId);
+
+        await this.applyHooks(BEFORE_SAVE_HOOKS);
+
+        const now = cluster.spec?.rkeConfig?.etcdSnapshotRestore?.generation || 0;
+
+        set(cluster, 'spec.rkeConfig.etcdSnapshotRestore', {
+          generation:       now + 1,
+          name:             this.snapshot.name,
+          restoreRKEConfig: this.restoreMode,
+        });
+
+        await cluster.save();
 
         this.$store.dispatch('growl/success', {
           title:   this.t('promptRestore.notification.title'),

package/components/RelatedResources.vue

@@ -1,6 +1,6 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import { colorForState, stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
+import { STATES_ENUM, colorForState, stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
 import { NAME, NAMESPACE, STATE, TYPE } from '@shell/config/table-headers';
 import { sortableNumericSuffix } from '@shell/utils/sort';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
@@ -70,9 +70,9 @@ export default {
       const out = [];
 
       for ( const r of this.filteredRelationships) {
-        const state = r.state || 'active';
-        const stateColor = colorForState(state, r.error, r.transitioning);
         const type = r[`${ this.direction }Type`];
+        const state = r.state || this.$store.getters[`${ inStore }/byId`](type, r[`${ this.direction }Id`])?.state || STATES_ENUM.MISSING;
+        const stateColor = colorForState(state, r.error, r.transitioning);
         const schema = this.$store.getters[`${ inStore }/schemaFor`](type);
 
         let name = r[`${ this.direction }Id`];
@@ -104,7 +104,6 @@ export default {
 
         out.push({
           type,
-          real:     this.$store.getters[`${ inStore }/byId`](type, r[`${ this.direction }Id`]),
           id:       r[`${ this.direction }Id`],
           state,
           metadata: { namespace, name },
@@ -174,14 +173,7 @@ export default {
     :groupable="false"
   >
     <template #cell:state="{row}">
-      <BadgeState
-        v-if="row.real"
-        :value="row.real"
-      />
-      <BadgeState
-        v-else
-        :value="row"
-      />
+      <BadgeState :value="row" />
     </template>
   </ResourceTable>
 </template>

package/components/Resource/Detail/Additional.vue

@@ -0,0 +1,46 @@
+<script lang="ts">
+import { computed } from 'vue';
+
+export interface Props {
+  items: string[];
+}
+</script>
+
+<script setup lang="ts">
+
+const { items } = defineProps<Props>();
+
+const first = computed(() => items[0]);
+const tooltipValue = computed(() => {
+  let rows = '';
+
+  items.forEach((item) => {
+    rows += `&#8226; ${ item }<br>`;
+  });
+
+  return rows;
+});
+</script>
+
+<template>
+  <div class="additional">
+    <div class="initial">
+      {{ first }}
+    </div>
+    <div
+      v-if="items.length > 1"
+      v-clean-tooltip.bottom="tooltipValue"
+      class="more text-muted"
+    >
+      {{ t('generic.plusMore', {n: items.length-1}) }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.more {
+  margin-top: 4px;
+  cursor: help;
+  font-size: 0.8em;
+}
+</style>

package/components/Resource/Detail/Card/PodsCard/Bubble.vue

@@ -0,0 +1,13 @@
+<template>
+  <span class="bubble">
+    <slot name="default" />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.bubble {
+    border-radius: 40%;
+    background-color: var(--bubble-bg);
+    padding: 2px 6px;
+}
+</style>