@rancher/shell 3.0.8-rc.9 → 3.0.8

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

@@ -0,0 +1,437 @@
+import { DEVELOPER_LOAD_NAME_SUFFIX, createExtensionManager } 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,
+      builtin:         false,
+      types:           {},
+      uiConfig:        {},
+      l10n:            {},
+      modelExtensions: {},
+      stores:          [],
+      locales:         [],
+      routes:          [],
+      validators:      {},
+      uninstallHooks:  [],
+      productNames:    [],
+      products:        [],
+    })),
+    EXT_IDS: {
+      MODELS:          'models',
+      MODEL_EXTENSION: 'model-extension'
+    }
+  };
+});
+
+// Mock ExtensionPoint
+jest.mock('@shell/core/types', () => ({ 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;
+  let manager;
+
+  beforeEach(() => {
+    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 = '';
+    document.body.innerHTML = '';
+
+    // Create a fresh extension manager for each test
+    manager = createExtensionManager(context);
+  });
+
+  describe('factory Pattern', () => {
+    it('creates independent manager instances', () => {
+      const instance1 = createExtensionManager(context);
+      const instance2 = createExtensionManager(context);
+
+      expect(instance1).toBeDefined();
+      expect(instance2).toBeDefined();
+      expect(instance1).not.toBe(instance2);
+    });
+
+    it('provides access to internal context', () => {
+      const internal = manager.internal();
+
+      expect(internal).toBeDefined();
+      expect(internal.app).toBe(mockApp);
+      expect(internal.store).toBe(mockStore);
+      expect(internal.$axios).toBeDefined();
+      expect(internal.redirect).toBeDefined();
+      expect(internal.plugins).toBe(manager);
+    });
+  });
+
+  describe('registration (Dynamic)', () => {
+    it('registers and retrieves a dynamic component', () => {
+      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 mockFn = jest.fn();
+
+      manager.register('component', 'my-component', mockFn);
+      manager.unregister('component', 'my-component');
+
+      const retrieved = manager.getDynamic('component', 'my-component');
+
+      expect(retrieved).toBeUndefined();
+    });
+
+    it('accumulates l10n resources', () => {
+      const mockFn1 = jest.fn();
+      const mockFn2 = jest.fn();
+
+      manager.register('l10n', 'en-us', mockFn1);
+      manager.register('l10n', 'en-us', mockFn2);
+
+      const retrieved = manager.getDynamic('l10n', 'en-us');
+
+      expect(Array.isArray(retrieved)).toBe(true);
+      expect(retrieved).toHaveLength(2);
+      expect(retrieved).toContain(mockFn1);
+      expect(retrieved).toContain(mockFn2);
+    });
+
+    it('lists dynamic registrations by type', () => {
+      manager.register('component', 'comp1', jest.fn());
+      manager.register('component', 'comp2', jest.fn());
+      manager.register('edit', 'edit1', jest.fn());
+
+      const components = manager.listDynamic('component');
+      const edits = manager.listDynamic('edit');
+
+      expect(components).toHaveLength(2);
+      expect(components).toContain('comp1');
+      expect(components).toContain('comp2');
+      expect(edits).toHaveLength(1);
+      expect(edits).toContain('edit1');
+    });
+  });
+
+  describe('loadPluginAsync (URL Generation)', () => {
+    beforeEach(() => {
+      // 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 custom main file from metadata', async() => {
+      const pluginData = {
+        name:     'custom-plugin',
+        version:  '2.0.0',
+        metadata: { main: 'custom.js' }
+      };
+      const expectedUrl = `/api/v1/uiplugins/custom-plugin/2.0.0/plugin/custom.js`;
+
+      await manager.loadPluginAsync(pluginData);
+
+      expect(manager.loadAsync).toHaveBeenCalledWith('custom-plugin-2.0.0', 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', async() => {
+      const pluginData = {
+        name:    `my-plugin${ DEVELOPER_LOAD_NAME_SUFFIX }`,
+        version: '1.0.0'
+      };
+
+      await manager.loadPluginAsync(pluginData);
+
+      const expectedIdWithoutSuffix = 'my-plugin-1.0.0';
+
+      expect(manager.loadAsync).toHaveBeenCalledWith(
+        expectedIdWithoutSuffix,
+        expect.any(String)
+      );
+    });
+  });
+
+  describe('loadAsync (Script Injection)', () => {
+    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);
+      expect(script.dataset.purpose).toBe('extension');
+
+      // Manually trigger the onload event
+      script.onload();
+
+      // Await the promise
+      await loadPromise;
+
+      // Assertions
+      expect(mockPluginInit).toHaveBeenCalledWith(
+        expect.objectContaining({ id: pluginId }),
+        expect.objectContaining({
+          app:      mockApp,
+          store:    mockStore,
+          $axios:   {},
+          redirect: expect.any(Function),
+          plugins:  manager
+        })
+      );
+      expect(mockStore.dispatch).toHaveBeenCalledWith('uiplugins/addPlugin', expect.objectContaining({ id: pluginId }));
+
+      // Cleanup
+      delete window[pluginId];
+    });
+
+    it('rejects if plugin code is not available', async() => {
+      const pluginId = 'missing-plugin';
+      const loadPromise = manager.loadAsync(pluginId, 'test.js');
+
+      const script = document.head.querySelector(`script[id="${ pluginId }"]`);
+
+      // Don't set window[pluginId], simulate missing plugin
+      script.onload();
+
+      await expect(loadPromise).rejects.toThrow('Could not load plugin code');
+    });
+
+    it('rejects if plugin initialization fails', async() => {
+      const pluginId = 'error-plugin';
+      const mockPluginInit = jest.fn().mockImplementation(() => {
+        throw new Error('Init error');
+      });
+
+      window[pluginId] = { default: mockPluginInit };
+
+      const loadPromise = manager.loadAsync(pluginId, 'test.js');
+
+      const script = document.head.querySelector(`script[id="${ pluginId }"]`);
+
+      script.onload();
+
+      await expect(loadPromise).rejects.toThrow('Could not initialize plugin');
+
+      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');
+    });
+  });
+
+  describe('builtin extensions', () => {
+    it('registers and loads builtin extensions', () => {
+      const mockModule = {
+        default: jest.fn().mockImplementation((plugin) => {
+          plugin.types.models = { TestModel: jest.fn() };
+        })
+      };
+
+      manager.registerBuiltinExtension('builtin-test', mockModule);
+      manager.loadBuiltinExtensions();
+
+      expect(mockModule.default).toHaveBeenCalledWith(expect.objectContaining({ builtin: true }), expect.any(Object));
+      expect(mockStore.dispatch).toHaveBeenCalledWith('uiplugins/addPlugin', expect.objectContaining({
+        id:      'builtin-test',
+        builtin: true
+      }));
+    });
+
+    it('handles builtin extension that returns false', () => {
+      const mockModule = { default: jest.fn().mockReturnValue(false) };
+
+      manager.registerBuiltinExtension('skip-test', mockModule);
+      manager.loadBuiltinExtensions();
+
+      expect(mockModule.default).toHaveBeenCalledWith(expect.objectContaining({ builtin: true }), expect.any(Object));
+      expect(mockStore.dispatch).not.toHaveBeenCalledWith('uiplugins/addPlugin', expect.anything());
+    });
+
+    it('handles errors in builtin extension initialization', () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+      const mockModule = {
+        default: jest.fn().mockImplementation(() => {
+          throw new Error('Init failed');
+        })
+      };
+
+      manager.registerBuiltinExtension('error-builtin', mockModule);
+      manager.loadBuiltinExtensions();
+
+      expect(consoleErrorSpy).toHaveBeenCalledWith(expect.objectContaining({}));
+      expect(mockStore.dispatch).not.toHaveBeenCalledWith('uiplugins/addPlugin', expect.anything());
+
+      consoleErrorSpy.mockRestore();
+    });
+  });
+
+  describe('getValidator', () => {
+    it('retrieves registered validator', () => {
+      const mockValidator = jest.fn();
+
+      manager.register('validator', 'test-validator', mockValidator);
+
+      // Validators are stored separately, simulate applyPlugin behavior
+      const plugin = {
+        types:           {},
+        uiConfig:        {},
+        l10n:            {},
+        modelExtensions: {},
+        stores:          [],
+        locales:         [],
+        routes:          [],
+        validators:      { 'test-validator': mockValidator },
+        productNames:    [],
+      };
+
+      manager.applyPlugin(plugin);
+
+      const validator = manager.getValidator('test-validator');
+
+      expect(validator).toBe(mockValidator);
+    });
+  });
+
+  describe('lastLoad timestamp', () => {
+    it('updates lastLoad after plugin load', async() => {
+      const initialLastLoad = manager.lastLoad;
+      const pluginId = 'timestamp-test';
+
+      window[pluginId] = { default: jest.fn() };
+
+      const loadPromise = manager.loadAsync(pluginId, 'test.js');
+      const script = document.head.querySelector(`script[id="${ pluginId }"]`);
+
+      script.onload();
+      await loadPromise;
+
+      expect(manager.lastLoad).toBeGreaterThan(initialLastLoad);
+
+      delete window[pluginId];
+    });
+  });
+
+  describe('getUIConfig', () => {
+    it('returns UI config for specific type and area', () => {
+      const mockAction = { label: 'Test Action' };
+      const plugin = {
+        types:           {},
+        uiConfig:        { 'edit-yaml': { header: [mockAction] } },
+        l10n:            {},
+        modelExtensions: {},
+        stores:          [],
+        locales:         [],
+        routes:          [],
+        validators:      {},
+        productNames:    [],
+      };
+
+      manager.applyPlugin(plugin);
+
+      const config = manager.getUIConfig('edit-yaml', 'header');
+
+      expect(config).toHaveLength(1);
+      expect(config[0]).toBe(mockAction);
+    });
+
+    it('returns empty array for non-existent area in valid type', () => {
+      // Use a valid ExtensionPoint type that exists in uiConfig
+      const config = manager.getUIConfig('edit-yaml', 'non-existent-area');
+
+      expect(config).toStrictEqual([]);
+    });
+  });
+});

