Migrate all upload entrypoints to unified upload activity/modal

client/src/components/ActivityBar/ActivityBar.vue

@@ -476,7 +476,7 @@ defineExpose({
             :collapsible="false"
             :reactive-width.sync="sidePanelWidth">
             <ToolPanel v-if="isActiveSideBar('tools')" />
-            <UploadPanel v-else-if="isActiveSideBar('beta-upload')" />
+            <UploadPanel v-else-if="isActiveSideBar('upload')" />
             <InvocationsPanel v-else-if="isActiveSideBar('invocation')" />
             <VisualizationPanel v-else-if="isActiveSideBar('visualizations')" />
             <MultiviewPanel v-else-if="isActiveSideBar('multiview')" />

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

@@ -3,7 +3,7 @@ import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { storeToRefs } from "pinia";
 import { onMounted } from "vue";
 
-import { useGlobalUploadModal } from "@/composables/globalUploadModal.js";
+import { useActivityStore } from "@/stores/activityStore";
 import { useUploadStore } from "@/stores/uploadStore";
 import Query from "@/utils/query-string-parsing.js";
 
@@ -23,18 +23,25 @@ const emit = defineEmits<{
     (e: "click"): void;
 }>();
 
-const { openGlobalUploadModal } = useGlobalUploadModal();
+const activityStore = useActivityStore(props.activityBarId);
 const { percentage, status } = storeToRefs(useUploadStore());
+const { toggledSideBar } = storeToRefs(activityStore);
+
+function openUploadPanel() {
+    activityStore.ensureVisible("upload");
+    activityStore.toggleSideBar("upload");
+}
 
 onMounted(() => {
     if (Query.get("tool_id") == "upload1") {
-        openGlobalUploadModal();
+        activityStore.ensureVisible("upload");
+        activityStore.ensureSideBarOpen("upload");
     }
 });
 
 function onUploadModal() {
     emit("click");
-    openGlobalUploadModal();
+    openUploadPanel();
 }
 </script>
 
@@ -45,6 +52,7 @@ function onUploadModal() {
         :title="title"
         :tooltip="tooltip"
         :icon="icon"
+        :is-active="toggledSideBar === 'upload'"
         :progress-percentage="percentage"
         :progress-status="status"
         @click="onUploadModal" />

client/src/components/DataDialog/DataDialog.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BBadge } from "bootstrap-vue";
 import { onMounted, type Ref, ref, watch } from "vue";
 import Vue from "vue";
 
 import type { TableField } from "@/components/Common/GTable.types";
 import type { DataOption } from "@/components/Form/Elements/FormData/types";
 import type { SelectionItem } from "@/components/SelectionDialog/selectionTypes";
-import { useGlobalUploadModal } from "@/composables/globalUploadModal";
 import { useUploadMethodModal } from "@/composables/upload/useUploadMethodModal";
 import { useUrlTracker } from "@/composables/urlTracker";
 import { getAppRoot } from "@/onload/loadConfig";
@@ -54,7 +52,6 @@ const emit = defineEmits<{
     (e: "onUpload"): void;
 }>();
 
-const { openGlobalUploadModal } = useGlobalUploadModal();
 const { openUploadModal } = useUploadMethodModal();
 
 const errorMessage = ref("");

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

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useEventBus } from "@vueuse/core";
 import { BAlert } from "bootstrap-vue";
 
-import { useGlobalUploadModal } from "@/composables/globalUploadModal";
+import { useUploadMethodModal } from "@/composables/upload/useUploadMethodModal";
 import localize from "@/utils/localization";
 
 const { emit } = useEventBus<string>("open-tool-section");
@@ -20,7 +20,12 @@ const props = withDefaults(
     },
 );
 
-const { openGlobalUploadModal } = useGlobalUploadModal();
+const { openUploadModal } = useUploadMethodModal();
+
+async function openUpload() {
+    await openUploadModal();
+}
+
 function clickDataLink() {
     emit("getext");
 }
