From dd18c1eef5aee205487ca9a31eb0dc835ed2f805 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 20 May 2024 14:28:26 -0500
Subject: [PATCH 1/3] Move activity panel go to button to top

---
 .../ActivityBar/ActivitySettings.vue          | 20 ++++------
 .../src/components/Panels/ActivityPanel.vue   | 38 +++++++++++++------
 .../components/Panels/InvocationsPanel.vue    |  8 +++-
 .../src/components/Panels/MultiviewPanel.vue  | 23 ++++-------
 .../src/components/Panels/SettingsPanel.vue   | 16 +++++++-
 .../components/Panels/VisualizationPanel.vue  |  6 ++-
 6 files changed, 66 insertions(+), 45 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index 16c596e531f4..d210fab4df26 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -4,12 +4,10 @@ import { faSquare } from "@fortawesome/free-regular-svg-icons";
 import { faCheckSquare, faThumbtack, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
-import { computed, type ComputedRef, type Ref, ref } from "vue";
+import { computed, type ComputedRef } from "vue";
 
 import { type Activity, useActivityStore } from "@/stores/activityStore";
 
-import DelayedInput from "@/components/Common/DelayedInput.vue";
-
 library.add({
     faCheckSquare,
     faSquare,
@@ -17,13 +15,16 @@ library.add({
     faThumbtack,
 });
 
+const props = defineProps<{
+    query: string;
+}>();
+
 const activityStore = useActivityStore();
 const { activities } = storeToRefs(activityStore);
-const query: Ref<string> = ref("");
 
 const filteredActivities = computed(() => {
-    if (query.value.length > 0) {
-        const queryLower = query.value.toLowerCase();
+    if (props.query.length > 0) {
+        const queryLower = props.query.toLowerCase();
         const results = activities.value.filter((a: Activity) => {
             const attributeValues = [a.title, a.description];
             for (const value of attributeValues) {
@@ -52,16 +53,11 @@ function onClick(activity: Activity) {
 function onRemove(activity: Activity) {
     activityStore.remove(activity.id);
 }
-
-function onQuery(newQuery: string) {
-    query.value = newQuery;
-}
 </script>
 
 <template>
     <div class="activity-settings rounded no-highlight">
-        <DelayedInput :delay="100" placeholder="Search activities" @change="onQuery" />
-        <div v-if="foundActivities" class="activity-settings-content mt-2">
+        <div v-if="foundActivities" class="activity-settings-content">
             <div v-for="activity in filteredActivities" :key="activity.id">
                 <button class="activity-settings-item p-2 cursor-pointer" @click="onClick(activity)">
                     <div class="d-flex justify-content-between align-items-start">
diff --git a/client/src/components/Panels/ActivityPanel.vue b/client/src/components/Panels/ActivityPanel.vue
index 0e0330b87742..753c0fc20a6b 100644
--- a/client/src/components/Panels/ActivityPanel.vue
+++ b/client/src/components/Panels/ActivityPanel.vue
@@ -1,13 +1,29 @@
 <script setup lang="ts">
+import { BButton } from "bootstrap-vue";
+import { computed } from "vue";
+import { useRoute } from "vue-router/composables";
+
 interface Props {
     title: string;
     goToAllTitle?: string;
     href?: string;
+    /** Show GoTo button when on `href`? */
+    goToOnHref?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    goToAllTitle: undefined,
+    href: undefined,
+    goToOnHref: true,
+});
+
+const route = useRoute();
 
 const emit = defineEmits(["goToAll"]);
+
+const hasGoToAll = computed(
+    () => props.goToAllTitle && props.href && (props.goToOnHref || (!props.goToOnHref && route.path !== props.href))
+);
 </script>
 
 <template>
@@ -20,21 +36,20 @@ const emit = defineEmits(["goToAll"]);
             </nav>
 
             <slot name="header" class="activity-panel-header-description" />
+            <BButton
+                v-if="hasGoToAll"
+                class="activity-panel-footer"
+                :data-description="`props.mainButtonText button`"
+                :to="props.href"
+                size="sm"
+                @click="emit('goToAll')">
+                {{ props.goToAllTitle }}
+            </BButton>
         </div>
 
         <div class="activity-panel-body">
             <slot />
         </div>
-
-        <BButton
-            v-if="props.goToAllTitle"
-            class="activity-panel-footer"
-            variant="primary"
-            :data-description="`props.mainButtonText button`"
-            :to="props.href"
-            @click="emit('goToAll')">
-            {{ props.goToAllTitle }}
-        </BButton>
     </div>
 </template>
 
@@ -83,6 +98,7 @@ const emit = defineEmits(["goToAll"]);
 
     .activity-panel-footer {
         margin-top: 0.5rem;
+        width: 100%;
         font-weight: bold;
     }
 }
diff --git a/client/src/components/Panels/InvocationsPanel.vue b/client/src/components/Panels/InvocationsPanel.vue
index d84c5784bede..cd329d1a2ae1 100644
--- a/client/src/components/Panels/InvocationsPanel.vue
+++ b/client/src/components/Panels/InvocationsPanel.vue
@@ -7,11 +7,15 @@ import { useUserStore } from "@/stores/userStore";
 import InvocationScrollList from "../Workflow/Invocation/InvocationScrollList.vue";
 import ActivityPanel from "./ActivityPanel.vue";
 
-const { currentUser } = storeToRefs(useUserStore());
+const { currentUser, toggledSideBar } = storeToRefs(useUserStore());
 </script>
 
 <template>
-    <ActivityPanel title="Workflow Invocations" go-to-all-title="Go to Invocations List" href="/workflows/invocations">
+    <ActivityPanel
+        title="Workflow Invocations"
+        go-to-all-title="Open Invocations List"
+        href="/workflows/invocations"
+        @goToAll="toggledSideBar = ''">
         <InvocationScrollList v-if="currentUser && !currentUser?.isAnonymous" in-panel />
         <BAlert v-else variant="info" class="mt-3" show>Please log in to view your Workflow Invocations.</BAlert>
     </ActivityPanel>
diff --git a/client/src/components/Panels/MultiviewPanel.vue b/client/src/components/Panels/MultiviewPanel.vue
index 207250346c15..a71a31fda746 100644
--- a/client/src/components/Panels/MultiviewPanel.vue
+++ b/client/src/components/Panels/MultiviewPanel.vue
@@ -96,7 +96,11 @@ function userTitle(title: string) {
 </script>
 
 <template>
-    <ActivityPanel title="Select Histories">
+    <ActivityPanel
+        title="Select Histories"
+        go-to-all-title="Open History Multiview"
+        href="/histories/view_multiple"
+        :go-to-on-href="false">
         <template v-slot:header-buttons>
             <BButtonGroup>
                 <BButton
@@ -114,7 +118,6 @@ function userTitle(title: string) {
 
         <template v-slot:header>
             <FilterMenu
-                class="mb-3"
                 name="Histories"
                 placeholder="search histories"
                 :filter-class="HistoriesFilters"
@@ -122,22 +125,10 @@ function userTitle(title: string) {
                 :loading="historiesLoading || loading"
                 :show-advanced.sync="showAdvanced" />
             <section v-if="!showAdvanced">
-                <BButton
-                    v-if="route.path !== '/histories/view_multiple'"
-                    v-b-tooltip.hover.noninteractive.bottom
-                    :aria-label="userTitle('Open History Multiview in center panel')"
-                    :title="userTitle('Open History Multiview in center panel')"
-                    class="w-100"
-                    size="sm"
-                    :disabled="isAnonymous"
-                    @click="router.push('/histories/view_multiple')">
-                    <FontAwesomeIcon :icon="faColumns" class="mr-1" />
-                    <span v-localize>Open History Multiview</span>
-                </BButton>
                 <BButtonGroup
-                    v-else
+                    v-if="route.path === '/histories/view_multiple'"
                     v-b-tooltip.hover.noninteractive.bottom
-                    class="w-100"
+                    class="w-100 mt-2"
                     :aria-label="pinRecentTitle"
                     :title="pinRecentTitle">
                     <BButton size="sm" :disabled="!pinnedHistoryCount" @click="pinRecent">
diff --git a/client/src/components/Panels/SettingsPanel.vue b/client/src/components/Panels/SettingsPanel.vue
index 4dcebaa0a0c4..b48829721792 100644
--- a/client/src/components/Panels/SettingsPanel.vue
+++ b/client/src/components/Panels/SettingsPanel.vue
@@ -1,11 +1,23 @@
 <script setup lang="ts">
+import { ref } from "vue";
+
 import ActivitySettings from "@/components/ActivityBar/ActivitySettings.vue";
+import DelayedInput from "@/components/Common/DelayedInput.vue";
 import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+
+const query = ref("");
+
+function onQuery(newQuery: string) {
+    query.value = newQuery;
+}
 </script>
 
 <template>
     <ActivityPanel title="Settings" go-to-all-title="User Preferences" href="/user">
-        <h3>Customize Activity Bar</h3>
-        <ActivitySettings />
+        <template v-slot:header>
+            <h3>Customize Activity Bar</h3>
+            <DelayedInput :delay="100" placeholder="Search activities" @change="onQuery" />
+        </template>
+        <ActivitySettings :query="query" />
     </ActivityPanel>
 </template>
diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
index 1769df410dbf..50d0b089b473 100644
--- a/client/src/components/Panels/VisualizationPanel.vue
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -68,8 +68,10 @@ onMounted(() => {
 
 <template>
     <ActivityPanel title="Visualizations" go-to-all-title="Saved Visualizations" href="/visualizations/list">
-        <h3>Create Visualization</h3>
-        <DelayedInput :delay="100" placeholder="Search visualizations" @change="query = $event" />
+        <template v-slot:header>
+            <h3>Create Visualization</h3>
+            <DelayedInput :delay="100" placeholder="Search visualizations" @change="query = $event" />
+        </template>
         <div class="overflow-y mt-2">
             <LoadingSpan v-if="isLoading" message="Loading visualizations" />
             <div v-else-if="filteredPlugins.length > 0">

From 55c011a3260754d3bee2ee6e89fffd69822d76b1 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 20 May 2024 15:02:04 -0500
Subject: [PATCH 2/3] fix failing jests and move heading to header slot

---
 .../src/components/ActivityBar/ActivitySettings.test.js   | 8 ++++----
 client/src/components/ActivityBar/ActivitySettings.vue    | 2 +-
 client/src/components/admin/AdminPanel.test.js            | 4 ++++
 client/src/components/admin/AdminPanel.vue                | 4 +++-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivitySettings.test.js b/client/src/components/ActivityBar/ActivitySettings.test.js
index fc4bfe543383..e5555451ec85 100644
--- a/client/src/components/ActivityBar/ActivitySettings.test.js
+++ b/client/src/components/ActivityBar/ActivitySettings.test.js
@@ -29,10 +29,7 @@ function testActivity(id, newOptions = {}) {
 }
 
 async function testSearch(wrapper, query, result) {
-    const searchField = wrapper.find("input");
-    searchField.element.value = query;
-    searchField.trigger("change");
-    await wrapper.vm.$nextTick();
+    await wrapper.setProps({ query });
     const filtered = wrapper.findAll(activityItemSelector);
     expect(filtered.length).toBe(result);
 }
@@ -48,6 +45,9 @@ describe("ActivitySettings", () => {
         wrapper = mount(mountTarget, {
             localVue,
             pinia,
+            props: {
+                query: "",
+            },
             stubs: {
                 icon: { template: "<div></div>" },
             },
diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index d210fab4df26..835691d3c0b3 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -23,7 +23,7 @@ const activityStore = useActivityStore();
 const { activities } = storeToRefs(activityStore);
 
 const filteredActivities = computed(() => {
-    if (props.query.length > 0) {
+    if (props.query?.length > 0) {
         const queryLower = props.query.toLowerCase();
         const results = activities.value.filter((a: Activity) => {
             const attributeValues = [a.title, a.description];
diff --git a/client/src/components/admin/AdminPanel.test.js b/client/src/components/admin/AdminPanel.test.js
index 33919a126cbc..9e038a5249f9 100644
--- a/client/src/components/admin/AdminPanel.test.js
+++ b/client/src/components/admin/AdminPanel.test.js
@@ -14,6 +14,10 @@ jest.mock("@/composables/config", () => ({
     })),
 }));
 
+jest.mock("vue-router/composables", () => ({
+    useRoute: jest.fn(() => ({})),
+}));
+
 function createTarget(propsData = {}) {
     return mount(MountTarget, {
         localVue,
diff --git a/client/src/components/admin/AdminPanel.vue b/client/src/components/admin/AdminPanel.vue
index b6a5ea2bfd45..9fb87a8ddacb 100644
--- a/client/src/components/admin/AdminPanel.vue
+++ b/client/src/components/admin/AdminPanel.vue
@@ -125,7 +125,9 @@ const sections = computed(() => {
 
 <template>
     <ActivityPanel v-if="isConfigLoaded" title="Administration" go-to-all-title="Admin Home" href="/admin">
-        <h3>Galaxy Version {{ adminProperties.versionMajor }}</h3>
+        <template v-slot:header>
+            <h3>Galaxy Version {{ adminProperties.versionMajor }}</h3>
+        </template>
         <div class="unified-panel-body">
             <div class="toolMenuContainer">
                 <div class="toolSectionWrapper">

From 6fae9437c4c361ed6e5658e44b04ca33f721ae9a Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 20 May 2024 15:13:40 -0500
Subject: [PATCH 3/3] consolidate css for scroll lists in
 `style/list-item.scss`

---
 .../components/History/HistoryScrollList.vue  | 112 +-----------------
 .../Invocation/InvocationScrollList.vue       | 104 ----------------
 client/src/style/scss/list-item.scss          | 105 ++++++++++++++++
 3 files changed, 107 insertions(+), 214 deletions(-)

diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
index e194f596a0af..dad3c94eb05a 100644
--- a/client/src/components/History/HistoryScrollList.vue
+++ b/client/src/components/History/HistoryScrollList.vue
@@ -235,7 +235,7 @@ async function loadMore(noScroll = false) {
         </div>
 
         <div
-            class="history-list-container"
+            class="scroll-list-container"
             :class="{
                 'in-panel': isMultiviewPanel,
                 'scrolled-top': scrolledTop,
@@ -245,7 +245,7 @@ async function loadMore(noScroll = false) {
                 v-show="!showAdvanced"
                 ref="scrollableDiv"
                 :class="{
-                    'history-scroll-list': !hasNoResults,
+                    'scroll-list': !hasNoResults,
                     'in-panel': isMultiviewPanel,
                     'in-modal': props.inModal,
                     toolMenuContainer: isMultiviewPanel,
@@ -381,111 +381,3 @@ async function loadMore(noScroll = false) {
         </div>
     </div>
 </template>
-
-<style lang="scss" scoped>
-@import "theme/blue.scss";
-
-.flex-column-overflow {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-}
-
-.history-list-container {
-    position: relative;
-
-    &.in-panel {
-        flex-grow: 1;
-    }
-
-    &:not(&.in-panel) {
-        @extend .flex-column-overflow;
-    }
-
-    &:before,
-    &:after {
-        position: absolute;
-        content: "";
-        pointer-events: none;
-        z-index: 10;
-        height: 30px;
-        width: 100%;
-        opacity: 0;
-
-        background-repeat: no-repeat;
-        transition: opacity 0.4s;
-    }
-
-    &:before {
-        top: 0;
-        background-image: linear-gradient(to bottom, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
-    }
-
-    &:not(.scrolled-top) {
-        &:before {
-            opacity: 1;
-        }
-    }
-
-    &:after {
-        bottom: 0;
-        background-image: linear-gradient(to top, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
-    }
-
-    &:not(.scrolled-bottom) {
-        &:after {
-            opacity: 1;
-        }
-    }
-}
-
-.history-scroll-list {
-    overflow-x: hidden;
-    overflow-y: scroll;
-    scroll-behavior: smooth;
-
-    &.in-panel {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-    }
-
-    .list-group {
-        .list-group-item {
-            display: flex;
-            border-radius: 0;
-
-            &.current {
-                border-left: 0.25rem solid $brand-primary;
-            }
-
-            &.panel-item {
-                justify-content: space-between;
-                align-items: center;
-                &:not(&.active) {
-                    background: $panel-bg-color;
-                }
-            }
-
-            &:not(&.panel-item) {
-                &:first-child {
-                    border-top-left-radius: inherit;
-                    border-top-right-radius: inherit;
-                }
-
-                &:last-child {
-                    border-bottom-left-radius: inherit;
-                    border-bottom-right-radius: inherit;
-                }
-            }
-        }
-    }
-    .list-end {
-        width: 100%;
-        text-align: center;
-        color: $text-light;
-    }
-}
-</style>
diff --git a/client/src/components/Workflow/Invocation/InvocationScrollList.vue b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
index 0414674aab1b..0e78c686650f 100644
--- a/client/src/components/Workflow/Invocation/InvocationScrollList.vue
+++ b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
@@ -262,108 +262,4 @@ function workflowName(workflowId: string) {
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
-
-.flex-column-overflow {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-}
-
-.scroll-list-container {
-    position: relative;
-
-    &.in-panel {
-        flex-grow: 1;
-    }
-
-    &:not(&.in-panel) {
-        @extend .flex-column-overflow;
-    }
-
-    &:before,
-    &:after {
-        position: absolute;
-        content: "";
-        pointer-events: none;
-        z-index: 10;
-        height: 30px;
-        width: 100%;
-        opacity: 0;
-
-        background-repeat: no-repeat;
-        transition: opacity 0.4s;
-    }
-
-    &:before {
-        top: 0;
-        background-image: linear-gradient(to bottom, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
-    }
-
-    &:not(.scrolled-top) {
-        &:before {
-            opacity: 1;
-        }
-    }
-
-    &:after {
-        bottom: 0;
-        background-image: linear-gradient(to top, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
-    }
-
-    &:not(.scrolled-bottom) {
-        &:after {
-            opacity: 1;
-        }
-    }
-}
-
-.scroll-list {
-    overflow-x: hidden;
-    overflow-y: scroll;
-    scroll-behavior: smooth;
-
-    &.in-panel {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-    }
-
-    .list-group {
-        .list-group-item {
-            display: flex;
-            border-radius: 0;
-
-            &.current {
-                border-left: 0.25rem solid $brand-primary;
-            }
-
-            &.panel-item {
-                justify-content: space-between;
-                align-items: center;
-                &:not(&.active) {
-                    background: $panel-bg-color;
-                }
-            }
-
-            &:not(&.panel-item) {
-                &:first-child {
-                    border-top-left-radius: inherit;
-                    border-top-right-radius: inherit;
-                }
-
-                &:last-child {
-                    border-bottom-left-radius: inherit;
-                    border-bottom-right-radius: inherit;
-                }
-            }
-        }
-    }
-    .list-end {
-        width: 100%;
-        text-align: center;
-        color: $text-light;
-    }
-}
 </style>
diff --git a/client/src/style/scss/list-item.scss b/client/src/style/scss/list-item.scss
index 2e9611b761d5..90e9a0b98d43 100644
--- a/client/src/style/scss/list-item.scss
+++ b/client/src/style/scss/list-item.scss
@@ -239,3 +239,108 @@ $vertical-gap: 8px;
         }
     }
 }
+
+// ---------------------------------------------------------------------------- a scroll list (like `HistoryScrollList`)
+.flex-column-overflow {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.scroll-list-container {
+    position: relative;
+
+    &.in-panel {
+        flex-grow: 1;
+    }
+
+    &:not(&.in-panel) {
+        @extend .flex-column-overflow;
+    }
+
+    &:before,
+    &:after {
+        position: absolute;
+        content: "";
+        pointer-events: none;
+        z-index: 10;
+        height: 30px;
+        width: 100%;
+        opacity: 0;
+
+        background-repeat: no-repeat;
+        transition: opacity 0.4s;
+    }
+
+    &:before {
+        top: 0;
+        background-image: linear-gradient(to bottom, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
+    }
+
+    &:not(.scrolled-top) {
+        &:before {
+            opacity: 1;
+        }
+    }
+
+    &:after {
+        bottom: 0;
+        background-image: linear-gradient(to top, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
+    }
+
+    &:not(.scrolled-bottom) {
+        &:after {
+            opacity: 1;
+        }
+    }
+}
+
+.scroll-list {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+
+    &.in-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    .list-group {
+        .list-group-item {
+            display: flex;
+            border-radius: 0;
+
+            &.current {
+                border-left: 0.25rem solid $brand-primary;
+            }
+
+            &.panel-item {
+                justify-content: space-between;
+                align-items: center;
+                &:not(&.active) {
+                    background: $panel-bg-color;
+                }
+            }
+
+            &:not(&.panel-item) {
+                &:first-child {
+                    border-top-left-radius: inherit;
+                    border-top-right-radius: inherit;
+                }
+
+                &:last-child {
+                    border-bottom-left-radius: inherit;
+                    border-bottom-right-radius: inherit;
+                }
+            }
+        }
+    }
+    .list-end {
+        width: 100%;
+        text-align: center;
+        color: $text-light;
+    }
+}