From 7db2f9f3c023f10f24f5de23b504b783f02bd20e Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Sun, 25 Apr 2021 20:18:45 +0200
Subject: [PATCH 1/2] Implement switch to history modal for beta history panel

This seems to me like the cleanest and fastest way to switch histories.
It doesn't show number of items, it doesn't have any operations to keep
this modal as simple and fast as possible.
---
 .../History/CurrentHistoryPanel.vue           |  14 ++-
 .../src/components/History/HistoriesMenu.vue  |   6 +
 .../components/History/HistorySelector.vue    | 118 ++++++++++++++++--
 lib/galaxy/managers/histories.py              |   1 +
 4 files changed, 128 insertions(+), 11 deletions(-)

diff --git a/client/src/components/History/CurrentHistoryPanel.vue b/client/src/components/History/CurrentHistoryPanel.vue
index cae311f4e9b..0adeefd884d 100644
--- a/client/src/components/History/CurrentHistoryPanel.vue
+++ b/client/src/components/History/CurrentHistoryPanel.vue
@@ -7,9 +7,11 @@
                         <HistorySelector
                             :histories="histories"
                             :current-history="currentHistory"
+                            :show-modal="showModal"
                             @update:currentHistory="handlers.setCurrentHistory"
+                            @hideModal="showModalHandler"
                         />
-                        <HistoriesMenu v-on="handlers" />
+                        <HistoriesMenu v-on="handlers" @selectHistoryModal="showModalHandler" />
                     </div>
                 </template>
             </HistoryPanel>
@@ -36,5 +38,15 @@ export default {
         HistorySelector,
         HistoriesMenu,
     },
+    data() {
+        return {
+            showModal: false,
+        };
+    },
+    methods: {
+        showModalHandler(event) {
+            this.showModal = !this.showModal;
+        },
+    },
 };
 </script>
diff --git a/client/src/components/History/HistoriesMenu.vue b/client/src/components/History/HistoriesMenu.vue
index e04f4731501..62049fcc5d9 100644
--- a/client/src/components/History/HistoriesMenu.vue
+++ b/client/src/components/History/HistoriesMenu.vue
@@ -1,5 +1,11 @@
 <template>
     <PriorityMenu :starting-height="27">
+        <PriorityMenuItem
+            key="select-new-history"
+            title="Select History"
+            icon="fa fa-folder-open"
+            @click="$emit('selectHistoryModal')"
+        />
         <PriorityMenuItem
             key="create-new-history"
             title="Create New History"
diff --git a/client/src/components/History/HistorySelector.vue b/client/src/components/History/HistorySelector.vue
index 39c39c84983..b33b5ec398b 100644
--- a/client/src/components/History/HistorySelector.vue
+++ b/client/src/components/History/HistorySelector.vue
@@ -1,21 +1,119 @@
 <template>
-    <b-dropdown text="Select history..." size="sm">
-        <b-dropdown-item
-            v-for="h in histories"
-            :key="h.id"
-            :active="currentHistory.id == h.id"
-            @click="$emit('update:currentHistory', h)"
-        >
-            {{ h.name }}
-        </b-dropdown-item>
-    </b-dropdown>
+    <div>
+        <div></div>
+        <b-modal id="select-history-modal" v-model="showModalModel" title="Switch to History" @hidden="toggleHidden">
+            <b-form-input id="filter-input" v-model="filter" type="search" placeholder="Type to Search"></b-form-input>
+            <b-table
+                id="history-table"
+                striped
+                hover
+                :fields="fields"
+                :items="historyRows"
+                :filter="filter"
+                :per-page="perPage"
+                :current-page="currentPage"
+                @filtered="onFiltered"
+                @row-clicked="switchToHistory"
+            >
+                <template v-slot:cell(tags)="row">
+                    <!-- just display tags, don't allow editing -->
+                    <stateless-tags :value="row.item.tags" :disabled="true" />
+                </template>
+                <template v-slot:cell(update_time)="data">
+                    <UtcDate :date="data.value" mode="elapsed" />
+                </template>
+            </b-table>
+            <template v-slot:modal-footer>
+                <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
+            </template>
+        </b-modal>
+    </div>
 </template>
 
 <script>
