@rancher/shell 1.2.0 → 2.0.0

package/mixins/brand.js

@@ -1,10 +1,9 @@
 import { mapGetters } from 'vuex';
 import { CATALOG, MANAGEMENT } from '@shell/config/types';
-import { getVendor } from '@shell/config/private-label';
 import { SETTING } from '@shell/config/settings';
-import { findBy } from '@shell/utils/array';
 import { createCssVars } from '@shell/utils/color';
-import { _ALL_IF_AUTHED } from '@shell/plugins/dashboard-store/actions';
+import { setTitle } from '@shell/config/private-label';
+import { setFavIcon, haveSetFavIcon } from '@shell/utils/favicon';
 
 const cspAdaptorApp = ['rancher-csp-adapter', 'rancher-csp-billing-adapter'];
 
@@ -23,12 +22,10 @@ export default {
 
     // Ensure we read the settings even when we are not authenticated
     try {
-      this.globalSettings = await this.$store.dispatch('management/findAll', {
-        type: MANAGEMENT.SETTING,
-        opt:  {
-          load: _ALL_IF_AUTHED, url: `/v1/${ MANAGEMENT.SETTING }`, redirectUnauthorized: false
-        }
-      });
+      // The favicon is implicitly dependent on the initial settings having already been fetched
+      if (!haveSetFavIcon()) {
+        setFavIcon(this.$store);
+      }
     } catch (e) {}
 
     // Setting this up front will remove `computed` churn, and we only care that we've initialised them
@@ -36,34 +33,40 @@ export default {
   },
 
   data() {
-    return {
-      apps: null, globalSettings: null, haveAppsAndSettings: null
-    };
+    return { apps: null, haveAppsAndSettings: null };
   },
 
   computed: {
     ...mapGetters({ loggedIn: 'auth/loggedIn' }),
 
+    // added to fix https://github.com/rancher/dashboard/issues/10788
+    // because on logout the brand mixin is mounted, but then a management store reset happens
+    // since login view get loaded, another fetchInitialSettings get's done
+    // which in turn will populate again globalSettings
+    globalSettings() {
+      return this.$store.getters['management/all'](MANAGEMENT.SETTING);
+    },
+
     brand() {
-      const setting = findBy(this.globalSettings, 'id', SETTING.BRAND);
+      const setting = this.globalSettings?.find((gs) => gs.id === SETTING.BRAND);
 
       return setting?.value;
     },
 
     color() {
-      const setting = findBy(this.globalSettings, 'id', SETTING.PRIMARY_COLOR);
+      const setting = this.globalSettings?.find((gs) => gs.id === SETTING.PRIMARY_COLOR);
 
       return setting?.value;
     },
 
     linkColor() {
-      const setting = findBy(this.globalSettings, 'id', SETTING.LINK_COLOR);
+      const setting = this.globalSettings?.find((gs) => gs.id === SETTING.LINK_COLOR);
 
       return setting?.value;
     },
 
     theme() {
-      const setting = findBy(this.globalSettings, 'id', SETTING.THEME);
+      const setting = this.globalSettings?.find((gs) => gs.id === SETTING.THEME);
 
       // This handles cases where the settings update after the page loads (like on log out)
       if (setting?.value) {
@@ -95,54 +98,78 @@ export default {
   },
 
   watch: {
-    color(neu) {
-      if (neu) {
-        this.setCustomColor(neu);
-      } else {
-        this.removeCustomColor();
-      }
+    color: {
+      handler(neu) {
+        if (neu) {
+          this.setCustomColor(neu);
+        } else {
+          this.removeCustomColor();
+        }
+      },
+      immediate: true
     },
-    linkColor(neu) {
-      if (neu) {
-        this.setCustomColor(neu, 'link');
-      } else {
-        this.removeCustomColor('link');
-      }
+    linkColor: {
+      handler(neu) {
+        if (neu) {
+          this.setCustomColor(neu, 'link');
+        } else {
+          this.removeCustomColor('link');
+        }
+      },
+      immediate: true
     },
-    theme() {
-      if (this.color) {
-        this.setCustomColor(this.color);
-      }
-      if (this.linkColor) {
-        this.setCustomColor(this.linkColor, 'link');
-      }
+    theme: {
+      handler() {
+        if (this.color) {
+          this.setCustomColor(this.color);
+        }
+        if (this.linkColor) {
+          this.setCustomColor(this.linkColor, 'link');
+        }
+        this.setBodyClass();
+      },
+      immediate: true
     },
 
-    cspAdapter(neu) {
-      if (!this.canCalcCspAdapter) {
-        return;
-      }
-
-      // The brand setting will only get updated if...
-      if (neu && !this.brand) {
-        // 1) There should be a brand... but there's no brand setting
-        const brandSetting = findBy(this.globalSettings, 'id', SETTING.BRAND);
-
-        if (brandSetting) {
-          brandSetting.value = 'csp';
-          brandSetting.save();
-        } else {
-          const schema = this.$store.getters['management/schemaFor'](MANAGEMENT.SETTING);
-          const url = schema?.linkFor('collection');
+    cspAdapter: {
+      handler(neu) {
+        if (!this.canCalcCspAdapter) {
+          return;
+        }
 
-          if (url) {
-            this.$store.dispatch('management/create', {
-              type: MANAGEMENT.SETTING, metadata: { name: SETTING.BRAND }, value: 'csp', default: ''
-            }).then((setting) => setting.save());
+        // The brand setting will only get updated if...
+        if (neu && !this.brand) {
+          // 1) There should be a brand... but there's no brand setting
+          const brandSetting = this.globalSettings?.find((gs) => gs.id === SETTING.BRAND);
+
+          if (brandSetting) {
+            brandSetting.value = 'csp';
+            brandSetting.save();
+          } else {
+            const schema = this.$store.getters['management/schemaFor'](MANAGEMENT.SETTING);
+            const url = schema?.linkFor('collection');
+
+            if (url) {
+              this.$store.dispatch('management/create', {
+                type: MANAGEMENT.SETTING, metadata: { name: SETTING.BRAND }, value: 'csp', default: ''
+              }).then((setting) => setting.save());
+            }
           }
         }
-      }
+      },
+      immediate: true
+    },
+    brand: {
+      handler() {
+        this.setBodyClass();
+      },
+      immediate: true
     }
+
+  },
+  mounted() {
+    this.setBodyClass();
+    setTitle();
   },
   methods: {
     setCustomColor(color, name = 'primary') {
@@ -159,47 +186,26 @@ export default {
       for (const prop in vars) {
         document.body.style.removeProperty(prop);
       }
-    }
-  },
-  head() {
-    let cssClass = `overflow-hidden dashboard-body`;
-    const out = {
-      bodyAttrs: { class: `theme-${ this.theme } ${ cssClass }` },
-      title:     getVendor(),
-    };
-
-    if (getVendor() === 'Harvester') {
-      const ico = require(`~shell/assets/images/pl/harvester.png`);
-
-      out.title = 'Harvester';
-      out.link = [{
-        hid:  'icon',
-        rel:  'icon',
-        type: 'image/x-icon',
-        href: ico
-      }];
-    }
-
-    let brandMeta;
-
-    if ( this.brand ) {
-      try {
-        brandMeta = require(`~shell/assets/brand/${ this.brand }/metadata.json`);
-      } catch {
-        return out;
+    },
+    setBodyClass() {
+      const body = document.getElementsByTagName('body')[0];
+      const cssClass = `overflow-hidden dashboard-body`;
+      let bodyClass = `theme-${ this.theme } ${ cssClass }`;
+
+      if ( this.brand ) {
+        try {
+          const brandMeta = require(`~shell/assets/brand/${ this.brand }/metadata.json`);
+
+          if (brandMeta?.hasStylesheet === 'true') {
+            bodyClass = `${ cssClass } ${ this.brand } theme-${ this.theme }`;
+          } else {
+            bodyClass = `theme-${ this.theme } overflow-hidden dashboard-body`;
+            this.$store.dispatch('prefs/setBrandStyle', this.theme === 'dark');
+          }
+        } catch {}
       }
+      body.className = bodyClass;
     }
-
-    if (brandMeta?.hasStylesheet === 'true') {
-      cssClass = `${ cssClass } ${ this.brand } theme-${ this.theme }`;
-    } else {
-      cssClass = `theme-${ this.theme } overflow-hidden dashboard-body`;
-      this.$store.dispatch('prefs/setBrandStyle', this.theme === 'dark');
-    }
-
-    out.bodyAttrs.class = cssClass;
-
-    return out;
-  },
+  }
 
 };

package/mixins/chart.js

@@ -2,7 +2,7 @@
 import { mapGetters } from 'vuex';
 
 import {
-  REPO_TYPE, REPO, CHART, VERSION, NAMESPACE, NAME, DESCRIPTION as DESCRIPTION_QUERY, DEPRECATED, HIDDEN, _FLAGGED, _CREATE, _EDIT
+  REPO_TYPE, REPO, CHART, VERSION, NAMESPACE, NAME, DESCRIPTION as DESCRIPTION_QUERY, DEPRECATED as DEPRECATED_QUERY, HIDDEN, _FLAGGED, _CREATE, _EDIT
 } from '@shell/config/query-params';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { SHOW_PRE_RELEASE, mapPref } from '@shell/store/prefs';
@@ -21,12 +21,12 @@ import { merge } from 'lodash';
 export default {
   data() {
     return {
-      version:     null,
-      versionInfo: null,
-      existing:    null,
+      version:          null,
+      versionInfo:      null,
+      versionInfoError: null,
+      existing:         null,
 
       ignoreWarning: false,
-
     };
   },
 
@@ -38,10 +38,11 @@ export default {
     chart() {
       if ( this.repo && this.query.chartName ) {
         return this.$store.getters['catalog/chart']({
-          repoType:      this.query.repoType,
-          repoName:      this.query.repoName,
-          chartName:     this.query.chartName,
-          includeHidden: true,
+          repoType:       this.query.repoType,
+          repoName:       this.query.repoName,
+          chartName:      this.query.chartName,
+          includeHidden:  true,
+          showDeprecated: this.showDeprecated
         });
       }
 
@@ -136,16 +137,18 @@ export default {
         versionName:  query[VERSION],
         appNamespace: query[NAMESPACE] || '',
         appName:      query[NAME] || '',
-        description:  query[DESCRIPTION_QUERY]
+        description:  query[DESCRIPTION_QUERY],
+        hidden:       query[HIDDEN],
+        deprecated:   query[DEPRECATED_QUERY]
       };
     },
 
     showDeprecated() {
-      return this.$route.query[DEPRECATED] === _FLAGGED;
+      return this.query.deprecated === 'true' || this.query.deprecated === _FLAGGED;
     },
 
     showHidden() {
-      return this.$route.query[HIDDEN] === _FLAGGED;
+      return this.query.hidden === _FLAGGED;
     },
 
     // If the user is installing the app for the first time,
@@ -190,6 +193,13 @@ export default {
         warnings.unshift(this.t('gatekeeperIndex.deprecated', {}, true));
       }
 
+      if (this.existing && this.existing.upgradeAvailable === false) {
+        warnings.unshift(this.t('catalog.install.warning.managed', {
+          name:    this.existing.name,
+          version: this.chart ? this.query.versionName : null
+        }, true));
+      }
+
       return warnings;
     },
 
@@ -249,7 +259,9 @@ export default {
 
   methods: {
     async fetchChart() {
-      await this.$store.dispatch('catalog/load', { force: true, reset: true }); // not the problem
+      this.versionInfoError = null;
+
+      await this.$store.dispatch('catalog/load'); // not the problem
 
       if ( this.query.appNamespace && this.query.appName ) {
         // First check the URL query for an app name and namespace.
@@ -350,6 +362,8 @@ export default {
         // - values: All Helm chart values for the currently installed
         //   app.
       } catch (e) {
+        this.versionInfoError = e;
+
         console.error('Unable to fetch VersionInfo: ', e); // eslint-disable-line no-console
       }
     }, // End of fetchChart

package/mixins/create-edit-view/index.js

@@ -1,9 +1,9 @@
 import { _EDIT, _YAML } from '@shell/config/query-params';
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 import impl from './impl';
 
-export default Vue.extend({
+export default defineComponent({
   ...impl,
 
   props: {

package/mixins/fetch.client.js

@@ -1,8 +1,15 @@
-import Vue from 'vue';
-import { hasFetch, normalizeError, addLifecycleHook } from '../utils/nuxt';
+import { normalizeError } from '@shell/utils/error';
 
-const isSsrHydration = (vm) => vm.$vnode && vm.$vnode.elm && vm.$vnode.elm.dataset && vm.$vnode.elm.dataset.fetchKey;
-const nuxtState = window.__NUXT__;
+const hasFetch = (component) => component.$options && typeof component.$options.fetch === 'function' && !component.$options.fetch.length;
+
+export const addLifecycleHook = (vm, hook, fn) => {
+  if (!vm.$options[hook]) {
+    vm.$options[hook] = [];
+  }
+  if (!vm.$options[hook].includes(fn)) {
+    vm.$options[hook].push(fn);
+  }
+};
 
 export default {
   beforeCreate() {
@@ -12,15 +19,24 @@ export default {
 
     this._fetchDelay = typeof this.$options.fetchDelay === 'number' ? this.$options.fetchDelay : 200;
 
-    Vue.util.defineReactive(this, '$fetchState', {
-      pending:   false,
-      error:     null,
-      timestamp: Date.now()
-    });
-
     this.$fetch = $fetch.bind(this);
-    addLifecycleHook(this, 'created', created);
     addLifecycleHook(this, 'beforeMount', beforeMount);
+  },
+
+  data() {
+    return {
+      state: {
+        pending:   false,
+        error:     null,
+        timestamp: Date.now()
+      }
+    };
+  },
+
+  computed: {
+    $fetchState() {
+      return this.state;
+    }
   }
 };
 
@@ -30,44 +46,24 @@ function beforeMount() {
   }
 }
 
-function created() {
-  if (!isSsrHydration(this)) {
-    return;
-  }
-
-  // Hydrate component
-  this._hydrated = true;
-  this._fetchKey = this.$vnode.elm.dataset.fetchKey;
-  const data = nuxtState.fetch[this._fetchKey];
-
-  // If fetch error
-  if (data && data._error) {
-    this.$fetchState.error = data._error;
-
-    return;
-  }
-
-  // Merge data
-  for (const key in data) {
-    Vue.set(this.$data, key, data[key]);
-  }
-}
+function $fetch(cached = true) {
+  if (cached) {
+    if (!this._fetchPromise) {
+      this._fetchPromise = $_fetch.call(this)
+        .then(() => {
+          delete this._fetchPromise;
+        });
+    }
 
-function $fetch() {
-  if (!this._fetchPromise) {
-    this._fetchPromise = $_fetch.call(this)
-      .then(() => {
-        delete this._fetchPromise;
-      });
+    return this._fetchPromise;
   }
 
-  return this._fetchPromise;
+  return $_fetch.call(this);
 }
 
 async function $_fetch() { // eslint-disable-line camelcase
-  this.$nuxt.nbFetching++;
-  this.$fetchState.pending = true;
-  this.$fetchState.error = null;
+  this.state.pending = true;
+  this.state.error = null;
   this._hydrated = false;
   let error = null;
   const startTime = Date.now();
@@ -87,9 +83,7 @@ async function $_fetch() { // eslint-disable-line camelcase
     await new Promise((resolve) => setTimeout(resolve, delayLeft));
   }
 
-  this.$fetchState.error = error;
-  this.$fetchState.pending = false;
-  this.$fetchState.timestamp = Date.now();
-
-  this.$nextTick(() => this.$nuxt.nbFetching--);
+  this.state.error = error;
+  this.state.pending = false;
+  this.state.timestamp = Date.now();
 }

package/mixins/labeled-form-element.ts

@@ -77,11 +77,21 @@ export default Vue.extend({
       type:    Boolean
     },
 
+    filterable: {
+      default: true,
+      type:    Boolean
+    },
+
     rules: {
       default:   () => [],
       type:      Array,
       // we only want functions in the rules array
       validator: (rules: any) => rules.every((rule: any) => ['function'].includes(typeof rule))
+    },
+
+    requireDirty: {
+      default: true,
+      type:    Boolean
     }
   },
 
@@ -111,7 +121,11 @@ export default Vue.extend({
     },
 
     isSearchable(): boolean {
-      const { searchable } = this;
+      const { searchable, canPaginate } = this as any; // This will be resolved when we migrate from mixin
+
+      if (canPaginate) {
+        return true;
+      }
       const options = ( this.options || [] );
 
       if (searchable || options.length >= 10) {
@@ -120,6 +134,17 @@ export default Vue.extend({
 
       return false;
     },
+
+    isFilterable(): boolean {
+      const { filterable, canPaginate } = this as any; // This will be resolved when we migrate from mixin
+
+      if (canPaginate) {
+        return false;
+      }
+
+      return filterable;
+    },
+
     validationMessage(): string | undefined {
       // we want to grab the required rule passed in if we can but if it's not there then we can just grab it from the formRulesGenerator
       const requiredRule = this.rules.find((rule: any) => rule?.name === 'required') as Function;
@@ -141,7 +166,7 @@ export default Vue.extend({
           ruleMessages.push(message);
         }
       }
-      if (ruleMessages.length > 0 && (this.blurred || this.focused)) {
+      if (ruleMessages.length > 0 && (this.blurred || this.focused || !this.requireDirty)) {
         return ruleMessages.join(', ');
       } else {
         return undefined;

package/mixins/page-actions.js

@@ -1,21 +1,23 @@
-const PAGE_ACTION = 'page-action';
 const STORE_PAGE_ACTIONS = 'pageActions';
 
 export default {
   created() {
     this.updatePageActions();
-    this.$nuxt.$on(PAGE_ACTION, (action) => {
+
+    const pageActionHandler = (action) => {
       if (this.handlePageAction) {
         this.handlePageAction(action);
       }
-    });
+    };
+
+    this.$store.commit('pageActionHandler', pageActionHandler);
   },
 
-  beforeDestroy() {
+  unmounted() {
     if (this.pageActions) {
       this.$store.commit(STORE_PAGE_ACTIONS, []);
     }
-    this.$nuxt.$off(PAGE_ACTION);
+    this.$store.commit('clearPageActionHandler');
   },
 
   methods: {