Merge pull request galaxyproject#17037 from dannon/no-more-eventhub

Remove eventHub custom module, swap to appropriate alternatives.

client/src/components/ActivityBar/Items/UploadItem.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, type Ref, ref } from "vue";
+import { storeToRefs } from "pinia";
+import { onMounted } from "vue";
 
-import { eventHub } from "@/components/plugins/eventHub.js";
 import { useGlobalUploadModal } from "@/composables/globalUploadModal.js";
+import { useUploadStore } from "@/stores/uploadStore";
 import Query from "@/utils/query-string-parsing.js";
 
 import ActivityItem from "components/ActivityBar/ActivityItem.vue";
 
-const { openGlobalUploadModal } = useGlobalUploadModal();
-
 export interface Props {
     id: string;
     title: string;
@@ -22,34 +21,19 @@ const emit = defineEmits<{
     (e: "click"): void;
 }>();
 
-const status: Ref<string> = ref("success");
-const percentage: Ref<number> = ref(0);
+const { openGlobalUploadModal } = useGlobalUploadModal();
+const { percentage, status } = storeToRefs(useUploadStore());
 
 onMounted(() => {
-    eventHub.$on("upload:status", setStatus);
-    eventHub.$on("upload:percentage", setPercentage);
     if (Query.get("tool_id") == "upload1") {
         openGlobalUploadModal();
     }
 });
 
-onUnmounted(() => {
-    eventHub.$off("upload:status", setStatus);
-    eventHub.$off("upload:percentage", setPercentage);
-});
-
 function onUploadModal() {
     emit("click");
     openGlobalUploadModal();
 }
-
-function setStatus(val: string): void {
-    status.value = val;
-}
-
-function setPercentage(val: number): void {
-    percentage.value = val;
-}
 </script>
 
 <template>

client/src/components/History/CurrentHistory/HistoryEmpty.vue

@@ -1,33 +1,38 @@
+<script setup lang="ts">
+import { useEventBus } from "@vueuse/core";
+
+import { useGlobalUploadModal } from "@/composables/globalUploadModal";
+import { localize } from "@/utils/localization";
+
+const { emit } = useEventBus<string>("open-tool-section");
+
+const props = withDefaults(
+    defineProps<{
+        message?: string;
+        writable?: boolean;
+    }>(),
+    {
+        message: "This history is empty.",
+        writable: true,
+    }
+);
+
+const { openGlobalUploadModal } = useGlobalUploadModal();
+function clickDataLink() {
+    emit("getext");
+}
+</script>
+
 <template>
     <b-alert show>
         <h4 class="mb-1">
             <i class="fa fa-info-circle empty-message"></i>
-            <span>{{ message | l }}</span>
+            <span>{{ localize(message) }}</span>
         </h4>
-        <p v-if="writable">
+        <p v-if="props.writable">
             <a v-localize href="#" @click.prevent="openGlobalUploadModal">You can load your own data</a>
             <span v-localize>or</span>
             <a v-localize href="#" @click.prevent="clickDataLink">get data from an external source</a>.
         </p>
     </b-alert>
 </template>
-
-<script>
-import { useGlobalUploadModal } from "composables/globalUploadModal";
-
-export default {
-    props: {
-        message: { type: String, default: "This history is empty." },
-        writable: { type: Boolean, default: true },
-    },
-    setup() {
-        const { openGlobalUploadModal } = useGlobalUploadModal();
-        return { openGlobalUploadModal };
-    },
-    methods: {
-        clickDataLink() {
-            this.eventHub.$emit("openToolSection", "getext");
-        },
-    },
-};
-</script>

client/src/components/Panels/Common/ToolSection.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { useEventBus } from "@vueuse/core";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
-import { eventHub } from "@/components/plugins/eventHub.js";
 import { useConfig } from "@/composables/config";
 import { type ToolSectionLabel, useToolStore } from "@/stores/toolStore";
 import ariaAlert from "@/utils/ariaAlert";
@@ -15,6 +15,8 @@ const emit = defineEmits<{
     (e: "onOperation", tool: any, evt: Event): void;
 }>();
 
+const eventBus = useEventBus<string>("open-tool-section");
+
 const props = defineProps({
     category: {
         type: Object,
@@ -132,11 +134,11 @@ watch(
 );
 
 onMounted(() => {
-    eventHub.$on("openToolSection", openToolSection);
+    eventBus.on(openToolSection);
 });
 
 onUnmounted(() => {
-    eventHub.$off("openToolSection", openToolSection);
+    eventBus.off(openToolSection);
 });
 
 function openToolSection(sectionId: string) {

client/src/components/Upload/UploadButton.vue

@@ -1,9 +1,48 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { storeToRefs } from "pinia";
+import { computed, onMounted } from "vue";
+
+import { useGlobalUploadModal } from "@/composables/globalUploadModal";
+import { useUploadStore } from "@/stores/uploadStore";
+import localize from "@/utils/localization";
+import Query from "@/utils/query-string-parsing";
+
+library.add(faUpload);
+
+const props = withDefaults(
+    defineProps<{
+        title?: string;
+    }>(),
+    {
+        title: "Download from URL or upload files from disk",
+    }
+);
+
+const { openGlobalUploadModal } = useGlobalUploadModal();
+const { percentage, status } = storeToRefs(useUploadStore());
+
+onMounted(() => {
+    if (Query.get("tool_id") == "upload1") {
+        openGlobalUploadModal();
+    }
+});
+
+const localizedTitle = computed(() => {
+    return localize(props.title);
+});
+function showUploadDialog() {
+    openGlobalUploadModal();
+}
+</script>
 <template>
     <b-button
         id="activity-upload"
         v-b-tooltip.hover.noninteractive.bottom
-        :aria-label="title | localize"
-        :title="title | localize"
+        :aria-label="localizedTitle"
+        :title="localizedTitle"
         class="upload-button"
         size="sm"
         @click="showUploadDialog">
@@ -21,56 +60,3 @@
         </span>
     </b-button>
 </template>
-
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faUpload } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { VBTooltip } from "bootstrap-vue";
-import { useGlobalUploadModal } from "composables/globalUploadModal";
-import Query from "utils/query-string-parsing";
-
-library.add(faUpload);
-
-export default {
-    components: { FontAwesomeIcon },
-    directives: {
-        "v-b-tooltip": VBTooltip,
-    },
-    props: {
-        title: { type: String, default: "Download from URL or upload files from disk" },
-    },
-    setup() {
-        const { openGlobalUploadModal } = useGlobalUploadModal();
-        return { openGlobalUploadModal };
-    },
-    data() {
-        return {
-            status: "",
-            percentage: 0,
-        };
-    },
-    mounted() {
-        this.eventHub.$on("upload:status", this.setStatus);
-        this.eventHub.$on("upload:percentage", this.setPercentage);
-        if (Query.get("tool_id") == "upload1") {
-            this.showUploadDialog();
-        }
-    },
-    beforeDestroy() {
-        this.eventHub.$off("upload:status", this.setStatus);
-        this.eventHub.$off("upload:percentage", this.setPercentage);
-    },
-    methods: {
-        showUploadDialog() {
-            this.openGlobalUploadModal();
-        },
-        setStatus(val) {
-            this.status = val;
-        },
-        setPercentage(val) {
-            this.percentage = Math.round(val);
-        },
-    },
-};
-</script>

client/src/components/Upload/UploadContainer.vue

@@ -9,9 +9,10 @@ import {
     getUploadDatatypes,
     getUploadDbKeys,
 } from "components/Upload/utils";
+import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
-import { eventHub } from "@/components/plugins/eventHub.js";
+import { useUploadStore } from "@/stores/uploadStore";
 import { uploadPayload } from "@/utils/upload-payload.js";
 
 import CompositeBox from "./CompositeBox";
@@ -79,6 +80,8 @@ const listExtensions = ref([]);
 const listDbKeys = ref([]);
 const regular = ref(null);
 
+const { percentage, status } = storeToRefs(useUploadStore());
+
 const effectiveExtensions = computed(() => {
     if (props.formats === null || !datatypesMapperReady.value) {
         return listExtensions.value;
@@ -133,12 +136,12 @@ async function loadMappers() {
     datatypesMapperReady.value = true;
 }
 
-function progress(percentage, status = null) {
-    if (percentage !== null) {
-        eventHub.$emit(`upload:percentage`, percentage);
+function progress(newPercentage, newStatus = null) {
+    if (newPercentage !== null) {
+        percentage.value = newPercentage;
     }
-    if (status !== null) {
-        eventHub.$emit(`upload:status`, status);
+    if (newStatus !== null) {
+        status.value = newStatus;
     }
 }
 

client/src/components/plugins/index.js

@@ -1,4 +1,3 @@
-export { eventHubMixin, eventHubPlugin } from "./eventHub";
 export { iconMixin, iconPlugin } from "./icons";
 export { localizationPlugin } from "./localization";
 export { vueRxShortcutPlugin, vueRxShortcuts } from "./vueRxShortcuts";

client/src/stores/uploadStore.ts

@@ -0,0 +1,9 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useUploadStore = defineStore("upload", () => {
+    const percentage = ref<number>(0);
+    const status = ref<string>("");
+
+    return { percentage, status };
+});

client/src/utils/mountVueComponent.js

@@ -3,7 +3,7 @@
 // the same plugins and events.
 
 import BootstrapVue from "bootstrap-vue";
-import { eventHubPlugin, iconPlugin, localizationPlugin, vueRxShortcutPlugin } from "components/plugins";
+import { iconPlugin, localizationPlugin, vueRxShortcutPlugin } from "components/plugins";
 import Vue from "vue";
 import Vuex from "vuex";
 
@@ -14,11 +14,6 @@ Vue.use(Vuex);
 // Bootstrap components
 Vue.use(BootstrapVue);
 
-// Add a global event bus. We could just use root but I don't think that will
-// work right when we have more than one root, which we often will until the
-// application has been completely converted to Vue.
-Vue.use(eventHubPlugin);
-
 // localization filters and directives
 Vue.use(localizationPlugin);
 

client/tests/jest/helpers.js

@@ -3,7 +3,6 @@
  */
 import { createLocalVue, shallowMount } from "@vue/test-utils";
 import BootstrapVue from "bootstrap-vue";
-import { eventHubPlugin } from "components/plugins/eventHub";
 import { iconPlugin } from "components/plugins/icons";
 import { localizationPlugin } from "components/plugins/localization";
 import { vueRxShortcutPlugin } from "components/plugins/vueRxShortcuts";
@@ -190,7 +189,6 @@ export function getLocalVue(instrumentLocalization = false) {
     const l = instrumentLocalization ? testLocalize : _l;
     localVue.use(localizationPlugin, l);
     localVue.use(vueRxShortcutPlugin);
-    localVue.use(eventHubPlugin);
     localVue.use(iconPlugin);
     localVue.directive("b-tooltip", mockedDirective);
     localVue.directive("b-popover", mockedDirective);