@rancher/shell 0.1.1 → 0.1.3

package/pages/index.vue

@@ -2,21 +2,35 @@
 import { SEEN_WHATS_NEW } from '@shell/store/prefs';
 import { getVersionInfo } from '@shell/utils/version';
 
+const validRoute = (route, router) => {
+  return !!route && !!router.resolve(route)?.resolved?.matched?.length;
+};
+
 export default {
-  middleware({ redirect, store } ) {
+  middleware({ redirect, store, app } ) {
     const seenWhatsNew = store.getters['prefs/get'](SEEN_WHATS_NEW);
     const versionInfo = getVersionInfo(store);
     const isSingleProduct = store.getters['isSingleProduct'];
+    const dashboardHome = { name: 'home' };
 
     // If this is a new version, then take the user to the home page to view the release notes
     if (versionInfo.fullVersion !== seenWhatsNew && !isSingleProduct) {
-      return redirect({ name: 'home' });
+      return redirect(dashboardHome);
     }
 
-    // Take the user to the configured login route
     const afterLoginRouteObject = store.getters['prefs/afterLoginRoute'];
 
-    return redirect(afterLoginRouteObject);
+    // Confirm this is a valid route (it could have come from an uninstalled plugin)
+    if (validRoute(afterLoginRouteObject, app.router)) {
+      // Take the user to the configured login route
+      return redirect(afterLoginRouteObject);
+    }
+
+    if (validRoute(isSingleProduct?.afterLoginRoute, app.router)) {
+      return redirect(isSingleProduct.afterLoginRoute);
+    }
+
+    return redirect(dashboardHome);
   }
 };
 </script>

package/pages/plugins.vue

@@ -242,7 +242,7 @@ export default {
             <LabeledInput v-model="location" label="Plugin URL" @input="updateLocation" />
           </div>
           <div class="dialog-buttons">
-            <button class="btn" @click="closeAddDialog()">
+            <button class="btn role-secondary" @click="closeAddDialog()">
               Cancel
             </button>
             <button class="btn role-primary" @click="loadPlugin()">
@@ -268,7 +268,7 @@ export default {
             <LabeledInput v-model="catalogUrl" label="Catalog URL" />
           </div>
           <div class="dialog-buttons">
-            <button class="btn" @click="closeAddCatalogDialog()">
+            <button class="btn role-secondary" @click="closeAddCatalogDialog()">
               Cancel
             </button>
             <button class="btn role-primary" @click="addCatalog()">

package/pages/prefs.vue

@@ -159,8 +159,11 @@ export default {
       <LandingPagePreference />
     </div>
     <hr />
-    <h4 v-t="'prefs.formatting'" />
-    <div class="row">
+    <h4 v-t="'prefs.displaySettings.title'" />
+    <p class="set-landing-leadin">
+      {{ t('prefs.displaySettings.detail', {}, raw=true) }}
+    </p>
+    <div class="row mt-20">
       <div class="col span-4">
         <LabeledSelect
           v-model="dateFormat"
@@ -175,7 +178,9 @@ export default {
           :options="timeOptions"
         />
       </div>
+    </div>
 
+    <div class="row mt-20">
       <div class="col span-4">
         <LabeledSelect
           v-model.number="perPage"
@@ -186,9 +191,6 @@ export default {
           placeholder="Select a row count"
         />
       </div>
-    </div>
-
-    <div class="row mt-20">
       <div class="col span-4">
         <LabeledSelect
           v-model.number="menuMaxClusters"
@@ -207,7 +209,7 @@ export default {
         <h4 v-t="'prefs.advanced'" />
         <Checkbox v-model="dev" :label="t('prefs.dev.label', {}, true)" />
         <p class="wrap-text">
-          {{ t('prefs.advancedTooltip', {}, raw=true) }}
+          {{ t('prefs.advancedTooltip') }}
         </p>
         <br>
         <Checkbox v-if="!isSingleProduct" v-model="hideDescriptions" :label="t('prefs.hideDesc.label')" class="mt-10" />

package/pkg/auto-import.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents', 'formatters'];
+const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents', 'dialog', 'formatters'];
 const contextMap = contextFolders.reduce((map, obj) => {
   map[obj] = true;
 
@@ -11,6 +11,19 @@ function replaceAll(str, find, replace) {
   return str.split(find).join(replace);
 }
 
+function registerFile(file, type, pkg, f) {
+  const importType = (f === 'models') ? 'require' : 'import';
+  const chunkName = (f === 'l10n') ? '' : `/* webpackChunkName: "${ f }" */`;
+
+  return `  $plugin.register('${ f }', '${ type }', () => ${ importType }(${ chunkName }'${ pkg }/${ f }/${ file }'));\n`;
+}
+
+function register(file, pkg, f) {
+  const name = file.replace(/\.[^/.]+$/, '');
+
+  return registerFile(file, name, pkg, f);
+}
+
 // This function is used to generate the code to register models, edit, detail, list etc for a type
 // This is used when building as a library - it does not use require.context - it scans the file system and build time.
 // This ensures that the webpackChunkName is respected (require.context does not support this) - so when build as a library
@@ -20,13 +33,34 @@ function generateTypeImport(pkg, dir) {
 
   // Auto-import if the folder exists
   contextFolders.forEach((f) => {
-    if (fs.existsSync(path.join(dir, f))) {
+    const filePath = path.join(dir, f);
+
+    if (fs.existsSync(filePath)) {
       fs.readdirSync(path.join(dir, f)).forEach((file) => {
-        const name = file.replace(/\.[^/.]+$/, '');
-        const importType = (f === 'models') ? 'require' : 'import';
-        const chunkName = (f === 'l10n') ? '' : `/* webpackChunkName: "${ f }" */`;
+        const fileStat = fs.lstatSync(path.join(filePath, file));
+
+        // Directories are special cases
+        if (fileStat.isDirectory()) {
+          // This might be a <type>/index.vue (aka nested component)
+          const indexFilePath = path.join(file, 'index.vue');
+          const fullIndexFilePath = path.join(filePath, indexFilePath);
 
-        content += `  $plugin.register('${ f }', '${ name }', () => ${ importType }(${ chunkName }'${ pkg }/${ f }/${ file }'));\n`;
+          if (fs.existsSync(fullIndexFilePath)) {
+            content += registerFile(indexFilePath, file, pkg, f);
+
+            return;
+          }
+
+          // This might be a <store name>/<model name|type>.js file (aka nested model)
+          if (f === 'models') {
+            fs.readdirSync(path.join(filePath, file)).forEach((store) => {
+              content += register(path.join(file, store), pkg, f);
+            });
+          }
+        } else {
+          // This is a simple <resource type>.<file type> file
+          content += register(file, pkg, f);
+        }
       });
     }
   });
@@ -48,7 +82,10 @@ function generateDynamicTypeImport(pkg, dir) {
   // Auto-import if the folder exists
   contextFolders.forEach((f) => {
     if (fs.existsSync(path.join(dir, f))) {
-      let genImport = replaceAll(template, 'NAME', f);
+      const safeName = f.replace(/\/|-/g, '_');
+      let genImport = replaceAll(template, 'NAME', safeName);
+
+      genImport = replaceAll(genImport, 'DIR', f );
       const importType = (f === 'models') ? 'require' : 'import';
       // Ensure i18n chunks are named with the request name (which will be the locale)
       const chunk = (f === 'l10n') ? '[request]' : f;

package/pkg/dynamic-plugin-loader.js

@@ -0,0 +1,28 @@
+
+/**
+ * Some plugins won't be bundled with the dashboard build but loaded on demand at run time.
+ * This file allows 'manager' style plugins to defined how to determine if a unknown route
+ * belongs to one of their associated plugins and how that plugin can be loaded
+ */
+class DynamicPluginLoader {
+  dynamicPluginLoaders = [];
+
+  register(reg) {
+    this.dynamicPluginLoaders.push(reg);
+  }
+
+  async check({ route, store }) {
+    for (const dpl of this.dynamicPluginLoaders) {
+      // Check that the route is valid and then load the plugin associated with it
+      const res = await dpl.load({ route, store });
+
+      if (res) {
+        return res;
+      }
+    }
+  }
+}
+
+const dynamicPluginLoader = new DynamicPluginLoader();
+
+export default dynamicPluginLoader;

package/pkg/import.js

@@ -1,4 +1,4 @@
-const _NAME = require.context('BASE/NAME', true, /\.(vue|js|yaml)$/).keys();
+const _NAME = require.context('BASE/DIR', true, /\.(vue|js|yaml)$/).keys();
 
 _NAME.forEach((f) => {
   let name = f.substr(2);
@@ -6,5 +6,5 @@ _NAME.forEach((f) => {
 
   name = name.substr(0, ext);
 
-  $plugin.register('NAME', name, () => REQUIRE(CHUNK`BASE/NAME/${ name }EXT`)); // eslint-disable-line no-undef
+  $plugin.register('DIR', name, () => REQUIRE(CHUNK`BASE/DIR/${ name }EXT`)); // eslint-disable-line no-undef
 });

package/pkg/model-loader-require.lib.js

@@ -0,0 +1,3 @@
+export default function modelLoaderRequire(type) {
+  return null;
+}

package/pkg/vue.config.js

@@ -46,20 +46,23 @@ module.exports = function(dir) {
       config.resolve.alias['~pkg'] = dir;
       delete config.resolve.alias['@'];
 
-      // Prevent the dynamic importer and the model-loader from importing anything dynamically - we don't want all of the
+      // Prevent the dynamic importer and the model-loader-require from importing anything dynamically - we don't want all of the
       // models etc when we build as a library
-      const dynamicImporterOveride = new webpack.NormalModuleReplacementPlugin(/dynamic-importer$/, (resource) => {
+      const dynamicImporterOverride = new webpack.NormalModuleReplacementPlugin(/dynamic-importer$/, (resource) => {
         resource.request = path.join(__dirname, 'dynamic-importer.lib.js');
       });
-      const modelLoaderImporterOveride = new webpack.NormalModuleReplacementPlugin(/model-loader$/, (resource) => {
-        resource.request = path.join(__dirname, 'model-loader.lib.js');
+      const modelLoaderImporterOverride = new webpack.NormalModuleReplacementPlugin(/model-loader-require$/, (resource) => {
+        const fileName = 'model-loader-require.lib.js';
+        const pkgModelLoaderRequire = path.join(dir, fileName);
+
+        resource.request = fs.existsSync(pkgModelLoaderRequire) ? pkgModelLoaderRequire : path.join(__dirname, fileName);
       });
 
       // Auto-generate module to import the types (model, detail, edit etc)
       const autoImportPlugin = new VirtualModulesPlugin({ 'node_modules/@rancher/auto-import': generateTypeImport('@pkg', dir) });
 
-      config.plugins.unshift(dynamicImporterOveride);
-      config.plugins.unshift(modelLoaderImporterOveride);
+      config.plugins.unshift(dynamicImporterOverride);
+      config.plugins.unshift(modelLoaderImporterOverride);
       config.plugins.unshift(autoImportPlugin);
       // config.plugins.unshift(debug);
 

package/plugins/console.js

@@ -1,12 +1,17 @@
 /* eslint-disable no-console */
-export default (context) => {
-  const logTypes = ['log', 'error', 'info', 'warn'];
+export default () => {
+  const logTypes = ['warn', 'error'];
   const MAX_LOGS_STORED = 400;
 
-  console.logLog = console.log.bind(console);
-  console.errorLog = console.error.bind(console);
-  console.infoLog = console.info.bind(console);
+  if (!process.env.dev) {
+    console.logLog = console.log.bind(console);
+    console.infoLog = console.info.bind(console);
+    logTypes.push('log');
+    logTypes.push('info');
+  }
+
   console.warnLog = console.warn.bind(console);
+  console.errorLog = console.error.bind(console);
   console.logs = [];
 
   logTypes.forEach((type) => {

package/plugins/dashboard-store/actions.js

@@ -319,7 +319,12 @@ export default {
     return all;
   },
 
-  async findMatching(ctx, { type, selector, opt }) {
+  async findMatching(ctx, {
+    type,
+    selector,
+    opt,
+    namespace
+  }) {
     const {
       getters, commit, dispatch, rootGetters
     } = ctx;
@@ -332,7 +337,7 @@ export default {
       commit('registerType', type);
     }
     if ( opt.force !== true && getters['haveSelector'](type, selector) ) {
-      return getters.matching( type, selector );
+      return getters.matching( type, selector, namespace );
     }
 
     const typeOptions = rootGetters['type-map/optionsFor'](type);
@@ -366,7 +371,7 @@ export default {
       });
     }
 
-    return getters.matching( type, selector );
+    return getters.matching( type, selector, namespace );
   },
 
   // opt:

package/plugins/dashboard-store/getters.js

@@ -25,8 +25,13 @@ export default {
     return state.types[type].list;
   },
 
-  matching: (state, getters) => (type, selector) => {
-    const all = getters['all'](type);
+  matching: (state, getters) => (type, selector, namespace) => {
+    let all = getters['all'](type);
+
+    // Filter first by namespace if one is provided, since this is efficient
+    if (namespace) {
+      all = all.filter(obj => obj.namespace === namespace);
+    }
 
     return all.filter((obj) => {
       return matches(obj, selector);

package/plugins/dashboard-store/model-loader-require.js

@@ -0,0 +1,12 @@
+/**
+ * Fetch a model from the dashboard's local model's folder
+ *
+ * Splitting this out into a separate function means packages can
+ * override this to ensure dashboard models aren't bundled with it
+ *
+ * @param {string} type
+ * @returns Model for the given type
+ */
+export default function modelLoaderRequire(type) {
+  return require(`@shell/models/${ type }`);
+}

package/plugins/dashboard-store/model-loader.js

@@ -1,4 +1,5 @@
 import { normalizeType } from './normalize';
+import modelLoaderRequire from './model-loader-require';
 
 const cache = {};
 
@@ -16,7 +17,9 @@ function find(cache, type, rootState) {
     let base;
 
     if (!pluginModel) {
-      base = require(`@shell/models/${ type }`);
+      // Model hasn't come from a plugin, fall back on something reasonable
+      // by default this is the dashboard's local models folder
+      base = modelLoaderRequire(type);
     } else if (typeof pluginModel === 'function') {
       // pluginModel could be an object in the case the plugin is built-in
       base = pluginModel();

package/plugins/dashboard-store/resource-class.js

@@ -24,7 +24,7 @@ import {
   validateDnsLikeTypes,
   validateLength,
 } from '@shell/utils/validators';
-import formRulesGenerator from '@shell/utils/validators/formRules';
+import formRulesGenerator from '@shell/utils/validators/formRules/index';
 import jsyaml from 'js-yaml';
 import compact from 'lodash/compact';
 import forIn from 'lodash/forIn';
@@ -1587,8 +1587,15 @@ export default class Resource {
           if (!isEmpty(validatorName) && validatorExists) {
             CustomValidators[validatorName](pathValue, this.$rootGetters, errors, validatorArgs, displayKey, data);
           } else if (!isEmpty(validatorName) && !validatorExists) {
-            // eslint-disable-next-line
-            console.warn(this.t('validation.custom.missing', { validatorName }));
+            // Check if validator is imported from plugin
+            const pluginValidator = this.$rootState.$plugin?.getValidator(validatorName);
+
+            if (pluginValidator) {
+              pluginValidator(pathValue, this.$rootGetters, errors, validatorArgs, displayKey, data);
+            } else {
+              // eslint-disable-next-line
+              console.warn(this.t('validation.custom.missing', { validatorName }));
+            }
           }
         });
       });

package/plugins/steve/actions.js

@@ -178,7 +178,7 @@ export default {
         const res = err.response;
 
         // Go to the logout page for 401s, unless redirectUnauthorized specifically disables (for the login page)
-        if ( opt.redirectUnauthorized !== false && process.client && res.status === 401 ) {
+        if ( opt.redirectUnauthorized !== false && res.status === 401 ) {
           dispatch('auth/logout', opt.logoutOnError, { root: true });
         }
 

package/plugins/steve/index.js

@@ -10,7 +10,7 @@ import getters, { STEVE_MODEL_TYPES } from './getters';
 import mutations from './mutations';
 import actions from './actions';
 
-function SteveFactory(namespace, baseUrl) {
+export function SteveFactory(namespace, baseUrl) {
   return {
     ...coreStoreModule,
 
@@ -50,6 +50,10 @@ function SteveFactory(namespace, baseUrl) {
   };
 }
 
+export const steveStoreInit = (store, ctx) => {
+  createWorker(store, ctx);
+};
+
 export default (config) => {
   config.namespace = config.namespace || '';
 
@@ -67,8 +71,6 @@ export default (config) => {
   return coreStore(
     SteveFactory(config.namespace, config.baseUrl),
     config,
-    (store, ctx) => {
-      createWorker(store, ctx);
-    }
+    steveStoreInit
   );
 };

package/plugins/steve/steve-description-class.js

@@ -0,0 +1,32 @@
+import SteveModel from './steve-class';
+
+/**
+ * SteveModel that supports the description being in the root 'description' property.
+ */
+export default class SteveDescriptionModel extends SteveModel {
+  // Preserve description
+  constructor(data, ctx, rehydrateNamespace = null, setClone = false) {
+    const _description = data.description;
+
+    super(data, ctx, rehydrateNamespace, setClone);
+    this.description = _description;
+  }
+
+  get description() {
+    return this._description;
+  }
+
+  set description(value) {
+    this._description = value;
+  }
+
+  // Ensure when we clone that we preserve the desription
+  toJSON() {
+    const data = super.toJSON();
+
+    data.description = this.description;
+    delete data._description;
+
+    return data;
+  }
+}

package/plugins/steve/subscribe.js

@@ -1,6 +1,7 @@
 import { addObject, clear, removeObject } from '@shell/utils/array';
 import { get } from '@shell/utils/object';
-import { COUNT, SCHEMA } from '@shell/config/types';
+import { COUNT, MANAGEMENT, SCHEMA } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
 import Socket, {
   EVENT_CONNECTED,
   EVENT_DISCONNECTED,
@@ -456,28 +457,38 @@ export const actions = {
     clearTimeout(state.queueTimer);
     state.queueTimer = null;
     if (e.type === EVENT_DISCONNECT_ERROR) {
-      // do not send a growl notification unless the socket stays disconnected for more than MINIMUM_TIME_DISCONNECTED
-      setTimeout(() => {
-        if (state.socket.isConnected()) {
-          return;
-        }
-        const dateFormat = escapeHtml( rootGetters['prefs/get'](DATE_FORMAT));
-        const timeFormat = escapeHtml( rootGetters['prefs/get'](TIME_FORMAT));
-        const time = e?.srcElement?.disconnectedAt || Date.now();
-
-        const timeFormatted = `${ day(time).format(`${ dateFormat } ${ timeFormat }`) }`;
-        const url = e?.srcElement?.url;
-
-        const t = rootGetters['i18n/t'];
-
-        dispatch('growl/error', {
-          title:         t('growl.disconnected.title'),
-          message:       t('growl.disconnected.message', { url, time: timeFormatted }, { raw: true }),
-          icon:          'error',
-          earliestClose: time + MINIMUM_TIME_NOTIFIED + MINIMUM_TIME_DISCONNECTED,
-          url
-        }, { root: true });
-      }, MINIMUM_TIME_DISCONNECTED);
+      // determine if websocket notifications are disabled
+      const perfSetting = rootGetters['management/byId'](MANAGEMENT.SETTING, SETTING.UI_PERFORMANCE);
+      let disableGrowl = false;
+
+      if ( perfSetting?.value ) {
+        disableGrowl = JSON.parse(perfSetting.value).disableWebsocketNotification || false;
+      }
+
+      if ( !disableGrowl ) {
+        // do not send a growl notification unless the socket stays disconnected for more than MINIMUM_TIME_DISCONNECTED
+        setTimeout(() => {
+          if (state.socket.isConnected()) {
+            return;
+          }
+          const dateFormat = escapeHtml( rootGetters['prefs/get'](DATE_FORMAT));
+          const timeFormat = escapeHtml( rootGetters['prefs/get'](TIME_FORMAT));
+          const time = e?.srcElement?.disconnectedAt || Date.now();
+
+          const timeFormatted = `${ day(time).format(`${ dateFormat } ${ timeFormat }`) }`;
+          const url = e?.srcElement?.url;
+
+          const t = rootGetters['i18n/t'];
+
+          dispatch('growl/error', {
+            title:         t('growl.disconnected.title'),
+            message:       t('growl.disconnected.message', { url, time: timeFormatted }, { raw: true }),
+            icon:          'error',
+            earliestClose: time + MINIMUM_TIME_NOTIFIED + MINIMUM_TIME_DISCONNECTED,
+            url
+          }, { root: true });
+        }, MINIMUM_TIME_DISCONNECTED);
+      }
     } else {
       // if the error is not a disconnect error, the socket never worked: log whether the current browser is safari
       console.error(`WebSocket Connection Error [${ getters.storeName }]`, e.detail); // eslint-disable-line no-console

package/rancher-components/Banner/Banner.vue

@@ -131,8 +131,8 @@ export default Vue.extend({
     }
 
     &.secondary {
-      background: var(--secondary-banner-bg);
-      border-left: solid $left-border-size var(--secondary);
+      background: var(--default-banner-bg);
+      border-left: solid $left-border-size var(--default);
       color: var(--body-text);
     }
 

package/rancher-components/Form/Checkbox/Checkbox.test.ts

@@ -0,0 +1,77 @@
+import { shallowMount } from '@vue/test-utils';
+import { Checkbox } from './index';
+
+describe('Checkbox.vue', () => {
+  it('is unchecked by default', () => {
+    const wrapper = shallowMount(Checkbox);
+    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+
+    expect(cbInput.checked).toBe(false);
+  });
+
+  it('renders a true value', () => {
+    const wrapper = shallowMount(Checkbox, { propsData: { value: true } });
+    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+
+    expect(cbInput.checked).toBe(true);
+  });
+
+  it('updates from false to true when props change', async () => {
+    const wrapper = shallowMount(Checkbox);
+    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+
+    expect(cbInput.checked).toBe(false);
+
+    await wrapper.setProps({ value: true });
+
+    expect(cbInput.checked).toBe(true);
+  });
+
+  it('emits an input event with a true value', async () => {
+    const wrapper = shallowMount(Checkbox);
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
+
+    (wrapper.vm as any).clicked(event);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(true);
+  });
+
+  it('emits an input event with a custom valueWhenTrue', async () => {
+    const valueWhenTrue = 'BIG IF TRUE';
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
+
+    const wrapper = shallowMount(Checkbox, { propsData: { value: false, valueWhenTrue } });
+
+    (wrapper.vm as any).clicked(event);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(valueWhenTrue);
+  });
+
+  it('updates from valueWhenTrue to falsy', async () => {
+    const valueWhenTrue = 'REAL HUGE IF FALSE';
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
+
+    const wrapper = shallowMount(Checkbox, { propsData: { value: valueWhenTrue, valueWhenTrue } });
+
+    (wrapper.vm as any).clicked(event);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.[0][0]).toBe(null);
+  })
+});