diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 640637a45aa..99a256a94f0 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -38,57 +38,18 @@
                         <Nametag v-for="tag in item.tags" :key="tag" :tag="tag" />
                     </div>
                 </span>
-                <span class="align-self-start btn-group">
-                    <b-button
-                        v-if="isDataset"
-                        :disabled="displayDisabled"
-                        :title="displayButtonTitle"
-                        class="px-1"
-                        size="sm"
-                        variant="link"
-                        @click.stop="onDisplay">
-                        <icon icon="eye" />
-                    </b-button>
-                    <b-button
-                        v-if="isHistoryItem"
-                        :disabled="editDisabled"
-                        class="px-1"
-                        title="Edit attributes"
-                        size="sm"
-                        variant="link"
-                        @click.stop="onEdit">
-                        <icon icon="pen" />
-                    </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)">
-                        <icon icon="trash" />
-                    </b-button>
-                    <b-button
-                        v-if="isHistoryItem && item.deleted"
-                        class="px-1"
-                        title="Undelete"
-                        size="sm"
-                        variant="link"
-                        :disabled="item.purged"
-                        @click.stop="$emit('undelete', item)">
-                        <icon icon="trash-restore" />
-                    </b-button>
-                    <b-button
-                        v-if="isHistoryItem && !item.visible"
-                        class="px-1"
-                        title="Unhide"
-                        size="sm"
-                        variant="link"
-                        @click.stop="$emit('unhide', item)">
-                        <icon icon="unlock" />
-                    </b-button>
-                </span>
+                <ContentOptions
+                    :is-dataset="isDataset"
+                    :is-deleted="item.deleted"
+                    :is-history-item="isHistoryItem"
+                    :is-purged="item.purged"
+                    :is-visible="item.visible"
+                    :state="state"
+                    @delete="$emit('delete')"
+                    @display="onDisplay"
+                    @edit="onEdit"
+                    @undelete="$emit('undelete')"
+                    @unhide="$emit('delete')" />
             </div>
         </div>
         <!-- collections are not expandable, so we only need the DatasetDetails component here -->
@@ -102,12 +63,14 @@
 import { backboneRoute, useGalaxy, iframeRedirect } from "components/plugins/legacyNavigation";
 import { Nametag } from "components/Nametags";
 import CollectionDescription from "./Collection/CollectionDescription";
+import ContentOptions from "./ContentOptions";
 import DatasetDetails from "./Dataset/DatasetDetails";
 import STATES from "./contentStates";
 
 export default {
     components: {
         CollectionDescription,
+        ContentOptions,
         DatasetDetails,
         Nametag,
     },
@@ -138,32 +101,6 @@ export default {
         contentState() {
             return STATES[this.state] && STATES[this.state];
         },
-        displayButtonTitle() {
-            if (this.item.purged) {
-                return "Cannot display datasets removed from disk.";
-            }
-            if (this.displayDisabled) {
-                return "This dataset is not yet viewable.";
-            }
-            return "Display";
-        },
-        displayDisabled() {
-            return this.item.purged || ["discarded", "new", "upload"].includes(this.state);
-        },
-        editButtonTitle() {
-            if (this.item.purged) {
-                return "Cannot edit attributes of datasets removed from disk.";
-            }
-            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)
-            );
-        },
         hasStateIcon() {
             return this.contentState && this.contentState.icon;
         },
@@ -181,10 +118,12 @@ export default {
         },
     },
     methods: {
-        onDragStart(evt) {
-            evt.dataTransfer.dropEffect = "move";
-            evt.dataTransfer.effectAllowed = "move";
-            evt.dataTransfer.setData("text", JSON.stringify([this.item]));
+        onClick() {
+            if (this.isDataset) {
+                this.$emit("update:expand-dataset", !this.expandDataset);
+            } else {
+                this.$emit("view-collection", this.item, this.name);
+            }
         },
         onDisplay() {
             const id = this.item.id;
@@ -196,6 +135,11 @@ export default {
                 }
             });
         },
+        onDragStart(evt) {
+            evt.dataTransfer.dropEffect = "move";
+            evt.dataTransfer.effectAllowed = "move";
+            evt.dataTransfer.setData("text", JSON.stringify([this.item]));
+        },
         onEdit() {
             if (this.item.collection_type) {
                 backboneRoute(`collection/edit/${this.item.id}`);
@@ -203,13 +147,6 @@ export default {
                 backboneRoute("datasets/edit", { dataset_id: this.item.id });
             }
         },
-        onClick() {
-            if (this.isDataset) {
-                this.$emit("update:expand-dataset", !this.expandDataset);
-            } else {
-                this.$emit("view-collection", this.item, this.name);
-            }
-        },
     },
 };
 </script>
