@rancher/shell 3.0.8-rc.8 → 3.0.8

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/__tests__/selector-typed.test.ts

@@ -0,0 +1,263 @@
+import { labelSelectorToSelector } from '@shell/utils/selector-typed';
+import { KubeLabelSelector } from '@shell/types/kube/kube-api';
+
+describe('selector-typed', () => {
+  describe('labelSelectorToSelector', () => {
+    describe('empty label selectors', () => {
+      it('should return empty string for undefined label selector', () => {
+        const result = labelSelectorToSelector(undefined);
+
+        expect(result).toBe('');
+      });
+
+      it('should return empty string for label selector with no matchLabels and no matchExpressions', () => {
+        const labelSelector: KubeLabelSelector = {};
+        const result = labelSelectorToSelector(labelSelector);
+
+        expect(result).toBe('');
+      });
+
+      it('should return empty string for label selector with empty matchLabels', () => {
+        const labelSelector: KubeLabelSelector = { matchLabels: {} };
+        const result = labelSelectorToSelector(labelSelector);
+
+        expect(result).toBe('');
+      });
+
+      it('should return empty string for label selector with empty matchExpressions', () => {
+        const labelSelector: KubeLabelSelector = { matchExpressions: [] };
+        const result = labelSelectorToSelector(labelSelector);
+
+        expect(result).toBe('');
+      });
+
+      it('should return empty string for label selector with both empty matchLabels and matchExpressions', () => {
+        const labelSelector: KubeLabelSelector = {
+          matchLabels:      {},
+          matchExpressions: []
+        };
+        const result = labelSelectorToSelector(labelSelector);
+
+        expect(result).toBe('');
+      });
+    });
+
+    describe('matchLabels conversion', () => {
+      it('should convert single matchLabel to selector string', () => {
+        const labelSelector: KubeLabelSelector = { matchLabels: { app: 'nginx' } };
+        const result = labelSelectorToSelector(labelSelector);
+
+        expect(result).toBe('app=nginx');
+      });
+
+      it('should convert multiple matchLabels to comma-separated selector string', () => {
+        const labelSelector: KubeLabelSelector = {
+          matchLabels: {
+            app:     'nginx',
+            version: 'v1.0',
+            env:     'production'
+          }
+        };
+        const result = labelSelectorToSelector(labelSelector);
+
+        expect(result).toBe('app=nginx,version=v1.0,env=production');
+      });
+
+      it('should handle matchLabels with special characters', () => {
+        const labelSelector: KubeLabelSelector = { matchLabels: { 'app.kubernetes.io/name': 'my-app' } };
+        const result = labelSelectorToSelector(labelSelector);
+
+        expect(result).toBe('app.kubernetes.io/name=my-app');
+      });
+
+      it('should handle matchLabels with numeric values', () => {
+        const labelSelector: KubeLabelSelector = { matchLabels: { tier: '3' } };
+        const result = labelSelectorToSelector(labelSelector);
+
+        expect(result).toBe('tier=3');
+      });
+    });
+
+    describe('matchExpressions conversion with In operator', () => {
+      it('should convert matchExpression with In operator and single value to equality selector', () => {
+        const labelSelector: KubeLabelSelector = {
+          matchExpressions: [
+            {
+              key:      'app',
+              operator: 'In',
+              values:   ['nginx']
+            }
+          ]
+        };
+        const result = labelSelectorToSelector(labelSelector);
+
+        expect(result).toBe('app=nginx');
+      });
+
+      it('should convert matchExpression with In operator and multiple values to in() selector', () => {
+        const labelSelector: KubeLabelSelector = {
+          matchExpressions: [
+            {
+              key:      'env',
+              operator: 'In',
+              values:   ['dev', 'staging', 'prod']
+            }
+          ]
+        };
+        const result = labelSelectorToSelector(labelSelector);
+
+        expect(result).toBe('env in (dev,staging,prod)');
+      });
+
+      it('should convert multiple matchExpressions with In operator', () => {
+        const labelSelector: KubeLabelSelector = {
+          matchExpressions: [
+            {
+              key:      'app',
+              operator: 'In',
+              values:   ['nginx']
+            },
+            {
+              key:      'env',
+              operator: 'In',
+              values:   ['dev', 'staging']
+            }
+          ]
+        };
+        const result = labelSelectorToSelector(labelSelector);
+
+        expect(result).toBe('app=nginx,env in (dev,staging)');
+      });
+
+      it('should handle matchExpression with empty values array for In operator', () => {
+        const labelSelector: KubeLabelSelector = {
+          matchExpressions: [
+            {
+              key:      'app',
+              operator: 'In',
+              values:   []
+            }
+          ]
+        };
+        const result = labelSelectorToSelector(labelSelector);
+
+        // With empty values array, it should create an in() with no values
+        expect(result).toBe('app in ()');
+      });
+    });
+
+    describe('combined matchLabels and matchExpressions', () => {
+      it('should combine matchLabels and matchExpressions with single values', () => {
+        const labelSelector: KubeLabelSelector = {
+          matchLabels:      { tier: 'frontend' },
+          matchExpressions: [
+            {
+              key:      'env',
+              operator: 'In',
+              values:   ['prod']
+            }
+          ]
+        };
+        const result = labelSelectorToSelector(labelSelector);
+
+        expect(result).toBe('tier=frontend,env=prod');
+      });
+
+      it('should combine multiple matchLabels and matchExpressions', () => {
+        const labelSelector: KubeLabelSelector = {
+          matchLabels: {
+            tier:    'frontend',
+            version: 'v2'
+          },
+          matchExpressions: [
+            {
+              key:      'env',
+              operator: 'In',
+              values:   ['dev', 'staging']
+            },
+            {
+              key:      'region',
+              operator: 'In',
+              values:   ['us-west-1']
+            }
+          ]
+        };
+        const result = labelSelectorToSelector(labelSelector);
+
+        expect(result).toBe('tier=frontend,version=v2,env in (dev,staging),region=us-west-1');
+      });
+
+      it('should combine matchLabels with multiple matchExpressions using in() notation', () => {
+        const labelSelector: KubeLabelSelector = {
+          matchLabels:      { 'app.kubernetes.io/name': 'myapp' },
+          matchExpressions: [
+            {
+              key:      'env',
+              operator: 'In',
+              values:   ['dev', 'test', 'prod']
+            }
+          ]
+        };
+        const result = labelSelectorToSelector(labelSelector);
+
+        expect(result).toBe('app.kubernetes.io/name=myapp,env in (dev,test,prod)');
+      });
+    });
+
+    describe('unsupported operators', () => {
+      it('should throw error for NotIn operator', () => {
+        const labelSelector: KubeLabelSelector = {
+          matchExpressions: [
+            {
+              key:      'env',
+              operator: 'NotIn',
+              values:   ['prod']
+            }
+          ]
+        };
+
+        expect(() => labelSelectorToSelector(labelSelector)).toThrow('Unsupported matchExpression found when converting to selector string.');
+      });
+    });
+
+    describe('edge cases', () => {
+      it('should handle matchExpression with In operator but undefined values', () => {
+        const labelSelector: KubeLabelSelector = {
+          matchExpressions: [
+            {
+              key:      'app',
+              operator: 'In',
+              values:   undefined
+            }
+          ]
+        };
+
+        // When values is undefined, the function throws an error
+        expect(() => labelSelectorToSelector(labelSelector)).toThrow('Unsupported matchExpression found when converting to selector string.');
+      });
+
+      it('should preserve order of matchLabels and matchExpressions', () => {
+        const labelSelector: KubeLabelSelector = {
+          matchLabels: {
+            first:  'value1',
+            second: 'value2'
+          },
+          matchExpressions: [
+            {
+              key:      'third',
+              operator: 'In',
+              values:   ['value3']
+            }
+          ]
+        };
+        const result = labelSelectorToSelector(labelSelector);
+
+        // matchLabels come before matchExpressions
+        expect(result).toContain('first=value1');
+        expect(result).toContain('second=value2');
+        expect(result).toContain('third=value3');
+        expect(result.indexOf('first')).toBeLessThan(result.indexOf('third'));
+      });
+    });
+  });
+});

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/color.js

