@rancher/shell 2.0.1 → 3.0.0-rc.2

package/initialize/entry-helpers.js

@@ -1,13 +1,3 @@
-import Vue from 'vue';
-import { updatePageTitle } from '@shell/utils/title';
-import { getVendor } from '@shell/config/private-label';
-import middleware from '@shell/config/middleware.js';
-import { withQuery } from 'ufo';
-import dynamicPluginLoader from '@shell/pkg/dynamic-plugin-loader';
-
-// Global variable used on mount, updated on route change and used in the render function
-let app;
-
 /**
  * Add error handler debugging capabilities
  * @param {*} vueApp Vue instance
@@ -33,7 +23,7 @@ export const loadDebugger = (vueApp) => {
         const globalApp = Object.keys(window.$globalApp)
           .find((instance) => vm.$root[instance]);
 
-        // Show Nuxt Error Page
+        // Show Error Page
         if (globalApp && vm.$root[globalApp].error && info !== 'render function') {
           const vueApp = vm.$root[globalApp];
 
@@ -55,318 +45,24 @@ export const loadDebugger = (vueApp) => {
   }
 };
 
-/**
- * Handle errors with a redirect
- * @param {*} context
- * @param {*} message
- */
-const errorRedirect = (context, message) => {
-  context.$store.commit('setError', { error: new Error(message) });
-  context.$router.replace('/fail-whale');
-};
-
-/**
- * TODO: Define this logic use case
- * @param {*} fn
- * @param {*} context
- * @returns
- */
-export const promisify = (fn, context) => {
-  let promise;
-
-  if (fn.length === 2) {
-    console.warn('Callback-based fetch or middleware calls are deprecated. Please switch to promises or async/await syntax'); // eslint-disable-line no-console
-
-    // fn(context, callback)
-    promise = new Promise((resolve) => {
-      fn(context, (err, data) => {
-        if (err) {
-          context.error(err);
-        }
-        data = data || {};
-        resolve(data);
-      });
-    });
-  } else {
-    promise = fn(context);
-  }
-
-  if (promise && promise instanceof Promise && typeof promise.then === 'function') {
-    return promise;
-  }
-
-  return Promise.resolve(promise);
-};
-
-/**
- * TODO: Define this logic use case
- * @param {*} promises
- * @param {*} appContext
- * @returns
- */
-export const middlewareSeries = (promises, appContext) => {
-  if (!promises.length || appContext._redirected || appContext._errored) {
-    return Promise.resolve();
-  }
-
-  return promisify(promises[0], appContext)
-    .then(() => {
-      return middlewareSeries(promises.slice(1), appContext);
-    });
-};
-
-/**
- * Add middleware to the Vue instance
- * @param {*} Components List of Vue components
- * @param {*} context App context
- * @returns
- */
-function callMiddleware(Components, context) {
-  let midd = [];
-  let unknownMiddleware = false;
-
-  Components.forEach((Component) => {
-    if (Component.options.middleware) {
-      midd = midd.concat(Component.options.middleware);
-    }
-  });
-
-  midd = midd.map((name) => {
-    if (typeof name === 'function') {
-      return name;
-    }
-    if (typeof middleware[name] !== 'function') {
-      unknownMiddleware = true;
-      errorRedirect(this, new Error(`500: Unknown middleware ${ name }`));
-    }
-
-    return middleware[name];
-  });
-
-  if (unknownMiddleware) {
-    return;
-  }
-
-  return middlewareSeries(midd, context);
-}
-
-export const globalHandleError = (error) => Vue.config.errorHandler && Vue.config.errorHandler(error);
-
-/**
- * Render function used by the router guards
- * @param {*} to Route
- * @param {*} from Route
- * @param {*} next callback
- * @param {*} app
- * @returns
- */
-async function render(to, from, next) {
-  if (this._routeChanged === false && this._paramChanged === false && this._queryChanged === false) {
-    return next();
-  }
-
-  // nextCalled is true when redirected
-  let nextCalled = false;
-  const _next = (path) => {
-    if (from.path === path.path && this.$loading.finish) {
-      this.$loading.finish();
-    }
-
-    if (from.path !== path.path && this.$loading.pause) {
-      this.$loading.pause();
-    }
-
-    if (nextCalled) {
-      return;
-    }
-
-    nextCalled = true;
-    next(path);
-  };
-
-  // Update context
-  await setContext(app, {
-    route: to,
-    from,
-    next:  _next.bind(this)
-  });
-
-  // Get route's matched components
-  const matches = [];
-  const Components = getMatchedComponents(to, matches);
-
-  // If no Components matched, generate 404
-  if (!Components.length) {
-    // Handle the loading of dynamic plugins (Harvester) because we only want to attempt to load those plugins and routes if we first couldn't find a page.
-    // We should probably get rid of this concept entirely and just load plugins at the start.
-    await app.context.store.dispatch('loadManagement');
-    const newLocation = await dynamicPluginLoader.check({ route: { path: window.location.pathname }, store: app.context.store });
-
-    // If we have a new location, double check that it's actually valid
-    const resolvedRoute = newLocation?.path ? app.context.store.app.router.resolve({ path: newLocation.path.replace(/^\/{0,1}dashboard/, '') }) : null;
-
-    if (resolvedRoute?.route.matched.length) {
-      // Note - don't use `redirect` or `store.app.route` (breaks feature by failing to run middleware in default layout)
-      return next(resolvedRoute.resolved.path);
-    }
-
-    errorRedirect(this, new Error('404: This page could not be found'));
-
-    return next();
-  }
-
-  try {
-    // Call middleware
-    await callMiddleware.call(this, Components, app.context);
-    if (nextCalled) {
-      return;
-    }
-    if (app.context._errored) {
-      return next();
-    }
-
-    // Call middleware for layout
-    await callMiddleware.call(this, Components, app.context);
-    if (nextCalled) {
-      return;
-    }
-    if (app.context._errored) {
-      return next();
-    }
-
-    // Call .validate()
-    let isValid = true;
-
-    try {
-      for (const Component of Components) {
-        if (typeof Component.options.validate !== 'function') {
-          continue;
-        }
-
-        isValid = await Component.options.validate(app.context);
-
-        if (!isValid) {
-          break;
-        }
-      }
-    } catch (validationError) {
-      // ...If .validate() threw an error
-      errorRedirect(this, new Error(`${ validationError.statusCode || '500' }: ${ validationError.message }`));
-
-      return next();
-    }
-
-    // ...If .validate() returned false
-    if (!isValid) {
-      errorRedirect(this, new Error('404: This page could not be found'));
-
-      return next();
-    }
-
-    // If not redirected
-    if (!nextCalled) {
-      if (this.$loading.finish && !this.$loading.manual) {
-        this.$loading.finish();
-      }
-
-      next();
-    }
-  } catch (err) {
-    const error = err || {};
-
-    globalHandleError(error);
-
-    next();
-  }
-}
-
 /**
  * Mounts the Vue app to the DOM element
  * @param {Object} appPartials - App view partials
- * @param {Object} VueClass - Vue instance
+ * @param {Object} vueApp- Vue instance
  */
