@rancher/shell 3.0.5 → 3.0.6

package/components/FilterPanel.vue

@@ -20,6 +20,8 @@ type FilterOption = {
   componentProps?: Record<string, unknown>;
   /** Label to show next to the checkbox, or a custom component next to the checkbox */
   label?: string | { component: ComponentType; componentProps: Record<string, unknown>; };
+  /** Tooltip to be displayed above the checkbox on hover */
+  labelTooltip?: string;
 };
 
 /**
@@ -97,7 +99,12 @@ const updateFilter = (key: string, value: string[]) => {
             @update:value="updateFilter(filter.key, $event)"
           >
             <template #label>
-              <span v-if="typeof option.label === 'string'">{{ option.label }}</span>
+              <span
+                v-if="typeof option.label === 'string'"
+                v-clean-tooltip="{content: option.labelTooltip, delay: { show: 1000 }}"
+              >
+                {{ option.label }}
+              </span>
               <component
                 :is="option.label.component"
                 v-else

package/components/PaginatedResourceTable.vue

@@ -2,6 +2,7 @@
 import { defineComponent } from 'vue';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import ResourceTable from '@shell/components/ResourceTable.vue';
+import { VuexStore } from '@shell/types/store/vuex';
 
 /**
  * This is meant to enable ResourceList like capabilities outside of List pages / components
@@ -130,13 +131,17 @@ export default defineComponent({
     safeHeaders(): any[] {
       const customHeaders: any[] = this.canPaginate ? this.paginationHeaders : this.headers;
 
-      return customHeaders || this.$store.getters['type-map/headersFor'](this.schema, this.canPaginate);
+      const $store = this.$store as VuexStore;
+
+      return customHeaders || $store.getters['type-map/headersFor'](this.schema, this.canPaginate);
     }
   },
 
   methods: {
     clearSelection() {
-      this.$refs.table.clearSelection();
+      const table = this.$refs.table as { clearSelection: () => void };
+
+      table.clearSelection();
     },
   }
 });

package/components/PromptRemove.vue

@@ -384,6 +384,7 @@ export default {
           >
             <span
               v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
+              class="confirm-text"
             />
           </div>
         </div>
@@ -472,5 +473,9 @@ export default {
         flex: 1;
       }
     }
+
+    .confirm-text b {
+      user-select: all;
+    }
   }
 </style>

package/components/ResourceTable.vue

@@ -317,6 +317,7 @@ export default {
       // add custom table columns provided by the extensions ExtensionPoint.TABLE_COL hook
       // gate it so that we prevent errors on older versions of dashboard
       if (this.$store.$plugin?.getUIConfig) {
+        // { column: TableColumn, paginationColumn: PaginationTableColumn }[]
         const extensionCols = getApplicableExtensionEnhancements(this, ExtensionPoint.TABLE_COL, TableColumnLocation.RESOURCE, this.$route);
 
         // Try and insert the columns before the Age column
@@ -339,27 +340,36 @@ export default {
         }
 
         // adding extension defined cols to the correct header config
-        extensionCols.forEach((col) => {
-          if (this.externalPaginationEnabled) {
-            // validate that the required settings are supplied to enable search and sort server-side
-            // these do not check other invalid scenarios like a path is a string but to a model property, or that the field supports sort/search via api (some basic non-breaking checks are done further on)
-            if (
-              col.search !== false && // search is explicitly disabled
-              (typeof col.search !== 'string' && !Array.isArray(col.search)) && // primary property path to search on
-              typeof col.value !== 'string' // secondary property path to search on
-            ) {
-              console.warn(`Unable to support server-side search for extension provided column "${ col.name || col.label || col.labelKey }" (column must provide \`search\` or \`value\` property containing a path to a property in the resource. search can be an array).`); // eslint-disable-line no-console
-
-              col.search = false;
-            }
+        extensionCols.forEach((config) => {
+          let { column: col, paginationColumn } = config;
 
-            if (
-              col.sort !== false && // sort is explicitly disabled
-              (typeof col.sort !== 'string' && !Array.isArray(col.sort)) // primary property path to sort on
-            ) {
-              console.warn(`Unable to support server-side sort for extension provided column "${ col.name || col.label || col.labelKey }" (column must provide \`sort\` property containing a path to a property, or array of paths, in the resource)`); // eslint-disable-line no-console
-
-              col.sort = false;
+          if (this.externalPaginationEnabled) {
+            if (paginationColumn) {
+              // Use the pagination column, no need to
+              col = paginationColumn;
+            } else {
+              // Attempt to fall back on the single column
+
+              // validate that the required settings are supplied to enable search and sort server-side
+              // these do not check other invalid scenarios like a path is a string but to a model property, or that the field supports sort/search via api (some basic non-breaking checks are done further on)
+              if (
+                col.search !== false && // search is explicitly disabled
+                (typeof col.search !== 'string' && !Array.isArray(col.search)) && // primary property path to search on
+                typeof col.value !== 'string' // secondary property path to search on
+              ) {
+                console.warn(`Unable to support server-side search for extension provided column "${ col.name || col.label || col.labelKey }" (column must provide \`search\` or \`value\` property containing a path to a property in the resource. search can be an array).`); // eslint-disable-line no-console
+
+                col.search = false;
+              }
+
+              if (
+                col.sort !== false && // sort is explicitly disabled
+                (typeof col.sort !== 'string' && !Array.isArray(col.sort)) // primary property path to sort on
+              ) {
+                console.warn(`Unable to support server-side sort for extension provided column "${ col.name || col.label || col.labelKey }" (column must provide \`sort\` property containing a path to a property, or array of paths, in the resource)`); // eslint-disable-line no-console
+
+                col.sort = false;
+              }
             }
           }
 

package/config/product/explorer.js

@@ -294,7 +294,7 @@ export function init(store) {
       STEVE_NAMESPACE_COL,
       {
         ...INGRESS_TARGET,
-        sort:   'spec.rules[0].host', // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50526
+        sort:   'spec.rules[0].host',
         search: false, // This is broken in normal world, so disable here
       },
       {
@@ -359,10 +359,10 @@ export function init(store) {
       STEVE_STATE_COL,
       STEVE_NAME_COL,
       STEVE_NAMESPACE_COL,
-      HPA_REFERENCE, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50527
-      MIN_REPLICA, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50527
-      MAX_REPLICA, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50527
-      CURRENT_REPLICA, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50527
+      HPA_REFERENCE,
+      MIN_REPLICA,
+      MAX_REPLICA,
+      CURRENT_REPLICA,
       STEVE_AGE_COL
     ]
   );

package/config/uiplugins.js

@@ -107,7 +107,7 @@ export function uiPluginAnnotation(chart, name) {
 /**
  * Parse the Rancher version string
  */
