From 96f26f88a9419ed8364cf34eb0fb384239a08700 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Wed, 20 Sep 2023 18:35:38 -0400
Subject: [PATCH] creating yaml file to store all helptext items, adding loader
 to webpack config, using yaml key to populate help text storage for simple
 quota example

---
 client/src/components/Masthead/QuotaMeter.vue   | 4 +---
 client/src/stores/helpmode/helpModeTextStore.js | 4 +++-
 client/src/stores/helpmode/helpTextConfig.yml   | 2 ++
 client/webpack.config.js                        | 4 ++++
 4 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 client/src/stores/helpmode/helpTextConfig.yml

diff --git a/client/src/components/Masthead/QuotaMeter.vue b/client/src/components/Masthead/QuotaMeter.vue
index 48eb9000c1d1..fd2851725c0d 100644
--- 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
index 332fa9421e2e..bcab6fbde29b 100644
--- 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
new file mode 100644
index 000000000000..e642a0096709
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/client/webpack.config.js b/client/webpack.config.js
index e68cd301aadf..c8a8b39e7d8b 100644
--- 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/,