From da8e1e1579eb17a26e8c0bb0c61680ecc679c9e8 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 7 Mar 2024 11:59:43 -0600
Subject: [PATCH 1/6] remove `UploadButton` from workflow `ToolBox`

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

diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 7296116bc834..29698f105af4 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -253,7 +253,7 @@ function setButtonText() {
                 @onQuery="(q) => (query = q)"
                 @onResults="onResults" />
             <section v-if="!propShowAdvanced">
-                <UploadButton />
+                <UploadButton v-if="!props.workflow" />
                 <div v-if="hasResults && resultPanel" class="pb-2">
                     <b-button size="sm" class="w-100" @click="onToggle">
                         <FontAwesomeIcon :icon="buttonIcon" />

From b20a52b4c62a3387ac434dcb51e7ea5b2be6559f Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 7 Mar 2024 12:00:11 -0600
Subject: [PATCH 2/6] fetch panel view in case the view string changes but
 panel isn't stored

This can happen if the user has Galaxy open on 2 windows, and they changed the panel view, it will show up on one, and would keep loading on the other since the panel isn't populated (panel string is stored in `localStorage` and panel views in the pinia store; both don't get updated simultaneously.
---
 client/src/components/Panels/ToolPanel.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
index b95fbaf2ebe1..fa7f599df5ae 100644
--- a/client/src/components/Panels/ToolPanel.vue
+++ b/client/src/components/Panels/ToolPanel.vue
@@ -34,7 +34,7 @@ const emit = defineEmits<{
 
 const arePanelsFetched = ref(false);
 const toolStore = useToolStore();
-const { currentPanelView, defaultPanelView, isPanelPopulated, loading, panelViews } = storeToRefs(toolStore);
+const { currentPanelView, defaultPanelView, isPanelPopulated, loading, panel, panelViews } = storeToRefs(toolStore);
 
 const loadingView = ref<string | undefined>(undefined);
 const query = ref("");
@@ -62,7 +62,7 @@ watch(
 watch(
     () => currentPanelView.value,
     async (newVal) => {
-        if (!newVal && arePanelsFetched.value) {
+        if ((!newVal || !panel.value[newVal]) && arePanelsFetched.value) {
             await initializeTools();
         }
     }

From 8bc5c7a88646bd3646050029504319453384fc3e Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 7 Mar 2024 12:21:38 -0600
Subject: [PATCH 3/6] convert `FavoritesButton` to composition+ts...

... as this also fixes the "could not find icon" error.
---
 .../Panels/Buttons/FavoritesButton.vue        | 114 +++++++++---------
 1 file changed, 59 insertions(+), 55 deletions(-)

diff --git a/client/src/components/Panels/Buttons/FavoritesButton.vue b/client/src/components/Panels/Buttons/FavoritesButton.vue
index 6c375eb30100..c7d285bb4253 100644
--- a/client/src/components/Panels/Buttons/FavoritesButton.vue
+++ b/client/src/components/Panels/Buttons/FavoritesButton.vue
@@ -1,5 +1,61 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faStar } from "@fortawesome/free-regular-svg-icons";
+import { faStar as faRegStar } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, ref, watch } from "vue";
+
+import { useUserStore } from "@/stores/userStore";
+
+library.add(faStar, faRegStar);
+
+interface Props {
+    query: string;
+}
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "onFavorites", filter: string): void;
+}>();
+
+const { isAnonymous } = storeToRefs(useUserStore());
+
+const FAVORITES = ["#favorites", "#favs", "#favourites"];
+const toggle = ref(false);
+
+const tooltipText = computed(() => {
+    if (isAnonymous.value) {
+        return "Log in to Favorite Tools";
+    } else {
+        if (toggle.value) {
+            return "Clear";
+        } else {
+            return "Show favorites";
+        }
+    }
+});
+
+watch(
+    () => props.query,
+    () => {
+        toggle.value = FAVORITES.includes(props.query);
+    }
+);
+
+function onFavorites() {
+    toggle.value = !toggle.value;
+    if (toggle.value) {
+        emit("onFavorites", "#favorites");
+    } else {
+        emit("onFavorites", "");
+    }
+}
+</script>
+
 <template>
-    <b-button
+    <BButton
         v-b-tooltip.hover.top.noninteractive
         class="panel-header-button-toolbox"
         size="sm"
@@ -8,58 +64,6 @@
         :disabled="isAnonymous"
         :title="tooltipText"
         @click="onFavorites">
-        <icon v-if="toggle" :icon="['fas', 'star']" />
-        <icon v-else :icon="['far', 'star']" />
-    </b-button>
+        <FontAwesomeIcon :icon="toggle ? faRegStar : faStar" />
+    </BButton>
 </template>
-
-<script>
-import { mapState } from "pinia";
-
-import { useUserStore } from "@/stores/userStore";
-
-export default {
-    name: "FavoritesButton",
-    props: {
-        query: {
-            type: String,
-            required: true,
-        },
-    },
-    data() {
-        return {
-            searchKey: "#favorites",
-            toggle: false,
-        };
-    },
-    computed: {
-        ...mapState(useUserStore, ["isAnonymous"]),
-        tooltipText() {
-            if (this.isAnonymous) {
-                return this.l("Log in to Favorite Tools");
-            } else {
-                if (this.toggle) {
-                    return this.l("Clear");
-                } else {
-                    return this.l("Show favorites");
-                }
-            }
-        },
-    },
-    watch: {
-        query() {
-            this.toggle = this.query == this.searchKey;
-        },
-    },
-    methods: {
-        onFavorites() {
-            this.toggle = !this.toggle;
-            if (this.toggle) {
-                this.$emit("onFavorites", this.searchKey);
-            } else {
-                this.$emit("onFavorites", "");
-            }
-        },
-    },
-};
-</script>

From 07deeffc0c33f701c4c520f428ba8f694e7a20b4 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 7 Mar 2024 18:14:43 -0600
Subject: [PATCH 4/6] sync tool panel `filterText` to favorited tool(s)

Fixes part 1 of https://github.com/galaxyproject/galaxy/issues/17150
---
 .../components/Panels/Common/ToolSearch.vue   | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
index 4f4e326c12ec..2b94c93a53ae 100644
--- a/client/src/components/Panels/Common/ToolSearch.vue
+++ b/client/src/components/Panels/Common/ToolSearch.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, type ComputedRef, onMounted, onUnmounted, type PropType, type Ref, ref } from "vue";
+import { storeToRefs } from "pinia";
+import { computed, type ComputedRef, onMounted, onUnmounted, type PropType, type Ref, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
-import { getGalaxyInstance } from "@/app";
 import { type Tool, type ToolSection, useToolStore } from "@/stores/toolStore";
+import { useUserStore } from "@/stores/userStore";
 import Filtering, { contains, type ValidFilter } from "@/utils/filtering";
 import _l from "@/utils/localization";
 
@@ -109,6 +110,7 @@ const validFilters: ComputedRef<Record<string, ValidFilter<string>>> = computed(
 });
 const ToolFilters: ComputedRef<Filtering<string>> = computed(() => new Filtering(validFilters.value));
 
