From 46c247d3f90ffc04a0b7f5bfac3efcabddce3887 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 7 Apr 2024 07:49:54 +0300
Subject: [PATCH 01/60] Remove masthead icons

---
 client/src/components/Masthead/Masthead.vue |   9 +-
 client/src/entry/analysis/menu.js           | 150 +-------------------
 2 files changed, 5 insertions(+), 154 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 0390029c3951..3b4ff0f44269 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -14,8 +14,6 @@ import MastheadItem from "./MastheadItem";
 import QuotaMeter from "./QuotaMeter";
 import { getActiveTab } from "./utilities";
 
-import NotificationsBell from "@/components/Notifications/NotificationsBell.vue";
-
 const { isAnonymous } = storeToRefs(useUserStore());
 
 const route = useRoute();
@@ -138,13 +136,8 @@ onMounted(() => {
                 :active-tab="activeTab"
                 @open-url="emit('open-url', $event)" />
             <MastheadItem v-if="windowTab" :tab="windowTab" :toggle="windowToggle" @click="onWindowToggle" />
-            <BNavItem
-                v-if="!isAnonymous && isConfigLoaded && config.enable_notification_system"
-                id="notifications-bell">
-                <NotificationsBell tooltip-placement="bottom" />
-            </BNavItem>
+            <QuotaMeter />
         </BNavbarNav>
-        <QuotaMeter />
     </BNavbar>
 </template>
 
diff --git a/client/src/entry/analysis/menu.js b/client/src/entry/analysis/menu.js
index ec1de4f190af..7d5f0adbe8a4 100644
--- a/client/src/entry/analysis/menu.js
+++ b/client/src/entry/analysis/menu.js
@@ -18,124 +18,12 @@ export function fetchMenu(options = {}) {
         target: "_top",
     });
 
-    //
-    // Workflow tab.
-    //
-    menu.push({
-        id: "workflow",
-        title: _l("Workflow"),
-        tooltip: _l("Chain tools into workflows"),
-        disabled: !Galaxy.user.id,
-        url: "/workflows/list",
-    });
-
-    //
-    // Visualization tab.
-    //
-    if (Galaxy.config.visualizations_visible) {
-        menu.push({
-            id: "visualization",
-            title: _l("Visualize"),
-            tooltip: _l("Visualize datasets"),
-            disabled: !Galaxy.user.id,
-            url: "/visualizations",
-        });
-    }
-
-    //
-    // 'Data' tab.
-    //
-    if (Galaxy.user.id) {
-        menu.push({
-            id: "resources",
-            title: _l("Data"),
-            url: "javascript:void(0)",
-            tooltip: _l("Access resources"),
-            menu: [
-                {
-                    title: _l("Data Libraries"),
-                    url: "/libraries",
-                },
-                {
-                    title: _l("Datasets"),
-                    url: "/datasets/list",
-                },
-                {
-                    title: _l("Histories"),
-                    url: "/histories/list",
-                },
-                {
-                    title: _l("Pages"),
-                    url: "/pages/list",
-                },
-                {
-                    title: _l("Visualizations"),
-                    url: "/visualizations/list",
-                },
-                {
-                    title: _l("Workflows"),
-                    url: "/workflows/list",
-                },
-                {
-                    title: _l("Workflow Invocations"),
-                    url: "/workflows/invocations",
-                },
-            ],
-        });
-    } else {
-        menu.push({
-            id: "resources",
-            title: _l("Data"),
-            url: "javascript:void(0)",
-            tooltip: _l("Access published resources"),
-            menu: [
-                {
-                    title: _l("Data Libraries"),
-                    url: "/libraries",
-                },
-                {
-                    title: _l("Histories"),
-                    url: "/histories/list_published",
-                },
-                {
-                    title: _l("Pages"),
-                    url: "/pages/list_published",
-                },
-                {
-                    title: _l("Visualizations"),
-                    url: "/visualizations/list_published",
-                },
-                {
-                    title: _l("Workflows"),
-                    url: "/workflows/list_published",
-                },
-            ],
-        });
-    }
-
-    //
-    // Admin.
-    //
-    if (Galaxy.user.get("is_admin")) {
-        menu.push({
-            id: "admin",
-            title: _l("Admin"),
-            url: "/admin",
-            tooltip: _l("Administer this Galaxy"),
-            cls: "admin-only",
-            onclick: () => {
-                const userStore = useUserStore();
-                userStore.toggleSideBar("admin");
-            },
-        });
-    }
-
     //
     // Help tab.
     //
     const helpTab = {
         id: "help",
-        title: _l("Help"),
+        icon: "fa-question",
         url: "javascript:void(0)",
         tooltip: _l("Support, contact, and community"),
         menu: [
@@ -213,42 +101,12 @@ export function fetchMenu(options = {}) {
     } else {
         userTab = {
             id: "user",
-            title: _l("User"),
+            icon: "fa-sign-out-alt",
             cls: "loggedin-only",
-            url: "javascript:void(0)",
-            tooltip: _l("Account and saved data"),
-            menu: [
-                {
-                    title: `${_l("Signed in as")} ${
-                        Galaxy.user.get("username") ? Galaxy.user.get("username") : Galaxy.user.get("email")
-                    }`,
-                    disabled: true,
-                },
-                { divider: true },
-            ],
-        };
-        if (Galaxy.config.interactivetools_enable) {
-            userTab.menu.push({
-                title: _l("Active Interactive Tools"),
-                url: "/interactivetool_entry_points/list",
-            });
-        }
-        if (Galaxy.config.enable_notification_system) {
-            userTab.menu.push({
-                title: _l("Notifications"),
-                url: "/user/notifications",
-            });
-        }
-        userTab.menu.push({ divider: true });
-        userTab.menu.push({
-            title: _l("Preferences"),
-            url: "/user",
-        });
-        userTab.menu.push({
-            title: _l("Sign Out"),
             onclick: userLogout,
             hidden: Galaxy.config.single_user,
-        });
+            tooltip: _l("Logout"),
+        };
     }
     menu.push(userTab);
     return menu;

From 9cbb3182a25106750dba9139ae489a642f11c870 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 7 Apr 2024 08:17:02 +0300
Subject: [PATCH 02/60] Adjust masthead size

---
 client/src/components/Masthead/Masthead.vue | 15 ++++++++-------
 client/src/style/scss/theme/blue.scss       |  2 +-
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 3b4ff0f44269..cc6680c58158 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -103,7 +103,7 @@ onMounted(() => {
         <BNavbarNav>
             <BNavbarBrand
                 v-b-tooltip.hover
-                class="ml-2 mr-2"
+                class="ml-2 mr-2 p-0"
                 title="Home"
                 aria-label="homepage"
                 :href="withPrefix(logoUrl)">
@@ -177,12 +177,12 @@ onMounted(() => {
                     color: var(--masthead-text-hover);
                 }
                 &.nav-icon {
-                    font-size: 1.3em;
+                    font-size: 1em;
                     .nav-note {
                         position: absolute;
-                        left: 1.9rem;
-                        top: 1.9rem;
-                        font-size: 0.6rem;
+                        left: 1.4rem;
+                        top: 1.4rem;
+                        font-size: 0.4rem;
                         font-weight: bold;
                     }
                 }
@@ -194,11 +194,12 @@ onMounted(() => {
     }
     .navbar-brand {
         cursor: pointer;
+        line-height: $masthead-height;
         img {
             filter: $text-shadow;
             display: inline;
             border: none;
-            height: 2.3rem;
+            height: 2rem;
         }
     }
     .navbar-text {
@@ -206,7 +207,7 @@ onMounted(() => {
         font-weight: bold;
         font-family: Verdana, sans-serif;
         font-size: 1rem;
-        line-height: 2rem;
+        line-height: $masthead-height;
         color: var(--masthead-text-color);
     }
 }
diff --git a/client/src/style/scss/theme/blue.scss b/client/src/style/scss/theme/blue.scss
index 24c9f4972e8a..bd34431a210b 100644
--- a/client/src/style/scss/theme/blue.scss
+++ b/client/src/style/scss/theme/blue.scss
@@ -110,7 +110,7 @@ $input-color-placeholder: $text-muted;
 $body-bg: $white;
 
 // Masthead
-$masthead-height: 3rem;
+$masthead-height: 2.5rem;
 
 // Side panels
 $panel-bg-color: $brand-light;

From 97cc442d9cadd06a68a70aa034838b52994de6f6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 May 2024 11:26:47 +0300
Subject: [PATCH 03/60] Remove masthead dropdown handler, only allow regular
 tabs

---
 .../src/components/Masthead/MastheadItem.vue  | 33 -------------------
 1 file changed, 33 deletions(-)

diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index 889526e01ffa..43d28f9d675f 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -27,7 +27,6 @@ const props = defineProps({
 });
 
 /* computed */
-const menu = computed(() => props.tab.menu);
 const popoverNote = computed(
     () => `Please <a href="${withPrefix("/login")}">log in or register</a> to use this feature.`
 );
@@ -71,7 +70,6 @@ function open(tab, event) {
 
 <template>
     <BNavItem
-        v-if="!menu"
         :id="tab.id"
         v-b-tooltip.hover.bottom
         v-b-popover.manual.bottom="{ id: tab.id, content: popoverNote, html: true }"
@@ -91,35 +89,4 @@ function open(tab, event) {
             {{ tab.title }}
         </template>
     </BNavItem>
-    <BNavItemDropdown
-        v-else
-        :id="tab.id"
-        ref="dropdown"
-        v-b-tooltip.hover.bottom
-        v-b-popover.manual.bottom="{ id: tab.id, content: popoverNote, html: true }"
-        :class="classes"
-        :text="tab.title"
-        href="#"
-        :title="tab.tooltip"
-        @show="open(tab, $event)">
-        <template v-if="tab.icon" v-slot:button-content>
-            <span class="sr-only">{{ tab.tooltip || tab.id }}</span>
-            <span :class="iconClasses" />
-        </template>
-        <template v-for="(item, idx) in tab.menu">
-            <div v-if="item.divider" :key="`divider-${idx}`" class="dropdown-divider" />
-            <BDropdownItem
-                v-else-if="item.hidden !== true"
-                :key="`item-${idx}`"
-                :href="withPrefix(item.url)"
-                :target="item.target || '_parent'"
-                role="menuitem"
-                title=""
-                :active="item.disabled"
-                :disabled="item.disabled"
-                @click="open(item, $event)">
-                {{ item.title }}
-            </BDropdownItem>
-        </template>
-    </BNavItemDropdown>
 </template>

From 43c12261e7165ab7af7d4c16fc3c60c7ab8d1ad8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 May 2024 11:28:02 +0300
Subject: [PATCH 04/60] Remove unused imports from masthead item component

---
 client/src/components/Masthead/MastheadItem.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index 43d28f9d675f..d73887928908 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -1,14 +1,13 @@
 <script setup>
-import { BDropdownItem, BNavItem, BNavItemDropdown, VBPopoverPlugin, VBTooltipPlugin } from "bootstrap-vue";
+import { BNavItem, VBPopoverPlugin, VBTooltipPlugin } from "bootstrap-vue";
 import { withPrefix } from "utils/redirect";
-import Vue, { computed, getCurrentInstance, ref } from "vue";
+import Vue, { computed, getCurrentInstance } from "vue";
 
 Vue.use(VBPopoverPlugin);
 Vue.use(VBTooltipPlugin);
 
 const instance = getCurrentInstance().proxy;
 const emit = defineEmits(["click", "open-url"]);
-const dropdown = ref(null);
 
 /* props */
 const props = defineProps({

From 832d62e7959d8f89f07ef8431956282d4fea4a4c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 May 2024 11:33:38 +0300
Subject: [PATCH 05/60] Start splitting object property into individual
 attributes in masthead

---
 client/src/components/Masthead/Masthead.vue     |  5 ++++-
 client/src/components/Masthead/MastheadItem.vue | 15 +++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index cc6680c58158..3607ad891baa 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -120,18 +120,21 @@ onMounted(() => {
                 v-show="tab.hidden !== true"
                 :key="`tab-${idx}`"
                 :tab="tab"
+                :id="tab.id"
                 :active-tab="activeTab"
                 @open-url="emit('open-url', $event)" />
             <MastheadItem
                 v-show="itsMenu.hidden !== true"
                 :key="`its-tab`"
-                :tab="itsMenu"
+                :id="`extension-tab-${idx}`"
+                :tab="itsMenu.id"
                 :active-tab="activeTab"
                 @open-url="emit('open-url', $event)" />
             <MastheadItem
                 v-for="(tab, idx) in extensionTabs"
                 v-show="tab.hidden !== true"
                 :key="`extension-tab-${idx}`"
+                :id="tab.id"
                 :tab="tab"
                 :active-tab="activeTab"
                 @open-url="emit('open-url', $event)" />
diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index d73887928908..4115e3039cca 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -15,6 +15,9 @@ const props = defineProps({
         type: Object,
         default: null,
     },
+    id: {
+        type: String,
+    },
     toggle: {
         type: Boolean,
         default: false,
@@ -30,7 +33,7 @@ const popoverNote = computed(
     () => `Please <a href="${withPrefix("/login")}">log in or register</a> to use this feature.`
 );
 const classes = computed(() => {
-    const isActiveTab = props.tab.id == props.activeTab;
+    const isActiveTab = props.id == props.activeTab;
     return Object.fromEntries([
         ["active", isActiveTab],
         [props.tab.cls, !!props.tab.cls],
@@ -56,9 +59,9 @@ function open(tab, event) {
     } else if (tab.disabled) {
         event.preventDefault();
         instance.$root.$emit("bv::hide::tooltip");
-        instance.$root.$emit("bv::show::popover", tab.id);
+        instance.$root.$emit("bv::show::popover", id);
         setTimeout(() => {
-            instance.$root.$emit("bv::hide::popover", tab.id);
+            instance.$root.$emit("bv::hide::popover", id);
         }, 3000);
     } else if (!tab.menu) {
         event.preventDefault();
@@ -69,9 +72,9 @@ function open(tab, event) {
 
 <template>
     <BNavItem
-        :id="tab.id"
+        :id="id"
         v-b-tooltip.hover.bottom
-        v-b-popover.manual.bottom="{ id: tab.id, content: popoverNote, html: true }"
+        v-b-popover.manual.bottom="{ id: id, content: popoverNote, html: true }"
         :class="classes"
         :href="withPrefix(tab.url)"
         :target="tab.target || '_parent'"
@@ -80,7 +83,7 @@ function open(tab, event) {
         @click="open(tab, $event)">
         <template v-if="tab.icon">
             <!-- If this is an icon-based tab, inject tooltip directly for screen readers -->
-            <span class="sr-only">{{ tab.tooltip || tab.id }}</span>
+            <span class="sr-only">{{ tab.tooltip || id }}</span>
             <span :class="iconClasses" />
             <span v-if="toggle" class="nav-note fa fa-check" />
         </template>

From bb46203d1e36e855a7dd69788117217cb3c97bbf Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 May 2024 11:35:37 +0300
Subject: [PATCH 06/60] Remove interactive tools from masthead, since already
 available in the activity bar

---
 client/src/components/Masthead/Masthead.vue | 30 +--------------------
 1 file changed, 1 insertion(+), 29 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 3607ad891baa..ff01db9c6a40 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -1,9 +1,8 @@
 <script setup>
 import { BNavbar, BNavbarBrand, BNavbarNav } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { useEntryPointStore } from "stores/entryPointStore";
 import { withPrefix } from "utils/redirect";
-import { onBeforeMount, onMounted, reactive, ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router/composables";
 
 import { useConfig } from "@/composables/config";
@@ -56,15 +55,6 @@ const activeTab = ref(props.initialActiveTab);
 const extensionTabs = ref([]);
 const windowToggle = ref(false);
 
-let entryPointStore;
-const itsMenu = reactive({
-    id: "interactive",
-    url: "/interactivetool_entry_points/list",
-    tooltip: "See Running Interactive Tools",
-    icon: "fa-cogs",
-    hidden: true,
-});
-
 function setActiveTab() {
     const currentRoute = route.path;
     activeTab.value = getActiveTab(currentRoute, props.tabs) || activeTab.value;
@@ -73,9 +63,6 @@ function setActiveTab() {
 function onWindowToggle() {
     windowToggle.value = !windowToggle.value;
 }
-function updateVisibility(isActive) {
-    itsMenu.hidden = !isActive;
-}
 
 watch(
     () => route.path,
@@ -84,14 +71,6 @@ watch(
     }
 );
 
-/* lifecyle */
-onBeforeMount(() => {
-    entryPointStore = useEntryPointStore();
-    entryPointStore.startWatchingEntryPoints();
-    entryPointStore.$subscribe((mutation, state) => {
-        updateVisibility(state.entryPoints.length > 0);
-    });
-});
 onMounted(() => {
     loadWebhookMenuItems(extensionTabs.value);
     setActiveTab();
@@ -123,13 +102,6 @@ onMounted(() => {
                 :id="tab.id"
                 :active-tab="activeTab"
                 @open-url="emit('open-url', $event)" />
-            <MastheadItem
-                v-show="itsMenu.hidden !== true"
-                :key="`its-tab`"
-                :id="`extension-tab-${idx}`"
-                :tab="itsMenu.id"
-                :active-tab="activeTab"
-                @open-url="emit('open-url', $event)" />
             <MastheadItem
                 v-for="(tab, idx) in extensionTabs"
                 v-show="tab.hidden !== true"

From d11ab548b3d70866dfab0dc3db369885f2bcd698 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 May 2024 11:37:44 +0300
Subject: [PATCH 07/60] Remove pseudo class handling, will use id instead

---
 client/src/components/Masthead/MastheadItem.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index 4115e3039cca..e6171be116db 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -32,13 +32,6 @@ const props = defineProps({
 const popoverNote = computed(
     () => `Please <a href="${withPrefix("/login")}">log in or register</a> to use this feature.`
 );
-const classes = computed(() => {
-    const isActiveTab = props.id == props.activeTab;
-    return Object.fromEntries([
-        ["active", isActiveTab],
-        [props.tab.cls, !!props.tab.cls],
-    ]);
-});
 const linkClasses = computed(() => ({
     "nav-icon": props.tab.icon,
     toggle: props.toggle,
@@ -75,7 +68,6 @@ function open(tab, event) {
         :id="id"
         v-b-tooltip.hover.bottom
         v-b-popover.manual.bottom="{ id: id, content: popoverNote, html: true }"
-        :class="classes"
         :href="withPrefix(tab.url)"
         :target="tab.target || '_parent'"
         :link-classes="linkClasses"

From 5d5301f6422f2a21954fd2f0f32735f521574930 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 May 2024 18:18:13 +0300
Subject: [PATCH 08/60] Move away from json blob configuration for masthead
 options

---
 client/src/components/Masthead/Masthead.vue   | 29 ++++++--
 .../src/components/Masthead/MastheadItem.vue  | 73 ++++++-------------
 client/src/entry/analysis/App.vue             | 15 +---
 client/src/entry/analysis/menu.js             | 15 +---
 4 files changed, 51 insertions(+), 81 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index ff01db9c6a40..7096db562c6f 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -3,7 +3,7 @@ import { BNavbar, BNavbarBrand, BNavbarNav } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { withPrefix } from "utils/redirect";
 import { onMounted, ref, watch } from "vue";
-import { useRoute } from "vue-router/composables";
+import { useRoute, useRouter } from "vue-router/composables";
 
 import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
@@ -16,6 +16,7 @@ import { getActiveTab } from "./utilities";
 const { isAnonymous } = storeToRefs(useUserStore());
 
 const route = useRoute();
+const router = useRouter();
 const { config, isConfigLoaded } = useConfig();
 
 const emit = defineEmits(["open-url"]);
@@ -60,6 +61,19 @@ function setActiveTab() {
     activeTab.value = getActiveTab(currentRoute, props.tabs) || activeTab.value;
 }
 
+function openUrl(url, target = null) {
+    if (!target) {
+        router.push(url);
+    } else {
+        url = withPrefix(url);
+        if (target == "_blank") {
+            window.open(url);
+        } else {
+            window.location = url;
+        }
+    }
+}
+
 function onWindowToggle() {
     windowToggle.value = !windowToggle.value;
 }
@@ -94,22 +108,27 @@ onMounted(() => {
             </span>
         </BNavbarNav>
         <BNavbarNav>
+            <MastheadItem
+                id="analysis"
+                title="Tools and Current History"
+                icon="fa fa-home"
+                @click="openUrl('/', '_top')" />
             <MastheadItem
                 v-for="(tab, idx) in props.tabs"
                 v-show="tab.hidden !== true"
                 :key="`tab-${idx}`"
                 :tab="tab"
                 :id="tab.id"
-                :active-tab="activeTab"
-                @open-url="emit('open-url', $event)" />
+                :title="tab.title"
+                :icon="tab.icon"
+                :active-tab="activeTab" />
             <MastheadItem
                 v-for="(tab, idx) in extensionTabs"
                 v-show="tab.hidden !== true"
                 :key="`extension-tab-${idx}`"
                 :id="tab.id"
                 :tab="tab"
-                :active-tab="activeTab"
-                @open-url="emit('open-url', $event)" />
+                :active-tab="activeTab" />
             <MastheadItem v-if="windowTab" :tab="windowTab" :toggle="windowToggle" @click="onWindowToggle" />
             <QuotaMeter />
         </BNavbarNav>
diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index e6171be116db..af1135883003 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -1,66 +1,41 @@
 <script setup>
 import { BNavItem, VBPopoverPlugin, VBTooltipPlugin } from "bootstrap-vue";
 import { withPrefix } from "utils/redirect";
-import Vue, { computed, getCurrentInstance } from "vue";
+import Vue from "vue";
 
 Vue.use(VBPopoverPlugin);
 Vue.use(VBTooltipPlugin);
 
-const instance = getCurrentInstance().proxy;
 const emit = defineEmits(["click", "open-url"]);
 
 /* props */
 const props = defineProps({
-    tab: {
-        type: Object,
-        default: null,
+    disabled: {
+        type: Boolean,
     },
     id: {
         type: String,
     },
+    icon: { 
+        type: String,
+    },
+    target: {
+        type: String,
+    },
+    title: {
+        type: String,
+    },
+    tooltip: {
+        type: String,
+    },
     toggle: {
         type: Boolean,
         default: false,
     },
-    activeTab: {
+    url: {
         type: String,
-        default: null,
     },
 });
-
-/* computed */
-const popoverNote = computed(
-    () => `Please <a href="${withPrefix("/login")}">log in or register</a> to use this feature.`
-);
-const linkClasses = computed(() => ({
-    "nav-icon": props.tab.icon,
-    toggle: props.toggle,
-}));
-const iconClasses = computed(() =>
-    Object.fromEntries([
-        ["fa fa-fw", true],
-        [props.tab.icon, !!props.tab.icon],
-    ])
-);
-
-/* methods */
-function open(tab, event) {
-    if (tab.onclick) {
-        event.preventDefault();
-        tab.onclick();
-        emit("click");
-    } else if (tab.disabled) {
-        event.preventDefault();
-        instance.$root.$emit("bv::hide::tooltip");
-        instance.$root.$emit("bv::show::popover", id);
-        setTimeout(() => {
-            instance.$root.$emit("bv::hide::popover", id);
-        }, 3000);
-    } else if (!tab.menu) {
-        event.preventDefault();
-        emit("open-url", { ...tab });
-    }
-}
 </script>
 
 <template>
@@ -68,19 +43,19 @@ function open(tab, event) {
         :id="id"
         v-b-tooltip.hover.bottom
         v-b-popover.manual.bottom="{ id: id, content: popoverNote, html: true }"
-        :href="withPrefix(tab.url)"
-        :target="tab.target || '_parent'"
+        :href="withPrefix(url)"
+        :target="target || '_parent'"
         :link-classes="linkClasses"
-        :title="tab.tooltip"
-        @click="open(tab, $event)">
-        <template v-if="tab.icon">
+        :title="tooltip"
+        @click="$emit('click')">
+        <template v-if="icon">
             <!-- If this is an icon-based tab, inject tooltip directly for screen readers -->
-            <span class="sr-only">{{ tab.tooltip || id }}</span>
-            <span :class="iconClasses" />
+            <span class="sr-only">{{ tooltip || id }}</span>
+            <span :class="icon" />
             <span v-if="toggle" class="nav-note fa fa-check" />
         </template>
         <template v-else>
-            {{ tab.title }}
+            {{ title }}
         </template>
     </BNavItem>
 </template>
diff --git a/client/src/entry/analysis/App.vue b/client/src/entry/analysis/App.vue
index a494dfde2012..c0e5f881785a 100644
--- a/client/src/entry/analysis/App.vue
+++ b/client/src/entry/analysis/App.vue
@@ -11,8 +11,7 @@
                     :logo-src="theme?.['--masthead-logo-img'] ?? config.logo_src"
                     :logo-src-secondary="theme?.['--masthead-logo-img-secondary'] ?? config.logo_src_secondary"
                     :tabs="tabs"
-                    :window-tab="windowTab"
-                    @open-url="openUrl" />
+                    :window-tab="windowTab" />
                 <Alert
                     v-if="config.message_box_visible && config.message_box_content"
                     id="messagebox"
@@ -197,18 +196,6 @@ export default {
             const notificationsStore = useNotificationsStore();
             notificationsStore.startWatchingNotifications();
         },
-        openUrl(urlObj) {
-            if (!urlObj.target) {
-                this.$router.push(urlObj.url);
-            } else {
-                const url = withPrefix(urlObj.url);
-                if (urlObj.target == "_blank") {
-                    window.open(url);
-                } else {
-                    window.location = url;
-                }
-            }
-        },
     },
 };
 </script>
diff --git a/client/src/entry/analysis/menu.js b/client/src/entry/analysis/menu.js
index 7d5f0adbe8a4..478e1d648ce7 100644
--- a/client/src/entry/analysis/menu.js
+++ b/client/src/entry/analysis/menu.js
@@ -7,23 +7,12 @@ import { useUserStore } from "@/stores/userStore";
 export function fetchMenu(options = {}) {
     const Galaxy = getGalaxyInstance();
     const menu = [];
-    //
-    // Analyze data tab.
-    //
-    menu.push({
-        id: "analysis",
-        url: "/",
-        tooltip: _l("Tools and Current History"),
-        icon: "fa-home",
-        target: "_top",
-    });
-
     //
     // Help tab.
     //
     const helpTab = {
         id: "help",
-        icon: "fa-question",
+        icon: "fa fa-question",
         url: "javascript:void(0)",
         tooltip: _l("Support, contact, and community"),
         menu: [
@@ -101,7 +90,7 @@ export function fetchMenu(options = {}) {
     } else {
         userTab = {
             id: "user",
-            icon: "fa-sign-out-alt",
+            icon: "fa fa-sign-out-alt",
             cls: "loggedin-only",
             onclick: userLogout,
             hidden: Galaxy.config.single_user,

From 0eb2203870629f99c2a32678752a1f67b43a49ce Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 May 2024 18:23:18 +0300
Subject: [PATCH 09/60] Decouple menu.js configuration module

---
 client/src/components/Masthead/Masthead.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 7096db562c6f..06d6d48ac6a3 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -13,6 +13,7 @@ import MastheadItem from "./MastheadItem";
 import QuotaMeter from "./QuotaMeter";
 import { getActiveTab } from "./utilities";
 
+import { userLogout } from "utils/logout";
 const { isAnonymous } = storeToRefs(useUserStore());
 
 const route = useRoute();
@@ -114,14 +115,15 @@ onMounted(() => {
                 icon="fa fa-home"
                 @click="openUrl('/', '_top')" />
             <MastheadItem
-                v-for="(tab, idx) in props.tabs"
-                v-show="tab.hidden !== true"
-                :key="`tab-${idx}`"
-                :tab="tab"
-                :id="tab.id"
-                :title="tab.title"
-                :icon="tab.icon"
-                :active-tab="activeTab" />
+                id="help"
+                title="Support, contact, and community"
+                icon="fa fa-question"
+                @click="openUrl('/about', '_top')" />
+            <MastheadItem
+                id="user"
+                title="Logout"
+                icon="fa fa-sign-out-alt"
+                @click="userLogout" />
             <MastheadItem
                 v-for="(tab, idx) in extensionTabs"
                 v-show="tab.hidden !== true"

From 723f92d78e1518e4e4750a7bb5b38a0e48ec1434 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 May 2024 18:25:03 +0300
Subject: [PATCH 10/60] Delete menu.js

---
 client/src/entry/analysis/App.vue |   5 --
 client/src/entry/analysis/menu.js | 102 ------------------------------
 2 files changed, 107 deletions(-)
 delete mode 100644 client/src/entry/analysis/menu.js

diff --git a/client/src/entry/analysis/App.vue b/client/src/entry/analysis/App.vue
index c0e5f881785a..58c554ce73a5 100644
--- a/client/src/entry/analysis/App.vue
+++ b/client/src/entry/analysis/App.vue
@@ -10,7 +10,6 @@
                     :logo-url="config.logo_url"
                     :logo-src="theme?.['--masthead-logo-img'] ?? config.logo_src"
                     :logo-src-secondary="theme?.['--masthead-logo-img-secondary'] ?? config.logo_src_secondary"
-                    :tabs="tabs"
                     :window-tab="windowTab" />
                 <Alert
                     v-if="config.message_box_visible && config.message_box_content"
@@ -54,7 +53,6 @@ import Toast from "components/Toast";
 import { setConfirmDialogComponentRef } from "composables/confirmDialog";
 import { setGlobalUploadModal } from "composables/globalUploadModal";
 import { setToastComponentRef } from "composables/toast";
-import { fetchMenu } from "entry/analysis/menu";
 import { WindowManager } from "layout/window-manager";
 import Modal from "mvc/ui/ui-modal";
 import { getAppRoot } from "onload";
@@ -133,9 +131,6 @@ export default {
         };
     },
     computed: {
-        tabs() {
-            return fetchMenu(this.config);
-        },
         showMasthead() {
             const masthead = this.$route.query.hide_masthead;
             if (masthead !== undefined) {
diff --git a/client/src/entry/analysis/menu.js b/client/src/entry/analysis/menu.js
deleted file mode 100644
index 478e1d648ce7..000000000000
--- a/client/src/entry/analysis/menu.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { getGalaxyInstance } from "app";
-import _l from "utils/localization";
-import { userLogout } from "utils/logout";
-
-import { useUserStore } from "@/stores/userStore";
-
-export function fetchMenu(options = {}) {
-    const Galaxy = getGalaxyInstance();
-    const menu = [];
-    //
-    // Help tab.
-    //
-    const helpTab = {
-        id: "help",
-        icon: "fa fa-question",
-        url: "javascript:void(0)",
-        tooltip: _l("Support, contact, and community"),
-        menu: [
-            {
-                title: _l("Galaxy Help"),
-                url: options.helpsite_url,
-                target: "_blank",
-                hidden: !options.helpsite_url,
-            },
-            {
-                title: _l("Support"),
-                url: options.support_url,
-                target: "_blank",
-                hidden: !options.support_url,
-            },
-            {
-                title: _l("Videos"),
-                url: options.screencasts_url,
-                target: "_blank",
-                hidden: !options.screencasts_url,
-            },
-            {
-                title: _l("Community Hub"),
-                url: options.wiki_url,
-                target: "_blank",
-                hidden: !options.wiki_url,
-            },
-            {
-                title: _l("How to Cite Galaxy"),
-                url: options.citation_url,
-                target: "_blank",
-            },
-            {
-                title: _l("Interactive Tours"),
-                url: "/tours",
-            },
-            {
-                title: _l("About"),
-                url: "/about",
-            },
-            {
-                title: _l("Terms and Conditions"),
-                url: options.terms_url,
-                target: "_blank",
-                hidden: !options.terms_url,
-            },
-        ],
-    };
-    menu.push(helpTab);
-
-    //
-    // User tab.
-    //
-    let userTab = {};
-    if (!Galaxy.user.id) {
-        if (options.allow_user_creation) {
-            userTab = {
-                id: "user",
-                title: _l("Log in or Register"),
-                cls: "loggedout-only",
-                url: "/login",
-                tooltip: _l("Log in or register a new account"),
-                target: "_top",
-            };
-        } else {
-            userTab = {
-                id: "user",
-                title: _l("Login"),
-                cls: "loggedout-only",
-                tooltip: _l("Login"),
-                url: "/login",
-                target: "_top",
-            };
-        }
-    } else {
-        userTab = {
-            id: "user",
-            icon: "fa fa-sign-out-alt",
-            cls: "loggedin-only",
-            onclick: userLogout,
-            hidden: Galaxy.config.single_user,
-            tooltip: _l("Logout"),
-        };
-    }
-    menu.push(userTab);
-    return menu;
-}

From 2e49d3f7a9eb1946ced1a858933acbd6d0f0761a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 May 2024 18:33:39 +0300
Subject: [PATCH 11/60] Fix icon handling

---
 client/src/components/Masthead/Masthead.vue     | 17 +++++++++--------
 client/src/components/Masthead/MastheadItem.vue |  2 +-
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 06d6d48ac6a3..e612c5c306fc 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { BNavbar, BNavbarBrand, BNavbarNav } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
+import { userLogout } from "utils/logout";
 import { withPrefix } from "utils/redirect";
 import { onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router/composables";
@@ -13,7 +14,6 @@ import MastheadItem from "./MastheadItem";
 import QuotaMeter from "./QuotaMeter";
 import { getActiveTab } from "./utilities";
 
-import { userLogout } from "utils/logout";
 const { isAnonymous } = storeToRefs(useUserStore());
 
 const route = useRoute();
@@ -112,26 +112,27 @@ onMounted(() => {
             <MastheadItem
                 id="analysis"
                 title="Tools and Current History"
-                icon="fa fa-home"
+                icon="fa-home"
                 @click="openUrl('/', '_top')" />
             <MastheadItem
                 id="help"
                 title="Support, contact, and community"
-                icon="fa fa-question"
-                @click="openUrl('/about', '_top')" />
+                icon="fa-question"
+                @click="openUrl('/about')" />
             <MastheadItem
                 id="user"
                 title="Logout"
-                icon="fa fa-sign-out-alt"
+                icon="fa-sign-out-alt"
                 @click="userLogout" />
             <MastheadItem
                 v-for="(tab, idx) in extensionTabs"
                 v-show="tab.hidden !== true"
-                :key="`extension-tab-${idx}`"
                 :id="tab.id"
-                :tab="tab"
+                :key="`extension-tab-${idx}`"
+                :title="tab.title"
+                :icon="tab.icon"
                 :active-tab="activeTab" />
-            <MastheadItem v-if="windowTab" :tab="windowTab" :toggle="windowToggle" @click="onWindowToggle" />
+            <MastheadItem v-if="windowTab" :id="windowTab.id" :title="windowTab.title" :icon="windowTab.icon" :toggle="windowToggle" @click="onWindowToggle" />
             <QuotaMeter />
         </BNavbarNav>
     </BNavbar>
diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index af1135883003..b0b9aa3ba528 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -51,7 +51,7 @@ const props = defineProps({
         <template v-if="icon">
             <!-- If this is an icon-based tab, inject tooltip directly for screen readers -->
             <span class="sr-only">{{ tooltip || id }}</span>
-            <span :class="icon" />
+            <span :class="`fa ${icon}`" />
             <span v-if="toggle" class="nav-note fa fa-check" />
         </template>
         <template v-else>

From 9827dcb8acf80d9bcbf67b2193d9f183da33cc01 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 May 2024 18:34:14 +0300
Subject: [PATCH 12/60] Remove unused props from masthead

---
 client/src/components/Masthead/Masthead.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index e612c5c306fc..1877e8aead8c 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -23,18 +23,10 @@ const { config, isConfigLoaded } = useConfig();
 const emit = defineEmits(["open-url"]);
 
 const props = defineProps({
-    tabs: {
-        type: Array,
-        default: () => [],
-    },
     brand: {
         type: String,
         default: null,
     },
-    initialActiveTab: {
-        type: String,
-        default: "analysis",
-    },
     logoUrl: {
         type: String,
         default: null,

From 080a72afb453097e82cd4e6390c8dda7de1543c9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 May 2024 18:42:44 +0300
Subject: [PATCH 13/60] Fix window manager handling in masthead

---
 client/src/components/Masthead/Masthead.vue     | 6 +++++-
 client/src/components/Masthead/MastheadItem.vue | 1 -
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 1877e8aead8c..658430a8c818 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -69,6 +69,7 @@ function openUrl(url, target = null) {
 
 function onWindowToggle() {
     windowToggle.value = !windowToggle.value;
+    props.windowTab.onclick();
 }
 
 watch(
@@ -123,7 +124,10 @@ onMounted(() => {
                 :key="`extension-tab-${idx}`"
                 :title="tab.title"
                 :icon="tab.icon"
-                :active-tab="activeTab" />
+                :url="tab.url"
+                :tooltip="tab.tooltip"
+                :target="tab.target"
+                @click="tab.onclick" />
             <MastheadItem v-if="windowTab" :id="windowTab.id" :title="windowTab.title" :icon="windowTab.icon" :toggle="windowToggle" @click="onWindowToggle" />
             <QuotaMeter />
         </BNavbarNav>
diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index b0b9aa3ba528..222facca5a30 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -42,7 +42,6 @@ const props = defineProps({
     <BNavItem
         :id="id"
         v-b-tooltip.hover.bottom
-        v-b-popover.manual.bottom="{ id: id, content: popoverNote, html: true }"
         :href="withPrefix(url)"
         :target="target || '_parent'"
         :link-classes="linkClasses"

From 6dcc6f8b66fc82af7afe38ad29948f571e892abc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 21 May 2024 08:38:26 +0300
Subject: [PATCH 14/60] Reorder masthead tabs

---
 client/src/components/Masthead/Masthead.vue | 22 ++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 658430a8c818..bd64d201df54 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -107,16 +107,7 @@ onMounted(() => {
                 title="Tools and Current History"
                 icon="fa-home"
                 @click="openUrl('/', '_top')" />
-            <MastheadItem
-                id="help"
-                title="Support, contact, and community"
-                icon="fa-question"
-                @click="openUrl('/about')" />
-            <MastheadItem
-                id="user"
-                title="Logout"
-                icon="fa-sign-out-alt"
-                @click="userLogout" />
+            <MastheadItem v-if="windowTab" :id="windowTab.id" :title="windowTab.title" :icon="windowTab.icon" :toggle="windowToggle" @click="onWindowToggle" />
             <MastheadItem
                 v-for="(tab, idx) in extensionTabs"
                 v-show="tab.hidden !== true"
@@ -128,8 +119,17 @@ onMounted(() => {
                 :tooltip="tab.tooltip"
                 :target="tab.target"
                 @click="tab.onclick" />
-            <MastheadItem v-if="windowTab" :id="windowTab.id" :title="windowTab.title" :icon="windowTab.icon" :toggle="windowToggle" @click="onWindowToggle" />
+            <MastheadItem
+                id="help"
+                title="Support, contact, and community"
+                icon="fa-question"
+                @click="openUrl('/about')" />
             <QuotaMeter />
+            <MastheadItem
+                id="user"
+                title="Logout"
+                icon="fa-sign-out-alt"
+                @click="userLogout" />
         </BNavbarNav>
     </BNavbar>
 </template>

From e2459199785cbc975f2f0a0b38052b77d24dfec8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 21 May 2024 10:07:20 +0300
Subject: [PATCH 15/60] Fix icon handling, avoid reload when returning to home

---
 client/src/components/Masthead/Masthead.vue     | 2 +-
 client/src/components/Masthead/MastheadItem.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index bd64d201df54..a26eaa7dff39 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -106,7 +106,7 @@ onMounted(() => {
                 id="analysis"
                 title="Tools and Current History"
                 icon="fa-home"
-                @click="openUrl('/', '_top')" />
+                @click="openUrl('/')" />
             <MastheadItem v-if="windowTab" :id="windowTab.id" :title="windowTab.title" :icon="windowTab.icon" :toggle="windowToggle" @click="onWindowToggle" />
             <MastheadItem
                 v-for="(tab, idx) in extensionTabs"
diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index 222facca5a30..12d1df9f3f4b 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -44,13 +44,13 @@ const props = defineProps({
         v-b-tooltip.hover.bottom
         :href="withPrefix(url)"
         :target="target || '_parent'"
-        :link-classes="linkClasses"
+        link-classes="nav-icon"
         :title="tooltip"
         @click="$emit('click')">
         <template v-if="icon">
             <!-- If this is an icon-based tab, inject tooltip directly for screen readers -->
             <span class="sr-only">{{ tooltip || id }}</span>
-            <span :class="`fa ${icon}`" />
+            <span :class="`fa fa-fw ${icon}`" />
             <span v-if="toggle" class="nav-note fa fa-check" />
         </template>
         <template v-else>

From 06709ff1916254598b328ecaaaf429724a74a65f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 21 May 2024 13:38:31 +0300
Subject: [PATCH 16/60] Fix toggle state, adjust icon styles

---
 client/src/components/Masthead/Masthead.vue     | 13 ++++++++++---
 client/src/components/Masthead/MastheadItem.vue |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index a26eaa7dff39..e3160ae786dd 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -126,6 +126,12 @@ onMounted(() => {
                 @click="openUrl('/about')" />
             <QuotaMeter />
             <MastheadItem
+                v-if="isAnonymous"
+                id="user"
+                title="Log in or Register"
+                @click="openUrl('/login/start')" />
+            <MastheadItem
+                v-else
                 id="user"
                 title="Logout"
                 icon="fa-sign-out-alt"
@@ -166,15 +172,16 @@ onMounted(() => {
                 cursor: pointer;
                 text-decoration: none;
                 color: var(--masthead-text-color);
+                margin-right: 0.25rem;
                 &:hover {
                     color: var(--masthead-text-hover);
                 }
                 &.nav-icon {
-                    font-size: 1em;
+                    font-size: 1.2em;
                     .nav-note {
                         position: absolute;
-                        left: 1.4rem;
-                        top: 1.4rem;
+                        left: 1.6rem;
+                        top: 1.6rem;
                         font-size: 0.4rem;
                         font-weight: bold;
                     }
diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index 12d1df9f3f4b..b504eeff616f 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -44,7 +44,7 @@ const props = defineProps({
         v-b-tooltip.hover.bottom
         :href="withPrefix(url)"
         :target="target || '_parent'"
-        link-classes="nav-icon"
+        :link-classes="{ 'nav-icon': !!icon, 'toggle': toggle }"
         :title="tooltip"
         @click="$emit('click')">
         <template v-if="icon">

From e978ee04072e4554128dfb9c870e6830101a8aca Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 21 May 2024 18:27:55 +0300
Subject: [PATCH 17/60] Add configuration conditions

---
 client/src/components/Masthead/Masthead.vue   | 31 +++++++++++++------
 .../src/components/Masthead/MastheadItem.vue  |  8 ++---
 client/src/entry/analysis/App.vue             |  1 -
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index e3160ae786dd..2c12092a5970 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -20,8 +20,6 @@ const route = useRoute();
 const router = useRouter();
 const { config, isConfigLoaded } = useConfig();
 
-const emit = defineEmits(["open-url"]);
-
 const props = defineProps({
     brand: {
         type: String,
@@ -86,7 +84,13 @@ onMounted(() => {
 </script>
 
 <template>
-    <BNavbar id="masthead" type="dark" role="navigation" aria-label="Main" class="justify-content-between">
+    <BNavbar
+        v-if="isConfigLoaded"
+        id="masthead"
+        type="dark"
+        role="navigation"
+        aria-label="Main"
+        class="justify-content-between">
         <BNavbarNav>
             <BNavbarBrand
                 v-b-tooltip.hover
@@ -102,12 +106,14 @@ onMounted(() => {
             </span>
         </BNavbarNav>
         <BNavbarNav>
+            <MastheadItem id="analysis" title="Tools and Current History" icon="fa-home" @click="openUrl('/')" />
             <MastheadItem
-                id="analysis"
-                title="Tools and Current History"
-                icon="fa-home"
-                @click="openUrl('/')" />
-            <MastheadItem v-if="windowTab" :id="windowTab.id" :title="windowTab.title" :icon="windowTab.icon" :toggle="windowToggle" @click="onWindowToggle" />
+                v-if="windowTab"
+                :id="windowTab.id"
+                :title="windowTab.title"
+                :icon="windowTab.icon"
+                :toggle="windowToggle"
+                @click="onWindowToggle" />
             <MastheadItem
                 v-for="(tab, idx) in extensionTabs"
                 v-show="tab.hidden !== true"
@@ -126,12 +132,17 @@ onMounted(() => {
                 @click="openUrl('/about')" />
             <QuotaMeter />
             <MastheadItem
-                v-if="isAnonymous"
+                v-if="isAnonymous && config.allow_user_creation"
                 id="user"
                 title="Log in or Register"
                 @click="openUrl('/login/start')" />
             <MastheadItem
-                v-else
+                v-if="isAnonymous && !config.allow_user_creation"
+                id="user"
+                title="Login"
+                @click="openUrl('/login/start')" />
+            <MastheadItem
+                v-if="!isAnonymous && !config.single_user"
                 id="user"
                 title="Logout"
                 icon="fa-sign-out-alt"
diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index b504eeff616f..32945d408441 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -6,17 +6,15 @@ import Vue from "vue";
 Vue.use(VBPopoverPlugin);
 Vue.use(VBTooltipPlugin);
 
-const emit = defineEmits(["click", "open-url"]);
-
 /* props */
-const props = defineProps({
+defineProps({
     disabled: {
         type: Boolean,
     },
     id: {
         type: String,
     },
-    icon: { 
+    icon: {
         type: String,
     },
     target: {
@@ -44,7 +42,7 @@ const props = defineProps({
         v-b-tooltip.hover.bottom
         :href="withPrefix(url)"
         :target="target || '_parent'"
-        :link-classes="{ 'nav-icon': !!icon, 'toggle': toggle }"
+        :link-classes="{ 'nav-icon': !!icon, toggle: toggle }"
         :title="tooltip"
         @click="$emit('click')">
         <template v-if="icon">
diff --git a/client/src/entry/analysis/App.vue b/client/src/entry/analysis/App.vue
index 58c554ce73a5..0e337084f459 100644
--- a/client/src/entry/analysis/App.vue
+++ b/client/src/entry/analysis/App.vue
@@ -57,7 +57,6 @@ import { WindowManager } from "layout/window-manager";
 import Modal from "mvc/ui/ui-modal";
 import { getAppRoot } from "onload";
 import { storeToRefs } from "pinia";
-import { withPrefix } from "utils/redirect";
 import { ref, watch } from "vue";
 
 import short from "@/components/plugins/short";

From 636f6f42c1a8d58db707b592ceafea539c5016d7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 21 May 2024 18:47:26 +0300
Subject: [PATCH 18/60] Show navbar while loading config, reduce margin

---
 client/src/components/Masthead/Masthead.vue | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 2c12092a5970..013208bb8ff4 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -84,13 +84,7 @@ onMounted(() => {
 </script>
 
 <template>
-    <BNavbar
-        v-if="isConfigLoaded"
-        id="masthead"
-        type="dark"
-        role="navigation"
-        aria-label="Main"
-        class="justify-content-between">
+    <BNavbar id="masthead" type="dark" role="navigation" aria-label="Main" class="justify-content-between">
         <BNavbarNav>
             <BNavbarBrand
                 v-b-tooltip.hover
@@ -105,7 +99,7 @@ onMounted(() => {
                 {{ brand }}
             </span>
         </BNavbarNav>
-        <BNavbarNav>
+        <BNavbarNav v-if="isConfigLoaded">
             <MastheadItem id="analysis" title="Tools and Current History" icon="fa-home" @click="openUrl('/')" />
             <MastheadItem
                 v-if="windowTab"
@@ -183,7 +177,6 @@ onMounted(() => {
                 cursor: pointer;
                 text-decoration: none;
                 color: var(--masthead-text-color);
-                margin-right: 0.25rem;
                 &:hover {
                     color: var(--masthead-text-hover);
                 }

From 18caa0ebdda308700ca3670ce1dd8052b3deaf18 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 21 May 2024 18:59:41 +0300
Subject: [PATCH 19/60] Move quota margin to navbar, adjust alignment

---
 client/src/components/Masthead/Masthead.vue   | 4 +++-
 client/src/components/Masthead/QuotaMeter.vue | 1 -
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 013208bb8ff4..f3612d810349 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -99,7 +99,7 @@ onMounted(() => {
                 {{ brand }}
             </span>
         </BNavbarNav>
-        <BNavbarNav v-if="isConfigLoaded">
+        <BNavbarNav v-if="isConfigLoaded" class="mr-1">
             <MastheadItem id="analysis" title="Tools and Current History" icon="fa-home" @click="openUrl('/')" />
             <MastheadItem
                 v-if="windowTab"
@@ -177,6 +177,8 @@ onMounted(() => {
                 cursor: pointer;
                 text-decoration: none;
                 color: var(--masthead-text-color);
+                margin-right: 0.25rem;
+                margin-left: 0.25rem;
                 &:hover {
                     color: var(--masthead-text-hover);
                 }
diff --git a/client/src/components/Masthead/QuotaMeter.vue b/client/src/components/Masthead/QuotaMeter.vue
index c2ddf28525c1..79258042693a 100644
--- a/client/src/components/Masthead/QuotaMeter.vue
+++ b/client/src/components/Masthead/QuotaMeter.vue
@@ -93,7 +93,6 @@ export default {
 .quote-container {
     position: relative;
     height: 100%;
-    margin-right: 0.5rem;
 }
 .quota-text {
     @extend .quote-container;

From b78612bcc41284efaeac6fde47ff63cd6583792e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 21 May 2024 19:10:04 +0300
Subject: [PATCH 20/60] Fix tooltips in masthead

---
 client/src/components/Masthead/Masthead.vue   | 10 +++++-----
 client/src/components/Masthead/QuotaMeter.vue |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index f3612d810349..667bebfb6c55 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -100,13 +100,13 @@ onMounted(() => {
             </span>
         </BNavbarNav>
         <BNavbarNav v-if="isConfigLoaded" class="mr-1">
-            <MastheadItem id="analysis" title="Tools and Current History" icon="fa-home" @click="openUrl('/')" />
+            <MastheadItem id="analysis" tooltip="Tools, Workflows and Histories" icon="fa-home" @click="openUrl('/')" />
             <MastheadItem
                 v-if="windowTab"
                 :id="windowTab.id"
-                :title="windowTab.title"
                 :icon="windowTab.icon"
                 :toggle="windowToggle"
+                :tooltip="windowTab.tooltip"
                 @click="onWindowToggle" />
             <MastheadItem
                 v-for="(tab, idx) in extensionTabs"
@@ -121,14 +121,14 @@ onMounted(() => {
                 @click="tab.onclick" />
             <MastheadItem
                 id="help"
-                title="Support, contact, and community"
                 icon="fa-question"
+                tooltip="Support, Contact, and Community"
                 @click="openUrl('/about')" />
             <QuotaMeter />
             <MastheadItem
                 v-if="isAnonymous && config.allow_user_creation"
                 id="user"
-                title="Log in or Register"
+                title="Login or Register"
                 @click="openUrl('/login/start')" />
             <MastheadItem
                 v-if="isAnonymous && !config.allow_user_creation"
@@ -138,8 +138,8 @@ onMounted(() => {
             <MastheadItem
                 v-if="!isAnonymous && !config.single_user"
                 id="user"
-                title="Logout"
                 icon="fa-sign-out-alt"
+                tooltip="Logout"
                 @click="userLogout" />
         </BNavbarNav>
     </BNavbar>
diff --git a/client/src/components/Masthead/QuotaMeter.vue b/client/src/components/Masthead/QuotaMeter.vue
index 79258042693a..195d3e1ff0cf 100644
--- a/client/src/components/Masthead/QuotaMeter.vue
+++ b/client/src/components/Masthead/QuotaMeter.vue
@@ -2,7 +2,7 @@
     <div>
         <div v-if="!hasQuota" class="quota-text d-flex align-items-center">
             <b-link
-                v-b-tooltip.hover.left
+                v-b-tooltip.hover.bottom
                 to="/storage"
                 :disabled="isAnonymous"
                 class="ml-auto"

From 3abbe62daafdb601b1aea7777ae1db274483eb3e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 23 May 2024 09:40:25 +0300
Subject: [PATCH 21/60] Adjust jest tests

---
 .../src/components/Masthead/Masthead.test.js  | 86 ++-----------------
 client/src/components/Masthead/Masthead.vue   | 26 ++----
 .../components/Masthead/MastheadItem.test.js  | 40 ---------
 client/src/utils/navigation/navigation.yml    |  2 +-
 4 files changed, 13 insertions(+), 141 deletions(-)
 delete mode 100644 client/src/components/Masthead/MastheadItem.test.js

diff --git a/client/src/components/Masthead/Masthead.test.js b/client/src/components/Masthead/Masthead.test.js
index 58a7a88137fa..aa3923de8ccd 100644
--- a/client/src/components/Masthead/Masthead.test.js
+++ b/client/src/components/Masthead/Masthead.test.js
@@ -1,21 +1,20 @@
 import { createTestingPinia } from "@pinia/testing";
 import { mount } from "@vue/test-utils";
 import { WindowManager } from "layout/window-manager";
-import { PiniaVuePlugin, setActivePinia } from "pinia";
-import { useEntryPointStore } from "stores/entryPointStore";
+import { PiniaVuePlugin } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
 
 import { mockFetcher } from "@/api/schema/__mocks__";
 
 import { loadWebhookMenuItems } from "./_webhooks";
-import { getActiveTab } from "./utilities";
 
-import { default as Masthead } from "./Masthead.vue";
+import Masthead from "./Masthead.vue";
 
 jest.mock("app");
 jest.mock("./_webhooks");
 jest.mock("vue-router/composables", () => ({
     useRoute: jest.fn(() => ({ name: "Home" })),
+    useRouter: jest.fn(),
 }));
 jest.mock("@/api/schema");
 
@@ -23,14 +22,12 @@ describe("Masthead.vue", () => {
     let wrapper;
     let localVue;
     let windowManager;
-    let tabs;
     let testPinia;
 
     function stubLoadWebhooks(items) {
         items.push({
             id: "extension",
             title: "Extension Point",
-            menu: false,
             url: "extension_url",
         });
     }
@@ -43,75 +40,22 @@ describe("Masthead.vue", () => {
         testPinia = createTestingPinia();
         mockFetcher.path("/api/configuration").method("get").mock({ data: {} });
 
-        tabs = [
-            // Main Analysis Tab..
-            {
-                id: "analysis",
-                title: "Analyze",
-                menu: false,
-                url: "root",
-            },
-            {
-                id: "shared",
-                title: "Shared Items",
-                menu: [{ title: "_menu_title", url: "_menu_url", target: "_menu_target" }],
-            },
-            // Hidden tab (pre-Vue framework supported this, not sure it is used
-            // anywhere?)
-            {
-                id: "hiddentab",
-                title: "Hidden Title",
-                menu: false,
-                hidden: true,
-            },
-        ];
-
-        const initialActiveTab = "shared";
         windowManager = new WindowManager({});
         const windowTab = windowManager.getTab();
         wrapper = mount(Masthead, {
             propsData: {
-                tabs,
                 windowTab,
-                initialActiveTab,
             },
             localVue,
             pinia: testPinia,
         });
     });
 
-    it("test basic active tab matching", () => {
-        expect(getActiveTab("root", tabs)).toBe("analysis");
-        expect(getActiveTab("_menu_url", tabs)).toBe("shared");
-    });
-
     it("should render simple tab item links", () => {
         expect(wrapper.findAll("li.nav-item").length).toBe(6);
         // Ensure specified link title respected.
-        expect(wrapper.find("#analysis a").text()).toBe("Analyze");
-        expect(wrapper.find("#analysis a").attributes("href")).toBe("root");
-    });
-
-    it("should render tab items with menus", () => {
-        // Ensure specified link title respected.
-        expect(wrapper.find("#shared a").text()).toBe("Shared Items");
-        expect(wrapper.find("#shared").classes("dropdown")).toBe(true);
-
-        expect(wrapper.findAll("#shared .dropdown-menu li").length).toBe(1);
-        expect(wrapper.find("#shared .dropdown-menu li a").attributes().href).toBe("_menu_url");
-        expect(wrapper.find("#shared .dropdown-menu li a").attributes().target).toBe("_menu_target");
-        expect(wrapper.find("#shared .dropdown-menu li a").text()).toBe("_menu_title");
-    });
-
-    it("should make hidden tabs hidden", () => {
-        expect(wrapper.find("#analysis").attributes().style).not.toEqual(expect.stringContaining("display: none"));
-        expect(wrapper.find("#hiddentab").attributes().style).toEqual(expect.stringContaining("display: none"));
-        expect(wrapper.get("#interactive").isVisible()).toBeFalsy();
-    });
-
-    it("should highlight the active tab", () => {
-        expect(wrapper.find("#analysis").classes("active")).toBe(false);
-        expect(wrapper.find("#shared").classes("active")).toBe(true);
+        expect(wrapper.find("#analysis a").text()).toBe("Tools, Workflows and Histories");
+        expect(wrapper.find("#analysis a").attributes("href")).toBe("#");
     });
 
     it("should display window manager button", async () => {
@@ -124,24 +68,4 @@ describe("Masthead.vue", () => {
     it("should load webhooks on creation", async () => {
         expect(wrapper.find("#extension a").text()).toBe("Extension Point");
     });
-
-    it("shows link to interactive tools if any is active", async () => {
-        setActivePinia(testPinia);
-        const entryPointStore = useEntryPointStore();
-        entryPointStore.entryPoints = [
-            {
-                model_class: "InteractiveToolEntryPoint",
-                id: "52e496b945151ee8",
-                job_id: "52e496b945151ee8",
-                name: "Jupyter Interactive Tool",
-                active: true,
-                created_time: "2020-02-24T15:59:18.122103",
-                modified_time: "2020-02-24T15:59:20.428594",
-                target: "http://52e496b945151ee8-be8a5bee5d5849a5b4e035b51305256e.interactivetoolentrypoint.interactivetool.localhost:8080/ipython/lab",
-            },
-        ];
-        // avoid race condition with store's reactivity
-        await new Promise((_) => setTimeout(_, 10));
-        expect(wrapper.get("#interactive").isVisible()).toBeTruthy();
-    });
 });
diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 667bebfb6c55..7980e8904c88 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -3,8 +3,8 @@ import { BNavbar, BNavbarBrand, BNavbarNav } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { userLogout } from "utils/logout";
 import { withPrefix } from "utils/redirect";
-import { onMounted, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router/composables";
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router/composables";
 
 import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
@@ -12,11 +12,9 @@ import { useUserStore } from "@/stores/userStore";
 import { loadWebhookMenuItems } from "./_webhooks";
 import MastheadItem from "./MastheadItem";
 import QuotaMeter from "./QuotaMeter";
-import { getActiveTab } from "./utilities";
 
 const { isAnonymous } = storeToRefs(useUserStore());
 
-const route = useRoute();
 const router = useRouter();
 const { config, isConfigLoaded } = useConfig();
 
@@ -43,15 +41,9 @@ const props = defineProps({
     },
 });
 
-const activeTab = ref(props.initialActiveTab);
 const extensionTabs = ref([]);
 const windowToggle = ref(false);
 
-function setActiveTab() {
-    const currentRoute = route.path;
-    activeTab.value = getActiveTab(currentRoute, props.tabs) || activeTab.value;
-}
-
 function openUrl(url, target = null) {
     if (!target) {
         router.push(url);
@@ -70,16 +62,8 @@ function onWindowToggle() {
     props.windowTab.onclick();
 }
 
-watch(
-    () => route.path,
-    () => {
-        setActiveTab();
-    }
-);
-
 onMounted(() => {
     loadWebhookMenuItems(extensionTabs.value);
-    setActiveTab();
 });
 </script>
 
@@ -101,6 +85,7 @@ onMounted(() => {
         </BNavbarNav>
         <BNavbarNav v-if="isConfigLoaded" class="mr-1">
             <MastheadItem id="analysis" tooltip="Tools, Workflows and Histories" icon="fa-home" @click="openUrl('/')" />
+            <MastheadItem id="library" icon="fa-database" tooltip="Data Libraries" @click="openUrl('/libraries')" />
             <MastheadItem
                 v-if="windowTab"
                 :id="windowTab.id"
@@ -118,7 +103,7 @@ onMounted(() => {
                 :url="tab.url"
                 :tooltip="tab.tooltip"
                 :target="tab.target"
-                @click="tab.onclick" />
+                @click="tab.onclick ? tab.onclick : undefined" />
             <MastheadItem
                 id="help"
                 icon="fa-question"
@@ -127,16 +112,19 @@ onMounted(() => {
             <QuotaMeter />
             <MastheadItem
                 v-if="isAnonymous && config.allow_user_creation"
+                class="loggedout-only"
                 id="user"
                 title="Login or Register"
                 @click="openUrl('/login/start')" />
             <MastheadItem
                 v-if="isAnonymous && !config.allow_user_creation"
+                class="loggedout-only"
                 id="user"
                 title="Login"
                 @click="openUrl('/login/start')" />
             <MastheadItem
                 v-if="!isAnonymous && !config.single_user"
+                class="loggedin-only"
                 id="user"
                 icon="fa-sign-out-alt"
                 tooltip="Logout"
diff --git a/client/src/components/Masthead/MastheadItem.test.js b/client/src/components/Masthead/MastheadItem.test.js
deleted file mode 100644
index 68e8780c00c0..000000000000
--- a/client/src/components/Masthead/MastheadItem.test.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
-
-import MastheadItem from "./MastheadItem.vue";
-
-describe("MastheadItem.vue", () => {
-    let wrapper;
-    let localVue;
-
-    beforeEach(() => {
-        localVue = getLocalVue();
-    });
-
-    function m(active, menu) {
-        const tab = {
-            id: "mytab",
-            menu: menu,
-        };
-
-        return mount(MastheadItem, {
-            propsData: {
-                tab,
-                activeTab: active,
-            },
-            localVue,
-        });
-    }
-
-    it("should render active tab with menus", async () => {
-        wrapper = m("mytab", true);
-        expect(wrapper.classes("active")).toBe(true);
-        expect(wrapper.classes("b-nav-dropdown")).toBe(true);
-    });
-
-    it("should render inactive tabs without menus", async () => {
-        wrapper = m("othertab", false);
-        expect(wrapper.classes("active")).toBe(false);
-        expect(wrapper.classes("b-nav-dropdown")).toBe(false);
-    });
-});
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 7ff2b7b344e7..ecf3047a9c01 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -39,7 +39,7 @@ masthead:
     _: '#masthead'
 
     # bootstrap-vue a tag doesn't work as link target, need to hit span inside
-    user: '#user.loggedin-only > a.nav-link.dropdown-toggle > span'
+    user: '#user.loggedin-only > a.nav-link > span'
     register_or_login: '#user.loggedout-only > .nav-link'
 
     user_menu: '#user .dropdown-menu a'

From f5b1e96bf8b7f5061a50a1d7989db99bf66ff0b1 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 May 2024 10:53:52 +0300
Subject: [PATCH 22/60] Preliminary adjustment of workflow run selenium test

---
 client/src/utils/navigation/navigation.yml |  1 +
 lib/galaxy/selenium/navigates_galaxy.py    | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index ecf3047a9c01..46534bfffcbe 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -600,6 +600,7 @@ tool_form:
 
 workflows:
   selectors:
+    activity: '#activity-workflows'
     shared_with_me_tab: '#shared-with-me'
     published_tab: '#published a'
     new_button: '#workflow-create'
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index cfb53b38bf7c..9d69c5c1b6b9 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -784,7 +784,7 @@ def register(self, email=None, password=None, username=None, confirm=None, asser
             self.assert_error_message()
         elif assert_valid:
             self.wait_for_logged_in()
-
+            '''
             # Code below previously was needed because there was a bug that would prevent the masthead from changing,
             # the bug seems maybe to be fixed though - so we could consider eliminating these extra checks to speed
             # up tests.
@@ -808,7 +808,7 @@ def register(self, email=None, password=None, username=None, confirm=None, asser
             assert user_object["email"] == email
 
             # clicking away no longer closes menu post Masthead -> VueJS
-            self.click_masthead_user()
+            self.click_masthead_user()'''
 
     def wait_for_logged_in(self):
         try:
@@ -1478,7 +1478,7 @@ def pages_index_table_elements(self):
 
     def workflow_index_open(self):
         self.home()
-        self.click_masthead_workflow()
+        self.click_activity_workflow()
 
     def workflow_shared_with_me_open(self):
         self.workflow_index_open()
@@ -1744,8 +1744,8 @@ def click_masthead_user(self):
     def click_masthead_data(self):
         self.components.masthead.data.wait_for_and_click()
 
-    def click_masthead_workflow(self):
-        self.components.masthead.workflow.wait_for_and_click()
+    def click_activity_workflow(self):
+        self.components.workflows.activity.wait_for_and_click()
 
     def click_button_new_workflow(self):
         self.wait_for_and_click(self.navigation.workflows.selectors.new_button)

From b6d8ab8962e431a143ee765d69793222c99b10e7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 May 2024 12:21:51 +0300
Subject: [PATCH 23/60] Remove additional login confirmation tests for now

---
 lib/galaxy/selenium/navigates_galaxy.py | 25 -------------------------
 1 file changed, 25 deletions(-)

diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 9d69c5c1b6b9..1cae14b55e81 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -784,31 +784,6 @@ def register(self, email=None, password=None, username=None, confirm=None, asser
             self.assert_error_message()
         elif assert_valid:
             self.wait_for_logged_in()
-            '''
-            # Code below previously was needed because there was a bug that would prevent the masthead from changing,
-            # the bug seems maybe to be fixed though - so we could consider eliminating these extra checks to speed
-            # up tests.
-            self.home()
-            self.wait_for_logged_in()
-            self.click_masthead_user()
-            # Make sure the user menu was dropped down
-            user_menu = self.components.masthead.user_menu.wait_for_visible()
-            try:
-                username_element = self.components.masthead.username.wait_for_visible()
-            except SeleniumTimeoutException as e:
-                menu_items = user_menu.find_elements(By.CSS_SELECTOR, "li a")
-                menu_text = [mi.text for mi in menu_items]
-                message = f"Failed to find logged in message in menu items {', '.join(menu_text)}"
-                raise self.prepend_timeout_message(e, message)
-
-            text = username_element.text
-            assert username in text
-            user_object = self.get_logged_in_user()
-            assert user_object and "email" in user_object
-            assert user_object["email"] == email
-
-            # clicking away no longer closes menu post Masthead -> VueJS
-            self.click_masthead_user()'''
 
     def wait_for_logged_in(self):
         try:

From f212d04589b60b59853ad72d34f316db1bc67565 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 May 2024 15:19:18 +0300
Subject: [PATCH 24/60] More selenium adjustments, using the activity bar to
 navigate instead of the masthead

---
 client/src/utils/navigation/navigation.yml |  7 ++++-
 lib/galaxy/selenium/navigates_galaxy.py    | 35 +++++-----------------
 2 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 46534bfffcbe..b701285c1863 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -41,6 +41,7 @@ masthead:
     # bootstrap-vue a tag doesn't work as link target, need to hit span inside
     user: '#user.loggedin-only > a.nav-link > span'
     register_or_login: '#user.loggedout-only > .nav-link'
+    logout: '#user.loggedin-only > .nav-link'
 
     user_menu: '#user .dropdown-menu a'
     workflow: '#workflow .nav-link'
@@ -66,7 +67,6 @@ masthead:
     workflow: 'Workflow'
 
     # user menu
-    logout: 'Sign Out'
     preferences: 'Preferences'
 
     # data menu
@@ -78,6 +78,8 @@ masthead:
 
 preferences:
   selectors:
+    activity: "#activity-settings"
+    activity_expand: ".activity-panel-footer"
     sign_out: "#edit-preferences-sign-out"
     change_password: "#edit-preferences-password"
     manage_information: '#edit-preferences-information'
@@ -457,6 +459,7 @@ collection_builders:
 
 histories:
   selectors:
+    activity: '#activity-histories'
     advanced_search_toggle: '#histories-grid [data-description="toggle advanced search"]'
     advanced_search_name_input: '#histories-advanced-filter-name'
     advanced_search_tag_area: '#histories-advanced-filter-tag .stateless-tags button'
@@ -532,6 +535,7 @@ history_import:
 
 pages:
   selectors:
+    activity: "#activity-pages"
     create: '#page-create'
     submit: '#submit'
     create_title_input: '#form-element-title input'
@@ -856,6 +860,7 @@ workflow_show:
 
 invocations:
   selectors:
+    activity: "#activity-invocation"
     invocations_table: '#invocations-grid .grid-table'
     invocations_table_rows: '#invocations-grid .grid-table [data-description="grid item"]'
     pager: '[data-description="grid pager"]'
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 1cae14b55e81..2ee3e575f02f 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1237,48 +1237,37 @@ def workflow_editor_click_save(self):
 
     def navigate_to_histories_page(self):
         self.home()
-        self.click_masthead_data()
-        self.components.masthead.histories.wait_for_and_click()
+        self.components.histories.activity.wait_for_and_click()
         self.components.histories.histories.wait_for_present()
 
     def navigate_to_histories_shared_with_me_page(self):
         self.home()
-        self.click_masthead_data()
-        self.components.masthead.histories.wait_for_and_click()
+        self.components.histories.activity.wait_for_and_click()
         self.components.shared_histories.tab.wait_for_and_click()
 
     def navigate_to_user_preferences(self):
         self.home()
-        self.click_masthead_user()
-        self.components.masthead.preferences.wait_for_and_click()
+        self.components.preferences.activity.wait_for_and_click()
+        self.components.preferences.activity_expand.wait_for_and_click()
 
     def navigate_to_invocations(self):
         self.home()
-        self.click_masthead_data()
-        self.components.masthead.invocations.wait_for_and_click()
+        self.components.invocations.activity.wait_for_and_click()
 
     def navigate_to_pages(self):
         self.home()
-        self.click_masthead_data()
-        self.components.masthead.pages.wait_for_and_click()
+        self.components.pages.activity.wait_for_and_click()
 
     def navigate_to_published_workflows(self):
         self.home()
-        self.click_masthead_data()
-        self.components.masthead.workflows.wait_for_and_click()
+        self.components.workflows.activity.wait_for_and_click()
         self.components.workflows.published_tab.wait_for_and_click()
 
     def navigate_to_published_histories(self):
         self.home()
-        self.click_masthead_data()
-        self.components.masthead.histories.wait_for_and_click()
+        self.components.histories.activity.wait_for_and_click()
         self.components.published_histories.tab.wait_for_and_click()
 
-    def navigate_to_published_pages(self):
-        self.home()
-        self.click_masthead_data()
-        self.components.masthead.pages.wait_for_and_click()
-
     def admin_open(self):
         self.components.admin.activity.wait_for_and_click()
 
@@ -1329,7 +1318,6 @@ def create_new_library(self):
 
     def libraries_open(self):
         self.home()
-        self.click_masthead_data()
         self.components.masthead.libraries.wait_for_and_click()
         self.components.libraries.selector.wait_for_visible()
 
@@ -1713,12 +1701,6 @@ def tool_form_generate_tour(self):
     def tool_form_execute(self):
         self.components.tool_form.execute.wait_for_and_click()
 
-    def click_masthead_user(self):
-        self.components.masthead.user.wait_for_and_click()
-
-    def click_masthead_data(self):
-        self.components.masthead.data.wait_for_and_click()
-
     def click_activity_workflow(self):
         self.components.workflows.activity.wait_for_and_click()
 
@@ -2002,7 +1984,6 @@ def logout_if_needed(self):
 
     def logout(self):
         self.components.masthead.logged_in_only.wait_for_visible()
-        self.click_masthead_user()
         self.components.masthead.logout.wait_for_and_click()
         try:
             self.components.masthead.logged_out_only.wait_for_visible()

From bf132e181f7bd9eb0c39bba67eca256bc203a85e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 May 2024 18:39:08 +0300
Subject: [PATCH 25/60] Fix tool exection in selenium tests

---
 client/src/utils/navigation/navigation.yml                  | 4 ++++
 lib/galaxy/selenium/navigates_galaxy.py                     | 4 ++++
 lib/galaxy_test/selenium/test_change_password.py            | 6 ++----
 lib/galaxy_test/selenium/test_sign_out.py                   | 3 +--
 test/integration_selenium/test_objectstore_selection.py     | 3 ++-
 .../test_user_file_source_aws_public.py                     | 1 -
 6 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index b701285c1863..d6410e03dde6 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -906,6 +906,10 @@ tour:
       next: '${_} .tour-next'
       end: '${_} .tour-end'
 
+tools:
+  selectors:
+    activity: "#activity-tools"
+
 admin:
   allowlist:
     selectors:
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 2ee3e575f02f..c4e9ba6d7eba 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1268,6 +1268,10 @@ def navigate_to_published_histories(self):
         self.components.histories.activity.wait_for_and_click()
         self.components.published_histories.tab.wait_for_and_click()
 
+    def navigate_to_tools(self):
+        self.home()
+        self.components.tools.activity.wait_for_and_click()
+
     def admin_open(self):
         self.components.admin.activity.wait_for_and_click()
 
diff --git a/lib/galaxy_test/selenium/test_change_password.py b/lib/galaxy_test/selenium/test_change_password.py
index 7b8aae510509..8ab3e9f8e311 100644
--- a/lib/galaxy_test/selenium/test_change_password.py
+++ b/lib/galaxy_test/selenium/test_change_password.py
@@ -10,8 +10,7 @@ def test_change_password(self):
         self.home()
         email = self._get_random_email()
         self.register(email)
-        self.click_masthead_user()
-        self.components.masthead.preferences.wait_for_and_click()
+        self.navigate_to_user_preferences()
         self.components.preferences.change_password.wait_for_and_click()
         new_password = self._get_random_password()
         self.fill_input_fields(self.default_password, new_password, new_password)
@@ -57,8 +56,7 @@ def test_new_password_same_password(self):
     def register_and_change_password(self):
         self.home()
         self.register()
-        self.click_masthead_user()
-        self.components.masthead.preferences.wait_for_and_click()
+        self.navigate_to_user_preferences()
         self.components.preferences.change_password.wait_for_and_click()
 
     def fill_input_fields(self, current, password, confirm):
diff --git a/lib/galaxy_test/selenium/test_sign_out.py b/lib/galaxy_test/selenium/test_sign_out.py
index 2b3a715b386e..c08ed95761d5 100644
--- a/lib/galaxy_test/selenium/test_sign_out.py
+++ b/lib/galaxy_test/selenium/test_sign_out.py
@@ -11,8 +11,7 @@ class TestSignOut(SeleniumTestCase):
     def test_sign_out(self):
         email = self._get_random_email()
         self.register(email)
-        self.click_masthead_user()
-        self.components.masthead.preferences.wait_for_and_click()
+        self.navigate_to_user_preferences()
         self.components.preferences.sign_out.wait_for_and_click()
         self.components.sign_out.cancel_button.wait_for_and_click()
         assert self.is_logged_in()
diff --git a/test/integration_selenium/test_objectstore_selection.py b/test/integration_selenium/test_objectstore_selection.py
index 85be2f937430..e0585bea6de9 100644
--- a/test/integration_selenium/test_objectstore_selection.py
+++ b/test/integration_selenium/test_objectstore_selection.py
@@ -118,6 +118,7 @@ def test_2_user_override(self):
         preferences = self.components.preferences
         preferences.preferred_storage.wait_for_and_click()
         self.select_storage("second")
+        self.navigate_to_tools()
         self.run_environment_test_tool()
         self.wait_for_hid_ok_and_open_details(1)
         details = self.components.object_store_details
@@ -136,7 +137,7 @@ def test_3_user_un_override(self):
         preferences = self.components.preferences
         preferences.preferred_storage.wait_for_and_click()
         self.select_storage("__null__")
-
+        self.navigate_to_tools()
         self.run_environment_test_tool()
         self.wait_for_hid_ok_and_open_details(1)
         details = self.components.object_store_details
diff --git a/test/integration_selenium/test_user_file_source_aws_public.py b/test/integration_selenium/test_user_file_source_aws_public.py
index 668d022b97f0..5ec2ba12d64d 100644
--- a/test/integration_selenium/test_user_file_source_aws_public.py
+++ b/test/integration_selenium/test_user_file_source_aws_public.py
@@ -15,7 +15,6 @@ class TestUserFileSourceAwsPublicSeleniumIntegration(BaseUserObjectStoreSelenium
     @managed_history
     @selenium_test
     def test_create_and_use(self):
-        self.navigate_to_user_preferences()
         random_name = self._get_random_name(prefix="Encyclopedia of DNA Elements ENCODE")
         instance = FileSourceInstance(
             template_id="aws_public",

From 11428d02ec6623e94d6ab3c59a27bb21e346614a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 May 2024 18:44:23 +0300
Subject: [PATCH 26/60] Fix client formatting

---
 client/src/components/Masthead/Masthead.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 7980e8904c88..78e5b00b8ad8 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -112,20 +112,20 @@ onMounted(() => {
             <QuotaMeter />
             <MastheadItem
                 v-if="isAnonymous && config.allow_user_creation"
-                class="loggedout-only"
                 id="user"
+                class="loggedout-only"
                 title="Login or Register"
                 @click="openUrl('/login/start')" />
             <MastheadItem
                 v-if="isAnonymous && !config.allow_user_creation"
-                class="loggedout-only"
                 id="user"
+                class="loggedout-only"
                 title="Login"
                 @click="openUrl('/login/start')" />
             <MastheadItem
                 v-if="!isAnonymous && !config.single_user"
-                class="loggedin-only"
                 id="user"
+                class="loggedin-only"
                 icon="fa-sign-out-alt"
                 tooltip="Logout"
                 @click="userLogout" />

From 38ef60cf862eeed9132d5fd10e860bc1678d88a3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 May 2024 20:45:49 +0300
Subject: [PATCH 27/60] Extend list of visible activity items to anon user

---
 client/src/entry/analysis/router.js              | 14 +++++++++-----
 client/src/stores/activitySetup.ts               |  6 +++---
 lib/galaxy_test/selenium/test_published_pages.py |  2 +-
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index 8f5772ea37c1..ec4b467ed26d 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -88,10 +88,14 @@ Vue.use(VueRouter);
 patchRouterPush(VueRouter);
 
 // redirect anon users
-function redirectAnon() {
+function redirectAnon(redirect = "") {
     const Galaxy = getGalaxyInstance();
     if (!Galaxy.user || !Galaxy.user.id) {
-        return "/login/start";
+        if (redirect !== "") {
+            return redirect;
+        } else {
+            return "/login/start";
+        }
     }
 }
 
@@ -313,7 +317,7 @@ export function getRouter(Galaxy) {
                         props: {
                             activeList: "my",
                         },
-                        redirect: redirectAnon(),
+                        redirect: redirectAnon("/histories/list_published"),
                     },
                     {
                         path: "histories/list_shared",
@@ -446,7 +450,7 @@ export function getRouter(Galaxy) {
                         props: {
                             activeList: "my",
                         },
-                        redirect: redirectAnon(),
+                        redirect: redirectAnon("/pages/list_published"),
                     },
                     {
                         path: "pages/list_published",
@@ -628,7 +632,7 @@ export function getRouter(Galaxy) {
                     {
                         path: "workflows/list",
                         component: WorkflowList,
-                        redirect: redirectAnon(),
+                        redirect: redirectAnon("/workflows/list_published"),
                     },
                     {
                         path: "workflows/list_published",
diff --git a/client/src/stores/activitySetup.ts b/client/src/stores/activitySetup.ts
index 2e8bf5b1c26e..1574fa3d72ca 100644
--- a/client/src/stores/activitySetup.ts
+++ b/client/src/stores/activitySetup.ts
@@ -42,7 +42,7 @@ export const Activities = [
         visible: true,
     },
     {
-        anonymous: false,
+        anonymous: true,
         description: "Displays a panel to search and access workflows.",
         icon: "sitemap",
         id: "workflows",
@@ -78,7 +78,7 @@ export const Activities = [
         visible: true,
     },
     {
-        anonymous: false,
+        anonymous: true,
         description: "Displays the list of all histories.",
         icon: "fa-hdd",
         id: "histories",
@@ -114,7 +114,7 @@ export const Activities = [
         visible: true,
     },
     {
-        anonymous: false,
+        anonymous: true,
         description: "Display and create new Pages.",
         icon: "fa-file-contract",
         id: "pages",
diff --git a/lib/galaxy_test/selenium/test_published_pages.py b/lib/galaxy_test/selenium/test_published_pages.py
index d8813f323ba1..c73495dd588f 100644
--- a/lib/galaxy_test/selenium/test_published_pages.py
+++ b/lib/galaxy_test/selenium/test_published_pages.py
@@ -7,7 +7,7 @@
 class TestPublishedPagesGrid(SharedStateSeleniumTestCase):
     @selenium_test
     def test_index(self):
-        self.navigate_to_published_pages()
+        self.navigate_to_pages()
         assert len(self.get_grid_entry_names("#pages-published-grid")) == 2
 
     def setup_shared_state(self):

From 5755aa42b20ebb808f0f1b19becc93d78c7ee90d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 28 May 2024 09:26:36 +0300
Subject: [PATCH 28/60] Fix workflow bookmarking test

---
 lib/galaxy_test/selenium/test_workflow_editor.py | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index 7aefe2ef269d..be5433ef3f18 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -899,22 +899,18 @@ def assert_workflow_bookmarked_status(target_status):
             assert status == target_status
 
         new_workflow_name = self.workflow_create_new(clear_placeholder=True)
+        self.components.workflow_editor.canvas_body.wait_for_visible()
+        self.wait_for_selector_absent_or_hidden(self.modal_body_selector())
 
         # Assert workflow not initially bookmarked.
+        self.navigate_to_tools()
         assert_workflow_bookmarked_status(False)
 
-        self.components.workflow_editor.canvas_body.wait_for_visible()
-        self.wait_for_selector_absent_or_hidden(self.modal_body_selector())
-        self.components.masthead.workflow.wait_for_and_click()
-
-        self.sleep_for(self.wait_types.UX_RENDER)
+        self.click_activity_workflow()
         self.components.workflows.bookmark_link(action="add").wait_for_and_click()
-        self.components.masthead.workflow.wait_for_and_click()
-        self.sleep_for(self.wait_types.UX_TRANSITION)
 
         # search for bookmark in tools menu
-        self.components.tool_panel.search.wait_for_and_send_keys(new_workflow_name)
-        self.sleep_for(self.wait_types.UX_RENDER)
+        self.navigate_to_tools()
         assert_workflow_bookmarked_status(True)
 
     def tab_to(self, accessible_name, direction="forward"):

From 8952b28dbbbf85cdb46883e9b7e3fe99409dd0ca Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 28 May 2024 09:44:47 +0300
Subject: [PATCH 29/60] Fix workflow invocations selenium test

---
 client/src/utils/navigation/navigation.yml | 1 +
 lib/galaxy/selenium/navigates_galaxy.py    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index d6410e03dde6..9614d7e19b04 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -861,6 +861,7 @@ workflow_show:
 invocations:
   selectors:
     activity: "#activity-invocation"
+    activity_expand: ".activity-panel-footer"
     invocations_table: '#invocations-grid .grid-table'
     invocations_table_rows: '#invocations-grid .grid-table [data-description="grid item"]'
     pager: '[data-description="grid pager"]'
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index c4e9ba6d7eba..30f676abc215 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1253,6 +1253,7 @@ def navigate_to_user_preferences(self):
     def navigate_to_invocations(self):
         self.home()
         self.components.invocations.activity.wait_for_and_click()
+        self.components.invocations.activity_expand.wait_for_and_click()
 
     def navigate_to_pages(self):
         self.home()

From c0237f45ac09875563c4b80d16b810f8729722bc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 28 May 2024 13:10:46 +0300
Subject: [PATCH 30/60] Fix tour test

---
 client/src/utils/navigation/navigation.yml | 18 ++++++--
 config/plugins/tours/core.galaxy_ui.yaml   | 49 ++++++++++------------
 2 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 9614d7e19b04..5bdd5e00d837 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -9,9 +9,11 @@
 _:  # global stuff
 
   selectors:
+    center_panel: '#center'
     editable_text: '.editable-text'
     tooltip_balloon: '.tooltip'
     tooltip_inner: .tooltip-inner
+    left_panel: '#left'
     left_panel_drag: '.flex-panel.left .drag-handle'
     left_panel_collapse: '.collapse-button.left'
     right_panel_drag: '.flex-panel.right .drag-handle'
@@ -42,8 +44,11 @@ masthead:
     user: '#user.loggedin-only > a.nav-link > span'
     register_or_login: '#user.loggedout-only > .nav-link'
     logout: '#user.loggedin-only > .nav-link'
-
-    user_menu: '#user .dropdown-menu a'
+    home: '#analysis'
+    help: '#help'
+    login: '#user'
+    library: '#library'
+    window_manager: '#enable-window-manager'
     workflow: '#workflow .nav-link'
 
     username:
@@ -655,6 +660,7 @@ workflows:
 visualization:
   selectors:
     _: '#center div.plugin-list'
+    activity: '#activity-visualizations'
     plugin_item: '[data-plugin-name*="${id}"]'
 
 trs_search:
@@ -909,7 +915,12 @@ tour:
 
 tools:
   selectors:
-    activity: "#activity-tools"
+    activity: '#activity-tools'
+    body: '#center #tool-card-body'
+    execute: '#execute'
+    help: 'div.form-help'
+    search: '.search-query'
+    title: '.toolSectionTitle'
 
 admin:
   allowlist:
@@ -1139,6 +1150,7 @@ upload:
     source_button: '#upload-row-${n} .upload-source'
     start: '#activity-upload'
     start_button: '#btn-start'
+    local_button: '#btn-local'
 
 new_user_welcome:
   selectors:
diff --git a/config/plugins/tours/core.galaxy_ui.yaml b/config/plugins/tours/core.galaxy_ui.yaml
index 8cdbed21d4a1..4b5e922e8277 100644
--- a/config/plugins/tours/core.galaxy_ui.yaml
+++ b/config/plugins/tours/core.galaxy_ui.yaml
@@ -22,16 +22,16 @@ steps:
       postclick: true
 
     - title: "Upload your data"
-      element: "#btn-local"
+      component: upload.local_button
       intro: "You can upload data from your computer."
 
     - title: "Upload your data"
-      element: "#btn-new"
+      component: upload.create_button
       intro: "Copy and paste data directly into Galaxy or include URLs that lead to your data"
       preclick: true
 
     - title: "Insert URLs"
-      element: ".upload-text-content"
+      component: upload.paste_content(n=0)
       intro: "URLs separated by a line break are automatically downloaded by Galaxy."
       textinsert: |
         https://raw.githubusercontent.com/bgruening/galaxytools/adf077b912ddebd97b07b947b855cdd2862ed8ef/tools/augustus/test-data/human_augustus.fa
@@ -49,15 +49,15 @@ steps:
       postclick: true
 
     - title: "Tools"
-      element: "#left"
+      component: _.left_panel
       intro: "This is your ToolBox. All tools available in your Galaxy instance you can find here."
 
     - title: "Tool categories"
-      element: '.toolSectionTitle'
+      component: tools.title
       intro: "Tools are grouped into categories to make them easier to find."
 
     - title: "Tool search bar"
-      element: '.search-query'
+      component: tools.search
       intro: "You can search for tools by keywords."
       textinsert: 'filter'
 
@@ -67,26 +67,26 @@ steps:
       postclick: true
 
     - title: "Filter Tool"
-      element: '#center'
+      component: _.center_panel
       intro: "Your tool is loaded into the main Galaxy page and ready for use."
 
     - title: "Tool parameters"
-      element: '#center #tool-card-body'
+      component: tools.body
       intro: "Here you can choose your tool parameters. Select your input dataset from your history and specify parameters for your analysis."
 
     - title: "Tool help"
-      element: 'div.form-help'
+      component: tools.help
       intro: "Every Galaxy tool has a help section with detailed information about the tool and its parameters.
               Have a look and study your tool in depth by reading it."
 
     - title: "Run your tool"
-      element: '#execute'
+      component: tools.execute
       intro: "Click on 'Execute' to run your tool and send it to the compute cluster.
               Don't be afraid to test different settings in parallel. Galaxy can handle multiple runs of the same tool."
       postclick: true
 
     - title: "History"
-      element: "#current-history-panel"
+      component: history_panel
       intro: "This is your Galaxy history! All analysis steps with results of the tools and their parameters will be recorded here and can be redone at any time.<br>
               A running tool is shown in yellow and if your calculation is done, it turns green. If your dataset is
               grey this means you are queued and need to wait until your tool can be started. If your dataset turns into red, an error has occurred. Please report the bug to the Galaxy team with the bug report button."
@@ -117,36 +117,33 @@ steps:
       element: "#current-history-panel div.content-item .rerun-btn"
       intro: "By clicking the reload button, you can re-run your tool again (e.g. with different parameters or on another dataset)."
 
-    - title: "Top panel"
-      element: "#masthead"
-      intro: "The top panel will give you access to a lot of useful things."
-
     - title: "Analyze data"
+      component: masthead.home
       element: "#analysis"
       intro: "This is the current view. Start your <b>Analysis</b> from here."
 
+    - title: "Data Libraries"
+      component: masthead.library
+      intro: "Get access to source data."
+
     - title: "Workflow"
-      element: "#workflow"
+      component: workflows.activity
       intro: "Create, manage, import, export and share your <b>Workflows</b>."
-
-    - title: "Data"
-      element: "#resources"
-      intro: "Get access to all <b>Workflows</b>, <b>Histories</b>, <b>Pages</b> and <b>Visualizations</b>."
-
+    
     - title: "Visualization"
-      element: "#visualization"
+      component: visualization.activity
       intro: "Galaxy offers a lot of visualizations to review your data!"
 
     - title: "Help"
-      element: "#help"
+      component: masthead.help
       intro: "Here you get more help from the Galaxy <b>Community</b> with Videos, a QA board and more tours."
 
-    - title: "User Preferences"
-      element: "#user"
+    - title: "Login"
+      component: masthead.login
       intro: "Login and start your analysis!"
 
     - title: "Window Manager"
-      element: "#enable-window-manager"
+      component: masthead.window_manager
       intro: "Window Manager offers you multiple visualizations next to each other. Have a look at our Window Manager tour to learn more about it."
 
     - title: "Enjoy Galaxy"

From e590a8917110574fc1b630d3f48e0723a4bb556f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 28 May 2024 14:06:37 +0300
Subject: [PATCH 31/60] Remove legacy navigation selectors

---
 client/src/utils/navigation/navigation.yml | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 5bdd5e00d837..61e87c8ab9f4 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -61,26 +61,6 @@ masthead:
       selector: 'storage dashboard link'
       type: data-description
 
-  labels:
-    # top-level menus
-    admin: 'Admin'
-    analyze: 'Analyze Data'
-    data: 'Data'
-    help: 'Help'
-    user: 'User'
-    visualization: 'Visualization'
-    workflow: 'Workflow'
-
-    # user menu
-    preferences: 'Preferences'
-
-    # data menu
-    libraries: 'Data Libraries'
-    histories: 'Histories'
-    invocations: 'Workflow Invocations'
-    pages: 'Pages'
-    workflows: 'Workflows'
-
 preferences:
   selectors:
     activity: "#activity-settings"

From 63e2a81a661fb654501e3560b1a0931f49dfbdfb Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 28 May 2024 14:38:44 +0300
Subject: [PATCH 32/60] Add help and community links to about page

---
 client/src/components/AboutGalaxy.vue | 137 ++++++++++++++++++--------
 1 file changed, 96 insertions(+), 41 deletions(-)

diff --git a/client/src/components/AboutGalaxy.vue b/client/src/components/AboutGalaxy.vue
index 4c40f4978d06..c57775cae140 100644
--- a/client/src/components/AboutGalaxy.vue
+++ b/client/src/components/AboutGalaxy.vue
@@ -3,6 +3,7 @@
 /* (injected by webpack) */
 
 import { computed } from "vue";
+import { RouterLink } from "vue-router";
 
 import { useConfig } from "@/composables/config";
 import { getAppRoot } from "@/onload/loadConfig";
@@ -28,47 +29,101 @@ const versionUserDocumentationUrl = computed(() => {
 
 <template>
     <div v-if="isConfigLoaded" class="about-galaxy">
-        <Heading h1 :icon="['gxd', 'galaxyLogo']" size="xl">About This Galaxy</Heading>
-        <div>
-            <!-- Galaxy version (detailed), with a link to the release notes -->
-            <Heading h2 separator size="md">Galaxy Version Information</Heading>
-            <p>
-                The Galaxy Server is running version
-                <ExternalLink :href="versionUserDocumentationUrl">
-                    <strong> {{ config.version_major }}.{{ config.version_minor }}</strong> </ExternalLink
-                >, and the web client was built on <UtcDate :date="clientBuildDate" mode="pretty" />.
-            </p>
-            <template v-if="config.version_extra">
-                <p>The server also provides the following extra version information</p>
-                <ul>
-                    <li v-for="(value, name, index) in config.version_extra" :key="index">
-                        <strong>{{ name }}</strong>
-                        : {{ value }}
-                    </li>
-                </ul>
-            </template>
-        </div>
-        <div>
-            <Heading h2 separator size="md">Galaxy API Documentation</Heading>
-            <!-- API documentation link -->
-            <p>
-                The Galaxy API is available, and explorable, at
-                <ExternalLink :href="apiDocsLink">
-                    {{ apiDocsLink }}
-                </ExternalLink>
-            </p>
-        </div>
-        <div>
-            <Heading h2 separator size="md">License Information</Heading>
-            <p>The Galaxy Software is licensed under <License :license-id="galaxyLicense" /></p>
-        </div>
-        <div v-if="config.terms_url">
-            <!-- Terms, if available.-->
-            <Heading h2 separator size="md">Terms and Conditions</Heading>
-            <p>
-                This Galaxy Server has specified Terms and Conditions that apply to use of the service.
-                <ExternalLink :href="config.terms_url">Review them here.</ExternalLink>
-            </p>
+        <Heading h1 :icon="['gxd', 'galaxyLogo']" size="xl">Help and Support</Heading>
+        <div class="py-4">
+            <div v-if="config.wiki_url">
+                <Heading h2 separator size="md">Community Hub</Heading>
+                <p>
+                    Interact with the our community, explore and publish tutorials at
+                    <ExternalLink :href="config.wiki_url">
+                        {{ config.wiki_url }}
+                    </ExternalLink>
+                </p>
+            </div>
+            <div v-if="config.citation_url">
+                <Heading h2 separator size="md">How to Cite Us</Heading>
+                <p>
+                    Find more details on how to properly cite Galaxy at
+                    <ExternalLink :href="config.citation_url">
+                        {{ config.citation_url }}
+                    </ExternalLink>
+                </p>
+            </div>
+            <div>
+                <Heading h2 separator size="md">Interactive Tours</Heading>
+                <p>
+                    Explore and learn about Galaxy through interactive
+                    <RouterLink to="tours">tours</RouterLink>.
+                </p>
+            </div>
+            <div v-if="config.screencasts_url">
+                <Heading h2 separator size="md">Videos and Screencasts</Heading>
+                <p>
+                    Learn more about Galaxy by watching videos and screencasts at
+                    <ExternalLink :href="config.screencasts_url">
+                        {{ config.screencasts_url }}
+                    </ExternalLink>
+                </p>
+            </div>
+            <div v-if="config.helpsite_url">
+                <Heading h2 separator size="md">User Documentation</Heading>
+                <p>
+                    Learn more about Galaxy at
+                    <ExternalLink :href="config.helpsite_url">
+                        {{ config.helpsite_url }}
+                    </ExternalLink>
+                </p>
+            </div>
+            <div>
+                <Heading h2 separator size="md">API Documentation</Heading>
+                <!-- API documentation link -->
+                <p>
+                    The Galaxy API is available, and explorable, at
+                    <ExternalLink :href="apiDocsLink">
+                        {{ apiDocsLink }}
+                    </ExternalLink>
+                </p>
+            </div>
+            <div>
+                <!-- Galaxy version (detailed), with a link to the release notes -->
+                <Heading h2 separator size="md">Version Information</Heading>
+                <p>
+                    The Galaxy Server is running version
+                    <ExternalLink :href="versionUserDocumentationUrl">
+                        <strong> {{ config.version_major }}.{{ config.version_minor }}</strong> </ExternalLink
+                    >, and the web client was built on <UtcDate :date="clientBuildDate" mode="pretty" />.
+                </p>
+                <template v-if="config.version_extra">
+                    <p>The server also provides the following extra version information</p>
+                    <ul>
+                        <li v-for="(value, name, index) in config.version_extra" :key="index">
+                            <strong>{{ name }}</strong>
+                            : {{ value }}
+                        </li>
+                    </ul>
+                </template>
+            </div>
+            <div>
+                <Heading h2 separator size="md">License Information</Heading>
+                <p>The Galaxy Software is licensed under <License :license-id="galaxyLicense" /></p>
+            </div>
+            <div v-if="config.terms_url">
+                <!-- Terms, if available.-->
+                <Heading h2 separator size="md">Terms and Conditions</Heading>
+                <p>
+                    This Galaxy Server has specified Terms and Conditions that apply to use of the service.
+                    <ExternalLink :href="config.terms_url">Review them here.</ExternalLink>
+                </p>
+            </div>
+            <div v-if="config.support_url">
+                <Heading h2 separator size="md">Support</Heading>
+                <p>
+                    Do you need help? Reach out at
+                    <ExternalLink :href="config.support_url">
+                        {{ config.support_url }}
+                    </ExternalLink>
+                </p>
+            </div>
         </div>
     </div>
 </template>

From 3d07d2a46930bc6e1db4ae36f23a94b7fed71337 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 28 May 2024 17:03:32 +0300
Subject: [PATCH 33/60] Adjust library identifier to align with selenium tests

---
 client/src/utils/navigation/navigation.yml | 2 +-
 config/plugins/tours/core.galaxy_ui.yaml   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 61e87c8ab9f4..4d54b5aa473f 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -47,7 +47,7 @@ masthead:
     home: '#analysis'
     help: '#help'
     login: '#user'
-    library: '#library'
+    libraries: '#library'
     window_manager: '#enable-window-manager'
     workflow: '#workflow .nav-link'
 
diff --git a/config/plugins/tours/core.galaxy_ui.yaml b/config/plugins/tours/core.galaxy_ui.yaml
index 4b5e922e8277..c9b450a3cdee 100644
--- a/config/plugins/tours/core.galaxy_ui.yaml
+++ b/config/plugins/tours/core.galaxy_ui.yaml
@@ -123,7 +123,7 @@ steps:
       intro: "This is the current view. Start your <b>Analysis</b> from here."
 
     - title: "Data Libraries"
-      component: masthead.library
+      component: masthead.libraries
       intro: "Get access to source data."
 
     - title: "Workflow"

From 4b90ffe19cb129d4dc62b11d3e9d60dcdc2ce20a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 May 2024 09:31:41 +0300
Subject: [PATCH 34/60] Fix visualization activity, adjust tour

---
 client/src/stores/activitySetup.ts       | 2 +-
 config/plugins/tours/core.galaxy_ui.yaml | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/stores/activitySetup.ts b/client/src/stores/activitySetup.ts
index 1574fa3d72ca..ed03211f5306 100644
--- a/client/src/stores/activitySetup.ts
+++ b/client/src/stores/activitySetup.ts
@@ -66,7 +66,7 @@ export const Activities = [
         visible: true,
     },
     {
-        anonymous: false,
+        anonymous: true,
         description: "Displays the list of available visualizations.",
         icon: "chart-bar",
         id: "visualizations",
diff --git a/config/plugins/tours/core.galaxy_ui.yaml b/config/plugins/tours/core.galaxy_ui.yaml
index c9b450a3cdee..6eb0a7961701 100644
--- a/config/plugins/tours/core.galaxy_ui.yaml
+++ b/config/plugins/tours/core.galaxy_ui.yaml
@@ -138,13 +138,13 @@ steps:
       component: masthead.help
       intro: "Here you get more help from the Galaxy <b>Community</b> with Videos, a QA board and more tours."
 
-    - title: "Login"
-      component: masthead.login
-      intro: "Login and start your analysis!"
-
     - title: "Window Manager"
       component: masthead.window_manager
       intro: "Window Manager offers you multiple visualizations next to each other. Have a look at our Window Manager tour to learn more about it."
 
+    - title: "Login"
+      component: masthead.login
+      intro: "Login and start your analysis!"
+
     - title: "Enjoy Galaxy"
       intro: "Thanks for taking this tour! Happy research with Galaxy!"

From f1e13178aba9172a1d598e70c17593207985145e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 May 2024 11:12:28 +0300
Subject: [PATCH 35/60] Add dropdown for user tab in masthead

---
 client/src/components/Masthead/Masthead.vue   | 19 +++++--
 .../components/Masthead/MastheadDropdown.vue  | 53 +++++++++++++++++++
 2 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/Masthead/MastheadDropdown.vue

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 78e5b00b8ad8..b4a8ca91bf85 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -10,6 +10,7 @@ import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
 
 import { loadWebhookMenuItems } from "./_webhooks";
+import MastheadDropdown from "./MastheadDropdown";
 import MastheadItem from "./MastheadItem";
 import QuotaMeter from "./QuotaMeter";
 
@@ -122,12 +123,24 @@ onMounted(() => {
                 class="loggedout-only"
                 title="Login"
                 @click="openUrl('/login/start')" />
-            <MastheadItem
+            <MastheadDropdown
                 v-if="!isAnonymous && !config.single_user"
                 id="user"
                 class="loggedin-only"
-                icon="fa-sign-out-alt"
-                tooltip="Logout"
+                icon="fa-user"
+                tooltip="User Preferences"
+                :menu="[
+                    {
+                        title: 'Preferences',
+                        icon: 'fa-gear',
+                        handler: () => openUrl('/user'),
+                    },
+                    {
+                        title: 'Sign Out',
+                        icon: 'fa-sign-out-alt',
+                        handler: () => userLogout(),
+                    },
+                ]"
                 @click="userLogout" />
         </BNavbarNav>
     </BNavbar>
diff --git a/client/src/components/Masthead/MastheadDropdown.vue b/client/src/components/Masthead/MastheadDropdown.vue
new file mode 100644
index 000000000000..9c73bfd1159d
--- /dev/null
+++ b/client/src/components/Masthead/MastheadDropdown.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { BDropdownItem, BNavItemDropdown, VBPopoverPlugin, VBTooltipPlugin } from "bootstrap-vue";
+import { withPrefix } from "utils/redirect";
+import Vue, { ref } from "vue";
+
+Vue.use(VBPopoverPlugin);
+Vue.use(VBTooltipPlugin);
+
+const dropdown = ref(null);
+
+/* props */
+defineProps({
+    id: {
+        type: String,
+    },
+    icon: {
+        type: String,
+    },
+    target: {
+        type: String,
+    },
+    title: {
+        type: String,
+    },
+    tooltip: {
+        type: String,
+    },
+    menu: {
+        type: Array,
+    },
+});
+</script>
+
+<template>
+    <BNavItemDropdown :id="id" :title="tooltip" ref="dropdown" right v-b-tooltip.hover.bottom>
+        <template v-if="icon" v-slot:button-content>
+            <span class="sr-only">{{ tooltip || id }}</span>
+            <span class="fa fa-fw" :class="icon" />
+        </template>
+        <template>
+            <BDropdownItem
+                v-for="(item, idx) in menu"
+                :key="idx"
+                :href="withPrefix(item.url)"
+                role="menuitem"
+                title=""
+                @click="item.handler">
+                <span class="fa fa-fw" :class="item.icon" />
+                <span>{{ item.title }}</span>
+            </BDropdownItem>
+        </template>
+    </BNavItemDropdown>
+</template>

From e0b48208a95d1272a3d2d123169e9d43ed895182 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 May 2024 11:16:25 +0300
Subject: [PATCH 36/60] Remove unused popover plugin from masthead components

---
 client/src/components/Masthead/MastheadDropdown.vue | 6 +-----
 client/src/components/Masthead/MastheadItem.vue     | 3 +--
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Masthead/MastheadDropdown.vue b/client/src/components/Masthead/MastheadDropdown.vue
index 9c73bfd1159d..f3c7a96c0844 100644
--- a/client/src/components/Masthead/MastheadDropdown.vue
+++ b/client/src/components/Masthead/MastheadDropdown.vue
@@ -1,9 +1,7 @@
 <script setup>
-import { BDropdownItem, BNavItemDropdown, VBPopoverPlugin, VBTooltipPlugin } from "bootstrap-vue";
-import { withPrefix } from "utils/redirect";
+import { BDropdownItem, BNavItemDropdown, VBTooltipPlugin } from "bootstrap-vue";
 import Vue, { ref } from "vue";
 
-Vue.use(VBPopoverPlugin);
 Vue.use(VBTooltipPlugin);
 
 const dropdown = ref(null);
@@ -41,9 +39,7 @@ defineProps({
             <BDropdownItem
                 v-for="(item, idx) in menu"
                 :key="idx"
-                :href="withPrefix(item.url)"
                 role="menuitem"
-                title=""
                 @click="item.handler">
                 <span class="fa fa-fw" :class="item.icon" />
                 <span>{{ item.title }}</span>
diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index 32945d408441..c4e95b0c0ead 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -1,9 +1,8 @@
 <script setup>
-import { BNavItem, VBPopoverPlugin, VBTooltipPlugin } from "bootstrap-vue";
+import { BNavItem, VBTooltipPlugin } from "bootstrap-vue";
 import { withPrefix } from "utils/redirect";
 import Vue from "vue";
 
-Vue.use(VBPopoverPlugin);
 Vue.use(VBTooltipPlugin);
 
 /* props */

From 5a5409096222b66fda5589b096b71dbf62966754 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 May 2024 11:39:42 +0300
Subject: [PATCH 37/60] Move activity toggle icon to the left, treat like
 favorites selection

---
 .../ActivityBar/ActivitySettings.vue          | 66 ++++++++++---------
 .../components/Masthead/MastheadDropdown.vue  |  8 +--
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index 835691d3c0b3..f9a93b755360 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faSquare } from "@fortawesome/free-regular-svg-icons";
-import { faCheckSquare, faThumbtack, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faCheckSquare, faStar, faThumbtack, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
 import { computed, type ComputedRef } from "vue";
@@ -11,6 +11,7 @@ import { type Activity, useActivityStore } from "@/stores/activityStore";
 library.add({
     faCheckSquare,
     faSquare,
+    faStar,
     faTrash,
     faThumbtack,
 });
@@ -44,7 +45,9 @@ const foundActivities: ComputedRef<boolean> = computed(() => {
     return filteredActivities.value.length > 0;
 });
 
-function onClick(activity: Activity) {
+function onClick(activity: Activity) {}
+
+function onFavorite(activity: Activity) {
     if (activity.optional) {
         activity.visible = !activity.visible;
     }
@@ -61,34 +64,44 @@ function onRemove(activity: Activity) {
             <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">
-                        <span class="w-100">
-                            <FontAwesomeIcon
-                                v-if="!activity.optional"
-                                class="icon-check mr-1"
-                                icon="fas fa-thumbtack"
-                                fa-fw />
-                            <FontAwesomeIcon
-                                v-else-if="activity.visible"
-                                class="icon-check mr-1"
-                                icon="fas fa-check-square"
-                                fa-fw />
-                            <FontAwesomeIcon v-else class="mr-1" icon="far fa-square" fa-fw />
+                        <span class="d-flex justify-content-between w-100">
                             <span>
                                 <icon class="mr-1" :icon="activity.icon" />
                                 <span v-localize class="font-weight-bold">{{
                                     activity.title || "No title available"
                                 }}</span>
                             </span>
+                            <div v-if="activity.optional">
+                                <BButton
+                                    v-if="activity.mutable"
+                                    v-b-tooltip.hover
+                                    data-description="delete activity"
+                                    size="sm"
+                                    title="Delete Activity"
+                                    variant="link"
+                                    @click.stop="onRemove(activity)">
+                                    <FontAwesomeIcon icon="fa-trash" fa-fw />
+                                </BButton>
+                                <BButton
+                                    v-if="activity.visible"
+                                    v-b-tooltip.hover
+                                    size="sm"
+                                    title="Hide in Activity Bar"
+                                    variant="link"
+                                    @click="onFavorite(activity)">
+                                    <FontAwesomeIcon icon="fas fa-star" fa-fw />
+                                </BButton>
+                                <BButton
+                                    v-else
+                                    v-b-tooltip.hover
+                                    size="sm"
+                                    title="Show in Activity Bar"
+                                    variant="link"
+                                    @click="onFavorite(activity)">
+                                    <FontAwesomeIcon icon="far fa-star" fa-fw />
+                                </BButton>
+                            </div>
                         </span>
-                        <b-button
-                            v-if="activity.mutable"
-                            data-description="delete activity"
-                            class="button-delete"
-                            size="sm"
-                            variant="link"
-                            @click.stop="onRemove(activity)">
-                            <FontAwesomeIcon icon="fa-trash" fa-fw />
-                        </b-button>
                     </div>
                     <div v-localize class="text-muted">
                         {{ activity.description || "No description available" }}
@@ -121,13 +134,6 @@ function onRemove(activity: Activity) {
     text-align: left;
     transition: none;
     width: 100%;
-
-    .icon-check {
-        color: darken($brand-success, 15%);
-    }
-    .button-delete {
-        background: transparent;
-    }
 }
 .activity-settings-item:hover {
     background: $gray-200;
diff --git a/client/src/components/Masthead/MastheadDropdown.vue b/client/src/components/Masthead/MastheadDropdown.vue
index f3c7a96c0844..8e5a0bcb89e4 100644
--- a/client/src/components/Masthead/MastheadDropdown.vue
+++ b/client/src/components/Masthead/MastheadDropdown.vue
@@ -30,17 +30,13 @@ defineProps({
 </script>
 
 <template>
-    <BNavItemDropdown :id="id" :title="tooltip" ref="dropdown" right v-b-tooltip.hover.bottom>
+    <BNavItemDropdown :id="id" ref="dropdown" v-b-tooltip.hover.bottom :title="tooltip" right>
         <template v-if="icon" v-slot:button-content>
             <span class="sr-only">{{ tooltip || id }}</span>
             <span class="fa fa-fw" :class="icon" />
         </template>
         <template>
-            <BDropdownItem
-                v-for="(item, idx) in menu"
-                :key="idx"
-                role="menuitem"
-                @click="item.handler">
+            <BDropdownItem v-for="(item, idx) in menu" :key="idx" role="menuitem" @click="item.handler">
                 <span class="fa fa-fw" :class="item.icon" />
                 <span>{{ item.title }}</span>
             </BDropdownItem>

From 83d484e682e2c24ad06d823d45ecf5eeda34cc0a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 May 2024 11:46:48 +0300
Subject: [PATCH 38/60] Reframe activity settings as list of all activities

---
 client/src/components/ActivityBar/ActivityBar.vue | 4 ++--
 client/src/components/Panels/SettingsPanel.vue    | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 0d9f83fb3d05..4a26b363cf91 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -216,9 +216,9 @@ watch(
                     @click="onToggleSidebar('notifications')" />
                 <ActivityItem
                     id="activity-settings"
-                    icon="cog"
+                    icon="ellipsis-h"
                     :is-active="isActiveSideBar('settings')"
-                    title="Settings"
+                    title="More"
                     tooltip="Edit preferences"
                     @click="onToggleSidebar('settings')" />
                 <ActivityItem
diff --git a/client/src/components/Panels/SettingsPanel.vue b/client/src/components/Panels/SettingsPanel.vue
index b48829721792..10d38496bd2a 100644
--- a/client/src/components/Panels/SettingsPanel.vue
+++ b/client/src/components/Panels/SettingsPanel.vue
@@ -13,9 +13,8 @@ function onQuery(newQuery: string) {
 </script>
 
 <template>
-    <ActivityPanel title="Settings" go-to-all-title="User Preferences" href="/user">
+    <ActivityPanel title="Additional Activities">
         <template v-slot:header>
-            <h3>Customize Activity Bar</h3>
             <DelayedInput :delay="100" placeholder="Search activities" @change="onQuery" />
         </template>
         <ActivitySettings :query="query" />

From b3f4bb274f347b4a301ada7ac2a76d5e40d576f6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 May 2024 14:36:09 +0300
Subject: [PATCH 39/60] Only display optional activities when user clicks on
 more

---
 .../components/ActivityBar/ActivityBar.vue    |  8 ++-----
 .../ActivityBar/ActivitySettings.vue          | 15 +++++++------
 client/src/composables/useActivityAction.ts   | 21 +++++++++++++++++++
 client/src/stores/activitySetup.ts            | 14 ++++++++++++-
 client/src/stores/activityStore.ts            |  2 ++
 5 files changed, 47 insertions(+), 13 deletions(-)
 create mode 100644 client/src/composables/useActivityAction.ts

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 4a26b363cf91..cde4d7b190ad 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -179,11 +179,7 @@ watch(
                                 :to="activity.to"
                                 @click="onToggleSidebar()" />
                             <ActivityItem
-                                v-else-if="
-                                    ['admin', 'tools', 'visualizations', 'multiview', 'invocation'].includes(
-                                        activity.id
-                                    )
-                                "
+                                v-else-if="activity.id === 'admin' || activity.panel"
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
@@ -219,7 +215,7 @@ watch(
                     icon="ellipsis-h"
                     :is-active="isActiveSideBar('settings')"
                     title="More"
-                    tooltip="Edit preferences"
+                    tooltip="View additional activities"
                     @click="onToggleSidebar('settings')" />
                 <ActivityItem
                     v-if="isAdmin"
diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index f9a93b755360..231d4a1170fc 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
 import { computed, type ComputedRef } from "vue";
 
+import { useActivityAction } from "@/composables/useActivityAction";
 import { type Activity, useActivityStore } from "@/stores/activityStore";
 
 library.add({
@@ -22,6 +23,7 @@ const props = defineProps<{
 
 const activityStore = useActivityStore();
 const { activities } = storeToRefs(activityStore);
+const activityAction = useActivityAction();
 
 const filteredActivities = computed(() => {
     if (props.query?.length > 0) {
@@ -45,8 +47,6 @@ const foundActivities: ComputedRef<boolean> = computed(() => {
     return filteredActivities.value.length > 0;
 });
 
-function onClick(activity: Activity) {}
-
 function onFavorite(activity: Activity) {
     if (activity.optional) {
         activity.visible = !activity.visible;
@@ -62,7 +62,10 @@ function onRemove(activity: Activity) {
     <div class="activity-settings rounded no-highlight">
         <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)">
+                <button
+                    v-if="activity.optional"
+                    class="activity-settings-item p-2 cursor-pointer"
+                    @click="activityAction.executeActivity(activity)">
                     <div class="d-flex justify-content-between align-items-start">
                         <span class="d-flex justify-content-between w-100">
                             <span>
@@ -71,7 +74,7 @@ function onRemove(activity: Activity) {
                                     activity.title || "No title available"
                                 }}</span>
                             </span>
-                            <div v-if="activity.optional">
+                            <div>
                                 <BButton
                                     v-if="activity.mutable"
                                     v-b-tooltip.hover
@@ -88,7 +91,7 @@ function onRemove(activity: Activity) {
                                     size="sm"
                                     title="Hide in Activity Bar"
                                     variant="link"
-                                    @click="onFavorite(activity)">
+                                    @click.stop="onFavorite(activity)">
                                     <FontAwesomeIcon icon="fas fa-star" fa-fw />
                                 </BButton>
                                 <BButton
@@ -97,7 +100,7 @@ function onRemove(activity: Activity) {
                                     size="sm"
                                     title="Show in Activity Bar"
                                     variant="link"
-                                    @click="onFavorite(activity)">
+                                    @click.stop="onFavorite(activity)">
                                     <FontAwesomeIcon icon="far fa-star" fa-fw />
                                 </BButton>
                             </div>
diff --git a/client/src/composables/useActivityAction.ts b/client/src/composables/useActivityAction.ts
new file mode 100644
index 000000000000..3dc1babc7f84
--- /dev/null
+++ b/client/src/composables/useActivityAction.ts
@@ -0,0 +1,21 @@
+import { useRouter } from "vue-router/composables";
+
+import { type Activity } from "@/stores/activityStore";
+import { useUserStore } from "@/stores/userStore";
+
+export function useActivityAction() {
+    const router = useRouter();
+    const userStore = useUserStore();
+    const executeActivity = (activity: Activity) => {
+        if (activity.panel) {
+            userStore.toggleSideBar(activity.id);
+        }
+        if (activity.to) {
+            router.push(activity.to);
+        }
+    };
+
+    return {
+        executeActivity,
+    };
+}
diff --git a/client/src/stores/activitySetup.ts b/client/src/stores/activitySetup.ts
index ed03211f5306..724921368c9a 100644
--- a/client/src/stores/activitySetup.ts
+++ b/client/src/stores/activitySetup.ts
@@ -7,11 +7,12 @@ import { type EventData } from "@/stores/eventStore";
 export const Activities = [
     {
         anonymous: false,
-        description: "Displays currently active interactive tools (ITs), if these are enabled by the administrator.",
+        description: "Displays currently running interactive tools (ITs), if these are enabled by the administrator.",
         icon: "fa-laptop",
         id: "interactivetools",
         mutable: false,
         optional: false,
+        panel: false,
         title: "Interactive Tools",
         tooltip: "Show active interactive tools",
         to: "/interactivetool_entry_points/list",
@@ -24,6 +25,7 @@ export const Activities = [
         id: "upload",
         mutable: false,
         optional: false,
+        panel: false,
         title: "Upload",
         to: null,
         tooltip: "Download from URL or upload files from disk",
@@ -36,6 +38,7 @@ export const Activities = [
         id: "tools",
         mutable: false,
         optional: false,
+        panel: true,
         title: "Tools",
         to: null,
         tooltip: "Search and run tools",
@@ -48,6 +51,7 @@ export const Activities = [
         id: "workflows",
         mutable: false,
         optional: true,
+        panel: false,
         title: "Workflows",
         to: "/workflows/list",
         tooltip: "Search and run workflows",
@@ -60,6 +64,7 @@ export const Activities = [
         id: "invocation",
         mutable: false,
         optional: true,
+        panel: true,
         title: "Workflow Invocations",
         tooltip: "Show all workflow runs",
         to: null,
@@ -72,6 +77,7 @@ export const Activities = [
         id: "visualizations",
         mutable: false,
         optional: true,
+        panel: true,
         title: "Visualization",
         to: null,
         tooltip: "Visualize datasets",
@@ -84,6 +90,7 @@ export const Activities = [
         id: "histories",
         mutable: false,
         optional: true,
+        panel: false,
         title: "Histories",
         tooltip: "Show all histories",
         to: "/histories/list",
@@ -96,6 +103,7 @@ export const Activities = [
         id: "multiview",
         mutable: false,
         optional: true,
+        panel: true,
         title: "History Multiview",
         tooltip: "Select histories to show in History Multiview",
         to: "/histories/view_multiple",
@@ -108,6 +116,7 @@ export const Activities = [
         id: "datasets",
         mutable: false,
         optional: true,
+        panel: false,
         title: "Datasets",
         tooltip: "Show all datasets",
         to: "/datasets/list",
@@ -120,6 +129,7 @@ export const Activities = [
         id: "pages",
         mutable: false,
         optional: true,
+        panel: false,
         title: "Pages",
         tooltip: "Show all pages",
         to: "/pages/list",
@@ -136,6 +146,7 @@ export function convertDropData(data: EventData): Activity | null {
             id: `dataset-${data.id}`,
             mutable: true,
             optional: true,
+            panel: false,
             title: data.name as string,
             tooltip: "View your dataset",
             to: `/datasets/${data.id}/preview`,
@@ -150,6 +161,7 @@ export function convertDropData(data: EventData): Activity | null {
             id: `workflow-${data.id}`,
             mutable: true,
             optional: true,
+            panel: false,
             title: data.name as string,
             tooltip: data.name as string,
             to: `/workflows/run?id=${data.id}`,
diff --git a/client/src/stores/activityStore.ts b/client/src/stores/activityStore.ts
index c7435f2ad10a..ed99ec67b2f7 100644
--- a/client/src/stores/activityStore.ts
+++ b/client/src/stores/activityStore.ts
@@ -22,6 +22,8 @@ export interface Activity {
     mutable: boolean;
     // indicate wether this activity can be disabled by the user
     optional: boolean;
+    // specifiy wether this activity utilizes the side panel
+    panel: boolean;
     // title to be displayed in the activity bar
     title: string;
     // route to be executed upon selecting the activity

From 20d77f1e10598fbab65d636620052f87c262cc74 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 May 2024 14:45:07 +0300
Subject: [PATCH 40/60] Fix regular icon state in activity list

---
 client/src/components/ActivityBar/ActivitySettings.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index 231d4a1170fc..fe2ecce28dd5 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faSquare } from "@fortawesome/free-regular-svg-icons";
+import { faSquare, faStar as faStarRegular } from "@fortawesome/free-regular-svg-icons";
 import { faCheckSquare, faStar, faThumbtack, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
@@ -13,6 +13,7 @@ library.add({
     faCheckSquare,
     faSquare,
     faStar,
+    faStarRegular,
     faTrash,
     faThumbtack,
 });

From 4d2fe613e2a5bb1aad1ea2fe52987afe04be4492 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 30 May 2024 18:20:04 +0300
Subject: [PATCH 41/60] Adjust selenium tests with regard to updated user
 dropdown

---
 client/src/stores/activityStore.test.ts    |  3 +++
 client/src/utils/navigation/navigation.yml | 24 ++++++++++------------
 lib/galaxy/selenium/navigates_galaxy.py    |  5 +++--
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/client/src/stores/activityStore.test.ts b/client/src/stores/activityStore.test.ts
index 95f71bba9cd2..e5fee99c70ea 100644
--- a/client/src/stores/activityStore.test.ts
+++ b/client/src/stores/activityStore.test.ts
@@ -12,6 +12,7 @@ jest.mock("./activitySetup", () => ({
             id: "a-id",
             mutable: false,
             optional: false,
+            panel: true,
             title: "a-title",
             to: null,
             tooltip: "a-tooltip",
@@ -28,6 +29,7 @@ const newActivities = [
         id: "a-id",
         mutable: false,
         optional: false,
+        panel: true,
         title: "a-title",
         to: "a-to-new",
         tooltip: "a-tooltip-new",
@@ -40,6 +42,7 @@ const newActivities = [
         id: "b-id",
         mutable: true,
         optional: false,
+        panel: true,
         title: "b-title-new",
         to: "b-to-new",
         tooltip: "b-tooltip-new",
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 4d54b5aa473f..1408646dbda8 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -40,26 +40,24 @@ masthead:
   selectors:
     _: '#masthead'
 
-    # bootstrap-vue a tag doesn't work as link target, need to hit span inside
-    user: '#user.loggedin-only > a.nav-link > span'
-    register_or_login: '#user.loggedout-only > .nav-link'
-    logout: '#user.loggedin-only > .nav-link'
-    home: '#analysis'
     help: '#help'
-    login: '#user'
+    home: '#analysis'
     libraries: '#library'
-    window_manager: '#enable-window-manager'
-    workflow: '#workflow .nav-link'
-
-    username:
-      type: xpath
-      selector: '//a[contains(text(), "Signed in as")]'
-
+    login: '#user'
+    logout: '.dropdown-menu > li > a > .fa-sign-out-alt'
     logged_in_only: '.loggedin-only'
     logged_out_only: '.loggedout-only'
+    preferences: '.dropdown-menu > li > a > .fa-gear'
+    register_or_login: '#user.loggedout-only > .nav-link'
     storage_dashboard_link:
       selector: 'storage dashboard link'
       type: data-description
+    user: '#user.loggedin-only > a.nav-link > .fa'
+    username:
+      type: xpath
+      selector: '//a[contains(text(), "Signed in as")]'
+    window_manager: '#enable-window-manager'
+    workflow: '#workflow .nav-link'
 
 preferences:
   selectors:
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 30f676abc215..4fefd36a282a 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1247,8 +1247,8 @@ def navigate_to_histories_shared_with_me_page(self):
 
     def navigate_to_user_preferences(self):
         self.home()
-        self.components.preferences.activity.wait_for_and_click()
-        self.components.preferences.activity_expand.wait_for_and_click()
+        self.components.masthead.user.wait_for_and_click()
+        self.components.masthead.preferences.wait_for_and_click()
 
     def navigate_to_invocations(self):
         self.home()
@@ -1989,6 +1989,7 @@ def logout_if_needed(self):
 
     def logout(self):
         self.components.masthead.logged_in_only.wait_for_visible()
+        self.components.masthead.user.wait_for_and_click()
         self.components.masthead.logout.wait_for_and_click()
         try:
             self.components.masthead.logged_out_only.wait_for_visible()

From 3eeb10708a239cccbd3e3c5305476bf34b9e79ba Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 30 May 2024 18:42:52 +0300
Subject: [PATCH 42/60] Adjust jest test with regard to changes in activity
 panel

---
 .../ActivityBar/ActivitySettings.test.js      | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivitySettings.test.js b/client/src/components/ActivityBar/ActivitySettings.test.js
index e5555451ec85..2fd33b00d02e 100644
--- a/client/src/components/ActivityBar/ActivitySettings.test.js
+++ b/client/src/components/ActivityBar/ActivitySettings.test.js
@@ -19,7 +19,7 @@ function testActivity(id, newOptions = {}) {
         description: "activity-test-description",
         icon: "activity-test-icon",
         mutable: true,
-        optional: false,
+        optional: true,
         title: "activity-test-title",
         to: null,
         tooltip: "activity-test-tooltip",
@@ -56,22 +56,23 @@ describe("ActivitySettings", () => {
 
     it("availability of built-in activities", async () => {
         const items = wrapper.findAll(activityItemSelector);
-        expect(items.length).toBe(Activities.length);
+        const nOptional = Activities.filter((x) => x.optional).length;
+        expect(items.length).toBe(nOptional);
     });
 
-    it("visible but non-optional activity", async () => {
+    it("visible and optional activity", async () => {
         activityStore.setAll([testActivity("1")]);
         await wrapper.vm.$nextTick();
         const items = wrapper.findAll(activityItemSelector);
         expect(items.length).toBe(1);
-        const pinnedCheckbox = items.at(0).find("[data-icon='thumbtack']");
-        expect(pinnedCheckbox.exists()).toBeTruthy();
-        const pinnedIcon = wrapper.find("[icon='activity-test-icon'");
-        expect(pinnedIcon.exists()).toBeTruthy();
+        const checkbox = items.at(0).find("[title='Hide in Activity Bar']");
+        expect(checkbox.exists()).toBeTruthy();
+        const icon = wrapper.find("[icon='activity-test-icon'");
+        expect(icon.exists()).toBeTruthy();
         expect(activityStore.getAll()[0].visible).toBeTruthy();
-        pinnedCheckbox.trigger("click");
+        checkbox.trigger("click");
         await wrapper.vm.$nextTick();
-        expect(activityStore.getAll()[0].visible).toBeTruthy();
+        expect(activityStore.getAll()[0].visible).toBeFalsy();
     });
 
     it("non-visible but optional activity", async () => {
@@ -84,12 +85,12 @@ describe("ActivitySettings", () => {
         await wrapper.vm.$nextTick();
         const items = wrapper.findAll(activityItemSelector);
         expect(items.length).toBe(1);
-        const hiddenCheckbox = items.at(0).find("[data-icon='square']");
-        expect(hiddenCheckbox.exists()).toBeTruthy();
+        const checkbox = items.at(0).find("[title='Show in Activity Bar']");
+        expect(checkbox.exists()).toBeTruthy();
         expect(activityStore.getAll()[0].visible).toBeFalsy();
-        hiddenCheckbox.trigger("click");
+        checkbox.trigger("click");
         await wrapper.vm.$nextTick();
-        const visibleCheckbox = items.at(0).find("[data-icon='check-square']");
+        const visibleCheckbox = items.at(0).find("[title='Hide in Activity Bar']");
         expect(visibleCheckbox.exists()).toBeTruthy();
         expect(activityStore.getAll()[0].visible).toBeTruthy();
     });

From ca11e91035d5f9a616fa81326a7431123a8d08c3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 30 May 2024 19:54:50 +0300
Subject: [PATCH 43/60] Add username to user tab in masthead

---
 client/src/components/Masthead/Masthead.vue         | 3 ++-
 client/src/components/Masthead/MastheadDropdown.vue | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index b4a8ca91bf85..bda441865d7b 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -14,7 +14,7 @@ import MastheadDropdown from "./MastheadDropdown";
 import MastheadItem from "./MastheadItem";
 import QuotaMeter from "./QuotaMeter";
 
-const { isAnonymous } = storeToRefs(useUserStore());
+const { isAnonymous, currentUser } = storeToRefs(useUserStore());
 
 const router = useRouter();
 const { config, isConfigLoaded } = useConfig();
@@ -128,6 +128,7 @@ onMounted(() => {
                 id="user"
                 class="loggedin-only"
                 icon="fa-user"
+                :title="currentUser.username"
                 tooltip="User Preferences"
                 :menu="[
                     {
diff --git a/client/src/components/Masthead/MastheadDropdown.vue b/client/src/components/Masthead/MastheadDropdown.vue
index 8e5a0bcb89e4..f45ae1ddcb57 100644
--- a/client/src/components/Masthead/MastheadDropdown.vue
+++ b/client/src/components/Masthead/MastheadDropdown.vue
@@ -34,6 +34,7 @@ defineProps({
         <template v-if="icon" v-slot:button-content>
             <span class="sr-only">{{ tooltip || id }}</span>
             <span class="fa fa-fw" :class="icon" />
+            <span>{{ title }}</span>
         </template>
         <template>
             <BDropdownItem v-for="(item, idx) in menu" :key="idx" role="menuitem" @click="item.handler">

From 0f5b26106d073e26d9263a1b7b289aca37fe52e7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 30 May 2024 20:45:15 +0300
Subject: [PATCH 44/60] Adjust quota meter, consistently show progress bar,
 adjust tooltip

---
 client/src/components/Masthead/QuotaMeter.vue | 70 ++++---------------
 1 file changed, 13 insertions(+), 57 deletions(-)

diff --git a/client/src/components/Masthead/QuotaMeter.vue b/client/src/components/Masthead/QuotaMeter.vue
index 195d3e1ff0cf..4e3bfcbab945 100644
--- a/client/src/components/Masthead/QuotaMeter.vue
+++ b/client/src/components/Masthead/QuotaMeter.vue
@@ -1,30 +1,12 @@
 <template>
-    <div>
-        <div v-if="!hasQuota" class="quota-text d-flex align-items-center">
-            <b-link
-                v-b-tooltip.hover.bottom
-                to="/storage"
-                :disabled="isAnonymous"
-                class="ml-auto"
-                :title="title"
-                data-description="storage dashboard link">
-                {{ usingString + " " + totalUsageString }}
-            </b-link>
-        </div>
-        <div v-else class="quota-meter d-flex align-items-center">
-            <b-link
-                v-b-tooltip.hover.left
-                class="quota-progress"
-                :disabled="isAnonymous"
-                to="/storage"
-                :title="title"
-                data-description="storage dashboard link">
-                <b-progress :max="100">
-                    <b-progress-bar aria-label="Quota usage" :value="usage" :variant="variant" />
-                </b-progress>
-                <span>{{ usingString + " " + usage.toFixed(0) }}%</span>
-            </b-link>
-        </div>
+    <div v-b-tooltip.hover.bottom class="quota-meter d-flex align-items-center" title="Storage and Usage Details">
+        <b-link class="quota-progress" to="/storage" data-description="storage dashboard link">
+            <b-progress :max="100">
+                <b-progress-bar aria-label="Quota usage" :value="usage" :variant="variant" />
+            </b-progress>
+            <span v-if="hasQuota">{{ usingString + " " + usage.toFixed(0) }}%</span>
+            <span v-else>{{ usingString + " " + totalUsageString }}</span>
+        </b-link>
     </div>
 </template>
 
@@ -44,11 +26,10 @@ export default {
     },
     computed: {
         ...mapState(useConfigStore, ["config"]),
-        ...mapState(useUserStore, ["currentUser", "isAnonymous"]),
+        ...mapState(useUserStore, ["currentUser"]),
         hasQuota() {
             const quotasEnabled = this.config?.enable_quotas ?? false;
             const quotaLimited = this.currentUser?.quota !== "unlimited" ?? false;
-
             return quotasEnabled && quotaLimited;
         },
         usage() {
@@ -62,20 +43,6 @@ export default {
             const total = this.currentUser?.total_disk_usage ?? 0;
             return bytesToString(total, true);
         },
-        title() {
-            let details = "";
-            if (this.isAnonymous) {
-                details = this.l("Log in for details.");
-            } else {
-                details = this.l("Click for details.");
-            }
-
-            if (this.hasQuota) {
-                return this.usingString + " " + this.totalUsageString + ". " + details;
-            } else {
-                return details;
-            }
-        },
         variant() {
             if (!this.hasQuota || this.usage < 80) {
                 return "success";
@@ -90,24 +57,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.quote-container {
+.quota-meter {
     position: relative;
     height: 100%;
-}
-.quota-text {
-    @extend .quote-container;
-    background: var(--masthead-link-color);
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
-    a {
-        color: var(--masthead-text-color);
-        text-decoration: none;
-    }
-}
-.quota-meter {
-    @extend .quote-container;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
     .quota-progress {
-        width: 100px;
+        width: 150px;
         height: 1.4em;
         position: relative;
         & > * {

From fc3dd1e4861b4b8169262d95a0fd9f685134fab0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 30 May 2024 20:54:46 +0300
Subject: [PATCH 45/60] Add loading spinner to masthead

---
 client/src/components/Masthead/Masthead.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index bda441865d7b..fdfe1678a219 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -144,6 +144,7 @@ onMounted(() => {
                 ]"
                 @click="userLogout" />
         </BNavbarNav>
+        <Icon v-else icon="spinner" class="fa-spin mr-2 text-light" />
     </BNavbar>
 </template>
 

From c0de4962a38bc51c957f707b752ca7320df1b87a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 31 May 2024 00:56:23 +0300
Subject: [PATCH 46/60] Adjust quota meter test case

---
 .../components/Masthead/QuotaMeter.test.ts    | 33 +++----------------
 1 file changed, 5 insertions(+), 28 deletions(-)

diff --git a/client/src/components/Masthead/QuotaMeter.test.ts b/client/src/components/Masthead/QuotaMeter.test.ts
index 583543cb38ad..540f374807f1 100644
--- a/client/src/components/Masthead/QuotaMeter.test.ts
+++ b/client/src/components/Masthead/QuotaMeter.test.ts
@@ -17,7 +17,6 @@ async function createQuotaMeterWrapper(config: any, userData: any) {
     const pinia = createTestingPinia();
     const userStore = useUserStore();
     userStore.currentUser = { ...userStore.currentUser, ...userData };
-
     const wrapper = mount(QuotaMeter, {
         localVue,
         pinia,
@@ -32,51 +31,34 @@ describe("QuotaMeter.vue", () => {
             total_disk_usage: 5120,
             quota_percent: 50,
         };
-
         const config = { enable_quotas: true };
         const wrapper = await createQuotaMeterWrapper(config, user);
-
         expect(wrapper.find(".quota-progress > span").text()).toBe("Using 50%");
     });
 
     it("changes appearance depending on usage", async () => {
         const config = { enable_quotas: true };
-
         {
             const user = { quota_percent: 30 };
             const wrapper = await createQuotaMeterWrapper(config, user);
-
             expect(wrapper.find(".quota-progress .progress-bar").classes()).toContain("bg-success");
         }
-
         {
             const user = { quota_percent: 80 };
             const wrapper = await createQuotaMeterWrapper(config, user);
-
             expect(wrapper.find(".quota-progress .progress-bar").classes()).toContain("bg-warning");
         }
-
         {
             const user = { quota_percent: 95 };
             const wrapper = await createQuotaMeterWrapper(config, user);
-
             expect(wrapper.find(".quota-progress .progress-bar").classes()).toContain("bg-danger");
         }
     });
 
-    it("prompts user to log in", async () => {
+    it("displays tooltip", async () => {
         const config = { enable_quotas: true };
         const wrapper = await createQuotaMeterWrapper(config, {});
-
-        expect(wrapper.find(".quota-meter > a").attributes("title")).toContain("Log in");
-    });
-
-    it("shows total usage in title", async () => {
-        const user = { total_disk_usage: 9216 };
-        const config = { enable_quotas: true };
-        const wrapper = await createQuotaMeterWrapper(config, user);
-
-        expect(wrapper.find(".quota-progress").attributes("title")).toContain("9 KB");
+        expect(wrapper.attributes("title")).toContain("Storage");
     });
 
     it("shows total usage when there is no quota", async () => {
@@ -84,22 +66,17 @@ describe("QuotaMeter.vue", () => {
             const user = { total_disk_usage: 7168 };
             const config = { enable_quotas: false };
             const wrapper = await createQuotaMeterWrapper(config, user);
-
-            expect(wrapper.find(".quota-text > a").text()).toBe("Using 7 KB");
-            expect(wrapper.find(".quota-text > a").attributes("title")).not.toContain("7 KB");
+            console.log(wrapper.html());
+            expect(wrapper.find("span").text()).toBe("Using 7 KB");
         }
-
         {
             const user = {
                 total_disk_usage: 21504,
                 quota: "unlimited",
             };
-
             const config = { enable_quotas: true };
             const wrapper = await createQuotaMeterWrapper(config, user);
-
-            expect(wrapper.find(".quota-text > a").text()).toBe("Using 21 KB");
-            expect(wrapper.find(".quota-text > a").attributes("title")).not.toContain("21 KB");
+            expect(wrapper.find("span").text()).toBe("Using 21 KB");
         }
     });
 });

From aa4a8b8ec491d98c4dba3f6eb7285469c1be2387 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 31 May 2024 07:48:55 +0300
Subject: [PATCH 47/60] Adjust tool running selenium test case in the context
 of object store

---
 test/integration_selenium/test_objectstore_selection.py | 2 --
 1 file changed, 2 deletions(-)

diff --git a/test/integration_selenium/test_objectstore_selection.py b/test/integration_selenium/test_objectstore_selection.py
index e0585bea6de9..aa7f28b0118d 100644
--- a/test/integration_selenium/test_objectstore_selection.py
+++ b/test/integration_selenium/test_objectstore_selection.py
@@ -118,7 +118,6 @@ def test_2_user_override(self):
         preferences = self.components.preferences
         preferences.preferred_storage.wait_for_and_click()
         self.select_storage("second")
-        self.navigate_to_tools()
         self.run_environment_test_tool()
         self.wait_for_hid_ok_and_open_details(1)
         details = self.components.object_store_details
@@ -137,7 +136,6 @@ def test_3_user_un_override(self):
         preferences = self.components.preferences
         preferences.preferred_storage.wait_for_and_click()
         self.select_storage("__null__")
-        self.navigate_to_tools()
         self.run_environment_test_tool()
         self.wait_for_hid_ok_and_open_details(1)
         details = self.components.object_store_details

From 765bab3470cfc5fe1cbc08873fb0fb66cd1dbb81 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 31 May 2024 08:30:05 +0300
Subject: [PATCH 48/60] Convert quota meter to composition api and typescript

---
 client/src/api/index.ts                       |   2 +-
 client/src/components/Masthead/QuotaMeter.vue | 100 ++++++++----------
 2 files changed, 48 insertions(+), 54 deletions(-)

diff --git a/client/src/api/index.ts b/client/src/api/index.ts
index d96eaedc56f8..144a65287836 100644
--- a/client/src/api/index.ts
+++ b/client/src/api/index.ts
@@ -223,7 +223,7 @@ export interface User extends QuotaUsageResponse {
     username?: string;
 }
 
-export interface AnonymousUser {
+export interface AnonymousUser extends QuotaUsageResponse {
     id?: string;
     isAnonymous: true;
     is_admin?: false;
diff --git a/client/src/components/Masthead/QuotaMeter.vue b/client/src/components/Masthead/QuotaMeter.vue
index 4e3bfcbab945..06a46fc366c1 100644
--- a/client/src/components/Masthead/QuotaMeter.vue
+++ b/client/src/components/Masthead/QuotaMeter.vue
@@ -1,61 +1,55 @@
-<template>
-    <div v-b-tooltip.hover.bottom class="quota-meter d-flex align-items-center" title="Storage and Usage Details">
-        <b-link class="quota-progress" to="/storage" data-description="storage dashboard link">
-            <b-progress :max="100">
-                <b-progress-bar aria-label="Quota usage" :value="usage" :variant="variant" />
-            </b-progress>
-            <span v-if="hasQuota">{{ usingString + " " + usage.toFixed(0) }}%</span>
-            <span v-else>{{ usingString + " " + totalUsageString }}</span>
-        </b-link>
-    </div>
-</template>
+<script setup lang="ts">
+import { BLink, BProgress, BProgressBar } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
 
-<script>
-import { mapState } from "pinia";
-import { bytesToString } from "utils/utils";
-
-import { useConfigStore } from "@/stores/configurationStore";
+import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
+import { bytesToString } from "@/utils/utils";
+
+const { config } = useConfig();
+const { currentUser } = storeToRefs(useUserStore());
+
+const hasQuota = computed(() => {
+    const quotasEnabled = config.value.enable_quotas ?? false;
+    const quotaLimited = currentUser.value?.quota !== "unlimited" ?? false;
+    return quotasEnabled && quotaLimited;
+});
+
+const totalUsageString = computed(() => {
+    const total = currentUser.value?.total_disk_usage ?? 0;
+    return bytesToString(total, true);
+});
 
-export default {
-    name: "QuotaMeter",
-    data() {
-        return {
-            usingString: this.l("Using"),
-        };
-    },
-    computed: {
-        ...mapState(useConfigStore, ["config"]),
-        ...mapState(useUserStore, ["currentUser"]),
-        hasQuota() {
-            const quotasEnabled = this.config?.enable_quotas ?? false;
-            const quotaLimited = this.currentUser?.quota !== "unlimited" ?? false;
-            return quotasEnabled && quotaLimited;
-        },
-        usage() {
-            if (this.hasQuota) {
-                return this.currentUser?.quota_percent ?? 0;
-            } else {
-                return this.currentUser?.total_disk_usage ?? 0;
-            }
-        },
-        totalUsageString() {
-            const total = this.currentUser?.total_disk_usage ?? 0;
-            return bytesToString(total, true);
-        },
-        variant() {
-            if (!this.hasQuota || this.usage < 80) {
-                return "success";
-            } else if (this.usage < 95) {
-                return "warning";
-            } else {
-                return "danger";
-            }
-        },
-    },
-};
+const usage = computed(() => {
+    if (hasQuota.value) {
+        return currentUser.value?.quota_percent ?? 0;
+    }
+    return currentUser.value?.total_disk_usage ?? 0;
+});
+
+const variant = computed(() => {
+    if (!hasQuota.value || usage.value < 80) {
+        return "success";
+    } else if (usage.value < 95) {
+        return "warning";
+    }
+    return "danger";
+});
 </script>
 
+<template>
+    <div v-b-tooltip.hover.bottom class="quota-meter d-flex align-items-center" title="Storage and Usage Details">
+        <BLink class="quota-progress" to="/storage" data-description="storage dashboard link">
+            <BProgress :max="100">
+                <BProgressBar aria-label="Quota usage" :value="usage" :variant="variant" />
+            </BProgress>
+            <span v-if="hasQuota">{{ "Usage " + usage.toFixed(0) }}%</span>
+            <span v-else>{{ "Usage " + totalUsageString }}</span>
+        </BLink>
+    </div>
+</template>
+
 <style lang="scss" scoped>
 .quota-meter {
     position: relative;

From 5cdd404f02923e12ba8dcb0fd9cc8484d737781e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 31 May 2024 08:54:04 +0300
Subject: [PATCH 49/60] Adjust quota meter jest test

---
 client/src/components/Masthead/QuotaMeter.test.ts | 13 ++++++++++---
 client/src/components/Masthead/QuotaMeter.vue     |  4 ++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Masthead/QuotaMeter.test.ts b/client/src/components/Masthead/QuotaMeter.test.ts
index 540f374807f1..9e5b22c62886 100644
--- a/client/src/components/Masthead/QuotaMeter.test.ts
+++ b/client/src/components/Masthead/QuotaMeter.test.ts
@@ -3,17 +3,25 @@ import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { getLocalVue } from "tests/jest/helpers";
 
-import { mockFetcher } from "@/api/schema/__mocks__";
 import { useUserStore } from "@/stores/userStore";
 
 import QuotaMeter from "./QuotaMeter.vue";
 
 jest.mock("@/api/schema");
 
+let configValues = { enable_quotas: true };
+
+jest.mock("@/composables/config", () => ({
+    useConfig: jest.fn(() => ({
+        config: { value: { ...configValues } },
+        isConfigLoaded: true,
+    })),
+}));
+
 const localVue = getLocalVue();
 
 async function createQuotaMeterWrapper(config: any, userData: any) {
-    mockFetcher.path("/api/configuration").method("get").mock({ data: config });
+    configValues = { ...config };
     const pinia = createTestingPinia();
     const userStore = useUserStore();
     userStore.currentUser = { ...userStore.currentUser, ...userData };
@@ -66,7 +74,6 @@ describe("QuotaMeter.vue", () => {
             const user = { total_disk_usage: 7168 };
             const config = { enable_quotas: false };
             const wrapper = await createQuotaMeterWrapper(config, user);
-            console.log(wrapper.html());
             expect(wrapper.find("span").text()).toBe("Using 7 KB");
         }
         {
diff --git a/client/src/components/Masthead/QuotaMeter.vue b/client/src/components/Masthead/QuotaMeter.vue
index 06a46fc366c1..d22b2f13400e 100644
--- a/client/src/components/Masthead/QuotaMeter.vue
+++ b/client/src/components/Masthead/QuotaMeter.vue
@@ -44,8 +44,8 @@ const variant = computed(() => {
             <BProgress :max="100">
                 <BProgressBar aria-label="Quota usage" :value="usage" :variant="variant" />
             </BProgress>
-            <span v-if="hasQuota">{{ "Usage " + usage.toFixed(0) }}%</span>
-            <span v-else>{{ "Usage " + totalUsageString }}</span>
+            <span v-if="hasQuota">{{ "Using " + usage.toFixed(0) }}%</span>
+            <span v-else>{{ "Using " + totalUsageString }}</span>
         </BLink>
     </div>
 </template>

From 4430b42b07441b03ecdb9fade77970830b30444d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 31 May 2024 09:30:20 +0300
Subject: [PATCH 50/60] Add total quota to quota meter

---
 .../src/components/Masthead/QuotaMeter.test.ts   |  3 ++-
 client/src/components/Masthead/QuotaMeter.vue    | 16 +++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Masthead/QuotaMeter.test.ts b/client/src/components/Masthead/QuotaMeter.test.ts
index 9e5b22c62886..3599cc2d754a 100644
--- a/client/src/components/Masthead/QuotaMeter.test.ts
+++ b/client/src/components/Masthead/QuotaMeter.test.ts
@@ -38,10 +38,11 @@ describe("QuotaMeter.vue", () => {
         const user = {
             total_disk_usage: 5120,
             quota_percent: 50,
+            quota: "100 MB",
         };
         const config = { enable_quotas: true };
         const wrapper = await createQuotaMeterWrapper(config, user);
-        expect(wrapper.find(".quota-progress > span").text()).toBe("Using 50%");
+        expect(wrapper.find(".quota-progress > span").text()).toBe("Using 50% of 100 MB");
     });
 
     it("changes appearance depending on usage", async () => {
diff --git a/client/src/components/Masthead/QuotaMeter.vue b/client/src/components/Masthead/QuotaMeter.vue
index d22b2f13400e..55833a9ab511 100644
--- a/client/src/components/Masthead/QuotaMeter.vue
+++ b/client/src/components/Masthead/QuotaMeter.vue
@@ -16,6 +16,8 @@ const hasQuota = computed(() => {
     return quotasEnabled && quotaLimited;
 });
 
+const quotaLimit = computed(() => currentUser.value?.quota ?? 0);
+
 const totalUsageString = computed(() => {
     const total = currentUser.value?.total_disk_usage ?? 0;
     return bytesToString(total, true);
@@ -44,8 +46,14 @@ const variant = computed(() => {
             <BProgress :max="100">
                 <BProgressBar aria-label="Quota usage" :value="usage" :variant="variant" />
             </BProgress>
-            <span v-if="hasQuota">{{ "Using " + usage.toFixed(0) }}%</span>
-            <span v-else>{{ "Using " + totalUsageString }}</span>
+            <span>
+                <span v-localize>Using</span>
+                <span v-if="hasQuota">
+                    <span>{{ usage.toFixed(0) }}%</span>
+                    <span v-if="quotaLimit !== 0">of {{ quotaLimit }}</span>
+                </span>
+                <span v-else>{{ totalUsageString }}</span>
+            </span>
         </BLink>
     </div>
 </template>
@@ -57,7 +65,7 @@ const variant = computed(() => {
     margin-left: 0.5rem;
     margin-right: 0.5rem;
     .quota-progress {
-        width: 150px;
+        width: 12rem;
         height: 1.4em;
         position: relative;
         & > * {
@@ -65,8 +73,6 @@ const variant = computed(() => {
             width: 100%;
             height: 100%;
             text-align: center;
-        }
-        & > span {
             line-height: 1.4em;
             pointer-events: none;
         }

From af8350a1b5b2435992cf6d2d57e8a20ec10a6880 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 31 May 2024 11:37:11 +0300
Subject: [PATCH 51/60] Fix typescript error in jest test

---
 client/src/api/index.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/api/index.test.ts b/client/src/api/index.test.ts
index 42b666b2f03f..fb16bc95edc2 100644
--- a/client/src/api/index.test.ts
+++ b/client/src/api/index.test.ts
@@ -22,6 +22,7 @@ const REGISTERED_USER: User = {
 
 const ANONYMOUS_USER: AnonymousUser = {
     isAnonymous: true,
+    total_disk_usage: 0,
 };
 
 const SESSIONLESS_USER = null;

From 136e8a67f12ac5c3807792283e5f91e1aaf6becc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 1 Jun 2024 15:34:24 +0300
Subject: [PATCH 52/60] Add prop for library metadata, possible reactivity
 issue?

---
 .../components/Libraries/LibraryFolder/LibraryFolder.vue  | 3 +++
 .../Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue   | 8 ++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue b/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue
index 6e2e6138ca00..8224ae89b030 100644
--- a/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue
+++ b/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
         <FolderTopBar
+            :canAddLibraryItem="canAddLibraryItem"
             :folder-contents="folderContents"
             :include-deleted.sync="includeDeleted"
             :folder_id="currentFolderId"
@@ -285,6 +286,7 @@ Vue.use(BootstrapVue);
 
 function initialFolderState() {
     return {
+        canAddLibraryItem: false,
         selected: [],
         unselected: [],
         expandedMessage: [],
@@ -387,6 +389,7 @@ export default {
                 .then((response) => {
                     this.folderContents = response.folder_contents;
                     this.folder_metadata = response.metadata;
+                    this.canAddLibraryItem = response.metadata.can_add_library_item;
                     this.total_rows = response.metadata.total_rows;
                     if (this.isAllSelectedMode) {
                         this.selected = [];
diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index cfdd97f1c429..de3b1c052e5b 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -12,7 +12,7 @@
                 <div class="form-inline">
                     <SearchField @updateSearch="updateSearch($event)"></SearchField>
                     <button
-                        v-if="metadata.can_add_library_item"
+                        v-if="canAddLibraryItem"
                         title="Create new folder"
                         class="btn btn-secondary toolbtn-create-folder add-library-items add-library-items-folder mr-1"
                         type="button"
@@ -20,7 +20,7 @@
                         <FontAwesomeIcon icon="plus" />
                         Folder
                     </button>
-                    <div v-if="metadata.can_add_library_item">
+                    <div v-if="canAddLibraryItem">
                         <div
                             title="Add datasets to current folder"
                             class="dropdown add-library-items add-library-items-datasets mr-1">
@@ -168,6 +168,10 @@ export default {
             type: Array,
             required: true,
         },
+        canAddLibraryItem: {
+            type: Boolean,
+            default: false,
+        },
         metadata: {
             type: Object,
             required: true,

From f170db9d3ff3b3d5a746b8141fa46f334007d958 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 1 Jun 2024 20:02:43 +0300
Subject: [PATCH 53/60] Make masthead tooltips noninteractive

---
 client/src/components/Masthead/MastheadDropdown.vue | 2 +-
 client/src/components/Masthead/MastheadItem.vue     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Masthead/MastheadDropdown.vue b/client/src/components/Masthead/MastheadDropdown.vue
index f45ae1ddcb57..d0292eabfaa9 100644
--- a/client/src/components/Masthead/MastheadDropdown.vue
+++ b/client/src/components/Masthead/MastheadDropdown.vue
@@ -30,7 +30,7 @@ defineProps({
 </script>
 
 <template>
-    <BNavItemDropdown :id="id" ref="dropdown" v-b-tooltip.hover.bottom :title="tooltip" right>
+    <BNavItemDropdown :id="id" ref="dropdown" v-b-tooltip.noninteractive.hover.bottom :title="tooltip" right>
         <template v-if="icon" v-slot:button-content>
             <span class="sr-only">{{ tooltip || id }}</span>
             <span class="fa fa-fw" :class="icon" />
diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index c4e95b0c0ead..227c86656927 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -38,7 +38,7 @@ defineProps({
 <template>
     <BNavItem
         :id="id"
-        v-b-tooltip.hover.bottom
+        v-b-tooltip.noninteractive.hover.bottom
         :href="withPrefix(url)"
         :target="target || '_parent'"
         :link-classes="{ 'nav-icon': !!icon, toggle: toggle }"

From f5b73ab57fef397a3f2187bf9837aac774a1b7cf Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 28 Jun 2024 10:53:08 +0200
Subject: [PATCH 54/60] Remove redundant home icon from masthead

---
 client/src/components/Masthead/Masthead.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index fdfe1678a219..9a4073d69ad9 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -72,6 +72,7 @@ onMounted(() => {
     <BNavbar id="masthead" type="dark" role="navigation" aria-label="Main" class="justify-content-between">
         <BNavbarNav>
             <BNavbarBrand
+                id="analysis"
                 v-b-tooltip.hover
                 class="ml-2 mr-2 p-0"
                 title="Home"
@@ -85,7 +86,6 @@ onMounted(() => {
             </span>
         </BNavbarNav>
         <BNavbarNav v-if="isConfigLoaded" class="mr-1">
-            <MastheadItem id="analysis" tooltip="Tools, Workflows and Histories" icon="fa-home" @click="openUrl('/')" />
             <MastheadItem id="library" icon="fa-database" tooltip="Data Libraries" @click="openUrl('/libraries')" />
             <MastheadItem
                 v-if="windowTab"

From b29c828c9d1ddf5af0b143c8de599fb7c968d50f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 28 Jun 2024 11:49:53 +0200
Subject: [PATCH 55/60] Adjust masthead test case

---
 client/src/components/Masthead/Masthead.test.js | 6 +++---
 client/src/components/Masthead/Masthead.vue     | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Masthead/Masthead.test.js b/client/src/components/Masthead/Masthead.test.js
index aa3923de8ccd..445cc235e9b9 100644
--- a/client/src/components/Masthead/Masthead.test.js
+++ b/client/src/components/Masthead/Masthead.test.js
@@ -52,10 +52,10 @@ describe("Masthead.vue", () => {
     });
 
     it("should render simple tab item links", () => {
-        expect(wrapper.findAll("li.nav-item").length).toBe(6);
+        expect(wrapper.findAll("li.nav-item").length).toBe(5);
         // Ensure specified link title respected.
-        expect(wrapper.find("#analysis a").text()).toBe("Tools, Workflows and Histories");
-        expect(wrapper.find("#analysis a").attributes("href")).toBe("#");
+        expect(wrapper.find("#help").text()).toBe("Support, Contact, and Community");
+        expect(wrapper.find("#help a").attributes("href")).toBe("/about");
     });
 
     it("should display window manager button", async () => {
diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 9a4073d69ad9..0af40bcd5059 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -108,6 +108,7 @@ onMounted(() => {
             <MastheadItem
                 id="help"
                 icon="fa-question"
+                url="/about"
                 tooltip="Support, Contact, and Community"
                 @click="openUrl('/about')" />
             <QuotaMeter />

From 360b1479897f7f344c6745fd9f07d36dc4dcf716 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 28 Jun 2024 12:39:27 +0200
Subject: [PATCH 56/60] Disable storage dashboard for anon users

---
 client/src/components/Masthead/QuotaMeter.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Masthead/QuotaMeter.vue b/client/src/components/Masthead/QuotaMeter.vue
index 55833a9ab511..6658ea7c7097 100644
--- a/client/src/components/Masthead/QuotaMeter.vue
+++ b/client/src/components/Masthead/QuotaMeter.vue
@@ -8,7 +8,7 @@ import { useUserStore } from "@/stores/userStore";
 import { bytesToString } from "@/utils/utils";
 
 const { config } = useConfig();
-const { currentUser } = storeToRefs(useUserStore());
+const { currentUser, isAnonymous } = storeToRefs(useUserStore());
 
 const hasQuota = computed(() => {
     const quotasEnabled = config.value.enable_quotas ?? false;
@@ -30,6 +30,10 @@ const usage = computed(() => {
     return currentUser.value?.total_disk_usage ?? 0;
 });
 
+const quotaTitle = computed(() =>
+    isAnonymous.value ? "Login to Access Storage Details" : "Storage and Usage Details"
+);
+
 const variant = computed(() => {
     if (!hasQuota.value || usage.value < 80) {
         return "success";
@@ -41,8 +45,8 @@ const variant = computed(() => {
 </script>
 
 <template>
-    <div v-b-tooltip.hover.bottom class="quota-meter d-flex align-items-center" title="Storage and Usage Details">
-        <BLink class="quota-progress" to="/storage" data-description="storage dashboard link">
+    <div v-b-tooltip.hover.bottom class="quota-meter d-flex align-items-center" :title="quotaTitle">
+        <BLink class="quota-progress" to="/storage" data-description="storage dashboard link" :disabled="isAnonymous">
             <BProgress :max="100">
                 <BProgressBar aria-label="Quota usage" :value="usage" :variant="variant" />
             </BProgress>

From 04c68ea645eb6b7845b8c02d1329886a747613a4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 28 Jun 2024 12:47:02 +0200
Subject: [PATCH 57/60] Link to login instead of disabling storage tab

---
 client/src/components/Masthead/QuotaMeter.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Masthead/QuotaMeter.vue b/client/src/components/Masthead/QuotaMeter.vue
index 6658ea7c7097..fe6ad9e1fcff 100644
--- a/client/src/components/Masthead/QuotaMeter.vue
+++ b/client/src/components/Masthead/QuotaMeter.vue
@@ -30,6 +30,8 @@ const usage = computed(() => {
     return currentUser.value?.total_disk_usage ?? 0;
 });
 
+const quotaLink = computed(() => (isAnonymous.value ? "/login/start" : "/storage"));
+
 const quotaTitle = computed(() =>
     isAnonymous.value ? "Login to Access Storage Details" : "Storage and Usage Details"
 );
@@ -46,7 +48,7 @@ const variant = computed(() => {
 
 <template>
     <div v-b-tooltip.hover.bottom class="quota-meter d-flex align-items-center" :title="quotaTitle">
-        <BLink class="quota-progress" to="/storage" data-description="storage dashboard link" :disabled="isAnonymous">
+        <BLink class="quota-progress" :to="quotaLink" data-description="storage dashboard link">
             <BProgress :max="100">
                 <BProgressBar aria-label="Quota usage" :value="usage" :variant="variant" />
             </BProgress>

From 8d20256c1b39e7a7cf89164c027e4475b73a3b64 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 28 Jun 2024 12:49:25 +0200
Subject: [PATCH 58/60] Add prevent directive to masthead item click handler

---
 client/src/components/Masthead/MastheadItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index 227c86656927..f3c1ca5c3ab5 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -43,7 +43,7 @@ defineProps({
         :target="target || '_parent'"
         :link-classes="{ 'nav-icon': !!icon, toggle: toggle }"
         :title="tooltip"
-        @click="$emit('click')">
+        @click.prevent="$emit('click')">
         <template v-if="icon">
             <!-- If this is an icon-based tab, inject tooltip directly for screen readers -->
             <span class="sr-only">{{ tooltip || id }}</span>

From 97663874844b802098a0e7bb02cd7b02820f8718 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 28 Jun 2024 14:37:06 +0200
Subject: [PATCH 59/60] Limit username text length in masthead

---
 client/src/components/Masthead/MastheadDropdown.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Masthead/MastheadDropdown.vue b/client/src/components/Masthead/MastheadDropdown.vue
index d0292eabfaa9..02bd10771694 100644
--- a/client/src/components/Masthead/MastheadDropdown.vue
+++ b/client/src/components/Masthead/MastheadDropdown.vue
@@ -2,6 +2,8 @@
 import { BDropdownItem, BNavItemDropdown, VBTooltipPlugin } from "bootstrap-vue";
 import Vue, { ref } from "vue";
 
+import TextShort from "@/components/Common/TextShort.vue";
+
 Vue.use(VBTooltipPlugin);
 
 const dropdown = ref(null);
@@ -34,7 +36,7 @@ defineProps({
         <template v-if="icon" v-slot:button-content>
             <span class="sr-only">{{ tooltip || id }}</span>
             <span class="fa fa-fw" :class="icon" />
-            <span>{{ title }}</span>
+            <TextShort :text="title" />
         </template>
         <template>
             <BDropdownItem v-for="(item, idx) in menu" :key="idx" role="menuitem" @click="item.handler">

From 3255601197fa9f6012209fc67e45c8e792eb4a3e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 28 Jun 2024 15:46:42 +0200
Subject: [PATCH 60/60] Improve brand alignment padding

---
 client/src/components/Masthead/Masthead.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 0af40bcd5059..1e166a469a03 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -81,7 +81,7 @@ onMounted(() => {
                 <img alt="logo" :src="withPrefix(logoSrc)" />
                 <img v-if="logoSrcSecondary" alt="logo" :src="withPrefix(logoSrcSecondary)" />
             </BNavbarBrand>
-            <span v-if="brand" class="navbar-text px-2">
+            <span v-if="brand" class="navbar-text py-0 px-2">
                 {{ brand }}
             </span>
         </BNavbarNav>