Extracting fetchInitialSettings and placing it in a routerGuard since…

… it needs to be loaded on all pages.

shell/config/router/guards.js

@@ -0,0 +1,15 @@
+import { fetchInitialSettings } from '@shell/utils/settings';
+
+/**
+ * All pages need access to the initial settings to get things like the favicon and color theme.
+ * This loads those settings for all pages so we can remove it from all other locations.
+ */
+export function loadInitialSettings(store) {
+  return async(to, from, next) => {
+    try {
+      await fetchInitialSettings(store);
+    } catch (ex) {}
+
+    next();
+  };
+}

shell/config/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 import Routes from '@shell/config/router/routes';
+import { loadInitialSettings } from '@shell/config/router/guards';
 
 Vue.use(Router);
 
@@ -12,9 +13,11 @@ export const routerOptions = {
   fallback: false
 };
 
-export function extendRouter(config) {
+export function extendRouter(config, store) {
   const base = (config._app && config._app.basePath) || routerOptions.base;
   const router = new Router({ ...routerOptions, base });
 
+  router.beforeEach(loadInitialSettings(store));
+
   return router;
 }

shell/initialize/app-extended.js

@@ -15,9 +15,8 @@ import { installInjectedPlugins } from 'initialize/install-plugins.js';
  */
 async function extendApp(vueApp) {
   const config = { rancherEnv: process.env.rancherEnv, dashboardVersion: process.env.version };
-  const router = extendRouter(config);
-
   const store = extendStore();
+  const router = extendRouter(config, store);
 
   // Add this.$router into store actions/mutations
   store.$router = router;

shell/middleware/authenticated.js

@@ -12,7 +12,6 @@ import {
   validateResource, setProduct, isLoggedIn, notLoggedIn, noAuth, tryInitialSetup, findMe
 } from '@shell/utils/auth';
 import { getClusterFromRoute, getProductFromRoute, getPackageFromRoute } from '@shell/utils/router';
-import { fetchInitialSettings } from '@shell/utils/settings';
 
 let beforeEachSetup = false;
 
@@ -24,9 +23,6 @@ export default async function({
   let firstLogin = null;
 
   try {
-    // Load settings, which will either be just the public ones if not logged in, or all if you are
-    await fetchInitialSettings(store);
-
     const res = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FIRST_LOGIN);
     const plSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
 

shell/mixins/brand.js

@@ -3,7 +3,6 @@ import { CATALOG, MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import { createCssVars } from '@shell/utils/color';
 import { setTitle } from '@shell/config/private-label';
-import { fetchInitialSettings } from '@shell/utils/settings';
 import { setFavIcon, haveSetFavIcon } from '@shell/utils/favicon';
 
 const cspAdaptorApp = ['rancher-csp-adapter', 'rancher-csp-billing-adapter'];
@@ -23,8 +22,6 @@ export default {
 
     // Ensure we read the settings even when we are not authenticated
     try {
-      await fetchInitialSettings(this.$store);
-
       // The favicon is implicitly dependent on the initial settings having already been fetched
       if (!haveSetFavIcon()) {
         setFavIcon(this.$store);

shell/pages/auth/login.vue

@@ -27,7 +27,6 @@ import {
   setVendor
 } from '@shell/config/private-label';
 import loadPlugins from '@shell/plugins/plugin';
-import { fetchInitialSettings } from '@shell/utils/settings';
 import Loading from '@shell/components/Loading';
 
 export default {
@@ -147,8 +146,6 @@ export default {
       // For newer versions this will return all settings if you are somehow logged in,
       // and just the public ones if you aren't.
       try {
-        await fetchInitialSettings(this.$store);
-
         firstLoginSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FIRST_LOGIN);
         plSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
         brand = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);

shell/pages/auth/setup.vue

@@ -9,7 +9,7 @@ import { findBy } from '@shell/utils/array';
 import { Checkbox } from '@components/Form/Checkbox';
 import { getVendor, getProduct, setVendor } from '@shell/config/private-label';
 import { RadioGroup } from '@components/Form/Radio';
-import { fetchInitialSettings, setSetting } from '@shell/utils/settings';
+import { setSetting } from '@shell/utils/settings';
 import { SETTING } from '@shell/config/settings';
 import { isDevBuild } from '@shell/utils/version';
 import { exceptionToErrorsArray } from '@shell/utils/error';
@@ -74,11 +74,6 @@ export default {
   },
 
   async middleware({ store, redirect } ) {
-    try {
-      await fetchInitialSettings(store);
-    } catch (e) {
-    }
-
     const isFirstLogin = calcIsFirstLogin(store);
     const mustChangePassword = await calcMustChangePassword(store);
 
@@ -120,8 +115,6 @@ export default {
     let plSetting;
 
     try {
-      await fetchInitialSettings(this.$store);
-
       plSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
     } catch (e) {
       // Older versions used Norman API to get these