From d0c3fb2407316c5a57688c71e1110c947af75837 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 1 Feb 2024 15:40:17 +0000
Subject: [PATCH 01/71] Changes for new design - New visuals - Pagination
 controls --> load more - finished testing of label select with pagination off

# Conflicts:
#	shell/edit/provisioning.cattle.io.cluster/__tests__/Basics.tests.ts
---
 pkg/aks/components/AksNodePool.vue            |   2 +-
 pkg/aks/components/CruAks.vue                 |   2 +-
 shell/assets/styles/themes/_dark.scss         |   3 +-
 shell/assets/styles/themes/_light.scss        |   1 +
 shell/assets/styles/vendor/vue-select.scss    |   5 +
 shell/assets/translations/en-us.yaml          |   7 +
 shell/chart/rancher-backup/S3.vue             |  76 +++++++-
 shell/chart/rancher-backup/index.vue          |  11 +-
 shell/components/PodSecurityAdmission.vue     |   2 +-
 shell/components/PromptRestore.vue            |   2 +-
 shell/components/form/GitPicker.vue           |   2 +-
 .../form/LabeledSelect/LabeledSelect.utils.ts |   1 +
 .../index.vue}                                | 163 +++++++++++++++---
 .../labeled-select-pagination.ts              | 134 ++++++++++++++
 .../form/__tests__/LabeledSelect.test.ts      |   2 +-
 .../hpa-scaling-rule.vue                      |   2 +-
 .../__tests__/Basics.test.ts                  |   2 +-
 shell/edit/ui.cattle.io.navlink.vue           |   2 +-
 shell/plugins/steve/getters.js                |  34 ++++
 .../stories/InputFieldsAdvancedExample.vue    |   2 +-
 storybook/stories/InputFieldsExample.vue      |   2 +-
 21 files changed, 415 insertions(+), 42 deletions(-)
 create mode 100644 shell/components/form/LabeledSelect/LabeledSelect.utils.ts
 rename shell/components/form/{LabeledSelect.vue => LabeledSelect/index.vue} (75%)
 create mode 100644 shell/components/form/LabeledSelect/labeled-select-pagination.ts

diff --git a/pkg/aks/components/AksNodePool.vue b/pkg/aks/components/AksNodePool.vue
index c1cbe552d2..49ab6a429c 100644
--- a/pkg/aks/components/AksNodePool.vue
+++ b/pkg/aks/components/AksNodePool.vue
@@ -5,7 +5,7 @@ import { mapGetters } from 'vuex';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 import type { AKSDiskType, AKSNodePool, AKSPoolMode } from '../types/index';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
 import Taint from '@pkg/aks/components/Taint.vue';
 import UnitInput from '@shell/components/form/UnitInput.vue';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
diff --git a/pkg/aks/components/CruAks.vue b/pkg/aks/components/CruAks.vue
index d3c51809a0..9ae3bf540d 100644
--- a/pkg/aks/components/CruAks.vue
+++ b/pkg/aks/components/CruAks.vue
@@ -16,7 +16,7 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import FormValidation from '@shell/mixins/form-validation';
 import SelectCredential from '@shell/edit/provisioning.cattle.io.cluster/SelectCredential.vue';
 import CruResource from '@shell/components/CruResource.vue';
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import FileSelector from '@shell/components/form/FileSelector.vue';
diff --git a/shell/assets/styles/themes/_dark.scss b/shell/assets/styles/themes/_dark.scss
index b867584863..a0e821c8f6 100644
--- a/shell/assets/styles/themes/_dark.scss
+++ b/shell/assets/styles/themes/_dark.scss
@@ -107,7 +107,8 @@
   --dropdown-hover-bg          : var(--link);
   --dropdown-disabled-bg       : #{$disabled};
   --dropdown-disabled-text     : #{$disabled};
-  --dropdown-highlight-text     : var(--link);
+  --dropdown-group-text        : #{$disabled};
+  --dropdown-highlight-text    : var(--link);
 
   --input-text                 : #{$lightest};
   --input-label                : #{$lighter};
diff --git a/shell/assets/styles/themes/_light.scss b/shell/assets/styles/themes/_light.scss
index 457393810d..387d1abf8b 100644
--- a/shell/assets/styles/themes/_light.scss
+++ b/shell/assets/styles/themes/_light.scss
@@ -376,6 +376,7 @@ BODY, .theme-light {
   --dropdown-hover-bg          : var(--link);
   --dropdown-disabled-text     : var(--muted);
   --dropdown-disabled-bg       : #{$disabled};
+  --dropdown-group-text        : #{$darker};
   --dropdown-highlight-text    : var(--link);
 
   --card-badge-text            : #ffffff;
diff --git a/shell/assets/styles/vendor/vue-select.scss b/shell/assets/styles/vendor/vue-select.scss
index 3d774f82de..4dc95331e7 100644
--- a/shell/assets/styles/vendor/vue-select.scss
+++ b/shell/assets/styles/vendor/vue-select.scss
@@ -94,6 +94,11 @@
     hr {
       cursor: default;
     }
+
+    .vs__option-kind-group {
+      color: var(--dropdown-group-text);
+      cursor: default;
+    }
   }
 
   &.vs__dropdown-option--selected {
diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index 015e7af1a0..6404679109 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -2759,6 +2759,13 @@ labels:
   annotations:
     title: Annotations
 
+labelSelect:
+  noOptions:
+    empty: No options
+    noMatch: No matching options
+  pagination:
+    counts: '{count} / {totalCount} items'
+    more: Load More...
 landing:
   clusters:
     title: Clusters
diff --git a/shell/chart/rancher-backup/S3.vue b/shell/chart/rancher-backup/S3.vue
index d86a3fc197..6e5c4ffe3a 100644
--- a/shell/chart/rancher-backup/S3.vue
+++ b/shell/chart/rancher-backup/S3.vue
@@ -4,6 +4,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 import FileSelector from '@shell/components/form/FileSelector';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { mapGetters } from 'vuex';
+import { SECRET } from '@shell/config/types';
 
 export default {
   components: {
@@ -44,6 +45,7 @@ export default {
       this.$emit('valid', this.valid);
     }
   },
+
   computed: {
     credentialSecret: {
       get() {
@@ -75,7 +77,75 @@ export default {
         // eslint-disable-next-line no-console
         console.warn(e);
       }
-    }
+    },
+
+    /**
+     * Given inputs make a paginated request and return the result
+     */
+    async paginateSecrets({
+      pageContent,
+      page,
+      filter,
+      pageSize,
+      resetPage
+    }) {
+      try {
+        // Construct params for request
+        const filterParam = !!filter ? [{ field: 'metadata.name', value: filter }] : [];
+        const url = this.$store.getters['cluster/urlFor'](SECRET, null, {
+          pagination: {
+            filter: filterParam,
+            sort:   [{ asc: true, field: 'metadata.namespace' }, { asc: true, field: 'metadata.name' }],
+            page,
+            pageSize,
+          }
+        });
+
+        // Make request (note we're not bothering to persist anything to the store, response is transient)
+        const res = await this.$store.dispatch('cluster/request', { url });
+        const options = resetPage ? res.data : pageContent.concat(res.data);
+
+        // Create the new option collection by...
+        const namespaced = {};
+
+        // ... grouping by namespace
+        options.forEach((secret) => {
+          const ns = secret.metadata.namespace;
+
+          if (secret.kind === 'group') { // this could contain a previous option set which contains groups
+            return;
+          }
+          if (!namespaced[ns]) {
+            namespaced[ns] = [];
+          }
+          namespaced[ns].push(secret);
+        });
+
+        let grouped = [];
+
+        // ... then sort groups by name and combined into a single array
+        Object.keys(namespaced).sort().forEach((ns) => {
+          grouped.push({
+            kind:     'group',
+            icon:     'icon-namespace',
+            id:       ns,
+            metadata: { name: ns },
+            disabled: true,
+          });
+          grouped = grouped.concat(namespaced[ns]);
+        });
+
+        return {
+          page:  grouped,
+          pages: res.pages,
+          total: res.count
+        };
+      } catch (err) {
+        console.error(err); // eslint-disable-line no-console
+      }
+
+      return { page: [] };
+    },
   },
 
   created() {
@@ -97,7 +167,9 @@ export default {
           :get-option-label="opt=>opt.metadata.name || ''"
           option-key="id"
           :mode="mode"
-          :options="secrets"
+          :paginate="paginateSecrets"
+          :searchable="true"
+          :filterable="false"
           :label="t('backupRestoreOperator.s3.credentialSecretName')"
         />
       </div>
diff --git a/shell/chart/rancher-backup/index.vue b/shell/chart/rancher-backup/index.vue
index 7d5a80e12c..b3eb031655 100644
--- a/shell/chart/rancher-backup/index.vue
+++ b/shell/chart/rancher-backup/index.vue
@@ -7,7 +7,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { Banner } from '@components/Banner';
 import { get } from '@shell/utils/object';
 import { allHash } from '@shell/utils/promise';
-import { STORAGE_CLASS, SECRET, PV } from '@shell/config/types';
+import { STORAGE_CLASS, PV } from '@shell/config/types';
 import { mapGetters } from 'vuex';
 import { STORAGE } from '@shell/config/labels-annotations';
 
@@ -41,10 +41,8 @@ export default {
     const hash = await allHash({
       storageClasses:    this.$store.dispatch('cluster/findAll', { type: STORAGE_CLASS }),
       persistentVolumes: this.$store.dispatch('cluster/findAll', { type: PV }),
-      secrets:           this.$store.dispatch('cluster/findAll', { type: SECRET }),
     });
 
-    this.secrets = hash.secrets;
     this.storageClasses = hash.storageClasses;
     this.persistentVolumes = hash.persistentVolumes;
 
@@ -89,6 +87,12 @@ export default {
 
   watch: {
     storageSource(neu) {
+      if (!this.value.persistence) {
+        this.value.persistence = {};
+      }
+      if (!this.value.s3) {
+        this.value.s3 = {};
+      }
       switch (neu) {
       case 'pickSC':
         this.value.persistence.enabled = true;
@@ -113,6 +117,7 @@ export default {
         this.value.s3.enabled = true;
         break;
       default:
+
         this.value.persistence.enabled = false;
         this.value.s3.enabled = false;
         break;
diff --git a/shell/components/PodSecurityAdmission.vue b/shell/components/PodSecurityAdmission.vue
index 026133150f..31f69e1f87 100644
--- a/shell/components/PodSecurityAdmission.vue
+++ b/shell/components/PodSecurityAdmission.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { _VIEW, _CREATE } from '@shell/config/query-params';
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { PSADimension, PSAMode } from '@shell/types/pod-security-admission';
diff --git a/shell/components/PromptRestore.vue b/shell/components/PromptRestore.vue
index b95d19c051..ab3aab2081 100644
--- a/shell/components/PromptRestore.vue
+++ b/shell/components/PromptRestore.vue
@@ -5,7 +5,7 @@ import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
 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 LabeledSelect from '@shell/components/form/LabeledSelect';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { CAPI, NORMAN, SNAPSHOT } from '@shell/config/types';
 import { set } from '@shell/utils/object';
diff --git a/shell/components/form/GitPicker.vue b/shell/components/form/GitPicker.vue
index 24bf96b610..557167c07b 100644
--- a/shell/components/form/GitPicker.vue
+++ b/shell/components/form/GitPicker.vue
@@ -4,7 +4,7 @@ import SortableTable from '@shell/components/SortableTable/index.vue';
 import RadioButton from '@components/Form/Radio/RadioButton.vue';
 import debounce from 'lodash/debounce';
 import { isArray } from '@shell/utils/array';
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { GitUtils } from '../../utils/git';
 
diff --git a/shell/components/form/LabeledSelect/LabeledSelect.utils.ts b/shell/components/form/LabeledSelect/LabeledSelect.utils.ts
new file mode 100644
index 0000000000..4bc7173f6c
--- /dev/null
+++ b/shell/components/form/LabeledSelect/LabeledSelect.utils.ts
@@ -0,0 +1 @@
+export const LABEL_SELECT_NOT_OPTION_KINDS = ['group', 'divider'];
diff --git a/shell/components/form/LabeledSelect.vue b/shell/components/form/LabeledSelect/index.vue
similarity index 75%
rename from shell/components/form/LabeledSelect.vue
rename to shell/components/form/LabeledSelect/index.vue
index 68c256c45b..fb7aa21ba6 100644
--- a/shell/components/form/LabeledSelect.vue
+++ b/shell/components/form/LabeledSelect/index.vue
@@ -6,12 +6,14 @@ import { LabeledTooltip } from '@components/LabeledTooltip';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
 import isEqual from 'lodash/isEqual';
+import LabeledSelectPagination from './labeled-select-pagination';
+import { LABEL_SELECT_NOT_OPTION_KINDS } from './LabeledSelect.utils';
 
 export default {
   name: 'LabeledSelect',
 
   components: { LabeledTooltip },
-  mixins:     [CompactInput, LabeledFormElement, VueSelectOverrides],
+  mixins:     [CompactInput, LabeledFormElement, VueSelectOverrides, LabeledSelectPagination],
 
   props: {
     appendToBody: {
@@ -67,7 +69,7 @@ export default {
     selectable: {
       default: (opt) => {
         if ( opt ) {
-          if ( opt.disabled || opt.kind === 'group' || opt.kind === 'divider' || opt.loading ) {
+          if ( opt.disabled || LABEL_SELECT_NOT_OPTION_KINDS.includes(opt.kind) || opt.loading ) {
             return false;
           }
         }
@@ -89,8 +91,8 @@ export default {
       type:    [String, Object, Number, Array, Boolean]
     },
     options: {
-      type:     Array,
-      required: true
+      type:    Array,
+      default: () => ([])
     },
     closeOnSelect: {
       type:    Boolean,
@@ -109,6 +111,16 @@ export default {
     hasLabel() {
       return this.isCompact ? false : !!this.label || !!this.labelKey || !!this.$slots.label;
     },
+
+    hasGroupIcon() {
+      // Required for option.icon. Note that we only apply if paginating as well (there might be 2 x performance issues with 2k entries. one to iterate through this list, the other with conditional class per entry in dom)
+      return this.paginate ? !!this._options.find((o) => o.kind === 'group' && !!o.icon) : false;
+    },
+
+    _options() {
+      // If we're paginated show the page as provided by `paginate`. See label-select-pagination mixin
+      return this.paginate ? this.page : this.options;
+    }
   },
 
   methods: {
@@ -155,7 +167,7 @@ export default {
 
       // This check is only needed if its possible for an option's label to change without the option's value changing - we can skip this if options are just strings or numbers
       // HOWEVER even if strings are passed to v-select the 'option' in the slot is normalized to {label: <option>} so we have to check the options prop here instead of the 'option' itself
-      if (typeof this.options[0] === 'object') {
+      if (typeof this._options?.[0] === 'object') {
         const newOption = this.getUpdatedOption(option);
 
         if (newOption) {
@@ -184,9 +196,9 @@ export default {
     // If the option's label changed in parent but value did not, the label wont be automatically updated here
     // Ensure that the label being shown is still present in the options prop and find the new one if not
     getUpdatedOption(option) {
-      const isOutdated = this.options && !this.options.find((opt) => option[this.optionLabel] === opt[this.optionLabel]);
+      const isOutdated = this._options && !this._options.find((opt) => option[this.optionLabel] === opt[this.optionLabel]);
 
-      return isOutdated ? this.options.find((opt) => isEqual(this.reduce(option), this.reduce(opt))) : undefined;
+      return isOutdated ? this._options.find((opt) => isEqual(this.reduce(option), this.reduce(opt))) : undefined;
     },
 
     positionDropdown(dropdownList, component, { width }) {
@@ -219,8 +231,12 @@ export default {
     },
 
     onSearch(newSearchString) {
-      if (newSearchString) {
-        this.dropdownShouldOpen(this.$refs['select-input'], true);
+      if (this.paginate) {
+        this.setPaginationFilter(newSearchString);
+      } else {
+        if (newSearchString) {
+          this.dropdownShouldOpen(this.$refs['select-input'], true);
+        }
       }
     },
 
@@ -276,13 +292,13 @@ export default {
       class="inline"
       :append-to-body="appendToBody"
       :calculate-position="positionDropdown"
-      :class="{ 'no-label': !(label || '').length }"
+      :class="{ 'no-label': !(label || '').length}"
       :clearable="clearable"
       :disabled="isView || disabled || loading"
       :get-option-key="getOptionKey"
       :get-option-label="(opt) => getOptionLabel(opt)"
       :label="optionLabel"
-      :options="options"
+      :options="_options"
       :map-keydown="mappedKeys"
       :placeholder="placeholder"
       :reduce="(x) => reduce(x)"
@@ -301,6 +317,11 @@ export default {
       <template #option="option">
         <template v-if="option.kind === 'group'">
           <div class="vs__option-kind-group">
+            <i
+              v-if="option.icon"
+              class="icon"
+              :class="{ [option.icon]: true}"
+            />
             <b>{{ getOptionLabel(option) }}</b>
             <div v-if="option.badge">
               {{ option.badge }}
@@ -317,6 +338,8 @@ export default {
         </template>
         <div
           v-else
+          class="vs__option-kind"
+          :class="{ 'has-icon' : hasGroupIcon}"
           @mousedown="(e) => onClickOption(option, e)"
         >
           {{ getOptionLabel(option) }}
@@ -337,6 +360,44 @@ export default {
           v-bind="scope"
         />
       </template>
+      <div
+        v-if="paginate && totalResults"
+        slot="list-footer"
+        class="pagination-slot"
+      >
+        <div class="load-more">
+          <i
+            v-if="paginating"
+            class="icon icon-spinner icon-spin"
+          />
+          <div v-else>
+            <a
+              v-if="canLoadMore"
+              @click="loadMore"
+            > {{ t('labelSelect.pagination.more') }}</a>
+          </div>
+        </div>
+
+        <div class="count">
+          {{ optionCounts }}
+        </div>
+      </div>
+      <template #no-options="{ search }">
+        <div class="no-options-slot">
+          <div
+            v-if="paginating"
+            class="paginating"
+          >
+            <i class="icon icon-spinner icon-spin" />
+          </div>
+          <template v-else-if="search">
+            {{ t('labelSelect.noOptions.noMatch') }}
+          </template>
+          <template v-else>
+            {{ t('labelSelect.noOptions.empty') }}
+          </template>
+        </div>
+      </template>
     </v-select>
     <i
       v-if="loading"
@@ -514,21 +575,73 @@ export default {
   }
 }
 
-// Styling for option group badge
-.vs__dropdown-menu .vs__dropdown-option .vs__option-kind-group {
-  display: flex;
-  > b {
-    flex: 1;
+$icon-size: 18px;
+
+// This represents the drop down area. Note - it might be attached to body and NOT the parent label select div
+.vs__dropdown-menu {
+
+  // Styling for individual options
+  .vs__dropdown-option .vs__option-kind {
+    &-group {
+      display: flex;
+      align-items: center;
+
+      i { // icon
+        width: $icon-size;
+      }
+
+      > b { // group label
+        flex: 1;
+      }
+
+      > div { // badge
+        background-color: var(--primary);
+        border-radius: 4px;
+        color: var(--primary-text);
+        font-size: 12px;
+        height: 18px;
+        line-height: 18px;
+        margin-top: 1px;
+        padding: 0 10px;
+      }
+    }
+
+    &.has-icon {
+      padding-left: $icon-size;
+    }
   }
-  > div {
-    background-color: var(--primary);
-    border-radius: 4px;
-    color: var(--primary-text);
-    font-size: 12px;
-    height: 18px;
-    line-height: 18px;
-    margin-top: 1px;
-    padding: 0 10px;
+
+    &.has-icon .vs__option-kind div{
+    padding-left: $icon-size;
+  }
+
+  .pagination-slot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-top: 5px;
+
+    .load-more {
+      display: flex;
+      align-items: center;
+      height: 19px;
+
+      a {
+        cursor: pointer;
+      }
+    }
+
+    .count {
+      position: absolute;
+      right: 10px;
+    }
+  }
+
+  .no-options-slot .paginating {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 
diff --git a/shell/components/form/LabeledSelect/labeled-select-pagination.ts b/shell/components/form/LabeledSelect/labeled-select-pagination.ts
new file mode 100644
index 0000000000..2da972d201
--- /dev/null
+++ b/shell/components/form/LabeledSelect/labeled-select-pagination.ts
@@ -0,0 +1,134 @@
+import { LABEL_SELECT_NOT_OPTION_KINDS } from './LabeledSelect.utils';
+import { debounce } from 'lodash';
+import Vue, { PropType } from 'vue';
+
+interface Data {
+  currentPage: number,
+  search: string,
+  pageSize: number,
+
+  page: any[],
+  pages: number,
+  totalResults: number,
+
+  paginating: boolean,
+
+  debouncedRequestPagination: Function
+}
+
+interface Methods {
+  loadMore: () => void
+  setPaginationFilter: (filter: string) => void
+  requestPagination: () => Promise<any>;
+}
+
+/**
+ * Make a http request to fetch paginated results
+ *
+ * @param [array] pageContent Current page
+ * @param [number] page page number to fetch
+ * @param [number] pageSize number of items in the page to fetch
+ * @param [string] filter pagination filter. this is just a text string associated with user entered text
+ * @param [boolean] resetPage true if the result should only contain the fetched page, false if the result should be added to the pageContent
+ */
+type PaginateFn<T = any> = (opts: {
+  pageContent: T[],
+  page: number,
+  pageSize: number,
+  filter: string,
+  resetPage: boolean,
+}) => Promise<{
+  page: T[],
+  pages: number,
+  total: number
+}>
+
+interface Props {
+  paginate: PaginateFn
+}
+
+export default Vue.extend<Data, Methods, any, Props>({
+  props: {
+    paginate: {
+      default: null,
+      type:    Function as PropType<PaginateFn>,
+    }
+  },
+
+  data(): Data {
+    return {
+      currentPage: 1,
+      search:      '',
+      pageSize:    10,
+
+      page:         [],
+      pages:        0,
+      totalResults: 0,
+
+      paginating: false,
+
+      debouncedRequestPagination: debounce(this.requestPagination, 700),
+    };
+  },
+
+  async mounted() {
+    if (this.paginate) {
+      await this.requestPagination();
+    }
+  },
+
+  computed: {
+    canLoadMore() {
+      return this.pages > this.currentPage;
+    },
+
+    optionsInPage() {
+      // Number of genuine options (not groups, dividers, etc)
+      return this.paginate ? this._options.filter((o: any) => !LABEL_SELECT_NOT_OPTION_KINDS.includes(o.kind)).length : 0;
+    },
+
+    optionCounts() {
+      return this.paginate ? this.$store.getters['i18n/t']('labelSelect.pagination.counts', {
+        count:      this.optionsInPage,
+        totalCount: this.totalResults
+      }) : '';
+    },
+  },
+
+  methods: {
+    loadMore() {
+      this.currentPage++;
+      this.requestPagination();
+    },
+
+    setPaginationFilter(filter: string) {
+      this.paginating = true; // Do this before debounce
+      this.currentPage = 1;
+      this.search = filter;
+      this.debouncedRequestPagination(true);
+    },
+
+    async requestPagination(resetPage = false) {
+      this.paginating = true;
+      const paginate: PaginateFn = this.paginate;
+
+      const {
+        page,
+        pages,
+        total
+      } = await paginate({
+        resetPage,
+        pageContent: this.page || [],
+        page:        this.currentPage,
+        filter:      this.search,
+        pageSize:    this.pageSize,
+      });
+
+      this.page = page;
+      this.pages = pages || 0;
+      this.totalResults = total || 0;
+
+      this.paginating = false;
+    }
+  }
+});
diff --git a/shell/components/form/__tests__/LabeledSelect.test.ts b/shell/components/form/__tests__/LabeledSelect.test.ts
index a764fd988d..4b1bc4d082 100644
--- a/shell/components/form/__tests__/LabeledSelect.test.ts
+++ b/shell/components/form/__tests__/LabeledSelect.test.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
 
 describe('component: LabeledSelect', () => {
   describe('should display correct label', () => {
diff --git a/shell/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue b/shell/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue
index 455225e5fd..ec10ceadbc 100644
--- a/shell/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue
+++ b/shell/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue
@@ -1,7 +1,7 @@
 <script>
 
 import { _EDIT } from '@shell/config/query-params';
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped.vue';
 
diff --git a/shell/edit/provisioning.cattle.io.cluster/__tests__/Basics.test.ts b/shell/edit/provisioning.cattle.io.cluster/__tests__/Basics.test.ts
index 5883809c70..895dd0754a 100644
--- a/shell/edit/provisioning.cattle.io.cluster/__tests__/Basics.test.ts
+++ b/shell/edit/provisioning.cattle.io.cluster/__tests__/Basics.test.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import Basics from '@shell/edit/provisioning.cattle.io.cluster/tabs/Basics';
+import Basics from '@shell/edit/provisioning.cattle.io.cluster/tabs/Basics.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 
 const defaultStubs = {
diff --git a/shell/edit/ui.cattle.io.navlink.vue b/shell/edit/ui.cattle.io.navlink.vue
index 737f9c5249..c7d965979c 100644
--- a/shell/edit/ui.cattle.io.navlink.vue
+++ b/shell/edit/ui.cattle.io.navlink.vue
@@ -7,7 +7,7 @@ import CruResource from '@shell/components/CruResource';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { RadioGroup } from '@components/Form/Radio';
 import FileImageSelector from '@shell/components/form/FileImageSelector';
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import { Banner } from '@components/Banner';
 import FormValidation from '@shell/mixins/form-validation';
diff --git a/shell/plugins/steve/getters.js b/shell/plugins/steve/getters.js
index 5fd26c9912..175f86ab33 100644
--- a/shell/plugins/steve/getters.js
+++ b/shell/plugins/steve/getters.js
@@ -111,6 +111,40 @@ export default {
 
     // End: Sort
 
+    // Pagination
+    if (opt.pagination) {
+      if (typeof (opt.pagination.page) !== 'undefined') {
+        url += `${ url.includes('?') ? '&' : '?' }page=${ opt.pagination.page }`;
+        // params.push(`page=${ opt.pagination.page }`);
+      } else {
+        throw new Error(`A paginated request is required but no 'page' property provided: ${ JSON.stringify(opt) }`);
+      }
+
+      if (typeof (opt.pagination.pageSize) !== 'undefined') {
+        url += `${ url.includes('?') ? '&' : '?' }pagesize=${ opt.pagination.pageSize }`;
+      } else {
+        throw new Error(`A paginated request is required but no 'pageSize' property provided: ${ JSON.stringify(opt) }`);
+      }
+
+      if (opt.pagination.sort?.length) {
+        const joined = opt.pagination.sort
+          .map((s) => `${ s.asc ? '' : '-' }${ s.field }`)
+          .join(',');
+
+        url += `${ url.includes('?') ? '&' : '?' }sort=${ joined }`;
+      }
+
+      if (opt.pagination.filter?.length) {
+        const joined = opt.pagination.filter
+          .map(({ field, value }) => `${ field }=${ value }`)
+          .join(',');
+
+        url += `${ url.includes('?') ? '&' : '?' }filter=${ joined }`;
+      }
+    }
+
+    // End Pagination
+
     return url;
   },
 
diff --git a/storybook/stories/InputFieldsAdvancedExample.vue b/storybook/stories/InputFieldsAdvancedExample.vue
index 168ed517a9..a25c655717 100644
--- a/storybook/stories/InputFieldsAdvancedExample.vue
+++ b/storybook/stories/InputFieldsAdvancedExample.vue
@@ -6,7 +6,7 @@ import Tolerations from '@shell/components/form/Tolerations.vue';
 import Upgrading from '@shell/edit/workload/Upgrading.vue';
 import Security from '@shell/components/form/Security.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 export default {
   components: {
diff --git a/storybook/stories/InputFieldsExample.vue b/storybook/stories/InputFieldsExample.vue
index 281ebbb7be..3147635d5c 100644
--- a/storybook/stories/InputFieldsExample.vue
+++ b/storybook/stories/InputFieldsExample.vue
@@ -1,7 +1,7 @@
 <script>
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import UnitInput from '@shell/components/form/UnitInput.vue';
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
 import InputWithSelect from '@shell/components/form/InputWithSelect.vue';
 import Select from '@shell/components/form/Select.vue';
 

From 5adaed0284920950a15e329fb97e00526016774d Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 1 Feb 2024 16:32:17 +0000
Subject: [PATCH 02/71] Changes following review

---
 shell/chart/rancher-backup/index.vue                |  1 -
 .../form/LabeledSelect/labeled-select-pagination.ts | 13 +++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/shell/chart/rancher-backup/index.vue b/shell/chart/rancher-backup/index.vue
index b3eb031655..e584ed48bf 100644
--- a/shell/chart/rancher-backup/index.vue
+++ b/shell/chart/rancher-backup/index.vue
@@ -117,7 +117,6 @@ export default {
         this.value.s3.enabled = true;
         break;
       default:
-
         this.value.persistence.enabled = false;
         this.value.s3.enabled = false;
         break;
diff --git a/shell/components/form/LabeledSelect/labeled-select-pagination.ts b/shell/components/form/LabeledSelect/labeled-select-pagination.ts
index 2da972d201..99c6898f78 100644
--- a/shell/components/form/LabeledSelect/labeled-select-pagination.ts
+++ b/shell/components/form/LabeledSelect/labeled-select-pagination.ts
@@ -57,17 +57,18 @@ export default Vue.extend<Data, Methods, any, Props>({
 
   data(): Data {
     return {
+      // Internal
       currentPage: 1,
       search:      '',
       pageSize:    10,
-
-      page:         [],
-      pages:        0,
-      totalResults: 0,
-
-      paginating: false,
+      pages:       0,
 
       debouncedRequestPagination: debounce(this.requestPagination, 700),
+
+      // External
+      page:         [],
+      totalResults: 0,
+      paginating:   false,
     };
   },
 

From eace9d62c3dc6e9b021f9ceefa0a0fc80b762edf Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Fri, 5 Apr 2024 15:05:09 +0100
Subject: [PATCH 03/71] Update Node list to support server-side pagination -
 Setup pagination headers for the node type - Define a pattern for fetching
 custom list secondary resources - Major improvements to the way pagination
 settings are defined and created - Lots of docs improvements - Handle calling
 fetch again once fetch is in progress (nuxt caches running request) -
 Validate filter fields (not all are supported by the vai cache - General
 pagination fixes

---
 shell/components/ResourceList/index.vue       |   2 +-
 shell/components/SortableTable/index.vue      |  15 -
 shell/config/product/explorer.js              |  64 ++-
 shell/config/table-headers.js                 |   2 +-
 shell/list/node.vue                           | 291 +++++++++----
 shell/mixins/fetch.client.js                  |  18 +-
 shell/mixins/resource-fetch-api-pagination.js |  86 ++--
 shell/mixins/resource-fetch.js                |  14 +-
 shell/models/cluster/node.js                  |   4 +
 shell/plugins/dashboard-store/actions.js      |  26 +-
 shell/plugins/dashboard-store/getters.js      |  18 +-
 shell/plugins/steve/__tests__/getters.spec.ts |   2 +-
 .../steve/accept-or-reject-socket-message.ts  |   3 +-
 shell/plugins/steve/getters.js                |   6 +-
 .../projectAndNamespaceFiltering.utils.ts     |   6 +-
 shell/plugins/steve/steve-pagination-utils.ts | 133 ++++--
 shell/types/store/dashboard-store.types.ts    | 174 +-------
 shell/types/store/pagination.types.ts         | 403 ++++++++++++++++++
 .../store/{type-map.d.ts => type-map.ts}      |  15 +
 shell/utils/array.ts                          |  28 +-
 shell/utils/pagination-utils.ts               |  20 +-
 21 files changed, 956 insertions(+), 374 deletions(-)
 create mode 100644 shell/types/store/pagination.types.ts
 rename shell/types/store/{type-map.d.ts => type-map.ts} (50%)

diff --git a/shell/components/ResourceList/index.vue b/shell/components/ResourceList/index.vue
index 18217979b4..7f8a022f5c 100644
--- a/shell/components/ResourceList/index.vue
+++ b/shell/components/ResourceList/index.vue
@@ -172,7 +172,7 @@ export default {
      * This covers case 1
      */
     pagination(neu, old) {
-      if (neu && !this.componentWillFetch && this.paginationEqual(neu, old)) {
+      if (neu && !this.componentWillFetch && !this.paginationEqual(neu, old)) {
         this.$fetchType(this.resource);
       }
     },
diff --git a/shell/components/SortableTable/index.vue b/shell/components/SortableTable/index.vue
index 498aa0e863..58315f034c 100644
--- a/shell/components/SortableTable/index.vue
+++ b/shell/components/SortableTable/index.vue
@@ -29,21 +29,6 @@ import { getParent } from '@shell/utils/dom';
 // NOTE: This is populated by a plugin (formatters.js) to avoid issues with plugins
 export const FORMATTERS = {};
 
-export const COLUMN_BREAKPOINTS = {
-  /**
-   * Only show column if at tablet width or wider
-   */
-  TABLET:  'tablet',
-  /**
-   * Only show column if at laptop width or wider
-   */
-  LAPTOP:  'laptop',
-  /**
-   * Only show column if at desktop width or wider
-   */
-  DESKTOP: 'desktop'
-};
-
 // @TODO:
 // Fixed header/scrolling
 
diff --git a/shell/config/product/explorer.js b/shell/config/product/explorer.js
index e0fb117825..2a2aeed23f 100644
--- a/shell/config/product/explorer.js
+++ b/shell/config/product/explorer.js
@@ -19,7 +19,7 @@ import {
   STORAGE_CLASS_PROVISIONER, PERSISTENT_VOLUME_SOURCE,
   HPA_REFERENCE, MIN_REPLICA, MAX_REPLICA, CURRENT_REPLICA,
   ACCESS_KEY, DESCRIPTION, EXPIRES, EXPIRY_STATE, SUB_TYPE, AGE_NORMAN, SCOPE_NORMAN, PERSISTENT_VOLUME_CLAIM, RECLAIM_POLICY, PV_REASON, WORKLOAD_HEALTH_SCALE, POD_RESTARTS,
-  DURATION, MESSAGE, REASON, LAST_SEEN_TIME, EVENT_TYPE, OBJECT, ROLE, SECRET_DATA
+  DURATION, MESSAGE, REASON, LAST_SEEN_TIME, EVENT_TYPE, OBJECT, ROLE, ROLES, VERSION, INTERNAL_EXTERNAL_IP, KUBE_NODE_OS, CPU, RAM, PODS, SECRET_DATA
 } from '@shell/config/table-headers';
 
 import { DSL } from '@shell/store/type-map';
@@ -27,6 +27,8 @@ import {
   STEVE_AGE_COL, STEVE_LIST_GROUPS, STEVE_NAMESPACE_COL, STEVE_NAME_COL, STEVE_STATE_COL
 } from '@shell/config/pagination-table-headers';
 
+import { COLUMN_BREAKPOINTS } from '@shell/types/store/type-map';
+
 export const NAME = 'explorer';
 
 export function init(store) {
@@ -267,6 +269,66 @@ export function init(store) {
       STEVE_AGE_COL
     ]);
 
+  headers(NODE,
+    [
+      STATE,
+      NAME,
+      ROLES,
+      VERSION,
+      INTERNAL_EXTERNAL_IP,
+      {
+        ...KUBE_NODE_OS,
+        breakpoint: COLUMN_BREAKPOINTS.LAPTOP,
+        getValue:   (row) => row.status?.nodeInfo?.operatingSystem
+      },
+      {
+        ...CPU,
+        breakpoint: COLUMN_BREAKPOINTS.LAPTOP,
+        getValue:   (row) => row.cpuUsagePercentage
+      }, {
+        ...RAM,
+        breakpoint: COLUMN_BREAKPOINTS.LAPTOP,
+        getValue:   (row) => row.ramUsagePercentage
+      },
+      AGE
+    ],
+    [
+      STEVE_STATE_COL,
+      STEVE_NAME_COL,
+      {
+        ...ROLES,
+        sort:   false,
+        search: false
+      },
+      {
+        ...VERSION,
+        value:    'status.nodeInfo.kubeletVersion',
+        getValue: undefined,
+        sort:     ['status.nodeInfo.kubeletVersion'],
+        search:   'status.nodeInfo.kubeletVersion'
+      }, {
+        ...INTERNAL_EXTERNAL_IP,
+        sort:   false,
+        search: false,
+      }, {
+        ...KUBE_NODE_OS,
+        breakpoint: COLUMN_BREAKPOINTS.LAPTOP,
+        getValue:   undefined
+      }, {
+        ...CPU,
+        breakpoint: COLUMN_BREAKPOINTS.LAPTOP,
+        getValue:   (row) => row.cpuUsagePercentage,
+        sort:       false,
+        search:     false,
+      }, {
+        ...RAM,
+        breakpoint: COLUMN_BREAKPOINTS.LAPTOP,
+        sort:       false,
+        search:     false,
+      },
+      STEVE_AGE_COL
+    ]);
+
   headers(MANAGEMENT.PSA, [STATE, NAME_COL, {
     ...DESCRIPTION,
     width: undefined
diff --git a/shell/config/table-headers.js b/shell/config/table-headers.js
index 7aa3531abc..98df8540b1 100644
--- a/shell/config/table-headers.js
+++ b/shell/config/table-headers.js
@@ -1,6 +1,6 @@
 import { CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
 import { NODE as NODE_TYPE } from '@shell/config/types';
-import { COLUMN_BREAKPOINTS } from '@shell/components/SortableTable/index.vue';
+import { COLUMN_BREAKPOINTS } from '@shell/types/store/type-map';
 
 // Note: 'id' is always the last sort, so you don't have to specify it here.
 
diff --git a/shell/list/node.vue b/shell/list/node.vue
index 84c25fd388..da8eaf67a7 100644
--- a/shell/list/node.vue
+++ b/shell/list/node.vue
@@ -1,21 +1,28 @@
-<script>
-import ResourceTable from '@shell/components/ResourceTable';
-import Tag from '@shell/components/Tag';
+<script lang="ts">
+import ResourceTable from '@shell/components/ResourceTable.vue';
+import Tag from '@shell/components/Tag.vue';
 import { Banner } from '@components/Banner';
-import {
-  STATE, NAME, ROLES, VERSION, INTERNAL_EXTERNAL_IP, CPU, RAM, PODS, AGE, KUBE_NODE_OS
-} from '@shell/config/table-headers';
+import { PODS } from '@shell/config/table-headers';
 import metricPoller from '@shell/mixins/metric-poller';
 
+import { CAPI as CAPI_ANNOTATIONS } from '@shell/config/labels-annotations.js';
+
+import { defineComponent } from 'vue';
+import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
+import { PaginationArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+
 import {
   CAPI,
   MANAGEMENT, METRIC, NODE, NORMAN, POD
 } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
 import { GROUP_RESOURCES, mapPref } from '@shell/store/prefs';
-import { COLUMN_BREAKPOINTS } from '@shell/components/SortableTable/index.vue';
+import { COLUMN_BREAKPOINTS } from '~/shell/types/store/type-map';
+
 import ResourceFetch from '@shell/mixins/resource-fetch';
-export default {
+import { mapGetters } from 'vuex';
+
+export default defineComponent({
   name:       'ListNode',
   components: {
     ResourceTable,
@@ -36,94 +43,92 @@ export default {
     useQueryParamsForSimpleFiltering: {
       type:    Boolean,
       default: false
+    },
+
+    listComponent: {
+      type:    Boolean,
+      default: false
     }
   },
 
   async fetch() {
     this.$initializeFetchData(this.resource);
 
-    const hash = { kubeNodes: this.$fetchType(this.resource) };
-
-    this.canViewPods = this.$store.getters[`cluster/schemaFor`](POD);
-
-    if (this.$store.getters[`management/schemaFor`](MANAGEMENT.NODE)) {
-      // Required for Drain/Cordon action
-      hash.normanNodes = this.$fetchType(NORMAN.NODE, [], 'rancher');
-    }
-
-    if (this.$store.getters[`rancher/schemaFor`](NORMAN.NODE)) {
-      hash.mgmtNodes = this.$fetchType(MANAGEMENT.NODE, [], 'management');
-    }
-
-    if (this.$store.getters[`management/schemaFor`](CAPI.MACHINE)) {
-      // Required for ssh / download key actions
-      hash.machines = this.$fetchType(CAPI.MACHINE, [], 'management');
-    }
-
-    if (this.canViewPods) {
-      // Used for running pods metrics - we don't need to block on this to show the list of nodes
-      this.$fetchType(POD);
-    }
-
-    await allHash(hash);
+    await allHash({
+      kubeNodes: this.$fetchType(this.resource),
+      ...this.fetchSecondaryResources(),
+    });
   },
 
   data() {
-    return { canViewPods: false };
+    return {
+      // Pods required for `Pods` column's running pods metrics
+      // podConsumedUsage = podConsumed / podConsumedUsage. podConsumed --> pods. allPods.filter((pod) => pod.spec.nodeName === this.name)
+      canViewPods:        !!this.$store.getters[`cluster/schemaFor`](POD),
+      // Norman node required for Drain/Cordon/Uncordon action
+      canViewNormanNodes: !!this.$store.getters[`rancher/schemaFor`](NORMAN.NODE),
+      // Mgmt Node required to find Norman node
+      canViewMgmtNodes:   !!this.$store.getters[`management/schemaFor`](MANAGEMENT.NODE),
+      // Required for ssh / download key actions
+      canViewMachines:    !!this.$store.getters[`management/schemaFor`](CAPI.MACHINE),
+      // Required for CPU and RAM columns
+      canViewNodeMetrics: !!this.$store.getters['cluster/schemaFor'](METRIC.NODE),
+    };
   },
 
   beforeDestroy() {
     // Stop watching pods, nodes and node metrics
-    this.$store.dispatch('cluster/forgetType', POD);
+    if (this.canViewPods) {
+      this.$store.dispatch('cluster/forgetType', POD);
+    }
+
     this.$store.dispatch('cluster/forgetType', NODE);
     this.$store.dispatch('cluster/forgetType', METRIC.NODE);
   },
 
   computed: {
+    ...mapGetters(['currentCluster']),
     hasWindowsNodes() {
-      return (this.rows || []).some((node) => node.status.nodeInfo.operatingSystem === 'windows');
+      // Note if server side pagination is used this is only applicable to the current page
+      return (this.rows || []).some((node: any) => node.status.nodeInfo.operatingSystem === 'windows');
     },
 
     tableGroup: mapPref(GROUP_RESOURCES),
 
-    parsedRows() {
-      this.rows.forEach((row) => {
-        row.displayTaintsAndLabels = (row.spec.taints && row.spec.taints.length) || !!row.customLabelCount;
-      });
-
-      return this.rows;
-    },
-
     headers() {
-      const headers = [
-        STATE,
-        NAME,
-        ROLES,
-        VERSION,
-        INTERNAL_EXTERNAL_IP,
-        {
-          ...KUBE_NODE_OS,
-          breakpoint: COLUMN_BREAKPOINTS.LAPTOP,
-          getValue:   (row) => row.status?.nodeInfo?.operatingSystem
-        },
-        {
-          ...CPU,
-          breakpoint: COLUMN_BREAKPOINTS.LAPTOP,
-          getValue:   (row) => row.cpuUsagePercentage
-        }, {
-          ...RAM,
-          breakpoint: COLUMN_BREAKPOINTS.LAPTOP,
-          getValue:   (row) => row.ramUsagePercentage
-        }];
+      // This is all about adding the pods column... if the user can see pods
+
+      if (this.canPaginate) {
+        const paginationHeaders = [...this.$store.getters['type-map/headersFor'](this.schema, true)];
+
+        if (paginationHeaders) {
+          if (this.canViewPods) {
+            paginationHeaders.splice(paginationHeaders.length - 1, 0, {
+              ...PODS,
+              breakpoint: COLUMN_BREAKPOINTS.DESKTOP,
+              sort:       false,
+              search:     false,
+              getValue:   (row: any) => row.podConsumedUsage
+            });
+          }
+
+          return paginationHeaders;
+        } else {
+          console.warn('Nodes list expects pagination headers but none found'); // eslint-disable-line no-console
+
+          return [];
+        }
+      }
+
+      const headers = [...this.$store.getters['type-map/headersFor'](this.schema, false)];
 
       if (this.canViewPods) {
-        headers.push({
+        headers.splice(headers.length - 1, 0, {
           ...PODS,
           breakpoint: COLUMN_BREAKPOINTS.DESKTOP,
-          getValue:   (row) => row.podConsumedUsage
+          getValue:   (row: any) => row.podConsumedUsage
         });
       }
-      headers.push(AGE);
 
       return headers;
     },
@@ -131,24 +136,149 @@ export default {
 
   methods: {
     async loadMetrics() {
-      const schema = this.$store.getters['cluster/schemaFor'](METRIC.NODE);
-
-      if (schema) {
-        await this.$store.dispatch('cluster/findAll', {
-          type: METRIC.NODE,
-          opt:  { force: true }
-        });
-
-        this.$forceUpdate();
+      if (!this.canViewNodeMetrics || !this.rows.length) {
+        return;
       }
+
+      const opt: ActionFindPageArgs = {
+        force:      true,
+        pagination: new PaginationArgs({
+          page:    -1,
+          filters: new PaginationParamFilter({
+            fields: this.rows.map((r: any) => new PaginationFilterField({
+              field: 'metadata.name',
+              value: r.id
+            }))
+          })
+        })
+      };
+
+      await this.$store.dispatch('cluster/findPage', {
+        type: METRIC.NODE,
+        opt
+      });
+
+      this.$forceUpdate();
     },
 
-    toggleLabels(row) {
+    toggleLabels(row: any) {
       this.$set(row, 'displayLabels', !row.displayLabels);
     },
-  }
 
-};
+    fetchSecondaryResources(): { [key: string]: Promise<any>} {
+      if (this.canPaginate) {
+        return {};
+      }
+
+      const hash: { [key: string]: Promise<any>} = {};
+
+      if (!this.canPaginate) {
+        if (this.canViewMgmtNodes) {
+          hash.mgmtNodes = this.$fetchType(MANAGEMENT.NODE, [], 'management');
+        }
+
+        if (this.canViewNormanNodes) {
+          hash.normanNodes = this.$fetchType(NORMAN.NODE, [], 'rancher');
+        }
+
+        if (this.canViewMachines) {
+          hash.machines = this.$fetchType(CAPI.MACHINE, [], 'management');
+        }
+
+        if (this.canViewPods) {
+          // No need to block on this
+          this.$fetchType(POD);
+        }
+      }
+
+      return hash;
+    },
+
+    /**
+     * Nodes columns need other resources in order to show data in some columns
+     *
+     * In the paginated world we want to resrict the fetch of those resources to only the one's we need
+     *
+     * So when we have a page.... use those entries as filters when fetching the other resources
+     */
+    async fetchPageSecondaryResources(force = false) {
+      if (!this.rows?.length) {
+        return;
+      }
+
+      if (this.canViewMgmtNodes && this.canViewNormanNodes) {
+        // We only fetch mgmt node to get norman node. We only fetch node to get node actions
+        // See https://github.com/rancher/dashboard/issues/10743
+        const opt: ActionFindPageArgs = {
+          force,
+          pagination: new PaginationArgs({
+            page:    -1,
+            filters: PaginationParamFilter.createMultipleFields(this.rows.map((r: any) => new PaginationFilterField({
+              field: 'status.nodeName',
+              value: r.id
+            }))),
+          })
+        };
+
+        this.$store.dispatch(`management/findPage`, { type: MANAGEMENT.NODE, opt })
+          .then(() => {
+            this.$store.dispatch(`rancher/findAll`, { type: NORMAN.NODE, opt: { force } });
+          });
+      }
+
+      if (this.canViewMachines) {
+        const namespace = this.currentCluster.provClusterId?.split('/')[0];
+
+        if (namespace) {
+          const opt: ActionFindPageArgs = {
+            force,
+            namespaced: namespace,
+            pagination: new PaginationArgs({
+              page:    -1,
+              filters: PaginationParamFilter.createMultipleFields(
+                this.rows.reduce((res: PaginationFilterField[], r: any ) => {
+                  const name = r.metadata?.annotations?.[CAPI_ANNOTATIONS.MACHINE_NAME];
+
+                  if (name) {
+                    res.push(new PaginationFilterField({
+                      field: 'metadata.name',
+                      value: name,
+                    }));
+                  }
+
+                  return res;
+                }, [])
+              )
+            })
+          };
+
+          this.$store.dispatch(`management/findPage`, { type: CAPI.MACHINE, opt });
+        }
+      }
+
+      if (this.canViewPods) {
+        // Note - fetching pods for current page could be a LOT still (probably max of 3k - 300 pods per node x 100 nodes in a page)
+        const opt: ActionFindPageArgs = {
+          force,
+          pagination: new PaginationArgs({
+            page:    -1,
+            filters: PaginationParamFilter.createMultipleFields(
+              this.rows.map((r: any) => new PaginationFilterField({
+                field: 'spec.nodeName',
+                value: r.id,
+              }))
+            )
+          })
+        };
+
+        this.$store.dispatch(`cluster/findPage`, { type: POD, opt });
+      }
+
+      // Fetch metrics given the current page
+      this.loadMetrics();
+    },
+  },
+});
 </script>
 
 <template>
@@ -162,12 +292,15 @@ export default {
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
-      :rows="parsedRows"
+      :rows="rows"
       :sub-rows="true"
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
       data-testid="cluster-node-list"
+      :external-pagination-enabled="canPaginate"
+      :external-pagination-result="paginationResult"
+      @pagination-changed="paginationChanged"
       v-on="$listeners"
     >
       <template #sub-row="{fullColspan, row, onRowMouseEnter, onRowMouseLeave}">
diff --git a/shell/mixins/fetch.client.js b/shell/mixins/fetch.client.js
index febb4349dd..c35a23a080 100644
--- a/shell/mixins/fetch.client.js
+++ b/shell/mixins/fetch.client.js
@@ -35,15 +35,19 @@ function beforeMount() {
   }
 }
 
-function $fetch() {
-  if (!this._fetchPromise) {
-    this._fetchPromise = $_fetch.call(this)
-      .then(() => {
-        delete this._fetchPromise;
-      });
+function $fetch(cached = true) {
+  if (cached) {
+    if (!this._fetchPromise) {
+      this._fetchPromise = $_fetch.call(this)
+        .then(() => {
+          delete this._fetchPromise;
+        });
+    }
+
+    return this._fetchPromise;
   }
 
-  return this._fetchPromise;
+  return $_fetch.call(this);
 }
 
 async function $_fetch() { // eslint-disable-line camelcase
diff --git a/shell/mixins/resource-fetch-api-pagination.js b/shell/mixins/resource-fetch-api-pagination.js
index a72490ffe9..41f7439520 100644
--- a/shell/mixins/resource-fetch-api-pagination.js
+++ b/shell/mixins/resource-fetch-api-pagination.js
@@ -1,12 +1,12 @@
 import { NAMESPACE_FILTER_NAMESPACED_YES, NAMESPACE_FILTER_NAMESPACED_NO, NAMESPACE_FILTER_ALL } from '@shell/utils/namespace-filter';
+import { NAMESPACE } from '@shell/config/types';
+import { ALL_NAMESPACES } from '@shell/store/prefs';
 import { mapGetters } from 'vuex';
 import { ResourceListComponentName } from '../components/ResourceList/resource-list.config';
 import paginationUtils from '@shell/utils/pagination-utils';
 import debounce from 'lodash/debounce';
-import { OptPaginationFilter, OptPaginationFilterField } from '@shell/types/store/dashboard-store.types';
+import { PaginationParamFilter, PaginationFilterField, PaginationArgs, StorePaginationResult } from '@shell/types/store/pagination.types';
 import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
-import { ALL_NAMESPACES } from '@shell/store/prefs';
-import { NAMESPACE } from '@shell/config/types';
 
 /**
  * Companion mixin used with `resource-fetch` for `ResourceList` to determine if the user needs to filter the list by a single namespace
@@ -34,18 +34,22 @@ export default {
   },
 
   methods: {
+    /**
+     * @param {PaginationArgs} pagination
+     */
     setPagination(pagination) {
-      this.pPagination = pagination;
+      if (pagination) {
+        this.pPagination = pagination;
+      }
     },
 
     paginationChanged(event) {
-      const searchFilters = event.filter.searchQuery ? event.filter.searchFields.map((field) => new OptPaginationFilterField({
+      const searchFilters = event.filter.searchQuery ? event.filter.searchFields.map((field) => new PaginationFilterField({
         field,
         value: event.filter.searchQuery,
       })) : [];
 
-      this.debouncedSetPagination({
-        ...this.pPagination,
+      const pagination = new PaginationArgs({
         page:     event.page,
         pageSize: event.perPage,
         sort:     event.sort?.map((field) => ({
@@ -53,11 +57,13 @@ export default {
           asc: !event.descending
         })),
         projectsOrNamespaces: this.requestFilters.projectsOrNamespaces,
-        filter:               [
-          new OptPaginationFilter({ fields: searchFilters }),
+        filters:              [
+          new PaginationParamFilter({ fields: searchFilters }),
           ...this.requestFilters.filters, // Apply the additional filters. these aren't from the user but from ns filtering
         ]
       });
+
+      this.debouncedSetPagination(pagination);
     },
 
     namespaceFilterChanged(neu) {
@@ -81,21 +87,26 @@ export default {
       this.requestFilters.projectsOrNamespaces = projectsOrNamespaces;
 
       // Kick off a change
-      this.debouncedSetPagination({ ...this.pPagination });
+      if (this.pPagination) {
+        this.debouncedSetPagination({ ...this.pPagination });
+      }
     },
 
+    /**
+     * @param {PaginationArgs} neu
+     * @param {PaginationArgs} old
+     */
     paginationEqual(neu, old) {
       if (!neu.page) {
-        // Not valid, don't bother
+        // Not valid, count as not equal
         return false;
       }
 
       if (paginationUtils.paginationEqual(neu, old)) {
-        // Same, nae bother
-        return false;
+        return true;
       }
 
-      return true;
+      return false;
     }
   },
 
@@ -120,14 +131,14 @@ export default {
      * 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 existing earlier if mixin is from parent ResourceList and leave work for CustomList mixins
+     * - In this scenario, reduce churn by exiting earlier if mixin is from parent ResourceList and leave work for CustomList mixins
      */
     isResourceList() {
       return !!this.hasListComponent;
     },
 
     /**
-     * Is Pagination supported and ready for this list?
+     * Is Pagination supported and has the table supplied pagination settings from the table?
      */
     pagination() {
       if (this.isResourceList) {
@@ -146,7 +157,7 @@ export default {
       }
 
       return this.resource && paginationUtils.isEnabled({ rootGetters: this.$store.getters }, {
-        store:    this.currentProduct?.inStore,
+        store:    this.currentProduct.inStore,
         resource: { id: this.resource.id || this.resource }
       });
     },
@@ -231,25 +242,48 @@ export default {
       }
     },
 
+    /**
+     * 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
+     */
     async pagination(neu, old) {
-      if (this.isResourceList) {
-        return;
-      }
-
-      // When a pagination is required and the user changes page / sort / filter, kick off a new set of API requests
-      //
       // ResourceList has two modes
       // 1) ResourceList component handles API request to fetch resources
       // 2) Custom list component handles API request to fetch resources
       //
-      // This covers case 2
-      if (neu && this.$options.name !== ResourceListComponentName && !!this.$fetch && this.paginationEqual(neu, old)) {
-        await this.$fetch();
+      // This covers case 2, so ignore case 1
+      if (this.isResourceList) {
+        return;
+      }
 
+      if (neu && this.$options.name !== ResourceListComponentName && !!this.$fetch && !this.paginationEqual(neu, old)) {
+        await this.$fetch(false);
         // Ensure any live/delayed columns get updated
         this.forceUpdateLiveAndDelayed = new Date().getTime();
       }
     },
 
+    /**
+     * If the pagination result has changed fetch secondary resources
+     *
+     * Lists should implement fetchPageSecondaryResources to fetch them
+     *
+     * @param {StorePaginationResult} neu
+     * @param {StorePaginationResult} old
+     */
+    async paginationResult(neu, old) {
+      if (!this.fetchPageSecondaryResources || !neu ) { // || neu.timestamp === old?.timestamp
+        return;
+      }
+
+      if (neu.timestamp === old?.timestamp) {
+        // This occurrs when the user returns to the page... and pagination hasn't actually changed
+        return;
+      }
+
+      await this.fetchPageSecondaryResources();
+    }
   },
 };
diff --git a/shell/mixins/resource-fetch.js b/shell/mixins/resource-fetch.js
index fac539d9c1..848b4f6b28 100644
--- a/shell/mixins/resource-fetch.js
+++ b/shell/mixins/resource-fetch.js
@@ -46,6 +46,7 @@ export default {
       paginating:                 null,
     };
   },
+
   beforeDestroy() {
     // make sure this only runs once, for the initialized instance
     if (this.init) {
@@ -77,14 +78,19 @@ export default {
       return this.rows.length ? false : this.$fetchState.pending;
     },
   },
+
   watch: {
-    refreshFlag(neu) {
+    async refreshFlag(neu) {
       // this is where the data assignment will trigger the update of the list view...
       if (this.init && neu) {
-        this.$fetch();
+        await this.$fetch();
+        if (this.canPaginate && this.fetchPageSecondaryResources) {
+          this.fetchPageSecondaryResources(true);
+        }
       }
     }
   },
+
   methods: {
     // this defines all the flags needed for the mechanism
     // to work. They should be defined based on the main list view
@@ -127,7 +133,6 @@ export default {
           // when pagination is enabled we want to wait for the correct set of initial pagination settings to make the call
           return;
         }
-
         const opt = {
           hasManualRefresh: this.hasManualRefresh,
           pagination:       { ...this.pagination },
@@ -141,7 +146,8 @@ export default {
         return this.$store.dispatch(`${ currStore }/findPage`, {
           type,
           opt
-        }).finally(() => Vue.set(that, 'paginating', false));
+        })
+          .finally(() => Vue.set(that, 'paginating', false));
       }
 
       let incremental = 0;
diff --git a/shell/models/cluster/node.js b/shell/models/cluster/node.js
index 2d942e980d..da4f364f6f 100644
--- a/shell/models/cluster/node.js
+++ b/shell/models/cluster/node.js
@@ -450,6 +450,10 @@ export default class ClusterNode extends SteveModel {
   get provider() {
     return this.$rootGetters['currentCluster'].provisioner.toLowerCase();
   }
+
+  get displayTaintsAndLabels() {
+    return !!this.spec.taints?.length || !!this.customLabelCount;
+  }
 }
 
 function calculatePercentage(allocatable, capacity) {
diff --git a/shell/plugins/dashboard-store/actions.js b/shell/plugins/dashboard-store/actions.js
index 733191381c..6380eebc8a 100644
--- a/shell/plugins/dashboard-store/actions.js
+++ b/shell/plugins/dashboard-store/actions.js
@@ -123,7 +123,7 @@ export default {
           }
         });
       } else {
-      // We have everything!
+        // We have everything!
         if (opt.hasManualRefresh) {
           dispatch('resource-fetch/updateManualRefreshIsLoading', false, { root: true });
         }
@@ -145,7 +145,7 @@ export default {
   /**
    *
    * @param {*} ctx
-   * @param { {type: string, opt: FindAllOpt} } opt
+   * @param { {type: string, opt: ActionFindPageArgs} } opt
    */
   async findAll(ctx, { type, opt }) {
     const {
@@ -164,8 +164,7 @@ export default {
       !opt.force &&
       (
         getters['haveAll'](type) ||
-        getters['haveAllNamespace'](type, opt.namespaced) ||
-        (opt.pagination ? getters['havePaginatedPage'](type, opt.pagination) : false)
+        getters['haveAllNamespace'](type, opt.namespaced)
       )
     ) {
       if (opt.watch !== false ) {
@@ -323,8 +322,9 @@ export default {
           pagination: opt.pagination ? {
             request: opt.pagination,
             result:  {
-              count: out.count,
-              pages: out.pages
+              count:     out.count,
+              pages:     out.pages,
+              timestamp: new Date().getTime()
             }
           } : undefined,
         });
@@ -383,7 +383,7 @@ export default {
     }
 
     // No need to request the resources if we have them already
-    if (!opt.force && getters['havePaginatedPage'](type, opt.pagination)) {
+    if (!opt.force && getters['havePaginatedPage'](type, opt)) {
       return findAllGetter(getters, type, opt);
     }
 
@@ -412,10 +412,14 @@ export default {
       type,
       data:       out.data,
       pagination: opt.pagination ? {
-        request: opt.pagination,
-        result:  {
-          count: out.count,
-          pages: out.pages
+        request: {
+          namespace:  opt.namespaced,
+          pagination: opt.pagination
+        },
+        result: {
+          count:     out.count,
+          pages:     out.pages,
+          timestamp: new Date().getTime()
         }
       } : undefined,
     });
diff --git a/shell/plugins/dashboard-store/getters.js b/shell/plugins/dashboard-store/getters.js
index a2f2872656..a8ecd0b58f 100644
--- a/shell/plugins/dashboard-store/getters.js
+++ b/shell/plugins/dashboard-store/getters.js
@@ -39,7 +39,7 @@ export const urlFor = (state, getters) => (type, id, opt) => {
     url = `${ baseUrl }/${ url }`;
   }
 
-  url = getters.urlOptions(url, opt);
+  url = getters.urlOptions(url, opt, type);
 
   return url;
 };
@@ -298,16 +298,22 @@ export default {
     return false;
   },
 
-  havePaginatedPage: (state, getters) => (type, pagination) => {
-    if (!pagination) {
+  havePaginatedPage: (state, getters) => (type, opt) => {
+    if (!opt.pagination) {
       return false;
     }
 
     type = getters.normalizeType(type);
     const entry = state.types[type];
 
-    if ( entry ) {
-      return entry.havePage && paginationUtils.paginationEqual(entry.havePage.request, pagination);
+    if ( entry?.havePage ) {
+      const { namespace: aNamespace = undefined, pagination: aPagination } = entry.havePage.request;
+      const { namespace: bNamespace = undefined, pagination: bPagination } = {
+        namespace:  opt.namespaced,
+        pagination: opt.pagination
+      };
+
+      return entry.havePage && aNamespace === bNamespace && paginationUtils.paginationEqual(aPagination, bPagination);
     }
 
     return false;
@@ -346,7 +352,7 @@ export default {
 
   urlFor,
 
-  urlOptions: () => (url, opt) => {
+  urlOptions: () => (url, opt, type) => {
     return url;
   },
 
diff --git a/shell/plugins/steve/__tests__/getters.spec.ts b/shell/plugins/steve/__tests__/getters.spec.ts
index 96361915cf..11111d928f 100644
--- a/shell/plugins/steve/__tests__/getters.spec.ts
+++ b/shell/plugins/steve/__tests__/getters.spec.ts
@@ -20,7 +20,7 @@ describe('steve: getters:', () => {
         }
       },
       // this has its own tests so it just returns the input string
-      urlOptions: (url: string, opt: any) => {
+      urlOptions: (url: string, opt: any, type: string) => {
         if (opt.addParam) {
           url += '?param=true';
         }
diff --git a/shell/plugins/steve/accept-or-reject-socket-message.ts b/shell/plugins/steve/accept-or-reject-socket-message.ts
index d1f25966a4..65a1d0fd75 100644
--- a/shell/plugins/steve/accept-or-reject-socket-message.ts
+++ b/shell/plugins/steve/accept-or-reject-socket-message.ts
@@ -3,12 +3,11 @@ import pAndNFiltering from '@shell/plugins/steve/projectAndNamespaceFiltering.ut
 type TypeIsCached = { [type: string]: boolean }
 
 /**
- * There are scenarios where we can't subscribe to subsets of a resources
+ * There are scenarios where we can't subscribe to subsets of a resource type
  * - Multiple namespaces or projects
  * - Result of Pagination (a single page of resources that have been sorted / filtered)
  *
  * For those scenarios we subscribe to allll changes BUT ignore changes that are not applicable to that subset
- *
  */
 class AcceptOrRejectSocketMessage {
   typeIsNamespaced({ getters }: any, type: string): boolean {
diff --git a/shell/plugins/steve/getters.js b/shell/plugins/steve/getters.js
index df1c173eba..3ffb1e97e2 100644
--- a/shell/plugins/steve/getters.js
+++ b/shell/plugins/steve/getters.js
@@ -36,12 +36,12 @@ const GC_IGNORE_TYPES = {
 const steveRegEx = new RegExp('(/v1)|(\/k8s\/clusters\/[a-z0-9-]+\/v1)');
 
 export default {
-  urlOptions: () => (url, opt) => {
+  urlOptions: () => (url, opt, type) => {
     opt = opt || {};
     const parsedUrl = parse(url);
     const isSteve = steveRegEx.test(parsedUrl.path);
 
-    const stevePagination = stevePaginationUtils.checkAndCreateParam(opt);
+    const stevePagination = stevePaginationUtils.createParamsForPagination(type, opt);
 
     if (stevePagination) {
       url += `${ (url.includes('?') ? '&' : '?') + stevePagination }`;
@@ -323,7 +323,7 @@ export default {
    */
   optionsFor: () => (ctx, { schema, pagination, opts }) => {
     if (pagination) {
-      // As headers are hardcoded each list should specify the specific default sort option
+      // As headers are hardcoded each list should have specific default sort option
       // This avoids the sortable table adding both name and id (which when combined with group would result in 3 sort args, which isn't supported)
       const steveOpts = { listMandatorySort: [] };
 
diff --git a/shell/plugins/steve/projectAndNamespaceFiltering.utils.ts b/shell/plugins/steve/projectAndNamespaceFiltering.utils.ts
index 75079c1586..fce015e59b 100644
--- a/shell/plugins/steve/projectAndNamespaceFiltering.utils.ts
+++ b/shell/plugins/steve/projectAndNamespaceFiltering.utils.ts
@@ -1,6 +1,6 @@
 import { NAMESPACE_FILTER_NS_FULL_PREFIX, NAMESPACE_FILTER_P_FULL_PREFIX } from '@shell/utils/namespace-filter';
 import { getPerformanceSetting } from '@shell/utils/settings';
-import { FindAllOpt } from '@shell/types/store/dashboard-store.types';
+import { ActionFindAllArgs } from '@shell/types/store/dashboard-store.types';
 
 class ProjectAndNamespaceFiltering {
   static param = 'projectsornamespaces'
@@ -8,7 +8,7 @@ class ProjectAndNamespaceFiltering {
   /**
    * Does the request `opt` definition require resources are fetched from a specific set namespaces/projects?
    */
-  isApplicable(opt: FindAllOpt): boolean {
+  isApplicable(opt: ActionFindAllArgs): boolean {
     return Array.isArray(opt.namespaced);
   }
 
@@ -36,7 +36,7 @@ class ProjectAndNamespaceFiltering {
   /**
    * Check if `opt` requires resources from specific ns/projects, if so return the required query param (x=y)
    */
-  checkAndCreateParam(opt: FindAllOpt): string {
+  checkAndCreateParam(opt: ActionFindAllArgs): string {
     if (!this.isApplicable(opt)) {
       return '';
     }
diff --git a/shell/plugins/steve/steve-pagination-utils.ts b/shell/plugins/steve/steve-pagination-utils.ts
index f52445af4c..e932f5e5ee 100644
--- a/shell/plugins/steve/steve-pagination-utils.ts
+++ b/shell/plugins/steve/steve-pagination-utils.ts
@@ -1,12 +1,15 @@
-import { FindPageOpt, OptPaginationFilter, OptPaginationFilterField, OptPaginationProjectOrNamespace } from '@shell/types/store/dashboard-store.types';
+import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
+import { PaginationParam, PaginationFilterField, PaginationParamProjectOrNamespace, PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { NAMESPACE_FILTER_ALL_SYSTEM, NAMESPACE_FILTER_ALL_USER, NAMESPACE_FILTER_P_FULL_PREFIX } from '@shell/utils/namespace-filter';
 import Namespace from '@shell/models/namespace';
+import { uniq } from '@shell/utils/array';
+import { MANAGEMENT, POD } from 'config/types';
 
 class NamespaceProjectFilters {
   /**
    * User needs all resources.... except if there's some settings which should remove resources in specific circumstances
    */
-  protected handlePrefAndSettingFilter(allNamespaces: Namespace[], showDynamicRancherNamespaces: boolean, productHidesSystemNamespaces: boolean): OptPaginationFilter[] {
+  protected handlePrefAndSettingFilter(allNamespaces: Namespace[], showDynamicRancherNamespaces: boolean, productHidesSystemNamespaces: boolean): PaginationParamFilter[] {
     // These are AND'd together
     // Not ns 1 AND ns 2
     return allNamespaces.reduce((res, ns) => {
@@ -16,15 +19,13 @@ class NamespaceProjectFilters {
       const hideSystem = productHidesSystemNamespaces ? ns.isSystem : false;
 
       if (hideObscure || hideSystem) {
-        res.push(new OptPaginationFilter({
-          fields: [new OptPaginationFilterField({
-            field: 'metadata.namespace', value: ns.name, equals: false
-          })]
+        res.push(PaginationParamFilter.createSingleField({
+          field: 'metadata.namespace', value: ns.name, equals: false
         }));
       }
 
       return res;
-    }, [] as OptPaginationFilter[]);
+    }, [] as PaginationParamFilter[]);
   }
 
   /**
@@ -42,20 +43,16 @@ class NamespaceProjectFilters {
     if (isAllSystem) {
       // return resources in system ns 1 OR in system ns 2 ...
       // &filter=metadata.namespace=system ns 1,metadata.namespace=system ns 2
-      return [
-        new OptPaginationFilter({
-          fields: allSystem.map(
-            (ns) => new OptPaginationFilterField({ field: 'metadata.namespace', value: ns.name })
-          )
-        })
-      ];
+      return [PaginationParamFilter.createMultipleFields(
+        allSystem.map(
+          (ns) => new PaginationFilterField({ field: 'metadata.namespace', value: ns.name })
+        )
+      )];
     } else { // if isAllUser
       // return resources not in system ns 1 AND not in system ns 2 ...
       // &filter=metadata.namespace!=system ns 1&filter=metadata.namespace!=system ns 2
-      return allSystem.map((ns) => new OptPaginationFilter({
-        fields: [{
-          field: 'metadata.namespace', value: ns.name, equals: false
-        }]
+      return allSystem.map((ns) => PaginationParamFilter.createSingleField({
+        field: 'metadata.namespace', value: ns.name, equals: false
       }));
     }
   }
@@ -68,7 +65,9 @@ class NamespaceProjectFilters {
 
     // return resources in project 1 OR namespace 2
     // &projectsornamespaces=project 1,namespace 2
-    const projectsOrNamespaces = [new OptPaginationProjectOrNamespace({ fields: neu.map((selection) => new OptPaginationFilterField({ value: selection })) })];
+    const projectsOrNamespaces = [
+      new PaginationParamProjectOrNamespace({ projectOrNamespace: neu })
+    ];
 
     if (isLocalCluster) {
       // > As per `handleSystemOrUserFilter` above, we need to be careful of the local cluster where there's namespaces related to projects with the same id
@@ -82,10 +81,8 @@ class NamespaceProjectFilters {
         projectsOrNamespaces,
         filters: neu
           .filter((selection) => selection.startsWith(NAMESPACE_FILTER_P_FULL_PREFIX))
-          .map((projects) => new OptPaginationFilter({
-            fields: [{
-              field: 'metadata.namespace', value: projects.replace(NAMESPACE_FILTER_P_FULL_PREFIX, ''), equals: false
-            }]
+          .map((projects) => PaginationParamFilter.createSingleField({
+            field: 'metadata.namespace', value: projects.replace(NAMESPACE_FILTER_P_FULL_PREFIX, ''), equals: false
           }))
       };
     }
@@ -116,7 +113,7 @@ class StevePaginationUtils extends NamespaceProjectFilters {
      */
     isAllNamespaces: boolean,
     /**
-     * Weird things be happening if the target cluster is local / upstream
+     * Weird things be happening if the target cluster is local / upstream. Uses this to check what cluster we're in
      */
     isLocalCluster: boolean,
     /**
@@ -128,19 +125,19 @@ class StevePaginationUtils extends NamespaceProjectFilters {
      */
     productHidesSystemNamespaces: boolean,
   }): {
-    projectsOrNamespaces: OptPaginationFilter[],
-    filters: OptPaginationFilter[]
+    projectsOrNamespaces: PaginationParamProjectOrNamespace[],
+    filters: PaginationParamFilter[]
   } {
     // Hold up, why are we doing yet another way to convert the user's project / namespace filter to a set of something?
-    // - When doing this for local pagination `getActiveNamespaces` provides a full list of applicable namespaces. Lists then filter resource locally
+    // - When doing this for local pagination `getActiveNamespaces` provides a full list of applicable namespaces.
+    //   Lists then filter resource locally using those namespaces
     // - Pagination cannot take this approach of 'gimme all resources in these namespaces' primarily for the 'Only User Namespaces' case
     //   - User could have 2k namespaces. This would result in 2k+ namespaces added to the url (namespace=1,namespace=2,namespace=3, etc)
-    // - Instead we do // TODO: RC
+    // - Instead we do
     //   - All but not given settings - Gimme resources NOT in system or obscure namespaces
     //   - Only System Namespaces - Gimme resources in the system namespaces (which shouldn't be many namespaces)
     //   - Only User Namespaces - Gimme resources NOT in system namespaces
     //   - User selection - Gimme resources in specific Projects or Namespaces
-
     if (isAllNamespaces && (showDynamicRancherNamespaces && !productHidesSystemNamespaces)) {
       // No-op. Everything is returned
       return {
@@ -151,10 +148,10 @@ class StevePaginationUtils extends NamespaceProjectFilters {
 
     // used to return resources in / not in projects/namespaces (entries are checked in both types)
     // &projectsornamespaces=project 1,namespace 2
-    let projectsOrNamespaces: OptPaginationFilter[] = [];
+    let projectsOrNamespaces: PaginationParamProjectOrNamespace[] = [];
     // used to return resources in / not in namespaces
     // &filter=metadata.namespace=abc
-    let filters: OptPaginationFilter[] = [];
+    let filters: PaginationParamFilter[] = [];
 
     if (!showDynamicRancherNamespaces || productHidesSystemNamespaces) {
       // We need to hide dynamic namespaces ('c-', 'p-', etc) OR system namespaces
@@ -181,13 +178,13 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     };
   }
 
-  checkAndCreateParam(opt: FindPageOpt): string | undefined {
+  createParamsForPagination(type: string, opt: ActionFindPageArgs): string | undefined {
     if (!opt.pagination) {
       return;
     }
 
     const params: string[] = [];
-    const namespaceParam = this.convertPaginationFilter(opt.pagination.projectsOrNamespaces);
+    const namespaceParam = this.convertPaginationParams(type, opt.pagination.projectsOrNamespaces, true);
 
     if (namespaceParam) {
       params.push(namespaceParam);
@@ -201,8 +198,6 @@ class StevePaginationUtils extends NamespaceProjectFilters {
 
     if (opt.pagination.pageSize) {
       params.push(`pagesize=${ opt.pagination.pageSize }`);
-    } else {
-      throw new Error(`A pagination request is required but no 'page' property provided: ${ JSON.stringify(opt) }`);
     }
 
     if (opt.pagination.sort?.length) {
@@ -213,11 +208,11 @@ class StevePaginationUtils extends NamespaceProjectFilters {
       params.push(`sort=${ joined }`);
     }
 
-    if (opt.pagination.filter?.length) {
-      const andFilters = this.convertPaginationFilter(opt.pagination.filter);
+    if (opt.pagination.filters?.length) {
+      const filters = this.convertPaginationParams(type, opt.pagination.filters);
 
-      if (andFilters) {
-        params.push(andFilters);
+      if (filters) {
+        params.push(filters);
       }
     }
 
@@ -227,13 +222,62 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     return params.join('&');
   }
 
-  private convertPaginationFilter(filters: OptPaginationFilter[] = []): string {
-    return filters
+  private validateField(type: string, field?: string): boolean {
+    if (!field) {
+      return true; // no field, so not invalid
+    }
+
+    // At the moment generic pagination is supported... but soon it will only be via the vai cache
+    // The vai cache only supports filtering by specific fields
+    // This mechanism will warn developers that they're using an unsupported field
+    return !![
+      StevePaginationUtils.VALID_FIELDS[''],
+      StevePaginationUtils.VALID_FIELDS[type]
+    ].find((fields) => {
+      return fields?.find((f) => {
+        if (f.startsWith) {
+          if (field.startsWith(f.field)) {
+            return true;
+          }
+        } else {
+          return field === f.field;
+        }
+      });
+    });
+  }
+
+  /**
+   * Filtering with the vai cache only works with specific fields
+   */
+  static VALID_FIELDS: { [type: string]: { field: string, startsWith?: boolean }[]} = {
+    // global
+    '': [
+      { field: 'metadata.name' },
+      { field: 'metadata.namespace' },
+      { field: 'metadata.fields.', startsWith: true },
+      { field: 'metadata.state.name' },
+    ],
+    [POD]: [
+      { field: 'spec.containers.image' },
+      { field: 'spec.nodeName' },
+    ],
+    [MANAGEMENT.NODE]: [
+      { field: 'status.nodeName' }
+    ]
+  }
+
+  private convertPaginationParams(type: string, filters: PaginationParam[] = []): string {
+    const invalidFields: string[] = [];
+    const res = filters
       .filter((filter) => !!filter.fields.length)
       .map((filter) => {
         const joined = filter.fields
           .map((field) => {
             if (field.field) {
+              if (!this.validateField(type, field.field)) {
+                invalidFields.push(field.field);
+              }
+
               return `${ field.field }${ field.equals ? '=' : '!=' }${ field.value }`;
             }
 
@@ -243,6 +287,13 @@ class StevePaginationUtils extends NamespaceProjectFilters {
 
         return `${ filter.param }${ filter.equals ? '=' : '!=' }${ joined }`;
       }).join('&'); // This means AND
+
+    if (invalidFields.length) {
+      // When we switch over fully it will mature from `debug` to `warn`
+      console.debug(`Steve Pagination API Filter does not supper filtering by the following fields: ${ uniq(invalidFields).join(', ') }`);
+    }
+
+    return res;
   }
 }
 
diff --git a/shell/types/store/dashboard-store.types.ts b/shell/types/store/dashboard-store.types.ts
index 04fba3e9b3..603c31351a 100644
--- a/shell/types/store/dashboard-store.types.ts
+++ b/shell/types/store/dashboard-store.types.ts
@@ -1,169 +1,16 @@
-import { NAMESPACE_FILTER_NS_FULL_PREFIX, NAMESPACE_FILTER_P_FULL_PREFIX } from '@shell/utils/namespace-filter';
+import { PaginationArgs } from '@shell/types/store/pagination.types';
 
 /**
- * Sort the pagination result
- *
- * For more information see https://github.com/rancher/steve?tab=readme-ov-file#sort
+ * Properties on all findX actions
  */
-export interface OptPaginationSort {
-  /**
-   * Name of field within the object to sort by
-   */
-  field: string,
-  asc: boolean
-}
-
-/**
- * Filter the pagination result by these specific fields
- *
- * For example
- *
- * - metadata.name=test
- * - metadata.namespace!=system
- *
- * For more information see https://github.com/rancher/steve?tab=readme-ov-file#query-parameters
- */
-export class OptPaginationFilterField {
-  /**
-   * Name of field within the object to sort by
-   *
-   * This can be optional for some (projectsornamespaces)
-   */
-  field?: string;
-  value: string;
-  equals: boolean;
-
-  constructor(
-    { field, value, equals = true }:
-    { field?: string; value: string; equals?: boolean; }
-  ) {
-    this.field = field;
-    this.value = value;
-    this.equals = equals;
-  }
-}
-
-/**
- * Filter the pagination result by a number of fields
- *
- * OptPaginationFilter can be used in two ways
- *
- * 1) OR'd together
- *  - a=1 OR b=2 OR c=3
-    - Query Param - filter=a=1,b=2,c=3
- *  - Object structure - [
- *      [a,1],[b,2],[c,3]
- *    ]
- *
- * 2) AND'd together
-  *- a=1 AND b=2 AND c=3
- *  - Query Param - filter=a=1&filter=b=2&filter=c=3
- *  - Object structure - [
- *      [a,1]
- *    ],
- *    [
- *      [b,2]
- *    ],
- *    [
- *      [c,3]
- *    ]
- *
- * This structure should give enough flexibility to cover all uses
- *
- * For more information see https://github.com/rancher/steve?tab=readme-ov-file#filter
- */
-export class OptPaginationFilter {// implements OptPaginationFilter
-  /**
-   * Query Param. For example `filter` or `projectsornamespaces`
-   */
-  param: string;
-  /**
-   * should fields equal param.
-   *
-   * For example projectsornamexspaces=x or projectsornamexspaces!=x
-   */
-  equals: boolean;
-  /**
-   * Fields to filter by
-   *
-   * For example metadata.namespace=abc OR metadata.namespace=xyz
-   */
-  fields: OptPaginationFilterField[];
-
-  constructor(
-    { param = 'filter', equals = true, fields = [] }:
-    { param?: string; equals?: boolean; fields?: OptPaginationFilterField[];
-  }) {
-    this.param = param;
-    this.equals = equals;
-    this.fields = fields;
-  }
-}
-
-/**
- * This is a convenience class which works some magic, adds defaults and converts to the required OptPaginationFilter format
- *
- * For more information see https://github.com/rancher/steve?tab=readme-ov-file#projectsornamespaces
- */
-export class OptPaginationProjectOrNamespace extends OptPaginationFilter {
-  constructor(
-    { equals = true, fields = [] }:
-    { equals?: boolean; fields?: OptPaginationFilterField[]; }
-  ) {
-    const safeFields = fields.map((f) => {
-      return {
-        ...f,
-        value: f.value
-          .replace(NAMESPACE_FILTER_NS_FULL_PREFIX, '')
-          .replace(NAMESPACE_FILTER_P_FULL_PREFIX, '')
-      };
-    });
-
-    super({
-      param:  'projectsornamespaces',
-      equals,
-      fields: safeFields
-    });
-  }
-}
-
-/**
- * Pagination settings sent to actions and persisted to store
- */
-export interface OptPagination {
-  page: number,
-  pageSize: number,
-  sort: OptPaginationSort[],
-  filter: OptPaginationFilter[],
-  projectsOrNamespaces: OptPaginationFilter[],
-}
-
-/**
- * Object persisted to store
- */
-export interface StorePagination {
-  /**
-   * This set of pagination settings that created the result
-   */
-  request: OptPagination,
-  /**
-   * Information in the response outside of the actual resources returned
-   */
-  result: {
-    count: number,
-    pages: number
-  }
-}
-
-export type CoreFindOpt = {
-  type: string,
+export type ActionCoreFindArgs = {
   force?: boolean,
 }
 
 /**
  * Args used for findAll action
  */
-export interface FindAllOpt extends CoreFindOpt {
+export interface ActionFindAllArgs extends ActionCoreFindArgs {
   watch?: boolean,
   namespaced?: string[],
   incremental?: boolean,
@@ -174,7 +21,16 @@ export interface FindAllOpt extends CoreFindOpt {
 /**
  * Args used for findPage action
  */
-export interface FindPageOpt extends CoreFindOpt {
-  pagination: OptPagination,
+export interface ActionFindPageArgs extends ActionCoreFindArgs {
+  /**
+   * Set of pagination settings that creates the url.
+   *
+   * This is stored and can be used to compare in new request to determine if we already have this page
+   */
+  pagination: PaginationArgs,
+  /**
+   * The single namespace to filter by (used in url path, not part of pagination params)
+   */
+  namespaced?: string,
   hasManualRefresh?: boolean,
 }
diff --git a/shell/types/store/pagination.types.ts b/shell/types/store/pagination.types.ts
new file mode 100644
index 0000000000..cb2056baeb
--- /dev/null
+++ b/shell/types/store/pagination.types.ts
@@ -0,0 +1,403 @@
+import { NAMESPACE_FILTER_NS_FULL_PREFIX, NAMESPACE_FILTER_P_FULL_PREFIX } from '@shell/utils/namespace-filter';
+
+// Pagination Typing
+// These structures are designed to offer both convenience and flexibility based on a common structure and are
+// converted to the url param format as per https://github.com/rancher/steve.
+//
+// Simple use cases such as filtering by a single param should be easy to use.
+// More complex filtering (and'ing and 'or'ing multiple fields) is also supported.
+//
+// The top level object `PaginationArgs` contains all properties that will be converted to url params
+//
+// The two important / complex params are currently
+// - `filter` https://github.com/rancher/steve?tab=readme-ov-file#filter
+//   - represented by `PaginationParamFilter extends PaginationParam`
+//   - Examples
+//     - filter=metadata.name=123
+//     - filter=metadata.name=123,metadata.name=456 (name is 123 OR 456)
+//     - filter=metadata.name=123&filter=metadata.namespace=abc (name 123 AND namespace abc)
+// - `projectsornamespaces` https://github.com/rancher/steve?tab=readme-ov-file#projectsornamespaces
+//   - represented by `PaginationParamProjectOrNamespace extends PaginationParam`
+//   - Examples
+//     - projectsornamespaces=123
+//     - projectsornamespaces=123,456 (projects or namespaces that have id 123 OR 456)
+//
+//
+// Some of the types below are defined using classes instead of TS types/interfaces
+// - Avoid making complex json objects by using clearer instance constructors
+//   - Better documented
+//   - Defaults (a lot of the time convenience > utility)
+// - Adds some kind of typing in pure js docs
+//   - class ctor links to definition, instead of object just being a random json blob)
+//   - helps VSCode jsdoc highlighting
+
+/**
+ * Sort the pagination result
+ *
+ * For more information regarding the API see https://github.com/rancher/steve?tab=readme-ov-file#sort
+ */
+export interface PaginationSort {
+  /**
+   * Name of field within the object to sort by
+   */
+  field: string,
+  asc: boolean
+}
+
+/**
+ * Filter the pagination result by these specific fields
+ *
+ * For example
+ *
+ * - metadata.name=test
+ * - metadata.namespace!=system
+ *
+ * For more information regarding the API see https://github.com/rancher/steve?tab=readme-ov-file#query-parameters
+ */
+export class PaginationFilterField {
+  /**
+   * Name of field within the object to filter by for example the x of x=y
+   *
+   * This can be optional for some (projectsornamespaces)
+   */
+  field?: string;
+  /**
+   * Value of field within the object to filter by for example the y of x=y
+   */
+  value: string;
+  /**
+   * Equality field within the object to filter by for example the `=` or `!=` of x=y
+   */
+  equals: boolean;
+
+  constructor(
+    { field, value, equals = true }:
+    { field?: string; value: string; equals?: boolean; }
+  ) {
+    this.field = field;
+    this.value = value;
+    this.equals = equals;
+  }
+}
+
+/**
+ * Represents filter like params, for example
+ *
+ * - `filter=abc!=xyz&def=123`
+ * - `projectsornamespace!=p-3456`
+ *
+ * ### Params
+ * #### Filter
+ * - For more information regarding the API see https://github.com/rancher/steve?tab=readme-ov-file#filter
+ *
+ * #### Projects Or Namespace
+ * - For more information regarding the API see https://github.com/rancher/steve?tab=readme-ov-file#projectsornamespaces
+ *
+ * ### Combining Params
+ * Params can be combined in two logical ways
+ *
+ * 1) AND
+ *    - Used when you would like to filter by something like a=1 AND b=2 AND c=3
+ *    - To do this multiple instances of `PaginationParam` are used in an array
+ *      - Object Structure
+ *        ```
+ *        [
+ *          PaginationParam,
+ *          PaginationParam,
+ *          PaginationParam
+ *        ]
+ *        ```
+ *      - Results in url
+ *        ```
+ *        filter=a=1&filter=b=2&filter=c=3
+ *        ```
+ *      - Examples
+ *        - `filter=metadata.namespace=abc&filter=metadata.name=123,property=123`
+ * 2) OR
+ *    - Used when you would like to filter by something like a=1 OR b=2 OR c=3
+ *    - To do this multiple fields within a single PaginationParam is used
+ *      - Object Structure
+ *        ```
+ *        [
+ *          PaginationParam {
+ *            PaginationFilterField,
+ *            PaginationFilterField,
+ *            PaginationFilterField
+ *          }
+ *        ]
+ *        ```
+ *      - Results in url
+ *        ```
+ *        filter=a=1,b=2,c=3
+ *        ```
+ *
+ *      - For example `filter=a=1,b=2,c=3`
+ *
+ *
+ * This structure should give enough flexibility to cover all uses.
+ *
+ *
+ */
+export abstract class PaginationParam {
+  /**
+   * Query Param. For example `filter` or `projectsornamespaces`
+   */
+  param: string;
+  /**
+   * should fields equal param.
+   *
+   * For example projectsornamexspaces=x or projectsornamexspaces!=x
+   */
+  equals: boolean;
+  /**
+   * Fields to filter by
+   *
+   * For example metadata.namespace=abc OR metadata.namespace=xyz
+   */
+  fields: PaginationFilterField[];
+
+  constructor(
+    { param, equals = true, fields = [] }:
+    {
+      param: string;
+      /**
+       * should param equal fields
+       *
+       * For definition see {@link PaginationParam} `equals`
+       */
+      equals?: boolean;
+      /**
+       * Collection of fields to filter by
+       *
+       * For definition see {@link PaginationParam} `fields`
+       */
+      fields?: PaginationFilterField[];
+  }) {
+    this.param = param;
+    this.equals = equals;
+    this.fields = fields;
+  }
+}
+
+/**
+ * This is a convenience class for the `filter` param which works some magic, adds defaults and converts to the required PaginationParam format
+ *
+ * See description for {@link `PaginationParam`} for how multiple of these can be combined together to AND or OR together
+ *
+ * For more information regarding the API see https://github.com/rancher/steve?tab=readme-ov-file#filter
+ */
+export class PaginationParamFilter extends PaginationParam {
+  constructor(
+    { equals = true, fields = [] }:
+    {
+      /**
+       * should param equal fields
+       *
+       * For definition see {@link PaginationParam} `equals`
+       */
+      equals?: boolean;
+      /**
+       * Collection of fields to filter by.
+       *
+       * Fields are ORd together
+       *
+       * For definition see {@link PaginationParam} `fields`
+       */
+      fields?: PaginationFilterField[];
+    }
+  ) {
+    super({
+      param: 'filter',
+      equals,
+      fields
+    });
+  }
+
+  /**
+   * Convenience method when you just want an instance of {@link PaginationParamFilter} with a simple `filter=x=y` param
+   */
+  static createSingleField(field: { field?: string; value: string; equals?: boolean; }): PaginationParam {
+    return new PaginationParamFilter({ fields: [new PaginationFilterField(field)] });
+  }
+
+  /**
+   * Convenience method when you just want an instance of {@link PaginationParamFilter} with a simple `filter=a=1,b=2,c=3` PaginationParam
+   *
+   * These will be OR'd together
+   */
+  static createMultipleFields(fields: PaginationFilterField[]): PaginationParam {
+    return new PaginationParamFilter({ fields });
+  }
+}
+
+/**
+ * This is a convenience class for the `projectsornamespaces` param which works some magic, adds defaults and converts to the required PaginationParam format
+ *
+ * See description for {@link `PaginationParam`} for how multiple of these can be combined together to AND or OR together
+ *
+ * For more information regarding the API see https://github.com/rancher/steve?tab=readme-ov-file#projectsornamespaces
+ */
+export class PaginationParamProjectOrNamespace extends PaginationParam {
+  constructor(
+    { equals = true, projectOrNamespace = [] }:
+    {
+      /**
+       * should param equal fields
+       * For definition see {@link PaginationParam} `equals`
+       */
+      equals?: boolean;
+       /**
+       * Collection of projects / namespace id's to filter by
+       *
+       * These are OR'd together
+       *
+       * For clarification on definition see {@link PaginationFilterField}
+       */
+      projectOrNamespace?: string[];
+    }
+  ) {
+    const safeFields = projectOrNamespace.map((f) => {
+      return new PaginationFilterField({
+        value: f
+          .replace(NAMESPACE_FILTER_NS_FULL_PREFIX, '')
+          .replace(NAMESPACE_FILTER_P_FULL_PREFIX, '')
+      });
+    });
+
+    super({
+      param:  'projectsornamespaces',
+      equals,
+      fields: safeFields
+    });
+  }
+}
+
+/**
+ * Pagination settings sent to actions and persisted to store
+ */
+export class PaginationArgs {
+  /**
+   * Page number to fetch
+   */
+  page: number;
+  /**
+   * Number of results in the page
+   */
+  pageSize?: number;
+  /**
+   * Sort the results
+   *
+   * For more info see {@link PaginationSort}
+   */
+  sort: PaginationSort[];
+  /**
+   * A collection of `filter` params
+   *
+   * For more info see {@link PaginationParamFilter}
+   */
+  filters: PaginationParamFilter[];
+  /**
+   * A collection of `projectsornamespace` params
+   *
+   * For more info see {@link PaginationParamProjectOrNamespace}
+   */
+  projectsOrNamespaces: PaginationParamProjectOrNamespace[];
+
+  /**
+   * Creates an instance of PaginationArgs.
+   *
+   * Contains defaults to avoid creating complex json objects all the time
+   */
+  constructor({
+    page = 1,
+    pageSize = 10,
+    sort = [],
+    filters = [],
+    projectsOrNamespaces = [],
+  }:
+  // This would be neater as just Partial<PaginationArgs> but we lose all jsdoc
+  {
+    /**
+     * For definition see {@link PaginationArgs} `page`
+     */
+    page?: number,
+    /**
+     * For definition see {@link PaginationArgs} `pageSize`
+     */
+    pageSize?: number,
+    /**
+     * For definition see {@link PaginationArgs} `sort`
+     */
+    sort?: PaginationSort[],
+    /**
+     * Automatically wrap if not an array
+     *
+     * For definition see {@link PaginationArgs} `filters`
+     */
+    filters?: PaginationParamFilter | PaginationParamFilter[],
+    /**
+     * Automatically wrap if not an array
+     *
+     * For definition see {@link PaginationArgs} `projectsOrNamespaces`
+     */
+    projectsOrNamespaces?: PaginationParamProjectOrNamespace | PaginationParamProjectOrNamespace[],
+  }) {
+    this.page = page;
+    this.pageSize = pageSize;
+    this.sort = sort;
+    if (filters) {
+      this.filters = Array.isArray(filters) ? filters : [filters];
+    } else {
+      this.filters = [];
+    }
+    if (projectsOrNamespaces) {
+      this.projectsOrNamespaces = Array.isArray(projectsOrNamespaces) ? projectsOrNamespaces : [projectsOrNamespaces];
+    } else {
+      this.projectsOrNamespaces = [];
+    }
+  }
+}
+
+/**
+ * Overall result of a pagination request.
+ *
+ * Does not contain actual resources but overall stats (count, pages, etc)
+ */
+export interface StorePaginationResult {
+  count: number,
+  pages: number,
+  /**
+   * The last time the resource was updated. Used to assist list watching for changes
+   */
+  timestamp: number,
+}
+
+export interface StorePaginationRequest {
+  /**
+   * The single namespace to filter results by (as part of url path, not pagination params)
+   */
+  namespace?: string,
+  /**
+   * The set of pagination args used to create the request
+   */
+  pagination: PaginationArgs
+}
+
+/**
+ * Pagination settings
+ * - what was requested
+ * - what was received (minus actual resources)
+ *
+ * Object is persisted to store
+ */
+export interface StorePagination {
+  /**
+   * Collection of args that is used to make the request
+   */
+  request: StorePaginationRequest,
+
+  /**
+   * Information in the response outside of the actual resources returned
+   */
+  result: StorePaginationResult
+}
diff --git a/shell/types/store/type-map.d.ts b/shell/types/store/type-map.ts
similarity index 50%
rename from shell/types/store/type-map.d.ts
rename to shell/types/store/type-map.ts
index d866f2adcf..58859c3243 100644
--- a/shell/types/store/type-map.d.ts
+++ b/shell/types/store/type-map.ts
@@ -13,3 +13,18 @@ export interface TableColumn {
   tooltip?: string,
   search?: string | boolean,
 }
+
+export const COLUMN_BREAKPOINTS = {
+  /**
+   * Only show column if at tablet width or wider
+   */
+  TABLET:  'tablet',
+  /**
+   * Only show column if at laptop width or wider
+   */
+  LAPTOP:  'laptop',
+  /**
+   * Only show column if at desktop width or wider
+   */
+  DESKTOP: 'desktop'
+};
diff --git a/shell/utils/array.ts b/shell/utils/array.ts
index 18fad61135..faea3ff5f1 100644
--- a/shell/utils/array.ts
+++ b/shell/utils/array.ts
@@ -180,7 +180,7 @@ export function sameContents<T>(aryA: T[], aryB: T[]): boolean {
   return xor(aryA, aryB).length === 0;
 }
 
-export function sameArrayObjects<T>(aryA: T[], aryB: T[]): boolean {
+export function sameArrayObjects<T>(aryA: T[], aryB: T[], positionAgnostic = false): boolean {
   if (!aryA && !aryB) {
     // catch calls from js (where props aren't type checked)
     return false;
@@ -190,9 +190,29 @@ export function sameArrayObjects<T>(aryA: T[], aryB: T[]): boolean {
     return false;
   }
 
-  for (let i = 0; i < aryA.length; i++) {
-    if (!isEqual(aryA[i], aryB[i])) {
-      return false;
+  if (positionAgnostic) {
+    const consumedB: { [pos: number]: boolean } = {};
+
+    aryB.forEach((_, index) => {
+      consumedB[index] = false;
+    });
+
+    for (let i = 0; i < aryA.length; i++) {
+      const a = aryA[i];
+
+      const validA = aryB.findIndex((arB, index) => isEqual(arB, a) && !consumedB[index] );
+
+      if (validA >= 0) {
+        consumedB[validA] = true;
+      } else {
+        return false;
+      }
+    }
+  } else {
+    for (let i = 0; i < aryA.length; i++) {
+      if (!isEqual(aryA[i], aryB[i])) {
+        return false;
+      }
     }
   }
 
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index 0d1a62e3c3..ccbc9ad148 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -9,19 +9,19 @@ import {
   NAMESPACE_FILTER_NS_FULL_PREFIX,
   NAMESPACE_FILTER_P_FULL_PREFIX,
 } from '@shell/utils/namespace-filter';
-import { OptPagination, OptPaginationFilter, OptPaginationSort } from '@shell/types/store/dashboard-store.types';
+import { PaginationArgs, PaginationParam, PaginationSort } from '@shell/types/store/pagination.types';
 import { sameArrayObjects } from '@shell/utils/array';
 import { isEqual } from '@shell/utils/object';
 
 // This are hardcoded atm, but will be changed via the `Performance` settings
 const settings: PaginationSettings = {
-  enabled: false,
+  enabled: true, // TODO: RC
   stores:  {
     cluster: {
       resources: {
         enableAll:  false,
         enableSome: {
-          enabled: ['configmap', 'secret', 'pod'],
+          enabled: ['configmap', 'secret', 'pod', 'node'],
           generic: true,
         }
       }
@@ -110,15 +110,15 @@ class PaginationUtils {
     return this.validNsProjectFilters.includes(nsProjectFilter);
   }
 
-  paginationFilterEqual(a: OptPaginationFilter, b: OptPaginationFilter): boolean {
+  paginationFilterEqual(a: PaginationParam, b: PaginationParam): boolean {
     if (a.param !== b.param || a.equals !== b.equals) {
       return false;
     }
 
-    return isEqual(a.fields, b.fields);
+    return sameArrayObjects(a.fields, b.fields, true);
   }
 
-  paginationFiltersEqual(a: OptPaginationFilter[], b: OptPaginationFilter[]): boolean {
+  paginationFiltersEqual(a: PaginationParam[], b: PaginationParam[]): boolean {
     if (!!a && a?.length !== b?.length) {
       return false;
     }
@@ -132,18 +132,18 @@ class PaginationUtils {
     return true;
   }
 
-  paginationEqual(a?: OptPagination, b?: OptPagination): boolean {
+  paginationEqual(a?: PaginationArgs, b?: PaginationArgs): boolean {
     const {
-      filter: aFilter = [], sort: aSort = [], projectsOrNamespaces: aPN = [], ...aPrimitiveTypes
+      filters: aFilter = [], sort: aSort = [], projectsOrNamespaces: aPN = [], ...aPrimitiveTypes
     } = a || {};
     const {
-      filter: bFilter = [], sort: bSort = [], projectsOrNamespaces: bPN = [], ...bPrimitiveTypes
+      filters: bFilter = [], sort: bSort = [], projectsOrNamespaces: bPN = [], ...bPrimitiveTypes
     } = b || {};
 
     return isEqual(aPrimitiveTypes, bPrimitiveTypes) &&
       this.paginationFiltersEqual(aFilter, bFilter) &&
       this.paginationFiltersEqual(aPN, bPN) &&
-      sameArrayObjects<OptPaginationSort>(aSort, bSort);
+      sameArrayObjects<PaginationSort>(aSort, bSort, true);
   }
 }
 

From 466638317f2205ba15ae2fbfe5231ec6a87bc6d8 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Fri, 5 Apr 2024 15:31:31 +0100
Subject: [PATCH 04/71] Lint / test / fixes

---
 shell/config/product/explorer.js              |  2 +-
 shell/list/node.vue                           | 71 +++++++++++--------
 shell/mixins/resource-fetch-api-pagination.js |  4 +-
 shell/plugins/steve/steve-pagination-utils.ts |  6 +-
 4 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/shell/config/product/explorer.js b/shell/config/product/explorer.js
index 2a2aeed23f..e2600105e6 100644
--- a/shell/config/product/explorer.js
+++ b/shell/config/product/explorer.js
@@ -19,7 +19,7 @@ import {
   STORAGE_CLASS_PROVISIONER, PERSISTENT_VOLUME_SOURCE,
   HPA_REFERENCE, MIN_REPLICA, MAX_REPLICA, CURRENT_REPLICA,
   ACCESS_KEY, DESCRIPTION, EXPIRES, EXPIRY_STATE, SUB_TYPE, AGE_NORMAN, SCOPE_NORMAN, PERSISTENT_VOLUME_CLAIM, RECLAIM_POLICY, PV_REASON, WORKLOAD_HEALTH_SCALE, POD_RESTARTS,
-  DURATION, MESSAGE, REASON, LAST_SEEN_TIME, EVENT_TYPE, OBJECT, ROLE, ROLES, VERSION, INTERNAL_EXTERNAL_IP, KUBE_NODE_OS, CPU, RAM, PODS, SECRET_DATA
+  DURATION, MESSAGE, REASON, LAST_SEEN_TIME, EVENT_TYPE, OBJECT, ROLE, ROLES, VERSION, INTERNAL_EXTERNAL_IP, KUBE_NODE_OS, CPU, RAM, SECRET_DATA
 } from '@shell/config/table-headers';
 
 import { DSL } from '@shell/store/type-map';
diff --git a/shell/list/node.vue b/shell/list/node.vue
index da8eaf67a7..c013f64823 100644
--- a/shell/list/node.vue
+++ b/shell/list/node.vue
@@ -136,27 +136,38 @@ export default defineComponent({
 
   methods: {
     async loadMetrics() {
-      if (!this.canViewNodeMetrics || !this.rows.length) {
+      if (!this.canViewNodeMetrics) {
         return;
       }
 
-      const opt: ActionFindPageArgs = {
-        force:      true,
-        pagination: new PaginationArgs({
-          page:    -1,
-          filters: new PaginationParamFilter({
-            fields: this.rows.map((r: any) => new PaginationFilterField({
-              field: 'metadata.name',
-              value: r.id
-            }))
-          })
-        })
-      };
+      if (this.canPaginate) {
+        if (!this.rows.length) {
+          return;
+        }
 
-      await this.$store.dispatch('cluster/findPage', {
-        type: METRIC.NODE,
-        opt
-      });
+        const opt: ActionFindPageArgs = {
+          force:      true,
+          pagination: new PaginationArgs({
+            page:    -1,
+            filters: new PaginationParamFilter({
+              fields: this.rows.map((r: any) => new PaginationFilterField({
+                field: 'metadata.name',
+                value: r.id
+              }))
+            })
+          })
+        };
+
+        await this.$store.dispatch('cluster/findPage', {
+          type: METRIC.NODE,
+          opt
+        });
+      } else {
+        await this.$store.dispatch('cluster/findAll', {
+          type: METRIC.NODE,
+          opt:  { force: true }
+        });
+      }
 
       this.$forceUpdate();
     },
@@ -172,23 +183,21 @@ export default defineComponent({
 
       const hash: { [key: string]: Promise<any>} = {};
 
-      if (!this.canPaginate) {
-        if (this.canViewMgmtNodes) {
-          hash.mgmtNodes = this.$fetchType(MANAGEMENT.NODE, [], 'management');
-        }
+      if (this.canViewMgmtNodes) {
+        hash.mgmtNodes = this.$fetchType(MANAGEMENT.NODE, [], 'management');
+      }
 
-        if (this.canViewNormanNodes) {
-          hash.normanNodes = this.$fetchType(NORMAN.NODE, [], 'rancher');
-        }
+      if (this.canViewNormanNodes) {
+        hash.normanNodes = this.$fetchType(NORMAN.NODE, [], 'rancher');
+      }
 
-        if (this.canViewMachines) {
-          hash.machines = this.$fetchType(CAPI.MACHINE, [], 'management');
-        }
+      if (this.canViewMachines) {
+        hash.machines = this.$fetchType(CAPI.MACHINE, [], 'management');
+      }
 
-        if (this.canViewPods) {
-          // No need to block on this
-          this.$fetchType(POD);
-        }
+      if (this.canViewPods) {
+        // No need to block on this
+        this.$fetchType(POD);
       }
 
       return hash;
diff --git a/shell/mixins/resource-fetch-api-pagination.js b/shell/mixins/resource-fetch-api-pagination.js
index 41f7439520..52b9ab084f 100644
--- a/shell/mixins/resource-fetch-api-pagination.js
+++ b/shell/mixins/resource-fetch-api-pagination.js
@@ -5,7 +5,7 @@ import { mapGetters } from 'vuex';
 import { ResourceListComponentName } from '../components/ResourceList/resource-list.config';
 import paginationUtils from '@shell/utils/pagination-utils';
 import debounce from 'lodash/debounce';
-import { PaginationParamFilter, PaginationFilterField, PaginationArgs, StorePaginationResult } from '@shell/types/store/pagination.types';
+import { PaginationParamFilter, PaginationFilterField, PaginationArgs } from '@shell/types/store/pagination.types';
 import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
 
 /**
@@ -163,7 +163,7 @@ export default {
     },
 
     paginationResult() {
-      if (this.isResourceList) {
+      if (this.isResourceList || !this.canPaginate) {
         return;
       }
 
diff --git a/shell/plugins/steve/steve-pagination-utils.ts b/shell/plugins/steve/steve-pagination-utils.ts
index e932f5e5ee..9fb594dce6 100644
--- a/shell/plugins/steve/steve-pagination-utils.ts
+++ b/shell/plugins/steve/steve-pagination-utils.ts
@@ -3,7 +3,7 @@ import { PaginationParam, PaginationFilterField, PaginationParamProjectOrNamespa
 import { NAMESPACE_FILTER_ALL_SYSTEM, NAMESPACE_FILTER_ALL_USER, NAMESPACE_FILTER_P_FULL_PREFIX } from '@shell/utils/namespace-filter';
 import Namespace from '@shell/models/namespace';
 import { uniq } from '@shell/utils/array';
-import { MANAGEMENT, POD } from 'config/types';
+import { MANAGEMENT, POD } from '@shell/config/types';
 
 class NamespaceProjectFilters {
   /**
@@ -184,7 +184,7 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     }
 
     const params: string[] = [];
-    const namespaceParam = this.convertPaginationParams(type, opt.pagination.projectsOrNamespaces, true);
+    const namespaceParam = this.convertPaginationParams(type, opt.pagination.projectsOrNamespaces);
 
     if (namespaceParam) {
       params.push(namespaceParam);
@@ -290,7 +290,7 @@ class StevePaginationUtils extends NamespaceProjectFilters {
 
     if (invalidFields.length) {
       // When we switch over fully it will mature from `debug` to `warn`
-      console.debug(`Steve Pagination API Filter does not supper filtering by the following fields: ${ uniq(invalidFields).join(', ') }`);
+      console.debug(`Steve Pagination API Filter does not supper filtering by the following fields: ${ uniq(invalidFields).join(', ') }`); // eslint-disable-line no-console
     }
 
     return res;

From e5e6c0dbcde9df75557e82f4a4420208b5edfd39 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Fri, 5 Apr 2024 16:49:07 +0100
Subject: [PATCH 05/71] Improvements to configmap e2e test & Improve pagination
 disabled

---
 .../ResourceList/resource-list-masthead.po.ts |  4 +++
 .../e2e/po/pages/explorer/config-map.po.ts    | 26 +++++++++++++++----
 .../pages/explorer/api/api-services.spec.ts   |  9 +++----
 .../pages/explorer/storage/configmap.spec.ts  | 24 ++++++++---------
 cypress/e2e/tests/pages/generic/home.spec.ts  |  2 +-
 shell/list/node.vue                           |  2 +-
 shell/mixins/resource-fetch-api-pagination.js | 25 +++++++++++++++---
 7 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/cypress/e2e/po/components/ResourceList/resource-list-masthead.po.ts b/cypress/e2e/po/components/ResourceList/resource-list-masthead.po.ts
index 0f452a7eaf..553250933e 100644
--- a/cypress/e2e/po/components/ResourceList/resource-list-masthead.po.ts
+++ b/cypress/e2e/po/components/ResourceList/resource-list-masthead.po.ts
@@ -10,6 +10,10 @@ export default class ResourceListMastheadPo extends ComponentPo {
   }
 
   create() {
+    this.actions().eq(0).click();
+  }
+
+  createYaml() {
     return this.self().find('[data-testid="masthead-create-yaml"]').click();
   }
 }
diff --git a/cypress/e2e/po/pages/explorer/config-map.po.ts b/cypress/e2e/po/pages/explorer/config-map.po.ts
index 93833d0a36..ae0bda5f06 100644
--- a/cypress/e2e/po/pages/explorer/config-map.po.ts
+++ b/cypress/e2e/po/pages/explorer/config-map.po.ts
@@ -1,5 +1,7 @@
 import PagePo from '@/cypress/e2e/po/pages/page.po';
 import BaseResourceList from '@/cypress/e2e/po/lists/base-resource-list.po';
+import BurgerMenuPo from '@/cypress/e2e/po/side-bars/burger-side-menu.po';
+import ProductNavPo from '@/cypress/e2e/po/side-bars/product-side-nav.po';
 
 export class ConfigMapPagePo extends PagePo {
   private static createPath(clusterId: string) {
@@ -10,19 +12,33 @@ export class ConfigMapPagePo extends PagePo {
     return super.goTo(ConfigMapPagePo.createPath(clusterId));
   }
 
+  static navTo(clusterId = 'local') {
+    const burgerMenu = new BurgerMenuPo();
+    const sideNav = new ProductNavPo();
+
+    BurgerMenuPo.toggle();
+    burgerMenu.clusters().contains(clusterId).click();
+    sideNav.navToSideMenuGroupByLabel('Storage');
+    sideNav.navToSideMenuEntryByLabel('ConfigMaps');
+  }
+
   constructor(clusterId = 'local') {
     super(ConfigMapPagePo.createPath(clusterId));
   }
 
-  clickCreate() {
-    const baseResourceList = new BaseResourceList(this.self());
+  list() {
+    return new BaseResourceList(this.self());
+  }
 
-    return baseResourceList.masthead().actions().eq(0).click();
+  clickCreate() {
+    return this.list().masthead().create();
   }
 
   listElementWithName(name:string) {
-    const baseResourceList = new BaseResourceList(this.self());
+    return this.list().resourceTable().sortableTable().rowElementWithName(name);
+  }
 
-    return baseResourceList.resourceTable().sortableTable().rowElementWithName(name);
+  searchForConfigMap(name: string) {
+    return this.list().resourceTable().sortableTable().filter(name);
   }
 }
diff --git a/cypress/e2e/tests/pages/explorer/api/api-services.spec.ts b/cypress/e2e/tests/pages/explorer/api/api-services.spec.ts
index a975316c4a..4bff4f2107 100644
--- a/cypress/e2e/tests/pages/explorer/api/api-services.spec.ts
+++ b/cypress/e2e/tests/pages/explorer/api/api-services.spec.ts
@@ -1,20 +1,17 @@
 import { APIServicesPagePo } from '@/cypress/e2e/po/pages/explorer/api-services.po';
 
+const apiServicesPage = new APIServicesPagePo('local');
+
 describe('Cluster Explorer', { tags: ['@explorer', '@adminUser'] }, () => {
   beforeEach(() => {
     cy.login();
   });
 
   describe('API: APIServices', () => {
-    let apiServicesPage: APIServicesPagePo;
-
-    beforeEach(() => {
-      apiServicesPage = new APIServicesPagePo('local');
+    it('Should be able to use shift+j to select rows and the count of selected is correct', () => {
       apiServicesPage.goTo();
       apiServicesPage.waitForRequests();
-    });
 
-    it('Should be able to use shift+j to select rows and the count of selected is correct', () => {
       apiServicesPage.title().should('contain', 'APIServices');
 
       const sortableTable = apiServicesPage.sortableTable();
diff --git a/cypress/e2e/tests/pages/explorer/storage/configmap.spec.ts b/cypress/e2e/tests/pages/explorer/storage/configmap.spec.ts
index 525e90dac7..9b0bbc5524 100644
--- a/cypress/e2e/tests/pages/explorer/storage/configmap.spec.ts
+++ b/cypress/e2e/tests/pages/explorer/storage/configmap.spec.ts
@@ -1,14 +1,14 @@
 import { ConfigMapPagePo } from '@/cypress/e2e/po/pages/explorer/config-map.po';
 import ConfigMapPo from '@/cypress/e2e/po/components/storage/config-map.po';
 
-describe('ConfigMap', { tags: ['@explorer', '@adminUser'] }, () => {
+const configMapPage = new ConfigMapPagePo('local');
+
+describe('ConfigMap', { testIsolation: 'off', tags: ['@explorer', '@adminUser'] }, () => {
   beforeEach(() => {
     cy.login();
   });
 
   it('has the correct title', () => {
-    const configMapPage = new ConfigMapPagePo('local');
-
     configMapPage.goTo();
 
     cy.title().should('eq', 'Rancher - local - ConfigMaps');
@@ -27,9 +27,7 @@ skipGeometric=true`;
 
     // Visit the main menu and select the 'local' cluster
     // Navigate to Service Discovery => ConfigMaps
-    const configMapPage = new ConfigMapPagePo('local');
-
-    configMapPage.goTo();
+    ConfigMapPagePo.navTo();
 
     // Click on Create
     configMapPage.clickCreate();
@@ -40,7 +38,9 @@ skipGeometric=true`;
     // Enter ConfigMap description
     const configMapPo = new ConfigMapPo();
 
-    configMapPo.nameInput().set('custom-config-map');
+    const configMapName = 'custom-config-map';
+
+    configMapPo.nameInput().set(configMapName);
     configMapPo.keyInput().set('managerApiConfiguration.properties');
     configMapPo.valueInput().set(expectedValue);
     configMapPo.descriptionInput().set('Custom Config Map Description');
@@ -49,14 +49,12 @@ skipGeometric=true`;
     configMapPo.saveCreateForm().click();
 
     // Check if the ConfigMap is created successfully
-    configMapPage.listElementWithName('custom-config-map').should('exist');
+    configMapPage.waitForPage();
+    configMapPage.searchForConfigMap(configMapName);
+    configMapPage.listElementWithName(configMapName).should('exist');
 
     // Navigate back to the edit page
-    configMapPage.listElementWithName('custom-config-map')
-      .find(`button[data-testid="sortable-table-0-action-button"]`)
-      .click()
-      .get(`li[data-testid="action-menu-0-item"]`)
-      .click();
+    configMapPage.list().actionMenu(configMapName).getMenuItem('Edit Config').click();
 
     // Assert the current value yaml dumps will append a newline at the end
     configMapPo.valueInput().value().should('eq', `${ expectedValue }\n`);
diff --git a/cypress/e2e/tests/pages/generic/home.spec.ts b/cypress/e2e/tests/pages/generic/home.spec.ts
index 53b80dc7eb..83c609a8f5 100644
--- a/cypress/e2e/tests/pages/generic/home.spec.ts
+++ b/cypress/e2e/tests/pages/generic/home.spec.ts
@@ -7,7 +7,7 @@ import { PARTIAL_SETTING_THRESHOLD } from '@/cypress/support/utils/settings-util
 const homePage = new HomePagePo();
 const homeClusterList = homePage.list();
 const provClusterList = new ClusterManagerListPagePo('local');
-const longClusterDescription = 'this-is-some-really-really-really-really-really-really-long-decription';
+const longClusterDescription = 'this-is-some-really-really-really-really-really-really-long-description';
 
 describe('Home Page', () => {
   it('Confirm correct number of settings requests made', { tags: ['@generic', '@adminUser', '@standardUser'] }, () => {
diff --git a/shell/list/node.vue b/shell/list/node.vue
index c013f64823..4b4d96e0fb 100644
--- a/shell/list/node.vue
+++ b/shell/list/node.vue
@@ -17,7 +17,7 @@ import {
 } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
 import { GROUP_RESOURCES, mapPref } from '@shell/store/prefs';
-import { COLUMN_BREAKPOINTS } from '~/shell/types/store/type-map';
+import { COLUMN_BREAKPOINTS } from '@shell/types/store/type-map';
 
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import { mapGetters } from 'vuex';
diff --git a/shell/mixins/resource-fetch-api-pagination.js b/shell/mixins/resource-fetch-api-pagination.js
index 52b9ab084f..d1ecb6f911 100644
--- a/shell/mixins/resource-fetch-api-pagination.js
+++ b/shell/mixins/resource-fetch-api-pagination.js
@@ -111,7 +111,16 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['currentProduct', 'namespaceFilters', 'isAllNamespaces']),
+    ...mapGetters(['currentProduct', 'isAllNamespaces']),
+
+    /**
+     * 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....
+     */
+    namespaceFilters() {
+      return this.$store.getters['namespaceFilters'];
+    },
 
     /**
      * Does the user need to update the filter to supply valid options?
@@ -157,7 +166,7 @@ export default {
       }
 
       return this.resource && paginationUtils.isEnabled({ rootGetters: this.$store.getters }, {
-        store:    this.currentProduct.inStore,
+        store:    this.currentProduct?.inStore,
         resource: { id: this.resource.id || this.resource }
       });
     },
@@ -199,7 +208,7 @@ export default {
      * result in an empty page
      */
     rows(neu) {
-      if (!this.pagination || this.isResourceList) {
+      if (!this.canPaginate || !this.pagination || this.isResourceList) {
         return;
       }
 
@@ -214,6 +223,10 @@ export default {
     namespaceFilters: {
       immediate: true,
       async handler(neu, old) {
+        if (!this.canPaginate || !this.schema?.attributes?.namespaced) {
+          return;
+        }
+
         if (this.isResourceList) {
           return;
         }
@@ -249,6 +262,10 @@ export default {
      * @param {StorePaginationResult} old
      */
     async pagination(neu, old) {
+      if (!this.canPaginate) {
+        return;
+      }
+
       // ResourceList has two modes
       // 1) ResourceList component handles API request to fetch resources
       // 2) Custom list component handles API request to fetch resources
@@ -279,7 +296,7 @@ export default {
       }
 
       if (neu.timestamp === old?.timestamp) {
-        // This occurrs when the user returns to the page... and pagination hasn't actually changed
+        // This occurs when the user returns to the page... and pagination hasn't actually changed
         return;
       }
 

From d10a5bd6af1d45bf3629bf7f6b5661221aae8a17 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Fri, 5 Apr 2024 19:17:43 +0100
Subject: [PATCH 06/71] Beef up validation

---
 shell/config/product/explorer.js              |   5 +-
 shell/plugins/dashboard-store/getters.js      |   8 +-
 shell/plugins/steve/getters.js                |   4 +-
 shell/plugins/steve/schema.d.ts               |   9 ++
 shell/plugins/steve/steve-pagination-utils.ts | 122 +++++++++++-------
 shell/types/store/pagination.types.ts         |   4 +-
 shell/utils/pagination-utils.ts               |   2 +-
 7 files changed, 97 insertions(+), 57 deletions(-)

diff --git a/shell/config/product/explorer.js b/shell/config/product/explorer.js
index e2600105e6..31b56fd727 100644
--- a/shell/config/product/explorer.js
+++ b/shell/config/product/explorer.js
@@ -235,8 +235,11 @@ export function init(store) {
       value:  'metadata.fields.1',
       sort:   'metadata.fields.1',
       search: 'metadata.fields.1',
+    }, {
+      ...SECRET_DATA,
+      sort:   false,
+      search: false,
     },
-    SECRET_DATA,
     STEVE_AGE_COL
   ]);
 
diff --git a/shell/plugins/dashboard-store/getters.js b/shell/plugins/dashboard-store/getters.js
index a8ecd0b58f..0623ceaa38 100644
--- a/shell/plugins/dashboard-store/getters.js
+++ b/shell/plugins/dashboard-store/getters.js
@@ -15,8 +15,10 @@ export const urlFor = (state, getters) => (type, id, opt) => {
   type = getters.normalizeType(type);
   let url = opt.url;
 
+  let schema;
+
   if ( !url ) {
-    const schema = getters.schemaFor(type);
+    schema = getters.schemaFor(type);
 
     if ( !schema ) {
       throw new Error(`Unknown schema for type: ${ type }`);
@@ -39,7 +41,7 @@ export const urlFor = (state, getters) => (type, id, opt) => {
     url = `${ baseUrl }/${ url }`;
   }
 
-  url = getters.urlOptions(url, opt, type);
+  url = getters.urlOptions(url, opt, schema);
 
   return url;
 };
@@ -352,7 +354,7 @@ export default {
 
   urlFor,
 
-  urlOptions: () => (url, opt, type) => {
+  urlOptions: () => (url, opt, schema) => {
     return url;
   },
 
diff --git a/shell/plugins/steve/getters.js b/shell/plugins/steve/getters.js
index 3ffb1e97e2..dd60616ea5 100644
--- a/shell/plugins/steve/getters.js
+++ b/shell/plugins/steve/getters.js
@@ -36,12 +36,12 @@ const GC_IGNORE_TYPES = {
 const steveRegEx = new RegExp('(/v1)|(\/k8s\/clusters\/[a-z0-9-]+\/v1)');
 
 export default {
-  urlOptions: () => (url, opt, type) => {
+  urlOptions: () => (url, opt, schema) => {
     opt = opt || {};
     const parsedUrl = parse(url);
     const isSteve = steveRegEx.test(parsedUrl.path);
 
-    const stevePagination = stevePaginationUtils.createParamsForPagination(type, opt);
+    const stevePagination = stevePaginationUtils.createParamsForPagination(schema, opt);
 
     if (stevePagination) {
       url += `${ (url.includes('?') ? '&' : '?') + stevePagination }`;
diff --git a/shell/plugins/steve/schema.d.ts b/shell/plugins/steve/schema.d.ts
index 758230f358..84e556efec 100644
--- a/shell/plugins/steve/schema.d.ts
+++ b/shell/plugins/steve/schema.d.ts
@@ -1,3 +1,4 @@
+
 export interface SchemaAttributeColumn {
   description: string,
   field: string,
@@ -11,3 +12,11 @@ export interface SchemaAttribute {
   columns: SchemaAttributeColumn[],
   namespaced: boolean
 }
+
+/**
+ * At some point this will be properly typed, until then...
+ */
+export interface Schema {
+  id: string,
+  attributes: SchemaAttribute
+}
diff --git a/shell/plugins/steve/steve-pagination-utils.ts b/shell/plugins/steve/steve-pagination-utils.ts
index 9fb594dce6..dfc76c4277 100644
--- a/shell/plugins/steve/steve-pagination-utils.ts
+++ b/shell/plugins/steve/steve-pagination-utils.ts
@@ -3,7 +3,8 @@ import { PaginationParam, PaginationFilterField, PaginationParamProjectOrNamespa
 import { NAMESPACE_FILTER_ALL_SYSTEM, NAMESPACE_FILTER_ALL_USER, NAMESPACE_FILTER_P_FULL_PREFIX } from '@shell/utils/namespace-filter';
 import Namespace from '@shell/models/namespace';
 import { uniq } from '@shell/utils/array';
-import { MANAGEMENT, POD } from '@shell/config/types';
+import { MANAGEMENT, NODE, POD } from '@shell/config/types';
+import { Schema } from 'plugins/steve/schema';
 
 class NamespaceProjectFilters {
   /**
@@ -95,6 +96,30 @@ class NamespaceProjectFilters {
  * Helper functions for steve pagination
  */
 class StevePaginationUtils extends NamespaceProjectFilters {
+  /**
+   * Filtering with the vai cache supports specific fields
+   * 1) Those listed here
+   * 2) Those references in the schema's attributes.fields list (which is used by generic lists)
+   */
+  static VALID_FIELDS: { [type: string]: { field: string, startsWith?: boolean }[]} = {
+    '': [// all types
+      { field: 'metadata.name' },
+      { field: 'metadata.namespace' },
+      { field: 'metadata.state.name' },
+    ],
+    [NODE]: [
+      { field: 'status.nodeInfo.kubeletVersion' },
+      { field: 'status.nodeInfo.operatingSystem' },
+    ],
+    [POD]: [
+      { field: 'spec.containers.image' },
+      { field: 'spec.nodeName' },
+    ],
+    [MANAGEMENT.NODE]: [
+      { field: 'status.nodeName' }
+    ]
+  }
+
   /**
    * Given the selection of projects or namespaces come up with `filter` and `projectsornamespace` query params
    */
@@ -178,13 +203,13 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     };
   }
 
-  createParamsForPagination(type: string, opt: ActionFindPageArgs): string | undefined {
+  public createParamsForPagination(schema: Schema, opt: ActionFindPageArgs): string | undefined {
     if (!opt.pagination) {
       return;
     }
 
     const params: string[] = [];
-    const namespaceParam = this.convertPaginationParams(type, opt.pagination.projectsOrNamespaces);
+    const namespaceParam = this.convertPaginationParams(schema, opt.pagination.projectsOrNamespaces);
 
     if (namespaceParam) {
       params.push(namespaceParam);
@@ -209,7 +234,7 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     }
 
     if (opt.pagination.filters?.length) {
-      const filters = this.convertPaginationParams(type, opt.pagination.filters);
+      const filters = this.convertPaginationParams(schema, opt.pagination.filters);
 
       if (filters) {
         params.push(filters);
@@ -222,61 +247,63 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     return params.join('&');
   }
 
-  private validateField(type: string, field?: string): boolean {
+  /**
+   * Check if the API supports filtering by this field
+   */
+  private validateField(state: { checked: string[], invalid: string[]}, schema: Schema, field?: string) {
     if (!field) {
-      return true; // no field, so not invalid
+      return; // no field, so not invalid
     }
 
-    // At the moment generic pagination is supported... but soon it will only be via the vai cache
-    // The vai cache only supports filtering by specific fields
-    // This mechanism will warn developers that they're using an unsupported field
-    return !![
-      StevePaginationUtils.VALID_FIELDS[''],
-      StevePaginationUtils.VALID_FIELDS[type]
-    ].find((fields) => {
-      return fields?.find((f) => {
-        if (f.startsWith) {
-          if (field.startsWith(f.field)) {
-            return true;
-          }
-        } else {
-          return field === f.field;
+    if (state.checked.includes(field)) {
+      return; // already checked, exit early
+    }
+
+    state.checked.push(field);
+
+    // First check in our hardcoded list of supported filters
+    if ([
+      StevePaginationUtils.VALID_FIELDS[''], // Global
+      StevePaginationUtils.VALID_FIELDS[schema.id], // Type specific
+    ].find((fields) => fields?.find((f) => {
+      if (f.startsWith) {
+        if (field.startsWith(f.field)) {
+          return true;
         }
-      });
-    });
+      } else {
+        return field === f.field;
+      }
+    }))) {
+      return;
+    }
+
+    // Then check in schema (the api automatically supports these)
+    if (!!schema?.attributes.columns.find(
+      // This isn't the most performant, but the string is tiny
+      (at) => at.field.replace('$.', '').replace('[', '.').replace(']', '') === field
+    )) {
+      return;
+    }
+
+    state.invalid.push(field);
   }
 
   /**
-   * Filtering with the vai cache only works with specific fields
+   * Convert our {@link PaginationParam} definition of params to a set of url params
    */
-  static VALID_FIELDS: { [type: string]: { field: string, startsWith?: boolean }[]} = {
-    // global
-    '': [
-      { field: 'metadata.name' },
-      { field: 'metadata.namespace' },
-      { field: 'metadata.fields.', startsWith: true },
-      { field: 'metadata.state.name' },
-    ],
-    [POD]: [
-      { field: 'spec.containers.image' },
-      { field: 'spec.nodeName' },
-    ],
-    [MANAGEMENT.NODE]: [
-      { field: 'status.nodeName' }
-    ]
-  }
-
-  private convertPaginationParams(type: string, filters: PaginationParam[] = []): string {
-    const invalidFields: string[] = [];
+  private convertPaginationParams(schema: Schema, filters: PaginationParam[] = []): string {
+    const validateFields = {
+      checked: new Array<string>(),
+      invalid: new Array<string>(),
+    };
     const res = filters
       .filter((filter) => !!filter.fields.length)
       .map((filter) => {
         const joined = filter.fields
           .map((field) => {
             if (field.field) {
-              if (!this.validateField(type, field.field)) {
-                invalidFields.push(field.field);
-              }
+              // Check if the API supports filtering by this field
+              this.validateField(validateFields, schema, field.field);
 
               return `${ field.field }${ field.equals ? '=' : '!=' }${ field.value }`;
             }
@@ -288,9 +315,8 @@ class StevePaginationUtils extends NamespaceProjectFilters {
         return `${ filter.param }${ filter.equals ? '=' : '!=' }${ joined }`;
       }).join('&'); // This means AND
 
-    if (invalidFields.length) {
-      // When we switch over fully it will mature from `debug` to `warn`
-      console.debug(`Steve Pagination API Filter does not supper filtering by the following fields: ${ uniq(invalidFields).join(', ') }`); // eslint-disable-line no-console
+    if (validateFields.invalid.length) {
+      console.warn(`Pagination API does not support filtering '${ schema.id }' by the requested fields: ${ uniq(validateFields.invalid).join(', ') }`); // eslint-disable-line no-console
     }
 
     return res;
diff --git a/shell/types/store/pagination.types.ts b/shell/types/store/pagination.types.ts
index cb2056baeb..b9ffb12eeb 100644
--- a/shell/types/store/pagination.types.ts
+++ b/shell/types/store/pagination.types.ts
@@ -182,7 +182,7 @@ export abstract class PaginationParam {
 /**
  * This is a convenience class for the `filter` param which works some magic, adds defaults and converts to the required PaginationParam format
  *
- * See description for {@link `PaginationParam`} for how multiple of these can be combined together to AND or OR together
+ * See description for {@link PaginationParam} for how multiple of these can be combined together to AND or OR together
  *
  * For more information regarding the API see https://github.com/rancher/steve?tab=readme-ov-file#filter
  */
@@ -233,7 +233,7 @@ export class PaginationParamFilter extends PaginationParam {
 /**
  * This is a convenience class for the `projectsornamespaces` param which works some magic, adds defaults and converts to the required PaginationParam format
  *
- * See description for {@link `PaginationParam`} for how multiple of these can be combined together to AND or OR together
+ * See description for {@link PaginationParam} for how multiple of these can be combined together to AND or OR together
  *
  * For more information regarding the API see https://github.com/rancher/steve?tab=readme-ov-file#projectsornamespaces
  */
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index ccbc9ad148..74f693a35d 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -15,7 +15,7 @@ import { isEqual } from '@shell/utils/object';
 
 // This are hardcoded atm, but will be changed via the `Performance` settings
 const settings: PaginationSettings = {
-  enabled: true, // TODO: RC
+  enabled: false,
   stores:  {
     cluster: {
       resources: {

From 59f3e0396259f434eef16e61d9432a3cff7c23f2 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Mon, 8 Apr 2024 11:22:11 +0100
Subject: [PATCH 07/71] Fix missing name column in non-server-side paginated
 node list

---
 cypress/e2e/tests/pages/explorer/node-list.spec.ts | 4 ++--
 shell/config/product/explorer.js                   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/cypress/e2e/tests/pages/explorer/node-list.spec.ts b/cypress/e2e/tests/pages/explorer/node-list.spec.ts
index f613873007..7a806c6141 100644
--- a/cypress/e2e/tests/pages/explorer/node-list.spec.ts
+++ b/cypress/e2e/tests/pages/explorer/node-list.spec.ts
@@ -15,7 +15,7 @@ describe('Nodes list', { tags: ['@explorer', '@adminUser'], testIsolation: 'off'
 
   after(() => {
     // Ensure we delete the dummy node
-    cy.deleteRancherResource('v1', 'nodes', 'bigip1');
+    cy.deleteRancherResource('v1', 'nodes', dummyNode.metadata.name);
   });
 
   it('should show the nodes list page', () => {
@@ -44,7 +44,7 @@ describe('Nodes list', { tags: ['@explorer', '@adminUser'], testIsolation: 'off'
     nodeList.sortableTable().rowNames().should((names: any) => {
       expect(names).to.have.length(2);
       // expect(names).to.contain('local-node');
-      expect(names).to.contain('bigip1');
+      expect(names).to.contain(dummyNode.metadata.name);
     });
 
     // Simple test to assert we haven't broken Node detail page
diff --git a/shell/config/product/explorer.js b/shell/config/product/explorer.js
index 31b56fd727..cdd9c4ecf7 100644
--- a/shell/config/product/explorer.js
+++ b/shell/config/product/explorer.js
@@ -275,7 +275,7 @@ export function init(store) {
   headers(NODE,
     [
       STATE,
-      NAME,
+      NAME_COL,
       ROLES,
       VERSION,
       INTERNAL_EXTERNAL_IP,

From 1f813c9caed0847ada92ef82834676ebf1209c04 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Mon, 8 Apr 2024 13:53:13 +0100
Subject: [PATCH 08/71] Fix PR automation actions - fix syntax - catch scenario
 where a pr has no fixed issue

> There's duplication between files, see https://github.com/rancher/dashboard/pull/10534
---
 .github/workflows/scripts/pr-gh-project.js |  50 ++++++----
 .github/workflows/scripts/pr.js            | 111 +++++++++++----------
 2 files changed, 91 insertions(+), 70 deletions(-)

diff --git a/.github/workflows/scripts/pr-gh-project.js b/.github/workflows/scripts/pr-gh-project.js
index 3c43bbc3c1..e166fab7d3 100644
--- a/.github/workflows/scripts/pr-gh-project.js
+++ b/.github/workflows/scripts/pr-gh-project.js
@@ -15,7 +15,7 @@ const QA_REVIEW_LABEL = '[zube]: QA Review';
 const TECH_DEBT_LABEL = 'kind/tech-debt';
 const DEV_VALIDATE_LABEL = 'status/dev-validate';
 const QA_NONE_LABEL = 'QA/None';
-const QA_DEV_AUTOMATION_LABEL = 'QA/dev-automation'
+const QA_DEV_AUTOMATION_LABEL = 'QA/dev-automation';
 
 const GH_PRJ_TRIAGE = 'Triage';
 
@@ -62,12 +62,17 @@ function getReferencedIssues(body) {
   const regexp = /[Ff]ix(es|ed)?\s*#([0-9]*)|[Cc]lose(s|d)?\s*#([0-9]*)|[Rr]esolve(s|d)?\s*#([0-9]*)/g;
   var v;
   const issues = [];
-  do {
-    v = regexp.exec(body);
-    if (v) {
-      issues.push(parseInt(v[2], 10));
-    }
-  } while (v);
+  try {
+    do {
+      v = regexp.exec(body);
+      if (v) {
+        issues.push(parseInt(v[2], 10));
+      }
+    } while (v);
+  } catch (err) {
+    console.error('Failed to find referenced issues', err);
+  }
+
   return issues;
 }
 
@@ -78,7 +83,7 @@ function hasLabel(issue, label) {
 }
 
 function moveIssueToProjectState(issue, state) {
-  console.log(`moveIssueToProjectState ${ state }`);
+  console.log(`moveIssueToProjectState ${state}`);
 
   console.log(JSON.stringify(issue, null, 2));
 }
@@ -136,10 +141,10 @@ async function processClosedAction() {
 
   if (!ghProject || ghProject.errors) {
     console.log('Error: Can not fetch GitHub Project metadata');
-  
-    return; 
+
+    return;
   }
-  
+
   console.log(JSON.stringify(ghProject, null, 2));
 
   console.log('======');
@@ -163,7 +168,7 @@ async function processClosedAction() {
   // Need to get all open PRs to see if any other references the same issues that this PR says it fixes
   const openPRs = event.repository.url + '/pulls?state=open&per_page=100';
   const r = await request.fetch(openPRs);
-  const issueMap = issues.reduce((prev, issue) => { prev[issue] = true; return prev; }, {})
+  const issueMap = issues.reduce((prev, issue) => { prev[issue] = true; return prev; }, {});
 
   // Go through all of the Open PRs and see if they fix any of the same issues that this PR does
   // If not, then the issue has been completed, so we can process it
@@ -188,7 +193,7 @@ async function processClosedAction() {
   fixed.forEach(async (i) => {
     const detail = event.repository.url + '/issues/' + i;
     const iss = await request.fetch(detail);
-    console.log('')
+    console.log('');
     console.log('Processing Issue #' + i + ' - ' + iss.title);
 
     // If the issue is a tech debt issue or says dev will validate then don't move it to 'To Test'
@@ -278,11 +283,11 @@ async function processOpenOrEditAction() {
 
   if (!ghProject || ghProject.errors) {
     console.log('Error: Can not fetch GitHub Project metadata');
-  
-    return; 
+
+    return;
   }
-  
-  console.log(JSON.stringify(ghProject, null, 2));  
+
+  console.log(JSON.stringify(ghProject, null, 2));
 
   const pr = event.pull_request;
   const body = pr.body;
@@ -298,7 +303,12 @@ async function processOpenOrEditAction() {
   for (i of issues) {
     const detail = `${event.repository.url}/issues/${i}`;
     const iss = await request.fetch(detail);
-    console.log('')
+
+    if (!iss) {
+      console.log(`Failed to find issue with number '${i}'. Body: :`, iss);
+      continue;
+    }
+    console.log('');
     console.log('Processing Issue #' + i + ' - ' + iss.title);
 
     if (pr.draft) {
@@ -313,13 +323,13 @@ async function processOpenOrEditAction() {
       console.log(info);
 
       console.log('-------- GH ISSUE -----');
-      console.log(JSON.stringify(prjIssue, null, 2));  
+      console.log(JSON.stringify(prjIssue, null, 2));
       console.log('---------');
 
       await moveIssueToProjectState(iss, GH_PRJ_IN_REVIEW);
     }
 
-    if (iss.milestone) {
+    if (iss?.milestone) {
       milestones[iss.milestone.title] = iss.milestone.number;
     }
   }
diff --git a/.github/workflows/scripts/pr.js b/.github/workflows/scripts/pr.js
index f1934e7b7b..7c070807c8 100644
--- a/.github/workflows/scripts/pr.js
+++ b/.github/workflows/scripts/pr.js
@@ -11,7 +11,7 @@ const QA_REVIEW_LABEL = '[zube]: QA Review';
 const TECH_DEBT_LABEL = 'kind/tech-debt';
 const DEV_VALIDATE_LABEL = 'status/dev-validate';
 const QA_NONE_LABEL = 'QA/None';
-const QA_DEV_AUTOMATION_LABEL = 'QA/dev-automation'
+const QA_DEV_AUTOMATION_LABEL = 'QA/dev-automation';
 
 // The event object
 const event = require(process.env.GITHUB_EVENT_PATH);
@@ -21,28 +21,34 @@ function getReferencedIssues(body) {
     const regexp = /[Ff]ix(es|ed)?\s*#([0-9]*)|[Cc]lose(s|d)?\s*#([0-9]*)|[Rr]esolve(s|d)?\s*#([0-9]*)/g;
     var v;
     const issues = [];
-    do {
-        v = regexp.exec(body);
-        if (v) {
-            issues.push(parseInt(v[2], 10));
-        }
-    } while (v);
+    try {
+        do {
+            v = regexp.exec(body);
+            if (v) {
+                issues.push(parseInt(v[2], 10));
+            }
+        } while (v);
+    } catch (err) {
+        console.error('Failed to find referenced issues', err);
+    }
     return issues;
 }
 
 function hasLabel(issue, label) {
     const labels = issue.labels || [];
 
-    return !!(labels.find(l =>l.name.toLowerCase() === label.toLowerCase()));
+    return !!(labels.find(l => l.name.toLowerCase() === label.toLowerCase()));
 }
 
-function removeZubeLabels(labels) {
-    return labels.filter(l => l.name.indexOf('[zube]') === -1);
+function removeZubeLabels(issue) {
+    const labels = issue.labels || [];
+
+    return (labels || []).filter(l => l.name.indexOf('[zube]') === -1);
 }
 
 async function resetZubeLabels(issue, label) {
     // Remove all Zube labels
-    let cleanLabels = removeZubeLabels(issue.labels);
+    let cleanLabels = removeZubeLabels(issue);
 
     cleanLabels = cleanLabels.map((v) => {
         return v.name;
@@ -57,7 +63,7 @@ async function resetZubeLabels(issue, label) {
 
     // Update the labels
     const labelsAPI = `${issue.url}/labels`;
-    return request.put(labelsAPI, {labels: cleanLabels});
+    return request.put(labelsAPI, { labels: cleanLabels });
 }
 
 async function waitForLabel(issue, label) {
@@ -91,7 +97,7 @@ async function processClosedAction() {
 
     // Check that the issue was merged and not just closed
     if (!pr.merged) {
-        console.log( '  PR was closed without merging - ignoring');
+        console.log('  PR was closed without merging - ignoring');
         return;
     }
 
@@ -106,7 +112,7 @@ async function processClosedAction() {
     // Need to get all open PRs to see if any other references the same issues that this PR says it fixes
     const openPRs = event.repository.url + '/pulls?state=open&per_page=100';
     const r = await request.fetch(openPRs);
-    const issueMap = issues.reduce((prev, issue) => { prev[issue] = true; return prev; }, {})
+    const issueMap = issues.reduce((prev, issue) => { prev[issue] = true; return prev; }, {});
 
     // Go through all of the Open PRs and see if they fix any of the same issues that this PR does
     // If not, then the issue has been completed, so we can process it
@@ -128,14 +134,14 @@ async function processClosedAction() {
     // GitHub will do the closing, so we expect each issue to already be closed
     // We will fetch each issue in turn, expecting it to be closed
     // We will re-open the issue and label it as ready to test
-    fixed.forEach(async(i) => {
+    fixed.forEach(async (i) => {
         const detail = event.repository.url + '/issues/' + i;
         const iss = await request.fetch(detail);
-        console.log('')
+        console.log('');
         console.log('Processing Issue #' + i + ' - ' + iss.title);
 
         // If the issue is a tech debt issue or says dev will validate then don't move it to 'To Test'
-        if(hasLabel(iss, TECH_DEBT_LABEL) || hasLabel(iss, DEV_VALIDATE_LABEL) || hasLabel(iss, QA_NONE_LABEL)) {
+        if (hasLabel(iss, TECH_DEBT_LABEL) || hasLabel(iss, DEV_VALIDATE_LABEL) || hasLabel(iss, QA_NONE_LABEL)) {
             console.log('  Issue is tech debt/dev validate/qa none - ignoring');
         } else {
             console.log('  Waiting for Zube to mark the issue as done ...');
@@ -170,13 +176,13 @@ async function processClosedAction() {
 
             // Move to QA Review if the issue has the label that dev wrote automated tests
             if (hasLabel(iss, QA_DEV_AUTOMATION_LABEL)) {
-              console.log('  Updating labels to move issue to QA Review');
+                console.log('  Updating labels to move issue to QA Review');
 
-              await resetZubeLabels(iss, QA_REVIEW_LABEL);
+                await resetZubeLabels(iss, QA_REVIEW_LABEL);
             } else {
-              console.log('  Updating labels to move issue to Test');
+                console.log('  Updating labels to move issue to Test');
 
-              await resetZubeLabels(iss, IN_TEST_LABEL);
+                await resetZubeLabels(iss, IN_TEST_LABEL);
             }
         }
 
@@ -197,7 +203,7 @@ async function processOpenAction() {
 
         // Update the assignees
         const assigneesAPI = `${event.repository.url}/issues/${pr.number}/assignees`;
-        await request.post(assigneesAPI, {assignees: [pr.user.login]});
+        await request.post(assigneesAPI, { assignees: [pr.user.login] });
     }
 }
 
@@ -218,44 +224,49 @@ async function processOpenOrEditAction() {
     const milestones = {};
 
     for (i of issues) {
-      const detail = `${event.repository.url}/issues/${i}`;
-      const iss = await request.fetch(detail);
-      console.log('')
-      console.log('Processing Issue #' + i + ' - ' + iss.title);
+        const detail = `${event.repository.url}/issues/${i}`;
+        const iss = await request.fetch(detail);
 
-      if (pr.draft) {
-        console.log('    Issue will not be moved to In Review (Draft PR)');
-      } else if (hasLabel(iss, BACKEND_BLOCKED_LABEL)) {
-        console.log('    Issue will not be moved to In Review (Backend Blocked)');
-      } else {
-        if (!hasLabel(iss, IN_REVIEW_LABEL)) {
-            // Add the In Review label to the issue as it does not have it
-            await resetZubeLabels(iss, IN_REVIEW_LABEL);
-        } else {
-            console.log('    Issue already has the In Review label');
+        if (!iss) {
+            console.log(`Failed to find issue with number '${i}'. Body: :`, iss);
+            continue;
         }
-      }
+        console.log('');
+        console.log('Processing Issue #' + i + ' - ' + iss.title);
 
-      if (iss.milestone) {
-        milestones[iss.milestone.title] = iss.milestone.number;
-      }
+        if (pr.draft) {
+            console.log('    Issue will not be moved to In Review (Draft PR)');
+        } else if (hasLabel(iss, BACKEND_BLOCKED_LABEL)) {
+            console.log('    Issue will not be moved to In Review (Backend Blocked)');
+        } else {
+            if (!hasLabel(iss, IN_REVIEW_LABEL)) {
+                // Add the In Review label to the issue as it does not have it
+                await resetZubeLabels(iss, IN_REVIEW_LABEL);
+            } else {
+                console.log('    Issue already has the In Review label');
+            }
+        }
+
+        if (iss.milestone) {
+            milestones[iss.milestone.title] = iss.milestone.number;
+        }
     }
 
     const keys = Object.keys(milestones);
     if (keys.length === 0) {
-      console.log('No milestones on issue(s) for this PR');
+        console.log('No milestones on issue(s) for this PR');
     } else if (keys.length > 1) {
-      console.log('More than one milestone on issues for this PR');
+        console.log('More than one milestone on issues for this PR');
     } else {
-      // There is exactly 1 milestone, so use that for the PR
-      const milestoneNumber = milestones[keys[0]];
+        // There is exactly 1 milestone, so use that for the PR
+        const milestoneNumber = milestones[keys[0]];
 
-      if (event.pull_request.milestone?.number !== milestoneNumber) {
-        console.log('Updating PR with milestone: ' + keys[0]);
-        await request.patch(event.pull_request.issue_url, {milestone: milestoneNumber});
-      } else {
-        console.log('PR is already assigned to milestone ' + keys[0]);
-      }
+        if (event.pull_request.milestone?.number !== milestoneNumber) {
+            console.log('Updating PR with milestone: ' + keys[0]);
+            await request.patch(event.pull_request.issue_url, { milestone: milestoneNumber });
+        } else {
+            console.log('PR is already assigned to milestone ' + keys[0]);
+        }
     }
 }
 

From 1fdcb2a71893cc4fd9ca302034704ea0aa66ea97 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Mon, 8 Apr 2024 14:36:19 +0100
Subject: [PATCH 09/71] CI bump

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index c60d437e35..c82108501f 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,7 @@ Developer documentation and documentation for our UI components is available her
 Rancher Dashboard supports an extension mechanism that allows developers to independently provide additional functionality to Rancher. You can learn more from our [Rancher Extensions Docs](https://rancher.github.io/dashboard/extensions/introduction).
 
 
+
 # What is it?
 
 Rancher Dashboard provides a sophisticated UI for managing Kubernetes clusters and Workloads.

From 45f18837f444c1d7090707dde390244511fac1ea Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 9 Apr 2024 15:52:22 +0100
Subject: [PATCH 10/71] Fixes post merge

---
 shell/chart/rancher-backup/S3.vue             | 16 ++++++----
 shell/components/form/LabeledSelect/index.vue |  1 -
 .../labeled-select-pagination.ts              | 29 ++++++++++++++-----
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/shell/chart/rancher-backup/S3.vue b/shell/chart/rancher-backup/S3.vue
index 6e5c4ffe3a..b1cb97215f 100644
--- a/shell/chart/rancher-backup/S3.vue
+++ b/shell/chart/rancher-backup/S3.vue
@@ -5,6 +5,7 @@ import FileSelector from '@shell/components/form/FileSelector';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { mapGetters } from 'vuex';
 import { SECRET } from '@shell/config/types';
+import { PaginationParamFilter } from '~/shell/types/store/pagination.types';
 
 export default {
   components: {
@@ -91,15 +92,18 @@ export default {
     }) {
       try {
         // Construct params for request
-        const filterParam = !!filter ? [{ field: 'metadata.name', value: filter }] : [];
-        const url = this.$store.getters['cluster/urlFor'](SECRET, null, {
+        const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+
+        // Of type {@link ActionFindPageArgs}
+        const opt = {
           pagination: {
-            filter: filterParam,
-            sort:   [{ asc: true, field: 'metadata.namespace' }, { asc: true, field: 'metadata.name' }],
             page,
             pageSize,
-          }
-        });
+            sort: [{ asc: true, field: 'metadata.namespace' }, { asc: true, field: 'metadata.name' }],
+            filters
+          },
+        };
+        const url = this.$store.getters['cluster/urlFor'](SECRET, null, opt);
 
         // Make request (note we're not bothering to persist anything to the store, response is transient)
         const res = await this.$store.dispatch('cluster/request', { url });
diff --git a/shell/components/form/LabeledSelect/index.vue b/shell/components/form/LabeledSelect/index.vue
index 05aa8a786c..21a38ac93a 100644
--- a/shell/components/form/LabeledSelect/index.vue
+++ b/shell/components/form/LabeledSelect/index.vue
@@ -5,7 +5,6 @@ import { get } from '@shell/utils/object';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
-import isEqual from 'lodash/isEqual';
 import LabeledSelectPagination from './labeled-select-pagination';
 import { LABEL_SELECT_NOT_OPTION_KINDS } from './LabeledSelect.utils';
 
diff --git a/shell/components/form/LabeledSelect/labeled-select-pagination.ts b/shell/components/form/LabeledSelect/labeled-select-pagination.ts
index 99c6898f78..78a8adb0a9 100644
--- a/shell/components/form/LabeledSelect/labeled-select-pagination.ts
+++ b/shell/components/form/LabeledSelect/labeled-select-pagination.ts
@@ -1,6 +1,7 @@
 import { LABEL_SELECT_NOT_OPTION_KINDS } from './LabeledSelect.utils';
 import { debounce } from 'lodash';
-import Vue, { PropType } from 'vue';
+import Vue, { PropType, defineComponent } from 'vue';
+import { ComputedOptions, MethodOptions } from 'vue/types/v3-component-options';
 
 interface Data {
   currentPage: number,
@@ -16,7 +17,17 @@ interface Data {
   debouncedRequestPagination: Function
 }
 
-interface Methods {
+interface Computed extends ComputedOptions {
+  // _options: () => any,
+
+  canLoadMore: () => boolean,
+
+  optionsInPage: () => number,
+
+  optionCounts: () => string,
+}
+
+interface Methods extends MethodOptions {
   loadMore: () => void
   setPaginationFilter: (filter: string) => void
   requestPagination: () => Promise<any>;
@@ -44,10 +55,10 @@ type PaginateFn<T = any> = (opts: {
 }>
 
 interface Props {
-  paginate: PaginateFn
+  paginate?: PaginateFn
 }
 
-export default Vue.extend<Data, Methods, any, Props>({
+export default defineComponent<Props, any, Data, Computed, Methods>({
   props: {
     paginate: {
       default: null,
@@ -89,10 +100,14 @@ export default Vue.extend<Data, Methods, any, Props>({
     },
 
     optionCounts() {
-      return this.paginate ? this.$store.getters['i18n/t']('labelSelect.pagination.counts', {
+      if (!this.paginate || this.optionsInPage === this.totalResults) {
+        return '';
+      }
+
+      return this.$store.getters['i18n/t']('labelSelect.pagination.counts', {
         count:      this.optionsInPage,
         totalCount: this.totalResults
-      }) : '';
+      });
     },
   },
 
@@ -111,7 +126,7 @@ export default Vue.extend<Data, Methods, any, Props>({
 
     async requestPagination(resetPage = false) {
       this.paginating = true;
-      const paginate: PaginateFn = this.paginate;
+      const paginate: PaginateFn = this.paginate as PaginateFn; // Checking is done via prop
 
       const {
         page,

From 16e8415831868b49227210dff7448160100334fe Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 10 Apr 2024 11:46:07 +0100
Subject: [PATCH 11/71] Wire in 2.9.0 settings for server-side pagination -
 Everything is gated on `on-disk-steve-cache` feature flag   - There's a
 backend in progress item to resolve a `revision` issue, until then disable
 watching a resource given it - Global Settings - Performance   - Added new
 setting to enable server side pagination   - this is incompatible with two
 other performance settings

---
 shell/assets/translations/en-us.yaml          | 13 ++--
 shell/config/settings.ts                      | 17 +++++
 .../pages/c/_cluster/settings/performance.vue | 65 ++++++++++++++++++-
 .../plugins/steve/__tests__/subscribe.spec.ts |  5 +-
 shell/plugins/steve/subscribe.js              | 14 +++-
 shell/store/features.js                       |  5 +-
 shell/utils/pagination-utils.ts               | 31 +++++----
 7 files changed, 123 insertions(+), 27 deletions(-)

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index 0d794dc18c..5ed4ab74e4 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -7217,7 +7217,7 @@ performance:
       When enabled, resources will appear more quickly, but it may take slightly longer to load the entire set of resources. This setting only applies to resources that come from the Kubernetes API
     checkboxLabel: Enable incremental loading
     inputLabel: Resource Threshold
-    incompatibleDescription: "Incremental Loading is incomaptible with Namespace/Project filtering. Enabling this will disable it."
+    incompatibleDescription: "Incremental Loading is incomaptible with Namespace/Project filtering and Server-side Pagination. Enabling this will disable them."
   manualRefresh:
     label: Manual Refresh
     setting: You can configure a threshold above which manual refresh will be enabled.
@@ -7226,7 +7226,7 @@ performance:
       When enabled, list data will not auto-update but instead the user must manually trigger a list-view refresh. This setting only applies to resources that come from the Kubernetes API
     checkboxLabel: Enable manual refresh of data for lists
     inputLabel: Resource Threshold
-    incompatibleDescription: "Manual Refresh is incomaptible with Namespace/Project filtering. Enabling this will disable it."
+    incompatibleDescription: "Manual Refresh is incomaptible with Namespace/Project filtering and Server-side Pagination. Enabling this will disable them."
   websocketNotification:
     label: Websocket Notifications
     description: |-
@@ -7269,8 +7269,13 @@ performance:
     information: To change the automatic logout behaviour, edit the authorisation and/or session token timeout values (<code>auth-user-session-ttl-minutes</code> and <code>auth-token-max-ttl-minutes</code>) in the Settings page.
     description: When enabled and the user is inactive past the specified timeout, the UI will no longer fresh page content and the user must reload the page to continue.
     authUserTTL: This timeout cannot be higher than the user session timeout auth-user-session-ttl-minutes, which is currently {current} minutes.
-
-
+  serverPagination:
+    label: Server-side Pagination
+    description: By default Lists will fetch all resources and paginate in the browser (create the page given sorting and filtering settings). Change this setting to enable pagination server-side. This should help the responsiveness of the UI in systems with a lot of resources.
+    checkboxLabel: Enable Server-side Pagination
+    applicable: "This applies to the following resource types"
+    incompatibleDescription: "Server-side Pagination is incomaptible with Manual Refresh and Incremental Loading. Enabling this will disable them."
+    featureFlag: The Feature Flag `on-disk-steve-cache` must be enabled to use this feature
 banner:
   label: Fixed Banners
   settingName: Banners
diff --git a/shell/config/settings.ts b/shell/config/settings.ts
index 4678a39406..9effc7ab1e 100644
--- a/shell/config/settings.ts
+++ b/shell/config/settings.ts
@@ -1,5 +1,6 @@
 // Settings
 import { GC_DEFAULTS, GC_PREFERENCES } from '@shell/utils/gc/gc-types';
+import { PaginationSettings } from '@shell/types/resources/settings';
 
 interface GlobalSettingRuleset {
   name: string,
@@ -185,6 +186,7 @@ export interface PerfSettings {
   forceNsFilterV2: any;
   advancedWorker: {};
   kubeAPI: PerfSettingsKubeApi;
+  serverPagination: PaginationSettings;
 }
 
 export const DEFAULT_PERF_SETTING: PerfSettings = {
@@ -220,5 +222,20 @@ export const DEFAULT_PERF_SETTING: PerfSettings = {
        */
       notificationBlockList: ['299 - unknown field']
     }
+  },
+  serverPagination: {
+    enabled: false,
+    stores:  {
+      cluster: {
+        resources: {
+          enableAll:  false,
+          enableSome: {
+            enabled: ['configmap', 'secret', 'pod', 'node'],
+            generic: true,
+          }
+        }
+      }
+    }
   }
+
 };
diff --git a/shell/pages/c/_cluster/settings/performance.vue b/shell/pages/c/_cluster/settings/performance.vue
index 28348a7183..2fb2ff6337 100644
--- a/shell/pages/c/_cluster/settings/performance.vue
+++ b/shell/pages/c/_cluster/settings/performance.vue
@@ -8,17 +8,20 @@ import { MANAGEMENT } from '@shell/config/types';
 import { DEFAULT_PERF_SETTING, SETTING } from '@shell/config/settings';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import UnitInput from '@shell/components/form/UnitInput';
+import { STEVE_CACHE } from '@shell/store/features';
 
 const incompatible = {
-  incrementalLoading: ['forceNsFilterV2'],
-  manualRefresh:      ['forceNsFilterV2'],
+  incrementalLoading: ['forceNsFilterV2', 'serverPagination'],
+  manualRefresh:      ['forceNsFilterV2', 'serverPagination'],
   forceNsFilterV2:    ['incrementalLoading', 'manualRefresh'],
+  serverPagination:   ['incrementalLoading', 'manualRefresh'],
 };
 
 const l10n = {
   incrementalLoading: 'incrementalLoad',
   manualRefresh:      'manualRefresh',
   forceNsFilterV2:    'nsFiltering',
+  serverPagination:   'serverPagination'
 };
 
 export default {
@@ -76,6 +79,33 @@ export default {
 
     canSave() {
       return this.value.inactivity.enabled ? this.isInactivityThresholdValid : true;
+    },
+
+    steveCacheEnabled() {
+      return this.$store.getters['features/get'](STEVE_CACHE);
+    },
+
+    steveCacheApplicableResources() {
+      const storeResources = [];
+
+      Object.entries(this.value.serverPagination.stores).forEach(([store, settings]) => {
+        const resources = [];
+
+        if (settings.resources.enableAll) {
+          resources.push('All resources');
+        } else {
+          settings.resources.enableSome.enabled.forEach((resource) => {
+            resources.push(resource);
+          });
+          if (settings.resources.enableSome.generic) {
+            resources.push('generic lists');
+          }
+        }
+
+        storeResources.push(`${ store }: ${ resources.join(', ') }`);
+      });
+
+      return storeResources.join('. ');
     }
   },
 
@@ -151,6 +181,7 @@ export default {
   },
 };
 </script>
+
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else>
@@ -338,6 +369,35 @@ export default {
             </div>
           </div>
         </div>
+        <!-- Server Side Pagination -->
+        <div class="mt-40">
+          <h2>{{ t('performance.serverPagination.label') }}</h2>
+          <p>{{ t('performance.serverPagination.description') }}</p>
+          <Banner
+            color="error"
+            label-key="performance.experimental"
+          />
+          <Banner
+            v-if="!steveCacheEnabled"
+            color="warning"
+            label-key="performance.serverPagination.featureFlag"
+          />
+          <Checkbox
+            v-model="value.serverPagination.enabled"
+            :mode="mode"
+            :label="t('performance.serverPagination.checkboxLabel')"
+            class="mt-10 mb-20"
+            :primary="true"
+            :disabled="(!steveCacheEnabled && !value.serverPagination.enabled)"
+            @input="compatibleWarning('serverPagination', $event)"
+          />
+          <p :class="{ 'text-muted': !value.serverPagination.enabled }">
+            {{ t('performance.serverPagination.applicable') }}
+          </p>
+          <p :class="{ 'text-muted': !value.serverPagination.enabled }">
+            {{ steveCacheApplicableResources }}
+          </p>
+        </div>
         <!-- Force NS filter -->
         <div class="mt-40">
           <h2>{{ t('performance.nsFiltering.label') }}</h2>
@@ -391,6 +451,7 @@ export default {
     </div>
   </div>
 </template>
+
 <style scoped lang='scss'>
 .overlay {
   width: 100%;
diff --git a/shell/plugins/steve/__tests__/subscribe.spec.ts b/shell/plugins/steve/__tests__/subscribe.spec.ts
index 6c1aa49d2e..f7aa217ee4 100644
--- a/shell/plugins/steve/__tests__/subscribe.spec.ts
+++ b/shell/plugins/steve/__tests__/subscribe.spec.ts
@@ -10,7 +10,10 @@ describe('steve: subscribe', () => {
         inError:       () => false,
         watchStarted:  () => false,
       };
-      const rootGetters = { 'type-map/isSpoofed': () => false };
+      const rootGetters = {
+        'type-map/isSpoofed': () => false,
+        'features/get':       () => false,
+      };
 
       const type = 'test';
       const selector = undefined;
diff --git a/shell/plugins/steve/subscribe.js b/shell/plugins/steve/subscribe.js
index 073568feaa..b0b20dd008 100644
--- a/shell/plugins/steve/subscribe.js
+++ b/shell/plugins/steve/subscribe.js
@@ -34,6 +34,7 @@ import { waitFor } from '@shell/utils/async';
 import { WORKER_MODES } from './worker';
 import acceptOrRejectSocketMessage from './accept-or-reject-socket-message';
 import { BLANK_CLUSTER, STORE } from '@shell/store/store-types.js';
+import { STEVE_CACHE } from '@shell/store/features';
 
 // minimum length of time a disconnect notification is shown
 const MINIMUM_TIME_NOTIFIED = 3000;
@@ -402,9 +403,18 @@ const sharedActions = {
       return;
     }
 
-    if ( typeof revision === 'undefined' ) {
-      revision = getters.nextResourceVersion(type, id);
+    // This is temporary and will be removed once Part 3 of https://github.com/rancher/dashboard/pull/10349 is resolved by abckend
+    // Steve cache backed api does not return a revision, so `revision` here is always undefined
+    // Which means we find a revision within a resource itself and use it in the watch
+    // That revision is probably too old and results in a watch error
+    // Watch errors mean we make a http request to get latest revision (which is still missing) and try to re-watch with it...
+    // etc
+    if (!rootGetters['features/get']?.(STEVE_CACHE) && typeof revision === 'undefined') {
+      return undefined;
     }
+    // if ( typeof revision === 'undefined' ) {
+    //   revision = getters.nextResourceVersion(type, id);
+    // }
 
     const msg = { resourceType: type };
 
diff --git a/shell/store/features.js b/shell/store/features.js
index d169b837b2..0790eca3e8 100644
--- a/shell/store/features.js
+++ b/shell/store/features.js
@@ -2,8 +2,8 @@ import { MANAGEMENT } from '@shell/config/types';
 
 const definitions = {};
 
-export const create = function(name, def) {
-  definitions[name] = { def };
+export const create = function(name, defaultValue) {
+  definitions[name] = { def: defaultValue };
 
   return name;
 };
@@ -33,6 +33,7 @@ export const FLEET = create('continuous-delivery', true);
 export const HARVESTER = create('harvester', true);
 export const HARVESTER_CONTAINER = create('harvester-baremetal-container-workload', false);
 export const FLEET_WORKSPACE_BACK = create('provisioningv2-fleet-workspace-back-population', false);
+export const STEVE_CACHE = create('on-disk-steve-cache', false);
 
 // Not currently used.. no point defining ones we don't use
 // export const EMBEDDED_CLUSTER_API = create('embedded-cluster-api', true);
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index 74f693a35d..a6c5ce6f8d 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -12,22 +12,8 @@ import {
 import { PaginationArgs, PaginationParam, PaginationSort } from '@shell/types/store/pagination.types';
 import { sameArrayObjects } from '@shell/utils/array';
 import { isEqual } from '@shell/utils/object';
-
-// This are hardcoded atm, but will be changed via the `Performance` settings
-const settings: PaginationSettings = {
-  enabled: false,
-  stores:  {
-    cluster: {
-      resources: {
-        enableAll:  false,
-        enableSome: {
-          enabled: ['configmap', 'secret', 'pod', 'node'],
-          generic: true,
-        }
-      }
-    }
-  }
-};
+import { STEVE_CACHE } from '@shell/store/features';
+import { getPerformanceSetting } from '@shell/utils/settings';
 
 /**
  * Helper functions for server side pagination
@@ -40,6 +26,12 @@ class PaginationUtils {
    */
   validNsProjectFilters = [ALL, ALL_SYSTEM, ALL_USER, ALL_SYSTEM, NAMESPACE_FILTER_KINDS.NAMESPACE, NAMESPACE_FILTER_KINDS.PROJECT, NAMESPACED_YES, NAMESPACED_NO];
 
+  private getSettings({ rootGetters }: any): PaginationSettings {
+    const perf = getPerformanceSetting(rootGetters);
+
+    return perf.serverPagination;
+  }
+
   /**
    * Is pagination enabled at a global level or for a specific resource
    */
@@ -49,6 +41,13 @@ class PaginationUtils {
       id: string,
     }
   }) {
+    const settings = this.getSettings({ rootGetters });
+
+    // Cache must be enabled to support pagination api
+    if (!rootGetters['features/get'](STEVE_CACHE)) {
+      return false;
+    }
+
     // No setting, not enabled
     if (!settings?.enabled) {
       return false;

From 0ef7518c16a095152f6335586e069a3142f738cf Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 11 Apr 2024 10:50:37 +0100
Subject: [PATCH 12/71] Integrate pagination with configmaps in cis
 clusterscanbenchmark edit form Also - improved labeled select pagination -
 gate label select pagination functinality on steve cache being enabled

---
 shell/chart/rancher-backup/S3.vue             |  96 ++++-----------
 shell/components/PodSecurityAdmission.vue     |   2 +-
 .../form/LabeledSelect/LabeledSelect.utils.ts |   1 -
 shell/components/form/LabeledSelect/index.vue |  12 +-
 .../labeled-select-pagination.ts              |  50 +++-----
 .../LabeledSelect/labeled-select.utils.ts     | 111 ++++++++++++++++++
 shell/config/pod-security-admission.ts        |   2 +-
 .../cis.cattle.io.clusterscanbenchmark.vue    |  40 ++++++-
 ...securityadmissionconfigurationtemplate.vue |   2 +-
 shell/mixins/labeled-form-element.ts          |  22 +++-
 shell/types/components/labeledSelect.ts       |  41 +++++++
 .../{ => resources}/pod-security-admission.ts |   0
 .../__tests__/pod-security-admission.test.ts  |   2 +-
 shell/utils/pagination-utils.ts               |  15 ++-
 shell/utils/pod-security-admission.ts         |   2 +-
 15 files changed, 274 insertions(+), 124 deletions(-)
 delete mode 100644 shell/components/form/LabeledSelect/LabeledSelect.utils.ts
 create mode 100644 shell/components/form/LabeledSelect/labeled-select.utils.ts
 create mode 100644 shell/types/components/labeledSelect.ts
 rename shell/types/{ => resources}/pod-security-admission.ts (100%)

diff --git a/shell/chart/rancher-backup/S3.vue b/shell/chart/rancher-backup/S3.vue
index b1cb97215f..61cdb86864 100644
--- a/shell/chart/rancher-backup/S3.vue
+++ b/shell/chart/rancher-backup/S3.vue
@@ -5,7 +5,9 @@ import FileSelector from '@shell/components/form/FileSelector';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { mapGetters } from 'vuex';
 import { SECRET } from '@shell/config/types';
-import { PaginationParamFilter } from '~/shell/types/store/pagination.types';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { labelSelectPaginationFunction } from '@shell/components/form/LabeledSelect/labeled-select.utils';
+import paginationUtils from '@shell/utils/pagination-utils';
 
 export default {
   components: {
@@ -27,9 +29,15 @@ export default {
       default: 'create'
     },
 
-    secrets: {
-      type:    Array,
-      default: () => []
+  },
+
+  data() {
+    return { secrets: [] };
+  },
+
+  async fetch() {
+    if (!paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+      this.secrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
     }
   },
 
@@ -81,74 +89,19 @@ export default {
     },
 
     /**
-     * Given inputs make a paginated request and return the result
+     * @param [PaginateFnOptions] opts
+     * @returns PaginateFnResponse
      */
-    async paginateSecrets({
-      pageContent,
-      page,
-      filter,
-      pageSize,
-      resetPage
-    }) {
-      try {
-        // Construct params for request
-        const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+    async paginateSecrets(opts) {
+      const { filter } = opts;
+      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
 
-        // Of type {@link ActionFindPageArgs}
-        const opt = {
-          pagination: {
-            page,
-            pageSize,
-            sort: [{ asc: true, field: 'metadata.namespace' }, { asc: true, field: 'metadata.name' }],
-            filters
-          },
-        };
-        const url = this.$store.getters['cluster/urlFor'](SECRET, null, opt);
-
-        // Make request (note we're not bothering to persist anything to the store, response is transient)
-        const res = await this.$store.dispatch('cluster/request', { url });
-        const options = resetPage ? res.data : pageContent.concat(res.data);
-
-        // Create the new option collection by...
-        const namespaced = {};
-
-        // ... grouping by namespace
-        options.forEach((secret) => {
-          const ns = secret.metadata.namespace;
-
-          if (secret.kind === 'group') { // this could contain a previous option set which contains groups
-            return;
-          }
-          if (!namespaced[ns]) {
-            namespaced[ns] = [];
-          }
-          namespaced[ns].push(secret);
-        });
-
-        let grouped = [];
-
-        // ... then sort groups by name and combined into a single array
-        Object.keys(namespaced).sort().forEach((ns) => {
-          grouped.push({
-            kind:     'group',
-            icon:     'icon-namespace',
-            id:       ns,
-            metadata: { name: ns },
-            disabled: true,
-          });
-          grouped = grouped.concat(namespaced[ns]);
-        });
-
-        return {
-          page:  grouped,
-          pages: res.pages,
-          total: res.count
-        };
-      } catch (err) {
-        console.error(err); // eslint-disable-line no-console
-      }
-
-      return { page: [] };
+      return labelSelectPaginationFunction({
+        opts,
+        filters,
+        type: SECRET,
+        ctx:  { getters: this.$store.getters, dispatch: this.$store.dispatch }
+      });
     },
   },
 
@@ -171,9 +124,8 @@ export default {
           :get-option-label="opt=>opt.metadata.name || ''"
           option-key="id"
           :mode="mode"
+          :options="secrets"
           :paginate="paginateSecrets"
-          :searchable="true"
-          :filterable="false"
           :label="t('backupRestoreOperator.s3.credentialSecretName')"
         />
       </div>
diff --git a/shell/components/PodSecurityAdmission.vue b/shell/components/PodSecurityAdmission.vue
index 78aebc00c7..7480e3fd90 100644
--- a/shell/components/PodSecurityAdmission.vue
+++ b/shell/components/PodSecurityAdmission.vue
@@ -4,7 +4,7 @@ import { _VIEW, _CREATE } from '@shell/config/query-params';
 import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
-import { PSADimension, PSAMode } from '@shell/types/pod-security-admission';
+import { PSADimension, PSAMode } from '@shell/types/resources/pod-security-admission';
 import {
   PSADefaultLevel,
   PSADefaultVersion, PSADimensions, PSALevels, PSAModes
diff --git a/shell/components/form/LabeledSelect/LabeledSelect.utils.ts b/shell/components/form/LabeledSelect/LabeledSelect.utils.ts
deleted file mode 100644
index 4bc7173f6c..0000000000
--- a/shell/components/form/LabeledSelect/LabeledSelect.utils.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const LABEL_SELECT_NOT_OPTION_KINDS = ['group', 'divider'];
diff --git a/shell/components/form/LabeledSelect/index.vue b/shell/components/form/LabeledSelect/index.vue
index 21a38ac93a..8adbfff81f 100644
--- a/shell/components/form/LabeledSelect/index.vue
+++ b/shell/components/form/LabeledSelect/index.vue
@@ -6,7 +6,7 @@ import { LabeledTooltip } from '@components/LabeledTooltip';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
 import LabeledSelectPagination from './labeled-select-pagination';
-import { LABEL_SELECT_NOT_OPTION_KINDS } from './LabeledSelect.utils';
+import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSelect';
 
 export default {
   name: 'LabeledSelect',
@@ -113,12 +113,12 @@ export default {
 
     hasGroupIcon() {
       // Required for option.icon. Note that we only apply if paginating as well (there might be 2 x performance issues with 2k entries. one to iterate through this list, the other with conditional class per entry in dom)
-      return this.paginate ? !!this._options.find((o) => o.kind === 'group' && !!o.icon) : false;
+      return this.canPaginate ? !!this._options.find((o) => o.kind === 'group' && !!o.icon) : false;
     },
 
     _options() {
       // If we're paginated show the page as provided by `paginate`. See label-select-pagination mixin
-      return this.paginate ? this.page : this.options;
+      return this.canPaginate ? this.page : this.options;
     }
   },
 
@@ -210,7 +210,7 @@ export default {
     },
 
     onSearch(newSearchString) {
-      if (this.paginate) {
+      if (this.canPaginate) {
         this.setPaginationFilter(newSearchString);
       } else {
         if (newSearchString) {
@@ -281,6 +281,7 @@ export default {
       :map-keydown="mappedKeys"
       :placeholder="placeholder"
       :reduce="(x) => reduce(x)"
+      :filterable="isFilterable"
       :searchable="isSearchable"
       :selectable="selectable"
       :value="value != null && !loading ? value : ''"
@@ -339,8 +340,9 @@ export default {
           v-bind="scope"
         />
       </template>
+
       <div
-        v-if="paginate && totalResults"
+        v-if="canPaginate && totalResults"
         slot="list-footer"
         class="pagination-slot"
       >
diff --git a/shell/components/form/LabeledSelect/labeled-select-pagination.ts b/shell/components/form/LabeledSelect/labeled-select-pagination.ts
index 78a8adb0a9..3e12ad8d8f 100644
--- a/shell/components/form/LabeledSelect/labeled-select-pagination.ts
+++ b/shell/components/form/LabeledSelect/labeled-select-pagination.ts
@@ -1,7 +1,12 @@
-import { LABEL_SELECT_NOT_OPTION_KINDS } from './LabeledSelect.utils';
 import { debounce } from 'lodash';
-import Vue, { PropType, defineComponent } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { ComputedOptions, MethodOptions } from 'vue/types/v3-component-options';
+import { LabelSelectPaginateFn, LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSelect';
+import paginationUtils from '@shell/utils/pagination-utils';
+
+interface Props {
+  paginate?: LabelSelectPaginateFn
+}
 
 interface Data {
   currentPage: number,
@@ -18,7 +23,7 @@ interface Data {
 }
 
 interface Computed extends ComputedOptions {
-  // _options: () => any,
+  canPaginate: () => boolean,
 
   canLoadMore: () => boolean,
 
@@ -33,36 +38,11 @@ interface Methods extends MethodOptions {
   requestPagination: () => Promise<any>;
 }
 
-/**
- * Make a http request to fetch paginated results
- *
- * @param [array] pageContent Current page
- * @param [number] page page number to fetch
- * @param [number] pageSize number of items in the page to fetch
- * @param [string] filter pagination filter. this is just a text string associated with user entered text
- * @param [boolean] resetPage true if the result should only contain the fetched page, false if the result should be added to the pageContent
- */
-type PaginateFn<T = any> = (opts: {
-  pageContent: T[],
-  page: number,
-  pageSize: number,
-  filter: string,
-  resetPage: boolean,
-}) => Promise<{
-  page: T[],
-  pages: number,
-  total: number
-}>
-
-interface Props {
-  paginate?: PaginateFn
-}
-
 export default defineComponent<Props, any, Data, Computed, Methods>({
   props: {
     paginate: {
       default: null,
-      type:    Function as PropType<PaginateFn>,
+      type:    Function as PropType<LabelSelectPaginateFn>,
     }
   },
 
@@ -84,23 +64,27 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
   },
 
   async mounted() {
-    if (this.paginate) {
+    if (this.canPaginate) {
       await this.requestPagination();
     }
   },
 
   computed: {
+    canPaginate() {
+      return !!this.paginate && paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters });
+    },
+
     canLoadMore() {
       return this.pages > this.currentPage;
     },
 
     optionsInPage() {
       // Number of genuine options (not groups, dividers, etc)
-      return this.paginate ? this._options.filter((o: any) => !LABEL_SELECT_NOT_OPTION_KINDS.includes(o.kind)).length : 0;
+      return this.canPaginate ? this._options.filter((o: any) => !LABEL_SELECT_NOT_OPTION_KINDS.includes(o.kind)).length : 0;
     },
 
     optionCounts() {
-      if (!this.paginate || this.optionsInPage === this.totalResults) {
+      if (!this.canPaginate || this.optionsInPage === this.totalResults) {
         return '';
       }
 
@@ -126,7 +110,7 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
 
     async requestPagination(resetPage = false) {
       this.paginating = true;
-      const paginate: PaginateFn = this.paginate as PaginateFn; // Checking is done via prop
+      const paginate: LabelSelectPaginateFn = this.paginate as LabelSelectPaginateFn; // Checking is done via prop
 
       const {
         page,
diff --git a/shell/components/form/LabeledSelect/labeled-select.utils.ts b/shell/components/form/LabeledSelect/labeled-select.utils.ts
new file mode 100644
index 0000000000..7513faacc0
--- /dev/null
+++ b/shell/components/form/LabeledSelect/labeled-select.utils.ts
@@ -0,0 +1,111 @@
+import { LabelSelectPaginateFnOptions, LabelSelectPaginateFnResponse } from '@shell/types/components/labeledSelect';
+import { PaginationArgs, PaginationParam, PaginationSort } from '@shell/types/store/pagination.types';
+
+interface lSPFOptions<T> {
+  opts: LabelSelectPaginateFnOptions<T>,
+  /**
+   * Resource type
+   */
+  type: string,
+  /**
+   * Store things
+   */
+  ctx: { getters: any, dispatch: any}
+  /**
+   * Filters to apply. This mostly covers the text a user has entered, but could be other things like namespace
+   */
+  filters?: PaginationParam[],
+  /**
+   * How to sort the response
+   */
+  sort?: PaginationSort[],
+  /**
+   * Vuex store name
+   */
+  store?: string,
+  /**
+   * True if the options returned should be grouped by namespace
+   */
+  groupByNamespace?: boolean,
+}
+
+/**
+ * This is a helper function to cover common functions that could happen when a LabelSelect requests a new page
+ */
+export async function labelSelectPaginationFunction<T>({
+  opts,
+  type,
+  ctx,
+  filters = [],
+  sort = [{ asc: true, field: 'metadata.namespace' }, { asc: true, field: 'metadata.name' }],
+  store = 'cluster',
+  groupByNamespace = true,
+}: lSPFOptions<T>): Promise<LabelSelectPaginateFnResponse<T>> {
+  const {
+    pageContent, page, pageSize, resetPage
+  } = opts;
+
+  try {
+    // Construct params for request
+
+    const pagination = new PaginationArgs({
+      page,
+      pageSize,
+      sort,
+      filters
+    });
+    const url = ctx.getters[`${ store }/urlFor`](type, null, { pagination });
+
+    // Make request (note we're not bothering to persist anything to the store, response is transient)
+    const res = await ctx.dispatch(`${ store }/request`, { url });
+    const options = resetPage ? res.data : pageContent.concat(res.data);
+
+    // Create the new option collection by...
+    let resPage: any[];
+
+    if (groupByNamespace) {
+      // ... grouping by namespace
+      const namespaced: { [ns: string]: T[]} = {};
+
+      options.forEach((option: any) => {
+        const ns = option.metadata.namespace;
+
+        if (option.kind === 'group') { // this could contain a previous option set which contains groups
+          return;
+        }
+        if (!namespaced[ns]) {
+          namespaced[ns] = [];
+        }
+        namespaced[ns].push(option);
+      });
+
+      resPage = [];
+
+      // ... then sort groups by name and combined into a single array
+      Object.keys(namespaced).sort().forEach((ns) => {
+        resPage.push({
+          kind:     'group',
+          icon:     'icon-namespace',
+          id:       ns,
+          metadata: { name: ns },
+          disabled: true,
+        });
+        resPage = resPage.concat(namespaced[ns]);
+      });
+    } else {
+      resPage = options;
+    }
+
+    return {
+      page:  resPage,
+      pages: res.pages,
+      total: res.count
+    };
+  } catch (err) {
+    console.error(err); // eslint-disable-line no-console
+  }
+
+  return {
+    page: [], pages: 0, total: 0
+  };
+}
diff --git a/shell/config/pod-security-admission.ts b/shell/config/pod-security-admission.ts
index e265eed448..7e29176557 100644
--- a/shell/config/pod-security-admission.ts
+++ b/shell/config/pod-security-admission.ts
@@ -1,4 +1,4 @@
-import { PSADimension, PSALevel, PSAMode } from '@shell/types/pod-security-admission';
+import { PSADimension, PSALevel, PSAMode } from 'types/resources/pod-security-admission';
 
 /**
  * All the PSA labels are created with this prefix, so we can use this to identify them
diff --git a/shell/edit/cis.cattle.io.clusterscanbenchmark.vue b/shell/edit/cis.cattle.io.clusterscanbenchmark.vue
index f953f2339f..b3dd58ea1f 100644
--- a/shell/edit/cis.cattle.io.clusterscanbenchmark.vue
+++ b/shell/edit/cis.cattle.io.clusterscanbenchmark.vue
@@ -6,6 +6,10 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import { mapGetters } from 'vuex';
 import { CONFIG_MAP } from '@shell/config/types';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { labelSelectPaginationFunction } from '@shell/components/form/LabeledSelect/labeled-select.utils';
+import paginationUtils from '@shell/utils/pagination-utils';
+
 const providers = ['aks', 'docker', 'eks', 'gke', 'k3s', 'minikube', 'rke-windows', 'rke', 'rke2'];
 
 export default {
@@ -30,7 +34,9 @@ export default {
   },
 
   async fetch() {
-    this.configMaps = await this.$store.dispatch('cluster/findAll', { type: CONFIG_MAP });
+    if (!paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+      this.configMaps = await this.$store.dispatch('cluster/findAll', { type: CONFIG_MAP });
+    }
   },
 
   data() {
@@ -55,7 +61,33 @@ export default {
         this.$set(this.value.spec, 'customBenchmarkConfigMapNamespace', namespace);
       }
     },
-    ...mapGetters({ t: 'i18n/t' })
+
+    ...mapGetters({ t: 'i18n/t' }),
+  },
+
+  methods: {
+    /**
+     * @param [PaginateFnOptions] opts
+     * @returns PaginateFnResponse
+     */
+    async paginateConfigMap(opts) {
+      const { filter } = opts;
+      const filters = !!filter ? [PaginationParamFilter.createMultipleFields([
+        {
+          field: 'metadata.name', value: filter, equals: true
+        },
+        {
+          field: 'metadata.namespace', value: filter, equals: true
+        },
+      ])] : [];
+
+      return labelSelectPaginationFunction({
+        opts,
+        filters,
+        type: CONFIG_MAP,
+        ctx:  { getters: this.$store.getters, dispatch: this.$store.dispatch }
+      });
+    },
   }
 };
 </script>
@@ -92,9 +124,11 @@ export default {
         <LabeledSelect
           v-model="customConfigMap"
           :clearable="true"
-          option-label="id"
+          :get-option-label="opt=>canPaginate ? (opt.metadata.name || '') : opt.id"
+          option-key="id"
           :options="configMaps"
           :mode="mode"
+          :paginate="paginateConfigMap"
           :label="t('cis.customConfigMap')"
         />
       </div>
diff --git a/shell/edit/management.cattle.io.podsecurityadmissionconfigurationtemplate.vue b/shell/edit/management.cattle.io.podsecurityadmissionconfigurationtemplate.vue
index 5c6058947d..7a17a3b5db 100644
--- a/shell/edit/management.cattle.io.podsecurityadmissionconfigurationtemplate.vue
+++ b/shell/edit/management.cattle.io.podsecurityadmissionconfigurationtemplate.vue
@@ -5,7 +5,7 @@ import CruResource from '@shell/components/CruResource.vue';
 import PodSecurityAdmission from '@shell/components/PodSecurityAdmission.vue';
 import Loading from '@shell/components/Loading.vue';
 import NameNsDescription from '@shell/components/form/NameNsDescription.vue';
-import { PSA, PSAConfig, PSADefaults, PSAExemptions } from '@shell/types/pod-security-admission';
+import { PSA, PSAConfig, PSADefaults, PSAExemptions } from '@shell/types/resources/pod-security-admission';
 import { PSADimensions } from '@shell/config/pod-security-admission';
 import { MANAGEMENT } from '@shell/config/types';
 
diff --git a/shell/mixins/labeled-form-element.ts b/shell/mixins/labeled-form-element.ts
index 579c79ea73..49c6ea86f3 100644
--- a/shell/mixins/labeled-form-element.ts
+++ b/shell/mixins/labeled-form-element.ts
@@ -77,6 +77,11 @@ export default Vue.extend({
       type:    Boolean
     },
 
+    filterable: {
+      default: true,
+      type:    Boolean
+    },
+
     rules: {
       default:   () => [],
       type:      Array,
@@ -116,7 +121,11 @@ export default Vue.extend({
     },
 
     isSearchable(): boolean {
-      const { searchable } = this;
+      const { searchable, canPaginate } = this as any; // This will be resolved when we migrate from mixin
+
+      if (canPaginate) {
+        return true;
+      }
       const options = ( this.options || [] );
 
       if (searchable || options.length >= 10) {
@@ -125,6 +134,17 @@ export default Vue.extend({
 
       return false;
     },
+
+    isFilterable(): boolean {
+      const { filterable, canPaginate } = this as any; // This will be resolved when we migrate from mixin
+
+      if (canPaginate) {
+        return false;
+      }
+
+      return filterable;
+    },
+
     validationMessage(): string | undefined {
       // we want to grab the required rule passed in if we can but if it's not there then we can just grab it from the formRulesGenerator
       const requiredRule = this.rules.find((rule: any) => rule?.name === 'required') as Function;
diff --git a/shell/types/components/labeledSelect.ts b/shell/types/components/labeledSelect.ts
new file mode 100644
index 0000000000..4fcaf460bc
--- /dev/null
+++ b/shell/types/components/labeledSelect.ts
@@ -0,0 +1,41 @@
+export const LABEL_SELECT_NOT_OPTION_KINDS = ['group', 'divider'];
+
+/**
+ * Options used When LabelSelect requests a new page
+ */
+export interface LabelSelectPaginateFnOptions<T = any> {
+  /**
+   * Current page
+   */
+  pageContent: T[],
+  /**
+   * page number to fetch
+   */
+  page: number,
+  /**
+   * number of items in the page to fetch
+   */
+  pageSize: number,
+  /**
+   * filter pagination filter. this is just a text string associated with user entered text
+   */
+  filter: string,
+  /**
+   * true if the result should only contain the fetched page, false if the result should be added to the pageContent
+   */
+  resetPage: boolean,
+}
+
+/**
+ * Response that LabelSelect needs when it's requested a new page
+ */
+export interface LabelSelectPaginateFnResponse<T = any> {
+  page: T[],
+  pages: number,
+  total: number
+}
+
+/**
+ * Function called when LabelSelect needs a new page
+ */
+export type LabelSelectPaginateFn<T = any> = (opts: LabelSelectPaginateFnOptions<T>) => Promise<LabelSelectPaginateFnResponse<T>>
diff --git a/shell/types/pod-security-admission.ts b/shell/types/resources/pod-security-admission.ts
similarity index 100%
rename from shell/types/pod-security-admission.ts
rename to shell/types/resources/pod-security-admission.ts
diff --git a/shell/utils/__tests__/pod-security-admission.test.ts b/shell/utils/__tests__/pod-security-admission.test.ts
index 4d7066e6e2..fd8077b074 100644
--- a/shell/utils/__tests__/pod-security-admission.test.ts
+++ b/shell/utils/__tests__/pod-security-admission.test.ts
@@ -1,4 +1,4 @@
-import { PSA } from '@shell/types/pod-security-admission';
+import { PSA } from 'types/resources/pod-security-admission';
 import { getPSATooltipsDescription } from '@shell/utils/pod-security-admission';
 
 describe('fX: getPSATooltipsDescription', () => {
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index a6c5ce6f8d..8ec0057520 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -12,7 +12,7 @@ import {
 import { PaginationArgs, PaginationParam, PaginationSort } from '@shell/types/store/pagination.types';
 import { sameArrayObjects } from '@shell/utils/array';
 import { isEqual } from '@shell/utils/object';
-import { STEVE_CACHE } from '@shell/store/features';
+// import { STEVE_CACHE } from '@shell/store/features';
 import { getPerformanceSetting } from '@shell/utils/settings';
 
 /**
@@ -32,6 +32,13 @@ class PaginationUtils {
     return perf.serverPagination;
   }
 
+  isSteveCacheEnabled({ rootGetters }: any): boolean {
+    // We always get Feature flags as part of start up (see `dispatch('features/loadServer')` in loadManagement)
+    // TODO: RC count / pages in api response is broken in image that provides cache FF, so just assume on for the moment
+    // return rootGetters['features/get'](STEVE_CACHE);
+    return false;
+  }
+
   /**
    * Is pagination enabled at a global level or for a specific resource
    */
@@ -41,13 +48,13 @@ class PaginationUtils {
       id: string,
     }
   }) {
-    const settings = this.getSettings({ rootGetters });
-
     // Cache must be enabled to support pagination api
-    if (!rootGetters['features/get'](STEVE_CACHE)) {
+    if (!this.isSteveCacheEnabled({ rootGetters })) {
       return false;
     }
 
+    const settings = this.getSettings({ rootGetters });
+
     // No setting, not enabled
     if (!settings?.enabled) {
       return false;
diff --git a/shell/utils/pod-security-admission.ts b/shell/utils/pod-security-admission.ts
index 5d26c0cbbc..68cc00ac5a 100644
--- a/shell/utils/pod-security-admission.ts
+++ b/shell/utils/pod-security-admission.ts
@@ -1,7 +1,7 @@
 import { reduce, filter, keys } from 'lodash';
 import { PSALabelPrefix, PSALabelsNamespaces } from '@shell/config/pod-security-admission';
 import { camelToTitle } from '@shell/utils/string';
-import { PSA } from '@shell/types/pod-security-admission';
+import { PSA } from 'types/resources/pod-security-admission';
 
 /**
  * Return PSA labels present in the resource

From 75397c02f423af0b63a7b11918498e83c1d29e79 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 11 Apr 2024 18:02:11 +0100
Subject: [PATCH 13/71] - harvester machine-config - project monitoring (and
 bug fixes)

---
 .../machine-config/harvester.vue              | 21 +++++++-
 .../edit/helm.cattle.io.projecthelmchart.vue  | 49 ++++++++++++-------
 .../models/helm.cattle.io.projecthelmchart.js |  2 +-
 shell/plugins/steve/steve-pagination-utils.ts |  5 +-
 4 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/pkg/harvester-manager/machine-config/harvester.vue b/pkg/harvester-manager/machine-config/harvester.vue
index 03bc0cc45b..785defa25b 100644
--- a/pkg/harvester-manager/machine-config/harvester.vue
+++ b/pkg/harvester-manager/machine-config/harvester.vue
@@ -39,6 +39,8 @@ import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import { isValidMac } from '@shell/utils/validators/cidr';
 import { HCI as HCI_ANNOTATIONS, STORAGE } from '@shell/config/labels-annotations';
 import { isEqual } from 'lodash';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { PaginationArgs, PaginationFilterField, PaginationParam, PaginationParamFilter } from '~/shell/types/store/pagination.types';
 
 const STORAGE_NETWORK = 'storage-network.settings.harvesterhci.io';
 
@@ -128,10 +130,27 @@ export default {
       const url = `/k8s/clusters/${ clusterId }/v1`;
 
       if (clusterId) {
+        let configMapsUrl = `${ url }/${ CONFIG_MAP }s`;
+
+        if (paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+          const pagination = new PaginationArgs({
+            page:     1,
+            pageSize: -1,
+            filters:  [
+              PaginationParamFilter.createMultipleFields([
+                new PaginationFilterField({ field: `metadata.label["${ HCI_ANNOTATIONS.CLOUD_INIT }"]`, value: 'user' }),
+                new PaginationFilterField({ field: `metadata.label["${ HCI_ANNOTATIONS.CLOUD_INIT }"]`, value: 'network' })
+              ])
+            ]
+          });
+
+          configMapsUrl = this.$store.getters[`cluster/urlFor`](CONFIG_MAP, null, { pagination, url: configMapsUrl });
+        }
+
         const res = await allHashSettled({
           namespaces:   this.$store.dispatch('cluster/request', { url: `${ url }/${ NAMESPACE }s` }),
           images:       this.$store.dispatch('cluster/request', { url: `${ url }/${ HCI.IMAGE }s` }),
-          configMaps:   this.$store.dispatch('cluster/request', { url: `${ url }/${ CONFIG_MAP }s` }),
+          configMaps:   this.$store.dispatch('cluster/request', { url: configMapsUrl }),
           networks:     this.$store.dispatch('cluster/request', { url: `${ url }/k8s.cni.cncf.io.network-attachment-definitions` }),
           storageClass: this.$store.dispatch('cluster/request', { url: `${ url }/${ STORAGE_CLASS }es` }),
           settings:     this.$store.dispatch('cluster/request', { url: `${ url }/${ MANAGEMENT.SETTING }s` })
diff --git a/shell/edit/helm.cattle.io.projecthelmchart.vue b/shell/edit/helm.cattle.io.projecthelmchart.vue
index 1d3a352062..4e143fda71 100644
--- a/shell/edit/helm.cattle.io.projecthelmchart.vue
+++ b/shell/edit/helm.cattle.io.projecthelmchart.vue
@@ -31,12 +31,7 @@ export default {
   async fetch() {
     await this.$store.dispatch('catalog/load');
     const inStore = this.$store.getters['currentStore'](NAMESPACE);
-
-    // this seems excessive but if we're gonna pull up specific configMaps we need then we need the configmaps to be in the store.
-    // ToDo: try to find a better way of loading these or just load the ones we need
-    await this.$store.dispatch(`${ inStore }/findAll`, { type: CONFIG_MAP });
-
-    const federatorSystemNamespacesConfigMap = await this.getConfigMap('cattle-monitoring-system/prometheus-federator-system-namespaces');
+    const federatorSystemNamespacesConfigMap = await this.$store.dispatch('cluster/find', { type: CONFIG_MAP, id: 'cattle-monitoring-system/prometheus-federator-system-namespaces' });
 
     this.systemNamespaces = JSON.parse(federatorSystemNamespacesConfigMap?.data?.['system-namespaces.json']);
 
@@ -53,22 +48,40 @@ export default {
     }
 
     return {
-      systemNamespaces: null,
-      namespaces:       [],
-      loading:          true
+      systemNamespaces:           null,
+      namespaces:                 [],
+      loading:                    true,
+      inStore:                    this.$store.getters['currentStore'](),
+      selectedNamespaceQuestions: null,
     };
   },
 
+  watch: {
+    /**
+     * Given the current namespace, fetch a specific secret from within which will contain a questions.yaml
+     */
+    async currentNamespace(neu, old) {
+      if (!neu) {
+        return;
+      }
+
+      const configMapRelationship = neu.metadata?.relationships.find((relationship) => relationship?.toType === CONFIG_MAP);
+
+      if (!configMapRelationship?.toId) {
+        return;
+      }
+
+      const res = await this.$store.dispatch(`${ this.inStore }/find`, { type: CONFIG_MAP, id: configMapRelationship.toId });
+      const questionsYaml = res?.data?.['questions.yaml'];
+
+      if (!questionsYaml) {
+        return;
+      }
+      this.selectedNamespaceQuestions = jsyaml.load(questionsYaml)?.questions;
+    }
+  },
+
   computed: {
-    selectedNamespaceQuestions() {
-      const inStore = this.$store.getters['currentStore']();
-
-      const configMapRelationship = this.currentNamespace?.metadata?.relationships.find((relationship) => relationship?.toType === 'configmap');
-
-      const questionsYaml = this.$store.getters[`${ inStore }/byId`](configMapRelationship?.toType, configMapRelationship?.toId)?.data?.['questions.yaml'];
-
-      return jsyaml.load(questionsYaml)?.questions;
-    },
     currentNamespace() {
       return this.namespaces.find((namespace) => namespace.id === this.value?.metadata?.namespace);
     }
diff --git a/shell/models/helm.cattle.io.projecthelmchart.js b/shell/models/helm.cattle.io.projecthelmchart.js
index d314de697f..95a0aec531 100644
--- a/shell/models/helm.cattle.io.projecthelmchart.js
+++ b/shell/models/helm.cattle.io.projecthelmchart.js
@@ -22,7 +22,7 @@ export default class ProjectHelmChart extends SteveModel {
     const clusterId = this.$rootGetters['currentCluster']?.id;
     const project = this.$rootGetters['management/byId'](MANAGEMENT.PROJECT, `${ clusterId }/${ this.projectId }`);
 
-    return project.spec.displayName;
+    return project?.spec.displayName;
   }
 
   get namespaces() {
diff --git a/shell/plugins/steve/steve-pagination-utils.ts b/shell/plugins/steve/steve-pagination-utils.ts
index dfc76c4277..ae4c86931d 100644
--- a/shell/plugins/steve/steve-pagination-utils.ts
+++ b/shell/plugins/steve/steve-pagination-utils.ts
@@ -3,7 +3,7 @@ import { PaginationParam, PaginationFilterField, PaginationParamProjectOrNamespa
 import { NAMESPACE_FILTER_ALL_SYSTEM, NAMESPACE_FILTER_ALL_USER, NAMESPACE_FILTER_P_FULL_PREFIX } from '@shell/utils/namespace-filter';
 import Namespace from '@shell/models/namespace';
 import { uniq } from '@shell/utils/array';
-import { MANAGEMENT, NODE, POD } from '@shell/config/types';
+import { CONFIG_MAP, MANAGEMENT, NODE, POD } from '@shell/config/types';
 import { Schema } from 'plugins/steve/schema';
 
 class NamespaceProjectFilters {
@@ -117,6 +117,9 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     ],
     [MANAGEMENT.NODE]: [
       { field: 'status.nodeName' }
+    ],
+    [CONFIG_MAP]: [
+      { field: 'metadata.labels' }
     ]
   }
 

From 40283cc61abf5946c12981ea61b9a2567c40c195 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Fri, 12 Apr 2024 11:58:19 +0100
Subject: [PATCH 14/71] Disable workload screen if vai cache is on - temp step
 until we get new overview

---
 shell/config/product/explorer.js |  3 +++
 shell/store/type-map.js          | 14 ++++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/shell/config/product/explorer.js b/shell/config/product/explorer.js
index cdd9c4ecf7..d73794c611 100644
--- a/shell/config/product/explorer.js
+++ b/shell/config/product/explorer.js
@@ -28,6 +28,7 @@ import {
 } from '@shell/config/pagination-table-headers';
 
 import { COLUMN_BREAKPOINTS } from '@shell/types/store/type-map';
+import { STEVE_CACHE } from 'store/features';
 
 export const NAME = 'explorer';
 
@@ -414,6 +415,8 @@ export function init(store) {
     name:           WORKLOAD,
     weight:         99,
     icon:           'folder',
+    // Workloads fetch ALL resources of ALL resource types... which scales badly. Until this is replaced by an overview page disable entirely
+    ifFeature:      `!${ STEVE_CACHE }`,
     ifHaveSubTypes: Object.values(WORKLOAD_TYPES),
     route:          {
       name:   'c-cluster-product-resource',
diff --git a/shell/store/type-map.js b/shell/store/type-map.js
index f88466cb67..a03c094222 100644
--- a/shell/store/type-map.js
+++ b/shell/store/type-map.js
@@ -1007,8 +1007,18 @@ export const getters = {
             continue;
           }
 
-          if (item.ifFeature && !rootGetters['features/get'](item.ifFeature)) {
-            continue;
+          if (item.ifFeature) {
+            if (item.ifFeature[0] === '!') {
+              const feature = item.ifFeature.replace('!', '');
+
+              if (rootGetters['features/get'](feature)) {
+                continue;
+              }
+            } else {
+              if (!rootGetters['features/get'](item.ifFeature)) {
+                continue;
+              }
+            }
           }
 
           if (virtSpoofedModes.includes(TYPE_MODES.BASIC) && !getters.groupForBasicType(product, id) ) {

From d8f6dfa08625d11525a538808ac712dedd8443bc Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Fri, 12 Apr 2024 15:56:26 +0100
Subject: [PATCH 15/71] TODOs and TEST

---
 .../form/SelectOrCreateAuthSecret.vue         | 94 +++++++++++--------
 shell/plugins/steve/actions.js                |  4 +
 shell/utils/pagination-utils.ts               |  6 +-
 3 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index e630d0a5ac..dc899b213e 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -7,6 +7,8 @@ import { SECRET_TYPES } from '@shell/config/secret';
 import { base64Encode } from '@shell/utils/crypto';
 import { addObjects, insertAt } from '@shell/utils/array';
 import { sortBy } from '@shell/utils/sort';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { PaginationArgs, PaginationFilterField, PaginationParamFilter } from '~/shell/types/store/pagination.types';
 
 export default {
   name: 'SelectOrCreateAuthSecret',
@@ -47,6 +49,9 @@ export default {
       required: true,
     },
 
+    /**
+     * Limit the selection of an existing secret to the namespace provided
+     */
     limitToNamespace: {
       type:    Boolean,
       default: true,
@@ -123,12 +128,7 @@ export default {
 
   async fetch() {
     if ( (this.allowSsh || this.allowBasic || this.allowRke) && this.$store.getters[`${ this.inStore }/schemaFor`](SECRET) ) {
-      // Avoid an async call and loading screen if already loaded by someone else
-      if ( this.$store.getters[`${ this.inStore }/haveAll`](SECRET) ) {
-        this.allSecrets = this.$store.getters[`${ this.inStore }/all`](SECRET);
-      } else {
-        this.allSecrets = await this.$store.dispatch(`${ this.inStore }/findAll`, { type: SECRET });
-      }
+      this.filteredSecrets = await this.fetchSecrets();
     }
 
     if ( this.allowS3 && this.$store.getters['rancher/canList'](NORMAN.CLOUD_CREDENTIAL) ) {
@@ -168,32 +168,23 @@ export default {
 
   data(props) {
     return {
-      allCloudCreds: [],
-      allSecrets:    [],
-      selected:      null,
+      allCloudCreds:   [],
+      filteredSecrets: [],
+      selected:        null,
 
       publicKey:  '',
       privateKey: '',
-      uniqueId:   new Date().getTime() // Allows form state to be individually tracked if the form is in a list
+      uniqueId:   new Date().getTime(), // Allows form state to be individually tracked if the form is in a list,
+
+      SSH:   AUTH_TYPE._SSH,
+      BASIC: AUTH_TYPE._BASIC,
+      S3:    AUTH_TYPE._S3,
     };
   },
 
   computed: {
-    _SSH() {
-      return AUTH_TYPE._SSH;
-    },
-
-    _BASIC() {
-      return AUTH_TYPE._BASIC;
-    },
-
-    _S3() {
-      return AUTH_TYPE._S3;
-    },
-
-    options() {
+    secretTypes() {
       const types = [];
-      const keys = [];
 
       if ( this.allowSsh ) {
         types.push(SECRET_TYPES.SSH);
@@ -207,23 +198,21 @@ export default {
         types.push(SECRET_TYPES.RKE_AUTH_CONFIG);
       }
 
-      let out = this.allSecrets
+      return types;
+    },
+
+    options() {
+      if (!this.filteredSecrets) {
+        return [];
+      }
+      let out = this.filteredSecrets
         .filter((x) => this.namespace && this.limitToNamespace ? x.metadata.namespace === this.namespace : true)
         .filter((x) => {
           // Must match one of the types if given
-          if ( types.length && !types.includes(x._type) ) {
+          if ( this.secretTypes.length && !this.secretTypes.includes(x._type) ) {
             return false;
           }
 
-          // Must match ALL of the keys if given
-          if ( keys.length ) {
-            const dataKeys = Object.keys(x.data || {});
-
-            if ( !keys.every((key) => dataKeys.includes(key)) ) {
-              return false;
-            }
-          }
-
           return true;
         }).map((x) => {
           const {
@@ -369,6 +358,35 @@ export default {
   },
 
   methods: {
+    // TODO: RC move this to other PR
+    // TODO: RC unit tests
+    async fetchSecrets() {
+      const namespaceFilter = this.namespace && this.limitToNamespace ? this.namespace : '';
+
+      if (paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+        // Of type ActionFindPageArgs
+        const findPageArgs = {
+          namespaced: namespaceFilter,
+          pagination: new PaginationArgs({
+            pageSize: -1,
+            filters:  [
+              PaginationParamFilter.createMultipleFields(this.secretTypes.map((t) => {
+                return new PaginationFilterField({ field: 'metadata.fields.2', value: t });
+              }))
+            ]
+          }),
+        };
+
+        return await this.$store.dispatch(`${ this.inStore }/findPage`, { type: SECRET, opt: findPageArgs });
+      } else {
+        // When this is ripped out some of the additional filtering in `options` can be removed
+        return await this.$store.dispatch(`${ this.inStore }/findAll`, {
+          type: SECRET,
+          opt:  { namespaced: namespaceFilter } // TODO: RC test
+        });
+      }
+    },
+
     updateKeyVal() {
       if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(this.selected)) {
         this.privateKey = '';
@@ -485,7 +503,7 @@ export default {
           :selectable="option => !option.disabled"
         />
       </div>
-      <template v-if="selected === _SSH">
+      <template v-if="selected === SSH">
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
@@ -505,7 +523,7 @@ export default {
           />
         </div>
       </template>
-      <template v-else-if="selected === _BASIC">
+      <template v-else-if="selected === BASIC">
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
@@ -524,7 +542,7 @@ export default {
           />
         </div>
       </template>
-      <template v-else-if="selected === _S3">
+      <template v-else-if="selected === S3">
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
diff --git a/shell/plugins/steve/actions.js b/shell/plugins/steve/actions.js
index 1ba53de2c2..19f9310113 100644
--- a/shell/plugins/steve/actions.js
+++ b/shell/plugins/steve/actions.js
@@ -20,6 +20,10 @@ export default {
   async request({ state, dispatch, rootGetters }, pOpt ) {
     const opt = pOpt.opt || pOpt;
 
+    if (opt.url.indexOf('/v1/configmaps/cattle-monitoring-system/prometheus-federator-system-namespaces?exclude=metadata.managedFields') >= 1) {
+      debugger;
+    }
+
     const spoofedRes = await handleSpoofedRequest(rootGetters, 'cluster', opt);
 
     if (spoofedRes) {
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index 8ec0057520..298272fa46 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -36,7 +36,7 @@ class PaginationUtils {
     // We always get Feature flags as part of start up (see `dispatch('features/loadServer')` in loadManagement)
     // TODO: RC count / pages in api response is broken in image that provides cache FF, so just assume on for the moment
     // return rootGetters['features/get'](STEVE_CACHE);
-    return false;
+    return true;
   }
 
   /**
@@ -53,7 +53,8 @@ class PaginationUtils {
       return false;
     }
 
-    const settings = this.getSettings({ rootGetters });
+    // const settings = this.getSettings({ rootGetters });
+    const settings = { enabled: true, stores: { cluster: { resources: { enableAll: true } } } };
 
     // No setting, not enabled
     if (!settings?.enabled) {
@@ -65,6 +66,7 @@ class PaginationUtils {
       return false;
     }
 
+    // const storeSettings = settings.stores?.[enabledFor.store];
     const storeSettings = settings.stores?.[enabledFor.store];
 
     // No pagination setting for target store, not enabled

From c2ebf7ded3ebf8744df7182e98324a07f14f41c6 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 18 Apr 2024 17:35:06 +0100
Subject: [PATCH 16/71] Conditionally remove fetch of all secrets from
 SelectOrCreateAuthSecret

---
 .../form/SelectOrCreateAuthSecret.vue         | 152 ++++++++++++------
 shell/edit/catalog.cattle.io.clusterrepo.vue  |   3 +-
 shell/edit/fleet.cattle.io.gitrepo.vue        |   3 +-
 .../tabs/etcd/S3Config.vue                    |   1 +
 .../tabs/registries/RegistryConfigs.vue       |   1 +
 .../tabs/registries/index.vue                 |   1 +
 6 files changed, 110 insertions(+), 51 deletions(-)

diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index e630d0a5ac..a933b551ba 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -7,6 +7,8 @@ import { SECRET_TYPES } from '@shell/config/secret';
 import { base64Encode } from '@shell/utils/crypto';
 import { addObjects, insertAt } from '@shell/utils/array';
 import { sortBy } from '@shell/utils/sort';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { PaginationArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
   name: 'SelectOrCreateAuthSecret',
@@ -47,6 +49,9 @@ export default {
       required: true,
     },
 
+    /**
+     * Limit the selection of an existing secret to the namespace provided
+     */
     limitToNamespace: {
       type:    Boolean,
       default: true,
@@ -118,15 +123,27 @@ export default {
     delegateCreateToParent: {
       type:    Boolean,
       default: false
+    },
+
+    /**
+     * Set to false to make a fresh http request to secrets every time. This can be used when secrets have already been used for
+     * another purpose on the same page
+     *
+     * Set to true to cache the response
+     */
+    cacheSecrets: {
+      type:    Boolean,
+      default: false,
     }
   },
 
   async fetch() {
     if ( (this.allowSsh || this.allowBasic || this.allowRke) && this.$store.getters[`${ this.inStore }/schemaFor`](SECRET) ) {
-      // Avoid an async call and loading screen if already loaded by someone else
-      if ( this.$store.getters[`${ this.inStore }/haveAll`](SECRET) ) {
-        this.allSecrets = this.$store.getters[`${ this.inStore }/all`](SECRET);
+      if (paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+        // Filter results via api (because we shouldn't be fetching them all...)
+        this.filteredSecrets = await this.filterSecretsByApi();
       } else {
+        // Cannot yet filter via api, so fetch all and filter later on
         this.allSecrets = await this.$store.dispatch(`${ this.inStore }/findAll`, { type: SECRET });
       }
     }
@@ -166,34 +183,30 @@ export default {
     this.update();
   },
 
-  data(props) {
+  data() {
     return {
       allCloudCreds: [],
-      allSecrets:    [],
-      selected:      null,
+
+      allSecrets:      null,
+      filteredSecrets: null,
+
+      selected: null,
+
+      filterByNamespace: this.namespace && this.limitToNamespace,
 
       publicKey:  '',
       privateKey: '',
-      uniqueId:   new Date().getTime() // Allows form state to be individually tracked if the form is in a list
+      uniqueId:   new Date().getTime(), // Allows form state to be individually tracked if the form is in a list
+
+      SSH:   AUTH_TYPE._SSH,
+      BASIC: AUTH_TYPE._BASIC,
+      S3:    AUTH_TYPE._S3,
     };
   },
 
   computed: {
-    _SSH() {
-      return AUTH_TYPE._SSH;
-    },
-
-    _BASIC() {
-      return AUTH_TYPE._BASIC;
-    },
-
-    _S3() {
-      return AUTH_TYPE._S3;
-    },
-
-    options() {
+    secretTypes() {
       const types = [];
-      const keys = [];
 
       if ( this.allowSsh ) {
         types.push(SECRET_TYPES.SSH);
@@ -207,37 +220,46 @@ export default {
         types.push(SECRET_TYPES.RKE_AUTH_CONFIG);
       }
 
-      let out = this.allSecrets
-        .filter((x) => this.namespace && this.limitToNamespace ? x.metadata.namespace === this.namespace : true)
-        .filter((x) => {
-          // Must match one of the types if given
-          if ( types.length && !types.includes(x._type) ) {
-            return false;
-          }
+      return types;
+    },
 
-          // Must match ALL of the keys if given
-          if ( keys.length ) {
-            const dataKeys = Object.keys(x.data || {});
+    /**
+     * Fitler secrets given their namespace and required secret type
+     *
+     * Convert secrets to list of options and suplement with custom entries
+     */
+    options() {
+      let filteredSecrets = [];
 
-            if ( !keys.every((key) => dataKeys.includes(key)) ) {
+      if (this.allSecrets) {
+        // Fitler secrets given their namespace and required secret type
+        filteredSecrets = this.allSecrets
+          .filter((x) => this.filterByNamespace ? x.metadata.namespace === this.namespace : true )
+          .filter((x) => {
+            // Must match one of the required types
+            if ( this.secretTypes.length && !this.secretTypes.includes(x._type) ) {
               return false;
             }
-          }
 
-          return true;
-        }).map((x) => {
-          const {
-            dataPreview, subTypeDisplay, metadata, id
-          } = x;
+            return true;
+          });
+      } else if (this.filteredSecrets) {
+        filteredSecrets = this.filteredSecrets;
+      }
 
-          const label = subTypeDisplay && dataPreview ? `${ metadata.name } (${ subTypeDisplay }: ${ dataPreview })` : `${ metadata.name } (${ subTypeDisplay })`;
+      let out = filteredSecrets.map((x) => {
+        const {
+          dataPreview, subTypeDisplay, metadata, id
+        } = x;
 
-          return {
-            label,
-            group: metadata.namespace,
-            value: id,
-          };
-        });
+        const label = subTypeDisplay && dataPreview ? `${ metadata.name } (${ subTypeDisplay }: ${ dataPreview })` : `${ metadata.name } (${ subTypeDisplay })`;
+
+        return {
+          label,
+          group: metadata.namespace,
+          value: id,
+        };
+      });
 
       if ( this.allowS3 ) {
         const more = this.allCloudCreds
@@ -349,10 +371,15 @@ export default {
     publicKey:  'updateKeyVal',
     privateKey: 'updateKeyVal',
 
-    namespace(ns) {
+    async namespace(ns) {
       if ( ns && !this.selected.startsWith(`${ ns }/`) ) {
         this.selected = AUTH_TYPE._NONE;
       }
+
+      // if ns has changed and we're filtering by api... we need to re-fetch entries
+      if (this.filteredSecrets && this.filterByNamespace) {
+        this.filteredSecrets = await this.filterSecretsByApi();
+      }
     }
   },
 
@@ -369,6 +396,33 @@ export default {
   },
 
   methods: {
+    // TODO: RC unit tests
+    async filterSecretsByApi() {
+      // Of type ActionFindPageArgs
+      const findPageArgs = {
+        namespaced: this.filterByNamespace ? this.namespace : '',
+        pagination: new PaginationArgs({
+          pageSize: -1,
+          filters:  [
+            PaginationParamFilter.createMultipleFields(
+              this.secretTypes.map((t) => new PaginationFilterField({
+                field: 'metadata.fields.2',
+                value: t,
+              }))
+            ),
+          ],
+        }),
+      };
+
+      if (this.cacheSecrets) {
+        return await this.$store.dispatch(`${ this.inStore }/findPage`, { type: SECRET, opt: findPageArgs });
+      }
+
+      const url = this.$store.getters[`${ this.inStore }/urlFor`](SECRET, null, findPageArgs);
+
+      return await this.$store.dispatch(`${ this.inStore }/request`, { url });
+    },
+
     updateKeyVal() {
       if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(this.selected)) {
         this.privateKey = '';
@@ -485,7 +539,7 @@ export default {
           :selectable="option => !option.disabled"
         />
       </div>
-      <template v-if="selected === _SSH">
+      <template v-if="selected === SSH">
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
@@ -505,7 +559,7 @@ export default {
           />
         </div>
       </template>
-      <template v-else-if="selected === _BASIC">
+      <template v-else-if="selected === BASIC">
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
@@ -524,7 +578,7 @@ export default {
           />
         </div>
       </template>
-      <template v-else-if="selected === _S3">
+      <template v-else-if="selected === S3">
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
diff --git a/shell/edit/catalog.cattle.io.clusterrepo.vue b/shell/edit/catalog.cattle.io.clusterrepo.vue
index 6031fea60d..c793015ff3 100644
--- a/shell/edit/catalog.cattle.io.clusterrepo.vue
+++ b/shell/edit/catalog.cattle.io.clusterrepo.vue
@@ -119,15 +119,16 @@ export default {
       :mode="mode"
       data-testid="clusterrepo-helm-url-input"
     />
-
     <SelectOrCreateAuthSecret
       v-model="value.spec.clientSecret"
+      :mode="mode"
       data-testid="clusterrepo-auth-secret"
       :register-before-hook="registerBeforeHook"
       :namespace="secretNamespace"
       :limit-to-namespace="false"
       :in-store="inStore"
       generate-name="clusterrepo-auth-"
+      :cache-secrets="true"
     />
 
     <Labels
diff --git a/shell/edit/fleet.cattle.io.gitrepo.vue b/shell/edit/fleet.cattle.io.gitrepo.vue
index bb724f9b58..275afca3c1 100644
--- a/shell/edit/fleet.cattle.io.gitrepo.vue
+++ b/shell/edit/fleet.cattle.io.gitrepo.vue
@@ -576,10 +576,10 @@ export default {
         :mode="mode"
         generate-name="gitrepo-auth-"
         label-key="fleet.gitRepo.auth.git"
+        :cache-secrets="true"
         @input="updateAuth($event, 'clientSecretName')"
         @inputauthval="updateCachedAuthVal($event, 'clientSecretName')"
       />
-
       <SelectOrCreateAuthSecret
         data-testid="gitrepo-helm-auth"
         :value="value.spec.helmSecretName"
@@ -591,6 +591,7 @@ export default {
         generate-name="helmrepo-auth-"
         label-key="fleet.gitRepo.auth.helm"
         :pre-select="tempCachedValues.helmSecretName"
+        :cache-secrets="true"
         @input="updateAuth($event, 'helmSecretName')"
         @inputauthval="updateCachedAuthVal($event, 'helmSecretName')"
       />
diff --git a/shell/edit/provisioning.cattle.io.cluster/tabs/etcd/S3Config.vue b/shell/edit/provisioning.cattle.io.cluster/tabs/etcd/S3Config.vue
index 904168edbd..c92ae71709 100644
--- a/shell/edit/provisioning.cattle.io.cluster/tabs/etcd/S3Config.vue
+++ b/shell/edit/provisioning.cattle.io.cluster/tabs/etcd/S3Config.vue
@@ -84,6 +84,7 @@ export default {
       :allow-s3="true"
       :namespace="namespace"
       generate-name="etcd-backup-s3-"
+      :cache-secrets="true"
       @input="update"
     />
 
diff --git a/shell/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryConfigs.vue b/shell/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryConfigs.vue
index 559eb6f30c..61932934ed 100644
--- a/shell/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryConfigs.vue
+++ b/shell/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryConfigs.vue
@@ -161,6 +161,7 @@ export default {
               :mode="mode"
               generate-name="registryconfig-auth-"
               :data-testid="`registry-auth-select-or-create-${i}`"
+              :cache-secrets="true"
             />
           </div>
           <div class="col span-6">
diff --git a/shell/edit/provisioning.cattle.io.cluster/tabs/registries/index.vue b/shell/edit/provisioning.cattle.io.cluster/tabs/registries/index.vue
index 69ed712ad6..7db2d6c2fb 100644
--- a/shell/edit/provisioning.cattle.io.cluster/tabs/registries/index.vue
+++ b/shell/edit/provisioning.cattle.io.cluster/tabs/registries/index.vue
@@ -107,6 +107,7 @@ export default {
           :vertical="true"
           :namespace="value.metadata.namespace"
           generate-name="registryconfig-auth-"
+          :cache-secrets="true"
           @input="$emit('registry-secret-changed', $event)"
         />
       </div>

From 721b648e527dc00eb9ad30827d454bb132156d33 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Fri, 12 Apr 2024 15:56:26 +0100
Subject: [PATCH 17/71] TODOs and TEST

---
 shell/plugins/steve/actions.js  | 4 ++++
 shell/utils/pagination-utils.ts | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/shell/plugins/steve/actions.js b/shell/plugins/steve/actions.js
index 1ba53de2c2..19f9310113 100644
--- a/shell/plugins/steve/actions.js
+++ b/shell/plugins/steve/actions.js
@@ -20,6 +20,10 @@ export default {
   async request({ state, dispatch, rootGetters }, pOpt ) {
     const opt = pOpt.opt || pOpt;
 
+    if (opt.url.indexOf('/v1/configmaps/cattle-monitoring-system/prometheus-federator-system-namespaces?exclude=metadata.managedFields') >= 1) {
+      debugger;
+    }
+
     const spoofedRes = await handleSpoofedRequest(rootGetters, 'cluster', opt);
 
     if (spoofedRes) {
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index 8ec0057520..298272fa46 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -36,7 +36,7 @@ class PaginationUtils {
     // We always get Feature flags as part of start up (see `dispatch('features/loadServer')` in loadManagement)
     // TODO: RC count / pages in api response is broken in image that provides cache FF, so just assume on for the moment
     // return rootGetters['features/get'](STEVE_CACHE);
-    return false;
+    return true;
   }
 
   /**
@@ -53,7 +53,8 @@ class PaginationUtils {
       return false;
     }
 
-    const settings = this.getSettings({ rootGetters });
+    // const settings = this.getSettings({ rootGetters });
+    const settings = { enabled: true, stores: { cluster: { resources: { enableAll: true } } } };
 
     // No setting, not enabled
     if (!settings?.enabled) {
@@ -65,6 +66,7 @@ class PaginationUtils {
       return false;
     }
 
+    // const storeSettings = settings.stores?.[enabledFor.store];
     const storeSettings = settings.stores?.[enabledFor.store];
 
     // No pagination setting for target store, not enabled

From 7c07970b69668f4ff0d6d3662f86c6b89382a309 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Fri, 19 Apr 2024 14:35:24 +0100
Subject: [PATCH 18/71] Update SimpleSecretSelector - only used in
 monitoring.coreos.com.alertmanagerconfig context

---
 .../form/SelectOrCreateAuthSecret.vue         |  3 +-
 .../components/form/SimpleSecretSelector.vue  | 34 +++++++++++++++----
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index a933b551ba..8489b525ea 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -398,8 +398,7 @@ export default {
   methods: {
     // TODO: RC unit tests
     async filterSecretsByApi() {
-      // Of type ActionFindPageArgs
-      const findPageArgs = {
+      const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.filterByNamespace ? this.namespace : '',
         pagination: new PaginationArgs({
           pageSize: -1,
diff --git a/shell/components/form/SimpleSecretSelector.vue b/shell/components/form/SimpleSecretSelector.vue
index a2ffca210a..be20f7db0b 100644
--- a/shell/components/form/SimpleSecretSelector.vue
+++ b/shell/components/form/SimpleSecretSelector.vue
@@ -19,6 +19,8 @@ import { SECRET } from '@shell/config/types';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { TYPES } from '@shell/models/secret';
 import sortBy from 'lodash/sortBy';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { PaginationArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 const NONE = '__[[NONE]]__';
 
@@ -26,14 +28,34 @@ export default {
   components: { LabeledSelect },
 
   async fetch() {
-    // Make sure secrets are in the store so that the secret
-    // selectors in the receiver config forms will have secrets
-    // to choose from.
-    const allSecrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
+    if (paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+      // I don't think we need to integrate server-side pagination with the label select that this powers
+      // filtering by namespace should be enough to restrict the response to something small enough for the UI to handle
 
-    const allSecretsInNamespace = allSecrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
+      const findPageArgs = { // Of type ActionFindPageArgs
+        namespaced: this.namespace,
+        pagination: new PaginationArgs({
+          pageSize: -1,
+          filters:  [
+            PaginationParamFilter.createMultipleFields(this.types.map((t) => {
+              return new PaginationFilterField({ field: 'metadata.fields.2', value: t });
+            }))
+          ]
+        }),
+      };
 
-    this.secrets = allSecretsInNamespace;
+      this.secrets = await this.$store.dispatch(`cluster/findPage`, { type: SECRET, opt: findPageArgs });
+    } else {
+      // Make sure secrets are in the store so that the secret
+      // selectors in the receiver config forms will have secrets
+      // to choose from.
+      const allSecrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
+
+      const allSecretsInNamespace = allSecrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
+
+      // console.warn(this.secretNameLabel, 'fetch', this.namespace, allSecrets, allSecretsInNamespace);
+      this.secrets = allSecretsInNamespace;
+    }
   },
 
   props: {

From 2e962ab1ebfa55e9d199b063200813e17d88bb91 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Fri, 19 Apr 2024 15:17:36 +0100
Subject: [PATCH 19/71] View and Edit ingress - secrets

---
 shell/detail/networking.k8s.io.ingress.vue    | 44 +++++++++++--
 .../edit/networking.k8s.io.ingress/index.vue  | 63 +++++++++++++++++--
 2 files changed, 97 insertions(+), 10 deletions(-)

diff --git a/shell/detail/networking.k8s.io.ingress.vue b/shell/detail/networking.k8s.io.ingress.vue
index cb764fcfe0..287aaadfbe 100644
--- a/shell/detail/networking.k8s.io.ingress.vue
+++ b/shell/detail/networking.k8s.io.ingress.vue
@@ -6,6 +6,8 @@ import Rules from '@shell/edit/networking.k8s.io.ingress/Rules';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import Tab from '@shell/components/Tabbed/Tab';
 import { SECRET_TYPES as TYPES } from '@shell/config/secret';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
   name:       'CRUIngress',
@@ -16,17 +18,39 @@ export default {
   },
   mixins: [CreateEditView],
   async fetch() {
-    const hash = await allHash({
-      secrets:        this.$store.dispatch('cluster/findAll', { type: SECRET }),
+    const promises = {
       services:       this.$store.dispatch('cluster/findAll', { type: SERVICE }),
       resourceFields: this.schema.fetchResourceFields(),
-    });
+    };
+
+    if (paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+      const findPageArgs = { // Of type ActionFindPageArgs
+        namespaced: this.value.metadata.namespace,
+        pagination: new PaginationArgs({
+          pageSize: -1,
+          filters:  PaginationParamFilter.createSingleField({
+            field: 'metadata.fields.2',
+            value: TYPES.TLS
+          })
+        }),
+      };
+
+      promises.filteredSecrets = this.$store.dispatch(`cluster/findPage`, { type: SECRET, opt: findPageArgs });
+    } else {
+      promises.secrets = this.$store.dispatch('cluster/findAll', { type: SECRET });
+    }
+    const hash = await allHash(promises);
 
     this.allServices = hash.services;
     this.allSecrets = hash.secrets;
+    this.filteredSecrets = hash.filteredSecrets;
   },
   data() {
-    return { allSecrets: [], allServices: [] };
+    return {
+      allSecrets:      null,
+      filteredSecrets: null,
+      allServices:     [],
+    };
   },
   computed: {
     serviceTargets() {
@@ -41,7 +65,17 @@ export default {
       return this.isView ? this.t('ingress.rulesAndCertificates.title') : this.t('ingress.rules.title');
     },
     certificates() {
-      return this.filterByCurrentResourceNamespace(this.allSecrets.filter((secret) => secret._type === TYPES.TLS)).map((secret) => {
+      let filteredSecrets;
+
+      if (this.filteredSecrets) {
+        filteredSecrets = this.filteredSecrets;
+      } else if (this.allSecrets ) {
+        filteredSecrets = this.filterByCurrentResourceNamespace(this.allSecrets.filter((secret) => secret._type === TYPES.TLS));
+      } else {
+        return [];
+      }
+
+      return filteredSecrets.map((secret) => {
         const { id } = secret;
 
         return id.slice(id.indexOf('/') + 1);
diff --git a/shell/edit/networking.k8s.io.ingress/index.vue b/shell/edit/networking.k8s.io.ingress/index.vue
index 3a438c501f..f403dac11f 100644
--- a/shell/edit/networking.k8s.io.ingress/index.vue
+++ b/shell/edit/networking.k8s.io.ingress/index.vue
@@ -16,6 +16,8 @@ import Certificates from './Certificates';
 import Rules from './Rules';
 import IngressClass from './IngressClass';
 import Loading from '@shell/components/Loading';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
   name:       'CRUIngress',
@@ -45,23 +47,37 @@ export default {
       default: 'edit'
     }
   },
+
   async fetch() {
     this.ingressClassSchema = this.$store.getters[`cluster/schemaFor`](INGRESS_CLASS);
-    const hash = await allHash({
-      secrets:               this.$store.dispatch('cluster/findAll', { type: SECRET }),
+
+    const promises = {
       services:              this.$store.dispatch('cluster/findAll', { type: SERVICE }),
       ingressClasses:        this.ingressClassSchema ? this.$store.dispatch('cluster/findAll', { type: INGRESS_CLASS }) : Promise.resolve([]),
       ingressResourceFields: this.schema.fetchResourceFields(),
-    });
+    };
+
+    this.filterByApi = paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters });
+
+    if (this.filterByApi) {
+      promises.filteredSecrets = this.filterSecretsByApi();
+    } else {
+      promises.secrets = this.$store.dispatch('cluster/findAll', { type: SECRET });
+    }
+
+    const hash = await allHash(promises);
 
     this.allServices = hash.services;
     this.allSecrets = hash.secrets;
+    this.filteredSecrets = hash.filteredSecrets;
     this.allIngressClasses = hash.ingressClasses;
   },
   data() {
     return {
+      filterByApi:        null,
       ingressClassSchema: null,
-      allSecrets:         [],
+      allSecrets:         null,
+      filteredSecrets:    null,
       allServices:        [],
       allIngressClasses:  [],
       fvFormRuleSets:     [
@@ -92,6 +108,15 @@ export default {
       fvReportedValidationPaths: ['spec.rules.http.paths.backend.service.port.number', 'spec.rules.http.paths.path', 'spec.rules.http.paths.backend.service.name']
     };
   },
+
+  watch: {
+    async 'value.metadata.namespace'() {
+      if (this.filterByApi) {
+        this.filteredSecrets = await this.filterSecretsByApi();
+      }
+    }
+  },
+
   computed: {
     fvExtraRules() {
       const backEndOrRules = (spec) => {
@@ -147,7 +172,17 @@ export default {
       return this.isView ? this.t('ingress.rulesAndCertificates.title') : this.t('ingress.rules.title');
     },
     certificates() {
-      return this.filterByCurrentResourceNamespace(this.allSecrets.filter((secret) => secret._type === TYPES.TLS)).map((secret) => {
+      let filteredSecrets;
+
+      if (this.filteredSecrets) {
+        filteredSecrets = this.filteredSecrets;
+      } else if (this.allSecrets ) {
+        filteredSecrets = this.filterByCurrentResourceNamespace(this.allSecrets.filter((secret) => secret._type === TYPES.TLS));
+      } else {
+        return [];
+      }
+
+      return filteredSecrets.map((secret) => {
         const { id } = secret;
 
         return id.slice(id.indexOf('/') + 1);
@@ -160,6 +195,7 @@ export default {
       }));
     },
   },
+
   created() {
     this.$set(this.value, 'spec', this.value.spec || {});
     this.$set(this.value.spec, 'rules', this.value.spec.rules || [{}]);
@@ -171,7 +207,23 @@ export default {
 
     this.registerBeforeHook(this.willSave, 'willSave');
   },
+
   methods: {
+    filterSecretsByApi() {
+      const findPageArgs = { // Of type ActionFindPageArgs
+        namespaced: this.value.metadata.namespace,
+        pagination: new PaginationArgs({
+          pageSize: -1,
+          filters:  PaginationParamFilter.createSingleField({
+            field: 'metadata.fields.2',
+            value: TYPES.TLS
+          })
+        }),
+      };
+
+      return this.$store.dispatch(`cluster/findPage`, { type: SECRET, opt: findPageArgs });
+    },
+
     filterByCurrentResourceNamespace(resources) {
       // When configuring an Ingress, the options for Secrets and
       // default backend Services are limited to the namespace of the Ingress.
@@ -179,6 +231,7 @@ export default {
         return resource.metadata.namespace === this.value.metadata.namespace;
       });
     },
+
     willSave() {
       const backend = get(this.value.spec, this.value.defaultBackendPath);
       const serviceName = get(backend, this.value.serviceNamePath);

From f71ee20c169ef936cf53a9c92db1948735c684e5 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Fri, 19 Apr 2024 15:54:48 +0100
Subject: [PATCH 20/71] node detail page - pods list

---
 shell/detail/node.vue | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/shell/detail/node.vue b/shell/detail/node.vue
index dfd2669520..9f10e1bb3b 100644
--- a/shell/detail/node.vue
+++ b/shell/detail/node.vue
@@ -19,6 +19,8 @@ import { mapGetters } from 'vuex';
 import { allDashboardsExist } from '@shell/utils/grafana';
 import Loading from '@shell/components/Loading';
 import metricPoller from '@shell/mixins/metric-poller';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 const NODE_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-node-detail-1/rancher-node-detail?orgId=1';
 const NODE_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-node-1/rancher-node?orgId=1';
@@ -46,9 +48,28 @@ export default {
   },
 
   async fetch() {
-    this.showMetrics = await allDashboardsExist(this.$store, this.currentCluster.id, [NODE_METRICS_DETAIL_URL, NODE_METRICS_SUMMARY_URL]);
+    this.filterByApi = paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters });
 
-    return this.$store.dispatch('cluster/findAll', { type: POD });
+    if (this.filterByApi) {
+      // Only get pods associated with this node. The actual values used are from a get all in node model `pods` getter (this works as it just gets all...)
+      const opt = { // Of type ActionFindPageArgs
+        pagination: new PaginationArgs({
+          page:     -1,
+          pageSize: -1,
+          sort:     [{ field: 'metadata.name', asc: true }],
+          filters:  PaginationParamFilter.createSingleField({
+            field: 'spec.nodeName',
+            value: this.value.id,
+          })
+        })
+      };
+
+      this.$store.dispatch(`cluster/findPage`, { type: POD, opt });
+    } else {
+      this.$store.dispatch('cluster/findAll', { type: POD });
+    }
+
+    this.showMetrics = await allDashboardsExist(this.$store, this.currentCluster.id, [NODE_METRICS_DETAIL_URL, NODE_METRICS_SUMMARY_URL]);
   },
 
   data() {
@@ -80,7 +101,8 @@ export default {
       podTableHeaders: this.$store.getters['type-map/headersFor'](podSchema),
       NODE_METRICS_DETAIL_URL,
       NODE_METRICS_SUMMARY_URL,
-      showMetrics:     false
+      showMetrics:     false,
+      filterByApi:     undefined,
     };
   },
 

From ca209b7ba36b720712c9885664ea4c9dcf228657 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Fri, 19 Apr 2024 17:36:10 +0100
Subject: [PATCH 21/71] Backup/Restore: Secrets (WIP)

---
 shell/assets/translations/en-us.yaml          |  2 +-
 .../form/SelectOrCreateAuthSecret.vue         |  2 +-
 shell/edit/resources.cattle.io.backup.vue     | 52 ++++++++++++------
 shell/edit/resources.cattle.io.restore.vue    | 55 +++++++++++++------
 shell/utils/formatter.js                      |  8 ++-
 5 files changed, 81 insertions(+), 38 deletions(-)

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index 9e98c5108c..a08abc5773 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -776,7 +776,7 @@ backupRestoreOperator:
       warning: 'This {type} does not have its reclaim policy set to "Retain".  Your backups may be lost if the volume is changed or becomes unbound.'
   encryption: Encryption
   encryptionConfigName:
-    backuptip: 'Any secret in the <code>cattle-resources-system</code> namespace that has an <code>encryption-provider-config.yaml</code> key. <br/>The contents of this file are necessary to perform a restore from this backup, and are not stored by Rancher Backup.'
+    backuptip: 'Any secret in the <code>{ns}</code> namespace that has an <code>encryption-provider-config.yaml</code> key. <br/>The contents of this file are necessary to perform a restore from this backup, and are not stored by Rancher Backup.'
     label: Encryption Config Secret
     options:
       none: Store the contents of the backup unencrypted
diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index 8489b525ea..aab43e8fcc 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -419,7 +419,7 @@ export default {
 
       const url = this.$store.getters[`${ this.inStore }/urlFor`](SECRET, null, findPageArgs);
 
-      return await this.$store.dispatch(`${ this.inStore }/request`, { url });
+      return await this.$store.dispatch(`${ this.inStore }/request`, { url }); // TODO: RC this does not return a collection... where else did i use this pattern?
     },
 
     updateKeyVal() {
diff --git a/shell/edit/resources.cattle.io.backup.vue b/shell/edit/resources.cattle.io.backup.vue
index f9c5f3e413..4e6a0f122d 100644
--- a/shell/edit/resources.cattle.io.backup.vue
+++ b/shell/edit/resources.cattle.io.backup.vue
@@ -17,6 +17,9 @@ import { NAMESPACE, _VIEW } from '@shell/config/query-params';
 import { sortBy } from '@shell/utils/sort';
 import { get } from '@shell/utils/object';
 import { formatEncryptionSecretNames } from '@shell/utils/formatter';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { SECRET_TYPES } from '~/shell/config/secret';
 
 export default {
 
@@ -47,18 +50,37 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('catalog/load');
-
     const hash = await allHash({
-      secrets:     this.$store.dispatch('cluster/findAll', { type: SECRET }),
+      catalog:     this.$store.dispatch('catalog/load'),
       resourceSet: this.$store.dispatch('cluster/find', { type: BACKUP_RESTORE.RESOURCE_SET, id: this.value?.spec?.resourceSetName || 'rancher-resource-set' }),
       apps:        this.$store.dispatch('cluster/findAll', { type: CATALOG.APP })
-
     });
 
-    this.allSecrets = hash.secrets;
-    this.resourceSet = hash.resourceSet;
     this.apps = hash.apps;
+    this.resourceSet = hash.resourceSet;
+
+    const BRORelease = this.apps.filter((release) => get(release, 'spec.name') === 'rancher-backup')[0];
+
+    this.chartNamespace = BRORelease?.spec.namespace || '';
+
+    if (paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+      const findPageArgs = { // Of type ActionFindPageArgs
+        namespaced: this.chartNamespace,
+        pagination: new PaginationArgs({
+          pageSize: -1,
+          filters:  PaginationParamFilter.createSingleField({
+            field: 'metadata.fields.2',
+            value: SECRET_TYPES.OPAQUE
+          })
+        }),
+      };
+
+      const url = this.$store.getters[`cluster/urlFor`](SECRET, null, findPageArgs);
+
+      this.secrets = await this.$store.dispatch(`cluster/request`, { url })?.data || [];
+    } else {
+      this.secrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
+    }
   },
 
   data() {
@@ -84,7 +106,7 @@ export default {
     }
 
     return {
-      allSecrets:     [],
+      secrets:        [],
       resourceSet:    null,
       s3,
       storageSource,
@@ -94,7 +116,8 @@ export default {
       name:           this.value?.metadata?.name,
       fvFormRuleSets: [{
         path: 'metadata.name', rules: ['dnsLabel', 'noUpperCase'], translationKey: 'nameNsDescription.name.label'
-      }]
+      }],
+      chartNamespace: null,
     };
   },
 
@@ -103,14 +126,8 @@ export default {
       return this.mode === _VIEW;
     },
 
-    chartNamespace() {
-      const BRORelease = this.apps.filter((release) => get(release, 'spec.name') === 'rancher-backup')[0];
-
-      return BRORelease ? BRORelease.spec.namespace : '';
-    },
-
     encryptionSecretNames() {
-      return formatEncryptionSecretNames(this.allSecrets, this.chartNamespace);
+      return formatEncryptionSecretNames(this.secrets, this.chartNamespace);
     },
 
     storageOptions() {
@@ -251,7 +268,7 @@ export default {
               <div class="col span-6">
                 <LabeledSelect
                   v-model="value.spec.encryptionConfigSecretName"
-                  :tooltip="t('backupRestoreOperator.encryptionConfigName.backuptip', {}, true)"
+                  :tooltip="t('backupRestoreOperator.encryptionConfigName.backuptip', { ns: chartNamespace}, true)"
                   :hover-tooltip="true"
                   :mode="mode"
                   :options="encryptionSecretNames"
@@ -282,9 +299,10 @@ export default {
           <template v-if="storageSource !== 'useDefault'">
             <div class="row mt-10">
               <div class="col span-12">
+                <!-- // TODO: RC search for usages of S3 (secretsnot needed now) -->
+                <!-- TODO: RC test... this isn't paginting after rmeoving thing -->
                 <S3
                   :value="s3"
-                  :secrets="allSecrets"
                   :mode="mode"
                 />
               </div>
diff --git a/shell/edit/resources.cattle.io.restore.vue b/shell/edit/resources.cattle.io.restore.vue
index 600602c9ac..de3bf74a29 100644
--- a/shell/edit/resources.cattle.io.restore.vue
+++ b/shell/edit/resources.cattle.io.restore.vue
@@ -14,6 +14,9 @@ import { allHash } from '@shell/utils/promise';
 import { get } from '@shell/utils/object';
 import { _CREATE } from '@shell/config/query-params';
 import { formatEncryptionSecretNames } from '@shell/utils/formatter';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { SECRET_TYPES } from '~/shell/config/secret';
 
 export default {
 
@@ -44,17 +47,38 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('catalog/load');
-
+    // TODO: RC test all
     const hash = await allHash({
-      secrets: this.$store.dispatch('cluster/findAll', { type: SECRET }),
-      backups: this.$store.dispatch('cluster/findAll', { type: BACKUP_RESTORE.BACKUP }),
-      apps:    this.$store.dispatch('cluster/findAll', { type: CATALOG.APP })
+      catalog:     this.$store.dispatch('catalog/load'),
+      resourceSet: this.$store.dispatch('cluster/find', { type: BACKUP_RESTORE.RESOURCE_SET, id: this.value?.spec?.resourceSetName || 'rancher-resource-set' }),
+      apps:        this.$store.dispatch('cluster/findAll', { type: CATALOG.APP })
     });
 
-    this.allSecrets = hash.secrets;
-    this.allBackups = hash.backups;
     this.apps = hash.apps;
+    this.resourceSet = hash.resourceSet;
+
+    const BRORelease = this.apps.filter((release) => get(release, 'spec.name') === 'rancher-backup')[0];
+
+    this.chartNamespace = BRORelease?.spec.namespace || '';
+
+    if (paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+      const findPageArgs = { // Of type ActionFindPageArgs
+        namespaced: this.chartNamespace,
+        pagination: new PaginationArgs({
+          pageSize: -1,
+          filters:  PaginationParamFilter.createSingleField({
+            field: 'metadata.fields.2',
+            value: SECRET_TYPES.OPAQUE
+          })
+        }),
+      };
+
+      const url = this.$store.getters[`cluster/urlFor`](SECRET, null, findPageArgs);
+
+      this.secrets = await this.$store.dispatch(`cluster/request`, { url })?.data || [];
+    } else {
+      this.secrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
+    }
   },
 
   data() {
@@ -75,7 +99,13 @@ export default {
     }
 
     return {
-      allSecrets: [], allBackups: [], s3, targetBackup: null, storageSource, apps: []
+      secrets:        [],
+      allBackups:     [],
+      s3,
+      targetBackup:   null,
+      storageSource,
+      apps:           [],
+      chartNamespace: null,
     };
   },
 
@@ -88,14 +118,8 @@ export default {
       return this.allBackups.filter((backup) => backup.state !== 'error');
     },
 
-    chartNamespace() {
-      const BRORelease = this.apps.filter((release) => get(release, 'spec.name') === 'rancher-backup')[0];
-
-      return BRORelease ? BRORelease.spec.namespace : '';
-    },
-
     encryptionSecretNames() {
-      return formatEncryptionSecretNames(this.allSecrets, this.chartNamespace);
+      return formatEncryptionSecretNames(this.secrets, this.chartNamespace);
     },
 
     isEncrypted() {
@@ -214,7 +238,6 @@ export default {
             <S3
               v-model="s3"
               :mode="mode"
-              :secrets="allSecrets"
             />
           </template>
           <div
diff --git a/shell/utils/formatter.js b/shell/utils/formatter.js
index fae4c896c2..e31db2f118 100644
--- a/shell/utils/formatter.js
+++ b/shell/utils/formatter.js
@@ -2,10 +2,12 @@
 import { SECRET_TYPES } from '@shell/config/secret';
 
 export function formatEncryptionSecretNames(secrets, chartNamespace) {
-  return secrets.filter(
-    (secret) => (secret.data || {})['encryption-provider-config.yaml'] &&
+  return secrets
+    .filter((secret) => (secret.data || {})['encryption-provider-config.yaml'] &&
       secret.metadata.namespace === chartNamespace &&
       !secret.metadata?.state?.error &&
       secret._type === SECRET_TYPES.OPAQUE
-  ).map((secret) => secret.metadata.name).sort();
+    )
+    .map((secret) => secret.metadata.name)
+    .sort();
 }

From 305d3c0f38389dac83f87bb6f6467de8ed53d382 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 23 Apr 2024 14:13:01 +0100
Subject: [PATCH 22/71] Backup/Restore: Secrets, and other usages of
 SimpleSecretSelector / SelectOrCreateAuthSecret

---
 shell/chart/rancher-backup/index.vue               | 1 -
 shell/components/form/SelectOrCreateAuthSecret.vue | 3 ++-
 shell/components/form/SimpleSecretSelector.vue     | 2 --
 shell/edit/resources.cattle.io.backup.vue          | 6 +++---
 shell/edit/resources.cattle.io.restore.vue         | 3 ++-
 shell/edit/serviceaccount.vue                      | 3 ++-
 shell/plugins/steve/actions.js                     | 5 -----
 shell/store/type-map.utils.ts                      | 2 +-
 8 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/shell/chart/rancher-backup/index.vue b/shell/chart/rancher-backup/index.vue
index e584ed48bf..bbeb3a9935 100644
--- a/shell/chart/rancher-backup/index.vue
+++ b/shell/chart/rancher-backup/index.vue
@@ -186,7 +186,6 @@ export default {
       <S3
         v-if="storageSource==='s3'"
         :value="value.s3"
-        :secrets="secrets"
         :mode="mode"
         @valid="updatePageValid($event)"
       />
diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index aab43e8fcc..eaba085f6d 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -418,8 +418,9 @@ export default {
       }
 
       const url = this.$store.getters[`${ this.inStore }/urlFor`](SECRET, null, findPageArgs);
+      const res = await this.$store.dispatch(`cluster/request`, { url });
 
-      return await this.$store.dispatch(`${ this.inStore }/request`, { url }); // TODO: RC this does not return a collection... where else did i use this pattern?
+      return res?.data || [];
     },
 
     updateKeyVal() {
diff --git a/shell/components/form/SimpleSecretSelector.vue b/shell/components/form/SimpleSecretSelector.vue
index be20f7db0b..800fba3e2b 100644
--- a/shell/components/form/SimpleSecretSelector.vue
+++ b/shell/components/form/SimpleSecretSelector.vue
@@ -50,10 +50,8 @@ export default {
       // selectors in the receiver config forms will have secrets
       // to choose from.
       const allSecrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
-
       const allSecretsInNamespace = allSecrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
 
-      // console.warn(this.secretNameLabel, 'fetch', this.namespace, allSecrets, allSecretsInNamespace);
       this.secrets = allSecretsInNamespace;
     }
   },
diff --git a/shell/edit/resources.cattle.io.backup.vue b/shell/edit/resources.cattle.io.backup.vue
index 4e6a0f122d..1cc829c280 100644
--- a/shell/edit/resources.cattle.io.backup.vue
+++ b/shell/edit/resources.cattle.io.backup.vue
@@ -75,9 +75,11 @@ export default {
         }),
       };
 
+      // Do a one time request to get these type of secrets.... and there's a control on this page that will fetch and cache secrets
       const url = this.$store.getters[`cluster/urlFor`](SECRET, null, findPageArgs);
+      const res = await this.$store.dispatch(`cluster/request`, { url });
 
-      this.secrets = await this.$store.dispatch(`cluster/request`, { url })?.data || [];
+      this.secrets = res?.data || [];
     } else {
       this.secrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
     }
@@ -299,8 +301,6 @@ export default {
           <template v-if="storageSource !== 'useDefault'">
             <div class="row mt-10">
               <div class="col span-12">
-                <!-- // TODO: RC search for usages of S3 (secretsnot needed now) -->
-                <!-- TODO: RC test... this isn't paginting after rmeoving thing -->
                 <S3
                   :value="s3"
                   :mode="mode"
diff --git a/shell/edit/resources.cattle.io.restore.vue b/shell/edit/resources.cattle.io.restore.vue
index de3bf74a29..4069738647 100644
--- a/shell/edit/resources.cattle.io.restore.vue
+++ b/shell/edit/resources.cattle.io.restore.vue
@@ -74,8 +74,9 @@ export default {
       };
 
       const url = this.$store.getters[`cluster/urlFor`](SECRET, null, findPageArgs);
+      const res = await this.$store.dispatch(`cluster/request`, { url });
 
-      this.secrets = await this.$store.dispatch(`cluster/request`, { url })?.data || [];
+      this.secrets = res?.data || [];
     } else {
       this.secrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
     }
diff --git a/shell/edit/serviceaccount.vue b/shell/edit/serviceaccount.vue
index c5e1ee0fce..28b9ca17dc 100644
--- a/shell/edit/serviceaccount.vue
+++ b/shell/edit/serviceaccount.vue
@@ -123,7 +123,8 @@ export default {
 
             <LabeledSelect
               v-model="imagePullSecrets"
-              :label="t('workload.container.imagePullSecrets')"
+              label-key="workload.container.imagePullSecrets.label"
+              :tooltip="t('workload.container.imagePullSecrets.tooltip')"
               :multiple="true"
               :options="namespacedSecrets"
               :mode="mode"
diff --git a/shell/plugins/steve/actions.js b/shell/plugins/steve/actions.js
index 19f9310113..9d1bf33b77 100644
--- a/shell/plugins/steve/actions.js
+++ b/shell/plugins/steve/actions.js
@@ -19,11 +19,6 @@ export default {
 
   async request({ state, dispatch, rootGetters }, pOpt ) {
     const opt = pOpt.opt || pOpt;
-
-    if (opt.url.indexOf('/v1/configmaps/cattle-monitoring-system/prometheus-federator-system-namespaces?exclude=metadata.managedFields') >= 1) {
-      debugger;
-    }
-
     const spoofedRes = await handleSpoofedRequest(rootGetters, 'cluster', opt);
 
     if (spoofedRes) {
diff --git a/shell/store/type-map.utils.ts b/shell/store/type-map.utils.ts
index 9e9ebcc50f..2fca58c248 100644
--- a/shell/store/type-map.utils.ts
+++ b/shell/store/type-map.utils.ts
@@ -64,7 +64,7 @@ export function createHeaders(
   const columnsFromSchema = attributes.columns || [];
 
   // A specific list has been provided
-  if ( headers?.[schema.id] ) {
+  if ( headers?.[schema.id]?.length ) {
     return headers[schema.id].map((entry: any) => {
       if ( typeof entry === 'string' ) {
         const col = findBy(columnsFromSchema, 'name', entry);

From 841c2d2a63fdd3ccb197d045e3540ec058bed6bc Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Mon, 29 Apr 2024 15:17:34 +0100
Subject: [PATCH 23/71] Edit: Service account

---
 shell/edit/serviceaccount.vue | 49 ++++++++++++++++++++++++++++++++---
 1 file changed, 46 insertions(+), 3 deletions(-)

diff --git a/shell/edit/serviceaccount.vue b/shell/edit/serviceaccount.vue
index 28b9ca17dc..ae34edf111 100644
--- a/shell/edit/serviceaccount.vue
+++ b/shell/edit/serviceaccount.vue
@@ -9,6 +9,8 @@ import { Checkbox } from '@components/Form/Checkbox';
 import { SECRET } from '@shell/config/types';
 import { TYPES as SECRET_TYPES } from '@shell/models/secret';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
   name: 'ServiceAccount',
@@ -36,21 +38,62 @@ export default {
   },
 
   async fetch() {
-    this.allSecrets = await this.$store.dispatch(`cluster/findAll`, { type: SECRET });
+    this.filterByApi = paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters });
+
+    if (this.filterByApi) {
+      this.filteredSecrets = await this.filterSecretsByApi();
+    } else {
+      this.allSecrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
+    }
   },
 
   mixins: [CreateEditView],
+
   data() {
     this.$set(this.value, 'automountServiceAccountToken', this.value.automountServiceAccountToken || false);
 
-    return { allSecrets: [] };
+    return {
+      allSecrets:      [],
+      filteredSecrets: null,
+      secretTypes:     [SECRET_TYPES.DOCKER, SECRET_TYPES.DOCKER_JSON]
+    };
+  },
+
+  watch: {
+    async 'value.metadata.namespace'() {
+      if (this.filterByApi) {
+        this.filteredSecrets = await this.filterSecretsByApi();
+      }
+    }
+  },
+
+  methods: {
+    filterSecretsByApi() {
+      const findPageArgs = { // Of type ActionFindPageArgs
+        namespaced: this.value.metadata.namespace,
+        pagination: new PaginationArgs({
+          pageSize: -1,
+          filters:  PaginationParamFilter.createMultipleFields(this.secretTypes.map((t) => ({
+            field:  'metadata.fields.2',
+            value:  t,
+            equals: true
+          })))
+        }),
+      };
+
+      return this.$store.dispatch(`cluster/findPage`, { type: SECRET, opt: findPageArgs });
+    },
   },
 
   computed: {
     namespacedSecrets() {
+      if (this.filterByApi) {
+        return this.filteredSecrets;
+      }
+
       const namespace = this.value?.metadata?.namespace;
 
-      return this.allSecrets.filter((secret) => secret.metadata.namespace === namespace && (secret._type === SECRET_TYPES.DOCKER || secret._type === SECRET_TYPES.DOCKER_JSON));
+      return this.allSecrets.filter((secret) => secret.metadata.namespace === namespace && this.secretTypes.includes(secret._type));
     },
 
     imagePullSecrets: {

From dbccd90eec082475a4bbeb36d2ff0da5b62988b1 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Mon, 29 Apr 2024 16:28:34 +0100
Subject: [PATCH 24/71] Add comments for remaining items

---
 shell/components/form/SecretSelector.vue                 | 1 +
 shell/components/formatter/IngressTarget.vue             | 1 +
 shell/edit/logging-flow/Match.vue                        | 3 +++
 shell/edit/networking.k8s.io.ingress/Rules.vue           | 1 +
 shell/edit/networking.k8s.io.networkpolicy/index.vue     | 1 +
 shell/edit/resources.cattle.io.restore.vue               | 1 -
 shell/edit/service.vue                                   | 1 +
 shell/models/networking.k8s.io.ingress.js                | 1 +
 shell/pages/c/_cluster/manager/cloudCredential/index.vue | 1 +
 9 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/shell/components/form/SecretSelector.vue b/shell/components/form/SecretSelector.vue
index 9edf621440..b0f36b495d 100644
--- a/shell/components/form/SecretSelector.vue
+++ b/shell/components/form/SecretSelector.vue
@@ -128,6 +128,7 @@ export default {
     :class="{'show-key-selector': showKeySelector}"
   >
     <div class="input-container">
+      <!-- TODO: RC shell/edit/logging.banzaicloud.io.output/index.vue. Upfront fetches secrets used by edit/logging.banzaicloud.io.output/providers/x. Convert to pag LabeledSelect -->
       <LabeledSelect
         v-model="name"
         :disabled="!isView && disabled"
diff --git a/shell/components/formatter/IngressTarget.vue b/shell/components/formatter/IngressTarget.vue
index d553eded4b..7b1ab2684f 100644
--- a/shell/components/formatter/IngressTarget.vue
+++ b/shell/components/formatter/IngressTarget.vue
@@ -18,6 +18,7 @@ export default {
   },
 
   async fetch() {
+    // TODO: RC shell/components/formatter/IngressTarget.vue. used by shell/models/networking.k8s.io.ingress.js `targetTo`
     const promises = Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type }));
     const ingressSchema = this.$store.getters[`cluster/schemaFor`](INGRESS);
 
diff --git a/shell/edit/logging-flow/Match.vue b/shell/edit/logging-flow/Match.vue
index 6d35f3ac4f..7ffc255b56 100644
--- a/shell/edit/logging-flow/Match.vue
+++ b/shell/edit/logging-flow/Match.vue
@@ -89,6 +89,9 @@ export default {
     </h3>
     <div class="row">
       <div class="col span-12">
+        <!-- TODO: RC shell/edit/logging-flow/index.vue. Upfront fetches all pods, to get all containers (ouch). Convert to pag LabeledSelect -->
+        <!-- There's no containers api, they're only accessible via pods -->
+        <!-- could still show a page of containers... but it would be a variable amount given those in 10 pods -->
         <Select
           v-model="value.container_names"
           class="lg"
diff --git a/shell/edit/networking.k8s.io.ingress/Rules.vue b/shell/edit/networking.k8s.io.ingress/Rules.vue
index 72aad2c6e3..0dc7cd0f9a 100644
--- a/shell/edit/networking.k8s.io.ingress/Rules.vue
+++ b/shell/edit/networking.k8s.io.ingress/Rules.vue
@@ -45,6 +45,7 @@ export default {
   },
 
   async fetch() {
+    // TODO: RC shell/edit/networking.k8s.io.ingress/Rules.vue. used by (just?) shell/models/networking.k8s.io.ingress.js `targetTo`
     await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })));
   },
 
diff --git a/shell/edit/networking.k8s.io.networkpolicy/index.vue b/shell/edit/networking.k8s.io.networkpolicy/index.vue
index ad8f8cf47c..7d4eef5dbc 100644
--- a/shell/edit/networking.k8s.io.networkpolicy/index.vue
+++ b/shell/edit/networking.k8s.io.networkpolicy/index.vue
@@ -146,6 +146,7 @@ export default {
 
   methods: {
     updateMatchingPods: throttle(function() {
+      // TODO: RC pods and selectors
       const allInNamespace = this.allPods.filter((pod) => pod.metadata.namespace === this.value.metadata.namespace);
       const match = matching(allInNamespace, this.podSelectorExpressions);
       const matched = match.length || 0;
diff --git a/shell/edit/resources.cattle.io.restore.vue b/shell/edit/resources.cattle.io.restore.vue
index 4069738647..143ed8a317 100644
--- a/shell/edit/resources.cattle.io.restore.vue
+++ b/shell/edit/resources.cattle.io.restore.vue
@@ -47,7 +47,6 @@ export default {
   },
 
   async fetch() {
-    // TODO: RC test all
     const hash = await allHash({
       catalog:     this.$store.dispatch('catalog/load'),
       resourceSet: this.$store.dispatch('cluster/find', { type: BACKUP_RESTORE.RESOURCE_SET, id: this.value?.spec?.resourceSetName || 'rancher-resource-set' }),
diff --git a/shell/edit/service.vue b/shell/edit/service.vue
index 2a516c4a25..4ad0ffc645 100644
--- a/shell/edit/service.vue
+++ b/shell/edit/service.vue
@@ -254,6 +254,7 @@ export default {
   methods: {
     updateMatchingPods: throttle(function() {
       const { value: { spec: { selector = { } } } } = this;
+      // TODO: RC pods and selectors
       const allInNamespace = this.allPods.filter((pod) => pod.metadata.namespace === this.value?.metadata?.namespace);
 
       if (isEmpty(selector)) {
diff --git a/shell/models/networking.k8s.io.ingress.js b/shell/models/networking.k8s.io.ingress.js
index 066a8cb7f7..49a4d44a45 100644
--- a/shell/models/networking.k8s.io.ingress.js
+++ b/shell/models/networking.k8s.io.ingress.js
@@ -45,6 +45,7 @@ export default class Ingress extends SteveModel {
     const id = `${ this.namespace }/${ serviceName }`;
 
     if ( isTargetsWorkload ) {
+      // TODO: RC This is the reason shell/components/formatter/IngressTarget.vue requires ALL WORKLOADS
       const workload = workloads.find((w) => w.id === (id));
 
       return workload?.detailLocation || '';
diff --git a/shell/pages/c/_cluster/manager/cloudCredential/index.vue b/shell/pages/c/_cluster/manager/cloudCredential/index.vue
index b2d983da13..c32bd09d2f 100644
--- a/shell/pages/c/_cluster/manager/cloudCredential/index.vue
+++ b/shell/pages/c/_cluster/manager/cloudCredential/index.vue
@@ -12,6 +12,7 @@ export default {
 
   async fetch() {
     if ( this.$store.getters['management/schemaFor'](SECRET) ) {
+      // TODO: RC shell/pages/c/_cluster/manager/cloudCredential/index.vue. Convert to pag LabeledSelect, only get secrets for current page (secondary resource)
       // Having secrets allows showing the public portion of more types but not all users can see them.
       await this.$store.dispatch('management/findAll', { type: SECRET });
     }

From 604a615cf0ba511c3b216052832d5523e893087c Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 30 Apr 2024 14:48:41 +0100
Subject: [PATCH 25/71] Paginate Secret selection for logging providers - Allow
 `None` option in Paginationed LabelSelect - Optionally classify pagination
 response

---
 .../labeled-select-pagination.ts              |  6 +-
 .../LabeledSelect/labeled-select.utils.ts     | 15 +++-
 shell/components/form/SecretSelector.vue      | 90 +++++++++++++++++--
 .../logging.banzaicloud.io.output/index.vue   |  4 -
 shell/types/components/labeledSelect.ts       | 11 ++-
 5 files changed, 109 insertions(+), 17 deletions(-)

diff --git a/shell/components/form/LabeledSelect/labeled-select-pagination.ts b/shell/components/form/LabeledSelect/labeled-select-pagination.ts
index 3e12ad8d8f..795f94987c 100644
--- a/shell/components/form/LabeledSelect/labeled-select-pagination.ts
+++ b/shell/components/form/LabeledSelect/labeled-select-pagination.ts
@@ -1,7 +1,7 @@
 import { debounce } from 'lodash';
 import { PropType, defineComponent } from 'vue';
 import { ComputedOptions, MethodOptions } from 'vue/types/v3-component-options';
-import { LabelSelectPaginateFn, LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSelect';
+import { LabelSelectPaginateFn, LABEL_SELECT_NOT_OPTION_KINDS, LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
 import paginationUtils from '@shell/utils/pagination-utils';
 
 interface Props {
@@ -80,7 +80,9 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
 
     optionsInPage() {
       // Number of genuine options (not groups, dividers, etc)
-      return this.canPaginate ? this._options.filter((o: any) => !LABEL_SELECT_NOT_OPTION_KINDS.includes(o.kind)).length : 0;
+      return this.canPaginate ? this._options.filter((o: any) => {
+        return o.kind !== LABEL_SELECT_KINDS.NONE && !LABEL_SELECT_NOT_OPTION_KINDS.includes(o.kind); // TODO: RC HEEEEER
+      }).length : 0;
     },
 
     optionCounts() {
diff --git a/shell/components/form/LabeledSelect/labeled-select.utils.ts b/shell/components/form/LabeledSelect/labeled-select.utils.ts
index 7513faacc0..ede91f5a1a 100644
--- a/shell/components/form/LabeledSelect/labeled-select.utils.ts
+++ b/shell/components/form/LabeledSelect/labeled-select.utils.ts
@@ -27,6 +27,11 @@ interface lSPFOptions<T> {
    * True if the options returned should be grouped by namespace
    */
   groupByNamespace?: boolean,
+
+  /**
+   * Convert the results from JSON object to Rancher model class instance
+   */
+  classify: boolean,
 }
 
 /**
@@ -40,6 +45,7 @@ export async function labelSelectPaginationFunction<T>({
   sort = [{ asc: true, field: 'metadata.namespace' }, { asc: true, field: 'metadata.name' }],
   store = 'cluster',
   groupByNamespace = true,
+  classify = false,
 }: lSPFOptions<T>): Promise<LabelSelectPaginateFnResponse<T>> {
   const {
     pageContent, page, pageSize, resetPage
@@ -55,10 +61,15 @@ export async function labelSelectPaginationFunction<T>({
       filters
     });
     const url = ctx.getters[`${ store }/urlFor`](type, null, { pagination });
-
     // Make request (note we're not bothering to persist anything to the store, response is transient)
     const res = await ctx.dispatch(`${ store }/request`, { url });
-    const options = resetPage ? res.data : pageContent.concat(res.data);
+    let data = res.data;
+
+    if (classify) {
+      data = await ctx.dispatch('cluster/createMany', data);
+    }
+
+    const options = resetPage ? data : pageContent.concat(data);
 
     // Create the new option collection by...
     let resPage: any[];
diff --git a/shell/components/form/SecretSelector.vue b/shell/components/form/SecretSelector.vue
index 9edf621440..72007d2d81 100644
--- a/shell/components/form/SecretSelector.vue
+++ b/shell/components/form/SecretSelector.vue
@@ -3,7 +3,10 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { SECRET } from '@shell/config/types';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { SECRET_TYPES as TYPES } from '@shell/config/secret';
-import sortBy from 'lodash/sortBy';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { labelSelectPaginationFunction } from '@shell/components/form/LabeledSelect/labeled-select.utils';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
 
 const NONE = '__[[NONE]]__';
 
@@ -62,6 +65,16 @@ export default {
     }
   },
 
+  async fetch() {
+    if (!paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+      await this.$store.dispatch('cluster/findAll', { type: SECRET });
+    }
+  },
+
+  data() {
+    return { page: null };
+  },
+
   computed: {
     name: {
       get() {
@@ -96,15 +109,10 @@ export default {
         .filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
     },
     secretNames() {
-      const mappedSecrets = this.secrets.map((secret) => ({
-        label: secret.name,
-        value: secret.name
-      })).sort();
-
-      return [{ label: 'None', value: NONE }, ...sortBy(mappedSecrets, 'label')];
+      return this.mapSecrets(this.secrets.sort((a, b) => a.name.localeCompare(b.name)));
     },
     keys() {
-      const secret = this.secrets.find((secret) => secret.name === this.name) || {};
+      const secret = (this.page || this.secrets).find((secret) => secret.name === this.name) || {};
 
       return Object.keys(secret.data || {}).map((key) => ({
         label: key,
@@ -119,6 +127,69 @@ export default {
     }
   },
 
+  methods: {
+    /**
+     * Provide a set of options for the LabelSelect ([none, ...{label, value}])
+     */
+    mapSecrets(secrets) {
+      const mappedSecrets = secrets
+        .reduce((res, s) => {
+          if (s.kind === LABEL_SELECT_KINDS.NONE) {
+            return res;
+          }
+
+          if (s.id) {
+            res.push({ label: s.name, value: s.name });
+          } else {
+            res.push(s);
+          }
+
+          return res;
+        }, []);
+
+      return [
+        {
+          label: 'None', value: NONE, kind: LABEL_SELECT_KINDS.NONE
+        },
+        ...mappedSecrets
+      ];
+    },
+
+    /**
+     * @param [PaginateFnOptions] opts
+     * @returns PaginateFnResponse
+     */
+    async paginateSecrets(opts) {
+      const { filter } = opts;
+      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+
+      filters.push(
+        PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: this.namespace }),
+        PaginationParamFilter.createSingleField({ field: 'metadata.fields.1', value: this.types.join(',') })
+      );
+
+      const {
+        page,
+        ...rest
+      } = await labelSelectPaginationFunction({
+        opts,
+        filters,
+        groupByNamespace: false,
+        type:             SECRET,
+        ctx:              { getters: this.$store.getters, dispatch: this.$store.dispatch },
+        classify:         true,
+        sort:             [{ asc: true, field: 'metadata.name' }],
+      });
+
+      this.page = page;
+
+      return {
+        ...rest,
+        page: this.mapSecrets(this.page)
+      };
+    },
+  }
+
 };
 </script>
 
@@ -128,10 +199,13 @@ export default {
     :class="{'show-key-selector': showKeySelector}"
   >
     <div class="input-container">
+      <!-- key by namespace to ensure label select current page is recreated on ns change -->
       <LabeledSelect
+        :key="namespace"
         v-model="name"
         :disabled="!isView && disabled"
         :options="secretNames"
+        :paginate="paginateSecrets"
         :label="secretNameLabel"
         :mode="mode"
       />
diff --git a/shell/edit/logging.banzaicloud.io.output/index.vue b/shell/edit/logging.banzaicloud.io.output/index.vue
index db3804e30d..6522624b9d 100644
--- a/shell/edit/logging.banzaicloud.io.output/index.vue
+++ b/shell/edit/logging.banzaicloud.io.output/index.vue
@@ -24,10 +24,6 @@ export default {
 
   mixins: [CreateEditView],
 
-  async fetch() {
-    await this.$store.dispatch('cluster/findAll', { type: SECRET });
-  },
-
   data() {
     const schemas = this.$store.getters['cluster/all'](SCHEMA);
 
diff --git a/shell/types/components/labeledSelect.ts b/shell/types/components/labeledSelect.ts
index 4fcaf460bc..30da63dc53 100644
--- a/shell/types/components/labeledSelect.ts
+++ b/shell/types/components/labeledSelect.ts
@@ -1,4 +1,13 @@
-export const LABEL_SELECT_NOT_OPTION_KINDS = ['group', 'divider'];
+export const LABEL_SELECT_KINDS = {
+  GROUP:   'group',
+  DIVIDER: 'divider',
+  NONE:    'none',
+};
+
+export const LABEL_SELECT_NOT_OPTION_KINDS = [
+  LABEL_SELECT_KINDS.GROUP,
+  LABEL_SELECT_KINDS.DIVIDER,
+];
 
 /**
  * Options used When LabelSelect requests a new page

From a5745e2f8ca16f747ee61acb86f068c8078f978c Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 1 May 2024 14:18:55 +0100
Subject: [PATCH 26/71] WIP

---
 shell/config/secret.js            |   3 +-
 shell/edit/logging-flow/Match.vue | 120 ++++++++++++++++++++++++++++--
 shell/edit/logging-flow/index.vue |  23 +++---
 3 files changed, 126 insertions(+), 20 deletions(-)

diff --git a/shell/config/secret.js b/shell/config/secret.js
index 135ba48585..3d6c8bde2f 100644
--- a/shell/config/secret.js
+++ b/shell/config/secret.js
@@ -1,7 +1,8 @@
 export const SECRET_TYPES = {
   OPAQUE:           'Opaque',
   SERVICE_ACCT:     'kubernetes.io/service-account-token',
-  DOCKER_JSON:      'kubernetes.io/dockerconfigjson',
+  DOCKER_JSON:      'kubernetes.io/dockerconfigjson', // TODO: RC why in junk namespace this not returned
+  // TODO: RC output buffer empty
   BASIC:            'kubernetes.io/basic-auth',
   SSH:              'kubernetes.io/ssh-auth',
   TLS:              'kubernetes.io/tls',
diff --git a/shell/edit/logging-flow/Match.vue b/shell/edit/logging-flow/Match.vue
index 6d35f3ac4f..9654f2677c 100644
--- a/shell/edit/logging-flow/Match.vue
+++ b/shell/edit/logging-flow/Match.vue
@@ -1,9 +1,20 @@
 <script>
 import KeyValue from '@shell/components/form/KeyValue';
 import Select from '@shell/components/form/Select';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { labelSelectPaginationFunction } from '@shell/components/form/LabeledSelect/labeled-select.utils';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
+import { isArray, uniq } from '@shell/utils/array';
+import {
+  LOGGING, NAMESPACE, NODE, POD, SCHEMA
+} from '@shell/config/types';
 
 export default {
-  components: { KeyValue, Select },
+  components: {
+    KeyValue, Select, LabeledSelect
+  },
 
   props: {
     mode: {
@@ -23,10 +34,10 @@ export default {
       default: () => [],
     },
 
-    containers: {
-      type:    Array,
-      default: () => [],
-    },
+    // containers: {
+    //   type:    Array,
+    //   default: () => [],
+    // },
 
     namespaces: {
       type:    Array,
@@ -39,12 +50,88 @@ export default {
     }
   },
 
+  data() {
+    return { allPods: [] };
+  },
+
+  async fetch() {
+    if (this.$store.getters[`cluster/schemaFor`](POD)) {
+      this.allPods = await this.$store.dispatch('cluster/findAll', { type: POD });
+    }
+  },
+
+  computed: {
+    containers() {
+      const out = [];
+
+      for ( const pod of this.allPods ) {
+        for ( const c of (pod.spec?.containers || []) ) {
+          out.push(c.name);
+        }
+      }
+
+      return uniq(out).sort();
+    },
+  },
+
   methods: {
     update() {},
 
     removeRule() {
       this.$emit('remove');
     },
+
+    /**
+     * @param [PaginateFnOptions] opts
+     * @returns PaginateFnResponse
+     */
+    async paginateContainers(opts) {
+      const { filter } = opts;
+      const filters = !!filter ? [
+        PaginationParamFilter.createSingleField({ field: 'spec.dontainers.name', value: filter }),
+        PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter }),
+      ] : [];
+
+      if (this.value.namespaces?.length) {
+        filters.push(
+          PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: this.value.namespaces.join(',') }),
+        );
+      }
+
+      const {
+        page,
+        ...rest
+      } = await labelSelectPaginationFunction({
+        opts,
+        filters,
+        groupByNamespace: false,
+        type:             POD,
+        ctx:              { getters: this.$store.getters, dispatch: this.$store.dispatch },
+        classify:         false,
+        sort:             [],
+      });
+
+      const containers = page.reduce((res, p) => {
+        if (p.spec?.containers?.length) {
+          res.push({
+            kind:     'group',
+            icon:     'icon-namespace',
+            id:       p.id,
+            // metadata: { name: ns },
+            disabled: true,
+          },
+          ...p.spec.containers.map((c) => c.name)
+          );
+        }
+
+        return res;
+      }, []);
+
+      return {
+        ...rest,
+        page: containers
+      };
+    },
   },
 };
 </script>
@@ -89,10 +176,17 @@ export default {
     </h3>
     <div class="row">
       <div class="col span-12">
-        <Select
+        <!--
+          :key="namespace" value.namespaces
+          :paginate="paginateContainerNames"
+          -->
+        !!{{ value.namespaces }}!!
+        <LabeledSelect
           v-model="value.container_names"
-          class="lg"
+          :mode="mode"
           :options="containers"
+          :paginate="paginateContainers"
+          :disabled="false"
           :placeholder="t('logging.flow.matches.containerNames.placeholder')"
           :multiple="true"
           :taggable="true"
@@ -100,6 +194,18 @@ export default {
           :close-on-select="false"
           placement="top"
         />
+
+        <!-- <Select
+          v-model="value.container_names"
+          class="lg"
+          :options="containers"
+
+          :multiple="true"
+          :taggable="true"
+          :clearable="true"
+          :close-on-select="false"
+          placement="top"
+        /> -->
       </div>
     </div>
     <div v-if="isClusterFlow">
diff --git a/shell/edit/logging-flow/index.vue b/shell/edit/logging-flow/index.vue
index 14b8011676..53e761a0e3 100644
--- a/shell/edit/logging-flow/index.vue
+++ b/shell/edit/logging-flow/index.vue
@@ -55,7 +55,6 @@ export default {
     const hasAccessToOutputs = this.$store.getters[`cluster/schemaFor`](LOGGING.OUTPUT);
     const hasAccessToNamespaces = this.$store.getters[`cluster/schemaFor`](NAMESPACE);
     const hasAccessToNodes = this.$store.getters[`cluster/schemaFor`](NODE);
-    const hasAccessToPods = this.$store.getters[`cluster/schemaFor`](POD);
     const isFlow = this.value.type === LOGGING.FLOW;
 
     const getAllOrDefault = (type, hasAccess) => {
@@ -67,7 +66,6 @@ export default {
       allClusterOutputs: getAllOrDefault(LOGGING.CLUSTER_OUTPUT, hasAccessToClusterOutputs),
       allNamespaces:     getAllOrDefault(NAMESPACE, hasAccessToNamespaces),
       allNodes:          getAllOrDefault(NODE, hasAccessToNodes),
-      allPods:           getAllOrDefault(POD, hasAccessToPods),
     });
 
     for ( const k of Object.keys(hash) ) {
@@ -204,17 +202,17 @@ export default {
       return out;
     },
 
-    containerChoices() {
-      const out = [];
+    // containerChoices() {
+    //   const out = [];
 
-      for ( const pod of this.allPods ) {
-        for ( const c of (pod.spec?.containers || []) ) {
-          out.push(c.name);
-        }
-      }
+    //   for ( const pod of this.allPods ) {
+    //     for ( const c of (pod.spec?.containers || []) ) {
+    //       out.push(c.name);
+    //     }
+    //   }
 
-      return uniq(out).sort();
-    },
+    //   return uniq(out).sort();
+    // },
   },
 
   watch: {
@@ -380,13 +378,14 @@ export default {
           :mode="mode"
         >
           <template #default="props">
+            <!-- :containers="containerChoices" -->
             <Match
               class="rule mb-20"
               :value="props.row.value"
               :mode="mode"
               :namespaces="namespaceChoices"
               :nodes="nodeChoices"
-              :containers="containerChoices"
+
               :is-cluster-flow="value.type === LOGGING.CLUSTER_FLOW"
               @remove="e=>removeMatch(props.row.i)"
               @input="e=>updateMatch(e,props.row.i)"

From 2682840d494af3c859a6868c4713747e28132ce6 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 15 May 2024 12:07:57 +0100
Subject: [PATCH 27/71] fixes arfter merge

---
 pkg/eks/components/AccountAccess.vue | 2 +-
 pkg/eks/components/Config.vue        | 2 +-
 pkg/eks/components/Networking.vue    | 2 +-
 pkg/eks/components/NodeGroup.vue     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/pkg/eks/components/AccountAccess.vue b/pkg/eks/components/AccountAccess.vue
index fc1acc8315..6ac08b81f1 100644
--- a/pkg/eks/components/AccountAccess.vue
+++ b/pkg/eks/components/AccountAccess.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
 import SelectCredential from '@shell/edit/provisioning.cattle.io.cluster/SelectCredential.vue';
 import { DEFAULT_REGION } from './CruEKS.vue';
 import { mapGetters } from 'vuex';
diff --git a/pkg/eks/components/Config.vue b/pkg/eks/components/Config.vue
index 56a157c0f1..bca61fbc82 100644
--- a/pkg/eks/components/Config.vue
+++ b/pkg/eks/components/Config.vue
@@ -8,7 +8,7 @@ import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
 
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
 import KeyValue from '@shell/components/form/KeyValue.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
diff --git a/pkg/eks/components/Networking.vue b/pkg/eks/components/Networking.vue
index 65678b5cf5..45f7aac947 100644
--- a/pkg/eks/components/Networking.vue
+++ b/pkg/eks/components/Networking.vue
@@ -2,7 +2,7 @@
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
 import { defineComponent } from 'vue';
 import { Store, mapGetters } from 'vuex';
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import ArrayList from '@shell/components/form/ArrayList.vue';
 import Banner from '@components/Banner/Banner.vue';
diff --git a/pkg/eks/components/NodeGroup.vue b/pkg/eks/components/NodeGroup.vue
index 8897dc5850..33bb1ef005 100644
--- a/pkg/eks/components/NodeGroup.vue
+++ b/pkg/eks/components/NodeGroup.vue
@@ -7,7 +7,7 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { randomStr } from '@shell/utils/string';
 import { isEmpty } from '@shell/utils/object';
 
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import KeyValue from '@shell/components/form/KeyValue.vue';

From ac68b7570652f2490bba57defe99e4df22c298e7 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 15 May 2024 14:40:43 +0100
Subject: [PATCH 28/71] Don't suggest container names, not practical -
 previously all pods were fetched... and we scrapped all container names from
 them - this is a scaling nightmare, user now must just enter the name/s to
 match

---
 shell/assets/translations/en-us.yaml          |   1 +
 shell/components/form/LabeledSelect/index.vue |   7 +-
 shell/edit/logging-flow/Match.vue             | 113 +-----------------
 shell/edit/logging-flow/index.vue             |   1 -
 4 files changed, 12 insertions(+), 110 deletions(-)

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index 7f09c4960f..c264163162 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -2912,6 +2912,7 @@ logging:
           include: Limit to specific container names
           exclude: Exclude specific container names
         placeholder: "Default: Any container"
+        enter: Enter container name to select
       namespaces:
         title:
           include: Limit to specific namespaces
diff --git a/shell/components/form/LabeledSelect/index.vue b/shell/components/form/LabeledSelect/index.vue
index 8adbfff81f..ee5c07b3f2 100644
--- a/shell/components/form/LabeledSelect/index.vue
+++ b/shell/components/form/LabeledSelect/index.vue
@@ -8,6 +8,7 @@ import { onClickOption, calculatePosition } from '@shell/utils/select';
 import LabeledSelectPagination from './labeled-select-pagination';
 import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSelect';
 
+// TODO: RC change back to LabelSelect.Vue
 export default {
   name: 'LabeledSelect',
 
@@ -97,6 +98,10 @@ export default {
       type:    Boolean,
       default: true
     },
+    noOptionsLabelKey: {
+      type:    String,
+      default: 'labelSelect.noOptions.empty'
+    }
   },
 
   data() {
@@ -375,7 +380,7 @@ export default {
             {{ t('labelSelect.noOptions.noMatch') }}
           </template>
           <template v-else>
-            {{ t('labelSelect.noOptions.empty') }}
+            {{ t(noOptionsLabelKey) }}
           </template>
         </div>
       </template>
diff --git a/shell/edit/logging-flow/Match.vue b/shell/edit/logging-flow/Match.vue
index 9654f2677c..71ce3e9cac 100644
--- a/shell/edit/logging-flow/Match.vue
+++ b/shell/edit/logging-flow/Match.vue
@@ -2,14 +2,6 @@
 import KeyValue from '@shell/components/form/KeyValue';
 import Select from '@shell/components/form/Select';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { PaginationParamFilter } from '@shell/types/store/pagination.types';
-import { labelSelectPaginationFunction } from '@shell/components/form/LabeledSelect/labeled-select.utils';
-import paginationUtils from '@shell/utils/pagination-utils';
-import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
-import { isArray, uniq } from '@shell/utils/array';
-import {
-  LOGGING, NAMESPACE, NODE, POD, SCHEMA
-} from '@shell/config/types';
 
 export default {
   components: {
@@ -34,11 +26,6 @@ export default {
       default: () => [],
     },
 
-    // containers: {
-    //   type:    Array,
-    //   default: () => [],
-    // },
-
     namespaces: {
       type:    Array,
       default: () => [],
@@ -50,88 +37,12 @@ export default {
     }
   },
 
-  data() {
-    return { allPods: [] };
-  },
-
-  async fetch() {
-    if (this.$store.getters[`cluster/schemaFor`](POD)) {
-      this.allPods = await this.$store.dispatch('cluster/findAll', { type: POD });
-    }
-  },
-
-  computed: {
-    containers() {
-      const out = [];
-
-      for ( const pod of this.allPods ) {
-        for ( const c of (pod.spec?.containers || []) ) {
-          out.push(c.name);
-        }
-      }
-
-      return uniq(out).sort();
-    },
-  },
-
   methods: {
     update() {},
 
     removeRule() {
       this.$emit('remove');
     },
-
-    /**
-     * @param [PaginateFnOptions] opts
-     * @returns PaginateFnResponse
-     */
-    async paginateContainers(opts) {
-      const { filter } = opts;
-      const filters = !!filter ? [
-        PaginationParamFilter.createSingleField({ field: 'spec.dontainers.name', value: filter }),
-        PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter }),
-      ] : [];
-
-      if (this.value.namespaces?.length) {
-        filters.push(
-          PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: this.value.namespaces.join(',') }),
-        );
-      }
-
-      const {
-        page,
-        ...rest
-      } = await labelSelectPaginationFunction({
-        opts,
-        filters,
-        groupByNamespace: false,
-        type:             POD,
-        ctx:              { getters: this.$store.getters, dispatch: this.$store.dispatch },
-        classify:         false,
-        sort:             [],
-      });
-
-      const containers = page.reduce((res, p) => {
-        if (p.spec?.containers?.length) {
-          res.push({
-            kind:     'group',
-            icon:     'icon-namespace',
-            id:       p.id,
-            // metadata: { name: ns },
-            disabled: true,
-          },
-          ...p.spec.containers.map((c) => c.name)
-          );
-        }
-
-        return res;
-      }, []);
-
-      return {
-        ...rest,
-        page: containers
-      };
-    },
   },
 };
 </script>
@@ -176,36 +87,22 @@ export default {
     </h3>
     <div class="row">
       <div class="col span-12">
-        <!--
-          :key="namespace" value.namespaces
-          :paginate="paginateContainerNames"
-          -->
-        !!{{ value.namespaces }}!!
         <LabeledSelect
           v-model="value.container_names"
           :mode="mode"
-          :options="containers"
-          :paginate="paginateContainers"
+          :options="[]"
           :disabled="false"
           :placeholder="t('logging.flow.matches.containerNames.placeholder')"
           :multiple="true"
           :taggable="true"
           :clearable="true"
+          :searchable="true"
           :close-on-select="false"
+          no-options-label-key="logging.flow.matches.containerNames.enter"
           placement="top"
         />
-
-        <!-- <Select
-          v-model="value.container_names"
-          class="lg"
-          :options="containers"
-
-          :multiple="true"
-          :taggable="true"
-          :clearable="true"
-          :close-on-select="false"
-          placement="top"
-        /> -->
+        <br>
+        {{ value.container_names }}<br>
       </div>
     </div>
     <div v-if="isClusterFlow">
diff --git a/shell/edit/logging-flow/index.vue b/shell/edit/logging-flow/index.vue
index 53e761a0e3..4cea0b3079 100644
--- a/shell/edit/logging-flow/index.vue
+++ b/shell/edit/logging-flow/index.vue
@@ -385,7 +385,6 @@ export default {
               :mode="mode"
               :namespaces="namespaceChoices"
               :nodes="nodeChoices"
-
               :is-cluster-flow="value.type === LOGGING.CLUSTER_FLOW"
               @remove="e=>removeMatch(props.row.i)"
               @input="e=>updateMatch(e,props.row.i)"

From e2eb9384e74f3cce9a006fd86cce954e1ed8f122 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 15 May 2024 15:54:40 +0100
Subject: [PATCH 29/71] Avoid findAll secrets in SimpleSecretSelector

---
 shell/assets/translations/en-us.yaml          |  2 +-
 .../form/SelectOrCreateAuthSecret.vue         |  2 +-
 .../components/form/SimpleSecretSelector.vue  | 97 ++++++++++++++++---
 shell/utils/pagination-utils.ts               |  4 +-
 4 files changed, 87 insertions(+), 18 deletions(-)

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index c264163162..f47de957ef 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -7314,7 +7314,7 @@ performance:
     checkboxLabel: Enable Server-side Pagination
     applicable: "This applies to the following resource types"
     incompatibleDescription: "Server-side Pagination is incomaptible with Manual Refresh and Incremental Loading. Enabling this will disable them."
-    featureFlag: The <a href="{ffUrl}">Feature Flag</a> `on-disk-steve-cache` must be enabled to use this feature
+    featureFlag: The&nbsp;<a href="{ffUrl}">Feature Flag</a>&nbsp;`on-disk-steve-cache` must be enabled to use this feature
     resources:
       generic: most resources in the cluster's 'More Resources' section
       all: All Resources
diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index dc899b213e..bff4c04ce5 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -8,7 +8,7 @@ import { base64Encode } from '@shell/utils/crypto';
 import { addObjects, insertAt } from '@shell/utils/array';
 import { sortBy } from '@shell/utils/sort';
 import paginationUtils from '@shell/utils/pagination-utils';
-import { PaginationArgs, PaginationFilterField, PaginationParamFilter } from '~/shell/types/store/pagination.types';
+import { PaginationArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
   name: 'SelectOrCreateAuthSecret',
diff --git a/shell/components/form/SimpleSecretSelector.vue b/shell/components/form/SimpleSecretSelector.vue
index a2ffca210a..c87eab4970 100644
--- a/shell/components/form/SimpleSecretSelector.vue
+++ b/shell/components/form/SimpleSecretSelector.vue
@@ -13,12 +13,18 @@
 
    name: example-secret-name
    key: example-secret-key
+
+   FIXME: The solution to above would have been to have a configurable path to set/get name and key from.
+   This would have avoided a lot of copy and paste
  */
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { SECRET } from '@shell/config/types';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { TYPES } from '@shell/models/secret';
-import sortBy from 'lodash/sortBy';
+import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { labelSelectPaginationFunction } from '@shell/components/form/LabeledSelect/labeled-select.utils';
 
 const NONE = '__[[NONE]]__';
 
@@ -26,14 +32,16 @@ export default {
   components: { LabeledSelect },
 
   async fetch() {
-    // Make sure secrets are in the store so that the secret
-    // selectors in the receiver config forms will have secrets
-    // to choose from.
-    const allSecrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
+    if (!paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+      // Make sure secrets are in the store so that the secret
+      // selectors in the receiver config forms will have secrets
+      // to choose from.
+      const allSecrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
 
-    const allSecretsInNamespace = allSecrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
+      const allSecretsInNamespace = allSecrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
 
-    this.secrets = allSecretsInNamespace;
+      this.secrets = allSecretsInNamespace;
+    }
   },
 
   props: {
@@ -77,21 +85,18 @@ export default {
       secrets: [],
       name:    props.initialName,
       key:     props.initialKey,
-      none:    NONE
+      none:    NONE,
+      page:    null,
     };
   },
 
   computed: {
     secretNames() {
-      const mappedSecrets = this.secrets.map((secret) => ({
-        label: secret.name,
-        value: secret.name
-      })).sort();
-
-      return [{ label: 'None', value: NONE }, ...sortBy(mappedSecrets, 'label')];
+      return this.mapSecrets(this.secrets.sort((a, b) => a.name.localeCompare(b.name)));
     },
+
     keys() {
-      const secret = this.secrets.find((secret) => secret.name === this.name) || {};
+      const secret = (this.page || this.secrets).find((secret) => secret.name === this.name) || {};
 
       return Object.keys(secret.data || {}).map((key) => ({
         label: key,
@@ -107,6 +112,67 @@ export default {
   },
 
   methods: {
+    /**
+     * Provide a set of options for the LabelSelect ([none, ...{label, value}])
+     */
+    mapSecrets(secrets) {
+      const mappedSecrets = secrets
+        .reduce((res, s) => {
+          if (s.kind === LABEL_SELECT_KINDS.NONE) {
+            return res;
+          }
+
+          if (s.id) {
+            res.push({ label: s.name, value: s.name });
+          } else {
+            res.push(s);
+          }
+
+          return res;
+        }, []);
+
+      return [
+        {
+          label: 'None', value: NONE, kind: LABEL_SELECT_KINDS.NONE
+        },
+        ...mappedSecrets
+      ];
+    },
+
+    /**
+     * @param [PaginateFnOptions] opts
+     * @returns PaginateFnResponse
+     */
+    async paginateSecrets(opts) {
+      const { filter } = opts;
+      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+
+      filters.push(
+        PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: this.namespace }),
+        PaginationParamFilter.createSingleField({ field: 'metadata.fields.1', value: this.types.join(',') })
+      );
+
+      const {
+        page,
+        ...rest
+      } = await labelSelectPaginationFunction({
+        opts,
+        filters,
+        groupByNamespace: false,
+        type:             SECRET,
+        ctx:              { getters: this.$store.getters, dispatch: this.$store.dispatch },
+        classify:         true,
+        sort:             [{ asc: true, field: 'metadata.name' }],
+      });
+
+      this.page = page;
+
+      return {
+        ...rest,
+        page: this.mapSecrets(this.page)
+      };
+    },
+
     updateSecretName(e) {
       if (e.value === this.none) {
         // The key should appear blank if the secret name is cleared
@@ -133,6 +199,7 @@ export default {
         class="col span-6"
         :disabled="!isView && disabled"
         :options="secretNames"
+        :paginate="paginateSecrets"
         :label="secretNameLabel"
         :mode="mode"
         @selecting="updateSecretName"
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index 17c0f4eec7..4fa8a9454b 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -14,6 +14,7 @@ import { sameArrayObjects } from '@shell/utils/array';
 import { isEqual } from '@shell/utils/object';
 // import { STEVE_CACHE } from '@shell/store/features';
 import { getPerformanceSetting } from '@shell/utils/settings';
+import { DEFAULT_PERF_SETTING } from 'config/settings';
 
 /**
  * Helper functions for server side pagination
@@ -54,7 +55,8 @@ class PaginationUtils {
     }
 
     // const settings = this.getSettings({ rootGetters }); // TODO: RC
-    const settings = { enabled: true, stores: { cluster: { resources: { enableAll: true } } } };
+    const settings = DEFAULT_PERF_SETTING.serverPagination;
+    // const settings = { enabled: true, stores: { cluster: { resources: { enableAll: true } } } };
 
     // No setting, not enabled
     if (!settings?.enabled) {

From 6c149baa34ccad5ce8142c3bd3efc2fab94d835a Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 15 May 2024 17:22:20 +0100
Subject: [PATCH 30/71] tidying up

---
 .../form/LabeledSelect/labeled-select-pagination.ts          | 2 +-
 shell/components/form/SelectOrCreateAuthSecret.vue           | 5 ++---
 shell/components/form/SimpleSecretSelector.vue               | 1 +
 shell/utils/pagination-utils.ts                              | 1 -
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/shell/components/form/LabeledSelect/labeled-select-pagination.ts b/shell/components/form/LabeledSelect/labeled-select-pagination.ts
index 795f94987c..b8deb4974b 100644
--- a/shell/components/form/LabeledSelect/labeled-select-pagination.ts
+++ b/shell/components/form/LabeledSelect/labeled-select-pagination.ts
@@ -81,7 +81,7 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
     optionsInPage() {
       // Number of genuine options (not groups, dividers, etc)
       return this.canPaginate ? this._options.filter((o: any) => {
-        return o.kind !== LABEL_SELECT_KINDS.NONE && !LABEL_SELECT_NOT_OPTION_KINDS.includes(o.kind); // TODO: RC HEEEEER
+        return o.kind !== LABEL_SELECT_KINDS.NONE && !LABEL_SELECT_NOT_OPTION_KINDS.includes(o.kind);
       }).length : 0;
     },
 
diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index bff4c04ce5..3e5ec74ef2 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -358,8 +358,7 @@ export default {
   },
 
   methods: {
-    // TODO: RC move this to other PR
-    // TODO: RC unit tests
+    // TODO: RC revert
     async fetchSecrets() {
       const namespaceFilter = this.namespace && this.limitToNamespace ? this.namespace : '';
 
@@ -382,7 +381,7 @@ export default {
         // When this is ripped out some of the additional filtering in `options` can be removed
         return await this.$store.dispatch(`${ this.inStore }/findAll`, {
           type: SECRET,
-          opt:  { namespaced: namespaceFilter } // TODO: RC test
+          opt:  { namespaced: namespaceFilter }
         });
       }
     },
diff --git a/shell/components/form/SimpleSecretSelector.vue b/shell/components/form/SimpleSecretSelector.vue
index c87eab4970..73ddfb1235 100644
--- a/shell/components/form/SimpleSecretSelector.vue
+++ b/shell/components/form/SimpleSecretSelector.vue
@@ -36,6 +36,7 @@ export default {
       // Make sure secrets are in the store so that the secret
       // selectors in the receiver config forms will have secrets
       // to choose from.
+      // TODO: RC test
       const allSecrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
 
       const allSecretsInNamespace = allSecrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index 4fa8a9454b..8c1d8ae11f 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -56,7 +56,6 @@ class PaginationUtils {
 
     // const settings = this.getSettings({ rootGetters }); // TODO: RC
     const settings = DEFAULT_PERF_SETTING.serverPagination;
-    // const settings = { enabled: true, stores: { cluster: { resources: { enableAll: true } } } };
 
     // No setting, not enabled
     if (!settings?.enabled) {

From 42c083611850e3506e1931a8e8fd1b8014792326 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 15 May 2024 17:26:59 +0100
Subject: [PATCH 31/71] Move LabeledSelect/index.vue back to LabeledSelect.vue
 to not break extensions

---
 pkg/aks/components/AksNodePool.vue            |  2 +-
 pkg/aks/components/CruAks.vue                 |  2 +-
 pkg/eks/components/AccountAccess.vue          |  2 +-
 pkg/eks/components/Config.vue                 |  2 +-
 pkg/eks/components/Networking.vue             |  2 +-
 pkg/eks/components/NodeGroup.vue              |  2 +-
 pkg/rancher-components/package.json.bak       | 54 +++++++++++++++++++
 shell/chart/rancher-backup/S3.vue             |  2 +-
 shell/components/PodSecurityAdmission.vue     |  2 +-
 .../index.vue => LabeledSelect.vue}           |  5 +-
 shell/components/form/SecretSelector.vue      |  2 +-
 .../components/form/SimpleSecretSelector.vue  |  2 +-
 .../form/__tests__/LabeledSelect.test.ts      |  2 +-
 .../labeled-select-pagination.ts              |  0
 .../labeled-select.utils.ts                   |  0
 .../cis.cattle.io.clusterscanbenchmark.vue    |  2 +-
 16 files changed, 69 insertions(+), 14 deletions(-)
 create mode 100644 pkg/rancher-components/package.json.bak
 rename shell/components/form/{LabeledSelect/index.vue => LabeledSelect.vue} (98%)
 rename shell/components/form/{LabeledSelect => labeled-select-utils}/labeled-select-pagination.ts (100%)
 rename shell/components/form/{LabeledSelect => labeled-select-utils}/labeled-select.utils.ts (100%)

diff --git a/pkg/aks/components/AksNodePool.vue b/pkg/aks/components/AksNodePool.vue
index 9519e373f8..2440229b45 100644
--- a/pkg/aks/components/AksNodePool.vue
+++ b/pkg/aks/components/AksNodePool.vue
@@ -5,7 +5,7 @@ import { mapGetters } from 'vuex';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 import type { AKSDiskType, AKSNodePool, AKSPoolMode } from '../types/index';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
-import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import Taint from '@pkg/aks/components/Taint.vue';
 import UnitInput from '@shell/components/form/UnitInput.vue';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
diff --git a/pkg/aks/components/CruAks.vue b/pkg/aks/components/CruAks.vue
index b32bffc171..010f774492 100644
--- a/pkg/aks/components/CruAks.vue
+++ b/pkg/aks/components/CruAks.vue
@@ -16,7 +16,7 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import FormValidation from '@shell/mixins/form-validation';
 import SelectCredential from '@shell/edit/provisioning.cattle.io.cluster/SelectCredential.vue';
 import CruResource from '@shell/components/CruResource.vue';
-import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
+import LabeledSelect from '@shell/components/form/labeled-select-utils/index.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import FileSelector from '@shell/components/form/FileSelector.vue';
diff --git a/pkg/eks/components/AccountAccess.vue b/pkg/eks/components/AccountAccess.vue
index 6ac08b81f1..fc1acc8315 100644
--- a/pkg/eks/components/AccountAccess.vue
+++ b/pkg/eks/components/AccountAccess.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
-import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import SelectCredential from '@shell/edit/provisioning.cattle.io.cluster/SelectCredential.vue';
 import { DEFAULT_REGION } from './CruEKS.vue';
 import { mapGetters } from 'vuex';
diff --git a/pkg/eks/components/Config.vue b/pkg/eks/components/Config.vue
index bca61fbc82..56a157c0f1 100644
--- a/pkg/eks/components/Config.vue
+++ b/pkg/eks/components/Config.vue
@@ -8,7 +8,7 @@ import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
 
-import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import KeyValue from '@shell/components/form/KeyValue.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
diff --git a/pkg/eks/components/Networking.vue b/pkg/eks/components/Networking.vue
index 45f7aac947..65678b5cf5 100644
--- a/pkg/eks/components/Networking.vue
+++ b/pkg/eks/components/Networking.vue
@@ -2,7 +2,7 @@
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
 import { defineComponent } from 'vue';
 import { Store, mapGetters } from 'vuex';
-import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import ArrayList from '@shell/components/form/ArrayList.vue';
 import Banner from '@components/Banner/Banner.vue';
diff --git a/pkg/eks/components/NodeGroup.vue b/pkg/eks/components/NodeGroup.vue
index 33bb1ef005..8897dc5850 100644
--- a/pkg/eks/components/NodeGroup.vue
+++ b/pkg/eks/components/NodeGroup.vue
@@ -7,7 +7,7 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { randomStr } from '@shell/utils/string';
 import { isEmpty } from '@shell/utils/object';
 
-import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import KeyValue from '@shell/components/form/KeyValue.vue';
diff --git a/pkg/rancher-components/package.json.bak b/pkg/rancher-components/package.json.bak
new file mode 100644
index 0000000000..b1ba6782f2
--- /dev/null
+++ b/pkg/rancher-components/package.json.bak
@@ -0,0 +1,54 @@
+{
+  "name": "@rancher/components",
+  "repository": "git://github.com:rancher/dashboard.git",
+  "license": "Apache-2.0",
+  "version": "0.1.0",
+  "module": "./main.js",
+  "main": "./dist/@rancher/components.umd.min.js",
+  "files": [
+    "dist/*",
+    "types/*"
+  ],
+  "types": "./types/index.d.ts",
+  "scripts": {
+    "build:lib": "vue-cli-service build --target lib --name @rancher/components src/main.ts",
+    "lint": "vue-cli-service lint"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "dependencies": {
+    "lodash.debounce": "4.0.8"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "@vue/cli-plugin-babel": "4.5.15",
+    "@vue/cli-plugin-eslint": "4.5.15",
+    "@vue/cli-plugin-typescript": "4.5.15",
+    "@vue/cli-service": "4.5.15",
+    "@vue/eslint-config-standard": "5.1.2",
+    "@vue/eslint-config-typescript": "7.0.0",
+    "@vue/test-utils": "1.2.1",
+    "babel-eslint": "10.1.0",
+    "core-js": "3.25.3",
+    "cron-validator": "1.2.0",
+    "cronstrue": "1.95.0",
+    "eslint": "7.32.0",
+    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-promise": "4.2.1",
+    "eslint-plugin-standard": "4.0.0",
+    "eslint-plugin-vue": "7.14.0",
+    "jsonpath-plus": "6.0.1",
+    "sass": "1.55.0",
+    "sass-loader": "10.2.1",
+    "typescript": "4.1.6",
+    "vue": "2.6.14",
+    "vue-template-compiler": "2.6.14"
+  },
+  "peerDependencies": {
+    "core-js": "3.25.3",
+    "vue": "2.6.14"
+  }
+}
diff --git a/shell/chart/rancher-backup/S3.vue b/shell/chart/rancher-backup/S3.vue
index 61cdb86864..f947774841 100644
--- a/shell/chart/rancher-backup/S3.vue
+++ b/shell/chart/rancher-backup/S3.vue
@@ -6,7 +6,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { mapGetters } from 'vuex';
 import { SECRET } from '@shell/config/types';
 import { PaginationParamFilter } from '@shell/types/store/pagination.types';
-import { labelSelectPaginationFunction } from '@shell/components/form/LabeledSelect/labeled-select.utils';
+import { labelSelectPaginationFunction } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
 import paginationUtils from '@shell/utils/pagination-utils';
 
 export default {
diff --git a/shell/components/PodSecurityAdmission.vue b/shell/components/PodSecurityAdmission.vue
index 7480e3fd90..81ac8ed90f 100644
--- a/shell/components/PodSecurityAdmission.vue
+++ b/shell/components/PodSecurityAdmission.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { _VIEW, _CREATE } from '@shell/config/query-params';
-import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
+import LabeledSelect from '@shell/components/form/labeled-select-utils/index.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { PSADimension, PSAMode } from '@shell/types/resources/pod-security-admission';
diff --git a/shell/components/form/LabeledSelect/index.vue b/shell/components/form/LabeledSelect.vue
similarity index 98%
rename from shell/components/form/LabeledSelect/index.vue
rename to shell/components/form/LabeledSelect.vue
index ee5c07b3f2..8e01214809 100644
--- a/shell/components/form/LabeledSelect/index.vue
+++ b/shell/components/form/LabeledSelect.vue
@@ -5,10 +5,11 @@ import { get } from '@shell/utils/object';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
-import LabeledSelectPagination from './labeled-select-pagination';
+import LabeledSelectPagination from './LabeledSelect/labeled-select-pagination';
 import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSelect';
 
-// TODO: RC change back to LabelSelect.Vue
+// In theory this would be nicer as LabeledSelect/index.vue, however that would break a lot of places where we import this (which includes extensions)
+
 export default {
   name: 'LabeledSelect',
 
diff --git a/shell/components/form/SecretSelector.vue b/shell/components/form/SecretSelector.vue
index 72007d2d81..bfa4997ae4 100644
--- a/shell/components/form/SecretSelector.vue
+++ b/shell/components/form/SecretSelector.vue
@@ -4,7 +4,7 @@ import { SECRET } from '@shell/config/types';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { SECRET_TYPES as TYPES } from '@shell/config/secret';
 import { PaginationParamFilter } from '@shell/types/store/pagination.types';
-import { labelSelectPaginationFunction } from '@shell/components/form/LabeledSelect/labeled-select.utils';
+import { labelSelectPaginationFunction } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
 import paginationUtils from '@shell/utils/pagination-utils';
 import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
 
diff --git a/shell/components/form/SimpleSecretSelector.vue b/shell/components/form/SimpleSecretSelector.vue
index 73ddfb1235..d490ca3b77 100644
--- a/shell/components/form/SimpleSecretSelector.vue
+++ b/shell/components/form/SimpleSecretSelector.vue
@@ -24,7 +24,7 @@ import { TYPES } from '@shell/models/secret';
 import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
 import paginationUtils from '@shell/utils/pagination-utils';
 import { PaginationParamFilter } from '@shell/types/store/pagination.types';
-import { labelSelectPaginationFunction } from '@shell/components/form/LabeledSelect/labeled-select.utils';
+import { labelSelectPaginationFunction } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
 
 const NONE = '__[[NONE]]__';
 
diff --git a/shell/components/form/__tests__/LabeledSelect.test.ts b/shell/components/form/__tests__/LabeledSelect.test.ts
index 9c4165725a..a6f35d2506 100644
--- a/shell/components/form/__tests__/LabeledSelect.test.ts
+++ b/shell/components/form/__tests__/LabeledSelect.test.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import LabeledSelect from '@shell/components/form/LabeledSelect/index.vue';
+import LabeledSelect from '@shell/components/form/index.vue';
 
 describe('component: LabeledSelect', () => {
   describe('should display correct label', () => {
diff --git a/shell/components/form/LabeledSelect/labeled-select-pagination.ts b/shell/components/form/labeled-select-utils/labeled-select-pagination.ts
similarity index 100%
rename from shell/components/form/LabeledSelect/labeled-select-pagination.ts
rename to shell/components/form/labeled-select-utils/labeled-select-pagination.ts
diff --git a/shell/components/form/LabeledSelect/labeled-select.utils.ts b/shell/components/form/labeled-select-utils/labeled-select.utils.ts
similarity index 100%
rename from shell/components/form/LabeledSelect/labeled-select.utils.ts
rename to shell/components/form/labeled-select-utils/labeled-select.utils.ts
diff --git a/shell/edit/cis.cattle.io.clusterscanbenchmark.vue b/shell/edit/cis.cattle.io.clusterscanbenchmark.vue
index b3dd58ea1f..df3282d3c2 100644
--- a/shell/edit/cis.cattle.io.clusterscanbenchmark.vue
+++ b/shell/edit/cis.cattle.io.clusterscanbenchmark.vue
@@ -7,7 +7,7 @@ import NameNsDescription from '@shell/components/form/NameNsDescription';
 import { mapGetters } from 'vuex';
 import { CONFIG_MAP } from '@shell/config/types';
 import { PaginationParamFilter } from '@shell/types/store/pagination.types';
-import { labelSelectPaginationFunction } from '@shell/components/form/LabeledSelect/labeled-select.utils';
+import { labelSelectPaginationFunction } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
 import paginationUtils from '@shell/utils/pagination-utils';
 
 const providers = ['aks', 'docker', 'eks', 'gke', 'k3s', 'minikube', 'rke-windows', 'rke', 'rke2'];

From 5b9625f3d92457b8e7b3102a6ac4db79572e5fe8 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 16 May 2024 11:06:26 +0100
Subject: [PATCH 32/71] changes after self review... 1

---
 .github/workflows/scripts/pr-gh-project.js    |  6 ---
 pkg/aks/components/CruAks.vue                 |  2 +-
 pkg/rancher-components/package.json.bak       | 54 -------------------
 shell/components/PodSecurityAdmission.vue     |  2 +-
 shell/components/PromptRestore.vue            |  2 +-
 shell/components/form/GitPicker.vue           |  2 +-
 .../form/__tests__/LabeledSelect.test.ts      |  2 +-
 .../labeled-select-pagination.ts              |  3 ++
 .../labeled-select.utils.ts                   |  2 +-
 .../hpa-scaling-rule.vue                      |  2 +-
 shell/edit/logging-flow/index.vue             | 18 +------
 .../logging.banzaicloud.io.output/index.vue   |  2 +-
 shell/edit/ui.cattle.io.navlink.vue           |  2 +-
 .../pages/c/_cluster/settings/performance.vue |  1 -
 shell/plugins/steve/actions.js                |  4 --
 shell/utils/pagination-utils.ts               |  1 -
 16 files changed, 14 insertions(+), 91 deletions(-)
 delete mode 100644 pkg/rancher-components/package.json.bak

diff --git a/.github/workflows/scripts/pr-gh-project.js b/.github/workflows/scripts/pr-gh-project.js
index 8231de18ff..07596644bc 100644
--- a/.github/workflows/scripts/pr-gh-project.js
+++ b/.github/workflows/scripts/pr-gh-project.js
@@ -266,12 +266,6 @@ async function processOpenOrEditAction() {
   for (i of issues) {
     const detail = `${event.repository.url}/issues/${i}`;
     const iss = await request.fetch(detail);
-
-    if (!iss) {
-      console.log(`Failed to find issue with number '${i}'. Body: :`, iss);
-      continue;
-    }
-    console.log('');
     console.log('Processing Issue #' + i + ' - ' + iss.title);
 
     if (pr.draft) {
diff --git a/pkg/aks/components/CruAks.vue b/pkg/aks/components/CruAks.vue
index 010f774492..e66c8ba271 100644
--- a/pkg/aks/components/CruAks.vue
+++ b/pkg/aks/components/CruAks.vue
@@ -16,7 +16,7 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import FormValidation from '@shell/mixins/form-validation';
 import SelectCredential from '@shell/edit/provisioning.cattle.io.cluster/SelectCredential.vue';
 import CruResource from '@shell/components/CruResource.vue';
-import LabeledSelect from '@shell/components/form/labeled-select-utils/index.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import FileSelector from '@shell/components/form/FileSelector.vue';
diff --git a/pkg/rancher-components/package.json.bak b/pkg/rancher-components/package.json.bak
deleted file mode 100644
index b1ba6782f2..0000000000
--- a/pkg/rancher-components/package.json.bak
+++ /dev/null
@@ -1,54 +0,0 @@
-{
-  "name": "@rancher/components",
-  "repository": "git://github.com:rancher/dashboard.git",
-  "license": "Apache-2.0",
-  "version": "0.1.0",
-  "module": "./main.js",
-  "main": "./dist/@rancher/components.umd.min.js",
-  "files": [
-    "dist/*",
-    "types/*"
-  ],
-  "types": "./types/index.d.ts",
-  "scripts": {
-    "build:lib": "vue-cli-service build --target lib --name @rancher/components src/main.ts",
-    "lint": "vue-cli-service lint"
-  },
-  "engines": {
-    "node": ">=14"
-  },
-  "dependencies": {
-    "lodash.debounce": "4.0.8"
-  },
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "@typescript-eslint/parser": "4.33.0",
-    "@vue/cli-plugin-babel": "4.5.15",
-    "@vue/cli-plugin-eslint": "4.5.15",
-    "@vue/cli-plugin-typescript": "4.5.15",
-    "@vue/cli-service": "4.5.15",
-    "@vue/eslint-config-standard": "5.1.2",
-    "@vue/eslint-config-typescript": "7.0.0",
-    "@vue/test-utils": "1.2.1",
-    "babel-eslint": "10.1.0",
-    "core-js": "3.25.3",
-    "cron-validator": "1.2.0",
-    "cronstrue": "1.95.0",
-    "eslint": "7.32.0",
-    "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-promise": "4.2.1",
-    "eslint-plugin-standard": "4.0.0",
-    "eslint-plugin-vue": "7.14.0",
-    "jsonpath-plus": "6.0.1",
-    "sass": "1.55.0",
-    "sass-loader": "10.2.1",
-    "typescript": "4.1.6",
-    "vue": "2.6.14",
-    "vue-template-compiler": "2.6.14"
-  },
-  "peerDependencies": {
-    "core-js": "3.25.3",
-    "vue": "2.6.14"
-  }
-}
diff --git a/shell/components/PodSecurityAdmission.vue b/shell/components/PodSecurityAdmission.vue
index 81ac8ed90f..39c40fb524 100644
--- a/shell/components/PodSecurityAdmission.vue
+++ b/shell/components/PodSecurityAdmission.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { _VIEW, _CREATE } from '@shell/config/query-params';
-import LabeledSelect from '@shell/components/form/labeled-select-utils/index.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { PSADimension, PSAMode } from '@shell/types/resources/pod-security-admission';
diff --git a/shell/components/PromptRestore.vue b/shell/components/PromptRestore.vue
index ecb8e906bd..8764d550d1 100644
--- a/shell/components/PromptRestore.vue
+++ b/shell/components/PromptRestore.vue
@@ -5,7 +5,7 @@ import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
 import Date from '@shell/components/formatter/Date.vue';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { CAPI, NORMAN, SNAPSHOT } from '@shell/config/types';
 import { set } from '@shell/utils/object';
diff --git a/shell/components/form/GitPicker.vue b/shell/components/form/GitPicker.vue
index 61495352dd..0a20b5d050 100644
--- a/shell/components/form/GitPicker.vue
+++ b/shell/components/form/GitPicker.vue
@@ -4,7 +4,7 @@ import SortableTable from '@shell/components/SortableTable/index.vue';
 import RadioButton from '@components/Form/Radio/RadioButton.vue';
 import debounce from 'lodash/debounce';
 import { isArray } from '@shell/utils/array';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { GitUtils, Commit } from '@shell/utils/git';
 import type { DebouncedFunc } from 'lodash';
diff --git a/shell/components/form/__tests__/LabeledSelect.test.ts b/shell/components/form/__tests__/LabeledSelect.test.ts
index a6f35d2506..7dd63e8e0d 100644
--- a/shell/components/form/__tests__/LabeledSelect.test.ts
+++ b/shell/components/form/__tests__/LabeledSelect.test.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import LabeledSelect from '@shell/components/form/index.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 
 describe('component: LabeledSelect', () => {
   describe('should display correct label', () => {
diff --git a/shell/components/form/labeled-select-utils/labeled-select-pagination.ts b/shell/components/form/labeled-select-utils/labeled-select-pagination.ts
index b8deb4974b..49f3c750bc 100644
--- a/shell/components/form/labeled-select-utils/labeled-select-pagination.ts
+++ b/shell/components/form/labeled-select-utils/labeled-select-pagination.ts
@@ -38,6 +38,9 @@ interface Methods extends MethodOptions {
   requestPagination: () => Promise<any>;
 }
 
+/**
+ * 'mixin' to provide pagination support to LabeledSelect
+ */
 export default defineComponent<Props, any, Data, Computed, Methods>({
   props: {
     paginate: {
diff --git a/shell/components/form/labeled-select-utils/labeled-select.utils.ts b/shell/components/form/labeled-select-utils/labeled-select.utils.ts
index ede91f5a1a..2c118e5622 100644
--- a/shell/components/form/labeled-select-utils/labeled-select.utils.ts
+++ b/shell/components/form/labeled-select-utils/labeled-select.utils.ts
@@ -35,7 +35,7 @@ interface lSPFOptions<T> {
 }
 
 /**
- * This is a helper function to cover common functions that could happen when a LabelSelect requests a new page
+ * This is a helper function to cover common functionality that could happen when a LabelSelect requests a new page
  */
 export async function labelSelectPaginationFunction<T>({
   opts,
diff --git a/shell/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue b/shell/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue
index ec10ceadbc..c7380dcc67 100644
--- a/shell/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue
+++ b/shell/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue
@@ -2,7 +2,7 @@
 
 import { _EDIT } from '@shell/config/query-params';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { LabeledInput } from '@components/Form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput.vue';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped.vue';
 
 export default {
diff --git a/shell/edit/logging-flow/index.vue b/shell/edit/logging-flow/index.vue
index 4cea0b3079..abc0283c8d 100644
--- a/shell/edit/logging-flow/index.vue
+++ b/shell/edit/logging-flow/index.vue
@@ -6,14 +6,12 @@ import Loading from '@shell/components/Loading';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
-import {
-  LOGGING, NAMESPACE, NODE, POD, SCHEMA
-} from '@shell/config/types';
+import { LOGGING, NAMESPACE, NODE, SCHEMA } from '@shell/config/types';
 import jsyaml from 'js-yaml';
 import { createYaml } from '@shell/utils/create-yaml';
 import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
 import { allHash } from '@shell/utils/promise';
-import { isArray, uniq } from '@shell/utils/array';
+import { isArray } from '@shell/utils/array';
 import { matchRuleIsPopulated } from '@shell/models/logging.banzaicloud.io.flow';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { clone, set } from '@shell/utils/object';
@@ -202,17 +200,6 @@ export default {
       return out;
     },
 
-    // containerChoices() {
-    //   const out = [];
-
-    //   for ( const pod of this.allPods ) {
-    //     for ( const c of (pod.spec?.containers || []) ) {
-    //       out.push(c.name);
-    //     }
-    //   }
-
-    //   return uniq(out).sort();
-    // },
   },
 
   watch: {
@@ -378,7 +365,6 @@ export default {
           :mode="mode"
         >
           <template #default="props">
-            <!-- :containers="containerChoices" -->
             <Match
               class="rule mb-20"
               :value="props.row.value"
diff --git a/shell/edit/logging.banzaicloud.io.output/index.vue b/shell/edit/logging.banzaicloud.io.output/index.vue
index 6522624b9d..3da54ed3e0 100644
--- a/shell/edit/logging.banzaicloud.io.output/index.vue
+++ b/shell/edit/logging.banzaicloud.io.output/index.vue
@@ -1,6 +1,6 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
-import { SECRET, LOGGING, SCHEMA } from '@shell/config/types';
+import { LOGGING, SCHEMA } from '@shell/config/types';
 import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
 import CruResource from '@shell/components/CruResource';
diff --git a/shell/edit/ui.cattle.io.navlink.vue b/shell/edit/ui.cattle.io.navlink.vue
index c7d965979c..737f9c5249 100644
--- a/shell/edit/ui.cattle.io.navlink.vue
+++ b/shell/edit/ui.cattle.io.navlink.vue
@@ -7,7 +7,7 @@ import CruResource from '@shell/components/CruResource';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { RadioGroup } from '@components/Form/Radio';
 import FileImageSelector from '@shell/components/form/FileImageSelector';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import { Banner } from '@components/Banner';
 import FormValidation from '@shell/mixins/form-validation';
diff --git a/shell/pages/c/_cluster/settings/performance.vue b/shell/pages/c/_cluster/settings/performance.vue
index 2dd938fe41..34003d29a5 100644
--- a/shell/pages/c/_cluster/settings/performance.vue
+++ b/shell/pages/c/_cluster/settings/performance.vue
@@ -390,7 +390,6 @@ export default {
             v-clean-html="t(`performance.serverPagination.featureFlag`, { ffUrl }, true)"
             color="warning"
           />
-          </Banner>
           <Checkbox
             v-model="value.serverPagination.enabled"
             :mode="mode"
diff --git a/shell/plugins/steve/actions.js b/shell/plugins/steve/actions.js
index 19f9310113..1ba53de2c2 100644
--- a/shell/plugins/steve/actions.js
+++ b/shell/plugins/steve/actions.js
@@ -20,10 +20,6 @@ export default {
   async request({ state, dispatch, rootGetters }, pOpt ) {
     const opt = pOpt.opt || pOpt;
 
-    if (opt.url.indexOf('/v1/configmaps/cattle-monitoring-system/prometheus-federator-system-namespaces?exclude=metadata.managedFields') >= 1) {
-      debugger;
-    }
-
     const spoofedRes = await handleSpoofedRequest(rootGetters, 'cluster', opt);
 
     if (spoofedRes) {
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index 8c1d8ae11f..7178d79ca5 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -67,7 +67,6 @@ class PaginationUtils {
       return false;
     }
 
-    // const storeSettings = settings.stores?.[enabledFor.store];
     const storeSettings = settings.stores?.[enabledFor.store];
 
     // No pagination setting for target store, not enabled

From 5cd1f4376f49c3baca5529ae89cba2991a414dc6 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 16 May 2024 13:09:33 +0100
Subject: [PATCH 33/71] changes after self review... 2

---
 .github/workflows/scripts/pr-gh-project.js    | 38 ++++++++++---------
 README.md                                     |  1 -
 .../hpa-scaling-rule.vue                      |  4 +-
 shell/utils/pagination-utils.ts               | 30 ++++++++++++---
 .../stories/InputFieldsAdvancedExample.vue    |  2 +-
 storybook/stories/InputFieldsExample.vue      |  2 +-
 6 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/.github/workflows/scripts/pr-gh-project.js b/.github/workflows/scripts/pr-gh-project.js
index 07596644bc..ffa5052768 100644
--- a/.github/workflows/scripts/pr-gh-project.js
+++ b/.github/workflows/scripts/pr-gh-project.js
@@ -9,7 +9,7 @@ const request = require('./request');
 const TECH_DEBT_LABEL = 'kind/tech-debt';
 const DEV_VALIDATE_LABEL = 'status/dev-validate';
 const QA_NONE_LABEL = 'QA/None';
-const QA_DEV_AUTOMATION_LABEL = 'QA/dev-automation';
+const QA_DEV_AUTOMATION_LABEL = 'QA/dev-automation'
 
 const GH_PRJ_TO_TEST = 'To Test';
 const GH_PRJ_QA_REVIEW = 'QA Review';
@@ -112,9 +112,10 @@ async function processClosedAction() {
 
   if (!ghProject || ghProject.errors) {
     console.log('Error: Can not fetch GitHub Project metadata');
-
-    return;
+  
+    return; 
   }
+  
   console.log('======');
   console.log('Processing Closed PR #' + pr.number + ' : ' + pr.title);
   console.log('======');
@@ -136,7 +137,7 @@ async function processClosedAction() {
   // Need to get all open PRs to see if any other references the same issues that this PR says it fixes
   const openPRs = event.repository.url + '/pulls?state=open&per_page=100';
   const r = await request.fetch(openPRs);
-  const issueMap = issues.reduce((prev, issue) => { prev[issue] = true; return prev; }, {});
+  const issueMap = issues.reduce((prev, issue) => { prev[issue] = true; return prev; }, {})
 
   // Go through all of the Open PRs and see if they fix any of the same issues that this PR does
   // If not, then the issue has been completed, so we can process it
@@ -161,7 +162,7 @@ async function processClosedAction() {
   fixed.forEach(async (i) => {
     const detail = event.repository.url + '/issues/' + i;
     const iss = await request.fetch(detail);
-    console.log('');
+    console.log('')
     console.log('Processing Issue #' + i + ' - ' + iss.title);
 
     // If the issue is a tech debt issue or says dev will validate then don't move it to 'To Test'
@@ -186,7 +187,7 @@ async function processClosedAction() {
       // Is the issue on the board?
       if (!prjIssue?.[ghProject.id]) {
         // Issue is not on the board
-        console.log(`Issue ${i} is NOT on the project board - adding it ...`);
+        console.log(`Issue ${ i } is NOT on the project board - adding it ...`);
 
         await request.ghAddIssueToProject(ghProject, iss);
 
@@ -197,7 +198,7 @@ async function processClosedAction() {
           console.log(prjIssue);
         } else {
           console.log('Added issue to the project board');
-          console.log(JSON.stringify(prjIssue, null, 2));
+          console.log(JSON.stringify(prjIssue, null, 2));  
         }
       }
 
@@ -207,12 +208,12 @@ async function processClosedAction() {
           console.log('  Updating GitHub Project to move issue to QA Review');
 
           await moveIssueToProjectState(ghProject, prjIssue[ghProject.id], iss, GH_PRJ_QA_REVIEW);
-          await removeZubeLabels(iss);
+          await removeZubeLabels(iss);        
         } else {
           console.log('  Updating GitHub Project to move issue to Test');
 
           await moveIssueToProjectState(ghProject, prjIssue[ghProject.id], iss, GH_PRJ_TO_TEST);
-          await removeZubeLabels(iss);
+          await removeZubeLabels(iss);        
         }
       }
     }
@@ -248,8 +249,8 @@ async function processOpenOrEditAction() {
 
   if (!ghProject || ghProject.errors) {
     console.log('Error: Can not fetch GitHub Project metadata');
-
-    return;
+  
+    return; 
   }
 
   const pr = event.pull_request;
@@ -266,13 +267,14 @@ async function processOpenOrEditAction() {
   for (i of issues) {
     const detail = `${event.repository.url}/issues/${i}`;
     const iss = await request.fetch(detail);
+    console.log('')
     console.log('Processing Issue #' + i + ' - ' + iss.title);
 
     if (pr.draft) {
       console.log('    Issue will not be moved to Review (Draft PR)');
       // TODO:
-      // } else if (hasLabel(iss, BACKEND_BLOCKED_LABEL)) {
-      //   console.log('    Issue will not be moved to Review (Backend Blocked)');
+    // } else if (hasLabel(iss, BACKEND_BLOCKED_LABEL)) {
+    //   console.log('    Issue will not be moved to Review (Backend Blocked)');
     } else {
       // Need to fetch the issue project status
       const info = parseOrgAndRepo(iss.repository_url);
@@ -281,7 +283,7 @@ async function processOpenOrEditAction() {
       // Is the issue on the board?
       if (!prjIssue?.[ghProject.id]) {
         // Issue is not on the board
-        console.log(`Issue ${i} is NOT on the project board - adding it ...`);
+        console.log(`Issue ${ i } is NOT on the project board - adding it ...`);
 
         await request.ghAddIssueToProject(ghProject, iss);
 
@@ -292,19 +294,19 @@ async function processOpenOrEditAction() {
           console.log(prjIssue);
         } else {
           console.log('Added issue to the project board');
-          console.log(JSON.stringify(prjIssue, null, 2));
+          console.log(JSON.stringify(prjIssue, null, 2));  
         }
       }
 
       if (prjIssue?.[ghProject.id]) {
         await moveIssueToProjectState(ghProject, prjIssue[ghProject.id], iss, GH_PRJ_IN_REVIEW);
-        await removeZubeLabels(iss);
+        await removeZubeLabels(iss);        
       } else {
-        console.log(`Can not move issue to state ${GH_PRJ_IN_REVIEW} - issue is not on the board`);
+        console.log(`Can not move issue to state ${ GH_PRJ_IN_REVIEW } - issue is not on the board`);
       }
     }
 
-    if (iss?.milestone) {
+    if (iss.milestone) {
       milestones[iss.milestone.title] = iss.milestone.number;
     }
   }
diff --git a/README.md b/README.md
index c82108501f..c60d437e35 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,6 @@ Developer documentation and documentation for our UI components is available her
 Rancher Dashboard supports an extension mechanism that allows developers to independently provide additional functionality to Rancher. You can learn more from our [Rancher Extensions Docs](https://rancher.github.io/dashboard/extensions/introduction).
 
 
-
 # What is it?
 
 Rancher Dashboard provides a sophisticated UI for managing Kubernetes clusters and Workloads.
diff --git a/shell/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue b/shell/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue
index c7380dcc67..455225e5fd 100644
--- a/shell/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue
+++ b/shell/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue
@@ -1,8 +1,8 @@
 <script>
 
 import { _EDIT } from '@shell/config/query-params';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { LabeledInput } from '@components/Form/LabeledInput.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped.vue';
 
 export default {
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index 7178d79ca5..b8756ef63b 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -12,9 +12,23 @@ import {
 import { PaginationArgs, PaginationParam, PaginationSort } from '@shell/types/store/pagination.types';
 import { sameArrayObjects } from '@shell/utils/array';
 import { isEqual } from '@shell/utils/object';
-// import { STEVE_CACHE } from '@shell/store/features';
+import { STEVE_CACHE } from '@shell/store/features';
 import { getPerformanceSetting } from '@shell/utils/settings';
-import { DEFAULT_PERF_SETTING } from 'config/settings';
+import { DEFAULT_PERF_SETTING } from '@shell/config/settings';
+
+/**
+ * Given the vai cache changes haven't merged, work around the settings we have that are blocked by it
+ *
+ * Once cache is merged (pre 2.9.0) this will be removed
+ *
+ * TODO: RC
+ */
+const VAI_CACHE_MERGED = false;
+/**
+ * Given above, just a dev thing
+ * TODO: RC
+ */
+const PERF_ENABLED = false;
 
 /**
  * Helper functions for server side pagination
@@ -35,8 +49,10 @@ class PaginationUtils {
 
   isSteveCacheEnabled({ rootGetters }: any): boolean {
     // We always get Feature flags as part of start up (see `dispatch('features/loadServer')` in loadManagement)
-    // TODO: RC count / pages in api response is broken in image that provides cache FF, so just assume on for the moment
-    // return rootGetters['features/get'](STEVE_CACHE);
+    if (VAI_CACHE_MERGED) {
+      return rootGetters['features/get'](STEVE_CACHE);
+    }
+
     return true;
   }
 
@@ -54,8 +70,10 @@ class PaginationUtils {
       return false;
     }
 
-    // const settings = this.getSettings({ rootGetters }); // TODO: RC
-    const settings = DEFAULT_PERF_SETTING.serverPagination;
+    const settings = VAI_CACHE_MERGED ? this.getSettings({ rootGetters }) : {
+      ...DEFAULT_PERF_SETTING.serverPagination,
+      enabled: PERF_ENABLED,
+    };
 
     // No setting, not enabled
     if (!settings?.enabled) {
diff --git a/storybook/stories/InputFieldsAdvancedExample.vue b/storybook/stories/InputFieldsAdvancedExample.vue
index a25c655717..168ed517a9 100644
--- a/storybook/stories/InputFieldsAdvancedExample.vue
+++ b/storybook/stories/InputFieldsAdvancedExample.vue
@@ -6,7 +6,7 @@ import Tolerations from '@shell/components/form/Tolerations.vue';
 import Upgrading from '@shell/edit/workload/Upgrading.vue';
 import Security from '@shell/components/form/Security.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 
 export default {
   components: {
diff --git a/storybook/stories/InputFieldsExample.vue b/storybook/stories/InputFieldsExample.vue
index 3147635d5c..281ebbb7be 100644
--- a/storybook/stories/InputFieldsExample.vue
+++ b/storybook/stories/InputFieldsExample.vue
@@ -1,7 +1,7 @@
 <script>
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import UnitInput from '@shell/components/form/UnitInput.vue';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import InputWithSelect from '@shell/components/form/InputWithSelect.vue';
 import Select from '@shell/components/form/Select.vue';
 

From 2129c4d90c5fdb46e3b001228ff53a474245017a Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Mon, 20 May 2024 13:21:00 +0100
Subject: [PATCH 34/71] ooof

---
 shell/components/form/SecretSelector.vue      | 130 +++---
 .../form/SelectOrCreateAuthSecret.vue         | 396 ++++++++++--------
 shell/edit/logging-flow/Match.vue             |  51 ++-
 .../edit/networking.k8s.io.ingress/Rules.vue  | 111 ++---
 shell/models/networking.k8s.io.ingress.js     |  41 +-
 .../manager/cloudCredential/index.vue         |  69 +--
 6 files changed, 463 insertions(+), 335 deletions(-)

diff --git a/shell/components/form/SecretSelector.vue b/shell/components/form/SecretSelector.vue
index b0f36b495d..93655e073f 100644
--- a/shell/components/form/SecretSelector.vue
+++ b/shell/components/form/SecretSelector.vue
@@ -1,71 +1,75 @@
 <script>
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { SECRET } from '@shell/config/types';
-import { _EDIT, _VIEW } from '@shell/config/query-params';
-import { SECRET_TYPES as TYPES } from '@shell/config/secret';
-import sortBy from 'lodash/sortBy';
+import LabeledSelect from "@shell/components/form/LabeledSelect";
+import { SECRET } from "@shell/config/types";
+import { _EDIT, _VIEW } from "@shell/config/query-params";
+import { SECRET_TYPES as TYPES } from "@shell/config/secret";
+import sortBy from "lodash/sortBy";
 
-const NONE = '__[[NONE]]__';
+// TODO: RC fix formatting....
+
+const NONE = "__[[NONE]]__";
 
 export default {
   components: { LabeledSelect },
 
   props: {
     value: {
-      type:     [String, Object],
+      type: [String, Object],
       required: false,
-      default:  undefined
+      default: undefined,
     },
     namespace: {
-      type:     String,
-      required: true
+      type: String,
+      required: true,
     },
     types: {
-      type:    Array,
-      default: () => Object.values(TYPES)
+      type: Array,
+      default: () => Object.values(TYPES),
     },
     disabled: {
-      type:    Boolean,
-      default: false
+      type: Boolean,
+      default: false,
     },
     mountKey: {
-      type:    String,
-      default: 'valueFrom'
+      type: String,
+      default: "valueFrom",
     },
     nameKey: {
-      type:    String,
-      default: 'name'
+      type: String,
+      default: "name",
     },
     keyKey: {
-      type:    String,
-      default: 'key'
+      type: String,
+      default: "key",
     },
     showKeySelector: {
-      type:    Boolean,
-      default: false
+      type: Boolean,
+      default: false,
     },
     secretNameLabel: {
-      type:    String,
-      default: 'Secret Name'
+      type: String,
+      default: "Secret Name",
     },
     keyNameLabel: {
-      type:    String,
-      default: 'Key'
+      type: String,
+      default: "Key",
     },
     mode: {
-      type:    String,
-      default: _EDIT
+      type: String,
+      default: _EDIT,
     },
     inStore: {
-      type:    String,
-      default: 'cluster',
-    }
+      type: String,
+      default: "cluster",
+    },
   },
 
   computed: {
     name: {
       get() {
-        const name = this.showKeySelector ? this.value?.[this.mountKey]?.secretKeyRef?.[this.nameKey] : this.value;
+        const name = this.showKeySelector
+          ? this.value?.[this.mountKey]?.secretKeyRef?.[this.nameKey]
+          : this.value;
 
         return name || NONE;
       },
@@ -74,61 +78,81 @@ export default {
         const correctedName = isNone ? undefined : name;
 
         if (this.showKeySelector) {
-          this.$emit('input', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: correctedName, [this.keyKey]: '' } } });
+          this.$emit("input", {
+            [this.mountKey]: {
+              secretKeyRef: {
+                [this.nameKey]: correctedName,
+                [this.keyKey]: "",
+              },
+            },
+          });
         } else {
-          this.$emit('input', correctedName);
+          this.$emit("input", correctedName);
         }
-      }
+      },
     },
 
     key: {
       get() {
-        return this.value?.[this.mountKey]?.secretKeyRef?.[this.keyKey] || '';
+        return this.value?.[this.mountKey]?.secretKeyRef?.[this.keyKey] || "";
       },
       set(key) {
-        this.$emit('input', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: this.name, [this.keyKey]: key } } });
-      }
+        this.$emit("input", {
+          [this.mountKey]: {
+            secretKeyRef: { [this.nameKey]: this.name, [this.keyKey]: key },
+          },
+        });
+      },
     },
     secrets() {
-      const allSecrets = this.$store.getters[`${ this.inStore }/all`](SECRET);
+      const allSecrets = this.$store.getters[`${this.inStore}/all`](SECRET);
 
-      return allSecrets
-        .filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
+      return allSecrets.filter(
+        (secret) =>
+          this.types.includes(secret._type) &&
+          secret.namespace === this.namespace
+      );
     },
     secretNames() {
-      const mappedSecrets = this.secrets.map((secret) => ({
-        label: secret.name,
-        value: secret.name
-      })).sort();
+      const mappedSecrets = this.secrets
+        .map((secret) => ({
+          label: secret.name,
+          value: secret.name,
+        }))
+        .sort();
 
-      return [{ label: 'None', value: NONE }, ...sortBy(mappedSecrets, 'label')];
+      return [
+        { label: "None", value: NONE },
+        ...sortBy(mappedSecrets, "label"),
+      ];
     },
     keys() {
-      const secret = this.secrets.find((secret) => secret.name === this.name) || {};
+      const secret =
+        this.secrets.find((secret) => secret.name === this.name) || {};
 
       return Object.keys(secret.data || {}).map((key) => ({
         label: key,
-        value: key
+        value: key,
       }));
     },
     isView() {
       return this.mode === _VIEW;
     },
     isKeyDisabled() {
-      return !this.isView && (!this.name || this.name === NONE || this.disabled);
-    }
+      return (
+        !this.isView && (!this.name || this.name === NONE || this.disabled)
+      );
+    },
   },
-
 };
 </script>
 
 <template>
   <div
     class="secret-selector"
-    :class="{'show-key-selector': showKeySelector}"
+    :class="{ 'show-key-selector': showKeySelector }"
   >
     <div class="input-container">
-      <!-- TODO: RC shell/edit/logging.banzaicloud.io.output/index.vue. Upfront fetches secrets used by edit/logging.banzaicloud.io.output/providers/x. Convert to pag LabeledSelect -->
       <LabeledSelect
         v-model="name"
         :disabled="!isView && disabled"
diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index eaba085f6d..1bde73709c 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -1,17 +1,23 @@
 <script>
-import { _EDIT } from '@shell/config/query-params';
-import { LabeledInput } from '@components/Form/LabeledInput';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { AUTH_TYPE, NORMAN, SECRET } from '@shell/config/types';
-import { SECRET_TYPES } from '@shell/config/secret';
-import { base64Encode } from '@shell/utils/crypto';
-import { addObjects, insertAt } from '@shell/utils/array';
-import { sortBy } from '@shell/utils/sort';
-import paginationUtils from '@shell/utils/pagination-utils';
-import { PaginationArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { _EDIT } from "@shell/config/query-params";
+import { LabeledInput } from "@components/Form/LabeledInput";
+import LabeledSelect from "@shell/components/form/LabeledSelect";
+import { AUTH_TYPE, NORMAN, SECRET } from "@shell/config/types";
+import { SECRET_TYPES } from "@shell/config/secret";
+import { base64Encode } from "@shell/utils/crypto";
+import { addObjects, insertAt } from "@shell/utils/array";
+import { sortBy } from "@shell/utils/sort";
+import paginationUtils from "@shell/utils/pagination-utils";
+import {
+  PaginationArgs,
+  PaginationFilterField,
+  PaginationParamFilter,
+} from "@shell/types/store/pagination.types";
+
+// TODO: RC fix formatting....
 
 export default {
-  name: 'SelectOrCreateAuthSecret',
+  name: "SelectOrCreateAuthSecret",
 
   components: {
     LabeledInput,
@@ -20,32 +26,32 @@ export default {
 
   props: {
     mode: {
-      type:    String,
+      type: String,
       default: _EDIT,
     },
 
     preSelect: {
-      type:    Object,
+      type: Object,
       default: null,
     },
 
     value: {
-      type:    [String, Object],
+      type: [String, Object],
       default: null,
     },
 
     inStore: {
-      type:    String,
-      default: 'cluster',
+      type: String,
+      default: "cluster",
     },
 
     labelKey: {
-      type:    String,
-      default: 'selectOrCreateAuthSecret.label',
+      type: String,
+      default: "selectOrCreateAuthSecret.label",
     },
 
     namespace: {
-      type:     String,
+      type: String,
       required: true,
     },
 
@@ -53,62 +59,62 @@ export default {
      * Limit the selection of an existing secret to the namespace provided
      */
     limitToNamespace: {
-      type:    Boolean,
+      type: Boolean,
       default: true,
     },
 
     generateName: {
-      type:    String,
-      default: 'auth-',
+      type: String,
+      default: "auth-",
     },
 
     allowNone: {
-      type:    Boolean,
+      type: Boolean,
       default: true,
     },
 
     allowSsh: {
-      type:    Boolean,
+      type: Boolean,
       default: true,
     },
 
     allowBasic: {
-      type:    Boolean,
+      type: Boolean,
       default: true,
     },
 
     allowS3: {
-      type:    Boolean,
+      type: Boolean,
       default: false,
     },
 
     allowRke: {
-      type:    Boolean,
+      type: Boolean,
       default: false,
     },
 
     registerBeforeHook: {
-      type:     Function,
+      type: Function,
       required: true,
     },
 
     hookName: {
-      type:    String,
-      default: 'registerAuthSecret'
+      type: String,
+      default: "registerAuthSecret",
     },
 
     appendUniqueIdToHook: {
-      type:    Boolean,
-      default: false
+      type: Boolean,
+      default: false,
     },
 
     hookPriority: {
-      type:    Number,
+      type: Number,
       default: 99,
     },
 
     vertical: {
-      type:    Boolean,
+      type: Boolean,
       default: false,
     },
 
@@ -121,8 +127,8 @@ export default {
      * This property is implement to prevent this issue and delegate it to parent component.
      */
     delegateCreateToParent: {
-      type:    Boolean,
-      default: false
+      type: Boolean,
+      default: false,
     },
 
     /**
@@ -132,28 +138,45 @@ export default {
      * Set to true to cache the response
      */
     cacheSecrets: {
-      type:    Boolean,
+      type: Boolean,
       default: false,
-    }
+    },
   },
 
   async fetch() {
-    if ( (this.allowSsh || this.allowBasic || this.allowRke) && this.$store.getters[`${ this.inStore }/schemaFor`](SECRET) ) {
-      if (paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+    if (
+      (this.allowSsh || this.allowBasic || this.allowRke) &&
+      this.$store.getters[`${this.inStore}/schemaFor`](SECRET)
+    ) {
+      if (
+        paginationUtils.isSteveCacheEnabled({
+          rootGetters: this.$store.getters,
+        })
+      ) {
         // Filter results via api (because we shouldn't be fetching them all...)
         this.filteredSecrets = await this.filterSecretsByApi();
       } else {
         // Cannot yet filter via api, so fetch all and filter later on
-        this.allSecrets = await this.$store.dispatch(`${ this.inStore }/findAll`, { type: SECRET });
+        this.allSecrets = await this.$store.dispatch(
+          `${this.inStore}/findAll`,
+          { type: SECRET }
+        );
       }
     }
 
-    if ( this.allowS3 && this.$store.getters['rancher/canList'](NORMAN.CLOUD_CREDENTIAL) ) {
+    if (
+      this.allowS3 &&
+      this.$store.getters["rancher/canList"](NORMAN.CLOUD_CREDENTIAL)
+    ) {
       // Avoid an async call and loading screen if already loaded by someone else
-      if ( this.$store.getters['rancher/haveAll'](NORMAN.CLOUD_CREDENTIAL) ) {
-        this.allCloudCreds = this.$store.getters['rancher/all'](NORMAN.CLOUD_CREDENTIAL);
+      if (this.$store.getters["rancher/haveAll"](NORMAN.CLOUD_CREDENTIAL)) {
+        this.allCloudCreds = this.$store.getters["rancher/all"](
+          NORMAN.CLOUD_CREDENTIAL
+        );
       } else {
-        this.allCloudCreds = await this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
+        this.allCloudCreds = await this.$store.dispatch("rancher/findAll", {
+          type: NORMAN.CLOUD_CREDENTIAL,
+        });
       }
     } else {
       this.allCloudCreds = [];
@@ -161,18 +184,18 @@ export default {
 
     let selected = this.preSelect?.selected || AUTH_TYPE._NONE;
 
-    if ( !this.value ) {
-      this.publicKey = this.preSelect?.publicKey || '';
-      this.privateKey = this.preSelect?.privateKey || '';
+    if (!this.value) {
+      this.publicKey = this.preSelect?.publicKey || "";
+      this.privateKey = this.preSelect?.privateKey || "";
     }
 
-    if ( this.value ) {
-      if ( typeof this.value === 'object' ) {
-        selected = `${ this.value.namespace }/${ this.value.name }`;
-      } else if ( this.value.includes('/') || this.value.includes(':') ) {
+    if (this.value) {
+      if (typeof this.value === "object") {
+        selected = `${this.value.namespace}/${this.value.name}`;
+      } else if (this.value.includes("/") || this.value.includes(":")) {
         selected = this.value;
-      } else if ( this.namespace ) {
-        selected = `${ this.namespace }/${ this.value }`;
+      } else if (this.namespace) {
+        selected = `${this.namespace}/${this.value}`;
       } else {
         selected = this.value;
       }
@@ -187,20 +210,20 @@ export default {
     return {
       allCloudCreds: [],
 
-      allSecrets:      null,
+      allSecrets: null,
       filteredSecrets: null,
 
       selected: null,
 
       filterByNamespace: this.namespace && this.limitToNamespace,
 
-      publicKey:  '',
-      privateKey: '',
-      uniqueId:   new Date().getTime(), // Allows form state to be individually tracked if the form is in a list
+      publicKey: "",
+      privateKey: "",
+      uniqueId: new Date().getTime(), // Allows form state to be individually tracked if the form is in a list
 
-      SSH:   AUTH_TYPE._SSH,
+      SSH: AUTH_TYPE._SSH,
       BASIC: AUTH_TYPE._BASIC,
-      S3:    AUTH_TYPE._S3,
+      S3: AUTH_TYPE._S3,
     };
   },
 
@@ -208,15 +231,15 @@ export default {
     secretTypes() {
       const types = [];
 
-      if ( this.allowSsh ) {
+      if (this.allowSsh) {
         types.push(SECRET_TYPES.SSH);
       }
 
-      if ( this.allowBasic ) {
+      if (this.allowBasic) {
         types.push(SECRET_TYPES.BASIC);
       }
 
-      if ( this.allowRke ) {
+      if (this.allowRke) {
         types.push(SECRET_TYPES.RKE_AUTH_CONFIG);
       }
 
@@ -234,10 +257,17 @@ export default {
       if (this.allSecrets) {
         // Fitler secrets given their namespace and required secret type
         filteredSecrets = this.allSecrets
-          .filter((x) => this.filterByNamespace ? x.metadata.namespace === this.namespace : true )
+          .filter((x) =>
+            this.filterByNamespace
+              ? x.metadata.namespace === this.namespace
+              : true
+          )
           .filter((x) => {
             // Must match one of the required types
-            if ( this.secretTypes.length && !this.secretTypes.includes(x._type) ) {
+            if (
+              this.secretTypes.length &&
+              !this.secretTypes.includes(x._type)
+            ) {
               return false;
             }
 
@@ -248,11 +278,12 @@ export default {
       }
 
       let out = filteredSecrets.map((x) => {
-        const {
-          dataPreview, subTypeDisplay, metadata, id
-        } = x;
+        const { dataPreview, subTypeDisplay, metadata, id } = x;
 
-        const label = subTypeDisplay && dataPreview ? `${ metadata.name } (${ subTypeDisplay }: ${ dataPreview })` : `${ metadata.name } (${ subTypeDisplay })`;
+        const label =
+          subTypeDisplay && dataPreview
+            ? `${metadata.name} (${subTypeDisplay}: ${dataPreview})`
+            : `${metadata.name} (${subTypeDisplay})`;
 
         return {
           label,
@@ -261,13 +292,13 @@ export default {
         };
       });
 
-      if ( this.allowS3 ) {
+      if (this.allowS3) {
         const more = this.allCloudCreds
-          .filter((x) => ['aws', 's3'].includes(x.provider) )
+          .filter((x) => ["aws", "s3"].includes(x.provider))
           .map((x) => {
             return {
-              label: `${ x.nameDisplay } (${ x.providerDisplay })`,
-              group: 'Cloud Credentials',
+              label: `${x.nameDisplay} (${x.providerDisplay})`,
+              group: "Cloud Credentials",
               value: x.id,
             };
           });
@@ -275,18 +306,20 @@ export default {
         addObjects(out, more);
       }
 
-      if ( !this.limitToNamespace ) {
-        out = sortBy(out, 'group');
-        if ( out.length ) {
-          let lastGroup = '';
+      if (!this.limitToNamespace) {
+        out = sortBy(out, "group");
+        if (out.length) {
+          let lastGroup = "";
 
-          for ( let i = 0 ; i < out.length ; i++ ) {
-            if ( out[i].group !== lastGroup ) {
+          for (let i = 0; i < out.length; i++) {
+            if (out[i].group !== lastGroup) {
               lastGroup = out[i].group;
 
               insertAt(out, i, {
-                kind:     'title',
-                label:    this.t('selectOrCreateAuthSecret.namespaceGroup', { name: lastGroup }),
+                kind: "title",
+                label: this.t("selectOrCreateAuthSecret.namespaceGroup", {
+                  name: lastGroup,
+                }),
                 disabled: true,
               });
 
@@ -296,49 +329,49 @@ export default {
         }
       }
 
-      if ( out.length ) {
+      if (out.length) {
         out.unshift({
-          kind:     'title',
-          label:    this.t('selectOrCreateAuthSecret.chooseExisting'),
-          disabled: true
+          kind: "title",
+          label: this.t("selectOrCreateAuthSecret.chooseExisting"),
+          disabled: true,
         });
       }
-      if ( this.allowNone ) {
+      if (this.allowNone) {
         out.unshift({
-          label: this.t('generic.none'),
+          label: this.t("generic.none"),
           value: AUTH_TYPE._NONE,
         });
       }
 
       if (this.allowSsh || this.allowS3 || this.allowBasic) {
         out.unshift({
-          label:    'divider',
+          label: "divider",
           disabled: true,
-          kind:     'divider'
+          kind: "divider",
         });
       }
 
-      if ( this.allowSsh ) {
+      if (this.allowSsh) {
         out.unshift({
-          label: this.t('selectOrCreateAuthSecret.createSsh'),
+          label: this.t("selectOrCreateAuthSecret.createSsh"),
           value: AUTH_TYPE._SSH,
-          kind:  'highlighted'
+          kind: "highlighted",
         });
       }
 
-      if ( this.allowS3 ) {
+      if (this.allowS3) {
         out.unshift({
-          label: this.t('selectOrCreateAuthSecret.createS3'),
+          label: this.t("selectOrCreateAuthSecret.createS3"),
           value: AUTH_TYPE._S3,
-          kind:  'highlighted'
+          kind: "highlighted",
         });
       }
 
-      if ( this.allowBasic ) {
+      if (this.allowBasic) {
         out.unshift({
-          label: this.t('selectOrCreateAuthSecret.createBasic'),
+          label: this.t("selectOrCreateAuthSecret.createBasic"),
           value: AUTH_TYPE._BASIC,
-          kind:  'highlighted'
+          kind: "highlighted",
         });
       }
 
@@ -346,33 +379,37 @@ export default {
     },
 
     firstCol() {
-      if ( this.vertical ) {
-        return '';
+      if (this.vertical) {
+        return "";
       }
 
-      if ( this.selected === AUTH_TYPE._SSH || this.selected === AUTH_TYPE._BASIC || this.selected === AUTH_TYPE._S3 ) {
-        return 'col span-4';
+      if (
+        this.selected === AUTH_TYPE._SSH ||
+        this.selected === AUTH_TYPE._BASIC ||
+        this.selected === AUTH_TYPE._S3
+      ) {
+        return "col span-4";
       }
 
-      return 'col span-6';
+      return "col span-6";
     },
 
     moreCols() {
-      if ( this.vertical ) {
-        return 'mt-20';
+      if (this.vertical) {
+        return "mt-20";
       }
 
-      return 'col span-4';
-    }
+      return "col span-4";
+    },
   },
 
   watch: {
-    selected:   'update',
-    publicKey:  'updateKeyVal',
-    privateKey: 'updateKeyVal',
+    selected: "update",
+    publicKey: "updateKeyVal",
+    privateKey: "updateKeyVal",
 
     async namespace(ns) {
-      if ( ns && !this.selected.startsWith(`${ ns }/`) ) {
+      if (ns && !this.selected.startsWith(`${ns}/`)) {
         this.selected = AUTH_TYPE._NONE;
       }
 
@@ -380,80 +417,105 @@ export default {
       if (this.filteredSecrets && this.filterByNamespace) {
         this.filteredSecrets = await this.filterSecretsByApi();
       }
-    }
+    },
   },
 
   created() {
     if (this.registerBeforeHook) {
-      const hookName = this.appendUniqueIdToHook ? this.hookName + this.uniqueId : this.hookName;
+      const hookName = this.appendUniqueIdToHook
+        ? this.hookName + this.uniqueId
+        : this.hookName;
 
       if (!this.delegateCreateToParent) {
         this.registerBeforeHook(this.doCreate, hookName, this.hookPriority);
       }
     } else {
-      throw new Error('Before Hook is missing');
+      throw new Error("Before Hook is missing");
     }
   },
 
   methods: {
     // TODO: RC unit tests
     async filterSecretsByApi() {
-      const findPageArgs = { // Of type ActionFindPageArgs
-        namespaced: this.filterByNamespace ? this.namespace : '',
+      const findPageArgs = {
+        // Of type ActionFindPageArgs
+        namespaced: this.filterByNamespace ? this.namespace : "",
         pagination: new PaginationArgs({
           pageSize: -1,
-          filters:  [
+          filters: [
             PaginationParamFilter.createMultipleFields(
-              this.secretTypes.map((t) => new PaginationFilterField({
-                field: 'metadata.fields.2',
-                value: t,
-              }))
+              this.secretTypes.map(
+                (t) =>
+                  new PaginationFilterField({
+                    field: "metadata.fields.2",
+                    value: t,
+                  })
+              )
             ),
           ],
         }),
       };
 
       if (this.cacheSecrets) {
-        return await this.$store.dispatch(`${ this.inStore }/findPage`, { type: SECRET, opt: findPageArgs });
+        return await this.$store.dispatch(`${this.inStore}/findPage`, {
+          type: SECRET,
+          opt: findPageArgs,
+        });
       }
 
-      const url = this.$store.getters[`${ this.inStore }/urlFor`](SECRET, null, findPageArgs);
+      const url = this.$store.getters[`${this.inStore}/urlFor`](
+        SECRET,
+        null,
+        findPageArgs
+      );
       const res = await this.$store.dispatch(`cluster/request`, { url });
 
       return res?.data || [];
     },
 
     updateKeyVal() {
-      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(this.selected)) {
-        this.privateKey = '';
-        this.publicKey = '';
+      if (
+        ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(
+          this.selected
+        )
+      ) {
+        this.privateKey = "";
+        this.publicKey = "";
       }
 
-      this.$emit('inputauthval', {
-        selected:   this.selected,
+      this.$emit("inputauthval", {
+        selected: this.selected,
         privateKey: this.privateKey,
-        publicKey:  this.publicKey
+        publicKey: this.publicKey,
       });
     },
 
     update() {
-      if ( (!this.selected || [AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._NONE].includes(this.selected))) {
-        this.$emit('input', null);
-      } else if ( this.selected.includes(':') ) {
+      if (
+        !this.selected ||
+        [
+          AUTH_TYPE._SSH,
+          AUTH_TYPE._BASIC,
+          AUTH_TYPE._S3,
+          AUTH_TYPE._NONE,
+        ].includes(this.selected)
+      ) {
+        this.$emit("input", null);
+      } else if (this.selected.includes(":")) {
         // Cloud creds
-        this.$emit('input', this.selected);
+        this.$emit("input", this.selected);
       } else {
-        const split = this.selected.split('/');
+        const split = this.selected.split("/");
 
-        if ( this.limitToNamespace ) {
-          this.$emit('input', split[1]);
+        if (this.limitToNamespace) {
+          this.$emit("input", split[1]);
         } else {
           const out = {
             namespace: split[0],
-            name:      split[1]
+            name: split[1],
           };
 
-          this.$emit('input', out);
+          this.$emit("input", out);
         }
       }
 
@@ -461,49 +523,54 @@ export default {
     },
 
     async doCreate() {
-      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(this.selected) || this.delegateCreateToParent ) {
+      if (
+        ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(
+          this.selected
+        ) ||
+        this.delegateCreateToParent
+      ) {
         return;
       }
 
       let secret;
 
-      if ( this.selected === AUTH_TYPE._S3 ) {
+      if (this.selected === AUTH_TYPE._S3) {
         secret = await this.$store.dispatch(`rancher/create`, {
-          type:               NORMAN.CLOUD_CREDENTIAL,
+          type: NORMAN.CLOUD_CREDENTIAL,
           s3credentialConfig: {
             accessKey: this.publicKey,
             secretKey: this.privateKey,
           },
         });
       } else {
-        secret = await this.$store.dispatch(`${ this.inStore }/create`, {
-          type:     SECRET,
+        secret = await this.$store.dispatch(`${this.inStore}/create`, {
+          type: SECRET,
           metadata: {
-            namespace:    this.namespace,
-            generateName: this.generateName
+            namespace: this.namespace,
+            generateName: this.generateName,
           },
         });
 
         let type, publicField, privateField;
 
-        switch ( this.selected ) {
-        case AUTH_TYPE._SSH:
-          type = SECRET_TYPES.SSH;
-          publicField = 'ssh-publickey';
-          privateField = 'ssh-privatekey';
-          break;
-        case AUTH_TYPE._BASIC:
-          type = SECRET_TYPES.BASIC;
-          publicField = 'username';
-          privateField = 'password';
-          break;
-        default:
-          throw new Error('Unknown type');
+        switch (this.selected) {
+          case AUTH_TYPE._SSH:
+            type = SECRET_TYPES.SSH;
+            publicField = "ssh-publickey";
+            privateField = "ssh-privatekey";
+            break;
+          case AUTH_TYPE._BASIC:
+            type = SECRET_TYPES.BASIC;
+            publicField = "username";
+            privateField = "password";
+            break;
+          default:
+            throw new Error("Unknown type");
         }
 
         secret._type = type;
         secret.data = {
-          [publicField]:  base64Encode(this.publicKey),
+          [publicField]: base64Encode(this.publicKey),
           [privateField]: base64Encode(this.privateKey),
         };
       }
@@ -521,13 +588,8 @@ export default {
 </script>
 
 <template>
-  <div
-    class="select-or-create-auth-secret"
-  >
-    <div
-      class="mt-20"
-      :class="{'row': !vertical}"
-    >
+  <div class="select-or-create-auth-secret">
+    <div class="mt-20" :class="{ row: !vertical }">
       <div :class="firstCol">
         <LabeledSelect
           v-model="selected"
@@ -536,7 +598,7 @@ export default {
           :label-key="labelKey"
           :loading="$fetchState.pending"
           :options="options"
-          :selectable="option => !option.disabled"
+          :selectable="(option) => !option.disabled"
         />
       </div>
       <template v-if="selected === SSH">
diff --git a/shell/edit/logging-flow/Match.vue b/shell/edit/logging-flow/Match.vue
index 7ffc255b56..c7e0a4ffca 100644
--- a/shell/edit/logging-flow/Match.vue
+++ b/shell/edit/logging-flow/Match.vue
@@ -1,49 +1,51 @@
 <script>
-import KeyValue from '@shell/components/form/KeyValue';
-import Select from '@shell/components/form/Select';
+import KeyValue from "@shell/components/form/KeyValue";
+import Select from "@shell/components/form/Select";
+
+// TODO: RC fix formatting....
 
 export default {
   components: { KeyValue, Select },
 
   props: {
     mode: {
-      type:     String,
+      type: String,
       required: true,
     },
 
     value: {
-      type:    Object,
+      type: Object,
       default: () => {
         return {};
       },
     },
 
     nodes: {
-      type:    Array,
+      type: Array,
       default: () => [],
     },
 
     containers: {
-      type:    Array,
+      type: Array,
       default: () => [],
     },
 
     namespaces: {
-      type:    Array,
+      type: Array,
       default: () => [],
     },
 
     isClusterFlow: {
-      type:    Boolean,
-      default: false
-    }
+      type: Boolean,
+      default: false,
+    },
   },
 
   methods: {
     update() {},
 
     removeRule() {
-      this.$emit('remove');
+      this.$emit("remove");
     },
   },
 };
@@ -53,7 +55,11 @@ export default {
   <div>
     <KeyValue
       v-model="value.labels"
-      :title="value.select ? t('logging.flow.matches.pods.title.include') : t('logging.flow.matches.pods.title.exclude')"
+      :title="
+        value.select
+          ? t('logging.flow.matches.pods.title.include')
+          : t('logging.flow.matches.pods.title.exclude')
+      "
       :mode="mode"
       :initial-empty-row="true"
       :read-allowed="false"
@@ -65,7 +71,11 @@ export default {
     />
     <div class="spacer" />
     <h3>
-      {{ value.select ? t('logging.flow.matches.nodes.title.include') : t('logging.flow.matches.nodes.title.exclude') }}
+      {{
+        value.select
+          ? t("logging.flow.matches.nodes.title.include")
+          : t("logging.flow.matches.nodes.title.exclude")
+      }}
     </h3>
     <div class="row">
       <div class="col span-12">
@@ -85,13 +95,14 @@ export default {
     </div>
     <div class="spacer" />
     <h3>
-      {{ value.select ? t('logging.flow.matches.containerNames.title.include') : t('logging.flow.matches.containerNames.title.exclude') }}
+      {{
+        value.select
+          ? t("logging.flow.matches.containerNames.title.include")
+          : t("logging.flow.matches.containerNames.title.exclude")
+      }}
     </h3>
     <div class="row">
       <div class="col span-12">
-        <!-- TODO: RC shell/edit/logging-flow/index.vue. Upfront fetches all pods, to get all containers (ouch). Convert to pag LabeledSelect -->
-        <!-- There's no containers api, they're only accessible via pods -->
-        <!-- could still show a page of containers... but it would be a variable amount given those in 10 pods -->
         <Select
           v-model="value.container_names"
           class="lg"
@@ -108,7 +119,11 @@ export default {
     <div v-if="isClusterFlow">
       <div class="spacer" />
       <h3>
-        {{ value.select ? t('logging.flow.matches.namespaces.title.include') : t('logging.flow.matches.namespaces.title.exclude') }}
+        {{
+          value.select
+            ? t("logging.flow.matches.namespaces.title.include")
+            : t("logging.flow.matches.namespaces.title.exclude")
+        }}
       </h3>
       <div class="row">
         <div class="col span-12">
diff --git a/shell/edit/networking.k8s.io.ingress/Rules.vue b/shell/edit/networking.k8s.io.ingress/Rules.vue
index 0dc7cd0f9a..59d717ca7a 100644
--- a/shell/edit/networking.k8s.io.ingress/Rules.vue
+++ b/shell/edit/networking.k8s.io.ingress/Rules.vue
@@ -1,65 +1,76 @@
 <script>
-import { WORKLOAD_TYPES } from '@shell/config/types';
-import Loading from '@shell/components/Loading';
-import SortableTable from '@shell/components/SortableTable';
-import { _VIEW } from '@shell/config/query-params';
-import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
-import { random32 } from '@shell/utils/string';
-import Rule from './Rule';
+import { WORKLOAD_TYPES } from "@shell/config/types";
+import Loading from "@shell/components/Loading";
+import SortableTable from "@shell/components/SortableTable";
+import { _VIEW } from "@shell/config/query-params";
+import ArrayListGrouped from "@shell/components/form/ArrayListGrouped";
+import { random32 } from "@shell/utils/string";
+import Rule from "./Rule";
+
+// TODO: RC fix formatting....
 
 export default {
   components: {
-    ArrayListGrouped, Loading, Rule, SortableTable
+    ArrayListGrouped,
+    Loading,
+    Rule,
+    SortableTable,
   },
 
   props: {
     value: {
-      type:    Object,
-      default: () => {}
+      type: Object,
+      default: () => {},
     },
 
     mode: {
-      type:    String,
-      default: 'edit'
+      type: String,
+      default: "edit",
     },
 
     certificates: {
-      type:    Array,
-      default: () => []
+      type: Array,
+      default: () => [],
     },
 
     serviceTargets: {
-      type:    Array,
-      default: () => []
+      type: Array,
+      default: () => [],
     },
 
     rules: {
       default: () => ({
         requestHost: [],
-        path:        [],
-        port:        [],
-        target:      []
+        path: [],
+        port: [],
+        target: [],
       }),
       type: Object,
-    }
+    },
   },
 
   async fetch() {
-    // TODO: RC shell/edit/networking.k8s.io.ingress/Rules.vue. used by (just?) shell/models/networking.k8s.io.ingress.js `targetTo`
-    await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })));
+    // TODO: RC shell/edit/networking.k8s.io.ingress/Rules.vue. used by (just? NO, 1 other) shell/models/networking.k8s.io.ingress.js `targetTo`
+    await Promise.all(
+      Object.values(WORKLOAD_TYPES).map((type) =>
+        this.$store.dispatch("cluster/findAll", { type })
+      )
+    );
   },
 
   beforeUpdate() {
     for (const rule of this.value.spec.rules) {
       if (!rule.vKey) {
-        this.$set(rule, 'vKey', random32(1));
+        this.$set(rule, "vKey", random32(1));
       }
     }
   },
 
   computed: {
     workloads() {
-      return Object.values(WORKLOAD_TYPES).flatMap((type) => this.$store.getters['cluster/all'](type));
+      return Object.values(WORKLOAD_TYPES).flatMap((type) =>
+        this.$store.getters["cluster/all"](type)
+      );
     },
     isView() {
       return this.mode === _VIEW;
@@ -67,52 +78,58 @@ export default {
     ruleHeaders() {
       const headers = [
         {
-          name:      'fullPath',
-          label:     this.t('ingress.rules.headers.path'),
-          value:     '',
-          formatter: 'IngressFullPath'
+          name: "fullPath",
+          label: this.t("ingress.rules.headers.path"),
+          value: "",
+          formatter: "IngressFullPath",
         },
         {
-          name:          'target',
-          label:         this.t('ingress.rules.headers.target'),
-          formatter:     'Link',
-          formatterOpts: { options: { internal: true }, urlKey: 'targetLink.to' },
-          value:         'targetLink',
+          name: "target",
+          label: this.t("ingress.rules.headers.target"),
+          formatter: "Link",
+          formatterOpts: {
+            options: { internal: true },
+            urlKey: "targetLink.to",
+          },
+          value: "targetLink",
         },
         {
-          name:  'port',
-          label: this.t('ingress.rules.headers.port'),
-          value: 'port',
+          name: "port",
+          label: this.t("ingress.rules.headers.port"),
+          value: "port",
         },
         {
-          name:      'certs',
-          label:     this.t('ingress.rules.headers.certificates'),
-          value:     'certs',
-          formatter: 'ListLink',
+          name: "certs",
+          label: this.t("ingress.rules.headers.certificates"),
+          value: "certs",
+          formatter: "ListLink",
         },
       ];
 
       if (this.value.showPathType) {
         headers.unshift({
-          name:  'pathType',
-          label: this.t('ingress.rules.headers.pathType'),
-          value: 'pathType',
+          name: "pathType",
+          label: this.t("ingress.rules.headers.pathType"),
+          value: "pathType",
         });
       }
 
       return headers;
     },
     rows() {
-      return this.value.createRulesForListPage(this.workloads, this.certificates);
-    }
+      return this.value.createRulesForListPage(
+        this.workloads,
+        this.certificates
+      );
+    },
   },
   methods: {
     onAdd() {
       if (this.$refs.lastRule?.focus) {
         this.$refs.lastRule.focus();
       }
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/shell/models/networking.k8s.io.ingress.js b/shell/models/networking.k8s.io.ingress.js
index 49a4d44a45..60a980c399 100644
--- a/shell/models/networking.k8s.io.ingress.js
+++ b/shell/models/networking.k8s.io.ingress.js
@@ -4,6 +4,8 @@ import { get } from '@shell/utils/object';
 import isEmpty from 'lodash/isEmpty';
 import SteveModel from '@shell/plugins/steve/steve-class';
 
+// TODO: RC fix formatting....
+
 function tlsHosts(spec) {
   const tls = spec.tls || [];
 
@@ -24,7 +26,7 @@ export function ingressFullPath(resource, rule, path = {}) {
     protocol = isTlsHost(spec, hostValue) ? 'https://' : 'http://';
   }
 
-  return `${ protocol }${ hostValue }${ pathValue }`;
+  return `${protocol}${hostValue}${pathValue}`;
 }
 
 export default class Ingress extends SteveModel {
@@ -42,19 +44,20 @@ export default class Ingress extends SteveModel {
     }
 
     const isTargetsWorkload = serviceName.startsWith('ingress-');
-    const id = `${ this.namespace }/${ serviceName }`;
+    const id = `${this.namespace}/${serviceName}`;
 
-    if ( isTargetsWorkload ) {
+    if (isTargetsWorkload) {
       // TODO: RC This is the reason shell/components/formatter/IngressTarget.vue requires ALL WORKLOADS
+      // Need to expose workloadId's and fetch specific ones in IngressTarget?
       const workload = workloads.find((w) => w.id === (id));
 
       return workload?.detailLocation || '';
     } else {
       return {
-        name:   'c-cluster-product-resource-namespace-id',
+        name: 'c-cluster-product-resource-namespace-id',
         params: {
-          resource:  SERVICE,
-          id:        serviceName,
+          resource: SERVICE,
+          id: serviceName,
           namespace: this.namespace,
         }
       };
@@ -77,14 +80,14 @@ export default class Ingress extends SteveModel {
 
     return {
       // isUrl thinks urls which contain '*' are valid so I'm adding an additional check for '*'
-      isUrl:           isUrl(fullPath) && !fullPath.includes('*'),
-      pathType:        path.pathType,
+      isUrl: isUrl(fullPath) && !fullPath.includes('*'),
+      pathType: path.pathType,
       fullPath,
       serviceName,
       serviceTargetTo: this.targetTo(workloads, serviceName),
-      certs:           this.certLinks(rule, certificates),
-      targetLink:      this.targetLink(workloads, serviceName),
-      port:            get(path?.backend, this.servicePortPath)
+      certs: this.certLinks(rule, certificates),
+      targetLink: this.targetLink(workloads, serviceName),
+      port: get(path?.backend, this.servicePortPath)
     };
   }
 
@@ -98,17 +101,17 @@ export default class Ingress extends SteveModel {
 
     if (cert.secretName && certificates.includes(secretName)) {
       to = {
-        name:   'c-cluster-product-resource-namespace-id',
+        name: 'c-cluster-product-resource-namespace-id',
         params: {
           resource: SECRET,
-          id:       secretName
+          id: secretName
         }
       };
     }
 
     return {
       to,
-      text:    secretName,
+      text: secretName,
       options: { internal: true }
     };
   }
@@ -126,8 +129,8 @@ export default class Ingress extends SteveModel {
 
   targetLink(workloads, serviceName) {
     return {
-      to:      this.targetTo(workloads, serviceName),
-      text:    serviceName,
+      to: this.targetTo(workloads, serviceName),
+      text: serviceName,
       options: { internal: true }
     };
   }
@@ -136,12 +139,12 @@ export default class Ingress extends SteveModel {
     const backend = get(this.spec, this.defaultBackendPath);
     const serviceName = get(backend, this.serviceNamePath);
 
-    if ( !serviceName ) {
+    if (!serviceName) {
       return null;
     }
 
     return {
-      name:     serviceName,
+      name: serviceName,
       targetTo: this.targetTo(workloads, serviceName)
     };
   }
@@ -199,7 +202,7 @@ export default class Ingress extends SteveModel {
 
     if (this.spec?.ingressClassName) {
       out.push({
-        label:   this.t('ingress.ingressClass.label'),
+        label: this.t('ingress.ingressClass.label'),
         content: this.spec.ingressClassName,
       });
     }
diff --git a/shell/pages/c/_cluster/manager/cloudCredential/index.vue b/shell/pages/c/_cluster/manager/cloudCredential/index.vue
index c32bd09d2f..35a9177801 100644
--- a/shell/pages/c/_cluster/manager/cloudCredential/index.vue
+++ b/shell/pages/c/_cluster/manager/cloudCredential/index.vue
@@ -1,30 +1,43 @@
 <script>
-import Loading from '@shell/components/Loading';
-import ResourceTable from '@shell/components/ResourceTable';
-import Masthead from '@shell/components/ResourceList/Masthead';
-import { NORMAN, SECRET } from '@shell/config/types';
-import { AGE_NORMAN, DESCRIPTION, ID_UNLINKED, NAME_UNLINKED } from '@shell/config/table-headers';
+import Loading from "@shell/components/Loading";
+import ResourceTable from "@shell/components/ResourceTable";
+import Masthead from "@shell/components/ResourceList/Masthead";
+import { NORMAN, SECRET } from "@shell/config/types";
+import {
+  AGE_NORMAN,
+  DESCRIPTION,
+  ID_UNLINKED,
+  NAME_UNLINKED,
+} from "@shell/config/table-headers";
+
+// TODO: RC fix formatting....
 
 export default {
   components: {
-    Loading, ResourceTable, Masthead
+    Loading,
+    ResourceTable,
+    Masthead,
   },
 
   async fetch() {
-    if ( this.$store.getters['management/schemaFor'](SECRET) ) {
-      // TODO: RC shell/pages/c/_cluster/manager/cloudCredential/index.vue. Convert to pag LabeledSelect, only get secrets for current page (secondary resource)
+    if (this.$store.getters["management/schemaFor"](SECRET)) {
+      // TODO: RC shell/pages/c/_cluster/manager/cloudCredential/index.vue.
+      // list is norman creds, cannot paginate.
+      // Convert anything that uses cred `publicData` to a Live column and fetch specific secrets as needed
       // Having secrets allows showing the public portion of more types but not all users can see them.
-      await this.$store.dispatch('management/findAll', { type: SECRET });
+      await this.$store.dispatch("management/findAll", { type: SECRET });
     }
 
-    this.allCredentials = await this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
+    this.allCredentials = await this.$store.dispatch("rancher/findAll", {
+      type: NORMAN.CLOUD_CREDENTIAL,
+    });
   },
 
   data() {
     return {
       allCredentials: null,
-      resource:       NORMAN.CLOUD_CREDENTIAL,
-      schema:         this.$store.getters['rancher/schemaFor'](NORMAN.CLOUD_CREDENTIAL),
+      resource: NORMAN.CLOUD_CREDENTIAL,
+      schema: this.$store.getters["rancher/schemaFor"](NORMAN.CLOUD_CREDENTIAL),
     };
   },
 
@@ -38,11 +51,11 @@ export default {
         ID_UNLINKED,
         NAME_UNLINKED,
         {
-          name:        'apikey',
-          labelKey:    'tableHeaders.apikey',
-          value:       'publicData',
-          sort:        'publicData',
-          search:      'publicData',
+          name: "apikey",
+          labelKey: "tableHeaders.apikey",
+          value: "publicData",
+          sort: "publicData",
+          search: "publicData",
           dashIfEmpty: true,
         },
         DESCRIPTION,
@@ -52,10 +65,10 @@ export default {
 
     createLocation() {
       return {
-        name:   'c-cluster-manager-cloudCredential-create',
+        name: "c-cluster-manager-cloudCredential-create",
         params: {
-          product:  this.$store.getters['currentProduct'].name,
-          resource: this.resource
+          product: this.$store.getters["currentProduct"].name,
+          resource: this.resource,
         },
       };
     },
@@ -84,18 +97,12 @@ export default {
       :namespaced="false"
       group-by="providerDisplay"
     >
-      <template #cell:id="{row}">
-        {{ row.id.replace('cattle-global-data:','') }}
+      <template #cell:id="{ row }">
+        {{ row.id.replace("cattle-global-data:", "") }}
       </template>
-      <template #cell:apikey="{row}">
-        <span
-          v-if="row.publicData"
-          v-clean-html="row.publicData"
-        />
-        <span
-          v-else
-          class="text-muted"
-        >&mdash;</span>
+      <template #cell:apikey="{ row }">
+        <span v-if="row.publicData" v-clean-html="row.publicData" />
+        <span v-else class="text-muted">&mdash;</span>
       </template>
     </ResourceTable>
   </div>

From 82a7177ff21f605d5bc8de7cf440c19adce802bc Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 21 May 2024 10:46:59 +0100
Subject: [PATCH 35/71] changes after self review... 3

---
 shell/components/form/LabeledSelect.vue       |  2 +-
 .../form/SelectOrCreateAuthSecret.vue         | 93 ++++++++-----------
 shell/config/secret.js                        |  3 +-
 shell/utils/pagination-utils.ts               |  5 +-
 4 files changed, 41 insertions(+), 62 deletions(-)

diff --git a/shell/components/form/LabeledSelect.vue b/shell/components/form/LabeledSelect.vue
index 8e01214809..a604251e98 100644
--- a/shell/components/form/LabeledSelect.vue
+++ b/shell/components/form/LabeledSelect.vue
@@ -5,7 +5,7 @@ import { get } from '@shell/utils/object';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
-import LabeledSelectPagination from './LabeledSelect/labeled-select-pagination';
+import LabeledSelectPagination from '@shell/components/form/labeled-select-utils/labeled-select-pagination';
 import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSelect';
 
 // In theory this would be nicer as LabeledSelect/index.vue, however that would break a lot of places where we import this (which includes extensions)
diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index 3e5ec74ef2..e630d0a5ac 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -7,8 +7,6 @@ import { SECRET_TYPES } from '@shell/config/secret';
 import { base64Encode } from '@shell/utils/crypto';
 import { addObjects, insertAt } from '@shell/utils/array';
 import { sortBy } from '@shell/utils/sort';
-import paginationUtils from '@shell/utils/pagination-utils';
-import { PaginationArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
   name: 'SelectOrCreateAuthSecret',
@@ -49,9 +47,6 @@ export default {
       required: true,
     },
 
-    /**
-     * Limit the selection of an existing secret to the namespace provided
-     */
     limitToNamespace: {
       type:    Boolean,
       default: true,
@@ -128,7 +123,12 @@ export default {
 
   async fetch() {
     if ( (this.allowSsh || this.allowBasic || this.allowRke) && this.$store.getters[`${ this.inStore }/schemaFor`](SECRET) ) {
-      this.filteredSecrets = await this.fetchSecrets();
+      // Avoid an async call and loading screen if already loaded by someone else
+      if ( this.$store.getters[`${ this.inStore }/haveAll`](SECRET) ) {
+        this.allSecrets = this.$store.getters[`${ this.inStore }/all`](SECRET);
+      } else {
+        this.allSecrets = await this.$store.dispatch(`${ this.inStore }/findAll`, { type: SECRET });
+      }
     }
 
     if ( this.allowS3 && this.$store.getters['rancher/canList'](NORMAN.CLOUD_CREDENTIAL) ) {
@@ -168,23 +168,32 @@ export default {
 
   data(props) {
     return {
-      allCloudCreds:   [],
-      filteredSecrets: [],
-      selected:        null,
+      allCloudCreds: [],
+      allSecrets:    [],
+      selected:      null,
 
       publicKey:  '',
       privateKey: '',
-      uniqueId:   new Date().getTime(), // Allows form state to be individually tracked if the form is in a list,
-
-      SSH:   AUTH_TYPE._SSH,
-      BASIC: AUTH_TYPE._BASIC,
-      S3:    AUTH_TYPE._S3,
+      uniqueId:   new Date().getTime() // Allows form state to be individually tracked if the form is in a list
     };
   },
 
   computed: {
-    secretTypes() {
+    _SSH() {
+      return AUTH_TYPE._SSH;
+    },
+
+    _BASIC() {
+      return AUTH_TYPE._BASIC;
+    },
+
+    _S3() {
+      return AUTH_TYPE._S3;
+    },
+
+    options() {
       const types = [];
+      const keys = [];
 
       if ( this.allowSsh ) {
         types.push(SECRET_TYPES.SSH);
@@ -198,21 +207,23 @@ export default {
         types.push(SECRET_TYPES.RKE_AUTH_CONFIG);
       }
 
-      return types;
-    },
-
-    options() {
-      if (!this.filteredSecrets) {
-        return [];
-      }
-      let out = this.filteredSecrets
+      let out = this.allSecrets
         .filter((x) => this.namespace && this.limitToNamespace ? x.metadata.namespace === this.namespace : true)
         .filter((x) => {
           // Must match one of the types if given
-          if ( this.secretTypes.length && !this.secretTypes.includes(x._type) ) {
+          if ( types.length && !types.includes(x._type) ) {
             return false;
           }
 
+          // Must match ALL of the keys if given
+          if ( keys.length ) {
+            const dataKeys = Object.keys(x.data || {});
+
+            if ( !keys.every((key) => dataKeys.includes(key)) ) {
+              return false;
+            }
+          }
+
           return true;
         }).map((x) => {
           const {
@@ -358,34 +369,6 @@ export default {
   },
 
   methods: {
-    // TODO: RC revert
-    async fetchSecrets() {
-      const namespaceFilter = this.namespace && this.limitToNamespace ? this.namespace : '';
-
-      if (paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
-        // Of type ActionFindPageArgs
-        const findPageArgs = {
-          namespaced: namespaceFilter,
-          pagination: new PaginationArgs({
-            pageSize: -1,
-            filters:  [
-              PaginationParamFilter.createMultipleFields(this.secretTypes.map((t) => {
-                return new PaginationFilterField({ field: 'metadata.fields.2', value: t });
-              }))
-            ]
-          }),
-        };
-
-        return await this.$store.dispatch(`${ this.inStore }/findPage`, { type: SECRET, opt: findPageArgs });
-      } else {
-        // When this is ripped out some of the additional filtering in `options` can be removed
-        return await this.$store.dispatch(`${ this.inStore }/findAll`, {
-          type: SECRET,
-          opt:  { namespaced: namespaceFilter }
-        });
-      }
-    },
-
     updateKeyVal() {
       if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(this.selected)) {
         this.privateKey = '';
@@ -502,7 +485,7 @@ export default {
           :selectable="option => !option.disabled"
         />
       </div>
-      <template v-if="selected === SSH">
+      <template v-if="selected === _SSH">
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
@@ -522,7 +505,7 @@ export default {
           />
         </div>
       </template>
-      <template v-else-if="selected === BASIC">
+      <template v-else-if="selected === _BASIC">
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
@@ -541,7 +524,7 @@ export default {
           />
         </div>
       </template>
-      <template v-else-if="selected === S3">
+      <template v-else-if="selected === _S3">
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
diff --git a/shell/config/secret.js b/shell/config/secret.js
index 3d6c8bde2f..135ba48585 100644
--- a/shell/config/secret.js
+++ b/shell/config/secret.js
@@ -1,8 +1,7 @@
 export const SECRET_TYPES = {
   OPAQUE:           'Opaque',
   SERVICE_ACCT:     'kubernetes.io/service-account-token',
-  DOCKER_JSON:      'kubernetes.io/dockerconfigjson', // TODO: RC why in junk namespace this not returned
-  // TODO: RC output buffer empty
+  DOCKER_JSON:      'kubernetes.io/dockerconfigjson',
   BASIC:            'kubernetes.io/basic-auth',
   SSH:              'kubernetes.io/ssh-auth',
   TLS:              'kubernetes.io/tls',
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index b8756ef63b..121f035655 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -17,16 +17,13 @@ import { getPerformanceSetting } from '@shell/utils/settings';
 import { DEFAULT_PERF_SETTING } from '@shell/config/settings';
 
 /**
- * Given the vai cache changes haven't merged, work around the settings we have that are blocked by it
+ * Given the vai cache changes haven't merged, work around the settings that are blocked by it
  *
  * Once cache is merged (pre 2.9.0) this will be removed
- *
- * TODO: RC
  */
 const VAI_CACHE_MERGED = false;
 /**
  * Given above, just a dev thing
- * TODO: RC
  */
 const PERF_ENABLED = false;
 

From 4d7ee5c3e13e57dcac118e898cf4875412ff2a0e Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 21 May 2024 11:13:23 +0100
Subject: [PATCH 36/71] fix formatting

---
 shell/components/form/SecretSelector.vue      |  77 +++--
 .../form/SelectOrCreateAuthSecret.vue         | 271 +++++++++---------
 shell/edit/logging-flow/Match.vue             |  18 +-
 .../edit/networking.k8s.io.ingress/Rules.vue  |  76 +++--
 shell/models/networking.k8s.io.ingress.js     |  34 +--
 .../manager/cloudCredential/index.vue         |  46 +--
 6 files changed, 255 insertions(+), 267 deletions(-)

diff --git a/shell/components/form/SecretSelector.vue b/shell/components/form/SecretSelector.vue
index 93655e073f..8ff6c1d052 100644
--- a/shell/components/form/SecretSelector.vue
+++ b/shell/components/form/SecretSelector.vue
@@ -1,75 +1,73 @@
 <script>
-import LabeledSelect from "@shell/components/form/LabeledSelect";
-import { SECRET } from "@shell/config/types";
-import { _EDIT, _VIEW } from "@shell/config/query-params";
-import { SECRET_TYPES as TYPES } from "@shell/config/secret";
-import sortBy from "lodash/sortBy";
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { SECRET } from '@shell/config/types';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { SECRET_TYPES as TYPES } from '@shell/config/secret';
+import sortBy from 'lodash/sortBy';
 
 // TODO: RC fix formatting....
 
-const NONE = "__[[NONE]]__";
+const NONE = '__[[NONE]]__';
 
 export default {
   components: { LabeledSelect },
 
   props: {
     value: {
-      type: [String, Object],
+      type:     [String, Object],
       required: false,
-      default: undefined,
+      default:  undefined,
     },
     namespace: {
-      type: String,
+      type:     String,
       required: true,
     },
     types: {
-      type: Array,
+      type:    Array,
       default: () => Object.values(TYPES),
     },
     disabled: {
-      type: Boolean,
+      type:    Boolean,
       default: false,
     },
     mountKey: {
-      type: String,
-      default: "valueFrom",
+      type:    String,
+      default: 'valueFrom',
     },
     nameKey: {
-      type: String,
-      default: "name",
+      type:    String,
+      default: 'name',
     },
     keyKey: {
-      type: String,
-      default: "key",
+      type:    String,
+      default: 'key',
     },
     showKeySelector: {
-      type: Boolean,
+      type:    Boolean,
       default: false,
     },
     secretNameLabel: {
-      type: String,
-      default: "Secret Name",
+      type:    String,
+      default: 'Secret Name',
     },
     keyNameLabel: {
-      type: String,
-      default: "Key",
+      type:    String,
+      default: 'Key',
     },
     mode: {
-      type: String,
+      type:    String,
       default: _EDIT,
     },
     inStore: {
-      type: String,
-      default: "cluster",
+      type:    String,
+      default: 'cluster',
     },
   },
 
   computed: {
     name: {
       get() {
-        const name = this.showKeySelector
-          ? this.value?.[this.mountKey]?.secretKeyRef?.[this.nameKey]
-          : this.value;
+        const name = this.showKeySelector ? this.value?.[this.mountKey]?.secretKeyRef?.[this.nameKey] : this.value;
 
         return name || NONE;
       },
@@ -78,38 +76,33 @@ export default {
         const correctedName = isNone ? undefined : name;
 
         if (this.showKeySelector) {
-          this.$emit("input", {
+          this.$emit('input', {
             [this.mountKey]: {
               secretKeyRef: {
                 [this.nameKey]: correctedName,
-                [this.keyKey]: "",
+                [this.keyKey]:  '',
               },
             },
           });
         } else {
-          this.$emit("input", correctedName);
+          this.$emit('input', correctedName);
         }
       },
     },
 
     key: {
       get() {
-        return this.value?.[this.mountKey]?.secretKeyRef?.[this.keyKey] || "";
+        return this.value?.[this.mountKey]?.secretKeyRef?.[this.keyKey] || '';
       },
       set(key) {
-        this.$emit("input", {
-          [this.mountKey]: {
-            secretKeyRef: { [this.nameKey]: this.name, [this.keyKey]: key },
-          },
-        });
+        this.$emit('input', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: this.name, [this.keyKey]: key } } });
       },
     },
     secrets() {
-      const allSecrets = this.$store.getters[`${this.inStore}/all`](SECRET);
+      const allSecrets = this.$store.getters[`${ this.inStore }/all`](SECRET);
 
       return allSecrets.filter(
-        (secret) =>
-          this.types.includes(secret._type) &&
+        (secret) => this.types.includes(secret._type) &&
           secret.namespace === this.namespace
       );
     },
@@ -122,8 +115,8 @@ export default {
         .sort();
 
       return [
-        { label: "None", value: NONE },
-        ...sortBy(mappedSecrets, "label"),
+        { label: 'None', value: NONE },
+        ...sortBy(mappedSecrets, 'label'),
       ];
     },
     keys() {
diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index 1bde73709c..a5caeb8b66 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -1,23 +1,23 @@
 <script>
-import { _EDIT } from "@shell/config/query-params";
-import { LabeledInput } from "@components/Form/LabeledInput";
-import LabeledSelect from "@shell/components/form/LabeledSelect";
-import { AUTH_TYPE, NORMAN, SECRET } from "@shell/config/types";
-import { SECRET_TYPES } from "@shell/config/secret";
-import { base64Encode } from "@shell/utils/crypto";
-import { addObjects, insertAt } from "@shell/utils/array";
-import { sortBy } from "@shell/utils/sort";
-import paginationUtils from "@shell/utils/pagination-utils";
+import { _EDIT } from '@shell/config/query-params';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { AUTH_TYPE, NORMAN, SECRET } from '@shell/config/types';
+import { SECRET_TYPES } from '@shell/config/secret';
+import { base64Encode } from '@shell/utils/crypto';
+import { addObjects, insertAt } from '@shell/utils/array';
+import { sortBy } from '@shell/utils/sort';
+import paginationUtils from '@shell/utils/pagination-utils';
 import {
   PaginationArgs,
   PaginationFilterField,
   PaginationParamFilter,
-} from "@shell/types/store/pagination.types";
+} from '@shell/types/store/pagination.types';
 
 // TODO: RC fix formatting....
 
 export default {
-  name: "SelectOrCreateAuthSecret",
+  name: 'SelectOrCreateAuthSecret',
 
   components: {
     LabeledInput,
@@ -26,32 +26,32 @@ export default {
 
   props: {
     mode: {
-      type: String,
+      type:    String,
       default: _EDIT,
     },
 
     preSelect: {
-      type: Object,
+      type:    Object,
       default: null,
     },
 
     value: {
-      type: [String, Object],
+      type:    [String, Object],
       default: null,
     },
 
     inStore: {
-      type: String,
-      default: "cluster",
+      type:    String,
+      default: 'cluster',
     },
 
     labelKey: {
-      type: String,
-      default: "selectOrCreateAuthSecret.label",
+      type:    String,
+      default: 'selectOrCreateAuthSecret.label',
     },
 
     namespace: {
-      type: String,
+      type:     String,
       required: true,
     },
 
@@ -59,62 +59,62 @@ export default {
      * Limit the selection of an existing secret to the namespace provided
      */
     limitToNamespace: {
-      type: Boolean,
+      type:    Boolean,
       default: true,
     },
 
     generateName: {
-      type: String,
-      default: "auth-",
+      type:    String,
+      default: 'auth-',
     },
 
     allowNone: {
-      type: Boolean,
+      type:    Boolean,
       default: true,
     },
 
     allowSsh: {
-      type: Boolean,
+      type:    Boolean,
       default: true,
     },
 
     allowBasic: {
-      type: Boolean,
+      type:    Boolean,
       default: true,
     },
 
     allowS3: {
-      type: Boolean,
+      type:    Boolean,
       default: false,
     },
 
     allowRke: {
-      type: Boolean,
+      type:    Boolean,
       default: false,
     },
 
     registerBeforeHook: {
-      type: Function,
+      type:     Function,
       required: true,
     },
 
     hookName: {
-      type: String,
-      default: "registerAuthSecret",
+      type:    String,
+      default: 'registerAuthSecret',
     },
 
     appendUniqueIdToHook: {
-      type: Boolean,
+      type:    Boolean,
       default: false,
     },
 
     hookPriority: {
-      type: Number,
+      type:    Number,
       default: 99,
     },
 
     vertical: {
-      type: Boolean,
+      type:    Boolean,
       default: false,
     },
 
@@ -127,7 +127,7 @@ export default {
      * This property is implement to prevent this issue and delegate it to parent component.
      */
     delegateCreateToParent: {
-      type: Boolean,
+      type:    Boolean,
       default: false,
     },
 
@@ -138,7 +138,7 @@ export default {
      * Set to true to cache the response
      */
     cacheSecrets: {
-      type: Boolean,
+      type:    Boolean,
       default: false,
     },
   },
@@ -146,19 +146,19 @@ export default {
   async fetch() {
     if (
       (this.allowSsh || this.allowBasic || this.allowRke) &&
-      this.$store.getters[`${this.inStore}/schemaFor`](SECRET)
+      this.$store.getters[`${ this.inStore }/schemaFor`](SECRET)
     ) {
+      // TODO: RC switch all isSteveCacheEnabled
+    // if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
       if (
-        paginationUtils.isSteveCacheEnabled({
-          rootGetters: this.$store.getters,
-        })
+        paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })
       ) {
         // Filter results via api (because we shouldn't be fetching them all...)
         this.filteredSecrets = await this.filterSecretsByApi();
       } else {
         // Cannot yet filter via api, so fetch all and filter later on
         this.allSecrets = await this.$store.dispatch(
-          `${this.inStore}/findAll`,
+          `${ this.inStore }/findAll`,
           { type: SECRET }
         );
       }
@@ -166,17 +166,15 @@ export default {
 
     if (
       this.allowS3 &&
-      this.$store.getters["rancher/canList"](NORMAN.CLOUD_CREDENTIAL)
+      this.$store.getters['rancher/canList'](NORMAN.CLOUD_CREDENTIAL)
     ) {
       // Avoid an async call and loading screen if already loaded by someone else
-      if (this.$store.getters["rancher/haveAll"](NORMAN.CLOUD_CREDENTIAL)) {
-        this.allCloudCreds = this.$store.getters["rancher/all"](
+      if (this.$store.getters['rancher/haveAll'](NORMAN.CLOUD_CREDENTIAL)) {
+        this.allCloudCreds = this.$store.getters['rancher/all'](
           NORMAN.CLOUD_CREDENTIAL
         );
       } else {
-        this.allCloudCreds = await this.$store.dispatch("rancher/findAll", {
-          type: NORMAN.CLOUD_CREDENTIAL,
-        });
+        this.allCloudCreds = await this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
       }
     } else {
       this.allCloudCreds = [];
@@ -185,17 +183,17 @@ export default {
     let selected = this.preSelect?.selected || AUTH_TYPE._NONE;
 
     if (!this.value) {
-      this.publicKey = this.preSelect?.publicKey || "";
-      this.privateKey = this.preSelect?.privateKey || "";
+      this.publicKey = this.preSelect?.publicKey || '';
+      this.privateKey = this.preSelect?.privateKey || '';
     }
 
     if (this.value) {
-      if (typeof this.value === "object") {
-        selected = `${this.value.namespace}/${this.value.name}`;
-      } else if (this.value.includes("/") || this.value.includes(":")) {
+      if (typeof this.value === 'object') {
+        selected = `${ this.value.namespace }/${ this.value.name }`;
+      } else if (this.value.includes('/') || this.value.includes(':')) {
         selected = this.value;
       } else if (this.namespace) {
-        selected = `${this.namespace}/${this.value}`;
+        selected = `${ this.namespace }/${ this.value }`;
       } else {
         selected = this.value;
       }
@@ -210,20 +208,20 @@ export default {
     return {
       allCloudCreds: [],
 
-      allSecrets: null,
+      allSecrets:      null,
       filteredSecrets: null,
 
       selected: null,
 
       filterByNamespace: this.namespace && this.limitToNamespace,
 
-      publicKey: "",
-      privateKey: "",
-      uniqueId: new Date().getTime(), // Allows form state to be individually tracked if the form is in a list
+      publicKey:  '',
+      privateKey: '',
+      uniqueId:   new Date().getTime(), // Allows form state to be individually tracked if the form is in a list
 
-      SSH: AUTH_TYPE._SSH,
+      SSH:   AUTH_TYPE._SSH,
       BASIC: AUTH_TYPE._BASIC,
-      S3: AUTH_TYPE._S3,
+      S3:    AUTH_TYPE._S3,
     };
   },
 
@@ -257,10 +255,7 @@ export default {
       if (this.allSecrets) {
         // Fitler secrets given their namespace and required secret type
         filteredSecrets = this.allSecrets
-          .filter((x) =>
-            this.filterByNamespace
-              ? x.metadata.namespace === this.namespace
-              : true
+          .filter((x) => this.filterByNamespace ? x.metadata.namespace === this.namespace : true
           )
           .filter((x) => {
             // Must match one of the required types
@@ -278,12 +273,12 @@ export default {
       }
 
       let out = filteredSecrets.map((x) => {
-        const { dataPreview, subTypeDisplay, metadata, id } = x;
+        const {
+          dataPreview, subTypeDisplay, metadata, id
+        } = x;
 
         const label =
-          subTypeDisplay && dataPreview
-            ? `${metadata.name} (${subTypeDisplay}: ${dataPreview})`
-            : `${metadata.name} (${subTypeDisplay})`;
+          subTypeDisplay && dataPreview ? `${ metadata.name } (${ subTypeDisplay }: ${ dataPreview })` : `${ metadata.name } (${ subTypeDisplay })`;
 
         return {
           label,
@@ -294,11 +289,11 @@ export default {
 
       if (this.allowS3) {
         const more = this.allCloudCreds
-          .filter((x) => ["aws", "s3"].includes(x.provider))
+          .filter((x) => ['aws', 's3'].includes(x.provider))
           .map((x) => {
             return {
-              label: `${x.nameDisplay} (${x.providerDisplay})`,
-              group: "Cloud Credentials",
+              label: `${ x.nameDisplay } (${ x.providerDisplay })`,
+              group: 'Cloud Credentials',
               value: x.id,
             };
           });
@@ -307,19 +302,17 @@ export default {
       }
 
       if (!this.limitToNamespace) {
-        out = sortBy(out, "group");
+        out = sortBy(out, 'group');
         if (out.length) {
-          let lastGroup = "";
+          let lastGroup = '';
 
           for (let i = 0; i < out.length; i++) {
             if (out[i].group !== lastGroup) {
               lastGroup = out[i].group;
 
               insertAt(out, i, {
-                kind: "title",
-                label: this.t("selectOrCreateAuthSecret.namespaceGroup", {
-                  name: lastGroup,
-                }),
+                kind:     'title',
+                label:    this.t('selectOrCreateAuthSecret.namespaceGroup', { name: lastGroup }),
                 disabled: true,
               });
 
@@ -331,47 +324,47 @@ export default {
 
       if (out.length) {
         out.unshift({
-          kind: "title",
-          label: this.t("selectOrCreateAuthSecret.chooseExisting"),
+          kind:     'title',
+          label:    this.t('selectOrCreateAuthSecret.chooseExisting'),
           disabled: true,
         });
       }
       if (this.allowNone) {
         out.unshift({
-          label: this.t("generic.none"),
+          label: this.t('generic.none'),
           value: AUTH_TYPE._NONE,
         });
       }
 
       if (this.allowSsh || this.allowS3 || this.allowBasic) {
         out.unshift({
-          label: "divider",
+          label:    'divider',
           disabled: true,
-          kind: "divider",
+          kind:     'divider',
         });
       }
 
       if (this.allowSsh) {
         out.unshift({
-          label: this.t("selectOrCreateAuthSecret.createSsh"),
+          label: this.t('selectOrCreateAuthSecret.createSsh'),
           value: AUTH_TYPE._SSH,
-          kind: "highlighted",
+          kind:  'highlighted',
         });
       }
 
       if (this.allowS3) {
         out.unshift({
-          label: this.t("selectOrCreateAuthSecret.createS3"),
+          label: this.t('selectOrCreateAuthSecret.createS3'),
           value: AUTH_TYPE._S3,
-          kind: "highlighted",
+          kind:  'highlighted',
         });
       }
 
       if (this.allowBasic) {
         out.unshift({
-          label: this.t("selectOrCreateAuthSecret.createBasic"),
+          label: this.t('selectOrCreateAuthSecret.createBasic'),
           value: AUTH_TYPE._BASIC,
-          kind: "highlighted",
+          kind:  'highlighted',
         });
       }
 
@@ -380,7 +373,7 @@ export default {
 
     firstCol() {
       if (this.vertical) {
-        return "";
+        return '';
       }
 
       if (
@@ -388,28 +381,28 @@ export default {
         this.selected === AUTH_TYPE._BASIC ||
         this.selected === AUTH_TYPE._S3
       ) {
-        return "col span-4";
+        return 'col span-4';
       }
 
-      return "col span-6";
+      return 'col span-6';
     },
 
     moreCols() {
       if (this.vertical) {
-        return "mt-20";
+        return 'mt-20';
       }
 
-      return "col span-4";
+      return 'col span-4';
     },
   },
 
   watch: {
-    selected: "update",
-    publicKey: "updateKeyVal",
-    privateKey: "updateKeyVal",
+    selected:   'update',
+    publicKey:  'updateKeyVal',
+    privateKey: 'updateKeyVal',
 
     async namespace(ns) {
-      if (ns && !this.selected.startsWith(`${ns}/`)) {
+      if (ns && !this.selected.startsWith(`${ ns }/`)) {
         this.selected = AUTH_TYPE._NONE;
       }
 
@@ -422,15 +415,13 @@ export default {
 
   created() {
     if (this.registerBeforeHook) {
-      const hookName = this.appendUniqueIdToHook
-        ? this.hookName + this.uniqueId
-        : this.hookName;
+      const hookName = this.appendUniqueIdToHook ? this.hookName + this.uniqueId : this.hookName;
 
       if (!this.delegateCreateToParent) {
         this.registerBeforeHook(this.doCreate, hookName, this.hookPriority);
       }
     } else {
-      throw new Error("Before Hook is missing");
+      throw new Error('Before Hook is missing');
     }
   },
 
@@ -439,17 +430,16 @@ export default {
     async filterSecretsByApi() {
       const findPageArgs = {
         // Of type ActionFindPageArgs
-        namespaced: this.filterByNamespace ? this.namespace : "",
+        namespaced: this.filterByNamespace ? this.namespace : '',
         pagination: new PaginationArgs({
           pageSize: -1,
-          filters: [
+          filters:  [
             PaginationParamFilter.createMultipleFields(
               this.secretTypes.map(
-                (t) =>
-                  new PaginationFilterField({
-                    field: "metadata.fields.2",
-                    value: t,
-                  })
+                (t) => new PaginationFilterField({
+                  field: 'metadata.fields.2',
+                  value: t,
+                })
               )
             ),
           ],
@@ -457,13 +447,13 @@ export default {
       };
 
       if (this.cacheSecrets) {
-        return await this.$store.dispatch(`${this.inStore}/findPage`, {
+        return await this.$store.dispatch(`${ this.inStore }/findPage`, {
           type: SECRET,
-          opt: findPageArgs,
+          opt:  findPageArgs,
         });
       }
 
-      const url = this.$store.getters[`${this.inStore}/urlFor`](
+      const url = this.$store.getters[`${ this.inStore }/urlFor`](
         SECRET,
         null,
         findPageArgs
@@ -479,14 +469,14 @@ export default {
           this.selected
         )
       ) {
-        this.privateKey = "";
-        this.publicKey = "";
+        this.privateKey = '';
+        this.publicKey = '';
       }
 
-      this.$emit("inputauthval", {
-        selected: this.selected,
+      this.$emit('inputauthval', {
+        selected:   this.selected,
         privateKey: this.privateKey,
-        publicKey: this.publicKey,
+        publicKey:  this.publicKey,
       });
     },
 
@@ -500,22 +490,22 @@ export default {
           AUTH_TYPE._NONE,
         ].includes(this.selected)
       ) {
-        this.$emit("input", null);
-      } else if (this.selected.includes(":")) {
+        this.$emit('input', null);
+      } else if (this.selected.includes(':')) {
         // Cloud creds
-        this.$emit("input", this.selected);
+        this.$emit('input', this.selected);
       } else {
-        const split = this.selected.split("/");
+        const split = this.selected.split('/');
 
         if (this.limitToNamespace) {
-          this.$emit("input", split[1]);
+          this.$emit('input', split[1]);
         } else {
           const out = {
             namespace: split[0],
-            name: split[1],
+            name:      split[1],
           };
 
-          this.$emit("input", out);
+          this.$emit('input', out);
         }
       }
 
@@ -536,17 +526,17 @@ export default {
 
       if (this.selected === AUTH_TYPE._S3) {
         secret = await this.$store.dispatch(`rancher/create`, {
-          type: NORMAN.CLOUD_CREDENTIAL,
+          type:               NORMAN.CLOUD_CREDENTIAL,
           s3credentialConfig: {
             accessKey: this.publicKey,
             secretKey: this.privateKey,
           },
         });
       } else {
-        secret = await this.$store.dispatch(`${this.inStore}/create`, {
-          type: SECRET,
+        secret = await this.$store.dispatch(`${ this.inStore }/create`, {
+          type:     SECRET,
           metadata: {
-            namespace: this.namespace,
+            namespace:    this.namespace,
             generateName: this.generateName,
           },
         });
@@ -554,23 +544,23 @@ export default {
         let type, publicField, privateField;
 
         switch (this.selected) {
-          case AUTH_TYPE._SSH:
-            type = SECRET_TYPES.SSH;
-            publicField = "ssh-publickey";
-            privateField = "ssh-privatekey";
-            break;
-          case AUTH_TYPE._BASIC:
-            type = SECRET_TYPES.BASIC;
-            publicField = "username";
-            privateField = "password";
-            break;
-          default:
-            throw new Error("Unknown type");
+        case AUTH_TYPE._SSH:
+          type = SECRET_TYPES.SSH;
+          publicField = 'ssh-publickey';
+          privateField = 'ssh-privatekey';
+          break;
+        case AUTH_TYPE._BASIC:
+          type = SECRET_TYPES.BASIC;
+          publicField = 'username';
+          privateField = 'password';
+          break;
+        default:
+          throw new Error('Unknown type');
         }
 
         secret._type = type;
         secret.data = {
-          [publicField]: base64Encode(this.publicKey),
+          [publicField]:  base64Encode(this.publicKey),
           [privateField]: base64Encode(this.privateKey),
         };
       }
@@ -589,7 +579,10 @@ export default {
 
 <template>
   <div class="select-or-create-auth-secret">
-    <div class="mt-20" :class="{ row: !vertical }">
+    <div
+      class="mt-20"
+      :class="{ row: !vertical }"
+    >
       <div :class="firstCol">
         <LabeledSelect
           v-model="selected"
diff --git a/shell/edit/logging-flow/Match.vue b/shell/edit/logging-flow/Match.vue
index c7e0a4ffca..daa8bf7af2 100644
--- a/shell/edit/logging-flow/Match.vue
+++ b/shell/edit/logging-flow/Match.vue
@@ -1,6 +1,6 @@
 <script>
-import KeyValue from "@shell/components/form/KeyValue";
-import Select from "@shell/components/form/Select";
+import KeyValue from '@shell/components/form/KeyValue';
+import Select from '@shell/components/form/Select';
 
 // TODO: RC fix formatting....
 
@@ -9,34 +9,34 @@ export default {
 
   props: {
     mode: {
-      type: String,
+      type:     String,
       required: true,
     },
 
     value: {
-      type: Object,
+      type:    Object,
       default: () => {
         return {};
       },
     },
 
     nodes: {
-      type: Array,
+      type:    Array,
       default: () => [],
     },
 
     containers: {
-      type: Array,
+      type:    Array,
       default: () => [],
     },
 
     namespaces: {
-      type: Array,
+      type:    Array,
       default: () => [],
     },
 
     isClusterFlow: {
-      type: Boolean,
+      type:    Boolean,
       default: false,
     },
   },
@@ -45,7 +45,7 @@ export default {
     update() {},
 
     removeRule() {
-      this.$emit("remove");
+      this.$emit('remove');
     },
   },
 };
diff --git a/shell/edit/networking.k8s.io.ingress/Rules.vue b/shell/edit/networking.k8s.io.ingress/Rules.vue
index 59d717ca7a..3c860e813e 100644
--- a/shell/edit/networking.k8s.io.ingress/Rules.vue
+++ b/shell/edit/networking.k8s.io.ingress/Rules.vue
@@ -1,11 +1,11 @@
 <script>
-import { WORKLOAD_TYPES } from "@shell/config/types";
-import Loading from "@shell/components/Loading";
-import SortableTable from "@shell/components/SortableTable";
-import { _VIEW } from "@shell/config/query-params";
-import ArrayListGrouped from "@shell/components/form/ArrayListGrouped";
-import { random32 } from "@shell/utils/string";
-import Rule from "./Rule";
+import { WORKLOAD_TYPES } from '@shell/config/types';
+import Loading from '@shell/components/Loading';
+import SortableTable from '@shell/components/SortableTable';
+import { _VIEW } from '@shell/config/query-params';
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
+import { random32 } from '@shell/utils/string';
+import Rule from './Rule';
 
 // TODO: RC fix formatting....
 
@@ -19,31 +19,31 @@ export default {
 
   props: {
     value: {
-      type: Object,
+      type:    Object,
       default: () => {},
     },
 
     mode: {
-      type: String,
-      default: "edit",
+      type:    String,
+      default: 'edit',
     },
 
     certificates: {
-      type: Array,
+      type:    Array,
       default: () => [],
     },
 
     serviceTargets: {
-      type: Array,
+      type:    Array,
       default: () => [],
     },
 
     rules: {
       default: () => ({
         requestHost: [],
-        path: [],
-        port: [],
-        target: [],
+        path:        [],
+        port:        [],
+        target:      [],
       }),
       type: Object,
     },
@@ -52,8 +52,7 @@ export default {
   async fetch() {
     // TODO: RC shell/edit/networking.k8s.io.ingress/Rules.vue. used by (just? NO, 1 other) shell/models/networking.k8s.io.ingress.js `targetTo`
     await Promise.all(
-      Object.values(WORKLOAD_TYPES).map((type) =>
-        this.$store.dispatch("cluster/findAll", { type })
+      Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })
       )
     );
   },
@@ -61,15 +60,14 @@ export default {
   beforeUpdate() {
     for (const rule of this.value.spec.rules) {
       if (!rule.vKey) {
-        this.$set(rule, "vKey", random32(1));
+        this.$set(rule, 'vKey', random32(1));
       }
     }
   },
 
   computed: {
     workloads() {
-      return Object.values(WORKLOAD_TYPES).flatMap((type) =>
-        this.$store.getters["cluster/all"](type)
+      return Object.values(WORKLOAD_TYPES).flatMap((type) => this.$store.getters['cluster/all'](type)
       );
     },
     isView() {
@@ -78,39 +76,39 @@ export default {
     ruleHeaders() {
       const headers = [
         {
-          name: "fullPath",
-          label: this.t("ingress.rules.headers.path"),
-          value: "",
-          formatter: "IngressFullPath",
+          name:      'fullPath',
+          label:     this.t('ingress.rules.headers.path'),
+          value:     '',
+          formatter: 'IngressFullPath',
         },
         {
-          name: "target",
-          label: this.t("ingress.rules.headers.target"),
-          formatter: "Link",
+          name:          'target',
+          label:         this.t('ingress.rules.headers.target'),
+          formatter:     'Link',
           formatterOpts: {
             options: { internal: true },
-            urlKey: "targetLink.to",
+            urlKey:  'targetLink.to',
           },
-          value: "targetLink",
+          value: 'targetLink',
         },
         {
-          name: "port",
-          label: this.t("ingress.rules.headers.port"),
-          value: "port",
+          name:  'port',
+          label: this.t('ingress.rules.headers.port'),
+          value: 'port',
         },
         {
-          name: "certs",
-          label: this.t("ingress.rules.headers.certificates"),
-          value: "certs",
-          formatter: "ListLink",
+          name:      'certs',
+          label:     this.t('ingress.rules.headers.certificates'),
+          value:     'certs',
+          formatter: 'ListLink',
         },
       ];
 
       if (this.value.showPathType) {
         headers.unshift({
-          name: "pathType",
-          label: this.t("ingress.rules.headers.pathType"),
-          value: "pathType",
+          name:  'pathType',
+          label: this.t('ingress.rules.headers.pathType'),
+          value: 'pathType',
         });
       }
 
diff --git a/shell/models/networking.k8s.io.ingress.js b/shell/models/networking.k8s.io.ingress.js
index 60a980c399..3362ee82c1 100644
--- a/shell/models/networking.k8s.io.ingress.js
+++ b/shell/models/networking.k8s.io.ingress.js
@@ -26,7 +26,7 @@ export function ingressFullPath(resource, rule, path = {}) {
     protocol = isTlsHost(spec, hostValue) ? 'https://' : 'http://';
   }
 
-  return `${protocol}${hostValue}${pathValue}`;
+  return `${ protocol }${ hostValue }${ pathValue }`;
 }
 
 export default class Ingress extends SteveModel {
@@ -44,7 +44,7 @@ export default class Ingress extends SteveModel {
     }
 
     const isTargetsWorkload = serviceName.startsWith('ingress-');
-    const id = `${this.namespace}/${serviceName}`;
+    const id = `${ this.namespace }/${ serviceName }`;
 
     if (isTargetsWorkload) {
       // TODO: RC This is the reason shell/components/formatter/IngressTarget.vue requires ALL WORKLOADS
@@ -54,10 +54,10 @@ export default class Ingress extends SteveModel {
       return workload?.detailLocation || '';
     } else {
       return {
-        name: 'c-cluster-product-resource-namespace-id',
+        name:   'c-cluster-product-resource-namespace-id',
         params: {
-          resource: SERVICE,
-          id: serviceName,
+          resource:  SERVICE,
+          id:        serviceName,
           namespace: this.namespace,
         }
       };
@@ -80,14 +80,14 @@ export default class Ingress extends SteveModel {
 
     return {
       // isUrl thinks urls which contain '*' are valid so I'm adding an additional check for '*'
-      isUrl: isUrl(fullPath) && !fullPath.includes('*'),
-      pathType: path.pathType,
+      isUrl:           isUrl(fullPath) && !fullPath.includes('*'),
+      pathType:        path.pathType,
       fullPath,
       serviceName,
       serviceTargetTo: this.targetTo(workloads, serviceName),
-      certs: this.certLinks(rule, certificates),
-      targetLink: this.targetLink(workloads, serviceName),
-      port: get(path?.backend, this.servicePortPath)
+      certs:           this.certLinks(rule, certificates),
+      targetLink:      this.targetLink(workloads, serviceName),
+      port:            get(path?.backend, this.servicePortPath)
     };
   }
 
@@ -101,17 +101,17 @@ export default class Ingress extends SteveModel {
 
     if (cert.secretName && certificates.includes(secretName)) {
       to = {
-        name: 'c-cluster-product-resource-namespace-id',
+        name:   'c-cluster-product-resource-namespace-id',
         params: {
           resource: SECRET,
-          id: secretName
+          id:       secretName
         }
       };
     }
 
     return {
       to,
-      text: secretName,
+      text:    secretName,
       options: { internal: true }
     };
   }
@@ -129,8 +129,8 @@ export default class Ingress extends SteveModel {
 
   targetLink(workloads, serviceName) {
     return {
-      to: this.targetTo(workloads, serviceName),
-      text: serviceName,
+      to:      this.targetTo(workloads, serviceName),
+      text:    serviceName,
       options: { internal: true }
     };
   }
@@ -144,7 +144,7 @@ export default class Ingress extends SteveModel {
     }
 
     return {
-      name: serviceName,
+      name:     serviceName,
       targetTo: this.targetTo(workloads, serviceName)
     };
   }
@@ -202,7 +202,7 @@ export default class Ingress extends SteveModel {
 
     if (this.spec?.ingressClassName) {
       out.push({
-        label: this.t('ingress.ingressClass.label'),
+        label:   this.t('ingress.ingressClass.label'),
         content: this.spec.ingressClassName,
       });
     }
diff --git a/shell/pages/c/_cluster/manager/cloudCredential/index.vue b/shell/pages/c/_cluster/manager/cloudCredential/index.vue
index 35a9177801..baba1594ff 100644
--- a/shell/pages/c/_cluster/manager/cloudCredential/index.vue
+++ b/shell/pages/c/_cluster/manager/cloudCredential/index.vue
@@ -1,14 +1,14 @@
 <script>
-import Loading from "@shell/components/Loading";
-import ResourceTable from "@shell/components/ResourceTable";
-import Masthead from "@shell/components/ResourceList/Masthead";
-import { NORMAN, SECRET } from "@shell/config/types";
+import Loading from '@shell/components/Loading';
+import ResourceTable from '@shell/components/ResourceTable';
+import Masthead from '@shell/components/ResourceList/Masthead';
+import { NORMAN, SECRET } from '@shell/config/types';
 import {
   AGE_NORMAN,
   DESCRIPTION,
   ID_UNLINKED,
   NAME_UNLINKED,
-} from "@shell/config/table-headers";
+} from '@shell/config/table-headers';
 
 // TODO: RC fix formatting....
 
@@ -20,24 +20,22 @@ export default {
   },
 
   async fetch() {
-    if (this.$store.getters["management/schemaFor"](SECRET)) {
+    if (this.$store.getters['management/schemaFor'](SECRET)) {
       // TODO: RC shell/pages/c/_cluster/manager/cloudCredential/index.vue.
       // list is norman creds, cannot paginate.
       // Convert anything that uses cred `publicData` to a Live column and fetch specific secrets as needed
       // Having secrets allows showing the public portion of more types but not all users can see them.
-      await this.$store.dispatch("management/findAll", { type: SECRET });
+      await this.$store.dispatch('management/findAll', { type: SECRET });
     }
 
-    this.allCredentials = await this.$store.dispatch("rancher/findAll", {
-      type: NORMAN.CLOUD_CREDENTIAL,
-    });
+    this.allCredentials = await this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
   },
 
   data() {
     return {
       allCredentials: null,
-      resource: NORMAN.CLOUD_CREDENTIAL,
-      schema: this.$store.getters["rancher/schemaFor"](NORMAN.CLOUD_CREDENTIAL),
+      resource:       NORMAN.CLOUD_CREDENTIAL,
+      schema:         this.$store.getters['rancher/schemaFor'](NORMAN.CLOUD_CREDENTIAL),
     };
   },
 
@@ -51,11 +49,11 @@ export default {
         ID_UNLINKED,
         NAME_UNLINKED,
         {
-          name: "apikey",
-          labelKey: "tableHeaders.apikey",
-          value: "publicData",
-          sort: "publicData",
-          search: "publicData",
+          name:        'apikey',
+          labelKey:    'tableHeaders.apikey',
+          value:       'publicData',
+          sort:        'publicData',
+          search:      'publicData',
           dashIfEmpty: true,
         },
         DESCRIPTION,
@@ -65,9 +63,9 @@ export default {
 
     createLocation() {
       return {
-        name: "c-cluster-manager-cloudCredential-create",
+        name:   'c-cluster-manager-cloudCredential-create',
         params: {
-          product: this.$store.getters["currentProduct"].name,
+          product:  this.$store.getters['currentProduct'].name,
           resource: this.resource,
         },
       };
@@ -101,8 +99,14 @@ export default {
         {{ row.id.replace("cattle-global-data:", "") }}
       </template>
       <template #cell:apikey="{ row }">
-        <span v-if="row.publicData" v-clean-html="row.publicData" />
-        <span v-else class="text-muted">&mdash;</span>
+        <span
+          v-if="row.publicData"
+          v-clean-html="row.publicData"
+        />
+        <span
+          v-else
+          class="text-muted"
+        >&mdash;</span>
       </template>
     </ResourceTable>
   </div>

From 52a2026309669ed71d6fdc3f8c55b64744700e6e Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 21 May 2024 11:20:33 +0100
Subject: [PATCH 37/71] Link new paginated label select with pagination setting

---
 shell/chart/rancher-backup/S3.vue                |  2 +-
 shell/components/form/SecretSelector.vue         |  3 ++-
 shell/components/form/SimpleSecretSelector.vue   |  4 ++--
 .../labeled-select-pagination.ts                 |  2 +-
 shell/config/pod-security-admission.ts           |  2 +-
 .../edit/cis.cattle.io.clusterscanbenchmark.vue  |  2 +-
 .../__tests__/pod-security-admission.test.ts     |  2 +-
 shell/utils/pagination-utils.ts                  | 16 ++++++----------
 shell/utils/pod-security-admission.ts            |  2 +-
 9 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/shell/chart/rancher-backup/S3.vue b/shell/chart/rancher-backup/S3.vue
index f947774841..5f213cc458 100644
--- a/shell/chart/rancher-backup/S3.vue
+++ b/shell/chart/rancher-backup/S3.vue
@@ -36,7 +36,7 @@ export default {
   },
 
   async fetch() {
-    if (!paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+    if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
       this.secrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
     }
   },
diff --git a/shell/components/form/SecretSelector.vue b/shell/components/form/SecretSelector.vue
index bfa4997ae4..d336a02c84 100644
--- a/shell/components/form/SecretSelector.vue
+++ b/shell/components/form/SecretSelector.vue
@@ -66,7 +66,7 @@ export default {
   },
 
   async fetch() {
-    if (!paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+    if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
       await this.$store.dispatch('cluster/findAll', { type: SECRET });
     }
   },
@@ -206,6 +206,7 @@ export default {
         :disabled="!isView && disabled"
         :options="secretNames"
         :paginate="paginateSecrets"
+        :loading="$fetchState.pending"
         :label="secretNameLabel"
         :mode="mode"
       />
diff --git a/shell/components/form/SimpleSecretSelector.vue b/shell/components/form/SimpleSecretSelector.vue
index d490ca3b77..de46342b46 100644
--- a/shell/components/form/SimpleSecretSelector.vue
+++ b/shell/components/form/SimpleSecretSelector.vue
@@ -32,11 +32,10 @@ export default {
   components: { LabeledSelect },
 
   async fetch() {
-    if (!paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+    if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
       // Make sure secrets are in the store so that the secret
       // selectors in the receiver config forms will have secrets
       // to choose from.
-      // TODO: RC test
       const allSecrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
 
       const allSecretsInNamespace = allSecrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
@@ -199,6 +198,7 @@ export default {
         v-model="name"
         class="col span-6"
         :disabled="!isView && disabled"
+        :loading="$fetchState.pending"
         :options="secretNames"
         :paginate="paginateSecrets"
         :label="secretNameLabel"
diff --git a/shell/components/form/labeled-select-utils/labeled-select-pagination.ts b/shell/components/form/labeled-select-utils/labeled-select-pagination.ts
index 49f3c750bc..3011a94840 100644
--- a/shell/components/form/labeled-select-utils/labeled-select-pagination.ts
+++ b/shell/components/form/labeled-select-utils/labeled-select-pagination.ts
@@ -74,7 +74,7 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
 
   computed: {
     canPaginate() {
-      return !!this.paginate && paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters });
+      return !!this.paginate && paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster' });
     },
 
     canLoadMore() {
diff --git a/shell/config/pod-security-admission.ts b/shell/config/pod-security-admission.ts
index 7e29176557..2618f20d1b 100644
--- a/shell/config/pod-security-admission.ts
+++ b/shell/config/pod-security-admission.ts
@@ -1,4 +1,4 @@
-import { PSADimension, PSALevel, PSAMode } from 'types/resources/pod-security-admission';
+import { PSADimension, PSALevel, PSAMode } from '@shell/types/resources/pod-security-admission';
 
 /**
  * All the PSA labels are created with this prefix, so we can use this to identify them
diff --git a/shell/edit/cis.cattle.io.clusterscanbenchmark.vue b/shell/edit/cis.cattle.io.clusterscanbenchmark.vue
index df3282d3c2..c0367eeda6 100644
--- a/shell/edit/cis.cattle.io.clusterscanbenchmark.vue
+++ b/shell/edit/cis.cattle.io.clusterscanbenchmark.vue
@@ -34,7 +34,7 @@ export default {
   },
 
   async fetch() {
-    if (!paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+    if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: CONFIG_MAP } })) {
       this.configMaps = await this.$store.dispatch('cluster/findAll', { type: CONFIG_MAP });
     }
   },
diff --git a/shell/utils/__tests__/pod-security-admission.test.ts b/shell/utils/__tests__/pod-security-admission.test.ts
index fd8077b074..a3db94ccb1 100644
--- a/shell/utils/__tests__/pod-security-admission.test.ts
+++ b/shell/utils/__tests__/pod-security-admission.test.ts
@@ -1,4 +1,4 @@
-import { PSA } from 'types/resources/pod-security-admission';
+import { PSA } from '@shell/types/resources/pod-security-admission';
 import { getPSATooltipsDescription } from '@shell/utils/pod-security-admission';
 
 describe('fX: getPSATooltipsDescription', () => {
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index 121f035655..a5f0e16457 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -21,11 +21,11 @@ import { DEFAULT_PERF_SETTING } from '@shell/config/settings';
  *
  * Once cache is merged (pre 2.9.0) this will be removed
  */
-const VAI_CACHE_MERGED = false;
+const TEMP_VAI_CACHE_MERGED = false;
 /**
  * Given above, just a dev thing
  */
-const PERF_ENABLED = false;
+const TEMP_PERF_ENABLED = false;
 
 /**
  * Helper functions for server side pagination
@@ -46,11 +46,7 @@ class PaginationUtils {
 
   isSteveCacheEnabled({ rootGetters }: any): boolean {
     // We always get Feature flags as part of start up (see `dispatch('features/loadServer')` in loadManagement)
-    if (VAI_CACHE_MERGED) {
-      return rootGetters['features/get'](STEVE_CACHE);
-    }
-
-    return true;
+    return TEMP_VAI_CACHE_MERGED || rootGetters['features/get'](STEVE_CACHE);
   }
 
   /**
@@ -67,10 +63,10 @@ class PaginationUtils {
       return false;
     }
 
-    const settings = VAI_CACHE_MERGED ? this.getSettings({ rootGetters }) : {
+    const settings = TEMP_PERF_ENABLED ? {
       ...DEFAULT_PERF_SETTING.serverPagination,
-      enabled: PERF_ENABLED,
-    };
+      enabled: true,
+    } : this.getSettings({ rootGetters });
 
     // No setting, not enabled
     if (!settings?.enabled) {
diff --git a/shell/utils/pod-security-admission.ts b/shell/utils/pod-security-admission.ts
index 68cc00ac5a..ba37525ca9 100644
--- a/shell/utils/pod-security-admission.ts
+++ b/shell/utils/pod-security-admission.ts
@@ -1,7 +1,7 @@
 import { reduce, filter, keys } from 'lodash';
 import { PSALabelPrefix, PSALabelsNamespaces } from '@shell/config/pod-security-admission';
 import { camelToTitle } from '@shell/utils/string';
-import { PSA } from 'types/resources/pod-security-admission';
+import { PSA } from '@shell/types/resources/pod-security-admission';
 
 /**
  * Return PSA labels present in the resource

From c3b28b545d5940be364112127cb2aefae05ab58d Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 21 May 2024 12:00:48 +0100
Subject: [PATCH 38/71] Work around failing kubewarden unit tests in
 check-plugins gate

---
 shell/edit/logging-flow/Match.vue | 2 --
 shell/utils/pagination-utils.ts   | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/shell/edit/logging-flow/Match.vue b/shell/edit/logging-flow/Match.vue
index 71ce3e9cac..11bcec7334 100644
--- a/shell/edit/logging-flow/Match.vue
+++ b/shell/edit/logging-flow/Match.vue
@@ -101,8 +101,6 @@ export default {
           no-options-label-key="logging.flow.matches.containerNames.enter"
           placement="top"
         />
-        <br>
-        {{ value.container_names }}<br>
       </div>
     </div>
     <div v-if="isClusterFlow">
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index a5f0e16457..49d3af0970 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -46,7 +46,7 @@ class PaginationUtils {
 
   isSteveCacheEnabled({ rootGetters }: any): boolean {
     // We always get Feature flags as part of start up (see `dispatch('features/loadServer')` in loadManagement)
-    return TEMP_VAI_CACHE_MERGED || rootGetters['features/get'](STEVE_CACHE);
+    return TEMP_VAI_CACHE_MERGED || rootGetters['features/get']?.(STEVE_CACHE);
   }
 
   /**

From a701841d2feddb4a435b8bd7053952dc3efef7c1 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 21 May 2024 15:24:10 +0100
Subject: [PATCH 39/71] Fix backup.spec e2e test

---
 cypress/e2e/tests/pages/charts/rancher-backup.spec.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/tests/pages/charts/rancher-backup.spec.ts b/cypress/e2e/tests/pages/charts/rancher-backup.spec.ts
index ca2b62ffa3..041ca6d754 100644
--- a/cypress/e2e/tests/pages/charts/rancher-backup.spec.ts
+++ b/cypress/e2e/tests/pages/charts/rancher-backup.spec.ts
@@ -41,7 +41,7 @@ describe('Charts', { tags: ['@charts', '@adminUser'] }, () => {
         installPage.nextPage();
         cy.wait('@storageClasses', { timeout: 10000 }).its('response.statusCode').should('eq', 200);
         cy.wait('@persistentVolumes', { timeout: 10000 }).its('response.statusCode').should('eq', 200);
-        cy.wait('@secrets', { timeout: 10000 }).its('response.statusCode').should('eq', 200);
+
         installPage.waitForPage('repo-type=cluster&repo=rancher-charts&chart=rancher-backup');
 
         // Select the 'Use an existing storage class' option
@@ -49,6 +49,8 @@ describe('Charts', { tags: ['@charts', '@adminUser'] }, () => {
 
         storageOptions.set(2);
 
+        cy.wait('@secrets', { timeout: 10000 }).its('response.statusCode').should('eq', 200);
+
         // Verify that the drop-down exists and has the default storage class selected
         const select = new LabeledSelectPo('[data-testid="backup-chart-select-existing-storage-class"]');
 

From 92497c1e9680edff24fac639a6a4d4c08e029e7d Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 21 May 2024 16:09:02 +0100
Subject: [PATCH 40/71] fix formatting, paginationUtils.isSteveCacheEnabled -->
 paginationUtils.isEnabled

---
 .../machine-config/harvester.vue              |   2 +-
 shell/components/form/SecretSelector.vue      |  55 ++++-----
 .../form/SelectOrCreateAuthSecret.vue         | 105 ++++++------------
 .../components/form/SimpleSecretSelector.vue  |   1 -
 shell/detail/networking.k8s.io.ingress.vue    |   2 +-
 shell/detail/node.vue                         |   2 +-
 shell/edit/logging-flow/Match.vue             |  30 +----
 .../edit/networking.k8s.io.ingress/Rules.vue  |  47 +++-----
 .../edit/networking.k8s.io.ingress/index.vue  |   2 +-
 shell/edit/resources.cattle.io.backup.vue     |   2 +-
 shell/edit/resources.cattle.io.restore.vue    |   2 +-
 shell/edit/serviceaccount.vue                 |   2 +-
 shell/models/networking.k8s.io.ingress.js     |   4 +-
 .../manager/cloudCredential/index.vue         |   8 +-
 14 files changed, 90 insertions(+), 174 deletions(-)

diff --git a/pkg/harvester-manager/machine-config/harvester.vue b/pkg/harvester-manager/machine-config/harvester.vue
index 4b082cbc50..f997eb062d 100644
--- a/pkg/harvester-manager/machine-config/harvester.vue
+++ b/pkg/harvester-manager/machine-config/harvester.vue
@@ -135,7 +135,7 @@ export default {
       if (clusterId) {
         let configMapsUrl = `${ url }/${ CONFIG_MAP }s`;
 
-        if (paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+        if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: CONFIG_MAP } })) {
           const pagination = new PaginationArgs({
             page:     1,
             pageSize: -1,
diff --git a/shell/components/form/SecretSelector.vue b/shell/components/form/SecretSelector.vue
index 96159f6ce9..d336a02c84 100644
--- a/shell/components/form/SecretSelector.vue
+++ b/shell/components/form/SecretSelector.vue
@@ -8,8 +8,6 @@ import { labelSelectPaginationFunction } from '@shell/components/form/labeled-se
 import paginationUtils from '@shell/utils/pagination-utils';
 import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
 
-// TODO: RC fix formatting....
-
 const NONE = '__[[NONE]]__';
 
 export default {
@@ -19,52 +17,52 @@ export default {
     value: {
       type:     [String, Object],
       required: false,
-      default:  undefined,
+      default:  undefined
     },
     namespace: {
       type:     String,
-      required: true,
+      required: true
     },
     types: {
       type:    Array,
-      default: () => Object.values(TYPES),
+      default: () => Object.values(TYPES)
     },
     disabled: {
       type:    Boolean,
-      default: false,
+      default: false
     },
     mountKey: {
       type:    String,
-      default: 'valueFrom',
+      default: 'valueFrom'
     },
     nameKey: {
       type:    String,
-      default: 'name',
+      default: 'name'
     },
     keyKey: {
       type:    String,
-      default: 'key',
+      default: 'key'
     },
     showKeySelector: {
       type:    Boolean,
-      default: false,
+      default: false
     },
     secretNameLabel: {
       type:    String,
-      default: 'Secret Name',
+      default: 'Secret Name'
     },
     keyNameLabel: {
       type:    String,
-      default: 'Key',
+      default: 'Key'
     },
     mode: {
       type:    String,
-      default: _EDIT,
+      default: _EDIT
     },
     inStore: {
       type:    String,
       default: 'cluster',
-    },
+    }
   },
 
   async fetch() {
@@ -89,18 +87,11 @@ export default {
         const correctedName = isNone ? undefined : name;
 
         if (this.showKeySelector) {
-          this.$emit('input', {
-            [this.mountKey]: {
-              secretKeyRef: {
-                [this.nameKey]: correctedName,
-                [this.keyKey]:  '',
-              },
-            },
-          });
+          this.$emit('input', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: correctedName, [this.keyKey]: '' } } });
         } else {
           this.$emit('input', correctedName);
         }
-      },
+      }
     },
 
     key: {
@@ -109,15 +100,13 @@ export default {
       },
       set(key) {
         this.$emit('input', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: this.name, [this.keyKey]: key } } });
-      },
+      }
     },
     secrets() {
       const allSecrets = this.$store.getters[`${ this.inStore }/all`](SECRET);
 
-      return allSecrets.filter(
-        (secret) => this.types.includes(secret._type) &&
-          secret.namespace === this.namespace
-      );
+      return allSecrets
+        .filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
     },
     secretNames() {
       return this.mapSecrets(this.secrets.sort((a, b) => a.name.localeCompare(b.name)));
@@ -127,17 +116,15 @@ export default {
 
       return Object.keys(secret.data || {}).map((key) => ({
         label: key,
-        value: key,
+        value: key
       }));
     },
     isView() {
       return this.mode === _VIEW;
     },
     isKeyDisabled() {
-      return (
-        !this.isView && (!this.name || this.name === NONE || this.disabled)
-      );
-    },
+      return !this.isView && (!this.name || this.name === NONE || this.disabled);
+    }
   },
 
   methods: {
@@ -209,7 +196,7 @@ export default {
 <template>
   <div
     class="secret-selector"
-    :class="{ 'show-key-selector': showKeySelector }"
+    :class="{'show-key-selector': showKeySelector}"
   >
     <div class="input-container">
       <!-- key by namespace to ensure label select current page is recreated on ns change -->
diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index a5caeb8b66..c107fd5d09 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -14,8 +14,6 @@ import {
   PaginationParamFilter,
 } from '@shell/types/store/pagination.types';
 
-// TODO: RC fix formatting....
-
 export default {
   name: 'SelectOrCreateAuthSecret',
 
@@ -144,15 +142,8 @@ export default {
   },
 
   async fetch() {
-    if (
-      (this.allowSsh || this.allowBasic || this.allowRke) &&
-      this.$store.getters[`${ this.inStore }/schemaFor`](SECRET)
-    ) {
-      // TODO: RC switch all isSteveCacheEnabled
-    // if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
-      if (
-        paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })
-      ) {
+    if ( (this.allowSsh || this.allowBasic || this.allowRke) && this.$store.getters[`${ this.inStore }/schemaFor`](SECRET) ) {
+      if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
         // Filter results via api (because we shouldn't be fetching them all...)
         this.filteredSecrets = await this.filterSecretsByApi();
       } else {
@@ -164,10 +155,7 @@ export default {
       }
     }
 
-    if (
-      this.allowS3 &&
-      this.$store.getters['rancher/canList'](NORMAN.CLOUD_CREDENTIAL)
-    ) {
+    if ( this.allowS3 && this.$store.getters['rancher/canList'](NORMAN.CLOUD_CREDENTIAL) ) {
       // Avoid an async call and loading screen if already loaded by someone else
       if (this.$store.getters['rancher/haveAll'](NORMAN.CLOUD_CREDENTIAL)) {
         this.allCloudCreds = this.$store.getters['rancher/all'](
@@ -182,17 +170,17 @@ export default {
 
     let selected = this.preSelect?.selected || AUTH_TYPE._NONE;
 
-    if (!this.value) {
+    if ( !this.value ) {
       this.publicKey = this.preSelect?.publicKey || '';
       this.privateKey = this.preSelect?.privateKey || '';
     }
 
-    if (this.value) {
-      if (typeof this.value === 'object') {
+    if ( this.value ) {
+      if ( typeof this.value === 'object' ) {
         selected = `${ this.value.namespace }/${ this.value.name }`;
-      } else if (this.value.includes('/') || this.value.includes(':')) {
+      } else if ( this.value.includes('/') || this.value.includes(':') ) {
         selected = this.value;
-      } else if (this.namespace) {
+      } else if ( this.namespace ) {
         selected = `${ this.namespace }/${ this.value }`;
       } else {
         selected = this.value;
@@ -229,15 +217,15 @@ export default {
     secretTypes() {
       const types = [];
 
-      if (this.allowSsh) {
+      if ( this.allowSsh ) {
         types.push(SECRET_TYPES.SSH);
       }
 
-      if (this.allowBasic) {
+      if ( this.allowBasic ) {
         types.push(SECRET_TYPES.BASIC);
       }
 
-      if (this.allowRke) {
+      if ( this.allowRke ) {
         types.push(SECRET_TYPES.RKE_AUTH_CONFIG);
       }
 
@@ -301,13 +289,13 @@ export default {
         addObjects(out, more);
       }
 
-      if (!this.limitToNamespace) {
+      if ( !this.limitToNamespace ) {
         out = sortBy(out, 'group');
-        if (out.length) {
+        if ( out.length ) {
           let lastGroup = '';
 
-          for (let i = 0; i < out.length; i++) {
-            if (out[i].group !== lastGroup) {
+          for ( let i = 0 ; i < out.length ; i++ ) {
+            if ( out[i].group !== lastGroup ) {
               lastGroup = out[i].group;
 
               insertAt(out, i, {
@@ -322,14 +310,14 @@ export default {
         }
       }
 
-      if (out.length) {
+      if ( out.length ) {
         out.unshift({
           kind:     'title',
           label:    this.t('selectOrCreateAuthSecret.chooseExisting'),
           disabled: true,
         });
       }
-      if (this.allowNone) {
+      if ( this.allowNone ) {
         out.unshift({
           label: this.t('generic.none'),
           value: AUTH_TYPE._NONE,
@@ -340,11 +328,11 @@ export default {
         out.unshift({
           label:    'divider',
           disabled: true,
-          kind:     'divider',
+          kind:     'divider'
         });
       }
 
-      if (this.allowSsh) {
+      if ( this.allowSsh ) {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createSsh'),
           value: AUTH_TYPE._SSH,
@@ -352,19 +340,19 @@ export default {
         });
       }
 
-      if (this.allowS3) {
+      if ( this.allowS3 ) {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createS3'),
           value: AUTH_TYPE._S3,
-          kind:  'highlighted',
+          kind:  'highlighted'
         });
       }
 
-      if (this.allowBasic) {
+      if ( this.allowBasic ) {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createBasic'),
           value: AUTH_TYPE._BASIC,
-          kind:  'highlighted',
+          kind:  'highlighted'
         });
       }
 
@@ -372,15 +360,11 @@ export default {
     },
 
     firstCol() {
-      if (this.vertical) {
+      if ( this.vertical ) {
         return '';
       }
 
-      if (
-        this.selected === AUTH_TYPE._SSH ||
-        this.selected === AUTH_TYPE._BASIC ||
-        this.selected === AUTH_TYPE._S3
-      ) {
+      if ( this.selected === AUTH_TYPE._SSH || this.selected === AUTH_TYPE._BASIC || this.selected === AUTH_TYPE._S3 ) {
         return 'col span-4';
       }
 
@@ -388,7 +372,7 @@ export default {
     },
 
     moreCols() {
-      if (this.vertical) {
+      if ( this.vertical ) {
         return 'mt-20';
       }
 
@@ -464,11 +448,7 @@ export default {
     },
 
     updateKeyVal() {
-      if (
-        ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(
-          this.selected
-        )
-      ) {
+      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(this.selected) ) {
         this.privateKey = '';
         this.publicKey = '';
       }
@@ -476,33 +456,25 @@ export default {
       this.$emit('inputauthval', {
         selected:   this.selected,
         privateKey: this.privateKey,
-        publicKey:  this.publicKey,
+        publicKey:  this.publicKey
       });
     },
 
     update() {
-      if (
-        !this.selected ||
-        [
-          AUTH_TYPE._SSH,
-          AUTH_TYPE._BASIC,
-          AUTH_TYPE._S3,
-          AUTH_TYPE._NONE,
-        ].includes(this.selected)
-      ) {
+      if ( (!this.selected || [AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._NONE].includes(this.selected))) {
         this.$emit('input', null);
-      } else if (this.selected.includes(':')) {
+      } else if ( this.selected.includes(':') ) {
         // Cloud creds
         this.$emit('input', this.selected);
       } else {
         const split = this.selected.split('/');
 
-        if (this.limitToNamespace) {
+        if ( this.limitToNamespace ) {
           this.$emit('input', split[1]);
         } else {
           const out = {
             namespace: split[0],
-            name:      split[1],
+            name:      split[1]
           };
 
           this.$emit('input', out);
@@ -513,12 +485,7 @@ export default {
     },
 
     async doCreate() {
-      if (
-        ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(
-          this.selected
-        ) ||
-        this.delegateCreateToParent
-      ) {
+      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(this.selected) || this.delegateCreateToParent ) {
         return;
       }
 
@@ -537,13 +504,13 @@ export default {
           type:     SECRET,
           metadata: {
             namespace:    this.namespace,
-            generateName: this.generateName,
+            generateName: this.generateName
           },
         });
 
         let type, publicField, privateField;
 
-        switch (this.selected) {
+        switch ( this.selected ) {
         case AUTH_TYPE._SSH:
           type = SECRET_TYPES.SSH;
           publicField = 'ssh-publickey';
@@ -581,7 +548,7 @@ export default {
   <div class="select-or-create-auth-secret">
     <div
       class="mt-20"
-      :class="{ row: !vertical }"
+      :class="{'row': !vertical }"
     >
       <div :class="firstCol">
         <LabeledSelect
diff --git a/shell/components/form/SimpleSecretSelector.vue b/shell/components/form/SimpleSecretSelector.vue
index 3129a4e2c1..72fcfbbd65 100644
--- a/shell/components/form/SimpleSecretSelector.vue
+++ b/shell/components/form/SimpleSecretSelector.vue
@@ -34,7 +34,6 @@ export default {
 
   async fetch() {
     if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
-    // if (paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
       // I don't think we need to integrate server-side pagination with the label select that this powers
       // filtering by namespace should be enough to restrict the response to something small enough for the UI to handle
 
diff --git a/shell/detail/networking.k8s.io.ingress.vue b/shell/detail/networking.k8s.io.ingress.vue
index 287aaadfbe..b1b3c680cb 100644
--- a/shell/detail/networking.k8s.io.ingress.vue
+++ b/shell/detail/networking.k8s.io.ingress.vue
@@ -23,7 +23,7 @@ export default {
       resourceFields: this.schema.fetchResourceFields(),
     };
 
-    if (paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+    if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.value.metadata.namespace,
         pagination: new PaginationArgs({
diff --git a/shell/detail/node.vue b/shell/detail/node.vue
index 9f10e1bb3b..53dd0e8733 100644
--- a/shell/detail/node.vue
+++ b/shell/detail/node.vue
@@ -48,7 +48,7 @@ export default {
   },
 
   async fetch() {
-    this.filterByApi = paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters });
+    this.filterByApi = paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: POD } });
 
     if (this.filterByApi) {
       // Only get pods associated with this node. The actual values used are from a get all in node model `pods` getter (this works as it just gets all...)
diff --git a/shell/edit/logging-flow/Match.vue b/shell/edit/logging-flow/Match.vue
index 85dc870de8..11bcec7334 100644
--- a/shell/edit/logging-flow/Match.vue
+++ b/shell/edit/logging-flow/Match.vue
@@ -3,8 +3,6 @@ import KeyValue from '@shell/components/form/KeyValue';
 import Select from '@shell/components/form/Select';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
-// TODO: RC fix formatting....
-
 export default {
   components: {
     KeyValue, Select, LabeledSelect
@@ -35,8 +33,8 @@ export default {
 
     isClusterFlow: {
       type:    Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
 
   methods: {
@@ -53,11 +51,7 @@ export default {
   <div>
     <KeyValue
       v-model="value.labels"
-      :title="
-        value.select
-          ? t('logging.flow.matches.pods.title.include')
-          : t('logging.flow.matches.pods.title.exclude')
-      "
+      :title="value.select ? t('logging.flow.matches.pods.title.include') : t('logging.flow.matches.pods.title.exclude')"
       :mode="mode"
       :initial-empty-row="true"
       :read-allowed="false"
@@ -69,11 +63,7 @@ export default {
     />
     <div class="spacer" />
     <h3>
-      {{
-        value.select
-          ? t("logging.flow.matches.nodes.title.include")
-          : t("logging.flow.matches.nodes.title.exclude")
-      }}
+      {{ value.select ? t('logging.flow.matches.nodes.title.include') : t('logging.flow.matches.nodes.title.exclude') }}
     </h3>
     <div class="row">
       <div class="col span-12">
@@ -93,11 +83,7 @@ export default {
     </div>
     <div class="spacer" />
     <h3>
-      {{
-        value.select
-          ? t("logging.flow.matches.containerNames.title.include")
-          : t("logging.flow.matches.containerNames.title.exclude")
-      }}
+      {{ value.select ? t('logging.flow.matches.containerNames.title.include') : t('logging.flow.matches.containerNames.title.exclude') }}
     </h3>
     <div class="row">
       <div class="col span-12">
@@ -120,11 +106,7 @@ export default {
     <div v-if="isClusterFlow">
       <div class="spacer" />
       <h3>
-        {{
-          value.select
-            ? t("logging.flow.matches.namespaces.title.include")
-            : t("logging.flow.matches.namespaces.title.exclude")
-        }}
+        {{ value.select ? t('logging.flow.matches.namespaces.title.include') : t('logging.flow.matches.namespaces.title.exclude') }}
       </h3>
       <div class="row">
         <div class="col span-12">
diff --git a/shell/edit/networking.k8s.io.ingress/Rules.vue b/shell/edit/networking.k8s.io.ingress/Rules.vue
index 3c860e813e..7bd78585e4 100644
--- a/shell/edit/networking.k8s.io.ingress/Rules.vue
+++ b/shell/edit/networking.k8s.io.ingress/Rules.vue
@@ -7,35 +7,30 @@ import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { random32 } from '@shell/utils/string';
 import Rule from './Rule';
 
-// TODO: RC fix formatting....
-
 export default {
   components: {
-    ArrayListGrouped,
-    Loading,
-    Rule,
-    SortableTable,
+    ArrayListGrouped, Loading, Rule, SortableTable
   },
 
   props: {
     value: {
       type:    Object,
-      default: () => {},
+      default: () => {}
     },
 
     mode: {
       type:    String,
-      default: 'edit',
+      default: 'edit'
     },
 
     certificates: {
       type:    Array,
-      default: () => [],
+      default: () => []
     },
 
     serviceTargets: {
       type:    Array,
-      default: () => [],
+      default: () => []
     },
 
     rules: {
@@ -43,18 +38,15 @@ export default {
         requestHost: [],
         path:        [],
         port:        [],
-        target:      [],
+        target:      []
       }),
       type: Object,
-    },
+    }
   },
 
   async fetch() {
     // TODO: RC shell/edit/networking.k8s.io.ingress/Rules.vue. used by (just? NO, 1 other) shell/models/networking.k8s.io.ingress.js `targetTo`
-    await Promise.all(
-      Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })
-      )
-    );
+    await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })));
   },
 
   beforeUpdate() {
@@ -67,8 +59,7 @@ export default {
 
   computed: {
     workloads() {
-      return Object.values(WORKLOAD_TYPES).flatMap((type) => this.$store.getters['cluster/all'](type)
-      );
+      return Object.values(WORKLOAD_TYPES).flatMap((type) => this.$store.getters['cluster/all'](type));
     },
     isView() {
       return this.mode === _VIEW;
@@ -79,17 +70,14 @@ export default {
           name:      'fullPath',
           label:     this.t('ingress.rules.headers.path'),
           value:     '',
-          formatter: 'IngressFullPath',
+          formatter: 'IngressFullPath'
         },
         {
           name:          'target',
           label:         this.t('ingress.rules.headers.target'),
           formatter:     'Link',
-          formatterOpts: {
-            options: { internal: true },
-            urlKey:  'targetLink.to',
-          },
-          value: 'targetLink',
+          formatterOpts: { options: { internal: true }, urlKey: 'targetLink.to' },
+          value:         'targetLink',
         },
         {
           name:  'port',
@@ -115,19 +103,16 @@ export default {
       return headers;
     },
     rows() {
-      return this.value.createRulesForListPage(
-        this.workloads,
-        this.certificates
-      );
-    },
+      return this.value.createRulesForListPage(this.workloads, this.certificates);
+    }
   },
   methods: {
     onAdd() {
       if (this.$refs.lastRule?.focus) {
         this.$refs.lastRule.focus();
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/shell/edit/networking.k8s.io.ingress/index.vue b/shell/edit/networking.k8s.io.ingress/index.vue
index f403dac11f..e064b17242 100644
--- a/shell/edit/networking.k8s.io.ingress/index.vue
+++ b/shell/edit/networking.k8s.io.ingress/index.vue
@@ -57,7 +57,7 @@ export default {
       ingressResourceFields: this.schema.fetchResourceFields(),
     };
 
-    this.filterByApi = paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters });
+    this.filterByApi = paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } });
 
     if (this.filterByApi) {
       promises.filteredSecrets = this.filterSecretsByApi();
diff --git a/shell/edit/resources.cattle.io.backup.vue b/shell/edit/resources.cattle.io.backup.vue
index 1cc829c280..8ae79ba12f 100644
--- a/shell/edit/resources.cattle.io.backup.vue
+++ b/shell/edit/resources.cattle.io.backup.vue
@@ -63,7 +63,7 @@ export default {
 
     this.chartNamespace = BRORelease?.spec.namespace || '';
 
-    if (paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+    if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.chartNamespace,
         pagination: new PaginationArgs({
diff --git a/shell/edit/resources.cattle.io.restore.vue b/shell/edit/resources.cattle.io.restore.vue
index 143ed8a317..5531e83961 100644
--- a/shell/edit/resources.cattle.io.restore.vue
+++ b/shell/edit/resources.cattle.io.restore.vue
@@ -60,7 +60,7 @@ export default {
 
     this.chartNamespace = BRORelease?.spec.namespace || '';
 
-    if (paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters })) {
+    if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.chartNamespace,
         pagination: new PaginationArgs({
diff --git a/shell/edit/serviceaccount.vue b/shell/edit/serviceaccount.vue
index ae34edf111..bc72c36db8 100644
--- a/shell/edit/serviceaccount.vue
+++ b/shell/edit/serviceaccount.vue
@@ -38,7 +38,7 @@ export default {
   },
 
   async fetch() {
-    this.filterByApi = paginationUtils.isSteveCacheEnabled({ rootGetters: this.$store.getters });
+    this.filterByApi = paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } });
 
     if (this.filterByApi) {
       this.filteredSecrets = await this.filterSecretsByApi();
diff --git a/shell/models/networking.k8s.io.ingress.js b/shell/models/networking.k8s.io.ingress.js
index 3362ee82c1..1d6188ef5d 100644
--- a/shell/models/networking.k8s.io.ingress.js
+++ b/shell/models/networking.k8s.io.ingress.js
@@ -4,8 +4,6 @@ import { get } from '@shell/utils/object';
 import isEmpty from 'lodash/isEmpty';
 import SteveModel from '@shell/plugins/steve/steve-class';
 
-// TODO: RC fix formatting....
-
 function tlsHosts(spec) {
   const tls = spec.tls || [];
 
@@ -139,7 +137,7 @@ export default class Ingress extends SteveModel {
     const backend = get(this.spec, this.defaultBackendPath);
     const serviceName = get(backend, this.serviceNamePath);
 
-    if (!serviceName) {
+    if ( !serviceName ) {
       return null;
     }
 
diff --git a/shell/pages/c/_cluster/manager/cloudCredential/index.vue b/shell/pages/c/_cluster/manager/cloudCredential/index.vue
index baba1594ff..3d657d983b 100644
--- a/shell/pages/c/_cluster/manager/cloudCredential/index.vue
+++ b/shell/pages/c/_cluster/manager/cloudCredential/index.vue
@@ -10,8 +10,6 @@ import {
   NAME_UNLINKED,
 } from '@shell/config/table-headers';
 
-// TODO: RC fix formatting....
-
 export default {
   components: {
     Loading,
@@ -95,10 +93,10 @@ export default {
       :namespaced="false"
       group-by="providerDisplay"
     >
-      <template #cell:id="{ row }">
-        {{ row.id.replace("cattle-global-data:", "") }}
+      <template #cell:id="{row}">
+        {{ row.id.replace('cattle-global-data:', '') }}
       </template>
-      <template #cell:apikey="{ row }">
+      <template #cell:apikey="{row}">
         <span
           v-if="row.publicData"
           v-clean-html="row.publicData"

From ac650e38694923cc169114bb5ba6f2620107de23 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 21 May 2024 16:53:06 +0100
Subject: [PATCH 41/71] Don't fetch all secrets on cloud creds page

---
 .../formatter/CloudCredPublicData.vue         | 30 +++++++++++++++++
 shell/models/cloudcredential.js               | 10 +++++-
 .../manager/cloudCredential/index.vue         | 32 +++++--------------
 3 files changed, 47 insertions(+), 25 deletions(-)
 create mode 100644 shell/components/formatter/CloudCredPublicData.vue

diff --git a/shell/components/formatter/CloudCredPublicData.vue b/shell/components/formatter/CloudCredPublicData.vue
new file mode 100644
index 0000000000..7fc02b4043
--- /dev/null
+++ b/shell/components/formatter/CloudCredPublicData.vue
@@ -0,0 +1,30 @@
+<script>
+
+export default {
+  props: {
+    value: {
+      type:     String,
+      required: true
+    },
+    row: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+
+  async fetch() {
+    await this.row.getSecret();
+  },
+};
+</script>
+
+<template>
+  <div v-if="value && !$fetchState.pending">
+    <span v-clean-html="value" />
+  </div>
+  <div v-else>
+    <span class="text-muted">&mdash;</span>
+  </div>
+</template>
diff --git a/shell/models/cloudcredential.js b/shell/models/cloudcredential.js
index 3a019ab653..b59f42b4dd 100644
--- a/shell/models/cloudcredential.js
+++ b/shell/models/cloudcredential.js
@@ -32,8 +32,16 @@ export default class CloudCredential extends NormanModel {
     };
   }
 
+  get secretName() {
+    return this.id.replace(':', '/');
+  }
+
   get secret() {
-    return this.$rootGetters['management/byId'](SECRET, this.id.replace(':', '/'));
+    return this.$rootGetters['management/byId'](SECRET, this.secretName);
+  }
+
+  async getSecret() {
+    await this.$dispatch('management/find', { type: SECRET, id: this.secretName }, { root: true });
   }
 
   get configKey() {
diff --git a/shell/pages/c/_cluster/manager/cloudCredential/index.vue b/shell/pages/c/_cluster/manager/cloudCredential/index.vue
index 3d657d983b..4c388c617a 100644
--- a/shell/pages/c/_cluster/manager/cloudCredential/index.vue
+++ b/shell/pages/c/_cluster/manager/cloudCredential/index.vue
@@ -9,6 +9,7 @@ import {
   ID_UNLINKED,
   NAME_UNLINKED,
 } from '@shell/config/table-headers';
+import paginationUtils from '@shell/utils/pagination-utils';
 
 export default {
   components: {
@@ -18,10 +19,7 @@ export default {
   },
 
   async fetch() {
-    if (this.$store.getters['management/schemaFor'](SECRET)) {
-      // TODO: RC shell/pages/c/_cluster/manager/cloudCredential/index.vue.
-      // list is norman creds, cannot paginate.
-      // Convert anything that uses cred `publicData` to a Live column and fetch specific secrets as needed
+    if (this.$store.getters['management/schemaFor'](SECRET) && !paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
       // Having secrets allows showing the public portion of more types but not all users can see them.
       await this.$store.dispatch('management/findAll', { type: SECRET });
     }
@@ -47,12 +45,12 @@ export default {
         ID_UNLINKED,
         NAME_UNLINKED,
         {
-          name:        'apikey',
-          labelKey:    'tableHeaders.apikey',
-          value:       'publicData',
-          sort:        'publicData',
-          search:      'publicData',
-          dashIfEmpty: true,
+          name:      'apikey',
+          labelKey:  'tableHeaders.apikey',
+          value:     'publicData',
+          sort:      'publicData',
+          search:    'publicData',
+          formatter: 'CloudCredPublicData',
         },
         DESCRIPTION,
         AGE_NORMAN,
@@ -70,9 +68,6 @@ export default {
     },
   },
 
-  mounted() {
-    window.c = this;
-  },
 };
 </script>
 
@@ -85,7 +80,6 @@ export default {
       :create-location="createLocation"
       :type-display="t('manager.cloudCredentials.label')"
     />
-
     <ResourceTable
       :schema="schema"
       :rows="rows"
@@ -96,16 +90,6 @@ export default {
       <template #cell:id="{row}">
         {{ row.id.replace('cattle-global-data:', '') }}
       </template>
-      <template #cell:apikey="{row}">
-        <span
-          v-if="row.publicData"
-          v-clean-html="row.publicData"
-        />
-        <span
-          v-else
-          class="text-muted"
-        >&mdash;</span>
-      </template>
     </ResourceTable>
   </div>
 </template>

From 9afb8dbcd28f308cf3e90f47bc5f002ed79dc075 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 21 May 2024 15:24:10 +0100
Subject: [PATCH 42/71] Fix backup.spec e2e test

---
 cypress/e2e/tests/pages/charts/rancher-backup.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/tests/pages/charts/rancher-backup.spec.ts b/cypress/e2e/tests/pages/charts/rancher-backup.spec.ts
index ca2b62ffa3..576dff3b30 100644
--- a/cypress/e2e/tests/pages/charts/rancher-backup.spec.ts
+++ b/cypress/e2e/tests/pages/charts/rancher-backup.spec.ts
@@ -41,7 +41,7 @@ describe('Charts', { tags: ['@charts', '@adminUser'] }, () => {
         installPage.nextPage();
         cy.wait('@storageClasses', { timeout: 10000 }).its('response.statusCode').should('eq', 200);
         cy.wait('@persistentVolumes', { timeout: 10000 }).its('response.statusCode').should('eq', 200);
-        cy.wait('@secrets', { timeout: 10000 }).its('response.statusCode').should('eq', 200);
+
         installPage.waitForPage('repo-type=cluster&repo=rancher-charts&chart=rancher-backup');
 
         // Select the 'Use an existing storage class' option

From aae1397b544bc272cfa7b0b74683c5f3f09454a6 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 22 May 2024 10:14:36 +0100
Subject: [PATCH 43/71] TODO tidying / tracking

---
 shell/components/form/SelectOrCreateAuthSecret.vue   | 1 -
 shell/detail/workload/index.vue                      | 1 +
 shell/edit/networking.k8s.io.networkpolicy/index.vue | 2 +-
 shell/edit/service.vue                               | 2 +-
 shell/models/workload.js                             | 1 +
 5 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index c107fd5d09..bdf2a510f5 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -410,7 +410,6 @@ export default {
   },
 
   methods: {
-    // TODO: RC unit tests
     async filterSecretsByApi() {
       const findPageArgs = {
         // Of type ActionFindPageArgs
diff --git a/shell/detail/workload/index.vue b/shell/detail/workload/index.vue
index 963f3ac885..4512a078bf 100644
--- a/shell/detail/workload/index.vue
+++ b/shell/detail/workload/index.vue
@@ -65,6 +65,7 @@ export default {
     } catch {}
 
     const hash = {
+      // See https://github.com/rancher/dashboard/issues/10417, all pods bad, come from a locally applied selector in the workload model
       allPods:      this.$store.dispatch('cluster/findAll', { type: POD }),
       allServices:  this.$store.dispatch('cluster/findAll', { type: SERVICE }),
       allIngresses: this.$store.dispatch('cluster/findAll', { type: INGRESS }),
diff --git a/shell/edit/networking.k8s.io.networkpolicy/index.vue b/shell/edit/networking.k8s.io.networkpolicy/index.vue
index 7d4eef5dbc..1151216bed 100644
--- a/shell/edit/networking.k8s.io.networkpolicy/index.vue
+++ b/shell/edit/networking.k8s.io.networkpolicy/index.vue
@@ -146,7 +146,7 @@ export default {
 
   methods: {
     updateMatchingPods: throttle(function() {
-      // TODO: RC pods and selectors
+      // See https://github.com/rancher/dashboard/issues/10417, all pods bad, need to replace local selector somehow
       const allInNamespace = this.allPods.filter((pod) => pod.metadata.namespace === this.value.metadata.namespace);
       const match = matching(allInNamespace, this.podSelectorExpressions);
       const matched = match.length || 0;
diff --git a/shell/edit/service.vue b/shell/edit/service.vue
index 4ad0ffc645..5453af1824 100644
--- a/shell/edit/service.vue
+++ b/shell/edit/service.vue
@@ -254,7 +254,7 @@ export default {
   methods: {
     updateMatchingPods: throttle(function() {
       const { value: { spec: { selector = { } } } } = this;
-      // TODO: RC pods and selectors
+      // See https://github.com/rancher/dashboard/issues/10417, all pods bad, need to replace local selector somehow
       const allInNamespace = this.allPods.filter((pod) => pod.metadata.namespace === this.value?.metadata?.namespace);
 
       if (isEmpty(selector)) {
diff --git a/shell/models/workload.js b/shell/models/workload.js
index 5e9090dd5e..ec6e8c4a59 100644
--- a/shell/models/workload.js
+++ b/shell/models/workload.js
@@ -647,6 +647,7 @@ export default class Workload extends WorkloadService {
 
     const selector = convertSelectorObj(this.spec.selector);
 
+    // See https://github.com/rancher/dashboard/issues/10417, all pods bad, need to replace local selector somehow
     return matching(allInNamespace, selector);
   }
 

From 285f0cb492fffdc7ac3d479c382e9b187eddf426 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 22 May 2024 11:03:59 +0100
Subject: [PATCH 44/71] don't getch ALL workloads for hacky way to get a link
 to a service's workload

---
 shell/components/formatter/IngressTarget.vue   |  9 +++++++--
 shell/edit/networking.k8s.io.ingress/Rules.vue | 13 +++++++++----
 shell/models/networking.k8s.io.ingress.js      |  1 -
 shell/plugins/steve/subscribe.js               |  8 +++-----
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/shell/components/formatter/IngressTarget.vue b/shell/components/formatter/IngressTarget.vue
index 7b1ab2684f..cce75e070c 100644
--- a/shell/components/formatter/IngressTarget.vue
+++ b/shell/components/formatter/IngressTarget.vue
@@ -1,6 +1,7 @@
 <script>
 import { INGRESS, WORKLOAD_TYPES } from '@shell/config/types';
 import IngressFullPath from '@shell/components/formatter/IngressFullPath';
+import paginationUtils from '@shell/utils/pagination-utils';
 
 export default {
   components: { IngressFullPath },
@@ -18,8 +19,12 @@ export default {
   },
 
   async fetch() {
-    // TODO: RC shell/components/formatter/IngressTarget.vue. used by shell/models/networking.k8s.io.ingress.js `targetTo`
-    const promises = Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type }));
+    let promises = [];
+
+    if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster' })) {
+      // This is only used by shell/models/networking.k8s.io.ingress.js `targetTo`, where we do some dodgy matching of workloads with name 'ingress-'
+      promises = Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type }));
+    }
     const ingressSchema = this.$store.getters[`cluster/schemaFor`](INGRESS);
 
     if (ingressSchema) {
diff --git a/shell/edit/networking.k8s.io.ingress/Rules.vue b/shell/edit/networking.k8s.io.ingress/Rules.vue
index 7bd78585e4..218c675dca 100644
--- a/shell/edit/networking.k8s.io.ingress/Rules.vue
+++ b/shell/edit/networking.k8s.io.ingress/Rules.vue
@@ -6,6 +6,7 @@ import { _VIEW } from '@shell/config/query-params';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { random32 } from '@shell/utils/string';
 import Rule from './Rule';
+import paginationUtils from '@shell/utils/pagination-utils';
 
 export default {
   components: {
@@ -45,8 +46,10 @@ export default {
   },
 
   async fetch() {
-    // TODO: RC shell/edit/networking.k8s.io.ingress/Rules.vue. used by (just? NO, 1 other) shell/models/networking.k8s.io.ingress.js `targetTo`
-    await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })));
+    if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster' })) {
+      // This is only used by shell/models/networking.k8s.io.ingress.js `targetTo`, where we do some dodgy matching of workloads with name 'ingress-'
+      await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })));
+    }
   },
 
   beforeUpdate() {
@@ -76,8 +79,10 @@ export default {
           name:          'target',
           label:         this.t('ingress.rules.headers.target'),
           formatter:     'Link',
-          formatterOpts: { options: { internal: true }, urlKey: 'targetLink.to' },
-          value:         'targetLink',
+          formatterOpts: {
+            options: { internal: true }, urlKey: 'targetLink.to', labelKey: 'serviceName'
+          },
+          value: 'targetLink',
         },
         {
           name:  'port',
diff --git a/shell/models/networking.k8s.io.ingress.js b/shell/models/networking.k8s.io.ingress.js
index 1d6188ef5d..59394951c3 100644
--- a/shell/models/networking.k8s.io.ingress.js
+++ b/shell/models/networking.k8s.io.ingress.js
@@ -45,7 +45,6 @@ export default class Ingress extends SteveModel {
     const id = `${ this.namespace }/${ serviceName }`;
 
     if (isTargetsWorkload) {
-      // TODO: RC This is the reason shell/components/formatter/IngressTarget.vue requires ALL WORKLOADS
       // Need to expose workloadId's and fetch specific ones in IngressTarget?
       const workload = workloads.find((w) => w.id === (id));
 
diff --git a/shell/plugins/steve/subscribe.js b/shell/plugins/steve/subscribe.js
index e277ec634f..5cbc68d575 100644
--- a/shell/plugins/steve/subscribe.js
+++ b/shell/plugins/steve/subscribe.js
@@ -35,6 +35,7 @@ import { WORKER_MODES } from './worker';
 import acceptOrRejectSocketMessage from './accept-or-reject-socket-message';
 import { BLANK_CLUSTER, STORE } from '@shell/store/store-types.js';
 import { STEVE_CACHE } from '@shell/store/features';
+import paginationUtils from '@shell/utils/pagination-utils';
 
 // minimum length of time a disconnect notification is shown
 const MINIMUM_TIME_NOTIFIED = 3000;
@@ -403,18 +404,15 @@ const sharedActions = {
       return;
     }
 
-    // This is temporary and will be removed once Part 3 of https://github.com/rancher/dashboard/pull/10349 is resolved by backend
+    // isSteveCacheEnabled check is temporary and will be removed once Part 3 of https://github.com/rancher/dashboard/pull/10349 is resolved by backend
     // Steve cache backed api does not return a revision, so `revision` here is always undefined
     // Which means we find a revision within a resource itself and use it in the watch
     // That revision is probably too old and results in a watch error
     // Watch errors mean we make a http request to get latest revision (which is still missing) and try to re-watch with it...
     // etc
-    if (typeof revision === 'undefined' && !rootGetters['features/get']?.(STEVE_CACHE)) {
+    if (typeof revision === 'undefined' && !paginationUtils.isSteveCacheEnabled({ rootGetters })) {
       revision = getters.nextResourceVersion(type, id);
     }
-    // if ( typeof revision === 'undefined' ) {
-    //   revision = getters.nextResourceVersion(type, id);
-    // }
 
     const msg = { resourceType: type };
 

From 8e1066f2c2f2168f041070efef6a8e2f14363b61 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 22 May 2024 17:14:24 +0100
Subject: [PATCH 45/71] Fix bad merge

---
 shell/components/form/SelectOrCreateAuthSecret.vue | 2 +-
 shell/components/form/SimpleSecretSelector.vue     | 2 +-
 shell/detail/networking.k8s.io.ingress.vue         | 2 +-
 shell/edit/networking.k8s.io.ingress/index.vue     | 2 +-
 shell/edit/resources.cattle.io.backup.vue          | 2 +-
 shell/edit/resources.cattle.io.restore.vue         | 2 +-
 shell/edit/serviceaccount.vue                      | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index bdf2a510f5..a3181cd331 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -420,7 +420,7 @@ export default {
             PaginationParamFilter.createMultipleFields(
               this.secretTypes.map(
                 (t) => new PaginationFilterField({
-                  field: 'metadata.fields.2',
+                  field: 'metadata.fields.1',
                   value: t,
                 })
               )
diff --git a/shell/components/form/SimpleSecretSelector.vue b/shell/components/form/SimpleSecretSelector.vue
index 72fcfbbd65..bfae38b827 100644
--- a/shell/components/form/SimpleSecretSelector.vue
+++ b/shell/components/form/SimpleSecretSelector.vue
@@ -43,7 +43,7 @@ export default {
           pageSize: -1,
           filters:  [
             PaginationParamFilter.createMultipleFields(this.types.map((t) => {
-              return new PaginationFilterField({ field: 'metadata.fields.2', value: t });
+              return new PaginationFilterField({ field: 'metadata.fields.1', value: t });
             }))
           ]
         }),
diff --git a/shell/detail/networking.k8s.io.ingress.vue b/shell/detail/networking.k8s.io.ingress.vue
index b1b3c680cb..eece467c90 100644
--- a/shell/detail/networking.k8s.io.ingress.vue
+++ b/shell/detail/networking.k8s.io.ingress.vue
@@ -29,7 +29,7 @@ export default {
         pagination: new PaginationArgs({
           pageSize: -1,
           filters:  PaginationParamFilter.createSingleField({
-            field: 'metadata.fields.2',
+            field: 'metadata.fields.1', // TODO: RC test all of these references
             value: TYPES.TLS
           })
         }),
diff --git a/shell/edit/networking.k8s.io.ingress/index.vue b/shell/edit/networking.k8s.io.ingress/index.vue
index e064b17242..28b5585406 100644
--- a/shell/edit/networking.k8s.io.ingress/index.vue
+++ b/shell/edit/networking.k8s.io.ingress/index.vue
@@ -215,7 +215,7 @@ export default {
         pagination: new PaginationArgs({
           pageSize: -1,
           filters:  PaginationParamFilter.createSingleField({
-            field: 'metadata.fields.2',
+            field: 'metadata.fields.1',
             value: TYPES.TLS
           })
         }),
diff --git a/shell/edit/resources.cattle.io.backup.vue b/shell/edit/resources.cattle.io.backup.vue
index 8ae79ba12f..5ce848ca5a 100644
--- a/shell/edit/resources.cattle.io.backup.vue
+++ b/shell/edit/resources.cattle.io.backup.vue
@@ -69,7 +69,7 @@ export default {
         pagination: new PaginationArgs({
           pageSize: -1,
           filters:  PaginationParamFilter.createSingleField({
-            field: 'metadata.fields.2',
+            field: 'metadata.fields.1',
             value: SECRET_TYPES.OPAQUE
           })
         }),
diff --git a/shell/edit/resources.cattle.io.restore.vue b/shell/edit/resources.cattle.io.restore.vue
index 5531e83961..14a53cfab5 100644
--- a/shell/edit/resources.cattle.io.restore.vue
+++ b/shell/edit/resources.cattle.io.restore.vue
@@ -66,7 +66,7 @@ export default {
         pagination: new PaginationArgs({
           pageSize: -1,
           filters:  PaginationParamFilter.createSingleField({
-            field: 'metadata.fields.2',
+            field: 'metadata.fields.1',
             value: SECRET_TYPES.OPAQUE
           })
         }),
diff --git a/shell/edit/serviceaccount.vue b/shell/edit/serviceaccount.vue
index bc72c36db8..ff7572fa47 100644
--- a/shell/edit/serviceaccount.vue
+++ b/shell/edit/serviceaccount.vue
@@ -74,7 +74,7 @@ export default {
         pagination: new PaginationArgs({
           pageSize: -1,
           filters:  PaginationParamFilter.createMultipleFields(this.secretTypes.map((t) => ({
-            field:  'metadata.fields.2',
+            field:  'metadata.fields.1',
             value:  t,
             equals: true
           })))

From 66d11d1e9c75bc9ecfb1f89b5a2a849bcc2a83c3 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 22 May 2024 16:18:31 +0100
Subject: [PATCH 46/71] Updates after working with vai cache image

---
 .../machine-config/harvester.vue              |  4 +-
 .../form/SelectOrCreateAuthSecret.vue         |  3 +-
 .../components/form/SimpleSecretSelector.vue  |  3 +-
 shell/config/pagination-table-headers.js      |  4 +-
 shell/detail/networking.k8s.io.ingress.vue    |  3 +-
 shell/detail/node.vue                         |  4 +-
 .../edit/networking.k8s.io.ingress/index.vue  |  3 +-
 shell/edit/resources.cattle.io.backup.vue     |  3 +-
 shell/edit/resources.cattle.io.restore.vue    |  3 +-
 shell/edit/serviceaccount.vue                 |  3 +-
 shell/plugins/steve/steve-pagination-utils.ts | 50 ++++++++++++++++---
 shell/types/store/pagination.types.ts         |  4 +-
 shell/utils/pagination-utils.ts               |  4 +-
 13 files changed, 66 insertions(+), 25 deletions(-)

diff --git a/pkg/harvester-manager/machine-config/harvester.vue b/pkg/harvester-manager/machine-config/harvester.vue
index f997eb062d..a5971f8248 100644
--- a/pkg/harvester-manager/machine-config/harvester.vue
+++ b/pkg/harvester-manager/machine-config/harvester.vue
@@ -137,8 +137,8 @@ export default {
 
         if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: CONFIG_MAP } })) {
           const pagination = new PaginationArgs({
-            page:     1,
-            pageSize: -1,
+            page:     null,
+            pageSize: null,
             filters:  [
               PaginationParamFilter.createMultipleFields([
                 new PaginationFilterField({ field: `metadata.label["${ HCI_ANNOTATIONS.CLOUD_INIT }"]`, value: 'user' }),
diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index a3181cd331..e18a4fea50 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -415,7 +415,8 @@ export default {
         // Of type ActionFindPageArgs
         namespaced: this.filterByNamespace ? this.namespace : '',
         pagination: new PaginationArgs({
-          pageSize: -1,
+          page:     null,
+          pageSize: null,
           filters:  [
             PaginationParamFilter.createMultipleFields(
               this.secretTypes.map(
diff --git a/shell/components/form/SimpleSecretSelector.vue b/shell/components/form/SimpleSecretSelector.vue
index bfae38b827..f2713ae200 100644
--- a/shell/components/form/SimpleSecretSelector.vue
+++ b/shell/components/form/SimpleSecretSelector.vue
@@ -40,7 +40,8 @@ export default {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.namespace,
         pagination: new PaginationArgs({
-          pageSize: -1,
+          page:     null,
+          pageSize: null,
           filters:  [
             PaginationParamFilter.createMultipleFields(this.types.map((t) => {
               return new PaginationFilterField({ field: 'metadata.fields.1', value: t });
diff --git a/shell/config/pagination-table-headers.js b/shell/config/pagination-table-headers.js
index 74f5969051..d0455c25d0 100644
--- a/shell/config/pagination-table-headers.js
+++ b/shell/config/pagination-table-headers.js
@@ -25,8 +25,8 @@ export const STEVE_STATE_COL = {
   ...STATE,
   // value:  'metadata.state.name', Use the state as defined by the resource rather than converted via the model.
   // This means we'll show something different to what we sort and filter on.
-  sort:   ['metadata.state.name'],
-  search: 'metadata.state.name',
+  sort:   [], // ['metadata.state.name'], // Pending API support
+  search: false, // 'metadata.state.name', // Pending API support
 };
 
 export const STEVE_AGE_COL = {
diff --git a/shell/detail/networking.k8s.io.ingress.vue b/shell/detail/networking.k8s.io.ingress.vue
index eece467c90..b4a4e0fd95 100644
--- a/shell/detail/networking.k8s.io.ingress.vue
+++ b/shell/detail/networking.k8s.io.ingress.vue
@@ -27,7 +27,8 @@ export default {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.value.metadata.namespace,
         pagination: new PaginationArgs({
-          pageSize: -1,
+          page:     null,
+          pageSize: null,
           filters:  PaginationParamFilter.createSingleField({
             field: 'metadata.fields.1', // TODO: RC test all of these references
             value: TYPES.TLS
diff --git a/shell/detail/node.vue b/shell/detail/node.vue
index 53dd0e8733..05ae698852 100644
--- a/shell/detail/node.vue
+++ b/shell/detail/node.vue
@@ -54,8 +54,8 @@ export default {
       // Only get pods associated with this node. The actual values used are from a get all in node model `pods` getter (this works as it just gets all...)
       const opt = { // Of type ActionFindPageArgs
         pagination: new PaginationArgs({
-          page:     -1,
-          pageSize: -1,
+          page:     null,
+          pageSize: null,
           sort:     [{ field: 'metadata.name', asc: true }],
           filters:  PaginationParamFilter.createSingleField({
             field: 'spec.nodeName',
diff --git a/shell/edit/networking.k8s.io.ingress/index.vue b/shell/edit/networking.k8s.io.ingress/index.vue
index 28b5585406..8854a83bbe 100644
--- a/shell/edit/networking.k8s.io.ingress/index.vue
+++ b/shell/edit/networking.k8s.io.ingress/index.vue
@@ -213,7 +213,8 @@ export default {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.value.metadata.namespace,
         pagination: new PaginationArgs({
-          pageSize: -1,
+          page:     null,
+          pageSize: null,
           filters:  PaginationParamFilter.createSingleField({
             field: 'metadata.fields.1',
             value: TYPES.TLS
diff --git a/shell/edit/resources.cattle.io.backup.vue b/shell/edit/resources.cattle.io.backup.vue
index 5ce848ca5a..9f60740bf1 100644
--- a/shell/edit/resources.cattle.io.backup.vue
+++ b/shell/edit/resources.cattle.io.backup.vue
@@ -67,7 +67,8 @@ export default {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.chartNamespace,
         pagination: new PaginationArgs({
-          pageSize: -1,
+          page:     null,
+          pageSize: null,
           filters:  PaginationParamFilter.createSingleField({
             field: 'metadata.fields.1',
             value: SECRET_TYPES.OPAQUE
diff --git a/shell/edit/resources.cattle.io.restore.vue b/shell/edit/resources.cattle.io.restore.vue
index 14a53cfab5..6ffaf44e4b 100644
--- a/shell/edit/resources.cattle.io.restore.vue
+++ b/shell/edit/resources.cattle.io.restore.vue
@@ -64,7 +64,8 @@ export default {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.chartNamespace,
         pagination: new PaginationArgs({
-          pageSize: -1,
+          page:     null,
+          pageSize: null,
           filters:  PaginationParamFilter.createSingleField({
             field: 'metadata.fields.1',
             value: SECRET_TYPES.OPAQUE
diff --git a/shell/edit/serviceaccount.vue b/shell/edit/serviceaccount.vue
index ff7572fa47..4bd313f905 100644
--- a/shell/edit/serviceaccount.vue
+++ b/shell/edit/serviceaccount.vue
@@ -72,7 +72,8 @@ export default {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.value.metadata.namespace,
         pagination: new PaginationArgs({
-          pageSize: -1,
+          page:     null,
+          pageSize: null,
           filters:  PaginationParamFilter.createMultipleFields(this.secretTypes.map((t) => ({
             field:  'metadata.fields.1',
             value:  t,
diff --git a/shell/plugins/steve/steve-pagination-utils.ts b/shell/plugins/steve/steve-pagination-utils.ts
index ae4c86931d..838765885e 100644
--- a/shell/plugins/steve/steve-pagination-utils.ts
+++ b/shell/plugins/steve/steve-pagination-utils.ts
@@ -5,6 +5,7 @@ import Namespace from '@shell/models/namespace';
 import { uniq } from '@shell/utils/array';
 import { CONFIG_MAP, MANAGEMENT, NODE, POD } from '@shell/config/types';
 import { Schema } from 'plugins/steve/schema';
+import { TEMP_VAI_CACHE_MERGED } from 'utils/pagination-utils';
 
 class NamespaceProjectFilters {
   /**
@@ -105,24 +106,46 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     '': [// all types
       { field: 'metadata.name' },
       { field: 'metadata.namespace' },
-      { field: 'metadata.state.name' },
+      // { field: 'id' }, // Pending API support
+      // { field: 'metadata.state.name' }, // Pending API support
+      { field: 'metadata.creationTimestamp' },
     ],
     [NODE]: [
-      { field: 'status.nodeInfo.kubeletVersion' },
-      { field: 'status.nodeInfo.operatingSystem' },
+      // { field: 'status.nodeInfo.kubeletVersion' }, // Pending API support
+      // { field: 'status.nodeInfo.operatingSystem' }, // Pending API support
+      // { field: 'status.nodeName' }, // Pending API support
     ],
     [POD]: [
       { field: 'spec.containers.image' },
       { field: 'spec.nodeName' },
     ],
     [MANAGEMENT.NODE]: [
-      { field: 'status.nodeName' }
+      { field: 'status.nodeName' },
+      // { field: 'status.nodeInfo.kubeletVersion'}, // Pending API support
     ],
     [CONFIG_MAP]: [
       { field: 'metadata.labels' }
     ]
   }
 
+  private convertArrayPath(path: string): string {
+    if (TEMP_VAI_CACHE_MERGED) {
+      return path;
+    }
+
+    if (path.startsWith('metadata.fields.')) {
+      const [part1, part2, ...rest] = path.split('.');
+
+      return `${ part1 }.${ part2 }[${ rest.join('.') }]`;
+    }
+
+    return path;
+  }
+
+  public createSortForPagination(sortByPath: string): string {
+    return this.convertArrayPath(sortByPath);
+  }
+
   /**
    * Given the selection of projects or namespaces come up with `filter` and `projectsornamespace` query params
    */
@@ -220,8 +243,6 @@ class StevePaginationUtils extends NamespaceProjectFilters {
 
     if (opt.pagination.page) {
       params.push(`page=${ opt.pagination.page }`);
-    } else {
-      throw new Error(`A pagination request is required but no 'page' property provided: ${ JSON.stringify(opt) }`);
     }
 
     if (opt.pagination.pageSize) {
@@ -229,11 +250,24 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     }
 
     if (opt.pagination.sort?.length) {
+      const validateFields = {
+        checked: new Array<string>(),
+        invalid: new Array<string>(),
+      };
+
       const joined = opt.pagination.sort
-        .map((s) => `${ s.asc ? '' : '-' }${ s.field }`)
+        .map((s) => {
+          this.validateField(validateFields, schema, s.field);
+
+          return `${ s.asc ? '' : '-' }${ this.convertArrayPath(s.field) }`;
+        })
         .join(',');
 
       params.push(`sort=${ joined }`);
+
+      if (validateFields.invalid.length) {
+        console.warn(`Pagination API does not support sorting '${ schema.id }' by the requested fields: ${ uniq(validateFields.invalid).join(', ') }`); // eslint-disable-line no-console
+      }
     }
 
     if (opt.pagination.filters?.length) {
@@ -308,7 +342,7 @@ class StevePaginationUtils extends NamespaceProjectFilters {
               // Check if the API supports filtering by this field
               this.validateField(validateFields, schema, field.field);
 
-              return `${ field.field }${ field.equals ? '=' : '!=' }${ field.value }`;
+              return `${ this.convertArrayPath(field.field) }${ field.equals ? '=' : '!=' }${ field.value }`;
             }
 
             return field.value;
diff --git a/shell/types/store/pagination.types.ts b/shell/types/store/pagination.types.ts
index b9ffb12eeb..7845d33b19 100644
--- a/shell/types/store/pagination.types.ts
+++ b/shell/types/store/pagination.types.ts
@@ -320,11 +320,11 @@ export class PaginationArgs {
     /**
      * For definition see {@link PaginationArgs} `page`
      */
-    page?: number,
+    page?: number | null,
     /**
      * For definition see {@link PaginationArgs} `pageSize`
      */
-    pageSize?: number,
+    pageSize?: number | null,
     /**
      * For definition see {@link PaginationArgs} `sort`
      */
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index 5fcdfcd096..e1cda6f2cd 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -21,7 +21,7 @@ import { DEFAULT_PERF_SETTING } from '@shell/config/settings';
  *
  * Once cache is merged (pre 2.9.0) this will be removed
  */
-const TEMP_VAI_CACHE_MERGED = false;
+export const TEMP_VAI_CACHE_MERGED = false;
 /**
  * Given above, just a dev thing
  */
@@ -32,7 +32,7 @@ const TEMP_PERF_ENABLED = false;
  */
 class PaginationUtils {
   /**
-   * When a ns filter isn't one or more projects/namespaces... what the the valid values?
+   * When a ns filter isn't one or more projects/namespaces... what are the valid values?
    *
    * This basically blocks 'Not in a Project'.. which would involve a projectsornamespaces param with every ns not in a project.
    */

From 3720a7d2a9f8e98770698327f130fcfb451843ba Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 23 May 2024 12:49:14 +0100
Subject: [PATCH 47/71] test fixes

---
 pkg/harvester-manager/machine-config/harvester.vue | 2 +-
 shell/config/product/explorer.js                   | 2 +-
 shell/detail/networking.k8s.io.ingress.vue         | 2 +-
 shell/plugins/steve/steve-pagination-utils.ts      | 2 +-
 shell/plugins/steve/subscribe.js                   | 1 -
 5 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/pkg/harvester-manager/machine-config/harvester.vue b/pkg/harvester-manager/machine-config/harvester.vue
index a5971f8248..d076a79e8a 100644
--- a/pkg/harvester-manager/machine-config/harvester.vue
+++ b/pkg/harvester-manager/machine-config/harvester.vue
@@ -41,7 +41,7 @@ import { isValidMac } from '@shell/utils/validators/cidr';
 import { HCI as HCI_ANNOTATIONS, STORAGE } from '@shell/config/labels-annotations';
 import { isEqual } from 'lodash';
 import paginationUtils from '@shell/utils/pagination-utils';
-import { PaginationArgs, PaginationFilterField, PaginationParam, PaginationParamFilter } from '~/shell/types/store/pagination.types';
+import { PaginationArgs, PaginationFilterField, PaginationParamFilter } from '~/shell/types/store/pagination.types';
 
 const STORAGE_NETWORK = 'storage-network.settings.harvesterhci.io';
 
diff --git a/shell/config/product/explorer.js b/shell/config/product/explorer.js
index d73794c611..9a8eb9e189 100644
--- a/shell/config/product/explorer.js
+++ b/shell/config/product/explorer.js
@@ -28,7 +28,7 @@ import {
 } from '@shell/config/pagination-table-headers';
 
 import { COLUMN_BREAKPOINTS } from '@shell/types/store/type-map';
-import { STEVE_CACHE } from 'store/features';
+import { STEVE_CACHE } from '@shell/store/features';
 
 export const NAME = 'explorer';
 
diff --git a/shell/detail/networking.k8s.io.ingress.vue b/shell/detail/networking.k8s.io.ingress.vue
index b4a4e0fd95..2d81eb70af 100644
--- a/shell/detail/networking.k8s.io.ingress.vue
+++ b/shell/detail/networking.k8s.io.ingress.vue
@@ -30,7 +30,7 @@ export default {
           page:     null,
           pageSize: null,
           filters:  PaginationParamFilter.createSingleField({
-            field: 'metadata.fields.1', // TODO: RC test all of these references
+            field: 'metadata.fields.1',
             value: TYPES.TLS
           })
         }),
diff --git a/shell/plugins/steve/steve-pagination-utils.ts b/shell/plugins/steve/steve-pagination-utils.ts
index 838765885e..f4b601db90 100644
--- a/shell/plugins/steve/steve-pagination-utils.ts
+++ b/shell/plugins/steve/steve-pagination-utils.ts
@@ -5,7 +5,7 @@ import Namespace from '@shell/models/namespace';
 import { uniq } from '@shell/utils/array';
 import { CONFIG_MAP, MANAGEMENT, NODE, POD } from '@shell/config/types';
 import { Schema } from 'plugins/steve/schema';
-import { TEMP_VAI_CACHE_MERGED } from 'utils/pagination-utils';
+import { TEMP_VAI_CACHE_MERGED } from '@shell/utils/pagination-utils';
 
 class NamespaceProjectFilters {
   /**
diff --git a/shell/plugins/steve/subscribe.js b/shell/plugins/steve/subscribe.js
index 5cbc68d575..c13039635f 100644
--- a/shell/plugins/steve/subscribe.js
+++ b/shell/plugins/steve/subscribe.js
@@ -34,7 +34,6 @@ import { waitFor } from '@shell/utils/async';
 import { WORKER_MODES } from './worker';
 import acceptOrRejectSocketMessage from './accept-or-reject-socket-message';
 import { BLANK_CLUSTER, STORE } from '@shell/store/store-types.js';
-import { STEVE_CACHE } from '@shell/store/features';
 import paginationUtils from '@shell/utils/pagination-utils';
 
 // minimum length of time a disconnect notification is shown

From bbc276764ab73275fa901f97ff7f10e7366ea7c7 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Mon, 27 May 2024 15:52:03 +0100
Subject: [PATCH 48/71] Create a convienence wrapper called
 ResourceLabelSelector that hides most of the complexity

---
 shell/chart/rancher-backup/S3.vue             |  36 +---
 .../components/form/ResourceLabeledSelect.vue | 188 ++++++++++++++++++
 shell/components/form/SecretSelector.vue      |  82 ++++----
 .../components/form/SimpleSecretSelector.vue  |  86 ++++----
 .../labeled-select.utils.ts                   |   6 +-
 .../cis.cattle.io.clusterscanbenchmark.vue    |  62 +++---
 6 files changed, 306 insertions(+), 154 deletions(-)
 create mode 100644 shell/components/form/ResourceLabeledSelect.vue

diff --git a/shell/chart/rancher-backup/S3.vue b/shell/chart/rancher-backup/S3.vue
index 5f213cc458..1fe47f74e0 100644
--- a/shell/chart/rancher-backup/S3.vue
+++ b/shell/chart/rancher-backup/S3.vue
@@ -2,19 +2,16 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
 import FileSelector from '@shell/components/form/FileSelector';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect';
 import { mapGetters } from 'vuex';
 import { SECRET } from '@shell/config/types';
-import { PaginationParamFilter } from '@shell/types/store/pagination.types';
-import { labelSelectPaginationFunction } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
-import paginationUtils from '@shell/utils/pagination-utils';
 
 export default {
   components: {
     LabeledInput,
     Checkbox,
     FileSelector,
-    LabeledSelect,
+    ResourceLabeledSelect,
   },
 
   props: {
@@ -32,13 +29,7 @@ export default {
   },
 
   data() {
-    return { secrets: [] };
-  },
-
-  async fetch() {
-    if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
-      this.secrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
-    }
+    return { SECRET };
   },
 
   mounted() {
@@ -87,22 +78,6 @@ export default {
         console.warn(e);
       }
     },
-
-    /**
-     * @param [PaginateFnOptions] opts
-     * @returns PaginateFnResponse
-     */
-    async paginateSecrets(opts) {
-      const { filter } = opts;
-      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
-
-      return labelSelectPaginationFunction({
-        opts,
-        filters,
-        type: SECRET,
-        ctx:  { getters: this.$store.getters, dispatch: this.$store.dispatch }
-      });
-    },
   },
 
   created() {
@@ -119,14 +94,13 @@ export default {
   <div>
     <div class="row mb-10">
       <div class="col span-6">
-        <LabeledSelect
+        <ResourceLabeledSelect
           v-model="credentialSecret"
           :get-option-label="opt=>opt.metadata.name || ''"
           option-key="id"
           :mode="mode"
-          :options="secrets"
-          :paginate="paginateSecrets"
           :label="t('backupRestoreOperator.s3.credentialSecretName')"
+          :resource-type="SECRET"
         />
       </div>
       <div class="col span-6">
diff --git a/shell/components/form/ResourceLabeledSelect.vue b/shell/components/form/ResourceLabeledSelect.vue
new file mode 100644
index 0000000000..0cec4a6532
--- /dev/null
+++ b/shell/components/form/ResourceLabeledSelect.vue
@@ -0,0 +1,188 @@
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { labelSelectPaginationFunction, LabelSelectPaginationFunctionOptions } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { LabelSelectPaginateFn, LabelSelectPaginateFnOptions, LabelSelectPaginateFnResponse } from '~/shell/types/components/labeledSelect';
+
+type PaginateTypeOverridesFn = (opts: LabelSelectPaginationFunctionOptions) => LabelSelectPaginationFunctionOptions;
+
+interface SharedSettings {
+  /**
+   * Provide specific LabelSelect options for this mode (paginated / not paginated)
+   */
+  labelSelectOptions?: { [key: string]: any },
+  /**
+   * Map the resources shown in LabelSelect
+   */
+  mapResult?: (resources: any[]) => any[]
+}
+
+/**
+ * Settings to use when the LabelSelect is paginating
+ */
+export interface ResourceLabeledSelectPaginateSettings extends SharedSettings {
+  /**
+   * Override the convience function which fetches a page of results
+   */
+  overrideRequest?: LabelSelectPaginateFn,
+  /**
+   * Override the default settings used in the convience function to fetch a page of results
+   */
+  requestSettings?: PaginateTypeOverridesFn,
+}
+
+/**
+ * Settings to use when the LabelSelect is fetching all resources (not paginating)
+ */
+export type ResourceLabeledSelectSettings = SharedSettings
+
+/**
+ * Force a specific mode
+ */
+export enum RESOURCE_LABEL_SELECT_MODE {
+  /**
+   * Fetch all resources
+   */
+  ALL_RESOURCES = 'ALL', // eslint-disable-line no-unused-vars
+  /**
+   * Determine if all resources are fetched given system settings
+   */
+  DYNAMIC = 'DYNAMIC', // eslint-disable-line no-unused-vars
+}
+
+/**
+ * Convience wrapper around the LabelSelect component to support pagination
+ *
+ * Handles
+ *
+ * 1) Conditionally enabling the pagination feature given system settings
+ * 2) Helper function to fetch the pagination result
+ *
+ * A number of ways can be provided to override the convienences (see props)
+ */
+export default defineComponent({
+  name: 'ResourceLabeledSelect',
+
+  components: { LabeledSelect },
+
+  props: {
+    /**
+     * Resource to show
+     */
+    resourceType: {
+      type:     String,
+      required: true
+    },
+
+    inStore: {
+      type:    String,
+      default: 'cluster',
+    },
+
+    /**
+     * Determine if pagination is used via settings (DYNAMIC) or hardcode off
+     */
+    paginateMode: {
+      type:    String as PropType<RESOURCE_LABEL_SELECT_MODE>,
+      default: RESOURCE_LABEL_SELECT_MODE.DYNAMIC,
+    },
+
+    /**
+     * Specific settings to use when we're showing all results
+     */
+    allResourcesSettings: {
+      type:    Object as PropType<ResourceLabeledSelectSettings>,
+      default: null,
+    },
+
+    /**
+     * Specific settings to use when we're showing paginated results
+     */
+    paginatedResourceSettings: {
+      type:    Object as PropType<ResourceLabeledSelectPaginateSettings>,
+      default: null,
+    },
+  },
+
+  data() {
+    return { paginate: false };
+  },
+
+  async fetch() {
+    switch (this.paginateMode) {
+    case RESOURCE_LABEL_SELECT_MODE.ALL_RESOURCES:
+      this.paginate = false;
+      break;
+    case RESOURCE_LABEL_SELECT_MODE.DYNAMIC:
+      this.paginate = paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: this.inStore, resource: { id: this.resourceType } });
+      break;
+    }
+
+    if (!this.paginate) {
+      await this.$store.dispatch(`${ this.inStore }/findAll`, { type: this.resourceType });
+    }
+  },
+
+  computed: {
+    labelSelectAttributes() {
+      return this.paginate ? {
+        ...this.$attrs,
+        ...this.paginatedResourceSettings?.labelSelectOptions || {}
+      } : {
+        ...this.$attrs,
+        ...this.allResourcesSettings?.labelSelectOptions || {}
+      };
+    },
+
+    allOfType() {
+      if (this.$fetchState.pending || this.paginate) {
+        return [];
+      }
+
+      const all = this.$store.getters[`${ this.inStore }/all`](this.resourceType);
+
+      return this.allResourcesSettings?.mapResult ? this.allResourcesSettings.mapResult(all) : all;
+    }
+  },
+
+  methods: {
+    /**
+     * Typeof LabelSelectPaginateFn
+     */
+    async paginateType(opts: LabelSelectPaginateFnOptions): Promise<LabelSelectPaginateFnResponse> {
+      if (this.paginatedResourceSettings?.overrideRequest) {
+        return await this.paginatedResourceSettings.overrideRequest(opts);
+      }
+
+      const { filter } = opts;
+      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+      const defaultOptions: LabelSelectPaginationFunctionOptions = {
+        opts,
+        filters,
+        type: this.resourceType,
+        ctx:  { getters: this.$store.getters, dispatch: this.$store.dispatch },
+        sort: [{ asc: true, field: 'metadata.name' }],
+      };
+      const options = this.paginatedResourceSettings?.requestSettings ? this.paginatedResourceSettings.requestSettings(defaultOptions) : defaultOptions;
+      const res = await labelSelectPaginationFunction(options);
+
+      return this.paginatedResourceSettings?.mapResult ? {
+        ...res,
+        page: this.paginatedResourceSettings.mapResult(res.page)
+      } : res;
+    },
+  },
+});
+</script>
+
+<template>
+  <LabeledSelect
+    v-bind="labelSelectAttributes"
+    :loading="$fetchState.pending"
+    :options="allOfType"
+    :paginate="paginateType"
+    v-on="$listeners"
+  />
+</template>
diff --git a/shell/components/form/SecretSelector.vue b/shell/components/form/SecretSelector.vue
index d336a02c84..1e8efdda0f 100644
--- a/shell/components/form/SecretSelector.vue
+++ b/shell/components/form/SecretSelector.vue
@@ -1,17 +1,16 @@
 <script>
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect';
 import { SECRET } from '@shell/config/types';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { SECRET_TYPES as TYPES } from '@shell/config/secret';
 import { PaginationParamFilter } from '@shell/types/store/pagination.types';
-import { labelSelectPaginationFunction } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
-import paginationUtils from '@shell/utils/pagination-utils';
 import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
 
 const NONE = '__[[NONE]]__';
 
 export default {
-  components: { LabeledSelect },
+  components: { LabeledSelect, ResourceLabeledSelect },
 
   props: {
     value: {
@@ -65,14 +64,31 @@ export default {
     }
   },
 
-  async fetch() {
-    if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
-      await this.$store.dispatch('cluster/findAll', { type: SECRET });
-    }
-  },
-
   data() {
-    return { page: null };
+    return {
+      secrets:            null,
+      SECRET,
+      allSecretsSettings: {
+        mapResult: (secrets) => {
+          const allSecretsInNamespace = secrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
+          const mappedSecrets = this.mapSecrets(allSecretsInNamespace.sort((a, b) => a.name.localeCompare(b.name)));
+
+          this.secrets = allSecretsInNamespace; // We need the key from the selected secret
+
+          return mappedSecrets;
+        }
+      },
+      paginateSecretsSetting: {
+        requestSettings: this.paginatePageOptions,
+        mapResult:       (secrets) => {
+          const mappedSecrets = this.mapSecrets(secrets);
+
+          this.secrets = secrets; // We need the key from the selected secret. When paginating we won't touch the store, so just pass back here
+
+          return mappedSecrets;
+        }
+      }
+    };
   },
 
   computed: {
@@ -102,26 +118,20 @@ export default {
         this.$emit('input', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: this.name, [this.keyKey]: key } } });
       }
     },
-    secrets() {
-      const allSecrets = this.$store.getters[`${ this.inStore }/all`](SECRET);
 
-      return allSecrets
-        .filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
-    },
-    secretNames() {
-      return this.mapSecrets(this.secrets.sort((a, b) => a.name.localeCompare(b.name)));
-    },
     keys() {
-      const secret = (this.page || this.secrets).find((secret) => secret.name === this.name) || {};
+      const secret = (this.secrets || []).find((secret) => secret.name === this.name) || {};
 
       return Object.keys(secret.data || {}).map((key) => ({
         label: key,
         value: key
       }));
     },
+
     isView() {
       return this.mode === _VIEW;
     },
+
     isKeyDisabled() {
       return !this.isView && (!this.name || this.name === NONE || this.disabled);
     }
@@ -156,11 +166,12 @@ export default {
     },
 
     /**
-     * @param [PaginateFnOptions] opts
-     * @returns PaginateFnResponse
+     * @param [LabelSelectPaginationFunctionOptions] opts
+     * @returns LabelSelectPaginationFunctionOptions
      */
-    async paginateSecrets(opts) {
-      const { filter } = opts;
+    paginatePageOptions(opts) {
+      const { opts: { filter } } = opts;
+
       const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
 
       filters.push(
@@ -168,24 +179,12 @@ export default {
         PaginationParamFilter.createSingleField({ field: 'metadata.fields.1', value: this.types.join(',') })
       );
 
-      const {
-        page,
-        ...rest
-      } = await labelSelectPaginationFunction({
-        opts,
+      return {
+        ...opts,
         filters,
         groupByNamespace: false,
-        type:             SECRET,
-        ctx:              { getters: this.$store.getters, dispatch: this.$store.dispatch },
         classify:         true,
         sort:             [{ asc: true, field: 'metadata.name' }],
-      });
-
-      this.page = page;
-
-      return {
-        ...rest,
-        page: this.mapSecrets(this.page)
       };
     },
   }
@@ -200,15 +199,16 @@ export default {
   >
     <div class="input-container">
       <!-- key by namespace to ensure label select current page is recreated on ns change -->
-      <LabeledSelect
+      <ResourceLabeledSelect
         :key="namespace"
         v-model="name"
         :disabled="!isView && disabled"
-        :options="secretNames"
-        :paginate="paginateSecrets"
-        :loading="$fetchState.pending"
         :label="secretNameLabel"
         :mode="mode"
+        :resource-type="SECRET"
+        :in-store="inStore"
+        :paginated-resource-settings="paginateSecretsSetting"
+        :all-resources-settings="allSecretsSettings"
       />
       <LabeledSelect
         v-if="showKeySelector"
diff --git a/shell/components/form/SimpleSecretSelector.vue b/shell/components/form/SimpleSecretSelector.vue
index de46342b46..ae36a0dbbd 100644
--- a/shell/components/form/SimpleSecretSelector.vue
+++ b/shell/components/form/SimpleSecretSelector.vue
@@ -18,31 +18,17 @@
    This would have avoided a lot of copy and paste
  */
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect';
 import { SECRET } from '@shell/config/types';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { TYPES } from '@shell/models/secret';
 import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
-import paginationUtils from '@shell/utils/pagination-utils';
 import { PaginationParamFilter } from '@shell/types/store/pagination.types';
-import { labelSelectPaginationFunction } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
 
 const NONE = '__[[NONE]]__';
 
 export default {
-  components: { LabeledSelect },
-
-  async fetch() {
-    if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
-      // Make sure secrets are in the store so that the secret
-      // selectors in the receiver config forms will have secrets
-      // to choose from.
-      const allSecrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
-
-      const allSecretsInNamespace = allSecrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
-
-      this.secrets = allSecretsInNamespace;
-    }
-  },
+  components: { LabeledSelect, ResourceLabeledSelect },
 
   props: {
     test:        { type: String, default: '' },
@@ -82,21 +68,37 @@ export default {
 
   data(props) {
     return {
-      secrets: [],
-      name:    props.initialName,
-      key:     props.initialKey,
-      none:    NONE,
-      page:    null,
+      secrets:            [],
+      name:               props.initialName,
+      key:                props.initialKey,
+      none:               NONE,
+      SECRET,
+      allSecretsSettings: {
+        mapResult: (secrets) => {
+          const allSecretsInNamespace = secrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
+          const mappedSecrets = this.mapSecrets(allSecretsInNamespace.sort((a, b) => a.name.localeCompare(b.name)));
+
+          this.secrets = allSecretsInNamespace; // We need the key from the selected secret
+
+          return mappedSecrets;
+        }
+      },
+      paginateSecretsSetting: {
+        requestSettings: this.paginatePageOptions,
+        mapResult:       (secrets) => {
+          const mappedSecrets = this.mapSecrets(secrets);
+
+          this.secrets = secrets; // We need the key from the selected secret. When paginating we won't touch the store, so just pass back here
+
+          return mappedSecrets;
+        }
+      }
     };
   },
 
   computed: {
-    secretNames() {
-      return this.mapSecrets(this.secrets.sort((a, b) => a.name.localeCompare(b.name)));
-    },
-
     keys() {
-      const secret = (this.page || this.secrets).find((secret) => secret.name === this.name) || {};
+      const secret = (this.secrets || []).find((secret) => secret.name === this.name) || {};
 
       return Object.keys(secret.data || {}).map((key) => ({
         label: key,
@@ -140,11 +142,12 @@ export default {
     },
 
     /**
-     * @param [PaginateFnOptions] opts
-     * @returns PaginateFnResponse
+     * @param [LabelSelectPaginationFunctionOptions] opts
+     * @returns LabelSelectPaginationFunctionOptions
      */
-    async paginateSecrets(opts) {
-      const { filter } = opts;
+    paginatePageOptions(opts) {
+      const { opts: { filter } } = opts;
+
       const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
 
       filters.push(
@@ -152,24 +155,12 @@ export default {
         PaginationParamFilter.createSingleField({ field: 'metadata.fields.1', value: this.types.join(',') })
       );
 
-      const {
-        page,
-        ...rest
-      } = await labelSelectPaginationFunction({
-        opts,
+      return {
+        ...opts,
         filters,
         groupByNamespace: false,
-        type:             SECRET,
-        ctx:              { getters: this.$store.getters, dispatch: this.$store.dispatch },
         classify:         true,
         sort:             [{ asc: true, field: 'metadata.name' }],
-      });
-
-      this.page = page;
-
-      return {
-        ...rest,
-        page: this.mapSecrets(this.page)
       };
     },
 
@@ -194,15 +185,16 @@ export default {
 <template>
   <div class="secret-selector show-key-selector">
     <div class="input-container">
-      <LabeledSelect
+      <ResourceLabeledSelect
         v-model="name"
         class="col span-6"
         :disabled="!isView && disabled"
         :loading="$fetchState.pending"
-        :options="secretNames"
-        :paginate="paginateSecrets"
         :label="secretNameLabel"
         :mode="mode"
+        :resource-type="SECRET"
+        :paginated-resource-settings="paginateSecretsSetting"
+        :all-resources-settings="allSecretsSettings"
         @selecting="updateSecretName"
       />
       <LabeledSelect
diff --git a/shell/components/form/labeled-select-utils/labeled-select.utils.ts b/shell/components/form/labeled-select-utils/labeled-select.utils.ts
index 2c118e5622..e47761ad7e 100644
--- a/shell/components/form/labeled-select-utils/labeled-select.utils.ts
+++ b/shell/components/form/labeled-select-utils/labeled-select.utils.ts
@@ -1,7 +1,7 @@
 import { LabelSelectPaginateFnOptions, LabelSelectPaginateFnResponse } from '@shell/types/components/labeledSelect';
 import { PaginationArgs, PaginationParam, PaginationSort } from '@shell/types/store/pagination.types';
 
-interface lSPFOptions<T> {
+export interface LabelSelectPaginationFunctionOptions<T = any> {
   opts: LabelSelectPaginateFnOptions<T>,
   /**
    * Resource type
@@ -31,7 +31,7 @@ interface lSPFOptions<T> {
   /**
    * Convert the results from JSON object to Rancher model class instance
    */
-  classify: boolean,
+  classify?: boolean,
 }
 
 /**
@@ -46,7 +46,7 @@ export async function labelSelectPaginationFunction<T>({
   store = 'cluster',
   groupByNamespace = true,
   classify = false,
-}: lSPFOptions<T>): Promise<LabelSelectPaginateFnResponse<T>> {
+}: LabelSelectPaginationFunctionOptions<T>): Promise<LabelSelectPaginateFnResponse<T>> {
   const {
     pageContent, page, pageSize, resetPage
   } = opts;
diff --git a/shell/edit/cis.cattle.io.clusterscanbenchmark.vue b/shell/edit/cis.cattle.io.clusterscanbenchmark.vue
index c0367eeda6..d907ca99ff 100644
--- a/shell/edit/cis.cattle.io.clusterscanbenchmark.vue
+++ b/shell/edit/cis.cattle.io.clusterscanbenchmark.vue
@@ -2,19 +2,18 @@
 import createEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import { mapGetters } from 'vuex';
 import { CONFIG_MAP } from '@shell/config/types';
 import { PaginationParamFilter } from '@shell/types/store/pagination.types';
-import { labelSelectPaginationFunction } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
-import paginationUtils from '@shell/utils/pagination-utils';
 
 const providers = ['aks', 'docker', 'eks', 'gke', 'k3s', 'minikube', 'rke-windows', 'rke', 'rke2'];
 
 export default {
   components: {
-    CruResource, LabeledSelect, LabeledInput, NameNsDescription
+    CruResource, LabeledSelect, ResourceLabeledSelect, LabeledInput, NameNsDescription
   },
 
   mixins: [createEditView],
@@ -33,18 +32,19 @@ export default {
 
   },
 
-  async fetch() {
-    if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: CONFIG_MAP } })) {
-      this.configMaps = await this.$store.dispatch('cluster/findAll', { type: CONFIG_MAP });
-    }
-  },
-
   data() {
     if (!this.value.spec) {
       this.$set(this.value, 'spec', {});
     }
 
-    return { configMaps: [], providers };
+    return {
+      CONFIG_MAP,
+      providers,
+      configMapPaginateSettings: {
+        labelSelectOptions: { 'get-option-label': (opt) => opt?.metadata?.name || opt.id || opt },
+        requestSettings:    this.pageRequestSettings,
+      }
+    };
   },
 
   computed: {
@@ -67,26 +67,24 @@ export default {
 
   methods: {
     /**
-     * @param [PaginateFnOptions] opts
-     * @returns PaginateFnResponse
+     * @param [LabelSelectPaginationFunctionOptions] opts
+     * @returns LabelSelectPaginationFunctionOptions
      */
-    async paginateConfigMap(opts) {
-      const { filter } = opts;
-      const filters = !!filter ? [PaginationParamFilter.createMultipleFields([
-        {
-          field: 'metadata.name', value: filter, equals: true
-        },
-        {
-          field: 'metadata.namespace', value: filter, equals: true
-        },
-      ])] : [];
+    pageRequestSettings(opts) {
+      const { opts: { filter } } = opts;
 
-      return labelSelectPaginationFunction({
-        opts,
-        filters,
-        type: CONFIG_MAP,
-        ctx:  { getters: this.$store.getters, dispatch: this.$store.dispatch }
-      });
+      return {
+        ...opts,
+        classify: true,
+        filters:  !!filter ? [PaginationParamFilter.createMultipleFields([
+          {
+            field: 'metadata.name', value: filter, equals: true
+          },
+          {
+            field: 'metadata.namespace', value: filter, equals: true
+          },
+        ])] : []
+      };
     },
   }
 };
@@ -121,15 +119,15 @@ export default {
         />
       </div>
       <div class="col span-6">
-        <LabeledSelect
+        <ResourceLabeledSelect
           v-model="customConfigMap"
           :clearable="true"
-          :get-option-label="opt=>canPaginate ? (opt.metadata.name || '') : opt.id"
           option-key="id"
-          :options="configMaps"
+          option-label="id"
           :mode="mode"
-          :paginate="paginateConfigMap"
           :label="t('cis.customConfigMap')"
+          :resource-type="CONFIG_MAP"
+          :paginated-resource-settings="configMapPaginateSettings"
         />
       </div>
     </div>

From 92121161cfaca31af295873bad4503716ca906d2 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Mon, 27 May 2024 16:00:43 +0100
Subject: [PATCH 49/71] fix unit test

---
 shell/chart/__tests__/S3.test.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/shell/chart/__tests__/S3.test.ts b/shell/chart/__tests__/S3.test.ts
index e7f02f0df7..2390364ca4 100644
--- a/shell/chart/__tests__/S3.test.ts
+++ b/shell/chart/__tests__/S3.test.ts
@@ -9,8 +9,14 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe('rancher-backup: S3', () => {
-  const mockStore = { getters: { 'i18n/t': (text: string) => text, t: (text: string) => text } };
-  const wrapper = mount(S3, { mocks: { $store: mockStore } });
+  const mockStore = {
+    getters: {
+      'i18n/t':      (text: string) => text,
+      t:             (text: string) => text,
+      'cluster/all': () => [],
+    }
+  };
+  const wrapper = mount(S3, { mocks: { $store: mockStore, $fetchState: { pending: false } } });
 
   it('should emit invalid when form is not filled', () => {
     expect(wrapper.emitted('valid')).toHaveLength(1);

From dfef18770e8ce742e2d2937f52302e53b114c581 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 28 May 2024 14:49:12 +0100
Subject: [PATCH 50/71] Updates following review

---
 .../machine-config/harvester.vue               |  2 +-
 .../components/form/ResourceLabeledSelect.vue  |  2 +-
 .../form/SelectOrCreateAuthSecret.vue          |  2 +-
 .../labeled-select-pagination.ts               | 18 +++++++++++++++---
 shell/components/formatter/IngressTarget.vue   |  2 +-
 shell/components/nav/NamespaceFilter.vue       |  5 +----
 shell/detail/networking.k8s.io.ingress.vue     |  4 ++--
 shell/detail/node.vue                          |  2 +-
 shell/edit/networking.k8s.io.ingress/Rules.vue |  2 +-
 shell/edit/networking.k8s.io.ingress/index.vue |  2 +-
 shell/edit/resources.cattle.io.backup.vue      |  2 +-
 shell/edit/resources.cattle.io.restore.vue     |  2 +-
 shell/edit/serviceaccount.vue                  |  2 +-
 shell/mixins/resource-fetch-api-pagination.js  |  5 +----
 .../_cluster/manager/cloudCredential/index.vue |  2 +-
 shell/plugins/dashboard-store/getters.js       |  7 +++++++
 16 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/pkg/harvester-manager/machine-config/harvester.vue b/pkg/harvester-manager/machine-config/harvester.vue
index f997eb062d..9dc16f07c7 100644
--- a/pkg/harvester-manager/machine-config/harvester.vue
+++ b/pkg/harvester-manager/machine-config/harvester.vue
@@ -135,7 +135,7 @@ export default {
       if (clusterId) {
         let configMapsUrl = `${ url }/${ CONFIG_MAP }s`;
 
-        if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: CONFIG_MAP } })) {
+        if (this.$store.getters[`cluster/paginationEnabled`](CONFIG_MAP)) {
           const pagination = new PaginationArgs({
             page:     1,
             pageSize: -1,
diff --git a/shell/components/form/ResourceLabeledSelect.vue b/shell/components/form/ResourceLabeledSelect.vue
index 0cec4a6532..90f4654847 100644
--- a/shell/components/form/ResourceLabeledSelect.vue
+++ b/shell/components/form/ResourceLabeledSelect.vue
@@ -116,7 +116,7 @@ export default defineComponent({
       this.paginate = false;
       break;
     case RESOURCE_LABEL_SELECT_MODE.DYNAMIC:
-      this.paginate = paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: this.inStore, resource: { id: this.resourceType } });
+      this.paginate = this.$store.getters[`${ this.inStore }/paginationEnabled`](this.resourceType);
       break;
     }
 
diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index a3181cd331..0b078c13a1 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -143,7 +143,7 @@ export default {
 
   async fetch() {
     if ( (this.allowSsh || this.allowBasic || this.allowRke) && this.$store.getters[`${ this.inStore }/schemaFor`](SECRET) ) {
-      if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
+      if (this.$store.getters[`${ this.inStore }/paginationEnabled`](SECRET)) {
         // Filter results via api (because we shouldn't be fetching them all...)
         this.filteredSecrets = await this.filterSecretsByApi();
       } else {
diff --git a/shell/components/form/labeled-select-utils/labeled-select-pagination.ts b/shell/components/form/labeled-select-utils/labeled-select-pagination.ts
index 3011a94840..605fa21965 100644
--- a/shell/components/form/labeled-select-utils/labeled-select-pagination.ts
+++ b/shell/components/form/labeled-select-utils/labeled-select-pagination.ts
@@ -2,7 +2,6 @@ import { debounce } from 'lodash';
 import { PropType, defineComponent } from 'vue';
 import { ComputedOptions, MethodOptions } from 'vue/types/v3-component-options';
 import { LabelSelectPaginateFn, LABEL_SELECT_NOT_OPTION_KINDS, LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
-import paginationUtils from '@shell/utils/pagination-utils';
 
 interface Props {
   paginate?: LabelSelectPaginateFn
@@ -46,7 +45,20 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
     paginate: {
       default: null,
       type:    Function as PropType<LabelSelectPaginateFn>,
-    }
+    },
+
+    inStore: {
+      type:    String,
+      default: 'cluster',
+    },
+
+    /**
+     * Resource to show
+     */
+    resourceType: {
+      type:    String,
+      default: null,
+    },
   },
 
   data(): Data {
@@ -74,7 +86,7 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
 
   computed: {
     canPaginate() {
-      return !!this.paginate && paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster' });
+      return !!this.paginate && this.$store.getters[`${ this.inStore }/paginationEnabled`](this.resourceType); // TODO: RC store
     },
 
     canLoadMore() {
diff --git a/shell/components/formatter/IngressTarget.vue b/shell/components/formatter/IngressTarget.vue
index cce75e070c..c17bb64820 100644
--- a/shell/components/formatter/IngressTarget.vue
+++ b/shell/components/formatter/IngressTarget.vue
@@ -21,7 +21,7 @@ export default {
   async fetch() {
     let promises = [];
 
-    if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster' })) {
+    if (!this.$store.getters[`cluster/paginationEnabled`]()) {
       // This is only used by shell/models/networking.k8s.io.ingress.js `targetTo`, where we do some dodgy matching of workloads with name 'ingress-'
       promises = Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type }));
     }
diff --git a/shell/components/nav/NamespaceFilter.vue b/shell/components/nav/NamespaceFilter.vue
index 61ce3cdf73..f53233d24d 100644
--- a/shell/components/nav/NamespaceFilter.vue
+++ b/shell/components/nav/NamespaceFilter.vue
@@ -55,10 +55,7 @@ export default {
     },
 
     paginatedListFilterMode() {
-      return paginationUtils.isEnabled({ rootGetters: this.$store.getters }, {
-        store:    this.currentProduct.inStore,
-        resource: { id: this.$route.params?.resource }
-      }) ? paginationUtils.validNsProjectFilters : null;
+      return this.$store.getters[`${ this.currentProduct.inStore }/paginationEnabled`](this.$route.params?.resource) ? paginationUtils.validNsProjectFilters : null;
     },
 
     filtered() {
diff --git a/shell/detail/networking.k8s.io.ingress.vue b/shell/detail/networking.k8s.io.ingress.vue
index eece467c90..3f78d479bd 100644
--- a/shell/detail/networking.k8s.io.ingress.vue
+++ b/shell/detail/networking.k8s.io.ingress.vue
@@ -23,13 +23,13 @@ export default {
       resourceFields: this.schema.fetchResourceFields(),
     };
 
-    if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
+    if (this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.value.metadata.namespace,
         pagination: new PaginationArgs({
           pageSize: -1,
           filters:  PaginationParamFilter.createSingleField({
-            field: 'metadata.fields.1', // TODO: RC test all of these references
+            field: 'metadata.fields.1',
             value: TYPES.TLS
           })
         }),
diff --git a/shell/detail/node.vue b/shell/detail/node.vue
index 53dd0e8733..1b21322c72 100644
--- a/shell/detail/node.vue
+++ b/shell/detail/node.vue
@@ -48,7 +48,7 @@ export default {
   },
 
   async fetch() {
-    this.filterByApi = paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: POD } });
+    this.filterByApi = this.$store.getters[`cluster/paginationEnabled`](POD);
 
     if (this.filterByApi) {
       // Only get pods associated with this node. The actual values used are from a get all in node model `pods` getter (this works as it just gets all...)
diff --git a/shell/edit/networking.k8s.io.ingress/Rules.vue b/shell/edit/networking.k8s.io.ingress/Rules.vue
index 218c675dca..597d49f773 100644
--- a/shell/edit/networking.k8s.io.ingress/Rules.vue
+++ b/shell/edit/networking.k8s.io.ingress/Rules.vue
@@ -46,7 +46,7 @@ export default {
   },
 
   async fetch() {
-    if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster' })) {
+    if (!this.$store.getters[`cluster/paginationEnabled`]()) {
       // This is only used by shell/models/networking.k8s.io.ingress.js `targetTo`, where we do some dodgy matching of workloads with name 'ingress-'
       await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })));
     }
diff --git a/shell/edit/networking.k8s.io.ingress/index.vue b/shell/edit/networking.k8s.io.ingress/index.vue
index 28b5585406..af52043986 100644
--- a/shell/edit/networking.k8s.io.ingress/index.vue
+++ b/shell/edit/networking.k8s.io.ingress/index.vue
@@ -57,7 +57,7 @@ export default {
       ingressResourceFields: this.schema.fetchResourceFields(),
     };
 
-    this.filterByApi = paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } });
+    this.filterByApi = this.$store.getters[`cluster/paginationEnabled`](SECRET);
 
     if (this.filterByApi) {
       promises.filteredSecrets = this.filterSecretsByApi();
diff --git a/shell/edit/resources.cattle.io.backup.vue b/shell/edit/resources.cattle.io.backup.vue
index 5ce848ca5a..824334a8b8 100644
--- a/shell/edit/resources.cattle.io.backup.vue
+++ b/shell/edit/resources.cattle.io.backup.vue
@@ -63,7 +63,7 @@ export default {
 
     this.chartNamespace = BRORelease?.spec.namespace || '';
 
-    if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
+    if (this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.chartNamespace,
         pagination: new PaginationArgs({
diff --git a/shell/edit/resources.cattle.io.restore.vue b/shell/edit/resources.cattle.io.restore.vue
index 14a53cfab5..0d49c6a7d2 100644
--- a/shell/edit/resources.cattle.io.restore.vue
+++ b/shell/edit/resources.cattle.io.restore.vue
@@ -60,7 +60,7 @@ export default {
 
     this.chartNamespace = BRORelease?.spec.namespace || '';
 
-    if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
+    if (this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.chartNamespace,
         pagination: new PaginationArgs({
diff --git a/shell/edit/serviceaccount.vue b/shell/edit/serviceaccount.vue
index ff7572fa47..1b9560e413 100644
--- a/shell/edit/serviceaccount.vue
+++ b/shell/edit/serviceaccount.vue
@@ -38,7 +38,7 @@ export default {
   },
 
   async fetch() {
-    this.filterByApi = paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } });
+    this.filterByApi = this.$store.getters[`cluster/paginationEnabled`](SECRET);
 
     if (this.filterByApi) {
       this.filteredSecrets = await this.filterSecretsByApi();
diff --git a/shell/mixins/resource-fetch-api-pagination.js b/shell/mixins/resource-fetch-api-pagination.js
index d1ecb6f911..c1b6057d96 100644
--- a/shell/mixins/resource-fetch-api-pagination.js
+++ b/shell/mixins/resource-fetch-api-pagination.js
@@ -165,10 +165,7 @@ export default {
         return;
       }
 
-      return this.resource && paginationUtils.isEnabled({ rootGetters: this.$store.getters }, {
-        store:    this.currentProduct?.inStore,
-        resource: { id: this.resource.id || this.resource }
-      });
+      return this.$store.getters[`${ this.currentProduct?.inStore }/paginationEnabled`](this.resource.id || this.resource);
     },
 
     paginationResult() {
diff --git a/shell/pages/c/_cluster/manager/cloudCredential/index.vue b/shell/pages/c/_cluster/manager/cloudCredential/index.vue
index 4c388c617a..4311997136 100644
--- a/shell/pages/c/_cluster/manager/cloudCredential/index.vue
+++ b/shell/pages/c/_cluster/manager/cloudCredential/index.vue
@@ -19,7 +19,7 @@ export default {
   },
 
   async fetch() {
-    if (this.$store.getters['management/schemaFor'](SECRET) && !paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
+    if (this.$store.getters['management/schemaFor'](SECRET) && !this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       // Having secrets allows showing the public portion of more types but not all users can see them.
       await this.$store.dispatch('management/findAll', { type: SECRET });
     }
diff --git a/shell/plugins/dashboard-store/getters.js b/shell/plugins/dashboard-store/getters.js
index 73e46715c9..475428f28c 100644
--- a/shell/plugins/dashboard-store/getters.js
+++ b/shell/plugins/dashboard-store/getters.js
@@ -443,5 +443,12 @@ export default {
     }
 
     return undefined;
+  },
+
+  paginationEnabled: (state, getters, rootState, rootGetters) => (type = null) => {
+    const store = state.config.namespace;
+    const resource = type ? { id: type } : null;
+
+    return paginationUtils.isEnabled({ rootGetters }, { store, resource });
   }
 };

From f1fb181f9a3c3b8d4658279f372c43b41e14ba3b Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 28 May 2024 16:35:57 +0100
Subject: [PATCH 51/71] Remove workload health until #10417 is resolved

---
 shell/list/workload.vue                       | 22 +++++++++++++++++++
 shell/mixins/resource-fetch-api-pagination.js |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/shell/list/workload.vue b/shell/list/workload.vue
index 5940ea1da8..e8373b79e4 100644
--- a/shell/list/workload.vue
+++ b/shell/list/workload.vue
@@ -4,6 +4,7 @@ import {
   WORKLOAD_TYPES, SCHEMA, NODE, POD, LIST_WORKLOAD_TYPES
 } from '@shell/config/types';
 import ResourceFetch from '@shell/mixins/resource-fetch';
+import { WORKLOAD_HEALTH_SCALE } from '@shell/config/table-headers';
 
 const schema = {
   id:         'workload',
@@ -93,6 +94,10 @@ export default {
       return this.$route.params.resource === schema.id;
     },
 
+    paginationEnabled() {
+      return !this.allTypes && this.$store.getters[`cluster/paginationEnabled`]();
+    },
+
     schema() {
       const { params:{ resource:type } } = this.$route;
 
@@ -120,6 +125,17 @@ export default {
 
       return out;
     },
+
+    headers() {
+      const headers = this.$store.getters['type-map/headersFor'](this.schema, false);
+
+      if (this.paginationEnabled) {
+        // See https://github.com/rancher/dashboard/issues/10417, health comes from selectors applied locally to all pods (bad)
+        return headers.filter((h) => h.name !== WORKLOAD_HEALTH_SCALE.name);
+      }
+
+      return headers;
+    }
   },
 
   // All of the resources that we will load that we need for the loading indicator
@@ -129,6 +145,11 @@ export default {
 
   methods: {
     loadHeathResources() {
+      // See https://github.com/rancher/dashboard/issues/10417, health comes from selectors applied locally to all pods (bad)
+      if (this.paginationEnabled) {
+        return;
+      }
+
       // Fetch these in the background to populate workload health
       if ( this.allTypes ) {
         this.$fetchType(POD);
@@ -167,6 +188,7 @@ export default {
   <ResourceTable
     :loading="$fetchState.pending"
     :schema="schema"
+    :headers="headers"
     :rows="filteredRows"
     :overflow-y="true"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
diff --git a/shell/mixins/resource-fetch-api-pagination.js b/shell/mixins/resource-fetch-api-pagination.js
index c1b6057d96..39ec76d6ec 100644
--- a/shell/mixins/resource-fetch-api-pagination.js
+++ b/shell/mixins/resource-fetch-api-pagination.js
@@ -165,7 +165,7 @@ export default {
         return;
       }
 
-      return this.$store.getters[`${ this.currentProduct?.inStore }/paginationEnabled`](this.resource.id || this.resource);
+      return this.resource && this.$store.getters[`${ this.currentProduct?.inStore }/paginationEnabled`](this.resource.id || this.resource);
     },
 
     paginationResult() {

From 42fbe1c511f3dae3a034a27c2f3af82a9ae49375 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 28 May 2024 14:49:12 +0100
Subject: [PATCH 52/71] Updates following review

---
 .../machine-config/harvester.vue               |  5 ++---
 shell/chart/__tests__/S3.test.ts               |  7 ++++---
 .../components/form/ResourceLabeledSelect.vue  |  3 +--
 .../form/SelectOrCreateAuthSecret.vue          |  3 +--
 .../labeled-select-pagination.ts               | 18 +++++++++++++++---
 shell/components/formatter/IngressTarget.vue   |  3 +--
 shell/components/nav/NamespaceFilter.vue       |  5 +----
 shell/config/product/explorer.js               |  2 +-
 shell/detail/networking.k8s.io.ingress.vue     |  5 ++---
 shell/detail/node.vue                          |  3 +--
 shell/edit/networking.k8s.io.ingress/Rules.vue |  3 +--
 shell/edit/networking.k8s.io.ingress/index.vue |  3 +--
 shell/edit/resources.cattle.io.backup.vue      |  3 +--
 shell/edit/resources.cattle.io.restore.vue     |  3 +--
 shell/edit/serviceaccount.vue                  |  3 +--
 shell/mixins/resource-fetch-api-pagination.js  |  5 +----
 .../_cluster/manager/cloudCredential/index.vue |  3 +--
 shell/plugins/dashboard-store/getters.js       |  7 +++++++
 shell/plugins/steve/subscribe.js               |  1 -
 19 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/pkg/harvester-manager/machine-config/harvester.vue b/pkg/harvester-manager/machine-config/harvester.vue
index f997eb062d..da4c8528a0 100644
--- a/pkg/harvester-manager/machine-config/harvester.vue
+++ b/pkg/harvester-manager/machine-config/harvester.vue
@@ -40,8 +40,7 @@ import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import { isValidMac } from '@shell/utils/validators/cidr';
 import { HCI as HCI_ANNOTATIONS, STORAGE } from '@shell/config/labels-annotations';
 import { isEqual } from 'lodash';
-import paginationUtils from '@shell/utils/pagination-utils';
-import { PaginationArgs, PaginationFilterField, PaginationParam, PaginationParamFilter } from '~/shell/types/store/pagination.types';
+import { PaginationArgs, PaginationFilterField, PaginationParamFilter } from '~/shell/types/store/pagination.types';
 
 const STORAGE_NETWORK = 'storage-network.settings.harvesterhci.io';
 
@@ -135,7 +134,7 @@ export default {
       if (clusterId) {
         let configMapsUrl = `${ url }/${ CONFIG_MAP }s`;
 
-        if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: CONFIG_MAP } })) {
+        if (this.$store.getters[`cluster/paginationEnabled`](CONFIG_MAP)) {
           const pagination = new PaginationArgs({
             page:     1,
             pageSize: -1,
diff --git a/shell/chart/__tests__/S3.test.ts b/shell/chart/__tests__/S3.test.ts
index 2390364ca4..9b53b36de0 100644
--- a/shell/chart/__tests__/S3.test.ts
+++ b/shell/chart/__tests__/S3.test.ts
@@ -11,9 +11,10 @@ localVue.use(Vuex);
 describe('rancher-backup: S3', () => {
   const mockStore = {
     getters: {
-      'i18n/t':      (text: string) => text,
-      t:             (text: string) => text,
-      'cluster/all': () => [],
+      'i18n/t':                    (text: string) => text,
+      t:                           (text: string) => text,
+      'cluster/all':               () => [],
+      'cluster/paginationEnabled': () => false
     }
   };
   const wrapper = mount(S3, { mocks: { $store: mockStore, $fetchState: { pending: false } } });
diff --git a/shell/components/form/ResourceLabeledSelect.vue b/shell/components/form/ResourceLabeledSelect.vue
index 0cec4a6532..8ddd04803d 100644
--- a/shell/components/form/ResourceLabeledSelect.vue
+++ b/shell/components/form/ResourceLabeledSelect.vue
@@ -3,7 +3,6 @@ import { PropType, defineComponent } from 'vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import { PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { labelSelectPaginationFunction, LabelSelectPaginationFunctionOptions } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
-import paginationUtils from '@shell/utils/pagination-utils';
 import { LabelSelectPaginateFn, LabelSelectPaginateFnOptions, LabelSelectPaginateFnResponse } from '~/shell/types/components/labeledSelect';
 
 type PaginateTypeOverridesFn = (opts: LabelSelectPaginationFunctionOptions) => LabelSelectPaginationFunctionOptions;
@@ -116,7 +115,7 @@ export default defineComponent({
       this.paginate = false;
       break;
     case RESOURCE_LABEL_SELECT_MODE.DYNAMIC:
-      this.paginate = paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: this.inStore, resource: { id: this.resourceType } });
+      this.paginate = this.$store.getters[`${ this.inStore }/paginationEnabled`](this.resourceType);
       break;
     }
 
diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index a3181cd331..4fb1b9bb64 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -7,7 +7,6 @@ import { SECRET_TYPES } from '@shell/config/secret';
 import { base64Encode } from '@shell/utils/crypto';
 import { addObjects, insertAt } from '@shell/utils/array';
 import { sortBy } from '@shell/utils/sort';
-import paginationUtils from '@shell/utils/pagination-utils';
 import {
   PaginationArgs,
   PaginationFilterField,
@@ -143,7 +142,7 @@ export default {
 
   async fetch() {
     if ( (this.allowSsh || this.allowBasic || this.allowRke) && this.$store.getters[`${ this.inStore }/schemaFor`](SECRET) ) {
-      if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
+      if (this.$store.getters[`${ this.inStore }/paginationEnabled`](SECRET)) {
         // Filter results via api (because we shouldn't be fetching them all...)
         this.filteredSecrets = await this.filterSecretsByApi();
       } else {
diff --git a/shell/components/form/labeled-select-utils/labeled-select-pagination.ts b/shell/components/form/labeled-select-utils/labeled-select-pagination.ts
index 3011a94840..56d2911189 100644
--- a/shell/components/form/labeled-select-utils/labeled-select-pagination.ts
+++ b/shell/components/form/labeled-select-utils/labeled-select-pagination.ts
@@ -2,7 +2,6 @@ import { debounce } from 'lodash';
 import { PropType, defineComponent } from 'vue';
 import { ComputedOptions, MethodOptions } from 'vue/types/v3-component-options';
 import { LabelSelectPaginateFn, LABEL_SELECT_NOT_OPTION_KINDS, LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
-import paginationUtils from '@shell/utils/pagination-utils';
 
 interface Props {
   paginate?: LabelSelectPaginateFn
@@ -46,7 +45,20 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
     paginate: {
       default: null,
       type:    Function as PropType<LabelSelectPaginateFn>,
-    }
+    },
+
+    inStore: {
+      type:    String,
+      default: 'cluster',
+    },
+
+    /**
+     * Resource to show
+     */
+    resourceType: {
+      type:    String,
+      default: null,
+    },
   },
 
   data(): Data {
@@ -74,7 +86,7 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
 
   computed: {
     canPaginate() {
-      return !!this.paginate && paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster' });
+      return !!this.paginate && this.$store.getters[`${ this.inStore }/paginationEnabled`](this.resourceType);
     },
 
     canLoadMore() {
diff --git a/shell/components/formatter/IngressTarget.vue b/shell/components/formatter/IngressTarget.vue
index cce75e070c..b39b653fad 100644
--- a/shell/components/formatter/IngressTarget.vue
+++ b/shell/components/formatter/IngressTarget.vue
@@ -1,7 +1,6 @@
 <script>
 import { INGRESS, WORKLOAD_TYPES } from '@shell/config/types';
 import IngressFullPath from '@shell/components/formatter/IngressFullPath';
-import paginationUtils from '@shell/utils/pagination-utils';
 
 export default {
   components: { IngressFullPath },
@@ -21,7 +20,7 @@ export default {
   async fetch() {
     let promises = [];
 
-    if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster' })) {
+    if (!this.$store.getters[`cluster/paginationEnabled`]()) {
       // This is only used by shell/models/networking.k8s.io.ingress.js `targetTo`, where we do some dodgy matching of workloads with name 'ingress-'
       promises = Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type }));
     }
diff --git a/shell/components/nav/NamespaceFilter.vue b/shell/components/nav/NamespaceFilter.vue
index 61ce3cdf73..f53233d24d 100644
--- a/shell/components/nav/NamespaceFilter.vue
+++ b/shell/components/nav/NamespaceFilter.vue
@@ -55,10 +55,7 @@ export default {
     },
 
     paginatedListFilterMode() {
-      return paginationUtils.isEnabled({ rootGetters: this.$store.getters }, {
-        store:    this.currentProduct.inStore,
-        resource: { id: this.$route.params?.resource }
-      }) ? paginationUtils.validNsProjectFilters : null;
+      return this.$store.getters[`${ this.currentProduct.inStore }/paginationEnabled`](this.$route.params?.resource) ? paginationUtils.validNsProjectFilters : null;
     },
 
     filtered() {
diff --git a/shell/config/product/explorer.js b/shell/config/product/explorer.js
index d73794c611..9a8eb9e189 100644
--- a/shell/config/product/explorer.js
+++ b/shell/config/product/explorer.js
@@ -28,7 +28,7 @@ import {
 } from '@shell/config/pagination-table-headers';
 
 import { COLUMN_BREAKPOINTS } from '@shell/types/store/type-map';
-import { STEVE_CACHE } from 'store/features';
+import { STEVE_CACHE } from '@shell/store/features';
 
 export const NAME = 'explorer';
 
diff --git a/shell/detail/networking.k8s.io.ingress.vue b/shell/detail/networking.k8s.io.ingress.vue
index eece467c90..9a7c7dc637 100644
--- a/shell/detail/networking.k8s.io.ingress.vue
+++ b/shell/detail/networking.k8s.io.ingress.vue
@@ -6,7 +6,6 @@ import Rules from '@shell/edit/networking.k8s.io.ingress/Rules';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import Tab from '@shell/components/Tabbed/Tab';
 import { SECRET_TYPES as TYPES } from '@shell/config/secret';
-import paginationUtils from '@shell/utils/pagination-utils';
 import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
@@ -23,13 +22,13 @@ export default {
       resourceFields: this.schema.fetchResourceFields(),
     };
 
-    if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
+    if (this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.value.metadata.namespace,
         pagination: new PaginationArgs({
           pageSize: -1,
           filters:  PaginationParamFilter.createSingleField({
-            field: 'metadata.fields.1', // TODO: RC test all of these references
+            field: 'metadata.fields.1',
             value: TYPES.TLS
           })
         }),
diff --git a/shell/detail/node.vue b/shell/detail/node.vue
index 53dd0e8733..ac728b9ef7 100644
--- a/shell/detail/node.vue
+++ b/shell/detail/node.vue
@@ -19,7 +19,6 @@ import { mapGetters } from 'vuex';
 import { allDashboardsExist } from '@shell/utils/grafana';
 import Loading from '@shell/components/Loading';
 import metricPoller from '@shell/mixins/metric-poller';
-import paginationUtils from '@shell/utils/pagination-utils';
 import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 const NODE_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-node-detail-1/rancher-node-detail?orgId=1';
@@ -48,7 +47,7 @@ export default {
   },
 
   async fetch() {
-    this.filterByApi = paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: POD } });
+    this.filterByApi = this.$store.getters[`cluster/paginationEnabled`](POD);
 
     if (this.filterByApi) {
       // Only get pods associated with this node. The actual values used are from a get all in node model `pods` getter (this works as it just gets all...)
diff --git a/shell/edit/networking.k8s.io.ingress/Rules.vue b/shell/edit/networking.k8s.io.ingress/Rules.vue
index 218c675dca..0661639b35 100644
--- a/shell/edit/networking.k8s.io.ingress/Rules.vue
+++ b/shell/edit/networking.k8s.io.ingress/Rules.vue
@@ -6,7 +6,6 @@ import { _VIEW } from '@shell/config/query-params';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { random32 } from '@shell/utils/string';
 import Rule from './Rule';
-import paginationUtils from '@shell/utils/pagination-utils';
 
 export default {
   components: {
@@ -46,7 +45,7 @@ export default {
   },
 
   async fetch() {
-    if (!paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster' })) {
+    if (!this.$store.getters[`cluster/paginationEnabled`]()) {
       // This is only used by shell/models/networking.k8s.io.ingress.js `targetTo`, where we do some dodgy matching of workloads with name 'ingress-'
       await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })));
     }
diff --git a/shell/edit/networking.k8s.io.ingress/index.vue b/shell/edit/networking.k8s.io.ingress/index.vue
index 28b5585406..6be7926e67 100644
--- a/shell/edit/networking.k8s.io.ingress/index.vue
+++ b/shell/edit/networking.k8s.io.ingress/index.vue
@@ -16,7 +16,6 @@ import Certificates from './Certificates';
 import Rules from './Rules';
 import IngressClass from './IngressClass';
 import Loading from '@shell/components/Loading';
-import paginationUtils from '@shell/utils/pagination-utils';
 import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
@@ -57,7 +56,7 @@ export default {
       ingressResourceFields: this.schema.fetchResourceFields(),
     };
 
-    this.filterByApi = paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } });
+    this.filterByApi = this.$store.getters[`cluster/paginationEnabled`](SECRET);
 
     if (this.filterByApi) {
       promises.filteredSecrets = this.filterSecretsByApi();
diff --git a/shell/edit/resources.cattle.io.backup.vue b/shell/edit/resources.cattle.io.backup.vue
index 5ce848ca5a..f8c78de01d 100644
--- a/shell/edit/resources.cattle.io.backup.vue
+++ b/shell/edit/resources.cattle.io.backup.vue
@@ -17,7 +17,6 @@ import { NAMESPACE, _VIEW } from '@shell/config/query-params';
 import { sortBy } from '@shell/utils/sort';
 import { get } from '@shell/utils/object';
 import { formatEncryptionSecretNames } from '@shell/utils/formatter';
-import paginationUtils from '@shell/utils/pagination-utils';
 import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { SECRET_TYPES } from '~/shell/config/secret';
 
@@ -63,7 +62,7 @@ export default {
 
     this.chartNamespace = BRORelease?.spec.namespace || '';
 
-    if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
+    if (this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.chartNamespace,
         pagination: new PaginationArgs({
diff --git a/shell/edit/resources.cattle.io.restore.vue b/shell/edit/resources.cattle.io.restore.vue
index 14a53cfab5..14dcb90af8 100644
--- a/shell/edit/resources.cattle.io.restore.vue
+++ b/shell/edit/resources.cattle.io.restore.vue
@@ -14,7 +14,6 @@ import { allHash } from '@shell/utils/promise';
 import { get } from '@shell/utils/object';
 import { _CREATE } from '@shell/config/query-params';
 import { formatEncryptionSecretNames } from '@shell/utils/formatter';
-import paginationUtils from '@shell/utils/pagination-utils';
 import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { SECRET_TYPES } from '~/shell/config/secret';
 
@@ -60,7 +59,7 @@ export default {
 
     this.chartNamespace = BRORelease?.spec.namespace || '';
 
-    if (paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
+    if (this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.chartNamespace,
         pagination: new PaginationArgs({
diff --git a/shell/edit/serviceaccount.vue b/shell/edit/serviceaccount.vue
index ff7572fa47..876a54612e 100644
--- a/shell/edit/serviceaccount.vue
+++ b/shell/edit/serviceaccount.vue
@@ -9,7 +9,6 @@ import { Checkbox } from '@components/Form/Checkbox';
 import { SECRET } from '@shell/config/types';
 import { TYPES as SECRET_TYPES } from '@shell/models/secret';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import paginationUtils from '@shell/utils/pagination-utils';
 import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
@@ -38,7 +37,7 @@ export default {
   },
 
   async fetch() {
-    this.filterByApi = paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } });
+    this.filterByApi = this.$store.getters[`cluster/paginationEnabled`](SECRET);
 
     if (this.filterByApi) {
       this.filteredSecrets = await this.filterSecretsByApi();
diff --git a/shell/mixins/resource-fetch-api-pagination.js b/shell/mixins/resource-fetch-api-pagination.js
index d1ecb6f911..39ec76d6ec 100644
--- a/shell/mixins/resource-fetch-api-pagination.js
+++ b/shell/mixins/resource-fetch-api-pagination.js
@@ -165,10 +165,7 @@ export default {
         return;
       }
 
-      return this.resource && paginationUtils.isEnabled({ rootGetters: this.$store.getters }, {
-        store:    this.currentProduct?.inStore,
-        resource: { id: this.resource.id || this.resource }
-      });
+      return this.resource && this.$store.getters[`${ this.currentProduct?.inStore }/paginationEnabled`](this.resource.id || this.resource);
     },
 
     paginationResult() {
diff --git a/shell/pages/c/_cluster/manager/cloudCredential/index.vue b/shell/pages/c/_cluster/manager/cloudCredential/index.vue
index 4c388c617a..b729074025 100644
--- a/shell/pages/c/_cluster/manager/cloudCredential/index.vue
+++ b/shell/pages/c/_cluster/manager/cloudCredential/index.vue
@@ -9,7 +9,6 @@ import {
   ID_UNLINKED,
   NAME_UNLINKED,
 } from '@shell/config/table-headers';
-import paginationUtils from '@shell/utils/pagination-utils';
 
 export default {
   components: {
@@ -19,7 +18,7 @@ export default {
   },
 
   async fetch() {
-    if (this.$store.getters['management/schemaFor'](SECRET) && !paginationUtils.isEnabled({ rootGetters: this.$store.getters }, { store: 'cluster', resource: { id: SECRET } })) {
+    if (this.$store.getters['management/schemaFor'](SECRET) && !this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       // Having secrets allows showing the public portion of more types but not all users can see them.
       await this.$store.dispatch('management/findAll', { type: SECRET });
     }
diff --git a/shell/plugins/dashboard-store/getters.js b/shell/plugins/dashboard-store/getters.js
index 73e46715c9..475428f28c 100644
--- a/shell/plugins/dashboard-store/getters.js
+++ b/shell/plugins/dashboard-store/getters.js
@@ -443,5 +443,12 @@ export default {
     }
 
     return undefined;
+  },
+
+  paginationEnabled: (state, getters, rootState, rootGetters) => (type = null) => {
+    const store = state.config.namespace;
+    const resource = type ? { id: type } : null;
+
+    return paginationUtils.isEnabled({ rootGetters }, { store, resource });
   }
 };
diff --git a/shell/plugins/steve/subscribe.js b/shell/plugins/steve/subscribe.js
index 5cbc68d575..c13039635f 100644
--- a/shell/plugins/steve/subscribe.js
+++ b/shell/plugins/steve/subscribe.js
@@ -34,7 +34,6 @@ import { waitFor } from '@shell/utils/async';
 import { WORKER_MODES } from './worker';
 import acceptOrRejectSocketMessage from './accept-or-reject-socket-message';
 import { BLANK_CLUSTER, STORE } from '@shell/store/store-types.js';
-import { STEVE_CACHE } from '@shell/store/features';
 import paginationUtils from '@shell/utils/pagination-utils';
 
 // minimum length of time a disconnect notification is shown

From cfb9ebdc8d137179ff15a33ad85f91fedefc8d1e Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 29 May 2024 17:35:03 +0100
Subject: [PATCH 53/71] changes following self review

---
 .../components/form/ResourceLabeledSelect.vue |  2 +-
 .../form/SelectOrCreateAuthSecret.vue         | 24 +++++++++----------
 shell/components/formatter/IngressTarget.vue  |  2 +-
 .../edit/helm.cattle.io.projecthelmchart.vue  |  4 +---
 shell/edit/resources.cattle.io.backup.vue     |  2 +-
 shell/edit/resources.cattle.io.restore.vue    |  2 +-
 shell/models/networking.k8s.io.ingress.js     |  1 +
 shell/utils/pagination-utils.ts               |  5 ++--
 8 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/shell/components/form/ResourceLabeledSelect.vue b/shell/components/form/ResourceLabeledSelect.vue
index 8ddd04803d..da4e54578f 100644
--- a/shell/components/form/ResourceLabeledSelect.vue
+++ b/shell/components/form/ResourceLabeledSelect.vue
@@ -3,7 +3,7 @@ import { PropType, defineComponent } from 'vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import { PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { labelSelectPaginationFunction, LabelSelectPaginationFunctionOptions } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
-import { LabelSelectPaginateFn, LabelSelectPaginateFnOptions, LabelSelectPaginateFnResponse } from '~/shell/types/components/labeledSelect';
+import { LabelSelectPaginateFn, LabelSelectPaginateFnOptions, LabelSelectPaginateFnResponse } from '@shell/types/components/labeledSelect';
 
 type PaginateTypeOverridesFn = (opts: LabelSelectPaginationFunctionOptions) => LabelSelectPaginationFunctionOptions;
 
diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index 4fb1b9bb64..4116772c25 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -97,12 +97,12 @@ export default {
 
     hookName: {
       type:    String,
-      default: 'registerAuthSecret',
+      default: 'registerAuthSecret'
     },
 
     appendUniqueIdToHook: {
       type:    Boolean,
-      default: false,
+      default: false
     },
 
     hookPriority: {
@@ -157,9 +157,7 @@ export default {
     if ( this.allowS3 && this.$store.getters['rancher/canList'](NORMAN.CLOUD_CREDENTIAL) ) {
       // Avoid an async call and loading screen if already loaded by someone else
       if (this.$store.getters['rancher/haveAll'](NORMAN.CLOUD_CREDENTIAL)) {
-        this.allCloudCreds = this.$store.getters['rancher/all'](
-          NORMAN.CLOUD_CREDENTIAL
-        );
+        this.allCloudCreds = this.$store.getters['rancher/all'](NORMAN.CLOUD_CREDENTIAL);
       } else {
         this.allCloudCreds = await this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
       }
@@ -313,7 +311,7 @@ export default {
         out.unshift({
           kind:     'title',
           label:    this.t('selectOrCreateAuthSecret.chooseExisting'),
-          disabled: true,
+          disabled: true
         });
       }
       if ( this.allowNone ) {
@@ -335,7 +333,7 @@ export default {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createSsh'),
           value: AUTH_TYPE._SSH,
-          kind:  'highlighted',
+          kind:  'highlighted'
         });
       }
 
@@ -376,7 +374,7 @@ export default {
       }
 
       return 'col span-4';
-    },
+    }
   },
 
   watch: {
@@ -489,7 +487,7 @@ export default {
 
       let secret;
 
-      if (this.selected === AUTH_TYPE._S3) {
+      if ( this.selected === AUTH_TYPE._S3 ) {
         secret = await this.$store.dispatch(`rancher/create`, {
           type:               NORMAN.CLOUD_CREDENTIAL,
           s3credentialConfig: {
@@ -543,10 +541,12 @@ export default {
 </script>
 
 <template>
-  <div class="select-or-create-auth-secret">
+  <div
+    class="select-or-create-auth-secret"
+  >
     <div
       class="mt-20"
-      :class="{'row': !vertical }"
+      :class="{'row': !vertical}"
     >
       <div :class="firstCol">
         <LabeledSelect
@@ -556,7 +556,7 @@ export default {
           :label-key="labelKey"
           :loading="$fetchState.pending"
           :options="options"
-          :selectable="(option) => !option.disabled"
+          :selectable="option => !option.disabled"
         />
       </div>
       <template v-if="selected === SSH">
diff --git a/shell/components/formatter/IngressTarget.vue b/shell/components/formatter/IngressTarget.vue
index b39b653fad..7c5f57b362 100644
--- a/shell/components/formatter/IngressTarget.vue
+++ b/shell/components/formatter/IngressTarget.vue
@@ -48,7 +48,7 @@ export default {
 
 <template>
   <div
-    v-if="value"
+    v-if="value && !$fetchState.pending"
     class="ingress-target"
     :reactivity="workloads.length"
   >
diff --git a/shell/edit/helm.cattle.io.projecthelmchart.vue b/shell/edit/helm.cattle.io.projecthelmchart.vue
index 4e143fda71..48f23abcf4 100644
--- a/shell/edit/helm.cattle.io.projecthelmchart.vue
+++ b/shell/edit/helm.cattle.io.projecthelmchart.vue
@@ -91,9 +91,6 @@ export default {
     getNamespaceConfigMapId(namespace) {
       return this.currentNamespace?.metadata?.relationships.find((relationship) => relationship?.toType === 'configmap')?.toId;
     },
-    async getConfigMap(id) {
-      return await this.$store.dispatch('cluster/find', { type: CONFIG_MAP, id });
-    },
     namespaceFilter(namespace) {
       const excludeProjects = [...this.systemNamespaces?.systemProjectLabelValues || [], this.systemNamespaces?.projectReleaseLabelValue];
 
@@ -109,6 +106,7 @@ export default {
     }
   }
 };
+// TODO: RC
 </script>
 
 <template>
diff --git a/shell/edit/resources.cattle.io.backup.vue b/shell/edit/resources.cattle.io.backup.vue
index f8c78de01d..19d6870cc0 100644
--- a/shell/edit/resources.cattle.io.backup.vue
+++ b/shell/edit/resources.cattle.io.backup.vue
@@ -18,7 +18,7 @@ import { sortBy } from '@shell/utils/sort';
 import { get } from '@shell/utils/object';
 import { formatEncryptionSecretNames } from '@shell/utils/formatter';
 import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
-import { SECRET_TYPES } from '~/shell/config/secret';
+import { SECRET_TYPES } from '@shell/config/secret';
 
 export default {
 
diff --git a/shell/edit/resources.cattle.io.restore.vue b/shell/edit/resources.cattle.io.restore.vue
index 14dcb90af8..2517bba5fd 100644
--- a/shell/edit/resources.cattle.io.restore.vue
+++ b/shell/edit/resources.cattle.io.restore.vue
@@ -15,7 +15,7 @@ import { get } from '@shell/utils/object';
 import { _CREATE } from '@shell/config/query-params';
 import { formatEncryptionSecretNames } from '@shell/utils/formatter';
 import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
-import { SECRET_TYPES } from '~/shell/config/secret';
+import { SECRET_TYPES } from '@shell/config/secret';
 
 export default {
 
diff --git a/shell/models/networking.k8s.io.ingress.js b/shell/models/networking.k8s.io.ingress.js
index 59394951c3..6ed9ccba4c 100644
--- a/shell/models/networking.k8s.io.ingress.js
+++ b/shell/models/networking.k8s.io.ingress.js
@@ -44,6 +44,7 @@ export default class Ingress extends SteveModel {
     const isTargetsWorkload = serviceName.startsWith('ingress-');
     const id = `${ this.namespace }/${ serviceName }`;
 
+    debugger;
     if (isTargetsWorkload) {
       // Need to expose workloadId's and fetch specific ones in IngressTarget?
       const workload = workloads.find((w) => w.id === (id));
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index 5fcdfcd096..6a1c46fdaf 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -21,11 +21,11 @@ import { DEFAULT_PERF_SETTING } from '@shell/config/settings';
  *
  * Once cache is merged (pre 2.9.0) this will be removed
  */
-const TEMP_VAI_CACHE_MERGED = false;
+const TEMP_VAI_CACHE_MERGED = true;
 /**
  * Given above, just a dev thing
  */
-const TEMP_PERF_ENABLED = false;
+const TEMP_PERF_ENABLED = true;
 
 /**
  * Helper functions for server side pagination
@@ -78,7 +78,6 @@ class PaginationUtils {
       return false;
     }
 
-    // const storeSettings = settings.stores?.[enabledFor.store];
     const storeSettings = settings.stores?.[enabledFor.store];
 
     // No pagination setting for target store, not enabled

From 906761d40d5c1c0ed364e25be609d936ed00efef Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 30 May 2024 13:45:28 +0100
Subject: [PATCH 54/71] Fix bottom bar of edit backup, edit restore pages

---
 shell/edit/resources.cattle.io.backup.vue  | 219 ++++++++++-----------
 shell/edit/resources.cattle.io.restore.vue | 217 ++++++++++----------
 2 files changed, 217 insertions(+), 219 deletions(-)

diff --git a/shell/edit/resources.cattle.io.backup.vue b/shell/edit/resources.cattle.io.backup.vue
index 19d6870cc0..e0556aff8d 100644
--- a/shell/edit/resources.cattle.io.backup.vue
+++ b/shell/edit/resources.cattle.io.backup.vue
@@ -197,127 +197,126 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
-  <div v-else>
-    <CruResource
-      :validation-passed="validated"
-      :done-route="doneRoute"
-      :resource="value"
-      :mode="mode"
-      :errors="fvUnreportedValidationErrors"
-      @finish="save"
-    >
-      <template>
-        <NameNsDescription
-          :mode="mode"
-          :value="value"
-          :namespaced="false"
-          :rules="{name: fvGetAndReportPathRules('metadata.name')}"
-          @change="name=value.metadata.name"
-        />
-        <template v-if="!!resourceSet">
-          <div class="bordered-section">
-            <RadioGroup
-              v-model="setSchedule"
-              :mode="mode"
-              :label="t('backupRestoreOperator.schedule.label')"
-              name="setSchedule"
-              :options="[false, true]"
-              :labels="[t('backupRestoreOperator.schedule.options.disabled'), t('backupRestoreOperator.schedule.options.enabled')]"
-            />
-            <div
-              v-if="setSchedule"
-              class="row mt-10 mb-10"
-            >
-              <div class="col span-6">
-                <LabeledInput
-                  v-model="value.spec.schedule"
-                  type="cron"
-                  :mode="mode"
-                  :label="t('backupRestoreOperator.schedule.label')"
-                  :placeholder="t('backupRestoreOperator.schedule.placeholder')"
-                />
-              </div>
-              <div class="col span-6">
-                <UnitInput
-                  v-model="value.spec.retentionCount"
-                  :suffix="t('backupRestoreOperator.retentionCount.units', {count: value.spec.retentionCount || 0})"
-                  :mode="mode"
-                  :label="t('backupRestoreOperator.retentionCount.label')"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div class="bordered-section">
-            <div class="row">
-              <div class="col span-12">
-                <RadioGroup
-                  v-model="useEncryption"
-                  name="useEncryption"
-                  :label="t('backupRestoreOperator.encryption')"
-                  :options="encryptionOptions.options"
-                  :labels="encryptionOptions.labels"
-                  :mode="mode"
-                />
-              </div>
-            </div>
-            <div
-              v-if="useEncryption"
-              :style="{'align-items':'center'}"
-              class="row mt-10"
-            >
-              <div class="col span-6">
-                <LabeledSelect
-                  v-model="value.spec.encryptionConfigSecretName"
-                  :tooltip="t('backupRestoreOperator.encryptionConfigName.backuptip', { ns: chartNamespace}, true)"
-                  :hover-tooltip="true"
-                  :mode="mode"
-                  :options="encryptionSecretNames"
-                  :label="t('backupRestoreOperator.encryptionConfigName.label')"
-                />
-              </div>
+  <CruResource
+    v-else
+    :validation-passed="validated"
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="fvUnreportedValidationErrors"
+    @finish="save"
+  >
+    <template>
+      <NameNsDescription
+        :mode="mode"
+        :value="value"
+        :namespaced="false"
+        :rules="{name: fvGetAndReportPathRules('metadata.name')}"
+        @change="name=value.metadata.name"
+      />
+      <template v-if="!!resourceSet">
+        <div class="bordered-section">
+          <RadioGroup
+            v-model="setSchedule"
+            :mode="mode"
+            :label="t('backupRestoreOperator.schedule.label')"
+            name="setSchedule"
+            :options="[false, true]"
+            :labels="[t('backupRestoreOperator.schedule.options.disabled'), t('backupRestoreOperator.schedule.options.enabled')]"
+          />
+          <div
+            v-if="setSchedule"
+            class="row mt-10 mb-10"
+          >
+            <div class="col span-6">
+              <LabeledInput
+                v-model="value.spec.schedule"
+                type="cron"
+                :mode="mode"
+                :label="t('backupRestoreOperator.schedule.label')"
+                :placeholder="t('backupRestoreOperator.schedule.placeholder')"
+              />
+            </div>
+            <div class="col span-6">
+              <UnitInput
+                v-model="value.spec.retentionCount"
+                :suffix="t('backupRestoreOperator.retentionCount.units', {count: value.spec.retentionCount || 0})"
+                :mode="mode"
+                :label="t('backupRestoreOperator.retentionCount.label')"
+              />
             </div>
           </div>
+        </div>
 
+        <div class="bordered-section">
           <div class="row">
             <div class="col span-12">
-              <span
-                v-if="isView"
-                class="text-label"
-              >{{ t('backupRestoreOperator.s3.titles.location') }}</span>
               <RadioGroup
-                v-else
-                v-model="storageSource"
-                name="storageSource"
-                :label="t('backupRestoreOperator.s3.titles.location')"
-                :options="storageOptions.options"
-                :labels="storageOptions.labels"
+                v-model="useEncryption"
+                name="useEncryption"
+                :label="t('backupRestoreOperator.encryption')"
+                :options="encryptionOptions.options"
+                :labels="encryptionOptions.labels"
                 :mode="mode"
               />
             </div>
           </div>
-
-          <template v-if="storageSource !== 'useDefault'">
-            <div class="row mt-10">
-              <div class="col span-12">
-                <S3
-                  :value="s3"
-                  :mode="mode"
-                />
-              </div>
+          <div
+            v-if="useEncryption"
+            :style="{'align-items':'center'}"
+            class="row mt-10"
+          >
+            <div class="col span-6">
+              <LabeledSelect
+                v-model="value.spec.encryptionConfigSecretName"
+                :tooltip="t('backupRestoreOperator.encryptionConfigName.backuptip', { ns: chartNamespace}, true)"
+                :hover-tooltip="true"
+                :mode="mode"
+                :options="encryptionSecretNames"
+                :label="t('backupRestoreOperator.encryptionConfigName.label')"
+              />
             </div>
-          </template>
-          <template v-else-if="isView">
-            <span>{{ t('generic.default') }}</span>
-          </template>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col span-12">
+            <span
+              v-if="isView"
+              class="text-label"
+            >{{ t('backupRestoreOperator.s3.titles.location') }}</span>
+            <RadioGroup
+              v-else
+              v-model="storageSource"
+              name="storageSource"
+              :label="t('backupRestoreOperator.s3.titles.location')"
+              :options="storageOptions.options"
+              :labels="storageOptions.labels"
+              :mode="mode"
+            />
+          </div>
+        </div>
+
+        <template v-if="storageSource !== 'useDefault'">
+          <div class="row mt-10">
+            <div class="col span-12">
+              <S3
+                :value="s3"
+                :mode="mode"
+              />
+            </div>
+          </div>
+        </template>
+        <template v-else-if="isView">
+          <span>{{ t('generic.default') }}</span>
         </template>
-        <Banner
-          v-else
-          color="error"
-        >
-          <span v-clean-html="t('backupRestoreOperator.noResourceSet')" />
-        </Banner>
       </template>
-    </CruResource>
-  </div>
+      <Banner
+        v-else
+        color="error"
+      >
+        <span v-clean-html="t('backupRestoreOperator.noResourceSet')" />
+      </Banner>
+    </template>
+  </CruResource>
 </template>
diff --git a/shell/edit/resources.cattle.io.restore.vue b/shell/edit/resources.cattle.io.restore.vue
index 2517bba5fd..f988074afa 100644
--- a/shell/edit/resources.cattle.io.restore.vue
+++ b/shell/edit/resources.cattle.io.restore.vue
@@ -209,122 +209,121 @@ export default {
 </script>
 
 <template>
-  <div>
-    <Loading v-if="$fetchState.pending" />
+  <Loading v-if="$fetchState.pending" />
 
-    <CruResource
-      :validation-passed="validationPassed"
-      :done-route="doneRoute"
-      :resource="value"
-      :mode="mode"
-      @finish="save"
-    >
-      <template>
-        <div>
-          <div class="row mb-10">
-            <div class="col span-12">
-              <RadioGroup
-                v-model="storageSource"
-                name="storageSource"
-                :label="t('backupRestoreOperator.s3.titles.backupLocation')"
-                :options="radioOptions.options"
-                :labels="radioOptions.labels"
-                :mode="mode"
-              />
-            </div>
-          </div>
-          <template v-if="storageSource === 'configureS3'">
-            <S3
-              v-model="s3"
+  <CruResource
+    v-else
+    :validation-passed="validationPassed"
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    @finish="save"
+  >
+    <template>
+      <div>
+        <div class="row mb-10">
+          <div class="col span-12">
+            <RadioGroup
+              v-model="storageSource"
+              name="storageSource"
+              :label="t('backupRestoreOperator.s3.titles.backupLocation')"
+              :options="radioOptions.options"
+              :labels="radioOptions.labels"
               :mode="mode"
             />
-          </template>
-          <div
-            v-else-if="storageSource==='useBackup'"
-            class="row mb-10"
-          >
-            <div class="col span-6">
-              <LabeledSelect
-                :disabled="!availableBackups.length"
-                :value="targetBackup"
-                :options="availableBackups"
-                :mode="mode"
-                option-label="metadata.name"
-                :label="t('backupRestoreOperator.targetBackup')"
-                @input="updateTargetBackup"
-              />
-            </div>
           </div>
         </div>
-        <div class="spacer" />
+        <template v-if="storageSource === 'configureS3'">
+          <S3
+            v-model="s3"
+            :mode="mode"
+          />
+        </template>
+        <div
+          v-else-if="storageSource==='useBackup'"
+          class="row mb-10"
+        >
+          <div class="col span-6">
+            <LabeledSelect
+              :disabled="!availableBackups.length"
+              :value="targetBackup"
+              :options="availableBackups"
+              :mode="mode"
+              option-label="metadata.name"
+              :label="t('backupRestoreOperator.targetBackup')"
+              @input="updateTargetBackup"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="spacer" />
 
-        <div>
-          <div
-            :style="{'align-items':'center'}"
-            class="row mb-10"
-          >
-            <div class="col span-6">
-              <LabeledInput
-                v-model="value.spec.backupFilename"
-                :spellcheck="false"
-                required
-                :mode="mode"
-                :label="t('backupRestoreOperator.backupFilename')"
-              />
-            </div>
-            <div class="col span-6">
-              <LabeledSelect
-                v-if="isEncrypted"
-                v-model="value.spec.encryptionConfigSecretName"
-                :status="mode === 'view' ? null : 'warning'"
-                :tooltip="mode === 'view' ? null : t('backupRestoreOperator.encryptionConfigName.restoretip')"
-                :hover-tooltip="true"
-                :mode="mode"
-                :options="encryptionSecretNames"
-                :label="t('backupRestoreOperator.encryptionConfigName.label')"
-              />
-            </div>
+      <div>
+        <div
+          :style="{'align-items':'center'}"
+          class="row mb-10"
+        >
+          <div class="col span-6">
+            <LabeledInput
+              v-model="value.spec.backupFilename"
+              :spellcheck="false"
+              required
+              :mode="mode"
+              :label="t('backupRestoreOperator.backupFilename')"
+            />
           </div>
-          <div
-            :style="{'align-items':'center'}"
-            class="row"
-          >
-            <div class="col span-6">
-              <Checkbox
-                v-model="value.spec.prune"
-                class="mb-5"
-                :label="t('backupRestoreOperator.prune.label')"
-                :mode="mode"
-              >
-                <template #label>
-                  <span
-                    v-clean-tooltip="t('backupRestoreOperator.prune.tip')"
-                    class="text-label"
-                  >
-                    {{ t('backupRestoreOperator.prune.label') }} <i class="icon icon-info" />
-                  </span>
-                </template>
-              </Checkbox>
-              <UnitInput
-                v-if="value.spec.prune"
-                v-model="value.spec.deleteTimeoutSeconds"
-                :suffix="t('suffix.seconds', {count: value.spec.deleteTimeoutSeconds})"
-                :mode="mode"
-                :label="t('backupRestoreOperator.deleteTimeout.label')"
-              >
-                <template #label>
-                  <label
-                    v-clean-tooltip="t('backupRestoreOperator.deleteTimeout.tip')"
-                    class="has-tooltip"
-                  >
-                    {{ t('backupRestoreOperator.deleteTimeout.label') }} <i class="icon icon-info" />
-                  </label>
-                </template>
-              </UnitInput>
-            </div>
+          <div class="col span-6">
+            <LabeledSelect
+              v-if="isEncrypted"
+              v-model="value.spec.encryptionConfigSecretName"
+              :status="mode === 'view' ? null : 'warning'"
+              :tooltip="mode === 'view' ? null : t('backupRestoreOperator.encryptionConfigName.restoretip')"
+              :hover-tooltip="true"
+              :mode="mode"
+              :options="encryptionSecretNames"
+              :label="t('backupRestoreOperator.encryptionConfigName.label')"
+            />
           </div>
         </div>
-      </template>
-    </CruResource>
-  </div>
+        <div
+          :style="{'align-items':'center'}"
+          class="row"
+        >
+          <div class="col span-6">
+            <Checkbox
+              v-model="value.spec.prune"
+              class="mb-5"
+              :label="t('backupRestoreOperator.prune.label')"
+              :mode="mode"
+            >
+              <template #label>
+                <span
+                  v-clean-tooltip="t('backupRestoreOperator.prune.tip')"
+                  class="text-label"
+                >
+                  {{ t('backupRestoreOperator.prune.label') }} <i class="icon icon-info" />
+                </span>
+              </template>
+            </Checkbox>
+            <UnitInput
+              v-if="value.spec.prune"
+              v-model="value.spec.deleteTimeoutSeconds"
+              :suffix="t('suffix.seconds', {count: value.spec.deleteTimeoutSeconds})"
+              :mode="mode"
+              :label="t('backupRestoreOperator.deleteTimeout.label')"
+            >
+              <template #label>
+                <label
+                  v-clean-tooltip="t('backupRestoreOperator.deleteTimeout.tip')"
+                  class="has-tooltip"
+                >
+                  {{ t('backupRestoreOperator.deleteTimeout.label') }} <i class="icon icon-info" />
+                </label>
+              </template>
+            </UnitInput>
+          </div>
+        </div>
+      </div>
+    </template>
+  </CruResource>
 </template>

From 45a45f67cce16c8dfd4efaa709ee34f72beb307a Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 30 May 2024 13:45:47 +0100
Subject: [PATCH 55/71] revert temp change

---
 shell/utils/pagination-utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index 6a1c46fdaf..49d3af0970 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -21,11 +21,11 @@ import { DEFAULT_PERF_SETTING } from '@shell/config/settings';
  *
  * Once cache is merged (pre 2.9.0) this will be removed
  */
-const TEMP_VAI_CACHE_MERGED = true;
+const TEMP_VAI_CACHE_MERGED = false;
 /**
  * Given above, just a dev thing
  */
-const TEMP_PERF_ENABLED = true;
+const TEMP_PERF_ENABLED = false;
 
 /**
  * Helper functions for server side pagination

From 8482921b4a8426f8406b1840fa0c03e6c085eb23 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 30 May 2024 14:04:59 +0100
Subject: [PATCH 56/71] changes following self review

---
 shell/edit/catalog.cattle.io.clusterrepo.vue   | 1 -
 shell/edit/helm.cattle.io.projecthelmchart.vue | 1 -
 shell/models/networking.k8s.io.ingress.js      | 1 -
 3 files changed, 3 deletions(-)

diff --git a/shell/edit/catalog.cattle.io.clusterrepo.vue b/shell/edit/catalog.cattle.io.clusterrepo.vue
index a65f48ddfd..62413f50ff 100644
--- a/shell/edit/catalog.cattle.io.clusterrepo.vue
+++ b/shell/edit/catalog.cattle.io.clusterrepo.vue
@@ -187,7 +187,6 @@ export default {
       :limit-to-namespace="false"
       :in-store="inStore"
       :allow-ssh="clusterRepoType !== CLUSTER_REPO_TYPES.OCI_URL"
-      :mode="mode"
       generate-name="clusterrepo-auth-"
       :cache-secrets="true"
     />
diff --git a/shell/edit/helm.cattle.io.projecthelmchart.vue b/shell/edit/helm.cattle.io.projecthelmchart.vue
index 48f23abcf4..ce96d7ecf5 100644
--- a/shell/edit/helm.cattle.io.projecthelmchart.vue
+++ b/shell/edit/helm.cattle.io.projecthelmchart.vue
@@ -106,7 +106,6 @@ export default {
     }
   }
 };
-// TODO: RC
 </script>
 
 <template>
diff --git a/shell/models/networking.k8s.io.ingress.js b/shell/models/networking.k8s.io.ingress.js
index 6ed9ccba4c..59394951c3 100644
--- a/shell/models/networking.k8s.io.ingress.js
+++ b/shell/models/networking.k8s.io.ingress.js
@@ -44,7 +44,6 @@ export default class Ingress extends SteveModel {
     const isTargetsWorkload = serviceName.startsWith('ingress-');
     const id = `${ this.namespace }/${ serviceName }`;
 
-    debugger;
     if (isTargetsWorkload) {
       // Need to expose workloadId's and fetch specific ones in IngressTarget?
       const workload = workloads.find((w) => w.id === (id));

From 8bf8b8b56df777189e1d3f306e8a24813b12cc8a Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 30 May 2024 14:53:00 +0100
Subject: [PATCH 57/71] Workaround for kubewarden unit tests in check plugin
 gate

---
 shell/mixins/resource-fetch-api-pagination.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shell/mixins/resource-fetch-api-pagination.js b/shell/mixins/resource-fetch-api-pagination.js
index 39ec76d6ec..a9c576d8f2 100644
--- a/shell/mixins/resource-fetch-api-pagination.js
+++ b/shell/mixins/resource-fetch-api-pagination.js
@@ -165,7 +165,7 @@ export default {
         return;
       }
 
-      return this.resource && this.$store.getters[`${ this.currentProduct?.inStore }/paginationEnabled`](this.resource.id || this.resource);
+      return this.resource && this.$store.getters[`${ this.currentProduct?.inStore }/paginationEnabled`]?.(this.resource.id || this.resource);
     },
 
     paginationResult() {

From d7f518b225331953053c5e5ac3865e6d6dadd0ca Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 30 May 2024 15:22:39 +0100
Subject: [PATCH 58/71] bump

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index c60d437e35..e76b9ca7ad 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,6 @@ Developer documentation and documentation for our UI components is available her
 
 Rancher Dashboard supports an extension mechanism that allows developers to independently provide additional functionality to Rancher. You can learn more from our [Rancher Extensions Docs](https://rancher.github.io/dashboard/extensions/introduction).
 
-
 # What is it?
 
 Rancher Dashboard provides a sophisticated UI for managing Kubernetes clusters and Workloads.

From b536a4e676678826e16f9d835d30376c1607db75 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 4 Jun 2024 10:09:01 +0100
Subject: [PATCH 59/71] Fix e2e

---
 cypress/e2e/tests/pages/charts/rancher-backup.spec.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/cypress/e2e/tests/pages/charts/rancher-backup.spec.ts b/cypress/e2e/tests/pages/charts/rancher-backup.spec.ts
index 041ca6d754..576dff3b30 100644
--- a/cypress/e2e/tests/pages/charts/rancher-backup.spec.ts
+++ b/cypress/e2e/tests/pages/charts/rancher-backup.spec.ts
@@ -49,8 +49,6 @@ describe('Charts', { tags: ['@charts', '@adminUser'] }, () => {
 
         storageOptions.set(2);
 
-        cy.wait('@secrets', { timeout: 10000 }).its('response.statusCode').should('eq', 200);
-
         // Verify that the drop-down exists and has the default storage class selected
         const select = new LabeledSelectPo('[data-testid="backup-chart-select-existing-storage-class"]');
 

From 7eadc6612cd1cfa7c387eb27551ee7927bf1f4c1 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 4 Jun 2024 10:14:00 +0100
Subject: [PATCH 60/71] Fix linting

---
 pkg/harvester-manager/machine-config/harvester.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/harvester-manager/machine-config/harvester.vue b/pkg/harvester-manager/machine-config/harvester.vue
index da4c8528a0..e118448bd6 100644
--- a/pkg/harvester-manager/machine-config/harvester.vue
+++ b/pkg/harvester-manager/machine-config/harvester.vue
@@ -40,7 +40,7 @@ import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import { isValidMac } from '@shell/utils/validators/cidr';
 import { HCI as HCI_ANNOTATIONS, STORAGE } from '@shell/config/labels-annotations';
 import { isEqual } from 'lodash';
-import { PaginationArgs, PaginationFilterField, PaginationParamFilter } from '~/shell/types/store/pagination.types';
+import { PaginationArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 const STORAGE_NETWORK = 'storage-network.settings.harvesterhci.io';
 

From 8564a0788c7fbc0580bce1df37b9fa272c14a3a0 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 4 Jun 2024 13:25:03 +0100
Subject: [PATCH 61/71] type fixing

---
 shell/list/node.vue                   | 20 ++++++++++++--------
 shell/types/store/pagination.types.ts |  4 ++--
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/shell/list/node.vue b/shell/list/node.vue
index 4b4d96e0fb..763b6dd426 100644
--- a/shell/list/node.vue
+++ b/shell/list/node.vue
@@ -148,8 +148,9 @@ export default defineComponent({
         const opt: ActionFindPageArgs = {
           force:      true,
           pagination: new PaginationArgs({
-            page:    -1,
-            filters: new PaginationParamFilter({
+            page:     null,
+            pageSize: null,
+            filters:  new PaginationParamFilter({
               fields: this.rows.map((r: any) => new PaginationFilterField({
                 field: 'metadata.name',
                 value: r.id
@@ -221,8 +222,9 @@ export default defineComponent({
         const opt: ActionFindPageArgs = {
           force,
           pagination: new PaginationArgs({
-            page:    -1,
-            filters: PaginationParamFilter.createMultipleFields(this.rows.map((r: any) => new PaginationFilterField({
+            page:     null,
+            pageSize: null,
+            filters:  PaginationParamFilter.createMultipleFields(this.rows.map((r: any) => new PaginationFilterField({
               field: 'status.nodeName',
               value: r.id
             }))),
@@ -243,8 +245,9 @@ export default defineComponent({
             force,
             namespaced: namespace,
             pagination: new PaginationArgs({
-              page:    -1,
-              filters: PaginationParamFilter.createMultipleFields(
+              page:     null,
+              pageSize: null,
+              filters:  PaginationParamFilter.createMultipleFields(
                 this.rows.reduce((res: PaginationFilterField[], r: any ) => {
                   const name = r.metadata?.annotations?.[CAPI_ANNOTATIONS.MACHINE_NAME];
 
@@ -270,8 +273,9 @@ export default defineComponent({
         const opt: ActionFindPageArgs = {
           force,
           pagination: new PaginationArgs({
-            page:    -1,
-            filters: PaginationParamFilter.createMultipleFields(
+            page:     null,
+            pageSize: null,
+            filters:  PaginationParamFilter.createMultipleFields(
               this.rows.map((r: any) => new PaginationFilterField({
                 field: 'spec.nodeName',
                 value: r.id,
diff --git a/shell/types/store/pagination.types.ts b/shell/types/store/pagination.types.ts
index 7845d33b19..6dd901e5c9 100644
--- a/shell/types/store/pagination.types.ts
+++ b/shell/types/store/pagination.types.ts
@@ -279,11 +279,11 @@ export class PaginationArgs {
   /**
    * Page number to fetch
    */
-  page: number;
+  page: number | null;
   /**
    * Number of results in the page
    */
-  pageSize?: number;
+  pageSize?: number | null;
   /**
    * Sort the results
    *

From 03da0a8d4d2d24c2505fa5dabc5fc013854afd4e Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 5 Jun 2024 12:13:30 +0100
Subject: [PATCH 62/71] - improve filtering without pagination - update allowed
 fields given latest backend changes - enable on by default exact filter
 string matches (disable for lists

---
 .../machine-config/harvester.vue              |  4 +-
 .../form/SelectOrCreateAuthSecret.vue         |  8 +--
 shell/detail/networking.k8s.io.ingress.vue    |  8 +--
 shell/detail/node.vue                         | 10 ++--
 .../edit/networking.k8s.io.ingress/index.vue  |  8 +--
 shell/edit/resources.cattle.io.backup.vue     |  8 +--
 shell/edit/resources.cattle.io.restore.vue    |  8 +--
 shell/edit/serviceaccount.vue                 |  8 +--
 shell/list/node.vue                           | 26 +++------
 shell/mixins/resource-fetch-api-pagination.js |  1 +
 shell/plugins/steve/steve-pagination-utils.ts | 19 +++---
 shell/types/store/pagination.types.ts         | 58 ++++++++++++++++++-
 12 files changed, 102 insertions(+), 64 deletions(-)

diff --git a/pkg/harvester-manager/machine-config/harvester.vue b/pkg/harvester-manager/machine-config/harvester.vue
index 97852fa45d..8435c8943a 100644
--- a/pkg/harvester-manager/machine-config/harvester.vue
+++ b/pkg/harvester-manager/machine-config/harvester.vue
@@ -40,7 +40,7 @@ import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import { isValidMac } from '@shell/utils/validators/cidr';
 import { HCI as HCI_ANNOTATIONS, STORAGE } from '@shell/config/labels-annotations';
 import { isEqual } from 'lodash';
-import { PaginationArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { PaginationFilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 const STORAGE_NETWORK = 'storage-network.settings.harvesterhci.io';
 
@@ -135,7 +135,7 @@ export default {
         let configMapsUrl = `${ url }/${ CONFIG_MAP }s`;
 
         if (this.$store.getters[`cluster/paginationEnabled`](CONFIG_MAP)) {
-          const pagination = new PaginationArgs({
+          const pagination = new PaginationFilterArgs({
             page:     null,
             pageSize: null,
             filters:  [
diff --git a/shell/components/form/SelectOrCreateAuthSecret.vue b/shell/components/form/SelectOrCreateAuthSecret.vue
index 28eebcda73..69df323df5 100644
--- a/shell/components/form/SelectOrCreateAuthSecret.vue
+++ b/shell/components/form/SelectOrCreateAuthSecret.vue
@@ -8,7 +8,7 @@ import { base64Encode } from '@shell/utils/crypto';
 import { addObjects, insertAt } from '@shell/utils/array';
 import { sortBy } from '@shell/utils/sort';
 import {
-  PaginationArgs,
+  PaginationFilterArgs,
   PaginationFilterField,
   PaginationParamFilter,
 } from '@shell/types/store/pagination.types';
@@ -411,10 +411,8 @@ export default {
       const findPageArgs = {
         // Of type ActionFindPageArgs
         namespaced: this.filterByNamespace ? this.namespace : '',
-        pagination: new PaginationArgs({
-          page:     null,
-          pageSize: null,
-          filters:  [
+        pagination: new PaginationFilterArgs({
+          filters: [
             PaginationParamFilter.createMultipleFields(
               this.secretTypes.map(
                 (t) => new PaginationFilterField({
diff --git a/shell/detail/networking.k8s.io.ingress.vue b/shell/detail/networking.k8s.io.ingress.vue
index e0516bbe5b..e259b53601 100644
--- a/shell/detail/networking.k8s.io.ingress.vue
+++ b/shell/detail/networking.k8s.io.ingress.vue
@@ -6,7 +6,7 @@ import Rules from '@shell/edit/networking.k8s.io.ingress/Rules';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import Tab from '@shell/components/Tabbed/Tab';
 import { SECRET_TYPES as TYPES } from '@shell/config/secret';
-import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { PaginationFilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
   name:       'CRUIngress',
@@ -25,10 +25,8 @@ export default {
     if (this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.value.metadata.namespace,
-        pagination: new PaginationArgs({
-          page:     null,
-          pageSize: null,
-          filters:  PaginationParamFilter.createSingleField({
+        pagination: new PaginationFilterArgs({
+          filters: PaginationParamFilter.createSingleField({
             field: 'metadata.fields.1',
             value: TYPES.TLS
           })
diff --git a/shell/detail/node.vue b/shell/detail/node.vue
index f0479abf93..a9f8097ea1 100644
--- a/shell/detail/node.vue
+++ b/shell/detail/node.vue
@@ -19,7 +19,7 @@ import { mapGetters } from 'vuex';
 import { allDashboardsExist } from '@shell/utils/grafana';
 import Loading from '@shell/components/Loading';
 import metricPoller from '@shell/mixins/metric-poller';
-import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { PaginationFilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 const NODE_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-node-detail-1/rancher-node-detail?orgId=1';
 const NODE_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-node-1/rancher-node?orgId=1';
@@ -52,11 +52,9 @@ export default {
     if (this.filterByApi) {
       // Only get pods associated with this node. The actual values used are from a get all in node model `pods` getter (this works as it just gets all...)
       const opt = { // Of type ActionFindPageArgs
-        pagination: new PaginationArgs({
-          page:     null,
-          pageSize: null,
-          sort:     [{ field: 'metadata.name', asc: true }],
-          filters:  PaginationParamFilter.createSingleField({
+        pagination: new PaginationFilterArgs({
+          sort:    [{ field: 'metadata.name', asc: true }],
+          filters: PaginationParamFilter.createSingleField({
             field: 'spec.nodeName',
             value: this.value.id,
           })
diff --git a/shell/edit/networking.k8s.io.ingress/index.vue b/shell/edit/networking.k8s.io.ingress/index.vue
index 0a90f300a9..d72e51aa52 100644
--- a/shell/edit/networking.k8s.io.ingress/index.vue
+++ b/shell/edit/networking.k8s.io.ingress/index.vue
@@ -16,7 +16,7 @@ import Certificates from './Certificates';
 import Rules from './Rules';
 import IngressClass from './IngressClass';
 import Loading from '@shell/components/Loading';
-import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { PaginationFilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
   name:       'CRUIngress',
@@ -211,10 +211,8 @@ export default {
     filterSecretsByApi() {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.value.metadata.namespace,
-        pagination: new PaginationArgs({
-          page:     null,
-          pageSize: null,
-          filters:  PaginationParamFilter.createSingleField({
+        pagination: new PaginationFilterArgs({
+          filters: PaginationParamFilter.createSingleField({
             field: 'metadata.fields.1',
             value: TYPES.TLS
           })
diff --git a/shell/edit/resources.cattle.io.backup.vue b/shell/edit/resources.cattle.io.backup.vue
index b76dadd51b..c90188e772 100644
--- a/shell/edit/resources.cattle.io.backup.vue
+++ b/shell/edit/resources.cattle.io.backup.vue
@@ -17,7 +17,7 @@ import { NAMESPACE, _VIEW } from '@shell/config/query-params';
 import { sortBy } from '@shell/utils/sort';
 import { get } from '@shell/utils/object';
 import { formatEncryptionSecretNames } from '@shell/utils/formatter';
-import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { PaginationFilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { SECRET_TYPES } from '@shell/config/secret';
 
 export default {
@@ -65,10 +65,8 @@ export default {
     if (this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.chartNamespace,
-        pagination: new PaginationArgs({
-          page:     null,
-          pageSize: null,
-          filters:  PaginationParamFilter.createSingleField({
+        pagination: new PaginationFilterArgs({
+          filters: PaginationParamFilter.createSingleField({
             field: 'metadata.fields.1',
             value: SECRET_TYPES.OPAQUE
           })
diff --git a/shell/edit/resources.cattle.io.restore.vue b/shell/edit/resources.cattle.io.restore.vue
index 1840182d27..c4bcea6db7 100644
--- a/shell/edit/resources.cattle.io.restore.vue
+++ b/shell/edit/resources.cattle.io.restore.vue
@@ -14,7 +14,7 @@ import { allHash } from '@shell/utils/promise';
 import { get } from '@shell/utils/object';
 import { _CREATE } from '@shell/config/query-params';
 import { formatEncryptionSecretNames } from '@shell/utils/formatter';
-import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { PaginationFilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { SECRET_TYPES } from '@shell/config/secret';
 
 export default {
@@ -62,10 +62,8 @@ export default {
     if (this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.chartNamespace,
-        pagination: new PaginationArgs({
-          page:     null,
-          pageSize: null,
-          filters:  PaginationParamFilter.createSingleField({
+        pagination: new PaginationFilterArgs({
+          filters: PaginationParamFilter.createSingleField({
             field: 'metadata.fields.1',
             value: SECRET_TYPES.OPAQUE
           })
diff --git a/shell/edit/serviceaccount.vue b/shell/edit/serviceaccount.vue
index da49e17bce..ca3b581142 100644
--- a/shell/edit/serviceaccount.vue
+++ b/shell/edit/serviceaccount.vue
@@ -9,7 +9,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 import { SECRET } from '@shell/config/types';
 import { TYPES as SECRET_TYPES } from '@shell/models/secret';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { PaginationFilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
   name: 'ServiceAccount',
@@ -70,10 +70,8 @@ export default {
     filterSecretsByApi() {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.value.metadata.namespace,
-        pagination: new PaginationArgs({
-          page:     null,
-          pageSize: null,
-          filters:  PaginationParamFilter.createMultipleFields(this.secretTypes.map((t) => ({
+        pagination: new PaginationFilterArgs({
+          filters: PaginationParamFilter.createMultipleFields(this.secretTypes.map((t) => ({
             field:  'metadata.fields.1',
             value:  t,
             equals: true
diff --git a/shell/list/node.vue b/shell/list/node.vue
index 763b6dd426..1da41ed49f 100644
--- a/shell/list/node.vue
+++ b/shell/list/node.vue
@@ -9,7 +9,7 @@ import { CAPI as CAPI_ANNOTATIONS } from '@shell/config/labels-annotations.js';
 
 import { defineComponent } from 'vue';
 import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
-import { PaginationArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { PaginationArgs, PaginationFilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 import {
   CAPI,
@@ -147,10 +147,8 @@ export default defineComponent({
 
         const opt: ActionFindPageArgs = {
           force:      true,
-          pagination: new PaginationArgs({
-            page:     null,
-            pageSize: null,
-            filters:  new PaginationParamFilter({
+          pagination: new PaginationFilterArgs({
+            filters: new PaginationParamFilter({
               fields: this.rows.map((r: any) => new PaginationFilterField({
                 field: 'metadata.name',
                 value: r.id
@@ -221,10 +219,8 @@ export default defineComponent({
         // See https://github.com/rancher/dashboard/issues/10743
         const opt: ActionFindPageArgs = {
           force,
-          pagination: new PaginationArgs({
-            page:     null,
-            pageSize: null,
-            filters:  PaginationParamFilter.createMultipleFields(this.rows.map((r: any) => new PaginationFilterField({
+          pagination: new PaginationFilterArgs({
+            filters: PaginationParamFilter.createMultipleFields(this.rows.map((r: any) => new PaginationFilterField({
               field: 'status.nodeName',
               value: r.id
             }))),
@@ -244,10 +240,8 @@ export default defineComponent({
           const opt: ActionFindPageArgs = {
             force,
             namespaced: namespace,
-            pagination: new PaginationArgs({
-              page:     null,
-              pageSize: null,
-              filters:  PaginationParamFilter.createMultipleFields(
+            pagination: new PaginationFilterArgs({
+              filters: PaginationParamFilter.createMultipleFields(
                 this.rows.reduce((res: PaginationFilterField[], r: any ) => {
                   const name = r.metadata?.annotations?.[CAPI_ANNOTATIONS.MACHINE_NAME];
 
@@ -272,10 +266,8 @@ export default defineComponent({
         // Note - fetching pods for current page could be a LOT still (probably max of 3k - 300 pods per node x 100 nodes in a page)
         const opt: ActionFindPageArgs = {
           force,
-          pagination: new PaginationArgs({
-            page:     null,
-            pageSize: null,
-            filters:  PaginationParamFilter.createMultipleFields(
+          pagination: new PaginationFilterArgs({
+            filters: PaginationParamFilter.createMultipleFields(
               this.rows.map((r: any) => new PaginationFilterField({
                 field: 'spec.nodeName',
                 value: r.id,
diff --git a/shell/mixins/resource-fetch-api-pagination.js b/shell/mixins/resource-fetch-api-pagination.js
index a9c576d8f2..80a2ec562d 100644
--- a/shell/mixins/resource-fetch-api-pagination.js
+++ b/shell/mixins/resource-fetch-api-pagination.js
@@ -47,6 +47,7 @@ export default {
       const searchFilters = event.filter.searchQuery ? event.filter.searchFields.map((field) => new PaginationFilterField({
         field,
         value: event.filter.searchQuery,
+        exact: false,
       })) : [];
 
       const pagination = new PaginationArgs({
diff --git a/shell/plugins/steve/steve-pagination-utils.ts b/shell/plugins/steve/steve-pagination-utils.ts
index f4b601db90..0134ce838c 100644
--- a/shell/plugins/steve/steve-pagination-utils.ts
+++ b/shell/plugins/steve/steve-pagination-utils.ts
@@ -3,7 +3,9 @@ import { PaginationParam, PaginationFilterField, PaginationParamProjectOrNamespa
 import { NAMESPACE_FILTER_ALL_SYSTEM, NAMESPACE_FILTER_ALL_USER, NAMESPACE_FILTER_P_FULL_PREFIX } from '@shell/utils/namespace-filter';
 import Namespace from '@shell/models/namespace';
 import { uniq } from '@shell/utils/array';
-import { CONFIG_MAP, MANAGEMENT, NODE, POD } from '@shell/config/types';
+import {
+  CONFIG_MAP, MANAGEMENT, NAMESPACE, NODE, POD
+} from '@shell/config/types';
 import { Schema } from 'plugins/steve/schema';
 import { TEMP_VAI_CACHE_MERGED } from '@shell/utils/pagination-utils';
 
@@ -111,9 +113,8 @@ class StevePaginationUtils extends NamespaceProjectFilters {
       { field: 'metadata.creationTimestamp' },
     ],
     [NODE]: [
-      // { field: 'status.nodeInfo.kubeletVersion' }, // Pending API support
-      // { field: 'status.nodeInfo.operatingSystem' }, // Pending API support
-      // { field: 'status.nodeName' }, // Pending API support
+      { field: 'status.nodeInfo.kubeletVersion' },
+      { field: 'status.nodeInfo.operatingSystem' },
     ],
     [POD]: [
       { field: 'spec.containers.image' },
@@ -121,10 +122,12 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     ],
     [MANAGEMENT.NODE]: [
       { field: 'status.nodeName' },
-      // { field: 'status.nodeInfo.kubeletVersion'}, // Pending API support
     ],
     [CONFIG_MAP]: [
-      { field: 'metadata.labels' }
+      { field: 'metadata.labels[harvesterhci.io/cloud-init-template]' }
+    ],
+    [NAMESPACE]: [
+      { field: 'metadata.labels[field.cattle.io/projectId]' }
     ]
   }
 
@@ -342,7 +345,9 @@ class StevePaginationUtils extends NamespaceProjectFilters {
               // Check if the API supports filtering by this field
               this.validateField(validateFields, schema, field.field);
 
-              return `${ this.convertArrayPath(field.field) }${ field.equals ? '=' : '!=' }${ field.value }`;
+              const exactPartial = field.exact ? `'${ field.value }'` : field.value;
+
+              return `${ this.convertArrayPath(field.field) }${ field.equals ? '=' : '!=' }${ exactPartial }`;
             }
 
             return field.value;
diff --git a/shell/types/store/pagination.types.ts b/shell/types/store/pagination.types.ts
index 6dd901e5c9..4080823812 100644
--- a/shell/types/store/pagination.types.ts
+++ b/shell/types/store/pagination.types.ts
@@ -69,14 +69,25 @@ export class PaginationFilterField {
    * Equality field within the object to filter by for example the `=` or `!=` of x=y
    */
   equals: boolean;
+  /**
+   * Match the field exactly. False for partial matches
+   *
+   * Value: pod1
+   * Exact: true. "p" no, "pod", no, "pod1" yes
+   * Exact: false. "p" yes, "pod", yes, "pod1" yes
+   */
+  exact: boolean;
 
   constructor(
-    { field, value, equals = true }:
-    { field?: string; value: string; equals?: boolean; }
+    {
+      field, value, equals = true, exact = true
+    }:
+    { field?: string; value: string; equals?: boolean; exact?: boolean;}
   ) {
     this.field = field;
     this.value = value;
     this.equals = equals;
+    this.exact = exact;
   }
 }
 
@@ -274,6 +285,8 @@ export class PaginationParamProjectOrNamespace extends PaginationParam {
 
 /**
  * Pagination settings sent to actions and persisted to store
+ *
+ * Use this for making pagination requests that utilise the new vai cache backed API
  */
 export class PaginationArgs {
   /**
@@ -358,6 +371,47 @@ export class PaginationArgs {
   }
 }
 
+/**
+ * Wrapper around {@link PaginationArgs}
+ *
+ * Use this for making requests that utilise filtering backed by the new vai cache backed API
+ */
+export class PaginationFilterArgs extends PaginationArgs {
+  /**
+     * Creates an instance of PaginationArgs.
+     *
+     * Contains defaults to avoid creating complex json objects all the time
+     */
+  constructor({
+    sort = [],
+    filters = [],
+    projectsOrNamespaces = [],
+  }:
+  // This would be neater as just Partial<PaginationArgs> but we lose all jsdoc
+  {
+    /**
+     * For definition see {@link PaginationArgs} `sort`
+     */
+    sort?: PaginationSort[],
+    /**
+     * Automatically wrap if not an array
+     *
+     * For definition see {@link PaginationArgs} `filters`
+     */
+    filters?: PaginationParamFilter | PaginationParamFilter[],
+    /**
+     * Automatically wrap if not an array
+     *
+     * For definition see {@link PaginationArgs} `projectsOrNamespaces`
+     */
+    projectsOrNamespaces?: PaginationParamProjectOrNamespace | PaginationParamProjectOrNamespace[],
+  }) {
+    super({
+      page: null, pageSize: null, sort, filters, projectsOrNamespaces
+    });
+  }
+}
+
 /**
  * Overall result of a pagination request.
  *

From 20125fe45883cb991122aa8d78c5e5725cd191b1 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 5 Jun 2024 13:16:59 +0100
Subject: [PATCH 63/71] remove temp code

---
 shell/plugins/steve/steve-pagination-utils.ts |  5 -----
 shell/utils/pagination-utils.ts               | 19 ++-----------------
 2 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/shell/plugins/steve/steve-pagination-utils.ts b/shell/plugins/steve/steve-pagination-utils.ts
index 0134ce838c..d562b07ac4 100644
--- a/shell/plugins/steve/steve-pagination-utils.ts
+++ b/shell/plugins/steve/steve-pagination-utils.ts
@@ -7,7 +7,6 @@ import {
   CONFIG_MAP, MANAGEMENT, NAMESPACE, NODE, POD
 } from '@shell/config/types';
 import { Schema } from 'plugins/steve/schema';
-import { TEMP_VAI_CACHE_MERGED } from '@shell/utils/pagination-utils';
 
 class NamespaceProjectFilters {
   /**
@@ -132,10 +131,6 @@ class StevePaginationUtils extends NamespaceProjectFilters {
   }
 
   private convertArrayPath(path: string): string {
-    if (TEMP_VAI_CACHE_MERGED) {
-      return path;
-    }
-
     if (path.startsWith('metadata.fields.')) {
       const [part1, part2, ...rest] = path.split('.');
 
diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
index bf68383837..44fc155c1a 100644
--- a/shell/utils/pagination-utils.ts
+++ b/shell/utils/pagination-utils.ts
@@ -14,18 +14,6 @@ import { sameArrayObjects } from '@shell/utils/array';
 import { isEqual } from '@shell/utils/object';
 import { STEVE_CACHE } from '@shell/store/features';
 import { getPerformanceSetting } from '@shell/utils/settings';
-import { DEFAULT_PERF_SETTING } from '@shell/config/settings';
-
-/**
- * Given the vai cache changes haven't merged, work around the settings that are blocked by it
- *
- * Once cache is merged (pre 2.9.0) this will be removed
- */
-export const TEMP_VAI_CACHE_MERGED = false;
-/**
- * Given above, just a dev thing
- */
-const TEMP_PERF_ENABLED = false;
 
 /**
  * Helper functions for server side pagination
@@ -46,7 +34,7 @@ class PaginationUtils {
 
   isSteveCacheEnabled({ rootGetters }: any): boolean {
     // We always get Feature flags as part of start up (see `dispatch('features/loadServer')` in loadManagement)
-    return TEMP_VAI_CACHE_MERGED || rootGetters['features/get']?.(STEVE_CACHE);
+    return rootGetters['features/get']?.(STEVE_CACHE);
   }
 
   /**
@@ -63,10 +51,7 @@ class PaginationUtils {
       return false;
     }
 
-    const settings = TEMP_PERF_ENABLED ? {
-      ...DEFAULT_PERF_SETTING.serverPagination,
-      enabled: true,
-    } : this.getSettings({ rootGetters });
+    const settings = this.getSettings({ rootGetters });
 
     // No setting, not enabled
     if (!settings?.enabled) {

From 44e9616166b9f96b684e6a60dcc15b67740c5057 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 5 Jun 2024 13:19:18 +0100
Subject: [PATCH 64/71] fix linting

---
 shell/list/node.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shell/list/node.vue b/shell/list/node.vue
index 1da41ed49f..ef853334e4 100644
--- a/shell/list/node.vue
+++ b/shell/list/node.vue
@@ -9,7 +9,7 @@ import { CAPI as CAPI_ANNOTATIONS } from '@shell/config/labels-annotations.js';
 
 import { defineComponent } from 'vue';
 import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
-import { PaginationArgs, PaginationFilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { PaginationFilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 import {
   CAPI,

From f19bb5f6b3692037a1463272df76b356b0f9ee61 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Mon, 12 Feb 2024 11:35:10 +0000
Subject: [PATCH 65/71] Fetch only specific csp adapter helm apps... instead of
 all helm apps - Also do in parallel with settings (though these might have
 already been fetched)

---
 shell/mixins/brand.js | 53 +++++++++++++++++++++++++++++++++++--------
 1 file changed, 43 insertions(+), 10 deletions(-)

diff --git a/shell/mixins/brand.js b/shell/mixins/brand.js
index 1c4e5edd78..873c4f6b0c 100644
--- a/shell/mixins/brand.js
+++ b/shell/mixins/brand.js
@@ -5,31 +5,64 @@ import { createCssVars } from '@shell/utils/color';
 import { setTitle } from '@shell/config/private-label';
 import { fetchInitialSettings } from '@shell/utils/settings';
 import { setFavIcon, haveSetFavIcon } from '@shell/utils/favicon';
+import { allHash } from '@shell/utils/promise';
+import { PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
-const cspAdaptorApp = ['rancher-csp-adapter', 'rancher-csp-billing-adapter'];
+// For testing these could be changed to something like...
+const cspAdaptorApp = ['rancher-webhooka', 'rancher-webhook'];
+// const cspAdaptorApp = ['rancher-csp-adapter', 'rancher-csp-billing-adapter'];
 
 export const hasCspAdapter = (apps) => {
+  // This can be removed once https://github.com/rancher/dashboard/pull/10349 merges
+  // At the moment we fetch a filtered collection... but still receive updates to all of the resources.
+  // So if any other app changes it will appear in this `apps` collection
   return apps?.find((a) => cspAdaptorApp.includes(a.metadata?.name));
 };
 
 export default {
   async fetch() {
-    // For the login page, the schemas won't be loaded - we don't need the apps in this case
     try {
-      if (this.$store.getters['management/canList'](CATALOG.APP)) {
-        this.apps = await this.$store.dispatch('management/findAll', { type: CATALOG.APP });
-      }
-    } catch (e) {}
+      // Ensure we read the settings even when we are not authenticated
+      const promises = { globalSettings: fetchInitialSettings(this.$store) };
 
-    // Ensure we read the settings even when we are not authenticated
-    try {
-      await fetchInitialSettings(this.$store);
+      // For the login page, the schemas won't be loaded - we don't need the apps in this case
+      if (this.$store.getters['management/canList'](CATALOG.APP)) {
+        debugger;
+        // Restrict the amount of apps we need to fetch
+        // this.$store.getters[`management/paginationEnabled`]()
+        // if (true) {
+        promises.apps = this.$store.dispatch('management/findPage', {
+          type: CATALOG.APP,
+          opt:  { // Of type ActionFindPageArgs
+            pagination: new PaginationArgs({
+              filters: PaginationParamFilter.createSingleField(
+                new PaginationFilterField({ field: 'metadata.name', value: cspAdaptorApp.join(',') })
+              ),
+            })
+            // pagination:  new PaginationFilterField({
+            //   filters: PaginationParamFilter.createSingleField({
+            //     field: 'metadata.name',
+            //     value: cspAdaptorApp.join(',')
+            //   })
+            // }),
+          }
+        });
+        // } else {
+        //   promises.apps = this.$store.dispatch('management/findAll', { type: CATALOG.APP });
+        // }
+      }
+
+      const res = await allHash(promises);
 
       // The favicon is implicitly dependent on the initial settings having already been fetched
       if (!haveSetFavIcon()) {
         setFavIcon(this.$store);
       }
-    } catch (e) {}
+
+      this.apps = res.apps;
+    } catch (e) {
+      console.warn(e);
+    }
 
     // Setting this up front will remove `computed` churn, and we only care that we've initialised them
     this.haveAppsAndSettings = !!this.apps && !!this.globalSettings;

From 2a65a4db4bb91c3e06b8c02cabc549342151306b Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Mon, 12 Feb 2024 14:29:51 +0000
Subject: [PATCH 66/71] Add unit tests

---
 shell/mixins/__tests__/brand.spec.ts | 114 +++++++++++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 shell/mixins/__tests__/brand.spec.ts

diff --git a/shell/mixins/__tests__/brand.spec.ts b/shell/mixins/__tests__/brand.spec.ts
new file mode 100644
index 0000000000..85d1e09027
--- /dev/null
+++ b/shell/mixins/__tests__/brand.spec.ts
@@ -0,0 +1,114 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import Blank from '@shell/components/templates/blank.vue';
+import { CATALOG, MANAGEMENT } from '@shell/config/types';
+import { _ALL_IF_AUTHED } from '@shell/plugins/dashboard-store/actions';
+
+describe('brandMixin', () => {
+  const createWrapper = () => {
+    const localVue = createLocalVue();
+
+    localVue.use(Vuex);
+
+    const store = new Vuex.Store({
+      state:   {},
+      actions: {
+        'management/findAll': (type, opt) => {
+          if (type === MANAGEMENT.SETTING) {
+            return [];
+          }
+          if (type === CATALOG.APP) {
+            return [];
+          }
+        }
+      },
+      getters: {
+        'auth/loggedIn':        () => true,
+        'management/canList':   () => () => true,
+        'management/schemaFor': () => () => undefined
+      }
+    });
+
+    const spyManagementFindAll = jest.spyOn(store, 'dispatch');
+
+    const wrapper = shallowMount(Blank, {
+      store,
+      localVue,
+      stubs: ['router-link', 'router-view'],
+      mocks: { $config: {}, $route: { path: '' } }
+    });
+
+    return {
+      wrapper,
+      store,
+      spyManagementFindAll
+    };
+  };
+
+  it('should make correct requests', async() => {
+    const { wrapper, spyManagementFindAll } = createWrapper();
+
+    // NOTE - wrapper.vm.$options.fetch() doesn't work
+    await wrapper.vm.$options.fetch.apply(wrapper.vm, []);
+
+    expect(spyManagementFindAll).toHaveBeenNthCalledWith(1, 'management/findAll', {
+      type: MANAGEMENT.SETTING,
+      opt:  {
+        load: _ALL_IF_AUTHED, url: `/v1/${ MANAGEMENT.SETTING }`, redirectUnauthorized: false
+      }
+    });
+    expect(spyManagementFindAll).toHaveBeenNthCalledWith(2, 'management/findAll', { type: CATALOG.APP, opt: { filter: { 'metadata.name': 'rancher-csp-adapter,rancher-csp-billing-adapter' } } });
+  });
+
+  describe('cspAdapter', () => {
+    it('should have correct csp values (off)', async() => {
+      const { wrapper, store } = createWrapper();
+
+      const spyManagementFindAll = jest.spyOn(store, 'dispatch').mockImplementation((_, options) => {
+        const { type } = options as any;
+
+        if (type === MANAGEMENT.SETTING) {
+          return Promise.resolve([]);
+        }
+        if (type === CATALOG.APP) {
+          return Promise.resolve([]);
+        }
+
+        return Promise.reject(new Error('reason'));
+      });
+
+      // NOTE - wrapper.vm.$options.fetch() doesn't work
+      await wrapper.vm.$options.fetch.apply(wrapper.vm, []);
+
+      expect(spyManagementFindAll).toHaveBeenCalledTimes(2);
+
+      expect(wrapper.vm.canCalcCspAdapter).toBeTruthy();
+      expect(wrapper.vm.cspAdapter).toBeFalsy();
+    });
+
+    it.each(['rancher-csp-adapter', 'rancher-csp-billing-adapter'])('should have correct csp values (on - %p )', async(chartName) => {
+      const { wrapper, store } = createWrapper();
+
+      const spyManagementFindAll = jest.spyOn(store, 'dispatch').mockImplementation((_, options) => {
+        const { type } = options as any;
+
+        if (type === MANAGEMENT.SETTING) {
+          return Promise.resolve([]);
+        }
+        if (type === CATALOG.APP) {
+          return Promise.resolve([{ metadata: { name: chartName } }]);
+        }
+
+        return Promise.reject(new Error('reason'));
+      });
+
+      // NOTE - wrapper.vm.$options.fetch() doesn't work
+      await wrapper.vm.$options.fetch.apply(wrapper.vm, []);
+
+      expect(spyManagementFindAll).toHaveBeenCalledTimes(2);
+
+      expect(wrapper.vm.canCalcCspAdapter).toBeTruthy();
+      expect(wrapper.vm.cspAdapter).toBeTruthy();
+    });
+  });
+});

From fd09dc167b9a169d63f3788cae99fcf67b8de417 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 5 Jun 2024 14:58:42 +0100
Subject: [PATCH 67/71] Fix following merge

---
 shell/mixins/brand.js | 27 +++++++++------------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/shell/mixins/brand.js b/shell/mixins/brand.js
index 873c4f6b0c..927f1709c6 100644
--- a/shell/mixins/brand.js
+++ b/shell/mixins/brand.js
@@ -6,7 +6,7 @@ import { setTitle } from '@shell/config/private-label';
 import { fetchInitialSettings } from '@shell/utils/settings';
 import { setFavIcon, haveSetFavIcon } from '@shell/utils/favicon';
 import { allHash } from '@shell/utils/promise';
-import { PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { PaginationFilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 // For testing these could be changed to something like...
 const cspAdaptorApp = ['rancher-webhooka', 'rancher-webhook'];
@@ -27,29 +27,22 @@ export default {
 
       // For the login page, the schemas won't be loaded - we don't need the apps in this case
       if (this.$store.getters['management/canList'](CATALOG.APP)) {
-        debugger;
         // Restrict the amount of apps we need to fetch
         // this.$store.getters[`management/paginationEnabled`]()
         // if (true) {
         promises.apps = this.$store.dispatch('management/findPage', {
           type: CATALOG.APP,
           opt:  { // Of type ActionFindPageArgs
-            pagination: new PaginationArgs({
-              filters: PaginationParamFilter.createSingleField(
-                new PaginationFilterField({ field: 'metadata.name', value: cspAdaptorApp.join(',') })
-              ),
+            pagination: new PaginationFilterArgs({
+              filters: PaginationParamFilter.createMultipleFields(cspAdaptorApp.map(
+                (t) => new PaginationFilterField({
+                  field: 'metadata.name',
+                  value: t,
+                })
+              )),
             })
-            // pagination:  new PaginationFilterField({
-            //   filters: PaginationParamFilter.createSingleField({
-            //     field: 'metadata.name',
-            //     value: cspAdaptorApp.join(',')
-            //   })
-            // }),
           }
         });
-        // } else {
-        //   promises.apps = this.$store.dispatch('management/findAll', { type: CATALOG.APP });
-        // }
       }
 
       const res = await allHash(promises);
@@ -60,9 +53,7 @@ export default {
       }
 
       this.apps = res.apps;
-    } catch (e) {
-      console.warn(e);
-    }
+    } catch (e) { }
 
     // Setting this up front will remove `computed` churn, and we only care that we've initialised them
     this.haveAppsAndSettings = !!this.apps && !!this.globalSettings;

From 3e091eca4766d0022052a66204d3421c8a77f853 Mon Sep 17 00:00:00 2001
From: Richard Cox <ricox@suse.com>
Date: Mon, 6 Jan 2025 17:23:58 +0000
Subject: [PATCH 68/71] fixes / improvements

---
 shell/config/settings.ts      |  1 +
 shell/mixins/brand.js         | 51 ++++++++------------------------
 shell/pages/support/index.vue | 10 +++----
 shell/utils/cspAdaptor.ts     | 55 +++++++++++++++++++++++++++++++++++
 4 files changed, 72 insertions(+), 45 deletions(-)
 create mode 100644 shell/utils/cspAdaptor.ts

diff --git a/shell/config/settings.ts b/shell/config/settings.ts
index 43c76e5bec..a68e3d2953 100644
--- a/shell/config/settings.ts
+++ b/shell/config/settings.ts
@@ -280,6 +280,7 @@ export const DEFAULT_PERF_SETTING: PerfSettings = {
             enabled: [
               { resource: CAPI.RANCHER_CLUSTER, context: ['home', 'side-bar'] },
               { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
+              { resource: CATALOG.APP, context: ['branding'] },
             ],
             generic: false,
           }
diff --git a/shell/mixins/brand.js b/shell/mixins/brand.js
index aff6ef2232..38adf7576c 100644
--- a/shell/mixins/brand.js
+++ b/shell/mixins/brand.js
@@ -1,50 +1,21 @@
 import { mapGetters } from 'vuex';
-import { CATALOG, MANAGEMENT } from '@shell/config/types';
+import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import { createCssVars } from '@shell/utils/color';
 import { setTitle } from '@shell/config/private-label';
 import { setFavIcon, haveSetFavIcon } from '@shell/utils/favicon';
 import { allHash } from '@shell/utils/promise';
-import { FilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
-
-// For testing these could be changed to something like...
-const cspAdaptorApp = ['rancher-webhooka', 'rancher-webhook'];
-// const cspAdaptorApp = ['rancher-csp-adapter', 'rancher-csp-billing-adapter'];
-
-export const hasCspAdapter = (apps) => {
-  // This can be removed once https://github.com/rancher/dashboard/pull/10349 merges
-  // At the moment we fetch a filtered collection... but still receive updates to all of the resources.
-  // So if any other app changes it will appear in this `apps` collection
-  return apps?.find((a) => cspAdaptorApp.includes(a.metadata?.name));
-};
+import { fetchInitialSettings } from '@shell/utils/settings';
+import CspAdapterUtils from '@shell/utils/cspAdaptor';
 
 export default {
   async fetch() {
     try {
-      // Ensure we read the settings even when we are not authenticated
-      const promises = { globalSettings: fetchInitialSettings(this.$store) };
-
-      // For the login page, the schemas won't be loaded - we don't need the apps in this case
-      if (this.$store.getters['management/canList'](CATALOG.APP)) {
-        // Restrict the amount of apps we need to fetch
-        // this.$store.getters[`management/paginationEnabled`]()
-        // if (true) {
-        promises.apps = this.$store.dispatch('management/findPage', {
-          type: CATALOG.APP,
-          opt:  { // Of type ActionFindPageArgs
-            pagination: new PaginationFilterArgs({
-              filters: PaginationParamFilter.createMultipleFields(cspAdaptorApp.map(
-                (t) => new PaginationFilterField({
-                  field: 'metadata.name',
-                  value: t,
-                })
-              )),
-            })
-          }
-        });
-      }
-
-      const res = await allHash(promises);
+      const res = await allHash({
+        // Ensure we read the settings even when we are not authenticated
+        globalSettings: fetchInitialSettings(this.$store),
+        apps:           CspAdapterUtils.fetchCspAdaptorApp(this.$store),
+      });
 
       // The favicon is implicitly dependent on the initial settings having already been fetched
       if (!haveSetFavIcon()) {
@@ -59,7 +30,9 @@ export default {
   },
 
   data() {
-    return { apps: null, haveAppsAndSettings: null };
+    return {
+      apps: null, haveAppsAndSettings: null, canPaginate: false
+    };
   },
 
   computed: {
@@ -113,7 +86,7 @@ export default {
       // Note! this used to be `findBy(this.app)` however for that case we lost reactivity on the collection
       // (computed fires before fetch, fetch happens and update apps, computed would not fire again - even with vue.set)
       // So use `.find` in method instead
-      return hasCspAdapter(this.apps);
+      return CspAdapterUtils.hasCspAdapter({ $store: this.$store, apps: this.apps });
     },
 
     canCalcCspAdapter() {
diff --git a/shell/pages/support/index.vue b/shell/pages/support/index.vue
index cae7611e6b..d43e27439c 100644
--- a/shell/pages/support/index.vue
+++ b/shell/pages/support/index.vue
@@ -2,13 +2,13 @@
 import BannerGraphic from '@shell/components/BannerGraphic';
 import IndentedPanel from '@shell/components/IndentedPanel';
 import CommunityLinks from '@shell/components/CommunityLinks';
-import { CATALOG, MANAGEMENT } from '@shell/config/types';
+import { MANAGEMENT } from '@shell/config/types';
 import { getVendor } from '@shell/config/private-label';
 import { SETTING } from '@shell/config/settings';
 import { addParam } from '@shell/utils/url';
 import { isRancherPrime } from '@shell/config/version';
-import { hasCspAdapter } from '@shell/mixins/brand';
 import TabTitle from '@shell/components/TabTitle';
+import CspAdapterUtils from '@shell/utils/cspAdaptor';
 
 export default {
 
@@ -42,9 +42,7 @@ export default {
       return setting;
     };
 
-    if ( this.$store.getters['management/canList'](CATALOG.APP) ) {
-      this.apps = await this.$store.dispatch('management/findAll', { type: CATALOG.APP });
-    }
+    this.apps = await CspAdapterUtils.fetchCspAdaptorApp(this.$store);
     this.brandSetting = await fetchOrCreateSetting(SETTING.BRAND, '');
     this.serverUrlSetting = await fetchOrCreateSetting(SETTING.SERVER_URL, '');
     this.uiIssuesSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES });
@@ -75,7 +73,7 @@ export default {
 
   computed: {
     cspAdapter() {
-      return hasCspAdapter(this.apps);
+      return CspAdapterUtils.hasCspAdapter({ $store: this.$store, apps: this.apps });
     },
 
     hasSupport() {
diff --git a/shell/utils/cspAdaptor.ts b/shell/utils/cspAdaptor.ts
new file mode 100644
index 0000000000..5fc3092afc
--- /dev/null
+++ b/shell/utils/cspAdaptor.ts
@@ -0,0 +1,55 @@
+// For testing these could be changed to something like...
+
+import { CATALOG } from '@shell/config/types';
+import { FilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { VuexStore } from '@shell/types/store/vuex';
+
+const cspAdaptorApp = ['rancher-csp-adapter', 'rancher-csp-billing-adapter'];
+// For testing above line could be replaced with below line...
+// const cspAdaptorApp = ['rancher-webhooka', 'rancher-webhook'];
+
+/**
+ * Helpers in order to
+ */
+class CspAdapterUtils {
+  static canPagination($store: VuexStore): boolean {
+    return $store.getters[`management/paginationEnabled`]({ id: CATALOG.APP, context: 'branding' });
+  }
+
+  static fetchCspAdaptorApp($store: VuexStore): Promise<any> {
+    // For the login page, the schemas won't be loaded - we don't need the apps in this case
+    if ($store.getters['management/canList'](CATALOG.APP)) {
+      if (CspAdapterUtils.canPagination($store)) {
+        // Restrict the amount of apps we need to fetch
+        return $store.dispatch('management/findPage', {
+          type: CATALOG.APP,
+          opt:  { // Of type ActionFindPageArgs
+            pagination: new FilterArgs({
+              filters: PaginationParamFilter.createMultipleFields(cspAdaptorApp.map(
+                (t) => new PaginationFilterField({
+                  field: 'metadata.name',
+                  value: t,
+                })
+              )),
+            })
+          }
+        });
+      }
+
+      return $store.dispatch('management/findAll', { type: CATALOG.APP });
+    }
+
+    return Promise.resolve([]);
+  }
+
+  static hasCspAdapter({ $store, apps }: { $store: VuexStore, apps: any[]}): Object {
+    if (CspAdapterUtils.canPagination($store)) {
+      // For paginated world the apps will have been filtered server side
+      return apps?.[0];
+    }
+
+    return apps?.find((a) => cspAdaptorApp.includes(a.metadata?.name));
+  }
+}
+
+export default CspAdapterUtils;

From 39dad2861125345ab9cae903194e1a5701f1b1c7 Mon Sep 17 00:00:00 2001
From: Richard Cox <ricox@suse.com>
Date: Mon, 6 Jan 2025 17:23:58 +0000
Subject: [PATCH 69/71] fixes / improvements

---
 shell/utils/cspAdaptor.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/shell/utils/cspAdaptor.ts b/shell/utils/cspAdaptor.ts
index 5fc3092afc..d80772f506 100644
--- a/shell/utils/cspAdaptor.ts
+++ b/shell/utils/cspAdaptor.ts
@@ -43,12 +43,8 @@ class CspAdapterUtils {
   }
 
   static hasCspAdapter({ $store, apps }: { $store: VuexStore, apps: any[]}): Object {
-    if (CspAdapterUtils.canPagination($store)) {
-      // For paginated world the apps will have been filtered server side
-      return apps?.[0];
-    }
-
-    return apps?.find((a) => cspAdaptorApp.includes(a.metadata?.name));
+    // In theory this should contain the filtered apps when pagination is on, and all apps when off. Keep filtering though in both cases just in case
+    return !!apps?.find((a) => cspAdaptorApp.includes(a.metadata?.name));
   }
 }
 

From 84c89bb7bac8a65825de6a04eee9f453e5eae2b4 Mon Sep 17 00:00:00 2001
From: Richard Cox <ricox@suse.com>
Date: Tue, 7 Jan 2025 10:34:01 +0000
Subject: [PATCH 70/71] fix

---
 shell/utils/cspAdaptor.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/shell/utils/cspAdaptor.ts b/shell/utils/cspAdaptor.ts
index d80772f506..6bbffb3cb1 100644
--- a/shell/utils/cspAdaptor.ts
+++ b/shell/utils/cspAdaptor.ts
@@ -4,7 +4,7 @@ import { CATALOG } from '@shell/config/types';
 import { FilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { VuexStore } from '@shell/types/store/vuex';
 
-const cspAdaptorApp = ['rancher-csp-adapter', 'rancher-csp-billing-adapter'];
+const CSP_ADAPTER_APPS = ['rancher-csp-adapter', 'rancher-csp-billing-adapter'];
 // For testing above line could be replaced with below line...
 // const cspAdaptorApp = ['rancher-webhooka', 'rancher-webhook'];
 
@@ -25,7 +25,7 @@ class CspAdapterUtils {
           type: CATALOG.APP,
           opt:  { // Of type ActionFindPageArgs
             pagination: new FilterArgs({
-              filters: PaginationParamFilter.createMultipleFields(cspAdaptorApp.map(
+              filters: PaginationParamFilter.createMultipleFields(CSP_ADAPTER_APPS.map(
                 (t) => new PaginationFilterField({
                   field: 'metadata.name',
                   value: t,
@@ -44,7 +44,7 @@ class CspAdapterUtils {
 
   static hasCspAdapter({ $store, apps }: { $store: VuexStore, apps: any[]}): Object {
     // In theory this should contain the filtered apps when pagination is on, and all apps when off. Keep filtering though in both cases just in case
-    return !!apps?.find((a) => cspAdaptorApp.includes(a.metadata?.name));
+    return apps?.find((a) => CSP_ADAPTER_APPS.includes(a.metadata?.name));
   }
 }
 

From 14d94b146f07ecb4d272acf8c888f1b63af74f6d Mon Sep 17 00:00:00 2001
From: Richard Cox <ricox@suse.com>
Date: Fri, 20 Jun 2025 15:50:51 +0100
Subject: [PATCH 71/71] fix unit tests

---
 shell/mixins/__tests__/brand.spec.ts | 122 +++++++++++++++++++--------
 1 file changed, 89 insertions(+), 33 deletions(-)

diff --git a/shell/mixins/__tests__/brand.spec.ts b/shell/mixins/__tests__/brand.spec.ts
index 85d1e09027..05e6b2dec2 100644
--- a/shell/mixins/__tests__/brand.spec.ts
+++ b/shell/mixins/__tests__/brand.spec.ts
@@ -1,63 +1,119 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import Vuex from 'vuex';
-import Blank from '@shell/components/templates/blank.vue';
+import { mount } from '@vue/test-utils';
 import { CATALOG, MANAGEMENT } from '@shell/config/types';
-import { _ALL_IF_AUTHED } from '@shell/plugins/dashboard-store/actions';
+import Brand from '@shell/mixins/brand';
 
 describe('brandMixin', () => {
-  const createWrapper = () => {
-    const localVue = createLocalVue();
+  const createWrapper = (vaiOn = false) => {
+    const Component = {
+      template: '<div></div>',
+      mixins:   [Brand],
+    };
 
-    localVue.use(Vuex);
+    const data = {
+      apps: null, haveAppsAndSettings: null, canPaginate: false
+    };
 
-    const store = new Vuex.Store({
-      state:   {},
-      actions: {
-        'management/findAll': (type, opt) => {
-          if (type === MANAGEMENT.SETTING) {
+    const store = {
+      dispatch: (action, ...args) => {
+        switch (action) {
+        case 'management/findAll':
+          if (args[0] === MANAGEMENT.SETTING) {
             return [];
           }
-          if (type === CATALOG.APP) {
+          if (args[0] === CATALOG.APP) {
             return [];
           }
+          break;
         }
       },
       getters: {
         'auth/loggedIn':        () => true,
+        'auth/fromHeader':      () => false,
+        'management/byId':      () => undefined,
         'management/canList':   () => () => true,
-        'management/schemaFor': () => () => undefined
+        'management/schemaFor': (type: string) => {
+          switch (type) {
+          case MANAGEMENT.SETTING:
+            return { linkFor: () => undefined };
+          }
+        },
+        'management/generation':        () => undefined,
+        'management/paginationEnabled': () => vaiOn,
+        'management/all':               (type: string) => {
+          switch (type) {
+          case MANAGEMENT.SETTING:
+            return [];
+          }
+        },
       }
-    });
+    };
 
+    const wrapper = mount(
+      Component,
+      {
+        data:   () => data,
+        global: { mocks: { $store: store } }
+      });
     const spyManagementFindAll = jest.spyOn(store, 'dispatch');
 
-    const wrapper = shallowMount(Blank, {
-      store,
-      localVue,
-      stubs: ['router-link', 'router-view'],
-      mocks: { $config: {}, $route: { path: '' } }
-    });
-
     return {
       wrapper,
       store,
-      spyManagementFindAll
+      spyManagementFindAll,
     };
   };
 
-  it('should make correct requests', async() => {
-    const { wrapper, spyManagementFindAll } = createWrapper();
+  describe('should make correct requests', () => {
+    it('vai off', async() => {
+      const { wrapper, spyManagementFindAll } = createWrapper(false);
 
-    // NOTE - wrapper.vm.$options.fetch() doesn't work
-    await wrapper.vm.$options.fetch.apply(wrapper.vm, []);
+      // NOTE - wrapper.vm.$options.fetch() doesn't work
+      await wrapper.vm.$options.fetch.apply(wrapper.vm);
 
-    expect(spyManagementFindAll).toHaveBeenNthCalledWith(1, 'management/findAll', {
-      type: MANAGEMENT.SETTING,
-      opt:  {
-        load: _ALL_IF_AUTHED, url: `/v1/${ MANAGEMENT.SETTING }`, redirectUnauthorized: false
-      }
+      // wrapper.vm.$nextTick();
+      expect(spyManagementFindAll).toHaveBeenNthCalledWith(1, 'management/findAll', {
+        type: MANAGEMENT.SETTING,
+        opt:  {
+          load: 'multi', redirectUnauthorized: false, url: `/v1/${ MANAGEMENT.SETTING }s`
+        }
+      });
+      expect(spyManagementFindAll).toHaveBeenNthCalledWith(2, 'management/findAll', { type: CATALOG.APP });
+    });
+
+    it('vai on', async() => {
+      const { wrapper, spyManagementFindAll } = createWrapper(true);
+
+      // NOTE - wrapper.vm.$options.fetch() doesn't work
+      await wrapper.vm.$options.fetch.apply(wrapper.vm);
+
+      expect(spyManagementFindAll).toHaveBeenNthCalledWith(1, 'management/findAll', {
+        type: MANAGEMENT.SETTING,
+        opt:  {
+          load: 'multi', url: `/v1/${ MANAGEMENT.SETTING }s`, redirectUnauthorized: false
+        }
+      });
+      expect(spyManagementFindAll).toHaveBeenNthCalledWith(2, 'management/findPage', {
+        type: CATALOG.APP,
+        opt:  {
+          pagination: {
+            filters: [{
+              equals: true,
+              fields: [{
+                equals: true, exact: true, field: 'metadata.name', value: 'rancher-csp-adapter'
+              }, {
+                equals: true, exact: true, field: 'metadata.name', value: 'rancher-csp-billing-adapter'
+              }],
+              param: 'filter'
+            }],
+            labelSelector:        undefined,
+            page:                 null,
+            pageSize:             null,
+            projectsOrNamespaces: [],
+            sort:                 []
+          }
+        }
+      });
     });
-    expect(spyManagementFindAll).toHaveBeenNthCalledWith(2, 'management/findAll', { type: CATALOG.APP, opt: { filter: { 'metadata.name': 'rancher-csp-adapter,rancher-csp-billing-adapter' } } });
   });
 
   describe('cspAdapter', () => {