creating yaml file to store all helptext items, adding loader to webp…

…ack config, using yaml key to populate help text storage for simple quota example
assuntad23 · Sep 20, 2023 · 96f26f8 · 96f26f8
1 parent e14c3e6
commit 96f26f8
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/client/src/components/Masthead/QuotaMeter.vue b/client/src/components/Masthead/QuotaMeter.vue
@@ -46,8 +46,6 @@ export default {
         //
         return {
             usingString: this.l("Using"),
-            helpTextString:
-                "This is your Quota storage meter. It is an indication of how much storage you are using. To learn more about Quota Storage, check out this GTN tutorial.",
         };
     },
     computed: {
@@ -97,7 +95,7 @@ export default {
     },
     methods: {
         callHelpMode() {
-            this.helpModeTextStore.addHelpModeText(this.helpTextString);
+            this.helpModeTextStore.addHelpModeText("quotaMeterHelpString");
         },
     },
 };

diff --git a/client/src/stores/helpmode/helpModeTextStore.js b/client/src/stores/helpmode/helpModeTextStore.js
@@ -1,5 +1,7 @@
 import { defineStore } from "pinia";
 
+import config from './helpTextConfig.yml';
+
 export const useHelpModeTextStore = defineStore("helpModeText", {
     state: () => {
         return {
@@ -9,7 +11,7 @@ export const useHelpModeTextStore = defineStore("helpModeText", {
 
     actions: {
         addHelpModeText(text) {
-            this.helpmodetext = text;
+            this.helpmodetext = config[text];
         },
     },
 });
diff --git a/client/src/stores/helpmode/helpTextConfig.yml b/client/src/stores/helpmode/helpTextConfig.yml
@@ -0,0 +1,2 @@
+---
+quotaMeterHelpString: This is your Quota storage meter. It is an indication of how much storage you are using. To learn more about Quota Storage, check out this GTN tutorial.s
diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -105,6 +105,10 @@ module.exports = (env = {}, argv = {}) => {
                     test: /\.vue$/,
                     loader: "vue-loader",
                 },
+                {
+                    test: /\.ya?ml$/,
+                    loader: "yaml-loader",
+                },
                 {
                     test: /\.tsx?$/,
                     exclude: /node_modules/,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		---
		quotaMeterHelpString: This is your Quota storage meter. It is an indication of how much storage you are using. To learn more about Quota Storage, check out this GTN tutorial.s