@rancher/shell 3.0.8-rc.10 → 3.0.8-rc.12

package/components/ResourceTable.vue

@@ -316,7 +316,7 @@ export default {
 
       // add custom table columns provided by the extensions ExtensionPoint.TABLE_COL hook
       // gate it so that we prevent errors on older versions of dashboard
-      if (this.$store.$plugin?.getUIConfig) {
+      if (this.$store.$extension?.getUIConfig) {
         // { column: TableColumn, paginationColumn: PaginationTableColumn }[]
         const extensionCols = getApplicableExtensionEnhancements(this, ExtensionPoint.TABLE_COL, TableColumnLocation.RESOURCE, this.$route);
 

package/components/SortableTable/index.vue

@@ -765,7 +765,7 @@ export default {
                 needRef = true;
               } else {
                 // Check if we have a formatter from a plugin
-                const pluginFormatter = this.$plugin?.getDynamic('formatters', c.formatter);
+                const pluginFormatter = this.$extension?.getDynamic('formatters', c.formatter);
 
                 if (pluginFormatter) {
                   component = defineAsyncComponent(pluginFormatter);

package/components/auth/login/ldap.vue

@@ -34,9 +34,9 @@ export default {
         });
 
         await loadPlugins({
-          app:     this.$store.app,
-          store:   this.$store,
-          $plugin: this.$store.$plugin
+          app:        this.$store.app,
+          store:      this.$store,
+          $extension: this.$store.$extension,
         });
 
         buttonCb(true);

package/components/form/NodeScheduling.vue

@@ -181,7 +181,7 @@ export default {
         :options="selectNodeOptions"
         :mode="mode"
         :data-testid="'node-scheduling-selectNode'"
-        @input="update"
+        @update:value="update"
       />
     </div>
     <template v-if="selectNode === 'nodeSelector'">
@@ -205,7 +205,7 @@ export default {
         v-model:value="nodeAffinity"
         :mode="mode"
         :data-testid="'node-scheduling-nodeAffinity'"
-        @input="update"
+        @update:value="update"
       />
     </template>
   </div>

package/components/nav/Group.vue

@@ -41,6 +41,11 @@ export default {
     fixedOpen: {
       type:    Boolean,
       default: false,
+    },
+
+    highlightRoute: {
+      type:    Boolean,
+      default: true,
     }
   },
 
@@ -233,7 +238,7 @@ export default {
 <template>
   <div
     class="accordion"
-    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren, 'group-highlight': isGroupActive }"
+    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren, 'group-highlight': highlightRoute && isGroupActive }"
   >
     <div
       v-if="showHeader || (!onlyHasOverview && canCollapse)"
@@ -242,7 +247,7 @@ export default {
       <div
         v-if="showHeader"
         class="header"
-        :class="{'active': isOverview, 'noHover': !canCollapse || fixedOpen}"
+        :class="{'active': highlightRoute && isOverview, 'noHover': !canCollapse || fixedOpen}"
         role="button"
         :tabindex="fixedOpen ? -1 : 0"
         :aria-label="group.labelDisplay || group.label || ''"
@@ -311,6 +316,7 @@ export default {
             :can-collapse="canCollapse"
             :group="child"
             :fixed-open="fixedOpen"
+            :highlight-route="highlightRoute"
             @selected="groupSelected($event)"
             @expand="expandGroup($event)"
             @close="close($event)"
@@ -322,6 +328,7 @@ export default {
           :is-root="depth == 0 && !showHeader"
           :type="child"
           :depth="depth"
+          :highlight-route="highlightRoute"
           @selected="selectType($event)"
         />
       </template>

package/components/nav/Header.vue

@@ -254,7 +254,7 @@ export default {
           this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, neu);
           this.updateExtensionActionsEnabled();
 
-          this.navHeaderRight = this.$plugin?.getDynamic('component', 'NavHeaderRight');
+          this.navHeaderRight = this.$extension?.getDynamic('component', 'NavHeaderRight');
         }
       },
       immediate: true,

package/components/nav/Type.vue

@@ -27,6 +27,11 @@ export default {
       type:    Number,
       default: 0,
     },
+
+    highlightRoute: {
+      type:    Boolean,
+      default: true,
+    },
   },
 
   data() {
@@ -121,12 +126,12 @@ export default {
   >
     <li
       class="child nav-type"
-      :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': isActive, 'router-link-exact-active': isExactActive}"
+      :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': highlightRoute && isActive, 'router-link-exact-active': highlightRoute && isExactActive}"
       @click="navigate"
       @keypress.enter="navigate"
     >
       <TabTitle
-        v-if="isExactActive"
+        v-if="highlightRoute && isExactActive"
         :show-child="false"
       >
         {{ type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label) }}
@@ -136,7 +141,7 @@ export default {
         :aria-label="type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label)"
         :href="href"
         class="type-link"
-        :aria-current="isActive ? 'page' : undefined"
+        :aria-current="highlightRoute && isActive ? 'page' : undefined"
         @click="selectType(); navigate($event);"
         @mouseenter="setNear(true)"
         @mouseleave="setNear(false)"

package/components/nav/__tests__/Type.test.ts

@@ -250,6 +250,65 @@ describe('component: Type', () => {
       });
     });
 
+    describe('should respect highlightRoute prop', () => {
+      it('should not use active class when highlightRoute is false even if route is active', () => {
+        const wrapper = shallowMount(Type as any, {
+          props: { type: defaultRouteTypeProp, highlightRoute: false },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: {
+              $store: storeMock, $router: routerMock, $route: routeMock
+            },
+            stubs: { routerLink: createChildRenderingRouterLinkStub() },
+          },
+        });
+
+        const elementWithSelector = wrapper.find(`.${ activeClass }`);
+
+        expect(elementWithSelector.exists()).toBe(false);
+      });
+
+      it('should not use exact active class when highlightRoute is false even if route is exact active', () => {
+        const wrapper = shallowMount(Type as any, {
+          props: { type: defaultRouteTypeProp, highlightRoute: false },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: {
+              $store: storeMock, $router: routerMock, $route: routeMock
+            },
+            stubs: { routerLink: createChildRenderingRouterLinkStub({ isExactActive: true }) },
+          },
+        });
+
+        const elementWithSelector = wrapper.find(`.${ exactActiveClass }`);
+
+        expect(elementWithSelector.exists()).toBe(false);
+      });
+
+      it('should use active class when highlightRoute is true (default) and route is active', () => {
+        const wrapper = shallowMount(Type as any, {
+          props: { type: defaultRouteTypeProp, highlightRoute: true },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: {
+              $store: storeMock, $router: routerMock, $route: routeMock
+            },
+            stubs: { routerLink: createChildRenderingRouterLinkStub() },
+          },
+        });
+
+        const elementWithSelector = wrapper.find(`.${ activeClass }`);
+
+        expect(elementWithSelector.exists()).toBe(true);
+      });
+    });
+
     describe('should handle the favorite icon appropriately', () => {
       it('should show favorite icon if mouse is over and type is favorite', async() => {
         const wrapper = shallowMount(Type as any, {

package/config/router/navigation-guards/clusters.js

@@ -30,12 +30,12 @@ export async function loadClusters(to, from, next, { store }) {
     const oldPkg = getPackageFromRoute(from);
     const oldProduct = getProductFromRoute(from);
 
-    // TODO: Replace all references to store.$plugin.
+    // TODO: Replace all references to store.$extension.
     //       Unfortunately the initialization code has circular dependencies between creating
     //       the router and creating the store that will need to be untangled before this can be tackled.
 
     // Leave an old pkg where we weren't before?
-    const oldPkgPlugin = oldPkg ? Object.values(store.$plugin.getPlugins()).find((p) => p.name === oldPkg) : null;
+    const oldPkgPlugin = oldPkg ? Object.values(store.$extension.getPlugins()).find((p) => p.name === oldPkg) : null;
 
     if (oldPkg && oldPkg !== pkg ) {
       // Execute anything optional the plugin wants to. For example resetting it's store to remove data
@@ -53,7 +53,7 @@ export async function loadClusters(to, from, next, { store }) {
     ];
 
     // Entering a new package where we weren't before?
-    const newPkgPlugin = pkg ? Object.values(store.$plugin.getPlugins()).find((p) => p.name === pkg) : null;
+    const newPkgPlugin = pkg ? Object.values(store.$extension.getPlugins()).find((p) => p.name === pkg) : null;
 
     // Note - We can't block on oldPkg !== newPkg because on a fresh load the `from` route equals the `to` route
     if (pkg && (oldPkg !== pkg || from.fullPath === to.fullPath)) {

package/config/router/navigation-guards/products.js

@@ -9,7 +9,7 @@ export async function loadProducts(to, from, next, { store }) {
   // GC should be notified of route change before any find/get request is made that might be used for that page
   store.dispatch('gcRouteChanged', to);
 
-  await applyProducts(store, store.$plugin);
+  await applyProducts(store, store.$extension);
   setProduct(store, to);
   next();
 }

package/core/extension-manager-impl.js

@@ -35,13 +35,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);

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/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/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 = {

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', {

package/dialog/SearchDialog.vue

@@ -106,6 +106,7 @@ export default {
           :group="g"
           :can-collapse="false"
           :fixed-open="true"
+          :highlight-route="false"
           @close="$emit('close')"
         >
           <template #accordion>

package/edit/provisioning.cattle.io.cluster/__tests__/rke2.test.ts

@@ -112,8 +112,8 @@ describe('component: rke2', () => {
       global: {
         mocks: {
           ...defaultMocks,
-          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
-          $plugin: { getDynamic: jest.fn(() => undefined ) }
+          $store:     { dispatch: () => jest.fn(), getters: defaultGetters },
+          $extension: { getDynamic: jest.fn(() => undefined ) }
         },
 
         stubs: defaultStubs,
@@ -143,8 +143,8 @@ describe('component: rke2', () => {
       global: {
         mocks: {
           ...defaultMocks,
-          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
-          $plugin: { getDynamic: jest.fn(() => undefined ) },
+          $store:     { dispatch: () => jest.fn(), getters: defaultGetters },
+          $extension: { getDynamic: jest.fn(() => undefined ) },
         },
 
         stubs: defaultStubs,
@@ -174,8 +174,8 @@ describe('component: rke2', () => {
       global: {
         mocks: {
           ...defaultMocks,
-          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
-          $plugin: { getDynamic: jest.fn(() => undefined ) },
+          $store:     { dispatch: () => jest.fn(), getters: defaultGetters },
+          $extension: { getDynamic: jest.fn(() => undefined ) },
         },
 
         stubs: defaultStubs,
@@ -231,7 +231,7 @@ describe('component: rke2', () => {
             },
             getters: defaultGetters
           },
-          $plugin: { getDynamic: jest.fn(() => undefined ) },
+          $extension: { getDynamic: jest.fn(() => undefined ) },
         },
 
         stubs: defaultStubs,
@@ -275,7 +275,7 @@ describe('component: rke2', () => {
                 'management/findAll': () => ([]),
               }
             },
-            $plugin: { getDynamic: jest.fn(() => undefined ) },
+            $extension: { getDynamic: jest.fn(() => undefined ) },
           },
 
           stubs: defaultStubs,
@@ -324,7 +324,7 @@ describe('component: rke2', () => {
                 'management/findAll': () => ([]),
               }
             },
-            $plugin: { getDynamic: jest.fn(() => undefined ) },
+            $extension: { getDynamic: jest.fn(() => undefined ) },
           },
 
           stubs: defaultStubs,
@@ -369,8 +369,8 @@ describe('component: rke2', () => {
       global: {
         mocks: {
           ...defaultMocks,
-          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
-          $plugin: { getDynamic: jest.fn(() => undefined ) },
+          $store:     { dispatch: () => jest.fn(), getters: defaultGetters },
+          $extension: { getDynamic: jest.fn(() => undefined ) },
         },
         stubs: defaultStubs
       }
@@ -409,8 +409,8 @@ describe('component: rke2', () => {
       global: {
         mocks: {
           ...defaultMocks,
-          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
-          $plugin: { getDynamic: jest.fn(() => undefined ) },
+          $store:     { dispatch: () => jest.fn(), getters: defaultGetters },
+          $extension: { getDynamic: jest.fn(() => undefined ) },
         },
         stubs: defaultStubs
       }
@@ -441,8 +441,8 @@ describe('component: rke2', () => {
       global: {
         mocks: {
           ...defaultMocks,
-          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
-          $plugin: { getDynamic: jest.fn(() => undefined ) },
+          $store:     { dispatch: () => jest.fn(), getters: defaultGetters },
+          $extension: { getDynamic: jest.fn(() => undefined ) },
         },
         stubs: defaultStubs
       }
@@ -489,8 +489,8 @@ describe('component: rke2', () => {
       global: {
         mocks: {
           ...defaultMocks,
-          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
-          $plugin: { getDynamic: jest.fn(() => undefined ) },
+          $store:     { dispatch: () => jest.fn(), getters: defaultGetters },
+          $extension: { getDynamic: jest.fn(() => undefined ) },
         },
         stubs: defaultStubs
       }
@@ -536,8 +536,8 @@ describe('component: rke2', () => {
       global: {
         mocks: {
           ...defaultMocks,
-          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
-          $plugin: { getDynamic: jest.fn(() => undefined ) },
+          $store:     { dispatch: () => jest.fn(), getters: defaultGetters },
+          $extension: { getDynamic: jest.fn(() => undefined ) },
         },
         stubs: defaultStubs
       }
@@ -600,8 +600,8 @@ describe('component: rke2', () => {
       global: {
         mocks: {
           ...defaultMocks,
-          $store:  { dispatch: () => jest.fn(), getters: defaultGetters },
-          $plugin: { getDynamic: jest.fn(() => undefined ) },
+          $store:     { dispatch: () => jest.fn(), getters: defaultGetters },
+          $extension: { getDynamic: jest.fn(() => undefined ) },
         },
 
         stubs: defaultStubs,

package/edit/provisioning.cattle.io.cluster/index.vue

@@ -332,9 +332,9 @@ export default {
       // Keeping this for non Rancher-managed kontainer drivers
       this.kontainerDrivers.filter((x) => (isImport ? x.showImport : x.showCreate)).forEach((obj) => {
         if ( vueKontainerTypes.includes(obj.driverName) ) {
-          addType(this.$plugin, obj.driverName, 'hosted', false);
+          addType(this.$extension, obj.driverName, 'hosted', false);
         } else {
-          addType(this.$plugin, obj.driverName, 'hosted', false, (isImport ? obj.emberImportPath : obj.emberCreatePath));
+          addType(this.$extension, obj.driverName, 'hosted', false, (isImport ? obj.emberImportPath : obj.emberCreatePath));
         }
       });
       if (!isImport) {
@@ -351,7 +351,7 @@ export default {
 
         // If Elemental is installed, then add the elemental cluster provider
         if (isElementalActive) {
-          addType(this.$plugin, ELEMENTAL_CLUSTER_PROVIDER, 'custom2', false);
+          addType(this.$extension, ELEMENTAL_CLUSTER_PROVIDER, 'custom2', false);
         }
 
         // Only add the RKE2 options if RKE2 is enabled
@@ -359,10 +359,10 @@ export default {
           machineTypes.forEach((type) => {
             const id = type.spec.displayName || type.id;
 
-            addType(this.$plugin, id, _RKE2, false, null, undefined, type);
+            addType(this.$extension, id, _RKE2, false, null, undefined, type);
           });
 
-          addType(this.$plugin, 'custom', 'custom2', false);
+          addType(this.$extension, 'custom', 'custom2', false);
         }
       }
       // Add from extensions

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -502,7 +502,7 @@ export default {
      * 2) Override via hardcoded setting
      */
     cloudCredentialsOverride() {
-      const cloudCredential = this.$plugin.getDynamic('cloud-credential', this.provider);
+      const cloudCredential = this.$extension.getDynamic('cloud-credential', this.provider);
 
       if (cloudCredential === undefined) {
         return CLOUD_CREDENTIAL_OVERRIDE[this.provider];
@@ -527,16 +527,16 @@ export default {
      * Extension provider where being provisioned by an extension
      */
     extensionProvider() {
-      const extClass = this.$plugin.getDynamic('provisioner', this.provider);
+      const extClass = this.$extension.getDynamic('provisioner', this.provider);
 
       if (extClass) {
         return new extClass({
-          dispatch: this.$store.dispatch,
-          getters:  this.$store.getters,
-          axios:    this.$store.$axios,
-          $plugin:  this.$store.app.$plugin,
-          $t:       this.t,
-          isCreate: this.isCreate
+          dispatch:   this.$store.dispatch,
+          getters:    this.$store.getters,
+          axios:      this.$store.$axios,
+          $extension: this.$store.app.$extension,
+          $t:         this.t,
+          isCreate:   this.isCreate
         });
       }
 

package/models/management.cattle.io.cluster.js

@@ -255,7 +255,7 @@ export default class MgmtCluster extends SteveModel {
       dispatch:   this.$dispatch,
       getters:    this.$getters,
       axios:      this.$axios,
-      $extension: this.$plugin,
+      $extension: this.$extension,
       t:          (...args) => this.t.apply(this, args),
     };
 

package/models/provisioning.cattle.io.cluster.js

@@ -277,7 +277,7 @@ export default class ProvCluster extends SteveModel {
       dispatch:   this.$dispatch,
       getters:    this.$getters,
       axios:      this.$axios,
-      $extension: this.$plugin,
+      $extension: this.$extension,
       t:          (...args) => this.t.apply(this, args),
     };
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.8-rc.10",
+  "version": "3.0.8-rc.12",
   "description": "Rancher Dashboard Shell",
-  "repository": "https://github.com/rancherlabs/dashboard",
+  "repository": "https://github.com/rancher/dashboard",
   "license": "Apache-2.0",
   "author": "SUSE",
   "private": false,
@@ -140,7 +140,7 @@
     "vuedraggable": "4.1.0",
     "vuex": "4.1.0",
     "webpack-bundle-analyzer": "4.10.2",
-    "webpack-virtual-modules": "0.4.3",
+    "webpack-virtual-modules": "0.6.2",
     "worker-loader": "3.0.8",
     "xterm-addon-canvas": "0.5.0",
     "xterm-addon-fit": "0.8.0",

package/pages/auth/login.vue

@@ -315,9 +315,9 @@ export default {
         // so we manually load them here - other SSO auth providers bounce out and back to the Dashboard, so on the bounce-back
         // the plugins will load via the boot-time plugin
         await loadPlugins({
-          app:     this.$store.app,
-          store:   this.$store,
-          $plugin: this.$store.$plugin
+          app:        this.$store.app,
+          store:      this.$store,
+          $extension: this.$store.$extension,
         });
 
         if (this.firstLogin || user[0]?.mustChangePassword) {

package/pages/auth/setup.vue

@@ -209,7 +209,7 @@ export default {
       const promises = [];
 
       try {
-        await applyProducts(this.$store, this.$plugin);
+        await applyProducts(this.$store, this.$extension);
         await this.$store.dispatch('loadManagement');
 
         if ( this.mustChangePassword ) {

package/pages/auth/verify.vue

@@ -119,9 +119,9 @@ export default {
 
         // Load plugins
         await loadPlugins({
-          app:     this.$store.app,
-          store:   this.$store,
-          $plugin: this.$store.$plugin
+          app:        this.$store.app,
+          store:      this.$store,
+          $extension: this.$store.$extension,
         });
 
         this.$router.replace(backTo);

package/pkg/auto-import.js

@@ -15,7 +15,7 @@ function registerFile(file, type, pkg, f) {
   const importType = (f === 'models') ? 'require' : 'import';
   const chunkName = (f === 'l10n') ? '' : `/* webpackChunkName: "${ f }" */`;
 
-  return `  $plugin.register('${ f }', '${ type }', () => ${ importType }(${ chunkName }'${ pkg }/${ f }/${ file }'));\n`;
+  return `  $extension.register('${ f }', '${ type }', () => ${ importType }(${ chunkName }'${ pkg }/${ f }/${ file }'));\n`;
 }
 
 function register(file, pkg, f) {
@@ -29,7 +29,7 @@ function register(file, pkg, f) {
 // This ensures that the webpackChunkName is respected (require.context does not support this) - so when build as a library
 // the code splitting will be respected
 function generateTypeImport(pkg, dir) {
-  let content = 'export function importTypes($plugin) { \n';
+  let content = 'export function importTypes($extension) { \n';
 
   // Auto-import if the folder exists
   contextFolders.forEach((f) => {
@@ -77,7 +77,7 @@ function generateTypeImport(pkg, dir) {
 // and then restart the dev server for it to be picked up.
 function generateDynamicTypeImport(pkg, dir) {
   const template = fs.readFileSync(path.join(__dirname, 'import.js'), { encoding: 'utf8' });
-  let content = 'export function importTypes($plugin) { \n';
+  let content = 'export function importTypes($extension) { \n';
 
   // Auto-import if the folder exists
   contextFolders.forEach((f) => {

package/pkg/dynamic-importer.lib.js

@@ -41,7 +41,7 @@ export function listProducts() {
   return [];
 }
 
-export function loadProduct(name, $plugin) {
+export function loadProduct(name, $extension) {
   return () => undefined;
 }
 

package/pkg/import.js

@@ -6,5 +6,5 @@ _NAME.forEach((f) => {
 
   name = name.substr(0, ext);
 
-  $plugin.register('DIR', name, () => REQUIRE(CHUNK`BASE/DIR/${ name }EXT`)); // eslint-disable-line no-undef
+  $extension.register('DIR', name, () => REQUIRE(CHUNK`BASE/DIR/${ name }EXT`)); // eslint-disable-line no-undef
 });

package/plugins/dashboard-store/getters.js

@@ -543,7 +543,7 @@ export default {
     const store = state.config.namespace;
     const resource = id || context ? { id, context } : null;
 
-    return paginationUtils.isEnabled({ rootGetters, $plugin: rootState.$plugin }, { store, resource });
+    return paginationUtils.isEnabled({ rootGetters, $extension: rootState.$extension }, { store, resource });
   },
 
   /**

package/plugins/dashboard-store/model-loader.js

@@ -13,7 +13,7 @@ function find(cache, type, rootState) {
   }
 
   try {
-    const pluginModel = rootState.$plugin.getDynamic('models', type);
+    const pluginModel = rootState.$extension.getDynamic('models', type);
     let base;
 
     if (!pluginModel) {

package/plugins/dashboard-store/resource-class.js

@@ -610,7 +610,11 @@ export default class Resource {
   }
 
   get '$plugin'() {
-    return this.$ctx.rootState?.$plugin;
+    return this.$ctx.rootState?.$extension;
+  }
+
+  get '$extension'() {
+    return this.$ctx.rootState?.$extension;
   }
 
   get customValidationRules() {
@@ -1777,7 +1781,7 @@ export default class Resource {
             CustomValidators[validatorName](pathValue, this.$rootGetters, errors, validatorArgs, displayKey, data);
           } else if (!isEmpty(validatorName) && !validatorExists) {
             // Check if validator is imported from plugin
-            const pluginValidator = this.$rootState.$plugin?.getValidator(validatorName);
+            const pluginValidator = this.$rootState.$extension?.getValidator(validatorName);
 
             if (pluginValidator) {
               pluginValidator(pathValue, this.$rootGetters, errors, validatorArgs, displayKey, data);

package/plugins/plugin.js

@@ -44,7 +44,7 @@ export default async function(context) {
     const res = await allHashSettled(fetches);
 
     // Initialize the built-in extensions now - this is now done here so that built-in extensions get the same, correct environment data (version etc)
-    context.$plugin.loadBuiltinExtensions();
+    context.$extension.loadBuiltinExtensions();
 
     if (res.plugins?.status === 'rejected') {
       throw new Error(res.reason);
@@ -60,7 +60,7 @@ export default async function(context) {
       const shouldNotLoad = shouldNotLoadPlugin(plugin, { rancherVersion, kubeVersion }, context.store.getters['uiplugins/plugins'] || []); // Error key string or boolean
 
       if (!shouldNotLoad) {
-        hash[plugin.name] = context.$plugin.loadPluginAsync(plugin);
+        hash[plugin.name] = context.$extension.loadPluginAsync(plugin);
       } else {
         context.store.dispatch('uiplugins/setError', { name: plugin.name, error: shouldNotLoad });
       }

package/plugins/steve/steve-class.js

@@ -47,7 +47,7 @@ export default class SteveModel extends HybridModel {
    * Get all model extensions for this model
    */
   get modelExtensions() {
-    return this.$plugin.getDynamic(EXT_IDS.MODEL_EXTENSION, this.type) || [];
+    return this.$extension.getDynamic(EXT_IDS.MODEL_EXTENSION, this.type) || [];
   }
 
   cleanForSave(data, forNew) {

package/store/__tests__/catalog.test.ts

@@ -88,7 +88,7 @@ describe('catalog', () => {
           }
         },
         state: {
-          $plugin:            { getDynamic: () => require(`@shell/models/chart`) },
+          $extension:         { getDynamic: () => require(`@shell/models/chart`) },
           [catalogStoreName]: { } as { [key: string]: any},
         },
         getters: {

package/store/auth.js

@@ -402,7 +402,7 @@ export const actions = {
     }
 
     // Unload plugins - we will load again on login
-    await rootState.$plugin.logout();
+    await rootState.$extension.logout();
 
     let logoutAction = '';
     const data = {};

package/store/i18n.js

@@ -285,8 +285,8 @@ export const actions = {
       return;
     }
 
-    const lastLoad = rootState.$plugin?.lastLoad;
-    const i18nExt = rootState.$plugin?.getDynamic('l10n', locale);
+    const lastLoad = rootState.$extension?.lastLoad;
+    const i18nExt = rootState.$extension?.getDynamic('l10n', locale);
     const reload = lastLoaded < lastLoad;
 
     lastLoaded = lastLoad;
@@ -314,7 +314,7 @@ export const actions = {
 
         // load all of the default locales from the plugins for fallback
         if (locale !== DEFAULT_LOCALE) {
-          const defaultI18nExt = rootState.$plugin?.getDynamic('l10n', DEFAULT_LOCALE);
+          const defaultI18nExt = rootState.$extension?.getDynamic('l10n', DEFAULT_LOCALE);
 
           if (defaultI18nExt && defaultI18nExt.length) {
             defaultI18nExt.forEach((fn) => {

package/store/index.js

@@ -233,7 +233,7 @@ const updateActiveNamespaceCache = (state, activeNamespaceCache) => {
  * Are we in the vai enabled world where mgmt clusters are paginated?
  */
 const paginateClusters = ({ rootGetters, state }) => {
-  return paginationUtils.isEnabled({ rootGetters, $plugin: state.$plugin }, { store: 'management', resource: { id: MANAGEMENT.CLUSTER, context: 'side-bar' } });
+  return paginationUtils.isEnabled({ rootGetters, $extension: state.$extension }, { store: 'management', resource: { id: MANAGEMENT.CLUSTER, context: 'side-bar' } });
 };
 
 export const state = () => {
@@ -262,6 +262,7 @@ export const state = () => {
     $router:                 markRaw({}),
     $route:                  markRaw({}),
     $plugin:                 markRaw({}),
+    $extension:              markRaw({}),
     showWorkspaceSwitcher:   true,
     localCluster:            null,
   };
@@ -775,6 +776,7 @@ export const mutations = {
   },
 
   setPlugin(state, pluginDefinition) {
+    state.$extension = markRaw(pluginDefinition || {});
     state.$plugin = markRaw(pluginDefinition || {});
   },
 
@@ -1195,7 +1197,7 @@ export const actions = {
 
     store.dispatch('gcStopIntervals');
 
-    Object.values(this.$plugin.getPlugins()).forEach((p) => {
+    Object.values(this.$extension.getPlugins()).forEach((p) => {
       if (p.onLogOut) {
         p.onLogOut(store);
       }
@@ -1254,7 +1256,7 @@ export const actions = {
   dashboardClientInit({ dispatch, commit, rootState }, context) {
     commit('setRouter', context.app.router);
     commit('setRoute', context.route);
-    commit('setPlugin', context.app.$plugin);
+    commit('setPlugin', context.app.$extension);
 
     dispatch('management/rehydrateSubscribe');
     dispatch('cluster/rehydrateSubscribe');

package/store/type-map.js

@@ -365,7 +365,7 @@ export function DSL(store, product, module = 'type-map') {
 
 let called = false;
 
-export async function applyProducts(store, $plugin) {
+export async function applyProducts(store, $extension) {
   if (called) {
     return;
   }
@@ -379,7 +379,7 @@ export async function applyProducts(store, $plugin) {
     }
   }
   // Load the products from all plugins
-  $plugin.loadProducts();
+  $extension.loadProducts();
 }
 
 export function productsLoaded() {
@@ -2026,7 +2026,7 @@ function hasCustom(state, rootState, kind, key, fallback) {
   }
 
   // Check to see if the custom kind is provided by a plugin (ignore booleans)
-  const pluginComponent = rootState.$plugin.getDynamic(kind, key);
+  const pluginComponent = rootState.$extension.getDynamic(kind, key);
 
   if (typeof pluginComponent !== 'boolean' && !!pluginComponent) {
     cache[key] = true;
@@ -2046,7 +2046,7 @@ function hasCustom(state, rootState, kind, key, fallback) {
 }
 
 function loadExtension(rootState, kind, key, fallback) {
-  const ext = rootState.$plugin.getDynamic(kind, key);
+  const ext = rootState.$extension.getDynamic(kind, key);
 
   if (ext) {
     if (typeof ext === 'function') {

package/types/shell/index.d.ts

@@ -3255,6 +3255,7 @@ export default class Resource {
     get $state(): any;
     get $rootState(): any;
     get $plugin(): any;
+    get $extension(): any;
     get customValidationRules(): any[];
     get _key(): any;
     get schema(): any;

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

@@ -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 }: {

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) => {