-export async function mountApp(appPartials, VueClass) {
+export async function mountApp(appPartials, vueApp) {
   // Set global variables
-  app = appPartials.app;
+  const app = appPartials.app;
   const router = appPartials.router;
 
-  // Create Vue instance
-  const vueApp = new VueClass(app);
-
-  // Mounts Vue app to DOM element
-  const mount = () => {
-    vueApp.$mount('#app');
-  };
-
-  // Initialize error handler
-  vueApp.$loading = {}; // To avoid error while vueApp.$nuxt does not exist
-
-  // Add beforeEach router hooks
-  router.beforeEach(render.bind(vueApp));
-  router.afterEach((from, to) => {
-    if (from?.name !== to?.name) {
-      updatePageTitle(getVendor());
-    }
-  });
-
-  // First render on client-side
-  const clientFirstMount = () => {
-    mount();
-  };
-
-  // fix: force next tick to avoid having same timestamp when an error happen on spa fallback
-  await new Promise((resolve) => setTimeout(resolve, 0));
-  render.call(vueApp, router.currentRoute, router.currentRoute, (path) => {
-    // If not redirected
-    if (!path) {
-      clientFirstMount();
-
-      return;
-    }
-
-    // Add a one-time afterEach hook to
-    // mount the app wait for redirect and route gets resolved
-    const unregisterHook = router.afterEach((to, from) => {
-      unregisterHook();
-      clientFirstMount();
-    });
+  vueApp.use(router);
+  vueApp.use(app.store);
 
-    // Push the path and let route to be resolved
-    router.push(path, undefined, (err) => {
-      if (err) {
-        const errorHandler = vueApp?.config?.errorHandler || console.error; // eslint-disable-line no-console
+  vueApp.$loading = {}; // To avoid error while vueApp.$loading does not exist
 
-        errorHandler(err);
-      }
-    });
-  });
+  vueApp.mount('#app');
 }
 
-/**
- * Extend component properties
- * @param {*} Component
- * @returns
- */
-const patchComponent = (Component) => {
-  // If Component already sanitized
-  if (Component.options && Component._Ctor === Component) {
-    return Component;
-  }
-  if (!Component.options) {
-    Component = Vue.extend(Component); // fix issue #6
-    Component._Ctor = Component;
-  } else {
-    Component._Ctor = Component;
-    Component.extendOptions = Component.options;
-  }
-  // If no component name defined, set file path as name, (also fixes #5703)
-  if (!Component.options.name && Component.options.__file) {
-    Component.options.name = Component.options.__file;
-  }
-
-  return Component;
-};
-
 export const getMatchedComponents = (route, matches = false, prop = 'components') => {
   return Array.prototype.concat.apply([], route.matched.map((match, index) => {
     return Object.keys(match[prop]).map((key) => {
@@ -377,65 +73,6 @@ export const getMatchedComponents = (route, matches = false, prop = 'components'
   }));
 };
 
-const getComponent = async(unknownComponent) => {
-  let componentView;
-
-  // If component is a function, resolve it
-  if (typeof unknownComponent === 'function' && !unknownComponent.options) {
-    try {
-      componentView = await unknownComponent();
-    } catch (error) {
-      // Handle webpack chunk loading errors
-      // This may be due to a new deployment or a network problem
-      if (
-        error &&
-        error.name === 'ChunkLoadError' &&
-        typeof window !== 'undefined' &&
-        window.sessionStorage
-      ) {
-        const timeNow = Date.now();
-        const previousReloadTime = parseInt(window.sessionStorage.getItem('nuxt-reload'));
-
-        // check for previous reload time not to reload infinitely
-        if (!previousReloadTime || previousReloadTime + 60000 < timeNow) {
-          window.sessionStorage.setItem('nuxt-reload', timeNow);
-          window.location.reload(true /* skip cache */);
-        }
-      }
-
-      throw error;
-    }
-  }
-
-  return componentView || unknownComponent;
-};
-
-/**
- * Patch all the matched components of a given route
- * @param {*} route
- * @returns
- */
-const patchMatchedComponents = (route) => Array.prototype.concat.apply(
-  [],
-  route.matched.map(
-    (match, index) => Object
-      .keys(match.components)
-      .reduce(async(acc, key) => {
-        if (match.components[key]) {
-          const component = await getComponent(match.components[key], match.instances[key], match, key, index);
-          const patchedComponent = patchComponent(component);
-
-          match.components[key] = patchedComponent;
-          acc.push(patchedComponent);
-        } else {
-          delete match.components[key];
-        }
-
-        return acc;
-      }, [])
-  )
-);
-
 /**
    * Merge route meta with component meta and update matched components
    * @param {*} route
@@ -445,15 +82,27 @@ export const getRouteData = async(route) => {
   if (!route) {
     return;
   }
-  // Make sure the components are resolved (code-splitting)
-  await Promise.all(patchMatchedComponents(route));
-  const meta = getMatchedComponents(route).map(
-    (matchedComponent, index) => ({ ...matchedComponent.options.meta, ...(route.matched[index] || {}).meta })
-  );
 
-  // Send back a copy of route with meta based on Component definition
+  // Ensure we're working with the _value property of the route object
+  const routeValue = route._value || route;
+
+  if (!routeValue.matched) {
+    // eslint-disable-next-line no-console
+    console.warn('Route matched property is undefined:', routeValue);
+
+    return routeValue;
+  }
+
+  const meta = routeValue.matched.map((record) => {
+    // Merge component meta and route record meta
+    const componentMeta = record.components?.default?.meta || {};
+    const recordMeta = record.meta || {};
+
+    return { ...componentMeta, ...recordMeta };
+  });
+
   return {
-    ...route,
+    ...routeValue,
     meta
   };
 };
@@ -468,59 +117,13 @@ export const setContext = async(app, context) => {
   if (!app.context) {
     app.context = {
       isDev:   true,
-      isHMR:   false,
       app,
       store:   app.store,
       payload: context.payload,
       error:   context.error,
       base:    app.router.options.base,
-      env:     {
-        commit: 'head', version: '0.1.2', dev: true, pl: 1, perfTest: false, rancherEnv: 'web', api: 'http://localhost:8989'
-      }
     };
     // Only set once
-
-    if (context.req) {
-      app.context.req = context.req;
-    }
-    if (context.res) {
-      app.context.res = context.res;
-    }
-
-    app.context.redirect = (status, path, query) => {
-      if (!status) {
-        return;
-      }
-      app.context._redirected = true;
-      // if only 1 or 2 arguments: redirect('/') or redirect('/', { foo: 'bar' })
-      let pathType = typeof path;
-
-      if (typeof status !== 'number' && (pathType === 'undefined' || pathType === 'object')) {
-        query = path || {};
-        path = status;
-        pathType = typeof path;
-        status = 302;
-      }
-      if (pathType === 'object') {
-        path = app.router.resolve(path).route.fullPath;
-      }
-      // "/absolute/route", "./relative/route" or "../relative/route"
-      if (/(^[.]{1,2}\/)|(^\/(?!\/))/.test(path)) {
-        app.context.next({
-          path,
-          query,
-          status
-        });
-      } else {
-        path = withQuery(path, query);
-
-        // https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
-        window.location.replace(path);
-
-        // Throw a redirect error
-        throw new Error('ERR_REDIRECT');
-      }
-    };
   }
 
   // Dynamic keys
@@ -539,8 +142,6 @@ export const setContext = async(app, context) => {
 
   app.context.next = context.next;
   app.context._redirected = false;
-  app.context._errored = false;
-  app.context.isHMR = Boolean(context.isHMR);
-  app.context.params = app.context.route.params || {};
-  app.context.query = app.context.route.query || {};
+  app.context.params = app.context.route?.params || {};
+  app.context.query = app.context.route?.query || {};
 };

package/initialize/entry.js

@@ -1,6 +1,3 @@
-// Taken from @nuxt/vue-app/template/client.js
-
-import Vue from 'vue';
 import fetch from 'unfetch';
 import { extendApp } from './app-extended.js';
 import fetchMixin from '@shell/mixins/fetch.client.js';
@@ -8,25 +5,29 @@ import { loadDebugger, mountApp } from '@shell/initialize/entry-helpers';
 import { installDirectives } from '@shell/initialize/install-directives.js';
 import { installComponents } from '@shell/initialize/install-components.js';
 import { installPlugins } from '@shell/initialize/install-plugins.js';
+import App from '@shell/initialize/App.vue';
+import { createApp } from 'vue';
+
+const vueApp = createApp(App);
 
 // Fetch mixin
-Vue.mixin(fetchMixin);
+vueApp.mixin(fetchMixin);
 
 // Bulk install components
-installComponents(Vue);
+installComponents(vueApp);
 
 // Bulk install directives
-installDirectives(Vue);
+installDirectives(vueApp);
 
 // Bulk install Plugins. Note: Some are added within the App itself
-installPlugins(Vue);
+installPlugins(vueApp);
 
 if (!global.fetch) {
   global.fetch = fetch;
 }
 
-loadDebugger(Vue);
-const errorHandler = Vue.config.errorHandler || console.error; // eslint-disable-line no-console
+loadDebugger(vueApp);
+const errorHandler = vueApp.config.errorHandler || console.error; // eslint-disable-line no-console
 
 // Create and mount App
-extendApp(Vue).then((appPartials) => mountApp(appPartials, Vue)).catch(errorHandler); // eslint-disable-line no-undef
+extendApp(vueApp).then((appPartials) => mountApp(appPartials, vueApp)).catch(errorHandler); // eslint-disable-line no-undef

package/initialize/install-plugins.js

@@ -1,25 +1,23 @@
 import PortalVue from 'portal-vue';
 import VueResize from 'vue-resize';
-import ShortKey from 'vue-shortkey';
-import VTooltip from 'v-tooltip';
+import FloatingVue from 'floating-vue';
 import vSelect from 'vue-select';
 import 'vue-resize/dist/vue-resize.css';
 
-import '@shell/plugins/extend-router';
+// import '@shell/plugins/extend-router';
 import '@shell/plugins/formatters';
-import '@shell/plugins/vue-js-modal';
 import '@shell/plugins/js-yaml';
 
 import i18n from '@shell/plugins/i18n';
 import globalFormatters from '@shell/plugins/global-formatters';
 
 import axios from '@shell/utils/axios';
-import cookieUniversalNuxt from '@shell/utils/cookie-universal-nuxt';
+import cookieUniversal from '@shell/utils/cookie-universal';
 import config from '@shell/utils/config';
 import axiosShell from '@shell/plugins/axios';
 import backButton from '@shell/plugins/back-button';
 import codeMirror from '@shell/plugins/codemirror-loader';
-import VueCodemirror from 'vue-codemirror';
+import { InstallCodemirro } from 'codemirror-editor-vue3';
 import * as intNumber from '@shell/directives/int-number';
 import nuxtClientInit from '@shell/plugins/nuxt-client-init';
 import plugin from '@shell/plugins/plugin';
@@ -29,19 +27,23 @@ import replaceAll from '@shell/plugins/replaceall';
 import steveCreateWorker from '@shell/plugins/steve-create-worker';
 import version from '@shell/plugins/version';
 import emberCookie from '@shell/plugins/ember-cookie';
+import ShortKey from '@shell/plugins/shortkey';
+
+import 'floating-vue/dist/style.css';
+import { floatingVueOptions } from '@shell/plugins/floating-vue';
 
 export async function installPlugins(vueApp) {
   vueApp.use(globalFormatters);
   vueApp.use(PortalVue);
   vueApp.use(VueResize);
-  vueApp.use(VTooltip);
+  vueApp.use(FloatingVue, floatingVueOptions);
   vueApp.use(ShortKey, { prevent: ['input', 'textarea', 'select'] });
-  vueApp.use(VueCodemirror);
+  vueApp.use(InstallCodemirro);
   vueApp.component('v-select', vSelect);
 }
 
 export async function installInjectedPlugins(app, vueApp) {
-  const pluginDefinitions = [config, cookieUniversalNuxt, axios, plugins, pluginsLoader, axiosShell, intNumber, codeMirror, nuxtClientInit, replaceAll, backButton, plugin, version, steveCreateWorker, emberCookie];
+  const pluginDefinitions = [config, cookieUniversal, axios, plugins, pluginsLoader, axiosShell, intNumber, codeMirror, nuxtClientInit, replaceAll, backButton, plugin, version, steveCreateWorker, emberCookie];
 
   const installations = pluginDefinitions.map(async(pluginDefinition) => {
     if (typeof pluginDefinition === 'function') {
@@ -101,7 +103,7 @@ function inject(key, value, context, vueApp) {
   store[key] = app[key];
 
   // Check if plugin not already installed
-  const installKey = `__nuxt_${ key }_installed__`;
+  const installKey = `__plugin_${ key }_installed__`;
 
   window.installedPlugins = window.installedPlugins || {};
 
@@ -112,10 +114,10 @@ function inject(key, value, context, vueApp) {
 
   // Call vueApp.use() to install the plugin into vm
   vueApp.use(() => {
-    if (!Object.prototype.hasOwnProperty.call(vueApp.prototype, key)) {
-      Object.defineProperty(vueApp.prototype, key, {
+    if (!Object.prototype.hasOwnProperty.call(vueApp.config.globalProperties, key)) {
+      Object.defineProperty(vueApp.config.globalProperties, key, {
         get() {
-          return this.$root.$options[key];
+          return app.context[key];
         }
       });
     }

package/list/__tests__/workload.test.ts

@@ -21,27 +21,29 @@ describe('component: workload', () => {
     const wrapper = shallowMount(Workload as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
       components: { ResourceTable },
       mixins:     [ResourceFetch],
-      mocks:      {
-        $store: {
-          dispatch: () => jest.fn(),
-          getters:  {
-            currentStore:                  () => 'cluster',
-            namespaces:                    () => jest.fn(),
-            'management/byId':             () => jest.fn(),
-            'resource-fetch/refreshFlag':  () => jest.fn(),
-            'type-map/hideBulkActionsFor': () => jest.fn(),
-            'type-map/labelFor':           () => jest.fn(),
-            'type-map/optionsFor':         () => jest.fn(),
-            'type-map/headersFor':         () => jest.fn(),
-            'prefs/get':                   () => resource,
-            'cluster/schemaFor':           () => {},
-            'cluster/all':                 () => [{}],
-          }
+      global:     {
+        mocks: {
+          $store: {
+            dispatch: () => jest.fn(),
+            getters:  {
+              currentStore:                  () => 'cluster',
+              namespaces:                    () => jest.fn(),
+              'management/byId':             () => jest.fn(),
+              'resource-fetch/refreshFlag':  () => jest.fn(),
+              'type-map/hideBulkActionsFor': () => jest.fn(),
+              'type-map/labelFor':           () => jest.fn(),
+              'type-map/optionsFor':         () => jest.fn(),
+              'type-map/headersFor':         () => jest.fn(),
+              'prefs/get':                   () => resource,
+              'cluster/schemaFor':           () => {},
+              'cluster/all':                 () => [{}],
+            }
+          },
+          $fetchState: {
+            pending: false, error: true, timestamp: Date.now()
+          },
+          $route: { params: { resource } },
         },
-        $fetchState: {
-          pending: false, error: true, timestamp: Date.now()
-        },
-        $route: { params: { resource } },
       }
     });