@rancher/shell 3.0.8-rc.9 → 3.0.9-rc.1

package/utils/__tests__/router.test.js

@@ -0,0 +1,238 @@
+import { findRouteDefinitionByName, filterLocationValidParams } from '@shell/utils/router';
+
+describe('findRouteDefinitionByName', () => {
+  const createMockRouter = (routes) => ({ getRoutes: () => routes });
+
+  it('should find a route by its name', () => {
+    const routes = [
+      { name: 'home', path: '/' },
+      { name: 'about', path: '/about' },
+      { name: 'c-cluster', path: '/c/:cluster' },
+    ];
+    const router = createMockRouter(routes);
+
+    const result = findRouteDefinitionByName(router, 'about');
+
+    expect(result).toStrictEqual({ name: 'about', path: '/about' });
+  });
+
+  it('should return the first matching route when name exists', () => {
+    const routes = [
+      { name: 'c-cluster-explorer', path: '/c/:cluster/explorer' },
+      { name: 'c-cluster-apps', path: '/c/:cluster/apps' },
+    ];
+    const router = createMockRouter(routes);
+
+    const result = findRouteDefinitionByName(router, 'c-cluster-explorer');
+
+    expect(result).toStrictEqual({ name: 'c-cluster-explorer', path: '/c/:cluster/explorer' });
+  });
+
+  it('should return undefined when route name is not found', () => {
+    const routes = [
+      { name: 'home', path: '/' },
+      { name: 'about', path: '/about' },
+    ];
+    const router = createMockRouter(routes);
+
+    const result = findRouteDefinitionByName(router, 'nonexistent');
+
+    expect(result).toBeUndefined();
+  });
+
+  it('should return undefined when routes array is empty', () => {
+    const router = createMockRouter([]);
+
+    const result = findRouteDefinitionByName(router, 'any-route');
+
+    expect(result).toBeUndefined();
+  });
+
+  it('should handle routes with additional properties', () => {
+    const routes = [
+      {
+        name:  'c-cluster-product-resource',
+        path:  '/c/:cluster/:product/:resource',
+        meta:  { requiresAuthentication: true },
+        props: true,
+      },
+    ];
+    const router = createMockRouter(routes);
+
+    const result = findRouteDefinitionByName(router, 'c-cluster-product-resource');
+
+    expect(result).toStrictEqual(routes[0]);
+  });
+
+  it('should match exact route names only', () => {
+    const routes = [
+      { name: 'c-cluster', path: '/c/:cluster' },
+      { name: 'c-cluster-explorer', path: '/c/:cluster/explorer' },
+    ];
+    const router = createMockRouter(routes);
+
+    const result = findRouteDefinitionByName(router, 'c-cluster');
+
+    expect(result).toStrictEqual({ name: 'c-cluster', path: '/c/:cluster' });
+    expect(result.name).not.toBe('c-cluster-explorer');
+  });
+});
+
+describe('filterLocationValidParams', () => {
+  const createMockRouter = (routes) => ({ getRoutes: () => routes });
+
+  it('should filter out params not in route path', () => {
+    const routes = [
+      { name: 'c-cluster', path: '/c/:cluster' },
+    ];
+    const router = createMockRouter(routes);
+    const routeRecord = {
+      name:   'c-cluster',
+      params: {
+        cluster: 'local',
+        product: 'explorer',
+      },
+    };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result.params).toStrictEqual({ cluster: 'local' });
+    expect(result.params.product).toBeUndefined();
+  });
+
+  it('should keep all params when all are valid', () => {
+    const routes = [
+      { name: 'c-cluster-product-resource', path: '/c/:cluster/:product/:resource' },
+    ];
+    const router = createMockRouter(routes);
+    const routeRecord = {
+      name:   'c-cluster-product-resource',
+      params: {
+        cluster:  'local',
+        product:  'explorer',
+        resource: 'pods',
+      },
+    };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result.params).toStrictEqual({
+      cluster:  'local',
+      product:  'explorer',
+      resource: 'pods',
+    });
+  });
+
+  it('should preserve other properties on routeRecord', () => {
+    const routes = [
+      { name: 'c-cluster', path: '/c/:cluster' },
+    ];
+    const router = createMockRouter(routes);
+    const routeRecord = {
+      name:   'c-cluster',
+      params: { cluster: 'local' },
+      query:  { mode: 'edit' },
+      hash:   '#section',
+    };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result.query).toStrictEqual({ mode: 'edit' });
+    expect(result.hash).toBe('#section');
+    expect(result.name).toBe('c-cluster');
+  });
+
+  it('should return routeRecord unchanged when routeRecord is null', () => {
+    const router = createMockRouter([]);
+
+    const result = filterLocationValidParams(router, null);
+
+    expect(result).toBeNull();
+  });
+
+  it('should return routeRecord unchanged when routeRecord is undefined', () => {
+    const router = createMockRouter([]);
+
+    const result = filterLocationValidParams(router, undefined);
+
+    expect(result).toBeUndefined();
+  });
+
+  it('should return routeRecord unchanged when name is missing', () => {
+    const router = createMockRouter([]);
+    const routeRecord = { params: { cluster: 'local' } };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result).toStrictEqual(routeRecord);
+  });
+
+  it('should return routeRecord unchanged when params is missing', () => {
+    const router = createMockRouter([]);
+    const routeRecord = { name: 'c-cluster' };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result).toStrictEqual(routeRecord);
+  });
+
+  it('should return routeRecord unchanged when route definition is not found', () => {
+    const routes = [
+      { name: 'home', path: '/' },
+    ];
+    const router = createMockRouter(routes);
+    const routeRecord = {
+      name:   'nonexistent-route',
+      params: { cluster: 'local' },
+    };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result).toStrictEqual(routeRecord);
+  });
+
+  it('should return empty params when no params are valid', () => {
+    const routes = [
+      { name: 'home', path: '/' },
+    ];
+    const router = createMockRouter(routes);
+    const routeRecord = {
+      name:   'home',
+      params: {
+        cluster: 'local',
+        product: 'explorer',
+      },
+    };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result.params).toStrictEqual({});
+  });
+
+  it('should handle optional params in path', () => {
+    const routes = [
+      { name: 'c-cluster-product-resource-id', path: '/c/:cluster/:product/:resource/:id?' },
+    ];
+    const router = createMockRouter(routes);
+    const routeRecord = {
+      name:   'c-cluster-product-resource-id',
+      params: {
+        cluster:  'local',
+        product:  'explorer',
+        resource: 'pods',
+        id:       'my-pod',
+        extra:    'should-be-removed',
+      },
+    };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result.params).toStrictEqual({
+      cluster:  'local',
+      product:  'explorer',
+      resource: 'pods',
+      id:       'my-pod',
+    });
+    expect(result.params.extra).toBeUndefined();
+  });
+});

