From bb24c236501a75cd1aabb020c8a26f8eaff098b0 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 3 May 2024 10:32:31 -0500
Subject: [PATCH] [24.0] History Multiview panel shows pinned histories on top

Fixes https://github.com/galaxyproject/galaxy/issues/18082
---
 .../src/components/History/HistoryScrollList.vue   | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
index 320fd832d70..c0ddb0d9573 100644
--- a/client/src/components/History/HistoryScrollList.vue
+++ b/client/src/components/History/HistoryScrollList.vue
@@ -148,6 +148,10 @@ const filtered = computed<HistorySummary[]>(() => {
             return -1;
         } else if (!isMultiviewPanel.value && b.id == currentHistoryId.value) {
             return 1;
+        } else if (isMultiviewPanel.value && isPinned(a.id) && !isPinned(b.id)) {
+            return -1;
+        } else if (isMultiviewPanel.value && !isPinned(a.id) && isPinned(b.id)) {
+            return 1;
         } else if (a.update_time < b.update_time) {
             return 1;
         } else {
@@ -161,16 +165,20 @@ const isMultiviewPanel = computed(() => !props.inModal && props.multiple);
 
 function isActiveItem(history: HistorySummary) {
     if (isMultiviewPanel.value) {
-        return pinnedHistories.value.some((item: PinnedHistory) => item.id == history.id);
+        return isPinned(history.id);
     } else {
         return props.selectedHistories.some((item: PinnedHistory) => item.id == history.id);
     }
 }
 
+function isPinned(historyId: string) {
+    return pinnedHistories.value.some((item: PinnedHistory) => item.id == historyId);
+}
+
 function historyClicked(history: HistorySummary) {
     emit("selectHistory", history);
     if (isMultiviewPanel.value) {
-        if (pinnedHistories.value.some((item: PinnedHistory) => item.id == history.id)) {
+        if (isPinned(history.id)) {
             historyStore.unpinHistories([history.id]);
         } else {
             openInMulti(history);
@@ -263,7 +271,7 @@ async function loadMore(noScroll = false) {
                                         <i v-if="history.id === currentHistoryId">(Current)</i>
                                     </Heading>
                                     <i
-                                        v-if="props.multiple && pinnedHistories.some((h) => h.id === history.id)"
+                                        v-if="props.multiple && isPinned(history.id)"
                                         v-b-tooltip.noninteractive.hover
                                         title="This history is currently pinned in the multi-history view">
                                         (currently pinned)