@rancher/shell 2.0.0 → 3.0.0-rc.1

package/config/uiplugins.js

@@ -183,7 +183,7 @@ export function isChartVersionAvailableForInstall(versionsData, returnObj = fals
 
   const parsedRancherVersion = rancherVersion.split('-')?.[0];
   const regexHashString = new RegExp('^[A-Za-z0-9]{9}$');
-  const isRancherVersionHashString = regexHashString.test(rancherVersion);
+  const isRancherVersionHashStringOrHead = regexHashString.test(rancherVersion) || rancherVersion.includes('head');
   const requiredUiVersion = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.UI_VERSION];
   const requiredKubeVersion = version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.KUBE_VERSION];
   const versionObj = { ...version };
@@ -192,7 +192,7 @@ export function isChartVersionAvailableForInstall(versionsData, returnObj = fals
   versionObj.isCompatibleWithKubeVersion = true;
 
   // if it's a head version of Rancher, then we skip the validation and enable them all
-  if (!isRancherVersionHashString && requiredUiVersion && !semver.satisfies(parsedRancherVersion, requiredUiVersion)) {
+  if (!isRancherVersionHashStringOrHead && requiredUiVersion && !semver.satisfies(parsedRancherVersion, requiredUiVersion)) {
     if (!returnObj) {
       return false;
     }

package/core/plugin-routes.ts

@@ -1,15 +1,15 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import Router, { RouteConfig } from 'vue-router';
+import { createRouterMatcher } from 'vue-router';
 
 interface RouteInfo {
   parent?: string;
-  route: RouteConfig;
+  route: any;
 }
 
 export class PluginRoutes {
-  router: Router;
+  router: any;
 
-  constructor(router: Router) {
+  constructor(router: any) {
     this.router = router;
   }
 
@@ -32,7 +32,7 @@ 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, (r: any) => {
       // Patch colliding legacy routes that start /:product
       if (r.path?.startsWith('/:product')) {
         // Legacy pattern used by extensions - routes may collide, so modify them not to
@@ -60,7 +60,7 @@ export class PluginRoutes {
     this.updateMatcher(newRouteInfos, allRoutes);
   }
 
-  private updateMatcher(newRoutes: RouteInfo[], allRoutes: RouteConfig[]) {
+  private updateMatcher(newRoutes: RouteInfo[], allRoutes: any[]) {
     // 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
@@ -73,7 +73,7 @@ export class PluginRoutes {
       let foundParentRoute;
 
       if (r.parent) {
-        foundParentRoute = this.findInNestedRoutes(allRoutes, (route: RouteConfig) => route.name === r.parent);
+        foundParentRoute = this.findInNestedRoutes(allRoutes, (route: any) => route.name === r.parent);
 
         if (foundParentRoute) {
           foundParentRoute.children = foundParentRoute?.children || [];
@@ -86,12 +86,9 @@ export class PluginRoutes {
       }
     });
 
-    const newRouter: Router = new Router({
-      mode:   'history',
-      routes: [...orderedPluginRoutes, ...allRoutes]
-    });
+    const matcher = createRouterMatcher([...orderedPluginRoutes, ...allRoutes], {});
 
-    (this.router as any).matcher = (newRouter as any).matcher;
+    (this.router as any).matcher = (matcher as any);
   }
 
   /**
@@ -101,7 +98,7 @@ 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: any[] = [], fn: (route: any) => boolean | undefined | void) {
     for (let i = 0; i < routes.length; ++i) {
       const route = routes[i];
       const result = fn(route);
@@ -119,7 +116,7 @@ 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 {
+  private findInNestedRoutes(routes: any[] = [], fn: (route: any) => boolean): any | undefined {
     let found: any;
 
     this.forEachNestedRoutes(routes, (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,3 @@
-import Vue from 'vue';
 import $ from 'jquery';
 import JSZip from 'jszip';
 import jsyaml from 'js-yaml';
@@ -14,7 +13,6 @@ export default function({
   $axios,
   redirect,
   $plugin,
-  nuxt
 }, inject) {
   if (dynamicLoader) {
     dynamicLoader.default($plugin);
@@ -22,7 +20,7 @@ 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.$ = $;

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,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import HorizontalPodAutoScaler from '@shell/detail/autoscaling.horizontalpodautoscaler/index.vue';
 
-describe('view: autoscaling.horizontalpodautoscaler', () => {
+describe.skip('(Vue3 Skip) view: autoscaling.horizontalpodautoscaler', () => {
   const mockStore = {
     getters: {
       'i18n/t':                  (text: string) => text,
@@ -88,8 +88,8 @@ describe('view: autoscaling.horizontalpodautoscaler', () => {
   const currentMetrics = Object.values(value.status.currentMetrics);
 
   const wrapper = shallowMount(HorizontalPodAutoScaler, {
-    mocks,
-    propsData: { value },
+    props:  { value },
+    global: { mocks },
   });
 
   describe.each(value.spec.metrics)('should display metrics for each resource:', (metric) => {

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,50 @@ describe('view: provisioning.cattle.io.cluster', () => {
       };
 
       const wrapper = shallowMount(ProvisioningCattleIoCluster, {
-        mocks,
-        propsData: { value },
+        props:  { value },
+        global: { mocks },
+      });
+
+      await wrapper.setData({ clusterToken: {} });
+
+      expect(wrapper.vm.showRegistration).toStrictEqual(false);
+    });
+
+    it('should SHOW if custom/imported cluster and the cluster is active', async() => {
+      const value = {
+        isCustom:   true,
+        isImported: true,
+        mgmt:       {
+          hasLink: () => jest.fn(),
+          linkFor: () => '',
+          isReady: true
+        }
+      };
+
+      const wrapper = shallowMount(ProvisioningCattleIoCluster, {
+        props:  { value },
+        global: { mocks },
+      });
+
+      await wrapper.setData({ clusterToken: {} });
+
+      expect(wrapper.vm.showRegistration).toStrictEqual(true);
+    });
+
+    it('should NOT show if imported cluster and the cluster is active', async() => {
+      const value = {
+        isCustom:   false,
+        isImported: true,
+        mgmt:       {
+          hasLink: () => jest.fn(),
+          linkFor: () => '',
+          isReady: true
+        }
+      };
+
+      const wrapper = shallowMount(ProvisioningCattleIoCluster, {
+        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"

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

@@ -154,7 +154,7 @@ export default {
             @click="showMenu(true)"
             @focus.capture="showMenu(true)"
           >
-            <v-popover
+            <v-dropdown
               ref="popover"
               placement="bottom-end"
               offset="-10"
@@ -167,7 +167,7 @@ export default {
                 {{ t('monitoring.tabs.prometheus') }} <i class="icon icon-chevron-down" />
               </div>
               <template
-                slot="popover"
+                #popover
                 class="resources-status-list"
               >
                 <ul
@@ -194,7 +194,7 @@ export default {
                   </li>
                 </ul>
               </template>
-            </v-popover>
+            </v-dropdown>
           </div>
           <a
             :class="{disabled: !grafanaServiceEndpointEnabled}"

package/detail/management.cattle.io.user.vue

@@ -229,8 +229,9 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <div v-else>
     <ResourceTabs
-      v-model="value"
+      :value="value"
       :mode="mode"
+      @update:value="$emit('input', $event)"
     >
       <Tab
         v-if="globalBindings"

package/detail/namespace.vue

@@ -232,8 +232,9 @@ export default {
       />
     </div>
     <ResourceTabs
-      v-model="value"
+      :value="value"
       :mode="mode"
+      @input="$emit('input', $event)"
     >
       <Tab :name="t('namespace.resources')">
         <SortableTable

package/detail/networking.k8s.io.ingress.vue

@@ -91,9 +91,10 @@ export default {
 </script>
 <template>
   <ResourceTabs
-    v-model="value"
+    :value="value"
     mode="view"
     class="mt-20"
+    @update:value="$emit('input', $event)"
   >
     <Tab
       :label="t('ingress.rules.title')"
@@ -101,10 +102,11 @@ export default {
       :weight="1"
     >
       <Rules
-        v-model="value"
+        :value="value"
         :mode="mode"
         :service-targets="serviceTargets"
         :certificates="certificates"
+        @update:value="$emit('input', $event)"
       />
     </Tab>
   </ResourceTabs>

package/detail/node.vue

@@ -234,8 +234,9 @@ export default {
     </div>
     <div class="spacer" />
     <ResourceTabs
-      v-model="value"
+      :value="value"
       :mode="mode"
+      @update:value="$emit('input', $event)"
     >
       <Tab
         name="pods"