Add fallback label, properly condition drag leave

galaxyproject · Jun 7, 2023 · baf518c · baf518c
1 parent 771ae24
commit baf518c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
@@ -77,7 +77,7 @@ function onDragEnter(evt) {
 }
 
 function onDragLeave(evt) {
-    if (dragTarget.value == evt.target) {
+    if (dragItem.value && dragTarget.value == evt.target) {
         const dragId = dragItem.value.id;
         const activitiesTemp = activities.value.filter((a) => a.id !== dragId);
         activities.value = activitiesTemp;

diff --git a/client/src/components/ActivityBar/activities.js b/client/src/components/ActivityBar/activities.js
@@ -31,7 +31,7 @@ export const Activities = [
         id: "workflows",
         mutable: false,
         optional: true,
-        title: "Workflow",
+        title: "Search Workflows",
         to: null,
         tooltip: "Display an advanced search field for workflows.",
         visible: true,
@@ -42,8 +42,8 @@ export const Activities = [
         id: "workflow",
         mutable: false,
         optional: true,
-        title: "Workflows",
-        to: "/workflows/list/",
+        title: "Show All Workflows",
+        to: "/workflows/list",
         tooltip: "Display an advanced search field for workflows.",
         visible: true,
     },

diff --git a/client/src/components/Common/TextShort.vue b/client/src/components/Common/TextShort.vue
@@ -22,7 +22,7 @@ const text = computed(() => {
 </script>
 
 <template>
-    <div class="text-break">
+    <div class="text-break text-center">
         {{ text }}
     </div>
 </template>
diff --git a/client/src/components/DragGhost.vue b/client/src/components/DragGhost.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
@@ -8,13 +8,18 @@ import { useEventStore } from "stores/eventStore";
 library.add(faPaperPlane);
 
 const eventStore = useEventStore();
+
+const name = computed(() => {
+    const dragData = eventStore.getDragData();
+    return dragData?.name;
+});
 </script>
 
 <template>
     <span id="drag-ghost" class="py-2 px-3 rounded">
         <font-awesome-icon icon="paper-plane" class="mr-1" />
         <span class="font-weight-bold">
-            {{ eventStore.getDragData()?.name }}
+            {{ name || "Draggable" }}
         </span>
     </span>
 </template>