@@ -13,7 +13,7 @@ Primary color classes from _light.scss
 
 */
 
-const Color = require('color');
+import Color from 'color';
 
 export function createCssVars(color, theme = 'light', name = 'primary') {
   const contrastOpts = theme === 'light' ? LIGHT_CONTRAST_COLORS : DARK_CONTRAST_COLORS;

package/utils/dynamic-content/__tests__/info.test.ts

@@ -97,6 +97,7 @@ describe('systemInfoProvider', () => {
       }),
       'management/schemaFor': jest.fn(),
       localCluster:           mockClusters.find((c) => c.id === 'local') || null,
+      'features/get':         jest.fn(() => 'abc'),
     };
 
     (version.getVersionData as jest.Mock).mockReturnValue({
@@ -129,6 +130,7 @@ describe('systemInfoProvider', () => {
     expect(qs).toContain('bl=en-US');
     expect(qs).toContain('bs=1024x768');
     expect(qs).toContain('ss=1920x1080');
+    expect(qs).toContain('ff-usc=abc');
   });
 
   it('should handle missing or partial data gracefully', () => {
@@ -161,6 +163,9 @@ describe('systemInfoProvider', () => {
     mockGetters['uiplugins/plugins'] = null; // No plugins
     mockGetters['auth/principalId'] = null; // No user
     mockGetters['localCluster'] = null; // No clusters
+    mockGetters['features/get'] = () => {
+      throw new Error('unknown feature');
+    };
 
     const infoProvider = new SystemInfoProvider(mockGetters, {});
     const qs = infoProvider.buildQueryString();
@@ -177,6 +182,7 @@ describe('systemInfoProvider', () => {
     expect(qs).not.toContain('lnc=');
     expect(qs).not.toContain('xkn=');
     expect(qs).not.toContain('xcc=');
+    expect(qs).not.toContain('ff-usc=');
   });
 
   it('should handle getAll returning undefined when types are not registered', () => {

package/utils/dynamic-content/info.ts

@@ -10,6 +10,7 @@ import {
 import { SETTING } from '@shell/config/settings';
 import { getVersionData } from '@shell/config/version';
 import { SettingsInfo } from '@shell/utils/dynamic-content/types';
+import { STEVE_CACHE } from '@shell/store/features';
 
 const QS_VERSION = 'v1'; // Include a version number in the query string in case we want to version the set of params we are sending
 const UNKNOWN = 'unknown';
@@ -26,6 +27,29 @@ const SUSE_EXTENSIONS = [
   'virtual-clusters'
 ];
 
+type FeatureFlagInfos = {
+  [id: string]: {
+    /**
+     * Query param, in format `ff-<param>`
+     */
+    param: string,
+    /**
+      * The actual value used by the UI, roughly spec.value || status.default
+      */
+    value: string,
+  }
+};
+
+/**
+ * Explicit ff's to send
+ */
+const ffs: FeatureFlagInfos = {
+  [STEVE_CACHE]: {
+    param: 'usc',
+    value: '',
+  }
+};
+
 /**
  * System information that is collected and which can then be encoded into a query string in the dyanmic content request
  */
@@ -47,6 +71,7 @@ type SystemInfo = {
   browserSize: string;
   screenSize: string;
   language: string;
+  featureFlags: FeatureFlagInfos
 };
 
 /**
@@ -131,6 +156,19 @@ export class SystemInfoProvider {
     const screenSize = `${ window.screen?.width || '?' }x${ window.screen?.height || '?' }`;
     const browserSize = `${ window.innerWidth }x${ window.innerHeight }`;
 
+    const safeFfs = Object.entries(ffs).reduce((res, [id, ff]) => {
+      try {
+        res[id] = {
+          param: ff.param,
+          value: getters['features/get'](id),
+        };
+      } catch (e) {
+        console.debug(`Cannot include Feature Flag "${ id }" in dynamic feature request: `, e); // eslint-disable-line no-console
+      }
+
+      return res;
+    }, {} as FeatureFlagInfos);
+
     return {
       systemUUID,
       userHash,
@@ -146,6 +184,7 @@ export class SystemInfoProvider {
       screenSize,
       browserSize,
       language:           window.navigator?.language,
+      featureFlags:       safeFfs,
     };
   }
 
@@ -213,6 +252,10 @@ export class SystemInfoProvider {
       params.push(`ss=${ systemData.screenSize }`);
     }
 
+    Object.values(systemData.featureFlags).forEach((ff) => {
+      params.push(`ff-` + `${ ff.param }=${ ff.value }`);
+    });
+
     return params.join('&');
   }
 }

package/utils/favicon.js

@@ -9,17 +9,17 @@ export function haveSetFavIcon() {
 
 export function setFavIcon(store) {
   const res = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FAVICON);
-  const brandSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);
+  const brandSetting = store.getters['management/brand'];
   const link = findIconLink(document.head.getElementsByTagName('link'));
 
   if (link) {
     let brandImage;
 
-    if (brandSetting?.value === 'suse') {
+    if (brandSetting === 'suse') {
       brandImage = require('~shell/assets/brand/suse/favicon.png');
-    } else if (brandSetting?.value === 'csp') {
+    } else if (brandSetting === 'csp') {
       brandImage = require('~shell/assets/brand/csp/favicon.png');
-    } else if (brandSetting?.value === 'harvester') {
+    } else if (brandSetting === 'harvester') {
       brandImage = require('~shell/assets/brand/harvester/favicon.png');
     }
 

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;
   }
 
   /**