@@ -34,7 +39,7 @@ function clickDataLink() {
         </h4>
 
         <p v-if="props.writable">
-            <a v-localize href="#" @click.prevent="openGlobalUploadModal">You can load your own data</a>
+            <a v-localize href="#" @click.prevent="openUpload">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>

client/src/components/Panels/ToolBox.vue

@@ -5,9 +5,9 @@ import { BBadge } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
-import { useGlobalUploadModal } from "@/composables/globalUploadModal";
 import { useToolRouting } from "@/composables/route";
 import { useFavoriteSearchResults, useToolPanelFavorites } from "@/composables/toolPanelFavorites";
+import { useUploadMethodModal } from "@/composables/upload/useUploadMethodModal";
 import type { Tool, ToolPanelItem, ToolSection as ToolSectionType, ToolSectionLabel } from "@/stores/toolStore";
 import { useToolStore } from "@/stores/toolStore";
 import localize from "@/utils/localization";
@@ -36,7 +36,7 @@ import MyToolsLanding from "./MyToolsLanding.vue";
 /** Section IDs that are only valid for the workflow editor toolbox, and should be excluded from the regular toolbox. */
 const WORKFLOW_ONLY_SECTION_IDS = ["expression_tools"];
 
-const { openGlobalUploadModal } = useGlobalUploadModal();
+const { openUploadModal } = useUploadMethodModal();
 const { routeToTool } = useToolRouting();
 
 const emit = defineEmits<{
@@ -326,7 +326,7 @@ function onToolClick(tool: Tool, evt: Event) {
     if (!props.workflow) {
         if (tool.id === "upload1") {
             evt.preventDefault();
-            openGlobalUploadModal();
+            void openUploadModal();
         } else if (tool.form_style === "regular") {
             evt.preventDefault();
             // encode spaces in tool.id

client/src/components/ToolsList/useToolsListCardActions.ts

@@ -5,8 +5,8 @@ import { computed, ref } from "vue";
 
 import { getFullAppUrl } from "@/app/utils";
 import type { CardAction } from "@/components/Common/GCard.types";
-import { useGlobalUploadModal } from "@/composables/globalUploadModal";
 import { useToast } from "@/composables/toast";
+import { useUploadMethodModal } from "@/composables/upload/useUploadMethodModal";
 import { useUserStore } from "@/stores/userStore";
 import ariaAlert from "@/utils/ariaAlert";
 import { copy } from "@/utils/clipboard";
@@ -25,7 +25,7 @@ export function useToolsListCardActions(
 
     const Toast = useToast();
 
-    const { openGlobalUploadModal } = useGlobalUploadModal();
+    const { openUploadModal } = useUploadMethodModal();
 
     const canBeRun = computed(() => formStyle === "regular" || !local);
 
@@ -91,7 +91,7 @@ export function useToolsListCardActions(
     /** For the upload tool, we have no `to` or `href`, and we open the modal instead */
     function openUploadIfNeeded() {
         if (toolId === "upload1") {
-            openGlobalUploadModal();
+            void openUploadModal();
         }
     }
 

client/src/components/Upload/DragAndDropModal.vue

@@ -8,8 +8,8 @@ import { computed, ref, watch } from "vue";
 
 import { setIframeEvents } from "@/components/Upload/utils";
 import { useFileDrop } from "@/composables/fileDrop";
-import { useGlobalUploadModal } from "@/composables/globalUploadModal";
 import { useToast } from "@/composables/toast";
+import { useUploadMethodModal } from "@/composables/upload/useUploadMethodModal";
 
 const modalContentElement = ref(null);
 const { isFileOverDocument, isFileOverDropZone } = useFileDrop({
@@ -27,7 +27,7 @@ const modalClass = computed(() => {
     }
 });
 
-const { openGlobalUploadModal } = useGlobalUploadModal();
+const { openUploadModal } = useUploadMethodModal();
 
 const toast = useToast();
 
@@ -37,9 +37,10 @@ function onDrop(event) {
     console.debug(event.dataTransfer);
 
     if (event.dataTransfer?.files?.length > 0) {
-        openGlobalUploadModal({
-            immediateUpload: true,
-            immediateFiles: event.dataTransfer.files,
+        void openUploadModal({
+            allowedMethods: ["local-file"],
+            hideTips: true,
+            immediateFiles: Array.from(event.dataTransfer.files),
         });
     }
 }

client/src/composables/upload/useUploadMethodModal.ts

@@ -54,6 +54,7 @@ function applyConfigDefaults(config?: UploadModalConfig): UploadModalConfig {
         targetHistoryId: config?.targetHistoryId,
         title: config?.title,
         hideTips: config?.hideTips ?? false,
+        immediateFiles: config?.immediateFiles,
     };
 }
 

client/src/utils/data.js

@@ -1,4 +1,4 @@
-import { useGlobalUploadModal } from "@/composables/globalUploadModal";
+import { useUploadMethodModal } from "@/composables/upload/useUploadMethodModal";
 import { useHistoryStore } from "@/stores/historyStore";
 import { appendVueComponent } from "@/utils/mountVueComponent";
 import { buildLegacyPayload, submitUpload } from "@/utils/upload";
@@ -17,8 +17,15 @@ export async function dialog(galaxy, callback, options = {}) {
         history: historyId,
     });
     if (options.new) {
-        const { openGlobalUploadModal } = useGlobalUploadModal();
-        openGlobalUploadModal(options);
+        const { openUploadModal } = useUploadMethodModal();
+        const result = await openUploadModal({
+            formats: options.uploadModalFormats,
+            multiple: options.multiple,
+            hideTips: true,
+        });
+        if (!result.cancelled) {
+            callback(result.toDataOptions());
+        }
     } else {
         appendVueComponent(DataDialog, options);
     }