From 86fcb4dcaac760cf4e3ee85ce0965f71bb4d02c2 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 15 Mar 2024 17:27:20 -0500
Subject: [PATCH] [24.0] Prevent dragover for item from same history in history
 panel

We would allow users to dragover items from the same history over its panel and render the dropzone, this prevents that entirely.
Fixes https://github.com/galaxyproject/galaxy/issues/17743
---
 client/src/components/DragGhost.vue           |  2 +-
 .../History/CurrentHistory/HistoryPanel.vue   | 76 ++++++++++++-------
 2 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/client/src/components/DragGhost.vue b/client/src/components/DragGhost.vue
index ae4dbfc6eaa4..bc15f7c46af9 100644
--- a/client/src/components/DragGhost.vue
+++ b/client/src/components/DragGhost.vue
@@ -25,7 +25,7 @@ const name = computed(() => {
 
 <template>
     <span id="drag-ghost" class="py-2 px-3 rounded">
-        <FontAwesomeIcon icon="paper-plane" class="mr-1" />
+        <FontAwesomeIcon :icon="faPaperPlane" class="mr-1" />
         <TextShort class="font-weight-bold" :text="name" />
     </span>
 </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 8b2062323cae..ab8bc7d63586 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -212,6 +212,36 @@ watch(
     }
 );
 
+function dragSameHistory() {
+    return getDragData().sameHistory;
+}
+
+function getDragData() {
+    const eventStore = useEventStore();
+    const multiple = eventStore.multipleDragData;
+    let data: HistoryItem[] | undefined;
+    let historyId: string | undefined;
+    try {
+        if (multiple) {
+            const dragData = eventStore.getDragData() as Record<string, HistoryItem>;
+            // set historyId to the first history_id in the multiple drag data
+            const firstItem = Object.values(dragData)[0];
+            if (firstItem) {
+                historyId = firstItem.history_id;
+            }
+            data = Object.values(dragData);
+        } else {
+            data = [eventStore.getDragData() as HistoryItem];
+            if (data[0]) {
+                historyId = data[0].history_id;
+            }
+        }
+    } catch (error) {
+        // this was not a valid object for this dropzone, ignore
+    }
+    return { data, sameHistory: historyId === props.history.id, multiple };
+}
+
 function getHighlight(item: HistoryItem) {
     if (unref(isLoading)) {
         return undefined;
@@ -319,45 +349,33 @@ function onOperationError(error: any) {
 }
 
 function onDragEnter(e: DragEvent) {
+    if (dragSameHistory()) {
+        return;
+    }
     dragTarget.value = e.target;
     showDropZone.value = true;
 }
 
+function onDragOver(e: DragEvent) {
+    if (dragSameHistory()) {
+        return;
+    }
+    e.preventDefault();
+}
+
 function onDragLeave(e: DragEvent) {
+    if (dragSameHistory()) {
+        return;
+    }
     if (dragTarget.value === e.target) {
         showDropZone.value = false;
     }
 }
 
-async function onDrop(evt: any) {
-    const eventStore = useEventStore();
+async function onDrop() {
     showDropZone.value = false;
-    let data: HistoryItem[] | undefined;
-    let historyId: string | undefined;
-    const multiple = eventStore.multipleDragData;
-    try {
-        if (multiple) {
-            const dragData = eventStore.getDragData() as Record<string, HistoryItem>;
-            // set historyId to the first history_id in the multiple drag data
-            const firstItem = Object.values(dragData)[0];
-            if (firstItem) {
-                historyId = firstItem.history_id;
-            }
-            data = Object.values(dragData);
-        } else {
-            data = [eventStore.getDragData() as HistoryItem];
-            if (data[0]) {
-                historyId = data[0].history_id;
-            }
-        }
-    } catch (error) {
-        // this was not a valid object for this dropzone, ignore
-    }
-
-    if (!data) {
-        return;
-    } else if (historyId === props.history.id) {
-        Toast.error("Cannot copy to the same history");
+    const { data, sameHistory, multiple } = getDragData();
+    if (!data || sameHistory) {
         return;
     }
 
@@ -486,7 +504,7 @@ function setItemDragstart(
                 class="history-layout d-flex flex-column w-100 h-100"
                 @drop.prevent="onDrop"
                 @dragenter.prevent="onDragEnter"
-                @dragover.prevent
+                @dragover="onDragOver"
                 @dragleave.prevent="onDragLeave">
                 <slot name="navigation" :history="history" />