[24.1] Move activity panel go to button to top

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>" },
             },

client/src/components/ActivityBar/ActivitySettings.vue

@@ -4,26 +4,27 @@ 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,
     faTrash,
     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">

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>

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;
     }
 }

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>

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,30 +118,17 @@ function userTitle(title: string) {
 
         <template v-slot:header>
             <FilterMenu
-                class="mb-3"
                 name="Histories"
                 placeholder="search histories"
                 :filter-class="HistoriesFilters"
                 :filter-text.sync="filter"
                 :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">

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>

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">