@rancher/shell 3.0.0-rc.8 → 3.0.0

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

@@ -12,6 +12,7 @@ import { WORKSPACE_ANNOTATION } from '@shell/config/labels-annotations';
 import { filterBy } from '@shell/utils/array';
 import FleetNoWorkspaces from '@shell/components/fleet/FleetNoWorkspaces.vue';
 import { NAME } from '@shell/config/product/fleet';
+import { xOfy } from '@shell/utils/string';
 
 export default {
   name:       'FleetDashboard',
@@ -175,7 +176,12 @@ export default {
       }
 
       if (area === 'clusters') {
-        group = row.targetClusters;
+        if (row.clusterInfo?.ready === row.clusterInfo?.total && row.clusterInfo?.ready) {
+          return {
+            badgeClass: STATES[STATES_ENUM.ACTIVE].color,
+            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
+          };
+        }
       } else if (area === 'bundles') {
         group = row.bundles;
       } else if (area === 'resources') {
@@ -223,7 +229,7 @@ export default {
       }
 
       if (area === 'clusters') {
-        group = row.targetClusters;
+        group = '';
       } else if (area === 'bundles') {
         group = row.bundles;
       } else if (area === 'resources') {
@@ -262,11 +268,11 @@ export default {
       }
 
       if (area === 'clusters') {
-        value = `${ row.targetClustersReady?.length || '0' }/${ row.targetClusters?.length || '?' }`;
+        return `${ row.clusterInfo.ready }/${ row.clusterInfo.total }`;
       } else if (area === 'bundles') {
-        value = `${ row.bundlesReady?.length || '0' }/${ row.bundles?.length || '?' }`;
+        value = xOfy(row.bundlesReady?.length, row.bundles?.length);
       } else if (area === 'resources') {
-        value = `${ row.status?.resourceCounts?.ready || '0' }/${ row.status?.resourceCounts?.desiredReady || '?' }`;
+        value = xOfy(row.status?.resourceCounts?.ready, row.status?.resourceCounts?.desiredReady);
       }
 
       return value;

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

@@ -154,7 +154,8 @@ export default {
     },
 
     showAddReposBanner() {
-      const hasExtensionReposBannerSetting = this.addExtensionReposBannerSetting?.value === 'true';
+      // because of https://github.com/rancher/rancher/pull/45894 we need to consider other start values
+      const hasExtensionReposBannerSetting = this.addExtensionReposBannerSetting?.value === 'true' || this.addExtensionReposBannerSetting?.value === '' || this.addExtensionReposBannerSetting?.value === undefined;
       const uiPluginsRepoNotFound = isRancherPrime() && !this.repos?.find((r) => r.urlDisplay === UI_PLUGINS_REPOS.OFFICIAL.URL);
       const uiPluginsPartnersRepoNotFound = !this.repos?.find((r) => r.urlDisplay === UI_PLUGINS_REPOS.PARTNERS.URL);
 
@@ -615,7 +616,8 @@ export default {
     },
 
     updateAddReposSetting() {
-      if (this.addExtensionReposBannerSetting?.value === 'true') {
+      // because of https://github.com/rancher/rancher/pull/45894 we need to consider other start values
+      if (this.addExtensionReposBannerSetting?.value === 'true' || this.addExtensionReposBannerSetting?.value === '' || this.addExtensionReposBannerSetting?.value === undefined) {
         this.addExtensionReposBannerSetting.value = 'false';
         this.addExtensionReposBannerSetting.save();
       }

package/pages/diagnostic.vue

@@ -215,6 +215,7 @@ export default {
         'linode',
         'targetRoute', // contains circular references, isn't useful (added later to store)
         '$router', // also contains a circular reference to $store, not useful for diagnostics
+        '$route', // also contains a circular reference to $store, not useful for diagnostics
       ];
 
       const clearListsKeys = [

package/plugins/steve/mutations.js

@@ -13,6 +13,7 @@ import {
 import { perfLoadAll } from '@shell/plugins/steve/performanceTesting';
 import { classify } from '@shell/plugins/dashboard-store/classify';
 import SteveSchema from '@shell/models/steve-schema';
+import { deepToRaw } from '@shell/utils/object';
 
 function registerNamespace(state, namespace) {
   let cache = state.podsByNamespace[namespace];
@@ -145,7 +146,9 @@ export default {
 
       if (worker) {
         // Store raw json objects, not the proxies
-        worker.postMessage({ loadSchemas: data });
+        const rawData = deepToRaw(data);
+
+        worker.postMessage({ loadSchemas: rawData });
       }
     }
   },

package/plugins/steve/subscribe.js

@@ -8,7 +8,7 @@
  */
 
 import { addObject, clear, removeObject } from '@shell/utils/array';
-import { get } from '@shell/utils/object';
+import { get, deepToRaw } from '@shell/utils/object';
 import { SCHEMA, MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import { CSRF } from '@shell/config/cookies';
@@ -35,7 +35,6 @@ import { WORKER_MODES } from './worker';
 import acceptOrRejectSocketMessage from './accept-or-reject-socket-message';
 import { BLANK_CLUSTER, STORE } from '@shell/store/store-types.js';
 import paginationUtils from '@shell/utils/pagination-utils';
-import _ from 'lodash';
 
 // minimum length of time a disconnect notification is shown
 const MINIMUM_TIME_NOTIFIED = 3000;
@@ -179,9 +178,9 @@ export async function createWorker(store, ctx) {
 
   while (workerQueues[storeName]?.length) {
     const message = workerQueues[storeName].shift();
+    const safeMessage = deepToRaw(message);
 
-    // TODO: 11541: Web Worker communication fails due to Proxy objects in messages
-    store.$workers[storeName].postMessage(_.cloneDeep(message));
+    store.$workers[storeName].postMessage(safeMessage);
   }
 }
 

package/types/shell/index.d.ts

@@ -3900,6 +3900,13 @@ export function applyChangeset(obj: any, changeset: any): any;
  */
 export function pickBy(obj?: {}, predicate?: (value: any, key: any) => boolean): {};
 export function dropKeys(obj: any, keys: any): void;
+/**
+ * Recursively convert a reactive object to a raw object
+ * @param {*} obj
+ * @param {*} cache
+ * @returns
+ */
+export function deepToRaw(obj: any, cache?: any): any;
 export { isEqualBasic as isEqual };
 export function toDictionary(array: any, callback: any): any;
 /**
@@ -4281,6 +4288,12 @@ export function isIpv4(ip: any): boolean;
 export function sanitizeKey(k: any): any;
 export function sanitizeValue(v: any): any;
 export function sanitizeIP(v: any): any;
+/**
+ * Return the string `<x> / <y>`
+ *
+ * Each param should be a number, otherwise `?` is used
+ */
+export function xOfy(x: any, y: any): string;
 export namespace CHARSET {
     export { num as NUMERIC };
     export const NO_VOWELS: string;

package/utils/__tests__/object.test.ts

@@ -1,5 +1,6 @@
+import { reactive, isReactive } from 'vue';
 import {
-  clone, get, getter, isEmpty, toDictionary, remove, diff, definedKeys
+  clone, get, getter, isEmpty, toDictionary, remove, diff, definedKeys, deepToRaw
 } from '@shell/utils/object';
 
 describe('fx: get', () => {
@@ -227,3 +228,153 @@ describe('fx: definedKeys', () => {
     expect(result).toStrictEqual(expected);
   });
 });
+
+describe('fx: deepToRaw', () => {
+  it('should return primitives as is', () => {
+    expect(deepToRaw(null)).toBeNull();
+    expect(deepToRaw(undefined)).toBeUndefined();
+    expect(deepToRaw(42)).toBe(42);
+    expect(deepToRaw('test')).toBe('test');
+    expect(deepToRaw(true)).toBe(true);
+
+    const sym = Symbol('symbol');
+
+    expect(deepToRaw(sym)).toBe(sym);
+  });
+
+  it('should handle simple objects', () => {
+    const obj = { a: 1, b: 2 };
+    const result = deepToRaw(obj);
+
+    expect(result).toStrictEqual({ a: 1, b: 2 });
+    expect(result).not.toBe(obj); // Should not be the same reference
+  });
+
+  it('should handle arrays', () => {
+    const arr = [1, 2, 3];
+    const result = deepToRaw(arr);
+
+    expect(result).toStrictEqual([1, 2, 3]);
+    expect(result).not.toBe(arr); // Should not be the same reference
+  });
+
+  it('should handle nested objects', () => {
+    const obj = { a: { b: { c: 3 } } };
+    const result = deepToRaw(obj);
+
+    expect(result).toStrictEqual({ a: { b: { c: 3 } } });
+    expect(result).not.toBe(obj);
+    expect(result.a).not.toBe(obj.a);
+    expect(result.a.b).not.toBe(obj.a.b);
+  });
+
+  it('should handle nested arrays', () => {
+    const arr = [1, [2, [3]]];
+    const result = deepToRaw(arr);
+
+    expect(result).toStrictEqual([1, [2, [3]]]);
+    expect(result).not.toBe(arr);
+    expect(result[1]).not.toBe(arr[1]);
+  });
+
+  it('should handle reactive proxies (reactive object)', () => {
+    const reactiveObj = reactive({ a: 1, b: { c: 2 } });
+    const result = deepToRaw(reactiveObj);
+
+    expect(result).toStrictEqual({ a: 1, b: { c: 2 } });
+    expect(result).not.toBe(reactiveObj);
+    expect(isReactive(result)).toBe(false);
+  });
+
+  it('should handle nested reactive properties', () => {
+    const data = reactive({
+      num:   1,
+      str:   'test',
+      bool:  true,
+      nil:   null,
+      undef: undefined,
+      arr:   [1, 2, { a: 3 }],
+      obj:   { nested: reactive({ a: 1 }) },
+      func:  null,
+      sym:   null,
+    });
+
+    const result = deepToRaw(data);
+
+    expect(result).toStrictEqual({
+      num:   1,
+      str:   'test',
+      bool:  true,
+      nil:   null,
+      undef: undefined,
+      arr:   [1, 2, { a: 3 }],
+      obj:   { nested: { a: 1 } },
+      func:  null,
+      sym:   null,
+    });
+
+    expect(isReactive(result)).toBe(false);
+    expect(isReactive(result.obj)).toBe(false);
+    expect(isReactive(result.obj.nested)).toBe(false);
+  });
+
+  it('should handle circular references', () => {
+    const obj: { name: string; [key: string]: any } = { name: 'Alice' };
+
+    obj.self = obj; // Circular reference
+
+    const result = deepToRaw(obj);
+
+    expect(result).toStrictEqual({ name: 'Alice', self: result });
+  });
+
+  it('should handle objects with functions and symbols', () => {
+    const symbolKey = Symbol('key');
+    const obj = {
+      a:           1,
+      b() {},
+      [symbolKey]: 'symbolValue',
+    };
+
+    const result = deepToRaw(obj);
+
+    expect(result).toStrictEqual({ a: 1, b: null });
+    expect(result[symbolKey]).toBeUndefined(); // Symbols are skipped
+  });
+
+  it('should not mutate the original data', () => {
+    const obj = { a: { b: 2 } };
+    const original = JSON.stringify(obj);
+
+    deepToRaw(obj);
+    expect(JSON.stringify(obj)).toBe(original);
+  });
+
+  it('should handle complex data structures', () => {
+    const data = reactive({
+      num:   1,
+      str:   'test',
+      bool:  true,
+      nil:   null,
+      undef: undefined,
+      arr:   [1, 2, { a: 3 }],
+      obj:   { nested: { a: 1 } },
+      func:  () => {},
+      sym:   Symbol('sym'),
+    });
+
+    const result = deepToRaw(data);
+
+    expect(result).toStrictEqual({
+      num:   1,
+      str:   'test',
+      bool:  true,
+      nil:   null,
+      undef: undefined,
+      arr:   [1, 2, { a: 3 }],
+      obj:   { nested: { a: 1 } },
+      func:  null,
+      sym:   null,
+    });
+  });
+});

package/utils/object.js

@@ -1,3 +1,4 @@
+import { toRaw } from 'vue';
 import cloneDeep from 'lodash/cloneDeep';
 import flattenDeep from 'lodash/flattenDeep';
 import compact from 'lodash/compact';
@@ -434,3 +435,39 @@ export function dropKeys(obj, keys) {
     delete obj[k];
   }
 }
+
+/**
+ * Recursively convert a reactive object to a raw object
+ * @param {*} obj
+ * @param {*} cache
+ * @returns
+ */
+export function deepToRaw(obj, cache = new WeakSet()) {
+  if (obj === null || typeof obj !== 'object') {
+    // If obj is null or a primitive, return it as is
+    return obj;
+  }
+
+  // If the object has already been processed, return it to prevent circular references
+  if (cache.has(obj)) {
+    return obj;
+  }
+  cache.add(obj);
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => deepToRaw(item, cache));
+  } else {
+    const rawObj = toRaw(obj);
+    const result = {};
+
+    for (const key in rawObj) {
+      if (typeof rawObj[key] === 'function' || typeof rawObj[key] === 'symbol') {
+        result[key] = null;
+      } else {
+        result[key] = deepToRaw(rawObj[key], cache);
+      }
+    }
+
+    return result;
+  }
+}

package/utils/string.js

@@ -321,3 +321,12 @@ export function sanitizeValue(v) {
 export function sanitizeIP(v) {
   return (v || '').replace(/[^a-z0-9.:_-]/ig, '');
 }
+
+/**
+ * Return the string `<x> / <y>`
+ *
+ * Each param should be a number, otherwise `?` is used
+ */
+export function xOfy(x, y) {
+  return `${ typeof x === 'number' ? x : '?' }/${ typeof y === 'number' ? y : '?' }`;
+}

package/utils/validators/formRules/index.ts

@@ -499,6 +499,6 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions): {
     servicePort,
     subDomain,
     testRule,
-    wildcardHostname,
+    wildcardHostname
   };
 }

package/config/product/multi-cluster-apps.js

@@ -1,61 +0,0 @@
-import { LEGACY } from '@shell/store/features';
-import { DSL } from '@shell/store/type-map';
-
-export const NAME = 'mcapps';
-
-export function init(store) {
-  const {
-    product,
-    basicType,
-    virtualType,
-  } = DSL(store, NAME);
-
-  product({
-    icon:                  'marketplace',
-    category:              'legacy',
-    inStore:               'management',
-    ifFeature:             LEGACY,
-    removable:             false,
-    showClusterSwitcher:   false,
-    showWorkspaceSwitcher: false,
-  });
-
-  virtualType({
-    labelKey:   'legacy.catalogs',
-    name:       'mc-catalogs',
-    group:      'Root',
-    namespaced: false,
-    weight:     111,
-    icon:       'folder',
-    route:      { name: 'c-cluster-mcapps-pages-page', params: { cluster: 'local', page: 'catalogs' } },
-    exact:      true
-  });
-
-  virtualType({
-    labelKey:   'legacy.globalDnsEntries',
-    name:       'global-dns-entries',
-    group:      'Root',
-    namespaced: false,
-    weight:     110,
-    icon:       'folder',
-    route:      { name: 'c-cluster-mcapps-pages-page', params: { cluster: 'local', page: 'global-dns-entries' } },
-    exact:      true
-  });
-
-  virtualType({
-    labelKey:   'legacy.globalDnsProviders',
-    name:       'global-dns-providers',
-    group:      'Root',
-    namespaced: false,
-    weight:     109,
-    icon:       'folder',
-    route:      { name: 'c-cluster-mcapps-pages-page', params: { cluster: 'local', page: 'global-dns-providers' } },
-    exact:      true
-  });
-
-  basicType([
-    'mc-catalogs',
-    'global-dns-entries',
-    'global-dns-providers',
-  ]);
-}