Merge pull request #11926 from torchiaf/fix-11795

Fix navigation guard for standalone extensions

shell/components/SortableTable/index.vue

@@ -1,5 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
+import { defineAsyncComponent } from 'vue';
 import day from 'dayjs';
 import isEmpty from 'lodash/isEmpty';
 import { dasherize, ucFirst } from '@shell/utils/string';
@@ -682,7 +683,7 @@ export default {
                 const pluginFormatter = this.$plugin?.getDynamic('formatters', c.formatter);
 
                 if (pluginFormatter) {
-                  component = pluginFormatter;
+                  component = defineAsyncComponent(pluginFormatter);
                   needRef = true;
                 }
               }

shell/core/plugin-routes.ts

@@ -66,6 +66,10 @@ export class PluginRoutes {
     // execute many times (nuxt middleware boils down to route.beforeEach). This issue was seen refreshing in a harvester cluster with a
     // dynamically loaded cluster
 
+    if (newRoutes.length === 0) {
+      return;
+    }
+
     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
@@ -86,12 +90,7 @@ export class PluginRoutes {
       }
     });
 
-    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));
+    this.router.clearRoutes();
 
     const allRoutesToAdd = [...orderedPluginRoutes, ...allRoutes];
 

shell/mixins/fetch.client.js

@@ -6,7 +6,8 @@ export const addLifecycleHook = (vm, hook, fn) => {
   if (!vm.$options[hook]) {
     vm.$options[hook] = [];
   }
-  if (!vm.$options[hook].includes(fn)) {
+
+  if (Array.isArray(vm.$options[hook]) && !vm.$options[hook].includes(fn)) {
     vm.$options[hook].push(fn);
   }
 };

shell/package.json

@@ -124,7 +124,7 @@
     "url-parse": "1.5.10",
     "vue": "~3.2.13",
     "vue-resize": "0.4.5",
-    "vue-router": "~4.0.3",
+    "vue-router": "4.4.3",
     "vue-select": "4.0.0-beta.6",
     "vue-server-renderer": "2.7.16",
     "vue-template-compiler": "2.7.16",

shell/pages/index.vue

@@ -2,8 +2,16 @@
 import { SEEN_WHATS_NEW } from '@shell/store/prefs';
 import { getVersionInfo } from '@shell/utils/version';
 
+const resolveRoute = (route, router) => {
+  try {
+    return route ? router.resolve(route) : null;
+  } catch (e) {
+    return null;
+  }
+};
+
 const validRoute = (route, router) => {
-  return !!route && !!router.resolve(route)?.resolved?.matched?.length;
+  return !!route && !!resolveRoute(route, router)?.matched?.length;
 };
 
 export default {
@@ -19,7 +27,7 @@ export default {
     }
 
     const afterLoginRouteObject = this.$store.getters['prefs/afterLoginRoute'];
-    const targetRoute = afterLoginRouteObject ? this.$router.resolve(afterLoginRouteObject) : null;
+    const targetRoute = resolveRoute(afterLoginRouteObject, this.$router);
 
     // If target route is /, then we will loop with endless redirect - so detect that here and
     // redirect to /home, which is what we would do below, if there was no `afterLoginRouteObject`