From 6fd771e4c5e615243fafa987403f3e254de69f9f Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <assuntad23@gmail.com>
Date: Thu, 14 Sep 2023 13:52:32 -0400
Subject: [PATCH] adding MVP implementation in QuotaMeter

---
 client/src/components/Masthead/QuotaMeter.vue | 19 ++++++++++++++++---
 .../src/stores/helpmode/helpModeTextStore.js  | 14 ++------------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Masthead/QuotaMeter.vue b/client/src/components/Masthead/QuotaMeter.vue
index c2ddf28525c1..d844e8d3ce84 100644
--- a/client/src/components/Masthead/QuotaMeter.vue
+++ b/client/src/components/Masthead/QuotaMeter.vue
@@ -7,7 +7,9 @@
                 :disabled="isAnonymous"
                 class="ml-auto"
                 :title="title"
-                data-description="storage dashboard link">
+                data-description="storage dashboard link"
+                @mouseover="callHelpMode"
+                @focus="callHelpMode">
                 {{ usingString + " " + totalUsageString }}
             </b-link>
         </div>
@@ -18,7 +20,9 @@
                 :disabled="isAnonymous"
                 to="/storage"
                 :title="title"
-                data-description="storage dashboard link">
+                data-description="storage dashboard link"
+                @mouseover="callHelpMode"
+                @focus="callHelpMode">
                 <b-progress :max="100">
                     <b-progress-bar aria-label="Quota usage" :value="usage" :variant="variant" />
                 </b-progress>
@@ -29,22 +33,26 @@
 </template>
 
 <script>
-import { mapState } from "pinia";
+import { mapState, mapStores } from "pinia";
 import { bytesToString } from "utils/utils";
 
 import { useConfigStore } from "@/stores/configurationStore";
+import { useHelpModeTextStore } from "@/stores/helpmode/helpModeTextStore";
 import { useUserStore } from "@/stores/userStore";
 
 export default {
     name: "QuotaMeter",
     data() {
+        //
         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: {
         ...mapState(useConfigStore, ["config"]),
         ...mapState(useUserStore, ["currentUser", "isAnonymous"]),
+        ...mapStores(useHelpModeTextStore),
         hasQuota() {
             const quotasEnabled = this.config?.enable_quotas ?? false;
             const quotaLimited = this.currentUser?.quota !== "unlimited" ?? false;
@@ -86,6 +94,11 @@ export default {
             }
         },
     },
+    methods: {
+        callHelpMode() {
+            this.helpModeTextStore.addHelpModeText(this.helpTextString);
+        },
+    },
 };
 </script>
 
diff --git a/client/src/stores/helpmode/helpModeTextStore.js b/client/src/stores/helpmode/helpModeTextStore.js
index dab6088d2d96..332fa9421e2e 100644
--- a/client/src/stores/helpmode/helpModeTextStore.js
+++ b/client/src/stores/helpmode/helpModeTextStore.js
@@ -1,24 +1,14 @@
 import { defineStore } from "pinia";
 
-export const useHelpModeTextStore = defineStore("helpModeTextStore", {
+export const useHelpModeTextStore = defineStore("helpModeText", {
     state: () => {
         return {
-            helpmodetext: "",
+            helpmodetext: "Welcome to Galaxy Help Mode!",
         };
     },
 
     actions: {
         addHelpModeText(text) {
-            //only push up to 20 items, then start removing the oldest items
-            //do we need to keep track of more than one item? or is this an enhancement?
-            // if (!this.helpmodetext.includes(text)) {
-            //     if (this.helpmodetext.length < 20) {
-            //         this.helpmodetext.push(text);
-            //     } else {
-            //         this.helpmodetext.shift();
-            //         this.helpmodetext.push(text);
-            //     }
-            // }
             this.helpmodetext = text;
         },
     },