-function parseRancherVersion(v) {
+export function parseRancherVersion(v) {
   let parsedVersion = semver.coerce(v)?.version;
   const splitArr = parsedVersion?.split('.');
 

package/core/plugin.ts

@@ -16,6 +16,7 @@ import {
   ModelExtensionConstructor,
   PluginRouteRecordRaw, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig,
   NavHooks, OnNavToPackage, OnNavAwayFromPackage, OnLogIn, OnLogOut,
+  PaginationTableColumn,
   ExtensionEnvironment
 } from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
@@ -247,10 +248,21 @@ export class Plugin implements IPlugin {
   }
 
   /**
-   * Adds a new column to a table on the UI
+   * Adds a new column to a ResourceTable
+   *
+   * @param where
+   * @param when
+   * @param action
+   * @param column
+   *  The information required to show a header and values for a column in a table
+   * @param paginationColumn
+   *  As per `column`, but is used where server-side pagination is enabled
    */
-  addTableColumn(where: string, when: LocationConfig | string, column: TableColumn): void {
-    this._addUIConfig(ExtensionPoint.TABLE_COL, where, when, column);
+  addTableColumn(where: string, when: LocationConfig | string, column: TableColumn, paginationColumn?: PaginationTableColumn): void {
+    this._addUIConfig(ExtensionPoint.TABLE_COL, where, when, {
+      column,
+      paginationColumn
+    });
   }
 
   setHomePage(component: any) {

package/core/types.ts

@@ -130,9 +130,6 @@ export type Card = {
   component: Function;
 };
 
-// Duplication of HeaderOptions?
-export type TableColumn = any;
-
 /** Definition of a tab (options that can be passed when defining an extension tab enhancement) */
 export type Tab = {
   name: string;
@@ -281,6 +278,9 @@ export interface ProductOptions {
   // typeStoreMap: string;
 }
 
+/**
+ * Configuration required to show a header in a ResourceTable
+ */
 export interface HeaderOptions {
   /**
    * Name of the header. This should be unique.
@@ -305,7 +305,7 @@ export interface HeaderOptions {
   /**
    * A string which represents the path to access the value from the row object which we'll use to sort i.e. `row.meta.value`
    */
-  sort?: string | string[];
+  sort?: string | string[] | boolean;
 
   /**
    * A string which represents the path to access the value from the row object which we'll use to search i.e. `row.meta.value`.
@@ -336,6 +336,21 @@ export interface HeaderOptions {
   getValue?: (row: any) => string | number | null | undefined;
 }
 
+/**
+ * Configuration required to show a header in a ResourceTable when server-side pagination is enable
+ */
+export type PaginationHeaderOptions = Omit<HeaderOptions, 'getValue'>
+
+/**
+ * External extension configuration for @HeaderOptions
+ */
+export type TableColumn = HeaderOptions;
+
+/**
+ * External extension configuration for @PaginationHeaderOptions
+ */
+export type PaginationTableColumn = PaginationHeaderOptions;
+
 export interface ConfigureTypeOptions {
   /**
    * Override for the create button string on a list view
@@ -621,9 +636,17 @@ export interface IPlugin {
   addCard(where: CardLocation | string, when: LocationConfig | string, action: Card): void;
 
   /**
-   * Adds a new column to the SortableTable component
-   */
-  addTableColumn(where: TableColumnLocation | string, when: LocationConfig | string, action: TableColumn): void;
+   * Adds a new column to a ResourceTable
+   *
+   * @param where
+   * @param when
+   * @param action
+   * @param column
+   *  The information required to show a header and values for a column in a table
+   * @param paginationColumn
+   *  As per `column`, but is used where server-side pagination is enabled
+   */
+  addTableColumn(where: TableColumnLocation | string, when: LocationConfig | string, column: TableColumn, paginationColumn?: TableColumn): void;
 
   /**
    * Set the component to use for the landing home page

package/list/catalog.cattle.io.clusterrepo.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import PaginatedResourceTable from '@shell/components/PaginatedResourceTable.vue';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
-import ClusterRepo from '@shell/models/catalog.cattle.io.clusterrepo';
+import { RancherKubeMetadata } from '@shell/types/kube/kube-api';
 import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { defineComponent } from 'vue';
 
@@ -25,7 +25,7 @@ export default defineComponent({
     /**
      * Filter out hidden repos from list of all repos
      */
-    filterRowsLocal(rows: ClusterRepo[]) {
+    filterRowsLocal(rows: { metadata: RancherKubeMetadata}[]) {
       return rows.filter((repo) => !(repo?.metadata?.annotations?.[CATALOG_ANNOTATIONS.HIDDEN_REPO] === 'true'));
     },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -93,7 +93,7 @@
     "express": "4.17.1",
     "file-saver": "2.0.2",
     "floating-vue": "5.2.2",
-    "focus-trap": "7.6.2",
+    "focus-trap": "7.6.5",
     "frontmatter-markdown-loader": "3.7.0",
     "identicon.js": "2.3.3",
     "intl-messageformat": "7.8.4",

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

@@ -80,6 +80,12 @@ function onClickItem(type: string, label: string) {
     &-text {
       text-transform: capitalize;
       margin-right: 8px;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
     }
 
     &-icon {

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

@@ -2,9 +2,9 @@
 
 defineProps<{
   label: string;
-  icon: string;
+  icon?: string;
   iconColor?: string;
-  tooltip?: string;
+  iconTooltip?: string;
 }>();
 
 </script>
@@ -13,7 +13,8 @@ defineProps<{
   <div class="status-label">
     {{ label }}
     <i
-      v-clean-tooltip.right="tooltip"
+      v-if="!!icon"
+      v-clean-tooltip.right="iconTooltip"
       :class="['icon', icon, iconColor]"
     />
   </div>

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

@@ -82,10 +82,10 @@ export default {
           label: {
             component:      markRaw(StatusLabel),
             componentProps: {
-              label:     this.t('generic.installed'),
-              icon:      'icon-warning',
-              iconColor: 'warning',
-              tooltip:   this.t('catalog.charts.statusFilterCautions.installation')
+              label:       this.t('generic.installed'),
+              icon:        'icon-warning',
+              iconColor:   'warning',
+              iconTooltip: this.t('catalog.charts.statusFilterCautions.installation')
             }
           }
         },
@@ -98,10 +98,10 @@ export default {
           label: {
             component:      markRaw(StatusLabel),
             componentProps: {
-              label:     this.t('generic.upgradeable'),
-              icon:      'icon-warning',
-              iconColor: 'warning',
-              tooltip:   this.t('catalog.charts.statusFilterCautions.upgradeable')
+              label:       this.t('generic.upgradeable'),
+              icon:        'icon-warning',
+              iconColor:   'warning',
+              iconTooltip: this.t('catalog.charts.statusFilterCautions.upgradeable')
             }
           }
         }
@@ -125,9 +125,10 @@ export default {
     repoOptions() {
       let out = this.$store.getters['catalog/repos'].map((r) => {
         return {
-          value:  r._key,
-          label:  r.nameDisplay,
-          weight: ( r.isRancher ? 1 : ( r.isPartner ? 2 : 3 ) ),
+          value:        r._key,
+          label:        r.nameDisplay,
+          labelTooltip: r.nameDisplay,
+          weight:       ( r.isRancher ? 1 : ( r.isPartner ? 2 : 3 ) ),
         };
       });
 

package/plugins/dashboard-store/resource-class.js

@@ -1,4 +1,7 @@
 import { NORMAN_NAME } from '@shell/config/labels-annotations';
+import { getVersionData } from '@shell/config/version';
+import { parseRancherVersion } from '@shell/config/uiplugins';
+import semver from 'semver';
 import {
   _CLONE,
   _CONFIG,
@@ -929,12 +932,20 @@ export default class Resource {
     const currentRoute = this.currentRouter().currentRoute.value;
     const extensionMenuActions = getApplicableExtensionEnhancements(this.$rootState, ExtensionPoint.ACTION, ActionLocation.TABLE, currentRoute, this);
 
+    const currRancherVersionData = getVersionData();
+    const parsedRancherVersion = parseRancherVersion(currRancherVersionData.Version);
+
+    // "showConfiguration" table action is only compatible with Rancher 2.13 and onwards
+    // defence against extension issue https://github.com/rancher/dashboard/issues/15564
+    // where mostly likely extension CRD model is extending from resource-class
+    const isResourceDetailDrawerCompatibleWithRancherSystem = semver.satisfies(parsedRancherVersion, '>= 2.13.0');
+
     const all = [
       {
         action:  'showConfiguration',
         label:   this.t('action.showConfiguration'),
         icon:    'icon icon-document',
-        enabled: this.disableResourceDetailDrawer !== true && (this.canCustomEdit || this.canYaml), // If the resource can't show an edit or a yaml we don't want to show the configuration drawer
+        enabled: isResourceDetailDrawerCompatibleWithRancherSystem && this.disableResourceDetailDrawer !== true && (this.canCustomEdit || this.canYaml), // If the resource can't show an edit or a yaml we don't want to show the configuration drawer
       },
       { divider: true },
       {

package/plugins/steve/steve-pagination-utils.ts

@@ -15,9 +15,7 @@ import {
   HPA,
   SECRET
 } from '@shell/config/types';
-import {
-  CAPI as CAPI_LAB_AND_ANO, CATTLE_PUBLIC_ENDPOINTS, STORAGE, UI_PROJECT_SECRET, UI_PROJECT_SECRET_COPY
-} from '@shell/config/labels-annotations';
+import { CAPI as CAPI_LAB_AND_ANO, CATTLE_PUBLIC_ENDPOINTS, STORAGE, UI_PROJECT_SECRET_COPY } from '@shell/config/labels-annotations';
 import { Schema } from '@shell/plugins/steve/schema';
 import { PaginationSettingsStore } from '@shell/types/resources/settings';
 import paginationUtils from '@shell/utils/pagination-utils';
@@ -158,6 +156,7 @@ class StevePaginationUtils extends NamespaceProjectFilters {
       { field: 'id' },
       { field: 'metadata.state.name' },
       { field: 'metadata.creationTimestamp' },
+      { field: 'metadata.labels', startsWith: true },
     ],
     [NODE]: [
       { field: 'status.nodeInfo.kubeletVersion' },
@@ -180,18 +179,12 @@ class StevePaginationUtils extends NamespaceProjectFilters {
       { field: 'spec.internal' },
       { field: 'spec.displayName' },
       { field: `status.provider` },
-      { field: `metadata.labels["${ CAPI_LAB_AND_ANO.PROVIDER }]` },
       { field: `status.connected` },
     ],
-    [CONFIG_MAP]: [
-      { field: 'metadata.labels[harvesterhci.io/cloud-init-template]' }
-    ],
     [SECRET]: [
-      { field: `metadata.labels[${ UI_PROJECT_SECRET }]` },
       { field: `metadata.annotations[${ UI_PROJECT_SECRET_COPY }]` },
     ],
     [NAMESPACE]: [
-      { field: 'metadata.labels[field.cattle.io/projectId]' }
     ],
     [CAPI.MACHINE]: [
       { field: 'spec.clusterName' }
@@ -214,7 +207,6 @@ class StevePaginationUtils extends NamespaceProjectFilters {
       { field: 'status.releaseName' },
     ],
     [CAPI.RANCHER_CLUSTER]: [
-      { field: `metadata.labels[${ CAPI_LAB_AND_ANO.PROVIDER }]` },
       { field: `status.provider` },
       { field: 'status.clusterName' },
       { field: `metadata.annotations[${ CAPI_LAB_AND_ANO.HUMAN_NAME }]` }
@@ -224,14 +216,14 @@ class StevePaginationUtils extends NamespaceProjectFilters {
       { field: 'spec.clusterIP' },
     ],
     [INGRESS]: [
-      { field: 'spec.rules.host' }, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50526
+      { field: 'spec.rules.host' },
       { field: 'spec.ingressClassName' },
     ],
     [HPA]: [
-      { field: 'spec.scaleTargetRef.name' }, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50527
-      { field: 'spec.minReplicas' }, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50527
-      { field: 'spec.maxReplicas' }, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50527
-      { field: 'spec.currentReplicas' }, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50527
+      { field: 'spec.scaleTargetRef.name' },
+      { field: 'spec.minReplicas' },
+      { field: 'spec.maxReplicas' },
+      { field: 'spec.currentReplicas' },
     ],
     [PVC]: [
       { field: 'spec.volumeName' },
@@ -249,29 +241,29 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     ],
     [WORKLOAD_TYPES.CRON_JOB]: [
       { field: `metadata.annotations[${ CATTLE_PUBLIC_ENDPOINTS }]` },
-      { field: 'spec.template.spec.containers.image' }, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50526
+      { field: 'spec.template.spec.containers.image' },
     ],
     [WORKLOAD_TYPES.DAEMON_SET]: [
       { field: `metadata.annotations[${ CATTLE_PUBLIC_ENDPOINTS }]` },
-      { field: 'spec.template.spec.containers.image' }, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50526
+      { field: 'spec.template.spec.containers.image' },
     ],
     [WORKLOAD_TYPES.DEPLOYMENT]: [
       { field: `metadata.annotations[${ CATTLE_PUBLIC_ENDPOINTS }]` },
-      { field: 'spec.template.spec.containers.image' }, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50526
+      { field: 'spec.template.spec.containers.image' },
     ],
     [WORKLOAD_TYPES.JOB]: [
       { field: `metadata.annotations[${ CATTLE_PUBLIC_ENDPOINTS }]` },
-      { field: 'spec.template.spec.containers.image' }, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50526
+      { field: 'spec.template.spec.containers.image' },
     ],
     [WORKLOAD_TYPES.STATEFUL_SET]: [
       { field: `metadata.annotations[${ CATTLE_PUBLIC_ENDPOINTS }]` },
-      { field: 'spec.template.spec.containers.image' }, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50526
+      { field: 'spec.template.spec.containers.image' },
     ],
     [WORKLOAD_TYPES.REPLICA_SET]: [
-      { field: 'spec.template.spec.containers.image' }, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50526
+      { field: 'spec.template.spec.containers.image' },
     ],
     [WORKLOAD_TYPES.REPLICATION_CONTROLLER]: [
-      { field: 'spec.template.spec.containers.image' }, // Pending API Support - BUG - https://github.com/rancher/rancher/issues/50526
+      { field: 'spec.template.spec.containers.image' },
     ],
   }
 

package/scripts/test-plugins-build.sh

@@ -98,12 +98,11 @@ createTestComponent() {
   # Add test list component to the test package
   # Validates rancher-components imports
 
-  # NOTE - This fails if importing some components with TS imports...
-  # cp ${SHELL_DIR}/list/catalog.cattle.io.clusterrepo.vue pkg/test-pkg/list
-  # See https://github.com/rancher/dashboard/issues/12918
-
-  # Use a basic list instead
+  # Basic list instead
   cp ${SHELL_DIR}/list/namespace.vue pkg/test-pkg/list
+
+  # More complex list
+  cp ${SHELL_DIR}/list/catalog.cattle.io.clusterrepo.vue pkg/test-pkg/list
 }
 
 # Publish shell pkg (tag is needed as publish-shell is optimized to work with release-shell-pkg workflow)

package/scripts/typegen.sh

@@ -39,6 +39,8 @@ ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/steve/hybrid-class.js --d
 # # mixins
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/mixins/create-edit-view/index.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/mixins/create-edit-view > /dev/null
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/mixins/resource-fetch.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/mixins > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/mixins/resource-fetch-namespaced.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/mixins > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/mixins/resource-fetch-api-pagination.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/mixins > /dev/null
 
 # # models
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/models/namespace.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/models/ > /dev/null

package/store/auth.js

@@ -207,7 +207,7 @@ export const actions = {
 
     commit('cookies/set', {
       key: KEY, value: strung, options
-    });
+    }, { root: true });
 
     return strung;
   },
@@ -371,7 +371,7 @@ export const actions = {
   loggedInAs({ commit }, principalId) {
     commit('loggedInAs', principalId);
 
-    commit('cookies/remove', { key: KEY });
+    commit('cookies/remove', { key: KEY }, { root: true });
   },
 
   uiLogout({ commit, dispatch }) {

package/types/shell/index.d.ts

@@ -2323,6 +2323,18 @@ export function setKubeVersionData(v: any): void;
 export const CURRENT_RANCHER_VERSION: "2.12";
 }
 
+// @shell/mixins/components/ResourceList/resource-list.config
+
+declare module '@shell/mixins/components/ResourceList/resource-list.config' {
+/**
+ * Component name of the `ResourceList`
+ *
+ * This needs to be a in separate file to avoid circular dependency of
+ * index.vue --> resource-fetch mixin --> resource-fetch-namespaced mixin --> index.vue
+ */
+export const ResourceListComponentName: "ResourceList";
+}
+
 // @shell/mixins/create-edit-view/impl
 
 declare module '@shell/mixins/create-edit-view/impl' {
@@ -2468,6 +2480,175 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 export default _default;
 }
 
+// @shell/mixins/mixins/resource-fetch-api-pagination
+
+declare module '@shell/mixins/mixins/resource-fetch-api-pagination' {
+declare namespace _default {
+    namespace props {
+        namespace namespaced {
+            export let type: BooleanConstructor;
+            let _default: any;
+            export { _default as default };
+        }
+        namespace context {
+            let type_1: StringConstructor;
+            export { type_1 as type };
+            let _default_1: any;
+            export { _default_1 as default };
+        }
+    }
+    function data(): {
+        forceUpdateLiveAndDelayed: number;
+        /**
+         * This of type `OptPagination`
+         */
+        pPagination: any;
+        debouncedSetPagination: any;
+        /**
+         * Apply these additional filters given the ns / project header selection
+         */
+        requestFilters: {
+            filters: any[];
+            projectsOrNamespaces: any[];
+        };
+        paginationFromList: any;
+        isPaginationManualRefreshEnabled: any;
+    };
+    namespace methods {
+        /**
+         * @param {PaginationArgs} pagination
+         */
+        function setPagination(pagination: PaginationArgs): void;
+        /**
+         * Primary point that handles changes from either a table or the namespace filter
+         */
+        function paginationChanged(event: any): void;
+        /**
+         * @param {PaginationArgs} neu
+         * @param {PaginationArgs} old
+         */
+        function paginationEqual(neu: PaginationArgs, old: PaginationArgs): boolean;
+        function calcCanPaginate(): any;
+    }
+    namespace computed {
+        /**
+         * Why is this a specific getter and not not in mapGetters?
+         *
+         * Adding it to mapGetters means the kubewarden unit tests fail as they don't mock it....
+         */
+        function namespaceFilters(): any;
+        /**
+         * Does the user need to update the filter to supply valid options?
+         */
+        function paginationNsFilterRequired(): boolean;
+        /**
+         * Check if the Project/Namespace filter from the header contains a valid ns / project filter
+         */
+        function __validPaginationNsFilter(): any;
+        /**
+         * ResourceList imports resource-fetch --> this mixin
+         * When there is no custom list this is fine (ResourceList with mixins --> ResourceTable)
+         * When there is a custom list there are two instances of this mixin (ResourceList with mixins --> CustomList with mixins --> ResourceTable)
+         * - In this scenario, reduce churn by exiting earlier if mixin is from parent ResourceList and leave work for CustomList mixins
+         */
+        function isResourceList(): any;
+        /**
+         * Is Pagination supported and has the table supplied pagination settings from the table?
+         */
+        function pagination(): any;
+        /**
+         * Should this list be paginated via API?
+         */
+        function canPaginate(): any;
+        function paginationResult(): any;
+        function havePaginated(): any;
+        /**
+          * Links to ns.isSystem and covers things like ns with system annotation, hardcoded list, etc
+          */
+        function productHidesSystemNamespaces(): any;
+        /**
+          * Links to ns.isObscure and covers things like `c-`, `user-`, etc (see OBSCURE_NAMESPACE_PREFIX)
+          */
+        function showDynamicRancherNamespaces(): any;
+        function isNamespaced(): any;
+        let currentProduct: import("vuex").Computed;
+        let isAllNamespaces: import("vuex").Computed;
+    }
+    let watch: {
+        /**
+         * Monitor the rows to ensure deleting the last entry in a server-side paginated page doesn't
+         * result in an empty page
+         */
+        rows(neu: any): void;
+        namespaceFilters: {
+            immediate: boolean;
+            handler(neu: any, old: any): Promise<void>;
+        };
+        'requestFilters.filters'(): void;
+        'requestFilters.projectsOrNamespaces'(): void;
+        /**
+         * When a pagination is required and the user changes page / sort / filter, kick off a new set of API requests
+         *
+         * @param {StorePaginationResult} neu
+         * @param {StorePaginationResult} old
+         */
+        pagination(neu: StorePaginationResult, old: StorePaginationResult): Promise<void>;
+        /**
+         * If the pagination result has changed fetch secondary resources
+         *
+         * Lists should implement fetchPageSecondaryResources to fetch them
+         *
+         * @param {StorePaginationResult} neu
+         * @param {StorePaginationResult} old
+         */
+        paginationResult(neu: StorePaginationResult, old: StorePaginationResult): Promise<void>;
+    };
+    function beforeUnmount(): Promise<void>;
+}
+export default _default;
+}
+
+// @shell/mixins/mixins/resource-fetch-namespaced
+
+declare module '@shell/mixins/mixins/resource-fetch-namespaced' {
+declare namespace _default {
+    function data(): {
+        forceUpdateLiveAndDelayed: number;
+    };
+    namespace computed {
+        /**
+         * Does the user need to update the filter to supply a single namespace?
+         */
+        function namespaceFilterRequired(): boolean;
+        /**
+         * Returns the namespace that requests should be filtered by
+         */
+        function namespaceFilter(): "" | (() => import("vuex").Computed);
+        /**
+         * If the Project/Namespace filter from the header contains a valid ns / project filter ... return it
+         */
+        function __validFilter(): import("vuex").Computed;
+        /**
+         * Do we need to filter the list by a namespace? This will control whether the user is shown an error
+         *
+         * We shouldn't show an error on pages with resources that aren't namespaced
+         */
+        function __namespaceRequired(): false | (() => any);
+        /**
+         * Are all core list resources namespaced?
+         */
+        function __areResourcesNamespaced(): any;
+        let currentProduct: import("vuex").Computed;
+        let currentCluster: import("vuex").Computed;
+        let namespaceFilters: import("vuex").Computed;
+    }
+    namespace watch {
+        function namespaceFilter(neu: any): Promise<void>;
+    }
+}
+export default _default;
+}
+
 // @shell/mixins/resource-fetch
 
 declare module '@shell/mixins/resource-fetch' {

package/types/store/vuex.d.ts

@@ -10,7 +10,8 @@ export interface VuexStoreGetters {
 
 export interface VuexStore {
   getters: VuexStoreGetters,
-  dispatch: any,
+  dispatch: <T = any>(action: string, payload?: any) => Promise<T>,
+  commit: (mutation: string, payload?: any) => void,
 
   // When we have exact properties above we can remove below
   [name:string]: any

package/types/vue-shim.d.ts

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import type ShellApi from '@shell/plugins/internal-api/shell/shell.api';
+import { VuexStore } from '@shell/types/store/vuex';
 
 export {};
 
@@ -13,11 +14,7 @@ declare module 'vue' {
       (key: string, args?: Record<string, any>, raw?: boolean): string;
       (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
     },
-    $store: {
-      getters: Record<string, any>,
-      dispatch: (action: string, payload?: any) => Promise<any>,
-      commit: (mutation: string, payload?: any) => void,
-    },
+    $store: VuexStore,
     $shell: ShellApi,
   }
 }

package/utils/pagination-utils.ts

@@ -16,6 +16,7 @@ import { STEVE_CACHE } from '@shell/store/features';
 import { getPerformanceSetting } from '@shell/utils/settings';
 import { PAGINATION_SETTINGS_STORE_DEFAULTS } from '@shell/plugins/steve/steve-pagination-utils';
 import { MANAGEMENT } from '@shell/config/types';
+import { DEFAULT_PERF_SETTING } from '@shell/config/settings';
 
 /**
  * Helper functions for server side pagination
@@ -43,7 +44,15 @@ class PaginationUtils {
   public getStoreSettings(arg: any | PaginationSettings): PaginationSettingsStore {
     const serverPagination: PaginationSettings = arg?.rootGetters !== undefined ? this.getSettings(arg) : arg;
 
-    return serverPagination?.useDefaultStores ? this.getStoreDefault() : serverPagination?.stores || this.getStoreDefault();
+    // Ensure we use the current default store settings if
+    // 1. from 2.11.0 user saved `ui-performance` setting and it's applied the default pagination settings containing useDefaultStores
+    // 2. before 2.11.0 user has saved `ui-performance` setting and it's applied an obsolete pagination settings that lack useDefaultStore
+    // 3. user has manually set the `ui-performance` pagination setting useDefaultStores value
+    if (serverPagination?.useDefaultStores || serverPagination?.useDefaultStores === undefined) {
+      return this.getStoreDefault();
+    }
+
+    return serverPagination?.stores || this.getStoreDefault();
   }
 
   public getStoreDefault(): PaginationSettingsStore {
@@ -168,7 +177,7 @@ class PaginationUtils {
   resourceChangesDebounceMs({ rootGetters }: any): number | undefined {
     const settings = this.getSettings({ rootGetters });
 
-    return settings.resourceChangesDebounceMs;
+    return settings.resourceChangesDebounceMs || DEFAULT_PERF_SETTING.serverPagination.resourceChangesDebounceMs;
   }
 
   validateNsProjectFilters(nsProjectFilters: string[]) {