package/utils/cluster.js

@@ -242,7 +242,7 @@ export function filterOutDeprecatedPatchVersions(allVersions, currentVersion) {
   return filteredVersions;
 }
 
-export function getAllOptionsAfterCurrentVersion(store, versions, currentVersion, defaultVersion) {
+export function getAllOptionsAfterCurrentVersion(store, versions, currentVersion, defaultVersion, manual = false) {
   const out = (versions || []).filter((obj) => !!obj.serverArgs).map((obj) => {
     let disabled = false;
     let experimental = false;
@@ -260,6 +260,9 @@ export function getAllOptionsAfterCurrentVersion(store, versions, currentVersion
 
     if (isCurrentVersion) {
       label = `${ label } ${ store.getters['i18n/t']('cluster.kubernetesVersion.current') }`;
+      if (manual) {
+        label = `${ label } ${ store.getters['i18n/t']('cluster.kubernetesVersion.manual') }`;
+      }
     }
 
     if (experimental) {

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/fleet.ts

@@ -184,7 +184,7 @@ class Fleet {
   }
 
   detailLocation(r: Resource, mgmtClusterName: string): any {
-    return mapStateToEnum(r.state) === STATES_ENUM.MISSING ? undefined : {
+    const location = mapStateToEnum(r.state) === STATES_ENUM.MISSING ? undefined : {
       name:   `c-cluster-product-resource${ r.namespace ? '-namespace' : '' }-id`,
       params: {
         product:   EXPLORER_NAME,
@@ -194,6 +194,13 @@ class Fleet {
         id:        r.name,
       },
     };
+
+    // Having an undefined param can yield a console warning like [Vue Router warn]: Discarded invalid param(s) "namespace" when navigating
+    if (location && !location.params.namespace) {
+      delete location.params.namespace;
+    }
+
+    return location;
   }
 
   /**

package/utils/pagination-utils.ts

@@ -165,7 +165,7 @@ class PaginationUtils {
   /**
    * Is pagination enabled at a global level or for a specific resource
    */
-  isEnabled({ rootGetters, $plugin }: any, enabledFor: PaginationResourceContext) {
+  isEnabled({ rootGetters, $extension }: any, enabledFor: PaginationResourceContext) {
     // Cache must be enabled to support pagination api
     if (!this.isSteveCacheEnabled({ rootGetters })) {
       return false;
@@ -184,7 +184,7 @@ class PaginationUtils {
     }
 
     // Does an extension say this type is enabled?
-    const plugin = $plugin as ExtensionManager;
+    const plugin = $extension as ExtensionManager;
     const paginationExtensionPoints = plugin.getAll()[EXT_IDS.SERVER_SIDE_PAGINATION_RESOURCES];
 
     if (paginationExtensionPoints) {

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[]>
 }
 
@@ -69,7 +69,7 @@ class PaginationWrapper<T extends object> {
     this.classify = formatResponse?.classify || false;
     this.reactive = formatResponse?.reactive || false;
 
-    this.isEnabled = paginationUtils.isEnabled({ rootGetters: $store.getters, $plugin: this.$store.$plugin }, enabledFor);
+    this.isEnabled = paginationUtils.isEnabled({ rootGetters: $store.getters, $extension: this.$store.$extension }, enabledFor);
   }
 
   async request({ pagination, forceWatch }: {
@@ -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;

package/utils/router.js

@@ -117,3 +117,53 @@ export function findMeta(route, key) {
 
   return undefined;
 }
+
+/**
+ * Find a route definition given a routeName
+ * @param {*} router VueRouter instance
+ * @param {*} routeName the name we want to look up
+ * @returns the route definition or undefined if it wasn't found
+ */
+export function findRouteDefinitionByName(router, routeName) {
+  const routes = router.getRoutes();
+
+  return routes.find((r) => r.name === routeName);
+}
+
+/**
+ * Looks for the route definition and then ensures there's only valid params
+ * @param {*} router VueRouter instance
+ * @param {*} routeRecord an object conforming to the Route Record interface
+ * @returns the passed in routeLocation with only valid params.
+ */
+export function filterLocationValidParams(router, routeRecord) {
+  if (!routeRecord || !routeRecord.name || !routeRecord.params) {
+    console.warn('filterLocationValidParams received invalid arguments'); // eslint-disable-line no-console
+
+    return routeRecord;
+  }
+
+  const routeDefinition = findRouteDefinitionByName(router, routeRecord.name);
+
+  if (!routeDefinition) {
+    console.warn('Could not find a route definition given the routeRecord', routeRecord); // eslint-disable-line no-console
+
+    return routeRecord;
+  }
+
+  const specifiedParams = routeRecord.params;
+  const validParams = {};
+
+  Object.entries(specifiedParams).forEach(([key, value]) => {
+    const pathParam = `:${ key }`;
+
+    if (routeDefinition.path.includes(pathParam)) {
+      validParams[key] = value;
+    }
+  });
+
+  return {
+    ...routeRecord,
+    params: validParams
+  };
+}

package/utils/unit-tests/pagination-utils.spec.ts

@@ -163,14 +163,14 @@ describe('pagination-utils', () => {
 
     it('should return false if steve cache is disabled', () => {
       mockRootGetters['features/get'].mockImplementation((feature: string) => feature === STEVE_CACHE ? false : undefined);
-      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $plugin: mockPlugin }, enabledFor);
+      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $extension: mockPlugin }, enabledFor);
 
       expect(result).toBe(false);
     });
 
     it('should return false if pagination settings are not defined', () => {
       jest.spyOn(paginationUtils, 'getSettings').mockReturnValue(undefined);
-      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $plugin: mockPlugin }, enabledFor);
+      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $extension: mockPlugin }, enabledFor);
 
       expect(result).toBe(false);
 
@@ -189,7 +189,7 @@ describe('pagination-utils', () => {
         return null;
       });
 
-      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $plugin: mockPlugin }, undefined as unknown as PaginationResourceContext);
+      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $extension: mockPlugin }, undefined as unknown as PaginationResourceContext);
 
       expect(result).toBe(false);
     });
@@ -200,7 +200,7 @@ describe('pagination-utils', () => {
 
       mockPlugin.getAll.mockReturnValue({ [EXT_IDS.SERVER_SIDE_PAGINATION_RESOURCES]: { 'my-ext': () => extensionSettings } });
 
-      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $plugin: mockPlugin }, enabledFor);
+      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $extension: mockPlugin }, enabledFor);
 
       expect(result).toBe(true);
     });