package/core/extension-manager-impl.js

@@ -8,9 +8,7 @@ import { addLinkInterceptor, removeLinkInterceptor } from '@shell/plugins/clean-
 
 export const DEVELOPER_LOAD_NAME_SUFFIX = '-developer-load';
 
-let extensionManagerInstance;
-
-const createExtensionManager = (context) => {
+export const createExtensionManager = (context) => {
   const {
     app, store, $axios, redirect
   } = context;
@@ -35,13 +33,13 @@ const createExtensionManager = (context) => {
   /**
    * When an extension adds a model extension, it provides the class - we will instantiate that class and store and use that
    */
-  function instantiateModelExtension($plugin, clz) {
+  function instantiateModelExtension($extension, 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,
-      $extension: $plugin,
+      $extension,
     };
 
     return new clz(context);
@@ -514,22 +512,3 @@ const createExtensionManager = (context) => {
     },
   };
 };
-
-/**
- * Initializes a new extension manager if one does not exist.
- * @param {*} context The Rancher Dashboard context object
- * @returns The extension manager instance
- */
-export const initExtensionManager = (context) => {
-  if (!extensionManagerInstance) {
-    extensionManagerInstance = createExtensionManager(context);
-  }
-
-  return extensionManagerInstance;
-};
-
-/**
- * Gets the extension manager instance.
- * @returns The extension manager instance
- */
-export const getExtensionManager = () => extensionManagerInstance;

package/core/plugin-helpers.ts

@@ -147,8 +147,8 @@ export function getApplicableExtensionEnhancements<T>(
   const extensionEnhancements: T[] = [];
 
   // gate it so that we prevent errors on older versions of dashboard
-  if (pluginCtx.$plugin?.getUIConfig) {
-    const actions = pluginCtx.$plugin.getUIConfig(actionType, uiArea);
+  if (pluginCtx.$extension?.getUIConfig) {
+    const actions = pluginCtx.$extension.getUIConfig(actionType, uiArea);
 
     actions.forEach((action: any, i: number) => {
       if (checkExtensionRouteBinding(currRoute, action.locationConfig, context || {})) {

package/core/plugin.ts

@@ -18,7 +18,8 @@ import {
   NavHooks, OnNavToPackage, OnNavAwayFromPackage, OnLogIn, OnLogOut,
   PaginationTableColumn,
   ExtensionEnvironment,
-  ServerSidePaginationExtensionConfig
+  ServerSidePaginationExtensionConfig,
+  TableAction
 } from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
 import { defineAsyncComponent, markRaw, Component } from 'vue';
@@ -272,6 +273,13 @@ export class Plugin implements IPlugin {
     });
   }
 
+  /**
+   * Adds an action/button to the UI
+   */
+  addTableHook(where: string, when: LocationConfig | string, action: TableAction): void {
+    this._addUIConfig(ExtensionPoint.TABLE, where, when, action);
+  }
+
   setHomePage(component: any) {
     this.addRoute({
       name: 'home',

package/core/plugins-loader.js

@@ -13,10 +13,10 @@ export default function({
   store,
   $axios,
   redirect,
-  $plugin,
+  $extension,
 }, inject) {
   if (dynamicLoader) {
-    dynamicLoader.default($plugin);
+    dynamicLoader.default($extension);
   }
 
   // The libraries we build have Vue externalised, so we need to expose Vue as a global for

package/core/types-provisioning.ts

@@ -60,6 +60,10 @@ export interface ClusterProvisionerContext {
    * Used to make http requests
    */
   axios: any,
+  /**
+   * [Deprecated] Definition of the extension
+   */
+  $plugin: any,
   /**
    * Definition of the extension
    */

package/core/types.ts

@@ -60,6 +60,7 @@ export enum ExtensionPoint {
   PANEL = 'Panel', // eslint-disable-line no-unused-vars
   CARD = 'Card', // eslint-disable-line no-unused-vars
   TABLE_COL = 'TableColumn', // eslint-disable-line no-unused-vars
+  TABLE = 'Table', // eslint-disable-line no-unused-vars
 }
 
 /** Enum regarding action locations that are extensible in the UI */
@@ -79,6 +80,11 @@ export enum PanelLocation {
 /** Enum regarding tab locations that are extensible in the UI */
 export enum TabLocation {
   RESOURCE_DETAIL = 'tab', // eslint-disable-line no-unused-vars
+  OTHER = 'other-tab-locations', // eslint-disable-line no-unused-vars
+  RESOURCE_DETAIL_PAGE = 'resource-detail-page', // eslint-disable-line no-unused-vars
+  RESOURCE_CREATE_PAGE = 'resource-create-page', // eslint-disable-line no-unused-vars
+  RESOURCE_EDIT_PAGE = 'resource-edit-page', // eslint-disable-line no-unused-vars
+  RESOURCE_SHOW_CONFIGURATION = 'resource-show-configuration', // eslint-disable-line no-unused-vars
   CLUSTER_CREATE_RKE2 = 'cluster-create-rke2', // eslint-disable-line no-unused-vars
 }
 
@@ -92,6 +98,16 @@ export enum TableColumnLocation {
   RESOURCE = 'resource-list', // eslint-disable-line no-unused-vars
 }
 
+/** Enum regarding table locations that are extensible in the UI */
+export enum TableLocation {
+  RESOURCE = 'resource-list', // eslint-disable-line no-unused-vars
+}
+
+/** Definition of a Table extension hook */
+export type TableAction = {
+  tableHook: Function
+};
+
 /** Definition of the shortcut object (keyboard shortcuts) */
 export type ShortCutKey = {
   windows?: string[];
@@ -234,6 +250,11 @@ export interface ProductOptions {
    */
   ifHaveType?: string | RegExp;
 
+  /**
+   * Hide the product if the type is present (opposite of ifHaveType)
+   */
+  ifNotHaveType?: string | RegExp;
+
   /**
    * The vuex store that this product should use by default i.e. 'management'
    */
@@ -283,6 +304,11 @@ export interface ProductOptions {
  * Configuration required to show a header in a ResourceTable
  */
 export interface HeaderOptions {
+  /**
+   * Order/position of the table column added by an extension
+   */
+  weight?: number;
+
   /**
    * Name of the header. This should be unique.
    */
@@ -654,6 +680,15 @@ export interface IPlugin {
    */
   addTableColumn(where: TableColumnLocation | string, when: LocationConfig | string, column: TableColumn, paginationColumn?: TableColumn): void;
 
+  /**
+   * Adds to Table events hook on ResourceTable
+   *
+   * @param where
+   * @param when
+   * @param action
+   */
+  addTableHook(where: TableLocation | string, when: LocationConfig | string, action: TableAction): void;
+
   /**
    * Set the component to use for the landing home page
    * @param component Home page component

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

@@ -96,15 +96,15 @@ export default {
     await this.value.waitForProvisioner();
 
     // Support for the 'provisioner' extension
-    const extClass = this.$plugin.getDynamic('provisioner', this.value.machineProvider);
+    const extClass = this.$extension.getDynamic('provisioner', this.value.machineProvider);
 
     if (extClass) {
       this.extProvider = new extClass({
-        dispatch: this.$store.dispatch,
-        getters:  this.$store.getters,
-        axios:    this.$store.$axios,
-        $plugin:  this.$store.app.$plugin,
-        $t:       this.t
+        dispatch:   this.$store.dispatch,
+        getters:    this.$store.getters,
+        axios:      this.$store.$axios,
+        $extension: this.$store.app.$extension,
+        $t:         this.t
       });
 
       this.extDetailTabs = {
@@ -893,6 +893,7 @@ export default {
                         :disabled="!group.ref.canScaleDownPool()"
                         type="button"
                         class="btn btn-sm role-secondary"
+                        data-testid="scale-down-button"
                         @click="toggleScaleDownModal($event, group.ref)"
                       >
                         <i class="icon icon-sm icon-minus" />
@@ -902,6 +903,7 @@ export default {
                         :disabled="!group.ref.canScaleUpPool()"
                         type="button"
                         class="btn btn-sm role-secondary ml-10"
+                        data-testid="scale-up-button"
                         @click="group.ref.scalePool(1)"
                       >
                         <i class="icon icon-sm icon-plus" />

package/dialog/DeveloperLoadExtensionDialog.vue

@@ -145,7 +145,7 @@ export default {
         }
       }
 
-      this.$plugin.loadAsync(name, url).then(() => {
+      this.$extension.loadAsync(name, url).then(() => {
         this.closeDialog(true);
 
         this.$store.dispatch('growl/success', {