Move activity panel go to button to top

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