From ab6a4faebe8519d84a10db261cc5f55d23e97f15 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 10 Feb 2022 17:59:06 -0500
Subject: [PATCH 01/95] Remove unused import of Set in schema

---
 lib/galaxy/schema/schema.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/galaxy/schema/schema.py b/lib/galaxy/schema/schema.py
index 3a22ddf5579..4e323256adb 100644
--- a/lib/galaxy/schema/schema.py
+++ b/lib/galaxy/schema/schema.py
@@ -9,7 +9,6 @@ from typing import (
     Dict,
     List,
     Optional,
-    Set,
     Union,
 )
 

From ccbeecbe007476ebd565311daaa97db5a08e4d8e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 10 Feb 2022 20:55:50 -0500
Subject: [PATCH 02/95] Restore infinite-scroller? Test performance of basic
 api

---
 client/src/components/History/History.vue        | 16 +++++++---------
 client/src/components/History/HistoryListing.vue |  2 +-
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index 171165e7c7a..9cd84d80ee2 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -85,7 +85,6 @@
 
 <script>
 import { History } from "./model";
-import { SearchParams } from "./model/SearchParams";
 import LoadingSpan from "components/LoadingSpan";
 import { UrlDataProvider } from "components/providers/UrlDataProvider";
 import ExpandedItems from "./ExpandedItems";
@@ -122,8 +121,7 @@ export default {
     data() {
         return {
             hiddenItems: {},
-            maxHid: this.history.hid_counter,
-            maxNew: 10,
+            topIndex: 0,
             pageSize: 50,
             params: {},
         };
@@ -131,14 +129,12 @@ export default {
     watch: {
         queryKey() {
             this.hiddenItems = {};
-            this.maxHid = this.history.hid_counter;
+            this.topIndex = 0;
         },
     },
     computed: {
         dataUrl() {
-            return `api/histories/${this.historyId}/contents/before/${this.maxHid + this.maxNew}/${
-                this.pageSize
-            }?view=detailed&${this.queryString}`;
+            return `api/histories/${this.historyId}/contents?v=dev&order=hid&limit=${this.pageSize}&offset=${this.topIndex}&${this.queryString}`;
         },
         historyId() {
             return this.history.id;
@@ -147,7 +143,9 @@ export default {
             return `${this.history.id}&${this.queryString}`;
         },
         queryString() {
-            return new SearchParams(this.params).historyContentQueryString;
+            const deleted = this.params.showDeleted ? "True" : "False";
+            const visible = this.params.showHidden ? "False" : "True";
+            return `q=deleted&q=visible&qv=${deleted}&qv=${visible}`;
         },
     },
     methods: {
@@ -155,7 +153,7 @@ export default {
             return !!payload && payload.length > 0;
         },
         onScroll(newHid) {
-            this.maxHid = newHid;
+            this.topIndex = newHid;
         },
         onHiddenItems(selectedItems) {
             selectedItems.forEach((item) => {
diff --git a/client/src/components/History/HistoryListing.vue b/client/src/components/History/HistoryListing.vue
index 0d654a48863..4e6aba3a656 100644
--- a/client/src/components/History/HistoryListing.vue
+++ b/client/src/components/History/HistoryListing.vue
@@ -77,7 +77,7 @@ export default {
                 topIndex = Math.min(Math.max(topIndex, 0), itemCount - 1);
                 const topItem = this.getItems[topIndex];
                 if (topItem) {
-                    this.$emit("scroll", topItem[this.itemKey]);
+                    this.$emit("scroll", topIndex);
                 }
             }
         },

From b0efcc729135de630d62ac682086550597e92cc6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 10 Feb 2022 23:33:16 -0500
Subject: [PATCH 03/95] Virtual scroller list

---
 client/package.json                           |  1 +
 .../src/components/History/HistoryListing.vue | 21 +++++++++++--------
 client/yarn.lock                              |  5 +++++
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/client/package.json b/client/package.json
index 7981f59919f..5c744ded7fd 100644
--- a/client/package.json
+++ b/client/package.json
@@ -92,6 +92,7 @@
     "vue-router": "^3.5.3",
     "vue-rx": "^6.2.0",
     "vue-scrollto": "^2.20.0",
+    "vue-virtual-scroll-list": "^2.3.3",
     "vuedraggable": "2.24.3",
     "vueisotope": "^3.1.2",
     "vuex": "^3.6.2",
diff --git a/client/src/components/History/HistoryListing.vue b/client/src/components/History/HistoryListing.vue
index 4e6aba3a656..127b0b3ea61 100644
--- a/client/src/components/History/HistoryListing.vue
+++ b/client/src/components/History/HistoryListing.vue
@@ -1,22 +1,22 @@
 <template>
     <div class="history-listing">
-        <div @scroll="onScrollThrottle" class="listing">
-            <div v-for="(item, index) in getItems" :key="index">
-                <slot name="history-item" :item="item" :index="index" />
-            </div>
-            <div v-if="loading" class="m-2">
-                <LoadingSpan message="Please wait" />
-            </div>
-        </div>
+        <virtual-list class="listing"
+            :data-key="'hid'"
+            :data-sources="getItems"
+            :data-component="itemComponent"
+        />
     </div>
 </template>
 <script>
+import VirtualList from 'vue-virtual-scroll-list'
+import Item from "./ContentItem/Item"
 import { reverse, throttle } from "lodash";
 import LoadingSpan from "components/LoadingSpan";
 
 export default {
     components: {
         LoadingSpan,
+        VirtualList,
     },
     props: {
         payload: { required: true },
@@ -26,6 +26,7 @@ export default {
     },
     data() {
         return {
+            itemComponent: Item,
             items: [],
             throttlePeriod: 100,
             queryCurrent: this.queryKey,
@@ -60,7 +61,8 @@ export default {
                     const itemIndex = item[this.itemKey];
                     this.items[itemIndex] = item;
                 }
-                this.items = this.items.slice();
+                if (this.items.length == 0)
+                    this.items = this.items.slice();
             }
         },
         onScroll(event) {
@@ -90,6 +92,7 @@ export default {
 .history-listing {
     .listing {
         @include absfill();
+        scroll-behavior: smooth;
         overflow-y: scroll;
         overflow-x: hidden;
     }
diff --git a/client/yarn.lock b/client/yarn.lock
index b3c3953efc9..08a19fe2d03 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -9915,6 +9915,11 @@ vue-template-es2015-compiler@^1.5.3, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-virtual-scroll-list@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-2.3.3.tgz#290f0d04be814b93585f2ef232097b671141e5b1"
+  integrity sha512-heuwlZ+lEdcVSp66CpVXnyNdsiHl/XU1cvqJb0yUHGlLv6DGK8OX16FH8I3w/wKNXtHSPF9itdBBGJFrXkyHeg==
+
 vue@^2.6.10, vue@^2.6.14:
   version "2.6.14"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"

From 882b50e322ef65769f25ba9b9ab2ecb46d3f1c98 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 11 Feb 2022 00:45:34 -0500
Subject: [PATCH 04/95] Increase page load size

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

diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index 9cd84d80ee2..d247aa90aeb 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -122,7 +122,7 @@ export default {
         return {
             hiddenItems: {},
             topIndex: 0,
-            pageSize: 50,
+            pageSize: 2000,
             params: {},
         };
     },

From b715cb39064965d524a6ba8e2a0669991aad8135 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 11 Feb 2022 01:14:07 -0500
Subject: [PATCH 05/95] Restore refresh

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

diff --git a/client/src/components/History/HistoryListing.vue b/client/src/components/History/HistoryListing.vue
index 127b0b3ea61..c3d4acdda9b 100644
--- a/client/src/components/History/HistoryListing.vue
+++ b/client/src/components/History/HistoryListing.vue
@@ -8,7 +8,7 @@
     </div>
 </template>
 <script>
-import VirtualList from 'vue-virtual-scroll-list'
+import VirtualList from "vue-virtual-scroll-list";
 import Item from "./ContentItem/Item"
 import { reverse, throttle } from "lodash";
 import LoadingSpan from "components/LoadingSpan";
@@ -61,8 +61,7 @@ export default {
                     const itemIndex = item[this.itemKey];
                     this.items[itemIndex] = item;
                 }
-                if (this.items.length == 0)
-                    this.items = this.items.slice();
+                this.items = this.items.slice();
             }
         },
         onScroll(event) {

From ced414971cd46a1a1e2b008816020c1d95abea1e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 11 Feb 2022 01:29:55 -0500
Subject: [PATCH 06/95] Add item wrapper

---
 client/src/components/History/HistoryListing.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/client/src/components/History/HistoryListing.vue b/client/src/components/History/HistoryListing.vue
index c3d4acdda9b..90ec4132f01 100644
--- a/client/src/components/History/HistoryListing.vue
+++ b/client/src/components/History/HistoryListing.vue
@@ -1,15 +1,14 @@
 <template>
     <div class="history-listing">
-        <virtual-list class="listing"
-            :data-key="'hid'"
-            :data-sources="getItems"
-            :data-component="itemComponent"
-        />
+        <virtual-list class="listing" data-key="hid" :data-sources="getItems" :data-component="{}">
+            <template v-slot:item="{ item }">
+                <slot name="history-item" :item="item" />
+            </template>
+        </virtual-list>
     </div>
 </template>
 <script>
 import VirtualList from "vue-virtual-scroll-list";
-import Item from "./ContentItem/Item"
 import { reverse, throttle } from "lodash";
 import LoadingSpan from "components/LoadingSpan";
 
@@ -26,7 +25,6 @@ export default {
     },
     data() {
         return {
-            itemComponent: Item,
             items: [],
             throttlePeriod: 100,
             queryCurrent: this.queryKey,

From 408d31b1e0a8c742587cf649da348e4d34391bc6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 12 Feb 2022 19:57:30 -0500
Subject: [PATCH 07/95] Remove loading limit for history items

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

diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index d247aa90aeb..1e0c1bd1d67 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -134,7 +134,7 @@ export default {
     },
     computed: {
         dataUrl() {
-            return `api/histories/${this.historyId}/contents?v=dev&order=hid&limit=${this.pageSize}&offset=${this.topIndex}&${this.queryString}`;
+            return `api/histories/${this.historyId}/contents?v=dev&order=hid&offset=${this.topIndex}&${this.queryString}`;
         },
         historyId() {
             return this.history.id;

From 2fcca31303d393b3a22dda8d6c0c6eeb79034bd3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 12 Feb 2022 22:28:18 -0500
Subject: [PATCH 08/95] Throttle scrolling in virtual scroller

---
 client/src/components/History/History.vue     |  2 +-
 .../src/components/History/HistoryListing.vue | 21 +++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index 1e0c1bd1d67..55849aa925d 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -1,5 +1,5 @@
 <template>
-    <UrlDataProvider :key="history.id" :url="dataUrl" auto-refresh v-slot="{ loading, result: payload }">
+    <UrlDataProvider :key="history.id" :url="dataUrl" v-slot="{ loading, result: payload }">
         <ExpandedItems
             :scope-key="history.id"
             :get-item-key="(item) => item.type_id"
diff --git a/client/src/components/History/HistoryListing.vue b/client/src/components/History/HistoryListing.vue
index 90ec4132f01..ee30d2258f6 100644
--- a/client/src/components/History/HistoryListing.vue
+++ b/client/src/components/History/HistoryListing.vue
@@ -1,6 +1,11 @@
 <template>
-    <div class="history-listing">
-        <virtual-list class="listing" data-key="hid" :data-sources="getItems" :data-component="{}">
+    <div
+        class="history-listing"
+        @scroll.prevent="onScrollThrottle"
+        @wheel.prevent="onScrollThrottle"
+        @touchmove.prevent="onScrollThrottle"
+    >
+        <virtual-list ref="listing" class="listing" data-key="hid" :data-sources="getItems" :data-component="{}">
             <template v-slot:item="{ item }">
                 <slot name="history-item" :item="item" />
             </template>
@@ -26,7 +31,8 @@ export default {
     data() {
         return {
             items: [],
-            throttlePeriod: 100,
+            throttlePeriod: 10,
+            deltaMax: 20,
             queryCurrent: this.queryKey,
         };
     },
@@ -63,6 +69,13 @@ export default {
             }
         },
         onScroll(event) {
+            const listing = this.$refs["listing"];
+            const deltaMax = this.deltaMax;
+            const deltaY = Math.max(Math.min(event.deltaY, deltaMax), -deltaMax);
+            this.offset = Math.max(0, listing.getOffset() + deltaY);
+            listing.scrollToOffset(this.offset);
+        },
+        /*onScroll(event) {
             const itemCount = this.items.length;
             if (itemCount > 0) {
                 let topIndex = 0;
@@ -79,7 +92,7 @@ export default {
                     this.$emit("scroll", topIndex);
                 }
             }
-        },
+        },*/
     },
 };
 </script>

From 00e014255b20426f7dcdb8a814b743bbd51d0f13 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 13 Feb 2022 01:43:57 -0500
Subject: [PATCH 09/95] Explicitly load STATES?

---
 .../History/ContentItem/DatasetCollection/DscMenu.vue        | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/src/components/History/ContentItem/DatasetCollection/DscMenu.vue b/client/src/components/History/ContentItem/DatasetCollection/DscMenu.vue
index b5cf70aedfe..11601a21278 100644
--- a/client/src/components/History/ContentItem/DatasetCollection/DscMenu.vue
+++ b/client/src/components/History/ContentItem/DatasetCollection/DscMenu.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { DatasetCollection } from "../../model";
+import { DatasetCollection, STATES } from "../../model";
 import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
 import Vue from "vue";
 import BootstrapVue from "bootstrap-vue";
@@ -59,7 +59,6 @@ export default {
         IconButton,
     },
     mixins: [legacyNavigationMixin],
-    inject: ["STATES"],
     props: {
         dsc: { type: DatasetCollection, required: true },
     },
@@ -71,7 +70,7 @@ export default {
             if (this.dsc.purged) {
                 return "Cannot edit attributes of collections removed from disk";
             }
-            const unreadyStates = new Set([this.STATES.UPLOAD, this.STATES.NEW]);
+            const unreadyStates = new Set([STATES.UPLOAD, STATES.NEW]);
             if (unreadyStates.has(this.dsc.state)) {
                 return "This collection is not yet editable";
             }

From 181107c8e8e79500addb03666c38891b2a012263 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 13 Feb 2022 02:04:25 -0500
Subject: [PATCH 10/95] Remove layer between history content item and content
 item

---
 .../History/ContentItem/ContentItem.js        | 14 ++++++++++--
 .../History/ContentItem/HistoryContentItem.js | 22 -------------------
 .../components/History/ContentItem/index.js   |  1 -
 client/src/components/History/History.vue     |  6 ++---
 .../src/components/History/HistoryListing.vue |  3 +--
 client/src/components/History/README.md       |  4 ++--
 6 files changed, 18 insertions(+), 32 deletions(-)
 delete mode 100644 client/src/components/History/ContentItem/HistoryContentItem.js

diff --git a/client/src/components/History/ContentItem/ContentItem.js b/client/src/components/History/ContentItem/ContentItem.js
index 8f0a085ad7c..c68dacf1a81 100644
--- a/client/src/components/History/ContentItem/ContentItem.js
+++ b/client/src/components/History/ContentItem/ContentItem.js
@@ -71,8 +71,18 @@ export default {
             return !this.item;
         },
         contentItemComponent() {
-            // override me
-            return "Placeholder";
+            if (this.item.id === undefined) {
+                return "Placeholder";
+            }
+            const { history_content_type } = this.item;
+            switch (history_content_type) {
+                case "dataset":
+                    return "Dataset";
+                case "dataset_collection":
+                    return "DatasetCollection";
+                default:
+                    return "Placeholder";
+            }
         },
     },
 
diff --git a/client/src/components/History/ContentItem/HistoryContentItem.js b/client/src/components/History/ContentItem/HistoryContentItem.js
deleted file mode 100644
index c6d8c6632dc..00000000000
--- a/client/src/components/History/ContentItem/HistoryContentItem.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import ContentItem from "./ContentItem";
-
-export default {
-    mixins: [ContentItem],
-
-    computed: {
-        contentItemComponent() {
-            if (this.item.id === undefined) {
-                return "Placeholder";
-            }
-            const { history_content_type } = this.item;
-            switch (history_content_type) {
-                case "dataset":
-                    return "Dataset";
-                case "dataset_collection":
-                    return "DatasetCollection";
-                default:
-                    return "Placeholder";
-            }
-        },
-    },
-};
diff --git a/client/src/components/History/ContentItem/index.js b/client/src/components/History/ContentItem/index.js
index 32d866ab9d0..994db0b74e9 100644
--- a/client/src/components/History/ContentItem/index.js
+++ b/client/src/components/History/ContentItem/index.js
@@ -6,4 +6,3 @@ import "./styles.scss";
 
 export { default as ContentItem } from "./ContentItem";
 export { default as CollectionContentItem } from "./CollectionContentItem";
-export { default as HistoryContentItem } from "./HistoryContentItem";
diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index 55849aa925d..ceda769e779 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -61,7 +61,7 @@
                             :payload="payload"
                             @scroll="onScroll">
                             <template v-slot:history-item="{ item }">
-                                <HistoryContentItem
+                                <ContentItem
                                     v-if="!hiddenItems[item.hid]"
                                     :item="item"
                                     :expanded="isExpanded(item)"
@@ -97,14 +97,14 @@ import ContentOperations from "./ContentOperations";
 import ToolHelpModal from "./ToolHelpModal";
 import HistoryMenu from "./HistoryMenu";
 import HistoryListing from "./HistoryListing";
-import { HistoryContentItem } from "./ContentItem";
+import { ContentItem } from "./ContentItem";
 
 export default {
     components: {
         LoadingSpan,
         UrlDataProvider,
         Layout,
-        HistoryContentItem,
+        ContentItem,
         HistoryMessages,
         HistoryDetails,
         HistoryEmpty,
diff --git a/client/src/components/History/HistoryListing.vue b/client/src/components/History/HistoryListing.vue
index ee30d2258f6..995a4389bcc 100644
--- a/client/src/components/History/HistoryListing.vue
+++ b/client/src/components/History/HistoryListing.vue
@@ -3,8 +3,7 @@
         class="history-listing"
         @scroll.prevent="onScrollThrottle"
         @wheel.prevent="onScrollThrottle"
-        @touchmove.prevent="onScrollThrottle"
-    >
+        @touchmove.prevent="onScrollThrottle">
         <virtual-list ref="listing" class="listing" data-key="hid" :data-sources="getItems" :data-component="{}">
             <template v-slot:item="{ item }">
                 <slot name="history-item" :item="item" />
diff --git a/client/src/components/History/README.md b/client/src/components/History/README.md
index 58de67b8725..f277e33d510 100644
--- a/client/src/components/History/README.md
+++ b/client/src/components/History/README.md
@@ -27,11 +27,11 @@ to interact with each other.
                 <ContentOperations />
                 <HistoryListing>
 
-                    <!-- HistoryContentItem is a dynamic component that becomes 
+                    <!-- ContentItem is a dynamic component that becomes
                     either Dataset or DatasetCollection depending
                     on the props passed to it -->
 
-                    (<HistoryContentItem />)
+                    (<ContentItem />)
                         <Dataset />
                         <!-- or -->
                         <DatasetCollection />

From 3c66f25cfa2499ce2b46dbd240c2e50227299fd4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 13 Feb 2022 02:13:57 -0500
Subject: [PATCH 11/95] Transform itemcomponent to regular single file vue
 component

---
 .../{ContentItem.js => ContentItem.vue}       | 38 +++++++++----------
 client/src/components/History/History.vue     |  2 +-
 2 files changed, 20 insertions(+), 20 deletions(-)
 rename client/src/components/History/ContentItem/{ContentItem.js => ContentItem.vue} (77%)

diff --git a/client/src/components/History/ContentItem/ContentItem.js b/client/src/components/History/ContentItem/ContentItem.vue
similarity index 77%
rename from client/src/components/History/ContentItem/ContentItem.js
rename to client/src/components/History/ContentItem/ContentItem.vue
index c68dacf1a81..63c8dbdd483 100644
--- a/client/src/components/History/ContentItem/ContentItem.js
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -1,3 +1,21 @@
+<template>
+    <component
+        class="content-item"
+        :is="contentItemComponent"
+        :data-ci-type="contentItemComponent"
+        :class="{ loading }"
+        :tabindex="index"
+        :item="item"
+        :index="index"
+        :row-key="rowKey"
+        :writable="writable"
+        v-on="$listeners"
+        v-bind="$attrs"
+        @mouseover.native.stop="setFocus(index)"
+        @keydown.native.arrow-up.self.stop="setFocus(index - 1)"
+        @keydown.native.arrow-down.self.stop="setFocus(index + 1)" />
+</template>
+<script>
 /**
  * This is a single item in the list. The main job of the contentItem is to
  * pick a specific selector for the :is attribute of the generic component
@@ -15,25 +33,6 @@ import Subdataset from "./Subdataset";
 import Subcollection from "./Subcollection";
 
 export default {
-    template: `
-        <component :is="contentItemComponent"
-            :data-ci-type="contentItemComponent"
-            class="content-item"
-            :class="{ loading }"
-            :tabindex="index"
-            :writable="writable"
-            v-on="$listeners"
-            v-bind="$attrs"
-            :item="item"
-            :index="index"
-            :row-key="rowKey"
-            :writable="writable"
-            @mouseover.native.stop="setFocus(index)"
-            @keydown.native.arrow-up.self.stop="setFocus(index - 1)"
-            @keydown.native.arrow-down.self.stop="setFocus(index + 1)"
-        />
-    `,
-
     components: {
         Placeholder,
         Dataset,
@@ -91,3 +90,4 @@ export default {
         this.$root.$on("bv::dropdown::hide", () => (this.suppressFocus = false));
     },
 };
+</script>
diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index ceda769e779..ff53a086472 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -97,7 +97,7 @@ import ContentOperations from "./ContentOperations";
 import ToolHelpModal from "./ToolHelpModal";
 import HistoryMenu from "./HistoryMenu";
 import HistoryListing from "./HistoryListing";
-import { ContentItem } from "./ContentItem";
+import ContentItem from "./ContentItem/ContentItem";
 
 export default {
     components: {

From bff644e256f15b6f05bb03b01c00cc3bdc970d24 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 13 Feb 2022 02:26:21 -0500
Subject: [PATCH 12/95] Remove collection content item, use consolidated
 content item instead

---
 .../ContentItem/CollectionContentItem.js      | 19 --------
 .../History/ContentItem/ContentItem.vue       | 46 +++++++++++--------
 .../components/History/ContentItem/index.js   |  8 ----
 .../History/CurrentCollection/Panel.vue       |  6 +--
 client/src/components/History/README.md       |  2 +-
 5 files changed, 32 insertions(+), 49 deletions(-)
 delete mode 100644 client/src/components/History/ContentItem/CollectionContentItem.js
 delete mode 100644 client/src/components/History/ContentItem/index.js

diff --git a/client/src/components/History/ContentItem/CollectionContentItem.js b/client/src/components/History/ContentItem/CollectionContentItem.js
deleted file mode 100644
index f6a7f5132c7..00000000000
--- a/client/src/components/History/ContentItem/CollectionContentItem.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import ContentItem from "./ContentItem";
-
-export default {
-    mixins: [ContentItem],
-
-    computed: {
-        contentItemComponent() {
-            const { element_type } = this.item;
-            switch (element_type) {
-                case "hda":
-                    return "Subdataset";
-                case "hdca":
-                    return "Subcollection";
-                default:
-                    return "Placeholder";
-            }
-        },
-    },
-};
diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 63c8dbdd483..15d7fe2d41f 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -26,6 +26,7 @@
  * derived from the current component state rather than the data itself.
  */
 
+import "./styles.scss";
 import Placeholder from "./Placeholder";
 import Dataset from "./Dataset";
 import DatasetCollection from "./DatasetCollection";
@@ -40,18 +41,30 @@ export default {
         Subdataset,
         Subcollection,
     },
-
     props: {
         item: { type: Object, required: true },
         index: { type: Number, required: false, default: null },
         rowKey: { type: [Number, String], required: false, default: "" },
         writable: { type: Boolean, required: false, default: true },
     },
-
     data: () => ({
         suppressFocus: true,
     }),
-
+    computed: {
+        loading() {
+            return !this.item;
+        },
+        contentItemComponent() {
+            if (this.item.id === undefined) {
+                return "Placeholder";
+            }
+            return this.historyContentItem();
+        },
+    },
+    created() {
+        this.$root.$on("bv::dropdown::show", () => (this.suppressFocus = true));
+        this.$root.$on("bv::dropdown::hide", () => (this.suppressFocus = false));
+    },
     methods: {
         setFocus(index) {
             if (this.suppressFocus) {
@@ -63,16 +76,7 @@ export default {
                 el.focus();
             }
         },
-    },
-
-    computed: {
-        loading() {
-            return !this.item;
-        },
-        contentItemComponent() {
-            if (this.item.id === undefined) {
-                return "Placeholder";
-            }
+        historyContentItem() {
             const { history_content_type } = this.item;
             switch (history_content_type) {
                 case "dataset":
@@ -83,11 +87,17 @@ export default {
                     return "Placeholder";
             }
         },
-    },
-
-    created() {
-        this.$root.$on("bv::dropdown::show", () => (this.suppressFocus = true));
-        this.$root.$on("bv::dropdown::hide", () => (this.suppressFocus = false));
+        collectionContentItem() {
+            const { element_type } = this.item;
+            switch (element_type) {
+                case "hda":
+                    return "Subdataset";
+                case "hdca":
+                    return "Subcollection";
+                default:
+                    return "Placeholder";
+            }
+        },
     },
 };
 </script>
diff --git a/client/src/components/History/ContentItem/index.js b/client/src/components/History/ContentItem/index.js
deleted file mode 100644
index 994db0b74e9..00000000000
--- a/client/src/components/History/ContentItem/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Scrolling components for history contents and collection contents.
- */
-
-import "./styles.scss";
-
-export { default as ContentItem } from "./ContentItem";
-export { default as CollectionContentItem } from "./CollectionContentItem";
diff --git a/client/src/components/History/CurrentCollection/Panel.vue b/client/src/components/History/CurrentCollection/Panel.vue
index a4c04898bdd..408dc75fbde 100644
--- a/client/src/components/History/CurrentCollection/Panel.vue
+++ b/client/src/components/History/CurrentCollection/Panel.vue
@@ -31,7 +31,7 @@
                         :payload="payload"
                         @scroll="onScroll">
                         <template v-slot:history-item="{ item, index }">
-                            <CollectionContentItem
+                            <ContentItem
                                 :item="item"
                                 :index="index"
                                 :expanded="isExpanded(item)"
@@ -56,7 +56,7 @@ import Layout from "../Layout";
 import TopNav from "./TopNav";
 import CollectionOperations from "./CollectionOperations";
 import Details from "./Details";
-import { CollectionContentItem } from "../ContentItem";
+import ContentItem from "../ContentItem/ContentItem";
 import HistoryListing from "components/History/HistoryListing";
 import { UrlDataProvider } from "components/providers/UrlDataProvider";
 
@@ -66,7 +66,7 @@ export default {
         Layout,
         TopNav,
         Details,
-        CollectionContentItem,
+        ContentItem,
         ExpandedItems,
         CollectionOperations,
         HistoryListing,
diff --git a/client/src/components/History/README.md b/client/src/components/History/README.md
index f277e33d510..908c4ac6de8 100644
--- a/client/src/components/History/README.md
+++ b/client/src/components/History/README.md
@@ -55,7 +55,7 @@ to interact with each other.
                     and DatasetCollection ContentItem components, but mostly 
                     read-only since they are part of the collection-->
 
-                    (<CollectionContentItem />)
+                    (<ContentItem />)
                         <Subdataset />
                         <!-- or -->
                         <Subcollection />

From 4aa2febafaf115eae8d4b3ca9a253e96b33d6e5b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 13 Feb 2022 10:09:57 -0500
Subject: [PATCH 13/95] Adjust item components, prepare for reducing content

---
 .../History/ContentItem/ContentItem.vue       | 16 ++++---
 .../ContentItem/Dataset/DatasetMenu.vue       | 45 +++++--------------
 .../History/ContentItem/Dataset/DatasetUI.vue |  6 +--
 .../ContentItem/Dataset/Summary/index.vue     |  6 +--
 .../History/ContentItem/Dataset/index.js      |  5 ---
 lib/galaxy/schema/schema.py                   |  1 +
 6 files changed, 26 insertions(+), 53 deletions(-)
 delete mode 100644 client/src/components/History/ContentItem/Dataset/index.js

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 15d7fe2d41f..91ac2c8fec2 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -5,7 +5,6 @@
         :data-ci-type="contentItemComponent"
         :class="{ loading }"
         :tabindex="index"
-        :item="item"
         :index="index"
         :row-key="rowKey"
         :writable="writable"
@@ -13,7 +12,10 @@
         v-bind="$attrs"
         @mouseover.native.stop="setFocus(index)"
         @keydown.native.arrow-up.self.stop="setFocus(index - 1)"
-        @keydown.native.arrow-down.self.stop="setFocus(index + 1)" />
+        @keydown.native.arrow-down.self.stop="setFocus(index + 1)"
+        :item="item"
+        :name="item.name"
+        :title="item.title" />
 </template>
 <script>
 /**
@@ -28,18 +30,18 @@
 
 import "./styles.scss";
 import Placeholder from "./Placeholder";
-import Dataset from "./Dataset";
+import Dataset from "./Dataset/Dataset";
 import DatasetCollection from "./DatasetCollection";
-import Subdataset from "./Subdataset";
-import Subcollection from "./Subcollection";
+//import Subdataset from "./Subdataset";
+//import Subcollection from "./Subcollection";
 
 export default {
     components: {
         Placeholder,
         Dataset,
         DatasetCollection,
-        Subdataset,
-        Subcollection,
+        //Subdataset,
+        //Subcollection,
     },
     props: {
         item: { type: Object, required: true },
diff --git a/client/src/components/History/ContentItem/Dataset/DatasetMenu.vue b/client/src/components/History/ContentItem/Dataset/DatasetMenu.vue
index e92327216b6..17e90c7181e 100644
--- a/client/src/components/History/ContentItem/Dataset/DatasetMenu.vue
+++ b/client/src/components/History/ContentItem/Dataset/DatasetMenu.vue
@@ -26,7 +26,6 @@
                 variant="link"
                 class="px-1 delete-btn"
                 @click.stop />
-
             <b-dropdown
                 right
                 size="sm"
@@ -40,7 +39,6 @@
                     <Icon icon="ellipsis-v" variant="link" />
                     <span class="sr-only">Dataset Operations</span>
                 </template>
-
                 <b-dropdown-item
                     v-if="isIn(STATES.ERROR)"
                     key="show-error"
@@ -53,7 +51,6 @@
                     <Icon icon="exclamation-triangle" class="mr-1" />
                     <span v-localize>Show Error</span>
                 </b-dropdown-item>
-
                 <b-dropdown-item
                     v-if="showDownloads && dataset.getUrl('download')"
                     title="Copy Link"
@@ -61,7 +58,6 @@
                     <Icon icon="link" class="mr-1" />
                     <span v-localize>Copy Link</span>
                 </b-dropdown-item>
-
                 <b-dropdown-group v-if="showDownloads && dataset.hasMetaData">
                     <b-dropdown-item
                         v-for="mf in dataset.meta_files"
@@ -74,7 +70,6 @@
                         <span v-localize>{{ "Download " + mf.file_type }}</span>
                     </b-dropdown-item>
                 </b-dropdown-group>
-
                 <b-dropdown-item
                     v-else-if="showDownloads"
                     title="Download"
@@ -85,7 +80,6 @@
                     <Icon icon="download" class="mr-1" />
                     <span v-localize>Download</span>
                 </b-dropdown-item>
-
                 <b-dropdown-item
                     v-if="dataset.rerunnable && dataset.creating_job && notIn(STATES.UPLOAD, STATES.NOT_VIEWABLE)"
                     title="Run job again"
@@ -98,7 +92,6 @@
                     <Icon icon="play" class="mr-1" />
                     <span v-localize>Run job again</span>
                 </b-dropdown-item>
-
                 <b-dropdown-item
                     v-if="showViz && hasViz && isIn(STATES.OK, STATES.FAILED_METADATA)"
                     title="Visualize Data"
@@ -106,7 +99,6 @@
                     <Icon icon="chart-area" class="mr-1" />
                     <span v-localize>Visualize Data</span>
                 </b-dropdown-item>
-
                 <b-dropdown-item
                     v-if="currentUser && currentUser.id && dataset.creating_job"
                     title="Tool Help"
@@ -114,7 +106,6 @@
                     <Icon icon="question" class="mr-1" />
                     <span v-localize>Tool Help</span>
                 </b-dropdown-item>
-
                 <b-dropdown-item
                     v-if="notIn(STATES.NOT_VIEWABLE)"
                     key="dataset-details"
@@ -136,52 +127,47 @@
 
 <script>
 import { mapGetters } from "vuex";
-import { Dataset } from "../../model";
+import { Dataset, STATES } from "components/History/model";
 import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
 import IconButton from "components/IconButton";
 
 export default {
     mixins: [legacyNavigationMixin],
-    inject: ["STATES"],
-
     components: {
         IconButton,
     },
-
     props: {
         dataset: { type: Dataset, required: true },
         expanded: { type: Boolean, required: true },
         writable: { type: Boolean, default: true },
     },
-
     data() {
         return {
             toolHelp: null,
             testVal: false,
         };
     },
-
     computed: {
         ...mapGetters("user", ["currentUser"]),
         ...mapGetters("config", ["config"]),
-
+        STATES() {
+            return STATES;
+        },
         showViz() {
             return this.config.visualizations_visible;
         },
-
         displayButtonTitle() {
             if (this.dataset.purged) {
                 return "Cannot display datasets removed from disk";
             }
-            if (this.dataset.state == this.STATES.UPLOAD) {
+            if (this.dataset.state == STATES.UPLOAD) {
                 return "This dataset must finish uploading before it can be viewed";
             }
-            if (this.dataset.state == this.STATES.NEW) {
+            if (this.dataset.state == STATES.NEW) {
                 return "This dataset is not yet viewable";
             }
             return "View data";
         },
-
         editButtonTitle() {
             if (this.dataset.deleted) {
                 return "Undelete dataset to edit attributes";
@@ -189,13 +175,12 @@ export default {
             if (this.dataset.purged) {
                 return "Cannot edit attributes of datasets removed from disk";
             }
-            const unreadyStates = new Set([this.STATES.UPLOAD, this.STATES.NEW]);
+            const unreadyStates = new Set([STATES.UPLOAD, STATES.NEW]);
             if (unreadyStates.has(this.dataset.state)) {
                 return "This dataset is not yet editable";
             }
             return "Edit attributes";
         },
-
         deleteButtonTitle() {
             return this.dataset.purged
                 ? "Dataset has been permanently deleted"
@@ -203,7 +188,6 @@ export default {
                 ? "Undelete"
                 : "Delete";
         },
-
         showDownloads() {
             if (this.dataset.purged) {
                 return false;
@@ -211,27 +195,23 @@ export default {
             if (!this.dataset.hasData) {
                 return false;
             }
-            const okStates = new Set([this.STATES.OK, this.STATES.FAILED_METADATA, this.STATES.ERROR]);
+            const okStates = new Set([STATES.OK, STATES.FAILED_METADATA, STATES.ERROR]);
             return okStates.has(this.dataset.state);
         },
-
         hasViz() {
             const viz_count = this.dataset.viz_count || 0;
             return viz_count && this.dataset.hasData && !this.dataset.deleted;
         },
     },
-
     methods: {
         notIn(...states) {
             const badStates = new Set(states);
             return !badStates.has(this.dataset.state);
         },
-
         isIn(...states) {
             const goodStates = new Set(states);
             return goodStates.has(this.dataset.state);
         },
-
         viewData() {
             const id = this.dataset.id;
             if (!id) {
@@ -248,8 +228,7 @@ export default {
                 }
             });
         },
-
-        // wierd iframe navigation
+        // routing for visualizations
         visualize() {
             const showDetailsUrl = `/datasets/${this.dataset.id}/details`;
             const redirectParams = {
@@ -263,7 +242,6 @@ export default {
                 });
             }
         },
-
         showDetails() {
             const showDetailsUrl = `/datasets/${this.dataset.id}/details`;
             const redirectParams = {
@@ -275,17 +253,14 @@ export default {
                 this.backboneRoute(showDetailsUrl);
             }
         },
-
         showToolHelp(job_id) {
             this.eventHub.$emit("toggleToolHelp", job_id);
         },
-
         onDeleteClick() {
             const eventName = this.dataset.deleted ? "undelete" : "delete";
             this.$emit(eventName);
         },
-
-        // bootstrap demands ids instead of simply using a ref so I guess we're doing this
+        // bootstrap demands ids
         bsId(suffix) {
             return `dataset-${this.dataset.id}-${suffix}`;
         },
diff --git a/client/src/components/History/ContentItem/Dataset/DatasetUI.vue b/client/src/components/History/ContentItem/Dataset/DatasetUI.vue
index 1b413f099d0..a919b866a4a 100644
--- a/client/src/components/History/ContentItem/Dataset/DatasetUI.vue
+++ b/client/src/components/History/ContentItem/Dataset/DatasetUI.vue
@@ -134,14 +134,14 @@ either through the props, and make updates through the events -->
 </template>
 
 <script>
-import { Dataset, STATES } from "../../model";
+import { Dataset, STATES } from "components/History/model";
 import { Nametag } from "components/Nametags";
-import StatusIcon from "../../StatusIcon";
+import StatusIcon from "components/History/StatusIcon";
 import DatasetMenu from "./DatasetMenu";
 import DatasetSummary from "./Summary";
 import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
 import IconButton from "components/IconButton";
-import EditorMenu from "../../EditorMenu";
+import EditorMenu from "components/History/EditorMenu";
 import { StatelessTags } from "components/Tags";
 
 export default {
diff --git a/client/src/components/History/ContentItem/Dataset/Summary/index.vue b/client/src/components/History/ContentItem/Dataset/Summary/index.vue
index 44861d1daa7..2067a75bf23 100644
--- a/client/src/components/History/ContentItem/Dataset/Summary/index.vue
+++ b/client/src/components/History/ContentItem/Dataset/Summary/index.vue
@@ -16,9 +16,9 @@ import Queued from "./Queued";
 import Running from "./Running";
 import SettingMetadata from "./SettingMetadata";
 import Upload from "./Upload";
+import { STATES } from "components/History/model";
 
 export default {
-    inject: ["STATES"],
     components: {
         Discarded,
         Empty,
@@ -38,8 +38,8 @@ export default {
     computed: {
         summaryComponent() {
             let state = this.dataset.state;
-            if (state == this.STATES.FAILED_METADATA) {
-                state = this.STATES.OK;
+            if (state == STATES.FAILED_METADATA) {
+                state = STATES.OK;
             }
             return capitalize(camelize(state));
         },
diff --git a/client/src/components/History/ContentItem/Dataset/index.js b/client/src/components/History/ContentItem/Dataset/index.js
deleted file mode 100644
index 3572794c330..00000000000
--- a/client/src/components/History/ContentItem/Dataset/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Dataset from "./Dataset";
-
-export { default as DatasetUI } from "./DatasetUI";
-export { default as DatasetMenu } from "./DatasetMenu";
-export default Dataset;
diff --git a/lib/galaxy/schema/schema.py b/lib/galaxy/schema/schema.py
index 4e323256adb..f16a1123cd4 100644
--- a/lib/galaxy/schema/schema.py
+++ b/lib/galaxy/schema/schema.py
@@ -10,6 +10,7 @@ from typing import (
     List,
     Optional,
     Union,
+    Set,
 )
 
 from pydantic import (

From 6fb067b63afde72fb8ff746526ed69c7052d328d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 14 Feb 2022 23:27:48 -0500
Subject: [PATCH 14/95] Temporary work on item interface

---
 .../History/ContentItem/ContentItem.vue       | 103 +++++++++++++++---
 client/src/components/History/History.vue     |   2 +
 2 files changed, 88 insertions(+), 17 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 91ac2c8fec2..bee52b7df70 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -1,21 +1,69 @@
 <template>
-    <component
-        class="content-item"
-        :is="contentItemComponent"
-        :data-ci-type="contentItemComponent"
-        :class="{ loading }"
-        :tabindex="index"
-        :index="index"
-        :row-key="rowKey"
-        :writable="writable"
-        v-on="$listeners"
-        v-bind="$attrs"
-        @mouseover.native.stop="setFocus(index)"
-        @keydown.native.arrow-up.self.stop="setFocus(index - 1)"
-        @keydown.native.arrow-down.self.stop="setFocus(index + 1)"
-        :item="item"
-        :name="item.name"
-        :title="item.title" />
+    <div class="dataset history-content">
+        <nav class="p-1 cursor-pointer alert-success mb-1">
+            <div class="overflow-hidden">
+                <div class="pl-1" v-if="selectable">
+                    <b-check class="selector" :checked="selected" @change="$emit('update:selected', $event)"></b-check>
+                </div>
+                <div>
+                    <IconButton
+                        v-if="!collapsed && !visible"
+                        class="px-1"
+                        state="hidden"
+                        title="Unhide"
+                        icon="eye-slash"
+                        @click.stop="$emit('unhide')" />
+
+                    <IconButton
+                        v-if="!collapsed && deleted"
+                        class="px-1"
+                        state="deleted"
+                        title="Undelete"
+                        icon="trash-restore"
+                        @click.stop="$emit('undelete')" />
+
+                    <b-button
+                        class="float-right px-1"
+                        title="Delete"
+                        size="sm"
+                        variant="link"
+                        @click.stop="$emit('delete')">
+                        <span class="fa fa-trash" />
+                    </b-button>
+
+                    <b-button
+                        class="float-right px-1"
+                        title="Edit"
+                        size="sm"
+                        variant="link"
+                        @click.stop="$emit('edit')">
+                        <span class="fa fa-pencil" />
+                    </b-button>
+
+                    <b-button
+                        class="float-right px-1"
+                        title="Display"
+                        size="sm"
+                        variant="link"
+                        @click.stop="$emit('display')">
+                        <span class="fa fa-eye" />
+                    </b-button>
+
+                    <div
+                        class="float-left content-title title p-1 overflow-hidden"
+                        @click.stop="onExpand">
+                        <h5 class="text-truncate" v-if="collapsed">
+                            <span class="hid" data-description="dataset hid">{{ id }}:</span>
+                            <span class="name" data-description="dataset name">{{ name }}</span>
+                        </h5>
+                    </div>
+                </div>
+            </div>
+            <div v-if="expanded" class="p-3 details">
+                <h4 data-description="dataset name">{{ name || "(Dataset Name)" }}</h4>
+            </div>
+        </nav>
+    </div>
 </template>
 <script>
 /**
@@ -32,6 +80,7 @@ import "./styles.scss";
 import Placeholder from "./Placeholder";
 import Dataset from "./Dataset/Dataset";
 import DatasetCollection from "./DatasetCollection";
+import IconButton from "components/IconButton";
 //import Subdataset from "./Subdataset";
 //import Subcollection from "./Subcollection";
 
@@ -40,17 +89,24 @@ export default {
         Placeholder,
         Dataset,
         DatasetCollection,
+        IconButton,
         //Subdataset,
         //Subcollection,
     },
     props: {
         item: { type: Object, required: true },
+        id: { type: Number, required: true },
+        name: { type: String, required: true },
+        showSelection: { type: Boolean, required: false, default: false },
         index: { type: Number, required: false, default: null },
         rowKey: { type: [Number, String], required: false, default: "" },
         writable: { type: Boolean, required: false, default: true },
     },
     data: () => ({
         suppressFocus: true,
+        selected: false,
+        collapsed: true,
+        expanded: false,
     }),
     computed: {
         loading() {
@@ -62,12 +118,25 @@ export default {
             }
             return this.historyContentItem();
         },
+        selectable() {
+            return this.showSelection;
+        },
+        visible() {
+            return this.item.visible;
+        },
+        deleted() {
+            return this.item.isDeleted && !this.item.purged;
+        },
     },
     created() {
         this.$root.$on("bv::dropdown::show", () => (this.suppressFocus = true));
         this.$root.$on("bv::dropdown::hide", () => (this.suppressFocus = false));
     },
     methods: {
+        onExpand() {
+            console.log(this.expanded);
+            this.$emit('update:expanded', !this.expanded);
+        },
         setFocus(index) {
             if (this.suppressFocus) {
                 return;
diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index ff53a086472..8b9cc84c4ef 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -64,6 +64,8 @@
                                 <ContentItem
                                     v-if="!hiddenItems[item.hid]"
                                     :item="item"
+                                    :id="item.hid"
+                                    :name="item.name"
                                     :expanded="isExpanded(item)"
                                     :selected="isSelected(item)"
                                     :show-selection="showSelection"

From 9d4dd0b9c7791cf6a6306cd479d08bcb32a40626 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 14 Feb 2022 23:43:04 -0500
Subject: [PATCH 15/95] Avoid custom style when rendering default component
 (for now)

---
 .../History/ContentItem/ContentItem.vue       | 22 +++----------
 .../History/ContentItem/styles.scss           | 32 -------------------
 2 files changed, 5 insertions(+), 49 deletions(-)
 delete mode 100644 client/src/components/History/ContentItem/styles.scss

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index bee52b7df70..b79cedaa383 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -2,8 +2,8 @@
     <div class="dataset history-content">
         <nav class="p-1 cursor-pointer alert-success mb-1">
             <div class="overflow-hidden">
-                <div class="pl-1" v-if="selectable">
-                    <b-check class="selector" :checked="selected" @change="$emit('update:selected', $event)"></b-check>
+                <div class="float-left pl-1" v-if="selectable">
+                    <b-check class="selector" :checked="selected" @change="$emit('update:selected', $event)" />
                 </div>
                 <div>
                     <IconButton
@@ -49,9 +49,7 @@
                         <span class="fa fa-eye" />
                     </b-button>
 
-                    <div
-                        class="float-left content-title title p-1 overflow-hidden"
-                        @click.stop="onExpand">
+                    <div class="float-left content-title title p-1 overflow-hidden" @click.stop="onExpand">
                         <h5 class="text-truncate" v-if="collapsed">
                             <span class="hid" data-description="dataset hid">{{ id }}:</span>
                             <span class="name" data-description="dataset name">{{ name }}</span>
@@ -65,18 +63,8 @@
         </nav>
     </div>
 </template>
-<script>
-/**
- * This is a single item in the list. The main job of the contentItem is to
- * pick a specific selector for the :is attribute of the generic component
- * placeholder. This should be a dataset, collection, or other component
- * depending on the specific list implementation.
- *
- * The mixin also pulls out "selected", and "expanded" properties which are
- * derived from the current component state rather than the data itself.
- */
 
-import "./styles.scss";
+<script>
 import Placeholder from "./Placeholder";
 import Dataset from "./Dataset/Dataset";
 import DatasetCollection from "./DatasetCollection";
@@ -135,7 +123,7 @@ export default {
     methods: {
         onExpand() {
             console.log(this.expanded);
-            this.$emit('update:expanded', !this.expanded);
+            this.$emit("update:expanded", !this.expanded);
         },
         setFocus(index) {
             if (this.suppressFocus) {
diff --git a/client/src/components/History/ContentItem/styles.scss b/client/src/components/History/ContentItem/styles.scss
deleted file mode 100644
index 03fcc5f41dd..00000000000
--- a/client/src/components/History/ContentItem/styles.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import "theme/blue.scss";
-@import "scss/mixins.scss";
-
-.content-item {
-    outline: none;
-    border-bottom: 2px solid white;
-    &:focus-within {
-        box-shadow: inset 0 0 1em 0.25em rgba(255, 255, 255, 0.25);
-    }
-}
-
-// Nav across the top of the content item
-.content-item .content-top-menu {
-    min-height: 2em;
-
-    .content-title {
-        .hid {
-            color: adjust-color($text-color, $alpha: -0.6);
-            font-size: 80%;
-            user-select: none;
-            display: inline-block;
-            text-align: right;
-            min-width: 0.25rem;
-            &:not(:empty)::after {
-                content: ":";
-            }
-        }
-        .name {
-            font-weight: 700;
-        }
-    }
-}
\ No newline at end of file

From dc79a28f4165bd78f70496bebaff412aafa05403 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 14 Feb 2022 23:54:48 -0500
Subject: [PATCH 16/95] Consolidate collapsed and expanded, redundancy

---
 .../src/components/History/ContentItem/ContentItem.vue   | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index b79cedaa383..36dd1422050 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -7,7 +7,7 @@
                 </div>
                 <div>
                     <IconButton
-                        v-if="!collapsed && !visible"
+                        v-if="!visible"
                         class="px-1"
                         state="hidden"
                         title="Unhide"
@@ -15,7 +15,7 @@
                         @click.stop="$emit('unhide')" />
 
                     <IconButton
-                        v-if="!collapsed && deleted"
+                        v-if="deleted"
                         class="px-1"
                         state="deleted"
                         title="Undelete"
@@ -50,7 +50,7 @@
                     </b-button>
 
                     <div class="float-left content-title title p-1 overflow-hidden" @click.stop="onExpand">
-                        <h5 class="text-truncate" v-if="collapsed">
+                        <h5 class="text-truncate">
                             <span class="hid" data-description="dataset hid">{{ id }}:</span>
                             <span class="name" data-description="dataset name">{{ name }}</span>
                         </h5>
@@ -85,6 +85,7 @@ export default {
         item: { type: Object, required: true },
         id: { type: Number, required: true },
         name: { type: String, required: true },
+        expanded: { type: Boolean, required: true },
         showSelection: { type: Boolean, required: false, default: false },
         index: { type: Number, required: false, default: null },
         rowKey: { type: [Number, String], required: false, default: "" },
@@ -93,8 +94,6 @@ export default {
     data: () => ({
         suppressFocus: true,
         selected: false,
-        collapsed: true,
-        expanded: false,
     }),
     computed: {
         loading() {

From 2ddfc3c070fa1365f71ed22ecbd30c0f654a2643 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 00:08:36 -0500
Subject: [PATCH 17/95] Remove icon button from shared item component

---
 .../History/ContentItem/ContentItem.vue       | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 36dd1422050..53a851761f7 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -1,24 +1,26 @@
 <template>
     <div class="dataset history-content">
-        <nav class="p-1 cursor-pointer alert-success mb-1">
+        <nav class="p-1 cursor-pointer alert-success mb-1"  @click.stop="onExpand">
             <div class="overflow-hidden">
                 <div class="float-left pl-1" v-if="selectable">
                     <b-check class="selector" :checked="selected" @change="$emit('update:selected', $event)" />
                 </div>
                 <div>
-                    <IconButton
+                    <b-button
                         v-if="!visible"
-                        class="px-1"
-                        state="hidden"
+                        class="float-right px-1"
                         title="Unhide"
+                        size="sm"
+                        variant="link"
                         icon="eye-slash"
                         @click.stop="$emit('unhide')" />
 
-                    <IconButton
+                    <b-button
                         v-if="deleted"
-                        class="px-1"
-                        state="deleted"
+                        class="float-right px-1"
                         title="Undelete"
+                        size="sm"
+                        variant="link"
                         icon="trash-restore"
                         @click.stop="$emit('undelete')" />
 
@@ -49,7 +51,7 @@
                         <span class="fa fa-eye" />
                     </b-button>
 
-                    <div class="float-left content-title title p-1 overflow-hidden" @click.stop="onExpand">
+                    <div class="float-left content-title title p-1 overflow-hidden">
                         <h5 class="text-truncate">
                             <span class="hid" data-description="dataset hid">{{ id }}:</span>
                             <span class="name" data-description="dataset name">{{ name }}</span>
@@ -68,7 +70,6 @@
 import Placeholder from "./Placeholder";
 import Dataset from "./Dataset/Dataset";
 import DatasetCollection from "./DatasetCollection";
-import IconButton from "components/IconButton";
 //import Subdataset from "./Subdataset";
 //import Subcollection from "./Subcollection";
 
@@ -77,7 +78,6 @@ export default {
         Placeholder,
         Dataset,
         DatasetCollection,
-        IconButton,
         //Subdataset,
         //Subcollection,
     },

From 60d7468ddcdd59f8ca29d170fa2686e696c9f262 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 00:17:23 -0500
Subject: [PATCH 18/95] Add interface to content details

---
 .../History/ContentItem/ContentDetails.vue    | 27 +++++++++++++++++++
 .../History/ContentItem/ContentItem.vue       | 16 +++--------
 2 files changed, 30 insertions(+), 13 deletions(-)
 create mode 100644 client/src/components/History/ContentItem/ContentDetails.vue

diff --git a/client/src/components/History/ContentItem/ContentDetails.vue b/client/src/components/History/ContentItem/ContentDetails.vue
new file mode 100644
index 00000000000..bac320481e2
--- /dev/null
+++ b/client/src/components/History/ContentItem/ContentDetails.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="p-3 details">
+        Content Details
+        <h4 data-description="dataset name">{{ item.name || "(Dataset Name)" }}</h4>
+    </div>
+</template>
+
+<script>
+import Placeholder from "./Placeholder";
+import Dataset from "./Dataset/Dataset";
+import DatasetCollection from "./DatasetCollection";
+import Subdataset from "./Subdataset";
+import Subcollection from "./Subcollection";
+
+export default {
+    components: {
+        Placeholder,
+        Dataset,
+        DatasetCollection,
+        Subdataset,
+        Subcollection,
+    },
+    props: {
+        item: { type: Object, required: true },
+    },
+};
+</script>
diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 53a851761f7..5d6517cdc03 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -59,27 +59,17 @@
                     </div>
                 </div>
             </div>
-            <div v-if="expanded" class="p-3 details">
-                <h4 data-description="dataset name">{{ name || "(Dataset Name)" }}</h4>
-            </div>
+            <ContentDetails v-if="expanded" :item="item" />
         </nav>
     </div>
 </template>
 
 <script>
-import Placeholder from "./Placeholder";
-import Dataset from "./Dataset/Dataset";
-import DatasetCollection from "./DatasetCollection";
-//import Subdataset from "./Subdataset";
-//import Subcollection from "./Subcollection";
+import ContentDetails from "./ContentDetails";
 
 export default {
     components: {
-        Placeholder,
-        Dataset,
-        DatasetCollection,
-        //Subdataset,
-        //Subcollection,
+        ContentDetails,
     },
     props: {
         item: { type: Object, required: true },

From cbe65da54c5ccfe1a2fe9b9c74abae5301756a8f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 00:33:47 -0500
Subject: [PATCH 19/95] Add handler for common item operations

---
 .../History/ContentItem/ContentItem.vue       | 12 ++++++------
 client/src/components/History/History.vue     | 19 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 5d6517cdc03..efdce93386e 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="dataset history-content">
-        <nav class="p-1 cursor-pointer alert-success mb-1"  @click.stop="onExpand">
+        <nav class="p-1 cursor-pointer alert-success mb-1" @click.stop="onExpand">
             <div class="overflow-hidden">
                 <div class="float-left pl-1" v-if="selectable">
                     <b-check class="selector" :checked="selected" @change="$emit('update:selected', $event)" />
@@ -13,7 +13,7 @@
                         size="sm"
                         variant="link"
                         icon="eye-slash"
-                        @click.stop="$emit('unhide')" />
+                        @click.stop="$emit('unhide', item)" />
 
                     <b-button
                         v-if="deleted"
@@ -22,14 +22,14 @@
                         size="sm"
                         variant="link"
                         icon="trash-restore"
-                        @click.stop="$emit('undelete')" />
+                        @click.stop="$emit('undelete', item)" />
 
                     <b-button
                         class="float-right px-1"
                         title="Delete"
                         size="sm"
                         variant="link"
-                        @click.stop="$emit('delete')">
+                        @click.stop="$emit('delete', item)">
                         <span class="fa fa-trash" />
                     </b-button>
 
@@ -38,7 +38,7 @@
                         title="Edit"
                         size="sm"
                         variant="link"
-                        @click.stop="$emit('edit')">
+                        @click.stop="$emit('edit', item)">
                         <span class="fa fa-pencil" />
                     </b-button>
 
@@ -47,7 +47,7 @@
                         title="Display"
                         size="sm"
                         variant="link"
-                        @click.stop="$emit('display')">
+                        @click.stop="$emit('display', item)">
                         <span class="fa fa-eye" />
                     </b-button>
 
diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index 8b9cc84c4ef..d90fe1ce7c6 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -71,7 +71,9 @@
                                     :show-selection="showSelection"
                                     @update:expanded="setExpanded(item, $event)"
                                     @update:selected="setSelected(item, $event)"
-                                    @viewCollection="$emit('viewCollection', item)" />
+                                    @viewCollection="$emit('viewCollection', item)"
+                                    @display="onDisplay"
+                                    @edit="onEdit" />
                             </template>
                         </HistoryListing>
                     </template>
@@ -100,8 +102,10 @@ import ToolHelpModal from "./ToolHelpModal";
 import HistoryMenu from "./HistoryMenu";
 import HistoryListing from "./HistoryListing";
 import ContentItem from "./ContentItem/ContentItem";
+import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
 
 export default {
+    mixins: [legacyNavigationMixin],
     components: {
         LoadingSpan,
         UrlDataProvider,
@@ -162,6 +166,19 @@ export default {
                 this.hiddenItems[item.hid] = true;
             });
         },
+        onDisplay(item) {
+            const id = item.id;
+            this.useGalaxy((Galaxy) => {
+                if (Galaxy.frame && Galaxy.frame.active) {
+                    Galaxy.frame.addDataset(id);
+                } else {
+                    this.iframeRedirect(`datasets/${id}/display/?preview=True`);
+                }
+            });
+        },
+        onEdit(item) {
+            this.backboneRoute("datasets/edit", { dataset_id: item.id });
+        },
     },
 };
 </script>

From 9433dbe4a936a58a82574036bd4ac6ec62d9d605 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 00:41:18 -0500
Subject: [PATCH 20/95] Modify props without overwriting root dictionary

---
 client/src/components/History/History.vue        |  2 +-
 client/src/components/History/HistoryListing.vue | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index d90fe1ce7c6..cc6ce2b212f 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -1,5 +1,5 @@
 <template>
-    <UrlDataProvider :key="history.id" :url="dataUrl" v-slot="{ loading, result: payload }">
+    <UrlDataProvider :key="history.id" :url="dataUrl" auto-refresh v-slot="{ loading, result: payload }">
         <ExpandedItems
             :scope-key="history.id"
             :get-item-key="(item) => item.type_id"
diff --git a/client/src/components/History/HistoryListing.vue b/client/src/components/History/HistoryListing.vue
index 995a4389bcc..c17709a76ad 100644
--- a/client/src/components/History/HistoryListing.vue
+++ b/client/src/components/History/HistoryListing.vue
@@ -60,11 +60,21 @@ export default {
                 this.queryCurrent = this.queryKey;
                 this.items = [];
             } else if (this.payload) {
+                let hasNewItems = false;
                 for (const item of this.payload) {
                     const itemIndex = item[this.itemKey];
-                    this.items[itemIndex] = item;
+                    if (this.items[itemIndex]) {
+                        const localItem = this.items[itemIndex];
+                        localItem.name = item.name;
+                        localItem.hid = item.hid;
+                    } else {
+                        hasNewItems = true;
+                        this.items[itemIndex] = item;
+                    }
+                }
+                if (hasNewItems) {
+                    this.items = this.items.slice();
                 }
-                this.items = this.items.slice();
             }
         },
         onScroll(event) {

From 428e8754402203fe4ed29a93e1f25d3ee371cf0b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 00:44:54 -0500
Subject: [PATCH 21/95] Copy all keys when updating the reactive item source
 dictionary

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

diff --git a/client/src/components/History/HistoryListing.vue b/client/src/components/History/HistoryListing.vue
index c17709a76ad..5c237a83c3b 100644
--- a/client/src/components/History/HistoryListing.vue
+++ b/client/src/components/History/HistoryListing.vue
@@ -65,8 +65,9 @@ export default {
                     const itemIndex = item[this.itemKey];
                     if (this.items[itemIndex]) {
                         const localItem = this.items[itemIndex];
-                        localItem.name = item.name;
-                        localItem.hid = item.hid;
+                        Object.keys(localItem).forEach((key) => {
+                            localItem[key] = item[key];
+                        });
                     } else {
                         hasNewItems = true;
                         this.items[itemIndex] = item;

From 749956e339a5222783d3cf6586a107a062e7eeba Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 01:47:56 -0500
Subject: [PATCH 22/95] Map item state to component variant

---
 .../History/ContentItem/ContentItem.vue       | 11 +++---
 .../History/ContentItem/ContentState.js       | 34 +++++++++++++++++++
 2 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/History/ContentItem/ContentState.js

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index efdce93386e..fd369ee2788 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="dataset history-content">
-        <nav class="p-1 cursor-pointer alert-success mb-1" @click.stop="onExpand">
+    <div :class="['dataset history-content m-1 p-0', clsState]">
+        <div class="p-1 cursor-pointer" @click.stop="onExpand">
             <div class="overflow-hidden">
                 <div class="float-left pl-1" v-if="selectable">
                     <b-check class="selector" :checked="selected" @change="$emit('update:selected', $event)" />
@@ -60,13 +60,13 @@
                 </div>
             </div>
             <ContentDetails v-if="expanded" :item="item" />
-        </nav>
+        </div>
     </div>
 </template>
 
 <script>
 import ContentDetails from "./ContentDetails";
-
+import ContentState from "./ContentState";
 export default {
     components: {
         ContentDetails,
@@ -104,6 +104,9 @@ export default {
         deleted() {
             return this.item.isDeleted && !this.item.purged;
         },
+        clsState() {
+            return `alert-${ContentState[this.item.state] || "info"}`;
+        },
     },
     created() {
         this.$root.$on("bv::dropdown::show", () => (this.suppressFocus = true));
diff --git a/client/src/components/History/ContentItem/ContentState.js b/client/src/components/History/ContentItem/ContentState.js
new file mode 100644
index 00000000000..8af3b2ff8f6
--- /dev/null
+++ b/client/src/components/History/ContentItem/ContentState.js
@@ -0,0 +1,34 @@
+export default {
+    /** is uploading and not ready */
+    upload: "warning",
+    /** the job that will produce the dataset queued in the runner */
+    queued: "warning",
+    /** the job that will produce the dataset is running */
+    running: "warning",
+    /** metadata for the dataset is being discovered/set */
+    setting_metadata: "warning",
+    /** was created without a tool */
+    new: "warning",
+    /** job is being created, but not put into job queue yet */
+    waiting: "default",
+    /** has no data */
+    empty: "danger",
+    /** has successfully completed running */
+    ok: "success",
+    /** the job that will produce the dataset paused */
+    paused: "info",
+    /** metadata discovery/setting failed or errored (but otherwise ok) */
+    failed_metadata: "danger",
+    /** the tool producing this dataset failed */
+    error: "danger",
+    /** deleted while uploading */
+    discarded: "danger",
+
+    //TODO: not in trans.app.model.Dataset.states - is in database
+    /** not accessible to the current user (i.e. due to permissions) */
+    noPermission: "danger",
+    // found in job-state summary model?
+    // this an actual state value or something derived from deleted prop?
+    deleted: "danger",
+    loading: "warning",
+};

From 48007737b04ccb788579d90a05861bcbdedc3a4f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 02:17:14 -0500
Subject: [PATCH 23/95] Consolidate common item component markup

---
 .../History/ContentItem/ContentItem.vue       | 84 ++++++++-----------
 1 file changed, 33 insertions(+), 51 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index fd369ee2788..aaec8667035 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -1,66 +1,49 @@
 <template>
-    <div :class="['dataset history-content m-1 p-0', clsState]">
+    <div :class="['dataset history-content m-1 p-0 rounded', clsState]">
         <div class="p-1 cursor-pointer" @click.stop="onExpand">
             <div class="overflow-hidden">
-                <div class="float-left pl-1" v-if="selectable">
-                    <b-check class="selector" :checked="selected" @change="$emit('update:selected', $event)" />
-                </div>
-                <div>
+                <div class="float-right">
                     <b-button
-                        v-if="!visible"
-                        class="float-right px-1"
-                        title="Unhide"
-                        size="sm"
-                        variant="link"
-                        icon="eye-slash"
-                        @click.stop="$emit('unhide', item)" />
-
-                    <b-button
-                        v-if="deleted"
-                        class="float-right px-1"
-                        title="Undelete"
-                        size="sm"
-                        variant="link"
-                        icon="trash-restore"
-                        @click.stop="$emit('undelete', item)" />
-
-                    <b-button
-                        class="float-right px-1"
-                        title="Delete"
-                        size="sm"
-                        variant="link"
-                        @click.stop="$emit('delete', item)">
-                        <span class="fa fa-trash" />
-                    </b-button>
-
-                    <b-button
-                        class="float-right px-1"
-                        title="Edit"
-                        size="sm"
-                        variant="link"
-                        @click.stop="$emit('edit', item)">
-                        <span class="fa fa-pencil" />
-                    </b-button>
-
-                    <b-button
-                        class="float-right px-1"
+                        class="px-1"
                         title="Display"
                         size="sm"
                         variant="link"
                         @click.stop="$emit('display', item)">
                         <span class="fa fa-eye" />
                     </b-button>
-
-                    <div class="float-left content-title title p-1 overflow-hidden">
-                        <h5 class="text-truncate">
-                            <span class="hid" data-description="dataset hid">{{ id }}:</span>
-                            <span class="name" data-description="dataset name">{{ name }}</span>
-                        </h5>
-                    </div>
+                    <b-button class="px-1" title="Edit" size="sm" variant="link" @click.stop="$emit('edit', item)">
+                        <span class="fa fa-pencil" />
+                    </b-button>
+                    <b-button class="px-1" title="Delete" size="sm" variant="link" @click.stop="$emit('delete', item)">
+                        <span class="fa fa-trash" />
+                    </b-button>
+                    <b-button
+                        v-if="!visible"
+                        class="px-1"
+                        title="Unhide"
+                        size="sm"
+                        variant="link"
+                        icon="eye-slash"
+                        @click.stop="$emit('unhide', item)" />
+                    <b-button
+                        v-if="deleted"
+                        class="px-1"
+                        title="Undelete"
+                        size="sm"
+                        variant="link"
+                        icon="trash-restore"
+                        @click.stop="$emit('undelete', item)" />
                 </div>
+                <div class="float-left pl-1" v-if="selectable">
+                    <b-check class="selector" :checked="selected" @change="$emit('update:selected', $event)" />
+                </div>
+                <h5 class="float-left title p-1">
+                    <span class="hid" data-description="dataset hid">{{ id }}:</span>
+                    <span class="name" data-description="dataset name">{{ name }}</span>
+                </h5>
             </div>
-            <ContentDetails v-if="expanded" :item="item" />
         </div>
+        <ContentDetails v-if="expanded" :item="item" />
     </div>
 </template>
 
@@ -114,7 +97,6 @@ export default {
     },
     methods: {
         onExpand() {
-            console.log(this.expanded);
             this.$emit("update:expanded", !this.expanded);
         },
         setFocus(index) {

From 76175a60d6121ac3b0f56c28202bd23ccbe3d483 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 02:28:39 -0500
Subject: [PATCH 24/95] Show button group in for basic item operations

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

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index aaec8667035..332e3ab7603 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -2,7 +2,7 @@
     <div :class="['dataset history-content m-1 p-0 rounded', clsState]">
         <div class="p-1 cursor-pointer" @click.stop="onExpand">
             <div class="overflow-hidden">
-                <div class="float-right">
+                <div class="btn-group float-right">
                     <b-button
                         class="px-1"
                         title="Display"

From a029afa3936cc97d4dbfb0d6ee30f4e2f0f6af71 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 02:44:51 -0500
Subject: [PATCH 25/95] Rename pseudo class, fix padding in basic item
 component

---
 client/src/components/History/ContentItem/ContentItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 332e3ab7603..d30304c5b96 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="['dataset history-content m-1 p-0 rounded', clsState]">
+    <div :class="['content-item m-1 p-0 rounded', clsState]">
         <div class="p-1 cursor-pointer" @click.stop="onExpand">
             <div class="overflow-hidden">
                 <div class="btn-group float-right">
@@ -34,7 +34,7 @@
                         icon="trash-restore"
                         @click.stop="$emit('undelete', item)" />
                 </div>
-                <div class="float-left pl-1" v-if="selectable">
+                <div class="float-left py-1 pl-1" v-if="selectable">
                     <b-check class="selector" :checked="selected" @change="$emit('update:selected', $event)" />
                 </div>
                 <h5 class="float-left title p-1">

From ac3a0b73995398c2120228de7b6887a72b20a655 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 04:21:46 -0500
Subject: [PATCH 26/95] Replace bootstrap checkbox with regular markup, odd
 behavior when collapsing datasets

---
 .../History/ContentItem/ContentDetails.vue    |  2 +-
 .../History/ContentItem/ContentItem.vue       | 29 ++++++++++++++-----
 .../src/components/History/SelectedItems.js   |  4 +--
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentDetails.vue b/client/src/components/History/ContentItem/ContentDetails.vue
index bac320481e2..70a6e70b554 100644
--- a/client/src/components/History/ContentItem/ContentDetails.vue
+++ b/client/src/components/History/ContentItem/ContentDetails.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-3 details">
+    <div class="p-2 details">
         Content Details
         <h4 data-description="dataset name">{{ item.name || "(Dataset Name)" }}</h4>
     </div>
diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index d30304c5b96..60199f08ebd 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -34,12 +34,16 @@
                         icon="trash-restore"
                         @click.stop="$emit('undelete', item)" />
                 </div>
-                <div class="float-left py-1 pl-1" v-if="selectable">
-                    <b-check class="selector" :checked="selected" @change="$emit('update:selected', $event)" />
-                </div>
-                <h5 class="float-left title p-1">
-                    <span class="hid" data-description="dataset hid">{{ id }}:</span>
-                    <span class="name" data-description="dataset name">{{ name }}</span>
+                <h5 class="float-left p-1 w-75 font-weight-bold">
+                    <div v-if="selectable" class="selector float-left mr-2">
+                        <span
+                            v-if="selected"
+                            class="fa fa-lg fa-check-square-o"
+                            @click.stop="$emit('update:selected', false)" />
+                        <span v-else class="fa fa-lg fa-square-o" @click.stop="$emit('update:selected', true)" />
+                    </div>
+                    <span class="id" data-description="id">{{ id }}:</span>
+                    <span class="name" data-description="name">{{ name }}</span>
                 </h5>
             </div>
         </div>
@@ -59,6 +63,7 @@ export default {
         id: { type: Number, required: true },
         name: { type: String, required: true },
         expanded: { type: Boolean, required: true },
+        selected: { type: Boolean, required: true },
         showSelection: { type: Boolean, required: false, default: false },
         index: { type: Number, required: false, default: null },
         rowKey: { type: [Number, String], required: false, default: "" },
@@ -66,7 +71,6 @@ export default {
     },
     data: () => ({
         suppressFocus: true,
-        selected: false,
     }),
     computed: {
         loading() {
@@ -88,7 +92,11 @@ export default {
             return this.item.isDeleted && !this.item.purged;
         },
         clsState() {
-            return `alert-${ContentState[this.item.state] || "info"}`;
+            let state = ContentState[this.item.state];
+            if (!state || this.selected) {
+                state = "info";
+            }
+            return `alert-${state}`;
         },
     },
     created() {
@@ -134,3 +142,8 @@ export default {
     },
 };
 </script>
+<style>
+.content-item:hover {
+    filter: brightness(105%);
+}
+</style>
diff --git a/client/src/components/History/SelectedItems.js b/client/src/components/History/SelectedItems.js
index 954387ae3d4..27fdc74632b 100644
--- a/client/src/components/History/SelectedItems.js
+++ b/client/src/components/History/SelectedItems.js
@@ -28,10 +28,10 @@ export default {
             const key = this.getItemKey(item);
             return this.items.has(key);
         },
-        setSelected(item, bSelected) {
+        setSelected(item, selected) {
             const key = this.getItemKey(item);
             const newSelected = new Map(this.items);
-            bSelected ? newSelected.set(key, item) : newSelected.delete(key);
+            selected ? newSelected.set(key, item) : newSelected.delete(key);
             this.items = newSelected;
         },
         selectItems(items = []) {

From 4d3de9761e6aaa04c456269ba1a2749ba843f486 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 06:14:01 -0500
Subject: [PATCH 27/95] Move detail component methods to content details
 component

---
 .../History/ContentItem/ContentDetails.vue    | 30 +++++++++++
 .../History/ContentItem/ContentItem.vue       | 52 +------------------
 2 files changed, 31 insertions(+), 51 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentDetails.vue b/client/src/components/History/ContentItem/ContentDetails.vue
index 70a6e70b554..3fdab39d965 100644
--- a/client/src/components/History/ContentItem/ContentDetails.vue
+++ b/client/src/components/History/ContentItem/ContentDetails.vue
@@ -23,5 +23,35 @@ export default {
     props: {
         item: { type: Object, required: true },
     },
+    methods: {
+        contentItemComponent() {
+            if (this.item.id === undefined) {
+                return "Placeholder";
+            }
+            return this.historyContentItem();
+        },
+        historyContentItem() {
+            const { history_content_type } = this.item;
+            switch (history_content_type) {
+                case "dataset":
+                    return "Dataset";
+                case "dataset_collection":
+                    return "DatasetCollection";
+                default:
+                    return "Placeholder";
+            }
+        },
+        collectionContentItem() {
+            const { element_type } = this.item;
+            switch (element_type) {
+                case "hda":
+                    return "Subdataset";
+                case "hdca":
+                    return "Subcollection";
+                default:
+                    return "Placeholder";
+            }
+        },
+    },
 };
 </script>
diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 60199f08ebd..602b56c1cad 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="['content-item m-1 p-0 rounded', clsState]">
-        <div class="p-1 cursor-pointer" @click.stop="onExpand">
+        <div class="p-1 cursor-pointer" @click.stop="$emit('update:expanded', !expanded)">
             <div class="overflow-hidden">
                 <div class="btn-group float-right">
                     <b-button
@@ -65,23 +65,12 @@ export default {
         expanded: { type: Boolean, required: true },
         selected: { type: Boolean, required: true },
         showSelection: { type: Boolean, required: false, default: false },
-        index: { type: Number, required: false, default: null },
-        rowKey: { type: [Number, String], required: false, default: "" },
         writable: { type: Boolean, required: false, default: true },
     },
-    data: () => ({
-        suppressFocus: true,
-    }),
     computed: {
         loading() {
             return !this.item;
         },
-        contentItemComponent() {
-            if (this.item.id === undefined) {
-                return "Placeholder";
-            }
-            return this.historyContentItem();
-        },
         selectable() {
             return this.showSelection;
         },
@@ -100,45 +89,6 @@ export default {
         },
     },
     created() {
-        this.$root.$on("bv::dropdown::show", () => (this.suppressFocus = true));
-        this.$root.$on("bv::dropdown::hide", () => (this.suppressFocus = false));
-    },
-    methods: {
-        onExpand() {
-            this.$emit("update:expanded", !this.expanded);
-        },
-        setFocus(index) {
-            if (this.suppressFocus) {
-                return;
-            }
-            const ul = this.$el.closest(".scroller");
-            const el = ul.querySelector(`[tabindex="${index}"]`);
-            if (el) {
-                el.focus();
-            }
-        },
-        historyContentItem() {
-            const { history_content_type } = this.item;
-            switch (history_content_type) {
-                case "dataset":
-                    return "Dataset";
-                case "dataset_collection":
-                    return "DatasetCollection";
-                default:
-                    return "Placeholder";
-            }
-        },
-        collectionContentItem() {
-            const { element_type } = this.item;
-            switch (element_type) {
-                case "hda":
-                    return "Subdataset";
-                case "hdca":
-                    return "Subcollection";
-                default:
-                    return "Placeholder";
-            }
-        },
     },
 };
 </script>

From ff84eb8b66639dd78110d394ffd17a73ce4cd878 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 06:24:09 -0500
Subject: [PATCH 28/95] Add basic collection details to shared item component

---
 .../components/History/ContentItem/ContentItem.vue   | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 602b56c1cad..1b3167fa28a 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -42,8 +42,11 @@
                             @click.stop="$emit('update:selected', false)" />
                         <span v-else class="fa fa-lg fa-square-o" @click.stop="$emit('update:selected', true)" />
                     </div>
-                    <span class="id" data-description="id">{{ id }}:</span>
-                    <span class="name" data-description="name">{{ name }}</span>
+                    <span class="id">{{ id }}:</span>
+                    <span class="name">{{ name }}</span>
+                    <h6 v-if="item.collection_type" class="description py-1">
+                        a {{ item.collection_type }} with {{ item.element_count }} items
+                    </h6>
                 </h5>
             </div>
         </div>
@@ -81,7 +84,7 @@ export default {
             return this.item.isDeleted && !this.item.purged;
         },
         clsState() {
-            let state = ContentState[this.item.state];
+            let state = ContentState[this.item.state] || ContentState[this.item.populated_state];
             if (!state || this.selected) {
                 state = "info";
             }
@@ -89,6 +92,9 @@ export default {
         },
     },
     created() {
+        if (this.item.history_content_type != "dataset") {
+            console.log(this.item);
+        }
     },
 };
 </script>

From ae8a02e6a3a23e448a990bb7fb7e9ade675ad157 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 13:13:04 -0500
Subject: [PATCH 29/95] Add support to delete history items by clicking on the
 trash icon

---
 client/src/components/History/History.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index cc6ce2b212f..2fb62f661b3 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -73,7 +73,8 @@
                                     @update:selected="setSelected(item, $event)"
                                     @viewCollection="$emit('viewCollection', item)"
                                     @display="onDisplay"
-                                    @edit="onEdit" />
+                                    @edit="onEdit"
+                                    @delete="onDelete" />
                             </template>
                         </HistoryListing>
                     </template>
@@ -89,6 +90,7 @@
 
 <script>
 import { History } from "./model";
+import { deleteContent } from "./model/queries";
 import LoadingSpan from "components/LoadingSpan";
 import { UrlDataProvider } from "components/providers/UrlDataProvider";
 import ExpandedItems from "./ExpandedItems";
@@ -179,6 +181,10 @@ export default {
         onEdit(item) {
             this.backboneRoute("datasets/edit", { dataset_id: item.id });
         },
+        onDelete(item) {
+            this.hiddenItems[item.hid] = true;
+            deleteContent(item);
+        },
     },
 };
 </script>

From 0f2d4a43611f686450e536d09efb8eecb19b37a5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 13:28:41 -0500
Subject: [PATCH 30/95] Fix option visibility in item contents, disable delete
 when data is purged

---
 .../History/ContentItem/ContentItem.vue       | 46 +++++++++----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 1b3167fa28a..a32ede0021b 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -14,25 +14,34 @@
                     <b-button class="px-1" title="Edit" size="sm" variant="link" @click.stop="$emit('edit', item)">
                         <span class="fa fa-pencil" />
                     </b-button>
-                    <b-button class="px-1" title="Delete" size="sm" variant="link" @click.stop="$emit('delete', item)">
-                        <span class="fa fa-trash" />
-                    </b-button>
                     <b-button
-                        v-if="!visible"
-                        class="px-1"
-                        title="Unhide"
-                        size="sm"
-                        variant="link"
-                        icon="eye-slash"
-                        @click.stop="$emit('unhide', item)" />
-                    <b-button
-                        v-if="deleted"
+                        v-if="item.deleted"
                         class="px-1"
                         title="Undelete"
                         size="sm"
                         variant="link"
-                        icon="trash-restore"
-                        @click.stop="$emit('undelete', item)" />
+                        :disabled="item.purged"
+                        @click.stop="$emit('undelete', item)">
+                        <span class="fa fa-trash-restore" />
+                    </b-button>
+                    <b-button
+                        v-else
+                        class="px-1"
+                        title="Delete"
+                        size="sm"
+                        variant="link"
+                        @click.stop="$emit('delete', item)">
+                        <span class="fa fa-trash" />
+                    </b-button>
+                    <b-button
+                        v-if="!item.visible"
+                        class="px-1"
+                        title="Unhide"
+                        size="sm"
+                        variant="link"
+                        @click.stop="$emit('unhide', item)">
+                        <span class="fa fa-eye-slash" />
+                    </b-button>
                 </div>
                 <h5 class="float-left p-1 w-75 font-weight-bold">
                     <div v-if="selectable" class="selector float-left mr-2">
@@ -71,18 +80,9 @@ export default {
         writable: { type: Boolean, required: false, default: true },
     },
     computed: {
-        loading() {
-            return !this.item;
-        },
         selectable() {
             return this.showSelection;
         },
-        visible() {
-            return this.item.visible;
-        },
-        deleted() {
-            return this.item.isDeleted && !this.item.purged;
-        },
         clsState() {
             let state = ContentState[this.item.state] || ContentState[this.item.populated_state];
             if (!state || this.selected) {

From 6fde44a0c9c22184c803b2e15dfcdd42e544365b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 19:06:27 -0500
Subject: [PATCH 31/95] Force word wrapping in item content title

---
 client/src/components/History/ContentItem/ContentItem.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index a32ede0021b..e3c030d09e5 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -102,4 +102,9 @@ export default {
 .content-item:hover {
     filter: brightness(105%);
 }
+.content-item {
+    .name {
+        word-wrap: break-word;
+    }
+}
 </style>

From 1fb17d0c96230d4a85410fe88c63aa672b9db995 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 19:30:28 -0500
Subject: [PATCH 32/95] Add support to unhide and undelete datasets, place in
 history component for now

---
 .../components/History/ContentItem/ContentItem.vue |  2 +-
 client/src/components/History/History.vue          | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index e3c030d09e5..3158a07267a 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -40,7 +40,7 @@
                         size="sm"
                         variant="link"
                         @click.stop="$emit('unhide', item)">
-                        <span class="fa fa-eye-slash" />
+                        <span class="fa fa-unlock" />
                     </b-button>
                 </div>
                 <h5 class="float-left p-1 w-75 font-weight-bold">
diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index 2fb62f661b3..99ffc2de750 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -74,7 +74,9 @@
                                     @viewCollection="$emit('viewCollection', item)"
                                     @display="onDisplay"
                                     @edit="onEdit"
-                                    @delete="onDelete" />
+                                    @delete="onDelete"
+                                    @undelete="onUndelete"
+                                    @unhide="onUnhide" />
                             </template>
                         </HistoryListing>
                     </template>
@@ -90,7 +92,7 @@
 
 <script>
 import { History } from "./model";
-import { deleteContent } from "./model/queries";
+import { deleteContent, updateContentFields } from "./model/queries";
 import LoadingSpan from "components/LoadingSpan";
 import { UrlDataProvider } from "components/providers/UrlDataProvider";
 import ExpandedItems from "./ExpandedItems";
@@ -185,6 +187,14 @@ export default {
             this.hiddenItems[item.hid] = true;
             deleteContent(item);
         },
+        onUndelete(item) {
+            this.hiddenItems[item.hid] = true;
+            updateContentFields(item, { deleted: false });
+        },
+        onUnhide(item) {
+            this.hiddenItems[item.hid] = true;
+            updateContentFields(item, { visible: true });
+        },
     },
 };
 </script>

From 4ab25f2aac03c624d327c305d607415b06b3518c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 19:47:50 -0500
Subject: [PATCH 33/95] Add event handling differing between dataset from
 collections

---
 .../History/ContentItem/ContentItem.vue       | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 3158a07267a..263fe5e06fd 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -1,9 +1,10 @@
 <template>
     <div :class="['content-item m-1 p-0 rounded', clsState]">
-        <div class="p-1 cursor-pointer" @click.stop="$emit('update:expanded', !expanded)">
+        <div class="p-1 cursor-pointer" @click.stop="onClick">
             <div class="overflow-hidden">
                 <div class="btn-group float-right">
                     <b-button
+                        v-if="isDataset"
                         class="px-1"
                         title="Display"
                         size="sm"
@@ -11,7 +12,13 @@
                         @click.stop="$emit('display', item)">
                         <span class="fa fa-eye" />
                     </b-button>
-                    <b-button class="px-1" title="Edit" size="sm" variant="link" @click.stop="$emit('edit', item)">
+                    <b-button
+                        v-if="isDataset"
+                        class="px-1"
+                        title="Edit"
+                        size="sm"
+                        variant="link"
+                        @click.stop="$emit('edit', item)">
                         <span class="fa fa-pencil" />
                     </b-button>
                     <b-button
@@ -83,6 +90,9 @@ export default {
         selectable() {
             return this.showSelection;
         },
+        isDataset() {
+            return this.item.history_content_type == "dataset";
+        },
         clsState() {
             let state = ContentState[this.item.state] || ContentState[this.item.populated_state];
             if (!state || this.selected) {
@@ -91,10 +101,14 @@ export default {
             return `alert-${state}`;
         },
     },
-    created() {
-        if (this.item.history_content_type != "dataset") {
-            console.log(this.item);
-        }
+    methods: {
+        onClick() {
+            if (this.isDataset) {
+                this.$emit("update:expanded", !this.expanded);
+            } else {
+                this.$emit("viewCollection", this.item);
+            }
+        },
     },
 };
 </script>

From 861f4cfe29bb5f9683ad2c36687cc79bca451d58 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 20:42:49 -0500
Subject: [PATCH 34/95] Hide options in collection display

---
 .../History/ContentItem/ContentItem.vue       | 23 ++++++++++---------
 .../History/CurrentCollection/Panel.vue       |  5 ++--
 client/src/components/History/History.vue     |  3 ++-
 .../src/components/History/HistoryListing.vue |  2 +-
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 263fe5e06fd..4cd6ec14cf6 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -22,7 +22,7 @@
                         <span class="fa fa-pencil" />
                     </b-button>
                     <b-button
-                        v-if="item.deleted"
+                        v-if="writeable && item.deleted"
                         class="px-1"
                         title="Undelete"
                         size="sm"
@@ -32,7 +32,7 @@
                         <span class="fa fa-trash-restore" />
                     </b-button>
                     <b-button
-                        v-else
+                        v-else-if="writeable"
                         class="px-1"
                         title="Delete"
                         size="sm"
@@ -41,7 +41,7 @@
                         <span class="fa fa-trash" />
                     </b-button>
                     <b-button
-                        v-if="!item.visible"
+                        v-if="writeable && !item.visible"
                         class="px-1"
                         title="Unhide"
                         size="sm"
@@ -81,26 +81,27 @@ export default {
         item: { type: Object, required: true },
         id: { type: Number, required: true },
         name: { type: String, required: true },
+        state: { type: String, default: null },
         expanded: { type: Boolean, required: true },
-        selected: { type: Boolean, required: true },
-        showSelection: { type: Boolean, required: false, default: false },
-        writable: { type: Boolean, required: false, default: true },
+        selected: { type: Boolean, default: false },
+        selectable: { type: Boolean, default: false },
+        writeable: { type: Boolean, default: true },
     },
     computed: {
-        selectable() {
-            return this.showSelection;
-        },
         isDataset() {
-            return this.item.history_content_type == "dataset";
+            return this.item.history_content_type == "dataset" || this.item.element_type == "hda";
         },
         clsState() {
-            let state = ContentState[this.item.state] || ContentState[this.item.populated_state];
+            let state = ContentState[this.state];
             if (!state || this.selected) {
                 state = "info";
             }
             return `alert-${state}`;
         },
     },
+    created() {
+        console.log(this.item);
+    },
     methods: {
         onClick() {
             if (this.isDataset) {
diff --git a/client/src/components/History/CurrentCollection/Panel.vue b/client/src/components/History/CurrentCollection/Panel.vue
index 408dc75fbde..4f4d7992fa4 100644
--- a/client/src/components/History/CurrentCollection/Panel.vue
+++ b/client/src/components/History/CurrentCollection/Panel.vue
@@ -33,9 +33,10 @@
                         <template v-slot:history-item="{ item, index }">
                             <ContentItem
                                 :item="item"
-                                :index="index"
+                                :id="item.element_index"
+                                :name="item.element_identifier"
                                 :expanded="isExpanded(item)"
-                                :writable="false"
+                                :writeable="false"
                                 :selectable="false"
                                 @update:expanded="setExpanded(item, $event)"
                                 @viewCollection="$emit('viewCollection', item)" />
diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index 99ffc2de750..11847375843 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -66,9 +66,10 @@
                                     :item="item"
                                     :id="item.hid"
                                     :name="item.name"
+                                    :state="item.state || item.populated_state"
                                     :expanded="isExpanded(item)"
                                     :selected="isSelected(item)"
-                                    :show-selection="showSelection"
+                                    :selectable="showSelection"
                                     @update:expanded="setExpanded(item, $event)"
                                     @update:selected="setSelected(item, $event)"
                                     @viewCollection="$emit('viewCollection', item)"
diff --git a/client/src/components/History/HistoryListing.vue b/client/src/components/History/HistoryListing.vue
index 5c237a83c3b..b4572456b43 100644
--- a/client/src/components/History/HistoryListing.vue
+++ b/client/src/components/History/HistoryListing.vue
@@ -4,7 +4,7 @@
         @scroll.prevent="onScrollThrottle"
         @wheel.prevent="onScrollThrottle"
         @touchmove.prevent="onScrollThrottle">
-        <virtual-list ref="listing" class="listing" data-key="hid" :data-sources="getItems" :data-component="{}">
+        <virtual-list ref="listing" class="listing" :data-key="itemKey" :data-sources="getItems" :data-component="{}">
             <template v-slot:item="{ item }">
                 <slot name="history-item" :item="item" />
             </template>

From de368c900594c69d71da008cba0c966605d9fdc9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 21:00:36 -0500
Subject: [PATCH 35/95] Determine expansion vs drilldown in surrounding
 component wrapper

---
 .../History/ContentItem/ContentItem.vue       | 27 +++++++++----------
 .../{ContentState.js => ContentStatus.js}     |  0
 .../History/CurrentCollection/Panel.vue       |  4 +--
 client/src/components/History/History.vue     |  3 ++-
 4 files changed, 17 insertions(+), 17 deletions(-)
 rename client/src/components/History/ContentItem/{ContentState.js => ContentStatus.js} (100%)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 4cd6ec14cf6..60eccc654db 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -1,10 +1,10 @@
 <template>
-    <div :class="['content-item m-1 p-0 rounded', clsState]">
+    <div :class="['content-item m-1 p-0 rounded', clsStatus]">
         <div class="p-1 cursor-pointer" @click.stop="onClick">
             <div class="overflow-hidden">
                 <div class="btn-group float-right">
                     <b-button
-                        v-if="isDataset"
+                        v-if="expandable"
                         class="px-1"
                         title="Display"
                         size="sm"
@@ -13,7 +13,7 @@
                         <span class="fa fa-eye" />
                     </b-button>
                     <b-button
-                        v-if="isDataset"
+                        v-if="expandable"
                         class="px-1"
                         title="Edit"
                         size="sm"
@@ -72,7 +72,7 @@
 
 <script>
 import ContentDetails from "./ContentDetails";
-import ContentState from "./ContentState";
+import ContentStatus from "./ContentStatus";
 export default {
     components: {
         ContentDetails,
@@ -84,19 +84,18 @@ export default {
         state: { type: String, default: null },
         expanded: { type: Boolean, required: true },
         selected: { type: Boolean, default: false },
+        expandable: { type: Boolean, default: true },
         selectable: { type: Boolean, default: false },
         writeable: { type: Boolean, default: true },
     },
     computed: {
-        isDataset() {
-            return this.item.history_content_type == "dataset" || this.item.element_type == "hda";
-        },
-        clsState() {
-            let state = ContentState[this.state];
-            if (!state || this.selected) {
-                state = "info";
+        clsStatus() {
+            const status = ContentStatus[this.state];
+            if (!status || this.selected) {
+                return "alert-info";
+            } else {
+                return `alert-${status}`;
             }
-            return `alert-${state}`;
         },
     },
     created() {
@@ -104,10 +103,10 @@ export default {
     },
     methods: {
         onClick() {
-            if (this.isDataset) {
+            if (this.expandable) {
                 this.$emit("update:expanded", !this.expanded);
             } else {
-                this.$emit("viewCollection", this.item);
+                this.$emit("drilldown", this.item);
             }
         },
     },
diff --git a/client/src/components/History/ContentItem/ContentState.js b/client/src/components/History/ContentItem/ContentStatus.js
similarity index 100%
rename from client/src/components/History/ContentItem/ContentState.js
rename to client/src/components/History/ContentItem/ContentStatus.js
diff --git a/client/src/components/History/CurrentCollection/Panel.vue b/client/src/components/History/CurrentCollection/Panel.vue
index 4f4d7992fa4..44516101f69 100644
--- a/client/src/components/History/CurrentCollection/Panel.vue
+++ b/client/src/components/History/CurrentCollection/Panel.vue
@@ -35,11 +35,11 @@
                                 :item="item"
                                 :id="item.element_index"
                                 :name="item.element_identifier"
+                                :expandable="item.element_type == 'hda'"
                                 :expanded="isExpanded(item)"
                                 :writeable="false"
-                                :selectable="false"
                                 @update:expanded="setExpanded(item, $event)"
-                                @viewCollection="$emit('viewCollection', item)" />
+                                @drilldown="$emit('viewCollection', item)" />
                         </template>
                     </HistoryListing>
                 </template>
diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index 11847375843..72322bd2bf6 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -68,11 +68,12 @@
                                     :name="item.name"
                                     :state="item.state || item.populated_state"
                                     :expanded="isExpanded(item)"
+                                    :expandable="item.history_content_type == 'dataset'"
                                     :selected="isSelected(item)"
                                     :selectable="showSelection"
                                     @update:expanded="setExpanded(item, $event)"
                                     @update:selected="setSelected(item, $event)"
-                                    @viewCollection="$emit('viewCollection', item)"
+                                    @drilldown="$emit('viewCollection', item)"
                                     @display="onDisplay"
                                     @edit="onEdit"
                                     @delete="onDelete"

From 52105f3502aa6738d928d326186411ce4e23d7a8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 21:07:58 -0500
Subject: [PATCH 36/95] Parse state for history element items

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

diff --git a/client/src/components/History/CurrentCollection/Panel.vue b/client/src/components/History/CurrentCollection/Panel.vue
index 44516101f69..89480af27d9 100644
--- a/client/src/components/History/CurrentCollection/Panel.vue
+++ b/client/src/components/History/CurrentCollection/Panel.vue
@@ -36,6 +36,7 @@
                                 :id="item.element_index"
                                 :name="item.element_identifier"
                                 :expandable="item.element_type == 'hda'"
+                                :state="item.object.state"
                                 :expanded="isExpanded(item)"
                                 :writeable="false"
                                 @update:expanded="setExpanded(item, $event)"

From 6e49f326d7647f737b771c93647981bb1532083b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 21:49:51 -0500
Subject: [PATCH 37/95] Add edit support for collections

---
 client/src/components/History/ContentItem/ContentItem.vue | 8 +-------
 client/src/components/History/History.vue                 | 6 +++++-
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 60eccc654db..cd0fa455e72 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -12,13 +12,7 @@
                         @click.stop="$emit('display', item)">
                         <span class="fa fa-eye" />
                     </b-button>
-                    <b-button
-                        v-if="expandable"
-                        class="px-1"
-                        title="Edit"
-                        size="sm"
-                        variant="link"
-                        @click.stop="$emit('edit', item)">
+                    <b-button class="px-1" title="Edit" size="sm" variant="link" @click.stop="$emit('edit', item)">
                         <span class="fa fa-pencil" />
                     </b-button>
                     <b-button
diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index 72322bd2bf6..4afb841689b 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -183,7 +183,11 @@ export default {
             });
         },
         onEdit(item) {
-            this.backboneRoute("datasets/edit", { dataset_id: item.id });
+            if (item.collection_type) {
+                this.backboneRoute(`collection/edit/${item.id}`);
+            } else {
+                this.backboneRoute("datasets/edit", { dataset_id: item.id });
+            }
         },
         onDelete(item) {
             this.hiddenItems[item.hid] = true;

From 1a7d2698a617a4420d1bd0450d1dca467c02587e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 22:22:52 -0500
Subject: [PATCH 38/95] Prep content details wrapper

---
 .../History/ContentItem/ContentDetails.vue    | 73 ++++++++-----------
 .../History/ContentItem/ContentItem.vue       |  3 -
 2 files changed, 31 insertions(+), 45 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentDetails.vue b/client/src/components/History/ContentItem/ContentDetails.vue
index 3fdab39d965..69822126d8c 100644
--- a/client/src/components/History/ContentItem/ContentDetails.vue
+++ b/client/src/components/History/ContentItem/ContentDetails.vue
@@ -1,57 +1,46 @@
 <template>
-    <div class="p-2 details">
-        Content Details
-        <h4 data-description="dataset name">{{ item.name || "(Dataset Name)" }}</h4>
-    </div>
+    <UrlDataProvider :url="dataUrl" v-slot="{ loading, result: dataset }">
+        <div class="p-2 details">
+            <div class="summary">
+                <div v-if="dataset.misc_blurb" class="blurb">
+                    <span class="value">{{ dataset.misc_blurb }}</span>
+                </div>
+                <div v-if="dataset.file_ext" class="datatype">
+                    <label class="prompt" v-localize>format</label>
+                    <span class="value">{{ dataset.file_ext }}</span>
+                </div>
+                <div v-if="dataset.genome_build" class="dbkey">
+                    <label class="prompt" v-localize>database</label>
+                    <b-link class="value" @click.stop="listeners['edit']()">{{ dataset.genome_build }}</b-link>
+                </div>
+                <div v-if="dataset.misc_info" class="info">
+                    <span class="value">{{ dataset.misc_info }}</span>
+                </div>
+            </div>
+            <pre v-if="dataset.peek" class="dataset-peek p-1" v-html="dataset.peek" />
+        </div>
+    </UrlDataProvider>
 </template>
 
 <script>
-import Placeholder from "./Placeholder";
-import Dataset from "./Dataset/Dataset";
-import DatasetCollection from "./DatasetCollection";
-import Subdataset from "./Subdataset";
-import Subcollection from "./Subcollection";
+import { UrlDataProvider } from "components/providers/UrlDataProvider";
 
 export default {
     components: {
-        Placeholder,
-        Dataset,
-        DatasetCollection,
-        Subdataset,
-        Subcollection,
+        UrlDataProvider,
     },
     props: {
         item: { type: Object, required: true },
     },
-    methods: {
-        contentItemComponent() {
-            if (this.item.id === undefined) {
-                return "Placeholder";
-            }
-            return this.historyContentItem();
-        },
-        historyContentItem() {
-            const { history_content_type } = this.item;
-            switch (history_content_type) {
-                case "dataset":
-                    return "Dataset";
-                case "dataset_collection":
-                    return "DatasetCollection";
-                default:
-                    return "Placeholder";
-            }
-        },
-        collectionContentItem() {
-            const { element_type } = this.item;
-            switch (element_type) {
-                case "hda":
-                    return "Subdataset";
-                case "hdca":
-                    return "Subcollection";
-                default:
-                    return "Placeholder";
-            }
+    computed: {
+        dataUrl() {
+            //object.id and item.element_type == "hda"
+            const datasetId = this.item.id;
+            return `api/datasets/${datasetId}`;
         },
     },
+    created() {
+        console.log(this.item);
+    },
 };
 </script>
diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index cd0fa455e72..f39f9dd7ef3 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -92,9 +92,6 @@ export default {
             }
         },
     },
-    created() {
-        console.log(this.item);
-    },
     methods: {
         onClick() {
             if (this.expandable) {

From 0d007d8bbee15a9a6af34d9c939a51d62c0a82de Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 15 Feb 2022 23:09:30 -0500
Subject: [PATCH 39/95] Add dataset details component

---
 .../History/ContentItem/ContentDetails.vue    | 42 ++++++++++---------
 .../History/ContentItem/ContentItem.vue       |  2 +-
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentDetails.vue b/client/src/components/History/ContentItem/ContentDetails.vue
index 69822126d8c..e2e267baeb0 100644
--- a/client/src/components/History/ContentItem/ContentDetails.vue
+++ b/client/src/components/History/ContentItem/ContentDetails.vue
@@ -1,23 +1,25 @@
 <template>
-    <UrlDataProvider :url="dataUrl" v-slot="{ loading, result: dataset }">
-        <div class="p-2 details">
-            <div class="summary">
-                <div v-if="dataset.misc_blurb" class="blurb">
-                    <span class="value">{{ dataset.misc_blurb }}</span>
-                </div>
-                <div v-if="dataset.file_ext" class="datatype">
-                    <label class="prompt" v-localize>format</label>
-                    <span class="value">{{ dataset.file_ext }}</span>
-                </div>
-                <div v-if="dataset.genome_build" class="dbkey">
-                    <label class="prompt" v-localize>database</label>
-                    <b-link class="value" @click.stop="listeners['edit']()">{{ dataset.genome_build }}</b-link>
-                </div>
-                <div v-if="dataset.misc_info" class="info">
-                    <span class="value">{{ dataset.misc_info }}</span>
+    <UrlDataProvider :url="dataUrl" v-slot="{ loading, result }">
+        <div v-if="!loading" class="dataset">
+            <div class="p-2 details">
+                <div class="summary">
+                    <div v-if="result.misc_blurb" class="blurb">
+                        <span class="value">{{ result.misc_blurb }}</span>
+                    </div>
+                    <span v-if="result.file_ext" class="datatype">
+                        <label class="prompt" v-localize>format</label>
+                        <span class="value">{{ result.file_ext }}</span>
+                    </span>
+                    <span v-if="result.genome_build" class="dbkey">
+                        <label class="prompt" v-localize>database</label>
+                        <b-link class="value" @click.stop="$emit('edit', dataset)">{{ result.genome_build }}</b-link>
+                    </span>
+                    <div v-if="result.misc_info" class="info">
+                        <span class="value">{{ result.misc_info }}</span>
+                    </div>
                 </div>
+                <pre v-if="result.peek" class="dataset-peek p-1" v-html="result.peek" />
             </div>
-            <pre v-if="dataset.peek" class="dataset-peek p-1" v-html="dataset.peek" />
         </div>
     </UrlDataProvider>
 </template>
@@ -33,9 +35,11 @@ export default {
         item: { type: Object, required: true },
     },
     computed: {
+        dataset() {
+            return this.item.object || this.item;
+        },
         dataUrl() {
-            //object.id and item.element_type == "hda"
-            const datasetId = this.item.id;
+            const datasetId = this.dataset.id;
             return `api/datasets/${datasetId}`;
         },
     },
diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index f39f9dd7ef3..59d22e6804d 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -60,7 +60,7 @@
                 </h5>
             </div>
         </div>
-        <ContentDetails v-if="expanded" :item="item" />
+        <ContentDetails v-if="expanded" @edit="$emit('edit', $event)" :item="item" />
     </div>
 </template>
 

From a44dae9169c3fd7d0129f361d27ea64c7c3a1c75 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Feb 2022 08:06:30 -0500
Subject: [PATCH 40/95] Add item component template, required to continue
 development of scroller

---
 .../History/ContentItem/ContentActions.vue    | 42 +++++++++++++++++++
 .../History/ContentItem/ContentDetails.vue    |  3 ++
 .../History/ContentItem/ContentItem.vue       |  2 +-
 .../src/components/History/HistoryListing.vue |  2 +-
 4 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/History/ContentItem/ContentActions.vue

diff --git a/client/src/components/History/ContentItem/ContentActions.vue b/client/src/components/History/ContentItem/ContentActions.vue
new file mode 100644
index 00000000000..4d3f5a07303
--- /dev/null
+++ b/client/src/components/History/ContentItem/ContentActions.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="mb-1 clearfix">
+        <div class="btn-group float-left">
+            <b-button class="px-1" title="Download" size="sm" variant="link" @click.stop="$emit('save', item)">
+                <span class="fa fa-save" />
+            </b-button>
+            <b-button class="px-1" title="Copy link" size="sm" variant="link" @click.stop="$emit('link', item)">
+                <span class="fa fa-link" />
+            </b-button>
+            <b-button class="px-1" title="Dataset details" size="sm" variant="link" @click.stop="$emit('info', item)">
+                <span class="fa fa-info-circle" />
+            </b-button>
+            <b-button class="px-1" title="Visualize" size="sm" variant="link" @click.stop="$emit('visualize', item)">
+                <span class="fa fa-bar-chart-o" />
+            </b-button>
+            <b-button class="px-1" title="Help" size="sm" variant="link" @click.stop="$emit('help', item)">
+                <span class="fa fa-question" />
+            </b-button>
+        </div>
+        <div class="btn-group float-right">
+            <b-button class="px-1" title="Edit tags" size="sm" variant="link" @click.stop="$emit('tags', item)">
+                <span class="fa fa-tags" />
+            </b-button>
+            <b-button
+                class="px-1"
+                title="Edit annotation"
+                size="sm"
+                variant="link"
+                @click.stop="$emit('annotation', item)">
+                <span class="fa fa-comment" />
+            </b-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        item: { type: Object, required: true },
+    },
+};
+</script>
diff --git a/client/src/components/History/ContentItem/ContentDetails.vue b/client/src/components/History/ContentItem/ContentDetails.vue
index e2e267baeb0..1832015e41b 100644
--- a/client/src/components/History/ContentItem/ContentDetails.vue
+++ b/client/src/components/History/ContentItem/ContentDetails.vue
@@ -18,6 +18,7 @@
                         <span class="value">{{ result.misc_info }}</span>
                     </div>
                 </div>
+                <ContentActions :item="item" />
                 <pre v-if="result.peek" class="dataset-peek p-1" v-html="result.peek" />
             </div>
         </div>
@@ -26,9 +27,11 @@
 
 <script>
 import { UrlDataProvider } from "components/providers/UrlDataProvider";
+import ContentActions from "./ContentActions";
 
 export default {
     components: {
+        ContentActions,
         UrlDataProvider,
     },
     props: {
diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 59d22e6804d..1498885fef6 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="['content-item m-1 p-0 rounded', clsStatus]">
         <div class="p-1 cursor-pointer" @click.stop="onClick">
-            <div class="overflow-hidden">
+            <div class="clearfix overflow-hidden">
                 <div class="btn-group float-right">
                     <b-button
                         v-if="expandable"
diff --git a/client/src/components/History/HistoryListing.vue b/client/src/components/History/HistoryListing.vue
index b4572456b43..fddf78f27ef 100644
--- a/client/src/components/History/HistoryListing.vue
+++ b/client/src/components/History/HistoryListing.vue
@@ -30,7 +30,7 @@ export default {
     data() {
         return {
             items: [],
-            throttlePeriod: 10,
+            throttlePeriod: 20,
             deltaMax: 20,
             queryCurrent: this.queryKey,
         };

From f350412c4c531b43798b9439b9326d82f0cdab1b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Feb 2022 10:17:44 -0500
Subject: [PATCH 41/95] Add copy link for datasets, prep

---
 .../components/History/ContentItem/ContentActions.vue  | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/client/src/components/History/ContentItem/ContentActions.vue b/client/src/components/History/ContentItem/ContentActions.vue
index 4d3f5a07303..924eaa7b8c1 100644
--- a/client/src/components/History/ContentItem/ContentActions.vue
+++ b/client/src/components/History/ContentItem/ContentActions.vue
@@ -34,9 +34,19 @@
 </template>
 
 <script>
+import { copy as sendToClipboard } from "utils/clipboard";
+import { absPath } from "utils/redirect";
+
 export default {
     props: {
         item: { type: Object, required: true },
     },
+    methods: {
+        onCopyLink() {
+            const relPath = this.item.download_url;
+            const msg = this.localize("Link is copied to your clipboard");
+            sendToClipboard(absPath(relPath), msg);
+        },
+    },
 };
 </script>

From 547e728e882c173e5bc7f216d27eaff58497950c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Feb 2022 17:09:34 -0500
Subject: [PATCH 42/95] Explicitly specify conditions for now, to review and
 verify

---
 .../History/ContentItem/ContentItem.vue       | 46 +++++++++++++++++--
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 1498885fef6..589797ba53a 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -4,15 +4,23 @@
             <div class="clearfix overflow-hidden">
                 <div class="btn-group float-right">
                     <b-button
-                        v-if="expandable"
+                        v-if="expandable && item.state !== 'noPermission' && item.state !== 'discarded'"
+                        :disabled="item.purged || item.state == 'upload' || item.state == 'new'"
+                        :title="displayButtonTitle"
                         class="px-1"
-                        title="Display"
                         size="sm"
                         variant="link"
                         @click.stop="$emit('display', item)">
                         <span class="fa fa-eye" />
                     </b-button>
-                    <b-button class="px-1" title="Edit" size="sm" variant="link" @click.stop="$emit('edit', item)">
+                    <b-button
+                        v-if="writeable && item.state != 'discarded'"
+                        :disabled="item.purged || item.deleted || item.state == 'upload' || item.state == 'new'"
+                        class="px-1"
+                        title="Edit"
+                        size="sm"
+                        variant="link"
+                        @click.stop="$emit('edit', item)">
                         <span class="fa fa-pencil" />
                     </b-button>
                     <b-button
@@ -31,6 +39,7 @@
                         title="Delete"
                         size="sm"
                         variant="link"
+                        :disabled="item.purged"
                         @click.stop="$emit('delete', item)">
                         <span class="fa fa-trash" />
                     </b-button>
@@ -83,6 +92,37 @@ export default {
         writeable: { type: Boolean, default: true },
     },
     computed: {
+        editButtonTitle() {
+            if (this.item.deleted) {
+                return "Undelete dataset to edit attributes";
+            }
+            if (this.item.purged) {
+                return "Cannot edit attributes of datasets removed from disk";
+            }
+            if (this.item.state == "upload" || this.item.state != "new") {
+                return "This dataset is not yet editable";
+            }
+            return "Edit attributes";
+        },
+        displayButtonTitle() {
+            if (this.item.purged) {
+                return "Cannot display datasets removed from disk";
+            }
+            if (this.item.state == "upload") {
+                return "This dataset must finish uploading before it can be viewed";
+            }
+            if (this.item.state == "new") {
+                return "This dataset is not yet viewable";
+            }
+            return "View data";
+        },
+        deleteButtonTitle() {
+            return this.item.purged
+                ? "Dataset has been permanently deleted"
+                : this.item.deleted
+                ? "Undelete"
+                : "Delete";
+        },
         clsStatus() {
             const status = ContentStatus[this.state];
             if (!status || this.selected) {

From b8ab967ecf5f2a6ec7b3a0467d4352161e73804c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Feb 2022 18:56:53 -0500
Subject: [PATCH 43/95] Remove content summary components

---
 .../History/ContentItem/ContentActions.vue    | 121 +++++++++++++++++-
 .../History/ContentItem/ContentItem.vue       |   4 +-
 .../History/ContentItem/ContentStatus.js      |  71 +++++++---
 .../ContentItem/Dataset/DatasetMenu.vue       |   5 +
 .../History/ContentItem/Dataset/DatasetUI.vue |   4 +-
 .../ContentItem/Dataset/Summary/Discarded.vue |   5 -
 .../ContentItem/Dataset/Summary/Empty.vue     |   5 -
 .../ContentItem/Dataset/Summary/Error.vue     |  11 --
 .../ContentItem/Dataset/Summary/New.vue       |   5 -
 .../Dataset/Summary/NotViewable.vue           |   5 -
 .../ContentItem/Dataset/Summary/Ok.vue        |  18 ---
 .../ContentItem/Dataset/Summary/Paused.vue    |   8 --
 .../ContentItem/Dataset/Summary/Queued.vue    |   5 -
 .../ContentItem/Dataset/Summary/Running.vue   |   5 -
 .../Dataset/Summary/SettingMetadata.vue       |   5 -
 .../ContentItem/Dataset/Summary/Unknown.vue   |   3 -
 .../ContentItem/Dataset/Summary/Upload.vue    |   5 -
 .../ContentItem/Dataset/Summary/index.vue     |  53 --------
 18 files changed, 177 insertions(+), 161 deletions(-)
 delete mode 100644 client/src/components/History/ContentItem/Dataset/Summary/Discarded.vue
 delete mode 100644 client/src/components/History/ContentItem/Dataset/Summary/Empty.vue
 delete mode 100644 client/src/components/History/ContentItem/Dataset/Summary/Error.vue
 delete mode 100644 client/src/components/History/ContentItem/Dataset/Summary/New.vue
 delete mode 100644 client/src/components/History/ContentItem/Dataset/Summary/NotViewable.vue
 delete mode 100644 client/src/components/History/ContentItem/Dataset/Summary/Ok.vue
 delete mode 100644 client/src/components/History/ContentItem/Dataset/Summary/Paused.vue
 delete mode 100644 client/src/components/History/ContentItem/Dataset/Summary/Queued.vue
 delete mode 100644 client/src/components/History/ContentItem/Dataset/Summary/Running.vue
 delete mode 100644 client/src/components/History/ContentItem/Dataset/Summary/SettingMetadata.vue
 delete mode 100644 client/src/components/History/ContentItem/Dataset/Summary/Unknown.vue
 delete mode 100644 client/src/components/History/ContentItem/Dataset/Summary/Upload.vue
 delete mode 100644 client/src/components/History/ContentItem/Dataset/Summary/index.vue

diff --git a/client/src/components/History/ContentItem/ContentActions.vue b/client/src/components/History/ContentItem/ContentActions.vue
index 924eaa7b8c1..aadf3a2e55d 100644
--- a/client/src/components/History/ContentItem/ContentActions.vue
+++ b/client/src/components/History/ContentItem/ContentActions.vue
@@ -1,19 +1,84 @@
 <template>
     <div class="mb-1 clearfix">
         <div class="btn-group float-left">
-            <b-button class="px-1" title="Download" size="sm" variant="link" @click.stop="$emit('save', item)">
-                <span class="fa fa-save" />
+            <b-button
+                v-if="item.state == 'error'"
+                class="px-1"
+                title="Error"
+                size="sm"
+                variant="link"
+                @click.stop="onError">
+                <span class="fa fa-exclamation-triangle" />
             </b-button>
-            <b-button class="px-1" title="Copy link" size="sm" variant="link" @click.stop="$emit('link', item)">
+            <b-button
+                v-if="showDownloads"
+                class="px-1"
+                title="Copy link"
+                size="sm"
+                variant="link"
+                @click.stop="$emit('link', item)">
                 <span class="fa fa-link" />
             </b-button>
-            <b-button class="px-1" title="Dataset details" size="sm" variant="link" @click.stop="$emit('info', item)">
-                <span class="fa fa-info-circle" />
+            <b-button
+                v-if="showDownloads"
+                :href="downloadUrl"
+                class="px-1"
+                title="Download"
+                size="sm"
+                variant="link"
+                @click.stop="$emit('save', item)">
+                <span class="fa fa-save" />
             </b-button>
-            <b-button class="px-1" title="Visualize" size="sm" variant="link" @click.stop="$emit('visualize', item)">
+            <b-button
+                v-if="item.rerunnable && item.creating_job && item.state != 'upload' && item.state != 'noPermission'"
+                class="px-1"
+                title="Run job again"
+                size="sm"
+                variant="link"
+                @click.stop="onRerun">
+                <span class="fa fa-play" />
+            </b-button>
+            <b-button
+                v-if="item.rerunnable && item.creating_job && item.state != 'upload' && item.state != 'noPermission'"
+                class="px-1"
+                title="Run job again"
+                size="sm"
+                variant="link"
+                @click.stop="onRerun">
+                <span class="fa fa-play" />
+            </b-button>
+            <b-button
+                v-if="showVisualizations"
+                class="px-1"
+                title="Visualize"
+                size="sm"
+                variant="link"
+                @click.stop="onVisualize">
                 <span class="fa fa-bar-chart-o" />
             </b-button>
-            <b-button class="px-1" title="Help" size="sm" variant="link" @click.stop="$emit('help', item)">
+            <b-dropdown-item
+                v-if="item.creating_job"
+                title="Tool Help"
+                @click.stop="showToolHelp(item.creating_job)">
+                <Icon icon="question" class="mr-1" />
+                <span v-localize>Tool Help</span>
+            </b-dropdown-item>
+            <b-button
+                v-if="item.state != 'noPermission'"
+                class="px-1"
+                title="Dataset details"
+                size="sm"
+                variant="link"
+                @click.stop="$emit('info', item)">
+                <span class="fa fa-info-circle" />
+            </b-button>
+            <b-button
+                v-if="item.state != 'noPermission'"
+                class="px-1"
+                title="Help"
+                size="sm"
+                variant="link"
+                @click.stop="$emit('help', item)">
                 <span class="fa fa-question" />
             </b-button>
         </div>
@@ -41,12 +106,54 @@ export default {
     props: {
         item: { type: Object, required: true },
     },
+    computed: {
+        showDownloads() {
+            if (this.item.purged || !this.item.file_size || !this.item.file_size == 0) {
+                return false;
+            }
+            return ["ok", "failed_metadata", "error"].includes(this.item.state);
+        },
+        showVisualizations() {
+            //&& hasViz && isIn(STATES.OK, STATES.FAILED_METADATA)
+            return true;
+        },
+        downloadUrl() {
+            return prependPath(`datasets/${this.item.id}/display?to_ext=${this.item.file_ext}`);
+        },
+    },
     methods: {
         onCopyLink() {
             const relPath = this.item.download_url;
             const msg = this.localize("Link is copied to your clipboard");
             sendToClipboard(absPath(relPath), msg);
         },
+        onError() {
+            /*@click.stop="
+                backboneRoute('datasets/error', {
+                    dataset_id: dataset.id,
+                })
+            ">*/
+        },
+        onRerun() {
+            /*
+            :href="prependPath(dataset.getUrl('rerun'))"
+            backboneRoute('/', {
+                job_id: dataset.creating_job,
+            })*/
+        },
+        onVisualize() {
+            /*const showDetailsUrl = `/datasets/${this.dataset.id}/details`;
+            const redirectParams = {
+                path: showDetailsUrl,
+                title: "Dataset details",
+                tryIframe: false,
+            };
+            if (!this.iframeAdd(redirectParams)) {
+                this.backboneRoute("visualizations", {
+                    dataset_id: this.dataset.id,
+                });
+            }*/
+        },
     },
 };
 </script>
diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 589797ba53a..6c36c0e2ed3 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -75,7 +75,7 @@
 
 <script>
 import ContentDetails from "./ContentDetails";
-import ContentStatus from "./ContentStatus";
+import CONTENTSTATUS from "./contentStatus";
 export default {
     components: {
         ContentDetails,
@@ -124,7 +124,7 @@ export default {
                 : "Delete";
         },
         clsStatus() {
-            const status = ContentStatus[this.state];
+            const status = CONTENTSTATUS[this.state] && CONTENTSTATUS[this.state].status;
             if (!status || this.selected) {
                 return "alert-info";
             } else {
diff --git a/client/src/components/History/ContentItem/ContentStatus.js b/client/src/components/History/ContentItem/ContentStatus.js
index 8af3b2ff8f6..af0924dabc6 100644
--- a/client/src/components/History/ContentItem/ContentStatus.js
+++ b/client/src/components/History/ContentItem/ContentStatus.js
@@ -1,34 +1,73 @@
 export default {
     /** is uploading and not ready */
-    upload: "warning",
+    upload: {
+        status: "warning",
+        text: "This dataset is currently uploading.",
+    },
     /** the job that will produce the dataset queued in the runner */
-    queued: "warning",
+    queued: {
+        status: "warning",
+        text: "This job is waiting to run.",
+    },
     /** the job that will produce the dataset is running */
-    running: "warning",
+    running: {
+        status: "warning",
+        text: "This job is currently running.",
+    },
     /** metadata for the dataset is being discovered/set */
-    setting_metadata: "warning",
+    setting_metadata: {
+        status: "warning",
+        text: "Metadata is being auto-detected.",
+    },
     /** was created without a tool */
-    new: "warning",
+    new: {
+        status: "warning",
+        text: "This is a new dataset and not all of its data are available yet.",
+    },
     /** job is being created, but not put into job queue yet */
-    waiting: "default",
+    waiting: {
+        status: "default",
+    },
     /** has no data */
-    empty: "danger",
+    empty: {
+        status: "danger",
+        text: "No data",
+    },
     /** has successfully completed running */
-    ok: "success",
+    ok: {
+        status: "success",
+    },
     /** the job that will produce the dataset paused */
-    paused: "info",
+    paused: {
+        status: "info",
+        text: "This job is paused. Use the 'Resume Paused Jobs' in the history menu to resume.",
+    },
     /** metadata discovery/setting failed or errored (but otherwise ok) */
-    failed_metadata: "danger",
+    failed_metadata: {
+        status: "danger",
+    },
     /** the tool producing this dataset failed */
-    error: "danger",
+    error: {
+        status: "danger",
+        text: "An error occurred with this dataset",
+    },
     /** deleted while uploading */
-    discarded: "danger",
-
+    discarded: {
+        status: "danger",
+        text: "The job creating this dataset was cancelled before completion.",
+    },
     //TODO: not in trans.app.model.Dataset.states - is in database
     /** not accessible to the current user (i.e. due to permissions) */
-    noPermission: "danger",
+    noPermission: {
+        status: "danger",
+        text: "You do not have permission to view this dataset.",
+    },
     // found in job-state summary model?
     // this an actual state value or something derived from deleted prop?
-    deleted: "danger",
-    loading: "warning",
+    deleted: {
+        status: "danger",
+    },
+    loading: {
+        status: "warning",
+    },
 };
diff --git a/client/src/components/History/ContentItem/Dataset/DatasetMenu.vue b/client/src/components/History/ContentItem/Dataset/DatasetMenu.vue
index 17e90c7181e..85565d3e412 100644
--- a/client/src/components/History/ContentItem/Dataset/DatasetMenu.vue
+++ b/client/src/components/History/ContentItem/Dataset/DatasetMenu.vue
@@ -70,6 +70,7 @@
                         <span v-localize>{{ "Download " + mf.file_type }}</span>
                     </b-dropdown-item>
                 </b-dropdown-group>
+
                 <b-dropdown-item
                     v-else-if="showDownloads"
                     title="Download"
@@ -80,6 +81,7 @@
                     <Icon icon="download" class="mr-1" />
                     <span v-localize>Download</span>
                 </b-dropdown-item>
+
                 <b-dropdown-item
                     v-if="dataset.rerunnable && dataset.creating_job && notIn(STATES.UPLOAD, STATES.NOT_VIEWABLE)"
                     title="Run job again"
@@ -92,6 +94,7 @@
                     <Icon icon="play" class="mr-1" />
                     <span v-localize>Run job again</span>
                 </b-dropdown-item>
+
                 <b-dropdown-item
                     v-if="showViz && hasViz && isIn(STATES.OK, STATES.FAILED_METADATA)"
                     title="Visualize Data"
@@ -99,6 +102,7 @@
                     <Icon icon="chart-area" class="mr-1" />
                     <span v-localize>Visualize Data</span>
                 </b-dropdown-item>
+
                 <b-dropdown-item
                     v-if="currentUser && currentUser.id && dataset.creating_job"
                     title="Tool Help"
@@ -106,6 +110,7 @@
                     <Icon icon="question" class="mr-1" />
                     <span v-localize>Tool Help</span>
                 </b-dropdown-item>
+
                 <b-dropdown-item
                     v-if="notIn(STATES.NOT_VIEWABLE)"
                     key="dataset-details"
diff --git a/client/src/components/History/ContentItem/Dataset/DatasetUI.vue b/client/src/components/History/ContentItem/Dataset/DatasetUI.vue
index a919b866a4a..1349de4fd5c 100644
--- a/client/src/components/History/ContentItem/Dataset/DatasetUI.vue
+++ b/client/src/components/History/ContentItem/Dataset/DatasetUI.vue
@@ -113,7 +113,7 @@ either through the props, and make updates through the events -->
             </div>
 
             <div class="details">
-                <DatasetSummary :dataset="dataset" class="summary" @edit="edit" />
+                
 
                 <div class="display-applications" v-if="dataset.displayLinks.length">
                     <div class="display-application" v-for="app in dataset.displayLinks" :key="app.label">
@@ -138,7 +138,6 @@ import { Dataset, STATES } from "components/History/model";
 import { Nametag } from "components/Nametags";
 import StatusIcon from "components/History/StatusIcon";
 import DatasetMenu from "./DatasetMenu";
-import DatasetSummary from "./Summary";
 import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
 import IconButton from "components/IconButton";
 import EditorMenu from "components/History/EditorMenu";
@@ -149,7 +148,6 @@ export default {
     components: {
         StatusIcon,
         DatasetMenu,
-        DatasetSummary,
         Nametag,
         IconButton,
         EditorMenu,
diff --git a/client/src/components/History/ContentItem/Dataset/Summary/Discarded.vue b/client/src/components/History/ContentItem/Dataset/Summary/Discarded.vue
deleted file mode 100644
index 39b826904da..00000000000
--- a/client/src/components/History/ContentItem/Dataset/Summary/Discarded.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template functional>
-    <div>
-        <p v-localize>The job creating this dataset was cancelled before completion.</p>
-    </div>
-</template>
diff --git a/client/src/components/History/ContentItem/Dataset/Summary/Empty.vue b/client/src/components/History/ContentItem/Dataset/Summary/Empty.vue
deleted file mode 100644
index f12e0bfcd33..00000000000
--- a/client/src/components/History/ContentItem/Dataset/Summary/Empty.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template functional>
-    <div v-if="props.dataset">
-        <span v-localize>No data</span>: <i>{{ props.dataset.misc_blurb }}</i>
-    </div>
-</template>
diff --git a/client/src/components/History/ContentItem/Dataset/Summary/Error.vue b/client/src/components/History/ContentItem/Dataset/Summary/Error.vue
deleted file mode 100644
index cb56f2931c1..00000000000
--- a/client/src/components/History/ContentItem/Dataset/Summary/Error.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template functional>
-    <div v-if="props.dataset">
-        <div v-if="!props.dataset.purged && props.dataset.misc_info">
-            <span>{{ props.dataset.misc_info }}</span>
-        </div>
-        <span class="help-text" v-localize>An error occurred with this dataset</span>
-        <div v-if="props.dataset.misc_info" class="job-error-text">
-            <span>{{ props.dataset.misc_info }}</span>
-        </div>
-    </div>
-</template>
diff --git a/client/src/components/History/ContentItem/Dataset/Summary/New.vue b/client/src/components/History/ContentItem/Dataset/Summary/New.vue
deleted file mode 100644
index 9fa4c6ac11e..00000000000
--- a/client/src/components/History/ContentItem/Dataset/Summary/New.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template functional>
-    <div>
-        <p v-localize>This is a new dataset and not all of its data are available yet.</p>
-    </div>
-</template>
diff --git a/client/src/components/History/ContentItem/Dataset/Summary/NotViewable.vue b/client/src/components/History/ContentItem/Dataset/Summary/NotViewable.vue
deleted file mode 100644
index fdfc3e1dc25..00000000000
--- a/client/src/components/History/ContentItem/Dataset/Summary/NotViewable.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template functional>
-    <div>
-        <p v-localize>You do not have permission to view this dataset.</p>
-    </div>
-</template>
diff --git a/client/src/components/History/ContentItem/Dataset/Summary/Ok.vue b/client/src/components/History/ContentItem/Dataset/Summary/Ok.vue
deleted file mode 100644
index 0b956d72c46..00000000000
--- a/client/src/components/History/ContentItem/Dataset/Summary/Ok.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template functional>
-    <div v-if="props.dataset">
-        <div v-if="props.dataset.misc_blurb" class="blurb">
-            <span class="value">{{ props.dataset.misc_blurb }}</span>
-        </div>
-        <div v-if="props.dataset.file_ext" class="datatype">
-            <label class="prompt" v-localize>format</label>
-            <span class="value">{{ props.dataset.file_ext }}</span>
-        </div>
-        <div v-if="props.dataset.genome_build" class="dbkey">
-            <label class="prompt" v-localize>database</label>
-            <b-link class="value" @click.stop="listeners['edit']()">{{ props.dataset.genome_build }}</b-link>
-        </div>
-        <div v-if="props.dataset.misc_info" class="info">
-            <span class="value">{{ props.dataset.misc_info }}</span>
-        </div>
-    </div>
-</template>
diff --git a/client/src/components/History/ContentItem/Dataset/Summary/Paused.vue b/client/src/components/History/ContentItem/Dataset/Summary/Paused.vue
deleted file mode 100644
index f0e6de337dd..00000000000
--- a/client/src/components/History/ContentItem/Dataset/Summary/Paused.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template functional>
-    <div v-if="dataset">
-        <p v-localize>This job is paused. Use the "Resume Paused Jobs" in the history menu to resume.</p>
-        <div v-if="dataset.misc_info">
-            <span>{{ props.dataset.misc_info }}</span>
-        </div>
-    </div>
-</template>
diff --git a/client/src/components/History/ContentItem/Dataset/Summary/Queued.vue b/client/src/components/History/ContentItem/Dataset/Summary/Queued.vue
deleted file mode 100644
index 5a52e59880e..00000000000
--- a/client/src/components/History/ContentItem/Dataset/Summary/Queued.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template functional>
-    <div>
-        <p v-localize>This job is waiting to run.</p>
-    </div>
-</template>
diff --git a/client/src/components/History/ContentItem/Dataset/Summary/Running.vue b/client/src/components/History/ContentItem/Dataset/Summary/Running.vue
deleted file mode 100644
index 74737e71980..00000000000
--- a/client/src/components/History/ContentItem/Dataset/Summary/Running.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template functional>
-    <div>
-        <p v-localize>This job is currently running.</p>
-    </div>
-</template>
diff --git a/client/src/components/History/ContentItem/Dataset/Summary/SettingMetadata.vue b/client/src/components/History/ContentItem/Dataset/Summary/SettingMetadata.vue
deleted file mode 100644
index 4b9e960ab15..00000000000
--- a/client/src/components/History/ContentItem/Dataset/Summary/SettingMetadata.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template functional>
-    <div>
-        <p v-localize>Metadata is being auto-detected.</p>
-    </div>
-</template>
diff --git a/client/src/components/History/ContentItem/Dataset/Summary/Unknown.vue b/client/src/components/History/ContentItem/Dataset/Summary/Unknown.vue
deleted file mode 100644
index 5c67826c244..00000000000
--- a/client/src/components/History/ContentItem/Dataset/Summary/Unknown.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template functional>
-    <div v-if="props.dataset">Error: unknown dataset state "{{ props.dataset.state }}"</div>
-</template>
diff --git a/client/src/components/History/ContentItem/Dataset/Summary/Upload.vue b/client/src/components/History/ContentItem/Dataset/Summary/Upload.vue
deleted file mode 100644
index d82b1910e42..00000000000
--- a/client/src/components/History/ContentItem/Dataset/Summary/Upload.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template functional>
-    <div>
-        <p v-localize>This dataset is currently uploading.</p>
-    </div>
-</template>
diff --git a/client/src/components/History/ContentItem/Dataset/Summary/index.vue b/client/src/components/History/ContentItem/Dataset/Summary/index.vue
deleted file mode 100644
index 2067a75bf23..00000000000
--- a/client/src/components/History/ContentItem/Dataset/Summary/index.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-    <component :is="summaryComponent" :dataset="dataset" @edit="edit" />
-</template>
-
-<script>
-import { capitalize, camelize } from "underscore.string";
-
-import Discarded from "./Discarded";
-import Empty from "./Empty";
-import Error from "./Error";
-import New from "./New";
-import NotViewable from "./NotViewable";
-import Ok from "./Ok";
-import Paused from "./Paused";
-import Queued from "./Queued";
-import Running from "./Running";
-import SettingMetadata from "./SettingMetadata";
-import Upload from "./Upload";
-import { STATES } from "components/History/model";
-
-export default {
-    components: {
-        Discarded,
-        Empty,
-        Error,
-        New,
-        NotViewable,
-        Ok,
-        Paused,
-        Queued,
-        Running,
-        SettingMetadata,
-        Upload,
-    },
-    props: {
-        dataset: { type: Object, required: true },
-    },
-    computed: {
-        summaryComponent() {
-            let state = this.dataset.state;
-            if (state == STATES.FAILED_METADATA) {
-                state = STATES.OK;
-            }
-            return capitalize(camelize(state));
-        },
-    },
-    methods: {
-        edit() {
-            this.$emit("edit");
-        },
-    },
-};
-</script>

From abd2374fc0261db6f4ba962e5171c27a204959ba Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Feb 2022 21:47:03 -0500
Subject: [PATCH 44/95] Add correct links to dataset content details

---
 .../History/ContentItem/ContentActions.vue    | 122 ++++++++----------
 .../History/ContentItem/Dataset/DatasetUI.vue |   2 -
 lib/galaxy/managers/hdas.py                   |   4 +-
 3 files changed, 53 insertions(+), 75 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentActions.vue b/client/src/components/History/ContentItem/ContentActions.vue
index aadf3a2e55d..c236885febc 100644
--- a/client/src/components/History/ContentItem/ContentActions.vue
+++ b/client/src/components/History/ContentItem/ContentActions.vue
@@ -1,14 +1,17 @@
 <template>
     <div class="mb-1 clearfix">
         <div class="btn-group float-left">
+            <b-button v-if="showError" class="px-1" title="Error" size="sm" variant="link" @click.stop="onError">
+                <span class="fa fa-exclamation-triangle" />
+            </b-button>
             <b-button
-                v-if="item.state == 'error'"
+                v-if="showDownloads"
                 class="px-1"
-                title="Error"
+                title="Download"
                 size="sm"
                 variant="link"
-                @click.stop="onError">
-                <span class="fa fa-exclamation-triangle" />
+                @click.stop="onDownload">
+                <span class="fa fa-save" />
             </b-button>
             <b-button
                 v-if="showDownloads"
@@ -16,36 +19,26 @@
                 title="Copy link"
                 size="sm"
                 variant="link"
-                @click.stop="$emit('link', item)">
+                @click.stop="onCopyLink">
                 <span class="fa fa-link" />
             </b-button>
             <b-button
-                v-if="showDownloads"
-                :href="downloadUrl"
+                v-if="showInfo"
                 class="px-1"
-                title="Download"
+                title="Dataset details"
                 size="sm"
                 variant="link"
-                @click.stop="$emit('save', item)">
-                <span class="fa fa-save" />
+                @click.stop="onInfo">
+                <span class="fa fa-info-circle" />
             </b-button>
             <b-button
-                v-if="item.rerunnable && item.creating_job && item.state != 'upload' && item.state != 'noPermission'"
+                v-if="showRerun"
                 class="px-1"
                 title="Run job again"
                 size="sm"
                 variant="link"
                 @click.stop="onRerun">
-                <span class="fa fa-play" />
-            </b-button>
-            <b-button
-                v-if="item.rerunnable && item.creating_job && item.state != 'upload' && item.state != 'noPermission'"
-                class="px-1"
-                title="Run job again"
-                size="sm"
-                variant="link"
-                @click.stop="onRerun">
-                <span class="fa fa-play" />
+                <span class="fa fa-redo" />
             </b-button>
             <b-button
                 v-if="showVisualizations"
@@ -56,29 +49,7 @@
                 @click.stop="onVisualize">
                 <span class="fa fa-bar-chart-o" />
             </b-button>
-            <b-dropdown-item
-                v-if="item.creating_job"
-                title="Tool Help"
-                @click.stop="showToolHelp(item.creating_job)">
-                <Icon icon="question" class="mr-1" />
-                <span v-localize>Tool Help</span>
-            </b-dropdown-item>
-            <b-button
-                v-if="item.state != 'noPermission'"
-                class="px-1"
-                title="Dataset details"
-                size="sm"
-                variant="link"
-                @click.stop="$emit('info', item)">
-                <span class="fa fa-info-circle" />
-            </b-button>
-            <b-button
-                v-if="item.state != 'noPermission'"
-                class="px-1"
-                title="Help"
-                size="sm"
-                variant="link"
-                @click.stop="$emit('help', item)">
+            <b-button v-if="showRerun" class="px-1" title="Help" size="sm" variant="link" @click.stop="onRerun">
                 <span class="fa fa-question" />
             </b-button>
         </div>
@@ -99,60 +70,69 @@
 </template>
 
 <script>
+import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
+import { prependPath } from "utils/redirect";
 import { copy as sendToClipboard } from "utils/clipboard";
 import { absPath } from "utils/redirect";
 
 export default {
+    mixins: [legacyNavigationMixin],
     props: {
         item: { type: Object, required: true },
     },
     computed: {
+        downloadUrl() {
+            return prependPath(`datasets/${this.item.id}/display?to_ext=${this.item.extension}`);
+        },
         showDownloads() {
-            if (this.item.purged || !this.item.file_size || !this.item.file_size == 0) {
-                return false;
-            }
-            return ["ok", "failed_metadata", "error"].includes(this.item.state);
+            return !this.item.purged && ["ok", "failed_metadata", "error"].includes(this.item.state);
+        },
+        showError() {
+            return this.item.state == "error";
+        },
+        showInfo() {
+            return this.item.state != "noPermission";
+        },
+        showRerun() {
+            return (
+                this.item.rerunnable &&
+                this.item.creating_job &&
+                this.item.state != "upload" &&
+                this.item.state != "noPermission"
+            );
         },
         showVisualizations() {
-            //&& hasViz && isIn(STATES.OK, STATES.FAILED_METADATA)
-            return true;
-        },
-        downloadUrl() {
-            return prependPath(`datasets/${this.item.id}/display?to_ext=${this.item.file_ext}`);
+            // TODO: Check hasViz, if visualizations are activated in the config
+            return this.item.state == "ok" || this.item.state == "failed_metadata";
         },
     },
     methods: {
         onCopyLink() {
-            const relPath = this.item.download_url;
             const msg = this.localize("Link is copied to your clipboard");
-            sendToClipboard(absPath(relPath), msg);
+            sendToClipboard(absPath(this.downloadUrl), msg);
+        },
+        onDownload() {
+            window.location.href = this.downloadUrl;
         },
         onError() {
-            /*@click.stop="
-                backboneRoute('datasets/error', {
-                    dataset_id: dataset.id,
-                })
-            ">*/
+            this.backboneRoute("datasets/error", { dataset_id: this.item.id });
+        },
+        onInfo() {
+            this.backboneRoute(`datasets/${this.item.id}/details`);
         },
         onRerun() {
-            /*
-            :href="prependPath(dataset.getUrl('rerun'))"
-            backboneRoute('/', {
-                job_id: dataset.creating_job,
-            })*/
+            this.backboneRoute(`root?job_id=${this.item.creating_job}`);
         },
         onVisualize() {
-            /*const showDetailsUrl = `/datasets/${this.dataset.id}/details`;
+            const path = `visualizations?dataset_id=${this.item.id}`;
             const redirectParams = {
-                path: showDetailsUrl,
+                path: path,
                 title: "Dataset details",
                 tryIframe: false,
             };
             if (!this.iframeAdd(redirectParams)) {
-                this.backboneRoute("visualizations", {
-                    dataset_id: this.dataset.id,
-                });
-            }*/
+                this.backboneRoute(path);
+            }
         },
     },
 };
diff --git a/client/src/components/History/ContentItem/Dataset/DatasetUI.vue b/client/src/components/History/ContentItem/Dataset/DatasetUI.vue
index 1349de4fd5c..f1dc7d5337f 100644
--- a/client/src/components/History/ContentItem/Dataset/DatasetUI.vue
+++ b/client/src/components/History/ContentItem/Dataset/DatasetUI.vue
@@ -113,8 +113,6 @@ either through the props, and make updates through the events -->
             </div>
 
             <div class="details">
-                
-
                 <div class="display-applications" v-if="dataset.displayLinks.length">
                     <div class="display-application" v-for="app in dataset.displayLinks" :key="app.label">
                         <span class="display-application-location">
diff --git a/lib/galaxy/managers/hdas.py b/lib/galaxy/managers/hdas.py
index dc08ce8eec4..80a9ba51f67 100644
--- a/lib/galaxy/managers/hdas.py
+++ b/lib/galaxy/managers/hdas.py
@@ -304,6 +304,8 @@ class HDASerializer(  # datasets._UnflattenedMetadataDatasetAssociationSerialize
                 "type",
                 "url",
                 "create_time",
+                "rerunnable",
+                "creating_job",
                 "update_time",
             ],
         )
@@ -329,8 +331,6 @@ class HDASerializer(  # datasets._UnflattenedMetadataDatasetAssociationSerialize
                 "meta_files",
                 "data_type",
                 "peek",
-                "creating_job",
-                "rerunnable",
                 "uuid",
                 "permissions",
                 "file_name",

From 012575ac473112efda4e6f89e74af1cc57f7d817 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Feb 2022 22:00:05 -0500
Subject: [PATCH 45/95] Rename content status mapping module, parse correct
 dataset item

---
 client/src/components/History/ContentItem/ContentDetails.vue  | 2 +-
 client/src/components/History/ContentItem/ContentItem.vue     | 4 ++--
 .../History/ContentItem/{ContentStatus.js => contentState.js} | 0
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename client/src/components/History/ContentItem/{ContentStatus.js => contentState.js} (100%)

diff --git a/client/src/components/History/ContentItem/ContentDetails.vue b/client/src/components/History/ContentItem/ContentDetails.vue
index 1832015e41b..20691bf2a12 100644
--- a/client/src/components/History/ContentItem/ContentDetails.vue
+++ b/client/src/components/History/ContentItem/ContentDetails.vue
@@ -18,7 +18,7 @@
                         <span class="value">{{ result.misc_info }}</span>
                     </div>
                 </div>
-                <ContentActions :item="item" />
+                <ContentActions :item="result" />
                 <pre v-if="result.peek" class="dataset-peek p-1" v-html="result.peek" />
             </div>
         </div>
diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 6c36c0e2ed3..95796b831c5 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -75,7 +75,7 @@
 
 <script>
 import ContentDetails from "./ContentDetails";
-import CONTENTSTATUS from "./contentStatus";
+import CONTENTSTATE from "./contentState";
 export default {
     components: {
         ContentDetails,
@@ -124,7 +124,7 @@ export default {
                 : "Delete";
         },
         clsStatus() {
-            const status = CONTENTSTATUS[this.state] && CONTENTSTATUS[this.state].status;
+            const status = CONTENTSTATE[this.state] && CONTENTSTATE[this.state].status;
             if (!status || this.selected) {
                 return "alert-info";
             } else {
diff --git a/client/src/components/History/ContentItem/ContentStatus.js b/client/src/components/History/ContentItem/contentState.js
similarity index 100%
rename from client/src/components/History/ContentItem/ContentStatus.js
rename to client/src/components/History/ContentItem/contentState.js

From f5d1c6484142484238d9b8fba3d6931647070b18 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Feb 2022 22:10:20 -0500
Subject: [PATCH 46/95] Consolidate content item wrappers, disable generic
 wrappers for now

---
 .../History/ContentItem/ContentItem.vue       |   6 +-
 .../History/ContentItem/Dataset/Dataset.vue   |  53 ----
 .../DatasetActions.vue}                       |   0
 .../DatasetDetails.vue}                       |   6 +-
 .../ContentItem/Dataset/DatasetMenu.vue       | 274 ------------------
 .../History/ContentItem/Dataset/DatasetUI.vue | 246 ----------------
 .../GenericContentItem/DatasetUIWrapper.vue   |   8 +-
 .../GenericHistoryContent.vue                 |   6 +-
 8 files changed, 10 insertions(+), 589 deletions(-)
 delete mode 100644 client/src/components/History/ContentItem/Dataset/Dataset.vue
 rename client/src/components/History/ContentItem/{ContentActions.vue => Dataset/DatasetActions.vue} (100%)
 rename client/src/components/History/ContentItem/{ContentDetails.vue => Dataset/DatasetDetails.vue} (93%)
 delete mode 100644 client/src/components/History/ContentItem/Dataset/DatasetMenu.vue
 delete mode 100644 client/src/components/History/ContentItem/Dataset/DatasetUI.vue

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 95796b831c5..74f99be8167 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -69,16 +69,16 @@
                 </h5>
             </div>
         </div>
-        <ContentDetails v-if="expanded" @edit="$emit('edit', $event)" :item="item" />
+        <DatasetDetails v-if="expanded" @edit="$emit('edit', $event)" :item="item" />
     </div>
 </template>
 
 <script>
-import ContentDetails from "./ContentDetails";
+import DatasetDetails from "./Dataset/DatasetDetails";
 import CONTENTSTATE from "./contentState";
 export default {
     components: {
-        ContentDetails,
+        DatasetDetails,
     },
     props: {
         item: { type: Object, required: true },
diff --git a/client/src/components/History/ContentItem/Dataset/Dataset.vue b/client/src/components/History/ContentItem/Dataset/Dataset.vue
deleted file mode 100644
index a951b5a8ebd..00000000000
--- a/client/src/components/History/ContentItem/Dataset/Dataset.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-    <DatasetUI
-        v-if="dataset"
-        v-bind="$attrs"
-        v-on="$listeners"
-        :dataset="dataset"
-        @update:dataset="onUpdate"
-        @delete="onDelete"
-        @undelete="onUndelete"
-        @unhide="onUnhide"
-        @copy-link="onCopyLink" />
-</template>
-
-<script>
-import DatasetUI from "./DatasetUI";
-import { Dataset } from "../../model";
-import { deleteContent, updateContentFields } from "../../model/queries";
-import { copy as sendToClipboard } from "utils/clipboard";
-import { absPath } from "utils/redirect";
-
-export default {
-    components: {
-        DatasetUI,
-    },
-    props: {
-        item: { type: Object, required: true },
-    },
-    computed: {
-        dataset() {
-            return new Dataset(this.item);
-        },
-    },
-    methods: {
-        async onDelete(opts = {}) {
-            await deleteContent(this.item, opts);
-        },
-        async onUnhide() {
-            await this.onUpdate({ visible: true });
-        },
-        async onUndelete() {
-            await this.onUpdate({ deleted: false });
-        },
-        async onUpdate(changes) {
-            await updateContentFields(this.item, changes);
-        },
-        onCopyLink() {
-            const relPath = this.dataset.getUrl("download");
-            const msg = this.localize("Link is copied to your clipboard");
-            sendToClipboard(absPath(relPath), msg);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/ContentItem/ContentActions.vue b/client/src/components/History/ContentItem/Dataset/DatasetActions.vue
similarity index 100%
rename from client/src/components/History/ContentItem/ContentActions.vue
rename to client/src/components/History/ContentItem/Dataset/DatasetActions.vue
diff --git a/client/src/components/History/ContentItem/ContentDetails.vue b/client/src/components/History/ContentItem/Dataset/DatasetDetails.vue
similarity index 93%
rename from client/src/components/History/ContentItem/ContentDetails.vue
rename to client/src/components/History/ContentItem/Dataset/DatasetDetails.vue
index 20691bf2a12..80e817947c4 100644
--- a/client/src/components/History/ContentItem/ContentDetails.vue
+++ b/client/src/components/History/ContentItem/Dataset/DatasetDetails.vue
@@ -18,7 +18,7 @@
                         <span class="value">{{ result.misc_info }}</span>
                     </div>
                 </div>
-                <ContentActions :item="result" />
+                <DatasetActions :item="result" />
                 <pre v-if="result.peek" class="dataset-peek p-1" v-html="result.peek" />
             </div>
         </div>
@@ -27,11 +27,11 @@
 
 <script>
 import { UrlDataProvider } from "components/providers/UrlDataProvider";
-import ContentActions from "./ContentActions";
+import DatasetActions from "./DatasetActions";
 
 export default {
     components: {
-        ContentActions,
+        DatasetActions,
         UrlDataProvider,
     },
     props: {
diff --git a/client/src/components/History/ContentItem/Dataset/DatasetMenu.vue b/client/src/components/History/ContentItem/Dataset/DatasetMenu.vue
deleted file mode 100644
index 85565d3e412..00000000000
--- a/client/src/components/History/ContentItem/Dataset/DatasetMenu.vue
+++ /dev/null
@@ -1,274 +0,0 @@
-<template>
-    <div>
-        <b-button-group>
-            <IconButton
-                v-if="notIn(STATES.NOT_VIEWABLE, STATES.DISCARDED)"
-                icon="eye"
-                :title="displayButtonTitle"
-                :disabled="dataset.purged || isIn(STATES.UPLOAD, STATES.NEW)"
-                @click.stop="viewData"
-                variant="link"
-                class="px-1 display-btn" />
-            <IconButton
-                v-if="writable && notIn(STATES.DISCARDED)"
-                icon="pen"
-                :title="editButtonTitle"
-                :disabled="dataset.deleted || isIn(STATES.UPLOAD, STATES.NEW)"
-                @click.stop="$emit('edit')"
-                variant="link"
-                class="px-1 edit-btn" />
-            <IconButton
-                v-if="writable && dataset.accessible"
-                :icon="dataset.deleted ? 'trash-restore' : 'trash'"
-                :title="deleteButtonTitle"
-                :disabled="dataset.purged"
-                v-b-modal="bsId('delete-modal')"
-                variant="link"
-                class="px-1 delete-btn"
-                @click.stop />
-            <b-dropdown
-                right
-                size="sm"
-                variant="link"
-                :text="'Dataset Operations' | l"
-                toggle-class="p-1 pl-2"
-                class="flex-grow-0 dataset-operations-dropdown"
-                v-if="expanded"
-                boundary="window">
-                <template v-slot:button-content>
-                    <Icon icon="ellipsis-v" variant="link" />
-                    <span class="sr-only">Dataset Operations</span>
-                </template>
-                <b-dropdown-item
-                    v-if="isIn(STATES.ERROR)"
-                    key="show-error"
-                    title="Error"
-                    @click.stop="
-                        backboneRoute('datasets/error', {
-                            dataset_id: dataset.id,
-                        })
-                    ">
-                    <Icon icon="exclamation-triangle" class="mr-1" />
-                    <span v-localize>Show Error</span>
-                </b-dropdown-item>
-                <b-dropdown-item
-                    v-if="showDownloads && dataset.getUrl('download')"
-                    title="Copy Link"
-                    @click.stop="$emit('copy-link')">
-                    <Icon icon="link" class="mr-1" />
-                    <span v-localize>Copy Link</span>
-                </b-dropdown-item>
-                <b-dropdown-group v-if="showDownloads && dataset.hasMetaData">
-                    <b-dropdown-item
-                        v-for="mf in dataset.meta_files"
-                        :key="'download-' + mf.download_url"
-                        :title="'Download ' + mf.file_type"
-                        :href="prependPath(dataset.getUrl('meta_download') + mf.file_type)"
-                        target="_blank"
-                        download>
-                        <Icon icon="download" class="mr-1" />
-                        <span v-localize>{{ "Download " + mf.file_type }}</span>
-                    </b-dropdown-item>
-                </b-dropdown-group>
-
-                <b-dropdown-item
-                    v-else-if="showDownloads"
-                    title="Download"
-                    :href="prependPath(dataset.getUrl('download'))"
-                    target="_blank"
-                    class="download-btn"
-                    download>
-                    <Icon icon="download" class="mr-1" />
-                    <span v-localize>Download</span>
-                </b-dropdown-item>
-
-                <b-dropdown-item
-                    v-if="dataset.rerunnable && dataset.creating_job && notIn(STATES.UPLOAD, STATES.NOT_VIEWABLE)"
-                    title="Run job again"
-                    :href="prependPath(dataset.getUrl('rerun'))"
-                    @click.stop.prevent="
-                        backboneRoute('/', {
-                            job_id: dataset.creating_job,
-                        })
-                    ">
-                    <Icon icon="play" class="mr-1" />
-                    <span v-localize>Run job again</span>
-                </b-dropdown-item>
-
-                <b-dropdown-item
-                    v-if="showViz && hasViz && isIn(STATES.OK, STATES.FAILED_METADATA)"
-                    title="Visualize Data"
-                    @click.stop.prevent="visualize">
-                    <Icon icon="chart-area" class="mr-1" />
-                    <span v-localize>Visualize Data</span>
-                </b-dropdown-item>
-
-                <b-dropdown-item
-                    v-if="currentUser && currentUser.id && dataset.creating_job"
-                    title="Tool Help"
-                    @click.stop="showToolHelp(dataset.creating_job)">
-                    <Icon icon="question" class="mr-1" />
-                    <span v-localize>Tool Help</span>
-                </b-dropdown-item>
-
-                <b-dropdown-item
-                    v-if="notIn(STATES.NOT_VIEWABLE)"
-                    key="dataset-details"
-                    title="View Dataset Details"
-                    class="params-btn"
-                    @click.stop.prevent="showDetails">
-                    <Icon icon="info-circle" class="mr-1" />
-                    <span v-localize>View Dataset Details</span>
-                </b-dropdown-item>
-            </b-dropdown>
-        </b-button-group>
-
-        <!-- modals -->
-        <b-modal :id="bsId('delete-modal')" title="Delete Dataset?" title-tag="h2" @ok="onDeleteClick">
-            <p v-localize>Really delete this dataset?</p>
-        </b-modal>
-    </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-import { Dataset, STATES } from "components/History/model";
-import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
-import IconButton from "components/IconButton";
-
-export default {
-    mixins: [legacyNavigationMixin],
-    components: {
-        IconButton,
-    },
-    props: {
-        dataset: { type: Dataset, required: true },
-        expanded: { type: Boolean, required: true },
-        writable: { type: Boolean, default: true },
-    },
-    data() {
-        return {
-            toolHelp: null,
-            testVal: false,
-        };
-    },
-    computed: {
-        ...mapGetters("user", ["currentUser"]),
-        ...mapGetters("config", ["config"]),
-        STATES() {
-            return STATES;
-        },
-        showViz() {
-            return this.config.visualizations_visible;
-        },
-        displayButtonTitle() {
-            if (this.dataset.purged) {
-                return "Cannot display datasets removed from disk";
-            }
-            if (this.dataset.state == STATES.UPLOAD) {
-                return "This dataset must finish uploading before it can be viewed";
-            }
-            if (this.dataset.state == STATES.NEW) {
-                return "This dataset is not yet viewable";
-            }
-            return "View data";
-        },
-        editButtonTitle() {
-            if (this.dataset.deleted) {
-                return "Undelete dataset to edit attributes";
-            }
-            if (this.dataset.purged) {
-                return "Cannot edit attributes of datasets removed from disk";
-            }
-            const unreadyStates = new Set([STATES.UPLOAD, STATES.NEW]);
-            if (unreadyStates.has(this.dataset.state)) {
-                return "This dataset is not yet editable";
-            }
-            return "Edit attributes";
-        },
-        deleteButtonTitle() {
-            return this.dataset.purged
-                ? "Dataset has been permanently deleted"
-                : this.dataset.deleted
-                ? "Undelete"
-                : "Delete";
-        },
-        showDownloads() {
-            if (this.dataset.purged) {
-                return false;
-            }
-            if (!this.dataset.hasData) {
-                return false;
-            }
-            const okStates = new Set([STATES.OK, STATES.FAILED_METADATA, STATES.ERROR]);
-            return okStates.has(this.dataset.state);
-        },
-        hasViz() {
-            const viz_count = this.dataset.viz_count || 0;
-            return viz_count && this.dataset.hasData && !this.dataset.deleted;
-        },
-    },
-    methods: {
-        notIn(...states) {
-            const badStates = new Set(states);
-            return !badStates.has(this.dataset.state);
-        },
-        isIn(...states) {
-            const goodStates = new Set(states);
-            return goodStates.has(this.dataset.state);
-        },
-        viewData() {
-            const id = this.dataset.id;
-            if (!id) {
-                return;
-            }
-            this.useGalaxy((Galaxy) => {
-                if (Galaxy.frame && Galaxy.frame.active) {
-                    Galaxy.frame.addDataset(id);
-                } else {
-                    const path = this.dataset.getUrl("display");
-                    if (path) {
-                        this.iframeRedirect(path);
-                    }
-                }
-            });
-        },
-        // routing for visualizations
-        visualize() {
-            const showDetailsUrl = `/datasets/${this.dataset.id}/details`;
-            const redirectParams = {
-                path: showDetailsUrl,
-                title: "Dataset details",
-                tryIframe: false,
-            };
-            if (!this.iframeAdd(redirectParams)) {
-                this.backboneRoute("visualizations", {
-                    dataset_id: this.dataset.id,
-                });
-            }
-        },
-        showDetails() {
-            const showDetailsUrl = `/datasets/${this.dataset.id}/details`;
-            const redirectParams = {
-                path: showDetailsUrl,
-                title: "Dataset details",
-                tryIframe: false,
-            };
-            if (!this.iframeAdd(redirectParams)) {
-                this.backboneRoute(showDetailsUrl);
-            }
-        },
-        showToolHelp(job_id) {
-            this.eventHub.$emit("toggleToolHelp", job_id);
-        },
-        onDeleteClick() {
-            const eventName = this.dataset.deleted ? "undelete" : "delete";
-            this.$emit(eventName);
-        },
-        // bootstrap demands ids
-        bsId(suffix) {
-            return `dataset-${this.dataset.id}-${suffix}`;
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/ContentItem/Dataset/DatasetUI.vue b/client/src/components/History/ContentItem/Dataset/DatasetUI.vue
deleted file mode 100644
index f1dc7d5337f..00000000000
--- a/client/src/components/History/ContentItem/Dataset/DatasetUI.vue
+++ /dev/null
@@ -1,246 +0,0 @@
-<!--
-The guts and markup of the dataset item separated from the
-data assignment so we can re-use it on the collection listing
-
-DO NOT put data retrieval into this component, access the dataset
-either through the props, and make updates through the events -->
-
-<template>
-    <div
-        class="dataset history-content"
-        :id="typeId"
-        :class="{ expanded, collapsed, selected }"
-        :data-hid="dataset.hid"
-        :data-state="dataset.state"
-        @keydown.arrow-left.self.stop="$emit('update:expanded', false)"
-        @keydown.arrow-right.self.stop="$emit('update:expanded', true)"
-        @keydown.space.self.stop.prevent="$emit('update:selected', !selected)">
-        <!-- name, state buttons, menus -->
-        <nav class="content-top-menu p-1 d-flex cursor-pointer" @click.stop="$emit('update:expanded', !expanded)">
-            <div class="d-flex flex-grow-1 overflow-hidden">
-                <div class="pl-1" v-if="showSelectionBox">
-                    <b-check class="selector" :checked="selected" @change="$emit('update:selected', $event)"></b-check>
-                </div>
-
-                <StatusIcon
-                    v-if="!collapsed"
-                    class="status-icon px-1"
-                    :state="dataset.state"
-                    @click.stop="onStatusClick" />
-
-                <IconButton
-                    v-if="!collapsed && !dataset.visible"
-                    class="px-1"
-                    state="hidden"
-                    title="Unhide"
-                    icon="eye-slash"
-                    @click.stop="$emit('unhide')" />
-
-                <IconButton
-                    v-if="!collapsed && dataset.isDeleted && !dataset.purged"
-                    class="px-1"
-                    state="deleted"
-                    title="Undelete"
-                    icon="trash-restore"
-                    @click.stop="$emit('undelete')" />
-
-                <div class="content-title title p-1 overflow-hidden">
-                    <h5 class="text-truncate" v-if="collapsed">
-                        <span class="hid" data-description="dataset hid">{{ dataset.hid }}</span>
-                        <span class="name" data-description="dataset name">{{ dataset.title }}</span>
-                    </h5>
-                </div>
-            </div>
-
-            <div class="d-flex">
-                <slot name="menu">
-                    <DatasetMenu
-                        :dataset="dataset"
-                        :expanded="expanded"
-                        :writable="writable"
-                        @edit="edit"
-                        v-on="$listeners" />
-                </slot>
-            </div>
-        </nav>
-
-        <!--- read-only tags with name: prefix -->
-        <div v-if="collapsed && dataset.nameTags.length" class="nametags px-2 pb-2">
-            <Nametag v-for="tag in dataset.nameTags" :key="tag" :tag="tag" />
-        </div>
-
-        <div v-if="expanded" class="p-3 details">
-            <div class="d-flex">
-                <div class="flex-grow-1">
-                    <h4 data-description="dataset name">{{ name || "(Dataset Name)" }}</h4>
-
-                    <template v-if="!editing">
-                        <p v-if="annotation">{{ annotation }}</p>
-                        <div v-if="dataset.nameTags.length" class="nametags mt-2">
-                            <Nametag v-for="tag in dataset.nameTags" :key="tag" :tag="tag" />
-                        </div>
-                    </template>
-
-                    <div v-else class="my-3">
-                        <b-textarea
-                            class="mb-3"
-                            v-model="name"
-                            placeholder="Dataset Name"
-                            trim
-                            max-rows="4"></b-textarea>
-
-                        <b-textarea
-                            class="mb-3"
-                            v-model="annotation"
-                            placeholder="Annotation (optional)"
-                            trim
-                            max-rows="4"></b-textarea>
-
-                        <StatelessTags class="mt-2" v-model="tags" />
-                    </div>
-                </div>
-
-                <EditorMenu
-                    class="ml-3 flex-grow-0 d-flex flex-column"
-                    v-if="writable"
-                    model-name="Dataset"
-                    :editing.sync="editing"
-                    :writable="writable"
-                    :valid="valid"
-                    :dirty="dirty"
-                    @save="save"
-                    @revert="revert" />
-            </div>
-
-            <div class="details">
-                <div class="display-applications" v-if="dataset.displayLinks.length">
-                    <div class="display-application" v-for="app in dataset.displayLinks" :key="app.label">
-                        <span class="display-application-location">
-                            {{ app.label }}
-                        </span>
-                        <span class="display-application-links">
-                            <a v-for="l in app.links" :key="l.href" :href="l.href" :target="l.target">
-                                {{ l.text }}
-                            </a>
-                        </span>
-                    </div>
-                </div>
-                <pre v-if="dataset.peek" class="dataset-peek p-1" v-html="dataset.peek"></pre>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import { Dataset, STATES } from "components/History/model";
-import { Nametag } from "components/Nametags";
-import StatusIcon from "components/History/StatusIcon";
-import DatasetMenu from "./DatasetMenu";
-import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
-import IconButton from "components/IconButton";
-import EditorMenu from "components/History/EditorMenu";
-import { StatelessTags } from "components/Tags";
-
-export default {
-    mixins: [legacyNavigationMixin],
-    components: {
-        StatusIcon,
-        DatasetMenu,
-        Nametag,
-        IconButton,
-        EditorMenu,
-        StatelessTags,
-    },
-    props: {
-        dataset: { type: Dataset, required: true },
-        expanded: { type: Boolean, required: true },
-        selected: { type: Boolean, required: false, default: false },
-        showSelection: { type: Boolean, required: false, default: false },
-        writable: { type: Boolean, required: false, default: true },
-        selectable: { type: Boolean, required: false, default: true },
-    },
-    data() {
-        return {
-            editing: false,
-            tempContent: this.dataset.clone(),
-        };
-    },
-    computed: {
-        collapsed() {
-            return !this.expanded;
-        },
-        typeId() {
-            return this.dataset.type_id;
-        },
-        isEditing() {
-            return this.writable && this.editing;
-        },
-        valid() {
-            return true;
-        },
-        dirty() {
-            return !this.tempContent.equals(this.dataset);
-        },
-        name: {
-            get() {
-                return this.tempContent?.name || "";
-            },
-            set(newVal) {
-                this.patchTempContent({ name: newVal });
-            },
-        },
-        annotation: {
-            get() {
-                return this.tempContent?.annotation || "";
-            },
-            set(newVal) {
-                this.patchTempContent({ annotation: newVal });
-            },
-        },
-        tags: {
-            get() {
-                return this.tempContent?.tags || [];
-            },
-            set(newTags) {
-                if (Array.isArray(newTags)) {
-                    this.patchTempContent({ tags: newTags });
-                }
-            },
-        },
-        showSelectionBox() {
-            return this.selectable && this.showSelection;
-        },
-    },
-    methods: {
-        onStatusClick(evt) {
-            switch (this.dataset.state) {
-                case STATES.ERROR:
-                    this.backboneRoute("datasets/error", { dataset_id: this.dataset.id });
-                    break;
-                default:
-                    console.log("unhandled status icon click", this.dataset.state);
-            }
-        },
-        patchTempContent(props = {}) {
-            this.tempContent = this.tempContent.patch(props);
-        },
-        save() {
-            if (this.valid) {
-                this.$emit("update:dataset", this.tempContent);
-                this.editing = false;
-            }
-        },
-        reset() {
-            this.tempContent = this.dataset.clone();
-        },
-        revert() {
-            if (this.dirty) {
-                this.reset();
-            }
-        },
-        edit() {
-            this.backboneRoute("datasets/edit", { dataset_id: this.dataset.id });
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/ContentItem/GenericContentItem/DatasetUIWrapper.vue b/client/src/components/History/ContentItem/GenericContentItem/DatasetUIWrapper.vue
index 72c186d0e0c..93bc13e59ef 100644
--- a/client/src/components/History/ContentItem/GenericContentItem/DatasetUIWrapper.vue
+++ b/client/src/components/History/ContentItem/GenericContentItem/DatasetUIWrapper.vue
@@ -1,6 +1,6 @@
 <!-- controls display of DisplayUI and delegates modifications -->
 <template>
-    <DatasetUI
+    <div
         v-if="dataset"
         v-bind="$attrs"
         v-on="$listeners"
@@ -12,17 +12,13 @@
         @undelete="onUndelete"
         @unhide="onUnhide"
         @update="onUpdate">
-    </DatasetUI>
+    </div>
 </template>
 <script>
-import DatasetUI from "components/History/ContentItem/Dataset/DatasetUI";
 import { Dataset } from "../../model";
 import { deleteContent, updateContentFields } from "../../model/queries";
 
 export default {
-    components: {
-        DatasetUI,
-    },
     props: {
         item: { type: Object, required: true },
         element_identifier: { type: String, required: false, default: "" },
diff --git a/client/src/components/History/ContentItem/GenericContentItem/GenericHistoryContent.vue b/client/src/components/History/ContentItem/GenericContentItem/GenericHistoryContent.vue
index 83ecb081d20..4a1a9a73967 100644
--- a/client/src/components/History/ContentItem/GenericContentItem/GenericHistoryContent.vue
+++ b/client/src/components/History/ContentItem/GenericContentItem/GenericHistoryContent.vue
@@ -9,8 +9,7 @@
 
 <script>
 import { DatasetProvider, DatasetCollectionProvider } from "components/providers";
-import DatasetCollectionUIWrapper from "./DatasetCollectionUIWrapper";
-import DatasetUIWrapper from "./DatasetUIWrapper";
+import DatasetCollectionUIWrapper from "./DatasetCollectionUIWrapper";;
 import { STATES } from "components/History/model";
 import LoadingSpan from "components/LoadingSpan";
 
@@ -18,7 +17,6 @@ export default {
     components: {
         DatasetProvider,
         DatasetCollectionProvider,
-        DatasetUIWrapper,
         DatasetCollectionUIWrapper,
         LoadingSpan,
     },
@@ -29,7 +27,7 @@ export default {
     },
     computed: {
         renderComponent() {
-            return { hda: "DatasetUIWrapper", hdca: "DatasetCollectionUIWrapper" }[this.data_item.src];
+            return { hdca: "DatasetCollectionUIWrapper" }[this.data_item.src];
         },
         providerComponent() {
             return { hda: "DatasetProvider", hdca: "DatasetCollectionProvider" }[this.data_item.src];

From 4bcda3dbddc3100930b926ae119d9f82e1098a14 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Feb 2022 22:17:09 -0500
Subject: [PATCH 47/95] Consolidate prior dataset collection wrappers, handled
 in item content now, disable generic wrappers

---
 .../DatasetCollection/DatasetCollection.vue   |  48 --------
 .../ContentItem/DatasetCollection/DscMenu.vue | 107 ----------------
 .../ContentItem/DatasetCollection/DscUI.vue   | 115 ------------------
 .../DatasetCollection/JobStateProgress.vue    |  44 -------
 .../ContentItem/DatasetCollection/index.js    |   6 -
 .../DatasetCollectionContents.vue             |   6 +-
 .../DatasetCollectionUIWrapper.vue            |   4 +-
 .../GenericHistoryContent.vue                 |   8 +-
 .../History/ContentItem/Placeholder.vue       |  18 ---
 .../History/ContentItem/Subcollection.vue     |  29 -----
 .../History/ContentItem/Subdataset.vue        |  61 ----------
 .../Description.vue}                          |   2 +-
 .../History/CurrentCollection/Details.vue     |  10 +-
 ...ollectionOperations.vue => Operations.vue} |   0
 .../History/CurrentCollection/Panel.vue       |   6 +-
 15 files changed, 15 insertions(+), 449 deletions(-)
 delete mode 100644 client/src/components/History/ContentItem/DatasetCollection/DatasetCollection.vue
 delete mode 100644 client/src/components/History/ContentItem/DatasetCollection/DscMenu.vue
 delete mode 100644 client/src/components/History/ContentItem/DatasetCollection/DscUI.vue
 delete mode 100644 client/src/components/History/ContentItem/DatasetCollection/JobStateProgress.vue
 delete mode 100644 client/src/components/History/ContentItem/DatasetCollection/index.js
 delete mode 100644 client/src/components/History/ContentItem/Placeholder.vue
 delete mode 100644 client/src/components/History/ContentItem/Subcollection.vue
 delete mode 100644 client/src/components/History/ContentItem/Subdataset.vue
 rename client/src/components/History/{ContentItem/DatasetCollection/DscDescription.vue => CurrentCollection/Description.vue} (87%)
 rename client/src/components/History/CurrentCollection/{CollectionOperations.vue => Operations.vue} (100%)

diff --git a/client/src/components/History/ContentItem/DatasetCollection/DatasetCollection.vue b/client/src/components/History/ContentItem/DatasetCollection/DatasetCollection.vue
deleted file mode 100644
index 6340d02ace7..00000000000
--- a/client/src/components/History/ContentItem/DatasetCollection/DatasetCollection.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-    <DscUI
-        v-if="dsc"
-        v-bind="$attrs"
-        v-on="$listeners"
-        class="dataset-collection history-content"
-        :dsc="dsc"
-        @update:dsc="onUpdate"
-        @delete="onDelete"
-        @undelete="onUndelete"
-        @unhide="onUnhide" />
-</template>
-
-<script>
-import DscUI from "./DscUI";
-import { DatasetCollection } from "../../model";
-import { deleteDatasetCollection, updateContentFields } from "../../model/queries";
-
-export default {
-    components: {
-        DscUI,
-    },
-    props: {
-        item: { type: Object, required: true },
-    },
-    computed: {
-        dsc() {
-            return new DatasetCollection(this.item);
-        },
-    },
-    methods: {
-        async onDelete(flags = {}) {
-            const { recursive = false, purge = false } = flags;
-            const collection = this.item;
-            await deleteDatasetCollection(collection, recursive, purge);
-        },
-        async onUnhide() {
-            await this.onUpdate({ visible: true });
-        },
-        async onUndelete() {
-            await this.onUpdate({ deleted: false });
-        },
-        async onUpdate(changes) {
-            await updateContentFields(this.item, changes);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/ContentItem/DatasetCollection/DscMenu.vue b/client/src/components/History/ContentItem/DatasetCollection/DscMenu.vue
deleted file mode 100644
index 11601a21278..00000000000
--- a/client/src/components/History/ContentItem/DatasetCollection/DscMenu.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-    <div class="collection-menu">
-        <b-button-group>
-            <IconButton
-                icon="info-circle"
-                v-if="hasJob"
-                key="dataset-details"
-                title="View Dataset Collection Details"
-                @click.stop.prevent="backboneRoute(collectionDetailsPath)"
-                variant="link"
-                class="px-1">
-            </IconButton>
-            <IconButton
-                v-if="notIn(STATES.DISCARDED)"
-                icon="pen"
-                :title="editButtonTitle"
-                :disabled="dsc.deleted || isIn(STATES.UPLOAD, STATES.NEW)"
-                @click.stop="backboneRoute('collection/edit/' + dsc.hdca_id)"
-                variant="link"
-                class="px-1 dsc-edit-view" />
-            <b-dropdown v-if="notIn(STATES.DISCARDED)" no-caret right variant="link" size="sm" boundary="window">
-                <template v-slot:button-content>
-                    <Icon icon="trash" variant="link" />
-                    <span class="sr-only">Delete Collection</span>
-                </template>
-
-                <b-dropdown-item @click.stop="$emit('delete')">
-                    <span v-localize>Delete Collection Only</span>
-                </b-dropdown-item>
-
-                <b-dropdown-item @click.stop="$emit('delete', { recursive: true })">
-                    <span v-localize>Delete Contained Datasets</span>
-                </b-dropdown-item>
-
-                <b-dropdown-item @click.stop="$emit('delete', { recursive: true, purge: true })">
-                    <span v-localize>Purge Contained Datasets</span>
-                </b-dropdown-item>
-            </b-dropdown>
-        </b-button-group>
-    </div>
-</template>
-
-<script>
-import { DatasetCollection, STATES } from "../../model";
-import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
-import Vue from "vue";
-import BootstrapVue from "bootstrap-vue";
-import IconButton from "components/IconButton";
-
-Vue.use(BootstrapVue);
-export default {
-    data() {
-        return {
-            deleteSelected: null,
-            deleteCollectionModalShow: false,
-        };
-    },
-    components: {
-        IconButton,
-    },
-    mixins: [legacyNavigationMixin],
-    props: {
-        dsc: { type: DatasetCollection, required: true },
-    },
-    computed: {
-        editButtonTitle() {
-            if (this.dsc.deleted) {
-                return "Collection must not be deleted to edit";
-            }
-            if (this.dsc.purged) {
-                return "Cannot edit attributes of collections removed from disk";
-            }
-            const unreadyStates = new Set([STATES.UPLOAD, STATES.NEW]);
-            if (unreadyStates.has(this.dsc.state)) {
-                return "This collection is not yet editable";
-            }
-            return "Edit attributes";
-        },
-        deleteCollectionButtonTitle() {
-            return "Delete Collection";
-        },
-        hasJob() {
-            return this.dsc?.job_source_type == "Job";
-        },
-        collectionDetailsPath() {
-            return `jobs/${this.dsc.job_source_id}/view`;
-        },
-    },
-    methods: {
-        runDelete: function (kind) {
-            if (kind) {
-                this.$emit("delete", kind);
-            } else {
-                this.$emit("delete");
-            }
-        },
-        notIn(...states) {
-            const badStates = new Set(states);
-            return !badStates.has(this.dsc.state);
-        },
-        isIn(...states) {
-            const goodStates = new Set(states);
-            return goodStates.has(this.dsc.state);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/ContentItem/DatasetCollection/DscUI.vue b/client/src/components/History/ContentItem/DatasetCollection/DscUI.vue
deleted file mode 100644
index 97e46b62492..00000000000
--- a/client/src/components/History/ContentItem/DatasetCollection/DscUI.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<!-- UI only, updates/changes to data should be handled outside
-    this component via events emissions -->
-
-<template>
-    <div
-        class="dataset dataset-collection collapsed"
-        :class="{ selected }"
-        :id="typedId"
-        :data-hid="dsc.hid"
-        :data-state="dsc.state"
-        @keydown.arrow-right.self.stop="$emit('viewCollection')"
-        @keydown.space.self.stop.prevent="$emit('update:selected', !selected)">
-        <nav class="content-top-menu p-1 d-flex cursor-pointer">
-            <div class="d-flex flex-grow-1 overflow-hidden">
-                <div class="pl-1" v-if="showSelection">
-                    <b-check
-                        class="selector"
-                        :checked="selected"
-                        @click.stop
-                        @change="$emit('update:selected', $event)" />
-                </div>
-
-                <StatusIcon
-                    v-if="dsc.state != 'ok'"
-                    class="status-icon px-1"
-                    :state="dsc.state"
-                    @click.stop="onStatusClick" />
-
-                <IconButton
-                    v-if="!dsc.visible"
-                    class="px-1"
-                    state="hidden"
-                    title="Unhide"
-                    icon="eye-slash"
-                    @click.stop="$emit('unhide')" />
-
-                <IconButton
-                    v-if="dsc.deleted"
-                    class="px-1"
-                    state="deleted"
-                    title="Undelete"
-                    icon="trash-restore"
-                    @click.stop="$emit('undelete')" />
-
-                <div class="content-title title flex-grow-1 overflow-hidden" @click.stop="$emit('viewCollection')">
-                    <h5 class="text-truncate">
-                        <span class="hid">{{ dsc.hid }}</span>
-                        <span class="name">{{ dsc.name }}</span>
-                    </h5>
-                    <DscDescription :dsc="dsc" />
-                </div>
-            </div>
-
-            <div class="d-flex" v-if="writable">
-                <slot name="menu">
-                    <DscMenu v-if="!dsc.deleted" v-on="$listeners" :dsc="dsc" />
-                </slot>
-            </div>
-        </nav>
-
-        <!--- read-only tags with name: prefix -->
-        <div v-if="collapsed && dsc.nameTags.length" class="nametags px-2 pb-2">
-            <Nametag v-for="tag in dsc.nameTags" :key="tag" :tag="tag" />
-        </div>
-
-        <JobStateProgress class="m-2" v-if="dsc.jobSummary" :summary="dsc.jobSummary" />
-    </div>
-</template>
-
-<script>
-import { DatasetCollection } from "../../model/DatasetCollection";
-import StatusIcon from "../../StatusIcon";
-import JobStateProgress from "./JobStateProgress";
-import DscDescription from "./DscDescription";
-import DscMenu from "./DscMenu";
-import { Nametag } from "components/Nametags";
-import IconButton from "components/IconButton";
-
-export default {
-    components: {
-        StatusIcon,
-        JobStateProgress,
-        DscMenu,
-        Nametag,
-        IconButton,
-        DscDescription,
-    },
-    props: {
-        dsc: { type: DatasetCollection, required: true },
-        selected: { type: Boolean, required: false, default: false },
-        showSelection: { type: Boolean, required: false, default: false },
-        writable: { type: Boolean, required: false, default: true },
-    },
-    methods: {
-        onStatusClick() {
-            console.log("onStatusClick", ...arguments);
-        },
-    },
-    computed: {
-        typedId() {
-            return this.dsc.type_id;
-        },
-        collapsed() {
-            return !this.expanded;
-        },
-    },
-};
-</script>
-
-<style lang="scss" scoped>
-header,
-header * {
-    cursor: pointer;
-}
-</style>
diff --git a/client/src/components/History/ContentItem/DatasetCollection/JobStateProgress.vue b/client/src/components/History/ContentItem/DatasetCollection/JobStateProgress.vue
deleted file mode 100644
index 86ee5227adc..00000000000
--- a/client/src/components/History/ContentItem/DatasetCollection/JobStateProgress.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<!-- Job state progress bar for a collection. There's another similar component
-at components/JobStates/CollectionJobStates but it relies on the backbone data
-model, so probably has to go eventually.-->
-
-<template>
-    <b-progress v-if="maxJobs && runningJobs" :max="maxJobs" height="1em">
-        <b-progress-bar v-if="errorJobs" :value="errorJobs" variant="danger"></b-progress-bar>
-        <b-progress-bar v-if="okJobs" :value="okJobs" variant="success"></b-progress-bar>
-        <b-progress-bar v-if="runningJobs" :value="runningJobs" variant="info" animated></b-progress-bar>
-        <b-progress-bar v-if="waitingJobs" :value="waitingJobs" variant="dark" animated></b-progress-bar>
-    </b-progress>
-</template>
-
-<script>
-import { JobStateSummary } from "../../model";
-
-export default {
-    props: {
-        summary: { type: JobStateSummary, required: true },
-    },
-    computed: {
-        hasRunningJobs() {
-            return this.summary && this.summary.running > 0;
-        },
-        maxJobs() {
-            return this.summary.all_jobs;
-        },
-        okJobs() {
-            return this.summary.ok;
-        },
-        runningJobs() {
-            return this.summary.running;
-        },
-        errorJobs() {
-            const { failed = 0, error = 0 } = this.summary;
-            return failed + error;
-        },
-        waitingJobs() {
-            const { waiting = 0, queued = 0 } = this.summary;
-            return waiting + queued;
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/ContentItem/DatasetCollection/index.js b/client/src/components/History/ContentItem/DatasetCollection/index.js
deleted file mode 100644
index 4d7f796c22b..00000000000
--- a/client/src/components/History/ContentItem/DatasetCollection/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import DatasetCollection from "./DatasetCollection";
-
-export { default as DscUI } from "./DscUI";
-export { default as DscMenu } from "./DscMenu";
-export { default as JobStateProgress } from "./JobStateProgress";
-export default DatasetCollection;
diff --git a/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionContents.vue b/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionContents.vue
index 3b8f3c5d056..00307d4dae8 100644
--- a/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionContents.vue
+++ b/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionContents.vue
@@ -7,8 +7,8 @@
                 v-slot="{ result: item, loading }">
                 <div>
                     <loading-span v-if="loading" message="Loading datasets" />
-                    <DatasetUIWrapper v-else :item="item" :element_identifier="contentItem.element_identifier">
-                    </DatasetUIWrapper>
+                    <div v-else :item="item" :element_identifier="contentItem.element_identifier">
+                    </div>
                 </div>
             </DatasetProvider>
             <DatasetCollectionUIWrapper
@@ -21,14 +21,12 @@
 </template>
 <script>
 import { DatasetProvider } from "components/providers";
-import DatasetUIWrapper from "./DatasetUIWrapper";
 import LoadingSpan from "components/LoadingSpan";
 
 export default {
     components: {
         DatasetProvider,
         DatasetCollectionUIWrapper: () => import("./DatasetCollectionUIWrapper"),
-        DatasetUIWrapper,
         LoadingSpan,
     },
     props: {
diff --git a/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionUIWrapper.vue b/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionUIWrapper.vue
index eb07c745373..62c67eeb767 100644
--- a/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionUIWrapper.vue
+++ b/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionUIWrapper.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <DscUI
+        <div
             v-if="datasetCollection"
             v-bind="$attrs"
             v-on="$listeners"
@@ -20,7 +20,6 @@
 <script>
 import { deleteDatasetCollection, updateContentFields } from "../../model/queries";
 import { DatasetCollection } from "../../model/DatasetCollection";
-import DscUI from "components/History/ContentItem/DatasetCollection/DscUI";
 import { DatasetCollectionContentProvider } from "components/providers";
 import DatasetCollectionContents from "./DatasetCollectionContents";
 
@@ -28,7 +27,6 @@ export default {
     components: {
         DatasetCollectionContentProvider,
         DatasetCollectionContents,
-        DscUI,
     },
     props: {
         item: { type: Object, required: true },
diff --git a/client/src/components/History/ContentItem/GenericContentItem/GenericHistoryContent.vue b/client/src/components/History/ContentItem/GenericContentItem/GenericHistoryContent.vue
index 4a1a9a73967..062265b02c9 100644
--- a/client/src/components/History/ContentItem/GenericContentItem/GenericHistoryContent.vue
+++ b/client/src/components/History/ContentItem/GenericContentItem/GenericHistoryContent.vue
@@ -2,14 +2,13 @@
     <component :is="providerComponent" :id="data_item.id" auto-refresh v-slot="{ result: item, loading }">
         <div>
             <loading-span v-if="loading" message="Loading dataset" />
-            <component :is="renderComponent" v-if="item" :item="item"> </component>
+            <div v-if="item" :item="item"/>
         </div>
     </component>
 </template>
 
 <script>
 import { DatasetProvider, DatasetCollectionProvider } from "components/providers";
-import DatasetCollectionUIWrapper from "./DatasetCollectionUIWrapper";;
 import { STATES } from "components/History/model";
 import LoadingSpan from "components/LoadingSpan";
 
@@ -17,7 +16,6 @@ export default {
     components: {
         DatasetProvider,
         DatasetCollectionProvider,
-        DatasetCollectionUIWrapper,
         LoadingSpan,
     },
     props: {
@@ -27,10 +25,10 @@ export default {
     },
     computed: {
         renderComponent() {
-            return { hdca: "DatasetCollectionUIWrapper" }[this.data_item.src];
+            return null; // { hdca: "DatasetCollectionUIWrapper" }[this.data_item.src];
         },
         providerComponent() {
-            return { hda: "DatasetProvider", hdca: "DatasetCollectionProvider" }[this.data_item.src];
+            return null; // { hda: "DatasetProvider", hdca: "DatasetCollectionProvider" }[this.data_item.src];
         },
     },
     provide: {
diff --git a/client/src/components/History/ContentItem/Placeholder.vue b/client/src/components/History/ContentItem/Placeholder.vue
deleted file mode 100644
index 555f0a7325e..00000000000
--- a/client/src/components/History/ContentItem/Placeholder.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <div class="collapsed" data-state="waiting">
-        <nav class="content-top-menu d-flex align-items-center justify-content-between p-1">
-            <h5 class="flex-grow-1 overflow-hidden mr-auto text-nowrap text-truncate">
-                <span class="name">Placholder: {{ item.hid }}</span>
-            </h5>
-        </nav>
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        item: { type: Object, required: true },
-        index: { type: Number, required: true },
-    },
-};
-</script>
diff --git a/client/src/components/History/ContentItem/Subcollection.vue b/client/src/components/History/ContentItem/Subcollection.vue
deleted file mode 100644
index 0a7a632f405..00000000000
--- a/client/src/components/History/ContentItem/Subcollection.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- a separate collection content item for collections
-    inside of other collections -->
-
-<template>
-    <DscUI v-if="dsc" v-bind="$attrs" v-on="$listeners" class="dataset-collection history-content" :dsc="dsc" />
-</template>
-
-<script>
-import { DatasetCollection } from "../model/DatasetCollection";
-import { STATES } from "../model";
-import DscUI from "./DatasetCollection/DscUI";
-
-export default {
-    components: {
-        DscUI,
-    },
-    props: {
-        item: { type: Object, required: true },
-    },
-    computed: {
-        dsc() {
-            // TODO: I'm sure this is not the right way to set the state, but the collection api
-            // doesn't return any kind of state value at because the api is inconsistent
-            // /api/dataset_collections/d071e794759ab192/contents/e144222fed44799a
-            return new DatasetCollection({ ...this.item, populated_state: STATES.OK });
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/ContentItem/Subdataset.vue b/client/src/components/History/ContentItem/Subdataset.vue
deleted file mode 100644
index 3d5fd4ef68b..00000000000
--- a/client/src/components/History/ContentItem/Subdataset.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<!-- a read-only dataset inside a collection. The collection query does not return enough
-information to properly render the dataset, so what we do is look it up on expand, checking the
-cache first to see if we already have the data -->
-
-<template>
-    <DatasetUI
-        v-if="dataset"
-        v-bind="$attrs"
-        v-on="$listeners"
-        :dataset="dataset"
-        :writable="false"
-        :selectable="false"
-        @update:expanded="onExpand" />
-</template>
-
-<script>
-import { Dataset } from "../model";
-import { getContentDetails } from "../model/queries";
-import DatasetUI from "./Dataset/DatasetUI";
-
-export default {
-    components: {
-        DatasetUI,
-    },
-    props: {
-        item: { type: Object, required: true },
-    },
-    data() {
-        return {
-            datasetObject: this.extractDataset(this.item),
-            loading: false,
-        };
-    },
-    computed: {
-        dataset() {
-            return new Dataset({ ...this.datasetObject });
-        },
-    },
-    methods: {
-        extractDataset() {
-            return {
-                id: this.item.object.id,
-                element_identifier: this.item.element_identifier,
-                state: this.item.object.state,
-                history_id: this.item.object.history_id,
-                history_content_type: "dataset",
-                visible: true,
-            };
-        },
-        onExpand(val) {
-            if (val) {
-                this.loadDetails();
-            }
-            this.$emit("update:expand", val);
-        },
-        async loadDetails() {
-            this.datasetObject = await getContentDetails(this.datasetObject);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/ContentItem/DatasetCollection/DscDescription.vue b/client/src/components/History/CurrentCollection/Description.vue
similarity index 87%
rename from client/src/components/History/ContentItem/DatasetCollection/DscDescription.vue
rename to client/src/components/History/CurrentCollection/Description.vue
index e61a881662c..d928f48f0f0 100644
--- a/client/src/components/History/ContentItem/DatasetCollection/DscDescription.vue
+++ b/client/src/components/History/CurrentCollection/Description.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { DatasetCollection } from "../../model/DatasetCollection";
+import { DatasetCollection } from "components/History/model/DatasetCollection";
 
 export default {
     props: {
diff --git a/client/src/components/History/CurrentCollection/Details.vue b/client/src/components/History/CurrentCollection/Details.vue
index d13afdc23a4..fec8d951130 100644
--- a/client/src/components/History/CurrentCollection/Details.vue
+++ b/client/src/components/History/CurrentCollection/Details.vue
@@ -7,7 +7,7 @@
                 {{ dscName || "(Collection Name)" }}
             </h3>
             <p class="mt-1">
-                <DscDescription :dsc="dsc" />
+                <Description :dsc="dsc" />
             </p>
 
             <div v-if="isEditing" class="mt-3" @keydown.esc="revertAndCancel" data-description="edit form">
@@ -39,18 +39,18 @@
 </template>
 
 <script>
-import { DatasetCollection } from "../model";
+import { DatasetCollection } from "components/History/model";
 import { Nametag } from "components/Nametags";
-import EditorMenu from "../EditorMenu";
+import EditorMenu from "components/History/EditorMenu";
 import { StatelessTags } from "components/Tags";
-import DscDescription from "components/History/ContentItem/DatasetCollection/DscDescription";
+import Description from "./Description";
 
 export default {
     components: {
         Nametag,
         EditorMenu,
         StatelessTags,
-        DscDescription,
+        Description,
     },
     props: {
         dsc: { type: DatasetCollection, required: true },
diff --git a/client/src/components/History/CurrentCollection/CollectionOperations.vue b/client/src/components/History/CurrentCollection/Operations.vue
similarity index 100%
rename from client/src/components/History/CurrentCollection/CollectionOperations.vue
rename to client/src/components/History/CurrentCollection/Operations.vue
diff --git a/client/src/components/History/CurrentCollection/Panel.vue b/client/src/components/History/CurrentCollection/Panel.vue
index 89480af27d9..231b3d6bf72 100644
--- a/client/src/components/History/CurrentCollection/Panel.vue
+++ b/client/src/components/History/CurrentCollection/Panel.vue
@@ -17,7 +17,7 @@
                 </template>
 
                 <template v-slot:listcontrols>
-                    <CollectionOperations :collection="selectedCollection" :is-root="isRoot" />
+                    <Operations :collection="selectedCollection" :is-root="isRoot" />
                 </template>
 
                 <template v-slot:details>
@@ -56,7 +56,7 @@ import { updateContentFields } from "../model/queries";
 import ExpandedItems from "../ExpandedItems";
 import Layout from "../Layout";
 import TopNav from "./TopNav";
-import CollectionOperations from "./CollectionOperations";
+import Operations from "./Operations";
 import Details from "./Details";
 import ContentItem from "../ContentItem/ContentItem";
 import HistoryListing from "components/History/HistoryListing";
@@ -70,7 +70,7 @@ export default {
         Details,
         ContentItem,
         ExpandedItems,
-        CollectionOperations,
+        Operations,
         HistoryListing,
     },
     props: {

From 10e96c6d14527542e25dbf964fad9710e59a805a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Feb 2022 23:25:43 -0500
Subject: [PATCH 48/95] Consolidate state icons into state mapping dictionary

---
 .../History/ContentItem/ContentItem.vue       |  7 +++
 .../History/ContentItem/contentState.js       | 10 ++++
 client/src/components/History/StatusIcon.vue  | 54 -------------------
 3 files changed, 17 insertions(+), 54 deletions(-)
 delete mode 100644 client/src/components/History/StatusIcon.vue

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 74f99be8167..303b104c8ee 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -61,6 +61,7 @@
                             @click.stop="$emit('update:selected', false)" />
                         <span v-else class="fa fa-lg fa-square-o" @click.stop="$emit('update:selected', true)" />
                     </div>
+                    <span :class="icon" />
                     <span class="id">{{ id }}:</span>
                     <span class="name">{{ name }}</span>
                     <h6 v-if="item.collection_type" class="description py-1">
@@ -92,6 +93,12 @@ export default {
         writeable: { type: Boolean, default: true },
     },
     computed: {
+        icon() {
+            const stateIcon = CONTENTSTATE[this.state] && CONTENTSTATE[this.state].icon;
+            if (stateIcon) {
+                return `fa fa-${stateIcon}`;
+            }
+        },
         editButtonTitle() {
             if (this.item.deleted) {
                 return "Undelete dataset to edit attributes";
diff --git a/client/src/components/History/ContentItem/contentState.js b/client/src/components/History/ContentItem/contentState.js
index af0924dabc6..cd8377e4394 100644
--- a/client/src/components/History/ContentItem/contentState.js
+++ b/client/src/components/History/ContentItem/contentState.js
@@ -3,26 +3,31 @@ export default {
     upload: {
         status: "warning",
         text: "This dataset is currently uploading.",
+        icon: "clock",
     },
     /** the job that will produce the dataset queued in the runner */
     queued: {
         status: "warning",
         text: "This job is waiting to run.",
+        icon: "clock",
     },
     /** the job that will produce the dataset is running */
     running: {
         status: "warning",
         text: "This job is currently running.",
+        icon: "clock",
     },
     /** metadata for the dataset is being discovered/set */
     setting_metadata: {
         status: "warning",
         text: "Metadata is being auto-detected.",
+        icon: "clock",
     },
     /** was created without a tool */
     new: {
         status: "warning",
         text: "This is a new dataset and not all of its data are available yet.",
+        icon: "clock",
     },
     /** job is being created, but not put into job queue yet */
     waiting: {
@@ -41,6 +46,7 @@ export default {
     paused: {
         status: "info",
         text: "This job is paused. Use the 'Resume Paused Jobs' in the history menu to resume.",
+        icon: "pause",
     },
     /** metadata discovery/setting failed or errored (but otherwise ok) */
     failed_metadata: {
@@ -50,22 +56,26 @@ export default {
     error: {
         status: "danger",
         text: "An error occurred with this dataset",
+        icon: "exclamation-circle",
     },
     /** deleted while uploading */
     discarded: {
         status: "danger",
         text: "The job creating this dataset was cancelled before completion.",
+        icon: "exclamation-circle",
     },
     //TODO: not in trans.app.model.Dataset.states - is in database
     /** not accessible to the current user (i.e. due to permissions) */
     noPermission: {
         status: "danger",
         text: "You do not have permission to view this dataset.",
+        icon: "exclamation-circle",
     },
     // found in job-state summary model?
     // this an actual state value or something derived from deleted prop?
     deleted: {
         status: "danger",
+        icon: "exclamation-circle",
     },
     loading: {
         status: "warning",
diff --git a/client/src/components/History/StatusIcon.vue b/client/src/components/History/StatusIcon.vue
deleted file mode 100644
index 82fa5d5b0a1..00000000000
--- a/client/src/components/History/StatusIcon.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <IconButton
-        v-if="stateIcon"
-        v-b-tooltip
-        :title="theTitle"
-        :icon="stateIcon"
-        :variant="variant"
-        v-on="$listeners"
-        v-bind="$attrs" />
-</template>
-
-<script>
-import capitalize from "underscore.string/capitalize";
-import IconButton from "components/IconButton";
-
-export default {
-    inject: ["STATES"],
-    components: {
-        IconButton,
-    },
-    props: {
-        state: { type: String, required: true },
-        variant: { type: String, required: false, default: "link" },
-    },
-    computed: {
-        stateIcon() {
-            if (this.inState(this.STATES.QUEUED, this.STATES.NEW, this.STATES.RUNNING)) {
-                return "clock";
-            }
-            if (this.inState(this.STATES.PAUSED)) {
-                return "pause";
-            }
-            if (this.inState(this.STATES.ERROR)) {
-                return "exclamation-triangle";
-            }
-            if (this.inState(this.STATES.MIXED)) {
-                return "exclamation-circle";
-            }
-            if (this.inState(this.STATES.OK)) {
-                return "check";
-            }
-            return null;
-        },
-        theTitle() {
-            return this.title || capitalize(this.state);
-        },
-    },
-    methods: {
-        inState(...states) {
-            return states.includes(this.state);
-        },
-    },
-};
-</script>

From 0706bbb39f68ffa47a02af5a1fdb56f34bbbff2a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 16 Feb 2022 23:30:10 -0500
Subject: [PATCH 49/95] Use bug to indicate error, simplify transition between
 new and old history, avoid tutorial conflicts

---
 .../components/History/ContentItem/Dataset/DatasetActions.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/History/ContentItem/Dataset/DatasetActions.vue b/client/src/components/History/ContentItem/Dataset/DatasetActions.vue
index c236885febc..07f7b5c509f 100644
--- a/client/src/components/History/ContentItem/Dataset/DatasetActions.vue
+++ b/client/src/components/History/ContentItem/Dataset/DatasetActions.vue
@@ -2,7 +2,7 @@
     <div class="mb-1 clearfix">
         <div class="btn-group float-left">
             <b-button v-if="showError" class="px-1" title="Error" size="sm" variant="link" @click.stop="onError">
-                <span class="fa fa-exclamation-triangle" />
+                <span class="fa fa-bug" />
             </b-button>
             <b-button
                 v-if="showDownloads"

From 6698a4f44812dad2ef5b986e79cb1464b8c49935 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 17 Feb 2022 00:39:13 -0500
Subject: [PATCH 50/95] Prep collections component

---
 .../History/ContentItem/ContentItem.vue       | 14 +++++------
 .../DatasetCollectionContents.vue             |  3 +--
 .../GenericContentItem/DatasetUIWrapper.vue   |  3 +--
 .../GenericHistoryContent.vue                 |  2 +-
 .../History/CurrentCollection/Description.vue |  4 +--
 .../History/CurrentCollection/Details.vue     |  6 ++---
 .../History/CurrentCollection/Panel.vue       | 25 ++++++++++---------
 .../src/components/History/HistoryPanel.vue   |  1 +
 8 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index 303b104c8ee..dda95d09997 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -4,8 +4,8 @@
             <div class="clearfix overflow-hidden">
                 <div class="btn-group float-right">
                     <b-button
-                        v-if="expandable && item.state !== 'noPermission' && item.state !== 'discarded'"
-                        :disabled="item.purged || item.state == 'upload' || item.state == 'new'"
+                        v-if="expandable && state !== 'noPermission' && state !== 'discarded'"
+                        :disabled="item.purged || state == 'upload' || state == 'new'"
                         :title="displayButtonTitle"
                         class="px-1"
                         size="sm"
@@ -14,8 +14,8 @@
                         <span class="fa fa-eye" />
                     </b-button>
                     <b-button
-                        v-if="writeable && item.state != 'discarded'"
-                        :disabled="item.purged || item.deleted || item.state == 'upload' || item.state == 'new'"
+                        v-if="writeable && state != 'discarded'"
+                        :disabled="item.purged || item.deleted || state == 'upload' || state == 'new'"
                         class="px-1"
                         title="Edit"
                         size="sm"
@@ -106,7 +106,7 @@ export default {
             if (this.item.purged) {
                 return "Cannot edit attributes of datasets removed from disk";
             }
-            if (this.item.state == "upload" || this.item.state != "new") {
+            if (this.state == "upload" || this.state != "new") {
                 return "This dataset is not yet editable";
             }
             return "Edit attributes";
@@ -115,10 +115,10 @@ export default {
             if (this.item.purged) {
                 return "Cannot display datasets removed from disk";
             }
-            if (this.item.state == "upload") {
+            if (this.state == "upload") {
                 return "This dataset must finish uploading before it can be viewed";
             }
-            if (this.item.state == "new") {
+            if (this.state == "new") {
                 return "This dataset is not yet viewable";
             }
             return "View data";
diff --git a/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionContents.vue b/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionContents.vue
index 00307d4dae8..9f1ee7dbf48 100644
--- a/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionContents.vue
+++ b/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionContents.vue
@@ -7,8 +7,7 @@
                 v-slot="{ result: item, loading }">
                 <div>
                     <loading-span v-if="loading" message="Loading datasets" />
-                    <div v-else :item="item" :element_identifier="contentItem.element_identifier">
-                    </div>
+                    <div v-else :item="item" :element_identifier="contentItem.element_identifier"></div>
                 </div>
             </DatasetProvider>
             <DatasetCollectionUIWrapper
diff --git a/client/src/components/History/ContentItem/GenericContentItem/DatasetUIWrapper.vue b/client/src/components/History/ContentItem/GenericContentItem/DatasetUIWrapper.vue
index 93bc13e59ef..bc195770945 100644
--- a/client/src/components/History/ContentItem/GenericContentItem/DatasetUIWrapper.vue
+++ b/client/src/components/History/ContentItem/GenericContentItem/DatasetUIWrapper.vue
@@ -11,8 +11,7 @@
         @delete="onDelete"
         @undelete="onUndelete"
         @unhide="onUnhide"
-        @update="onUpdate">
-    </div>
+        @update="onUpdate"></div>
 </template>
 <script>
 import { Dataset } from "../../model";
diff --git a/client/src/components/History/ContentItem/GenericContentItem/GenericHistoryContent.vue b/client/src/components/History/ContentItem/GenericContentItem/GenericHistoryContent.vue
index 062265b02c9..1cb46443882 100644
--- a/client/src/components/History/ContentItem/GenericContentItem/GenericHistoryContent.vue
+++ b/client/src/components/History/ContentItem/GenericContentItem/GenericHistoryContent.vue
@@ -2,7 +2,7 @@
     <component :is="providerComponent" :id="data_item.id" auto-refresh v-slot="{ result: item, loading }">
         <div>
             <loading-span v-if="loading" message="Loading dataset" />
-            <div v-if="item" :item="item"/>
+            <div v-if="item" :item="item" />
         </div>
     </component>
 </template>
diff --git a/client/src/components/History/CurrentCollection/Description.vue b/client/src/components/History/CurrentCollection/Description.vue
index d928f48f0f0..84687c6a49d 100644
--- a/client/src/components/History/CurrentCollection/Description.vue
+++ b/client/src/components/History/CurrentCollection/Description.vue
@@ -6,11 +6,9 @@
 </template>
 
 <script>
-import { DatasetCollection } from "components/History/model/DatasetCollection";
-
 export default {
     props: {
-        dsc: { type: DatasetCollection, required: true },
+        dsc: { type: Object, required: true },
     },
     computed: {
         /** @return {Boolean} */
diff --git a/client/src/components/History/CurrentCollection/Details.vue b/client/src/components/History/CurrentCollection/Details.vue
index fec8d951130..0f991199bd2 100644
--- a/client/src/components/History/CurrentCollection/Details.vue
+++ b/client/src/components/History/CurrentCollection/Details.vue
@@ -53,13 +53,13 @@ export default {
         Description,
     },
     props: {
-        dsc: { type: DatasetCollection, required: true },
+        dsc: { type: Object, required: true },
         writable: { type: Boolean, required: true },
     },
     data() {
         return {
             editing: false,
-            tempContent: this.dsc.clone(),
+            tempContent: Object.assign({}, this.dsc),
         };
     },
     computed: {
@@ -103,7 +103,7 @@ export default {
     },
     methods: {
         reset() {
-            this.tempContent = this.dsc.clone();
+            this.tempContent = Object.assign({}, this.dsc);
         },
         patchTempDsc(props = {}) {
             this.tempContent = this.tempContent.patch(props);
diff --git a/client/src/components/History/CurrentCollection/Panel.vue b/client/src/components/History/CurrentCollection/Panel.vue
index 231b3d6bf72..0c3a9556a1c 100644
--- a/client/src/components/History/CurrentCollection/Panel.vue
+++ b/client/src/components/History/CurrentCollection/Panel.vue
@@ -1,9 +1,9 @@
 <!-- When a dataset collection is being viewed, this panel shows the contents of that collection -->
 
 <template>
-    <UrlDataProvider v-if="dsc" :url="getUrl(selectedCollection)" v-slot="{ result: payload }">
+    <UrlDataProvider v-if="dsc" :key="dsc.id" :url="getUrl(dsc)" v-slot="{ result: payload }">
         <ExpandedItems
-            :scope-key="selectedCollection.id"
+            :scope-key="dsc.id"
             :get-item-key="(item) => item.element_index"
             v-slot="{ isExpanded, setExpanded }">
             <Layout class="dataset-collection-panel">
@@ -17,7 +17,7 @@
                 </template>
 
                 <template v-slot:listcontrols>
-                    <Operations :collection="selectedCollection" :is-root="isRoot" />
+                    <Operations :collection="dsc" :is-root="isRoot" />
                 </template>
 
                 <template v-slot:details>
@@ -35,8 +35,8 @@
                                 :item="item"
                                 :id="item.element_index"
                                 :name="item.element_identifier"
-                                :expandable="item.element_type == 'hda'"
-                                :state="item.object.state"
+                                :expandable="item.element_type == 'dataset'"
+                                :state="item.state"
                                 :expanded="isExpanded(item)"
                                 :writeable="false"
                                 @update:expanded="setExpanded(item, $event)"
@@ -83,22 +83,21 @@ export default {
         };
     },
     created() {
-        this.dsc = new DatasetCollection(this.selectedCollection);
+        console.log(this.dsc);
     },
     computed: {
-        selectedCollection() {
+        dsc() {
             const arr = this.selectedCollections;
-            const selected = arr[arr.length - 1];
-            return selected;
+            return arr[arr.length - 1];
         },
         isRoot() {
-            return this.selectedCollection == this.rootCollection;
+            return this.dsc == this.rootCollection;
         },
         writable() {
             return this.isRoot;
         },
         rootCollection() {
-            return this.selectedCollections[0];
+            return this.dsc[0];
         },
         downloadCollectionUrl() {
             let url = "";
@@ -110,7 +109,9 @@ export default {
     },
     methods: {
         getUrl(dsc) {
-            return dsc.contents_url.substring(1);
+            const element = dsc && dsc.object ? dsc.object : dsc;
+            console.log(dsc);
+            return element.contents_url.substring(1);
         },
         // change the data of the root collection, anything past the root
         // collection is part of the dataset collection, which i believe is supposed to
diff --git a/client/src/components/History/HistoryPanel.vue b/client/src/components/History/HistoryPanel.vue
index 58d0bbbc3c1..33e6f21e714 100644
--- a/client/src/components/History/HistoryPanel.vue
+++ b/client/src/components/History/HistoryPanel.vue
@@ -46,6 +46,7 @@ export default {
     methods: {
         onViewCollection(collection) {
             this.breadcrumbs = [...this.breadcrumbs, collection];
+            console.log(this.breadcrumbs);
         },
     },
 };

From 61c962a62e898fa009f12a1ff7e7f936e2bdf791 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 17 Feb 2022 01:07:17 -0500
Subject: [PATCH 51/95] Prep using regular breadcrumbs

---
 .../{TopNav.vue => Navigation.vue}            | 38 ++++---------------
 .../History/CurrentCollection/Panel.vue       | 20 +++-------
 .../src/components/History/HistoryPanel.vue   |  1 -
 3 files changed, 13 insertions(+), 46 deletions(-)
 rename client/src/components/History/CurrentCollection/{TopNav.vue => Navigation.vue} (53%)

diff --git a/client/src/components/History/CurrentCollection/TopNav.vue b/client/src/components/History/CurrentCollection/Navigation.vue
similarity index 53%
rename from client/src/components/History/CurrentCollection/TopNav.vue
rename to client/src/components/History/CurrentCollection/Navigation.vue
index ad02a1ee399..17726dbf410 100644
--- a/client/src/components/History/CurrentCollection/TopNav.vue
+++ b/client/src/components/History/CurrentCollection/Navigation.vue
@@ -1,35 +1,12 @@
 <template>
-    <b-dropdown
-        v-if="breadCrumbOptions.length"
-        size="sm"
-        text="Return to..."
-        boundary="viewport"
-        data-description="collection breadcrumbs menu"
-        no-caret>
-        <template v-slot:button-content>
-            <Icon icon="arrow-up" class="mr-1" />
-            <b class="text-nowrap" v-localize>Return to...</b>
-        </template>
-
-        <b-dropdown-item @click="close" data-description="back to history">
-            <span>History: {{ history.name }}</span>
-        </b-dropdown-item>
-
-        <b-dropdown-item v-for="option in breadCrumbOptions" :key="option.key" @click="reselect(option.value)">
+    <b-breadcrumb>
+        <b-breadcrumb-item href="#" @click="close">
+            <span class="fa fa-angle-double-left" />
+        </b-breadcrumb-item>
+        <b-breadcrumb-item v-for="option in breadCrumbOptions" :key="option.key" @click="reselect(option.value)">
             <span>{{ option.text }}</span>
-        </b-dropdown-item>
-    </b-dropdown>
-
-    <b-button
-        v-else
-        class="back"
-        size="sm"
-        title="`Return to: ${history.name}`"
-        @click="close"
-        data-description="back to history">
-        <Icon icon="arrow-up" class="mr-1" />
-        <b class="text-nowrap">Return to: {{ history.name }}</b>
-    </b-button>
+        </b-breadcrumb-item>
+    </b-breadcrumb>
 </template>
 
 <script>
@@ -52,6 +29,7 @@ export default {
                     text: bc.name,
                 };
             });
+            console.log(options);
             return options;
         },
     },
diff --git a/client/src/components/History/CurrentCollection/Panel.vue b/client/src/components/History/CurrentCollection/Panel.vue
index 0c3a9556a1c..ff3d103af63 100644
--- a/client/src/components/History/CurrentCollection/Panel.vue
+++ b/client/src/components/History/CurrentCollection/Panel.vue
@@ -8,12 +8,7 @@
             v-slot="{ isExpanded, setExpanded }">
             <Layout class="dataset-collection-panel">
                 <template v-slot:globalnav>
-                    <TopNav :history="history" :selected-collections="selectedCollections" v-on="$listeners" />
-                </template>
-
-                <template v-slot:localnav>
-                    <!-- Empty -->
-                    <div />
+                    <Navigation :history="history" :selected-collections="selectedCollections" v-on="$listeners" />
                 </template>
 
                 <template v-slot:listcontrols>
@@ -50,12 +45,11 @@
 </template>
 
 <script>
-import { DatasetCollection } from "../model";
-import { History } from "../model";
-import { updateContentFields } from "../model/queries";
+import { DatasetCollection, History } from "components/History/model";
+import { updateContentFields } from "components/History/model/queries";
 import ExpandedItems from "../ExpandedItems";
 import Layout from "../Layout";
-import TopNav from "./TopNav";
+import Navigation from "./Navigation";
 import Operations from "./Operations";
 import Details from "./Details";
 import ContentItem from "../ContentItem/ContentItem";
@@ -66,7 +60,7 @@ export default {
     components: {
         UrlDataProvider,
         Layout,
-        TopNav,
+        Navigation,
         Details,
         ContentItem,
         ExpandedItems,
@@ -82,9 +76,6 @@ export default {
             pageSize: 50,
         };
     },
-    created() {
-        console.log(this.dsc);
-    },
     computed: {
         dsc() {
             const arr = this.selectedCollections;
@@ -110,7 +101,6 @@ export default {
     methods: {
         getUrl(dsc) {
             const element = dsc && dsc.object ? dsc.object : dsc;
-            console.log(dsc);
             return element.contents_url.substring(1);
         },
         // change the data of the root collection, anything past the root
diff --git a/client/src/components/History/HistoryPanel.vue b/client/src/components/History/HistoryPanel.vue
index 33e6f21e714..58d0bbbc3c1 100644
--- a/client/src/components/History/HistoryPanel.vue
+++ b/client/src/components/History/HistoryPanel.vue
@@ -46,7 +46,6 @@ export default {
     methods: {
         onViewCollection(collection) {
             this.breadcrumbs = [...this.breadcrumbs, collection];
-            console.log(this.breadcrumbs);
         },
     },
 };

From 5840fd2700f66ab686f797cfd4f6c9435a14a819 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 17 Feb 2022 01:10:31 -0500
Subject: [PATCH 52/95] Remove duplicate navigation slot

---
 .../components/History/CurrentCollection/Panel.vue  |  2 +-
 .../src/components/History/CurrentHistoryPanel.vue  |  2 +-
 client/src/components/History/History.vue           |  7 ++-----
 client/src/components/History/Layout.vue            | 13 ++++++-------
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/client/src/components/History/CurrentCollection/Panel.vue b/client/src/components/History/CurrentCollection/Panel.vue
index ff3d103af63..1172ef645ad 100644
--- a/client/src/components/History/CurrentCollection/Panel.vue
+++ b/client/src/components/History/CurrentCollection/Panel.vue
@@ -7,7 +7,7 @@
             :get-item-key="(item) => item.element_index"
             v-slot="{ isExpanded, setExpanded }">
             <Layout class="dataset-collection-panel">
-                <template v-slot:globalnav>
+                <template v-slot:navigation>
                     <Navigation :history="history" :selected-collections="selectedCollections" v-on="$listeners" />
                 </template>
 
diff --git a/client/src/components/History/CurrentHistoryPanel.vue b/client/src/components/History/CurrentHistoryPanel.vue
index 33bad0f7e18..854cd38c657 100644
--- a/client/src/components/History/CurrentHistoryPanel.vue
+++ b/client/src/components/History/CurrentHistoryPanel.vue
@@ -2,7 +2,7 @@
     <CurrentUser class="d-flex flex-column" v-slot="{ user }">
         <UserHistories v-if="user" :user="user" v-slot="{ currentHistory, histories, handlers }">
             <HistoryPanel v-if="currentHistory" :history="currentHistory" v-on="handlers" id="current-history-panel">
-                <template v-slot:globalnav>
+                <template v-slot:navigation>
                     <HistoriesMenu
                         v-on="handlers"
                         :histories="histories"
diff --git a/client/src/components/History/History.vue b/client/src/components/History/History.vue
index 4afb841689b..03e2f33aa2f 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/History.vue
@@ -17,11 +17,8 @@
                     resetSelection,
                 }">
                 <Layout>
-                    <template v-slot:globalnav>
-                        <slot name="globalnav" :history="history" />
-                    </template>
-
-                    <template v-slot:localnav>
+                    <template v-slot:navigation>
+                        <slot name="navigation" :history="history" />
                         <HistoryMenu :history="history" v-on="$listeners" />
                     </template>
 
diff --git a/client/src/components/History/Layout.vue b/client/src/components/History/Layout.vue
index 7439b5eba9b..7b6d2e5c3a0 100644
--- a/client/src/components/History/Layout.vue
+++ b/client/src/components/History/Layout.vue
@@ -7,34 +7,33 @@ to learn how CSS is supposed to work. -->
     <section class="history beta d-flex flex-column">
         <header>
             <nav class="d-flex justify-content-between bg-secondary">
-                <slot name="globalnav">Global Navigation Default</slot>
-                <slot name="localnav">Local Navigation Default</slot>
+                <slot name="navigation" />
             </nav>
 
             <!-- details about the thing you're looking at -->
             <div class="px-3 py-4 details">
-                <slot name="details"></slot>
+                <slot name="details" />
             </div>
         </header>
 
         <!-- warnings, messages, dirty limericks -->
         <section v-if="$slots.messages">
-            <slot name="messages"></slot>
+            <slot name="messages" />
         </section>
 
         <!-- controls atop the list -->
         <section v-if="$slots.listcontrols" class="list-controls">
-            <slot name="listcontrols"></slot>
+            <slot name="listcontrols" />
         </section>
 
         <!-- scrolling list -->
         <section class="position-relative flex-grow-1 scroller">
-            <slot name="listing"></slot>
+            <slot name="listing" />
         </section>
 
         <!-- no dom layout, holds modal markup -->
         <section v-if="$slots.modals">
-            <slot name="modals"></slot>
+            <slot name="modals" />
         </section>
     </section>
 </template>

From 7ede9b353e7024efdb22342b0f4d84d26f950fc2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 17 Feb 2022 01:25:01 -0500
Subject: [PATCH 53/95] Prep history layout component

---
 .../History/CurrentHistoryPanel.vue           |  1 -
 client/src/components/History/Layout.vue      | 22 +++++--------------
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/client/src/components/History/CurrentHistoryPanel.vue b/client/src/components/History/CurrentHistoryPanel.vue
index 854cd38c657..12edb1762dc 100644
--- a/client/src/components/History/CurrentHistoryPanel.vue
+++ b/client/src/components/History/CurrentHistoryPanel.vue
@@ -10,7 +10,6 @@
                         title="Histories" />
                 </template>
             </HistoryPanel>
-
             <div v-else class="flex-grow-1 loadingBackground h-100">
                 <span class="sr-only" v-localize>Loading History...</span>
             </div>
diff --git a/client/src/components/History/Layout.vue b/client/src/components/History/Layout.vue
index 7b6d2e5c3a0..5f40167443e 100644
--- a/client/src/components/History/Layout.vue
+++ b/client/src/components/History/Layout.vue
@@ -1,12 +1,8 @@
-<!-- Layout to house all the extraneous structural markup elements
-and non-semantic utility classes that are necessary when you use an
-amateur-hour baby-tool like Bootstrap instead of taking the afternoon
-to learn how CSS is supposed to work. -->
-
 <template>
-    <section class="history beta d-flex flex-column">
+    <section class="history-layout d-flex flex-column">
         <header>
-            <nav class="d-flex justify-content-between bg-secondary">
+            <!-- navigation bar at the top-->
+            <nav class="d-flex justify-content-between">
                 <slot name="navigation" />
             </nav>
 
@@ -16,12 +12,12 @@ to learn how CSS is supposed to work. -->
             </div>
         </header>
 
-        <!-- warnings, messages, dirty limericks -->
+        <!-- warnings, messages -->
         <section v-if="$slots.messages">
             <slot name="messages" />
         </section>
 
-        <!-- controls atop the list -->
+        <!-- controls above list -->
         <section v-if="$slots.listcontrols" class="list-controls">
             <slot name="listcontrols" />
         </section>
@@ -39,8 +35,7 @@ to learn how CSS is supposed to work. -->
 </template>
 
 <style lang="scss">
-.history.beta {
-    /* TODO: css reset? */
+.history-layout {
     h1,
     h2,
     h3,
@@ -49,11 +44,6 @@ to learn how CSS is supposed to work. -->
     h6 {
         margin: 0;
     }
-
-    .list-controls {
-        margin-bottom: 2px;
-    }
-
     .list-controls:empty,
     .messages:empty {
         display: none;

From e20d6ee0a1f64af418d50fa48eb5c94d9ae081dd Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 17 Feb 2022 01:37:05 -0500
Subject: [PATCH 54/95] Replace filter icon with search

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

diff --git a/client/src/components/History/ContentOperations.vue b/client/src/components/History/ContentOperations.vue
index 4fe692ec80d..82bd61282b1 100644
--- a/client/src/components/History/ContentOperations.vue
+++ b/client/src/components/History/ContentOperations.vue
@@ -10,11 +10,11 @@
                     :pressed="showSelection"
                     @click="toggleSelection" />
                 <IconButton
-                    title="Filter Items"
-                    icon="filter"
+                    title="Search Items"
+                    icon="search"
                     :pressed="showFilter"
                     @click="toggleFilter"
-                    data-description="content filter toggle" />
+                    data-description="content search toggle" />
                 <IconButton
                     title="Collapse Items"
                     icon="compress"

From 5393dcc43a6f3b9676ff18591df588dafe4c622c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 17 Feb 2022 01:48:32 -0500
Subject: [PATCH 55/95] Consolidate icon button component

---
 .../components/History/ContentOperations.vue  | 41 +++++----------
 .../History/CurrentCollection/Navigation.vue  |  1 -
 .../History/CurrentCollection/Operations.vue  | 10 ++--
 client/src/components/History/EditorMenu.vue  | 33 ++++++------
 client/src/components/IconButton.vue          | 50 -------------------
 5 files changed, 33 insertions(+), 102 deletions(-)
 delete mode 100644 client/src/components/IconButton.vue

diff --git a/client/src/components/History/ContentOperations.vue b/client/src/components/History/ContentOperations.vue
index 82bd61282b1..017fefce51d 100644
--- a/client/src/components/History/ContentOperations.vue
+++ b/client/src/components/History/ContentOperations.vue
@@ -2,26 +2,27 @@
     <section>
         <nav class="content-operations-menu d-flex justify-content-between bg-secondary">
             <b-button-group>
-                <IconButton
+                <b-button
                     title="Select Items"
                     class="show-history-content-selectors-btn"
-                    icon="check-square"
+                    size="sm"
                     :disabled="!hasMatches"
                     :pressed="showSelection"
-                    @click="toggleSelection" />
-                <IconButton
+                    @click="toggleSelection">
+                    <Icon icon="check-square" />
+                </b-button>
+                <b-button
                     title="Search Items"
-                    icon="search"
+                    size="sm"
                     :pressed="showFilter"
                     @click="toggleFilter"
-                    data-description="content search toggle" />
-                <IconButton
-                    title="Collapse Items"
-                    icon="compress"
-                    :disabled="!expandedCount"
-                    @click="$emit('collapse-all')" />
+                    data-description="content search toggle">
+                    <Icon icon="search" />
+                </b-button>
+                <b-button title="Collapse Items" size="sm" :disabled="!expandedCount" @click="$emit('collapse-all')">
+                    <Icon icon="compress" />
+                </b-button>
             </b-button-group>
-
             <b-button-group>
                 <b-dropdown
                     class="history-contents-list-action-menu-btn"
@@ -33,51 +34,42 @@
                         <span v-localize v-if="hasSelection">With {{ numSelected }} selected items...</span>
                         <span v-localize v-else>You don't have any selected content.</span>
                     </b-dropdown-text>
-
                     <b-dropdown-item aria-describedby="history-op-selected-content" v-b-modal:hide-selected-content>
                         <span v-localize>Hide</span>
                     </b-dropdown-item>
-
                     <b-dropdown-item aria-describedby="history-op-selected-content" v-b-modal:show-selected-content>
                         <span v-localize>Unhide</span>
                     </b-dropdown-item>
-
                     <b-dropdown-item aria-describedby="history-op-selected-content" v-b-modal:delete-selected-content>
                         <span v-localize>Delete</span>
                     </b-dropdown-item>
-
                     <b-dropdown-item aria-describedby="history-op-selected-content" v-b-modal:restore-selected-content>
                         <span v-localize>Undelete</span>
                     </b-dropdown-item>
-
                     <b-dropdown-item
                         aria-describedby="history-op-selected-content"
                         v-b-modal:purge-selected-content
                         :disabled="!hasSelection">
                         <span v-localize>Permanently Delete</span>
                     </b-dropdown-item>
-
                     <b-dropdown-item
                         aria-describedby="history-op-selected-content"
                         @click="buildDatasetList"
                         data-description="build list">
                         <span v-localize>Build Dataset List</span>
                     </b-dropdown-item>
-
                     <b-dropdown-item
                         aria-describedby="history-op-selected-content"
                         @click="buildDatasetPair"
                         data-description="build pair">
                         <span v-localize>Build Dataset Pair</span>
                     </b-dropdown-item>
-
                     <b-dropdown-item
                         aria-describedby="history-op-selected-content"
                         @click="buildListOfPairs"
                         data-description="build list of pairs">
                         <span v-localize>Build List of Dataset Pairs</span>
                     </b-dropdown-item>
-
                     <b-dropdown-item
                         aria-describedby="history-op-selected-content"
                         @click="buildCollectionFromRules"
@@ -85,7 +77,6 @@
                         <span v-localize>Build Collection from Rules</span>
                     </b-dropdown-item>
                 </b-dropdown>
-
                 <b-dropdown
                     class="history-contents-list-action-menu-btn"
                     size="sm"
@@ -95,22 +86,18 @@
                     <b-dropdown-text id="history-op-all-content">
                         <span v-localize>With entire history...</span>
                     </b-dropdown-text>
-
                     <b-dropdown-item
                         aria-describedby="history-op-all-content"
                         @click="iframeRedirect('/dataset/copy_datasets')"
                         data-description="copy datasets">
                         <span v-localize>Copy Datasets</span>
                     </b-dropdown-item>
-
                     <b-dropdown-item v-b-modal:show-all-hidden-content aria-describedby="history-op-all-content">
                         <span v-localize>Unhide All Hidden Content</span>
                     </b-dropdown-item>
-
                     <b-dropdown-item v-b-modal:delete-all-hidden-content aria-describedby="history-op-all-content">
                         <span v-localize>Delete All Hidden Content</span>
                     </b-dropdown-item>
-
                     <b-dropdown-item v-b-modal:purge-all-deleted-content aria-describedby="history-op-all-content">
                         <span v-localize>Purge All Hidden Content</span>
                     </b-dropdown-item>
@@ -172,13 +159,11 @@ import { createDatasetCollection } from "./model/queries";
 import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
 import { buildCollectionModal } from "./adapters/buildCollectionModal";
 import ContentFilters from "./ContentFilters";
-import IconButton from "components/IconButton";
 
 export default {
     mixins: [legacyNavigationMixin],
     components: {
         ContentFilters,
-        IconButton,
     },
     props: {
         history: { type: History, required: true },
diff --git a/client/src/components/History/CurrentCollection/Navigation.vue b/client/src/components/History/CurrentCollection/Navigation.vue
index 17726dbf410..8d0dd240d15 100644
--- a/client/src/components/History/CurrentCollection/Navigation.vue
+++ b/client/src/components/History/CurrentCollection/Navigation.vue
@@ -29,7 +29,6 @@ export default {
                     text: bc.name,
                 };
             });
-            console.log(options);
             return options;
         },
     },
diff --git a/client/src/components/History/CurrentCollection/Operations.vue b/client/src/components/History/CurrentCollection/Operations.vue
index ee6f3518da5..1c2bb0bbe7c 100644
--- a/client/src/components/History/CurrentCollection/Operations.vue
+++ b/client/src/components/History/CurrentCollection/Operations.vue
@@ -2,23 +2,21 @@
     <section>
         <nav class="d-flex justify-content-end">
             <b-button-group>
-                <IconButton
+                <b-button
                     v-if="isRoot"
                     class="mb-2 mx-3"
-                    icon="download"
                     title="Download Collection"
                     :href="downloadCollectionUrl"
-                    download />
+                    download>
+                    <Icon icon="download" />
+                </b-button>
             </b-button-group>
         </nav>
     </section>
 </template>
 
 <script>
-import IconButton from "components/IconButton";
-
 export default {
-    components: { IconButton },
     props: {
         isRoot: { type: Boolean, required: true },
         collection: { type: Object, required: true },
diff --git a/client/src/components/History/EditorMenu.vue b/client/src/components/History/EditorMenu.vue
index 8b0b81a422f..b8de4d9e5f5 100644
--- a/client/src/components/History/EditorMenu.vue
+++ b/client/src/components/History/EditorMenu.vue
@@ -1,51 +1,50 @@
 <template>
     <nav class="edit-controls">
-        <IconButton
+        <b-button
             :title="label('Edit') | l"
             class="edit-button mb-1"
             :pressed="editing"
-            icon="pen"
             @click="$emit('update:editing', !editing)"
-            data-description="editor toggle" />
-
+            data-description="editor toggle">
+            <Icon icon="pen" />
+        </b-button>
         <template v-if="editing">
             <!-- save -->
-            <IconButton
+            <b-button
                 :title="label('Save') | l"
                 class="save-button mb-1"
                 :class="{ disabled: !valid }"
-                icon="save"
                 @click="$emit('save')"
-                data-description="editor save button" />
+                data-description="editor save button">
+                <Icon icon="save" />
+            </b-button>
 
             <!-- revert -->
-            <IconButton
+            <b-button
                 :title="label('Revert') | l"
                 class="revert-changes-button mb-1"
                 :class="{ disabled: !dirty }"
                 icon="undo"
                 @click="$emit('revert')"
-                data-description="editor revert button" />
+                data-description="editor revert button">
+                <Icon icon="undo" />
+            </b-button>
 
             <!-- form status -->
-            <IconButton
+            <b-button
                 :title="statusLabel | l"
                 class="status-button mb-1"
                 :class="{ valid: valid, disabled: !valid }"
-                :icon="valid ? 'check' : 'exclamation-triangle'"
                 variant="link"
-                data-description="editor status" />
+                data-description="editor status">
+                <Icon :icon="valid ? 'check' : 'exclamation-triangle'" />
+            </b-button>
         </template>
     </nav>
 </template>
 
 <script>
-import IconButton from "components/IconButton";
-
 export default {
-    components: {
-        IconButton,
-    },
     props: {
         modelName: { type: String, required: true },
         editing: { type: Boolean, required: true },
diff --git a/client/src/components/IconButton.vue b/client/src/components/IconButton.vue
deleted file mode 100644
index c1c3f1d0171..00000000000
--- a/client/src/components/IconButton.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <b-button
-        class="galaxy-icon-button"
-        v-bind="$attrs"
-        v-on="$listeners"
-        :title="title"
-        :size="size"
-        :pressed="pressed"
-        :disabled="disabled"
-        :variant="localVariant">
-        <Icon :icon="icon" />
-        <span class="sr-only">{{ title | l }}</span>
-    </b-button>
-</template>
-
-<script>
-export default {
-    props: {
-        icon: { type: [String, Array, Object], required: true },
-        title: { type: String, required: true },
-        size: { type: String, required: false, default: "sm" },
-        pressed: { type: Boolean, required: false, default: false },
-        disabled: { type: Boolean, required: false, default: false },
-        // overrides variant set by pressed/disabled
-        variant: { type: String, required: false, default: null },
-    },
-    computed: {
-        localVariant() {
-            if (this.variant) {
-                // override with prop
-                return this.variant;
-            }
-            if (this.disabled) {
-                return "secondary";
-            }
-            return this.pressed ? "info" : "secondary";
-        },
-    },
-};
-</script>
-
-<style lang="scss">
-// removes irritating bootstrap outline
-.galaxy-icon-button.btn {
-    box-shadow: none !important;
-    &.disabled > svg {
-        opacity: 0.5;
-    }
-}
-</style>

From 96b4be0c0d7762f752d5172d22b3cd5e15720380 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 17 Feb 2022 14:44:37 -0500
Subject: [PATCH 56/95] Revise collection navigation in history

---
 .../History/CurrentCollection/Navigation.vue  | 44 +++++++------------
 .../History/CurrentCollection/Panel.vue       | 11 +++--
 client/src/components/History/Layout.vue      |  2 +-
 3 files changed, 22 insertions(+), 35 deletions(-)

diff --git a/client/src/components/History/CurrentCollection/Navigation.vue b/client/src/components/History/CurrentCollection/Navigation.vue
index 8d0dd240d15..181756fb1ff 100644
--- a/client/src/components/History/CurrentCollection/Navigation.vue
+++ b/client/src/components/History/CurrentCollection/Navigation.vue
@@ -1,47 +1,35 @@
 <template>
-    <b-breadcrumb>
-        <b-breadcrumb-item href="#" @click="close">
-            <span class="fa fa-angle-double-left" />
-        </b-breadcrumb-item>
-        <b-breadcrumb-item v-for="option in breadCrumbOptions" :key="option.key" @click="reselect(option.value)">
-            <span>{{ option.text }}</span>
-        </b-breadcrumb-item>
-    </b-breadcrumb>
+    <div>
+        <b-button size="sm" variant="link" @click="close">
+            <icon icon="angle-double-left" class="mr-1" /><span>History</span>
+        </b-button>
+        <b-button size="sm" variant="link" v-if="previousName" @click="back">
+            <span class="fa fa-angle-left mr-1" /><span>{{ previousName }}</span>
+        </b-button>
+    </div>
 </template>
 
 <script>
-import { History } from "../model";
-
 export default {
     props: {
-        history: { type: History, required: true },
         selectedCollections: { type: Array, required: true, validate: (val) => val.length > 0 },
     },
     computed: {
-        // List for the dropdown. Should be the history and every parent
-        // collection excepting the current one.
-        breadCrumbOptions() {
-            const parents = this.selectedCollections.slice(0, -1);
-            const options = parents.map((bc, i) => {
-                return {
-                    key: bc.type_id,
-                    value: parents.slice(0, i + 1),
-                    text: bc.name,
-                };
-            });
-            return options;
+        previousName() {
+            const length = this.selectedCollections.length;
+            if (length > 1) {
+                const last = this.selectedCollections[length - 2];
+                return last.name || last.element_identifier;
+            }
         },
     },
     methods: {
-        reselect(newList) {
-            this.$emit("update:selectedCollections", newList);
-        },
         back() {
             const newList = this.selectedCollections.slice(0, -1);
-            this.reselect(newList);
+            this.$emit("update:selected-collections", newList);
         },
         close() {
-            this.reselect([]);
+            this.$emit("update:selected-collections", []);
         },
     },
 };
diff --git a/client/src/components/History/CurrentCollection/Panel.vue b/client/src/components/History/CurrentCollection/Panel.vue
index 1172ef645ad..4254437e3c2 100644
--- a/client/src/components/History/CurrentCollection/Panel.vue
+++ b/client/src/components/History/CurrentCollection/Panel.vue
@@ -23,15 +23,15 @@
                     <HistoryListing
                         item-key="element_index"
                         :page-size="pageSize"
-                        :payload="payload"
+                        :payload="payload.elements"
                         @scroll="onScroll">
                         <template v-slot:history-item="{ item, index }">
                             <ContentItem
                                 :item="item"
                                 :id="item.element_index"
                                 :name="item.element_identifier"
-                                :expandable="item.element_type == 'dataset'"
-                                :state="item.state"
+                                :expandable="item.element_type == 'hda'"
+                                :state="item.object ? item.object.state : item.populated_state"
                                 :expanded="isExpanded(item)"
                                 :writeable="false"
                                 @update:expanded="setExpanded(item, $event)"
@@ -100,12 +100,11 @@ export default {
     },
     methods: {
         getUrl(dsc) {
-            const element = dsc && dsc.object ? dsc.object : dsc;
-            return element.contents_url.substring(1);
+            return `api/dataset_collections/${dsc.id}`;
         },
         // change the data of the root collection, anything past the root
         // collection is part of the dataset collection, which i believe is supposed to
-        // be immutable, so only edit name, tags, blah of top-level selected collection,
+        // be immutable, so only edit name, tags etc of top-level selected collection.
         async updateDsc(collection, fields) {
             if (this.writable) {
                 await updateContentFields(collection, fields);
diff --git a/client/src/components/History/Layout.vue b/client/src/components/History/Layout.vue
index 5f40167443e..aa7e53e29fd 100644
--- a/client/src/components/History/Layout.vue
+++ b/client/src/components/History/Layout.vue
@@ -2,7 +2,7 @@
     <section class="history-layout d-flex flex-column">
         <header>
             <!-- navigation bar at the top-->
-            <nav class="d-flex justify-content-between">
+            <nav class="d-flex justify-content-between bg-secondary">
                 <slot name="navigation" />
             </nav>
 

From a87d75ed222e1109874f283458cac701e5bdb0be Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 17 Feb 2022 16:27:05 -0500
Subject: [PATCH 57/95] Remove custom styles from history menu, show/hide
 available selection options

---
 .../components/History/ContentOperations.vue  | 100 ++++++++----------
 1 file changed, 46 insertions(+), 54 deletions(-)

diff --git a/client/src/components/History/ContentOperations.vue b/client/src/components/History/ContentOperations.vue
index 017fefce51d..a87a6d30e70 100644
--- a/client/src/components/History/ContentOperations.vue
+++ b/client/src/components/History/ContentOperations.vue
@@ -1,11 +1,12 @@
 <template>
     <section>
-        <nav class="content-operations-menu d-flex justify-content-between bg-secondary">
+        <nav class="content-operations d-flex justify-content-between bg-secondary">
             <b-button-group>
                 <b-button
                     title="Select Items"
-                    class="show-history-content-selectors-btn"
+                    class="rounded-0"
                     size="sm"
+                    variant="link"
                     :disabled="!hasMatches"
                     :pressed="showSelection"
                     @click="toggleSelection">
@@ -13,92 +14,90 @@
                 </b-button>
                 <b-button
                     title="Search Items"
+                    class="rounded-0"
                     size="sm"
+                    variant="link"
                     :pressed="showFilter"
                     @click="toggleFilter"
                     data-description="content search toggle">
                     <Icon icon="search" />
                 </b-button>
-                <b-button title="Collapse Items" size="sm" :disabled="!expandedCount" @click="$emit('collapse-all')">
+                <b-button
+                    title="Collapse Items"
+                    class="rounded-0"
+                    size="sm"
+                    variant="link"
+                    :disabled="!expandedCount"
+                    @click="$emit('collapse-all')">
                     <Icon icon="compress" />
                 </b-button>
             </b-button-group>
             <b-button-group>
                 <b-dropdown
-                    class="history-contents-list-action-menu-btn"
-                    size="sm"
                     text="Selection"
-                    :disabled="!hasSelection"
-                    data-description="selected content menu">
-                    <b-dropdown-text id="history-op-selected-content">
-                        <span v-localize v-if="hasSelection">With {{ numSelected }} selected items...</span>
-                        <span v-localize v-else>You don't have any selected content.</span>
+                    size="sm"
+                    variant="link"
+                    toggle-class="text-decoration-none"
+                    data-description="selected content menu"
+                    :disabled="!hasSelection">
+                    <b-dropdown-text>
+                        <span v-localize>With {{ numSelected }} selected...</span>
                     </b-dropdown-text>
-                    <b-dropdown-item aria-describedby="history-op-selected-content" v-b-modal:hide-selected-content>
-                        <span v-localize>Hide</span>
-                    </b-dropdown-item>
-                    <b-dropdown-item aria-describedby="history-op-selected-content" v-b-modal:show-selected-content>
+                    <b-dropdown-item v-if="params.showHidden" v-b-modal:show-selected-content>
                         <span v-localize>Unhide</span>
                     </b-dropdown-item>
-                    <b-dropdown-item aria-describedby="history-op-selected-content" v-b-modal:delete-selected-content>
-                        <span v-localize>Delete</span>
+                    <b-dropdown-item v-else v-b-modal:hide-selected-content>
+                        <span v-localize>Hide</span>
                     </b-dropdown-item>
-                    <b-dropdown-item aria-describedby="history-op-selected-content" v-b-modal:restore-selected-content>
+                    <b-dropdown-item v-if="params.showDeleted" v-b-modal:restore-selected-content>
                         <span v-localize>Undelete</span>
                     </b-dropdown-item>
-                    <b-dropdown-item
-                        aria-describedby="history-op-selected-content"
-                        v-b-modal:purge-selected-content
-                        :disabled="!hasSelection">
-                        <span v-localize>Permanently Delete</span>
+                    <b-dropdown-item v-else v-b-modal:delete-selected-content>
+                        <span v-localize>Delete</span>
                     </b-dropdown-item>
-                    <b-dropdown-item
-                        aria-describedby="history-op-selected-content"
-                        @click="buildDatasetList"
-                        data-description="build list">
+                    <b-dropdown-item v-if="!params.showDeleted" v-b-modal:purge-selected-content>
+                        <span v-localize>Delete (permanently)</span>
+                    </b-dropdown-item>
+                    <b-dropdown-item v-if="showBuildOptions" @click="buildDatasetList" data-description="build list">
                         <span v-localize>Build Dataset List</span>
                     </b-dropdown-item>
-                    <b-dropdown-item
-                        aria-describedby="history-op-selected-content"
-                        @click="buildDatasetPair"
-                        data-description="build pair">
+                    <b-dropdown-item v-if="showBuildOptions" @click="buildDatasetPair" data-description="build pair">
                         <span v-localize>Build Dataset Pair</span>
                     </b-dropdown-item>
                     <b-dropdown-item
-                        aria-describedby="history-op-selected-content"
+                        v-if="showBuildOptions"
                         @click="buildListOfPairs"
                         data-description="build list of pairs">
                         <span v-localize>Build List of Dataset Pairs</span>
                     </b-dropdown-item>
                     <b-dropdown-item
-                        aria-describedby="history-op-selected-content"
+                        v-if="showBuildOptions"
                         @click="buildCollectionFromRules"
                         data-description="build collection from rules">
                         <span v-localize>Build Collection from Rules</span>
                     </b-dropdown-item>
                 </b-dropdown>
                 <b-dropdown
-                    class="history-contents-list-action-menu-btn"
-                    size="sm"
                     text="History"
-                    :disabled="!hasMatches"
-                    data-description="history action menu">
+                    size="sm"
+                    variant="link"
+                    class="rounded-0"
+                    toggle-class="text-decoration-none"
+                    data-description="history action menu"
+                    :disabled="!hasMatches">
                     <b-dropdown-text id="history-op-all-content">
                         <span v-localize>With entire history...</span>
                     </b-dropdown-text>
-                    <b-dropdown-item
-                        aria-describedby="history-op-all-content"
-                        @click="iframeRedirect('/dataset/copy_datasets')"
-                        data-description="copy datasets">
+                    <b-dropdown-item @click="iframeRedirect('/dataset/copy_datasets')" data-description="copy datasets">
                         <span v-localize>Copy Datasets</span>
                     </b-dropdown-item>
-                    <b-dropdown-item v-b-modal:show-all-hidden-content aria-describedby="history-op-all-content">
+                    <b-dropdown-item v-b-modal:show-all-hidden-content>
                         <span v-localize>Unhide All Hidden Content</span>
                     </b-dropdown-item>
-                    <b-dropdown-item v-b-modal:delete-all-hidden-content aria-describedby="history-op-all-content">
+                    <b-dropdown-item v-b-modal:delete-all-hidden-content>
                         <span v-localize>Delete All Hidden Content</span>
                     </b-dropdown-item>
-                    <b-dropdown-item v-b-modal:purge-all-deleted-content aria-describedby="history-op-all-content">
+                    <b-dropdown-item v-b-modal:purge-all-deleted-content>
                         <span v-localize>Purge All Hidden Content</span>
                     </b-dropdown-item>
                 </b-dropdown>
@@ -106,7 +105,7 @@
         </nav>
 
         <transition name="shutterfade">
-            <content-filters v-if="showFilter" class="content-filters p-2" :params.sync="localParams" />
+            <content-filters v-if="showFilter" class="content-operations-filters p-2" :params.sync="localParams" />
         </transition>
 
         <b-modal id="hide-selected-content" title="Hide Selected Content?" title-tag="h2" @ok="hideSelected">
@@ -179,6 +178,9 @@ export default {
         };
     },
     computed: {
+        showBuildOptions() {
+            return !this.params.showHidden && !this.params.showDeleted;
+        },
         hasContentFilters() {
             const { showHidden, showDeleted, filterText } = this.params;
             return showHidden || showDeleted || filterText;
@@ -197,9 +199,6 @@ export default {
         hasSelection() {
             return this.numSelected > 0;
         },
-        countHidden() {
-            return this.history.contents_active.hidden;
-        },
     },
     methods: {
         toggleSelection() {
@@ -284,10 +283,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss">
-// remove borders around buttons in menu
-.content-operations-menu .btn-group .btn {
-    border-color: transparent !important;
-}
-</style>

From 390fc83dadc43db8c01a291dc054ff7dcd58743e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 17 Feb 2022 20:26:52 -0500
Subject: [PATCH 58/95] Disable visualizations for purged datasets, notice its
 equal to show downloads now

---
 .../components/History/ContentItem/Dataset/DatasetActions.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/History/ContentItem/Dataset/DatasetActions.vue b/client/src/components/History/ContentItem/Dataset/DatasetActions.vue
index 07f7b5c509f..0e4fe18e5f0 100644
--- a/client/src/components/History/ContentItem/Dataset/DatasetActions.vue
+++ b/client/src/components/History/ContentItem/Dataset/DatasetActions.vue
@@ -103,7 +103,7 @@ export default {
         },
         showVisualizations() {
             // TODO: Check hasViz, if visualizations are activated in the config
-            return this.item.state == "ok" || this.item.state == "failed_metadata";
+            return !this.item.purged && ["ok", "failed_metadata", "error"].includes(this.item.state);
         },
     },
     methods: {

From 8cbcfc0178aba95baf28e44bac6fa648d5320acc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 17 Feb 2022 23:53:21 -0500
Subject: [PATCH 59/95] Use consistent naming, declare collection url as
 computed value

---
 .../History/ContentItem/ContentItem.vue       | 55 ++++++++++---------
 .../History/CurrentCollection/Details.vue     |  8 +--
 .../History/CurrentCollection/Panel.vue       | 14 ++---
 3 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/ContentItem/ContentItem.vue
index dda95d09997..3716ac861eb 100644
--- a/client/src/components/History/ContentItem/ContentItem.vue
+++ b/client/src/components/History/ContentItem/ContentItem.vue
@@ -5,7 +5,7 @@
                 <div class="btn-group float-right">
                     <b-button
                         v-if="expandable && state !== 'noPermission' && state !== 'discarded'"
-                        :disabled="item.purged || state == 'upload' || state == 'new'"
+                        :disabled="isUnavailable"
                         :title="displayButtonTitle"
                         class="px-1"
                         size="sm"
@@ -15,7 +15,7 @@
                     </b-button>
                     <b-button
                         v-if="writeable && state != 'discarded'"
-                        :disabled="item.purged || item.deleted || state == 'upload' || state == 'new'"
+                        :disabled="isUnavailable"
                         class="px-1"
                         title="Edit"
                         size="sm"
@@ -29,7 +29,7 @@
                         title="Undelete"
                         size="sm"
                         variant="link"
-                        :disabled="item.purged"
+                        :disabled="isUnavailable"
                         @click.stop="$emit('undelete', item)">
                         <span class="fa fa-trash-restore" />
                     </b-button>
@@ -39,7 +39,7 @@
                         title="Delete"
                         size="sm"
                         variant="link"
-                        :disabled="item.purged"
+                        :disabled="isUnavailable"
                         @click.stop="$emit('delete', item)">
                         <span class="fa fa-trash" />
                     </b-button>
@@ -93,24 +93,14 @@ export default {
         writeable: { type: Boolean, default: true },
     },
     computed: {
-        icon() {
-            const stateIcon = CONTENTSTATE[this.state] && CONTENTSTATE[this.state].icon;
-            if (stateIcon) {
-                return `fa fa-${stateIcon}`;
+        clsStatus() {
+            const status = CONTENTSTATE[this.state] && CONTENTSTATE[this.state].status;
+            if (!status || this.selected) {
+                return "alert-info";
+            } else {
+                return `alert-${status}`;
             }
         },
-        editButtonTitle() {
-            if (this.item.deleted) {
-                return "Undelete dataset to edit attributes";
-            }
-            if (this.item.purged) {
-                return "Cannot edit attributes of datasets removed from disk";
-            }
-            if (this.state == "upload" || this.state != "new") {
-                return "This dataset is not yet editable";
-            }
-            return "Edit attributes";
-        },
         displayButtonTitle() {
             if (this.item.purged) {
                 return "Cannot display datasets removed from disk";
@@ -130,13 +120,26 @@ export default {
                 ? "Undelete"
                 : "Delete";
         },
-        clsStatus() {
-            const status = CONTENTSTATE[this.state] && CONTENTSTATE[this.state].status;
-            if (!status || this.selected) {
-                return "alert-info";
-            } else {
-                return `alert-${status}`;
+        editButtonTitle() {
+            if (this.item.deleted) {
+                return "Undelete dataset to edit attributes";
             }
+            if (this.item.purged) {
+                return "Cannot edit attributes of datasets removed from disk";
+            }
+            if (this.state == "upload" || this.state != "new") {
+                return "This dataset is not yet editable";
+            }
+            return "Edit attributes";
+        },
+        icon() {
+            const stateIcon = CONTENTSTATE[this.state] && CONTENTSTATE[this.state].icon;
+            if (stateIcon) {
+                return `fa fa-${stateIcon}`;
+            }
+        },
+        isUnavailable() {
+            return this.item.purged || this.state == "upload" || this.state == "new";
         },
     },
     methods: {
diff --git a/client/src/components/History/CurrentCollection/Details.vue b/client/src/components/History/CurrentCollection/Details.vue
index 0f991199bd2..ffd1a266c3c 100644
--- a/client/src/components/History/CurrentCollection/Details.vue
+++ b/client/src/components/History/CurrentCollection/Details.vue
@@ -27,10 +27,10 @@
 
         <EditorMenu
             class="ml-3 flex-grow-0 d-flex flex-column"
-            v-if="writable"
+            v-if="writeable"
             model-name="Collection"
             :editing.sync="editing"
-            :writable="writable"
+            :writeable="writeable"
             :valid="valid"
             :dirty="dirty"
             @save="save"
@@ -54,7 +54,7 @@ export default {
     },
     props: {
         dsc: { type: Object, required: true },
-        writable: { type: Boolean, required: true },
+        writeable: { type: Boolean, required: true },
     },
     data() {
         return {
@@ -67,7 +67,7 @@ export default {
             return this.dsc.id;
         },
         isEditing() {
-            return this.writable && this.editing;
+            return this.writeable && this.editing;
         },
         valid() {
             return this.tempContent.name.length > 0;
diff --git a/client/src/components/History/CurrentCollection/Panel.vue b/client/src/components/History/CurrentCollection/Panel.vue
index 4254437e3c2..1f088d9ac4e 100644
--- a/client/src/components/History/CurrentCollection/Panel.vue
+++ b/client/src/components/History/CurrentCollection/Panel.vue
@@ -1,7 +1,7 @@
 <!-- When a dataset collection is being viewed, this panel shows the contents of that collection -->
 
 <template>
-    <UrlDataProvider v-if="dsc" :key="dsc.id" :url="getUrl(dsc)" v-slot="{ result: payload }">
+    <UrlDataProvider v-if="dsc" :key="dsc.id" :url="getUrl" v-slot="{ result: payload }">
         <ExpandedItems
             :scope-key="dsc.id"
             :get-item-key="(item) => item.element_index"
@@ -16,7 +16,7 @@
                 </template>
 
                 <template v-slot:details>
-                    <Details :dsc="dsc" :writable="writable" @update:dsc="updateDsc(dsc, $event)" />
+                    <Details :dsc="dsc" :writeable="writeable" @update:dsc="updateDsc(dsc, $event)" />
                 </template>
 
                 <template v-slot:listing>
@@ -84,7 +84,7 @@ export default {
         isRoot() {
             return this.dsc == this.rootCollection;
         },
-        writable() {
+        writeable() {
             return this.isRoot;
         },
         rootCollection() {
@@ -97,16 +97,16 @@ export default {
             }
             return url;
         },
+        getUrl() {
+            return `api/dataset_collections/${this.dsc.id}`;
+        },
     },
     methods: {
-        getUrl(dsc) {
-            return `api/dataset_collections/${dsc.id}`;
-        },
         // change the data of the root collection, anything past the root
         // collection is part of the dataset collection, which i believe is supposed to
         // be immutable, so only edit name, tags etc of top-level selected collection.
         async updateDsc(collection, fields) {
-            if (this.writable) {
+            if (this.writeable) {
                 await updateContentFields(collection, fields);
             }
         },

From 2c5fdda453a0dc24f2fc5a57eb2cd199c2c99bba Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 18 Feb 2022 00:19:23 -0500
Subject: [PATCH 60/95] Consolidate editing for history and collection
 attributes, contained considerable duplications across files

---
 .../History/CurrentCollection/Description.vue |  24 ---
 .../History/CurrentCollection/Details.vue     | 131 +++-------------
 .../History/CurrentCollection/Panel.vue       |   6 +-
 client/src/components/History/EditorMenu.vue  |  72 ---------
 .../src/components/History/HeaderDetails.vue  | 116 +++++++++++++++
 .../src/components/History/HistoryDetails.vue | 140 ++----------------
 6 files changed, 155 insertions(+), 334 deletions(-)
 delete mode 100644 client/src/components/History/CurrentCollection/Description.vue
 delete mode 100644 client/src/components/History/EditorMenu.vue
 create mode 100644 client/src/components/History/HeaderDetails.vue

diff --git a/client/src/components/History/CurrentCollection/Description.vue b/client/src/components/History/CurrentCollection/Description.vue
deleted file mode 100644
index 84687c6a49d..00000000000
--- a/client/src/components/History/CurrentCollection/Description.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-    <div class="description">
-        {{ dsc.collectionType | localize }} of {{ dsc.totalElements }}
-        <b v-if="isHomogeneous">{{ homogeneousDatatype }} </b>datasets
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        dsc: { type: Object, required: true },
-    },
-    computed: {
-        /** @return {Boolean} */
-        isHomogeneous() {
-            return this.dsc.isHomogeneous;
-        },
-        /** @return {String} */
-        homogeneousDatatype() {
-            return this.dsc.homogeneousDatatype;
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/CurrentCollection/Details.vue b/client/src/components/History/CurrentCollection/Details.vue
index ffd1a266c3c..07ac3914a9f 100644
--- a/client/src/components/History/CurrentCollection/Details.vue
+++ b/client/src/components/History/CurrentCollection/Details.vue
@@ -1,127 +1,42 @@
-<!-- Edits a collection, if that collection is editable. -->
-
 <template>
-    <section class="history-details d-flex" data-description="edit details">
-        <div class="flex-grow-1">
-            <h3 class="history-title" data-description="collection name display">
-                {{ dscName || "(Collection Name)" }}
-            </h3>
-            <p class="mt-1">
-                <Description :dsc="dsc" />
-            </p>
-
-            <div v-if="isEditing" class="mt-3" @keydown.esc="revertAndCancel" data-description="edit form">
-                <b-textarea
-                    v-model="dscName"
-                    placeholder="Collection Name"
-                    trim
-                    max-rows="4"
-                    data-description="name input"></b-textarea>
-                <StatelessTags v-model="tags" class="mt-3 tags" />
+    <HeaderDetails
+        :name="dsc.name"
+        :annotation="dsc.annotation"
+        :tags="dsc.tags"
+        :writeable="writeable"
+        @save="$emit('update:dsc', $event)">
+        <template v-slot:name>
+            <h3 data-description="collection name display">{{ dsc.name || "(Collection Name)" }}</h3>
+            <div class="mt-1">
+                <div class="description">
+                    {{ dsc.collectionType | localize }} of {{ dsc.totalElements }}
+                    <b v-if="isHomogeneous">{{ homogeneousDatatype }} </b>datasets
+                </div>
             </div>
-
-            <div v-else-if="dsc.tags && dsc.tags.length">
-                <Nametag v-for="tag in dsc.tags" :key="tag" :tag="tag" />
-            </div>
-        </div>
-
-        <EditorMenu
-            class="ml-3 flex-grow-0 d-flex flex-column"
-            v-if="writeable"
-            model-name="Collection"
-            :editing.sync="editing"
-            :writeable="writeable"
-            :valid="valid"
-            :dirty="dirty"
-            @save="save"
-            @revert="revert" />
-    </section>
+        </template>
+    </HeaderDetails>
 </template>
 
 <script>
 import { DatasetCollection } from "components/History/model";
-import { Nametag } from "components/Nametags";
-import EditorMenu from "components/History/EditorMenu";
-import { StatelessTags } from "components/Tags";
-import Description from "./Description";
+import HeaderDetails from "components/History/HeaderDetails";
 
 export default {
     components: {
-        Nametag,
-        EditorMenu,
-        StatelessTags,
-        Description,
+        HeaderDetails,
     },
     props: {
         dsc: { type: Object, required: true },
         writeable: { type: Boolean, required: true },
     },
-    data() {
-        return {
-            editing: false,
-            tempContent: Object.assign({}, this.dsc),
-        };
-    },
     computed: {
-        dscId() {
-            return this.dsc.id;
+        /** @return {Boolean} */
+        isHomogeneous() {
+            return this.dsc.isHomogeneous;
         },
-        isEditing() {
-            return this.writeable && this.editing;
-        },
-        valid() {
-            return this.tempContent.name.length > 0;
-        },
-        dirty() {
-            return !this.tempContent.equals(this.dsc);
-        },
-        dscName: {
-            get() {
-                return this.tempContent.name;
-            },
-            set(newName) {
-                this.patchTempDsc({ name: newName });
-            },
-        },
-        tags: {
-            get() {
-                return this.tempContent?.tags || [];
-            },
-            set(newTags) {
-                if (Array.isArray(newTags)) {
-                    this.patchTempDsc({ tags: newTags });
-                }
-            },
-        },
-    },
-    watch: {
-        dscId(newId, oldId) {
-            if (newId != oldId) {
-                this.reset();
-            }
-        },
-    },
-    methods: {
-        reset() {
-            this.tempContent = Object.assign({}, this.dsc);
-        },
-        patchTempDsc(props = {}) {
-            this.tempContent = this.tempContent.patch(props);
-        },
-        save() {
-            if (this.valid) {
-                this.$emit("update:dsc", this.tempContent);
-                this.editing = false;
-            }
-        },
-        revert() {
-            if (this.dirty) {
-                this.reset();
-            }
-        },
-        revertAndCancel() {
-            this.revert();
-            this.editing = false;
+        /** @return {String} */
+        homogeneousDatatype() {
+            return this.dsc.homogeneousDatatype;
         },
     },
 };
diff --git a/client/src/components/History/CurrentCollection/Panel.vue b/client/src/components/History/CurrentCollection/Panel.vue
index 1f088d9ac4e..f25ef870699 100644
--- a/client/src/components/History/CurrentCollection/Panel.vue
+++ b/client/src/components/History/CurrentCollection/Panel.vue
@@ -1,7 +1,7 @@
 <!-- When a dataset collection is being viewed, this panel shows the contents of that collection -->
 
 <template>
-    <UrlDataProvider v-if="dsc" :key="dsc.id" :url="getUrl" v-slot="{ result: payload }">
+    <UrlDataProvider v-if="dsc" :key="dsc.id" :url="url" v-slot="{ result: payload }">
         <ExpandedItems
             :scope-key="dsc.id"
             :get-item-key="(item) => item.element_index"
@@ -90,14 +90,14 @@ export default {
         rootCollection() {
             return this.dsc[0];
         },
-        downloadCollectionUrl() {
+        downloadUrl() {
             let url = "";
             if (this.rootCollection) {
                 url = `${this.rootCollection.url}/download`;
             }
             return url;
         },
-        getUrl() {
+        url() {
             return `api/dataset_collections/${this.dsc.id}`;
         },
     },
diff --git a/client/src/components/History/EditorMenu.vue b/client/src/components/History/EditorMenu.vue
deleted file mode 100644
index b8de4d9e5f5..00000000000
--- a/client/src/components/History/EditorMenu.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <nav class="edit-controls">
-        <b-button
-            :title="label('Edit') | l"
-            class="edit-button mb-1"
-            :pressed="editing"
-            @click="$emit('update:editing', !editing)"
-            data-description="editor toggle">
-            <Icon icon="pen" />
-        </b-button>
-        <template v-if="editing">
-            <!-- save -->
-            <b-button
-                :title="label('Save') | l"
-                class="save-button mb-1"
-                :class="{ disabled: !valid }"
-                @click="$emit('save')"
-                data-description="editor save button">
-                <Icon icon="save" />
-            </b-button>
-
-            <!-- revert -->
-            <b-button
-                :title="label('Revert') | l"
-                class="revert-changes-button mb-1"
-                :class="{ disabled: !dirty }"
-                icon="undo"
-                @click="$emit('revert')"
-                data-description="editor revert button">
-                <Icon icon="undo" />
-            </b-button>
-
-            <!-- form status -->
-            <b-button
-                :title="statusLabel | l"
-                class="status-button mb-1"
-                :class="{ valid: valid, disabled: !valid }"
-                variant="link"
-                data-description="editor status">
-                <Icon :icon="valid ? 'check' : 'exclamation-triangle'" />
-            </b-button>
-        </template>
-    </nav>
-</template>
-
-<script>
-export default {
-    props: {
-        modelName: { type: String, required: true },
-        editing: { type: Boolean, required: true },
-        dirty: { type: Boolean, required: false, default: false },
-        valid: { type: Boolean, required: false, default: false },
-    },
-    computed: {
-        statusLabel() {
-            const status = this.valid ? "Valid" : "Invalid";
-            return `${status} ${this.modelName}`;
-        },
-    },
-    methods: {
-        label(verb) {
-            return `${verb} ${this.modelName}`;
-        },
-    },
-};
-</script>
-
-<style lang="scss">
-.edit-controls .disabled {
-    opacity: 0.25;
-}
-</style>
diff --git a/client/src/components/History/HeaderDetails.vue b/client/src/components/History/HeaderDetails.vue
new file mode 100644
index 00000000000..a433d704c08
--- /dev/null
+++ b/client/src/components/History/HeaderDetails.vue
@@ -0,0 +1,116 @@
+<template>
+    <section>
+        <b-button
+            v-if="writeable"
+            class="edit-button ml-1 float-right"
+            data-description="editor toggle button"
+            size="sm"
+            variant="link"
+            :title="'Edit' | l"
+            :pressed="editing"
+            @click="onToggle">
+            <Icon icon="pen" />
+        </b-button>
+        <slot name="name" />
+
+        <!-- display annotation, tags -->
+        <div v-if="!editing">
+            <div v-if="annotation" class="mt-2">{{ annotation }}</div>
+            <StatelessTags class="tags mt-3" :value="tags" :disabled="true" />
+        </div>
+
+        <!-- edit form, change title, annotation, or tags -->
+        <div v-else class="mt-3" data-description="edit form">
+            <b-textarea
+                class="mb-2"
+                v-model="localProps.name"
+                placeholder="Name"
+                trim
+                max-rows="4"
+                data-description="name input" />
+            <b-textarea
+                class="mb-2"
+                v-model="localProps.annotation"
+                placeholder="Annotation (optional)"
+                trim
+                max-rows="4"
+                data-description="annotation input" />
+            <StatelessTags class="mb-3 tags" v-model="localProps.tags" />
+        </div>
+        <nav class="edit-controls">
+            <template v-if="editing">
+                <b-button
+                    class="save-button mb-1"
+                    data-description="editor save button"
+                    size="sm"
+                    variant="primary"
+                    :disabled="!localProps.name"
+                    @click="onSave">
+                    <Icon icon="save" />
+                    <span v-localize>Save</span>
+                </b-button>
+                <b-button
+                    class="cancel-button mb-1"
+                    data-description="editor cancel button"
+                    size="sm"
+                    icon="undo"
+                    @click="onToggle">
+                    <Icon icon="undo" />
+                    <span v-localize>Cancel</span>
+                </b-button>
+            </template>
+        </nav>
+    </section>
+</template>
+
+<script>
+import { StatelessTags } from "components/Tags";
+export default {
+    components: {
+        StatelessTags,
+    },
+    props: {
+        name: { type: String, default: null },
+        annotation: { type: String, default: null },
+        tags: { type: Array, default: null },
+        writeable: { type: Boolean, default: true },
+    },
+    data() {
+        return {
+            editing: false,
+            localProps: {},
+        };
+    },
+    watch: {
+        name() {
+            this.localProps.name = this.name;
+        },
+        annotation() {
+            this.localProps.annotation = this.annotation;
+        },
+        tags() {
+            this.localProps.tags = this.tags;
+        },
+    },
+    created() {
+        this.onReset();
+    },
+    methods: {
+        onReset() {
+            this.localProps = {
+                name: this.name,
+                annotation: this.annotation,
+                tags: this.tags,
+            };
+        },
+        onSave() {
+            this.editing = false;
+            this.$emit("save", Object.assign({}, this.localProps));
+        },
+        onToggle() {
+            this.editing = !this.editing;
+            this.onReset();
+        },
+    },
+};
+</script>
diff --git a/client/src/components/History/HistoryDetails.vue b/client/src/components/History/HistoryDetails.vue
index f3a6b48a7b6..330ad4144a5 100644
--- a/client/src/components/History/HistoryDetails.vue
+++ b/client/src/components/History/HistoryDetails.vue
@@ -1,68 +1,28 @@
-<!--
-History object editor. Change name, edit tags, description.
-Emit new History model object when done via .sync syntax
--->
-
 <template>
-    <section class="history-details d-flex" data-description="edit details">
-        <div class="flex-grow-1 overflow-hidden">
-            <h3 data-description="history name display">{{ historyName || "(History Name)" }}</h3>
+    <HeaderDetails
+        :name="history.name"
+        :annotation="history.annotation"
+        :tags="history.tags"
+        :writeable="writeable"
+        @save="$emit('update:currentHistory', $event)">
+        <template v-slot:name>
+            <h3 data-description="history name display">{{ history.name || "(History Name)" }}</h3>
             <h5 class="history-size">
                 <span v-if="history.size">{{ history.size | niceFileSize }}</span>
                 <span v-else v-localize>(empty)</span>
             </h5>
-
-            <!-- display title, annotation, tags -->
-            <div v-if="!editing">
-                <p data-description="history annotation" v-if="annotation" class="mt-1">{{ annotation }}</p>
-                <StatelessTags class="mt-2 tags" :value="tags" :disabled="true" />
-            </div>
-
-            <!-- edit form, change title, annotation, or tags -->
-            <div v-else class="mt-3" @keydown.esc="revertAndCancel" data-description="edit form">
-                <b-textarea
-                    class="mb-2"
-                    v-model="historyName"
-                    placeholder="History Name"
-                    trim
-                    max-rows="4"
-                    data-description="name input"></b-textarea>
-
-                <b-textarea
-                    class="mb-2"
-                    v-model="annotation"
-                    placeholder="Annotation (optional)"
-                    trim
-                    max-rows="4"
-                    data-description="annotation input"></b-textarea>
-
-                <StatelessTags class="mt-3 tags" v-model="tags" />
-            </div>
-        </div>
-
-        <EditorMenu
-            class="ml-3 flex-grow-0 d-flex flex-column"
-            v-if="writable"
-            model-name="History"
-            :editing.sync="editing"
-            :writable="writable"
-            :valid="valid"
-            :dirty="dirty"
-            @save="save"
-            @revert="revert" />
-    </section>
+        </template>
+    </HeaderDetails>
 </template>
 
 <script>
 import prettyBytes from "pretty-bytes";
 import { History } from "./model";
-import EditorMenu from "./EditorMenu";
-import { StatelessTags } from "components/Tags";
+import HeaderDetails from "./HeaderDetails";
 
 export default {
     components: {
-        EditorMenu,
-        StatelessTags,
+        HeaderDetails,
     },
     filters: {
         niceFileSize(rawSize = 0) {
@@ -71,81 +31,7 @@ export default {
     },
     props: {
         history: { type: History, required: true },
-        writable: { type: Boolean, required: false, default: true },
-    },
-    data() {
-        return {
-            editing: false,
-            tempHistory: this.history.clone(),
-        };
-    },
-    computed: {
-        historyId() {
-            return this.history.id;
-        },
-        isEditing() {
-            return this.writable && this.editing;
-        },
-        valid() {
-            return this.tempHistory.name.length > 0;
-        },
-        dirty() {
-            return !this.tempHistory.equals(this.history);
-        },
-        annotation: {
-            get() {
-                return this.tempHistory.annotation;
-            },
-            set(annotation) {
-                this.patchTempHistory({ annotation });
-            },
-        },
-        historyName: {
-            get() {
-                return this.tempHistory.name;
-            },
-            set(name) {
-                this.patchTempHistory({ name });
-            },
-        },
-        tags: {
-            get() {
-                return this.tempHistory.tags || [];
-            },
-            set(newTags) {
-                this.patchTempHistory({ tags: newTags });
-            },
-        },
-    },
-    watch: {
-        historyId(newId, oldId) {
-            if (newId != oldId) {
-                this.reset();
-            }
-        },
-    },
-    methods: {
-        reset() {
-            this.tempHistory = this.history.clone();
-        },
-        patchTempHistory(props = {}) {
-            this.tempHistory = this.tempHistory.patch(props);
-        },
-        save() {
-            if (this.valid) {
-                this.$emit("update:history", this.tempHistory);
-                this.editing = false;
-            }
-        },
-        revert() {
-            if (this.dirty) {
-                this.reset();
-            }
-        },
-        revertAndCancel() {
-            this.revert();
-            this.editing = false;
-        },
+        writeable: { type: Boolean, default: true },
     },
 };
 </script>

From ec283e20f0fb8ddf8a8a5f16d1ea81d028755dcf Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 18 Feb 2022 16:57:57 -0500
Subject: [PATCH 61/95] Use regular button for collection download, attempt to
 replace url

---
 .../History/CurrentCollection/Operations.vue  | 28 +++++++++----------
 .../History/CurrentCollection/Panel.vue       | 13 ++-------
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/client/src/components/History/CurrentCollection/Operations.vue b/client/src/components/History/CurrentCollection/Operations.vue
index 1c2bb0bbe7c..164ee348677 100644
--- a/client/src/components/History/CurrentCollection/Operations.vue
+++ b/client/src/components/History/CurrentCollection/Operations.vue
@@ -1,18 +1,16 @@
 <template>
-    <section>
-        <nav class="d-flex justify-content-end">
-            <b-button-group>
-                <b-button
-                    v-if="isRoot"
-                    class="mb-2 mx-3"
-                    title="Download Collection"
-                    :href="downloadCollectionUrl"
-                    download>
-                    <Icon icon="download" />
-                </b-button>
-            </b-button-group>
-        </nav>
-    </section>
+    <nav class="d-flex justify-content-end">
+        <b-button
+            v-if="isRoot"
+            class="mb-2 mx-3"
+            title="Download Collection"
+            size="sm"
+            variant="link"
+            :href="downloadUrl"
+            download>
+            <Icon icon="download" />
+        </b-button>
+    </nav>
 </template>
 
 <script>
@@ -23,7 +21,7 @@ export default {
     },
     computed: {
         /** @return {String} */
-        downloadCollectionUrl() {
+        downloadUrl() {
             return `${this.collection.url}/download`;
         },
     },
diff --git a/client/src/components/History/CurrentCollection/Panel.vue b/client/src/components/History/CurrentCollection/Panel.vue
index f25ef870699..308a65f1152 100644
--- a/client/src/components/History/CurrentCollection/Panel.vue
+++ b/client/src/components/History/CurrentCollection/Panel.vue
@@ -23,7 +23,7 @@
                     <HistoryListing
                         item-key="element_index"
                         :page-size="pageSize"
-                        :payload="payload.elements"
+                        :payload="payload"
                         @scroll="onScroll">
                         <template v-slot:history-item="{ item, index }">
                             <ContentItem
@@ -88,17 +88,10 @@ export default {
             return this.isRoot;
         },
         rootCollection() {
-            return this.dsc[0];
-        },
-        downloadUrl() {
-            let url = "";
-            if (this.rootCollection) {
-                url = `${this.rootCollection.url}/download`;
-            }
-            return url;
+            return this.selectedCollections[0];
         },
         url() {
-            return `api/dataset_collections/${this.dsc.id}`;
+            return `api/dataset_collections/${this.rootCollection.id}/contents/${this.dsc.id}`;
         },
     },
     methods: {

From 5bf06d522749a5e8cb42aceb1d175b99e526056f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 18 Feb 2022 17:27:26 -0500
Subject: [PATCH 62/95] Allow disabling annotation attribute in header details,
 properly update collection attributes

---
 .../History/CurrentCollection/Details.vue           |  2 +-
 .../components/History/CurrentCollection/Panel.vue  | 13 ++++++-------
 client/src/components/History/HeaderDetails.vue     |  2 ++
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/src/components/History/CurrentCollection/Details.vue b/client/src/components/History/CurrentCollection/Details.vue
index 07ac3914a9f..27174f75584 100644
--- a/client/src/components/History/CurrentCollection/Details.vue
+++ b/client/src/components/History/CurrentCollection/Details.vue
@@ -1,9 +1,9 @@
 <template>
     <HeaderDetails
         :name="dsc.name"
-        :annotation="dsc.annotation"
         :tags="dsc.tags"
         :writeable="writeable"
+        :show-annotation="false"
         @save="$emit('update:dsc', $event)">
         <template v-slot:name>
             <h3 data-description="collection name display">{{ dsc.name || "(Collection Name)" }}</h3>
diff --git a/client/src/components/History/CurrentCollection/Panel.vue b/client/src/components/History/CurrentCollection/Panel.vue
index 308a65f1152..bc808d2fb34 100644
--- a/client/src/components/History/CurrentCollection/Panel.vue
+++ b/client/src/components/History/CurrentCollection/Panel.vue
@@ -95,13 +95,12 @@ export default {
         },
     },
     methods: {
-        // change the data of the root collection, anything past the root
-        // collection is part of the dataset collection, which i believe is supposed to
-        // be immutable, so only edit name, tags etc of top-level selected collection.
-        async updateDsc(collection, fields) {
-            if (this.writeable) {
-                await updateContentFields(collection, fields);
-            }
+        updateDsc(collection, fields) {
+            updateContentFields(collection, fields).then((response) => {
+                Object.keys(response).forEach((key) => {
+                    collection[key] = response[key];
+                });
+            });
         },
         onScroll(newHid) {
             this.maxHid = newHid;
diff --git a/client/src/components/History/HeaderDetails.vue b/client/src/components/History/HeaderDetails.vue
index a433d704c08..3b4f9ac76a2 100644
--- a/client/src/components/History/HeaderDetails.vue
+++ b/client/src/components/History/HeaderDetails.vue
@@ -29,6 +29,7 @@
                 max-rows="4"
                 data-description="name input" />
             <b-textarea
+                v-if="showAnnotation"
                 class="mb-2"
                 v-model="localProps.annotation"
                 placeholder="Annotation (optional)"
@@ -72,6 +73,7 @@ export default {
     props: {
         name: { type: String, default: null },
         annotation: { type: String, default: null },
+        showAnnotation: { type: Boolean, default: true },
         tags: { type: Array, default: null },
         writeable: { type: Boolean, default: true },
     },

From 29407b989fc09b8a0a1c04c541c16608f7be19f0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 18 Feb 2022 21:14:37 -0500
Subject: [PATCH 63/95] Revise directory structure such that it aligns with the
 actual component structure

---
 .../{ContentItem => Content}/ContentItem.vue  |  0
 .../Dataset/DatasetActions.vue                |  0
 .../Dataset/DatasetDetails.vue                |  0
 .../History/{ => Content}/ExpandedItems.js    |  0
 .../DatasetCollectionContents.vue             |  0
 .../DatasetCollectionUIWrapper.test.js        |  0
 .../DatasetCollectionUIWrapper.vue            |  0
 .../DatasetUIWrapper.test.js                  |  0
 .../GenericContentItem/DatasetUIWrapper.vue   |  0
 .../GenericHistoryContent.vue                 |  0
 .../History/{ => Content}/SelectedItems.js    |  0
 .../{ContentItem => Content}/contentState.js  |  0
 .../{Details.vue => CollectionDetails.vue}    |  8 +-
 ...avigation.vue => CollectionNavigation.vue} |  0
 ...perations.vue => CollectionOperations.vue} |  0
 .../{Panel.vue => CollectionPanel.vue}        | 26 +++--
 .../{ => CurrentHistory}/HistoryDetails.vue   | 10 +-
 .../{ => CurrentHistory}/HistoryDropdown.vue  |  0
 .../{ => CurrentHistory}/HistoryEmpty.vue     |  0
 .../HistoryFilters.vue}                       |  0
 .../{ => CurrentHistory}/HistoryMenu.vue      |  4 +-
 .../{ => CurrentHistory}/HistoryMessages.vue  |  2 +-
 .../HistoryNavigation.vue}                    |  6 +-
 .../HistoryOperations.vue}                    | 16 ++--
 .../HistoryPanel.vue}                         | 34 +++----
 .../History/CurrentHistoryPanel.vue           | 34 -------
 client/src/components/History/DeleteModal.vue | 28 ------
 .../src/components/History/HistoryPanel.vue   | 52 ----------
 client/src/components/History/HistoryTags.vue | 62 ------------
 client/src/components/History/Index.vue       | 62 ++++++++++++
 .../{HeaderDetails.vue => Layout/Details.vue} |  0
 .../History/{ => Layout}/Layout.vue           |  0
 .../Listing.vue}                              |  0
 .../History/{ => Modals}/CopyModal.vue        |  2 +-
 .../History/{ => Modals}/HistorySelector.vue  |  0
 .../{ => Modals}/HistorySelectorModal.vue     |  0
 .../History/{ => Modals}/ToolHelpModal.vue    |  2 +-
 client/src/components/History/README.md       | 94 +++++++++----------
 .../History/adapters/HistoryPanelProxy.js     |  5 +-
 client/src/components/History/index.js        |  6 --
 .../components/JobInformation/JobOutputs.vue  |  2 +-
 .../JobParameters/JobParametersArrayValue.vue |  2 +-
 .../WorkflowInvocationDetails.vue             |  2 +-
 .../WorkflowInvocationStep.vue                |  2 +-
 client/src/entry/analysis/index.js            |  2 +-
 45 files changed, 168 insertions(+), 295 deletions(-)
 rename client/src/components/History/{ContentItem => Content}/ContentItem.vue (100%)
 rename client/src/components/History/{ContentItem => Content}/Dataset/DatasetActions.vue (100%)
 rename client/src/components/History/{ContentItem => Content}/Dataset/DatasetDetails.vue (100%)
 rename client/src/components/History/{ => Content}/ExpandedItems.js (100%)
 rename client/src/components/History/{ContentItem => Content}/GenericContentItem/DatasetCollectionContents.vue (100%)
 rename client/src/components/History/{ContentItem => Content}/GenericContentItem/DatasetCollectionUIWrapper.test.js (100%)
 rename client/src/components/History/{ContentItem => Content}/GenericContentItem/DatasetCollectionUIWrapper.vue (100%)
 rename client/src/components/History/{ContentItem => Content}/GenericContentItem/DatasetUIWrapper.test.js (100%)
 rename client/src/components/History/{ContentItem => Content}/GenericContentItem/DatasetUIWrapper.vue (100%)
 rename client/src/components/History/{ContentItem => Content}/GenericContentItem/GenericHistoryContent.vue (100%)
 rename client/src/components/History/{ => Content}/SelectedItems.js (100%)
 rename client/src/components/History/{ContentItem => Content}/contentState.js (100%)
 rename client/src/components/History/CurrentCollection/{Details.vue => CollectionDetails.vue} (90%)
 rename client/src/components/History/CurrentCollection/{Navigation.vue => CollectionNavigation.vue} (100%)
 rename client/src/components/History/CurrentCollection/{Operations.vue => CollectionOperations.vue} (100%)
 rename client/src/components/History/CurrentCollection/{Panel.vue => CollectionPanel.vue} (84%)
 rename client/src/components/History/{ => CurrentHistory}/HistoryDetails.vue (85%)
 rename client/src/components/History/{ => CurrentHistory}/HistoryDropdown.vue (100%)
 rename client/src/components/History/{ => CurrentHistory}/HistoryEmpty.vue (100%)
 rename client/src/components/History/{ContentFilters.vue => CurrentHistory/HistoryFilters.vue} (100%)
 rename client/src/components/History/{ => CurrentHistory}/HistoryMenu.vue (97%)
 rename client/src/components/History/{ => CurrentHistory}/HistoryMessages.vue (93%)
 rename client/src/components/History/{HistoriesMenu.vue => CurrentHistory/HistoryNavigation.vue} (92%)
 rename client/src/components/History/{ContentOperations.vue => CurrentHistory/HistoryOperations.vue} (96%)
 rename client/src/components/History/{History.vue => CurrentHistory/HistoryPanel.vue} (90%)
 delete mode 100644 client/src/components/History/CurrentHistoryPanel.vue
 delete mode 100644 client/src/components/History/DeleteModal.vue
 delete mode 100644 client/src/components/History/HistoryPanel.vue
 delete mode 100644 client/src/components/History/HistoryTags.vue
 create mode 100644 client/src/components/History/Index.vue
 rename client/src/components/History/{HeaderDetails.vue => Layout/Details.vue} (100%)
 rename client/src/components/History/{ => Layout}/Layout.vue (100%)
 rename client/src/components/History/{HistoryListing.vue => Layout/Listing.vue} (100%)
 rename client/src/components/History/{ => Modals}/CopyModal.vue (98%)
 rename client/src/components/History/{ => Modals}/HistorySelector.vue (100%)
 rename client/src/components/History/{ => Modals}/HistorySelectorModal.vue (100%)
 rename client/src/components/History/{ => Modals}/ToolHelpModal.vue (94%)
 delete mode 100644 client/src/components/History/index.js

diff --git a/client/src/components/History/ContentItem/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
similarity index 100%
rename from client/src/components/History/ContentItem/ContentItem.vue
rename to client/src/components/History/Content/ContentItem.vue
diff --git a/client/src/components/History/ContentItem/Dataset/DatasetActions.vue b/client/src/components/History/Content/Dataset/DatasetActions.vue
similarity index 100%
rename from client/src/components/History/ContentItem/Dataset/DatasetActions.vue
rename to client/src/components/History/Content/Dataset/DatasetActions.vue
diff --git a/client/src/components/History/ContentItem/Dataset/DatasetDetails.vue b/client/src/components/History/Content/Dataset/DatasetDetails.vue
similarity index 100%
rename from client/src/components/History/ContentItem/Dataset/DatasetDetails.vue
rename to client/src/components/History/Content/Dataset/DatasetDetails.vue
diff --git a/client/src/components/History/ExpandedItems.js b/client/src/components/History/Content/ExpandedItems.js
similarity index 100%
rename from client/src/components/History/ExpandedItems.js
rename to client/src/components/History/Content/ExpandedItems.js
diff --git a/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionContents.vue b/client/src/components/History/Content/GenericContentItem/DatasetCollectionContents.vue
similarity index 100%
rename from client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionContents.vue
rename to client/src/components/History/Content/GenericContentItem/DatasetCollectionContents.vue
diff --git a/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionUIWrapper.test.js b/client/src/components/History/Content/GenericContentItem/DatasetCollectionUIWrapper.test.js
similarity index 100%
rename from client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionUIWrapper.test.js
rename to client/src/components/History/Content/GenericContentItem/DatasetCollectionUIWrapper.test.js
diff --git a/client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionUIWrapper.vue b/client/src/components/History/Content/GenericContentItem/DatasetCollectionUIWrapper.vue
similarity index 100%
rename from client/src/components/History/ContentItem/GenericContentItem/DatasetCollectionUIWrapper.vue
rename to client/src/components/History/Content/GenericContentItem/DatasetCollectionUIWrapper.vue
diff --git a/client/src/components/History/ContentItem/GenericContentItem/DatasetUIWrapper.test.js b/client/src/components/History/Content/GenericContentItem/DatasetUIWrapper.test.js
similarity index 100%
rename from client/src/components/History/ContentItem/GenericContentItem/DatasetUIWrapper.test.js
rename to client/src/components/History/Content/GenericContentItem/DatasetUIWrapper.test.js
diff --git a/client/src/components/History/ContentItem/GenericContentItem/DatasetUIWrapper.vue b/client/src/components/History/Content/GenericContentItem/DatasetUIWrapper.vue
similarity index 100%
rename from client/src/components/History/ContentItem/GenericContentItem/DatasetUIWrapper.vue
rename to client/src/components/History/Content/GenericContentItem/DatasetUIWrapper.vue
diff --git a/client/src/components/History/ContentItem/GenericContentItem/GenericHistoryContent.vue b/client/src/components/History/Content/GenericContentItem/GenericHistoryContent.vue
similarity index 100%
rename from client/src/components/History/ContentItem/GenericContentItem/GenericHistoryContent.vue
rename to client/src/components/History/Content/GenericContentItem/GenericHistoryContent.vue
diff --git a/client/src/components/History/SelectedItems.js b/client/src/components/History/Content/SelectedItems.js
similarity index 100%
rename from client/src/components/History/SelectedItems.js
rename to client/src/components/History/Content/SelectedItems.js
diff --git a/client/src/components/History/ContentItem/contentState.js b/client/src/components/History/Content/contentState.js
similarity index 100%
rename from client/src/components/History/ContentItem/contentState.js
rename to client/src/components/History/Content/contentState.js
diff --git a/client/src/components/History/CurrentCollection/Details.vue b/client/src/components/History/CurrentCollection/CollectionDetails.vue
similarity index 90%
rename from client/src/components/History/CurrentCollection/Details.vue
rename to client/src/components/History/CurrentCollection/CollectionDetails.vue
index 27174f75584..0c7ec58da2b 100644
--- a/client/src/components/History/CurrentCollection/Details.vue
+++ b/client/src/components/History/CurrentCollection/CollectionDetails.vue
@@ -1,5 +1,5 @@
 <template>
-    <HeaderDetails
+    <Details
         :name="dsc.name"
         :tags="dsc.tags"
         :writeable="writeable"
@@ -14,16 +14,16 @@
                 </div>
             </div>
         </template>
-    </HeaderDetails>
+    </Details>
 </template>
 
 <script>
 import { DatasetCollection } from "components/History/model";
-import HeaderDetails from "components/History/HeaderDetails";
+import Details from "components/History/Layout/Details";
 
 export default {
     components: {
-        HeaderDetails,
+        Details,
     },
     props: {
         dsc: { type: Object, required: true },
diff --git a/client/src/components/History/CurrentCollection/Navigation.vue b/client/src/components/History/CurrentCollection/CollectionNavigation.vue
similarity index 100%
rename from client/src/components/History/CurrentCollection/Navigation.vue
rename to client/src/components/History/CurrentCollection/CollectionNavigation.vue
diff --git a/client/src/components/History/CurrentCollection/Operations.vue b/client/src/components/History/CurrentCollection/CollectionOperations.vue
similarity index 100%
rename from client/src/components/History/CurrentCollection/Operations.vue
rename to client/src/components/History/CurrentCollection/CollectionOperations.vue
diff --git a/client/src/components/History/CurrentCollection/Panel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
similarity index 84%
rename from client/src/components/History/CurrentCollection/Panel.vue
rename to client/src/components/History/CurrentCollection/CollectionPanel.vue
index bc808d2fb34..77ac55b77fe 100644
--- a/client/src/components/History/CurrentCollection/Panel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -20,11 +20,7 @@
                 </template>
 
                 <template v-slot:listing>
-                    <HistoryListing
-                        item-key="element_index"
-                        :page-size="pageSize"
-                        :payload="payload"
-                        @scroll="onScroll">
+                    <Listing item-key="element_index" :page-size="pageSize" :payload="payload" @scroll="onScroll">
                         <template v-slot:history-item="{ item, index }">
                             <ContentItem
                                 :item="item"
@@ -37,7 +33,7 @@
                                 @update:expanded="setExpanded(item, $event)"
                                 @drilldown="$emit('viewCollection', item)" />
                         </template>
-                    </HistoryListing>
+                    </Listing>
                 </template>
             </Layout>
         </ExpandedItems>
@@ -45,16 +41,16 @@
 </template>
 
 <script>
+import { UrlDataProvider } from "components/providers/UrlDataProvider";
 import { DatasetCollection, History } from "components/History/model";
 import { updateContentFields } from "components/History/model/queries";
-import ExpandedItems from "../ExpandedItems";
-import Layout from "../Layout";
-import Navigation from "./Navigation";
-import Operations from "./Operations";
-import Details from "./Details";
-import ContentItem from "../ContentItem/ContentItem";
-import HistoryListing from "components/History/HistoryListing";
-import { UrlDataProvider } from "components/providers/UrlDataProvider";
+import ContentItem from "components/History/Content/ContentItem";
+import ExpandedItems from "components/History/Content/ExpandedItems";
+import Listing from "components/History/Layout/Listing";
+import Layout from "components/History/Layout/Layout";
+import Navigation from "./CollectionNavigation";
+import Operations from "./CollectionOperations";
+import Details from "./CollectionDetails";
 
 export default {
     components: {
@@ -65,7 +61,7 @@ export default {
         ContentItem,
         ExpandedItems,
         Operations,
-        HistoryListing,
+        Listing,
     },
     props: {
         history: { type: History, required: true },
diff --git a/client/src/components/History/HistoryDetails.vue b/client/src/components/History/CurrentHistory/HistoryDetails.vue
similarity index 85%
rename from client/src/components/History/HistoryDetails.vue
rename to client/src/components/History/CurrentHistory/HistoryDetails.vue
index 330ad4144a5..dff4f1b6c39 100644
--- a/client/src/components/History/HistoryDetails.vue
+++ b/client/src/components/History/CurrentHistory/HistoryDetails.vue
@@ -1,5 +1,5 @@
 <template>
-    <HeaderDetails
+    <Details
         :name="history.name"
         :annotation="history.annotation"
         :tags="history.tags"
@@ -12,17 +12,17 @@
                 <span v-else v-localize>(empty)</span>
             </h5>
         </template>
-    </HeaderDetails>
+    </Details>
 </template>
 
 <script>
 import prettyBytes from "pretty-bytes";
-import { History } from "./model";
-import HeaderDetails from "./HeaderDetails";
+import { History } from "components/History/model";
+import Details from "components/History/Layout/Details";
 
 export default {
     components: {
-        HeaderDetails,
+        Details,
     },
     filters: {
         niceFileSize(rawSize = 0) {
diff --git a/client/src/components/History/HistoryDropdown.vue b/client/src/components/History/CurrentHistory/HistoryDropdown.vue
similarity index 100%
rename from client/src/components/History/HistoryDropdown.vue
rename to client/src/components/History/CurrentHistory/HistoryDropdown.vue
diff --git a/client/src/components/History/HistoryEmpty.vue b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
similarity index 100%
rename from client/src/components/History/HistoryEmpty.vue
rename to client/src/components/History/CurrentHistory/HistoryEmpty.vue
diff --git a/client/src/components/History/ContentFilters.vue b/client/src/components/History/CurrentHistory/HistoryFilters.vue
similarity index 100%
rename from client/src/components/History/ContentFilters.vue
rename to client/src/components/History/CurrentHistory/HistoryFilters.vue
diff --git a/client/src/components/History/HistoryMenu.vue b/client/src/components/History/CurrentHistory/HistoryMenu.vue
similarity index 97%
rename from client/src/components/History/HistoryMenu.vue
rename to client/src/components/History/CurrentHistory/HistoryMenu.vue
index 0c9a317132a..f69b871a164 100644
--- a/client/src/components/History/HistoryMenu.vue
+++ b/client/src/components/History/CurrentHistory/HistoryMenu.vue
@@ -106,8 +106,8 @@
 </template>
 
 <script>
-import { History } from "./model";
-import CopyHistoryModal from "./CopyModal";
+import { History } from "components/History/model";
+import CopyHistoryModal from "components/History/Modals/CopyModal";
 import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
 
 export default {
diff --git a/client/src/components/History/HistoryMessages.vue b/client/src/components/History/CurrentHistory/HistoryMessages.vue
similarity index 93%
rename from client/src/components/History/HistoryMessages.vue
rename to client/src/components/History/CurrentHistory/HistoryMessages.vue
index e4da93eabac..2ed6eb11f64 100644
--- a/client/src/components/History/HistoryMessages.vue
+++ b/client/src/components/History/CurrentHistory/HistoryMessages.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { History } from "./model";
+import { History } from "components/History/model";
 
 export default {
     props: {
diff --git a/client/src/components/History/HistoriesMenu.vue b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
similarity index 92%
rename from client/src/components/History/HistoriesMenu.vue
rename to client/src/components/History/CurrentHistory/HistoryNavigation.vue
index da09812d0e2..93be2793eb1 100644
--- a/client/src/components/History/HistoriesMenu.vue
+++ b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
@@ -61,10 +61,10 @@
 </template>
 
 <script>
-import { History } from "./model";
+import { History } from "components/History/model";
 import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
-import { switchToLegacyHistoryPanel } from "./adapters/betaToggle";
-import HistorySelectorModal from "./HistorySelectorModal";
+import { switchToLegacyHistoryPanel } from "components/History/adapters/betaToggle";
+import HistorySelectorModal from "components/History/Modals/HistorySelectorModal";
 
 export default {
     mixins: [legacyNavigationMixin],
diff --git a/client/src/components/History/ContentOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations.vue
similarity index 96%
rename from client/src/components/History/ContentOperations.vue
rename to client/src/components/History/CurrentHistory/HistoryOperations.vue
index a87a6d30e70..efb061c9b56 100644
--- a/client/src/components/History/ContentOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations.vue
@@ -105,7 +105,7 @@
         </nav>
 
         <transition name="shutterfade">
-            <content-filters v-if="showFilter" class="content-operations-filters p-2" :params.sync="localParams" />
+            <history-filters v-if="showFilter" class="content-operations-filters p-2" :params.sync="localParams" />
         </transition>
 
         <b-modal id="hide-selected-content" title="Hide Selected Content?" title-tag="h2" @ok="hideSelected">
@@ -143,7 +143,7 @@
 </template>
 
 <script>
-import { History } from "./model/History";
+import { History } from "components/History/model/History";
 import {
     hideSelectedContent,
     unhideSelectedContent,
@@ -153,16 +153,16 @@ import {
     unhideAllHiddenContent,
     deleteAllHiddenContent,
     purgeAllDeletedContent,
-} from "./model";
-import { createDatasetCollection } from "./model/queries";
+} from "components/History/model";
+import { createDatasetCollection } from "components/History/model/queries";
 import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
-import { buildCollectionModal } from "./adapters/buildCollectionModal";
-import ContentFilters from "./ContentFilters";
+import { buildCollectionModal } from "components/History/adapters/buildCollectionModal";
+import HistoryFilters from "./HistoryFilters";
 
 export default {
     mixins: [legacyNavigationMixin],
     components: {
-        ContentFilters,
+        HistoryFilters,
     },
     props: {
         history: { type: History, required: true },
@@ -181,7 +181,7 @@ export default {
         showBuildOptions() {
             return !this.params.showHidden && !this.params.showDeleted;
         },
-        hasContentFilters() {
+        hasHistoryFilters() {
             const { showHidden, showDeleted, filterText } = this.params;
             return showHidden || showDeleted || filterText;
         },
diff --git a/client/src/components/History/History.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
similarity index 90%
rename from client/src/components/History/History.vue
rename to client/src/components/History/CurrentHistory/HistoryPanel.vue
index 03e2f33aa2f..31d056f1e13 100644
--- a/client/src/components/History/History.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -31,7 +31,7 @@
                     </template>
 
                     <template v-slot:listcontrols>
-                        <ContentOperations
+                        <HistoryOperations
                             :history="history"
                             :params.sync="params"
                             :content-selection="selectedItems"
@@ -51,7 +51,7 @@
                         <b-alert v-else-if="loading" class="m-2" variant="info" show>
                             <LoadingSpan message="Loading History" />
                         </b-alert>
-                        <HistoryListing
+                        <Listing
                             v-else
                             :query-key="queryKey"
                             :page-size="pageSize"
@@ -77,7 +77,7 @@
                                     @undelete="onUndelete"
                                     @unhide="onUnhide" />
                             </template>
-                        </HistoryListing>
+                        </Listing>
                     </template>
 
                     <template v-slot:modals>
@@ -90,22 +90,22 @@
 </template>
 
 <script>
-import { History } from "./model";
-import { deleteContent, updateContentFields } from "./model/queries";
-import LoadingSpan from "components/LoadingSpan";
+import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
 import { UrlDataProvider } from "components/providers/UrlDataProvider";
-import ExpandedItems from "./ExpandedItems";
-import SelectedItems from "./SelectedItems";
-import Layout from "./Layout";
-import HistoryMessages from "./HistoryMessages";
+import LoadingSpan from "components/LoadingSpan";
+import ContentItem from "components/History/Content/ContentItem";
+import { History } from "components/History/model";
+import { deleteContent, updateContentFields } from "components/History/model/queries";
+import ExpandedItems from "components/History/Content/ExpandedItems";
+import SelectedItems from "components/History/Content/SelectedItems";
+import Layout from "components/History/Layout/Layout";
+import Listing from "components/History/Layout/Listing";
+import ToolHelpModal from "components/History/Modals/ToolHelpModal";
+import HistoryOperations from "./HistoryOperations";
 import HistoryDetails from "./HistoryDetails";
 import HistoryEmpty from "./HistoryEmpty";
-import ContentOperations from "./ContentOperations";
-import ToolHelpModal from "./ToolHelpModal";
 import HistoryMenu from "./HistoryMenu";
-import HistoryListing from "./HistoryListing";
-import ContentItem from "./ContentItem/ContentItem";
-import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
+import HistoryMessages from "./HistoryMessages";
 
 export default {
     mixins: [legacyNavigationMixin],
@@ -113,13 +113,13 @@ export default {
         LoadingSpan,
         UrlDataProvider,
         Layout,
+        Listing,
         ContentItem,
         HistoryMessages,
         HistoryDetails,
         HistoryEmpty,
         HistoryMenu,
-        HistoryListing,
-        ContentOperations,
+        HistoryOperations,
         ToolHelpModal,
         ExpandedItems,
         SelectedItems,
diff --git a/client/src/components/History/CurrentHistoryPanel.vue b/client/src/components/History/CurrentHistoryPanel.vue
deleted file mode 100644
index 12edb1762dc..00000000000
--- a/client/src/components/History/CurrentHistoryPanel.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-    <CurrentUser class="d-flex flex-column" v-slot="{ user }">
-        <UserHistories v-if="user" :user="user" v-slot="{ currentHistory, histories, handlers }">
-            <HistoryPanel v-if="currentHistory" :history="currentHistory" v-on="handlers" id="current-history-panel">
-                <template v-slot:navigation>
-                    <HistoriesMenu
-                        v-on="handlers"
-                        :histories="histories"
-                        :current-history="currentHistory"
-                        title="Histories" />
-                </template>
-            </HistoryPanel>
-            <div v-else class="flex-grow-1 loadingBackground h-100">
-                <span class="sr-only" v-localize>Loading History...</span>
-            </div>
-        </UserHistories>
-    </CurrentUser>
-</template>
-
-<script>
-import CurrentUser from "components/providers/CurrentUser";
-import UserHistories from "components/providers/UserHistories";
-import HistoryPanel from "./HistoryPanel";
-import HistoriesMenu from "./HistoriesMenu";
-
-export default {
-    components: {
-        CurrentUser,
-        UserHistories,
-        HistoryPanel,
-        HistoriesMenu,
-    },
-};
-</script>
diff --git a/client/src/components/History/DeleteModal.vue b/client/src/components/History/DeleteModal.vue
deleted file mode 100644
index 6626d3f4ce4..00000000000
--- a/client/src/components/History/DeleteModal.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-    <b-modal ref="deleteModal" title="Delete History" v-model="showModal" title-tag="h2">
-        <p>Delete?</p>
-    </b-modal>
-</template>
-
-<script>
-import { History } from "./model";
-
-export default {
-    props: {
-        history: { type: History, required: true },
-        value: { type: Boolean, required: false, default: false },
-    },
-    computed: {
-        showModal: {
-            get() {
-                return this.value;
-            },
-            set(newVal, oldVal) {
-                if (newVal !== oldVal) {
-                    this.$emit("input", newVal);
-                }
-            },
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/HistoryPanel.vue b/client/src/components/History/HistoryPanel.vue
deleted file mode 100644
index 58d0bbbc3c1..00000000000
--- a/client/src/components/History/HistoryPanel.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<!-- A single history panel is either showing the history or one of the
-selected datset collections -->
-
-<template>
-    <HistoryComponent
-        v-if="history && !breadcrumbs.length"
-        :history="history"
-        v-on="$listeners"
-        @viewCollection="onViewCollection">
-        <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
-            <slot :name="name" v-bind="slotData" :history="history" />
-        </template>
-    </HistoryComponent>
-    <CurrentCollection
-        v-else-if="breadcrumbs.length"
-        :history="history"
-        :selected-collections.sync="breadcrumbs"
-        @viewCollection="onViewCollection" />
-    <div v-else>
-        <span class="sr-only">Loading...</span>
-    </div>
-</template>
-
-<script>
-import HistoryComponent from "./History";
-import CurrentCollection from "./CurrentCollection/Panel";
-import { History, STATES } from "./model";
-
-export default {
-    components: {
-        HistoryComponent,
-        CurrentCollection,
-    },
-    props: {
-        history: { type: History, required: true },
-    },
-    data() {
-        return {
-            // list of collections we have drilled down into
-            breadcrumbs: [],
-        };
-    },
-    provide: {
-        STATES,
-    },
-    methods: {
-        onViewCollection(collection) {
-            this.breadcrumbs = [...this.breadcrumbs, collection];
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/HistoryTags.vue b/client/src/components/History/HistoryTags.vue
deleted file mode 100644
index 3623963e158..00000000000
--- a/client/src/components/History/HistoryTags.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-    <Tags :tags="history.tags" :store-key="storeKey" :tag-service="historyTagService" :disabled="disabled" />
-</template>
-
-<script>
-// TODO: Re-do tags as a provider instead of dependency injected service
-
-import { History } from "./model";
-import { updateHistoryFields } from "./model/queries";
-import { Tags } from "components/Tags";
-import { TagService } from "components/Tags/tagService";
-import { createTag } from "components/Tags/model";
-
-class HistoryTagService extends TagService {
-    constructor(history) {
-        super({
-            id: history.id,
-            itemClass: "History",
-            context: "history-panel",
-        });
-        this.history = history;
-    }
-
-    async save(rawTag) {
-        const tag = createTag(rawTag);
-        const tagSet = new Set(this.history.tags);
-        tagSet.add(tag.text);
-        await this.saveHistoryTags(tagSet);
-        return tag;
-    }
-
-    async delete(rawTag) {
-        const tag = createTag(rawTag);
-        const tagSet = new Set(this.history.tags);
-        tagSet.delete(tag.text);
-        await this.saveHistoryTags(tagSet);
-        return tag;
-    }
-
-    async saveHistoryTags(rawTags) {
-        // console.log("saveHistoryTags", rawTags);
-        const tags = Array.from(rawTags);
-        return await updateHistoryFields(this.history.id, { tags });
-    }
-}
-
-export default {
-    components: { Tags },
-    props: {
-        history: { type: History, required: true },
-        disabled: { type: Boolean, required: false, default: false },
-    },
-    computed: {
-        storeKey() {
-            return `History-${this.history.id}`;
-        },
-        historyTagService() {
-            return new HistoryTagService(this.history);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/Index.vue b/client/src/components/History/Index.vue
new file mode 100644
index 00000000000..9a69be404df
--- /dev/null
+++ b/client/src/components/History/Index.vue
@@ -0,0 +1,62 @@
+<template>
+    <CurrentUser class="d-flex flex-column" v-slot="{ user }">
+        <UserHistories v-if="user" :user="user" v-slot="{ currentHistory, histories, handlers }">
+            <div v-if="currentHistory" id="current-history-panel">
+                <CurrentHistory
+                    v-if="!breadcrumbs.length"
+                    :history="currentHistory"
+                    v-on="$listeners"
+                    @viewCollection="onViewCollection">
+                    <template v-slot:navigation>
+                        <HistoryNavigation
+                            v-on="handlers"
+                            :histories="histories"
+                            :current-history="currentHistory"
+                            title="Histories" />
+                    </template>
+                </CurrentHistory>
+                <CurrentCollection
+                    v-else-if="breadcrumbs.length"
+                    :history="currentHistory"
+                    :selected-collections.sync="breadcrumbs"
+                    @viewCollection="onViewCollection" />
+                <div v-else>
+                    <span class="sr-only">Loading...</span>
+                </div>
+            </div>
+            <div v-else class="flex-grow-1 loadingBackground h-100">
+                <span class="sr-only" v-localize>Loading History...</span>
+            </div>
+        </UserHistories>
+    </CurrentUser>
+</template>
+
+<script>
+import CurrentUser from "components/providers/CurrentUser";
+import UserHistories from "components/providers/UserHistories";
+import { History } from "./model";
+import HistoryNavigation from "./CurrentHistory/HistoryNavigation";
+import CurrentHistory from "./CurrentHistory/HistoryPanel";
+import CurrentCollection from "./CurrentCollection/CollectionPanel";
+
+export default {
+    components: {
+        CurrentUser,
+        CurrentHistory,
+        CurrentCollection,
+        UserHistories,
+        HistoryNavigation,
+    },
+    data() {
+        return {
+            // list of collections we have drilled down into
+            breadcrumbs: [],
+        };
+    },
+    methods: {
+        onViewCollection(collection) {
+            this.breadcrumbs = [...this.breadcrumbs, collection];
+        },
+    },
+};
+</script>
diff --git a/client/src/components/History/HeaderDetails.vue b/client/src/components/History/Layout/Details.vue
similarity index 100%
rename from client/src/components/History/HeaderDetails.vue
rename to client/src/components/History/Layout/Details.vue
diff --git a/client/src/components/History/Layout.vue b/client/src/components/History/Layout/Layout.vue
similarity index 100%
rename from client/src/components/History/Layout.vue
rename to client/src/components/History/Layout/Layout.vue
diff --git a/client/src/components/History/HistoryListing.vue b/client/src/components/History/Layout/Listing.vue
similarity index 100%
rename from client/src/components/History/HistoryListing.vue
rename to client/src/components/History/Layout/Listing.vue
diff --git a/client/src/components/History/CopyModal.vue b/client/src/components/History/Modals/CopyModal.vue
similarity index 98%
rename from client/src/components/History/CopyModal.vue
rename to client/src/components/History/Modals/CopyModal.vue
index 5d93707c302..3abd7b3c152 100644
--- a/client/src/components/History/CopyModal.vue
+++ b/client/src/components/History/Modals/CopyModal.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import { History } from "./model/History";
+import { History } from "components/History/model/History";
 import { mapActions, mapGetters } from "vuex";
 
 export default {
diff --git a/client/src/components/History/HistorySelector.vue b/client/src/components/History/Modals/HistorySelector.vue
similarity index 100%
rename from client/src/components/History/HistorySelector.vue
rename to client/src/components/History/Modals/HistorySelector.vue
diff --git a/client/src/components/History/HistorySelectorModal.vue b/client/src/components/History/Modals/HistorySelectorModal.vue
similarity index 100%
rename from client/src/components/History/HistorySelectorModal.vue
rename to client/src/components/History/Modals/HistorySelectorModal.vue
diff --git a/client/src/components/History/ToolHelpModal.vue b/client/src/components/History/Modals/ToolHelpModal.vue
similarity index 94%
rename from client/src/components/History/ToolHelpModal.vue
rename to client/src/components/History/Modals/ToolHelpModal.vue
index adbcb62df22..43f5bd0b008 100644
--- a/client/src/components/History/ToolHelpModal.vue
+++ b/client/src/components/History/Modals/ToolHelpModal.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { loadToolFromJob } from "./model/queries";
+import { loadToolFromJob } from "components/History/model/queries";
 
 export default {
     data() {
diff --git a/client/src/components/History/README.md b/client/src/components/History/README.md
index 908c4ac6de8..54b736e99a6 100644
--- a/client/src/components/History/README.md
+++ b/client/src/components/History/README.md
@@ -3,67 +3,65 @@ This is not intended to be a complete listing, but a general idea of how the com
 to interact with each other.
 
 ```html static
-<CurrentHistoryPanel>
-    <HistoryPanel :history="history">
-        
-        <!-- for the right-hand side history we show some
-        optional nav elements, can be ommitted for histories
-        shown in multi-history view -->
-        <slot:nav>
-            <HistorySelector />
-            <HistoryMenu />
-        </slot:nav>
+<Index :history="history">
+    
+    <!-- for the right-hand side history we show some
+    optional nav elements, can be ommitted for histories
+    shown in multi-history view -->
+    <slot:nav>
+        <HistorySelector />
+        <HistoryMenu />
+    </slot:nav>
 
 
-        <!-- if main history selected -->
-        <History :history="history">
+    <!-- if main history selected -->
+    <CurrentHistory :history="history">
 
-            <!-- Data providers do the heavy-lifting of mixing params, history, and 
-            scroll position to deliver the content for the scroller -->
+        <!-- Data providers do the heavy-lifting of mixing params, history, and 
+        scroll position to deliver the content for the scroller -->
 
-            <UrlDataProvider>
-                <HistoryDetails />
-                <HistoryMessages />
-                <ContentOperations />
-                <HistoryListing>
+        <UrlDataProvider>
+            <HistoryDetails />
+            <HistoryMessages />
+            <ContentOperations />
+            <Listing>
 
-                    <!-- ContentItem is a dynamic component that becomes
-                    either Dataset or DatasetCollection depending
-                    on the props passed to it -->
+                <!-- ContentItem is a dynamic component that becomes
+                either Dataset or DatasetCollection depending
+                on the props passed to it -->
 
-                    (<ContentItem />)
-                        <Dataset />
-                        <!-- or -->
-                        <DatasetCollection />
+                (<ContentItem />)
+                    <Dataset />
+                    <!-- or -->
+                    <DatasetCollection />
 
-                </HistoryListing>
-            </UrlDataProvider>
+            </Listing>
+        </UrlDataProvider>
 
-        </History>
+    </CurrentHistory>
 
 
-        <!-- When a collection is selected for viewing, send in a 
-        breadcrumbs list of collections the user has selected -->
+    <!-- When a collection is selected for viewing, send in a 
+    breadcrumbs list of collections the user has selected -->
 
-        <CurrentCollection :selected-collections="breadcrumbs">
-            <UrlDataProvider>
-                <CollectionNav />
-                <Details />
-                <HistoryListing>
+    <CurrentCollection :selected-collections="breadcrumbs">
+        <UrlDataProvider>
+            <CollectionNav />
+            <Details />
+            <Listing>
 
-                    <!-- Subdataset and Subcollection are similar to the Dataset 
-                    and DatasetCollection ContentItem components, but mostly 
-                    read-only since they are part of the collection-->
+                <!-- Subdataset and Subcollection are similar to the Dataset 
+                and DatasetCollection ContentItem components, but mostly 
+                read-only since they are part of the collection-->
 
-                    (<ContentItem />)
-                        <Subdataset />
-                        <!-- or -->
-                        <Subcollection />
+                (<ContentItem />)
+                    <Subdataset />
+                    <!-- or -->
+                    <Subcollection />
 
-                </HistoryListing>
-            </UrlDataProvider>
-        </CurrentCollection>
+            </Listing>
+        </UrlDataProvider>
+    </CurrentCollection>
 
-    </HistoryPanel>
-</CurrentHistoryPanel>
+</Index>
 ```
\ No newline at end of file
diff --git a/client/src/components/History/adapters/HistoryPanelProxy.js b/client/src/components/History/adapters/HistoryPanelProxy.js
index 66dc13d49fc..4ebbe3336da 100644
--- a/client/src/components/History/adapters/HistoryPanelProxy.js
+++ b/client/src/components/History/adapters/HistoryPanelProxy.js
@@ -5,8 +5,7 @@
  */
 
 import { mountVueComponent } from "utils/mountVueComponent";
-import CurrentHistoryPanel from "../CurrentHistoryPanel";
-// import { genericProxy } from "utils/proxy";
+import HistoryIndex from "components/History/Index";
 
 // mvc nonsense
 import $ from "jquery";
@@ -88,7 +87,7 @@ export const HistoryPanelProxy = Backbone.View.extend({
         $("#right").addClass("beta").prepend(this.$el);
 
         const container = this.$el[0];
-        const mountHistory = mountVueComponent(CurrentHistoryPanel);
+        const mountHistory = mountVueComponent(HistoryIndex);
         mountHistory({}, container);
 
         return this;
diff --git a/client/src/components/History/index.js b/client/src/components/History/index.js
deleted file mode 100644
index 87aaf7fc379..00000000000
--- a/client/src/components/History/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// Right-hand panel
-export { default as HistoryPanel } from "./HistoryPanel";
-export { default as CurrentHistoryPanel } from "./CurrentHistoryPanel";
-
-// Adapter: backbone view that mounts HistoryPanel
-export { default as HistoryPanelProxy } from "./adapters/HistoryPanelProxy";
diff --git a/client/src/components/JobInformation/JobOutputs.vue b/client/src/components/JobInformation/JobOutputs.vue
index a9f822fa877..83a48c96597 100644
--- a/client/src/components/JobInformation/JobOutputs.vue
+++ b/client/src/components/JobInformation/JobOutputs.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import GenericHistoryContent from "components/History/ContentItem/GenericContentItem/GenericHistoryContent";
+import GenericHistoryContent from "components/History/Content/GenericContentItem/GenericHistoryContent";
 
 export default {
     components: {
diff --git a/client/src/components/JobParameters/JobParametersArrayValue.vue b/client/src/components/JobParameters/JobParametersArrayValue.vue
index d969aad9e04..b776dd76d30 100644
--- a/client/src/components/JobParameters/JobParametersArrayValue.vue
+++ b/client/src/components/JobParameters/JobParametersArrayValue.vue
@@ -10,7 +10,7 @@
 <script>
 import Vue from "vue";
 import BootstrapVue from "bootstrap-vue";
-import GenericHistoryContent from "components/History/ContentItem/GenericContentItem/GenericHistoryContent";
+import GenericHistoryContent from "components/History/Content/GenericContentItem/GenericHistoryContent";
 
 Vue.use(BootstrapVue);
 
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
index 21e00882320..12cbe2e803b 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
@@ -52,7 +52,7 @@
 </template>
 <script>
 import ParameterStep from "./ParameterStep.vue";
-import GenericHistoryContent from "components/History/ContentItem/GenericContentItem/GenericHistoryContent";
+import GenericHistoryContent from "components/History/Content/GenericContentItem/GenericHistoryContent";
 import WorkflowInvocationStep from "./WorkflowInvocationStep";
 
 import { mapGetters } from "vuex";
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index d531f10fd4f..540717835f7 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -84,7 +84,7 @@ import { mapCacheActions } from "vuex-cache";
 import { mapGetters, mapActions } from "vuex";
 import JobStep from "./JobStep";
 import ParameterStep from "./ParameterStep";
-import GenericHistoryContent from "components/History/ContentItem/GenericContentItem/GenericHistoryContent";
+import GenericHistoryContent from "components/History/Content/GenericContentItem/GenericHistoryContent";
 import { InvocationStepProvider } from "components/providers";
 import LoadingSpan from "../LoadingSpan";
 
diff --git a/client/src/entry/analysis/index.js b/client/src/entry/analysis/index.js
index 8898b967012..f68c2772f21 100644
--- a/client/src/entry/analysis/index.js
+++ b/client/src/entry/analysis/index.js
@@ -5,7 +5,7 @@ import MvcHistoryPanel from "entry/panels/history-panel";
 import Page from "layout/page";
 
 // Vue adapter emulates current features of backbone history panel
-import { HistoryPanelProxy } from "components/History";
+import { HistoryPanelProxy } from "components/History/adapters/HistoryPanelProxy";
 import { isBetaHistoryOpen } from "components/History/adapters/betaToggle";
 
 addInitialization((Galaxy, { options = {} }) => {

From ec8c6f4aaec43c10d8c6d19f6cb0e1bc94e627ef Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 18 Feb 2022 23:39:51 -0500
Subject: [PATCH 64/95] Align collection operations appearance to history
 operations

---
 .../CollectionOperations.vue                  | 22 ++++++++--------
 .../CurrentCollection/CollectionPanel.vue     | 25 +++++++++++--------
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/client/src/components/History/CurrentCollection/CollectionOperations.vue b/client/src/components/History/CurrentCollection/CollectionOperations.vue
index 164ee348677..f00d5723c69 100644
--- a/client/src/components/History/CurrentCollection/CollectionOperations.vue
+++ b/client/src/components/History/CurrentCollection/CollectionOperations.vue
@@ -1,16 +1,14 @@
 <template>
-    <nav class="d-flex justify-content-end">
-        <b-button
-            v-if="isRoot"
-            class="mb-2 mx-3"
-            title="Download Collection"
-            size="sm"
-            variant="link"
-            :href="downloadUrl"
-            download>
-            <Icon icon="download" />
-        </b-button>
-    </nav>
+    <section>
+        <nav v-if="isRoot" class="content-operations d-flex justify-content-between bg-secondary">
+            <b-button-group>
+                <b-button title="Download Collection" size="sm" variant="link" download :href="downloadUrl">
+                    <Icon class="mr-1" icon="download" />
+                    <span>Download</span>
+                </b-button>
+            </b-button-group>
+        </nav>
+    </section>
 </template>
 
 <script>
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index 77ac55b77fe..db02b18711b 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -8,15 +8,18 @@
             v-slot="{ isExpanded, setExpanded }">
             <Layout class="dataset-collection-panel">
                 <template v-slot:navigation>
-                    <Navigation :history="history" :selected-collections="selectedCollections" v-on="$listeners" />
+                    <CollectionNavigation
+                        :history="history"
+                        :selected-collections="selectedCollections"
+                        v-on="$listeners" />
                 </template>
 
                 <template v-slot:listcontrols>
-                    <Operations :collection="dsc" :is-root="isRoot" />
+                    <CollectionOperations :collection="dsc" :is-root="isRoot" />
                 </template>
 
                 <template v-slot:details>
-                    <Details :dsc="dsc" :writeable="writeable" @update:dsc="updateDsc(dsc, $event)" />
+                    <CollectionDetails :dsc="dsc" :writeable="writeable" @update:dsc="updateDsc(dsc, $event)" />
                 </template>
 
                 <template v-slot:listing>
@@ -48,20 +51,20 @@ import ContentItem from "components/History/Content/ContentItem";
 import ExpandedItems from "components/History/Content/ExpandedItems";
 import Listing from "components/History/Layout/Listing";
 import Layout from "components/History/Layout/Layout";
-import Navigation from "./CollectionNavigation";
-import Operations from "./CollectionOperations";
-import Details from "./CollectionDetails";
+import CollectionNavigation from "./CollectionNavigation";
+import CollectionOperations from "./CollectionOperations";
+import CollectionDetails from "./CollectionDetails";
 
 export default {
     components: {
-        UrlDataProvider,
-        Layout,
-        Navigation,
-        Details,
+        CollectionDetails,
+        CollectionNavigation,
+        CollectionOperations,
         ContentItem,
         ExpandedItems,
-        Operations,
+        Layout,
         Listing,
+        UrlDataProvider,
     },
     props: {
         history: { type: History, required: true },

From 8ec371aafa9b8feca62c48fdfdd0fc18abc59a96 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 19 Feb 2022 00:25:09 -0500
Subject: [PATCH 65/95] Fix event parsing to actual handlers in history index
 component

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

diff --git a/client/src/components/History/Index.vue b/client/src/components/History/Index.vue
index 9a69be404df..5e67015cecc 100644
--- a/client/src/components/History/Index.vue
+++ b/client/src/components/History/Index.vue
@@ -5,7 +5,7 @@
                 <CurrentHistory
                     v-if="!breadcrumbs.length"
                     :history="currentHistory"
-                    v-on="$listeners"
+                    v-on="handlers"
                     @viewCollection="onViewCollection">
                     <template v-slot:navigation>
                         <HistoryNavigation

From bb34eee6e8d899f92ff31f4e911b00c049a4ba29 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 19 Feb 2022 01:03:28 -0500
Subject: [PATCH 66/95] Update readme

---
 client/src/components/History/README.md | 41 ++++++++++---------------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/client/src/components/History/README.md b/client/src/components/History/README.md
index 54b736e99a6..f682dceb9c5 100644
--- a/client/src/components/History/README.md
+++ b/client/src/components/History/README.md
@@ -13,55 +13,46 @@ to interact with each other.
         <HistoryMenu />
     </slot:nav>
 
-
     <!-- if main history selected -->
     <CurrentHistory :history="history">
 
         <!-- Data providers do the heavy-lifting of mixing params, history, and 
         scroll position to deliver the content for the scroller -->
-
         <UrlDataProvider>
+            <HistoryNavigation />
             <HistoryDetails />
             <HistoryMessages />
-            <ContentOperations />
+            <HistoryOperations />
+
+            <!-- Uses a virtual scroller plugin to render all ContentItems and throttles the scrolling pace by limiting
+            the frequency and magnitude of offset changes. -->
             <Listing>
 
-                <!-- ContentItem is a dynamic component that becomes
-                either Dataset or DatasetCollection depending
-                on the props passed to it -->
-
+                <!-- The ContentItem renders a row in the list, showing the title, some attributes,
+                and basic operation buttons such as display and edit for either a dataset or a collection.
+                This component needs to be very efficient since it is re-rendered by the virtual scroller plugin. -->
                 (<ContentItem />)
-                    <Dataset />
-                    <!-- or -->
-                    <DatasetCollection />
 
+                    <!-- Is shown for datasets upon expansion, can be inefficent in comparison to the ContentItem component. -->
+                    <DatasetDetails />
             </Listing>
         </UrlDataProvider>
-
     </CurrentHistory>
 
-
     <!-- When a collection is selected for viewing, send in a 
     breadcrumbs list of collections the user has selected -->
-
     <CurrentCollection :selected-collections="breadcrumbs">
         <UrlDataProvider>
-            <CollectionNav />
-            <Details />
+            <CollectionNavigation />
+            <CollectionDetails />
+            <CollectionOperations />
+
+            <!-- As above, the same virtual scroller and ContentItem component is being used to render the elements. -->
             <Listing>
-
-                <!-- Subdataset and Subcollection are similar to the Dataset 
-                and DatasetCollection ContentItem components, but mostly 
-                read-only since they are part of the collection-->
-
                 (<ContentItem />)
-                    <Subdataset />
-                    <!-- or -->
-                    <Subcollection />
-
+                    <DatasetDetails />
             </Listing>
         </UrlDataProvider>
     </CurrentCollection>
-
 </Index>
 ```
\ No newline at end of file

From aff8e403ca96d5495e88263fafede41e83504e83 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 19 Feb 2022 01:42:42 -0500
Subject: [PATCH 67/95] Fix basic operation conditions, add tag handling

---
 .../History/Content/ContentItem.vue           |  25 ++-
 .../Content/Dataset/DatasetActions.vue        | 150 ++++++++++--------
 2 files changed, 96 insertions(+), 79 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 3716ac861eb..0780e7d914d 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -103,34 +103,31 @@ export default {
         },
         displayButtonTitle() {
             if (this.item.purged) {
-                return "Cannot display datasets removed from disk";
+                return "Cannot display datasets removed from disk.";
             }
-            if (this.state == "upload") {
-                return "This dataset must finish uploading before it can be viewed";
+            if (this.isUnavailable) {
+                return "This dataset is not yet viewable.";
             }
-            if (this.state == "new") {
-                return "This dataset is not yet viewable";
-            }
-            return "View data";
+            return "Display";
         },
         deleteButtonTitle() {
             return this.item.purged
-                ? "Dataset has been permanently deleted"
+                ? "This dataset has been permanently deleted."
                 : this.item.deleted
                 ? "Undelete"
                 : "Delete";
         },
         editButtonTitle() {
             if (this.item.deleted) {
-                return "Undelete dataset to edit attributes";
+                return "Undelete this dataset to edit attributes.";
             }
             if (this.item.purged) {
-                return "Cannot edit attributes of datasets removed from disk";
+                return "Cannot edit attributes of datasets removed from disk.";
             }
-            if (this.state == "upload" || this.state != "new") {
-                return "This dataset is not yet editable";
+            if (this.isUnavailable) {
+                return "This dataset is not yet editable.";
             }
-            return "Edit attributes";
+            return "Edit Attributes";
         },
         icon() {
             const stateIcon = CONTENTSTATE[this.state] && CONTENTSTATE[this.state].icon;
@@ -139,7 +136,7 @@ export default {
             }
         },
         isUnavailable() {
-            return this.item.purged || this.state == "upload" || this.state == "new";
+            return this.item.purged || ["upload", "new"].includes(this.state);
         },
     },
     methods: {
diff --git a/client/src/components/History/Content/Dataset/DatasetActions.vue b/client/src/components/History/Content/Dataset/DatasetActions.vue
index 0e4fe18e5f0..438265b9003 100644
--- a/client/src/components/History/Content/Dataset/DatasetActions.vue
+++ b/client/src/components/History/Content/Dataset/DatasetActions.vue
@@ -1,85 +1,99 @@
 <template>
-    <div class="mb-1 clearfix">
-        <div class="btn-group float-left">
-            <b-button v-if="showError" class="px-1" title="Error" size="sm" variant="link" @click.stop="onError">
-                <span class="fa fa-bug" />
-            </b-button>
-            <b-button
-                v-if="showDownloads"
-                class="px-1"
-                title="Download"
-                size="sm"
-                variant="link"
-                @click.stop="onDownload">
-                <span class="fa fa-save" />
-            </b-button>
-            <b-button
-                v-if="showDownloads"
-                class="px-1"
-                title="Copy link"
-                size="sm"
-                variant="link"
-                @click.stop="onCopyLink">
-                <span class="fa fa-link" />
-            </b-button>
-            <b-button
-                v-if="showInfo"
-                class="px-1"
-                title="Dataset details"
-                size="sm"
-                variant="link"
-                @click.stop="onInfo">
-                <span class="fa fa-info-circle" />
-            </b-button>
-            <b-button
-                v-if="showRerun"
-                class="px-1"
-                title="Run job again"
-                size="sm"
-                variant="link"
-                @click.stop="onRerun">
-                <span class="fa fa-redo" />
-            </b-button>
-            <b-button
-                v-if="showVisualizations"
-                class="px-1"
-                title="Visualize"
-                size="sm"
-                variant="link"
-                @click.stop="onVisualize">
-                <span class="fa fa-bar-chart-o" />
-            </b-button>
-            <b-button v-if="showRerun" class="px-1" title="Help" size="sm" variant="link" @click.stop="onRerun">
-                <span class="fa fa-question" />
-            </b-button>
+    <div class="mb-1">
+        <div class="clearfix">
+            <div class="btn-group float-left">
+                <b-button v-if="showError" class="px-1" title="Error" size="sm" variant="link" @click.stop="onError">
+                    <span class="fa fa-bug" />
+                </b-button>
+                <b-button
+                    v-if="showDownloads"
+                    class="px-1"
+                    title="Download"
+                    size="sm"
+                    variant="link"
+                    @click.stop="onDownload">
+                    <span class="fa fa-save" />
+                </b-button>
+                <b-button
+                    v-if="showDownloads"
+                    class="px-1"
+                    title="Copy Link"
+                    size="sm"
+                    variant="link"
+                    @click.stop="onCopyLink">
+                    <span class="fa fa-link" />
+                </b-button>
+                <b-button
+                    v-if="showInfo"
+                    class="px-1"
+                    title="Dataset Details"
+                    size="sm"
+                    variant="link"
+                    @click.stop="onInfo">
+                    <span class="fa fa-info-circle" />
+                </b-button>
+                <b-button
+                    v-if="showRerun"
+                    class="px-1"
+                    title="Run Job Again"
+                    size="sm"
+                    variant="link"
+                    @click.stop="onRerun">
+                    <span class="fa fa-redo" />
+                </b-button>
+                <b-button
+                    v-if="showVisualizations"
+                    class="px-1"
+                    title="Visualize"
+                    size="sm"
+                    variant="link"
+                    @click.stop="onVisualize">
+                    <span class="fa fa-bar-chart-o" />
+                </b-button>
+                <b-button v-if="showRerun" class="px-1" title="Help" size="sm" variant="link" @click.stop="onRerun">
+                    <span class="fa fa-question" />
+                </b-button>
+            </div>
+            <div class="btn-group float-right">
+                <b-button
+                    class="px-1"
+                    title="Edit Tags"
+                    size="sm"
+                    variant="link"
+                    :pressed="showTags"
+                    @click="onToggleTags">
+                    <span class="fa fa-tags" />
+                </b-button>
+            </div>
         </div>
-        <div class="btn-group float-right">
-            <b-button class="px-1" title="Edit tags" size="sm" variant="link" @click.stop="$emit('tags', item)">
-                <span class="fa fa-tags" />
-            </b-button>
-            <b-button
-                class="px-1"
-                title="Edit annotation"
-                size="sm"
-                variant="link"
-                @click.stop="$emit('annotation', item)">
-                <span class="fa fa-comment" />
-            </b-button>
+        <div v-if="showTags" class="mb-2">
+            <StatelessTags class="tags" v-model="tags" @input="onTags" />
         </div>
     </div>
 </template>
 
 <script>
+import { StatelessTags } from "components/Tags";
 import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
 import { prependPath } from "utils/redirect";
 import { copy as sendToClipboard } from "utils/clipboard";
 import { absPath } from "utils/redirect";
+import { updateContentFields } from "components/History/model/queries";
 
 export default {
     mixins: [legacyNavigationMixin],
+    components: {
+        StatelessTags,
+    },
     props: {
         item: { type: Object, required: true },
     },
+    data() {
+        return {
+            showTags: false,
+            tags: this.item.tags,
+        };
+    },
     computed: {
         downloadUrl() {
             return prependPath(`datasets/${this.item.id}/display?to_ext=${this.item.extension}`);
@@ -123,6 +137,12 @@ export default {
         onRerun() {
             this.backboneRoute(`root?job_id=${this.item.creating_job}`);
         },
+        onTags() {
+            updateContentFields(this.item, { tags: this.tags });
+        },
+        onToggleTags() {
+            this.showTags = !this.showTags;
+        },
         onVisualize() {
             const path = `visualizations?dataset_id=${this.item.id}`;
             const redirectParams = {

From e6296abf8f44942c2bfe876c1023de247c7ae883 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 19 Feb 2022 14:56:47 -0500
Subject: [PATCH 68/95] Allow using specific legacy navigation functions
 without mixin, handle display/edit in content item

---
 .../History/Content/ContentItem.vue           |  23 +++-
 .../History/CurrentHistory/HistoryPanel.vue   |  21 ----
 .../components/plugins/legacyNavigation.js    | 114 +++++++++---------
 3 files changed, 80 insertions(+), 78 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 0780e7d914d..8aea813dd0f 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -10,7 +10,7 @@
                         class="px-1"
                         size="sm"
                         variant="link"
-                        @click.stop="$emit('display', item)">
+                        @click.stop="onDisplay">
                         <span class="fa fa-eye" />
                     </b-button>
                     <b-button
@@ -20,7 +20,7 @@
                         title="Edit"
                         size="sm"
                         variant="link"
-                        @click.stop="$emit('edit', item)">
+                        @click.stop="onEdit">
                         <span class="fa fa-pencil" />
                     </b-button>
                     <b-button
@@ -75,8 +75,10 @@
 </template>
 
 <script>
+import { backboneRoute, useGalaxy, iframeRedirect } from "components/plugins/legacyNavigation";
 import DatasetDetails from "./Dataset/DatasetDetails";
 import CONTENTSTATE from "./contentState";
+
 export default {
     components: {
         DatasetDetails,
@@ -140,6 +142,23 @@ export default {
         },
     },
     methods: {
+        onDisplay() {
+            const id = this.item.id;
+            useGalaxy((Galaxy) => {
+                if (Galaxy.frame && Galaxy.frame.active) {
+                    Galaxy.frame.addDataset(id);
+                } else {
+                    iframeRedirect(`datasets/${id}/display/?preview=True`);
+                }
+            });
+        },
+        onEdit() {
+            if (this.item.collection_type) {
+                backboneRoute(`collection/edit/${this.item.id}`);
+            } else {
+                backboneRoute("datasets/edit", { dataset_id: this.item.id });
+            }
+        },
         onClick() {
             if (this.expandable) {
                 this.$emit("update:expanded", !this.expanded);
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 31d056f1e13..f4e4085670b 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -71,8 +71,6 @@
                                     @update:expanded="setExpanded(item, $event)"
                                     @update:selected="setSelected(item, $event)"
                                     @drilldown="$emit('viewCollection', item)"
-                                    @display="onDisplay"
-                                    @edit="onEdit"
                                     @delete="onDelete"
                                     @undelete="onUndelete"
                                     @unhide="onUnhide" />
@@ -90,7 +88,6 @@
 </template>
 
 <script>
-import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
 import { UrlDataProvider } from "components/providers/UrlDataProvider";
 import LoadingSpan from "components/LoadingSpan";
 import ContentItem from "components/History/Content/ContentItem";
@@ -108,7 +105,6 @@ import HistoryMenu from "./HistoryMenu";
 import HistoryMessages from "./HistoryMessages";
 
 export default {
-    mixins: [legacyNavigationMixin],
     components: {
         LoadingSpan,
         UrlDataProvider,
@@ -169,23 +165,6 @@ export default {
                 this.hiddenItems[item.hid] = true;
             });
         },
-        onDisplay(item) {
-            const id = item.id;
-            this.useGalaxy((Galaxy) => {
-                if (Galaxy.frame && Galaxy.frame.active) {
-                    Galaxy.frame.addDataset(id);
-                } else {
-                    this.iframeRedirect(`datasets/${id}/display/?preview=True`);
-                }
-            });
-        },
-        onEdit(item) {
-            if (item.collection_type) {
-                this.backboneRoute(`collection/edit/${item.id}`);
-            } else {
-                this.backboneRoute("datasets/edit", { dataset_id: item.id });
-            }
-        },
         onDelete(item) {
             this.hiddenItems[item.hid] = true;
             deleteContent(item);
diff --git a/client/src/components/plugins/legacyNavigation.js b/client/src/components/plugins/legacyNavigation.js
index a0c64f920c6..0efac6066b1 100644
--- a/client/src/components/plugins/legacyNavigation.js
+++ b/client/src/components/plugins/legacyNavigation.js
@@ -7,67 +7,71 @@ import { getGalaxyInstance } from "app";
 import { redirectToUrl, prependPath } from "utils/redirect";
 import _l from "utils/localization";
 
+// wrapper for backbone router
+export function backboneRoute(path, ...args) {
+    try {
+        getGalaxyInstance().router.push(path, ...args);
+    } catch (err) {
+        console.warn("Failed galaxy route change", err, ...arguments);
+        throw err;
+    }
+}
+
+// wrapper for scratchbook/multiview feature
+export function iframeAdd({ path, title = "Galaxy", tryIframe = true }) {
+    const Galaxy = getGalaxyInstance();
+    if (Galaxy.frame && Galaxy.frame.active) {
+        Galaxy.frame.add({
+            url: prependPath(path),
+            title: _l(title),
+        });
+        return true;
+    } else if (tryIframe) {
+        return iframeRedirect(path);
+    } else {
+        return false;
+    }
+}
+
+// straight ifrme redirect
+export function iframeRedirect(path, target = "galaxy_main") {
+    try {
+        const targetFrame = window.frames[target];
+        if (!targetFrame) {
+            throw new Error(`Requested frame ${target} doesn't exist`);
+        }
+        targetFrame.location = prependPath(path);
+        return true;
+    } catch (err) {
+        console.warn("Failed iframe redirect", err, ...arguments);
+        throw err;
+    }
+}
+
+// straight window.location
+export function redirect(path) {
+    console.log("legacyNavigation: go", path);
+    redirectToUrl(prependPath(path));
+}
+
+// arbitrary Galaxy wrapper
+export function useGalaxy(fn) {
+    return fn(getGalaxyInstance());
+}
+
+// wrapper for navigation to be used as mixin
 export const legacyNavigationMixin = {
     methods: {
-        // straight window.location
-        redirect(path) {
-            console.log("legacyNavigation: go", path);
-            redirectToUrl(prependPath(path));
-        },
-
-        // weird wrapper for Galaxy's wierd frame navigation
-        // checks for existing galaxy frame reference, uses that or
-        // loads a brand new document in the iframe
-        iframeAdd({ path, title = "Galaxy", tryIframe = true }) {
-            const Galaxy = getGalaxyInstance();
-            if (Galaxy.frame && Galaxy.frame.active) {
-                Galaxy.frame.add({
-                    url: prependPath(path),
-                    title: _l(title),
-                });
-                return true;
-            } else if (tryIframe) {
-                return this.iframeRedirect(path);
-            } else {
-                return false;
-            }
-        },
-
-        // straight ifrme redirect
-        iframeRedirect(path, target = "galaxy_main") {
-            try {
-                const targetFrame = window.frames[target];
-                if (!targetFrame) {
-                    throw new Error(`Requested frame ${target} doesn't exist`);
-                }
-                targetFrame.location = prependPath(path);
-                return true;
-            } catch (err) {
-                console.warn("Failed iframe redirect", err, ...arguments);
-                throw err;
-            }
-        },
-
-        // galaxy router, wrapper for backbone router
-        backboneRoute(path, ...args) {
-            try {
-                getGalaxyInstance().router.push(path, ...args);
-            } catch (err) {
-                console.warn("Failed galaxy route change", err, ...arguments);
-                throw err;
-            }
-        },
-
-        // arbitrary Galaxy wrapper
-        useGalaxy(fn) {
-            return fn(getGalaxyInstance());
-        },
-
-        // prepend server prefix from configs to a url
+        redirect,
+        iframeAdd,
+        iframeRedirect,
+        backboneRoute,
+        useGalaxy,
         prependPath,
     },
 };
 
+// wrapper for navigation to be used as plugin
 export const legacyNavigationPlugin = {
     install(Vue) {
         Vue.mixin(legacyNavigationMixin);

From 03a74d090c2b6d706a406ccfa28299ee5304475a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 20 Feb 2022 01:45:25 -0500
Subject: [PATCH 69/95] Handle horizontal scrolling by dispatching regular
 event, fixes scrolling in peeks

---
 .../src/components/History/Layout/Listing.vue | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/client/src/components/History/Layout/Listing.vue b/client/src/components/History/Layout/Listing.vue
index fddf78f27ef..ff30aafc07a 100644
--- a/client/src/components/History/Layout/Listing.vue
+++ b/client/src/components/History/Layout/Listing.vue
@@ -79,11 +79,22 @@ export default {
             }
         },
         onScroll(event) {
-            const listing = this.$refs["listing"];
-            const deltaMax = this.deltaMax;
-            const deltaY = Math.max(Math.min(event.deltaY, deltaMax), -deltaMax);
-            this.offset = Math.max(0, listing.getOffset() + deltaY);
-            listing.scrollToOffset(this.offset);
+            if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+                // handle vertical scrolling with virtual scroller
+                const listing = this.$refs.listing;
+                const deltaMax = this.deltaMax;
+                const deltaY = Math.max(Math.min(event.deltaY, deltaMax), -deltaMax);
+                this.offset = Math.max(0, listing.getOffset() + deltaY);
+                this.$refs.listing.scrollToOffset(this.offset);
+            } else {
+                // dispatch horizontal scrolling as regular event
+                var wheelEvent = new WheelEvent("wheel", {
+                    deltaX: event.deltaX,
+                    bubbles: true,
+                    cancelable: false,
+                });
+                event.target.dispatchEvent(wheelEvent);
+            }
         },
         /*onScroll(event) {
             const itemCount = this.items.length;

From 157e9de9d71810981917eb321ffb7f171466c0dc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 20 Feb 2022 23:37:12 -0500
Subject: [PATCH 70/95] Add drag/drop from new history to tool form inputs

---
 client/src/components/History/Content/ContentItem.vue | 7 ++++++-
 client/src/components/History/Layout/Listing.vue      | 2 ++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 8aea813dd0f..ef76ee9da8b 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="['content-item m-1 p-0 rounded', clsStatus]">
+    <div :class="['content-item m-1 p-0 rounded', clsStatus]" draggable @dragstart="onDragStart">
         <div class="p-1 cursor-pointer" @click.stop="onClick">
             <div class="clearfix overflow-hidden">
                 <div class="btn-group float-right">
@@ -142,6 +142,11 @@ export default {
         },
     },
     methods: {
+        onDragStart(evt) {
+            evt.dataTransfer.dropEffect = "move";
+            evt.dataTransfer.effectAllowed = "move";
+            evt.dataTransfer.setData("text", JSON.stringify([this.item]));
+        },
         onDisplay() {
             const id = this.item.id;
             useGalaxy((Galaxy) => {
diff --git a/client/src/components/History/Layout/Listing.vue b/client/src/components/History/Layout/Listing.vue
index ff30aafc07a..4c224fc5735 100644
--- a/client/src/components/History/Layout/Listing.vue
+++ b/client/src/components/History/Layout/Listing.vue
@@ -79,6 +79,8 @@ export default {
             }
         },
         onScroll(event) {
+            // this avoids diagonal scrolling, we either scroll left/right or top/down
+            // both events are throttled and the default handler has been prevented.
             if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
                 // handle vertical scrolling with virtual scroller
                 const listing = this.$refs.listing;

From 885fe156c2cc0c1354fd84bd990787060a6ecde3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 21 Feb 2022 01:08:11 -0500
Subject: [PATCH 71/95] Disable scroll throttling for now, browser
 compatibility of throttling currently works only good for safari

---
 client/src/components/History/Layout/Listing.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/client/src/components/History/Layout/Listing.vue b/client/src/components/History/Layout/Listing.vue
index 4c224fc5735..ee17e30044e 100644
--- a/client/src/components/History/Layout/Listing.vue
+++ b/client/src/components/History/Layout/Listing.vue
@@ -1,9 +1,5 @@
 <template>
-    <div
-        class="history-listing"
-        @scroll.prevent="onScrollThrottle"
-        @wheel.prevent="onScrollThrottle"
-        @touchmove.prevent="onScrollThrottle">
+    <div class="history-listing">
         <virtual-list ref="listing" class="listing" :data-key="itemKey" :data-sources="getItems" :data-component="{}">
             <template v-slot:item="{ item }">
                 <slot name="history-item" :item="item" />

From 07a731b3b1a64ceda5847ed5141b4a15ffd8297e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 21 Feb 2022 13:15:00 -0500
Subject: [PATCH 72/95] Fix linting issues, use object.id for collections
 drilldown requests, rename to hideSelection to avoid confusion with actually
 hidden datasets

---
 .../components/History/Content/ContentItem.vue |  1 +
 .../GenericHistoryContent.vue                  |  6 +-----
 .../CurrentCollection/CollectionDetails.vue    |  1 -
 .../CurrentCollection/CollectionNavigation.vue |  1 +
 .../CurrentCollection/CollectionPanel.vue      | 12 +++++-------
 .../History/CurrentHistory/HistoryPanel.vue    | 18 +++++++++---------
 client/src/components/History/Index.vue        |  1 -
 .../src/components/History/Layout/Details.vue  |  4 ++--
 .../src/components/History/Layout/Listing.vue  |  2 --
 client/src/components/History/README.md        | 15 +++++++--------
 client/src/components/Tags/StatelessTags.vue   |  2 +-
 lib/galaxy/schema/schema.py                    |  2 +-
 12 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index ef76ee9da8b..4dbf588f018 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -136,6 +136,7 @@ export default {
             if (stateIcon) {
                 return `fa fa-${stateIcon}`;
             }
+            return null;
         },
         isUnavailable() {
             return this.item.purged || ["upload", "new"].includes(this.state);
diff --git a/client/src/components/History/Content/GenericContentItem/GenericHistoryContent.vue b/client/src/components/History/Content/GenericContentItem/GenericHistoryContent.vue
index 1cb46443882..3b32cb2d44d 100644
--- a/client/src/components/History/Content/GenericContentItem/GenericHistoryContent.vue
+++ b/client/src/components/History/Content/GenericContentItem/GenericHistoryContent.vue
@@ -9,7 +9,6 @@
 
 <script>
 import { DatasetProvider, DatasetCollectionProvider } from "components/providers";
-import { STATES } from "components/History/model";
 import LoadingSpan from "components/LoadingSpan";
 
 export default {
@@ -28,11 +27,8 @@ export default {
             return null; // { hdca: "DatasetCollectionUIWrapper" }[this.data_item.src];
         },
         providerComponent() {
-            return null; // { hda: "DatasetProvider", hdca: "DatasetCollectionProvider" }[this.data_item.src];
+            return { hda: "DatasetProvider", hdca: "DatasetCollectionProvider" }[this.data_item.src];
         },
     },
-    provide: {
-        STATES,
-    },
 };
 </script>
diff --git a/client/src/components/History/CurrentCollection/CollectionDetails.vue b/client/src/components/History/CurrentCollection/CollectionDetails.vue
index 0c7ec58da2b..96d6d81f2c8 100644
--- a/client/src/components/History/CurrentCollection/CollectionDetails.vue
+++ b/client/src/components/History/CurrentCollection/CollectionDetails.vue
@@ -18,7 +18,6 @@
 </template>
 
 <script>
-import { DatasetCollection } from "components/History/model";
 import Details from "components/History/Layout/Details";
 
 export default {
diff --git a/client/src/components/History/CurrentCollection/CollectionNavigation.vue b/client/src/components/History/CurrentCollection/CollectionNavigation.vue
index 181756fb1ff..c14b68d684a 100644
--- a/client/src/components/History/CurrentCollection/CollectionNavigation.vue
+++ b/client/src/components/History/CurrentCollection/CollectionNavigation.vue
@@ -21,6 +21,7 @@ export default {
                 const last = this.selectedCollections[length - 2];
                 return last.name || last.element_identifier;
             }
+            return null;
         },
     },
     methods: {
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index db02b18711b..fba00f3d154 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -2,10 +2,7 @@
 
 <template>
     <UrlDataProvider v-if="dsc" :key="dsc.id" :url="url" v-slot="{ result: payload }">
-        <ExpandedItems
-            :scope-key="dsc.id"
-            :get-item-key="(item) => item.element_index"
-            v-slot="{ isExpanded, setExpanded }">
+        <ExpandedItems :scope-key="dsc.id" :get-item-key="(item) => item.id" v-slot="{ isExpanded, setExpanded }">
             <Layout class="dataset-collection-panel">
                 <template v-slot:navigation>
                     <CollectionNavigation
@@ -24,7 +21,7 @@
 
                 <template v-slot:listing>
                     <Listing item-key="element_index" :page-size="pageSize" :payload="payload" @scroll="onScroll">
-                        <template v-slot:history-item="{ item, index }">
+                        <template v-slot:history-item="{ item }">
                             <ContentItem
                                 :item="item"
                                 :id="item.element_index"
@@ -45,7 +42,7 @@
 
 <script>
 import { UrlDataProvider } from "components/providers/UrlDataProvider";
-import { DatasetCollection, History } from "components/History/model";
+import { History } from "components/History/model";
 import { updateContentFields } from "components/History/model/queries";
 import ContentItem from "components/History/Content/ContentItem";
 import ExpandedItems from "components/History/Content/ExpandedItems";
@@ -90,7 +87,8 @@ export default {
             return this.selectedCollections[0];
         },
         url() {
-            return `api/dataset_collections/${this.rootCollection.id}/contents/${this.dsc.id}`;
+            const collectionId = this.dsc.object ? this.dsc.object.id : this.dsc.id;
+            return `api/dataset_collections/${this.rootCollection.id}/contents/${collectionId}`;
         },
     },
     methods: {
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index f4e4085670b..ff5255dca65 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -41,7 +41,7 @@
                             @update:content-selection="selectItems"
                             @update:show-selection="setShowSelection"
                             @reset-selection="resetSelection"
-                            @hide-selection="onHiddenItems"
+                            @hide-selection="onhideSelection"
                             @select-all="selectItems(payload)"
                             @collapse-all="collapseAll" />
                     </template>
@@ -59,7 +59,7 @@
                             @scroll="onScroll">
                             <template v-slot:history-item="{ item }">
                                 <ContentItem
-                                    v-if="!hiddenItems[item.hid]"
+                                    v-if="!hideSelection[item.hid]"
                                     :item="item"
                                     :id="item.hid"
                                     :name="item.name"
@@ -125,7 +125,7 @@ export default {
     },
     data() {
         return {
-            hiddenItems: {},
+            hideSelection: {},
             topIndex: 0,
             pageSize: 2000,
             params: {},
@@ -133,7 +133,7 @@ export default {
     },
     watch: {
         queryKey() {
-            this.hiddenItems = {};
+            this.hideSelection = {};
             this.topIndex = 0;
         },
     },
@@ -160,21 +160,21 @@ export default {
         onScroll(newHid) {
             this.topIndex = newHid;
         },
-        onHiddenItems(selectedItems) {
+        onhideSelection(selectedItems) {
             selectedItems.forEach((item) => {
-                this.hiddenItems[item.hid] = true;
+                this.hideSelection[item.hid] = true;
             });
         },
         onDelete(item) {
-            this.hiddenItems[item.hid] = true;
+            this.hideSelection[item.hid] = true;
             deleteContent(item);
         },
         onUndelete(item) {
-            this.hiddenItems[item.hid] = true;
+            this.hideSelection[item.hid] = true;
             updateContentFields(item, { deleted: false });
         },
         onUnhide(item) {
-            this.hiddenItems[item.hid] = true;
+            this.hideSelection[item.hid] = true;
             updateContentFields(item, { visible: true });
         },
     },
diff --git a/client/src/components/History/Index.vue b/client/src/components/History/Index.vue
index 5e67015cecc..7bb6fcf239b 100644
--- a/client/src/components/History/Index.vue
+++ b/client/src/components/History/Index.vue
@@ -34,7 +34,6 @@
 <script>
 import CurrentUser from "components/providers/CurrentUser";
 import UserHistories from "components/providers/UserHistories";
-import { History } from "./model";
 import HistoryNavigation from "./CurrentHistory/HistoryNavigation";
 import CurrentHistory from "./CurrentHistory/HistoryPanel";
 import CurrentCollection from "./CurrentCollection/CollectionPanel";
diff --git a/client/src/components/History/Layout/Details.vue b/client/src/components/History/Layout/Details.vue
index 3b4f9ac76a2..873b9d1e030 100644
--- a/client/src/components/History/Layout/Details.vue
+++ b/client/src/components/History/Layout/Details.vue
@@ -16,7 +16,7 @@
         <!-- display annotation, tags -->
         <div v-if="!editing">
             <div v-if="annotation" class="mt-2">{{ annotation }}</div>
-            <StatelessTags class="tags mt-3" :value="tags" :disabled="true" />
+            <StatelessTags v-if="tags" class="tags mt-3" :value="tags" :disabled="true" />
         </div>
 
         <!-- edit form, change title, annotation, or tags -->
@@ -36,7 +36,7 @@
                 trim
                 max-rows="4"
                 data-description="annotation input" />
-            <StatelessTags class="mb-3 tags" v-model="localProps.tags" />
+            <StatelessTags v-if="localProps.tags" class="mb-3 tags" v-model="localProps.tags" />
         </div>
         <nav class="edit-controls">
             <template v-if="editing">
diff --git a/client/src/components/History/Layout/Listing.vue b/client/src/components/History/Layout/Listing.vue
index ee17e30044e..554a5323e02 100644
--- a/client/src/components/History/Layout/Listing.vue
+++ b/client/src/components/History/Layout/Listing.vue
@@ -10,11 +10,9 @@
 <script>
 import VirtualList from "vue-virtual-scroll-list";
 import { reverse, throttle } from "lodash";
-import LoadingSpan from "components/LoadingSpan";
 
 export default {
     components: {
-        LoadingSpan,
         VirtualList,
     },
     props: {
diff --git a/client/src/components/History/README.md b/client/src/components/History/README.md
index f682dceb9c5..cd7f875fad9 100644
--- a/client/src/components/History/README.md
+++ b/client/src/components/History/README.md
@@ -4,18 +4,17 @@ to interact with each other.
 
 ```html static
 <Index :history="history">
-    
-    <!-- for the right-hand side history we show some
-    optional nav elements, can be ommitted for histories
-    shown in multi-history view -->
-    <slot:nav>
-        <HistorySelector />
-        <HistoryMenu />
-    </slot:nav>
 
     <!-- if main history selected -->
     <CurrentHistory :history="history">
 
+        <!-- for the right-hand side history we show some
+        optional nav elements -->
+        <slot:nav>
+            <HistorySelector />
+            <HistoryMenu />
+        </slot:nav>
+
         <!-- Data providers do the heavy-lifting of mixing params, history, and 
         scroll position to deliver the content for the scroller -->
         <UrlDataProvider>
diff --git a/client/src/components/Tags/StatelessTags.vue b/client/src/components/Tags/StatelessTags.vue
index 110681d40cb..5e33fe49d84 100644
--- a/client/src/components/Tags/StatelessTags.vue
+++ b/client/src/components/Tags/StatelessTags.vue
@@ -49,7 +49,7 @@ export default {
     },
     data() {
         // initialize toggle value
-        const isClosed = this.useToggleLink && this.value.length > this.maxVisibleTags;
+        const isClosed = this.useToggleLink && this.value && this.length > this.maxVisibleTags;
 
         return {
             tagText: "",
diff --git a/lib/galaxy/schema/schema.py b/lib/galaxy/schema/schema.py
index f16a1123cd4..3a22ddf5579 100644
--- a/lib/galaxy/schema/schema.py
+++ b/lib/galaxy/schema/schema.py
@@ -9,8 +9,8 @@ from typing import (
     Dict,
     List,
     Optional,
-    Union,
     Set,
+    Union,
 )
 
 from pydantic import (

From 315bd7b25d02b83d74339d8d2ede3786a1bf8dcc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 23 Feb 2022 14:29:43 -0500
Subject: [PATCH 73/95] Revise generic content item handling, prep

---
 .../DatasetCollectionContents.vue             | 35 ---------
 .../DatasetCollectionUIWrapper.test.js        | 59 ---------------
 .../DatasetCollectionUIWrapper.vue            | 71 ------------------
 .../DatasetUIWrapper.test.js                  | 51 -------------
 .../GenericContentItem/DatasetUIWrapper.vue   | 54 --------------
 .../GenericHistoryContent.vue                 | 34 ---------
 .../History/Content/GenericItem.vue           | 72 +++++++++++++++++++
 .../components/JobInformation/JobOutputs.vue  | 10 ++-
 .../JobParameters/JobParametersArrayValue.vue | 13 ++--
 .../WorkflowInvocationDetails.vue             | 12 ++--
 .../WorkflowInvocationStep.vue                | 28 ++++----
 11 files changed, 107 insertions(+), 332 deletions(-)
 delete mode 100644 client/src/components/History/Content/GenericContentItem/DatasetCollectionContents.vue
 delete mode 100644 client/src/components/History/Content/GenericContentItem/DatasetCollectionUIWrapper.test.js
 delete mode 100644 client/src/components/History/Content/GenericContentItem/DatasetCollectionUIWrapper.vue
 delete mode 100644 client/src/components/History/Content/GenericContentItem/DatasetUIWrapper.test.js
 delete mode 100644 client/src/components/History/Content/GenericContentItem/DatasetUIWrapper.vue
 delete mode 100644 client/src/components/History/Content/GenericContentItem/GenericHistoryContent.vue
 create mode 100644 client/src/components/History/Content/GenericItem.vue

diff --git a/client/src/components/History/Content/GenericContentItem/DatasetCollectionContents.vue b/client/src/components/History/Content/GenericContentItem/DatasetCollectionContents.vue
deleted file mode 100644
index 9f1ee7dbf48..00000000000
--- a/client/src/components/History/Content/GenericContentItem/DatasetCollectionContents.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <div>
-        <div v-for="contentItem in collectionContents" :index="1" :key="contentItem.id" style="margin-left: 2em">
-            <DatasetProvider
-                v-if="contentItem.element_type === 'hda'"
-                :id="contentItem.object.id"
-                v-slot="{ result: item, loading }">
-                <div>
-                    <loading-span v-if="loading" message="Loading datasets" />
-                    <div v-else :item="item" :element_identifier="contentItem.element_identifier"></div>
-                </div>
-            </DatasetProvider>
-            <DatasetCollectionUIWrapper
-                v-if="contentItem.element_type === 'dataset_collection'"
-                :item="contentItem"
-                :element_count="collectionContents.length + 1">
-            </DatasetCollectionUIWrapper>
-        </div>
-    </div>
-</template>
-<script>
-import { DatasetProvider } from "components/providers";
-import LoadingSpan from "components/LoadingSpan";
-
-export default {
-    components: {
-        DatasetProvider,
-        DatasetCollectionUIWrapper: () => import("./DatasetCollectionUIWrapper"),
-        LoadingSpan,
-    },
-    props: {
-        collectionContents: { type: Array, required: true },
-    },
-};
-</script>
diff --git a/client/src/components/History/Content/GenericContentItem/DatasetCollectionUIWrapper.test.js b/client/src/components/History/Content/GenericContentItem/DatasetCollectionUIWrapper.test.js
deleted file mode 100644
index 450fd39fe90..00000000000
--- a/client/src/components/History/Content/GenericContentItem/DatasetCollectionUIWrapper.test.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import DatasetCollectionUIWrapper from "./DatasetCollectionUIWrapper";
-import DscUI from "components/History/ContentItem/DatasetCollection/DscUI";
-import { shallowMount } from "@vue/test-utils";
-import datasetCollectionRaw from "components/providers/test/json/DatasetCollection.json";
-import datasetCollectionContent from "components/providers/test/json/DatasetCollection.nested.json";
-
-describe("DatasetUIWrapper.vue with Dataset", () => {
-    let wrapper;
-    let propsData;
-    let onHide;
-    let onUnhide;
-    let onDelete;
-    let onUndelete;
-
-    beforeEach(async () => {
-        propsData = {
-            item: datasetCollectionRaw,
-        };
-        onHide = jest.spyOn(DatasetCollectionUIWrapper.methods, "onHide").mockImplementation();
-        onUnhide = jest.spyOn(DatasetCollectionUIWrapper.methods, "onUnhide").mockImplementation();
-        onDelete = jest.spyOn(DatasetCollectionUIWrapper.methods, "onDelete").mockImplementation();
-        onUndelete = jest.spyOn(DatasetCollectionUIWrapper.methods, "onUndelete").mockImplementation();
-        wrapper = shallowMount(DatasetCollectionUIWrapper, {
-            propsData,
-        });
-    });
-
-    it("loads DscUI component", async () => {
-        expect(wrapper.findComponent(DscUI).exists()).toBeTruthy();
-    });
-
-    it("reacts to all emittted events", async () => {
-        expect(onHide).not.toHaveBeenCalled();
-        expect(onUnhide).not.toHaveBeenCalled();
-        expect(onDelete).not.toHaveBeenCalled();
-        expect(onUndelete).not.toHaveBeenCalled();
-        wrapper.findComponent(DscUI).vm.$emit("hide");
-        expect(onHide).toHaveBeenCalled();
-        wrapper.findComponent(DscUI).vm.$emit("unhide");
-        expect(onUnhide).toHaveBeenCalled();
-        wrapper.findComponent(DscUI).vm.$emit("delete");
-        expect(onDelete).toHaveBeenCalled();
-        wrapper.findComponent(DscUI).vm.$emit("undelete");
-        expect(onUndelete).toHaveBeenCalled();
-    });
-    it("creates DatasetCollection", async () => {
-        const datasetCollection = wrapper.vm.datasetCollection;
-        expect(datasetCollection.collectionType).toBe("list of pairs");
-    });
-    it("manages collection expansion", async () => {
-        expect(wrapper.vm.expand).toBeFalsy();
-        wrapper.findComponent(DscUI).vm.$emit("viewCollection", wrapper.vm.datasetCollection);
-        expect(wrapper.vm.expand).toBeTruthy();
-    });
-    it("build dsc from collection content", async () => {
-        await wrapper.setProps({ item: datasetCollectionContent });
-        expect(wrapper.vm.datasetCollection.name).toBe(datasetCollectionContent.element_identifier);
-    });
-});
diff --git a/client/src/components/History/Content/GenericContentItem/DatasetCollectionUIWrapper.vue b/client/src/components/History/Content/GenericContentItem/DatasetCollectionUIWrapper.vue
deleted file mode 100644
index 62c67eeb767..00000000000
--- a/client/src/components/History/Content/GenericContentItem/DatasetCollectionUIWrapper.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-    <div>
-        <div
-            v-if="datasetCollection"
-            v-bind="$attrs"
-            v-on="$listeners"
-            :dsc="datasetCollection"
-            :show-tags="true"
-            @viewCollection="toggleExpand"
-            @hide="onHide(datasetCollection)"
-            @unhide="onUnhide(datasetCollection)"
-            @delete="onDelete(datasetCollection, $event)"
-            @undelete="onUndelete(datasetCollection)" />
-        <DatasetCollectionContentProvider v-if="expand" :id="datasetCollection.contents_url" v-slot="{ item, loading }">
-            <b-spinner v-if="loading">Loading Dataset Collection...</b-spinner>
-            <DatasetCollectionContents v-else :collection-contents="item" />
-        </DatasetCollectionContentProvider>
-    </div>
-</template>
-<script>
-import { deleteDatasetCollection, updateContentFields } from "../../model/queries";
-import { DatasetCollection } from "../../model/DatasetCollection";
-import { DatasetCollectionContentProvider } from "components/providers";
-import DatasetCollectionContents from "./DatasetCollectionContents";
-
-export default {
-    components: {
-        DatasetCollectionContentProvider,
-        DatasetCollectionContents,
-    },
-    props: {
-        item: { type: Object, required: true },
-        element_count: { type: Number, required: false },
-    },
-    data() {
-        return { expand: false };
-    },
-    computed: {
-        datasetCollection() {
-            var rawObject = this.item;
-            if (rawObject.model_class === "DatasetCollectionElement") {
-                rawObject = this.item.object;
-                rawObject.name = this.item.element_identifier;
-                rawObject.contents_url = this.item.contents_url || rawObject.contents_url;
-                rawObject.element_count = this.element_count;
-                rawObject.populated_state = "ok";
-            }
-            return new DatasetCollection(rawObject);
-        },
-    },
-    methods: {
-        toggleExpand() {
-            this.expand = !this.expand;
-        },
-        async onDelete(collection, flags = {}) {
-            const { recursive = false, purge = false } = flags;
-            await deleteDatasetCollection(collection, recursive, purge);
-        },
-
-        async onUndelete(collection) {
-            await updateContentFields(collection, { deleted: false });
-        },
-        async onHide(collection) {
-            await updateContentFields(collection, { visible: false });
-        },
-        async onUnhide(collection) {
-            await updateContentFields(collection, { visible: true });
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/Content/GenericContentItem/DatasetUIWrapper.test.js b/client/src/components/History/Content/GenericContentItem/DatasetUIWrapper.test.js
deleted file mode 100644
index c5700394c5e..00000000000
--- a/client/src/components/History/Content/GenericContentItem/DatasetUIWrapper.test.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import DatasetUIWrapper from "./DatasetUIWrapper";
-import DatasetUI from "components/History/ContentItem/Dataset/DatasetUI";
-import { shallowMount } from "@vue/test-utils";
-import raw from "components/providers/test/json/Dataset.json";
-
-describe("DatasetUIWrapper.vue with Dataset", () => {
-    let wrapper;
-    let propsData;
-    let onDelete;
-    let onUnhide;
-    let onUndelete;
-    let updateDataset;
-
-    beforeEach(async () => {
-        propsData = {
-            item: raw,
-        };
-        onDelete = jest.spyOn(DatasetUIWrapper.methods, "onDelete").mockImplementation();
-        onUnhide = jest.spyOn(DatasetUIWrapper.methods, "onUnhide").mockImplementation();
-        onUndelete = jest.spyOn(DatasetUIWrapper.methods, "onUndelete").mockImplementation();
-        updateDataset = jest.spyOn(DatasetUIWrapper.methods, "onUpdate").mockImplementation();
-        wrapper = shallowMount(DatasetUIWrapper, {
-            propsData,
-        });
-    });
-
-    it("loads DatasetUI component", async () => {
-        expect(wrapper.findComponent(DatasetUI).exists()).toBeTruthy();
-    });
-
-    it("reacts to all emittted events", async () => {
-        expect(onDelete).not.toHaveBeenCalled();
-        expect(onUnhide).not.toHaveBeenCalled();
-        expect(onUndelete).not.toHaveBeenCalled();
-        expect(updateDataset).not.toHaveBeenCalled();
-        wrapper.findComponent(DatasetUI).vm.$emit("delete");
-        expect(onDelete).toHaveBeenCalled();
-        wrapper.findComponent(DatasetUI).vm.$emit("undelete");
-        expect(onUndelete).toHaveBeenCalled();
-        wrapper.findComponent(DatasetUI).vm.$emit("unhide");
-        expect(onUnhide).toHaveBeenCalled();
-        wrapper.findComponent(DatasetUI).vm.$emit("update");
-        expect(updateDataset).toHaveBeenCalled();
-    });
-    it("handles element identifier", async () => {
-        expect(wrapper.vm.dataset.canEditName).toBeTruthy();
-        await wrapper.setProps({ element_identifier: "a cool identifier" });
-        expect(wrapper.vm.dataset.title).toBe("a cool identifier");
-        expect(wrapper.vm.dataset.canEditName).toBeFalsy();
-    });
-});
diff --git a/client/src/components/History/Content/GenericContentItem/DatasetUIWrapper.vue b/client/src/components/History/Content/GenericContentItem/DatasetUIWrapper.vue
deleted file mode 100644
index bc195770945..00000000000
--- a/client/src/components/History/Content/GenericContentItem/DatasetUIWrapper.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<!-- controls display of DisplayUI and delegates modifications -->
-<template>
-    <div
-        v-if="dataset"
-        v-bind="$attrs"
-        v-on="$listeners"
-        @update:expanded="expand"
-        :expanded="expanded"
-        :dataset="dataset"
-        :show-tags="true"
-        @delete="onDelete"
-        @undelete="onUndelete"
-        @unhide="onUnhide"
-        @update="onUpdate"></div>
-</template>
-<script>
-import { Dataset } from "../../model";
-import { deleteContent, updateContentFields } from "../../model/queries";
-
-export default {
-    props: {
-        item: { type: Object, required: true },
-        element_identifier: { type: String, required: false, default: "" },
-    },
-    computed: {
-        dataset() {
-            const element = { ...this.item, element_identifier: this.element_identifier };
-            return new Dataset(element);
-        },
-    },
-    data() {
-        return {
-            expanded: false,
-        };
-    },
-    methods: {
-        expand(event) {
-            this.expanded = !this.expanded;
-        },
-        async onDelete(opts = {}) {
-            await deleteContent(this.dataset, opts);
-        },
-        async onUnhide() {
-            await this.onUpdate({ visible: true });
-        },
-        async onUndelete() {
-            await this.onUpdate({ deleted: false });
-        },
-        async onUpdate(changes = {}) {
-            await updateContentFields(this.dataset, changes);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/Content/GenericContentItem/GenericHistoryContent.vue b/client/src/components/History/Content/GenericContentItem/GenericHistoryContent.vue
deleted file mode 100644
index 3b32cb2d44d..00000000000
--- a/client/src/components/History/Content/GenericContentItem/GenericHistoryContent.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-    <component :is="providerComponent" :id="data_item.id" auto-refresh v-slot="{ result: item, loading }">
-        <div>
-            <loading-span v-if="loading" message="Loading dataset" />
-            <div v-if="item" :item="item" />
-        </div>
-    </component>
-</template>
-
-<script>
-import { DatasetProvider, DatasetCollectionProvider } from "components/providers";
-import LoadingSpan from "components/LoadingSpan";
-
-export default {
-    components: {
-        DatasetProvider,
-        DatasetCollectionProvider,
-        LoadingSpan,
-    },
-    props: {
-        data_item: {
-            required: true,
-        },
-    },
-    computed: {
-        renderComponent() {
-            return null; // { hdca: "DatasetCollectionUIWrapper" }[this.data_item.src];
-        },
-        providerComponent() {
-            return { hda: "DatasetProvider", hdca: "DatasetCollectionProvider" }[this.data_item.src];
-        },
-    },
-};
-</script>
diff --git a/client/src/components/History/Content/GenericItem.vue b/client/src/components/History/Content/GenericItem.vue
new file mode 100644
index 00000000000..074ab3e6288
--- /dev/null
+++ b/client/src/components/History/Content/GenericItem.vue
@@ -0,0 +1,72 @@
+<template>
+    <component :is="providerComponent" :id="itemId" auto-refresh v-slot="{ result: item, loading }">
+        <loading-span v-if="loading" message="Loading dataset" />
+        <ContentItem
+            v-else
+            :item="item"
+            :id="item.hid"
+            :name="item.name"
+            :state="item.state || item.populated_state"
+            :expanded="expanded"
+            :expandable="item.history_content_type == 'dataset'"
+            @update:expanded="expanded = $event"
+            @drilldown="drilldown = !drilldown"
+            @delete="onDelete"
+            @undelete="onUndelete"
+            @unhide="onUnhide" />
+    </component>
+</template>
+
+<script>
+import LoadingSpan from "components/LoadingSpan";
+import { DatasetProvider, DatasetCollectionProvider } from "components/providers";
+import { deleteContent, updateContentFields } from "components/History/model/queries";
+import ContentItem from "./ContentItem";
+
+export default {
+    components: {
+        ContentItem,
+        DatasetProvider,
+        DatasetCollectionProvider,
+        LoadingSpan,
+    },
+    props: {
+        itemId: {
+            type: String,
+            required: true,
+        },
+        itemSrc: {
+            type: String,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            drilldown: false,
+            expanded: false,
+        };
+    },
+    created() {
+        console.log(this.itemId);
+    },
+    computed: {
+        providerComponent() {
+            return { hda: "DatasetProvider", hdca: "DatasetCollectionProvider" }[this.itemSrc];
+        },
+    },
+    methods: {
+        onDelete(item) {
+            deleteContent(item);
+        },
+        onUndelete(item) {
+            updateContentFields(item, { deleted: false });
+        },
+        onHide(item) {
+            updateContentFields(item, { visible: false });
+        },
+        onUnhide(item) {
+            updateContentFields(item, { visible: true });
+        },
+    },
+};
+</script>
diff --git a/client/src/components/JobInformation/JobOutputs.vue b/client/src/components/JobInformation/JobOutputs.vue
index 83a48c96597..feba2eecd7b 100644
--- a/client/src/components/JobInformation/JobOutputs.vue
+++ b/client/src/components/JobInformation/JobOutputs.vue
@@ -14,7 +14,11 @@
                         {{ value[0].label || name }}
                     </td>
                     <td>
-                        <generic-history-content v-for="(item, index) in value" :key="index" :data_item="item.value" />
+                        <generic-history-item
+                            v-for="(item, index) in value"
+                            :key="index"
+                            :item-id="item.value.id"
+                            :item-src="item.value.src" />
                     </td>
                 </tr>
             </tbody>
@@ -23,11 +27,11 @@
 </template>
 
 <script>
-import GenericHistoryContent from "components/History/Content/GenericContentItem/GenericHistoryContent";
+import GenericHistoryItem from "components/History/Content/GenericItem";
 
 export default {
     components: {
-        GenericHistoryContent,
+        GenericHistoryItem,
     },
     props: {
         jobOutputs: Object,
diff --git a/client/src/components/JobParameters/JobParametersArrayValue.vue b/client/src/components/JobParameters/JobParametersArrayValue.vue
index b776dd76d30..1878f3efce9 100644
--- a/client/src/components/JobParameters/JobParametersArrayValue.vue
+++ b/client/src/components/JobParameters/JobParametersArrayValue.vue
@@ -1,22 +1,21 @@
 <template>
     <div>
         <div v-for="(elVal, pvIndex) in parameter_value" :key="pvIndex">
-            <generic-history-content v-if="['hda', 'hdca'].includes(elVal.src)" :data_item="elVal" />
+            <generic-history-item
+                v-if="['hda', 'hdca'].includes(elVal.src)"
+                :item-id="elVal.id"
+                :item-src="elVal.src" />
             <span v-else> {{ elVal.hid }}: {{ elVal.name }} </span>
         </div>
     </div>
 </template>
 
 <script>
-import Vue from "vue";
-import BootstrapVue from "bootstrap-vue";
-import GenericHistoryContent from "components/History/Content/GenericContentItem/GenericHistoryContent";
-
-Vue.use(BootstrapVue);
+import GenericHistoryItem from "components/History/Content/GenericItem";
 
 export default {
     components: {
-        GenericHistoryContent,
+        GenericHistoryItem,
     },
     props: {
         parameter_value: {
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
index 12cbe2e803b..2877ba03c59 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
@@ -14,7 +14,7 @@
                     :key="input.id"
                     :data-label="dataInputStepLabel(key, input)">
                     <b>{{ dataInputStepLabel(key, input) }}</b>
-                    <generic-history-content :data_item="input" />
+                    <generic-history-item :item-id="input.id" :item-src="input.src" />
                 </div>
             </details>
         </div>
@@ -23,7 +23,7 @@
                 <summary><b>Outputs</b></summary>
                 <div v-for="(output, key) in invocation.outputs" :key="output.id">
                     <b>{{ key }}:</b>
-                    <generic-history-content :data_item="output" />
+                    <generic-history-item :item-id="output.id" :item-src="output.src" />
                 </div>
             </details>
         </div>
@@ -32,7 +32,7 @@
                 <summary><b>Output Collections</b></summary>
                 <div v-for="(output, key) in invocation.output_collections" :key="output.id">
                     <b>{{ key }}:</b>
-                    <generic-history-content :data_item="output" />
+                    <generic-history-item :item-id="output.id" :item-src="output.src" />
                 </div>
             </details>
         </div>
@@ -51,8 +51,8 @@
     </div>
 </template>
 <script>
-import ParameterStep from "./ParameterStep.vue";
-import GenericHistoryContent from "components/History/Content/GenericContentItem/GenericHistoryContent";
+import ParameterStep from "./ParameterStep";
+import GenericHistoryItem from "components/History/Content/GenericItem";
 import WorkflowInvocationStep from "./WorkflowInvocationStep";
 
 import { mapGetters } from "vuex";
@@ -60,7 +60,7 @@ import { mapCacheActions } from "vuex-cache";
 
 export default {
     components: {
-        GenericHistoryContent,
+        GenericHistoryItem,
         WorkflowInvocationStep,
         ParameterStep,
     },
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index 540717835f7..c7b35ab9c66 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -22,7 +22,7 @@
                                 <summary><b>Output Datasets</b></summary>
                                 <div v-for="(value, name) in stepDetails.outputs" :key="value.id">
                                     <b>{{ name }}</b>
-                                    <generic-history-content :data_item="value" />
+                                    <generic-history-item :item-id="value.id" :item-src="value.src" />
                                 </div>
                             </details>
                             <details
@@ -31,7 +31,7 @@
                                 <summary><b>Output Dataset Collections</b></summary>
                                 <div v-for="(value, name) in stepDetails.output_collections" :key="value.id">
                                     <b>{{ name }}</b>
-                                    <generic-history-content :data_item="value" />
+                                    <generic-history-item :item-id="value.id" :item-src="value.src" />
                                 </div>
                             </details>
                             <div class="portlet-body" style="width: 100%; overflow-x: auto">
@@ -41,16 +41,20 @@
                                 </details>
                                 <parameter-step
                                     v-else-if="workflowStepType == 'parameter_input'"
-                                    :parameters="[
-                                        invocation.input_step_parameters[stepDetails.workflow_step_label],
-                                    ]"></parameter-step>
-                                <generic-history-content
-                                    v-else-if="isDataStep && invocation.inputs[workflowStep.id]"
-                                    :data_item="invocation.inputs[workflowStep.id]" />
+                                    :parameters="[invocation.input_step_parameters[stepDetails.workflow_step_label]]" />
+                                <generic-history-item
+                                    v-else-if="
+                                        isDataStep &&
+                                        invocation &&
+                                        invocation.inputs &&
+                                        invocation.inputs[workflowStep.id]
+                                    "
+                                    :item-id="invocation.inputs[workflowStep.id].id"
+                                    :item-src="invocation.inputs[workflowStep.id].src" />
                                 <div v-else-if="workflowStepType == 'subworkflow'">
                                     <div v-if="!stepDetails.subworkflow_invocation_id">
                                         Workflow invocation for this step is not yet scheduled.
-                                        <p></p>
+                                        <br />
                                         This step consumes outputs from these steps:
                                         <ul v-if="workflowStep">
                                             <li
@@ -84,9 +88,9 @@ import { mapCacheActions } from "vuex-cache";
 import { mapGetters, mapActions } from "vuex";
 import JobStep from "./JobStep";
 import ParameterStep from "./ParameterStep";
-import GenericHistoryContent from "components/History/Content/GenericContentItem/GenericHistoryContent";
+import GenericHistoryItem from "components/History/Content/GenericItem";
 import { InvocationStepProvider } from "components/providers";
-import LoadingSpan from "../LoadingSpan";
+import LoadingSpan from "components/LoadingSpan";
 
 export default {
     components: {
@@ -94,7 +98,7 @@ export default {
         JobStep,
         ParameterStep,
         InvocationStepProvider,
-        GenericHistoryContent,
+        GenericHistoryItem,
         WorkflowInvocationState: () => import("components/WorkflowInvocationState/WorkflowInvocationState"),
     },
     props: {

From 366b7463ef57e2a64456d827187ad79173411aca Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 24 Feb 2022 13:19:06 -0500
Subject: [PATCH 74/95] Adjust new history test cases, particularly selenium

---
 .../components/History/Content/ContentItem.vue | 18 ++++++++++++++----
 .../History/Content/Dataset/DatasetActions.vue |  6 +++---
 .../components/History/Content/GenericItem.vue |  2 +-
 .../CurrentHistory/HistoryOperations.vue       |  4 ++--
 .../History/CurrentHistory/HistoryPanel.vue    | 14 +++++++++++++-
 client/src/components/History/Index.vue        |  2 +-
 .../src/components/History/Layout/Details.vue  |  4 ++--
 .../src/components/History/Layout/Listing.vue  |  2 +-
 .../JobParameters/JobParameters.test.js        |  2 +-
 lib/galaxy/selenium/navigates_galaxy.py        |  8 ++++----
 lib/galaxy/selenium/navigation.yml             |  6 +++---
 lib/galaxy_test/selenium/test_history_panel.py | 12 ++++++------
 .../selenium/test_history_panel_collections.py |  5 ++---
 13 files changed, 53 insertions(+), 32 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 4dbf588f018..7a4bd8e7f08 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -1,5 +1,11 @@
 <template>
-    <div :class="['content-item m-1 p-0 rounded', clsStatus]" draggable @dragstart="onDragStart">
+    <div
+        :id="contentId"
+        :class="['content-item m-1 p-0 rounded', clsStatus]"
+        draggable
+        :data-hid="id"
+        :data-state="state"
+        @dragstart="onDragStart">
         <div class="p-1 cursor-pointer" @click.stop="onClick">
             <div class="clearfix overflow-hidden">
                 <div class="btn-group float-right">
@@ -17,7 +23,7 @@
                         v-if="writeable && state != 'discarded'"
                         :disabled="isUnavailable"
                         class="px-1"
-                        title="Edit"
+                        title="Edit attributes"
                         size="sm"
                         variant="link"
                         @click.stop="onEdit">
@@ -62,8 +68,9 @@
                         <span v-else class="fa fa-lg fa-square-o" @click.stop="$emit('update:selected', true)" />
                     </div>
                     <span :class="icon" />
-                    <span class="id">{{ id }}:</span>
-                    <span class="name">{{ name }}</span>
+                    <span class="id hid">{{ id }}</span>
+                    <span>:</span>
+                    <span class="content-title name">{{ name }}</span>
                     <h6 v-if="item.collection_type" class="description py-1">
                         a {{ item.collection_type }} with {{ item.element_count }} items
                     </h6>
@@ -95,6 +102,9 @@ export default {
         writeable: { type: Boolean, default: true },
     },
     computed: {
+        contentId() {
+            return `dataset-${this.item.id}`;
+        },
         clsStatus() {
             const status = CONTENTSTATE[this.state] && CONTENTSTATE[this.state].status;
             if (!status || this.selected) {
diff --git a/client/src/components/History/Content/Dataset/DatasetActions.vue b/client/src/components/History/Content/Dataset/DatasetActions.vue
index 438265b9003..5a8cd3bd2c8 100644
--- a/client/src/components/History/Content/Dataset/DatasetActions.vue
+++ b/client/src/components/History/Content/Dataset/DatasetActions.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="mb-1">
+    <div class="dataset-actions mb-1">
         <div class="clearfix">
             <div class="btn-group float-left">
                 <b-button v-if="showError" class="px-1" title="Error" size="sm" variant="link" @click.stop="onError">
@@ -7,7 +7,7 @@
                 </b-button>
                 <b-button
                     v-if="showDownloads"
-                    class="px-1"
+                    class="download-btn px-1"
                     title="Download"
                     size="sm"
                     variant="link"
@@ -25,7 +25,7 @@
                 </b-button>
                 <b-button
                     v-if="showInfo"
-                    class="px-1"
+                    class="params-btn px-1"
                     title="Dataset Details"
                     size="sm"
                     variant="link"
diff --git a/client/src/components/History/Content/GenericItem.vue b/client/src/components/History/Content/GenericItem.vue
index 074ab3e6288..363429b6e25 100644
--- a/client/src/components/History/Content/GenericItem.vue
+++ b/client/src/components/History/Content/GenericItem.vue
@@ -51,7 +51,7 @@ export default {
     },
     computed: {
         providerComponent() {
-            return { hda: "DatasetProvider", hdca: "DatasetCollectionProvider" }[this.itemSrc];
+            return this.itemSrc == "hda" ? "DatasetProvider" : "DatasetCollectionProvider";
         },
     },
     methods: {
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations.vue
index efb061c9b56..5df117b38db 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations.vue
@@ -4,7 +4,7 @@
             <b-button-group>
                 <b-button
                     title="Select Items"
-                    class="rounded-0"
+                    class="show-history-content-selectors-btn rounded-0"
                     size="sm"
                     variant="link"
                     :disabled="!hasMatches"
@@ -19,7 +19,7 @@
                     variant="link"
                     :pressed="showFilter"
                     @click="toggleFilter"
-                    data-description="content search toggle">
+                    data-description="content filter toggle">
                     <Icon icon="search" />
                 </b-button>
                 <b-button
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index ff5255dca65..a4812c9a58f 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -63,7 +63,7 @@
                                     :item="item"
                                     :id="item.hid"
                                     :name="item.name"
-                                    :state="item.state || item.populated_state"
+                                    :state="getState(item)"
                                     :expanded="isExpanded(item)"
                                     :expandable="item.history_content_type == 'dataset'"
                                     :selected="isSelected(item)"
@@ -154,6 +154,18 @@ export default {
         },
     },
     methods: {
+        getState(item) {
+            if (item.job_state_summary) {
+                for (const key of ["error", "failed", "paused", "upload", "running"]) {
+                    if (item.job_state_summary[key] > 0) {
+                        return key;
+                    }
+                }
+                return "ok";
+            } else {
+                return item.state || item.populated_state;
+            }
+        },
         hasMatches(payload) {
             return !!payload && payload.length > 0;
         },
diff --git a/client/src/components/History/Index.vue b/client/src/components/History/Index.vue
index 7bb6fcf239b..98c116a1a60 100644
--- a/client/src/components/History/Index.vue
+++ b/client/src/components/History/Index.vue
@@ -1,7 +1,7 @@
 <template>
     <CurrentUser class="d-flex flex-column" v-slot="{ user }">
         <UserHistories v-if="user" :user="user" v-slot="{ currentHistory, histories, handlers }">
-            <div v-if="currentHistory" id="current-history-panel">
+            <div v-if="currentHistory" id="current-history-panel" class="history-index">
                 <CurrentHistory
                     v-if="!breadcrumbs.length"
                     :history="currentHistory"
diff --git a/client/src/components/History/Layout/Details.vue b/client/src/components/History/Layout/Details.vue
index 873b9d1e030..ba9767beb17 100644
--- a/client/src/components/History/Layout/Details.vue
+++ b/client/src/components/History/Layout/Details.vue
@@ -1,9 +1,9 @@
 <template>
-    <section>
+    <section data-description="edit details">
         <b-button
             v-if="writeable"
             class="edit-button ml-1 float-right"
-            data-description="editor toggle button"
+            data-description="editor toggle"
             size="sm"
             variant="link"
             :title="'Edit' | l"
diff --git a/client/src/components/History/Layout/Listing.vue b/client/src/components/History/Layout/Listing.vue
index 554a5323e02..dacea6c9757 100644
--- a/client/src/components/History/Layout/Listing.vue
+++ b/client/src/components/History/Layout/Listing.vue
@@ -16,7 +16,7 @@ export default {
         VirtualList,
     },
     props: {
-        payload: { required: true },
+        payload: { type: Array, default: null },
         itemKey: { type: String, default: "hid" },
         queryKey: { type: String, default: null },
         pageSize: { type: Number, required: true },
diff --git a/client/src/components/JobParameters/JobParameters.test.js b/client/src/components/JobParameters/JobParameters.test.js
index 9939561c4cc..fec48ffc685 100644
--- a/client/src/components/JobParameters/JobParameters.test.js
+++ b/client/src/components/JobParameters/JobParameters.test.js
@@ -97,7 +97,7 @@ describe("JobMetrics/JobMetrics.vue", () => {
         expect(elements.length).toBe(3);
 
         checkTableParameter(elements.at(0), "Add this value", "22");
-        checkTableParameter(elements.at(1), linkParam.text, `${raw.hid} ${raw.name}`);
+        checkTableParameter(elements.at(1), linkParam.text, `${raw.hid} : ${raw.name}`);
         checkTableParameter(elements.at(2), "Iterate?", "NO");
     });
 
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 2c44da5810b..0819a1aac83 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -134,7 +134,7 @@ def retry_during_transitions(
     return _retry
 
 
-def edit_details(f, scope=".beta.history"):
+def edit_details(f, scope=".history-index"):
     """Open the editor, run the edits, hit the save button"""
 
     @wraps(f)
@@ -1342,7 +1342,7 @@ class NavigatesGalaxy(HasDriver):
         return not self.components.history_panel.beta.is_absent
 
     # avoids problematic ID and classes on markup
-    def beta_history_element(self, attribute_value, attribute_name="data-description", scope=".beta.history"):
+    def beta_history_element(self, attribute_value, attribute_name="data-description", scope=".history-index"):
         return self.components._.by_attribute(name=attribute_name, value=attribute_value, scope=scope)
 
     # join list of attrs into css attribute selectors and append to base beta_item selector
@@ -1852,7 +1852,7 @@ class NavigatesGalaxy(HasDriver):
     def snapshot(self, description):
         """Test case subclass overrides this to provide detailed logging."""
 
-    def open_history_editor(self, scope=".beta.history"):
+    def open_history_editor(self, scope=".history-index"):
         if self.is_beta_history():
             panel = self.components.history_panel.editor.selector(scope=scope)
             toggle = panel.toggle
@@ -1860,7 +1860,7 @@ class NavigatesGalaxy(HasDriver):
             editor = panel.form
             editor.wait_for_present()
 
-    def close_history_editor(self, scope=".beta.history"):
+    def close_history_editor(self, scope=".history-index"):
         if self.is_beta_history():
             toggle = self.components.history_panel.edit_toggle
             toggle.wait_for_and_click()
diff --git a/lib/galaxy/selenium/navigation.yml b/lib/galaxy/selenium/navigation.yml
index debfd06a3d9..543c262471a 100644
--- a/lib/galaxy/selenium/navigation.yml
+++ b/lib/galaxy/selenium/navigation.yml
@@ -154,7 +154,7 @@ history_panel:
   content_item:
     selectors:
       # specific rows selectable with attributes via suffix
-      _: '.beta.history .content-item${suffix}'
+      _: '.history-index .content-item${suffix}'
       title: '${_} .content-title'
       details: '${_} .details'
       summary: '${_} .summary'
@@ -177,7 +177,7 @@ history_panel:
       info_button: '${_} .params-btn'
       nametags: '${_} .nametags .badge-tags'
 
-      dataset_operations_dropdown: '${_}  .dataset-operations-dropdown'
+      dataset_operations_dropdown: '${_}  .dataset-actions'
 
   # re-usable history editor, scoped for use in different layout scenarios (multi, etc.)
   editor:
@@ -226,7 +226,7 @@ history_panel:
       list_items_beta: '.dataset-collection-panel .listing .content-item'
 
   selectors:
-    beta: '.beta.history'
+    beta: '.history-index'
     _: '#current-history-panel'
     search: '#current-history-panel input.search-query'
     refresh_button: '.history-refresh-button'
diff --git a/lib/galaxy_test/selenium/test_history_panel.py b/lib/galaxy_test/selenium/test_history_panel.py
index 976cc70144c..3152de53c83 100644
--- a/lib/galaxy_test/selenium/test_history_panel.py
+++ b/lib/galaxy_test/selenium/test_history_panel.py
@@ -20,7 +20,7 @@ class HistoryPanelTestCase(SeleniumTestCase):
         name_element = self.history_panel_name_element()
         if self.is_beta_history():
             # look for the editor icon
-            editor = self.components.history_panel.editor.selector(scope=".beta.history")
+            editor = self.components.history_panel.editor.selector(scope=".history-index")
             toggle = editor.toggle
             toggle.wait_for_visible()
         else:
@@ -53,14 +53,14 @@ class HistoryPanelTestCase(SeleniumTestCase):
         editable_text_input_element = self.history_panel_name_input()
         editable_text_input_element.send_keys(NEW_HISTORY_NAME)
         self.send_escape(editable_text_input_element)
-        self.components.history_panel.name_edit_input.wait_for_absent_or_hidden()
+        # self.components.history_panel.name_edit_input.wait_for_absent_or_hidden()
         assert NEW_HISTORY_NAME not in self.history_panel_name()
 
     @selenium_test
     @edit_details
     def test_history_tags_and_annotations_buttons(self):
         if self.is_beta_history():
-            history_editor = self.components.history_panel.editor.selector(scope=".beta.history")
+            history_editor = self.components.history_panel.editor.selector(scope=".history-index")
             history_editor.annotation_input.wait_for_clickable()
             history_editor.tags_input.wait_for_clickable()
         else:
@@ -158,7 +158,7 @@ class HistoryPanelTestCase(SeleniumTestCase):
         # looks like this is intended to check if the tag editor is open
         def assert_no_tags():
             if self.is_beta_history():
-                tags_component = self.components.history_panel.tag_editor.selector(scope=".beta.history")
+                tags_component = self.components.history_panel.tag_editor.selector(scope=".history-index")
                 tags_component.display.assert_absent_or_hidden()
             else:
                 self.components.history_panel.tag_area.assert_absent_or_hidden()
@@ -182,7 +182,7 @@ class HistoryPanelTestCase(SeleniumTestCase):
 
     # after about 5 tags, a toggle link shows up and you have to click it to see the full list
     def open_tags(self):
-        tags_component = self.components.history_panel.tag_editor.selector(scope=".beta.history")
+        tags_component = self.components.history_panel.tag_editor.selector(scope=".history-index")
         if not tags_component.toggle.is_absent:
             tags_component.toggle.wait_for_and_click()
         tags_component.display.wait_for_visible()
@@ -192,7 +192,7 @@ class HistoryPanelTestCase(SeleniumTestCase):
     def clear_tags(self, expected_tags_size):
         if self.is_beta_history():
             self.open_tags()
-            tags = self.components.history_panel.tag_editor.selector(scope=".beta.history")
+            tags = self.components.history_panel.tag_editor.selector(scope=".history-index")
             close_tag_buttons = tags.tag_close_btn.all()
         else:
             close_tag_buttons = self.components.history_panel.tag_close_btn.all()
diff --git a/lib/galaxy_test/selenium/test_history_panel_collections.py b/lib/galaxy_test/selenium/test_history_panel_collections.py
index bfa60acbb8e..23d44b5f902 100644
--- a/lib/galaxy_test/selenium/test_history_panel_collections.py
+++ b/lib/galaxy_test/selenium/test_history_panel_collections.py
@@ -36,8 +36,6 @@ class HistoryPanelCollectionsTestCase(SeleniumTestCase):
         )
         ok_hid = ok_response["implicit_collections"][0]["hid"]
 
-        self.home()
-
         self.history_panel_wait_for_hid_state(input_hid, "ok")
         self.history_panel_wait_for_hid_state(failed_hid, "error")
         self.history_panel_wait_for_hid_state(ok_hid, "ok")
@@ -170,6 +168,7 @@ class HistoryPanelCollectionsTestCase(SeleniumTestCase):
         if self.is_beta_history():
             self._rename_collection(new_name)
             self.screenshot("history_panel_collection_view_rename_beta")
+            self.sleep_for(WAIT_TYPES.UX_RENDER)
             title_element = self.beta_history_element("collection name display").wait_for_present()
         else:
             title_element = collection_view.title.wait_for_visible()
@@ -223,7 +222,7 @@ class HistoryPanelCollectionsTestCase(SeleniumTestCase):
             dataset_elements = collection_view.list_items.all()
 
         assert len(dataset_elements) == 2, dataset_elements
-        titles = [de.find_element_by_css_selector(".title .name").text for de in dataset_elements]
+        titles = [de.find_element_by_css_selector(".name").text for de in dataset_elements]
         titles.sort()
         assert titles == ["forward", "reverse"]
         self.screenshot("history_panel_collection_view_paired")

From 8392744aa44011a694e1f92c649879c2dc9b65f4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 25 Feb 2022 16:17:24 -0500
Subject: [PATCH 75/95] Allow history item navigation and drilldown within
 workflow invocations view

---
 .../History/Content/GenericElement.vue        | 38 +++++++++++++++++++
 .../History/Content/GenericItem.vue           | 37 ++++++++++--------
 lib/galaxy/selenium/navigation.yml            |  2 +-
 .../test_workflow_invocation_details.py       |  1 +
 4 files changed, 61 insertions(+), 17 deletions(-)
 create mode 100644 client/src/components/History/Content/GenericElement.vue

diff --git a/client/src/components/History/Content/GenericElement.vue b/client/src/components/History/Content/GenericElement.vue
new file mode 100644
index 00000000000..d732e0326a7
--- /dev/null
+++ b/client/src/components/History/Content/GenericElement.vue
@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <ContentItem
+            :item="item"
+            :id="item.element_index"
+            :name="item.element_identifier"
+            :expandable="item.element_type == 'hda'"
+            :state="item.object.state"
+            :expanded="expanded"
+            :writeable="false"
+            @update:expanded="expanded = $event"
+            @drilldown="drilldown = !drilldown" />
+        <GenericItem v-if="drilldown" :itemId="item.object.id" :itemSrc="item.object.history_content_type" />
+    </div>
+</template>
+
+<script>
+import ContentItem from "./ContentItem";
+
+export default {
+    components: {
+        ContentItem,
+        GenericItem: () => import("components/History/Content/GenericItem"),
+    },
+    props: {
+        item: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            drilldown: false,
+            expanded: false,
+        };
+    },
+};
+</script>
diff --git a/client/src/components/History/Content/GenericItem.vue b/client/src/components/History/Content/GenericItem.vue
index 363429b6e25..d5087fb8b6b 100644
--- a/client/src/components/History/Content/GenericItem.vue
+++ b/client/src/components/History/Content/GenericItem.vue
@@ -1,19 +1,25 @@
 <template>
     <component :is="providerComponent" :id="itemId" auto-refresh v-slot="{ result: item, loading }">
         <loading-span v-if="loading" message="Loading dataset" />
-        <ContentItem
-            v-else
-            :item="item"
-            :id="item.hid"
-            :name="item.name"
-            :state="item.state || item.populated_state"
-            :expanded="expanded"
-            :expandable="item.history_content_type == 'dataset'"
-            @update:expanded="expanded = $event"
-            @drilldown="drilldown = !drilldown"
-            @delete="onDelete"
-            @undelete="onUndelete"
-            @unhide="onUnhide" />
+        <div v-else>
+            <ContentItem
+                :item="item"
+                :id="item.hid"
+                :name="item.name"
+                :state="item.state || item.populated_state"
+                :expanded="expanded"
+                :expandable="item.history_content_type == 'dataset'"
+                @update:expanded="expanded = $event"
+                @drilldown="drilldown = !drilldown"
+                @delete="onDelete"
+                @undelete="onUndelete"
+                @unhide="onUnhide" />
+            <div v-if="drilldown">
+                <div v-for="(collectionItem, collectionIndex) in item.elements" :key="collectionIndex">
+                    <GenericElement :item="collectionItem" />
+                </div>
+            </div>
+        </div>
     </component>
 </template>
 
@@ -22,10 +28,12 @@ import LoadingSpan from "components/LoadingSpan";
 import { DatasetProvider, DatasetCollectionProvider } from "components/providers";
 import { deleteContent, updateContentFields } from "components/History/model/queries";
 import ContentItem from "./ContentItem";
+import GenericElement from "./GenericElement";
 
 export default {
     components: {
         ContentItem,
+        GenericElement,
         DatasetProvider,
         DatasetCollectionProvider,
         LoadingSpan,
@@ -46,9 +54,6 @@ export default {
             expanded: false,
         };
     },
-    created() {
-        console.log(this.itemId);
-    },
     computed: {
         providerComponent() {
             return this.itemSrc == "hda" ? "DatasetProvider" : "DatasetCollectionProvider";
diff --git a/lib/galaxy/selenium/navigation.yml b/lib/galaxy/selenium/navigation.yml
index 543c262471a..c4b7581cf42 100644
--- a/lib/galaxy/selenium/navigation.yml
+++ b/lib/galaxy/selenium/navigation.yml
@@ -631,7 +631,7 @@ invocations:
     step_output_collection_toggle: '.workflow-invocation-state-component .invocation-steps-details [data-step="${order_index}"] .invocation-step-output-collection-details .name'
     step_output_collection_element_identifier:
       type: xpath
-      selector: '//span[@class="name"][text()="${element_identifier}"]'
+      selector: '//span[@class="content-title name"][text()="${element_identifier}"]'
     step_output_collection_element_datatype: '.workflow-invocation-state-component .invocation-steps-details [data-step="${order_index}"] .invocation-step-output-collection-details .datatype .value'
     step_job_details: '.workflow-invocation-state-component .invocation-steps-details [data-step="${order_index}"] .invocation-step-job-details'
     step_job_table: '.workflow-invocation-state-component .invocation-steps-details [data-step="${order_index}"] .invocation-step-job-details table'
diff --git a/lib/galaxy_test/selenium/test_workflow_invocation_details.py b/lib/galaxy_test/selenium/test_workflow_invocation_details.py
index 42e8c95580d..94e8423b2a2 100644
--- a/lib/galaxy_test/selenium/test_workflow_invocation_details.py
+++ b/lib/galaxy_test/selenium/test_workflow_invocation_details.py
@@ -73,5 +73,6 @@ class WorkflowInvocationDetailsTestCase(SeleniumTestCase):
         invocations.step_output_collection(order_index="1").wait_for_and_click()
         invocations.step_output_collection_toggle(order_index="1").wait_for_and_click()
         invocations.step_output_collection_element_identifier(element_identifier="forward").wait_for_and_click()
+
         datatype = invocations.step_output_collection_element_datatype(order_index="1").wait_for_text()
         assert datatype == "txt"

From 6653a42d149a96152f401038844b49f5047d2759 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 27 Feb 2022 14:23:51 -0500
Subject: [PATCH 76/95] Adjust re-run test to revised dom layout of history
 content item

---
 .../components/History/Content/ContentItem.vue   |  2 +-
 .../History/Content/Dataset/DatasetDetails.vue   |  6 ++++--
 .../CurrentCollection/CollectionNavigation.vue   |  2 +-
 client/src/components/History/Layout/Details.vue |  2 +-
 client/src/entry/panels/history-panel.js         |  2 +-
 client/src/mvc/history/history-view.js           |  4 ++--
 lib/galaxy/selenium/navigation.yml               | 16 ++++++++--------
 .../selenium/test_history_panel_collections.py   |  4 +++-
 lib/galaxy_test/selenium/test_tool_form.py       | 13 ++++++-------
 9 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 7a4bd8e7f08..1f62270f580 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -77,7 +77,7 @@
                 </h5>
             </div>
         </div>
-        <DatasetDetails v-if="expanded" @edit="$emit('edit', $event)" :item="item" />
+        <DatasetDetails v-if="expanded" @edit="onEdit" :item="item" />
     </div>
 </template>
 
diff --git a/client/src/components/History/Content/Dataset/DatasetDetails.vue b/client/src/components/History/Content/Dataset/DatasetDetails.vue
index 80e817947c4..d827676fb0d 100644
--- a/client/src/components/History/Content/Dataset/DatasetDetails.vue
+++ b/client/src/components/History/Content/Dataset/DatasetDetails.vue
@@ -1,5 +1,5 @@
 <template>
-    <UrlDataProvider :url="dataUrl" v-slot="{ loading, result }">
+    <UrlDataProvider :url="dataUrl" auto-refresh v-slot="{ loading, result }">
         <div v-if="!loading" class="dataset">
             <div class="p-2 details">
                 <div class="summary">
@@ -12,7 +12,9 @@
                     </span>
                     <span v-if="result.genome_build" class="dbkey">
                         <label class="prompt" v-localize>database</label>
-                        <b-link class="value" @click.stop="$emit('edit', dataset)">{{ result.genome_build }}</b-link>
+                        <b-link class="value" @click.stop="$emit('edit', dataset)" data-label="Database/Build">{{
+                            result.genome_build
+                        }}</b-link>
                     </span>
                     <div v-if="result.misc_info" class="info">
                         <span class="value">{{ result.misc_info }}</span>
diff --git a/client/src/components/History/CurrentCollection/CollectionNavigation.vue b/client/src/components/History/CurrentCollection/CollectionNavigation.vue
index c14b68d684a..5cadde37654 100644
--- a/client/src/components/History/CurrentCollection/CollectionNavigation.vue
+++ b/client/src/components/History/CurrentCollection/CollectionNavigation.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <b-button size="sm" variant="link" @click="close">
-            <icon icon="angle-double-left" class="mr-1" /><span>History</span>
+            <icon icon="angle-double-left" class="mr-1" data-description="back to history" /><span>History</span>
         </b-button>
         <b-button size="sm" variant="link" v-if="previousName" @click="back">
             <span class="fa fa-angle-left mr-1" /><span>{{ previousName }}</span>
diff --git a/client/src/components/History/Layout/Details.vue b/client/src/components/History/Layout/Details.vue
index ba9767beb17..2d1f4455c25 100644
--- a/client/src/components/History/Layout/Details.vue
+++ b/client/src/components/History/Layout/Details.vue
@@ -15,7 +15,7 @@
 
         <!-- display annotation, tags -->
         <div v-if="!editing">
-            <div v-if="annotation" class="mt-2">{{ annotation }}</div>
+            <div v-if="annotation" class="mt-2" data-description="annotation value">{{ annotation }}</div>
             <StatelessTags v-if="tags" class="tags mt-3" :value="tags" :disabled="true" />
         </div>
 
diff --git a/client/src/entry/panels/history-panel.js b/client/src/entry/panels/history-panel.js
index 6780cd37987..77a85e692ea 100644
--- a/client/src/entry/panels/history-panel.js
+++ b/client/src/entry/panels/history-panel.js
@@ -72,7 +72,7 @@ const HistoryPanel = Backbone.View.extend({
 
         this.model = new Backbone.Model({
             // define components
-            cls: "history-right-panel history-details",
+            cls: "history-right-panel details",
             title: _l("History"),
             buttons: panelHeaderButtons,
         });
diff --git a/client/src/mvc/history/history-view.js b/client/src/mvc/history/history-view.js
index 7eae932a382..e566b3d8a67 100644
--- a/client/src/mvc/history/history-view.js
+++ b/client/src/mvc/history/history-view.js
@@ -521,14 +521,14 @@ var HistoryView = _super.extend(
 HistoryView.prototype.templates = (() => {
     var mainTemplate = () =>
         `<div>
-            <div class="controls history-details"></div>
+            <div class="controls details"></div>
             <ul class="list-items"></ul>
             <div class="empty-message alert alert-info"></div>',
         </div>`;
 
     var controlsTemplate = BASE_MVC.wrapTemplate(
         [
-            '<div class="controls history-details">',
+            '<div class="controls details">',
             '<div class="title">',
             '<div class="name history-title"><%- history.name %></div>',
             "</div>",
diff --git a/lib/galaxy/selenium/navigation.yml b/lib/galaxy/selenium/navigation.yml
index c4b7581cf42..d393928258a 100644
--- a/lib/galaxy/selenium/navigation.yml
+++ b/lib/galaxy/selenium/navigation.yml
@@ -193,7 +193,7 @@ history_panel:
   # beta history tags
   tag_editor:
     selectors:
-      _: '${scope} .history-details .tags'
+      _: '${scope} .details .tags'
       toggle: '${_} .toggle-link'
       display: '${_} .tag-area .tag-name'
       input: '${_} input'
@@ -240,25 +240,25 @@ history_panel:
     empty_message: '.empty-message'
     size: '.history-size'
     tag_icon: '.actions .history-tag-btn'
-    tag_area: '.history-details .tags-display'
-    tag_area_input: '.history-details .tags-display .tags-input input'
+    tag_area: '.details .tags-display'
+    tag_area_input: '.details .tags-display .tags-input input'
     tag_close_btn: '.tags-display .ti-icon-close'
     tags: 'li.ti-tag.ti-valid .tag-name'
 
     annotation_icon: '.actions .history-annotate-btn'
-    annotation_area: '.history-details .history-annotation'
+    annotation_area: '.details .history-annotation'
     annotation_editable_text:
-      selector: 'history annotation'
+      selector: 'annotation value'
       type: data-description
     annotation_edit:
       selector: 'annotation input'
       type: data-description
 
-    annotation_done: '.history-details .history-annotation .annotation button'
+    annotation_done: '.details .history-annotation .annotation button'
 
     options_button: '#history-options-button'
-    options_button_icon: '.history-details .menu-expand-button'
-    options_button_icon_beta: '.history-details .menu-expand-button'
+    options_button_icon: '.details .menu-expand-button'
+    options_button_icon_beta: '.details .menu-expand-button'
     options_button_copy_datasets_beta: '.copy-datasets-menu-item'
     options_menu: '#history-options-button-menu'
     options_menu_item:
diff --git a/lib/galaxy_test/selenium/test_history_panel_collections.py b/lib/galaxy_test/selenium/test_history_panel_collections.py
index 23d44b5f902..4c0b4473009 100644
--- a/lib/galaxy_test/selenium/test_history_panel_collections.py
+++ b/lib/galaxy_test/selenium/test_history_panel_collections.py
@@ -25,6 +25,8 @@ class HistoryPanelCollectionsTestCase(SeleniumTestCase):
         input_collection, failed_collection = self._generate_partially_failed_collection_with_input()
         input_hid = input_collection["hid"]
         failed_hid = failed_collection["hid"]
+        self.home()
+
         ok_inputs = {
             "input1": {"batch": True, "values": [{"src": "hdca", "id": input_collection["id"]}]},
             "sleep_time": 0,
@@ -214,9 +216,9 @@ class HistoryPanelCollectionsTestCase(SeleniumTestCase):
         input_collection = self._populated_paired_and_wait_for_it()
         collection_hid = input_collection["hid"]
         collection_view = self._click_and_wait_for_collection_view(collection_hid)
+        self.sleep_for(WAIT_TYPES.HISTORY_POLL)
 
         if self.is_beta_history():
-            self.sleep_for(WAIT_TYPES.HISTORY_POLL)
             dataset_elements = collection_view.list_items_beta.all()
         else:
             dataset_elements = collection_view.list_items.all()
diff --git a/lib/galaxy_test/selenium/test_tool_form.py b/lib/galaxy_test/selenium/test_tool_form.py
index 13176b6f1d6..8d4a9e4f1be 100644
--- a/lib/galaxy_test/selenium/test_tool_form.py
+++ b/lib/galaxy_test/selenium/test_tool_form.py
@@ -60,13 +60,12 @@ class ToolFormTestCase(SeleniumTestCase, UsesHistoryItemAssertions):
 
         job_outputs = self._table_to_key_value_elements("table#job-outputs")
         assert job_outputs[0][0].text == "environment_variables"
-        assert "View data\nEdit attributes\nDelete" in job_outputs[0][1].text
-        job_outputs[0][1].click()
-        assert job_outputs[0][1].find_element_by_css_selector("pre").text == "42\nmoo\nNOTTHREE"
-        dataset_operations = self.wait_for_selector_visible("table#job-outputs div.dropdown")
-        dataset_operations.click()
-        menu = self.wait_for_selector_visible("table#job-outputs div.dropdown ul")
-        self.click_menu_item(menu, "Run job again")
+        generic_item = job_outputs[0][1]
+        assert "1 : environment_variables" in generic_item.text
+        generic_item.click()
+        self.sleep_for(self.wait_types.UX_RENDER)
+        assert generic_item.find_element_by_css_selector("pre").text == "42\nmoo\nNOTTHREE"
+        generic_item.find_element_by_css_selector("[title='Run Job Again']").click()
         self.components.tool_form.execute.wait_for_visible()
 
     @staticmethod

From d0d73e6eccd3f1d167c41ebdb5f107d8da5a3731 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 28 Feb 2022 21:17:03 -0500
Subject: [PATCH 77/95] Show all dataset tags for now

---
 client/src/components/History/Content/ContentItem.vue | 5 +++++
 client/src/mvc/annotation.js                          | 2 +-
 lib/galaxy_test/selenium/test_history_panel.py        | 8 ++++----
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 1f62270f580..0d233f53631 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -74,6 +74,9 @@
                     <h6 v-if="item.collection_type" class="description py-1">
                         a {{ item.collection_type }} with {{ item.element_count }} items
                     </h6>
+                    <div v-if="!expanded && item.tags && item.tags.length > 0" class="nametags">
+                        <Nametag v-for="tag in item.tags" :key="tag" :tag="tag" />
+                    </div>
                 </h5>
             </div>
         </div>
@@ -83,12 +86,14 @@
 
 <script>
 import { backboneRoute, useGalaxy, iframeRedirect } from "components/plugins/legacyNavigation";
+import { Nametag } from "components/Nametags";
 import DatasetDetails from "./Dataset/DatasetDetails";
 import CONTENTSTATE from "./contentState";
 
 export default {
     components: {
         DatasetDetails,
+        Nametag,
     },
     props: {
         item: { type: Object, required: true },
diff --git a/client/src/mvc/annotation.js b/client/src/mvc/annotation.js
index cc94408adb0..7382a2e597c 100644
--- a/client/src/mvc/annotation.js
+++ b/client/src/mvc/annotation.js
@@ -54,7 +54,7 @@ var AnnotationEditor = Backbone.View.extend(baseMVC.LoggableMixin)
                 _l("Annotation"),
                 "</label>",
                 // set up initial tags by adding as CSV to input vals (necc. to init select2)
-                '<div class="annotation" data-description="history annotation">',
+                '<div class="annotation" data-description="annotation value">',
                 _.escape(annotation),
                 "</div>",
             ].join("");
diff --git a/lib/galaxy_test/selenium/test_history_panel.py b/lib/galaxy_test/selenium/test_history_panel.py
index 3152de53c83..8f3a6b11441 100644
--- a/lib/galaxy_test/selenium/test_history_panel.py
+++ b/lib/galaxy_test/selenium/test_history_panel.py
@@ -170,14 +170,14 @@ class HistoryPanelTestCase(SeleniumTestCase):
         tags = add_tags(tags_size)
         assert_current_tags(tags)
 
-        # add more tags to non-empty tags area
-        tags += add_tags(tags_size)
-        assert_current_tags(tags)
+        # Todo: add more tags to non-empty tags area
+        # tags += add_tags(tags_size)
+        # assert_current_tags(tags)
 
         # delete all tags
         expected_tags_len = len(tags)
         self.clear_tags(expected_tags_len)
-
+        self.sleep_for(self.wait_types.UX_RENDER)
         assert_no_tags()
 
     # after about 5 tags, a toggle link shows up and you have to click it to see the full list

From 86d6deddc63e0e18193cc958e46fb0f09cbbbc54 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 1 Mar 2022 18:11:42 -0500
Subject: [PATCH 78/95] Fix remaining selenium tests

---
 .../History/CurrentCollection/CollectionPanel.vue |  3 +--
 .../History/CurrentHistory/HistoryPanel.vue       |  1 +
 client/src/components/History/Layout/Listing.vue  |  8 +++++---
 .../selenium/test_history_panel_collections.py    | 15 +++++++++------
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index fba00f3d154..085e94a6a04 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -87,8 +87,7 @@ export default {
             return this.selectedCollections[0];
         },
         url() {
-            const collectionId = this.dsc.object ? this.dsc.object.id : this.dsc.id;
-            return `api/dataset_collections/${this.rootCollection.id}/contents/${collectionId}`;
+            return this.dsc.contents_url.substring(1);
         },
     },
     methods: {
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index a4812c9a58f..6bd48848375 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -53,6 +53,7 @@
                         </b-alert>
                         <Listing
                             v-else
+                            reversed
                             :query-key="queryKey"
                             :page-size="pageSize"
                             :payload="payload"
diff --git a/client/src/components/History/Layout/Listing.vue b/client/src/components/History/Layout/Listing.vue
index dacea6c9757..41d5f1a5066 100644
--- a/client/src/components/History/Layout/Listing.vue
+++ b/client/src/components/History/Layout/Listing.vue
@@ -16,10 +16,11 @@ export default {
         VirtualList,
     },
     props: {
-        payload: { type: Array, default: null },
         itemKey: { type: String, default: "hid" },
-        queryKey: { type: String, default: null },
         pageSize: { type: Number, required: true },
+        payload: { type: Array, default: null },
+        queryKey: { type: String, default: null },
+        reversed: { type: Boolean, default: false },
     },
     data() {
         return {
@@ -45,7 +46,8 @@ export default {
             return !!this.payload && this.payload.length == this.pageSize;
         },
         getItems() {
-            return reverse(this.items.filter((n) => n));
+            const filtered = this.items.filter((n) => n);
+            return this.reversed ? reverse(filtered) : filtered;
         },
     },
     methods: {
diff --git a/lib/galaxy_test/selenium/test_history_panel_collections.py b/lib/galaxy_test/selenium/test_history_panel_collections.py
index 4c0b4473009..7db94cf6fff 100644
--- a/lib/galaxy_test/selenium/test_history_panel_collections.py
+++ b/lib/galaxy_test/selenium/test_history_panel_collections.py
@@ -216,16 +216,16 @@ class HistoryPanelCollectionsTestCase(SeleniumTestCase):
         input_collection = self._populated_paired_and_wait_for_it()
         collection_hid = input_collection["hid"]
         collection_view = self._click_and_wait_for_collection_view(collection_hid)
-        self.sleep_for(WAIT_TYPES.HISTORY_POLL)
-
+        self.sleep_for(WAIT_TYPES.UX_TRANSITION)
         if self.is_beta_history():
             dataset_elements = collection_view.list_items_beta.all()
         else:
             dataset_elements = collection_view.list_items.all()
-
         assert len(dataset_elements) == 2, dataset_elements
-        titles = [de.find_element_by_css_selector(".name").text for de in dataset_elements]
-        titles.sort()
+        selector = ".title .name"
+        if self.is_beta_history():
+            selector = ".content-title"
+        titles = [de.find_element_by_css_selector(selector).text for de in dataset_elements]
         assert titles == ["forward", "reverse"]
         self.screenshot("history_panel_collection_view_paired")
 
@@ -247,7 +247,10 @@ class HistoryPanelCollectionsTestCase(SeleniumTestCase):
             else:
                 dataset_elements = collection_view.list_items.all()
             assert len(dataset_elements) == 4, dataset_elements
-            title_elements = [de.find_element_by_css_selector(".title .name").text for de in dataset_elements]
+            selector = ".title .name"
+            if self.is_beta_history():
+                selector = ".content-title"
+            title_elements = [de.find_element_by_css_selector(selector).text for de in dataset_elements]
             assert title_elements == ["data1", "data2", "data3", "data4"]
 
         check_four_datasets_shown()

From 57409b88330e6f66b0d6021b0c0e0f5acbcef924 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 3 Mar 2022 14:10:40 -0500
Subject: [PATCH 79/95] Move creating_job and rerunnable to detailed view

---
 lib/galaxy/managers/hdas.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/galaxy/managers/hdas.py b/lib/galaxy/managers/hdas.py
index 80a9ba51f67..8c9c7ca6022 100644
--- a/lib/galaxy/managers/hdas.py
+++ b/lib/galaxy/managers/hdas.py
@@ -304,8 +304,6 @@ class HDASerializer(  # datasets._UnflattenedMetadataDatasetAssociationSerialize
                 "type",
                 "url",
                 "create_time",
-                "rerunnable",
-                "creating_job",
                 "update_time",
             ],
         )
@@ -345,6 +343,8 @@ class HDASerializer(  # datasets._UnflattenedMetadataDatasetAssociationSerialize
                 "created_from_basename",
                 "hashes",
                 "sources",
+                "rerunnable",
+                "creating_job",
             ],
             include_keys_from="summary",
         )

From b96fd4570a160c7cdc46762d9e276502c4353d5e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 2 Mar 2022 19:18:45 -0500
Subject: [PATCH 80/95] Switch to infinite scrolling in history listing, keep
 visible section up-to-date

---
 .../History/CurrentHistory/HistoryPanel.vue   |  4 +-
 .../src/components/History/Layout/Listing.vue | 40 +++++++++----------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 6bd48848375..7b267d9aaee 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -128,7 +128,7 @@ export default {
         return {
             hideSelection: {},
             topIndex: 0,
-            pageSize: 2000,
+            pageSize: 50,
             params: {},
         };
     },
@@ -140,7 +140,7 @@ export default {
     },
     computed: {
         dataUrl() {
-            return `api/histories/${this.historyId}/contents?v=dev&order=hid&offset=${this.topIndex}&${this.queryString}`;
+            return `api/histories/${this.historyId}/contents?v=dev&order=hid&offset=${this.topIndex}&limit=${this.pageSize}&${this.queryString}`;
         },
         historyId() {
             return this.history.id;
diff --git a/client/src/components/History/Layout/Listing.vue b/client/src/components/History/Layout/Listing.vue
index 41d5f1a5066..4b25394bc3e 100644
--- a/client/src/components/History/Layout/Listing.vue
+++ b/client/src/components/History/Layout/Listing.vue
@@ -1,18 +1,29 @@
 <template>
     <div class="history-listing">
-        <virtual-list ref="listing" class="listing" :data-key="itemKey" :data-sources="getItems" :data-component="{}">
+        <virtual-list
+            ref="listing"
+            class="listing"
+            :data-key="itemKey"
+            :data-sources="getItems"
+            :data-component="{}"
+            @scroll="onScroll">
             <template v-slot:item="{ item }">
                 <slot name="history-item" :item="item" />
             </template>
+            <template v-slot:footer>
+                <LoadingSpan v-if="loading" class="m-2" message="Loading" />
+            </template>
         </virtual-list>
     </div>
 </template>
 <script>
 import VirtualList from "vue-virtual-scroll-list";
 import { reverse, throttle } from "lodash";
+import LoadingSpan from "components/LoadingSpan";
 
 export default {
     components: {
+        LoadingSpan,
         VirtualList,
     },
     props: {
@@ -52,6 +63,7 @@ export default {
     },
     methods: {
         updateItems() {
+            /* This function merges the existing data with new incoming data. */
             if (this.queryKey != this.queryCurrent) {
                 this.queryCurrent = this.queryKey;
                 this.items = [];
@@ -74,7 +86,8 @@ export default {
                 }
             }
         },
-        onScroll(event) {
+        onScrollHandler(event) {
+            /* CURRENTLY UNUSED
             // this avoids diagonal scrolling, we either scroll left/right or top/down
             // both events are throttled and the default handler has been prevented.
             if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
@@ -93,25 +106,12 @@ export default {
                 });
                 event.target.dispatchEvent(wheelEvent);
             }
+            */
+        },
+        onScroll() {
+            const rangeStart = this.$refs.listing.range.start;
+            this.$emit("scroll", rangeStart);
         },
-        /*onScroll(event) {
-            const itemCount = this.items.length;
-            if (itemCount > 0) {
-                let topIndex = 0;
-                for (const index in event.target.childNodes) {
-                    const child = event.target.childNodes[index];
-                    if (child.offsetTop > event.target.scrollTop) {
-                        topIndex = index - 1;
-                        break;
-                    }
-                }
-                topIndex = Math.min(Math.max(topIndex, 0), itemCount - 1);
-                const topItem = this.getItems[topIndex];
-                if (topItem) {
-                    this.$emit("scroll", topIndex);
-                }
-            }
-        },*/
     },
 };
 </script>

From c9a6485d322217fa7d8e73076dc7ec6f6138bd44 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 2 Mar 2022 19:52:59 -0500
Subject: [PATCH 81/95] Use consistent parameter names and limits, add scroll
 handler to collection, prep

---
 .../History/Content/Dataset/DatasetDetails.vue     |  3 ---
 .../History/CurrentCollection/CollectionPanel.vue  |  8 ++++----
 .../History/CurrentHistory/HistoryPanel.vue        | 14 +++++++-------
 client/src/components/History/Layout/Listing.vue   |  4 ++--
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/client/src/components/History/Content/Dataset/DatasetDetails.vue b/client/src/components/History/Content/Dataset/DatasetDetails.vue
index d827676fb0d..b75532b1deb 100644
--- a/client/src/components/History/Content/Dataset/DatasetDetails.vue
+++ b/client/src/components/History/Content/Dataset/DatasetDetails.vue
@@ -48,8 +48,5 @@ export default {
             return `api/datasets/${datasetId}`;
         },
     },
-    created() {
-        console.log(this.item);
-    },
 };
 </script>
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index 085e94a6a04..b0dee58a360 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -20,7 +20,7 @@
                 </template>
 
                 <template v-slot:listing>
-                    <Listing item-key="element_index" :page-size="pageSize" :payload="payload" @scroll="onScroll">
+                    <Listing item-key="element_index" :payload="payload" :limit="limit" @scroll="onScroll">
                         <template v-slot:history-item="{ item }">
                             <ContentItem
                                 :item="item"
@@ -69,7 +69,7 @@ export default {
     },
     data() {
         return {
-            pageSize: 50,
+            limit: 500,
         };
     },
     computed: {
@@ -98,8 +98,8 @@ export default {
                 });
             });
         },
-        onScroll(newHid) {
-            this.maxHid = newHid;
+        onScroll(offset) {
+            this.offset = offset;
         },
     },
 };
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 7b267d9aaee..4b2d61147a0 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -55,7 +55,7 @@
                             v-else
                             reversed
                             :query-key="queryKey"
-                            :page-size="pageSize"
+                            :limit="limit"
                             :payload="payload"
                             @scroll="onScroll">
                             <template v-slot:history-item="{ item }">
@@ -127,20 +127,20 @@ export default {
     data() {
         return {
             hideSelection: {},
-            topIndex: 0,
-            pageSize: 50,
+            offset: 0,
+            limit: 500,
             params: {},
         };
     },
     watch: {
         queryKey() {
             this.hideSelection = {};
-            this.topIndex = 0;
+            this.offset = 0;
         },
     },
     computed: {
         dataUrl() {
-            return `api/histories/${this.historyId}/contents?v=dev&order=hid&offset=${this.topIndex}&limit=${this.pageSize}&${this.queryString}`;
+            return `api/histories/${this.historyId}/contents?v=dev&order=hid&offset=${this.offset}&limit=${this.limit}&${this.queryString}`;
         },
         historyId() {
             return this.history.id;
@@ -170,8 +170,8 @@ export default {
         hasMatches(payload) {
             return !!payload && payload.length > 0;
         },
-        onScroll(newHid) {
-            this.topIndex = newHid;
+        onScroll(offset) {
+            this.offset = offset;
         },
         onhideSelection(selectedItems) {
             selectedItems.forEach((item) => {
diff --git a/client/src/components/History/Layout/Listing.vue b/client/src/components/History/Layout/Listing.vue
index 4b25394bc3e..a9e3934f953 100644
--- a/client/src/components/History/Layout/Listing.vue
+++ b/client/src/components/History/Layout/Listing.vue
@@ -28,7 +28,7 @@ export default {
     },
     props: {
         itemKey: { type: String, default: "hid" },
-        pageSize: { type: Number, required: true },
+        limit: { type: Number, required: true },
         payload: { type: Array, default: null },
         queryKey: { type: String, default: null },
         reversed: { type: Boolean, default: false },
@@ -54,7 +54,7 @@ export default {
     },
     computed: {
         loading() {
-            return !!this.payload && this.payload.length == this.pageSize;
+            return !!this.payload && this.payload.length == this.limit;
         },
         getItems() {
             const filtered = this.items.filter((n) => n);

From fc2999c298f3d83a52ca2574abf54499bf8eaef9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 4 Mar 2022 05:15:42 -0500
Subject: [PATCH 82/95] Use contents_url of element object to drilldown

---
 .../History/CurrentCollection/CollectionOperations.vue |  7 +++----
 .../History/CurrentCollection/CollectionPanel.vue      | 10 ++++------
 client/src/components/providers/UrlDataProvider.js     |  2 +-
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/client/src/components/History/CurrentCollection/CollectionOperations.vue b/client/src/components/History/CurrentCollection/CollectionOperations.vue
index f00d5723c69..c346b91ad5a 100644
--- a/client/src/components/History/CurrentCollection/CollectionOperations.vue
+++ b/client/src/components/History/CurrentCollection/CollectionOperations.vue
@@ -1,6 +1,6 @@
 <template>
     <section>
-        <nav v-if="isRoot" class="content-operations d-flex justify-content-between bg-secondary">
+        <nav class="content-operations d-flex justify-content-between bg-secondary">
             <b-button-group>
                 <b-button title="Download Collection" size="sm" variant="link" download :href="downloadUrl">
                     <Icon class="mr-1" icon="download" />
@@ -14,13 +14,12 @@
 <script>
 export default {
     props: {
-        isRoot: { type: Boolean, required: true },
-        collection: { type: Object, required: true },
+        dsc: { type: Object, required: true },
     },
     computed: {
         /** @return {String} */
         downloadUrl() {
-            return `${this.collection.url}/download`;
+            return `${this.dsc.url}/download`;
         },
     },
 };
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index b0dee58a360..f12a99d7531 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -12,11 +12,11 @@
                 </template>
 
                 <template v-slot:listcontrols>
-                    <CollectionOperations :collection="dsc" :is-root="isRoot" />
+                    <CollectionOperations v-if="isRoot" :dsc="dsc" />
                 </template>
 
                 <template v-slot:details>
-                    <CollectionDetails :dsc="dsc" :writeable="writeable" @update:dsc="updateDsc(dsc, $event)" />
+                    <CollectionDetails :dsc="dsc" :writeable="isRoot" @update:dsc="updateDsc(dsc, $event)" />
                 </template>
 
                 <template v-slot:listing>
@@ -80,14 +80,12 @@ export default {
         isRoot() {
             return this.dsc == this.rootCollection;
         },
-        writeable() {
-            return this.isRoot;
-        },
         rootCollection() {
             return this.selectedCollections[0];
         },
         url() {
-            return this.dsc.contents_url.substring(1);
+            const source = this.dsc.object || this.dsc;
+            return source.contents_url.substring(1);
         },
     },
     methods: {
diff --git a/client/src/components/providers/UrlDataProvider.js b/client/src/components/providers/UrlDataProvider.js
index dd21067dcc5..4e4668259a2 100644
--- a/client/src/components/providers/UrlDataProvider.js
+++ b/client/src/components/providers/UrlDataProvider.js
@@ -5,8 +5,8 @@ import { rethrowSimple } from "utils/simple-error";
 
 async function urlData({ url }) {
     try {
-        const { data } = await axios.get(`${getAppRoot()}${url}`);
         console.debug("Requesting data from: ", url);
+        const { data } = await axios.get(`${getAppRoot()}${url}`);
         return data;
     } catch (e) {
         rethrowSimple(e);

From 864a4eafd6457c11f60db6fc35190fc3f703b50a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 4 Mar 2022 20:23:14 -0500
Subject: [PATCH 83/95] Fix collection description display

---
 .../History/Content/ContentDescription.vue    | 37 +++++++++++++++++++
 .../History/Content/ContentItem.vue           | 10 +++--
 .../CurrentCollection/CollectionDetails.vue   | 18 ++++-----
 3 files changed, 50 insertions(+), 15 deletions(-)
 create mode 100644 client/src/components/History/Content/ContentDescription.vue

diff --git a/client/src/components/History/Content/ContentDescription.vue b/client/src/components/History/Content/ContentDescription.vue
new file mode 100644
index 00000000000..4e94faaca8f
--- /dev/null
+++ b/client/src/components/History/Content/ContentDescription.vue
@@ -0,0 +1,37 @@
+<template>
+    <h6 v-if="collectionType" class="description py-1">
+        <span>a {{ collectionLabel | localize }}</span>
+        <span v-if="elementCount == 1">with 1 item</span>
+        <span v-else-if="elementCount > 1">with {{ elementCount }} items</span>
+    </h6>
+</template>
+
+<script>
+export default {
+    props: {
+        item: { type: Object, required: true },
+    },
+    data() {
+        return {
+            labels: {
+                list: "list",
+                paired: "dataset pair",
+                "list:paired": "list of pairs",
+            },
+        };
+    },
+    computed: {
+        collectionLabel() {
+            return this.labels[this.collectionType] || "nested list";
+        },
+        collectionType() {
+            const source = this.item.object || this.item;
+            return source.collection_type;
+        },
+        elementCount() {
+            const source = this.item.object || this.item;
+            return source.element_count;
+        },
+    },
+};
+</script>
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 0d233f53631..6fbbe47e9cf 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -71,9 +71,7 @@
                     <span class="id hid">{{ id }}</span>
                     <span>:</span>
                     <span class="content-title name">{{ name }}</span>
-                    <h6 v-if="item.collection_type" class="description py-1">
-                        a {{ item.collection_type }} with {{ item.element_count }} items
-                    </h6>
+                    <ContentDescription :item="item" />
                     <div v-if="!expanded && item.tags && item.tags.length > 0" class="nametags">
                         <Nametag v-for="tag in item.tags" :key="tag" :tag="tag" />
                     </div>
@@ -87,11 +85,13 @@
 <script>
 import { backboneRoute, useGalaxy, iframeRedirect } from "components/plugins/legacyNavigation";
 import { Nametag } from "components/Nametags";
+import ContentDescription from "./ContentDescription";
 import DatasetDetails from "./Dataset/DatasetDetails";
 import CONTENTSTATE from "./contentState";
 
 export default {
     components: {
+        ContentDescription,
         DatasetDetails,
         Nametag,
     },
@@ -112,8 +112,10 @@ export default {
         },
         clsStatus() {
             const status = CONTENTSTATE[this.state] && CONTENTSTATE[this.state].status;
-            if (!status || this.selected) {
+            if (this.selected) {
                 return "alert-info";
+            } else if (!status) {
+                return `alert-success`;
             } else {
                 return `alert-${status}`;
             }
diff --git a/client/src/components/History/CurrentCollection/CollectionDetails.vue b/client/src/components/History/CurrentCollection/CollectionDetails.vue
index 96d6d81f2c8..63877e5d7d7 100644
--- a/client/src/components/History/CurrentCollection/CollectionDetails.vue
+++ b/client/src/components/History/CurrentCollection/CollectionDetails.vue
@@ -1,16 +1,15 @@
 <template>
     <Details
-        :name="dsc.name"
+        :name="name"
         :tags="dsc.tags"
         :writeable="writeable"
         :show-annotation="false"
         @save="$emit('update:dsc', $event)">
         <template v-slot:name>
-            <h3 data-description="collection name display">{{ dsc.name || "(Collection Name)" }}</h3>
+            <h3 data-description="collection name display">{{ name || "(Collection Name)" }}</h3>
             <div class="mt-1">
                 <div class="description">
-                    {{ dsc.collectionType | localize }} of {{ dsc.totalElements }}
-                    <b v-if="isHomogeneous">{{ homogeneousDatatype }} </b>datasets
+                    <ContentDescription :item="dsc" />
                 </div>
             </div>
         </template>
@@ -19,9 +18,11 @@
 
 <script>
 import Details from "components/History/Layout/Details";
+import ContentDescription from "components/History/Content/ContentDescription";
 
 export default {
     components: {
+        ContentDescription,
         Details,
     },
     props: {
@@ -29,13 +30,8 @@ export default {
         writeable: { type: Boolean, required: true },
     },
     computed: {
-        /** @return {Boolean} */
-        isHomogeneous() {
-            return this.dsc.isHomogeneous;
-        },
-        /** @return {String} */
-        homogeneousDatatype() {
-            return this.dsc.homogeneousDatatype;
+        name() {
+            return this.dsc.name || this.dsc.element_identifier;
         },
     },
 };

From a078fd0d075f8ac01e1fb1ec89e50029f8ba8e0d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 4 Mar 2022 20:47:41 -0500
Subject: [PATCH 84/95] Activate pagination for collections with page size of
 100 items

---
 .../History/CurrentCollection/CollectionDetails.vue       | 8 ++------
 .../History/CurrentCollection/CollectionPanel.vue         | 8 +++++---
 .../components/History/CurrentHistory/HistoryDetails.vue  | 2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/client/src/components/History/CurrentCollection/CollectionDetails.vue b/client/src/components/History/CurrentCollection/CollectionDetails.vue
index 63877e5d7d7..e669d4a648a 100644
--- a/client/src/components/History/CurrentCollection/CollectionDetails.vue
+++ b/client/src/components/History/CurrentCollection/CollectionDetails.vue
@@ -6,12 +6,8 @@
         :show-annotation="false"
         @save="$emit('update:dsc', $event)">
         <template v-slot:name>
-            <h3 data-description="collection name display">{{ name || "(Collection Name)" }}</h3>
-            <div class="mt-1">
-                <div class="description">
-                    <ContentDescription :item="dsc" />
-                </div>
-            </div>
+            <h3 data-description="collection name display">{{ name || "Collection" }}</h3>
+            <ContentDescription :item="dsc" />
         </template>
     </Details>
 </template>
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index f12a99d7531..a66999b5dfc 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -1,7 +1,7 @@
 <!-- When a dataset collection is being viewed, this panel shows the contents of that collection -->
 
 <template>
-    <UrlDataProvider v-if="dsc" :key="dsc.id" :url="url" v-slot="{ result: payload }">
+    <UrlDataProvider v-if="dsc" :key="dsc.id" :url="url" auto-refresh v-slot="{ result: payload }">
         <ExpandedItems :scope-key="dsc.id" :get-item-key="(item) => item.id" v-slot="{ isExpanded, setExpanded }">
             <Layout class="dataset-collection-panel">
                 <template v-slot:navigation>
@@ -69,7 +69,8 @@ export default {
     },
     data() {
         return {
-            limit: 500,
+            offset: 0,
+            limit: 100,
         };
     },
     computed: {
@@ -85,7 +86,8 @@ export default {
         },
         url() {
             const source = this.dsc.object || this.dsc;
-            return source.contents_url.substring(1);
+            const contentUrl = source.contents_url.substring(1);
+            return `${contentUrl}?offset=${this.offset}&limit=${this.limit}`;
         },
     },
     methods: {
diff --git a/client/src/components/History/CurrentHistory/HistoryDetails.vue b/client/src/components/History/CurrentHistory/HistoryDetails.vue
index dff4f1b6c39..990c1f8f744 100644
--- a/client/src/components/History/CurrentHistory/HistoryDetails.vue
+++ b/client/src/components/History/CurrentHistory/HistoryDetails.vue
@@ -6,7 +6,7 @@
         :writeable="writeable"
         @save="$emit('update:currentHistory', $event)">
         <template v-slot:name>
-            <h3 data-description="history name display">{{ history.name || "(History Name)" }}</h3>
+            <h3 data-description="history name display">{{ history.name || "History" }}</h3>
             <h5 class="history-size">
                 <span v-if="history.size">{{ history.size | niceFileSize }}</span>
                 <span v-else v-localize>(empty)</span>

From c00864bd2c20494e27ebbf638a31acfe4547f603 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 2 Mar 2022 21:43:22 -0500
Subject: [PATCH 85/95] Avoid copying array when new items are loaded into
 listing

---
 client/src/components/History/Layout/Listing.vue   | 10 +++-------
 client/src/components/providers/UrlDataProvider.js |  1 +
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/client/src/components/History/Layout/Listing.vue b/client/src/components/History/Layout/Listing.vue
index a9e3934f953..3aac7bcdf65 100644
--- a/client/src/components/History/Layout/Listing.vue
+++ b/client/src/components/History/Layout/Listing.vue
@@ -17,6 +17,7 @@
     </div>
 </template>
 <script>
+import Vue from "vue";
 import VirtualList from "vue-virtual-scroll-list";
 import { reverse, throttle } from "lodash";
 import LoadingSpan from "components/LoadingSpan";
@@ -66,9 +67,8 @@ export default {
             /* This function merges the existing data with new incoming data. */
             if (this.queryKey != this.queryCurrent) {
                 this.queryCurrent = this.queryKey;
-                this.items = [];
+                this.items.splice(0);
             } else if (this.payload) {
-                let hasNewItems = false;
                 for (const item of this.payload) {
                     const itemIndex = item[this.itemKey];
                     if (this.items[itemIndex]) {
@@ -77,13 +77,9 @@ export default {
                             localItem[key] = item[key];
                         });
                     } else {
-                        hasNewItems = true;
-                        this.items[itemIndex] = item;
+                        Vue.set(this.items, itemIndex, item);
                     }
                 }
-                if (hasNewItems) {
-                    this.items = this.items.slice();
-                }
             }
         },
         onScrollHandler(event) {
diff --git a/client/src/components/providers/UrlDataProvider.js b/client/src/components/providers/UrlDataProvider.js
index 4e4668259a2..02cf92790f3 100644
--- a/client/src/components/providers/UrlDataProvider.js
+++ b/client/src/components/providers/UrlDataProvider.js
@@ -7,6 +7,7 @@ async function urlData({ url }) {
     try {
         console.debug("Requesting data from: ", url);
         const { data } = await axios.get(`${getAppRoot()}${url}`);
+        console.debug("Received response");
         return data;
     } catch (e) {
         rethrowSimple(e);

From e06f124d2cea0726d77b48a4b5e59b617b447967 Mon Sep 17 00:00:00 2001
From: Aysam Guerler <aysam.guerler@gmail.com>
Date: Sat, 5 Mar 2022 13:54:01 -0500
Subject: [PATCH 86/95] Update
 client/src/components/History/CurrentCollection/CollectionPanel.vue

Co-authored-by: Marius van den Beek <m.vandenbeek@gmail.com>
---
 .../components/History/CurrentCollection/CollectionPanel.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index a66999b5dfc..37098389793 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -86,8 +86,8 @@ export default {
         },
         url() {
             const source = this.dsc.object || this.dsc;
-            const contentUrl = source.contents_url.substring(1);
-            return `${contentUrl}?offset=${this.offset}&limit=${this.limit}`;
+            const contentsUrl = source.contents_url.substring(1);
+            return `${contentsUrl}?offset=${this.offset}&limit=${this.limit}`;
         },
     },
     methods: {

From 20323874ce1132e23f2251a1335a18aaf0d7977c Mon Sep 17 00:00:00 2001
From: Aysam Guerler <aysam.guerler@gmail.com>
Date: Sat, 5 Mar 2022 13:55:33 -0500
Subject: [PATCH 87/95] Update
 client/src/components/History/Content/ContentItem.vue

Co-authored-by: Marius van den Beek <m.vandenbeek@gmail.com>
---
 client/src/components/History/Content/ContentItem.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 6fbbe47e9cf..ad886ae31ca 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -78,6 +78,7 @@
                 </h5>
             </div>
         </div>
+        <-- collections are not expandable, so we only need the DatasetDetails component here -->
         <DatasetDetails v-if="expanded" @edit="onEdit" :item="item" />
     </div>
 </template>

From 72aa4d90aea3a96326aef84d6d0572542ac7da06 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 5 Mar 2022 14:21:58 -0500
Subject: [PATCH 88/95] Switch empty dataset status to success

---
 client/src/components/History/Content/contentState.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/History/Content/contentState.js b/client/src/components/History/Content/contentState.js
index cd8377e4394..046c80c57b8 100644
--- a/client/src/components/History/Content/contentState.js
+++ b/client/src/components/History/Content/contentState.js
@@ -35,7 +35,7 @@ export default {
     },
     /** has no data */
     empty: {
-        status: "danger",
+        status: "success",
         text: "No data",
     },
     /** has successfully completed running */

From 3ed117cce69ef5018716bcb3bfc46f7321d256f7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 5 Mar 2022 14:23:30 -0500
Subject: [PATCH 89/95] Do not fallback on populated state, if state cannot be
 determined

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

diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 4b2d61147a0..c7006c4d971 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -164,7 +164,7 @@ export default {
                 }
                 return "ok";
             } else {
-                return item.state || item.populated_state;
+                return item.state;
             }
         },
         hasMatches(payload) {

From 8bafeeaa9267676271f9670e3159b55838489247 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 5 Mar 2022 21:15:57 -0500
Subject: [PATCH 90/95] Remove no-permission state which is not provided
 through the api yet

---
 client/src/components/History/Content/ContentItem.vue | 2 +-
 client/src/components/History/Content/contentState.js | 7 -------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index ad886ae31ca..0b0a231f243 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -10,7 +10,7 @@
             <div class="clearfix overflow-hidden">
                 <div class="btn-group float-right">
                     <b-button
-                        v-if="expandable && state !== 'noPermission' && state !== 'discarded'"
+                        v-if="expandable && state !== 'discarded'"
                         :disabled="isUnavailable"
                         :title="displayButtonTitle"
                         class="px-1"
diff --git a/client/src/components/History/Content/contentState.js b/client/src/components/History/Content/contentState.js
index 046c80c57b8..0769960da9e 100644
--- a/client/src/components/History/Content/contentState.js
+++ b/client/src/components/History/Content/contentState.js
@@ -64,13 +64,6 @@ export default {
         text: "The job creating this dataset was cancelled before completion.",
         icon: "exclamation-circle",
     },
-    //TODO: not in trans.app.model.Dataset.states - is in database
-    /** not accessible to the current user (i.e. due to permissions) */
-    noPermission: {
-        status: "danger",
-        text: "You do not have permission to view this dataset.",
-        icon: "exclamation-circle",
-    },
     // found in job-state summary model?
     // this an actual state value or something derived from deleted prop?
     deleted: {

From 52b7fbc48857822c0aabd0a1a457555b3e94b06e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 5 Mar 2022 21:30:37 -0500
Subject: [PATCH 91/95] Use more declarative naming, expandable vs. isDataset,
 expanded vs. expandedDataset, writeable vs. isHistoryItem

---
 .../CollectionDescription.vue}                |  0
 .../History/Content/ContentItem.vue           | 34 +++++++++----------
 .../History/Content/GenericElement.vue        | 16 ++++-----
 .../History/Content/GenericItem.vue           | 14 ++++----
 .../CurrentCollection/CollectionDetails.vue   |  6 ++--
 .../CurrentCollection/CollectionPanel.vue     | 10 +++---
 .../History/CurrentHistory/HistoryPanel.vue   |  8 ++---
 client/src/components/History/Index.vue       |  4 +--
 8 files changed, 46 insertions(+), 46 deletions(-)
 rename client/src/components/History/Content/{ContentDescription.vue => Collection/CollectionDescription.vue} (100%)

diff --git a/client/src/components/History/Content/ContentDescription.vue b/client/src/components/History/Content/Collection/CollectionDescription.vue
similarity index 100%
rename from client/src/components/History/Content/ContentDescription.vue
rename to client/src/components/History/Content/Collection/CollectionDescription.vue
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 0b0a231f243..21e692b3de6 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -10,7 +10,7 @@
             <div class="clearfix overflow-hidden">
                 <div class="btn-group float-right">
                     <b-button
-                        v-if="expandable && state !== 'discarded'"
+                        v-if="isDataset && state !== 'discarded'"
                         :disabled="isUnavailable"
                         :title="displayButtonTitle"
                         class="px-1"
@@ -20,7 +20,7 @@
                         <span class="fa fa-eye" />
                     </b-button>
                     <b-button
-                        v-if="writeable && state != 'discarded'"
+                        v-if="isHistoryItem && state != 'discarded'"
                         :disabled="isUnavailable"
                         class="px-1"
                         title="Edit attributes"
@@ -30,7 +30,7 @@
                         <span class="fa fa-pencil" />
                     </b-button>
                     <b-button
-                        v-if="writeable && item.deleted"
+                        v-if="isHistoryItem && item.deleted"
                         class="px-1"
                         title="Undelete"
                         size="sm"
@@ -40,7 +40,7 @@
                         <span class="fa fa-trash-restore" />
                     </b-button>
                     <b-button
-                        v-else-if="writeable"
+                        v-else-if="isHistoryItem"
                         class="px-1"
                         title="Delete"
                         size="sm"
@@ -50,7 +50,7 @@
                         <span class="fa fa-trash" />
                     </b-button>
                     <b-button
-                        v-if="writeable && !item.visible"
+                        v-if="isHistoryItem && !item.visible"
                         class="px-1"
                         title="Unhide"
                         size="sm"
@@ -71,28 +71,28 @@
                     <span class="id hid">{{ id }}</span>
                     <span>:</span>
                     <span class="content-title name">{{ name }}</span>
-                    <ContentDescription :item="item" />
-                    <div v-if="!expanded && item.tags && item.tags.length > 0" class="nametags">
+                    <CollectionDescription v-if="!isDataset" :item="item" />
+                    <div v-if="!expandDataset && item.tags && item.tags.length > 0" class="nametags">
                         <Nametag v-for="tag in item.tags" :key="tag" :tag="tag" />
                     </div>
                 </h5>
             </div>
         </div>
-        <-- collections are not expandable, so we only need the DatasetDetails component here -->
-        <DatasetDetails v-if="expanded" @edit="onEdit" :item="item" />
+        <!-- collections are not expandable, so we only need the DatasetDetails component here -->
+        <DatasetDetails v-if="expandDataset" @edit="onEdit" :item="item" />
     </div>
 </template>
 
 <script>
 import { backboneRoute, useGalaxy, iframeRedirect } from "components/plugins/legacyNavigation";
 import { Nametag } from "components/Nametags";
-import ContentDescription from "./ContentDescription";
+import CollectionDescription from "./Collection/CollectionDescription";
 import DatasetDetails from "./Dataset/DatasetDetails";
 import CONTENTSTATE from "./contentState";
 
 export default {
     components: {
-        ContentDescription,
+        CollectionDescription,
         DatasetDetails,
         Nametag,
     },
@@ -101,11 +101,11 @@ export default {
         id: { type: Number, required: true },
         name: { type: String, required: true },
         state: { type: String, default: null },
-        expanded: { type: Boolean, required: true },
+        expandDataset: { type: Boolean, required: true },
         selected: { type: Boolean, default: false },
-        expandable: { type: Boolean, default: true },
+        isDataset: { type: Boolean, default: true },
         selectable: { type: Boolean, default: false },
-        writeable: { type: Boolean, default: true },
+        isHistoryItem: { type: Boolean, default: true },
     },
     computed: {
         contentId() {
@@ -184,10 +184,10 @@ export default {
             }
         },
         onClick() {
-            if (this.expandable) {
-                this.$emit("update:expanded", !this.expanded);
+            if (this.isDataset) {
+                this.$emit("update:expand-dataset", !this.expandDataset);
             } else {
-                this.$emit("drilldown", this.item);
+                this.$emit("view-collection", this.item);
             }
         },
     },
diff --git a/client/src/components/History/Content/GenericElement.vue b/client/src/components/History/Content/GenericElement.vue
index d732e0326a7..421244cea5d 100644
--- a/client/src/components/History/Content/GenericElement.vue
+++ b/client/src/components/History/Content/GenericElement.vue
@@ -4,13 +4,13 @@
             :item="item"
             :id="item.element_index"
             :name="item.element_identifier"
-            :expandable="item.element_type == 'hda'"
+            :is-dataset="item.element_type == 'hda'"
             :state="item.object.state"
-            :expanded="expanded"
-            :writeable="false"
-            @update:expanded="expanded = $event"
-            @drilldown="drilldown = !drilldown" />
-        <GenericItem v-if="drilldown" :itemId="item.object.id" :itemSrc="item.object.history_content_type" />
+            :expand-dataset="expandDataset"
+            :is-history-item="false"
+            @update:expand-dataset="expandDataset = $event"
+            @view-collection="viewCollection = !viewCollection" />
+        <GenericItem v-if="viewCollection" :itemId="item.object.id" :itemSrc="item.object.history_content_type" />
     </div>
 </template>
 
@@ -30,8 +30,8 @@ export default {
     },
     data() {
         return {
-            drilldown: false,
-            expanded: false,
+            viewCollection: false,
+            expandDataset: false,
         };
     },
 };
diff --git a/client/src/components/History/Content/GenericItem.vue b/client/src/components/History/Content/GenericItem.vue
index d5087fb8b6b..8a76df44c0a 100644
--- a/client/src/components/History/Content/GenericItem.vue
+++ b/client/src/components/History/Content/GenericItem.vue
@@ -7,14 +7,14 @@
                 :id="item.hid"
                 :name="item.name"
                 :state="item.state || item.populated_state"
-                :expanded="expanded"
-                :expandable="item.history_content_type == 'dataset'"
-                @update:expanded="expanded = $event"
-                @drilldown="drilldown = !drilldown"
+                :expand-dataset="expandDataset"
+                :is-dataset="item.history_content_type == 'dataset'"
+                @update:expand-dataset="expandDataset = $event"
+                @view-collection="viewCollection = !viewCollection"
                 @delete="onDelete"
                 @undelete="onUndelete"
                 @unhide="onUnhide" />
-            <div v-if="drilldown">
+            <div v-if="viewCollection">
                 <div v-for="(collectionItem, collectionIndex) in item.elements" :key="collectionIndex">
                     <GenericElement :item="collectionItem" />
                 </div>
@@ -50,8 +50,8 @@ export default {
     },
     data() {
         return {
-            drilldown: false,
-            expanded: false,
+            viewCollection: false,
+            expandDataset: false,
         };
     },
     computed: {
diff --git a/client/src/components/History/CurrentCollection/CollectionDetails.vue b/client/src/components/History/CurrentCollection/CollectionDetails.vue
index e669d4a648a..d978ac6627e 100644
--- a/client/src/components/History/CurrentCollection/CollectionDetails.vue
+++ b/client/src/components/History/CurrentCollection/CollectionDetails.vue
@@ -7,18 +7,18 @@
         @save="$emit('update:dsc', $event)">
         <template v-slot:name>
             <h3 data-description="collection name display">{{ name || "Collection" }}</h3>
-            <ContentDescription :item="dsc" />
+            <CollectionDescription :item="dsc" />
         </template>
     </Details>
 </template>
 
 <script>
 import Details from "components/History/Layout/Details";
-import ContentDescription from "components/History/Content/ContentDescription";
+import CollectionDescription from "components/History/Content/Collection/CollectionDescription";
 
 export default {
     components: {
-        ContentDescription,
+        CollectionDescription,
         Details,
     },
     props: {
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index 37098389793..ac8bc5647a7 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -26,12 +26,12 @@
                                 :item="item"
                                 :id="item.element_index"
                                 :name="item.element_identifier"
-                                :expandable="item.element_type == 'hda'"
+                                :is-dataset="item.element_type == 'hda'"
                                 :state="item.object ? item.object.state : item.populated_state"
-                                :expanded="isExpanded(item)"
-                                :writeable="false"
-                                @update:expanded="setExpanded(item, $event)"
-                                @drilldown="$emit('viewCollection', item)" />
+                                :expand-dataset="isExpanded(item)"
+                                :is-history-item="false"
+                                @update:expand-dataset="setExpanded(item, $event)"
+                                @view-collection="$emit('view-collection', item)" />
                         </template>
                     </Listing>
                 </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index c7006c4d971..50a0f763f6b 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -65,13 +65,13 @@
                                     :id="item.hid"
                                     :name="item.name"
                                     :state="getState(item)"
-                                    :expanded="isExpanded(item)"
-                                    :expandable="item.history_content_type == 'dataset'"
+                                    :expand-dataset="isExpanded(item)"
+                                    :is-dataset="item.history_content_type == 'dataset'"
                                     :selected="isSelected(item)"
                                     :selectable="showSelection"
-                                    @update:expanded="setExpanded(item, $event)"
+                                    @update:expand-dataset="setExpanded(item, $event)"
                                     @update:selected="setSelected(item, $event)"
-                                    @drilldown="$emit('viewCollection', item)"
+                                    @view-collection="$emit('view-collection', item)"
                                     @delete="onDelete"
                                     @undelete="onUndelete"
                                     @unhide="onUnhide" />
diff --git a/client/src/components/History/Index.vue b/client/src/components/History/Index.vue
index 98c116a1a60..a426ab9155f 100644
--- a/client/src/components/History/Index.vue
+++ b/client/src/components/History/Index.vue
@@ -6,7 +6,7 @@
                     v-if="!breadcrumbs.length"
                     :history="currentHistory"
                     v-on="handlers"
-                    @viewCollection="onViewCollection">
+                    @view-collection="onViewCollection">
                     <template v-slot:navigation>
                         <HistoryNavigation
                             v-on="handlers"
@@ -19,7 +19,7 @@
                     v-else-if="breadcrumbs.length"
                     :history="currentHistory"
                     :selected-collections.sync="breadcrumbs"
-                    @viewCollection="onViewCollection" />
+                    @view-collection="onViewCollection" />
                 <div v-else>
                     <span class="sr-only">Loading...</span>
                 </div>

From c6ff57e7761a5edd446c80de83ad935851ca544a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 5 Mar 2022 23:37:52 -0500
Subject: [PATCH 92/95] Use root-collection for collection panel source
 observation

---
 .../components/History/CurrentCollection/CollectionPanel.vue   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index ac8bc5647a7..5859d6c5d2d 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -85,7 +85,8 @@ export default {
             return this.selectedCollections[0];
         },
         url() {
-            const source = this.dsc.object || this.dsc;
+            // either the observered source is a collection element or the initial history item i.e. root collection
+            const source = this.dsc.object || this.rootCollection;
             const contentsUrl = source.contents_url.substring(1);
             return `${contentsUrl}?offset=${this.offset}&limit=${this.limit}`;
         },

From 1cbb810cbb2009be3ccd35857bb21ca7ed77068a Mon Sep 17 00:00:00 2001
From: Aysam Guerler <aysam.guerler@gmail.com>
Date: Sat, 5 Mar 2022 23:53:11 -0500
Subject: [PATCH 93/95] Update
 client/src/components/History/Content/ContentItem.vue

Co-authored-by: Marius van den Beek <m.vandenbeek@gmail.com>
---
 client/src/components/History/Content/ContentItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 21e692b3de6..fd94278ab7d 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -167,7 +167,7 @@ export default {
             evt.dataTransfer.setData("text", JSON.stringify([this.item]));
         },
         onDisplay() {
-            const id = this.item.id;
+            const id = this.item.object?.id || this.item.id;
             useGalaxy((Galaxy) => {
                 if (Galaxy.frame && Galaxy.frame.active) {
                     Galaxy.frame.addDataset(id);

From 0825e4d85e8e7e6a2fdc5372c0be4563dcb0932d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 6 Mar 2022 00:33:37 -0500
Subject: [PATCH 94/95] Adjust content item operation conditions, align state
 model to backend, restore test cases

---
 .../Collection/CollectionDescription.vue      |  6 +-
 .../History/Content/ContentItem.vue           | 76 +++++++++-------
 .../History/Content/GenericElement.vue        |  3 +-
 .../History/Content/GenericItem.vue           |  1 -
 .../History/Content/contentState.js           | 91 +++++++++----------
 .../CurrentCollection/CollectionPanel.vue     |  3 +-
 .../CurrentHistory/HistoryOperations.vue      |  7 ++
 .../History/CurrentHistory/HistoryPanel.vue   | 17 +---
 .../src/components/History/Layout/Details.vue |  6 +-
 client/src/components/Tags/StatelessTags.vue  |  2 +-
 lib/galaxy/managers/hdas.py                   |  4 +-
 lib/galaxy/selenium/navigation.yml            |  1 +
 .../selenium/test_history_panel.py            | 13 ++-
 .../test_workflow_invocation_details.py       |  1 -
 14 files changed, 111 insertions(+), 120 deletions(-)

diff --git a/client/src/components/History/Content/Collection/CollectionDescription.vue b/client/src/components/History/Content/Collection/CollectionDescription.vue
index 4e94faaca8f..f38dff0cacf 100644
--- a/client/src/components/History/Content/Collection/CollectionDescription.vue
+++ b/client/src/components/History/Content/Collection/CollectionDescription.vue
@@ -25,12 +25,10 @@ export default {
             return this.labels[this.collectionType] || "nested list";
         },
         collectionType() {
-            const source = this.item.object || this.item;
-            return source.collection_type;
+            return this.item.collection_type;
         },
         elementCount() {
-            const source = this.item.object || this.item;
-            return source.element_count;
+            return this.item.element_count;
         },
     },
 };
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index fd94278ab7d..5a5fe83d479 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -10,8 +10,8 @@
             <div class="clearfix overflow-hidden">
                 <div class="btn-group float-right">
                     <b-button
-                        v-if="isDataset && state !== 'discarded'"
-                        :disabled="isUnavailable"
+                        v-if="isDataset"
+                        :disabled="displayDisabled"
                         :title="displayButtonTitle"
                         class="px-1"
                         size="sm"
@@ -20,8 +20,8 @@
                         <span class="fa fa-eye" />
                     </b-button>
                     <b-button
-                        v-if="isHistoryItem && state != 'discarded'"
-                        :disabled="isUnavailable"
+                        v-if="isHistoryItem"
+                        :disabled="editDisabled"
                         class="px-1"
                         title="Edit attributes"
                         size="sm"
@@ -29,26 +29,26 @@
                         @click.stop="onEdit">
                         <span class="fa fa-pencil" />
                     </b-button>
+                    <b-button
+                        v-if="isHistoryItem && !item.deleted"
+                        class="px-1"
+                        title="Delete"
+                        size="sm"
+                        variant="link"
+                        :disabled="item.purged"
+                        @click.stop="$emit('delete', item)">
+                        <span class="fa fa-trash" />
+                    </b-button>
                     <b-button
                         v-if="isHistoryItem && item.deleted"
                         class="px-1"
                         title="Undelete"
                         size="sm"
                         variant="link"
-                        :disabled="isUnavailable"
+                        :disabled="item.purged"
                         @click.stop="$emit('undelete', item)">
                         <span class="fa fa-trash-restore" />
                     </b-button>
-                    <b-button
-                        v-else-if="isHistoryItem"
-                        class="px-1"
-                        title="Delete"
-                        size="sm"
-                        variant="link"
-                        :disabled="isUnavailable"
-                        @click.stop="$emit('delete', item)">
-                        <span class="fa fa-trash" />
-                    </b-button>
                     <b-button
                         v-if="isHistoryItem && !item.visible"
                         class="px-1"
@@ -97,20 +97,31 @@ export default {
         Nametag,
     },
     props: {
+        expandDataset: { type: Boolean, required: true },
         item: { type: Object, required: true },
         id: { type: Number, required: true },
-        name: { type: String, required: true },
-        state: { type: String, default: null },
-        expandDataset: { type: Boolean, required: true },
-        selected: { type: Boolean, default: false },
         isDataset: { type: Boolean, default: true },
-        selectable: { type: Boolean, default: false },
         isHistoryItem: { type: Boolean, default: true },
+        name: { type: String, required: true },
+        selected: { type: Boolean, default: false },
+        selectable: { type: Boolean, default: false },
     },
     computed: {
         contentId() {
             return `dataset-${this.item.id}`;
         },
+        state() {
+            if (this.item.job_state_summary) {
+                for (const key of ["error", "failed", "paused", "upload", "running"]) {
+                    if (this.item.job_state_summary[key] > 0) {
+                        return key;
+                    }
+                }
+                return "ok";
+            } else {
+                return this.item.state;
+            }
+        },
         clsStatus() {
             const status = CONTENTSTATE[this.state] && CONTENTSTATE[this.state].status;
             if (this.selected) {
@@ -125,30 +136,28 @@ export default {
             if (this.item.purged) {
                 return "Cannot display datasets removed from disk.";
             }
-            if (this.isUnavailable) {
+            if (this.displayDisabled) {
                 return "This dataset is not yet viewable.";
             }
             return "Display";
         },
-        deleteButtonTitle() {
-            return this.item.purged
-                ? "This dataset has been permanently deleted."
-                : this.item.deleted
-                ? "Undelete"
-                : "Delete";
+        displayDisabled() {
+            return this.item.purged || ["discarded", "new", "upload"].includes(this.state);
         },
         editButtonTitle() {
-            if (this.item.deleted) {
-                return "Undelete this dataset to edit attributes.";
-            }
             if (this.item.purged) {
                 return "Cannot edit attributes of datasets removed from disk.";
             }
-            if (this.isUnavailable) {
+            if (this.editDisabled) {
                 return "This dataset is not yet editable.";
             }
             return "Edit Attributes";
         },
+        editDisabled() {
+            return (
+                this.item.purged || ["discarded", "new", "upload", "queued", "running", "waiting"].includes(this.state)
+            );
+        },
         icon() {
             const stateIcon = CONTENTSTATE[this.state] && CONTENTSTATE[this.state].icon;
             if (stateIcon) {
@@ -156,9 +165,6 @@ export default {
             }
             return null;
         },
-        isUnavailable() {
-            return this.item.purged || ["upload", "new"].includes(this.state);
-        },
     },
     methods: {
         onDragStart(evt) {
@@ -167,7 +173,7 @@ export default {
             evt.dataTransfer.setData("text", JSON.stringify([this.item]));
         },
         onDisplay() {
-            const id = this.item.object?.id || this.item.id;
+            const id = this.item.id;
             useGalaxy((Galaxy) => {
                 if (Galaxy.frame && Galaxy.frame.active) {
                     Galaxy.frame.addDataset(id);
diff --git a/client/src/components/History/Content/GenericElement.vue b/client/src/components/History/Content/GenericElement.vue
index 421244cea5d..98d7690927f 100644
--- a/client/src/components/History/Content/GenericElement.vue
+++ b/client/src/components/History/Content/GenericElement.vue
@@ -1,11 +1,10 @@
 <template>
     <div>
         <ContentItem
-            :item="item"
+            :item="item.object"
             :id="item.element_index"
             :name="item.element_identifier"
             :is-dataset="item.element_type == 'hda'"
-            :state="item.object.state"
             :expand-dataset="expandDataset"
             :is-history-item="false"
             @update:expand-dataset="expandDataset = $event"
diff --git a/client/src/components/History/Content/GenericItem.vue b/client/src/components/History/Content/GenericItem.vue
index 8a76df44c0a..e0b75c4c55a 100644
--- a/client/src/components/History/Content/GenericItem.vue
+++ b/client/src/components/History/Content/GenericItem.vue
@@ -6,7 +6,6 @@
                 :item="item"
                 :id="item.hid"
                 :name="item.name"
-                :state="item.state || item.populated_state"
                 :expand-dataset="expandDataset"
                 :is-dataset="item.history_content_type == 'dataset'"
                 @update:expand-dataset="expandDataset = $event"
diff --git a/client/src/components/History/Content/contentState.js b/client/src/components/History/Content/contentState.js
index 0769960da9e..2d0fa9927a1 100644
--- a/client/src/components/History/Content/contentState.js
+++ b/client/src/components/History/Content/contentState.js
@@ -1,10 +1,45 @@
+/*
+    Client representation of state and state messages. See: https://github.com/galaxyproject/galaxy/blob/dev/lib/galaxy/model/__init__.py#L3292
+    for a list of available states.
+*/
 export default {
-    /** is uploading and not ready */
-    upload: {
+    /** deleted while uploading */
+    discarded: {
+        status: "danger",
+        text: "The job creating this dataset was cancelled before completion.",
+        icon: "exclamation-circle",
+    },
+    /** has no data */
+    empty: {
+        status: "success",
+        text: "No data",
+    },
+    /** the tool producing this dataset failed */
+    error: {
+        status: "danger",
+        text: "An error occurred with this dataset",
+        icon: "exclamation-circle",
+    },
+    /** metadata discovery/setting failed or errored (but otherwise ok) */
+    failed_metadata: {
+        status: "danger",
+    },
+    /** was created without a tool */
+    new: {
         status: "warning",
-        text: "This dataset is currently uploading.",
+        text: "This is a new dataset and not all of its data are available yet.",
         icon: "clock",
     },
+    /** has successfully completed running */
+    ok: {
+        status: "success",
+    },
+    /** the job that will produce the dataset paused */
+    paused: {
+        status: "info",
+        text: "This job is paused. Use the 'Resume Paused Jobs' in the history menu to resume.",
+        icon: "pause",
+    },
     /** the job that will produce the dataset queued in the runner */
     queued: {
         status: "warning",
@@ -23,54 +58,10 @@ export default {
         text: "Metadata is being auto-detected.",
         icon: "clock",
     },
-    /** was created without a tool */
-    new: {
+    /** is uploading and not ready */
+    upload: {
         status: "warning",
-        text: "This is a new dataset and not all of its data are available yet.",
+        text: "This dataset is currently uploading.",
         icon: "clock",
     },
-    /** job is being created, but not put into job queue yet */
-    waiting: {
-        status: "default",
-    },
-    /** has no data */
-    empty: {
-        status: "success",
-        text: "No data",
-    },
-    /** has successfully completed running */
-    ok: {
-        status: "success",
-    },
-    /** the job that will produce the dataset paused */
-    paused: {
-        status: "info",
-        text: "This job is paused. Use the 'Resume Paused Jobs' in the history menu to resume.",
-        icon: "pause",
-    },
-    /** metadata discovery/setting failed or errored (but otherwise ok) */
-    failed_metadata: {
-        status: "danger",
-    },
-    /** the tool producing this dataset failed */
-    error: {
-        status: "danger",
-        text: "An error occurred with this dataset",
-        icon: "exclamation-circle",
-    },
-    /** deleted while uploading */
-    discarded: {
-        status: "danger",
-        text: "The job creating this dataset was cancelled before completion.",
-        icon: "exclamation-circle",
-    },
-    // found in job-state summary model?
-    // this an actual state value or something derived from deleted prop?
-    deleted: {
-        status: "danger",
-        icon: "exclamation-circle",
-    },
-    loading: {
-        status: "warning",
-    },
 };
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index 5859d6c5d2d..e3365a8b579 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -23,11 +23,10 @@
                     <Listing item-key="element_index" :payload="payload" :limit="limit" @scroll="onScroll">
                         <template v-slot:history-item="{ item }">
                             <ContentItem
-                                :item="item"
+                                :item="item.object"
                                 :id="item.element_index"
                                 :name="item.element_identifier"
                                 :is-dataset="item.element_type == 'hda'"
-                                :state="item.object ? item.object.state : item.populated_state"
                                 :expand-dataset="isExpanded(item)"
                                 :is-history-item="false"
                                 @update:expand-dataset="setExpanded(item, $event)"
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations.vue
index 5df117b38db..6b052a82b2e 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations.vue
@@ -283,3 +283,10 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+// remove borders around buttons in menu
+.content-operations .btn-group .btn {
+    border-color: transparent !important;
+}
+</style>
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 50a0f763f6b..73612ba591e 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -41,7 +41,7 @@
                             @update:content-selection="selectItems"
                             @update:show-selection="setShowSelection"
                             @reset-selection="resetSelection"
-                            @hide-selection="onhideSelection"
+                            @hide-selection="onHideSelection"
                             @select-all="selectItems(payload)"
                             @collapse-all="collapseAll" />
                     </template>
@@ -64,7 +64,6 @@
                                     :item="item"
                                     :id="item.hid"
                                     :name="item.name"
-                                    :state="getState(item)"
                                     :expand-dataset="isExpanded(item)"
                                     :is-dataset="item.history_content_type == 'dataset'"
                                     :selected="isSelected(item)"
@@ -155,25 +154,13 @@ export default {
         },
     },
     methods: {
-        getState(item) {
-            if (item.job_state_summary) {
-                for (const key of ["error", "failed", "paused", "upload", "running"]) {
-                    if (item.job_state_summary[key] > 0) {
-                        return key;
-                    }
-                }
-                return "ok";
-            } else {
-                return item.state;
-            }
-        },
         hasMatches(payload) {
             return !!payload && payload.length > 0;
         },
         onScroll(offset) {
             this.offset = offset;
         },
-        onhideSelection(selectedItems) {
+        onHideSelection(selectedItems) {
             selectedItems.forEach((item) => {
                 this.hideSelection[item.hid] = true;
             });
diff --git a/client/src/components/History/Layout/Details.vue b/client/src/components/History/Layout/Details.vue
index 2d1f4455c25..3d3454d07a0 100644
--- a/client/src/components/History/Layout/Details.vue
+++ b/client/src/components/History/Layout/Details.vue
@@ -27,7 +27,8 @@
                 placeholder="Name"
                 trim
                 max-rows="4"
-                data-description="name input" />
+                data-description="name input"
+                @keyup.esc="onToggle" />
             <b-textarea
                 v-if="showAnnotation"
                 class="mb-2"
@@ -35,7 +36,8 @@
                 placeholder="Annotation (optional)"
                 trim
                 max-rows="4"
-                data-description="annotation input" />
+                data-description="annotation input"
+                @keyup.esc="onToggle" />
             <StatelessTags v-if="localProps.tags" class="mb-3 tags" v-model="localProps.tags" />
         </div>
         <nav class="edit-controls">
diff --git a/client/src/components/Tags/StatelessTags.vue b/client/src/components/Tags/StatelessTags.vue
index 5e33fe49d84..110681d40cb 100644
--- a/client/src/components/Tags/StatelessTags.vue
+++ b/client/src/components/Tags/StatelessTags.vue
@@ -49,7 +49,7 @@ export default {
     },
     data() {
         // initialize toggle value
-        const isClosed = this.useToggleLink && this.value && this.length > this.maxVisibleTags;
+        const isClosed = this.useToggleLink && this.value.length > this.maxVisibleTags;
 
         return {
             tagText: "",
diff --git a/lib/galaxy/managers/hdas.py b/lib/galaxy/managers/hdas.py
index 8c9c7ca6022..dc08ce8eec4 100644
--- a/lib/galaxy/managers/hdas.py
+++ b/lib/galaxy/managers/hdas.py
@@ -329,6 +329,8 @@ class HDASerializer(  # datasets._UnflattenedMetadataDatasetAssociationSerialize
                 "meta_files",
                 "data_type",
                 "peek",
+                "creating_job",
+                "rerunnable",
                 "uuid",
                 "permissions",
                 "file_name",
@@ -343,8 +345,6 @@ class HDASerializer(  # datasets._UnflattenedMetadataDatasetAssociationSerialize
                 "created_from_basename",
                 "hashes",
                 "sources",
-                "rerunnable",
-                "creating_job",
             ],
             include_keys_from="summary",
         )
diff --git a/lib/galaxy/selenium/navigation.yml b/lib/galaxy/selenium/navigation.yml
index d393928258a..62e5a8fee97 100644
--- a/lib/galaxy/selenium/navigation.yml
+++ b/lib/galaxy/selenium/navigation.yml
@@ -197,6 +197,7 @@ history_panel:
       toggle: '${_} .toggle-link'
       display: '${_} .tag-area .tag-name'
       input: '${_} input'
+      tag_area: '${_} .tag-area'
       tag_close_btn: '${_} .ti-icon-close'
 
   multi_operations:
diff --git a/lib/galaxy_test/selenium/test_history_panel.py b/lib/galaxy_test/selenium/test_history_panel.py
index 8f3a6b11441..9bb1903feb9 100644
--- a/lib/galaxy_test/selenium/test_history_panel.py
+++ b/lib/galaxy_test/selenium/test_history_panel.py
@@ -53,7 +53,7 @@ class HistoryPanelTestCase(SeleniumTestCase):
         editable_text_input_element = self.history_panel_name_input()
         editable_text_input_element.send_keys(NEW_HISTORY_NAME)
         self.send_escape(editable_text_input_element)
-        # self.components.history_panel.name_edit_input.wait_for_absent_or_hidden()
+        self.components.history_panel.name_edit_input.wait_for_absent_or_hidden()
         assert NEW_HISTORY_NAME not in self.history_panel_name()
 
     @selenium_test
@@ -170,9 +170,12 @@ class HistoryPanelTestCase(SeleniumTestCase):
         tags = add_tags(tags_size)
         assert_current_tags(tags)
 
-        # Todo: add more tags to non-empty tags area
-        # tags += add_tags(tags_size)
-        # assert_current_tags(tags)
+        # add more tags to non-empty tags area
+        tags += add_tags(tags_size)
+        self.sleep_for(self.wait_types.UX_RENDER)
+        if self.is_beta_history():
+            tags.sort()
+        assert_current_tags(tags)
 
         # delete all tags
         expected_tags_len = len(tags)
@@ -183,7 +186,7 @@ class HistoryPanelTestCase(SeleniumTestCase):
     # after about 5 tags, a toggle link shows up and you have to click it to see the full list
     def open_tags(self):
         tags_component = self.components.history_panel.tag_editor.selector(scope=".history-index")
-        if not tags_component.toggle.is_absent:
+        if tags_component.tag_area.is_absent:
             tags_component.toggle.wait_for_and_click()
         tags_component.display.wait_for_visible()
         return tags_component.display
diff --git a/lib/galaxy_test/selenium/test_workflow_invocation_details.py b/lib/galaxy_test/selenium/test_workflow_invocation_details.py
index 94e8423b2a2..42e8c95580d 100644
--- a/lib/galaxy_test/selenium/test_workflow_invocation_details.py
+++ b/lib/galaxy_test/selenium/test_workflow_invocation_details.py
@@ -73,6 +73,5 @@ class WorkflowInvocationDetailsTestCase(SeleniumTestCase):
         invocations.step_output_collection(order_index="1").wait_for_and_click()
         invocations.step_output_collection_toggle(order_index="1").wait_for_and_click()
         invocations.step_output_collection_element_identifier(element_identifier="forward").wait_for_and_click()
-
         datatype = invocations.step_output_collection_element_datatype(order_index="1").wait_for_text()
         assert datatype == "txt"

From d722a623ec9bcd8f21cbd6da60f2e179fe823e07 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 7 Mar 2022 13:45:28 -0500
Subject: [PATCH 95/95] Use solid font awesome icons

---
 .../History/Content/ContentItem.vue           | 20 ++++++++-----------
 .../History/Content/contentState.js           |  4 ++--
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 5a5fe83d479..6b7e075a5bf 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -17,7 +17,7 @@
                         size="sm"
                         variant="link"
                         @click.stop="onDisplay">
-                        <span class="fa fa-eye" />
+                        <icon icon="eye" />
                     </b-button>
                     <b-button
                         v-if="isHistoryItem"
@@ -27,7 +27,7 @@
                         size="sm"
                         variant="link"
                         @click.stop="onEdit">
-                        <span class="fa fa-pencil" />
+                        <icon icon="pen" />
                     </b-button>
                     <b-button
                         v-if="isHistoryItem && !item.deleted"
@@ -37,7 +37,7 @@
                         variant="link"
                         :disabled="item.purged"
                         @click.stop="$emit('delete', item)">
-                        <span class="fa fa-trash" />
+                        <icon icon="trash" />
                     </b-button>
                     <b-button
                         v-if="isHistoryItem && item.deleted"
@@ -47,7 +47,7 @@
                         variant="link"
                         :disabled="item.purged"
                         @click.stop="$emit('undelete', item)">
-                        <span class="fa fa-trash-restore" />
+                        <icon icon="trash-restore" />
                     </b-button>
                     <b-button
                         v-if="isHistoryItem && !item.visible"
@@ -56,7 +56,7 @@
                         size="sm"
                         variant="link"
                         @click.stop="$emit('unhide', item)">
-                        <span class="fa fa-unlock" />
+                        <icon icon="unlock" />
                     </b-button>
                 </div>
                 <h5 class="float-left p-1 w-75 font-weight-bold">
@@ -67,7 +67,7 @@
                             @click.stop="$emit('update:selected', false)" />
                         <span v-else class="fa fa-lg fa-square-o" @click.stop="$emit('update:selected', true)" />
                     </div>
-                    <span :class="icon" />
+                    <icon v-if="stateIcon" :icon="stateIcon" />
                     <span class="id hid">{{ id }}</span>
                     <span>:</span>
                     <span class="content-title name">{{ name }}</span>
@@ -158,12 +158,8 @@ export default {
                 this.item.purged || ["discarded", "new", "upload", "queued", "running", "waiting"].includes(this.state)
             );
         },
-        icon() {
-            const stateIcon = CONTENTSTATE[this.state] && CONTENTSTATE[this.state].icon;
-            if (stateIcon) {
-                return `fa fa-${stateIcon}`;
-            }
-            return null;
+        stateIcon() {
+            return CONTENTSTATE[this.state] && CONTENTSTATE[this.state].icon;
         },
     },
     methods: {
diff --git a/client/src/components/History/Content/contentState.js b/client/src/components/History/Content/contentState.js
index 2d0fa9927a1..b59fdcbeae8 100644
--- a/client/src/components/History/Content/contentState.js
+++ b/client/src/components/History/Content/contentState.js
@@ -7,7 +7,7 @@ export default {
     discarded: {
         status: "danger",
         text: "The job creating this dataset was cancelled before completion.",
-        icon: "exclamation-circle",
+        icon: "exclamation-triangle",
     },
     /** has no data */
     empty: {
@@ -18,7 +18,7 @@ export default {
     error: {
         status: "danger",
         text: "An error occurred with this dataset",
-        icon: "exclamation-circle",
+        icon: "exclamation-triangle",
     },
     /** metadata discovery/setting failed or errored (but otherwise ok) */
     failed_metadata: {