@rancher/shell 1.2.3 → 2.0.1

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

@@ -16,10 +16,8 @@ import { downloadFile, generateZip } from '@shell/utils/download';
 import { clone, get } from '@shell/utils/object';
 import { eachLimit } from '@shell/utils/promise';
 import { sortableNumericSuffix } from '@shell/utils/sort';
-import { coerceStringTypeToScalarType, escapeHtml, ucFirst } from '@shell/utils/string';
+import { escapeHtml, ucFirst } from '@shell/utils/string';
 import {
-  displayKeyFor,
-  validateBoolean,
   validateChars,
   validateDnsLikeTypes,
   validateLength,
@@ -32,26 +30,12 @@ import forIn from 'lodash/forIn';
 import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';
-import uniq from 'lodash/uniq';
 import Vue from 'vue';
 
-import { normalizeType } from './normalize';
-
 import { ExtensionPoint, ActionLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 
-const STRING_LIKE_TYPES = [
-  'string',
-  'date',
-  'blob',
-  'enum',
-  'multiline',
-  'masked',
-  'password',
-  'dnsLabel',
-  'hostname',
-];
-const DNS_LIKE_TYPES = ['dnsLabel', 'dnsLabelRestricted', 'hostname'];
+export const DNS_LIKE_TYPES = ['dnsLabel', 'dnsLabelRestricted', 'hostname'];
 
 const REMAP_STATE = {
   disabled:                 'inactive',
@@ -105,6 +89,7 @@ export const STATES_ENUM = {
   ERRORING:         'erroring',
   ERRORS:           'errors',
   EXPIRED:          'expired',
+  EXPIRING:         'expiring',
   FAIL:             'fail',
   FAILED:           'failed',
   HEALTHY:          'healthy',
@@ -167,6 +152,13 @@ export const STATES_ENUM = {
   WARNING:          'warning',
 };
 
+export function mapStateToEnum(statusString) {
+  // e.g. in fleet Status is Capitalized. This function will map it to the enum
+  return Object.values(STATES_ENUM).find((val) => {
+    return val.toLowerCase() === statusString.toLocaleLowerCase();
+  });
+}
+
 export const STATES = {
   [STATES_ENUM.IN_USE]: {
     color: 'success', icon: 'dot-open', label: 'In Use', compoundIcon: 'checkmark'
@@ -253,7 +245,10 @@ export const STATES = {
     color: 'error', icon: 'error', label: 'Errors', compoundIcon: 'error'
   },
   [STATES_ENUM.EXPIRED]: {
-    color: 'warning', icon: 'error', label: 'Expired', compoundIcon: 'warning'
+    color: 'error', icon: 'error', label: 'Expired', compoundIcon: 'warning'
+  },
+  [STATES_ENUM.EXPIRING]: {
+    color: 'warning', icon: 'error', label: 'Expiring', compoundIcon: 'error'
   },
   [STATES_ENUM.FAIL]: {
     color: 'error', icon: 'error', label: 'Fail', compoundIcon: 'error'
@@ -512,6 +507,28 @@ export function stateDisplay(state) {
   return key.split(/-/).map(ucFirst).join('-');
 }
 
+export function primaryDisplayStatusFromCount(status) {
+  const statusOrder = [
+    STATES_ENUM.ERROR,
+    STATES_ENUM.FAILED,
+    STATES_ENUM.WARNING,
+    STATES_ENUM.MODIFIED,
+    STATES_ENUM.WAIT_APPLIED,
+    STATES_ENUM.ORPHANED,
+    STATES_ENUM.MISSING,
+    STATES_ENUM.UNKNOWN,
+    STATES_ENUM.NOT_READY,
+    STATES_ENUM.READY,
+  ];
+
+  // sort status by order of statusOrder
+  const existingStatuses = Object.keys(status).filter((key) => {
+    return status[key] > 0 && statusOrder.includes(key.toLowerCase());
+  }).sort((a, b) => statusOrder.indexOf(a.toLowerCase()) - statusOrder.indexOf(b.toLowerCase()));
+
+  return existingStatuses[0] ? existingStatuses[0] : STATES_ENUM.UNKNOWN;
+}
+
 export function stateSort(color, display) {
   color = color.replace(/^(text|bg)-/, '');
 
@@ -1089,19 +1106,26 @@ export default class Resource {
     return this._save(...arguments);
   }
 
+  /**
+   * Remove any unwanted properties from the object that will be saved
+   */
+  cleanForSave(data, forNew) {
+    delete data.__rehydrate;
+    delete data.__clone;
+
+    return data;
+  }
+
   /**
    * Allow to handle the response of the save request
    * @param {*} res Full request response
    */
   processSaveResponse(res) { }
 
-  async _save(opt = {}) {
-    delete this.__rehydrate;
-    delete this.__clone;
-
+  async _save(opt = { }) {
     const forNew = !this.id;
 
-    const errors = await this.validationErrors(this, opt.ignoreFields);
+    const errors = this.validationErrors(this, opt);
 
     if (!isEmpty(errors)) {
       return Promise.reject(errors);
@@ -1145,22 +1169,24 @@ export default class Resource {
     // @TODO remove this once the API maps steve _type <-> k8s type in both directions
     opt.data = this.toSave() || { ...this };
 
-    if (opt?.data._type) {
+    if (opt.data._type) {
       opt.data.type = opt.data._type;
     }
 
-    if (opt?.data._name) {
+    if (opt.data._name) {
       opt.data.name = opt.data._name;
     }
 
-    if (opt?.data._labels) {
+    if (opt.data._labels) {
       opt.data.labels = opt.data._labels;
     }
 
-    if (opt?.data._annotations) {
+    if (opt.data._annotations) {
       opt.data.annotations = opt.data._annotations;
     }
 
+    opt.data = this.cleanForSave(opt.data, forNew);
+
     // handle "replace" opt as a query param _replace=true for norman PUT requests
     if (opt?.replace && opt.method === 'put') {
       const argParam = opt.url.includes('?') ? '&' : '?';
@@ -1218,19 +1244,11 @@ export default class Resource {
   // ------------------------------------------------------------------
 
   currentRoute() {
-    if ( process.server ) {
-      return this.$rootState.$route;
-    } else {
-      return window.$nuxt.$route;
-    }
+    return window.$globalApp.$route;
   }
 
   currentRouter() {
-    if ( process.server ) {
-      return this.$rootState.$router;
-    } else {
-      return window.$nuxt.$router;
-    }
+    return window.$globalApp.$router;
   }
 
   get listLocation() {
@@ -1347,7 +1365,7 @@ export default class Resource {
 
   async download() {
     const value = await this.followLink('view', { headers: { accept: 'application/yaml' } });
-    const data = await this.$dispatch('cleanForDownload', value.data);
+    const data = await this.cleanForDownload(value.data);
 
     downloadFile(`${ this.nameDisplay }.yaml`, data, 'application/yaml');
   }
@@ -1370,7 +1388,7 @@ export default class Resource {
     await eachLimit(items, 10, (item, idx) => {
       return item.followLink('view', { headers: { accept: 'application/yaml' } } ).then(async(data) => {
         const yaml = data.data || data;
-        const cleanedYaml = await this.$dispatch('cleanForDownload', yaml);
+        const cleanedYaml = await this.cleanForDownload(yaml);
 
         files[`resources/${ names[idx] }`] = cleanedYaml;
       });
@@ -1447,6 +1465,10 @@ export default class Resource {
     this.$dispatch(`cleanForDiff`, this.toJSON());
   }
 
+  async cleanForDownload(yaml) {
+    return this.$dispatch(`cleanForDownload`, yaml);
+  }
+
   yamlForSave(yaml) {
     try {
       const obj = jsyaml.load(yaml);
@@ -1636,93 +1658,14 @@ export default class Resource {
     return errors;
   }
 
-  validationErrors(data = this, ignoreFields) {
-    const errors = [];
-    const {
-      type: originalType,
-      schema
-    } = data;
-    const type = normalizeType(originalType);
-
-    if ( !originalType ) {
-      // eslint-disable-next-line
-      console.warn(this.t('validation.noType'), data);
-
-      return errors;
-    }
-
-    if ( !schema ) {
-      // eslint-disable-next-line
-      // console.warn(this.t('validation.noSchema'), originalType, data);
-
-      return errors;
-    }
-
-    const fields = schema.resourceFields || {};
-    const keys = Object.keys(fields);
-    let field, key, val, displayKey;
-
-    for ( let i = 0 ; i < keys.length ; i++ ) {
-      const fieldErrors = [];
-
-      key = keys[i];
-      field = fields[key];
-      val = get(data, key);
-      displayKey = displayKeyFor(type, key, this.$rootGetters);
-
-      const fieldType = field?.type ? normalizeType(field.type) : null;
-      const valIsString = isString(val);
-
-      if ( ignoreFields && ignoreFields.includes(key) ) {
-        continue;
-      }
-
-      if ( val === undefined ) {
-        val = null;
-      }
-
-      if (valIsString) {
-        if (fieldType) {
-          Vue.set(data, key, coerceStringTypeToScalarType(val, fieldType));
-        }
-
-        // Empty strings on nullable string fields -> null
-        if ( field.nullable && val.length === 0 && STRING_LIKE_TYPES.includes(fieldType)) {
-          val = null;
-
-          Vue.set(data, key, val);
-        }
-      }
-      if (fieldType === 'boolean') {
-        validateBoolean(val, field, displayKey, this.$rootGetters, fieldErrors);
-      } else {
-        validateLength(val, field, displayKey, this.$rootGetters, fieldErrors);
-        validateChars(val, field, displayKey, this.$rootGetters, fieldErrors);
-      }
-
-      if (fieldErrors.length > 0) {
-        fieldErrors.push(this.t('validation.required', { key: displayKey }));
-        errors.push(...fieldErrors);
-        continue;
-      }
-
-      // IDs claim to be these but are lies...
-      if ( key !== 'id' && !isEmpty(val) && DNS_LIKE_TYPES.includes(fieldType) ) {
-        // DNS types should be lowercase
-        const tolower = (val || '').toLowerCase();
-
-        if ( tolower !== val ) {
-          val = tolower;
-
-          Vue.set(data, key, val);
-        }
-
-        fieldErrors.push(...validateDnsLikeTypes(val, fieldType, displayKey, this.$rootGetters, fieldErrors));
-      }
-      errors.push(...fieldErrors);
-    }
-
-    return uniq([...errors, ...this.customValidationErrors(data)]);
+  /**
+   * Check this instance is valid against
+   * - any custom dashboard validation
+   *
+   * Models can override this and call super.validationErrors
+   */
+  validationErrors(data = this, opts = { }) {
+    return this.customValidationErrors(data);
   }
 
   get ownersByType() {
@@ -1931,4 +1874,11 @@ export default class Resource {
   get creationTimestamp() {
     return this.metadata?.creationTimestamp;
   }
+
+  /**
+   * Allows model to specify JSON Paths that should be folded in the YAML editor by default
+   */
+  get yamlFolding() {
+    return [];
+  }
 }

package/plugins/directives.js

@@ -1,41 +1,8 @@
 import Vue from 'vue';
+import focusDirective from '@shell/plugins/directives.js';
 
-Vue.directive('focus', {
-  inserted(_el, _binding, vnode) {
-    const element = getElement(vnode);
-
-    if (element) {
-      element.focus();
-    }
-  }
-});
-
-const getElement = (vnode) => {
-  const { componentInstance, componentOptions: { tag } } = vnode;
-
-  if (tag === 'LabeledInput') {
-    return componentInstance.$refs.value;
-  }
-
-  if (tag === 'LabeledSelect') {
-    componentInstance.shouldOpen = false;
-
-    return componentInstance.$refs['select-input'].$refs.search;
-  }
-
-  if (tag === 'SelectPrincipal') {
-    const labeledSelect = componentInstance.$refs['labeled-select'];
-
-    labeledSelect.shouldOpen = false;
-
-    return labeledSelect.$refs['select-input'].$refs.search;
-  }
-
-  if (tag === 'TextAreaAutoGrow') {
-    return componentInstance.$refs.ta;
-  }
-
-  if (tag === 'Password') {
-    return componentInstance.$refs.input.$refs.value;
-  }
-};
+export default focusDirective;
+/* eslint-disable-next-line no-console */
+console.warn(`Importing focusDirective from plugins has been deprecated, use shell/directives/focus.js instead.
+Make sure to invoke it using Vue.directive('focus', focusDirective ) to maintain compatibility.`);
+Vue.directive('focus', focusDirective);

package/plugins/ember-cookie.js

@@ -0,0 +1,13 @@
+import { REDIRECTED } from '@shell/config/cookies';
+
+export default function({ $cookies }) {
+  // This tells Ember not to redirect back to us once you've already been to dashboard once.
+  // TODO: Remove this once the ember portion of the app is no longer needed
+  if ( !$cookies.get(REDIRECTED) ) {
+    $cookies.set(REDIRECTED, 'true', {
+      path:     '/',
+      sameSite: true,
+      secure:   true,
+    });
+  }
+}

package/plugins/global-formatters.js

@@ -1,10 +1,31 @@
+/* eslint-disable no-console */
 import Vue from 'vue';
 
 const components = require.context('@shell/components/formatter', false, /[A-Z]\w+\.(vue)$/);
 
-components.keys().forEach((fileName) => {
-  const componentConfig = components(fileName);
-  const componentName = fileName.split('/').pop().split('.')[0];
+const globalFormatters = {
+  install: (Vue) => {
+    components.keys().forEach((fileName) => {
+      const componentConfig = components(fileName);
+      const componentName = fileName.split('/').pop().split('.')[0];
 
-  Vue.component(componentName, componentConfig.default || componentConfig);
-});
+      if (Vue.component(componentName)) {
+        // eslint-disable-next-line no-console
+        console.debug(`Skipping ${ componentName } install. Component already exists.`);
+      } else {
+        Vue.component(componentName, componentConfig.default || componentConfig);
+      }
+    });
+  }
+};
+
+export default globalFormatters;
+
+// This is being done for backwards compatibility with our extensions that have written tests and didn't properly make use of Vue.use() when importing and mocking vue plugins
+const isThisFileBeingExecutedInATest = process.env.NODE_ENV === 'test';
+
+if (isThisFileBeingExecutedInATest) {
+  console.warn('The implicit addition of global formatters has been deprecated in Rancher Shell and will be removed in a future version. Make sure to invoke `Vue.use(globalFormatters)` to maintain compatibility.');
+
+  Vue.use(globalFormatters);
+}

package/plugins/i18n.js

@@ -1,5 +1,7 @@
-import Vue from 'vue';
+/* eslint-disable no-console */
 import { escapeHtml } from '../utils/string';
+import Vue, { watchEffect, ref, h } from 'vue';
+import { useStore } from '../composables/useStore';
 
 export function stringFor(store, key, args, raw = false, escapehtml = true) {
   const translation = store.getters['i18n/t'](key, args);
@@ -26,10 +28,6 @@ export function stringFor(store, key, args, raw = false, escapehtml = true) {
   }
 }
 
-Vue.prototype.t = function(key, args, raw) {
-  return stringFor(this.$store, key, args, raw);
-};
-
 function directive(el, binding, vnode /*, oldVnode */) {
   const { context } = vnode;
   const raw = binding.modifiers && binding.modifiers.raw === true;
@@ -43,6 +41,9 @@ function directive(el, binding, vnode /*, oldVnode */) {
 }
 
 export function directiveSsr(vnode, binding) {
+  // eslint-disable-next-line no-console
+  console.warn('Function `directiveSsr` is deprecated. Please install i18n as a vue plugin: `Vue.use(i18n)`');
+
   const { context } = vnode;
   const raw = binding.modifiers && binding.modifiers.raw === true;
   const str = stringFor(context.$store, binding.value, {}, raw);
@@ -54,54 +55,87 @@ export function directiveSsr(vnode, binding) {
   }
 }
 
-// InnerHTML: <some-tag v-t="'some.key'" />
-// As an attribute: <some-tag v-t:title="'some.key'" />
-Vue.directive('t', {
-  bind() {
-    directive(...arguments);
-  },
-
-  update() {
-    directive(...arguments);
-  },
-});
-
-// Basic (but you might want the directive above): <t k="some.key" />
-// With interpolation: <t k="some.key" count="1" :foo="bar" />
-Vue.component('t', {
-  inheritAttrs: false,
-  props:        {
-    k: {
-      type:     String,
-      required: true,
-    },
-    raw: {
-      type:    Boolean,
-      default: false,
-    },
-    tag: {
-      type:    [String, Object],
-      default: 'span'
-    },
-    escapehtml: {
-      type:    Boolean,
-      default: true,
-    }
-  },
-
-  render(h) {
-    const msg = stringFor(this.$store, this.k, this.$attrs, this.raw, this.escapehtml);
-
-    if ( this.raw ) {
-      return h(
-        this.tag,
-        { domProps: { innerHTML: msg } }
-      );
-    } else {
-      return h(
-        this.tag,
-        [msg]
-      );
+const i18n = {
+  name:    'i18n',
+  install: (Vue, _options) => {
+    if (Vue.prototype.t && Vue.directive('t') && Vue.component('t')) {
+      // eslint-disable-next-line no-console
+      console.debug('Skipping i18n install. Directive, component, and option already exist.');
     }
-  },
-});
+
+    Vue.prototype.t = function(key, args, raw) {
+      return stringFor(this.$store, key, args, raw);
+    };
+
+    // InnerHTML: <some-tag v-t="'some.key'" />
+    // As an attribute: <some-tag v-t:title="'some.key'" />
+    Vue.directive('t', {
+      bind() {
+        directive(...arguments);
+      },
+      update() {
+        directive(...arguments);
+      },
+    });
+
+    // Basic (but you might want the directive above): <t k="some.key" />
+    // With interpolation: <t k="some.key" count="1" :foo="bar" />
+    Vue.component('t', {
+      inheritAttrs: false,
+      props:        {
+        k: {
+          type:     String,
+          required: true,
+        },
+        raw: {
+          type:    Boolean,
+          default: false,
+        },
+        tag: {
+          type:    [String, Object],
+          default: 'span'
+        },
+        escapehtml: {
+          type:    Boolean,
+          default: true,
+        }
+      },
+      setup(props, ctx) {
+        const msg = ref('');
+        const store = useStore();
+
+        // Update msg whenever k, $attrs, raw, or escapehtml changes
+        watchEffect(() => {
+          msg.value = stringFor(store, props.k, ctx.attrs, props.raw, props.escapehtml);
+        });
+
+        return { msg };
+      },
+      render() {
+        if (this.raw) {
+          return h(
+            this.tag,
+            { domProps: { innerHTML: this.msg } }
+          );
+        } else {
+          return h(
+            this.tag,
+            [this.msg]
+          );
+        }
+      }
+    });
+  }
+};
+
+export default i18n;
+
+// This is being done for backwards compatibility with our extensions that have written tests and didn't properly make use of Vue.use() when importing and mocking translations
+// Example failing test https://github.com/rancher/dashboard/actions/runs/8927503474/job/24521022320?pr=10923
+const isThisFileBeingExecutedInATest = process.env.NODE_ENV === 'test';
+
+if (isThisFileBeingExecutedInATest) {
+  // Go take a look at our jest.setup.js to see how we make use of Vue.use(i18n, ...)
+  console.warn('The implicit addition of i18n options has been deprecated in Rancher Shell and will be removed in a future version. Make sure to invoke `Vue.use(i18n)` to maintain compatibility.');
+  Vue.use(i18n);
+}

package/plugins/int-number.js

@@ -1,22 +1,8 @@
 import Vue from 'vue';
+import intNumberDirective from '@shell/directives/int-number';
 
-export default Vue.directive('intNumber', {
-  inserted(el) {
-    el.addEventListener('keypress', (e) => {
-      e = e || window.event;
-      const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
-      const inputChar = String.fromCharCode(charcode);
-
-      // Allow digits, minus sign at the beginning, and Ctrl key combinations
-      const re = /^-?\d*$/;
-
-      if (!re.test(inputChar) && charcode > 9 && !e.ctrlKey) {
-        if (e.preventDefault) {
-          e.preventDefault();
-        } else {
-          e.returnValue = false;
-        }
-      }
-    });
-  }
-});
+export default intNumberDirective;
+/* eslint-disable-next-line no-console */
+console.warn(`Importing intNumberDirective from plugins has been deprecated, use shell/directives/int-number.js instead.
+Make sure to invoke it using Vue.directive('intNumber', intNumberDirective) to maintain compatibility.`);
+Vue.directive('intNumber', intNumberDirective);

package/plugins/plugin.js

@@ -32,7 +32,7 @@ export default async function(context) {
     // Fetch list of installed plugins from endpoint
     try {
       const res = await context.store.dispatch('management/request', {
-        url:                  `${ UI_PLUGIN_BASE_URL }/index.json`,
+        url:                  `${ UI_PLUGIN_BASE_URL }`,
         method:               'GET',
         headers:              { accept: 'application/json' },
         redirectUnauthorized: false,
@@ -68,10 +68,10 @@ export default async function(context) {
       const res = pluginLoads[name];
 
       if (res?.status === 'rejected') {
-        console.error(`Failed to load plugin: ${ name }`); // eslint-disable-line no-console
+        console.error(`Failed to load plugin: ${ name }. `, res.reason || 'Unknown reason'); // eslint-disable-line no-console
 
         // Record error in the uiplugins store, so that we can show this to the user
-        context.store.dispatch('uiplugins/setError', { name, error: 'plugins.error.load' });
+        context.store.dispatch('uiplugins/setError', { name, error: 'plugins.error.load' }); // i18n-uses plugins.error.load
       }
     });
   }

package/plugins/positive-int-number.js

@@ -1,19 +1,8 @@
 import Vue from 'vue';
+import positiveIntNumberDirective from '@shell/directives/positive-int-number';
 
-export default Vue.directive('positiveIntNumber', {
-  inserted(el) {
-    el.addEventListener('keypress', (e) => {
-      e = e || window.event;
-      const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
-      const re = /^\d+$/; // Use regex to match positive numbers
-
-      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
-        if (e.preventDefault) {
-          e.preventDefault();
-        } else {
-          e.returnValue = false;
-        }
-      }
-    });
-  }
-});
+export default positiveIntNumberDirective;
+/* eslint-disable-next-line no-console */
+console.warn(`Importing positiveIntNumberDirective from plugins has been deprecated, use shell/directives/positive-int-number.js instead.
+Make sure to invoke it using Vue.directive('positiveIntNumber', positiveIntNumberDirective) to maintain compatibility.`);
+Vue.directive('positiveIntNumber', positiveIntNumberDirective);