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

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");
         },
     },
 };

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];
         },
     },
 });

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

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/,