diff --git a/client/src/components/History/Content/ContentOptions.vue b/client/src/components/History/Content/ContentOptions.vue
new file mode 100644
index 00000000000..5f3151e4168
--- /dev/null
+++ b/client/src/components/History/Content/ContentOptions.vue
@@ -0,0 +1,92 @@
+<template>
+    <span class="align-self-start btn-group">
+        <b-button
+            v-if="isDataset"
+            :disabled="displayDisabled"
+            :title="displayButtonTitle"
+            class="px-1"
+            size="sm"
+            variant="link"
+            @click.stop="$emit('display')">
+            <icon icon="eye" />
+        </b-button>
+        <b-button
+            v-if="isHistoryItem"
+            :disabled="editDisabled"
+            :title="editButtonTitle"
+            class="px-1"
+            size="sm"
+            variant="link"
+            @click.stop="$emit('edit')">
+            <icon icon="pen" />
+        </b-button>
+        <b-button
+            v-if="isHistoryItem && !isDeleted"
+            class="px-1"
+            title="Delete"
+            size="sm"
+            variant="link"
+            :disabled="isPurged"
+            @click.stop="$emit('delete')">
+            <icon icon="trash" />
+        </b-button>
+        <b-button
+            v-if="isHistoryItem && isDeleted"
+            class="px-1"
+            title="Undelete"
+            size="sm"
+            variant="link"
+            :disabled="isPurged"
+            @click.stop="$emit('undelete')">
+            <icon icon="trash-restore" />
+        </b-button>
+        <b-button
+            v-if="isHistoryItem && !isVisible"
+            class="px-1"
+            title="Unhide"
+            size="sm"
+            variant="link"
+            @click.stop="$emit('unhide')">
+            <icon icon="unlock" />
+        </b-button>
+    </span>
+</template>
+
+<script>
+export default {
+    props: {
+        isDataset: { type: Boolean, required: true },
+        isDeleted: { type: Boolean, required: true },
+        isHistoryItem: { type: Boolean, required: true },
+        isPurged: { type: Boolean, required: true },
+        isVisible: { type: Boolean, required: true },
+        state: { type: String, default: "" },
+    },
+    computed: {
+        displayButtonTitle() {
+            if (this.isPurged) {
+                return "Cannot display datasets removed from disk.";
+            }
+            if (this.displayDisabled) {
+                return "This dataset is not yet viewable.";
+            }
+            return "Display";
+        },
+        displayDisabled() {
+            return this.isPurged || ["discarded", "new", "upload"].includes(this.state);
+        },
+        editButtonTitle() {
+            if (this.isPurged) {
+                return "Cannot edit attributes of datasets removed from disk.";
+            }
+            if (this.editDisabled) {
+                return "This dataset is not yet editable.";
+            }
+            return "Edit Attributes";
+        },
+        editDisabled() {
+            return this.isPurged || ["discarded", "new", "upload", "queued", "running", "waiting"].includes(this.state);
+        },
+    },
+};
+</script>
diff --git a/client/src/components/History/Content/Dataset/DatasetDetails.vue b/client/src/components/History/Content/Dataset/DatasetDetails.vue
index b39685169bc..edfd49ff023 100644
--- a/client/src/components/History/Content/Dataset/DatasetDetails.vue
+++ b/client/src/components/History/Content/Dataset/DatasetDetails.vue
@@ -13,7 +13,7 @@
                     </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)" data-label="Database/Build">{{
+                        <b-link class="value" @click.stop="$emit('edit')" data-label="Database/Build">{{
                             result.genome_build
                         }}</b-link>
                     </span>
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 57c364ebae2..10561a94458 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -88,9 +88,9 @@
                                         @update:expand-dataset="setExpanded(item, $event)"
                                         @update:selected="setSelected(item, $event)"
                                         @view-collection="$emit('view-collection', item)"
-                                        @delete="onDelete"
-                                        @undelete="onUndelete"
-                                        @unhide="onUnhide" />
+                                        @delete="onDelete(item)"
+                                        @undelete="onUndelete(item)"
+                                        @unhide="onUnhide(item)" />
                                 </template>
                             </Listing>
                         </div>