@rancher/shell 3.0.8-rc.7 → 3.0.8-rc.9

package/core/__test__/extension-manager-impl.test.js

@@ -0,0 +1,236 @@
+import { DEVELOPER_LOAD_NAME_SUFFIX } from '@shell/core/extension-manager-impl';
+
+// Mock external dependencies
+jest.mock('@shell/store/type-map', () => ({ productsLoaded: jest.fn().mockReturnValue(true) }));
+
+jest.mock('@shell/plugins/dashboard-store/model-loader', () => ({ clearModelCache: jest.fn() }));
+
+jest.mock('@shell/config/uiplugins', () => ({ UI_PLUGIN_BASE_URL: '/api/v1/uiplugins' }));
+
+jest.mock('@shell/plugins/clean-html', () => ({
+  addLinkInterceptor:    jest.fn(),
+  removeLinkInterceptor: jest.fn(),
+}));
+
+// Mock the Plugin class
+jest.mock('@shell/core/plugin', () => {
+  return {
+    Plugin: jest.fn().mockImplementation((id) => ({
+      id,
+      name:            id,
+      types:           {},
+      uiConfig:        {},
+      l10n:            {},
+      modelExtensions: {},
+      stores:          [],
+      locales:         [],
+      routes:          [],
+      validators:      {},
+      uninstallHooks:  [],
+      productNames:    [],
+    })),
+    EXT_IDS: {
+      MODELS:          'models',
+      MODEL_EXTENSION: 'model-extension'
+    },
+    ExtensionPoint: { EDIT_YAML: 'edit-yaml' }
+  };
+});
+
+// Mock PluginRoutes
+jest.mock('@shell/core/plugin-routes', () => {
+  return { PluginRoutes: jest.fn().mockImplementation(() => ({ addRoutes: jest.fn() })) };
+});
+
+describe('extension Manager', () => {
+  let mockStore;
+  let mockApp;
+  let context;
+
+  // These variables will be assigned the fresh functions inside beforeEach
+  let initExtensionManager;
+  let getExtensionManager;
+
+  beforeEach(() => {
+    // singleton instance for every test run, preventing mock store leaks.
+    jest.resetModules();
+
+    // Re-require the System Under Test (SUT)
+    const extensionManagerModule = require('../extension-manager-impl');
+
+    initExtensionManager = extensionManagerModule.initExtensionManager;
+    getExtensionManager = extensionManagerModule.getExtensionManager;
+
+    jest.clearAllMocks();
+
+    // Setup Mock Context
+    mockStore = {
+      getters:  { 'i18n/t': jest.fn() },
+      dispatch: jest.fn(),
+      commit:   jest.fn(),
+    };
+
+    mockApp = { router: {} };
+
+    context = {
+      app:      mockApp,
+      store:    mockStore,
+      $axios:   {},
+      redirect: jest.fn(),
+    };
+
+    // Clean up DOM from previous tests
+    document.head.innerHTML = '';
+  });
+
+  describe('singleton Pattern', () => {
+    it('initializes and returns the same instance', () => {
+      const instance1 = initExtensionManager(context);
+      const instance2 = getExtensionManager();
+      const instance3 = initExtensionManager(context);
+
+      expect(instance1).toBeDefined();
+      expect(instance1).toBe(instance2);
+      expect(instance1).toBe(instance3);
+    });
+  });
+
+  describe('registration (Dynamic)', () => {
+    it('registers and retrieves a dynamic component', () => {
+      const manager = initExtensionManager(context);
+      const mockFn = jest.fn();
+
+      manager.register('component', 'my-component', mockFn);
+
+      const retrieved = manager.getDynamic('component', 'my-component');
+
+      expect(retrieved).toBe(mockFn);
+    });
+
+    it('unregisters a dynamic component', () => {
+      const manager = initExtensionManager(context);
+      const mockFn = jest.fn();
+
+      manager.register('component', 'my-component', mockFn);
+      manager.unregister('component', 'my-component');
+
+      const retrieved = manager.getDynamic('component', 'my-component');
+
+      expect(retrieved).toBeUndefined();
+    });
+  });
+
+  describe('loadPluginAsync (URL Generation)', () => {
+    let manager;
+
+    beforeEach(() => {
+      manager = initExtensionManager(context);
+      // Mock the internal loadAsync so we only test URL generation here
+      jest.spyOn(manager, 'loadAsync').mockImplementation().mockResolvedValue();
+    });
+
+    it('generates correct URL for standard plugin', async() => {
+      const pluginData = { name: 'elemental', version: '1.0.0' };
+      const expectedId = 'elemental-1.0.0';
+      const expectedUrl = `/api/v1/uiplugins/elemental/1.0.0/plugin/elemental-1.0.0.umd.min.js`;
+
+      await manager.loadPluginAsync(pluginData);
+
+      expect(manager.loadAsync).toHaveBeenCalledWith(expectedId, expectedUrl);
+    });
+
+    it('handles "direct" metadata plugins', async() => {
+      const pluginData = {
+        name:     'direct-plugin',
+        version:  '1.0.0',
+        endpoint: 'http://localhost:8000/plugin.js',
+        metadata: { direct: 'true' }
+      };
+
+      await manager.loadPluginAsync(pluginData);
+
+      expect(manager.loadAsync).toHaveBeenCalledWith('direct-plugin-1.0.0', 'http://localhost:8000/plugin.js');
+    });
+
+    it('removes developer suffix from ID but keeps it for internal logic', async() => {
+      const pluginData = {
+        name:    `my-plugin${ DEVELOPER_LOAD_NAME_SUFFIX }`,
+        version: `1.0.0`
+      };
+
+      await manager.loadPluginAsync(pluginData);
+
+      // Expected ID passed to loadAsync should NOT have the suffix
+      const expectedIdWithoutSuffix = 'my-plugin-1.0.0';
+
+      expect(manager.loadAsync).toHaveBeenCalledWith(
+        expectedIdWithoutSuffix,
+        expect.any(String)
+      );
+    });
+  });
+
+  describe('loadAsync (Script Injection)', () => {
+    let manager;
+
+    beforeEach(() => {
+      manager = initExtensionManager(context);
+    });
+
+    it('resolves immediately if element already exists', async() => {
+      const id = 'existing-plugin';
+      const script = document.createElement('script');
+
+      script.id = id;
+      document.body.appendChild(script);
+
+      await expect(manager.loadAsync(id, 'url.js')).resolves.toBeUndefined();
+
+      document.body.removeChild(script);
+    });
+
+    it('injects script tag and initializes plugin on load', async() => {
+      const pluginId = 'test-plugin';
+      const pluginUrl = 'http://test.com/plugin.js';
+
+      // Mock the window object to simulate the plugin loading into global scope
+      const mockPluginInit = jest.fn();
+
+      window[pluginId] = { default: mockPluginInit };
+
+      // Start the load
+      const loadPromise = manager.loadAsync(pluginId, pluginUrl);
+
+      // Find the injected script tag in the DOM
+      const script = document.head.querySelector(`script[id="${ pluginId }"]`);
+
+      expect(script).toBeTruthy();
+      expect(script.src).toBe(pluginUrl);
+
+      // Manually trigger the onload event
+      script.onload();
+
+      // Await the promise
+      await loadPromise;
+
+      // Assertions
+      expect(mockPluginInit).toHaveBeenCalledWith(expect.objectContaining({ id: pluginId }), expect.objectContaining({ ...context }));
+      expect(mockStore.dispatch).toHaveBeenCalledWith('uiplugins/addPlugin', expect.objectContaining({ id: pluginId }));
+
+      // Cleanup
+      delete window[pluginId];
+    });
+
+    it('rejects if script load fails', async() => {
+      const pluginId = 'fail-plugin';
+      const loadPromise = manager.loadAsync(pluginId, 'bad-url.js');
+
+      const script = document.head.querySelector(`script[id="${ pluginId }"]`);
+
+      // Trigger error
+      script.onerror({ target: { src: 'bad-url.js' } });
+
+      await expect(loadPromise).rejects.toThrow('Failed to load script');
+    });
+  });
+});

