diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 958b220fe65d..01453eb7d6a5 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -22,20 +22,41 @@ library.add(faArrowCircleUp, faArrowCircleDown, faCheckCircle, faSpinner);
 const route = useRoute();
 const router = useRouter();
 
-const props = defineProps({
-    id: { type: Number, required: true },
-    item: { type: Object, required: true },
-    name: { type: String, required: true },
-    expandDataset: { type: Boolean, default: false },
-    writable: { type: Boolean, default: true },
-    addHighlightBtn: { type: Boolean, default: false },
-    highlight: { type: String, default: null },
-    isDataset: { type: Boolean, default: true },
-    isHistoryItem: { type: Boolean, default: false },
-    selected: { type: Boolean, default: false },
-    selectable: { type: Boolean, default: false },
-    filterable: { type: Boolean, default: false },
-    isPlaceholder: { type: Boolean, default: false },
+interface ContentItem {
+    // Does this definition exist elsewhere already?
+    id: string;
+    tags: string[];
+    deleted: boolean;
+    visible: boolean;
+}
+
+interface ContentItemProps {
+    id: number;
+    item: ContentItem;
+    name: string;
+    expandDataset?: boolean;
+    writable?: boolean;
+    addHighlightBtn?: boolean;
+    highlight?: string | null;
+    isDataset?: boolean;
+    isHistoryItem?: boolean;
+    selected?: boolean;
+    selectable?: boolean;
+    filterable?: boolean;
+    isPlaceholder?: boolean;
+}
+
+const props = withDefaults(defineProps<ContentItemProps>(), {
+    expandDataset: false,
+    writable: true,
+    addHighlightBtn: false,
+    highlight: null,
+    isDataset: true,
+    isHistoryItem: false,
+    selected: false,
+    selectable: false,
+    filterable: false,
+    isPlaceholder: false,
 });
 
 // define emits below
@@ -57,23 +78,6 @@ const jobState = computed(() => new JobStateSummary(props.item));
 
 const contentId = computed(() => `dataset-${props.item.id}`);
 
-const contentCls = computed(() => {
-    const status = contentState.value && contentState.value.status;
-    if (props.selected) {
-        return "alert-info";
-    } else if (!status) {
-        return `alert-success`;
-    } else {
-        return `alert-${status}`;
-    }
-});
-
-const contentState = computed(() => STATES[state.value] && STATES[state.value]);
-
-const hasTags = computed(() => props.item.tags && props.item.tags.length > 0);
-
-const hasStateIcon = computed(() => contentState.value && contentState.value.icon);
-
 const state: ComputedRef<State> = computed(() => {
     if (props.isPlaceholder) {
         return "placeholder";
@@ -90,6 +94,23 @@ const state: ComputedRef<State> = computed(() => {
     return "ok";
 });
 
+const contentState = computed(() => STATES[state.value] && STATES[state.value]);
+
+const contentCls = computed(() => {
+    const status = contentState.value && contentState.value.status;
+    if (props.selected) {
+        return "alert-info";
+    } else if (!status) {
+        return "alert-success";
+    } else {
+        return `alert-${status}`;
+    }
+});
+
+const hasTags = computed(() => props.item.tags && props.item.tags.length > 0);
+
+const hasStateIcon = computed(() => contentState.value && contentState.value.icon);
+
 const tags = computed(() => props.item.tags);
 
 const tagsDisabled = computed(() => !props.writable || !props.expandDataset || !props.isHistoryItem);