@rancher/shell 3.0.8 → 3.0.9-rc.1

package/apis/intf/modal.ts

@@ -11,6 +11,44 @@ export interface ModalConfig {
    * ```ts
    * props: { title: 'Hello Modal', isVisible: true }
    * ```
+   *
+   * Props can include callback functions to be invoked when confirming a modal.
+   *
+   * Example with a callback function:
+   *
+   * ```ts
+   * import MyCustomModal from './MyCustomModal.vue';
+   *
+   * export default {
+   *   methods: {
+   *     myAction() {
+   *       console.log('Performed an action');
+   *     },
+   *     showModal() {
+   *       this.$shell.modal.open(MyCustomModal, {
+   *         props: { onConfirm: this.myAction }
+   *       });
+   *     }
+   *   }
+   * }
+   * ```
+   *
+   * ```ts
+   * export default {
+   *   props: {
+   *     onConfirm: {
+   *       type: Function,
+   *       required: true
+   *     }
+   *   },
+   *   methods:.
+   *     confirm() {
+   *       this.onConfirm();
+   *       this.$emit('close');
+   *     }
+   *   }
+   * }
+   * ```
    */
   props?: Record<string, any>;
 

package/apis/intf/slide-in.ts

@@ -65,7 +65,9 @@ export interface SlideInConfig {
    * Useful for passing additional information or context to the component rendered inside the Slide-In window
    *
    */
-  [key: string]: any;
+  props?: {
+    [key: string]: any;
+  };
 }
 
 /**

package/apis/shell/__tests__/slide-in.test.ts

@@ -51,4 +51,40 @@ describe('slideInApiImpl', () => {
       componentProps: { ...config }, // The implementation spreads the config
     });
   });
+
+  it('should open a slide-in panel with an undefined config gracefully', () => {
+    // 3. Act
+    slideInApi.open(MockComponent, undefined);
+
+    // 4. Assert
+    expect(mockCommit).toHaveBeenCalledTimes(1);
+    expect(mockCommit).toHaveBeenCalledWith('slideInPanel/open', {
+      component:      MockComponent,
+      componentProps: {},
+    });
+  });
+
+  it('should handle config with props property', () => {
+    const config = {
+      title: 'Test Panel',
+      props: {
+        foo: 'bar',
+        baz: 123
+      }
+    };
+
+    // 3. Act
+    slideInApi.open(MockComponent, config);
+
+    // 4. Assert
+    expect(mockCommit).toHaveBeenCalledTimes(1);
+    expect(mockCommit).toHaveBeenCalledWith('slideInPanel/open', {
+      component:      MockComponent,
+      componentProps: {
+        title: 'Test Panel',
+        foo:   'bar',
+        baz:   123
+      },
+    });
+  });
 });

package/apis/shell/slide-in.ts

@@ -25,9 +25,13 @@ export class SlideInApiImpl implements SlideInApi {
    * @param config - Slide-In configuration object
    */
   public open(component: Component, config?: SlideInConfig): void {
+    const props = config?.props || {};
+
+    delete config?.props;
+
     this.store.commit('slideInPanel/open', {
       component,
-      componentProps: { ...config || {} }
+      componentProps: { ...(config || {}), ...props }
     });
   }
 }

package/detail/catalog.cattle.io.app.vue