package/core/extension-manager-impl.js

@@ -6,6 +6,8 @@ import { UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
 import { ExtensionPoint } from './types';
 import { addLinkInterceptor, removeLinkInterceptor } from '@shell/plugins/clean-html';
 
+export const DEVELOPER_LOAD_NAME_SUFFIX = '-developer-load';
+
 let extensionManagerInstance;
 
 const createExtensionManager = (context) => {
@@ -35,11 +37,11 @@ const createExtensionManager = (context) => {
    */
   function instantiateModelExtension($plugin, clz) {
     const context = {
-      dispatch: store.dispatch,
-      getters:  store.getters,
-      t:        store.getters['i18n/t'],
+      dispatch:   store.dispatch,
+      getters:    store.getters,
+      t:          store.getters['i18n/t'],
       $axios,
-      $plugin,
+      $extension: $plugin,
     };
 
     return new clz(context);
@@ -63,9 +65,18 @@ const createExtensionManager = (context) => {
     // Load a plugin from a UI package
     loadPluginAsync(plugin) {
       const { name, version } = plugin;
-      const id = `${ name }-${ version }`;
+      let id = `${ name }-${ version }`;
       let url;
 
+      // for a developer load, we need to remove the suffix applied
+      // otherwise the extension won't load correctly
+      // but with this at least we won't hit developer loaded cards find charts
+      // when they aren't supposed to
+      if (id.includes(DEVELOPER_LOAD_NAME_SUFFIX)) {
+        id = id.replace(DEVELOPER_LOAD_NAME_SUFFIX, '');
+      }
+
+      // this is where a developer load hits (direct=true, developer=true)
       if (plugin?.metadata?.direct === 'true') {
         url = plugin.endpoint;
       } else {
@@ -455,7 +466,13 @@ const createExtensionManager = (context) => {
         try {
           const provisioner = context.$extension.getDynamic('provisioner', name);
 
-          return new provisioner({ ...context });
+          const defaults = {
+            isCreate: false,
+            isEdit:   false,
+            isView:   false
+          };
+
+          return new provisioner({ ...defaults, ...context });
         } catch (e) {
           console.error('Error loading provisioner(s) from extensions', e); // eslint-disable-line no-console
         }

package/core/types-provisioning.ts

@@ -63,7 +63,7 @@ export interface ClusterProvisionerContext {
   /**
    * Definition of the extension
    */
-  $plugin: any,
+  $extension: any,
   /**
    * Function to retrieve a localised string
    */

package/detail/provisioning.cattle.io.cluster.vue

@@ -578,6 +578,7 @@ export default {
       // Hosted kubernetes providers with private endpoints need the registration tab
       // https://github.com/rancher/dashboard/issues/6036
       // https://github.com/rancher/dashboard/issues/4545
+
       if ( this.value.isHostedKubernetesProvider && this.value.isPrivateHostedProvider && !this.isClusterReady ) {
         return this.extDetailTabs.registration;
       }

package/dialog/DeveloperLoadExtensionDialog.vue

@@ -4,6 +4,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import { UI_PLUGIN } from '@shell/config/types';
 import { UI_PLUGIN_CHART_ANNOTATIONS, UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+import { DEVELOPER_LOAD_NAME_SUFFIX } from '@shell/core/extension-manager-impl';
 
 export default {
   emits: ['close'],
@@ -101,8 +102,16 @@ export default {
       const parts = name.split('-');
 
       if (parts.length >= 2) {
-        version = parts.pop();
-        crdName = parts.join('-');
+        // fixing the name-version separation, especially in RC versions
+        // like: elemental-3.0.1-rc.1
+        // on capturing version it must be "digit + dot + digit" + rest of string
+        const regex = /^(?<name>.+?)-(?<version>\d+\.\d+.*)$/;
+        const match = name.match(regex);
+
+        if (match && match.groups) {
+          version = match.groups.version;
+          crdName = match.groups.name;
+        }
       }
 
       if (this.persist) {
@@ -114,7 +123,7 @@ export default {
           },
           spec: {
             plugin: {
-              name:     crdName,
+              name:     `${ crdName }${ DEVELOPER_LOAD_NAME_SUFFIX }`,
               version,
               endpoint: url,
               noCache:  true,

package/dialog/RollbackWorkloadDialog.vue

@@ -165,12 +165,9 @@ export default {
       return option.label;
     },
     sizeDialog() {
-      const dialogs = document.getElementsByClassName('modal-container');
-      const width = this.showDiff ? '85%' : '600px';
+      const modalWidth = this.showDiff ? '85%' : '600px';
 
-      if (dialogs.length === 1) {
-        dialogs[0].style.setProperty('width', width);
-      }
+      this.$store.commit('action-menu/updateModalData', [{ key: 'modalWidth', value: modalWidth }]);
     },
     sanitizeYaml(obj, path = '') {
       const res = {};

package/edit/__tests__/fleet.cattle.io.helmop.test.ts

@@ -243,7 +243,7 @@ describe.each([
 
     await fleetSecretSelector.vm.$emit('update:value', ['secret2', 'secret3']);
 
-    expect(wrapper.vm.value.spec.helm.downstreamResources).toStrictEqual([{ name: 'secret2', kind: 'Secret' }, { name: 'secret3', kind: 'Secret' }]);
+    expect(wrapper.vm.value.spec.downstreamResources).toStrictEqual([{ name: 'secret2', kind: 'Secret' }, { name: 'secret3', kind: 'Secret' }]);
   });
 
   it('should update downstreamResources with new ConfigMaps when FleetConfigMapSelector emits update event', async() => {
@@ -260,6 +260,6 @@ describe.each([
 
     await fleetConfigMapSelector.vm.$emit('update:value', ['configMap2', 'configMap3']);
 
-    expect(wrapper.vm.value.spec.helm.downstreamResources).toStrictEqual([{ name: 'configMap2', kind: 'ConfigMap' }, { name: 'configMap3', kind: 'ConfigMap' }]);
+    expect(wrapper.vm.value.spec.downstreamResources).toStrictEqual([{ name: 'configMap2', kind: 'ConfigMap' }, { name: 'configMap3', kind: 'ConfigMap' }]);
   });
 });

package/edit/autoscaling.horizontalpodautoscaler/index.vue

@@ -209,6 +209,7 @@ export default {
       <Tabbed
         :side-tabs="true"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
       >
         <Tab
           name="target"

package/edit/configmap.vue

@@ -111,6 +111,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         name="data"

package/edit/constraints.gatekeeper.sh.constraint/index.vue

@@ -278,6 +278,7 @@ export default {
       <Tabbed
         :side-tabs="true"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
         @changed="onTabChanged"
       >
         <Tab

package/edit/fleet.cattle.io.helmop.vue

@@ -237,11 +237,11 @@ export default {
     },
 
     downstreamSecretsList() {
-      return (this.value.spec.helm.downstreamResources || []).filter((r) => r.kind === 'Secret').map((r) => r.name);
+      return (this.value.spec.downstreamResources || []).filter((r) => r.kind === 'Secret').map((r) => r.name);
     },
 
     downstreamConfigMapsList() {
-      return (this.value.spec.helm.downstreamResources || []).filter((r) => r.kind === 'ConfigMap').map((r) => r.name);
+      return (this.value.spec.downstreamResources || []).filter((r) => r.kind === 'ConfigMap').map((r) => r.name);
     },
   },
 
@@ -446,14 +446,14 @@ export default {
     updateDownstreamResources(kind, list) {
       switch (kind) {
       case 'Secret':
-        this.value.spec.helm.downstreamResources = [
-          ...(this.value.spec.helm.downstreamResources || []).filter((r) => r.kind !== 'Secret'),
+        this.value.spec.downstreamResources = [
+          ...(this.value.spec.downstreamResources || []).filter((r) => r.kind !== 'Secret'),
           ...(list || []).map((name) => ({ name, kind: 'Secret' })),
         ];
         break;
       case 'ConfigMap':
-        this.value.spec.helm.downstreamResources = [
-          ...(this.value.spec.helm.downstreamResources || []).filter((r) => r.kind !== 'ConfigMap'),
+        this.value.spec.downstreamResources = [
+          ...(this.value.spec.downstreamResources || []).filter((r) => r.kind !== 'ConfigMap'),
           ...(list || []).map((name) => ({ name, kind: 'ConfigMap' })),
         ];
         break;

package/edit/helm.cattle.io.projecthelmchart.vue

@@ -143,6 +143,7 @@ export default {
           ref="tabs"
           :side-tabs="true"
           :use-hash="useTabbedHash"
+          :default-tab="defaultTab"
         >
           <Questions
             v-model:value="value.spec.values"

package/edit/k8s.cni.cncf.io.networkattachmentdefinition.vue

@@ -74,6 +74,7 @@ export default {
       class="mt-15"
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         name="basics"

package/edit/logging-flow/index.vue

@@ -405,6 +405,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
       @changed="tabChanged($event)"
     >
       <Tab

package/edit/logging.banzaicloud.io.output/index.vue

@@ -212,6 +212,7 @@ export default {
         ref="tabbed"
         :side-tabs="true"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
         @changed="tabChanged($event)"
       >
         <Tab

package/edit/management.cattle.io.fleetworkspace.vue

@@ -199,7 +199,7 @@ export default {
 
     <Tabbed
       :side-tabs="true"
-      default-tab="members"
+      :default-tab="defaultTab || 'members'"
       :use-hash="useTabbedHash"
     >
       <!-- <Tab name="members" label-key="generic.members" :weight="2">

package/edit/management.cattle.io.project.vue

@@ -198,6 +198,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         v-if="canViewMembers"

package/edit/monitoring.coreos.com.alertmanagerconfig/index.vue

@@ -204,7 +204,10 @@ export default {
       @input="$emit('input', $event)"
     />
 
-    <Tabbed :use-hash="useTabbedHash">
+    <Tabbed
+      :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
+    >
       <Tab
         :label="t('monitoring.route.label')"
         :weight="1"

package/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue

@@ -313,8 +313,9 @@ export default {
     <Tabbed
       ref="tabbed"
       :side-tabs="true"
-      default-tab="overview"
+      :default-tab="defaultTab || 'overview'"
       :use-hash="useTabbedHash"
+
       @changed="tabChanged"
     >
       <Tab

package/edit/monitoring.coreos.com.prometheusrule/index.vue

@@ -155,6 +155,7 @@ export default {
         :side-tabs="true"
         :show-tabs-add-remove="mode !== 'view'"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
         @addTab="addRuleGroup"
         @removeTab="removeGroupRule"
       >

package/edit/monitoring.coreos.com.receiver/index.vue

@@ -218,8 +218,9 @@ export default {
     <Tabbed
       ref="tabbed"
       :side-tabs="true"
-      default-tab="overview"
+      :default-tab="defaultTab || 'overview'"
       :use-hash="useTabbedHash"
+
       @changed="tabChanged"
     >
       <Tab

package/edit/monitoring.coreos.com.route.vue

@@ -102,7 +102,7 @@ export default {
     <Tabbed
       ref="tabbed"
       :side-tabs="true"
-      default-tab="overview"
+      :default-tab="defaultTab || 'overview'"
       :use-hash="useTabbedHash"
     >
       <Tab

package/edit/namespace.vue

@@ -203,6 +203,7 @@ export default {
       :mode="mode"
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
       @update:value="$emit('input', $event)"
     >
       <Tab

package/edit/networking.istio.io.destinationrule/index.vue

@@ -69,6 +69,7 @@ export default {
       <Tabbed
         :side-tabs="true"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
       >
         <Tab
           name="subsets"

package/edit/networking.k8s.io.ingress/index.vue

@@ -229,6 +229,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         :label="firstTabLabel"

package/edit/networking.k8s.io.networkpolicy/PolicyRules.vue

@@ -59,6 +59,7 @@ export default {
           :side-tabs="true"
           :show-tabs-add-remove="mode !== 'view'"
           :use-hash="useTabbedHash"
+          :default-tab="defaultTab"
           @addTab="addPolicyRule"
           @removeTab="removePolicyRule"
         >

package/edit/networking.k8s.io.networkpolicy/index.vue

@@ -178,6 +178,7 @@ export default {
         <Tabbed
           :side-tabs="true"
           :use-hash="useTabbedHash"
+          :default-tab="defaultTab"
         >
           <Tab
             name="ingress"

package/edit/node.vue

@@ -51,6 +51,7 @@ export default {
       :value="value"
       :mode="mode"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
       @update:value="$emit('input', $event)"
     >
       <Tab