⚡ Remove all instances of inject, replace with VueX store

src/components/Configuration/AppVersion.vue

@@ -36,7 +36,11 @@ import ErrorHandler from '@/utils/ErrorHandler';
 
 export default {
   name: 'AppInfoModal',
-  inject: ['config'],
+  computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+  },
   data() {
     return {
       appVersion: process.env.VUE_APP_VERSION, // Current version, from package.json
@@ -50,8 +54,7 @@ export default {
     };
   },
   mounted() {
-    const appConfig = this.config.appConfig || {};
+    if (!this.appVersion || (this.appConfig && this.appConfig.disableUpdateChecks)) {
-    if (!this.appVersion || (appConfig && appConfig.disableUpdateChecks)) {
       // Either current version isn't found, or user disabled checks
       this.checksEnabled = false;
     } else {

src/components/Configuration/RebuildApp.vue

@@ -55,7 +55,11 @@ import { modalNames, serviceEndpoints } from '@/utils/defaults';
 
 export default {
   name: 'RebuildApp',
-  inject: ['config'],
+  computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+  },
   components: {
     Button,
     RebuildIcon,
@@ -112,12 +116,8 @@ export default {
     },
   },
   mounted() {
-    if (this.config) {
+    if (this.appConfig.allowConfigEdit === false) {
-      if (this.config.appConfig) {
+      this.allowRebuild = false;
-        if (this.config.appConfig.allowConfigEdit === false) {
-          this.allowRebuild = false;
-        }
-      }
     }
   },
 };

src/components/LinkItems/ContextMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="slide">
-    <div class="context-menu" v-if="show && menuEnabled"
+    <div class="context-menu" v-if="show && !isMenuDisabled()"
       :style="posX && posY ? `top:${posY}px;left:${posX}px;` : ''">
       <ul>
         <li @click="launch('sametab')">
@@ -33,7 +33,6 @@ import WorkspaceOpenIcon from '@/assets/interface-icons/open-workspace.svg';
 
 export default {
   name: 'ContextMenu',
-  inject: ['config'],
   components: {
     SameTabOpenIcon,
     NewTabOpenIcon,
@@ -45,10 +44,10 @@ export default {
     posY: Number, // The Y coordinate for positioning
     show: Boolean, // Should show or hide the menu
   },
-  data() {
+  computed: {
-    return {
+    appConfig() {
-      menuEnabled: !this.isMenuDisabled(), // Specifies if the context menu should be used
+      return this.$store.getters.appConfig;
-    };
+    },
   },
   methods: {
     /* Called on item click, emits an event up to Item */
@@ -58,10 +57,7 @@ export default {
     },
     /* Checks if the user as disabled context menu in config */
     isMenuDisabled() {
-      if (this.config && this.config.appConfig) {
+      return !!this.appConfig.disableContextMenu;
-        return !!this.config.appConfig.disableContextMenu;
-      }
-      return false;
     },
   },
 };

src/components/LinkItems/Item.vue

@@ -53,7 +53,6 @@ import { localStorageKeys, serviceEndpoints } from '@/utils/defaults';
 
 export default {
   name: 'Item',
-  inject: ['config'],
   props: {
     id: String, // The unique ID of a tile (e.g. 001)
     title: String, // The main text of tile, required
@@ -77,6 +76,11 @@ export default {
     statusCheckInterval: Number,
     statusCheckAllowInsecure: Boolean,
   },
+  computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+  },
   data() {
     return {
       contextMenuOpen: false,
@@ -110,7 +114,7 @@ export default {
         this.$emit('itemClicked');
       }
       // Update the most/ last used ledger, for smart-sorting
-      if (!this.config.appConfig.disableSmartSort) {
+      if (!this.appConfig.disableSmartSort) {
         this.incrementMostUsedCount(this.id);
         this.incrementLastUsedCount(this.id);
       }

src/components/LinkItems/ItemIcon.vue

@@ -30,7 +30,6 @@ import { asciiHash } from '@/utils/MiscHelpers';
 
 export default {
   name: 'Icon',
-  inject: ['config'],
   props: {
     icon: String, // Path to icon asset
     url: String, // Used for fetching the favicon
@@ -40,6 +39,10 @@ export default {
     BrokenImage,
   },
   computed: {
+    /* Get appConfig from store */
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
     /* Determines the type of icon */
     iconType: function iconType() {
       return this.determineImageType(this.icon);
@@ -96,7 +99,7 @@ export default {
         if (urlParts.length >= 2) return `${urlParts[0]}/${urlParts[1]}/${urlParts[2]}/${iconCdns.faviconName}`;
       } else if (fullUrl.includes('http')) { // Service is running publicly
         const host = this.getHostName(fullUrl);
-        const faviconApi = specificApi || this.config.appConfig.faviconApi || defaultFaviconApi;
+        const faviconApi = specificApi || this.appConfig.faviconApi || defaultFaviconApi;
         const endpoint = faviconApiEndpoints[faviconApi];
         return endpoint.replace('$URL', host);
       }
@@ -120,7 +123,7 @@ export default {
     /* or if user prefers local favicon, then return true */
     shouldUseDefaultFavicon(fullUrl) {
       const isLocalIP = /(127\.)|(192\.168\.)|(10\.)|(172\.1[6-9]\.)|(172\.2[0-9]\.)|(172\.3[0-1]\.)|(::1$)|([fF][cCdD])|(localhost)/;
-      return (isLocalIP.test(fullUrl) || this.config.appConfig.faviconApi === 'local');
+      return (isLocalIP.test(fullUrl) || this.appConfig.faviconApi === 'local');
     },
     /* Fetches the path of local images, from Docker container */
     getLocalImagePath(img) {

src/components/LinkItems/Section.vue

@@ -58,7 +58,6 @@ import IframeModal from '@/components/LinkItems/IframeModal.vue';
 
 export default {
   name: 'Section',
-  inject: ['config'],
   props: {
     groupId: String,
     title: String,
@@ -74,13 +73,16 @@ export default {
     IframeModal,
   },
   computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
     sortOrder() {
       return this.displayData.sortBy || defaultSortOrder;
     },
     /* If the sortBy attribute is specified, then return sorted data */
     sortedItems() {
       let { items } = this;
-      if (this.config.appConfig.disableSmartSort) return items;
+      if (this.appConfig.disableSmartSort) return items;
       if (this.sortOrder === 'alphabetical') {
         this.sortAlphabetically(items);
       } else if (this.sortOrder === 'reverse-alphabetical') {
@@ -128,12 +130,12 @@ export default {
     },
     /* Determines if user has enabled online status checks */
     shouldEnableStatusCheck(itemPreference) {
-      const globalPreference = this.config.appConfig.statusCheck || false;
+      const globalPreference = this.appConfig.statusCheck || false;
       return itemPreference !== undefined ? itemPreference : globalPreference;
     },
     /* Determine how often to re-fire status checks */
     getStatusCheckInterval() {
-      let interval = this.config.appConfig.statusCheckInterval;
+      let interval = this.appConfig.statusCheckInterval;
       if (!interval) return 0;
       if (interval > 60) interval = 60;
       if (interval < 1) interval = 0;

src/components/MinimalView/MinimalSearch.vue

@@ -35,7 +35,6 @@ import {
 
 export default {
   name: 'MinimalSearch',
-  inject: ['config'],
   props: {
     active: Boolean,
   },
@@ -47,10 +46,12 @@ export default {
     };
   },
   computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
     webSearchEnabled() {
-      const { appConfig } = this.config;
+      if (this.appConfig && this.appConfig.webSearch) {
-      if (appConfig && appConfig.webSearch) {
+        return !this.appConfig.webSearch.disableWebSearch;
-        return !appConfig.webSearch.disableWebSearch;
       }
       return true;
     },
@@ -117,8 +118,7 @@ export default {
     /* If web search enabled, then launch search results when enter is pressed */
     searchSubmitted() {
       // Get search preferences from appConfig
-      const { appConfig } = this.config;
+      const searchPrefs = this.appConfig.webSearch || {};
-      const searchPrefs = appConfig.webSearch || {};
       if (this.webSearchEnabled) { // Only proceed if user hasn't disabled web search
         const openingMethod = searchPrefs.openingMethod || defaultSearchOpeningMethod;
         // Get search engine, and make URL

src/components/MinimalView/MinimalSection.vue

@@ -37,7 +37,6 @@ import IframeModal from '@/components/LinkItems/IframeModal.vue';
 
 export default {
   name: 'ItemGroup',
-  inject: ['config'],
   props: {
     groupId: String,
     title: String,
@@ -50,6 +49,11 @@ export default {
     selected: Boolean,
     showAll: Boolean,
   },
+  computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+  },
   components: {
     Item,
     IframeModal,
@@ -70,11 +74,11 @@ export default {
       this.$emit('change-modal-visibility', changedTo);
     },
     shouldEnableStatusCheck(itemPreference) {
-      const globalPreference = this.config.appConfig.statusCheck || false;
+      const globalPreference = this.appConfig.statusCheck || false;
       return itemPreference !== undefined ? itemPreference : globalPreference;
     },
     getStatusCheckInterval() {
-      let interval = this.config.appConfig.statusCheckInterval;
+      let interval = this.appConfig.statusCheckInterval;
       if (!interval) return 0;
       if (interval > 60) interval = 60;
       if (interval < 1) interval = 0;

src/components/PageStrcture/Header.vue

@@ -1,5 +1,5 @@
 <template>
-    <header v-if="visible">
+    <header v-if="componentVisible">
       <PageTitle
         v-if="titleVisible"
         :title="pageInfo.title"
@@ -13,12 +13,10 @@
 <script>
 import PageTitle from '@/components/PageStrcture/PageTitle.vue';
 import Nav from '@/components/PageStrcture/Nav.vue';
-import { visibleComponents as defaultVisibleComponents } from '@/utils/defaults';
 import { shouldBeVisible } from '@/utils/MiscHelpers';
 
 export default {
   name: 'Header',
-  inject: ['visibleComponents'],
   components: {
     PageTitle,
     Nav,
@@ -26,16 +24,19 @@ export default {
   props: {
     pageInfo: Object,
   },
-  data() {
-    return {
-      titleVisible: (this.visibleComponents || defaultVisibleComponents).pageTitle,
-      navVisible: (this.visibleComponents || defaultVisibleComponents).navigation,
-    };
-  },
   computed: {
-    visible() {
+    componentVisible() {
       return shouldBeVisible(this.$route.name);
     },
+    visibleComponents() {
+      return this.$store.getters.visibleComponents;
+    },
+    titleVisible() {
+      return this.visibleComponents.pageTitle;
+    },
+    navVisible() {
+      return this.visibleComponents.navigation;
+    },
   },
 };
 </script>

src/components/Settings/LanguageSwitcher.vue

@@ -33,7 +33,6 @@ import { localStorageKeys, modalNames } from '@/utils/defaults';
 
 export default {
   name: 'LanguageSwitcher',
-  inject: ['config'],
   components: {
     Button,
     SaveConfigIcon,
@@ -45,6 +44,10 @@ export default {
     };
   },
   computed: {
+    /* Get appConfig from store */
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
     /* Return the array of language objects, plus a friends name */
     languageList: () => languages.map((lang) => {
       const newLang = lang;
@@ -85,7 +88,7 @@ export default {
     /* Gets the users current language from local storage */
     getCurrentLanguage() {
       const getLanguageFromIso = (iso) => languages.find((lang) => lang.code === iso);
-      const current = localStorage[localStorageKeys.LANGUAGE] || this.config.appConfig.language;
+      const current = localStorage[localStorageKeys.LANGUAGE] || this.appConfig.language;
       return getLanguageFromIso(current);
     },
   },

src/components/Settings/SearchBar.vue

@@ -35,7 +35,6 @@ import {
 
 export default {
   name: 'FilterTile',
-  inject: ['config'],
   props: {
     active: Boolean,
   },
@@ -48,7 +47,7 @@ export default {
   },
   computed: {
     searchPrefs() {
-      return this.config.appConfig.webSearch || {};
+      return this.$store.getters.webSearch || {};
     },
   },
   mounted() {

src/components/Settings/SettingsContainer.vue

@@ -69,7 +69,29 @@ export default {
     IconOpen,
     IconClose,
   },
-  inject: ['visibleComponents'],
+  computed: {
+    /**
+    * Determines which button should display, based on the user type
+    * 0 = Auth not configured, don't show anything
+    * 1 = Auth condifured, and user logged in, show logout button
+    * 2 = Auth configured, guest access enabled, and not logged in, show login
+    * Note that if auth is enabled, but not guest access, and user not logged in,
+    * then they will never be able to view the homepage, so no button needed
+    */
+    userState() {
+      return getUserState();
+    },
+    /* Object indicating which components should be hidden, based on user preferences */
+    visibleComponents() {
+      return this.$store.getters.visibleComponents;
+    },
+  },
+  data() {
+    return {
+      settingsVisible: this.getSettingsVisibility(),
+      searchVisible: (this.visibleComponents || defaultVisibleComponents).searchBar,
+    };
+  },
   methods: {
     userIsTypingSomething(something) {
       this.$emit('user-is-searchin', something);
@@ -104,25 +126,6 @@ export default {
         || (this.visibleComponents || defaultVisibleComponents).settings);
     },
   },
-  computed: {
-    /**
-    * Determines which button should display, based on the user type
-    * 0 = Auth not configured, don't show anything
-    * 1 = Auth condifured, and user logged in, show logout button
-    * 2 = Auth configured, guest access enabled, and not logged in, show login
-    * Note that if auth is enabled, but not guest access, and user not logged in,
-    * then they will never be able to view the homepage, so no button needed
-    */
-    userState() {
-      return getUserState();
-    },
-  },
-  data() {
-    return {
-      settingsVisible: this.getSettingsVisibility(),
-      searchVisible: (this.visibleComponents || defaultVisibleComponents).searchBar,
-    };
-  },
 };
 </script>
 

src/components/Workspace/SideBar.vue

@@ -36,7 +36,6 @@ import IconMinimalView from '@/assets/interface-icons/application-minimal.svg';
 
 export default {
   name: 'SideBar',
-  inject: ['config'],
   props: {
     sections: Array,
     initUrl: String,

src/components/Workspace/SideBarItem.vue

@@ -12,7 +12,6 @@ import Icon from '@/components/LinkItems/ItemIcon.vue';
 
 export default {
   name: 'SideBarItem',
-  inject: ['config'],
   props: {
     icon: String,
     title: String,

src/components/Workspace/SideBarSection.vue

@@ -19,7 +19,6 @@ import SideBarItem from '@/components/Workspace/SideBarItem.vue';
 
 export default {
   name: 'SideBarSection',
-  inject: ['config'],
   props: {
     items: Array,
   },

src/store.js

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import Keys from '@/utils/StoreMutations';
 import ConfigAccumulator from '@/utils/ConfigAccumalator';
+import { componentVisibility } from '@/utils/ConfigHelpers';
 
 Vue.use(Vuex);
 
@@ -25,6 +26,12 @@ const store = new Vuex.Store({
     sections(state) {
       return state.config.sections || [];
     },
+    webSearch(state, getters) {
+      return getters.appConfig.webSearch || {};
+    },
+    visibleComponents(state, getters) {
+      return componentVisibility(getters.appConfig);
+    },
   },
   mutations: {
     [UPDATE_CONFIG](state, config) {