@@ -159,6 +159,7 @@ export default {
           :scrolling="false"
           :value="valuesYaml"
           editor-mode="VIEW_CODE"
+          mode="view"
         />
       </Tab>
       <Tab

package/edit/workload/__tests__/index.test.ts

@@ -4,100 +4,138 @@ import Workload from '@shell/edit/workload/index.vue';
 jest.mock('@shell/models/secret', () => ({ onmessage: jest.fn() }));
 
 describe('component: Workload', () => {
-  it.each([
-    [
-      `pods \"test\" is forbidden: violates PodSecurity \"restricted:latest\": allowPrivilegeEscalation != false (container \"container-0\" must set securityContext.allowPrivilegeEscalation=false), unrestricted capabilities (container \"container-0\" must set securityContext.capabilities.drop=[\"ALL\"]), runAsNonRoot != true (container \"container-0\" must not set securityContext.runAsNonRoot=false), seccompProfile (pod or container \"container-0\" must set securityContext.seccompProfile.type to \"RuntimeDefault\" or \"Localhost\")`,
-      `workload.error, \"test\",\"restricted:latest\"`
-    ]
-  ])('should map error message into object', (oldMessage, newMessage) => {
-    const mockedValidationMixin = {
-      methods: {
-        fvFormIsValid:           jest.fn(),
-        type:                    jest.fn(),
-        fvGetAndReportPathRules: jest.fn(),
-      },
-      computed: { fvUnreportedValidationErrors: jest.fn().mockReturnValue([]) }
-    };
-    const mockedCREMixin = {};
-    const mockedWorkloadMixin = {
-      methods: {
-        doneRoute:                   jest.fn(),
-        workloadSubTypes:            jest.fn(),
-        applyHooks:                  jest.fn(),
-        save:                        jest.fn(),
-        selectType:                  jest.fn(),
-        isCronJob:                   jest.fn(),
-        spec:                        jest.fn(),
-        isReplicable:                jest.fn(),
-        isStatefulSet:               jest.fn(),
-        headlessServices:            jest.fn(),
-        defaultTab:                  jest.fn(),
-        allContainers:               jest.fn(),
-        isPod:                       jest.fn(),
-        tabWeightMap:                jest.fn(),
-        podLabels:                   jest.fn(),
-        podTemplateSpec:             jest.fn(),
-        isLoadingSecondaryResources: jest.fn(),
-        allNodes:                    jest.fn(),
-        allNodeObjects:              jest.fn(),
-        clearPvcFormState:           jest.fn(),
-        savePvcHookName:             jest.fn(),
-        namespacedConfigMaps:        jest.fn(),
-        podAnnotations:              jest.fn(),
-        isJob:                       jest.fn(),
-        podFsGroup:                  jest.fn(),
-        namespacedSecrets:           jest.fn(),
-        registerBeforeHook:          jest.fn(),
-        pvcs:                        jest.fn(),
-        // tabWeightMap:     jest.fn(),
-      }
-    };
+  const baseMockedValidationMixin = {
+    methods: {
+      fvFormIsValid:           jest.fn(),
+      type:                    jest.fn(),
+      fvGetAndReportPathRules: jest.fn(),
+    },
+    computed: { fvUnreportedValidationErrors: jest.fn().mockReturnValue([]) }
+  };
+  const baseMockedCREMixin = {};
+  const baseMockedWorkloadMixin = {
+    methods: {
+      doneRoute:                   jest.fn(),
+      workloadSubTypes:            jest.fn(),
+      applyHooks:                  jest.fn(),
+      save:                        jest.fn(),
+      selectType:                  jest.fn(),
+      isCronJob:                   jest.fn(),
+      spec:                        jest.fn(),
+      isReplicable:                jest.fn(),
+      isStatefulSet:               jest.fn(),
+      headlessServices:            jest.fn(),
+      defaultTab:                  jest.fn(),
+      allContainers:               jest.fn(),
+      isPod:                       jest.fn(),
+      tabWeightMap:                jest.fn(),
+      podLabels:                   jest.fn(),
+      podTemplateSpec:             jest.fn(),
+      isLoadingSecondaryResources: jest.fn(),
+      allNodes:                    jest.fn(),
+      clearPvcFormState:           jest.fn(),
+      savePvcHookName:             jest.fn(),
+      namespacedConfigMaps:        jest.fn(),
+      podAnnotations:              jest.fn(),
+      isJob:                       jest.fn(),
+      podFsGroup:                  jest.fn(),
+      namespacedSecrets:           jest.fn(),
+      registerBeforeHook:          jest.fn(),
+      pvcs:                        jest.fn(),
+    }
+  };
 
-    const MockedWorkload = { ...Workload, mixins: [mockedValidationMixin, mockedCREMixin, mockedWorkloadMixin] };
-    const wrapper = shallowMount(MockedWorkload, {
-      props: {
-        value:         { metadata: {}, spec: { template: {} } },
-        params:        {},
-        fvFormIsValid: {}
-      },
+  describe('component: Workload', () => {
+    it.each([
+      [
+        `pods \"test\" is forbidden: violates PodSecurity \"restricted:latest\": allowPrivilegeEscalation != false (container \"container-0\" must set securityContext.allowPrivilegeEscalation=false), unrestricted capabilities (container \"container-0\" must set securityContext.capabilities.drop=[\"ALL\"]), runAsNonRoot != true (container \"container-0\" must not set securityContext.runAsNonRoot=false), seccompProfile (pod or container \"container-0\" must set securityContext.seccompProfile.type to \"RuntimeDefault\" or \"Localhost\")`,
+        `workload.error, \"test\",\"restricted:latest\"`
+      ]
+    ])('should map error message into object', (oldMessage, newMessage) => {
+    // For this test, allNodeObjects is just a jest.fn() in the base mixin
+      const MockedWorkload = { ...Workload, mixins: [baseMockedValidationMixin, baseMockedCREMixin, { ...baseMockedWorkloadMixin, computed: { allNodeObjects: jest.fn() } }] };
+      const wrapper = shallowMount(MockedWorkload, {
+        props: {
+          value:         { metadata: {}, spec: { template: {} } },
+          params:        {},
+          fvFormIsValid: {}
+        },
 
-      global: {
-        mocks: {
-          $route:      { params: {}, query: {} },
-          $router:     { applyQuery: jest.fn() },
-          $fetchState: { pending: false },
-          $store:      {
-            getters: {
-              'cluster/schemaFor': jest.fn(),
-              'type-map/labelFor': jest.fn(),
-              'i18n/t':            (text: string, v: {[key:string]: string}) => {
-                return `${ text }, ${ Object.values(v || {}) }`;
+        global: {
+          mocks: {
+            $route:      { params: {}, query: {} },
+            $router:     { applyQuery: jest.fn() },
+            $fetchState: { pending: false },
+            $store:      {
+              getters: {
+                'cluster/schemaFor': jest.fn(),
+                'type-map/labelFor': jest.fn(),
+                'i18n/t':            (text: string, v: {[key:string]: string}) => {
+                  return `${ text }, ${ Object.values(v || {}) }`;
+                },
               },
             },
           },
-        },
 
-        stubs: {
-          Tab:                 true,
-          LabeledInput:        true,
-          VolumeClaimTemplate: true,
-          Networking:          true,
-          Job:                 true,
-          NodeScheduling:      true,
-          PodAffinity:         true,
-          Tolerations:         true,
-          Storage:             true,
-          Tabbed:              true,
-          LabeledSelect:       true,
-          NameNsDescription:   true,
-          CruResource:         true,
-          KeyValue:            true
+          stubs: {
+            Tab:                 true,
+            LabeledInput:        true,
+            VolumeClaimTemplate: true,
+            Networking:          true,
+            Job:                 true,
+            NodeScheduling:      true,
+            PodAffinity:         true,
+            Tolerations:         true,
+            Storage:             true,
+            Tabbed:              true,
+            LabeledSelect:       true,
+            NameNsDescription:   true,
+            CruResource:         true,
+            KeyValue:            true
+          },
         },
-      },
+      });
+
+      const result = (wrapper.vm as any).mapError(oldMessage).message;
+
+      expect(result).toStrictEqual(newMessage);
     });
 
-    const result = (wrapper.vm as any).mapError(oldMessage).message;
+    describe('secondaryResourceDataConfig', () => {
+      it('should filter out nodes with control-plane or etcd taints from workerNodes parsingFunc', () => {
+        const allNodeObjects = [
+          {
+            id:   'node-1',
+            spec: { taints: [{ key: 'node-role.kubernetes.io/control-plane', effect: 'NoSchedule' }] }
+          },
+          {
+            id:   'node-2',
+            spec: { taints: [{ key: 'node-role.kubernetes.io/etcd', effect: 'NoSchedule' }] }
+          },
+          {
+            id:   'node-3',
+            spec: { taints: [{ key: 'node-role.kubernetes.io/worker', effect: 'NoSchedule' }] }
+          },
+          {
+            id:   'node-4',
+            spec: { taints: [] }
+          },
+          {
+            id:   'node-5',
+            spec: {}
+          },
+          {
+            id:   'node-6',
+            spec: null
+          }
+        ];
+
+        const { data } = (Workload.mixins[2] as any).methods.secondaryResourceDataConfig.apply({ value: { metadata: { namespace: 'test' } } });
+        const workerNodesParsingFunc = data.node.applyTo.find((r: any) => r.var === 'workerNodes').parsingFunc;
+        const result = workerNodesParsingFunc(allNodeObjects);
 
-    expect(result).toStrictEqual(newMessage);
+        expect(result).toStrictEqual(['node-3', 'node-4', 'node-5', 'node-6']);
+      });
+    });
   });
 });

package/edit/workload/index.vue

@@ -494,7 +494,7 @@ export default {
               <NodeScheduling
                 :mode="mode"
                 :value="podTemplateSpec"
-                :nodes="allNodes"
+                :nodes="workerNodes"
                 :loading="isLoadingSecondaryResources"
               />
             </Tab>

package/edit/workload/mixins/workload.js

@@ -258,6 +258,7 @@ export default {
       secondaryResourceData:      this.secondaryResourceDataConfig(),
       namespacedConfigMaps:       [],
       allNodes:                   null,
+      workerNodes:                null,
       allNodeObjects:             [],
       namespacedSecrets:          [],
       imagePullNamespacedSecrets: [],
@@ -647,7 +648,24 @@ export default {
                 parsingFunc: (data) => {
                   return data.map((node) => node.id);
                 }
-              }
+              },
+              {
+                var:         'workerNodes',
+                parsingFunc: (data) => {
+                  const keys = [
+                    `node-role.kubernetes.io/control-plane`,
+                    `node-role.kubernetes.io/etcd`
+                  ];
+
+                  return data
+                    .filter((node) => {
+                      const taints = node?.spec?.taints || [];
+
+                      return taints.every((taint) => !keys.includes(taint.key));
+                    })
+                    .map((node) => node.id);
+                }
+              },
             ]
           },
           [SERVICE]: {

package/mixins/__tests__/brand.spec.ts

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { CATALOG, MANAGEMENT } from '@shell/config/types';
 import Brand from '@shell/mixins/brand';
+import CspAdapterUtils from '@shell/utils/cspAdaptor';
 
 describe('brandMixin', () => {
   const createWrapper = (vaiOn = false) => {
@@ -54,45 +55,47 @@ describe('brandMixin', () => {
         data:   () => data,
         global: { mocks: { $store: store } }
       });
-    const spyManagementFindAll = jest.spyOn(store, 'dispatch');
+    const spyManagementDispatch = jest.spyOn(store, 'dispatch');
+
+    CspAdapterUtils.resetState();
 
     return {
       wrapper,
       store,
-      spyManagementFindAll,
+      spyManagementDispatch,
     };
   };
 
   describe('should make correct requests', () => {
     it('vai off', async() => {
-      const { wrapper, spyManagementFindAll } = createWrapper(false);
+      const { wrapper, spyManagementDispatch } = createWrapper(false);
 
       // NOTE - wrapper.vm.$options.fetch() doesn't work
       await wrapper.vm.$options.fetch.apply(wrapper.vm);
 
       // wrapper.vm.$nextTick();
-      expect(spyManagementFindAll).toHaveBeenNthCalledWith(1, 'management/findAll', {
+      expect(spyManagementDispatch).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 });
+      expect(spyManagementDispatch).toHaveBeenNthCalledWith(2, 'management/findAll', { type: CATALOG.APP });
     });
 
     it('vai on', async() => {
-      const { wrapper, spyManagementFindAll } = createWrapper(true);
+      const { wrapper, spyManagementDispatch } = createWrapper(true);
 
       // NOTE - wrapper.vm.$options.fetch() doesn't work
       await wrapper.vm.$options.fetch.apply(wrapper.vm);
 
-      expect(spyManagementFindAll).toHaveBeenNthCalledWith(1, 'management/findAll', {
+      expect(spyManagementDispatch).toHaveBeenNthCalledWith(1, 'management/findAll', {
         type: MANAGEMENT.SETTING,
         opt:  {
           load: 'multi', url: `/v1/${ MANAGEMENT.SETTING }s`, redirectUnauthorized: false
         }
       });
-      expect(spyManagementFindAll).toHaveBeenNthCalledWith(2, 'management/findPage', {
+      expect(spyManagementDispatch).toHaveBeenNthCalledWith(2, 'management/findPage', {
         type: CATALOG.APP,
         opt:  {
           pagination: {
@@ -110,7 +113,9 @@ describe('brandMixin', () => {
             pageSize:             null,
             projectsOrNamespaces: [],
             sort:                 []
-          }
+          },
+          transient: true,
+          watch:     false
         }
       });
     });
@@ -120,7 +125,7 @@ describe('brandMixin', () => {
     it('should have correct csp values (off)', async() => {
       const { wrapper, store } = createWrapper();
 
-      const spyManagementFindAll = jest.spyOn(store, 'dispatch').mockImplementation((_, options) => {
+      const spyManagementDispatch = jest.spyOn(store, 'dispatch').mockImplementation((_, options) => {
         const { type } = options as any;
 
         if (type === MANAGEMENT.SETTING) {
@@ -136,7 +141,7 @@ describe('brandMixin', () => {
       // NOTE - wrapper.vm.$options.fetch() doesn't work
       await wrapper.vm.$options.fetch.apply(wrapper.vm, []);
 
-      expect(spyManagementFindAll).toHaveBeenCalledTimes(2);
+      expect(spyManagementDispatch).toHaveBeenCalledTimes(2);
 
       expect(wrapper.vm.canCalcCspAdapter).toBeTruthy();
       expect(wrapper.vm.cspAdapter).toBeFalsy();
@@ -145,7 +150,7 @@ describe('brandMixin', () => {
     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 spyManagementDispatch = jest.spyOn(store, 'dispatch').mockImplementation((_, options) => {
         const { type } = options as any;
 
         if (type === MANAGEMENT.SETTING) {
@@ -161,7 +166,7 @@ describe('brandMixin', () => {
       // NOTE - wrapper.vm.$options.fetch() doesn't work
       await wrapper.vm.$options.fetch.apply(wrapper.vm, []);
 
-      expect(spyManagementFindAll).toHaveBeenCalledTimes(2);
+      expect(spyManagementDispatch).toHaveBeenCalledTimes(2);
 
       expect(wrapper.vm.canCalcCspAdapter).toBeTruthy();
       expect(wrapper.vm.cspAdapter).toBeTruthy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.8",
+  "version": "3.0.9-rc.1",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancher/dashboard",
   "license": "Apache-2.0",

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

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 import debounce from 'lodash/debounce';
 import { getVersionData } from '@shell/config/version';
 import { mapState, mapGetters } from 'vuex';
@@ -322,13 +322,13 @@ export default {
       this.selectedCard = selected;
 
       this.$shell.slideIn.open(ResourceDetails, {
-        componentProps: {
-          showHeader: false,
-          width:      window.innerWidth / 3 > 530 ? `${ window.innerWidth / 3 }px` : '530px',
+        showHeader: false,
+        width:      window.innerWidth / 3 > 530 ? `${ window.innerWidth / 3 }px` : '530px',
+        props:      {
           value,
           statePanel,
           workspace
-        }
+        },
       });
     },
 

package/plugins/steve/mutations.js

@@ -180,6 +180,15 @@ export default {
   * Load multiple different types of resources
   */
   loadMulti(state, { data, ctx }) {
+    const type = data[0]?.type;
+    const cache = state.types[type];
+
+    if (cache?.havePage) {
+      console.warn(`Prevented \`loadMulti\` mutation from polluting the cache for type "${ type }" (currently represents a page).`); // eslint-disable-line no-console
+
+      return;
+    }
+
     for (const entry of data) {
       const resource = load(state, { data: entry, ctx });
 

package/plugins/steve/subscribe.js

@@ -1200,6 +1200,18 @@ const defaultActions = {
   },
 
   'ws.resource.create'(ctx, msg) {
+    const data = msg.data;
+    const type = data?.type;
+
+    const havePage = ctx.getters['havePage'](type);
+
+    if (havePage) {
+      console.warn(`Prevented watch \`resource.create\` data from polluting the cache for type "${ type }" (currently represents a page). To prevent any further issues the watch has been stopped.`, msg); // eslint-disable-line no-console
+      ctx.dispatch('unwatch', { ...msg, type });
+
+      return;
+    }
+
     ctx.state.debugSocket && console.info(`Resource Create [${ ctx.getters.storeName }]`, msg.resourceType, msg); // eslint-disable-line no-console
     queueChange(ctx, msg, true, 'Create');
   },
@@ -1230,8 +1242,8 @@ const defaultActions = {
     const havePage = ctx.getters['havePage'](type);
 
     if (havePage) {
-      console.warn(`Prevented watch \`resource.change\` data from polluting the cache for type "${ type }" (currently represents a page). To prevent any further issues the watch has been stopped.`, data); // eslint-disable-line no-console
-      ctx.dispatch('unwatch', data);
+      console.warn(`Prevented watch \`resource.change\` data from polluting the cache for type "${ type }" (currently represents a page). To prevent any further issues the watch has been stopped.`, msg); // eslint-disable-line no-console
+      ctx.dispatch('unwatch', { ...msg, type });
 
       return;
     }
@@ -1277,6 +1289,15 @@ const defaultActions = {
       }
     }
 
+    const havePage = ctx.getters['havePage'](type);
+
+    if (havePage) {
+      console.warn(`Prevented watch \`resource.remove\` data from polluting the cache for type "${ type }" (currently represents a page). To prevent any further issues the watch has been stopped.`, msg); // eslint-disable-line no-console
+      ctx.dispatch('unwatch', { ...msg, type });
+
+      return;
+    }
+
     queueChange(ctx, msg, false, 'Remove');
 
     const typeOption = ctx.rootGetters['type-map/optionsFor'](type);

package/types/store/dashboard-store.types.ts

@@ -48,11 +48,6 @@ export interface ActionFindAllArgs extends ActionCoreFindArgs {
   depaginate?: boolean,
 }
 
-export interface ActionFindPageTransientResult<T> {
-  pagination: StorePagination,
-  data: T[],
-}
-
 /**
  * Args used for findPage action
  */
@@ -81,19 +76,46 @@ export interface ActionFindPageArgs extends ActionCoreFindArgs {
    * If true don't persist the http response to the store, just pass it back
    */
   transient?: boolean,
+  /**
+   * The target minimum revision for the resource.
+   *
+   * If this is higher than the latest revision known to rancher then an error will be returned
+   */
+  revision?: string
 }
 
-export type ActionFindPageResponse<T = any> = {
+/**
+ * Response to a transient (not stored in cache) findPage action
+ */
+export type ActionFindPageTransientResponse<T = any> = {
   data: T[],
   pagination?: StorePagination
-} | T[];
+};
+
+/**
+ * Response to the findPage action
+ *
+ * If the request was transient (not stored in cache) this will be an object contain all the details of the request
+ *
+ * If the request was not transient this will just be the array of resources
+ */
+export type ActionFindPageResponse<T = any> = ActionFindPageTransientResponse | T[];
 
+/**
+ * Args used for findPage action
+ */
 export interface ActionFindMatchingArgs extends ActionCoreFindArgs {
   labelSelector: KubeLabelSelector,
   namespaced?: string,
   depaginate?: boolean
 }
 
+/**
+ * Response to the findMatching action
+ */
 export type ActionFindMatchingResponse<T = any> = ActionFindPageResponse<T>
 
+/**
+ * Args used for findLabelSelector action
+ */
 export type ActionFindLabelSelectorArgs = ActionFindPageArgs | ActionFindMatchingArgs;

package/utils/cspAdaptor.ts

@@ -1,12 +1,13 @@
 // For testing these could be changed to something like...
 
 import { CATALOG } from '@shell/config/types';
+import { ActionFindPageArgs, ActionFindPageTransientResponse } from '@shell/types/store/dashboard-store.types';
 import { FilterArgs, PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { VuexStore } from '@shell/types/store/vuex';
 
 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'];
+// const CSP_ADAPTER_APPS = ['rancher-webhooka', 'rancher-webhook'];
 
 /**
  * Helpers in order to
@@ -16,27 +17,44 @@ class CspAdapterUtils {
     return $store.getters[`management/paginationEnabled`]({ id: CATALOG.APP, context: 'branding' });
   }
 
-  static fetchCspAdaptorApp($store: VuexStore): Promise<any> {
+  private static apps?: any[] = undefined;
+  public static resetState() {
+    this.apps = undefined;
+  }
+
+  static async fetchCspAdaptorApp($store: VuexStore): Promise<any> {
+    if (this.apps) {
+      return this.apps;
+    }
+
     // 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', {
+        const opt: ActionFindPageArgs = {
+          pagination: new FilterArgs({
+            filters: PaginationParamFilter.createMultipleFields(CSP_ADAPTER_APPS.map(
+              (t) => new PaginationFilterField({
+                field: 'metadata.name',
+                value: t,
+              })
+            )),
+          }),
+          watch:     false,
+          transient: true
+        };
+
+        const resp: ActionFindPageTransientResponse = await $store.dispatch('management/findPage', {
           type: CATALOG.APP,
-          opt:  { // Of type ActionFindPageArgs
-            pagination: new FilterArgs({
-              filters: PaginationParamFilter.createMultipleFields(CSP_ADAPTER_APPS.map(
-                (t) => new PaginationFilterField({
-                  field: 'metadata.name',
-                  value: t,
-                })
-              )),
-            })
-          }
+          opt
         });
+
+        this.apps = resp.data;
+      } else {
+        this.apps = await $store.dispatch('management/findAll', { type: CATALOG.APP });
       }
 
-      return $store.dispatch('management/findAll', { type: CATALOG.APP });
+      return this.apps;
     }
 
     return Promise.resolve([]);

package/utils/pagination-wrapper.ts

@@ -1,7 +1,7 @@
 import paginationUtils from '@shell/utils/pagination-utils';
 import { PaginationArgs, PaginationResourceContext } from '@shell/types/store/pagination.types';
 import { VuexStore } from '@shell/types/store/vuex';
-import { ActionFindPageArgs, ActionFindPageTransientResult } from '@shell/types/store/dashboard-store.types';
+import { ActionFindPageArgs, ActionFindPageTransientResponse } from '@shell/types/store/dashboard-store.types';
 import { STEVE_WATCH_EVENT_TYPES, STEVE_WATCH_MODE } from '@shell/types/store/subscribe.types';
 import { Reactive, reactive } from 'vue';
 import { STEVE_UNWATCH_EVENT_PARAMS, STEVE_WATCH_EVENT_LISTENER_CALLBACK, STEVE_WATCH_EVENT_PARAMS, STEVE_WATCH_EVENT_PARAMS_COMMON } from '@shell/types/store/subscribe-events.types';
@@ -30,7 +30,7 @@ interface Args {
   }
 }
 
-interface Result<T> extends Omit<ActionFindPageTransientResult<T>, 'data'> {
+interface Result<T> extends Omit<ActionFindPageTransientResponse<T>, 'data'> {
   data: Reactive<T[]>
 }
 
@@ -86,7 +86,7 @@ class PaginationWrapper<T extends object> {
     };
 
     // Fetch
-    const out: ActionFindPageTransientResult<T> = await this.$store.dispatch(`${ this.enabledFor.store }/findPage`, { opt, type: this.enabledFor.resource?.id });
+    const out: ActionFindPageTransientResponse<T> = await this.$store.dispatch(`${ this.enabledFor.store }/findPage`, { opt, type: this.enabledFor.resource?.id });
 
     // Watch
     const firstTime = !this.steveWatchParams;