Help mode sentry tracking

client/src/components/Masthead/HelpModeSwitch.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { useHelpModeStatusStore } from "@/stores/helpmode/helpModeStatusStore";
+
+const tooltip = "Enable/Disable Help Mode";
+
+const statusStore = useHelpModeStatusStore();
+
+const enabledStatus = computed({
+    get() {
+        return statusStore.helpmodestatus;
+    },
+    set(value: boolean) {
+        statusStore.setHelpModeStatus(value);
+    },
+});
+</script>
+
+<template>
+    <div>
+        <b-form-checkbox v-model="enabledStatus" class="no-highlight" switch :title="tooltip"> </b-form-checkbox>
+    </div>
+</template>

client/src/components/Masthead/Masthead.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { BNavbar, BNavbarBrand, BNavbarNav } from "bootstrap-vue";
+import { BNavbar, BNavbarBrand, BNavbarNav, BNavForm } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { useEntryPointStore } from "stores/entryPointStore";
 import { withPrefix } from "utils/redirect";
@@ -10,6 +10,7 @@ import { isConfigLoaded, useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
 
 import { loadWebhookMenuItems } from "./_webhooks";
+import HelpModeSwitch from "./HelpModeSwitch";
 import MastheadItem from "./MastheadItem";
 import QuotaMeter from "./QuotaMeter";
 import { getActiveTab } from "./utilities";
@@ -143,6 +144,9 @@ onMounted(() => {
                 id="notifications-bell">
                 <NotificationsBell tooltip-placement="bottom" />
             </BNavItem>
+            <BNavForm>
+                <HelpModeSwitch />
+            </BNavForm>
         </BNavbarNav>
         <QuotaMeter />
     </BNavbar>

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,27 @@
 </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";
 
+import { logSentryEvent } from "utils/sentry";
+
 export default {
     name: "QuotaMeter",
     data() {
+        //
         return {
             usingString: this.l("Using"),
         };
     },
     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 +95,12 @@
             }
         },
     },
+    methods: {
+        callHelpMode() {
+            logSentryEvent("hover", "quotaMeterHelpString");
+            this.helpModeTextStore.addHelpModeText("quotaMeterHelpString");
+        },
+    },
 };
 </script>
 

client/src/components/Panels/HelpModeText.vue

@@ -0,0 +1,21 @@
+<script setup="ts">
+import { computed } from "vue";
+
+import { useHelpModeTextStore } from "@/stores/helpmode/helpModeTextStore";
+
+const helpInfo = useHelpModeTextStore();
+
+const helpText = computed({
+    get() {
+        return helpInfo.helpmodetext;
+    },
+});
+</script>
+
+<template>
+    <div class="unified-panel-body d-flex justify-content-between">
+        <div class="helpModeContainer">
+            {{ helpText }}
+        </div>
+    </div>
+</template>

client/src/components/Panels/ToolBox.vue

@@ -73,6 +73,8 @@
                 </div>
             </div>
         </div>
+        <span class="border-top"></span>
+        <HelpModeText v-if="status.helpmodestatus" />
     </div>
 </template>
 
@@ -83,10 +85,13 @@ import { useGlobalUploadModal } from "composables/globalUploadModal";
 import { getAppRoot } from "onload";
 import _l from "utils/localization";
 
+import { useHelpModeStatusStore } from "@/stores/helpmode/helpModeStatusStore";
+
 import FavoritesButton from "./Buttons/FavoritesButton";
 import PanelViewButton from "./Buttons/PanelViewButton";
 import ToolSearch from "./Common/ToolSearch";
 import ToolSection from "./Common/ToolSection";
+import HelpModeText from "./HelpModeText";
 import { filterTools, filterToolSections, hasResults, hideToolsSection } from "./utilities";
 
 export default {
@@ -96,6 +101,7 @@ export default {
         PanelViewButton,
         ToolSection,
         ToolSearch,
+        HelpModeText,
     },
     props: {
         toolbox: {
@@ -115,6 +121,7 @@ export default {
     },
     data() {
         return {
+            status: useHelpModeStatusStore(),
             closestTerm: null,
             query: null,
             results: null,

client/src/stores/helpmode/helpModeStatusStore.js

@@ -0,0 +1,15 @@
+import { defineStore } from "pinia";
+
+export const useHelpModeStatusStore = defineStore("helpModeStatusStore", {
+    state: () => {
+        return {
+            helpmodestatus: false,
+        };
+    },
+
+    actions: {
+        setHelpModeStatus(status) {
+            this.helpmodestatus = status;
+        },
+    },
+});

client/src/stores/helpmode/helpModeTextStore.js

@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+
+import config from './helpTextConfig.yml';
+
+export const useHelpModeTextStore = defineStore("helpModeText", {
+    state: () => {
+        return {
+            helpmodetext: "Welcome to Galaxy Help Mode!",
+        };
+    },
+
+    actions: {
+        addHelpModeText(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/src/utils/sentry.js

@@ -0,0 +1,10 @@
+function logSentryEvent(type, id) {
+    Galaxy.Sentry?.captureMessage(`TEST - HelpMode - ${type} - ${id}`, {
+        extra: {
+            sandbox: true,
+            feature: "HelpMode",
+            eventType: type,
+            eventId: id,
+        },
+    })
+}

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