[ARCH] Implement VueX State Management

.github/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## ⚡️ 1.8.6 - Implementation of VueX [PR: #271](https://github.com/Lissy93/dashy/pull/271)
+- New state management pattern, which should lead to a more organized code base long term, and will also make building out the new UI editor significantly easier to do in a clean and reliable way
+
 ## 💄 1.8.5 - Lots of Requested UI Improvements [PR #261](https://github.com/Lissy93/dashy/pull/261)
 - Adds an option for landing URL in workspace, Re: #255
 - Switches to a new API for generative icons, Re: #163

.github/pr-badge.yml

@@ -1,5 +1,5 @@
-# Config file for pull-request-badge. See: https://pullrequestbadge.com/
-# Enables badges to be inserted into the PR description, based on certain conditions
+# Config file for pull-request-badge. See: https://pullrequestbadge.com/ by @stefanbuck
+# Dynamically inserts status badges into PR description, based on certain conditions
 
 # Checks if the required sections are missing
 - label: "⚠️Missing"
@@ -23,21 +23,43 @@
   color: "#f25265"
   when: "$labels.length == 0"
 
-# Show note when in draft mode
+# Show note when task list has unfinished items
+- label: "⚠️Notice"
+  message: "Unchecked Tasks"
+  when: "$payload.pull_request.body.includes('- [ ] ')"
+  color: "#f25265"
+
+# Show badge indicating PR status
 - label: "Status"
-  message: "Draft"
+  message: "✏️ Draft"
   when: "$isDraft"
   color: "#ffa933"
+- label: "Status"
+  message: "🧱 Work in Progress"
+  when: "$payload.pull_request.title.includes('WIP')"
+  color: "#29e3f4"
+- label: "Status"
+  message: "✅ Ready"
+  color: "#3ef963"
+  when: "$labels.includes('🔀 Ready for Merge')"
 
 # Add size label based on very large or tiny PRs
+- label: "PR Size"
+  message: "Extra Large"
+  color: "#f9833e"
+  when: "$additions > 1000"
 - label: "PR Size"
   message: "Large"
-  color: "#f79c47"
-  when: "$additions > 600"
+  color: "#f4b546"
+  when: "$additions > 500 && $additions < 1000"
+- label: "PR Size"
+  message: "Medium"
+  color: "#f3ff59"
+  when: "$additions > 10 && $additions < 500"
 - label: "PR Size"
   message: "Quick"
   color: "#3eef8b"
-  when: "$additions < 5"
+  when: "$additions < 10"
 
 # Show PR number, to destination and from destination
 - label: "#$prNumber"
@@ -57,7 +79,7 @@
   when: "$payload.pull_request.author_association !== 'OWNER'"
   url: "https://github.com/$payload.pull_request.user.login"
 
-# Show a badge indicating the PR category
+# Show a badge indicating the PR category, based on tag
 - label: "Type"
   message: "✨ Feature"
   color: "#39b0fd"
@@ -90,3 +112,34 @@
   message: "🌟 Showcase Addition"
   color: "#39b0fd"
   when: "$labels.includes('💯 Showcase')"
+- label: "Type"
+  message: "🏗️ Architecture"
+  color: "#39b0fd"
+  when: "$labels.includes('🏗️ Architectural Changes')"
+- label: "Type"
+  message: "🤖 Auto Submission"
+  color: "#39b0fd"
+  when: "$labels.includes('🤖 Auto')"
+- label: "Type"
+  message: "🌐 Language Update"
+  color: "#39b0fd"
+  when: "$labels.includes('🌐 Language')"
+
+# Show warning, when certain tags are applied
+- label: "Warning"
+  message: "⛔ Do Not Merge"
+  color: "#f25265"
+  when: "$labels.includes('⛔ Don't Merge')"
+- label: "Warning"
+  message: "🚫 Merge Conflicts"
+  color: "#f25265"
+  when: "$labels.includes('🚫 Merge Conflicts')"
+- label: "Warning"
+  message: "🕸️ Inactive"
+  color: "#f25265"
+  when: "$labels.includes('🕸️ Inactive')"
+- label: "Warning"
+  message: "💀 Spam"
+  color: "#f25265"
+  when: "$labels.includes('💀 Spam')"
+

.github/pr-branch-labeler.yml

@@ -1,10 +1,11 @@
 # PR labels and the branch patterns they should be auto-assigned to
-
-🦋 Bug Fix: ['FIX/*', 'HOT-FIX/*', 'BUG-FIX/*']
-✨ New Feature: ['FEATURE/*']
+✨ New Feature: ['FEATURE/*', 'FEAT/*']
 🚚 Refactor: ['IMPROVMENTS/*', 'REFACTOR/*']