@@ -215,7 +215,7 @@ describe('pagination-utils', () => {
       // Mocking PAGINATION_SETTINGS_STORE_DEFAULTS behavior
       jest.spyOn(paginationUtils, 'getStoreDefault').mockReturnValue(defaultSettings);
 
-      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $plugin: mockPlugin }, enabledFor);
+      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $extension: mockPlugin }, enabledFor);
 
       expect(result).toBe(true);
     });
@@ -235,7 +235,7 @@ describe('pagination-utils', () => {
       // Mocking PAGINATION_SETTINGS_STORE_DEFAULTS behavior
       jest.spyOn(paginationUtils, 'getStoreDefault').mockReturnValue({ cluster: { resources: { enableAll: true } } });
 
-      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $plugin: mockPlugin }, enabledFor);
+      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $extension: mockPlugin }, enabledFor);
 
       expect(result).toBe(true);
     });
@@ -255,7 +255,7 @@ describe('pagination-utils', () => {
         return null;
       });
 
-      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $plugin: mockPlugin }, enabledFor);
+      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $extension: mockPlugin }, enabledFor);
 
       expect(result).toBe(true);
     });
@@ -275,7 +275,7 @@ describe('pagination-utils', () => {
         return null;
       });
 
-      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $plugin: mockPlugin }, enabledFor);
+      const result = paginationUtils.isEnabled({ rootGetters: mockRootGetters, $extension: mockPlugin }, enabledFor);
 
       expect(result).toBe(false);
     });