+const { currentFavorites } = storeToRefs(useUserStore());
 const toolStore = useToolStore();
 
 const sectionNames = toolStore.sectionDatalist("default").map((option: { value: string; text: string }) => option.text);
@@ -118,8 +120,6 @@ const ontologyList = toolStore
 
 onMounted(() => {
     searchWorker.value = new Worker(new URL("../toolSearch.worker.js", import.meta.url));
-    const Galaxy = getGalaxyInstance();
-    const favoritesResults = Galaxy?.user.getFavorites().tools;
 
     searchWorker.value.onmessage = ({ data }) => {
         const { type, payload, sectioned, query, closestTerm } = data;
@@ -128,7 +128,7 @@ onMounted(() => {
         } else if (type === "clearFilterResult") {
             emit("onResults", null, null, null);
         } else if (type === "favoriteToolsResult") {
-            emit("onResults", favoritesResults, null, null);
+            emit("onResults", currentFavorites.value.tools, null, null);
         }
     };
 });
@@ -137,6 +137,15 @@ onUnmounted(() => {
     searchWorker.value?.terminate();
 });
 
+watch(
+    () => currentFavorites.value.tools,
+    () => {
+        if (FAVORITES.includes(props.query)) {
+            post({ type: "favoriteTools" });
+        }
+    }
+);
+
 function checkQuery(q: string) {
     emit("onQuery", q);
     if (q && q.length >= MIN_QUERY_LENGTH) {

From 1e0d6654bc8189d853ccff5995ffd577c18ebb50 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 7 Mar 2024 18:59:10 -0600
Subject: [PATCH 5/6] fix bug where reloading `ToolsList` would show nothing

If you reloaded `ToolsList` with no filters, instead of showing the entire toolset, it would show no results. This was because `itemsLoaded` needed to be a reactive computed value instead of a ref.
---
 client/src/components/ToolsList/ToolsList.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/src/components/ToolsList/ToolsList.vue b/client/src/components/ToolsList/ToolsList.vue
index 319f27c5809b..14277d065892 100644
--- a/client/src/components/ToolsList/ToolsList.vue
+++ b/client/src/components/ToolsList/ToolsList.vue
@@ -60,15 +60,14 @@ const filterSettings = computed(() => {
     return newFilterSettings;
 });
 
-const itemsLoaded: Ref<Tool[]> = ref([]);
-
 onMounted(async () => {
     await toolStore.fetchTools(filterSettings.value);
-    itemsLoaded.value = Object.values(toolStore.getToolsById(filterSettings.value));
 });
 
 const filterCount = computed(() => Object.keys(filterSettings.value).length);
 
+const itemsLoaded = computed<Tool[]>(() => Object.values(toolStore.getToolsById(filterSettings.value)));
+
 function scrollToTop() {
     scrollContainer.value?.scrollTo({ top: 0, behavior: "smooth" });
 }

From d57341efb8cd555822a4fc7b8776f32524f413ad Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 7 Mar 2024 20:09:50 -0600
Subject: [PATCH 6/6] change unfavorite tool api route:`{object_id}` to
 `{object_id:path}`

Tools with `/` in their id couldn't be unfavorited because the URI wouldn't be encoded
---
 client/src/components/ToolsList/ToolsListTable.vue | 2 +-
 lib/galaxy/webapps/galaxy/api/users.py             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ToolsList/ToolsListTable.vue b/client/src/components/ToolsList/ToolsListTable.vue
index 32432a74f7a9..3c972d6fdb88 100644
--- a/client/src/components/ToolsList/ToolsListTable.vue
+++ b/client/src/components/ToolsList/ToolsListTable.vue
@@ -97,7 +97,7 @@ export default {
             }
         },
         async fetchHelp(tool) {
-            await fetchData(`api/tools/${tool.id}/build`).then((response) => {
+            await fetchData(`api/tools/${encodeURIComponent(tool.id)}/build`).then((response) => {
                 const help = response.help;
                 Vue.set(tool, "_showDetails", false); // maybe not needed
                 if (help && help != "\n") {
diff --git a/lib/galaxy/webapps/galaxy/api/users.py b/lib/galaxy/webapps/galaxy/api/users.py
index 3deac727ac6d..917e4955bdaa 100644
--- a/lib/galaxy/webapps/galaxy/api/users.py
+++ b/lib/galaxy/webapps/galaxy/api/users.py
@@ -346,7 +346,7 @@ def set_beacon(
         return payload
 
     @router.delete(
-        "/api/users/{user_id}/favorites/{object_type}/{object_id}",
+        "/api/users/{user_id}/favorites/{object_type}/{object_id:path}",
         name="remove_favorite",
         summary="Remove the object from user's favorites",
     )