@rancher/shell 2.0.1 → 3.0.0-rc.2

package/core/plugin-routes.ts

@@ -1,9 +1,9 @@
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import Router, { RouteConfig } from 'vue-router';
+import { RouteRecordRaw, Router } from 'vue-router';
 
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 interface RouteInfo {
   parent?: string;
-  route: RouteConfig;
+  route: RouteRecordRaw;
 }
 
 export class PluginRoutes {
@@ -13,12 +13,12 @@ export class PluginRoutes {
     this.router = router;
   }
 
-  public logRoutes(r: any, indent = 0) {
+  public logRoutes(routes: RouteRecordRaw[], indent = 0) {
     const spaces = Array(indent).join(' ');
 
-    r.forEach((s: any) => {
-      console.log(`${ spaces }${ s.name } -> ${ s.path }`); // eslint-disable-line no-console
-      this.logRoutes(s.children || [], indent + 2);
+    routes.forEach((route: RouteRecordRaw) => {
+      console.log(`${ spaces }${ route.name?.toString() } -> ${ route.path }`); // eslint-disable-line no-console
+      this.logRoutes(route.children || [], indent + 2);
     });
   }
 
@@ -32,15 +32,15 @@ export class PluginRoutes {
     // Remove all routes that are being replaced
     const newRoutes = newRouteInfos.map((ri) => ri.route);
 
-    this.forEachNestedRoutes(newRoutes, (r: RouteConfig) => {
+    this.forEachNestedRoutes(newRoutes, (route: RouteRecordRaw) => {
       // Patch colliding legacy routes that start /:product
-      if (r.path?.startsWith('/:product')) {
+      if (route.path?.startsWith('/:product')) {
         // Legacy pattern used by extensions - routes may collide, so modify them not to
         let productName;
 
         // If the route has a name (which is always the case for the extensions we have written), use it to get the product name
-        if (r.name) {
-          const nameParts = r.name.split('-');
+        if (route.name && typeof route.name === 'string') {
+          const nameParts = route.name.split('-');
 
           // First part of the route name is the product name
           productName = nameParts[0];
@@ -50,48 +50,52 @@ export class PluginRoutes {
         productName = productName || plugin.name;
 
         // Replace the path - removing :product and using the actual product name instead - this avoids route collisions
-        r.path = `/${ productName }${ r.path.substr(9) }`;
-        r.meta = r.meta || {};
+        route.path = `/${ productName }${ route.path.substr(9) }`;
+        route.meta = route.meta || {};
 
-        r.meta.product = r.meta.product || productName;
+        route.meta.product = route.meta.product || productName;
       }
     });
 
     this.updateMatcher(newRouteInfos, allRoutes);
   }
 
-  private updateMatcher(newRoutes: RouteInfo[], allRoutes: RouteConfig[]) {
+  private updateMatcher(newRoutes: RouteInfo[], allRoutes: RouteRecordRaw[]) {
     // Note - Always use a new router and replace the existing router's matching
     // Using the existing router and adding routes to it will force nuxt middleware to
-    // execute many times (nuxt middleware boils down to router.beforeEach). This issue was seen refreshing in a harvester cluster with a
+    // execute many times (nuxt middleware boils down to route.beforeEach). This issue was seen refreshing in a harvester cluster with a
     // dynamically loaded cluster
 
-    const orderedPluginRoutes: any[] = [];
+    const orderedPluginRoutes: RouteRecordRaw[] = [];
 
     // separate plugin routes that have parent and not, you want to push the new routes in REVERSE order to the front of the existing list so that the order of routes specified by the extension is preserved
-    newRoutes.reverse().forEach((r: any) => {
+    newRoutes.reverse().forEach((routeInfo: RouteInfo) => {
       let foundParentRoute;
 
-      if (r.parent) {
-        foundParentRoute = this.findInNestedRoutes(allRoutes, (route: RouteConfig) => route.name === r.parent);
+      if (routeInfo.parent) {
+        foundParentRoute = this.findInNestedRoutes(allRoutes, (route: RouteRecordRaw) => route.name === routeInfo.parent);
 
         if (foundParentRoute) {
           foundParentRoute.children = foundParentRoute?.children || [];
-          foundParentRoute.children.unshift(r.route);
+          foundParentRoute.children.unshift(routeInfo.route);
         }
       }
 
       if (!foundParentRoute) {
-        orderedPluginRoutes.unshift(r.route);
+        orderedPluginRoutes.unshift(routeInfo.route);
       }
     });
 
-    const newRouter: Router = new Router({
-      mode:   'history',
-      routes: [...orderedPluginRoutes, ...allRoutes]
-    });
+    if ( orderedPluginRoutes.length === 0) {
+      return;
+    }
+
+    // Remove all existing routes. Once we upgrade our router version we'll have access to clearRoutes() https://router.vuejs.org/api/interfaces/Router.html#clearRoutes
+    this.router.getRoutes().forEach((route: any) => this.router.removeRoute(route));
+
+    const allRoutesToAdd = [...orderedPluginRoutes, ...allRoutes];
 
-    (this.router as any).matcher = (newRouter as any).matcher;
+    allRoutesToAdd.forEach((route) => this.router.addRoute(route));
   }
 
   /**
@@ -101,7 +105,10 @@ export class PluginRoutes {
    * @param fn -> Return true if you'd like to break the loop early (small)
    * @returns {@boolean} -> Returns true if breaking early
    */
-  private forEachNestedRoutes(routes: RouteConfig[] = [], fn: (route: RouteConfig) => boolean | undefined | void) {
+  private forEachNestedRoutes(
+    routes: RouteRecordRaw[] = [],
+    fn: (route: RouteRecordRaw) => boolean | undefined | void
+  ) {
     for (let i = 0; i < routes.length; ++i) {
       const route = routes[i];
       const result = fn(route);
@@ -119,8 +126,11 @@ export class PluginRoutes {
    * @param fn -> Returns true if the passed in route matches the expected criteria
    * @returns The found route or undefined
    */
-  private findInNestedRoutes(routes: RouteConfig[] = [], fn: (route: RouteConfig) => boolean): RouteConfig | undefined {
-    let found: any;
+  private findInNestedRoutes(
+    routes: RouteRecordRaw[] = [],
+    fn: (route: RouteRecordRaw) => boolean
+  ): RouteRecordRaw | undefined {
+    let found: RouteRecordRaw | undefined;
 
     this.forEachNestedRoutes(routes, (route) => {
       if (fn(route)) {

package/core/plugin.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { RouteConfig } from 'vue-router';
+import { RouteRecordRaw } from 'vue-router';
 import { DSL as STORE_DSL } from '@shell/store/type-map';
 import {
   CoreStoreInit,
@@ -12,7 +12,7 @@ import {
   LocationConfig,
   ExtensionPoint,
 
-  PluginRouteConfig, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig, OnNavToPackage, OnNavAwayFromPackage, OnLogOut
+  PluginRouteRecordRaw, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig, OnNavToPackage, OnNavAwayFromPackage, OnLogOut
 } from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
 
@@ -26,7 +26,7 @@ export class Plugin implements IPlugin {
   public locales: { locale: string, label: string}[] = [];
   public products: ProductFunction[] = [];
   public productNames: string[] = [];
-  public routes: { parent?: string, route: RouteConfig }[] = [];
+  public routes: { parent?: string, route: RouteRecordRaw }[] = [];
   public stores: { storeName: string, register: RegisterStore, unregister: UnregisterStore }[] = [];
   public onEnter: OnNavToPackage = () => Promise.resolve();
   public onLeave: OnNavAwayFromPackage = () => Promise.resolve();
@@ -97,10 +97,10 @@ export class Plugin implements IPlugin {
     this.register('l10n', locale, fn);
   }
 
-  addRoutes(routes: PluginRouteConfig[] | RouteConfig[]) {
-    routes.forEach((r: PluginRouteConfig | RouteConfig) => {
+  addRoutes(routes: PluginRouteRecordRaw[] | RouteRecordRaw[]) {
+    routes.forEach((r: PluginRouteRecordRaw | RouteRecordRaw) => {
       if (Object.keys(r).includes('parent')) {
-        const pConfig = r as PluginRouteConfig;
+        const pConfig = r as PluginRouteRecordRaw;
 
         if (pConfig.parent) {
           this.addRoute(pConfig.parent, pConfig.route);
@@ -108,21 +108,21 @@ export class Plugin implements IPlugin {
           this.addRoute(pConfig.route);
         }
       } else {
-        this.addRoute(r as RouteConfig);
+        this.addRoute(r as RouteRecordRaw);
       }
     });
   }
 
-  addRoute(parentOrRoute: RouteConfig | string, optionalRoute?: RouteConfig): void {
+  addRoute(parentOrRoute: RouteRecordRaw | string, optionalRoute?: RouteRecordRaw): void {
     // Always add the pkg name to the route metadata
     const hasParent = typeof (parentOrRoute) === 'string';
     const parent: string | undefined = hasParent ? parentOrRoute as string : undefined;
-    const route: RouteConfig = hasParent ? optionalRoute as RouteConfig : parentOrRoute as RouteConfig;
+    const route: RouteRecordRaw = hasParent ? optionalRoute as RouteRecordRaw : parentOrRoute as RouteRecordRaw;
 
     let parentOverride;
 
     if (!parent) {
-      // TODO: Inspecting the route object in the browser clearly indicates it's not a RouteConfig. The type needs to be changed or at least extended.
+      // TODO: Inspecting the route object in the browser clearly indicates it's not a RouteRecordRaw. The type needs to be changed or at least extended.
       const typelessRoute: any = route;
 
       if (typelessRoute.component?.layout) {

package/core/plugins-loader.js

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import * as vue3 from 'vue';
 import $ from 'jquery';
 import JSZip from 'jszip';
 import jsyaml from 'js-yaml';
@@ -14,7 +14,6 @@ export default function({
   $axios,
   redirect,
   $plugin,
-  nuxt
 }, inject) {
   if (dynamicLoader) {
     dynamicLoader.default($plugin);
@@ -22,9 +21,10 @@ export default function({
 
   // The libraries we build have Vue externalised, so we need to expose Vue as a global for
   // them to pick up - see: https://cli.vuejs.org/guide/build-targets.html#library
-  window.Vue = Vue;
+  // window.Vue = Vue;
 
   // Global libraries - allows us to externalise these to reduce package bundle size
+  window.Vue = vue3;
   window.$ = $;
   window.__jszip = JSZip;
   window.__jsyaml = jsyaml;

package/core/plugins.js

@@ -90,6 +90,10 @@ export default function(context, inject, vueApp) {
               delete window[oldPlugin.id];
 
               delete plugins[oldPlugin.id];
+
+              const oldElement = document.getElementById(oldPlugin.id);
+
+              oldElement.parentElement.removeChild(oldElement);
             });
           }
 
@@ -124,7 +128,9 @@ export default function(context, inject, vueApp) {
             };
 
             element.onerror = (e) => {
-            // Massage the error into something useful
+              element.parentElement.removeChild(element);
+
+              // Massage the error into something useful
               const errorMessage = `Failed to load script from '${ e.target.src }'`;
 
               console.error(errorMessage, e); // eslint-disable-line no-console

package/core/types.ts

@@ -1,5 +1,5 @@
 import { ProductFunction } from './plugin';
-import { RouteConfig, Location } from 'vue-router';
+import { RouteRecordRaw } from 'vue-router';
 
 // Cluster Provisioning types
 export * from './types-provisioning';
@@ -26,7 +26,7 @@ export type CoreStoreInit = (store: any, ctx: any) => void;
 export type RegisterStore = () => (store: any) => void
 export type UnregisterStore = (store: any) => void
 
-export type PluginRouteConfig = {parent?: string, route: RouteConfig}
+export type PluginRouteRecordRaw = {parent?: string, route: RouteRecordRaw}
 
 export type OnEnterLeavePackageConfig = {
   clusterId: string,
@@ -384,9 +384,9 @@ export interface ConfigureVirtualTypeOptions extends ConfigureTypeOptions {
   name: string;
 
   /**
-   * The route that this type should correspond to {@link PluginRouteConfig} {@link RouteConfig}
+   * The route that this type should correspond to {@link PluginRouteRecordRaw} {@link RouteRecordRaw}
    */
-  route: PluginRouteConfig | RouteConfig | Object;
+  route: PluginRouteRecordRaw | RouteRecordRaw | Object;
 }
 
 export interface DSLReturnType {
@@ -488,8 +488,8 @@ export interface IPlugin {
   /**
    * Add a route to the Vue Router
    */
-  addRoute(route: RouteConfig): void;
-  addRoute(parent: string, route: RouteConfig): void;
+  addRoute(route: RouteRecordRaw): void;
+  addRoute(parent: string, route: RouteRecordRaw): void;
 
   /**
    * Adds an action/button to the UI
@@ -525,7 +525,7 @@ export interface IPlugin {
   /**
    * Add routes to the Vue Router
    */
-  addRoutes(routes: PluginRouteConfig[] | RouteConfig[]): void;
+  addRoutes(routes: PluginRouteRecordRaw[] | RouteRecordRaw[]): void;
 
    /**
     * Add a hook to be called when the plugin is uninstalled

package/detail/__tests__/autoscaling.horizontalpodautoscaler.test.ts

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import HorizontalPodAutoScaler from '@shell/detail/autoscaling.horizontalpodautoscaler/index.vue';
 
 describe('view: autoscaling.horizontalpodautoscaler', () => {
@@ -23,9 +23,17 @@ describe('view: autoscaling.horizontalpodautoscaler', () => {
           return false;
         },
       },
+      hash: ''
     },
   };
 
+  const stubs = {
+    ResourceTable: true,
+    Tab:           { template: '<span><slot/></span>' },
+    ResoruceTabs:  { template: '<span><slot/></span>' },
+
+  };
+
   const value = {
     status: {
       currentMetrics: [
@@ -87,9 +95,9 @@ describe('view: autoscaling.horizontalpodautoscaler', () => {
   const metricsValue = Object.values(value.spec.metrics);
   const currentMetrics = Object.values(value.status.currentMetrics);
 
-  const wrapper = shallowMount(HorizontalPodAutoScaler, {
-    mocks,
-    propsData: { value },
+  const wrapper = mount(HorizontalPodAutoScaler, {
+    props:  { value },
+    global: { mocks, stubs },
   });
 
   describe.each(value.spec.metrics)('should display metrics for each resource:', (metric) => {
@@ -97,13 +105,13 @@ describe('view: autoscaling.horizontalpodautoscaler', () => {
 
     it(`${ name }:`, () => {
       // Resource metrics
-      const resourceValue = wrapper.find(`[data-testid="resource-metrics-value-${ name }"]`);
-      const resourceName = wrapper.find(`[data-testid="resource-metrics-name-${ name }"]`);
+      const resourceValue = wrapper.get(`[data-testid="resource-metrics-value-${ name }"]`);
+      const resourceName = wrapper.get(`[data-testid="resource-metrics-name-${ name }"]`);
       const metricValue = metricsValue.find((f) => f.resource.name === name)?.resource;
 
       // Current Metrics
-      const averageUtilization = wrapper.find(`[data-testid="current-metrics-Average Utilization-${ name }"]`);
-      const averageValue = wrapper.find(`[data-testid="current-metrics-Average Value-${ name }"]`);
+      const averageUtilization = wrapper.get(`[data-testid="current-metrics-Average Utilization-${ name }"]`);
+      const averageValue = wrapper.get(`[data-testid="current-metrics-Average Value-${ name }"]`);
       const currentResource = currentMetrics.find((f) => f.resource.name === name)?.resource.current;
 
       // Resource metrics

package/detail/__tests__/provisioning.cattle.io.cluster.test.ts

@@ -45,8 +45,8 @@ describe('view: provisioning.cattle.io.cluster', () => {
       };
 
       const wrapper = shallowMount(ProvisioningCattleIoCluster, {
-        mocks,
-        propsData: { value },
+        props:  { value },
+        global: { mocks },
       });
 
       await wrapper.setData({ clusterToken: {} });
@@ -65,8 +65,8 @@ describe('view: provisioning.cattle.io.cluster', () => {
       };
 
       const wrapper = shallowMount(ProvisioningCattleIoCluster, {
-        mocks,
-        propsData: { value },
+        props:  { value },
+        global: { mocks },
       });
 
       await wrapper.setData({ clusterToken: {} });
@@ -86,8 +86,8 @@ describe('view: provisioning.cattle.io.cluster', () => {
       };
 
       const wrapper = shallowMount(ProvisioningCattleIoCluster, {
-        mocks,
-        propsData: { value },
+        props:  { value },
+        global: { mocks },
       });
 
       await wrapper.setData({ clusterToken: {} });
@@ -107,8 +107,8 @@ describe('view: provisioning.cattle.io.cluster', () => {
       };
 
       const wrapper = shallowMount(ProvisioningCattleIoCluster, {
-        mocks,
-        propsData: { value },
+        props:  { value },
+        global: { mocks },
       });
 
       await wrapper.setData({ clusterToken: {} });

package/detail/__tests__/service.test.ts

@@ -14,12 +14,12 @@ describe('view: service', () => {
 
   it('should return default empty array of ports if the ports are not configured', () => {
     const wrapper = shallowMount(service, {
-      mocks,
-      propsData: {
+      props: {
         value: {
           spec: {}, metadata: {}, pods: []
         }
       },
+      global: { mocks },
     });
 
     expect(wrapper.vm.ports).toStrictEqual([]);
@@ -27,12 +27,12 @@ describe('view: service', () => {
 
   it('should return empty array of ports if ports are set to empty array', () => {
     const wrapper = shallowMount(service, {
-      mocks,
-      propsData: {
+      props: {
         value: {
           spec: { ports: [] }, metadata: {}, pods: []
         }
       },
+      global: { mocks },
     });
 
     expect(wrapper.vm.ports).toStrictEqual([]);
@@ -49,12 +49,12 @@ describe('view: service', () => {
     ];
 
     const wrapper = shallowMount(service, {
-      mocks,
-      propsData: {
+      props: {
         value: {
           spec: { ports }, metadata: {}, pods: []
         }
       },
+      global: { mocks },
     });
 
     expect(wrapper.vm.ports).toStrictEqual(ports.map((p) => ({ ...p, publicPorts: [] })));

package/detail/autoscaling.horizontalpodautoscaler/index.vue

@@ -87,8 +87,9 @@ export default {
 
 <template>
   <ResourceTabs
-    v-model="value"
+    :value="value"
     :mode="mode"
+    @update:value="$emit('input', $event)"
   >
     <Tab
       name="metrics"
@@ -98,7 +99,7 @@ export default {
     >
       <div
         v-for="(metric, index) in mappedMetrics"
-        :key="`${index}${metric.metricName}`"
+        :key="index"
       >
         <InfoBox>
           <div class="row info-row">
@@ -194,7 +195,7 @@ export default {
     >
       <div
         v-for="(type, i) in ['scaleDown', 'scaleUp']"
-        :key="`${i}`"
+        :key="i"
       >
         <InfoBox v-if="!!value.spec.behavior[type]">
           <div class="row info-row">
@@ -211,7 +212,7 @@ export default {
               <label class="text-label"><t k="hpa.scalingRule.policyHeader" /></label>
               <ul
                 v-for="(current, currentIndex) in value.spec.behavior[type].policies"
-                :key="`${currentIndex}`"
+                :key="currentIndex"
               >
                 <li>
                   <span>{{ current.value }}</span>
@@ -239,7 +240,7 @@ export default {
 
 <style lang="scss" scoped>
 .hpa-metrics-table {
-  .info-box ::v-deep {
+  .info-box :deep() {
     background-color: var(--simple-box-bg);
   }
   .row {

package/detail/catalog.cattle.io.app.vue

@@ -147,7 +147,7 @@ export default {
         :label="t('catalog.app.section.readme')"
         :weight="2"
       >
-        <Markdown v-model="value.spec.info.readme" />
+        <Markdown v-model:value="value.spec.info.readme" />
       </Tab>
       <Tab
         v-if="hasNotes"
@@ -155,7 +155,7 @@ export default {
         :label="t('catalog.app.section.notes')"
         :weight="1"
       >
-        <Markdown v-model="value.spec.info.notes" />
+        <Markdown v-model:value="value.spec.info.notes" />
       </Tab>
     </Tabbed>
   </div>

package/detail/cis.cattle.io.clusterscan.vue

@@ -263,8 +263,8 @@ export default {
   <div v-else>
     <div class="detail mb-20">
       <div
-        v-for="item in details"
-        :key="item.label"
+        v-for="(item, i) in details"
+        :key="i"
       >
         <span class="text-label">{{ item.label }}</span>:
         <component
@@ -292,7 +292,7 @@ export default {
       </div>
       <div class="col span-4">
         <LabeledSelect
-          v-model="clusterReport"
+          v-model:value="clusterReport"
           :label="t('cis.reports')"
           :options="clusterReports"
           :get-option-label="reportLabel"

package/detail/configmap.vue

@@ -49,7 +49,10 @@ export default {
 </script>
 
 <template>
-  <ResourceTabs v-model="value">
+  <ResourceTabs
+    :value="value"
+    @update:value="$emit('input', $event)"
+  >
     <Tab
       name="data"
       label-key="secret.data"

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

@@ -75,9 +75,10 @@ export default {
     <ResourcesSummary :value="value.status.resourceCounts" />
 
     <ResourceTabs
-      v-model="value"
+      :value="value"
       mode="view"
       class="mt-20"
+      @update:value="$emit('input', $event)"
     >
       <Tab
         label="Git Repos"

package/detail/fleet.cattle.io.clustergroup.vue

@@ -51,9 +51,10 @@ export default {
     <ResourcesSummary :value="value.status.resourceCounts" />
 
     <ResourceTabs
-      v-model="value"
+      :value="value"
       mode="view"
       class="mt-20"
+      @input="$emit('input', $event)"
     >
       <Tab
         label="Clusters"

package/detail/fleet.cattle.io.gitrepo.vue

@@ -126,10 +126,11 @@ export default {
       {{ t('fleet.fleetSummary.noClustersGitRepo') }}
     </Banner>
     <ResourceTabs
-      v-model="value"
+      :value="value"
       mode="view"
       class="mt-20"
       :need-related="false"
+      @update:value="$emit('input', $event)"
     >
       <Tab
         v-if="!!allBundles.length"

package/detail/harvesterhci.io.management.cluster.vue

@@ -70,8 +70,9 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <ResourceTabs
     v-else
-    v-model="value"
+    :value="value"
     :default-tab="defaultTab"
+    @input="$emit('input', $event)"
   >
     <Tab
       v-if="showRegistration"