-💯 Showcase: ['SHOWCASE/*']
-💄 Stylistic Changes: ['STYLES/*', 'THEME/*']
-🛠️ Build Changes: ['ARCH/*', 'ARCHITECTURE/*', 'DOCKER/*', 'BUILD/*']
+🦋 Bug Fix: ['FIX/*', 'HOT-FIX/*', 'BUG-FIX/*']
+💯 Showcase: ['SHOWCASE/*', 'SHOWCASE_SUBMISSION/*']
+💄 Stylistic Changes: ['STYLES/*', 'THEME/*', 'UI/*']
+🏗️ Architectural Changes: ['ARCH/*', 'ARCHITECTURE/*']
+🛠️ Build Changes: ['DOCKER/*', 'BUILD/*', 'CI/*', 'ACTIONS/*']
+🌐 Language: ['LANG/*', 'INTERNATIONALIZATION/*', 'I18N/*', 'TEXT-UPDATE/*']
 🤖 Auto: ['AUTO/*', 'BOT/*', 'snyk-upgrade-*', 'snyk-fix-*']
 ⛔ Don't Merge: ['WEBSITE/*', 'EXPERIMENT/*', 'DEPLOY/*', 'deploy_*', 'gh-pages', 'dev-demo']

.github/workflows/docs-link-checker.yml

@@ -4,7 +4,7 @@ on:
   repository_dispatch:
   workflow_dispatch:
   schedule:
-    - cron: '0 1 * * 0' # At 01:00 on Sunday.
+    - cron: '0 1 1 * *' # Run monthly
 jobs:
   link-checker:
     runs-on: ubuntu-latest
@@ -14,7 +14,7 @@ jobs:
       - name: Check for Broken Links
         uses: lycheeverse/[email protected]
         with:
-          args: --verbose --no-progress **/*.md **/*.html
+          args: --verbose -a 200,302,304,429 --no-progress **/*.md **/*.html
         env:
           GITHUB_TOKEN: ${{secrets.BOT_GITHUB_TOKEN}}
           LYCHEE_OUT: .github/broken-link-report.md

.github/workflows/manage-pending-labels.yml

@@ -19,7 +19,7 @@ jobs:
 
   add-awaiting-author:
    runs-on: ubuntu-latest
-   if: ${{ github.event.comment.author_association != 'COLLABORATOR' && github.event.comment.author_association != 'OWNER' }}
+   if: ${{ !github.event.issue.pull_request && github.event.comment.author_association != 'COLLABORATOR' && github.event.comment.author_association != 'OWNER' }}
    steps:
    - name: Add Awaiting Author labels when Updated
      uses: actions-cool/issues-helper@v2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.8.5",
+  "version": "1.8.6",
   "license": "MIT",
   "main": "server",
   "scripts": {
@@ -39,7 +39,8 @@
     "vue-router": "^3.0.3",
     "vue-select": "^3.12.1",
     "vue-swatches": "^2.1.1",
-    "vue-toasted": "^1.1.28"
+    "vue-toasted": "^1.1.28",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@architect/sandbox": "^3.7.4",

src/App.vue

@@ -11,39 +11,26 @@
 import Header from '@/components/PageStrcture/Header.vue';
 import Footer from '@/components/PageStrcture/Footer.vue';
 import LoadingScreen from '@/components/PageStrcture/LoadingScreen.vue';
-import { componentVisibility } from '@/utils/ConfigHelpers';
-import ConfigAccumulator from '@/utils/ConfigAccumalator';
 import { welcomeMsg } from '@/utils/CoolConsole';
 import ErrorHandler from '@/utils/ErrorHandler';
+import Keys from '@/utils/StoreMutations';
 import {
   localStorageKeys,
   splashScreenTime,
   visibleComponents as defaultVisibleComponents,
   language as defaultLanguage,
 } from '@/utils/defaults';
 
-const Accumulator = new ConfigAccumulator();
-const config = Accumulator.config();
-const visibleComponents = componentVisibility(config.appConfig) || defaultVisibleComponents;
-
 export default {
   name: 'app',
   components: {
     Header,
     Footer,
     LoadingScreen,
   },
-  provide: {
-    config,
-    visibleComponents,
-  },
   data() {
     return {
       isLoading: true, // Set to false after mount complete
-      showFooter: visibleComponents.footer,
-      appConfig: Accumulator.appConfig(),
-      pageInfo: Accumulator.pageInfo(),
-      visibleComponents,
     };
   },
   computed: {
@@ -55,6 +42,24 @@ export default {
     shouldShowSplash() {
       return (this.visibleComponents || defaultVisibleComponents).splashScreen;
     },
+    config() {
+      return this.$store.state.config;
+    },
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+    pageInfo() {
+      return this.$store.getters.pageInfo;
+    },
+    sections() {
+      return this.$store.getters.pageInfo;
+    },
+    visibleComponents() {
+      return this.$store.getters.visibleComponents;
+    },
+  },
+  created() {
+    this.$store.dispatch('initializeConfig');
   },
   methods: {
     /* Injects the users custom CSS as a style tag */
@@ -103,6 +108,7 @@ export default {
     /* Fetch or detect users language, then apply it */
     applyLanguage() {
       const language = this.getLanguage();
+      this.$store.commit(Keys.SET_LANGUAGE, language);
       this.$i18n.locale = language;
       document.getElementsByTagName('html')[0].setAttribute('lang', language);
     },

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 || (appConfig && appConfig.disableUpdateChecks)) {
+    if (!this.appVersion || (this.appConfig && this.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.config.appConfig) {
-        if (this.config.appConfig.allowConfigEdit === false) {
-          this.allowRebuild = false;
-        }
-      }
+    if (this.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() {
-    return {
-      menuEnabled: !this.isMenuDisabled(), // Specifies if the context menu should be used
-    };
+  computed: {
+    appConfig() {
+      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.config.appConfig.disableContextMenu;
-      }
-      return false;
+      return !!this.appConfig.disableContextMenu;
     },
   },
 };

src/components/LinkItems/IframeModal.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import Keys from '@/utils/StoreMutations';
+
 export default {
   name: 'IframeModal',
   props: {
@@ -21,13 +23,13 @@ export default {
     show(url) {
       this.url = url;
       this.$modal.show(this.name);
-      this.$emit('modalChanged', true);
+      this.$store.commit(Keys.SET_MODAL_OPEN, true);
     },
     hide() {
       this.$modal.hide(this.name);
     },
     modalClosed() {
-      this.$emit('modalChanged', false);
+      this.$store.commit(Keys.SET_MODAL_OPEN, 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);
       }