From 780f722c6086858a47b35a015f4da4ea7212a518 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 19 Dec 2022 19:57:56 -0500
Subject: [PATCH 01/57] Add d-flex parent

Place layout

Use components directly

Add padding to center panel, scope styles

Remove unused wrapper

Align dimensions to previous layout

Convert analysis module to composition api

Add navitem to sidebar

Use navbar vertical for now

Move upload-button to sidebar

Adjust background color

Add tooltip fix orientation

Remove unused imports, restore conditions

Align side panel size
---
 client/src/components/Panels/ToolBox.vue      |   4 +-
 client/src/components/Upload/UploadButton.vue |  14 +-
 .../src/entry/analysis/modules/Analysis.vue   | 166 ++++++++++--------
 3 files changed, 102 insertions(+), 82 deletions(-)

diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 5d8a462abdd6..49faacfb958f 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -30,7 +30,6 @@
                 @onQuery="onQuery"
                 @onResults="onResults" />
             <section v-if="!showAdvanced">
-                <upload-button />
                 <div v-if="hasResults" class="pb-2">
                     <b-button size="sm" class="w-100" @click="onToggle">
                         <span :class="buttonIcon" />
@@ -71,7 +70,7 @@
 import ToolSection from "./Common/ToolSection";
 import ToolSearch from "./Common/ToolSearch";
 import { UploadButton } from "components/Upload";
-import { useGlobalUploadModal } from "composables/globalUploadModal";
+import { openGlobalUploadModal } from "components/Upload";
 import FavoritesButton from "./Buttons/FavoritesButton";
 import PanelViewButton from "./Buttons/PanelViewButton";
 import { filterToolSections, filterTools, hasResults, hideToolsSection } from "./utilities";
