Merge pull request #20797 from guerler/refactor_webhooks

Remove Backbone dependency from webhook wrappers

Author: itisAliRH

client/src/components/Common/Webhook.vue

@@ -1,28 +1,40 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 
-import Webhooks from "@/utils/webhooks";
+import { appendScriptStyle } from "@/utils/utils";
+import { loadWebhooks, pickWebhook } from "@/utils/webhooks";
 
 interface Props {
     type: string;
     toolId?: string;
+    toolVersion?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    toolId: undefined,
+    toolId: "",
+    toolVersion: "",
 });
 
-const webhook = ref(null);
+const container = ref<HTMLElement | null>(null);
+const webhookId = ref<string | null>(null);
 
-onMounted(() => {
-    new Webhooks.WebhookView({
-        webhook,
-        type: props.type,
-        toolId: props.toolId,
-    });
+onMounted(async () => {
+    if (container.value) {
+        container.value.setAttribute("tool_id", props.toolId);
+        container.value.setAttribute("tool_version", props.toolVersion);
+    }
+
+    const webhooks = await loadWebhooks();
+    if (webhooks.length > 0) {
+        const model = pickWebhook(webhooks);
+        webhookId.value = model.id;
+        appendScriptStyle(model);
+    }
 });
 </script>
 
 <template>
-    <div id="webhook-view" ref="webhook" />
+    <div ref="container">
+        <div v-if="webhookId" :id="webhookId"></div>
+    </div>
 </template>

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 = await 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>

client/src/components/Workflow/Run/WorkflowRunSuccess.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { computed, onMounted } from "vue";
 
 import type { WorkflowInvocation } from "@/api/invocations";
-import Webhooks from "@/utils/webhooks";
 import { startWatchingHistory } from "@/watch/watchHistoryProvided";
 
+import Webhook from "@/components/Common/Webhook.vue";
 import GridInvocation from "@/components/Grid/GridInvocation.vue";
 import WorkflowInvocationState from "@/components/WorkflowInvocationState/WorkflowInvocationState.vue";
 
@@ -14,20 +14,17 @@ const props = defineProps<{
 }>();
 
 onMounted(() => {
-    new Webhooks.WebhookView({
-        type: "workflow",
-        toolId: null,
-        toolVersion: null,
-    });
     startWatchingHistory();
 });
 
-const targetHistories = props.invocations.reduce((histories, invocation) => {
-    if (invocation.history_id && !histories.includes(invocation.history_id)) {
-        histories.push(invocation.history_id);
-    }
-    return histories;
-}, [] as string[]);
+const targetHistories = computed(() =>
+    props.invocations.reduce((histories, invocation) => {
+        if (invocation.history_id && !histories.includes(invocation.history_id)) {
+            histories.push(invocation.history_id);
+        }
+        return histories;
+    }, [] as string[])
+);
 </script>
 
 <template>
@@ -46,6 +43,6 @@ const targetHistories = props.invocations.reduce((histories, invocation) => {
             :invocation-id="props.invocations[0].id"
             is-full-page
             success />
-        <div id="webhook-view"></div>
+        <Webhook type="workflow" />
     </div>
 </template>

client/src/onload/globalInits/onloadWebhooks.js

@@ -1,17 +1,13 @@
-import Utils from "utils/utils";
-import Webhooks from "utils/webhooks";
+import { appendScriptStyle } from "utils/utils";
+import { loadWebhooks } from "utils/webhooks";
 
-export function onloadWebhooks(Galaxy) {
+export async function onloadWebhooks(Galaxy) {
     if (Galaxy.config.enable_webhooks) {
-        Webhooks.load({
-            type: "onload",
-            callback: function (webhooks) {
-                webhooks.forEach((webhook) => {
-                    if (webhook.activate && webhook.script) {
-                        Utils.appendScriptStyle(webhook);
-                    }
-                });
-            },
+        const webhooks = await loadWebhooks("onload");
+        webhooks.forEach((webhook) => {
+            if (webhook.activate && webhook.script) {
+                appendScriptStyle(webhook);
+            }
         });
     }
 }

client/src/utils/webhooks.js

@@ -1,13 +1,11 @@
 import axios from "axios";
-import Backbone from "backbone";
 import { getAppRoot } from "onload/loadConfig";
-import Utils from "utils/utils";
 
 import { rethrowSimple } from "@/utils/simple-error";
 
 let webhookData = undefined;
 
-async function getWebHookData() {
+async function getWebhookData() {
     if (webhookData === undefined) {
         try {
             const { data } = await axios.get(`${getAppRoot()}api/webhooks`);
@@ -19,57 +17,16 @@ async function getWebHookData() {
     return webhookData;
 }
 
-const WebhookView = Backbone.View.extend({
-    el: "#webhook-view",
-
-    initialize: function (options) {
-        const toolId = options.toolId || "";
-        const toolVersion = options.toolVersion || "";
-
-        this.$el.attr("tool_id", toolId);
-        this.$el.attr("tool_version", toolVersion);
-
-        getWebHookData().then((data) => {
-            const filteredData = filterData(data, options);
-            if (filteredData.length > 0) {
-                this.render(weightedRandomPick(filteredData));
-            }
-        });
-    },
-
-    render: function (model) {
-        this.$el.html(`<div id="${model.id}"></div>`);
-        Utils.appendScriptStyle(model);
-        return this;
-    },
-});
-
-function filterData(data, options) {
-    let filteredData = data;
-    if (options.type) {
-        filteredData = filterType(data, options.type);
+export async function loadWebhooks(type) {
+    const webhooks = await getWebhookData();
+    if (type) {
+        return webhooks.filter((item) => item.type && item.type.indexOf(type) !== -1);
+    } else {
+        return webhooks;
     }
-    return filteredData;
-}
-
-const load = (options) => {
-    getWebHookData().then((data) => {
-        options.callback(filterData(data, options));
-    });
-};
-
-function filterType(data, type) {
-    return data.filter((item) => {
-        const itype = item.type;
-        if (itype) {
-            return itype.indexOf(type) !== -1;
-        } else {
-            return false;
-        }
-    });
 }
 
-function weightedRandomPick(data) {
+export function pickWebhook(data) {
     const weights = data.map((d) => d.weight);
     const sum = weights.reduce((a, b) => a + b);
 
@@ -87,8 +44,3 @@ function weightedRandomPick(data) {
 
     return data.at(table[Math.floor(Math.random() * table.length)]);
 }
-
-export default {
-    WebhookView: WebhookView,
-    load: load,
-};