+import { StatelessTags } from "components/Tags";
+import UtcDate from "components/UtcDate";
+import Vue from "vue";
+
 export default {
+    components: {
+        StatelessTags,
+        UtcDate,
+    },
     props: {
         currentHistory: { type: Object, required: true },
         histories: { type: Array, default: () => [] },
+        showModal: { type: Boolean, default: false },
+    },
+    data() {
+        return {
+            fields: [
+                {
+                    key: "name",
+                    sortable: true,
+                },
+                {
+                    key: "tags",
+                    sortable: true,
+                },
+                {
+                    label: "Updated",
+                    key: "update_time",
+                    sortable: true,
+                },
+            ],
+            sortBy: "update_time",
+            sortDesc: true,
+            filter: null,
+            rows: [],
+            perPage: 50,
+            currentPage: 1,
+            totalRows: 1,
+            historyRows: [],
+            currentHistoryRow: {},
+            showModalModel: false,
+        };
+    },
+    watch: {
+        showModal(newval) {
+            this.showModalModel = newval;
+        },
+        histories(newval) {
+            if (!this.filter) {
+                this.totalRows = newval.length;
+            }
+            this.historyRows = newval.map((item) => {
+                if (item.id == this.currentHistory.id) {
+                    Vue.set(item, "_rowVariant", "success");
+                    this.currentHistoryRow = item;
+                }
+                return item;
+            });
+        },
+    },
+    methods: {
+        toggleHidden() {
+            this.$emit("hideModal");
+        },
+        onFiltered(filteredItems) {
+            // Trigger pagination to update the number of buttons/pages due to filtering
+            if (this.totalRows != filteredItems.length) {
+                /* According to https://bootstrap-vue.org/docs/components/table#filter-events
+                   the filtered event should only emit when the length of the filtered items
+                   changes. Selecting a new active history will change the histories props
+                   (the active history will contain more fields). So we only reset the pagination
+                   if the totalRows have actually changed.
+                */
+                this.totalRows = filteredItems.length;
+                this.currentPage = 1;
+            }
+        },
+        switchToHistory(history, index) {
+            this.$emit("update:currentHistory", history);
+            this.currentHistoryRow._rowVariant = null;
+            Vue.set(history, "_rowVariant", "success");
+            this.currentHistoryRow = history;
+        },
     },
 };
 </script>
diff --git a/lib/galaxy/managers/histories.py b/lib/galaxy/managers/histories.py
index b3975772f94..534d6f123dc 100644
--- a/lib/galaxy/managers/histories.py
+++ b/lib/galaxy/managers/histories.py
@@ -247,6 +247,7 @@ class HistorySerializer(sharable.SharableModelSerializer, deletable.PurgableSeri
             'published',
             'annotation',
             'tags',
+            'update_time',
         ])
         self.add_view('detailed', [
             'contents_url',

From 3b8488a1ddbcf72b19275a0fdcfc6d995024f15e Mon Sep 17 00:00:00 2001
From: Marius van den Beek <m.vandenbeek@gmail.com>
Date: Wed, 28 Apr 2021 17:37:24 +0200
Subject: [PATCH 2/2] Limit modal height and make it scrollable

Thanks Mason!

Co-authored-by: Mason <nerdinacan@gmail.com>
---
 client/src/components/History/HistorySelector.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/History/HistorySelector.vue b/client/src/components/History/HistorySelector.vue
index b33b5ec398b..e27e0241f3a 100644
--- a/client/src/components/History/HistorySelector.vue
+++ b/client/src/components/History/HistorySelector.vue
@@ -14,6 +14,7 @@
                 :current-page="currentPage"
                 @filtered="onFiltered"
                 @row-clicked="switchToHistory"
+                sticky-header="50vh"
             >
                 <template v-slot:cell(tags)="row">
                     <!-- just display tags, don't allow editing -->