Update masthead webhook loading

Author: guerler

client/src/components/Common/Webhook.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { onMounted, ref } from "vue";
+
 import { appendScriptStyle } from "@/utils/utils";
 import { loadWebhooks, pickWebhook } from "@/utils/webhooks";
-import { onMounted, ref } from "vue";
 
 interface Props {
     type: string;

client/src/components/Masthead/Masthead.test.js

@@ -9,7 +9,7 @@ import { setupMockConfig } from "tests/jest/mockConfig";
 
 import { useUserStore } from "@/stores/userStore";
 
-import { loadWebhookMenuItems } from "./_webhooks";
+import { loadMastheadWebhooks } from "./_webhooks";
 
 import Masthead from "./Masthead.vue";
 
@@ -38,7 +38,7 @@ describe("Masthead.vue", () => {
         });
     }
 
-    loadWebhookMenuItems.mockImplementation(stubLoadWebhooks);
+    loadMastheadWebhooks.mockImplementation(stubLoadWebhooks);
 
     beforeEach(async () => {
         localVue = getLocalVue();

client/src/components/Masthead/Masthead.vue

@@ -9,7 +9,7 @@ import { useRouter } from "vue-router/composables";
 import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
 
-import { loadWebhookMenuItems } from "./_webhooks";
+import { loadMastheadWebhooks } from "./_webhooks";
 import MastheadDropdown from "./MastheadDropdown";
 import MastheadItem from "./MastheadItem";
 import QuotaMeter from "./QuotaMeter";
@@ -72,7 +72,7 @@ function onWindowToggle() {
 }
 
 onMounted(() => {
-    loadWebhookMenuItems(extensionTabs.value);
+    loadMastheadWebhooks(extensionTabs.value);
 });
 </script>
 

client/src/components/Masthead/_webhooks.js

@@ -1,26 +1,22 @@
-import Utils from "utils/utils";
-import Webhooks from "utils/webhooks";
+import { appendScriptStyle } from "utils/utils";
+import { loadWebhooks } from "utils/webhooks";
 
-export function loadWebhookMenuItems(items) {
-    Webhooks.load({
-        type: "masthead",
-        callback: function (webhooks) {
-            webhooks.forEach((webhook) => {
-                if (webhook.activate) {
-                    const obj = {
-                        id: webhook.id,
-                        icon: webhook.config.icon,
-                        url: webhook.config.url,
-                        tooltip: webhook.config.tooltip,
-                        /*jslint evil: true */
-                        onclick: webhook.config.function && new Function(webhook.config.function),
-                        target: "_parent",
-                    };
-                    items.push(obj);
-                    // Append masthead script and styles to Galaxy main
-                    Utils.appendScriptStyle(webhook);
-                }
-            });
-        },
+export async function loadMastheadWebhooks(items) {
+    const webhooks = loadWebhooks("masthead");
+    webhooks.forEach((webhook) => {
+        if (webhook.activate) {
+            const obj = {
+                id: webhook.id,
+                icon: webhook.config.icon,
+                url: webhook.config.url,
+                tooltip: webhook.config.tooltip,
+                /*jslint evil: true */
+                onclick: webhook.config.function && new Function(webhook.config.function),
+                target: "_parent",
+            };
+            items.push(obj);
+            // Append masthead script and styles to Galaxy main
+            appendScriptStyle(webhook);
+        }
     });
 }

client/src/components/Tool/Buttons/ToolOptionsButton.vue

@@ -5,7 +5,7 @@ import { faCaretDown, faDownload, faExternalLinkAlt, faLink } from "@fortawesome
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import ToolSourceMenuItem from "components/Tool/ToolSourceMenuItem";
 import { storeToRefs } from "pinia";
-import Webhooks from "utils/webhooks";
+import { loadWebhooks } from "utils/webhooks";
 import { computed, ref } from "vue";
 
 import { useUserStore } from "@/stores/userStore";
@@ -37,24 +37,6 @@ const props = defineProps({
 
 const webhookDetails = ref([]);
 
-Webhooks.load({
-    type: "tool-menu",
-    callback: (webhooks) => {
-        webhooks.forEach((webhook) => {
-            if (webhook.activate && webhook.config.function) {
-                webhookDetails.value.push({
-                    icon: `fa ${webhook.config.icon}`,
-                    title: webhook.config.title,
-                    onclick: () => {
-                        const func = new Function("options", webhook.config.function);
-                        func(props.options);
-                    },
-                });
-            }
-        });
-    },
-});
-
 const showDownload = computed(() => currentUser.value?.is_admin);
 const showLink = computed(() => Boolean(props.sharableUrl));
 
@@ -73,6 +55,24 @@ function onDownload() {
 function onLink() {
     openLink(props.sharableUrl);
 }
+
+async function loadToolMenuWebhooks() {
+    const webhooks = await loadWebhooks("tool-menu");
+    webhooks.forEach((webhook) => {
+        if (webhook.activate && webhook.config.function) {
+            webhookDetails.value.push({
+                icon: `fa ${webhook.config.icon}`,
+                title: webhook.config.title,
+                onclick: () => {
+                    const func = new Function("options", webhook.config.function);
+                    func(props.options);
+                },
+            });
+        }
+    });
+}
+
+loadToolMenuWebhooks();
 </script>
 
 <template>