@@ -81,7 +80,6 @@ import _l from "utils/localization";
 
 export default {
     components: {
-        UploadButton,
         FavoritesButton,
         PanelViewButton,
         ToolSection,
diff --git a/client/src/components/Upload/UploadButton.vue b/client/src/components/Upload/UploadButton.vue
index cfa90e5ae881..8ce67ff92796 100644
--- a/client/src/components/Upload/UploadButton.vue
+++ b/client/src/components/Upload/UploadButton.vue
@@ -1,25 +1,23 @@
 <template>
-    <b-button
+    <b-nav-item
         id="tool-panel-upload-button"
-        v-b-tooltip.hover.bottom
+        v-b-tooltip.hover.right
         :aria-label="title | localize"
         :title="title | localize"
         class="upload-button"
-        size="sm"
         @click="showUploadDialog">
-        <div class="progress">
+        <div class="progress px-1">
             <div
-                class="progress-bar progress-bar-notransition"
+                class="progress-bar progress-bar-notransition rounded"
                 :class="`progress-bar-${status}`"
                 :style="{
                     width: `${percentage}%`,
                 }" />
         </div>
         <span class="position-relative">
-            <font-awesome-icon icon="upload" class="mr-1" />
-            <b v-localize>Upload Data</b>
+            <font-awesome-icon icon="upload" />
         </span>
-    </b-button>
+    </b-nav-item>
 </template>
 
 <script>
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 4df9c96048d0..39e560aa5df6 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -1,77 +1,101 @@
-<template>
-    <div id="columns">
-        <SidePanel
-            v-if="showPanels"
-            side="left"
-            :current-panel="getToolBox()"
-            :current-panel-properties="toolBoxProperties" />
-        <div id="center">
-            <div class="center-container">
-                <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
-                <div v-show="!showCenter" class="center-panel" style="display: block">
-                    <router-view :key="$route.fullPath" class="h-100" />
-                </div>
-            </div>
-        </div>
-        <SidePanel v-if="showPanels" side="right" :current-panel="getHistoryIndex()" :current-panel-properties="{}" />
-        <DragAndDropModal />
-    </div>
-</template>
-<script>
+<script setup>
 import { getGalaxyInstance } from "app";
+import CenterFrame from "./CenterFrame";
 import HistoryIndex from "components/History/Index";
 import ToolBox from "components/Panels/ProviderAwareToolBox";
-import SidePanel from "components/Panels/SidePanel";
-import CenterFrame from "./CenterFrame";
+import { UploadButton } from "components/Upload";
+import { useRoute, useRouter } from "vue-router/composables";
+import { computed, ref, onMounted, onUnmounted } from "vue";
 import DragAndDropModal from "components/Upload/DragAndDropModal";
 
-export default {
-    components: {
-        CenterFrame,
-        SidePanel,
-        DragAndDropModal,
-    },
-    data() {
-        return {
-            showCenter: false,
-        };
-    },
-    computed: {
-        showPanels() {
-            const panels = this.$route.query.hide_panels;
-            if (panels !== undefined) {
-                return panels.toLowerCase() != "true";
-            }
-            return true;
-        },
-        toolBoxProperties() {
-            const Galaxy = getGalaxyInstance();
-            return {
-                storedWorkflowMenuEntries: Galaxy.config.stored_workflow_menu_entries,
-            };
-        },
-    },
-    mounted() {
-        // Using a custom event here which, in contrast to watching $route,
-        // always fires when a route is pushed instead of validating it first.
-        this.$router.app.$on("router-push", this.hideCenter);
-    },
-    beforeDestroy() {
-        this.$router.app.$off("router-push", this.hideCenter);
-    },
-    methods: {
-        getHistoryIndex() {
-            return HistoryIndex;
-        },
-        getToolBox() {
-            return ToolBox;
-        },
-        hideCenter() {
-            this.showCenter = false;
-        },
-        onLoad() {
-            this.showCenter = true;
-        },
-    },
-};
+const route = useRoute();
+const router = useRouter();
+const showCenter = ref(false);
+const searchToggle = ref(false);
+
+// computed
+const showPanels = computed(() => {
+    const panels = route.query.hide_panels;
+    if (panels !== undefined) {
+        return panels.toLowerCase() != "true";
+    }
+    return true;
+});
+const toolBoxProperties = computed(() => {
+    const Galaxy = getGalaxyInstance();
+    return {
+        storedWorkflowMenuEntries: Galaxy.config.stored_workflow_menu_entries,
+    };
+});
+
+// methods
+function hideCenter() {
+    showCenter.value = false;
+}
+function onLoad() {
+    showCenter.value = true;
+}
+function onSearchToggle() {
+    searchToggle.value = !searchToggle.value;
+}
+
+// life cycle
+onMounted(() => {
+    // Using a custom event here which, in contrast to watching $route,
+    // always fires when a route is pushed instead of validating it first.
+    router.app.$on("router-push", hideCenter);
+});
+onUnmounted(() => {
+    router.app.$off("router-push", hideCenter);
+});
 </script>
+<template>
+    <div id="columns" class="d-flex">
+        <b-nav v-if="showPanels" vertical class="side-bar pt-1">
+            <b-nav-item
+                id="tool-search"
+                v-b-tooltip.hover.right
+                class="my-1"
+                :title="'Search Tools and Workflows' | l"
+                @click="onSearchToggle">
+                <template>
+                    <span class="fa fa-search" />
+                </template>
+            </b-nav-item>
+            <upload-button />
+        </b-nav>
+        <div v-if="showPanels" v-show="searchToggle">
+            <ToolBox v-bind="toolBoxProperties" class="left-column" />
+        </div>
+        <div class="center-column overflow-auto p-3 w-100">
+            <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
+            <router-view v-show="!showCenter" :key="$route.fullPath" class="h-100" />
+        </div>
+        <HistoryIndex v-if="showPanels" class="right-column" />
+        <DragAndDropModal />
+    </div>
+</template>
+<style scoped>
+@import "theme/blue.scss";
+.nav-item {
+    cursor: pointer;
+    text-decoration: none;
+    list-style-type: none;
+}
+.left-column {
+    min-width: 15.2rem;
+    max-width: 15.2rem;
+    width: 15.2rem;
+}
+.right-column {
+    min-width: 18rem;
+    max-width: 18rem;
+    width: 18rem;
+}
+.side-bar {
+    width: 2.8rem;
+    min-width: 2.8rem;
+    max-width: 2.8rem;
+    background: $panel-bg-color;
+}
+</style>

From b772cb3605a1cb0e9a0d5a70ff5e3bc9010ec733 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 18 Jan 2023 16:47:46 +0100
Subject: [PATCH 02/57] Update ToolBox.vue

---
 client/src/components/Panels/ToolBox.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 49faacfb958f..6c8f880c8c5c 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -106,7 +106,6 @@ export default {
         },
     },
     setup() {
-        const { openGlobalUploadModal } = useGlobalUploadModal();
         return { openGlobalUploadModal };
     },
     data() {

From 47661c9633af7a5ded9357178d4ef6bf57f97e3f Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 18 Jan 2023 16:49:45 +0100
Subject: [PATCH 03/57] create `userStore` and persist it

add `toggledSideBar` state with default `search` value
add `toggleSideBar` action
---
 client/src/stores/userStore.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 client/src/stores/userStore.ts

diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
new file mode 100644
index 000000000000..b45640d8c860
--- /dev/null
+++ b/client/src/stores/userStore.ts
@@ -0,0 +1,19 @@
+import { defineStore } from "pinia";
+
+interface State {
+    toggledSideBar: string;
+}
+
+export const useUserStore = defineStore("userStore", {
+    state: (): State => ({
+        toggledSideBar: "search",
+    }),
+    actions: {
+        toggleSideBar(this: State, currentOpen: string) {
+            this.toggledSideBar = this.toggledSideBar === currentOpen ? "" : currentOpen;
+        },
+    },
+    persist: {
+        paths: ["toggledSideBar"],
+    },
+});

From adf587fca7682f21e29c21fa9c2b1c01f35253a2 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 18 Jan 2023 16:53:01 +0100
Subject: [PATCH 04/57] add animation on sidebar toggle, indicate active and
 use `userStore` to persist state

---
 .../src/entry/analysis/modules/Analysis.vue   | 74 ++++++++++++++++---
 1 file changed, 62 insertions(+), 12 deletions(-)

diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 39e560aa5df6..5b9b049fd13d 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -1,17 +1,19 @@
 <script setup>
 import { getGalaxyInstance } from "app";
 import CenterFrame from "./CenterFrame";
-import HistoryIndex from "components/History/Index";
-import ToolBox from "components/Panels/ProviderAwareToolBox";
-import { UploadButton } from "components/Upload";
+import { useUserStore } from "@/stores/userStore";
+import HistoryIndex from "@/components/History/Index";
+import { WindowManager } from "@/layout/window-manager";
+import ToolBox from "@/components/Panels/ProviderAwareToolBox";
+import { UploadButton } from "@/components/Upload";
 import { useRoute, useRouter } from "vue-router/composables";
 import { computed, ref, onMounted, onUnmounted } from "vue";
-import DragAndDropModal from "components/Upload/DragAndDropModal";
+import DragAndDropModal from "@/components/Upload/DragAndDropModal";
 
 const route = useRoute();
 const router = useRouter();
 const showCenter = ref(false);
-const searchToggle = ref(false);
+const userStore = useUserStore();
 
 // computed
 const showPanels = computed(() => {
@@ -32,11 +34,17 @@ const toolBoxProperties = computed(() => {
 function hideCenter() {
     showCenter.value = false;
 }
+
 function onLoad() {
     showCenter.value = true;
 }
-function onSearchToggle() {
-    searchToggle.value = !searchToggle.value;
+
+function sidebarIsActive(menuKey) {
+    return userStore.toggledSideBar === menuKey;
+}
+
+function onToggleSidebar(toggle) {
+    userStore.toggleSideBar(toggle);
 }
 
 // life cycle
@@ -56,17 +64,21 @@ onUnmounted(() => {
                 id="tool-search"
                 v-b-tooltip.hover.right
                 class="my-1"
+                :class="{ 'active-sidebar': sidebarIsActive('search') }"
                 :title="'Search Tools and Workflows' | l"
-                @click="onSearchToggle">
+                @click="onToggleSidebar('search')">
                 <template>
-                    <span class="fa fa-search" />
+                    <span class="fa fa-wrench nav-icon" />
+                    <span v-if="sidebarIsActive('search')" class="fa fa-caret-right nav-icon-active" />
                 </template>
             </b-nav-item>
             <upload-button />
         </b-nav>
-        <div v-if="showPanels" v-show="searchToggle">
-            <ToolBox v-bind="toolBoxProperties" class="left-column" />
-        </div>
+        <transition-group name="panels">
+            <div v-if="showPanels" v-show="sidebarIsActive('search')" key="search">
+                <ToolBox v-bind="toolBoxProperties" class="left-column" />
+            </div>
+        </transition-group>
         <div class="center-column overflow-auto p-3 w-100">
             <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
             <router-view v-show="!showCenter" :key="$route.fullPath" class="h-100" />
@@ -75,27 +87,65 @@ onUnmounted(() => {
         <DragAndDropModal />
     </div>
 </template>
+
 <style scoped>
 @import "theme/blue.scss";
+
 .nav-item {
     cursor: pointer;
     text-decoration: none;
     list-style-type: none;
 }
+
 .left-column {
     min-width: 15.2rem;
     max-width: 15.2rem;
     width: 15.2rem;
 }
+
 .right-column {
     min-width: 18rem;
     max-width: 18rem;
     width: 18rem;
 }
+
 .side-bar {
+    z-index: 100;
     width: 2.8rem;
     min-width: 2.8rem;
     max-width: 2.8rem;
     background: $panel-bg-color;
 }
+
+.active-sidebar {
+    border-radius: 10px;
+    background: $gray-300;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.nav-icon {
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    align-content: center;
+}
+
+.nav-icon-active {
+    top: 40%;
+    left: 100%;
+    position: absolute;
+}
+
+.panels-enter-active,
+.panels-leave-active {
+    transition: all 0.3s;
+}
+
+.panels-enter,
+.panels-leave-to {
+    transform: translateX(-100%);
+}
 </style>

From 7e6ff6090a89ea7f0f7fcc982acd4f4ec4bcd776 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 10 Feb 2023 12:16:09 -0500
Subject: [PATCH 05/57] Move activity bar to separate component

---
 .../src/components/Masthead/ActivityBar.vue   | 111 ++++++++++++++++++
 .../src/entry/analysis/modules/Analysis.vue   |  36 +-----
 2 files changed, 116 insertions(+), 31 deletions(-)
 create mode 100644 client/src/components/Masthead/ActivityBar.vue

diff --git a/client/src/components/Masthead/ActivityBar.vue b/client/src/components/Masthead/ActivityBar.vue
new file mode 100644
index 000000000000..569ca28bc22e
--- /dev/null
+++ b/client/src/components/Masthead/ActivityBar.vue
@@ -0,0 +1,111 @@
+<script setup>
+import { getGalaxyInstance } from "app";
+import { useUserStore } from "@/stores/userStore";
+import { WindowManager } from "@/layout/window-manager";
+import { UploadButton } from "@/components/Upload";
+import { useRoute, useRouter } from "vue-router/composables";
+import { computed, ref } from "vue";
+import CenterFrame from "@/entry/analysis/modules/CenterFrame.vue";
+import HistoryIndex from "@/components/History/Index.vue";
+import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
+import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
+
+const route = useRoute();
+const router = useRouter();
+const showCenter = ref(false);
+const userStore = useUserStore();
+
+const toolBoxProperties = computed(() => {
+    const Galaxy = getGalaxyInstance();
+    return {
+        storedWorkflowMenuEntries: Galaxy.config.stored_workflow_menu_entries,
+    };
+});
+
+</script>
+<template>
+    <div>
+        <b-nav vertical class="side-bar pt-1">
+            <b-nav-item
+                id="tool-search"
+                v-b-tooltip.hover.right
+                class="my-1"
+                :class="{ 'active-sidebar': sidebarIsActive('search') }"
+                :title="'Search Tools and Workflows' | l"
+                @click="onToggleSidebar('search')">
+                <template>
+                    <span class="fa fa-wrench nav-icon" />
+                    <span v-if="sidebarIsActive('search')" class="fa fa-caret-right nav-icon-active" />
+                </template>
+            </b-nav-item>
+            <upload-button />
+        </b-nav>
+        <transition-group name="panels">
+            <div v-show="sidebarIsActive('search')" key="search">
+                <ToolBox v-bind="toolBoxProperties" class="left-column" />
+            </div>
+        </transition-group>
+    </div>
+</template>
+
+<style scoped>
+@import "theme/blue.scss";
+
+.nav-item {
+    cursor: pointer;
+    text-decoration: none;
+    list-style-type: none;
+}
+
+.left-column {
+    min-width: 15.2rem;
+    max-width: 15.2rem;
+    width: 15.2rem;
+}
+
+.right-column {
+    min-width: 18rem;
+    max-width: 18rem;
+    width: 18rem;
+}
+
+.side-bar {
+    z-index: 100;
+    width: 2.8rem;
+    min-width: 2.8rem;
+    max-width: 2.8rem;
+    background: $panel-bg-color;
+}
+
+.active-sidebar {
+    border-radius: 10px;
+    background: $gray-300;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.nav-icon {
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    align-content: center;
+}
+
+.nav-icon-active {
+    top: 40%;
+    left: 100%;
+    position: absolute;
+}
+
+.panels-enter-active,
+.panels-leave-active {
+    transition: all 0.3s;
+}
+
+.panels-enter,
+.panels-leave-to {
+    transform: translateX(-100%);
+}
+</style>
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 5b9b049fd13d..9efab06fb90d 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -2,13 +2,11 @@
 import { getGalaxyInstance } from "app";
 import CenterFrame from "./CenterFrame";
 import { useUserStore } from "@/stores/userStore";
-import HistoryIndex from "@/components/History/Index";
+import HistoryIndex from "@/components/History/Index.vue";
+import ActivityBar from "@/components/Masthead/ActivityBar.vue";
 import { WindowManager } from "@/layout/window-manager";
-import ToolBox from "@/components/Panels/ProviderAwareToolBox";
-import { UploadButton } from "@/components/Upload";
 import { useRoute, useRouter } from "vue-router/composables";
 import { computed, ref, onMounted, onUnmounted } from "vue";
-import DragAndDropModal from "@/components/Upload/DragAndDropModal";
 
 const route = useRoute();
 const router = useRouter();
@@ -23,12 +21,6 @@ const showPanels = computed(() => {
     }
     return true;
 });
-const toolBoxProperties = computed(() => {
-    const Galaxy = getGalaxyInstance();
-    return {
-        storedWorkflowMenuEntries: Galaxy.config.stored_workflow_menu_entries,
-    };
-});
 
 // methods
 function hideCenter() {
@@ -59,26 +51,7 @@ onUnmounted(() => {
 </script>
 <template>
     <div id="columns" class="d-flex">
-        <b-nav v-if="showPanels" vertical class="side-bar pt-1">
-            <b-nav-item
-                id="tool-search"
-                v-b-tooltip.hover.right
-                class="my-1"
-                :class="{ 'active-sidebar': sidebarIsActive('search') }"
-                :title="'Search Tools and Workflows' | l"
-                @click="onToggleSidebar('search')">
-                <template>
-                    <span class="fa fa-wrench nav-icon" />
-                    <span v-if="sidebarIsActive('search')" class="fa fa-caret-right nav-icon-active" />
-                </template>
-            </b-nav-item>
-            <upload-button />
-        </b-nav>
-        <transition-group name="panels">
-            <div v-if="showPanels" v-show="sidebarIsActive('search')" key="search">
-                <ToolBox v-bind="toolBoxProperties" class="left-column" />
-            </div>
-        </transition-group>
+        <ActivityBar v-if="showPanels" class="left-column" />
         <div class="center-column overflow-auto p-3 w-100">
             <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
             <router-view v-show="!showCenter" :key="$route.fullPath" class="h-100" />
@@ -88,6 +61,7 @@ onUnmounted(() => {
     </div>
 </template>
 
+
 <style scoped>
 @import "theme/blue.scss";
 
@@ -148,4 +122,4 @@ onUnmounted(() => {
 .panels-leave-to {
     transform: translateX(-100%);
 }
-</style>
+</style>
\ No newline at end of file

From 13fcec2eb15ac36e7f878ecc647b9a660e53cdb1 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 15 Feb 2023 10:53:27 -0500
Subject: [PATCH 06/57] Rough cleanout, continue drafting activity bar layout

---
 .../src/components/Masthead/ActivityBar.vue   | 28 ++++-----
 .../src/entry/analysis/modules/Analysis.vue   | 57 +------------------
 2 files changed, 17 insertions(+), 68 deletions(-)

diff --git a/client/src/components/Masthead/ActivityBar.vue b/client/src/components/Masthead/ActivityBar.vue
index 569ca28bc22e..9dc445c3ed21 100644
--- a/client/src/components/Masthead/ActivityBar.vue
+++ b/client/src/components/Masthead/ActivityBar.vue
@@ -5,10 +5,7 @@ import { WindowManager } from "@/layout/window-manager";
 import { UploadButton } from "@/components/Upload";
 import { useRoute, useRouter } from "vue-router/composables";
 import { computed, ref } from "vue";
-import CenterFrame from "@/entry/analysis/modules/CenterFrame.vue";
-import HistoryIndex from "@/components/History/Index.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
-import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -22,9 +19,16 @@ const toolBoxProperties = computed(() => {
     };
 });
 
+function sidebarIsActive(menuKey) {
+    return userStore.toggledSideBar === menuKey;
+}
+
+function onToggleSidebar(toggle) {
+    userStore.toggleSideBar(toggle);
+}
 </script>
 <template>
-    <div>
+    <div class="d-flex">
         <b-nav vertical class="side-bar pt-1">
             <b-nav-item
                 id="tool-search"
@@ -40,11 +44,9 @@ const toolBoxProperties = computed(() => {
             </b-nav-item>
             <upload-button />
         </b-nav>
-        <transition-group name="panels">
-            <div v-show="sidebarIsActive('search')" key="search">
-                <ToolBox v-bind="toolBoxProperties" class="left-column" />
-            </div>
-        </transition-group>
+        <div v-show="!sidebarIsActive('search')" key="search">
+            <ToolBox v-bind="toolBoxProperties" />
+        </div>
     </div>
 </template>
 
@@ -57,7 +59,7 @@ const toolBoxProperties = computed(() => {
     list-style-type: none;
 }
 
-.left-column {
+.left-column-disable {
     min-width: 15.2rem;
     max-width: 15.2rem;
     width: 15.2rem;
@@ -71,9 +73,9 @@ const toolBoxProperties = computed(() => {
 
 .side-bar {
     z-index: 100;
-    width: 2.8rem;
-    min-width: 2.8rem;
-    max-width: 2.8rem;
+    //width: 2.8rem;
+    //min-width: 2.8rem;
+    //max-width: 2.8rem;
     background: $panel-bg-color;
 }
 
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 9efab06fb90d..61c188a9d4ec 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -51,7 +51,7 @@ onUnmounted(() => {
 </script>
 <template>
     <div id="columns" class="d-flex">
-        <ActivityBar v-if="showPanels" class="left-column" />
+        <ActivityBar v-if="showPanels" />
         <div class="center-column overflow-auto p-3 w-100">
             <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
             <router-view v-show="!showCenter" :key="$route.fullPath" class="h-100" />
@@ -61,65 +61,12 @@ onUnmounted(() => {
     </div>
 </template>
 
-
 <style scoped>
 @import "theme/blue.scss";
 
-.nav-item {
-    cursor: pointer;
-    text-decoration: none;
-    list-style-type: none;
-}
-
-.left-column {
-    min-width: 15.2rem;
-    max-width: 15.2rem;
-    width: 15.2rem;
-}
-
 .right-column {
     min-width: 18rem;
     max-width: 18rem;
     width: 18rem;
 }
-
-.side-bar {
-    z-index: 100;
-    width: 2.8rem;
-    min-width: 2.8rem;
-    max-width: 2.8rem;
-    background: $panel-bg-color;
-}
-
-.active-sidebar {
-    border-radius: 10px;
-    background: $gray-300;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-}
-
-.nav-icon {
-    height: 2rem;
-    display: flex;
-    align-items: center;
-    align-content: center;
-}
-
-.nav-icon-active {
-    top: 40%;
-    left: 100%;
-    position: absolute;
-}
-
-.panels-enter-active,
-.panels-leave-active {
-    transition: all 0.3s;
-}
-
-.panels-enter,
-.panels-leave-to {
-    transform: translateX(-100%);
-}
-</style>
\ No newline at end of file
+</style>

From 2e9638f468c9994e6a73e3ce52e190a932aa4823 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 19 Mar 2023 12:23:31 +0300
Subject: [PATCH 07/57] Cleanout classes, fix styling

---
 .../src/components/Masthead/ActivityBar.vue   | 50 ++++---------------
 1 file changed, 11 insertions(+), 39 deletions(-)

diff --git a/client/src/components/Masthead/ActivityBar.vue b/client/src/components/Masthead/ActivityBar.vue
index 9dc445c3ed21..3b7748dc6e34 100644
--- a/client/src/components/Masthead/ActivityBar.vue
+++ b/client/src/components/Masthead/ActivityBar.vue
@@ -29,23 +29,21 @@ function onToggleSidebar(toggle) {
 </script>
 <template>
     <div class="d-flex">
-        <b-nav vertical class="side-bar pt-1">
+        <b-nav vertical class="side-bar p-1">
             <b-nav-item
                 id="tool-search"
                 v-b-tooltip.hover.right
-                class="my-1"
-                :class="{ 'active-sidebar': sidebarIsActive('search') }"
+                :class="{ 'nav-item-active': sidebarIsActive('search') }"
                 :title="'Search Tools and Workflows' | l"
                 @click="onToggleSidebar('search')">
                 <template>
-                    <span class="fa fa-wrench nav-icon" />
-                    <span v-if="sidebarIsActive('search')" class="fa fa-caret-right nav-icon-active" />
+                    <span class="nav-icon fa fa-wrench" />
                 </template>
             </b-nav-item>
             <upload-button />
         </b-nav>
-        <div v-show="!sidebarIsActive('search')" key="search">
-            <ToolBox v-bind="toolBoxProperties" />
+        <div v-show="sidebarIsActive('search')" key="search">
+            <ToolBox class="left-column" v-bind="toolBoxProperties" />
         </div>
     </div>
 </template>
@@ -53,39 +51,19 @@ function onToggleSidebar(toggle) {
 <style scoped>
 @import "theme/blue.scss";
 
-.nav-item {
-    cursor: pointer;
-    text-decoration: none;
-    list-style-type: none;
-}
-
-.left-column-disable {
-    min-width: 15.2rem;
-    max-width: 15.2rem;
-    width: 15.2rem;
-}
-
-.right-column {
-    min-width: 18rem;
-    max-width: 18rem;
-    width: 18rem;
+.left-column {
+    min-width: 15rem;
+    max-width: 15rem;
+    width: 15rem;
 }
 
 .side-bar {
-    z-index: 100;
-    //width: 2.8rem;
-    //min-width: 2.8rem;
-    //max-width: 2.8rem;
     background: $panel-bg-color;
 }
 
-.active-sidebar {
-    border-radius: 10px;
+.nav-item-active {
+    border-radius: 0.5rem;
     background: $gray-300;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
 }
 
 .nav-icon {
@@ -95,12 +73,6 @@ function onToggleSidebar(toggle) {
     align-content: center;
 }
 
-.nav-icon-active {
-    top: 40%;
-    left: 100%;
-    position: absolute;
-}
-
 .panels-enter-active,
 .panels-leave-active {
     transition: all 0.3s;

From e25547989d2b87bd2185b9cb8bdff4a2712d6b89 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 19 Mar 2023 12:32:20 +0300
Subject: [PATCH 08/57] Move activity bar together with corresponding nav items
 to subdirectory

---
 client/src/components/{Masthead => ActivityBar}/ActivityBar.vue | 2 +-
 .../components/{Upload => ActivityBar/Items}/UploadButton.vue   | 0
 client/src/components/Upload/index.js                           | 1 -
 client/src/entry/analysis/modules/Analysis.vue                  | 2 +-
 4 files changed, 2 insertions(+), 3 deletions(-)
 rename client/src/components/{Masthead => ActivityBar}/ActivityBar.vue (97%)
 rename client/src/components/{Upload => ActivityBar/Items}/UploadButton.vue (100%)

diff --git a/client/src/components/Masthead/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
similarity index 97%
rename from client/src/components/Masthead/ActivityBar.vue
rename to client/src/components/ActivityBar/ActivityBar.vue
index 3b7748dc6e34..f03cf9db4dca 100644
--- a/client/src/components/Masthead/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -2,9 +2,9 @@
 import { getGalaxyInstance } from "app";
 import { useUserStore } from "@/stores/userStore";
 import { WindowManager } from "@/layout/window-manager";
-import { UploadButton } from "@/components/Upload";
 import { useRoute, useRouter } from "vue-router/composables";
 import { computed, ref } from "vue";
+import UploadButton from "./Items/UploadButton.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
 
 const route = useRoute();
diff --git a/client/src/components/Upload/UploadButton.vue b/client/src/components/ActivityBar/Items/UploadButton.vue
similarity index 100%
rename from client/src/components/Upload/UploadButton.vue
rename to client/src/components/ActivityBar/Items/UploadButton.vue
diff --git a/client/src/components/Upload/index.js b/client/src/components/Upload/index.js
index b83caf02a749..c63d3b27fb8f 100644
--- a/client/src/components/Upload/index.js
+++ b/client/src/components/Upload/index.js
@@ -2,4 +2,3 @@
  * External entry point for Upload components (currently only the modal).
  */
 export { default as UploadModal } from "./UploadModal";
-export { default as UploadButton } from "./UploadButton";
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 61c188a9d4ec..f516e556a596 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -3,7 +3,7 @@ import { getGalaxyInstance } from "app";
 import CenterFrame from "./CenterFrame";
 import { useUserStore } from "@/stores/userStore";
 import HistoryIndex from "@/components/History/Index.vue";
-import ActivityBar from "@/components/Masthead/ActivityBar.vue";
+import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import { WindowManager } from "@/layout/window-manager";
 import { useRoute, useRouter } from "vue-router/composables";
 import { computed, ref, onMounted, onUnmounted } from "vue";

From d17d88db25bd790cb659e69732ff857b0ccd0e04 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 Mar 2023 15:04:48 +0300
Subject: [PATCH 09/57] Allow vertical scrolling in activity bar

---
 client/src/components/ActivityBar/ActivityBar.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index f03cf9db4dca..eb1c345729dc 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -29,10 +29,9 @@ function onToggleSidebar(toggle) {
 </script>
 <template>
     <div class="d-flex">
-        <b-nav vertical class="side-bar p-1">
+        <b-nav vertical class="side-bar flex-nowrap p-1">
             <b-nav-item
                 id="tool-search"
-                v-b-tooltip.hover.right
                 :class="{ 'nav-item-active': sidebarIsActive('search') }"
                 :title="'Search Tools and Workflows' | l"
                 @click="onToggleSidebar('search')">
@@ -59,6 +58,11 @@ function onToggleSidebar(toggle) {
 
 .side-bar {
     background: $panel-bg-color;
+    overflow-y: auto;
+}
+
+.side-bar::-webkit-scrollbar {
+    display: none;
 }
 
 .nav-item-active {

From 65bf4dc86383173ce40310144369777077690468 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 23 Mar 2023 11:05:13 +0300
Subject: [PATCH 10/57] Add re-usable activity item component

---
 .../components/ActivityBar/ActivityBar.vue    | 60 ++++++++++++++++---
 .../components/ActivityBar/ActivityItem.vue   | 58 ++++++++++++++++++
 .../ActivityBar/Items/UploadButton.vue        | 14 ++++-
 3 files changed, 121 insertions(+), 11 deletions(-)
 create mode 100644 client/src/components/ActivityBar/ActivityItem.vue

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index eb1c345729dc..11016609b0d8 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -6,6 +6,7 @@ import { useRoute, useRouter } from "vue-router/composables";
 import { computed, ref } from "vue";
 import UploadButton from "./Items/UploadButton.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
+import ActivityItem from "./ActivityItem";
 
 const route = useRoute();
 const router = useRouter();
@@ -30,17 +31,57 @@ function onToggleSidebar(toggle) {
 <template>
     <div class="d-flex">
         <b-nav vertical class="side-bar flex-nowrap p-1">
-            <b-nav-item
-                id="tool-search"
-                :class="{ 'nav-item-active': sidebarIsActive('search') }"
-                :title="'Search Tools and Workflows' | l"
-                @click="onToggleSidebar('search')">
-                <template>
-                    <span class="nav-icon fa fa-wrench" />
-                </template>
-            </b-nav-item>
+            <ActivityItem
+                id="tools"
+                icon="wrench"
+                title="Tools"
+                :is-active="sidebarIsActive('search')"
+                @click="onToggleSidebar('search')"
+            />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
+            <upload-button />
             <upload-button />
         </b-nav>
+        <div style="width: 3.3rem; background: red; position: absolute; left: 0; bottom: 0px;">
+            <b-nav vertical class="bottom-bar flex-nowrap p-1 m-1">
+                <b-nav-item
+                    id="tool-search"
+                    <template>
+                        <span class="nav-icon fa fa-gear" />
+                    </template>
+                </b-nav-item>
+                <b-nav-item
+                    id="tool-search"
+                    <template>
+                        <span class="nav-icon fa fa-caret-down" />
+                    </template>
+                </b-nav-item>
+            </b-nav>
+        </div>
         <div v-show="sidebarIsActive('search')" key="search">
             <ToolBox class="left-column" v-bind="toolBoxProperties" />
         </div>
@@ -75,6 +116,7 @@ function onToggleSidebar(toggle) {
     display: flex;
     align-items: center;
     align-content: center;
+    justify-content: center;
 }
 
 .panels-enter-active,
diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
new file mode 100644
index 000000000000..fc2cb56bc38e
--- /dev/null
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+export interface Props {
+    id: string;
+    title: string;
+    icon?: string;
+    isActive?: boolean;
+    tooltip?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    icon: "question",
+    isActive: false,
+    tooltip: null,
+});
+
+const emit = defineEmits<{
+    (e: "click"): void;
+}>();
+
+</script>
+
+<template>
+    <b-nav-item
+        :id="id"
+        :class="{ 'nav-item-active': isActive }"
+        :title="tooltip | l"
+        @click="emit('click')">
+        <template>
+            <div class="nav-icon m-0 p-0">
+                <Icon :icon="icon" />
+            </div>
+            <div class="nav-title">{{ title }}</div>
+        </template>
+    </b-nav-item>
+</template>
+
+<style scoped>
+@import "theme/blue.scss";
+
+.nav-item-active {
+    border-radius: 0.5rem;
+    background: $gray-300;
+}
+
+.nav-icon {
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+}
+
+.nav-title {
+    font-size: 0.7rem;
+}
+</style>
diff --git a/client/src/components/ActivityBar/Items/UploadButton.vue b/client/src/components/ActivityBar/Items/UploadButton.vue
index 8ce67ff92796..618f43540fa5 100644
--- a/client/src/components/ActivityBar/Items/UploadButton.vue
+++ b/client/src/components/ActivityBar/Items/UploadButton.vue
@@ -1,7 +1,6 @@
 <template>
     <b-nav-item
         id="tool-panel-upload-button"
-        v-b-tooltip.hover.right
         :aria-label="title | localize"
         :title="title | localize"
         class="upload-button"
@@ -15,7 +14,8 @@
                 }" />
         </div>
         <span class="position-relative">
-            <font-awesome-icon icon="upload" />
+            <font-awesome-icon icon="upload" class="nav-icon" />
+            <span style="font-size: 0.7rem;">Upload</span>
         </span>
     </b-nav-item>
 </template>
@@ -72,3 +72,13 @@ export default {
     },
 };
 </script>
+<style scoped>
+
+.nav-icon {
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+}
+</style>
\ No newline at end of file

From 8816f4d8ff673cdf748afaf6b6ba02cff62ca298 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Mar 2023 11:55:08 +0300
Subject: [PATCH 11/57] Rename upload item component

---
 .../components/ActivityBar/ActivityBar.vue    | 69 ++++++++-----------
 .../components/ActivityBar/ActivityItem.vue   |  7 +-
 .../{UploadButton.vue => UploadItem.vue}      |  0
 3 files changed, 34 insertions(+), 42 deletions(-)
 rename client/src/components/ActivityBar/Items/{UploadButton.vue => UploadItem.vue} (100%)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 11016609b0d8..4fa1ef139147 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -4,7 +4,7 @@ import { useUserStore } from "@/stores/userStore";
 import { WindowManager } from "@/layout/window-manager";
 import { useRoute, useRouter } from "vue-router/composables";
 import { computed, ref } from "vue";
-import UploadButton from "./Items/UploadButton.vue";
+import UploadItem from "./Items/UploadItem.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
 import ActivityItem from "./ActivityItem";
 
@@ -38,33 +38,33 @@ function onToggleSidebar(toggle) {
                 :is-active="sidebarIsActive('search')"
                 @click="onToggleSidebar('search')"
             />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
-            <upload-button />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
+            <upload-item />
         </b-nav>
         <div style="width: 3.3rem; background: red; position: absolute; left: 0; bottom: 0px;">
             <b-nav vertical class="bottom-bar flex-nowrap p-1 m-1">
@@ -106,19 +106,6 @@ function onToggleSidebar(toggle) {
     display: none;
 }
 
-.nav-item-active {
-    border-radius: 0.5rem;
-    background: $gray-300;
-}
-
-.nav-icon {
-    height: 2rem;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-}
-
 .panels-enter-active,
 .panels-leave-active {
     transition: all 0.3s;
diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index fc2cb56bc38e..0cde48277793 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -25,10 +25,11 @@ const emit = defineEmits<{
     <b-nav-item
         :id="id"
         :class="{ 'nav-item-active': isActive }"
+        :aria-label="title | l"
         :title="tooltip | l"
         @click="emit('click')">
         <template>
-            <div class="nav-icon m-0 p-0">
+            <div class="nav-icon">
                 <Icon :icon="icon" />
             </div>
             <div class="nav-title">{{ title }}</div>
@@ -54,5 +55,9 @@ const emit = defineEmits<{
 
 .nav-title {
     font-size: 0.7rem;
+    display:flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
 }
 </style>
diff --git a/client/src/components/ActivityBar/Items/UploadButton.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
similarity index 100%
rename from client/src/components/ActivityBar/Items/UploadButton.vue
rename to client/src/components/ActivityBar/Items/UploadItem.vue

From 93e0b285b41c242026c7a33b12b1715d420d148f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Mar 2023 14:02:50 +0300
Subject: [PATCH 12/57] Consolidate styles, fix activity bar width, align
 footer bar

---
 .../components/ActivityBar/ActivityBar.vue    | 22 +++++++----------
 .../components/ActivityBar/ActivityItem.vue   | 24 +++++++++----------
 .../ActivityBar/Items/UploadItem.vue          | 16 ++++---------
 client/src/style/scss/theme/blue.scss         |  2 +-
 4 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 4fa1ef139147..26f3d18eade1 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -30,14 +30,13 @@ function onToggleSidebar(toggle) {
 </script>
 <template>
     <div class="d-flex">
-        <b-nav vertical class="side-bar flex-nowrap p-1">
+        <b-nav vertical class="acitivity-bar flex-nowrap p-1">
             <ActivityItem
                 id="tools"
                 icon="wrench"
                 title="Tools"
                 :is-active="sidebarIsActive('search')"
-                @click="onToggleSidebar('search')"
-            />
+                @click="onToggleSidebar('search')" />
             <upload-item />
             <upload-item />
             <upload-item />
@@ -66,16 +65,14 @@ function onToggleSidebar(toggle) {
             <upload-item />
             <upload-item />
         </b-nav>
-        <div style="width: 3.3rem; background: red; position: absolute; left: 0; bottom: 0px;">
+        <div class="acitivity-bar" style="background: red; position: absolute; left: 0; bottom: 0px">
             <b-nav vertical class="bottom-bar flex-nowrap p-1 m-1">
-                <b-nav-item
-                    id="tool-search"
+                <b-nav-item>
                     <template>
                         <span class="nav-icon fa fa-gear" />
                     </template>
                 </b-nav-item>
-                <b-nav-item
-                    id="tool-search"
+                <b-nav-item>
                     <template>
                         <span class="nav-icon fa fa-caret-down" />
                     </template>
@@ -88,21 +85,20 @@ function onToggleSidebar(toggle) {
     </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 @import "theme/blue.scss";
 
 .left-column {
-    min-width: 15rem;
-    max-width: 15rem;
     width: 15rem;
 }
 
-.side-bar {
+.acitivity-bar {
     background: $panel-bg-color;
     overflow-y: auto;
+    width: 4rem;
 }
 
-.side-bar::-webkit-scrollbar {
+.acitivity-bar::-webkit-scrollbar {
     display: none;
 }
 
diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 0cde48277793..3a7fc10bff23 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -18,7 +18,6 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
     (e: "click"): void;
 }>();
-
 </script>
 
 <template>
@@ -37,27 +36,28 @@ const emit = defineEmits<{
     </b-nav-item>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 @import "theme/blue.scss";
 
+.nav-item {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+}
+
 .nav-item-active {
-    border-radius: 0.5rem;
+    border-radius: $border-radius-extralarge;
     background: $gray-300;
 }
 
 .nav-icon {
-    height: 2rem;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
+    @extend .nav-item;
+    font-size: 1rem;
 }
 
 .nav-title {
+    @extend .nav-item;
     font-size: 0.7rem;
-    display:flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
 }
 </style>
diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
index 618f43540fa5..fe45584c351a 100644
--- a/client/src/components/ActivityBar/Items/UploadItem.vue
+++ b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -14,8 +14,10 @@
                 }" />
         </div>
         <span class="position-relative">
-            <font-awesome-icon icon="upload" class="nav-icon" />
-            <span style="font-size: 0.7rem;">Upload</span>
+            <div class="nav-icon">
+                <Icon icon="upload" />
+            </div>
+            <div class="nav-title" v-localize>Upload</div>
         </span>
     </b-nav-item>
 </template>
@@ -72,13 +74,3 @@ export default {
     },
 };
 </script>
-<style scoped>
-
-.nav-icon {
-    height: 2rem;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-}
-</style>
\ No newline at end of file
diff --git a/client/src/style/scss/theme/blue.scss b/client/src/style/scss/theme/blue.scss
index dea3b86c847f..ce44133eeedb 100644
--- a/client/src/style/scss/theme/blue.scss
+++ b/client/src/style/scss/theme/blue.scss
@@ -129,7 +129,7 @@ $portlet-bg-color: $gray-200;
 // Borders
 $border-radius-base: 0.1875rem;
 $border-radius-large: 0.3125rem;
-$border-radius-extralarge: 1rem;
+$border-radius-extralarge: 0.7rem;
 $border-default: 1px solid $border-color;
 
 // Buttons

From 2e970cce71bb066fb6d306b592949753633f83fc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Mar 2023 14:25:13 +0300
Subject: [PATCH 13/57] Re-use activity item component for uploader, adjust
 style

---
 .../components/ActivityBar/ActivityItem.vue   | 13 +++---
 .../ActivityBar/Items/UploadItem.vue          | 45 +++++++------------
 client/src/style/scss/upload.scss             |  6 ++-
 3 files changed, 29 insertions(+), 35 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 3a7fc10bff23..1c0dffc4099a 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -23,15 +23,18 @@ const emit = defineEmits<{
 <template>
     <b-nav-item
         :id="id"
-        :class="{ 'nav-item-active': isActive }"
+        :class="{ 'mb-1': true, 'nav-item-active': isActive }"
         :aria-label="title | l"
         :title="tooltip | l"
         @click="emit('click')">
         <template>
-            <div class="nav-icon">
-                <Icon :icon="icon" />
-            </div>
-            <div class="nav-title">{{ title }}</div>
+            <slot />
+            <span class="position-relative">
+                <div class="nav-icon">
+                    <Icon :icon="icon" />
+                </div>
+                <div class="nav-title">{{ title }}</div>
+            </span>
         </template>
     </b-nav-item>
 </template>
diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
index fe45584c351a..bce1befd3208 100644
--- a/client/src/components/ActivityBar/Items/UploadItem.vue
+++ b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -1,44 +1,33 @@
 <template>
-    <b-nav-item
+    <ActivityItem
         id="tool-panel-upload-button"
-        :aria-label="title | localize"
-        :title="title | localize"
+        title="Upload"
+        icon="upload"
         class="upload-button"
+        :tooltip="tooltip"
         @click="showUploadDialog">
-        <div class="progress px-1">
-            <div
-                class="progress-bar progress-bar-notransition rounded"
-                :class="`progress-bar-${status}`"
-                :style="{
-                    width: `${percentage}%`,
-                }" />
-        </div>
-        <span class="position-relative">
-            <div class="nav-icon">
-                <Icon icon="upload" />
+        <template>
+            <div class="progress">
+                <div
+                    class="progress-bar progress-bar-notransition"
+                    :class="`progress-bar-${status}`"
+                    :style="{
+                        width: `${percentage}%`,
+                    }" />
             </div>
-            <div class="nav-title" v-localize>Upload</div>
-        </span>
-    </b-nav-item>
+        </template>
+    </ActivityItem>
 </template>
 
 <script>
 import Query from "utils/query-string-parsing";
-import { VBTooltip } from "bootstrap-vue";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { useGlobalUploadModal } from "composables/globalUploadModal";
-
-library.add(faUpload);
+import ActivityItem from "components/ActivityBar/ActivityItem";
 
 export default {
-    components: { FontAwesomeIcon },
-    directives: {
-        "v-b-tooltip": VBTooltip,
-    },
+    components: { ActivityItem },
     props: {
-        title: { type: String, default: "Download from URL or upload files from disk" },
+        tooltip: { type: String, default: "Download from URL or upload files from disk" },
     },
     setup() {
         const { openGlobalUploadModal } = useGlobalUploadModal();
diff --git a/client/src/style/scss/upload.scss b/client/src/style/scss/upload.scss
index cac5c6804481..268994c5ce2e 100644
--- a/client/src/style/scss/upload.scss
+++ b/client/src/style/scss/upload.scss
@@ -9,9 +9,8 @@
 
 .upload-button {
     @extend .w-100;
-    @extend .mb-2;
     @extend .position-relative;
-    border-radius: $border-radius;
+    border-radius: $border-radius-extralarge;
     cursor: pointer;
     .progress {
         @extend .position-absolute;
@@ -20,6 +19,9 @@
         top: 0;
         left: 0;
         background-color: transparent;
+        .progress-bar {
+            border-radius: $border-radius-extralarge;
+        }
         .progress-bar-danger {
             background: $state-danger-bg;
         }

From 20eda15643fb1e404cd458d31dd828ecdd3d034f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Mar 2023 14:34:31 +0300
Subject: [PATCH 14/57] Fix margins for now

---
 client/src/components/ActivityBar/ActivityBar.vue  | 1 +
 client/src/components/ActivityBar/ActivityItem.vue | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 26f3d18eade1..7f11e7f01ab4 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -35,6 +35,7 @@ function onToggleSidebar(toggle) {
                 id="tools"
                 icon="wrench"
                 title="Tools"
+                tooltip="Search and run tools"
                 :is-active="sidebarIsActive('search')"
                 @click="onToggleSidebar('search')" />
             <upload-item />
diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 1c0dffc4099a..750b707f1637 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -61,6 +61,9 @@ const emit = defineEmits<{
 
 .nav-title {
     @extend .nav-item;
+    margin-top: 0.7rem;
+    margin-bottom: 0.3rem;
+    line-height: 0rem;
     font-size: 0.7rem;
 }
 </style>

From a72f1c2805d36e632cc5a4eb09ba3249b3e61d15 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Mar 2023 15:01:00 +0300
Subject: [PATCH 15/57] Re-use item component in footer section of bar
 (optional, might be dropped)

---
 .../components/ActivityBar/ActivityBar.vue    | 28 +++++++++----------
 client/src/components/plugins/icons.js        |  2 ++
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 7f11e7f01ab4..3733908327c7 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -30,7 +30,7 @@ function onToggleSidebar(toggle) {
 </script>
 <template>
     <div class="d-flex">
-        <b-nav vertical class="acitivity-bar flex-nowrap p-1">
+        <b-nav vertical class="activity-bar flex-nowrap p-1">
             <ActivityItem
                 id="tools"
                 icon="wrench"
@@ -66,18 +66,9 @@ function onToggleSidebar(toggle) {
             <upload-item />
             <upload-item />
         </b-nav>
-        <div class="acitivity-bar" style="background: red; position: absolute; left: 0; bottom: 0px">
-            <b-nav vertical class="bottom-bar flex-nowrap p-1 m-1">
-                <b-nav-item>
-                    <template>
-                        <span class="nav-icon fa fa-gear" />
-                    </template>
-                </b-nav-item>
-                <b-nav-item>
-                    <template>
-                        <span class="nav-icon fa fa-caret-down" />
-                    </template>
-                </b-nav-item>
+        <div class="activity-footer">
+            <b-nav vertical class="flex-nowrap p-1 m-1">
+                <ActivityItem id="settings" icon="cog" title="Configure" tooltip="Search and run tools" />
             </b-nav>
         </div>
         <div v-show="sidebarIsActive('search')" key="search">
@@ -93,16 +84,23 @@ function onToggleSidebar(toggle) {
     width: 15rem;
 }
 
-.acitivity-bar {
+.activity-bar {
     background: $panel-bg-color;
     overflow-y: auto;
     width: 4rem;
 }
 
-.acitivity-bar::-webkit-scrollbar {
+.activity-bar::-webkit-scrollbar {
     display: none;
 }
 
+.activity-footer {
+    @extend .activity-bar;
+    position: absolute;
+    left: 0;
+    bottom: 0px;
+}
+
 .panels-enter-active,
 .panels-leave-active {
     transition: all 0.3s;
diff --git a/client/src/components/plugins/icons.js b/client/src/components/plugins/icons.js
index bc066dc8293b..a48d469b83e0 100644
--- a/client/src/components/plugins/icons.js
+++ b/client/src/components/plugins/icons.js
@@ -21,6 +21,7 @@ import {
     faFileExport,
     faFilter,
     faFolder,
+    faCog,
     faHdd,
     faInfoCircle,
     faList,
@@ -63,6 +64,7 @@ library.add(
     faFileExport,
     faFilter,
     faFolder,
+    faCog,
     faHdd,
     faInfoCircle,
     faLink,

From 7f4bf50fa3dfa8c127a5381123041f1f03b1480d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 28 Mar 2023 21:15:39 +0300
Subject: [PATCH 16/57] Add popper hook

---
 .../components/ActivityBar/ActivityBar.vue    |   1 +
 .../components/ActivityBar/ActivityItem.vue   |  39 +--
 client/src/components/ActivityBar/Popper.vue  | 102 ++++++++
 client/src/components/ActivityBar/hook.ts     | 233 ++++++++++++++++++
 4 files changed, 359 insertions(+), 16 deletions(-)
 create mode 100644 client/src/components/ActivityBar/Popper.vue
 create mode 100644 client/src/components/ActivityBar/hook.ts

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 3733908327c7..a9d49d3fa22c 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -86,6 +86,7 @@ function onToggleSidebar(toggle) {
 
 .activity-bar {
     background: $panel-bg-color;
+    overflow: visible;
     overflow-y: auto;
     width: 4rem;
 }
diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 750b707f1637..923ccae1dce1 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import Popper from "./Popper.vue";
 
 export interface Props {
     id: string;
@@ -21,22 +22,28 @@ const emit = defineEmits<{
 </script>
 
 <template>
-    <b-nav-item
-        :id="id"
-        :class="{ 'mb-1': true, 'nav-item-active': isActive }"
-        :aria-label="title | l"
-        :title="tooltip | l"
-        @click="emit('click')">
-        <template>
-            <slot />
-            <span class="position-relative">
-                <div class="nav-icon">
-                    <Icon :icon="icon" />
-                </div>
-                <div class="nav-title">{{ title }}</div>
-            </span>
-        </template>
-    </b-nav-item>
+    <div>
+        <Popper reference-is="span" popper-is="span" placement="right">
+            <template #reference>
+                <b-nav-item
+                    :id="id"
+                    :class="{ 'mb-1': true, 'nav-item-active': isActive }"
+                    :aria-label="title | l"
+                    @click="emit('click')">
+                    <template>
+                        <slot />
+                        <span class="position-relative">
+                            <div class="nav-icon">
+                                <Icon :icon="icon" />
+                            </div>
+                            <div class="nav-title">{{ title }}</div>
+                        </span>
+                    </template>
+                </b-nav-item>
+            </template>
+            <div style="background: red; width: 10rem;">{{ tooltip | l }}</div>
+        </Popper>
+    </div>
 </template>
 
 <style scoped lang="scss">
diff --git a/client/src/components/ActivityBar/Popper.vue b/client/src/components/ActivityBar/Popper.vue
new file mode 100644
index 000000000000..143b9d9e4c2e
--- /dev/null
+++ b/client/src/components/ActivityBar/Popper.vue
@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <component :is="referenceIs" v-bind="referenceProps" ref="reference">
+            <slot name="reference" />
+        </component>
+        <component class="popper-box" v-show="visible" :is="popperIs" v-bind="popperProps" ref="popper">
+            <slot />
+        </component>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, toRef, computed, watch } from "vue";
+import type { UnwrapRef, PropType } from "vue";
+import { usePopperjs } from "./hook";
+let popperUid = 0;
+
+export default defineComponent({
+    components: {},
+
+    props: {
+        // hook options
+        delayOnMouseout: Number,
+        delayOnMouseover: Number,
+        trigger: String as PropType<
+            Exclude<UnwrapRef<Required<Parameters<typeof usePopperjs>>["2"]["trigger"]>, "manual">
+        >,
+        forceShow: Boolean,
+        modifiers: Array as PropType<Required<Parameters<typeof usePopperjs>>["2"]["modifiers"]>,
+        onFirstUpdate: Function as PropType<Required<Parameters<typeof usePopperjs>>["2"]["onFirstUpdate"]>,
+        placement: String as PropType<Required<Parameters<typeof usePopperjs>>["2"]["placement"]>,
+        strategy: String as PropType<Required<Parameters<typeof usePopperjs>>["2"]["strategy"]>,
+
+        // component props
+        popperIs: {
+            default: "div",
+            type: String,
+        },
+        popperProps: {
+            type: Object,
+        },
+        referenceIs: {
+            default: "div",
+            type: String,
+        },
+        referenceProps: {
+            type: Object,
+        },
+        disabled: Boolean,
+    },
+
+    emits: [
+        "show",
+        "hide",
+        "before-enter",
+        "enter",
+        "after-enter",
+        "enter-cancelled",
+        "before-leave",
+        "leave",
+        "after-leave",
+        "leave-cancelled",
+    ],
+
+    setup(props, { emit }) {
+        const reference = ref();
+        const popper = ref();
+        const { visible } = usePopperjs(reference, popper, {
+            ...props,
+            trigger: toRef(props, "trigger"),
+            forceShow: toRef(props, "forceShow"),
+            delayOnMouseover: toRef(props, "delayOnMouseover"),
+            delayOnMouseout: toRef(props, "delayOnMouseout"),
+            onShow: () => emit("show"),
+            onHide: () => emit("hide"),
+        });
+
+        watch(
+            () => [visible.value, props.disabled],
+            () => {
+                if (props.disabled && visible.value) {
+                    visible.value = false;
+                }
+            },
+            { flush: "sync" }
+        );
+
+        const handle =
+            (event: Parameters<typeof emit>[0]) =>
+            (...args: any[]) => {
+                return emit(event, ...args);
+            };
+
+        return {
+            visible,
+            reference,
+            popper,
+            handle,
+        };
+    },
+});
+</script>
diff --git a/client/src/components/ActivityBar/hook.ts b/client/src/components/ActivityBar/hook.ts
new file mode 100644
index 000000000000..0589b43e31ca
--- /dev/null
+++ b/client/src/components/ActivityBar/hook.ts
@@ -0,0 +1,233 @@
+import { onMounted, onUnmounted, onUpdated, ref, unref, watch } from "vue";
+import type { Ref } from "vue";
+import { createPopper } from "@popperjs/core";
+
+export type MaybeRef<T> = T | Ref<T>;
+
+export type Trigger = "hover" | "focus" | "click-to-open" | "click-to-toggle" | "manual";
+
+export type EventOptions = {
+    onShow: Function;
+    onHide: Function;
+};
+
+function on(element: Element, event: string, handler: EventListenerOrEventListenerObject) {
+    if (element && event && handler) {
+        element.addEventListener(event, handler, false);
+    }
+}
+function off(element: Element, event: string, handler: EventListenerOrEventListenerObject) {
+    if (element && event) {
+        element.removeEventListener(event, handler, false);
+    }
+}
+
+const defaultTrigger: Trigger = "hover";
+
+export function usePopperjs(
+    reference: MaybeRef<Parameters<typeof createPopper>["0"]>,
+    popper: MaybeRef<Parameters<typeof createPopper>["1"]>,
+    options?: Partial<
+        Parameters<typeof createPopper>["2"] &
+            EventOptions & {
+                trigger: MaybeRef<Trigger | undefined>;
+                delayOnMouseover: MaybeRef<number | undefined>;
+                delayOnMouseout: MaybeRef<number | undefined>;
+                forceShow: MaybeRef<boolean | undefined>;
+            }
+    >
+) {
+    const isMounted = ref(false);
+    onMounted(() => {
+        isMounted.value = true;
+    });
+    onUnmounted(() => {
+        isMounted.value = false;
+        destroy();
+    });
+
+    const updatedFlag = ref(true);
+    onUpdated(() => {
+        updatedFlag.value = !updatedFlag.value;
+    });
+
+    const referenceRef = ref<Element>();
+    const popperRef = ref<HTMLElement>();
+    watch(
+        () => [isMounted.value, updatedFlag.value],
+        () => {
+            if (!isMounted.value) return;
+
+            if ((unref(reference) as any)?.$el) {
+                referenceRef.value = (unref(reference) as any).$el;
+            } else {
+                referenceRef.value = unref(reference) as Element;
+            }
+
+            if ((unref(popper) as any)?.$el) {
+                popperRef.value = (unref(popper) as any).$el;
+            } else {
+                popperRef.value = unref(popper);
+            }
+        }
+    );
+
+    const instance = ref<ReturnType<typeof createPopper>>();
+    watch(
+        () => [referenceRef.value, popperRef.value],
+        () => {
+            destroy();
+            if (!referenceRef.value) return;
+            if (!popperRef.value) return;
+
+            concrete();
+        }
+    );
+    const concrete = () => {
+        instance.value = createPopper(referenceRef.value!, popperRef.value!, {
+            placement: options?.placement ?? "bottom",
+            modifiers: options?.modifiers ?? [],
+            strategy: options?.strategy ?? "absolute",
+            onFirstUpdate: options?.onFirstUpdate ?? undefined,
+        });
+    };
+    const destroy = () => {
+        instance.value?.destroy();
+        instance.value = undefined;
+    };
+
+    const visible = ref(false);
+    const doToggle = () => (visible.value = !visible.value);
+    const doOpen = () => (visible.value = true);
+    const doClose = () => (visible.value = false);
+    watch(
+        () => [instance.value, unref(options?.trigger), unref(options?.forceShow)],
+        () => {
+            if (!instance.value) return;
+
+            if (unref(options?.forceShow)) {
+                visible.value = true;
+                doOff();
+                return;
+            }
+
+            doOn();
+        }
+    );
+
+    watch(
+        () => unref(options?.forceShow),
+        () => {
+            if (unref(options?.forceShow)) return;
+            if (unref(options?.trigger) === "manual") return;
+
+            visible.value = false;
+        }
+    );
+
+    const timer = ref<any>();
+    const doMouseover = () => {
+        if (unref(options?.delayOnMouseover) === 0) {
+            doOpen();
+        } else {
+            clearTimeout(timer.value);
+            timer.value = setTimeout(() => {
+                doOpen();
+            }, unref(options?.delayOnMouseover) ?? 200);
+        }
+    };
+    const doMouseout = () => {
+        if (unref(options?.delayOnMouseout) === 0) {
+            doClose();
+        } else {
+            clearTimeout(timer.value);
+            timer.value = setTimeout(() => {
+                doClose();
+            }, unref(options?.delayOnMouseout) ?? 200);
+        }
+    };
+
+    const doOn = () => {
+        doOff();
+
+        switch (unref(options?.trigger) ?? defaultTrigger) {
+            case "click-to-open": {
+                on(referenceRef.value!, "click", doOpen);
+                on(document as any, "click", doCloseForDocument);
+                break;
+            }
+
+            case "click-to-toggle": {
+                on(referenceRef.value!, "click", doToggle);
+                on(document as any, "click", doCloseForDocument);
+                break;
+            }
+
+            case "hover": {
+                on(referenceRef.value!, "mouseover", doMouseover);
+                on(popperRef.value!, "mouseover", doMouseover);
+                on(referenceRef.value!, "mouseout", doMouseout);
+                on(popperRef.value!, "mouseout", doMouseout);
+                break;
+            }
+
+            case "focus": {
+                on(referenceRef.value!, "focus", doOpen);
+                on(popperRef.value!, "focus", doOpen);
+                on(referenceRef.value!, "blur", doClose);
+                on(popperRef.value!, "blur", doClose);
+                break;
+            }
+
+            case "manual": {
+                break;
+            }
+
+            default: {
+                throw TypeError();
+            }
+        }
+    };
+    const doOff = () => {
+        off(referenceRef.value!, "click", doOpen);
+        off(document as any, "click", doCloseForDocument);
+
+        off(referenceRef.value!, "click", doToggle);
+
+        off(referenceRef.value!, "mouseover", doMouseover);
+        off(popperRef.value!, "mouseover", doMouseover);
+        off(referenceRef.value!, "mouseout", doMouseout);
+        off(popperRef.value!, "mouseout", doMouseout);
+
+        off(referenceRef.value!, "focus", doOpen);
+        off(popperRef.value!, "focus", doOpen);
+        off(referenceRef.value!, "blur", doClose);
+        off(popperRef.value!, "blur", doClose);
+    };
+    const doCloseForDocument = (e: Event) => {
+        if (referenceRef.value?.contains(e.target as Element)) return;
+        if (popperRef.value?.contains(e.target as Element)) return;
+        doClose();
+    };
+
+    watch(
+        () => [instance.value, visible.value],
+        () => {
+            if (!instance.value) return;
+
+            if (visible.value || unref(options?.forceShow)) {
+                popperRef.value?.classList.remove("vue-use-popperjs-none");
+                options?.onShow?.();
+                instance.value?.update();
+            } else {
+                popperRef.value?.classList.add("vue-use-popperjs-none");
+                options?.onHide?.();
+            }
+        }
+    );
+
+    return {
+        instance,
+        visible,
+    };
+}

From 9b25d4d5681340cd8217776c6a167d9e984c77b7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 07:43:16 +0300
Subject: [PATCH 17/57] Resolve progress bar style

---
 .../components/ActivityBar/ActivityBar.vue    |  1 -
 .../components/ActivityBar/ActivityItem.vue   |  4 +-
 .../ActivityBar/Items/UploadItem.vue          |  3 +-
 client/src/style/scss/upload.scss             | 59 ++++++++++---------
 4 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index a9d49d3fa22c..3733908327c7 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -86,7 +86,6 @@ function onToggleSidebar(toggle) {
 
 .activity-bar {
     background: $panel-bg-color;
-    overflow: visible;
     overflow-y: auto;
     width: 4rem;
 }
diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 923ccae1dce1..5965eb96bb9f 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -31,7 +31,9 @@ const emit = defineEmits<{
                     :aria-label="title | l"
                     @click="emit('click')">
                     <template>
-                        <slot />
+                        <span class="position-relative">
+                            <slot />
+                        </span>
                         <span class="position-relative">
                             <div class="nav-icon">
                                 <Icon :icon="icon" />
diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
index bce1befd3208..ec4dc0e54da8 100644
--- a/client/src/components/ActivityBar/Items/UploadItem.vue
+++ b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -3,11 +3,10 @@
         id="tool-panel-upload-button"
         title="Upload"
         icon="upload"
-        class="upload-button"
         :tooltip="tooltip"
         @click="showUploadDialog">
         <template>
-            <div class="progress">
+            <div class="upload-item-progress">
                 <div
                     class="progress-bar progress-bar-notransition"
                     :class="`progress-bar-${status}`"
diff --git a/client/src/style/scss/upload.scss b/client/src/style/scss/upload.scss
index 268994c5ce2e..8527b1a86e5b 100644
--- a/client/src/style/scss/upload.scss
+++ b/client/src/style/scss/upload.scss
@@ -8,36 +8,39 @@
 }
 
 .upload-button {
-    @extend .w-100;
-    @extend .position-relative;
+    //@extend .w-100;
+    @extend .mb-1;
+    //@extend .position-relative;
     border-radius: $border-radius-extralarge;
     cursor: pointer;
-    .progress {
-        @extend .position-absolute;
-        @extend .w-100;
-        @extend .h-100;
-        top: 0;
-        left: 0;
-        background-color: transparent;
-        .progress-bar {
-            border-radius: $border-radius-extralarge;
-        }
-        .progress-bar-danger {
-            background: $state-danger-bg;
-        }
-        .progress-bar-success {
-            background: $state-success-bg;
-        }
-        .progress-bar-info {
-            background: $state-running-bg;
-        }
-        .progress-bar-notransition {
-            -webkit-transition: none;
-            -moz-transition: none;
-            -ms-transition: none;
-            -o-transition: none;
-            transition: none;
-        }
+    
+}
+
+.upload-item-progress {
+    @extend .position-absolute;
+    @extend .w-100;
+    @extend .h-100;
+    top: 0;
+    left: 0;
+    background-color: transparent;
+    .progress-bar {
+        border-radius: $border-radius-extralarge;
+    }
+    .progress-bar-danger {
+        background: $state-danger-bg;
+    }
+    .progress-bar-success {
+        background: $state-success-bg;
+    }
+    .progress-bar-info {
+        background: $state-running-bg;
+    }
+    .progress-bar-notransition {
+        -webkit-transition: none;
+        -moz-transition: none;
+        -ms-transition: none;
+        -o-transition: none;
+        transition: none;
     }
 }
 

From b3d383442f9fc1c64e3da14096765ea46e10691c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 08:18:51 +0300
Subject: [PATCH 18/57] Move progress bar to activity item

---
 client/src/components/ActivityBar/ActivityBar.vue     |  2 +-
 client/src/components/ActivityBar/ActivityItem.vue    | 11 +++++++++--
 .../src/components/ActivityBar/Items/UploadItem.vue   |  2 +-
 client/src/style/scss/upload.scss                     |  3 ---
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 3733908327c7..95b74c333907 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -67,7 +67,7 @@ function onToggleSidebar(toggle) {
             <upload-item />
         </b-nav>
         <div class="activity-footer">
-            <b-nav vertical class="flex-nowrap p-1 m-1">
+            <b-nav vertical class="flex-nowrap p-1">
                 <ActivityItem id="settings" icon="cog" title="Configure" tooltip="Search and run tools" />
             </b-nav>
         </div>
diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 5965eb96bb9f..60887aa46bf0 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -27,11 +27,11 @@ const emit = defineEmits<{
             <template #reference>
                 <b-nav-item
                     :id="id"
-                    :class="{ 'mb-1': true, 'nav-item-active': isActive }"
+                    :class="{ 'position-relative mb-1': true, 'nav-item-active': isActive }"
                     :aria-label="title | l"
                     @click="emit('click')">
                     <template>
-                        <span class="position-relative">
+                        <span class="nav-background position-absolute">
                             <slot />
                         </span>
                         <span class="position-relative">
@@ -75,4 +75,11 @@ const emit = defineEmits<{
     line-height: 0rem;
     font-size: 0.7rem;
 }
+
+.nav-background {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+}
 </style>
diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
index ec4dc0e54da8..9dfbab536c1a 100644
--- a/client/src/components/ActivityBar/Items/UploadItem.vue
+++ b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -6,7 +6,7 @@
         :tooltip="tooltip"
         @click="showUploadDialog">
         <template>
-            <div class="upload-item-progress">
+            <div class="upload-item-progress progress">
                 <div
                     class="progress-bar progress-bar-notransition"
                     :class="`progress-bar-${status}`"
diff --git a/client/src/style/scss/upload.scss b/client/src/style/scss/upload.scss
index 8527b1a86e5b..1063951560c4 100644
--- a/client/src/style/scss/upload.scss
+++ b/client/src/style/scss/upload.scss
@@ -17,11 +17,8 @@
 }
 
 .upload-item-progress {
-    @extend .position-absolute;
     @extend .w-100;
     @extend .h-100;
-    top: 0;
-    left: 0;
     background-color: transparent;
     .progress-bar {
         border-radius: $border-radius-extralarge;

From 658b46f3d126c960a70c84563595c5b38cc509ba Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 08:24:41 +0300
Subject: [PATCH 19/57] Remove slot from activity item, handle progress as core
 feature

---
 .../src/components/ActivityBar/ActivityItem.vue   | 13 +++++++++++--
 .../components/ActivityBar/Items/UploadItem.vue   | 15 +++------------
 client/src/style/scss/upload.scss                 |  1 -
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 60887aa46bf0..cf1fc82dfbb9 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -8,6 +8,8 @@ export interface Props {
     icon?: string;
     isActive?: boolean;
     tooltip?: string;
+    progressPercentage: number;
+    progressStatus: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,7 +34,14 @@ const emit = defineEmits<{
                     @click="emit('click')">
                     <template>
                         <span class="nav-background position-absolute">
-                            <slot />
+                            <div class="upload-item-progress progress">
+                                <div
+                                    class="progress-bar progress-bar-notransition"
+                                    :class="`progress-bar-${progressStatus}`"
+                                    :style="{
+                                        width: `${progressPercentage}%`,
+                                    }" />
+                            </div>
                         </span>
                         <span class="position-relative">
                             <div class="nav-icon">
@@ -43,7 +52,7 @@ const emit = defineEmits<{
                     </template>
                 </b-nav-item>
             </template>
-            <div style="background: red; width: 10rem;">{{ tooltip | l }}</div>
+            <div style="background: red; width: 10rem">{{ tooltip | l }}</div>
         </Popper>
     </div>
 </template>
diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
index 9dfbab536c1a..1bd62ce57bc9 100644
--- a/client/src/components/ActivityBar/Items/UploadItem.vue
+++ b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -3,19 +3,10 @@
         id="tool-panel-upload-button"
         title="Upload"
         icon="upload"
+        :progress-percentage="percentage"
+        :progress-status="status"
         :tooltip="tooltip"
-        @click="showUploadDialog">
-        <template>
-            <div class="upload-item-progress progress">
-                <div
-                    class="progress-bar progress-bar-notransition"
-                    :class="`progress-bar-${status}`"
-                    :style="{
-                        width: `${percentage}%`,
-                    }" />
-            </div>
-        </template>
-    </ActivityItem>
+        @click="showUploadDialog" />
 </template>
 
 <script>
diff --git a/client/src/style/scss/upload.scss b/client/src/style/scss/upload.scss
index 1063951560c4..eefa8ec68782 100644
--- a/client/src/style/scss/upload.scss
+++ b/client/src/style/scss/upload.scss
@@ -13,7 +13,6 @@
     //@extend .position-relative;
     border-radius: $border-radius-extralarge;
     cursor: pointer;
-    
 }
 
 .upload-item-progress {

From 660d90b3efff8e5cbd3b0909438354feaed9e244 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 08:58:50 +0300
Subject: [PATCH 20/57] Remove custom styles from uploader, generically allow
 progress display in activity items

---
 .../components/ActivityBar/ActivityItem.vue   | 34 +++++++++++++------
 .../ActivityBar/Items/UploadItem.vue          |  2 +-
 client/src/style/scss/upload.scss             | 25 --------------
 3 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index cf1fc82dfbb9..1fca63f2b1ea 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -29,19 +29,21 @@ const emit = defineEmits<{
             <template #reference>
                 <b-nav-item
                     :id="id"
-                    :class="{ 'position-relative mb-1': true, 'nav-item-active': isActive }"
+                    class="position-relative mb-1"
+                    :class="{ 'nav-item-active': isActive }"
                     :aria-label="title | l"
                     @click="emit('click')">
                     <template>
-                        <span class="nav-background position-absolute">
-                            <div class="upload-item-progress progress">
-                                <div
-                                    class="progress-bar progress-bar-notransition"
-                                    :class="`progress-bar-${progressStatus}`"
-                                    :style="{
-                                        width: `${progressPercentage}%`,
-                                    }" />
-                            </div>
+                        <span v-if="!!progressStatus" class="progress">
+                            <div
+                                class="progress-bar notransition"
+                                :class="{
+                                    'bg-danger': progressStatus === 'danger',
+                                    'bg-success': progressStatus === 'success',
+                                }"
+                                :style="{
+                                    width: `${progressPercentage}%`,
+                                }" />
                         </span>
                         <span class="position-relative">
                             <div class="nav-icon">
@@ -85,10 +87,20 @@ const emit = defineEmits<{
     font-size: 0.7rem;
 }
 
-.nav-background {
+.progress {
+    border-radius: $border-radius-extralarge;
+    position: absolute;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
 }
+
+.notransition {
+    -webkit-transition: none;
+    -moz-transition: none;
+    -ms-transition: none;
+    -o-transition: none;
+    transition: none;
+}
 </style>
diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
index 1bd62ce57bc9..4c96ab1ea2ff 100644
--- a/client/src/components/ActivityBar/Items/UploadItem.vue
+++ b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -25,7 +25,7 @@ export default {
     },
     data() {
         return {
-            status: "",
+            status: "success",
             percentage: 0,
         };
     },
diff --git a/client/src/style/scss/upload.scss b/client/src/style/scss/upload.scss
index eefa8ec68782..1272037a4396 100644
--- a/client/src/style/scss/upload.scss
+++ b/client/src/style/scss/upload.scss
@@ -15,31 +15,6 @@
     cursor: pointer;
 }
 
-.upload-item-progress {
-    @extend .w-100;
-    @extend .h-100;
-    background-color: transparent;
-    .progress-bar {
-        border-radius: $border-radius-extralarge;
-    }
-    .progress-bar-danger {
-        background: $state-danger-bg;
-    }
-    .progress-bar-success {
-        background: $state-success-bg;
-    }
-    .progress-bar-info {
-        background: $state-running-bg;
-    }
-    .progress-bar-notransition {
-        -webkit-transition: none;
-        -moz-transition: none;
-        -ms-transition: none;
-        -o-transition: none;
-        transition: none;
-    }
-}
-
 .upload-input {
     font-size: $font-size-base;
     color: $text-color;

From dfd46bd1eab63c1e7b09d2f35526b85cd72f8692 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 09:00:46 +0300
Subject: [PATCH 21/57] Use transparent background by default for progress bar

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

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 1fca63f2b1ea..464b0385977b 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -88,6 +88,7 @@ const emit = defineEmits<{
 }
 
 .progress {
+    background: transparent;
     border-radius: $border-radius-extralarge;
     position: absolute;
     width: 100%;

From f99c5eae995856f819320ff604d65449eca83ee1 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 09:04:08 +0300
Subject: [PATCH 22/57] Prevent overflow in vertical direction

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

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 95b74c333907..b740d17f8d57 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -87,6 +87,7 @@ function onToggleSidebar(toggle) {
 .activity-bar {
     background: $panel-bg-color;
     overflow-y: auto;
+    overflow-x: hidden;
     width: 4rem;
 }
 

From f9d75c1089f1714d12802788b51b844a50b2857e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 10:17:32 +0300
Subject: [PATCH 23/57] Move popper wrapper to own component path, can be
 removed and replaced with popper package in upcoming popper release

---
 client/src/components/ActivityBar/ActivityItem.vue              | 2 +-
 client/src/components/{ActivityBar => Popper}/Popper.vue        | 2 +-
 .../src/components/{ActivityBar/hook.ts => Popper/usePopper.ts} | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename client/src/components/{ActivityBar => Popper}/Popper.vue (98%)
 rename client/src/components/{ActivityBar/hook.ts => Popper/usePopper.ts} (100%)

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 464b0385977b..0eb119819d60 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import Popper from "./Popper.vue";
+import Popper from "components/Popper/Popper.vue";
 
 export interface Props {
     id: string;
diff --git a/client/src/components/ActivityBar/Popper.vue b/client/src/components/Popper/Popper.vue
similarity index 98%
rename from client/src/components/ActivityBar/Popper.vue
rename to client/src/components/Popper/Popper.vue
index 143b9d9e4c2e..9980c7cb270f 100644
--- a/client/src/components/ActivityBar/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -12,7 +12,7 @@
 <script lang="ts">
 import { defineComponent, ref, toRef, computed, watch } from "vue";
 import type { UnwrapRef, PropType } from "vue";
-import { usePopperjs } from "./hook";
+import { usePopperjs } from "./usePopper";
 let popperUid = 0;
 
 export default defineComponent({
diff --git a/client/src/components/ActivityBar/hook.ts b/client/src/components/Popper/usePopper.ts
similarity index 100%
rename from client/src/components/ActivityBar/hook.ts
rename to client/src/components/Popper/usePopper.ts

From 7011e53bbe5cb124a73431a19b46ea4033e80985 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 10:56:06 +0300
Subject: [PATCH 24/57] Add arrow to popper component, adjust look to regular
 tooltips

---
 .../components/ActivityBar/ActivityItem.vue   |  4 +-
 client/src/components/Popper/Popper.vue       | 46 ++++++++++++++++++-
 client/src/components/Popper/usePopper.ts     |  4 +-
 3 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 0eb119819d60..0081356c8669 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -54,7 +54,9 @@ const emit = defineEmits<{
                     </template>
                 </b-nav-item>
             </template>
-            <div style="background: red; width: 10rem">{{ tooltip | l }}</div>
+            <div class="px-2 py-1">
+                <small>{{ tooltip | l }}</small>
+            </div>
         </Popper>
     </div>
 </template>
diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index 9980c7cb270f..7f06df890d7e 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -3,7 +3,8 @@
         <component :is="referenceIs" v-bind="referenceProps" ref="reference">
             <slot name="reference" />
         </component>
-        <component class="popper-box" v-show="visible" :is="popperIs" v-bind="popperProps" ref="popper">
+        <component class="popper-element" v-show="visible" :is="popperIs" v-bind="popperProps" ref="popper">
+            <div class="popper-arrow" data-popper-arrow />
             <slot />
         </component>
     </div>
@@ -100,3 +101,46 @@ export default defineComponent({
     },
 });
 </script>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.popper-element {
+    z-index: 9999;
+    background: $brand-dark;
+    color: $brand-light;
+    border-radius: $border-radius-base;
+    max-width: 12rem;
+    opacity: 0.9;
+}
+
+.popper-arrow,
+.popper-arrow:before {
+    height: 10px;
+    width: 10px;
+    position: absolute;
+    z-index: -1;
+}
+
+.popper-arrow:before {
+    background: $brand-dark;
+    content: "";
+    transform: rotate(45deg);
+}
+
+.popper-element[data-popper-placement^="top"] > .popper-arrow {
+    bottom: -5px;
+}
+
+.popper-element[data-popper-placement^="bottom"] > .popper-arrow {
+    top: -5px;
+}
+
+.popper-element[data-popper-placement^="left"] > .popper-arrow {
+    right: -5px;
+}
+
+.popper-element[data-popper-placement^="right"] > .popper-arrow {
+    left: -5px;
+}
+</style>
diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 0589b43e31ca..f19c15bcafeb 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -133,7 +133,7 @@ export function usePopperjs(
             clearTimeout(timer.value);
             timer.value = setTimeout(() => {
                 doOpen();
-            }, unref(options?.delayOnMouseover) ?? 200);
+            }, unref(options?.delayOnMouseover) ?? 100);
         }
     };
     const doMouseout = () => {
@@ -143,7 +143,7 @@ export function usePopperjs(
             clearTimeout(timer.value);
             timer.value = setTimeout(() => {
                 doClose();
-            }, unref(options?.delayOnMouseout) ?? 200);
+            }, unref(options?.delayOnMouseout) ?? 100);
         }
     };
 

From 8bb421e2b1ab957e28de58de26f530672bdca023 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 12:07:49 +0300
Subject: [PATCH 25/57] Convert upload item to composition api and typescript

---
 .../components/ActivityBar/ActivityItem.vue   |  3 +-
 .../ActivityBar/Items/UploadItem.vue          | 86 +++++++++----------
 2 files changed, 41 insertions(+), 48 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 0081356c8669..54bfe471a8fb 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -55,7 +55,8 @@ const emit = defineEmits<{
                 </b-nav-item>
             </template>
             <div class="px-2 py-1">
-                <small>{{ tooltip | l }}</small>
+                <small v-if="tooltip">{{ tooltip | l }}</small>
+                <small v-else>No tooltip available for this item</small>
             </div>
         </Popper>
     </div>
diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
index 4c96ab1ea2ff..913e508f4309 100644
--- a/client/src/components/ActivityBar/Items/UploadItem.vue
+++ b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -1,55 +1,47 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, type Ref } from "vue";
+import ActivityItem from "components/ActivityBar/ActivityItem.vue";
+// @ts-ignore
+import { get } from "utils/query-string-parsing.js";
+// @ts-ignore
+import { useGlobalUploadModal } from "composables/globalUploadModal.js";
+// @ts-ignore
+import { eventHub } from "components/plugins/eventHub.js";
+
+const { openGlobalUploadModal } = useGlobalUploadModal();
+
+const status: Ref<string> = ref("success");
+const percentage: Ref<number> = ref(0);
+
+onMounted(() => {
+    eventHub.$on("upload:status", setStatus);
+    eventHub.$on("upload:percentage", setPercentage);
+    if (get("tool_id") == "upload1") {
+        openGlobalUploadModal();
+    }
+});
+
+onUnmounted(() => {
+    eventHub.$off("upload:status", setStatus);
+    eventHub.$off("upload:percentage", setPercentage);
+});
+
+function setStatus(val: string): void {
+    status.value = val;
+}
+
+function setPercentage(val: number): void {
+    percentage.value = Math.round(val);
+}
+</script>
+
 <template>
     <ActivityItem
         id="tool-panel-upload-button"
         title="Upload"
+        tooltip="Download from URL or upload files from disk"
         icon="upload"
         :progress-percentage="percentage"
         :progress-status="status"
-        :tooltip="tooltip"
-        @click="showUploadDialog" />
+        @click="openGlobalUploadModal" />
 </template>
-
-<script>
-import Query from "utils/query-string-parsing";
-import { useGlobalUploadModal } from "composables/globalUploadModal";
-import ActivityItem from "components/ActivityBar/ActivityItem";
-
-export default {
-    components: { ActivityItem },
-    props: {
-        tooltip: { type: String, default: "Download from URL or upload files from disk" },
-    },
-    setup() {
-        const { openGlobalUploadModal } = useGlobalUploadModal();
-        return { openGlobalUploadModal };
-    },
-    data() {
-        return {
-            status: "success",
-            percentage: 0,
-        };
-    },
-    mounted() {
-        this.eventHub.$on("upload:status", this.setStatus);
-        this.eventHub.$on("upload:percentage", this.setPercentage);
-        if (Query.get("tool_id") == "upload1") {
-            this.showUploadDialog();
-        }
-    },
-    beforeDestroy() {
-        this.eventHub.$off("upload:status", this.setStatus);
-        this.eventHub.$off("upload:percentage", this.setPercentage);
-    },
-    methods: {
-        showUploadDialog() {
-            this.openGlobalUploadModal();
-        },
-        setStatus(val) {
-            this.status = val;
-        },
-        setPercentage(val) {
-            this.percentage = Math.round(val);
-        },
-    },
-};
-</script>

From cea8b34c178a53f64611369a1f7898b957616e05 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 12:08:23 +0300
Subject: [PATCH 26/57] Fix

---
 client/src/components/ActivityBar/Items/UploadItem.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
index 913e508f4309..d5ee364864dc 100644
--- a/client/src/components/ActivityBar/Items/UploadItem.vue
+++ b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -8,8 +8,6 @@ import { useGlobalUploadModal } from "composables/globalUploadModal.js";
 // @ts-ignore
 import { eventHub } from "components/plugins/eventHub.js";
 
-const { openGlobalUploadModal } = useGlobalUploadModal();
-
 const status: Ref<string> = ref("success");
 const percentage: Ref<number> = ref(0);
 

From 9051d97a26d4e3118c9067bc2ea92de4717e37cc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 12:16:01 +0300
Subject: [PATCH 27/57] Fix defaults, restore imports

---
 client/src/components/ActivityBar/ActivityItem.vue     | 4 ++--
 client/src/components/ActivityBar/Items/UploadItem.vue | 6 ++++--
 client/src/components/Panels/ToolBox.vue               | 2 ++
 client/src/entry/analysis/modules/Analysis.vue         | 3 ++-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 54bfe471a8fb..87b80184ba55 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -8,8 +8,8 @@ export interface Props {
     icon?: string;
     isActive?: boolean;
     tooltip?: string;
-    progressPercentage: number;
-    progressStatus: string;
+    progressPercentage?: number;
+    progressStatus?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
index d5ee364864dc..9ae59b3a2816 100644
--- a/client/src/components/ActivityBar/Items/UploadItem.vue
+++ b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -2,19 +2,21 @@
 import { ref, onMounted, onUnmounted, type Ref } from "vue";
 import ActivityItem from "components/ActivityBar/ActivityItem.vue";
 // @ts-ignore
-import { get } from "utils/query-string-parsing.js";
+import Query from "utils/query-string-parsing.js";
 // @ts-ignore
 import { useGlobalUploadModal } from "composables/globalUploadModal.js";
 // @ts-ignore
 import { eventHub } from "components/plugins/eventHub.js";
 
+const { openGlobalUploadModal } = useGlobalUploadModal();
+
 const status: Ref<string> = ref("success");
 const percentage: Ref<number> = ref(0);
 
 onMounted(() => {
     eventHub.$on("upload:status", setStatus);
     eventHub.$on("upload:percentage", setPercentage);
-    if (get("tool_id") == "upload1") {
+    if (Query.get("tool_id") == "upload1") {
         openGlobalUploadModal();
     }
 });
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 6c8f880c8c5c..329a58939348 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -70,6 +70,7 @@
 import ToolSection from "./Common/ToolSection";
 import ToolSearch from "./Common/ToolSearch";
 import { UploadButton } from "components/Upload";
+import { useGlobalUploadModal } from "composables/globalUploadModal";
 import { openGlobalUploadModal } from "components/Upload";
 import FavoritesButton from "./Buttons/FavoritesButton";
 import PanelViewButton from "./Buttons/PanelViewButton";
@@ -106,6 +107,7 @@ export default {
         },
     },
     setup() {
+        const { openGlobalUploadModal } = useGlobalUploadModal();
         return { openGlobalUploadModal };
     },
     data() {
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index f516e556a596..ca037d99c2d6 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -1,9 +1,10 @@
 <script setup>
 import { getGalaxyInstance } from "app";
-import CenterFrame from "./CenterFrame";
+import CenterFrame from "./CenterFrame.vue";
 import { useUserStore } from "@/stores/userStore";
 import HistoryIndex from "@/components/History/Index.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
+import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 import { WindowManager } from "@/layout/window-manager";
 import { useRoute, useRouter } from "vue-router/composables";
 import { computed, ref, onMounted, onUnmounted } from "vue";

From 2b5650b08bc70f3929dc992cb53a7a9f7c25c1d5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 12:20:04 +0300
Subject: [PATCH 28/57] Handle rounding of progress bar fractions in activity
 item

---
 client/src/components/ActivityBar/ActivityItem.vue     | 2 +-
 client/src/components/ActivityBar/Items/UploadItem.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 87b80184ba55..01da2e55dd1a 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -42,7 +42,7 @@ const emit = defineEmits<{
                                     'bg-success': progressStatus === 'success',
                                 }"
                                 :style="{
-                                    width: `${progressPercentage}%`,
+                                    width: `${Math.round(progressPercentage)}%`,
                                 }" />
                         </span>
                         <span class="position-relative">
diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
index 9ae59b3a2816..2df7d6a2530b 100644
--- a/client/src/components/ActivityBar/Items/UploadItem.vue
+++ b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -31,7 +31,7 @@ function setStatus(val: string): void {
 }
 
 function setPercentage(val: number): void {
-    percentage.value = Math.round(val);
+    percentage.value = val;
 }
 </script>
 

From 4d6ff1808ef5c320092068dbb2af2e472395ed8e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 16:12:04 +0300
Subject: [PATCH 29/57] Add options to dropdown popover

---
 client/src/components/ActivityBar/ActivityItem.vue | 14 ++++++++++++++
 client/src/components/Popper/Popper.vue            |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 01da2e55dd1a..84385ac29582 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -2,6 +2,11 @@
 import { ref } from "vue";
 import Popper from "components/Popper/Popper.vue";
 
+interface Option {
+    name: string;
+    value: string;
+}
+
 export interface Props {
     id: string;
     title: string;
@@ -10,12 +15,14 @@ export interface Props {
     tooltip?: string;
     progressPercentage?: number;
     progressStatus?: string;
+    options?: Option[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
     icon: "question",
     isActive: false,
     tooltip: null,
+    options: [],
 });
 
 const emit = defineEmits<{
@@ -57,6 +64,13 @@ const emit = defineEmits<{
             <div class="px-2 py-1">
                 <small v-if="tooltip">{{ tooltip | l }}</small>
                 <small v-else>No tooltip available for this item</small>
+                <div v-if="options.length > 0" class="p-1">
+                    <router-link v-for="option in options" :to="option.value">
+                        <b-button size="sm" variant="info" class="text-break w-100 my-1">
+                            {{ option.name }}
+                        </b-button>
+                    </router-link>
+                </div>
             </div>
         </Popper>
     </div>
diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index 7f06df890d7e..913dc673cad1 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -111,7 +111,7 @@ export default defineComponent({
     color: $brand-light;
     border-radius: $border-radius-base;
     max-width: 12rem;
-    opacity: 0.9;
+    opacity: 0.95;
 }
 
 .popper-arrow,

From dde05569ff46538b773beb61fc6643d3906ebd29 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 16:23:54 +0300
Subject: [PATCH 30/57] Prep favorite workflows item

---
 .../components/ActivityBar/ActivityBar.vue    |  2 ++
 .../ActivityBar/Items/WorkflowItem.vue        | 32 +++++++++++++++++++
 client/src/components/plugins/icons.js        |  2 ++
 3 files changed, 36 insertions(+)
 create mode 100644 client/src/components/ActivityBar/Items/WorkflowItem.vue

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index b740d17f8d57..3f74c83a9454 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -5,6 +5,7 @@ import { WindowManager } from "@/layout/window-manager";
 import { useRoute, useRouter } from "vue-router/composables";
 import { computed, ref } from "vue";
 import UploadItem from "./Items/UploadItem.vue";
+import WorkflowItem from "./Items/WorkflowItem.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
 import ActivityItem from "./ActivityItem";
 
@@ -38,6 +39,7 @@ function onToggleSidebar(toggle) {
                 tooltip="Search and run tools"
                 :is-active="sidebarIsActive('search')"
                 @click="onToggleSidebar('search')" />
+            <workflow-item />
             <upload-item />
             <upload-item />
             <upload-item />
diff --git a/client/src/components/ActivityBar/Items/WorkflowItem.vue b/client/src/components/ActivityBar/Items/WorkflowItem.vue
new file mode 100644
index 000000000000..482a479c46e8
--- /dev/null
+++ b/client/src/components/ActivityBar/Items/WorkflowItem.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, type Ref } from "vue";
+import ActivityItem from "components/ActivityBar/ActivityItem.vue";
+
+const workflows = ref([{
+    name: "Show all workflows",
+    value: "/workflows/list",
+},
+{
+    name: "Another random 1",
+    value: "/workflows/run?id=5114a2a207b7caff",
+},
+{
+    name: "Some random workflow currently noted as static option",
+    value: "/workflows/run?id=6fc9fbb81c497f69",
+}]);
+
+onMounted(() => {
+});
+
+onUnmounted(() => {
+});
+</script>
+
+<template>
+    <ActivityItem
+        id="activity-workflow"
+        title="Workflow"
+        tooltip="Select a Workflow:"
+        icon="sitemap"
+        :options="workflows" />
+</template>
diff --git a/client/src/components/plugins/icons.js b/client/src/components/plugins/icons.js
index a48d469b83e0..5dd51fbfdc8f 100644
--- a/client/src/components/plugins/icons.js
+++ b/client/src/components/plugins/icons.js
@@ -33,6 +33,7 @@ import {
     faPlus,
     faQuestion,
     faShareAlt,
+    faSitemap,
     faStream,
     faTags,
     faTrash,
@@ -76,6 +77,7 @@ library.add(
     faPlus,
     faQuestion,
     faShareAlt,
+    faSitemap,
     faStream,
     faTags,
     faTrash,

From 4361737cd49c1de15014a47a7e83c02a92f6f092 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 16:50:40 +0300
Subject: [PATCH 31/57] Parse actual favorite workflows to activity bar item

---
 .../components/ActivityBar/ActivityBar.vue    |  2 +-
 .../components/ActivityBar/ActivityItem.vue   |  9 +++-
 .../ActivityBar/Items/WorkflowItem.vue        | 44 ++++++++++++-------
 client/src/components/Popper/Popper.vue       |  2 +-
 4 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 3f74c83a9454..302137838c86 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -39,7 +39,7 @@ function onToggleSidebar(toggle) {
                 tooltip="Search and run tools"
                 :is-active="sidebarIsActive('search')"
                 @click="onToggleSidebar('search')" />
-            <workflow-item />
+            <workflow-item :workflows="toolBoxProperties.storedWorkflowMenuEntries" />
             <upload-item />
             <upload-item />
             <upload-item />
diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 84385ac29582..52504a4488be 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -22,7 +22,6 @@ const props = withDefaults(defineProps<Props>(), {
     icon: "question",
     isActive: false,
     tooltip: null,
-    options: [],
 });
 
 const emit = defineEmits<{
@@ -64,7 +63,7 @@ const emit = defineEmits<{
             <div class="px-2 py-1">
                 <small v-if="tooltip">{{ tooltip | l }}</small>
                 <small v-else>No tooltip available for this item</small>
-                <div v-if="options.length > 0" class="p-1">
+                <div v-if="options" class="nav-options p-1">
                     <router-link v-for="option in options" :to="option.value">
                         <b-button size="sm" variant="info" class="text-break w-100 my-1">
                             {{ option.name }}
@@ -104,6 +103,12 @@ const emit = defineEmits<{
     font-size: 0.7rem;
 }
 
+.nav-options {
+    max-height: 20rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
 .progress {
     background: transparent;
     border-radius: $border-radius-extralarge;
diff --git a/client/src/components/ActivityBar/Items/WorkflowItem.vue b/client/src/components/ActivityBar/Items/WorkflowItem.vue
index 482a479c46e8..fe9994a686d6 100644
--- a/client/src/components/ActivityBar/Items/WorkflowItem.vue
+++ b/client/src/components/ActivityBar/Items/WorkflowItem.vue
@@ -1,32 +1,44 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, type Ref } from "vue";
+import { computed } from "vue";
 import ActivityItem from "components/ActivityBar/ActivityItem.vue";
 
-const workflows = ref([{
-    name: "Show all workflows",
-    value: "/workflows/list",
-},
-{
-    name: "Another random 1",
-    value: "/workflows/run?id=5114a2a207b7caff",
-},
-{
-    name: "Some random workflow currently noted as static option",
-    value: "/workflows/run?id=6fc9fbb81c497f69",
-}]);
+interface Workflow {
+    id: string;
+    name: string;
+}
 
-onMounted(() => {
+export interface Props {
+    workflows: Workflow[];
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const activityOptions = computed(() => {
+    return [
+        {
+            name: "All workflows",
+            value: `/workflows/list`,
+        },
+        ...props.workflows.map((workflow) => {
+            return {
+                name: workflow.name,
+                value: `/workflows/run?id=${workflow.id}`,
+            };
+        }),
+    ];
 });
 
-onUnmounted(() => {
+const hasWorkflows = computed(() => {
+    return props.workflows && props.workflows.length > 0;
 });
 </script>
 
 <template>
     <ActivityItem
+        v-if="hasWorkflows"
         id="activity-workflow"
         title="Workflow"
         tooltip="Select a Workflow:"
         icon="sitemap"
-        :options="workflows" />
+        :options="activityOptions" />
 </template>
diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index 913dc673cad1..cd285ae881a0 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -3,7 +3,7 @@
         <component :is="referenceIs" v-bind="referenceProps" ref="reference">
             <slot name="reference" />
         </component>
-        <component class="popper-element" v-show="visible" :is="popperIs" v-bind="popperProps" ref="popper">
+        <component class="popper-element mt-1" v-show="visible" :is="popperIs" v-bind="popperProps" ref="popper">
             <div class="popper-arrow" data-popper-arrow />
             <slot />
         </component>

From df72283e982d62266703c4daaa9aa2c2c03915f5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 16:55:34 +0300
Subject: [PATCH 32/57] Use outlined buttons in popover

---
 client/src/components/ActivityBar/ActivityBar.vue  | 2 +-
 client/src/components/ActivityBar/ActivityItem.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 302137838c86..fa3c78385763 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -39,8 +39,8 @@ function onToggleSidebar(toggle) {
                 tooltip="Search and run tools"
                 :is-active="sidebarIsActive('search')"
                 @click="onToggleSidebar('search')" />
-            <workflow-item :workflows="toolBoxProperties.storedWorkflowMenuEntries" />
             <upload-item />
+            <workflow-item :workflows="toolBoxProperties.storedWorkflowMenuEntries" />
             <upload-item />
             <upload-item />
             <upload-item />
diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 52504a4488be..8d31baf58e70 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -65,7 +65,7 @@ const emit = defineEmits<{
                 <small v-else>No tooltip available for this item</small>
                 <div v-if="options" class="nav-options p-1">
                     <router-link v-for="option in options" :to="option.value">
-                        <b-button size="sm" variant="info" class="text-break w-100 my-1">
+                        <b-button size="sm" variant="outline-primary" class="w-100 my-1 text-break text-light">
                             {{ option.name }}
                         </b-button>
                     </router-link>

From bc94bdcd94f2c4b1b8cf3e0c87bd1698708267de Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 16:59:27 +0300
Subject: [PATCH 33/57] Move bookmarked workflows to activity bar?

---
 .../components/ActivityBar/ActivityBar.vue    | 10 +++---
 client/src/components/Panels/ToolBox.vue      | 31 -------------------
 2 files changed, 4 insertions(+), 37 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index fa3c78385763..06a82575755e 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -14,11 +14,9 @@ const router = useRouter();
 const showCenter = ref(false);
 const userStore = useUserStore();
 
-const toolBoxProperties = computed(() => {
+const storedWorkflowMenuEntries = computed(() => {
     const Galaxy = getGalaxyInstance();
-    return {
-        storedWorkflowMenuEntries: Galaxy.config.stored_workflow_menu_entries,
-    };
+    return Galaxy.config.stored_workflow_menu_entries;
 });
 
 function sidebarIsActive(menuKey) {
@@ -40,7 +38,7 @@ function onToggleSidebar(toggle) {
                 :is-active="sidebarIsActive('search')"
                 @click="onToggleSidebar('search')" />
             <upload-item />
-            <workflow-item :workflows="toolBoxProperties.storedWorkflowMenuEntries" />
+            <workflow-item :workflows="storedWorkflowMenuEntries" />
             <upload-item />
             <upload-item />
             <upload-item />
@@ -74,7 +72,7 @@ function onToggleSidebar(toggle) {
             </b-nav>
         </div>
         <div v-show="sidebarIsActive('search')" key="search">
-            <ToolBox class="left-column" v-bind="toolBoxProperties" />
+            <ToolBox class="left-column" />
         </div>
     </div>
 </template>
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 329a58939348..99fe35b944c4 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -54,13 +54,6 @@
                         :query-filter="queryFilter"
                         @onClick="onOpen" />
                 </div>
-                <tool-section :category="{ text: workflowTitle }" />
-                <div id="internal-workflows" class="toolSectionBody">
-                    <div class="toolSectionBg" />
-                    <div v-for="wf in workflows" :key="wf.id" class="toolTitle">
-                        <a class="title-link" :href="wf.href">{{ wf.title }}</a>
-                    </div>
-                </div>
             </div>
         </div>
     </div>
@@ -97,14 +90,6 @@ export default {
         currentPanelView: {
             type: String,
         },
-        storedWorkflowMenuEntries: {
-            type: Array,
-            required: true,
-        },
-        workflowTitle: {
-            type: String,
-            default: _l("Workflows"),
-        },
     },
     setup() {
         const { openGlobalUploadModal } = useGlobalUploadModal();
@@ -143,22 +128,6 @@ export default {
             const Galaxy = getGalaxyInstance();
             return !!(Galaxy.user && Galaxy.user.id);
         },
-        workflows() {
-            return [
-                {
-                    title: _l("All workflows"),
-                    href: `${getAppRoot()}workflows/list`,
-                    id: "list",
-                },
-                ...this.storedWorkflowMenuEntries.map((menuEntry) => {
-                    return {
-                        id: menuEntry.id,
-                        title: menuEntry.name,
-                        href: `${getAppRoot()}workflows/run?id=${menuEntry.id}`,
-                    };
-                }),
-            ];
-        },
         hasResults() {
             return this.results && this.results.length > 0;
         },

From 149d32dc4279dd6e564dd094eadeed6c149113fa Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 17:18:41 +0300
Subject: [PATCH 34/57] Show workflow list when clicking on workflow item

---
 client/src/components/ActivityBar/ActivityBar.vue        | 2 +-
 client/src/components/ActivityBar/Items/WorkflowItem.vue | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 06a82575755e..fc8b156b0612 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -68,7 +68,7 @@ function onToggleSidebar(toggle) {
         </b-nav>
         <div class="activity-footer">
             <b-nav vertical class="flex-nowrap p-1">
-                <ActivityItem id="settings" icon="cog" title="Configure" tooltip="Search and run tools" />
+                <ActivityItem id="settings" icon="cog" title="Configure" tooltip="Configure the Activity Bar" />
             </b-nav>
         </div>
         <div v-show="sidebarIsActive('search')" key="search">
diff --git a/client/src/components/ActivityBar/Items/WorkflowItem.vue b/client/src/components/ActivityBar/Items/WorkflowItem.vue
index fe9994a686d6..67cb962b634c 100644
--- a/client/src/components/ActivityBar/Items/WorkflowItem.vue
+++ b/client/src/components/ActivityBar/Items/WorkflowItem.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useRouter } from "vue-router/composables";
 import ActivityItem from "components/ActivityBar/ActivityItem.vue";
 
 interface Workflow {
@@ -12,6 +13,7 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {});
+const router = useRouter();
 
 const activityOptions = computed(() => {
     return [
@@ -31,6 +33,10 @@ const activityOptions = computed(() => {
 const hasWorkflows = computed(() => {
     return props.workflows && props.workflows.length > 0;
 });
+
+function showWorkflowList(): void {
+    router.push("/workflows/list");
+}
 </script>
 
 <template>
@@ -40,5 +46,6 @@ const hasWorkflows = computed(() => {
         title="Workflow"
         tooltip="Select a Workflow:"
         icon="sitemap"
-        :options="activityOptions" />
+        :options="activityOptions"
+        @click="showWorkflowList" />
 </template>

From fe78ffa2d26943422e10acf5a14d3321c944b77b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 17:22:17 +0300
Subject: [PATCH 35/57] Remove unused props from toolbox wrapper

---
 .../src/components/Panels/ProviderAwareToolBox.vue   | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/client/src/components/Panels/ProviderAwareToolBox.vue b/client/src/components/Panels/ProviderAwareToolBox.vue
index 95232d56f7b0..47c928faf709 100644
--- a/client/src/components/Panels/ProviderAwareToolBox.vue
+++ b/client/src/components/Panels/ProviderAwareToolBox.vue
@@ -9,8 +9,6 @@
                 :toolbox="currentPanel"
                 :panel-views="config.panel_views"
                 :current-panel-view="currentPanelView"
-                :stored-workflow-menu-entries="storedWorkflowMenuEntries"
-                :workflow-title="workflowTitle"
                 @updatePanelView="updatePanelView">
             </ToolBox>
         </ToolPanelViewProvider>
@@ -30,16 +28,6 @@ export default {
         ToolBox,
         ToolPanelViewProvider,
     },
-    props: {
-        storedWorkflowMenuEntries: {
-            type: Array,
-            required: true,
-        },
-        workflowTitle: {
-            type: String,
-            default: _l("Workflows"),
-        },
-    },
     methods: {
         updatePanelView(panelView) {
             this.setCurrentPanelView(panelView);

From b091cf14058a3e7cc379d09ef44bd824f6c3be1b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Mar 2023 17:40:58 +0300
Subject: [PATCH 36/57] Remove debugging icons, add new test activities

---
 .../components/ActivityBar/ActivityBar.vue    | 42 ++++++-------------
 client/src/components/plugins/icons.js        |  2 +
 2 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index fc8b156b0612..598f8b2ffe7f 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -14,7 +14,7 @@ const router = useRouter();
 const showCenter = ref(false);
 const userStore = useUserStore();
 
-const storedWorkflowMenuEntries = computed(() => {
+const workflows = computed(() => {
     const Galaxy = getGalaxyInstance();
     return Galaxy.config.stored_workflow_menu_entries;
 });
@@ -26,10 +26,15 @@ function sidebarIsActive(menuKey) {
 function onToggleSidebar(toggle) {
     userStore.toggleSideBar(toggle);
 }
+
+function showVisualizationList() {
+    router.push("/visualizations");
+}
 </script>
 <template>
     <div class="d-flex">
         <b-nav vertical class="activity-bar flex-nowrap p-1">
+            <upload-item />
             <ActivityItem
                 id="tools"
                 icon="wrench"
@@ -37,34 +42,13 @@ function onToggleSidebar(toggle) {
                 tooltip="Search and run tools"
                 :is-active="sidebarIsActive('search')"
                 @click="onToggleSidebar('search')" />
-            <upload-item />
-            <workflow-item :workflows="storedWorkflowMenuEntries" />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
-            <upload-item />
+            <workflow-item :workflows="workflows" />
+            <ActivityItem
+                id="activity-visualization"
+                icon="chart-bar"
+                title="Visualize"
+                tooltip="Visualize datasets"
+                @click="showVisualizationList" />
         </b-nav>
         <div class="activity-footer">
             <b-nav vertical class="flex-nowrap p-1">
diff --git a/client/src/components/plugins/icons.js b/client/src/components/plugins/icons.js
index 5dd51fbfdc8f..ab5524e414e1 100644
--- a/client/src/components/plugins/icons.js
+++ b/client/src/components/plugins/icons.js
@@ -5,6 +5,7 @@ import {
     faBolt,
     faBurn,
     faChartArea,
+    faChartBar,
     faCheckSquare,
     faClock,
     faCloud,
@@ -49,6 +50,7 @@ library.add(
     faBolt,
     faBurn,
     faChartArea,
+    faChartBar,
     faCheckSquare,
     faClock,
     faCloud,

From 732abe4f9c566f6b6a9c19206b02715c65da75b6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 4 Apr 2023 12:28:25 +0300
Subject: [PATCH 37/57] Resolve activity footer alignment

---
 .../components/ActivityBar/ActivityBar.vue    | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 598f8b2ffe7f..d1f6d4af80c1 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -33,26 +33,30 @@ function showVisualizationList() {
 </script>
 <template>
     <div class="d-flex">
-        <b-nav vertical class="activity-bar flex-nowrap p-1">
-            <upload-item />
-            <ActivityItem
-                id="tools"
-                icon="wrench"
-                title="Tools"
-                tooltip="Search and run tools"
-                :is-active="sidebarIsActive('search')"
-                @click="onToggleSidebar('search')" />
-            <workflow-item :workflows="workflows" />
-            <ActivityItem
-                id="activity-visualization"
-                icon="chart-bar"
-                title="Visualize"
-                tooltip="Visualize datasets"
-                @click="showVisualizationList" />
-        </b-nav>
-        <div class="activity-footer">
+        <div class="activity-bar d-flex flex-column">
+            <b-nav vertical class="flex-nowrap p-1 h-100 vertical-overflow">
+                <upload-item />
+                <ActivityItem
+                    id="activity-tools"
+                    icon="wrench"
+                    title="Tools"
+                    tooltip="Search and run tools"
+                    :is-active="sidebarIsActive('search')"
+                    @click="onToggleSidebar('search')" />
+                <workflow-item :workflows="workflows" />
+                <ActivityItem
+                    id="activity-visualization"
+                    icon="chart-bar"
+                    title="Visualize"
+                    tooltip="Visualize datasets"
+                    @click="showVisualizationList" />
+            </b-nav>
             <b-nav vertical class="flex-nowrap p-1">
-                <ActivityItem id="settings" icon="cog" title="Configure" tooltip="Configure the Activity Bar" />
+                <ActivityItem
+                    id="activity-settings"
+                    icon="cog"
+                    title="Configure"
+                    tooltip="Configure the Activity Bar" />
             </b-nav>
         </div>
         <div v-show="sidebarIsActive('search')" key="search">
@@ -70,8 +74,6 @@ function showVisualizationList() {
 
 .activity-bar {
     background: $panel-bg-color;
-    overflow-y: auto;
-    overflow-x: hidden;
     width: 4rem;
 }
 
@@ -79,13 +81,6 @@ function showVisualizationList() {
     display: none;
 }
 
-.activity-footer {
-    @extend .activity-bar;
-    position: absolute;
-    left: 0;
-    bottom: 0px;
-}
-
 .panels-enter-active,
 .panels-leave-active {
     transition: all 0.3s;
@@ -95,4 +90,9 @@ function showVisualizationList() {
 .panels-leave-to {
     transform: translateX(-100%);
 }
+
+.vertical-overflow {
+    overflow-y: auto;
+    overflow-x: hidden;
+}
 </style>

From e4d4c8002a867af7a1e51111c1e08bc53dd9abd1 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 4 Apr 2023 18:10:47 +0300
Subject: [PATCH 38/57] Start prepping new side panel component for flex
 compatibility

---
 client/src/components/Panels/FlexPanel.vue    | 30 +++++++++++++++++++
 .../src/entry/analysis/modules/Analysis.vue   |  5 +++-
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/Panels/FlexPanel.vue

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
new file mode 100644
index 000000000000..388a3b902f87
--- /dev/null
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -0,0 +1,30 @@
+<script setup>
+import { ref } from "vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+
+library.add({
+    faChevronLeft,
+    faChevronRight,
+});
+
+const show = ref(true);
+
+function toggle() {
+    show.value = !show.value;
+}
+</script>
+
+<template>
+    <div class="d-flex">
+        <div class="d-flex flex-column">
+            <slot v-if="show" />
+            <div v-else class="flex-fill" />
+            <div class="align-self-end px-2 py-1" @click="toggle">
+                <icon v-if="show" icon="chevron-right" />
+                <icon v-else icon="chevron-left" />
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index ca037d99c2d6..d7413821d415 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -5,6 +5,7 @@ import { useUserStore } from "@/stores/userStore";
 import HistoryIndex from "@/components/History/Index.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import { WindowManager } from "@/layout/window-manager";
 import { useRoute, useRouter } from "vue-router/composables";
 import { computed, ref, onMounted, onUnmounted } from "vue";
@@ -57,7 +58,9 @@ onUnmounted(() => {
             <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
             <router-view v-show="!showCenter" :key="$route.fullPath" class="h-100" />
         </div>
-        <HistoryIndex v-if="showPanels" class="right-column" />
+        <FlexPanel side="right">
+            <HistoryIndex v-if="showPanels" class="right-column" />
+        </FlexPanel>
         <DragAndDropModal />
     </div>
 </template>

From 6bf847658227e94b3c8fcf85dd58fc79ee1387b3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 4 Apr 2023 18:38:02 +0300
Subject: [PATCH 39/57] Rebuild right panel appearance and behavior

---
 client/src/components/Panels/FlexPanel.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 388a3b902f87..deda98ca7f3c 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -21,10 +21,23 @@ function toggle() {
         <div class="d-flex flex-column">
             <slot v-if="show" />
             <div v-else class="flex-fill" />
-            <div class="align-self-end px-2 py-1" @click="toggle">
-                <icon v-if="show" icon="chevron-right" />
+            <div class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }" @click="toggle">
+                <div class="flex-fill" />
+                <icon v-if="show" class="align-self-end" icon="chevron-right" />
                 <icon v-else icon="chevron-left" />
             </div>
         </div>
     </div>
 </template>
+
+<style>
+@import "theme/blue.scss";
+.flex-panel-footer {
+    background: $panel-footer-bg-color;
+    cursor: pointer;
+}
+.flex-panel-border {
+    border: $border-default;
+    border-top-left-radius: $border-radius-base;
+}
+</style>

From 2434a74a2d4c4579d0fc90e3a9f61e9eb3f0b9c0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 4 Apr 2023 18:55:12 +0300
Subject: [PATCH 40/57] Move column width handling to panel handler, prep for
 drag operation to resize

---
 client/src/components/Panels/FlexPanel.vue     |  5 ++++-
 client/src/entry/analysis/modules/Analysis.vue | 12 +-----------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index deda98ca7f3c..da933af9f2ae 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -18,7 +18,7 @@ function toggle() {
 
 <template>
     <div class="d-flex">
-        <div class="d-flex flex-column">
+        <div class="d-flex flex-column" :class="{ 'flex-panel-column': show }">
             <slot v-if="show" />
             <div v-else class="flex-fill" />
             <div class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }" @click="toggle">
@@ -32,6 +32,9 @@ function toggle() {
 
 <style>
 @import "theme/blue.scss";
+.flex-panel-column {
+    width: 18rem;
+}
 .flex-panel-footer {
     background: $panel-footer-bg-color;
     cursor: pointer;
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index d7413821d415..7ec67a5733ad 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -59,18 +59,8 @@ onUnmounted(() => {
             <router-view v-show="!showCenter" :key="$route.fullPath" class="h-100" />
         </div>
         <FlexPanel side="right">
-            <HistoryIndex v-if="showPanels" class="right-column" />
+            <HistoryIndex v-if="showPanels" />
         </FlexPanel>
         <DragAndDropModal />
     </div>
 </template>
-
-<style scoped>
-@import "theme/blue.scss";
-
-.right-column {
-    min-width: 18rem;
-    max-width: 18rem;
-    width: 18rem;
-}
-</style>

From 01e43027dd280d5ede4a8c22fb49a7eb309582dd Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 6 Apr 2023 12:30:49 +0300
Subject: [PATCH 41/57] Fix client linting

---
 .../components/ActivityBar/ActivityBar.vue    |  7 +--
 .../components/ActivityBar/ActivityItem.vue   | 43 +++++++++----------
 client/src/components/Panels/FlexPanel.vue    |  4 +-
 .../Panels/ProviderAwareToolBox.vue           |  1 -
 client/src/components/Panels/ToolBox.vue      |  3 --
 client/src/components/Popper/Popper.vue       |  5 +--
 client/src/components/Popper/usePopper.ts     | 40 +++++++++++------
 .../src/entry/analysis/modules/Analysis.vue   | 16 +------
 8 files changed, 55 insertions(+), 64 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index d1f6d4af80c1..c1f39559ff49 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -1,17 +1,14 @@
 <script setup>
 import { getGalaxyInstance } from "app";
 import { useUserStore } from "@/stores/userStore";
-import { WindowManager } from "@/layout/window-manager";
-import { useRoute, useRouter } from "vue-router/composables";
-import { computed, ref } from "vue";
+import { useRouter } from "vue-router/composables";
+import { computed } from "vue";
 import UploadItem from "./Items/UploadItem.vue";
 import WorkflowItem from "./Items/WorkflowItem.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
 import ActivityItem from "./ActivityItem";
 
-const route = useRoute();
 const router = useRouter();
-const showCenter = ref(false);
 const userStore = useUserStore();
 
 const workflows = computed(() => {
diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 8d31baf58e70..83308a62dcfa 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from "vue";
 import Popper from "components/Popper/Popper.vue";
 
 interface Option {
@@ -18,7 +17,7 @@ export interface Props {
     options?: Option[];
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
     icon: "question",
     isActive: false,
     tooltip: null,
@@ -32,39 +31,37 @@ const emit = defineEmits<{
 <template>
     <div>
         <Popper reference-is="span" popper-is="span" placement="right">
-            <template #reference>
+            <template v-slot:reference>
                 <b-nav-item
                     :id="id"
                     class="position-relative mb-1"
                     :class="{ 'nav-item-active': isActive }"
                     :aria-label="title | l"
                     @click="emit('click')">
-                    <template>
-                        <span v-if="!!progressStatus" class="progress">
-                            <div
-                                class="progress-bar notransition"
-                                :class="{
-                                    'bg-danger': progressStatus === 'danger',
-                                    'bg-success': progressStatus === 'success',
-                                }"
-                                :style="{
-                                    width: `${Math.round(progressPercentage)}%`,
-                                }" />
-                        </span>
-                        <span class="position-relative">
-                            <div class="nav-icon">
-                                <Icon :icon="icon" />
-                            </div>
-                            <div class="nav-title">{{ title }}</div>
-                        </span>
-                    </template>
+                    <span v-if="!!progressStatus" class="progress">
+                        <div
+                            class="progress-bar notransition"
+                            :class="{
+                                'bg-danger': progressStatus === 'danger',
+                                'bg-success': progressStatus === 'success',
+                            }"
+                            :style="{
+                                width: `${Math.round(progressPercentage)}%`,
+                            }" />
+                    </span>
+                    <span class="position-relative">
+                        <div class="nav-icon">
+                            <Icon :icon="icon" />
+                        </div>
+                        <div class="nav-title">{{ title }}</div>
+                    </span>
                 </b-nav-item>
             </template>
             <div class="px-2 py-1">
                 <small v-if="tooltip">{{ tooltip | l }}</small>
                 <small v-else>No tooltip available for this item</small>
                 <div v-if="options" class="nav-options p-1">
-                    <router-link v-for="option in options" :to="option.value">
+                    <router-link v-for="(option, index) in options" :key="index" :to="option.value">
                         <b-button size="sm" variant="outline-primary" class="w-100 my-1 text-break text-light">
                             {{ option.name }}
                         </b-button>
diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index da933af9f2ae..7b6d8c814a47 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -23,8 +23,8 @@ function toggle() {
             <div v-else class="flex-fill" />
             <div class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }" @click="toggle">
                 <div class="flex-fill" />
-                <icon v-if="show" class="align-self-end" icon="chevron-right" />
-                <icon v-else icon="chevron-left" />
+                <font-awesome-icon v-if="show" class="align-self-end" icon="chevron-right" />
+                <font-awesome-icon v-else icon="chevron-left" />
             </div>
         </div>
     </div>
diff --git a/client/src/components/Panels/ProviderAwareToolBox.vue b/client/src/components/Panels/ProviderAwareToolBox.vue
index 47c928faf709..6c6cb7934a41 100644
--- a/client/src/components/Panels/ProviderAwareToolBox.vue
+++ b/client/src/components/Panels/ProviderAwareToolBox.vue
@@ -19,7 +19,6 @@
 import ToolBox from "./ToolBox";
 import ConfigProvider from "components/providers/ConfigProvider";
 import ToolPanelViewProvider from "components/providers/ToolPanelViewProvider";
-import _l from "utils/localization";
 import { mapActions } from "vuex";
 
 export default {
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 99fe35b944c4..adadd7d7d5c3 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -62,14 +62,11 @@
 <script>
 import ToolSection from "./Common/ToolSection";
 import ToolSearch from "./Common/ToolSearch";
-import { UploadButton } from "components/Upload";
 import { useGlobalUploadModal } from "composables/globalUploadModal";
-import { openGlobalUploadModal } from "components/Upload";
 import FavoritesButton from "./Buttons/FavoritesButton";
 import PanelViewButton from "./Buttons/PanelViewButton";
 import { filterToolSections, filterTools, hasResults, hideToolsSection } from "./utilities";
 import { getGalaxyInstance } from "app";
-import { getAppRoot } from "onload";
 import _l from "utils/localization";
 
 export default {
diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index cd285ae881a0..b0a6766d02a0 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -3,7 +3,7 @@
         <component :is="referenceIs" v-bind="referenceProps" ref="reference">
             <slot name="reference" />
         </component>
-        <component class="popper-element mt-1" v-show="visible" :is="popperIs" v-bind="popperProps" ref="popper">
+        <component :is="popperIs" v-show="visible" v-bind="popperProps" ref="popper" class="popper-element mt-1">
             <div class="popper-arrow" data-popper-arrow />
             <slot />
         </component>
@@ -11,10 +11,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRef, computed, watch } from "vue";
+import { defineComponent, ref, toRef, watch } from "vue";
 import type { UnwrapRef, PropType } from "vue";
 import { usePopperjs } from "./usePopper";
-let popperUid = 0;
 
 export default defineComponent({
     components: {},
diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index f19c15bcafeb..2ba0f67f3ec8 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -56,8 +56,9 @@ export function usePopperjs(
     watch(
         () => [isMounted.value, updatedFlag.value],
         () => {
-            if (!isMounted.value) return;
-
+            if (!isMounted.value) {
+                return;
+            }
             if ((unref(reference) as any)?.$el) {
                 referenceRef.value = (unref(reference) as any).$el;
             } else {
@@ -77,9 +78,12 @@ export function usePopperjs(
         () => [referenceRef.value, popperRef.value],
         () => {
             destroy();
-            if (!referenceRef.value) return;
-            if (!popperRef.value) return;
-
+            if (!referenceRef.value) {
+                return;
+            }
+            if (!popperRef.value) {
+                return;
+            }
             concrete();
         }
     );
@@ -103,7 +107,9 @@ export function usePopperjs(
     watch(
         () => [instance.value, unref(options?.trigger), unref(options?.forceShow)],
         () => {
-            if (!instance.value) return;
+            if (!instance.value) {
+                return;
+            }
 
             if (unref(options?.forceShow)) {
                 visible.value = true;
@@ -118,9 +124,12 @@ export function usePopperjs(
     watch(
         () => unref(options?.forceShow),
         () => {
-            if (unref(options?.forceShow)) return;
-            if (unref(options?.trigger) === "manual") return;
-
+            if (unref(options?.forceShow)) {
+                return;
+            }
+            if (unref(options?.trigger) === "manual") {
+                return;
+            }
             visible.value = false;
         }
     );
@@ -205,16 +214,21 @@ export function usePopperjs(
         off(popperRef.value!, "blur", doClose);
     };
     const doCloseForDocument = (e: Event) => {
-        if (referenceRef.value?.contains(e.target as Element)) return;
-        if (popperRef.value?.contains(e.target as Element)) return;
+        if (referenceRef.value?.contains(e.target as Element)) {
+            return;
+        }
+        if (popperRef.value?.contains(e.target as Element)) {
+            return;
+        }
         doClose();
     };
 
     watch(
         () => [instance.value, visible.value],
         () => {
-            if (!instance.value) return;
-
+            if (!instance.value) {
+                return;
+            }
             if (visible.value || unref(options?.forceShow)) {
                 popperRef.value?.classList.remove("vue-use-popperjs-none");
                 options?.onShow?.();
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 7ec67a5733ad..9f428065e797 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -1,19 +1,15 @@
 <script setup>
-import { getGalaxyInstance } from "app";
 import CenterFrame from "./CenterFrame.vue";
-import { useUserStore } from "@/stores/userStore";
 import HistoryIndex from "@/components/History/Index.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
-import { WindowManager } from "@/layout/window-manager";
 import { useRoute, useRouter } from "vue-router/composables";
 import { computed, ref, onMounted, onUnmounted } from "vue";
 
 const route = useRoute();
 const router = useRouter();
 const showCenter = ref(false);
-const userStore = useUserStore();
 
 // computed
 const showPanels = computed(() => {
@@ -33,14 +29,6 @@ function onLoad() {
     showCenter.value = true;
 }
 
-function sidebarIsActive(menuKey) {
-    return userStore.toggledSideBar === menuKey;
-}
-
-function onToggleSidebar(toggle) {
-    userStore.toggleSideBar(toggle);
-}
-
 // life cycle
 onMounted(() => {
     // Using a custom event here which, in contrast to watching $route,
@@ -58,8 +46,8 @@ onUnmounted(() => {
             <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
             <router-view v-show="!showCenter" :key="$route.fullPath" class="h-100" />
         </div>
-        <FlexPanel side="right">
-            <HistoryIndex v-if="showPanels" />
+        <FlexPanel v-if="showPanels" side="right">
+            <HistoryIndex />
         </FlexPanel>
         <DragAndDropModal />
     </div>

From d36355af6a5b9d32fd0cddbdb634577e155b7c23 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 9 Apr 2023 08:16:29 +0300
Subject: [PATCH 42/57] Avoid using Function to declare type

---
 client/src/components/Popper/usePopper.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index 2ba0f67f3ec8..d4920b8c0b9a 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -7,8 +7,8 @@ export type MaybeRef<T> = T | Ref<T>;
 export type Trigger = "hover" | "focus" | "click-to-open" | "click-to-toggle" | "manual";
 
 export type EventOptions = {
-    onShow: Function;
-    onHide: Function;
+    onShow: () => void;
+    onHide: () => void;
 };
 
 function on(element: Element, event: string, handler: EventListenerOrEventListenerObject) {

From f3637373553e9df1ff3b339c90884a08587e7529 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 9 Apr 2023 18:49:09 +0300
Subject: [PATCH 43/57] Fix selenium tests

---
 client/src/components/ActivityBar/Items/UploadItem.vue | 2 +-
 client/src/components/Common/Published.vue             | 2 +-
 client/src/components/Workflow/Editor/Index.vue        | 2 +-
 client/src/entry/analysis/modules/Admin.vue            | 2 +-
 client/src/entry/analysis/modules/Analysis.vue         | 2 +-
 client/src/entry/analysis/modules/Login.vue            | 2 +-
 client/src/style/scss/base.scss                        | 5 +++--
 client/src/utils/navigation/navigation.yml             | 2 +-
 8 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
index 2df7d6a2530b..c83b21278258 100644
--- a/client/src/components/ActivityBar/Items/UploadItem.vue
+++ b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -37,7 +37,7 @@ function setPercentage(val: number): void {
 
 <template>
     <ActivityItem
-        id="tool-panel-upload-button"
+        id="activity-upload"
         title="Upload"
         tooltip="Download from URL or upload files from disk"
         icon="upload"
diff --git a/client/src/components/Common/Published.vue b/client/src/components/Common/Published.vue
index e19b8aaa3374..ecc8a4d10898 100644
--- a/client/src/components/Common/Published.vue
+++ b/client/src/components/Common/Published.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="columns">
-        <div id="center">
+        <div id="center" class="center-style">
             <div class="center-container">
                 <div class="center-panel" style="display: block">
                     <slot />
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 84bd85635915..f6ba4c59bd7d 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -58,7 +58,7 @@
                         @onInsertWorkflowSteps="onInsertWorkflowSteps" />
                 </template>
             </SidePanel>
-            <div id="center" class="workflow-center">
+            <div id="center" class="center-style workflow-center">
                 <div class="unified-panel-header" unselectable="on">
                     <div class="unified-panel-header-inner">
                         <span class="sr-only">Workflow Editor</span>
diff --git a/client/src/entry/analysis/modules/Admin.vue b/client/src/entry/analysis/modules/Admin.vue
index e2cc161a4797..452f46985400 100644
--- a/client/src/entry/analysis/modules/Admin.vue
+++ b/client/src/entry/analysis/modules/Admin.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="columns">
         <SidePanel side="left" :current-panel="getAdminPanel()" :current-panel-properties="panelProperties" />
-        <div id="center">
+        <div id="center" class="center-style">
             <div class="center-container">
                 <div class="center-panel" style="display: block">
                     <router-view :key="$route.fullPath" />
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 9f428065e797..8a4754a0609b 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -42,7 +42,7 @@ onUnmounted(() => {
 <template>
     <div id="columns" class="d-flex">
         <ActivityBar v-if="showPanels" />
-        <div class="center-column overflow-auto p-3 w-100">
+        <div id="center" class="overflow-auto p-3 w-100">
             <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
             <router-view v-show="!showCenter" :key="$route.fullPath" class="h-100" />
         </div>
diff --git a/client/src/entry/analysis/modules/Login.vue b/client/src/entry/analysis/modules/Login.vue
index cd4e21b7f689..381bcf6bf9a0 100644
--- a/client/src/entry/analysis/modules/Login.vue
+++ b/client/src/entry/analysis/modules/Login.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="columns">
-        <div id="center">
+        <div id="center" class="center-style">
             <div class="center-container">
                 <div class="center-panel" style="display: block">
                     <ChangePassword
diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index ae424ffa725f..d430bb0c84ad 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -134,7 +134,6 @@ body {
 // ==== Panel layout styles ====
 
 #left,
-#center,
 #right {
     @extend .position-absolute;
     @extend .h-100;
@@ -156,7 +155,9 @@ body {
         left: 0;
     }
 }
-#center {
+.center-style  {
+    @extend .position-absolute;
+    @extend .h-100;
     left: $panel-width;
     right: $panel-width;
     .center-container {
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index fa355ca5a495..93776bf1cacb 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -951,7 +951,7 @@ upload:
     paste_content: '#upload-row-${n} .upload-text-content'
     settings: '.upload-settings-table'
     setting_deferred: '.upload-deferred'
-    start: '.upload-button'
+    start: '#activity-upload'
     start_uploading: '.upload-start'
     close: '.upload-close'
     rule_source_content: 'textarea.upload-rule-source-content'

From b2eb6f4e1ba4d8b21779c7e49e4f6d085e3600f0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 9 Apr 2023 23:26:27 +0300
Subject: [PATCH 44/57] Decouple panel ids from styles

---
 client/src/components/Common/Published.vue |  2 +-
 client/src/components/Panels/SidePanel.vue |  6 +++++-
 client/src/components/Tool/ToolForm.vue    |  2 +-
 client/src/style/scss/base.scss            | 12 ++++++------
 client/src/utils/navigation/navigation.yml |  2 +-
 config/plugins/tours/core.galaxy_ui.yaml   | 14 +++++++-------
 config/plugins/tours/core.history.yaml     |  2 +-
 config/plugins/tours/core.windows.yaml     |  4 ++--
 8 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Common/Published.vue b/client/src/components/Common/Published.vue
index ecc8a4d10898..c0d9d3d452a0 100644
--- a/client/src/components/Common/Published.vue
+++ b/client/src/components/Common/Published.vue
@@ -7,7 +7,7 @@
                 </div>
             </div>
         </div>
-        <div id="right">
+        <div id="right" class="right-style">
             <div class="m-3">
                 <div v-if="modelTitle">
                     <h1 class="h-sm">About this {{ modelTitle }}</h1>
diff --git a/client/src/components/Panels/SidePanel.vue b/client/src/components/Panels/SidePanel.vue
index 32c3715fcb71..6a0f79d260bc 100644
--- a/client/src/components/Panels/SidePanel.vue
+++ b/client/src/components/Panels/SidePanel.vue
@@ -1,5 +1,9 @@
 <template>
-    <div :id="side" class="unified-panel-outer-wrap" :style="styles">
+    <div
+        :id="side"
+        class="unified-panel-outer-wrap"
+        :class="{ 'left-style': side === 'left', 'right-style': side === 'right' }"
+        :style="styles">
         <slot name="panel">
             <component :is="currentPanel" v-bind="currentPanelProperties" />
         </slot>
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index a4d260930077..6e87b9d435e2 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -80,6 +80,7 @@
                         </template>
                         <template v-slot:header-buttons>
                             <ButtonSpinner
+                                id="execute"
                                 title="Run Tool"
                                 class="btn-sm"
                                 :wait="showExecuting"
@@ -88,7 +89,6 @@
                         </template>
                         <template v-slot:buttons>
                             <ButtonSpinner
-                                id="execute"
                                 title="Run Tool"
                                 class="mt-3 mb-3"
                                 :wait="showExecuting"
diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index d430bb0c84ad..3995667026e9 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -133,29 +133,29 @@ body {
 
 // ==== Panel layout styles ====
 
-#left,
-#right {
+.left-style,
+.right-style {
     @extend .position-absolute;
     @extend .h-100;
 }
-#left {
+.left-style {
     @extend .unified-panel;
     left: 0px;
     width: $panel-width;
     overflow: unset !important;
 }
-#right {
+.right-style {
     @extend .unified-panel;
     right: 0px;
     width: $panel-width;
     overflow: unset !important;
 }
-#right > .unified-panel-footer {
+.right-style > .unified-panel-footer {
     .drag {
         left: 0;
     }
 }
-.center-style  {
+.center-style {
     @extend .position-absolute;
     @extend .h-100;
     left: $panel-width;
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 93776bf1cacb..12629fa28a60 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -951,7 +951,7 @@ upload:
     paste_content: '#upload-row-${n} .upload-text-content'
     settings: '.upload-settings-table'
     setting_deferred: '.upload-deferred'
-    start: '#activity-upload'
+    start: '#activity-upload > a'
     start_uploading: '.upload-start'
     close: '.upload-close'
     rule_source_content: 'textarea.upload-rule-source-content'
diff --git a/config/plugins/tours/core.galaxy_ui.yaml b/config/plugins/tours/core.galaxy_ui.yaml
index 67e4519a1a3a..5be99f60e599 100644
--- a/config/plugins/tours/core.galaxy_ui.yaml
+++ b/config/plugins/tours/core.galaxy_ui.yaml
@@ -13,8 +13,8 @@ steps:
       # 'content' is the actual text that is shown to the user
       content: "This short tour will guide you through Galaxy's user interface. You can leave the tour at any time by pressing escape."
 
-    # 'element' is the JQuery Selector (http://api.jquery.com/category/selectors/) of the element you want to describe
-    # In this case we want to highlight the Upload button with the `.upload-button` selector
+    # 'element' is the JQuery Selector (http://api.jquery.com/category/selectors/) of the element you want to describe.
+    # We could highlight the Upload button using `#activity-upload > a` or, alternatively specify a `component` using the navigation interface.
     - title: "Upload your data"
       component: upload.start
       intro: "Galaxy supports many ways to get in your data. Use this button to upload your data."
@@ -49,7 +49,7 @@ steps:
       postclick: true
 
     - title: "Tools"
-      element: "#left"
+      element: ".left-column"
       intro: "This is your ToolBox. All tools available in your Galaxy instance you can find here."
 
     - title: "Tool categories"
@@ -67,11 +67,11 @@ steps:
       postclick: true
 
     - title: "Filter Tool"
-      element: '.center-panel'
+      element: '#center'
       intro: "Your tool is loaded into the main Galaxy page and ready for use."
 
     - title: "Tool parameters"
-      element: '.center-panel #tool-card-body'
+      element: '#center #tool-card-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"
@@ -86,7 +86,7 @@ steps:
       postclick: true
 
     - title: "History"
-      element: "#right"
+      element: "#current-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."
@@ -118,7 +118,7 @@ steps:
       intro: "By clicking the reload button, you can re-run your tool again (e.g. with different parameters or on another dataset)."
 
     - title: "Panel collapse"
-      element: "#left > div.unified-panel-footer > div.panel-collapse.left"
+      element: "#activity-tools > a"
       intro: "To extend the view for your main Galaxy page in the middle, you can collapse the tool panel on the left hand side. Clicking the panel arrow on the right hand side, collapses the history."
       postclick: true
 
diff --git a/config/plugins/tours/core.history.yaml b/config/plugins/tours/core.history.yaml
index 77c73a56cf87..4a3dd5c7431e 100644
--- a/config/plugins/tours/core.history.yaml
+++ b/config/plugins/tours/core.history.yaml
@@ -9,7 +9,7 @@ steps:
     - content: "This short tour will guide you through <b>Galaxy's History</b> and datasets."
 
     - title: "Upload data"
-      element: ".upload-button"
+      component: upload.start
       intro: |
             At first we upload some data into your Galaxy history.<br>
             Use this button to upload your data.
diff --git a/config/plugins/tours/core.windows.yaml b/config/plugins/tours/core.windows.yaml
index d2318ce3c5d8..dd07f4d7b882 100644
--- a/config/plugins/tours/core.windows.yaml
+++ b/config/plugins/tours/core.windows.yaml
@@ -12,7 +12,7 @@ requirements:
 steps:
     - content: "This short tour will walk you through <b>Galaxy's Window Manager</b> feature"
 
-    - element: "#tool-panel-upload-button"
+    - component: upload.start
       intro: "First, we will upload some tabular data into our new history."
       postclick: true
 
@@ -75,7 +75,7 @@ steps:
       intro: "Clicking this button will enable Galaxy's Window Manager mode."
       postclick: true
 
-    - element: "#right"
+    - element: "#current-history-panel"
       intro: "This is your history. It contains our two tables being uploaded."
 
     - component: history_panel.item(hid=1,state=ok).display_button

From a833f34b8453473354568f3bb47390029924d5cb Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 10 Apr 2023 08:42:59 +0300
Subject: [PATCH 45/57] Adjust workflow bookmarking test

---
 client/src/utils/navigation/navigation.yml       |  7 +++++++
 lib/galaxy_test/selenium/test_workflow_editor.py | 11 ++---------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 12629fa28a60..180a59a77400 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -29,6 +29,13 @@ _:  # global stuff
       infolarge: '.infomessagelarge'
       require_login: 'a.require-login-link'
 
+activity:
+  selectors:
+    workflow: '#activity-workflow > a'
+    workflow_bookmark:
+      type: xpath
+      selector: '//a[contains(text(), ${name})]'
+
 masthead:
 
   selectors:
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index ab6c79333a78..e04cec09b306 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -877,16 +877,9 @@ def assert_workflow_bookmarked_status(target_status):
         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.components.tool_panel.search.wait_for_and_send_keys(new_workflow_name)
-        self.sleep_for(self.wait_types.UX_RENDER)
         self.components.workflows.bookmark_link.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)
-        assert_workflow_bookmarked_status(True)
+        self.hover_over(self.components.activity.workflow.wait_for_visible())
+        self.components.activity.workflow_bookmark(name=new_workflow_name).wait_for_visible()
 
     def tab_to(self, accessible_name, direction="forward"):
         for _ in range(100):

From c5850e7b95252c8e14441fad0a907c24ac4e0c98 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 10 Apr 2023 10:43:55 +0300
Subject: [PATCH 46/57] Avoid using left/right in tours, specify actual target

---
 config/plugins/tours/core.history.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/plugins/tours/core.history.yaml b/config/plugins/tours/core.history.yaml
index 4a3dd5c7431e..a7ab5c393f1b 100644
--- a/config/plugins/tours/core.history.yaml
+++ b/config/plugins/tours/core.history.yaml
@@ -35,7 +35,7 @@ steps:
         - "#btn-close"
 
     - title: "History"
-      element: "#right"
+      element: "#current-history-panel"
       intro: "This is your history! All analysis steps will be recorded and can be redone at any time."
 
     - title: "Dataset information"

From 5dad8255f726cff97c626e33f98b9907ad221208 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 10 Apr 2023 10:58:01 +0300
Subject: [PATCH 47/57] Move route calling to activity item

---
 client/src/components/ActivityBar/ActivityBar.vue | 11 +++--------
 .../src/components/ActivityBar/ActivityItem.vue   | 15 +++++++++++++--
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index c1f39559ff49..3974c59148ec 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -1,14 +1,12 @@
 <script setup>
 import { getGalaxyInstance } from "app";
 import { useUserStore } from "@/stores/userStore";
-import { useRouter } from "vue-router/composables";
 import { computed } from "vue";
 import UploadItem from "./Items/UploadItem.vue";
 import WorkflowItem from "./Items/WorkflowItem.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
 import ActivityItem from "./ActivityItem";
 
-const router = useRouter();
 const userStore = useUserStore();
 
 const workflows = computed(() => {
@@ -23,10 +21,6 @@ function sidebarIsActive(menuKey) {
 function onToggleSidebar(toggle) {
     userStore.toggleSideBar(toggle);
 }
-
-function showVisualizationList() {
-    router.push("/visualizations");
-}
 </script>
 <template>
     <div class="d-flex">
@@ -46,14 +40,15 @@ function showVisualizationList() {
                     icon="chart-bar"
                     title="Visualize"
                     tooltip="Visualize datasets"
-                    @click="showVisualizationList" />
+                    to="/visualizations" />
             </b-nav>
             <b-nav vertical class="flex-nowrap p-1">
                 <ActivityItem
                     id="activity-settings"
                     icon="cog"
                     title="Configure"
-                    tooltip="Configure the Activity Bar" />
+                    tooltip="Edit preferences"
+                    to="/user" />
             </b-nav>
         </div>
         <div v-show="sidebarIsActive('search')" key="search">
diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 83308a62dcfa..ef0e7ab88208 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { useRouter } from "vue-router/composables";
 import Popper from "components/Popper/Popper.vue";
 
+const router = useRouter();
+
 interface Option {
     name: string;
     value: string;
@@ -15,9 +18,10 @@ export interface Props {
     progressPercentage?: number;
     progressStatus?: string;
     options?: Option[];
+    to?: string;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
     icon: "question",
     isActive: false,
     tooltip: null,
@@ -26,6 +30,13 @@ withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
     (e: "click"): void;
 }>();
+
+function onClick(): void {
+    if (props.to !== undefined) {
+        router.push(props.to);
+    }
+    emit("click");
+}
 </script>
 
 <template>
@@ -37,7 +48,7 @@ const emit = defineEmits<{
                     class="position-relative mb-1"
                     :class="{ 'nav-item-active': isActive }"
                     :aria-label="title | l"
-                    @click="emit('click')">
+                    @click="onClick">
                     <span v-if="!!progressStatus" class="progress">
                         <div
                             class="progress-bar notransition"

From 778f66e2379eb2a665df1181b33fa6622aad7df4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 10 Apr 2023 13:43:04 +0300
Subject: [PATCH 48/57] Add drag icon to flex panel

---
 client/src/components/Panels/FlexPanel.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 7b6d8c814a47..0f0f84d84145 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -2,14 +2,16 @@
 import { ref } from "vue";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { faChevronLeft, faChevronRight, faGripLinesVertical } from "@fortawesome/free-solid-svg-icons";
 
 library.add({
     faChevronLeft,
     faChevronRight,
+    faGripLinesVertical,
 });
 
 const show = ref(true);
+const dragging = ref(false);
 
 function toggle() {
     show.value = !show.value;
@@ -22,8 +24,9 @@ function toggle() {
             <slot v-if="show" />
             <div v-else class="flex-fill" />
             <div class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }" @click="toggle">
+                <font-awesome-icon v-if="show" icon="grip-lines-vertical" class="flex-panel-grab" />
                 <div class="flex-fill" />
-                <font-awesome-icon v-if="show" class="align-self-end" icon="chevron-right" />
+                <font-awesome-icon v-if="show" icon="chevron-right" />
                 <font-awesome-icon v-else icon="chevron-left" />
             </div>
         </div>
@@ -32,6 +35,9 @@ function toggle() {
 
 <style>
 @import "theme/blue.scss";
+.flex-panel-grab {
+    cursor: grab;
+}
 .flex-panel-column {
     width: 18rem;
 }

From 7f61d93b0befb867ce62e127dd5d343a7c19cd06 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 10 Apr 2023 15:27:33 +0300
Subject: [PATCH 49/57] Allow drag resizing of the new side panel

---
 client/src/components/Panels/FlexPanel.vue | 45 ++++++++++++++++------
 1 file changed, 34 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 0f0f84d84145..f8f647cf132a 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -1,8 +1,9 @@
 <script setup>
-import { ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faChevronLeft, faChevronRight, faGripLinesVertical } from "@fortawesome/free-solid-svg-icons";
+import { useDraggable } from "@vueuse/core";
 
 library.add({
     faChevronLeft,
@@ -10,8 +11,24 @@ library.add({
     faGripLinesVertical,
 });
 
+const draggable = ref();
+const rangeWidth = [200, 300, 600];
+const panelWidth = ref(rangeWidth[1]);
 const show = ref(true);
-const dragging = ref(false);
+
+const { position, isDragging } = useDraggable(draggable, {
+    preventDefault: true,
+    exact: true,
+});
+
+watch(position, () => {
+    const newWidth = window.innerWidth - position.value.x;
+    panelWidth.value = Math.max(rangeWidth[0], Math.min(rangeWidth[2], newWidth));
+});
+
+const style = computed(() => {
+    return show.value ? { width: `${panelWidth.value}px` } : null;
+});
 
 function toggle() {
     show.value = !show.value;
@@ -20,14 +37,21 @@ function toggle() {
 
 <template>
     <div class="d-flex">
-        <div class="d-flex flex-column" :class="{ 'flex-panel-column': show }">
+        <div class="d-flex flex-column" :style="style">
             <slot v-if="show" />
             <div v-else class="flex-fill" />
-            <div class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }" @click="toggle">
-                <font-awesome-icon v-if="show" icon="grip-lines-vertical" class="flex-panel-grab" />
+            <div class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }">
+                <font-awesome-icon
+                    v-if="show"
+                    ref="draggable"
+                    icon="grip-lines-vertical"
+                    :class="{
+                        'cursor-grab': !isDragging,
+                        'cursor-grabbing': isDragging,
+                    }" />
                 <div class="flex-fill" />
-                <font-awesome-icon v-if="show" icon="chevron-right" />
-                <font-awesome-icon v-else icon="chevron-left" />
+                <font-awesome-icon v-if="show" class="cursor-pointer" icon="chevron-right" @click="toggle" />
+                <font-awesome-icon v-else class="cursor-pointer" icon="chevron-left" @click="toggle" />
             </div>
         </div>
     </div>
@@ -35,15 +59,14 @@ function toggle() {
 
 <style>
 @import "theme/blue.scss";
-.flex-panel-grab {
+.cursor-grab {
     cursor: grab;
 }
-.flex-panel-column {
-    width: 18rem;
+.cursor-grabbing {
+    cursor: grabbing;
 }
 .flex-panel-footer {
     background: $panel-footer-bg-color;
-    cursor: pointer;
 }
 .flex-panel-border {
     border: $border-default;

From 1d33883eb6b83b8edbb58c39e22f971790a03fbc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 10 Apr 2023 16:40:11 +0300
Subject: [PATCH 50/57] Increase interaction area in flex panel footer for
 dragging and collapse options

---
 client/src/components/Panels/FlexPanel.vue | 30 ++++++++++++++--------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index f8f647cf132a..3387d363978c 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -41,17 +41,22 @@ function toggle() {
             <slot v-if="show" />
             <div v-else class="flex-fill" />
             <div class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }">
-                <font-awesome-icon
-                    v-if="show"
-                    ref="draggable"
-                    icon="grip-lines-vertical"
-                    :class="{
-                        'cursor-grab': !isDragging,
-                        'cursor-grabbing': isDragging,
-                    }" />
+                <div v-if="show">
+                    <font-awesome-icon icon="grip-lines-vertical" />
+                    <div
+                        ref="draggable"
+                        class="interaction-area"
+                        :class="{
+                            'cursor-grab': !isDragging,
+                            'cursor-grabbing': isDragging,
+                        }" />
+                </div>
                 <div class="flex-fill" />
-                <font-awesome-icon v-if="show" class="cursor-pointer" icon="chevron-right" @click="toggle" />
-                <font-awesome-icon v-else class="cursor-pointer" icon="chevron-left" @click="toggle" />
+                <div>
+                    <font-awesome-icon v-if="show" class="cursor-pointer increase-area" icon="chevron-right" />
+                    <font-awesome-icon v-else class="cursor-pointer increase-area" icon="chevron-left" />
+                    <div class="interaction-area" @click="toggle" />
+                </div>
             </div>
         </div>
     </div>
@@ -59,6 +64,11 @@ function toggle() {
 
 <style>
 @import "theme/blue.scss";
+.interaction-area {
+    margin: -1.5rem;
+    padding: 1.5rem;
+    position: absolute;
+}
 .cursor-grab {
     cursor: grab;
 }

From ece4cad11aaf77be2acd91dcde48f9681e408359 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 10 Apr 2023 17:04:48 +0300
Subject: [PATCH 51/57] Use flex panel for published pages, remove legacy panel
 classes

---
 client/src/components/Common/Published.vue | 51 ++++++++++------------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/client/src/components/Common/Published.vue b/client/src/components/Common/Published.vue
index c0d9d3d452a0..c17e20dd7d4d 100644
--- a/client/src/components/Common/Published.vue
+++ b/client/src/components/Common/Published.vue
@@ -1,42 +1,39 @@
 <template>
-    <div id="columns">
-        <div id="center" class="center-style">
-            <div class="center-container">
-                <div class="center-panel" style="display: block">
-                    <slot />
-                </div>
-            </div>
+    <div id="columns" class="d-flex">
+        <div id="center" class="m-3 w-100 overflow-auto">
+            <slot />
         </div>
-        <div id="right" class="right-style">
-            <div class="m-3">
-                <div v-if="modelTitle">
-                    <h1 class="h-sm">About this {{ modelTitle }}</h1>
-                    <h2 class="h-md">{{ item.title || item.name }}</h2>
-                    <img class="float-right" :src="gravatarSource" alt="user avatar" />
-                    <StatelessTags v-if="item.tags" class="tags mt-2" :value="item.tags" :disabled="true" />
-                    <br />
-                    <h2 class="h-sm">Author</h2>
-                    <div>{{ owner }}</div>
-                    <hr />
-                    <h2 class="h-sm">Related Pages</h2>
-                    <div>
-                        <router-link :to="urlAll">All published {{ plural }}.</router-link>
-                    </div>
-                    <div>
-                        <router-link :to="publishedByUser"> Published {{ plural }} by {{ owner }}. </router-link>
-                    </div>
+        <FlexPanel side="right">
+            <div v-if="modelTitle" class="m-3">
+                <h1 class="h-sm">About this {{ modelTitle }}</h1>
+                <h2 class="h-md">{{ item.title || item.name }}</h2>
+                <img :src="gravatarSource" alt="user avatar" />
+                <StatelessTags v-if="item.tags" class="tags mt-2" :value="item.tags" :disabled="true" />
+                <br />
+                <h2 class="h-sm">Author</h2>
+                <div>{{ owner }}</div>
+                <hr />
+                <h2 class="h-sm">Related Pages</h2>
+                <div>
+                    <router-link :to="urlAll">All published {{ plural }}.</router-link>
+                </div>
+                <div>
+                    <router-link :to="publishedByUser"> Published {{ plural }} by {{ owner }}. </router-link>
                 </div>
-                <LoadingSpan v-else message="Loading item details" />
             </div>
-        </div>
+            <LoadingSpan v-else message="Loading item details" />
+            <div class="flex-fill" />
+        </FlexPanel>
     </div>
 </template>
 
 <script>
 import { StatelessTags } from "components/Tags";
 import LoadingSpan from "components/LoadingSpan";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
 export default {
     components: {
+        FlexPanel,
         LoadingSpan,
         StatelessTags,
     },

From 9e0a87b7122edcde1b16992d731f1112766ca191 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 12 Apr 2023 09:10:52 +0300
Subject: [PATCH 52/57] Remove dropdown for bookmarked workflows, will instead
 open a sidepanel in a follow-up

---
 .../components/ActivityBar/ActivityBar.vue    | 21 ++++----
 .../ActivityBar/Items/WorkflowItem.vue        | 51 -------------------
 client/src/components/Panels/FlexPanel.vue    | 30 ++++++++++-
 3 files changed, 40 insertions(+), 62 deletions(-)
 delete mode 100644 client/src/components/ActivityBar/Items/WorkflowItem.vue

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 3974c59148ec..6de726da146f 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -3,9 +3,9 @@ import { getGalaxyInstance } from "app";
 import { useUserStore } from "@/stores/userStore";
 import { computed } from "vue";
 import UploadItem from "./Items/UploadItem.vue";
-import WorkflowItem from "./Items/WorkflowItem.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
 import ActivityItem from "./ActivityItem";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
 
 const userStore = useUserStore();
 
@@ -34,7 +34,12 @@ function onToggleSidebar(toggle) {
                     tooltip="Search and run tools"
                     :is-active="sidebarIsActive('search')"
                     @click="onToggleSidebar('search')" />
-                <workflow-item :workflows="workflows" />
+                <ActivityItem
+                    id="activity-workflow"
+                    title="Workflow"
+                    icon="sitemap"
+                    tooltip="Chain tools into workflows"
+                    to="/workflows/list" />
                 <ActivityItem
                     id="activity-visualization"
                     icon="chart-bar"
@@ -46,24 +51,20 @@ function onToggleSidebar(toggle) {
                 <ActivityItem
                     id="activity-settings"
                     icon="cog"
-                    title="Configure"
+                    title="Settings"
                     tooltip="Edit preferences"
                     to="/user" />
             </b-nav>
         </div>
-        <div v-show="sidebarIsActive('search')" key="search">
-            <ToolBox class="left-column" />
-        </div>
+        <FlexPanel v-if="sidebarIsActive('search')" key="search" side="left">
+            <ToolBox />
+        </FlexPanel>
     </div>
 </template>
 
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
-.left-column {
-    width: 15rem;
-}
-
 .activity-bar {
     background: $panel-bg-color;
     width: 4rem;
diff --git a/client/src/components/ActivityBar/Items/WorkflowItem.vue b/client/src/components/ActivityBar/Items/WorkflowItem.vue
deleted file mode 100644
index 67cb962b634c..000000000000
--- a/client/src/components/ActivityBar/Items/WorkflowItem.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import { useRouter } from "vue-router/composables";
-import ActivityItem from "components/ActivityBar/ActivityItem.vue";
-
-interface Workflow {
-    id: string;
-    name: string;
-}
-
-export interface Props {
-    workflows: Workflow[];
-}
-
-const props = withDefaults(defineProps<Props>(), {});
-const router = useRouter();
-
-const activityOptions = computed(() => {
-    return [
-        {
-            name: "All workflows",
-            value: `/workflows/list`,
-        },
-        ...props.workflows.map((workflow) => {
-            return {
-                name: workflow.name,
-                value: `/workflows/run?id=${workflow.id}`,
-            };
-        }),
-    ];
-});
-
-const hasWorkflows = computed(() => {
-    return props.workflows && props.workflows.length > 0;
-});
-
-function showWorkflowList(): void {
-    router.push("/workflows/list");
-}
-</script>
-
-<template>
-    <ActivityItem
-        v-if="hasWorkflows"
-        id="activity-workflow"
-        title="Workflow"
-        tooltip="Select a Workflow:"
-        icon="sitemap"
-        :options="activityOptions"
-        @click="showWorkflowList" />
-</template>
diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 3387d363978c..13c14ac18249 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -16,6 +16,13 @@ const rangeWidth = [200, 300, 600];
 const panelWidth = ref(rangeWidth[1]);
 const show = ref(true);
 
+const props = defineProps({
+    side: {
+        type: String,
+        default: "right",
+    },
+});
+
 const { position, isDragging } = useDraggable(draggable, {
     preventDefault: true,
     exact: true,
@@ -40,7 +47,10 @@ function toggle() {
         <div class="d-flex flex-column" :style="style">
             <slot v-if="show" />
             <div v-else class="flex-fill" />
-            <div class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }">
+            <div
+                v-if="side === 'right'"
+                class="flex-panel-footer d-flex px-2 p-1"
+                :class="{ 'flex-panel-border': !show }">
                 <div v-if="show">
                     <font-awesome-icon icon="grip-lines-vertical" />
                     <div
@@ -58,6 +68,24 @@ function toggle() {
                     <div class="interaction-area" @click="toggle" />
                 </div>
             </div>
+            <div v-else class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }">
+                <div>
+                    <font-awesome-icon v-if="show" class="cursor-pointer increase-area" icon="chevron-left" />
+                    <font-awesome-icon v-else class="cursor-pointer increase-area" icon="chevron-right" />
+                    <div class="interaction-area" @click="toggle" />
+                </div>
+                <div class="flex-fill" />
+                <div v-if="show">
+                    <font-awesome-icon icon="grip-lines-vertical" />
+                    <div
+                        ref="draggable"
+                        class="interaction-area"
+                        :class="{
+                            'cursor-grab': !isDragging,
+                            'cursor-grabbing': isDragging,
+                        }" />
+                </div>
+            </div>
         </div>
     </div>
 </template>

From 5b7877f561aeb3c374af22ab529dd1ac127e777f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 12 Apr 2023 09:13:42 +0300
Subject: [PATCH 53/57] Re-add legacy view

---
 .../components/ActivityBar/ActivityBar.vue    | 16 ++--
 client/src/components/Panels/FlexPanel.vue    | 30 +-------
 client/src/components/Panels/ToolBox.vue      | 33 ++++++++
 client/src/components/Upload/UploadButton.vue | 76 +++++++++++++++++++
 .../src/entry/analysis/modules/Analysis.vue   | 20 ++++-
 client/src/style/scss/upload.scss             | 32 +++++++-
 .../selenium/test_workflow_editor.py          | 12 ++-
 7 files changed, 172 insertions(+), 47 deletions(-)
 create mode 100644 client/src/components/Upload/UploadButton.vue

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 6de726da146f..2df107d88500 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -1,19 +1,11 @@
 <script setup>
-import { getGalaxyInstance } from "app";
 import { useUserStore } from "@/stores/userStore";
-import { computed } from "vue";
 import UploadItem from "./Items/UploadItem.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
 import ActivityItem from "./ActivityItem";
-import FlexPanel from "@/components/Panels/FlexPanel.vue";
 
 const userStore = useUserStore();
 
-const workflows = computed(() => {
-    const Galaxy = getGalaxyInstance();
-    return Galaxy.config.stored_workflow_menu_entries;
-});
-
 function sidebarIsActive(menuKey) {
     return userStore.toggledSideBar === menuKey;
 }
@@ -56,15 +48,19 @@ function onToggleSidebar(toggle) {
                     to="/user" />
             </b-nav>
         </div>
-        <FlexPanel v-if="sidebarIsActive('search')" key="search" side="left">
+        <div v-if="sidebarIsActive('search')" key="search" class="left-column">
             <ToolBox />
-        </FlexPanel>
+        </div>
     </div>
 </template>
 
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
+.left-column {
+    width: 15rem;
+}
+
 .activity-bar {
     background: $panel-bg-color;
     width: 4rem;
diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 13c14ac18249..3387d363978c 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -16,13 +16,6 @@ const rangeWidth = [200, 300, 600];
 const panelWidth = ref(rangeWidth[1]);
 const show = ref(true);
 
-const props = defineProps({
-    side: {
-        type: String,
-        default: "right",
-    },
-});
-
 const { position, isDragging } = useDraggable(draggable, {
     preventDefault: true,
     exact: true,
@@ -47,10 +40,7 @@ function toggle() {
         <div class="d-flex flex-column" :style="style">
             <slot v-if="show" />
             <div v-else class="flex-fill" />
-            <div
-                v-if="side === 'right'"
-                class="flex-panel-footer d-flex px-2 p-1"
-                :class="{ 'flex-panel-border': !show }">
+            <div class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }">
                 <div v-if="show">
                     <font-awesome-icon icon="grip-lines-vertical" />
                     <div
@@ -68,24 +58,6 @@ function toggle() {
                     <div class="interaction-area" @click="toggle" />
                 </div>
             </div>
-            <div v-else class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }">
-                <div>
-                    <font-awesome-icon v-if="show" class="cursor-pointer increase-area" icon="chevron-left" />
-                    <font-awesome-icon v-else class="cursor-pointer increase-area" icon="chevron-right" />
-                    <div class="interaction-area" @click="toggle" />
-                </div>
-                <div class="flex-fill" />
-                <div v-if="show">
-                    <font-awesome-icon icon="grip-lines-vertical" />
-                    <div
-                        ref="draggable"
-                        class="interaction-area"
-                        :class="{
-                            'cursor-grab': !isDragging,
-                            'cursor-grabbing': isDragging,
-                        }" />
-                </div>
-            </div>
         </div>
     </div>
 </template>
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index adadd7d7d5c3..8ecdecb27964 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -30,6 +30,7 @@
                 @onQuery="onQuery"
                 @onResults="onResults" />
             <section v-if="!showAdvanced">
+                <upload-button />
                 <div v-if="hasResults" class="pb-2">
                     <b-button size="sm" class="w-100" @click="onToggle">
                         <span :class="buttonIcon" />
@@ -54,6 +55,13 @@
                         :query-filter="queryFilter"
                         @onClick="onOpen" />
                 </div>
+                <tool-section :category="{ text: 'Workflows' }" />
+                <div id="internal-workflows" class="toolSectionBody">
+                    <div class="toolSectionBg" />
+                    <div v-for="wf in workflows" :key="wf.id" class="toolTitle">
+                        <a class="title-link" :href="wf.href">{{ wf.title }}</a>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -62,15 +70,18 @@
 <script>
 import ToolSection from "./Common/ToolSection";
 import ToolSearch from "./Common/ToolSearch";
+import UploadButton from "components/Upload/UploadButton";
 import { useGlobalUploadModal } from "composables/globalUploadModal";
 import FavoritesButton from "./Buttons/FavoritesButton";
 import PanelViewButton from "./Buttons/PanelViewButton";
 import { filterToolSections, filterTools, hasResults, hideToolsSection } from "./utilities";
 import { getGalaxyInstance } from "app";
+import { getAppRoot } from "onload";
 import _l from "utils/localization";
 
 export default {
     components: {
+        UploadButton,
         FavoritesButton,
         PanelViewButton,
         ToolSection,
@@ -125,6 +136,28 @@ export default {
             const Galaxy = getGalaxyInstance();
             return !!(Galaxy.user && Galaxy.user.id);
         },
+        workflows() {
+            const Galaxy = getGalaxyInstance();
+            const storedWorkflowMenuEntries = Galaxy && Galaxy.config.stored_workflow_menu_entries;
+            if (storedWorkflowMenuEntries) {
+                return [
+                    {
+                        title: _l("All workflows"),
+                        href: `${getAppRoot()}workflows/list`,
+                        id: "list",
+                    },
+                    ...storedWorkflowMenuEntries.map((menuEntry) => {
+                        return {
+                            id: menuEntry.id,
+                            title: menuEntry.name,
+                            href: `${getAppRoot()}workflows/run?id=${menuEntry.id}`,
+                        };
+                    }),
+                ];
+            } else {
+                return [];
+            }
+        },
         hasResults() {
             return this.results && this.results.length > 0;
         },
diff --git a/client/src/components/Upload/UploadButton.vue b/client/src/components/Upload/UploadButton.vue
new file mode 100644
index 000000000000..74b23bd5f2f0
--- /dev/null
+++ b/client/src/components/Upload/UploadButton.vue
@@ -0,0 +1,76 @@
+<template>
+    <b-button
+        id="activity-upload"
+        v-b-tooltip.hover.bottom
+        :aria-label="title | localize"
+        :title="title | localize"
+        class="upload-button"
+        size="sm"
+        @click="showUploadDialog">
+        <div class="progress">
+            <div
+                class="progress-bar progress-bar-notransition"
+                :class="`progress-bar-${status}`"
+                :style="{
+                    width: `${percentage}%`,
+                }" />
+        </div>
+        <span class="position-relative">
+            <font-awesome-icon icon="upload" class="mr-1" />
+            <b v-localize>Upload Data</b>
+        </span>
+    </b-button>
+</template>
+
+<script>
+import Query from "utils/query-string-parsing";
+import { VBTooltip } from "bootstrap-vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faUpload } from "@fortawesome/free-solid-svg-icons";
+import { useGlobalUploadModal } from "composables/globalUploadModal";
+
+library.add(faUpload);
+
+export default {
+    components: { FontAwesomeIcon },
+    directives: {
+        "v-b-tooltip": VBTooltip,
+    },
+    props: {
+        title: { type: String, default: "Download from URL or upload files from disk" },
+    },
+    setup() {
+        const { openGlobalUploadModal } = useGlobalUploadModal();
+        return { openGlobalUploadModal };
+    },
+    data() {
+        return {
+            status: "",
+            percentage: 0,
+        };
+    },
+    mounted() {
+        this.eventHub.$on("upload:status", this.setStatus);
+        this.eventHub.$on("upload:percentage", this.setPercentage);
+        if (Query.get("tool_id") == "upload1") {
+            this.showUploadDialog();
+        }
+    },
+    beforeDestroy() {
+        this.eventHub.$off("upload:status", this.setStatus);
+        this.eventHub.$off("upload:percentage", this.setPercentage);
+    },
+    methods: {
+        showUploadDialog() {
+            this.openGlobalUploadModal();
+        },
+        setStatus(val) {
+            this.status = val;
+        },
+        setPercentage(val) {
+            this.percentage = Math.round(val);
+        },
+    },
+};
+</script>
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 8a4754a0609b..a2b19a0fd5d8 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -1,15 +1,18 @@
 <script setup>
-import CenterFrame from "./CenterFrame.vue";
 import HistoryIndex from "@/components/History/Index.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
+import ToolBox from "@/components/Panels/ProviderAwareToolBox";
+import SidePanel from "@/components/Panels/SidePanel";
 import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
+import CenterFrame from "./CenterFrame.vue";
 import { useRoute, useRouter } from "vue-router/composables";
 import { computed, ref, onMounted, onUnmounted } from "vue";
 
 const route = useRoute();
 const router = useRouter();
 const showCenter = ref(false);
+const showActivityBar = ref(false);
 
 // computed
 const showPanels = computed(() => {
@@ -40,7 +43,7 @@ onUnmounted(() => {
 });
 </script>
 <template>
-    <div id="columns" class="d-flex">
+    <div v-if="showActivityBar" id="columns" class="d-flex">
         <ActivityBar v-if="showPanels" />
         <div id="center" class="overflow-auto p-3 w-100">
             <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
@@ -51,4 +54,17 @@ onUnmounted(() => {
         </FlexPanel>
         <DragAndDropModal />
     </div>
+    <div v-else id="columns">
+        <SidePanel v-if="showPanels" side="left" :current-panel="ToolBox" :current-panel-properties="{}" />
+        <div id="center" class="center-style">
+            <div class="center-container">
+                <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
+                <div v-show="!showCenter" class="center-panel" style="display: block">
+                    <router-view :key="$route.fullPath" class="h-100" />
+                </div>
+            </div>
+        </div>
+        <SidePanel v-if="showPanels" side="right" :current-panel="HistoryIndex" :current-panel-properties="{}" />
+        <DragAndDropModal />
+    </div>
 </template>
diff --git a/client/src/style/scss/upload.scss b/client/src/style/scss/upload.scss
index 1272037a4396..cac5c6804481 100644
--- a/client/src/style/scss/upload.scss
+++ b/client/src/style/scss/upload.scss
@@ -8,11 +8,35 @@
 }
 
 .upload-button {
-    //@extend .w-100;
-    @extend .mb-1;
-    //@extend .position-relative;
-    border-radius: $border-radius-extralarge;
+    @extend .w-100;
+    @extend .mb-2;
+    @extend .position-relative;
+    border-radius: $border-radius;
     cursor: pointer;
+    .progress {
+        @extend .position-absolute;
+        @extend .w-100;
+        @extend .h-100;
+        top: 0;
+        left: 0;
+        background-color: transparent;
+        .progress-bar-danger {
+            background: $state-danger-bg;
+        }
+        .progress-bar-success {
+            background: $state-success-bg;
+        }
+        .progress-bar-info {
+            background: $state-running-bg;
+        }
+        .progress-bar-notransition {
+            -webkit-transition: none;
+            -moz-transition: none;
+            -ms-transition: none;
+            -o-transition: none;
+            transition: none;
+        }
+    }
 }
 
 .upload-input {
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index e04cec09b306..332ff1302dde 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -878,8 +878,16 @@ def assert_workflow_bookmarked_status(target_status):
         self.wait_for_selector_absent_or_hidden(self.modal_body_selector())
         self.components.masthead.workflow.wait_for_and_click()
         self.components.workflows.bookmark_link.wait_for_and_click()
-        self.hover_over(self.components.activity.workflow.wait_for_visible())
-        self.components.activity.workflow_bookmark(name=new_workflow_name).wait_for_visible()
+
+        self.components.tool_panel.search.wait_for_and_send_keys(new_workflow_name)
+        self.sleep_for(self.wait_types.UX_RENDER)
+        self.components.workflows.bookmark_link.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)
+        assert_workflow_bookmarked_status(True)
 
     def tab_to(self, accessible_name, direction="forward"):
         for _ in range(100):

From f8e8658ac61bd4367f4c42e91f98cefea851fa0f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 12 Apr 2023 15:49:05 +0300
Subject: [PATCH 54/57] Add switch to show and hide activity bar

---
 client/src/entry/analysis/App.vue              |  7 +++++--
 client/src/entry/analysis/menu.js              | 10 +++++++++-
 client/src/entry/analysis/modules/Analysis.vue |  8 +++++++-
 client/src/stores/userStore.ts                 |  7 ++++++-
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/client/src/entry/analysis/App.vue b/client/src/entry/analysis/App.vue
index 1532a026ae9f..7e12581d7a3f 100644
--- a/client/src/entry/analysis/App.vue
+++ b/client/src/entry/analysis/App.vue
@@ -58,6 +58,7 @@ import { setToastComponentRef } from "composables/toast";
 import { setConfirmDialogComponentRef } from "composables/confirmDialog";
 import { setGlobalUploadModal } from "composables/globalUploadModal";
 import { useCurrentTheme } from "@/composables/user";
+import { useUserStore } from "@/stores/userStore";
 
 export default {
     components: {
@@ -79,7 +80,9 @@ export default {
 
         const { currentTheme } = useCurrentTheme();
 
-        return { toastRef, confirmDialogRef, uploadModal, currentTheme };
+        const userStore = useUserStore();
+
+        return { toastRef, confirmDialogRef, uploadModal, userStore, currentTheme };
     },
     data() {
         return {
@@ -91,7 +94,7 @@ export default {
     },
     computed: {
         tabs() {
-            return fetchMenu(this.config);
+            return fetchMenu(this.config, this.userStore);
         },
         showMasthead() {
             const masthead = this.$route.query.hide_masthead;
diff --git a/client/src/entry/analysis/menu.js b/client/src/entry/analysis/menu.js
index ddbfcb3f0e65..b1b5d998ef6d 100644
--- a/client/src/entry/analysis/menu.js
+++ b/client/src/entry/analysis/menu.js
@@ -2,7 +2,7 @@ import { getGalaxyInstance } from "app";
 import _l from "utils/localization";
 import { userLogout } from "utils/logout";
 
-export function fetchMenu(options = {}) {
+export function fetchMenu(options = {}, userStore) {
     const Galaxy = getGalaxyInstance();
     const menu = [];
     //
@@ -246,6 +246,14 @@ export function fetchMenu(options = {}) {
                 url: "/interactivetool_entry_points/list",
             });
         }
+
+        // beta switch for activity bar
+        userTab.menu.push({
+            title: _l("Show/Hide Activity Bar"),
+            onclick: () => {
+                userStore.toggleActivityBar();
+            },
+        });
     }
     menu.push(userTab);
     return menu;
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index a2b19a0fd5d8..9f128d047c5b 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -8,11 +8,13 @@ import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import CenterFrame from "./CenterFrame.vue";
 import { useRoute, useRouter } from "vue-router/composables";
 import { computed, ref, onMounted, onUnmounted } from "vue";
+import { useUserStore } from "@/stores/userStore";
 
 const route = useRoute();
 const router = useRouter();
+const userStore = useUserStore();
+
 const showCenter = ref(false);
-const showActivityBar = ref(false);
 
 // computed
 const showPanels = computed(() => {
@@ -23,6 +25,10 @@ const showPanels = computed(() => {
     return true;
 });
 
+const showActivityBar = computed(() => {
+    return userStore.toggledActivityBar;
+});
+
 // methods
 function hideCenter() {
     showCenter.value = false;
diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
index b45640d8c860..504ce204d373 100644
--- a/client/src/stores/userStore.ts
+++ b/client/src/stores/userStore.ts
@@ -1,19 +1,24 @@
 import { defineStore } from "pinia";
 
 interface State {
+    toggledActivityBar: boolean;
     toggledSideBar: string;
 }
 
 export const useUserStore = defineStore("userStore", {
     state: (): State => ({
+        toggledActivityBar: false,
         toggledSideBar: "search",
     }),
     actions: {
+        toggleActivityBar(this: State) {
+            this.toggledActivityBar = !this.toggledActivityBar;
+        },
         toggleSideBar(this: State, currentOpen: string) {
             this.toggledSideBar = this.toggledSideBar === currentOpen ? "" : currentOpen;
         },
     },
     persist: {
-        paths: ["toggledSideBar"],
+        paths: ["toggledActivityBar", "toggledSideBar"],
     },
 });

From cf3e69fceb9517e7676b36bf5fa7ab433d79ed88 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 12 Apr 2023 20:39:42 +0300
Subject: [PATCH 55/57] Fix selenium tests

---
 client/src/utils/navigation/navigation.yml       | 9 +--------
 config/plugins/tours/core.galaxy_ui.yaml         | 4 ++--
 lib/galaxy_test/selenium/test_workflow_editor.py | 1 -
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 180a59a77400..93776bf1cacb 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -29,13 +29,6 @@ _:  # global stuff
       infolarge: '.infomessagelarge'
       require_login: 'a.require-login-link'
 
-activity:
-  selectors:
-    workflow: '#activity-workflow > a'
-    workflow_bookmark:
-      type: xpath
-      selector: '//a[contains(text(), ${name})]'
-
 masthead:
 
   selectors:
@@ -958,7 +951,7 @@ upload:
     paste_content: '#upload-row-${n} .upload-text-content'
     settings: '.upload-settings-table'
     setting_deferred: '.upload-deferred'
-    start: '#activity-upload > a'
+    start: '#activity-upload'
     start_uploading: '.upload-start'
     close: '.upload-close'
     rule_source_content: 'textarea.upload-rule-source-content'
diff --git a/config/plugins/tours/core.galaxy_ui.yaml b/config/plugins/tours/core.galaxy_ui.yaml
index 5be99f60e599..b05bf5279978 100644
--- a/config/plugins/tours/core.galaxy_ui.yaml
+++ b/config/plugins/tours/core.galaxy_ui.yaml
@@ -49,7 +49,7 @@ steps:
       postclick: true
 
     - title: "Tools"
-      element: ".left-column"
+      element: "#left"
       intro: "This is your ToolBox. All tools available in your Galaxy instance you can find here."
 
     - title: "Tool categories"
@@ -118,7 +118,7 @@ steps:
       intro: "By clicking the reload button, you can re-run your tool again (e.g. with different parameters or on another dataset)."
 
     - title: "Panel collapse"
-      element: "#activity-tools > a"
+      element: "#left > div.unified-panel-footer > div.panel-collapse.left"
       intro: "To extend the view for your main Galaxy page in the middle, you can collapse the tool panel on the left hand side. Clicking the panel arrow on the right hand side, collapses the history."
       postclick: true
 
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index 332ff1302dde..ab6c79333a78 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -877,7 +877,6 @@ def assert_workflow_bookmarked_status(target_status):
         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.components.workflows.bookmark_link.wait_for_and_click()
 
         self.components.tool_panel.search.wait_for_and_send_keys(new_workflow_name)
         self.sleep_for(self.wait_types.UX_RENDER)

From b30b28194e715309da3fb7189baba845be75ea2f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 15 Apr 2023 21:31:59 +0300
Subject: [PATCH 56/57] Fix description in tour, specify correct target element

---
 config/plugins/tours/core.galaxy_ui.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/plugins/tours/core.galaxy_ui.yaml b/config/plugins/tours/core.galaxy_ui.yaml
index b05bf5279978..0169c5cd4fe2 100644
--- a/config/plugins/tours/core.galaxy_ui.yaml
+++ b/config/plugins/tours/core.galaxy_ui.yaml
@@ -14,7 +14,7 @@ steps:
       content: "This short tour will guide you through Galaxy's user interface. You can leave the tour at any time by pressing escape."
 
     # 'element' is the JQuery Selector (http://api.jquery.com/category/selectors/) of the element you want to describe.
-    # We could highlight the Upload button using `#activity-upload > a` or, alternatively specify a `component` using the navigation interface.
+    # We could highlight the Upload button using `#activity-upload` or, alternatively specify a `component` using the navigation interface.
     - title: "Upload your data"
       component: upload.start
       intro: "Galaxy supports many ways to get in your data. Use this button to upload your data."

From 508bc4b4c767575ef99d3962255f8bdde6ccd3a6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 15 Apr 2023 21:49:07 +0300
Subject: [PATCH 57/57] Add defaults to activity item props to avoid warnings

---
 client/src/components/ActivityBar/ActivityItem.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index ef0e7ab88208..940ada392c4f 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -24,6 +24,10 @@ export interface Props {
 const props = withDefaults(defineProps<Props>(), {
     icon: "question",
     isActive: false,
+    options: null,
+    progressPercentage: 0,
+    progressStatus: null,
+    to: null,
     tooltip: null,
 });
 
@@ -32,7 +36,7 @@ const emit = defineEmits<{
 }>();
 
 function onClick(): void {
-    if (props.to !== undefined) {
+    if (props.to) {
         router.push(props.to);
     }
     emit("click");
@@ -49,7 +53,7 @@ function onClick(): void {
                     :class="{ 'nav-item-active': isActive }"
                     :aria-label="title | l"
                     @click="onClick">
-                    <span v-if="!!progressStatus" class="progress">
+                    <span v-if="progressStatus" class="progress">
                         <div
                             class="progress-bar notransition"
                             :class="{