package/vue.config.js

@@ -323,16 +323,16 @@ const getVirtualModules = (dir, includePkg) => {
 
         // Package file must have rancher field to be a plugin
         if (includePkg(name) && library.rancher) {
-          reqs += `$plugin.registerBuiltinExtension('${ name }', require(\'~/pkg/${ name }\')); `;
+          reqs += `$extension.registerBuiltinExtension('${ name }', require(\'~/pkg/${ name }\')); `;
         }
       });
   }
 
   Object.keys(librariesIndex).forEach((i) => {
-    reqs += `$plugin.loadAsync('${ i }', '/pkg/${ i }/${ librariesIndex[i] }');`;
+    reqs += `$extension.loadAsync('${ i }', '/pkg/${ i }/${ librariesIndex[i] }');`;
   });
 
-  return new VirtualModulesPlugin({ 'node_modules/@rancher/dynamic.js': `export default function ($plugin) { ${ reqs } };` });
+  return new VirtualModulesPlugin({ 'node_modules/@rancher/dynamic.js': `export default function ($extension) { ${ reqs } };` });
 };
 
 const getAutoImport = () => new webpack.NormalModuleReplacementPlugin(/^@rancher\/auto-import$/, (resource) => {

package/composables/useExtensionManager.ts

@@ -1,17 +0,0 @@
-import { ExtensionManager } from '@shell/types/extension-manager';
-import { getExtensionManager } from '@shell/core/extension-manager-impl';
-
-/**
- * Provides access to the registered extension manager instance. Used within Vue
- * components or other composables that require extension functionality.
- * @returns The extension manager instance
- */
-export const useExtensionManager = (): ExtensionManager => {
-  const extension = getExtensionManager();
-
-  if (!extension) {
-    throw new Error('useExtensionManager must be called after the extensionManager has been initialized');
-  }
-
-  return extension;
-};