@rancher/shell 2.0.0 → 3.0.0-rc.1

package/initialize/entry-helpers.js

@@ -1,11 +1,5 @@
-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';
-
-// Global variable used on mount, updated on route change and used in the render function
-let app;
+import { createApp } from 'vue';
+const vueApp = createApp({});
 
 /**
  * Add error handler debugging capabilities
@@ -32,7 +26,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];
 
@@ -54,322 +48,26 @@ 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) {
-    // Call the authenticated middleware. This used to attempt to load the error layout but because it was missing it would:
-    // 1. load the default layout instead
-    // 2. then call the authenticated middleware
-    // 3. Authenticated middleware would then load plugins and check to see if there was a valid route and navigate to that if it existed
-    // 4. This would allow harvester cluster pages to load on page reload
-    // We should really make authenticated middleware do less...
-    await callMiddleware.call(this, [{ options: { middleware: ['authenticated'] } }], app.context);
-
-    // We used to have i18n middleware which was called each time we called middleware. This is also needed to support harvester because of the way harvester loads as outlined in the comment above
-    await this.$store.dispatch('i18n/init');
-
-    if (nextCalled) {
-      return;
-    }
-
-    // Show error page
-    // this.error({ statusCode: 404, message: 'This page could not be found' });
-    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();
-  }
-}
+export const globalHandleError = (error) => vueApp.config.errorHandler && vueApp.config.errorHandler(error);
 
 /**
  * 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();
-  };
+  vueApp.use(router);
+  vueApp.use(app.store);
 
-  // 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();
+  vueApp.$loading = {}; // To avoid error while vueApp.$loading does not exist
 
-      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();
-    });
-
-    // 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
-
-        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) => {
@@ -380,65 +78,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
@@ -448,15 +87,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
   };
 };
@@ -471,59 +122,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
@@ -542,8 +147,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 } },
       }
     });