Merge pull request #20232 from jmchilton/file_drop_bug

Bug fix - allow file drops into PasteData widget.

client/src/components/Collections/wizard/PasteData.vue

@@ -34,7 +34,9 @@ const handleDrop = (event: DragEvent) => {
 </script>
 
 <template>
-    <div class="paste-data">
+    <!-- galaxy-drop-target suppresses global upload drop target so this component can be
+         dropped to -->
+    <div class="paste-data" data-galaxy-file-drop-target>
         <JaggedDataAlert :jagged-data-warning="jaggedDataWarning" />
         <div
             class="dropzone"

client/src/components/Upload/DragAndDropModal.vue

@@ -1,3 +1,8 @@
+<!-- Global generic file upload modal.
+
+    This modal will be suppressed if page has any DOM elements decorated
+    with data-galaxy-file-drop-target - see fileDrop composable for more information.
+-->
 <script setup>
 import { setIframeEvents } from "components/Upload/utils";
 import { useFileDrop } from "composables/fileDrop";

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

@@ -325,7 +325,7 @@ async function onExecute() {
 </script>
 
 <template>
-    <div class="d-flex flex-column h-100 workflow-run-form-simple">
+    <div class="d-flex flex-column h-100 workflow-run-form-simple" data-galaxy-file-drop-target>
         <div v-if="!showRightPanel" class="ui-form-header-underlay sticky-top" />
         <div v-if="isConfigLoaded" :class="{ 'sticky-top': !showRightPanel }">
             <BAlert v-if="!canRunOnHistory" variant="warning" show>

client/src/composables/fileDrop.ts

@@ -18,11 +18,14 @@ export function useFileDrop(
     solo: MaybeRefOrGetter<boolean>,
     idleTime = 800
 ) {
-    /** returns if any bootstrap modal or workflow run form is open */
-    function isAnyModalOpen() {
+    /** returns true if any other more specific file drop target is on the screen and should
+     *  supersede the global file drop or if an existing modal is present and should likewise
+     *  take precedent.
+     */
+    function disableGlobalDropTargetTarget() {
         return (
             document.querySelectorAll(".modal.show").length > 0 ||
-            document.querySelectorAll(".workflow-run-form-simple").length > 0
+            document.querySelectorAll("[data-galaxy-file-drop-target]").length > 0
         );
     }
 
@@ -46,7 +49,7 @@ export function useFileDrop(
                 case "dragstart":
                     return "blocked";
                 case "dragenter":
-                    if (!(unref(solo) && isAnyModalOpen())) {
+                    if (!(unref(solo) && disableGlobalDropTargetTarget())) {
                         return "fileDragging";
                     }
                     break;