From e752647ede87b770afe0a59729d773d3cb0ab609 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 29 Jul 2024 16:07:48 -0500
Subject: [PATCH] Workflow Invocation view improvements

This first commit tackles point A in the roadmap:

List of invocations is now not visible continously, it goes away after you settle on one invocation and `mouseleave` the panel area.

Roadmap: https://hackmd.io/@nekrut/HkinoEh8A
---
 .../src/components/Panels/InvocationsPanel.vue  | 17 +++++++++++++++--
 .../Invocation/InvocationScrollList.vue         |  3 +++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Panels/InvocationsPanel.vue b/client/src/components/Panels/InvocationsPanel.vue
index cd329d1a2ae1..ba810258676e 100644
--- a/client/src/components/Panels/InvocationsPanel.vue
+++ b/client/src/components/Panels/InvocationsPanel.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
+import { ref } from "vue";
 
 import { useUserStore } from "@/stores/userStore";
 
@@ -8,15 +9,27 @@ import InvocationScrollList from "../Workflow/Invocation/InvocationScrollList.vu
 import ActivityPanel from "./ActivityPanel.vue";
 
 const { currentUser, toggledSideBar } = storeToRefs(useUserStore());
+
+const shouldCollapse = ref(false);
+function collapseOnLeave() {
+    if (shouldCollapse.value) {
+        toggledSideBar.value = "";
+    }
+}
 </script>
 
 <template>
+    <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->
     <ActivityPanel
         title="Workflow Invocations"
         go-to-all-title="Open Invocations List"
         href="/workflows/invocations"
-        @goToAll="toggledSideBar = ''">
-        <InvocationScrollList v-if="currentUser && !currentUser?.isAnonymous" in-panel />
+        @goToAll="shouldCollapse = true"
+        @mouseleave.native="collapseOnLeave">
+        <InvocationScrollList
+            v-if="currentUser && !currentUser?.isAnonymous"
+            in-panel
+            @invocation-clicked="shouldCollapse = true" />
         <BAlert v-else variant="info" class="mt-3" show>Please log in to view your Workflow Invocations.</BAlert>
     </ActivityPanel>
 </template>
diff --git a/client/src/components/Workflow/Invocation/InvocationScrollList.vue b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
index 0e78c686650f..f42dd3b858ed 100644
--- a/client/src/components/Workflow/Invocation/InvocationScrollList.vue
+++ b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
@@ -32,6 +32,8 @@ const props = withDefaults(defineProps<Props>(), {
     limit: 20,
 });
 
+const emit = defineEmits(["invocation-clicked"]);
+
 library.add(faEye, faArrowDown, faInfoCircle);
 
 const stateClasses: Record<string, string> = {
@@ -97,6 +99,7 @@ function cardClicked(invocation: WorkflowInvocation) {
     let path = `/workflows/invocations/${invocation.id}`;
     if (props.inPanel) {
         path += "?from_panel=true";
+        emit("invocation-clicked");
     }
     router.push(path);
 }