From 88a46fd942da9920b9c31386126a6db63bb046d7 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 29 May 2024 12:24:18 -0500
Subject: [PATCH 01/16] align multiview `HistoryPanel` details header based on
 content

Adds a `pinnedHistoriesSummarizedStatus` computed ref to `historyStore` that Returns a string that indicates whether all the pinned histories have annotations, tags, both, or none of them. This is used to then adjust the `DetailsLayout` header height accordingly.
---
 .../History/CurrentHistory/HistoryDetails.vue |  4 +-
 .../History/CurrentHistory/HistoryPanel.vue   |  8 +++-
 .../History/Layout/DetailsLayout.vue          | 35 +++++++++++++-----
 client/src/stores/historyStore.ts             | 37 +++++++++++++++++++
 4 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryDetails.vue b/client/src/components/History/CurrentHistory/HistoryDetails.vue
index 52619647dd25..705fe6d960e5 100644
--- a/client/src/components/History/CurrentHistory/HistoryDetails.vue
+++ b/client/src/components/History/CurrentHistory/HistoryDetails.vue
@@ -11,12 +11,12 @@ import UtcDate from "@/components/UtcDate.vue";
 interface Props {
     history: HistorySummary;
     writeable: boolean;
-    summarized: boolean;
+    summarized?: "both" | "annotation" | "tags" | "none";
 }
 
 const props = withDefaults(defineProps<Props>(), {
     writeable: true,
-    summarized: false,
+    summarized: undefined,
 });
 
 const historyStore = useHistoryStore();
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index ca6738f303dd..12d07ccab26b 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -84,7 +84,7 @@ const contentItemRefs = computed(() => {
 const currItemFocused = useActiveElement();
 const lastItemId = ref<string | null>(null);
 
-const { currentFilterText, currentHistoryId } = storeToRefs(useHistoryStore());
+const { currentFilterText, currentHistoryId, pinnedHistoriesSummarizedStatus } = storeToRefs(useHistoryStore());
 const { lastCheckedTime, totalMatchesCount, isWatching } = storeToRefs(useHistoryItemsStore());
 
 const historyStore = useHistoryStore();
@@ -143,6 +143,10 @@ const formattedSearchError = computed(() => {
     };
 });
 
+const detailsSummarized = computed(() => {
+    return props.isMultiViewItem ? pinnedHistoriesSummarizedStatus.value : undefined;
+});
+
 const storeFilterText = computed(() => {
     if (props.history.id !== currentHistoryId.value) {
         return "";
@@ -523,7 +527,7 @@ function setItemDragstart(
                     <HistoryDetails
                         :history="history"
                         :writeable="canEditHistory"
-                        :summarized="isMultiViewItem"
+                        :summarized="detailsSummarized"
                         @update:history="historyStore.updateHistory($event)" />
 
                     <HistoryMessages :history="history" :current-user="currentUser" />
diff --git a/client/src/components/History/Layout/DetailsLayout.vue b/client/src/components/History/Layout/DetailsLayout.vue
index ef49938ca9f3..676002424bad 100644
--- a/client/src/components/History/Layout/DetailsLayout.vue
+++ b/client/src/components/History/Layout/DetailsLayout.vue
@@ -20,7 +20,7 @@ interface Props {
     writeable?: boolean;
     annotation?: string;
     showAnnotation?: boolean;
-    summarized?: boolean;
+    summarized?: "both" | "annotation" | "tags" | "none";
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
     writeable: true,
     annotation: undefined,
     showAnnotation: true,
-    summarized: false,
+    summarized: undefined,
 });
 
 const emit = defineEmits(["save"]);
@@ -47,6 +47,20 @@ const localProps = ref<{ name: string; annotation: string | null; tags: string[]
     tags: [],
 });
 
+const detailsClass = computed(() => {
+    const classes: Record<string, boolean> = {
+        details: true,
+        "summarized-details": props.summarized && !editing.value,
+        "m-3": !props.summarized || editing.value,
+    };
+
+    if (props.summarized) {
+        classes[props.summarized] = true;
+    }
+
+    return classes;
+});
+
 const editButtonTitle = computed(() => {
     if (isAnonymous.value) {
         return l("Log in to Rename History");
@@ -90,10 +104,7 @@ function selectText() {
 </script>
 
 <template>
-    <section
-        class="details"
-        :class="summarized && !editing ? 'summarized-details' : 'm-3'"
-        data-description="edit details">
+    <section :class="detailsClass" data-description="edit details">
         <BButton
             :disabled="isAnonymous || !writeable"
             class="edit-button ml-1 float-right"
@@ -114,7 +125,7 @@ function selectText() {
                 v-short="annotation"
                 class="mt-2"
                 data-description="annotation value" />
-            <div v-else-if="summarized" style="min-height: 2rem">
+            <div v-else-if="summarized" :class="{ annotation: ['both', 'annotation'].includes(summarized) }">
                 <TextSummary
                     v-if="annotation"
                     :description="annotation"
@@ -124,8 +135,7 @@ function selectText() {
             </div>
             <StatelessTags
                 v-if="tags"
-                class="tags"
-                :class="!summarized && 'mt-2'"
+                :class="{ 'mt-2': !summarized, tags: ['both', 'tags'].includes(summarized) }"
                 :value="tags"
                 disabled
                 :max-visible-tags="summarized ? 1 : 5" />
@@ -184,12 +194,17 @@ function selectText() {
 
 <style lang="scss" scoped>
 .summarized-details {
-    min-height: 8.5em;
     margin: 1rem 1rem 0 1rem;
     max-width: 15rem;
 
+    &.both {
+        min-height: 8.5em;
+    }
     .tags {
         min-height: 2rem;
     }
+    .annotation {
+        min-height: 2rem;
+    }
 }
 </style>
diff --git a/client/src/stores/historyStore.ts b/client/src/stores/historyStore.ts
index c8a1e0d3cb9a..5f64fafd6be4 100644
--- a/client/src/stores/historyStore.ts
+++ b/client/src/stores/historyStore.ts
@@ -97,6 +97,38 @@ export const useHistoryStore = defineStore("historyStore", () => {
         };
     });
 
+    const pinnedHistoriesSummarizedStatus = computed(() => {
+        let annotation = false;
+        let tags = false;
+        let loaded = true;
+
+        for (const h of pinnedHistories.value) {
+            const history = storedHistories.value[h.id];
+            if (!history) {
+                loaded = false;
+                break;
+            }
+
+            if (history.annotation) {
+                annotation = true;
+            }
+
+            if (history.tags.length > 0) {
+                tags = true;
+            }
+        }
+
+        if (!loaded || (annotation && tags)) {
+            return "both";
+        } else if (annotation) {
+            return "annotation";
+        } else if (tags) {
+            return "tags";
+        } else {
+            return "none";
+        }
+    });
+
     async function setCurrentHistory(historyId: string) {
         const currentHistory = (await setCurrentHistoryOnServer(historyId)) as HistoryDevDetailed;
         selectHistory(currentHistory);
@@ -334,6 +366,11 @@ export const useHistoryStore = defineStore("historyStore", () => {
         currentHistoryId,
         currentFilterText,
         pinnedHistories,
+        /** Returns a string that indicates whether all the pinned histories have annotations,
+         * tags, both, or none of them.
+         * This is used to format the `DetailsLayout` header uniformly for multi-view histories.
+         */
+        pinnedHistoriesSummarizedStatus,
         getHistoryById,
         getHistoryNameById,
         setCurrentHistory,

From 6984b273bad32c3eb2dee3f791bec759c417b3a5 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 29 May 2024 12:43:12 -0500
Subject: [PATCH 02/16] fix details horizontal margins to align better in
 multiview

---
 client/src/components/History/Layout/DetailsLayout.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/History/Layout/DetailsLayout.vue b/client/src/components/History/Layout/DetailsLayout.vue
index 676002424bad..4f6dcf542315 100644
--- a/client/src/components/History/Layout/DetailsLayout.vue
+++ b/client/src/components/History/Layout/DetailsLayout.vue
@@ -194,7 +194,8 @@ function selectText() {
 
 <style lang="scss" scoped>
 .summarized-details {
-    margin: 1rem 1rem 0 1rem;
+    margin-top: 1rem;
+    margin-left: 0.5rem;
     max-width: 15rem;
 
     &.both {

From 053caff13178ac276e2d24ccd53c262a2bb2c675 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 29 May 2024 15:34:28 -0500
Subject: [PATCH 03/16] move `MultipleViewItem` actions to top

Add `HistoryNavigation` to the top section as well.

WIP: There is a bug right now that applies the dropdown action to all pinned histories in multiview (e.g.: You try to delete a history from the dropdown, but a modal opens up for each pinned history
---
 .../CurrentHistory/HistoryNavigation.vue      | 22 ++++---
 client/src/components/History/Index.vue       |  3 +-
 .../History/Layout/DetailsLayout.vue          |  1 -
 .../History/Multiple/MultipleViewItem.vue     | 58 +++++++++++--------
 4 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryNavigation.vue b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
index 1dd671f0e6a0..7420c8f2e53c 100644
--- a/client/src/components/History/CurrentHistory/HistoryNavigation.vue
+++ b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
@@ -62,13 +62,13 @@ library.add(
 interface Props {
     histories: HistorySummary[];
     history: HistorySummary;
-    title?: string;
     historiesLoading?: boolean;
+    minimal?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    title: "Histories",
     historiesLoading: false,
+    minimal: false,
 });
 
 const showSwitchModal = ref(false);
@@ -115,11 +115,14 @@ function userTitle(title: string) {
 
 <template>
     <div>
-        <nav class="d-flex justify-content-between mx-3 my-2" aria-label="current history management">
-            <h2 class="m-1 h-sm">History</h2>
+        <nav
+            :class="{ 'd-flex justify-content-between mx-3 my-2': !props.minimal }"
+            aria-label="current history management">
+            <h2 v-if="!props.minimal" class="m-1 h-sm">History</h2>
 
             <BButtonGroup>
                 <BButton
+                    v-if="!props.minimal"
                     v-b-tooltip.top.hover.noninteractive
                     class="create-hist-btn"
                     data-description="create new history"
@@ -132,6 +135,7 @@ function userTitle(title: string) {
                 </BButton>
 
                 <BButton
+                    v-if="!props.minimal"
                     v-b-tooltip.top.hover.noninteractive
                     data-description="switch to another history"
                     size="sm"
@@ -146,10 +150,11 @@ function userTitle(title: string) {
                     v-b-tooltip.top.hover.noninteractive
                     no-caret
                     size="sm"
-                    variant="link"
+                    :variant="props.minimal ? 'outline-info' : 'link'"
                     toggle-class="text-decoration-none"
                     menu-class="history-options-button-menu"
                     title="History options"
+                    right
                     data-description="history options">
                     <template v-slot:button-content>
                         <FontAwesomeIcon fixed-width :icon="faBars" />
@@ -162,10 +167,12 @@ function userTitle(title: string) {
                             <span>Fetching histories from server</span>
                         </div>
 
-                        <span v-else>You have {{ totalHistoryCount }} histories.</span>
+                        <span v-else-if="!props.minimal">You have {{ totalHistoryCount }} histories.</span>
+                        <span v-else>Manage History</span>
                     </BDropdownText>
 
                     <BDropdownItem
+                        v-if="!props.minimal"
                         data-description="switch to multi history view"
                         :disabled="isAnonymous"
                         :title="userTitle('Open History Multiview')"
@@ -174,7 +181,7 @@ function userTitle(title: string) {
                         <span v-localize>Show Histories Side-by-Side</span>
                     </BDropdownItem>
 
-                    <BDropdownDivider />
+                    <BDropdownDivider v-if="!props.minimal" />
 
                     <BDropdownText v-if="!canEditHistory">
                         This history has been <span class="font-weight-bold">{{ historyState }}</span
@@ -282,6 +289,7 @@ function userTitle(title: string) {
         </nav>
 
         <SelectorModal
+            v-if="!props.minimal"
             v-show="showSwitchModal"
             id="selector-history-modal"
             :histories="histories"
diff --git a/client/src/components/History/Index.vue b/client/src/components/History/Index.vue
index 5a192ef8bbb7..634d8f6c5a59 100644
--- a/client/src/components/History/Index.vue
+++ b/client/src/components/History/Index.vue
@@ -40,8 +40,7 @@ function onViewCollection(collection: CollectionEntry, currentOffset?: number) {
                 <HistoryNavigation
                     :history="currentHistory"
                     :histories="histories"
-                    :histories-loading="historiesLoading"
-                    title="Histories" />
+                    :histories-loading="historiesLoading" />
             </template>
         </HistoryPanel>
 
diff --git a/client/src/components/History/Layout/DetailsLayout.vue b/client/src/components/History/Layout/DetailsLayout.vue
index 4f6dcf542315..8669fdebeb7c 100644
--- a/client/src/components/History/Layout/DetailsLayout.vue
+++ b/client/src/components/History/Layout/DetailsLayout.vue
@@ -194,7 +194,6 @@ function selectText() {
 
 <style lang="scss" scoped>
 .summarized-details {
-    margin-top: 1rem;
     margin-left: 0.5rem;
     max-width: 15rem;
 
diff --git a/client/src/components/History/Multiple/MultipleViewItem.vue b/client/src/components/History/Multiple/MultipleViewItem.vue
index a61b7113edf0..87b6c41458eb 100644
--- a/client/src/components/History/Multiple/MultipleViewItem.vue
+++ b/client/src/components/History/Multiple/MultipleViewItem.vue
@@ -6,6 +6,7 @@ import { computed, ref } from "vue";
 import { useExtendedHistory } from "@/composables/detailedHistory";
 import { useHistoryStore } from "@/stores/historyStore";
 
+import HistoryNavigation from "../CurrentHistory/HistoryNavigation.vue";
 import CollectionPanel from "@/components/History/CurrentCollection/CollectionPanel.vue";
 import HistoryPanel from "@/components/History/CurrentHistory/HistoryPanel.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -20,7 +21,7 @@ interface Props {
 const props = defineProps<Props>();
 
 const historyStore = useHistoryStore();
-const { currentHistoryId, pinnedHistories } = storeToRefs(historyStore);
+const { currentHistoryId, histories, historiesLoading, pinnedHistories } = storeToRefs(historyStore);
 
 const { history } = useExtendedHistory(props.source.id);
 
@@ -42,7 +43,37 @@ function onViewCollection(collection: object) {
         </div>
     </div>
 
-    <div v-else id="list-item" class="d-flex flex-column align-items-center w-100">
+    <div v-else id="list-item" class="d-flex flex-column w-100">
+        <div class="d-flex justify-content-between align-items-center">
+            <div>
+                <BButton
+                    size="sm"
+                    class="my-1"
+                    :disabled="sameToCurrent"
+                    :variant="sameToCurrent ? 'disabled' : 'outline-info'"
+                    :title="sameToCurrent ? 'Current History' : 'Switch to this history'"
+                    @click="historyStore.setCurrentHistory(source.id)">
+                    {{ sameToCurrent ? "Current History" : "Switch to" }}
+                </BButton>
+                <BButton
+                    v-if="Object.keys(pinnedHistories).length > 0"
+                    size="sm"
+                    class="my-1"
+                    variant="outline-danger"
+                    title="Hide this history from the list"
+                    @click="historyStore.unpinHistories([source.id])">
+                    Hide
+                </BButton>
+            </div>
+            <HistoryNavigation
+                :history="history"
+                :histories="histories"
+                :histories-loading="historiesLoading"
+                minimal />
+        </div>
+
+        <hr class="w-100 m-1" />
+
         <CollectionPanel
             v-if="selectedCollections.length && selectedCollections[0]?.history_id === source.id"
             :history="history"
@@ -57,28 +88,5 @@ function onViewCollection(collection: object) {
             :show-controls="false"
             is-multi-view-item
             @view-collection="onViewCollection" />
-
-        <hr class="w-100 m-2" />
-
-        <div class="flex-row flex-grow-0">
-            <BButton
-                size="sm"
-                class="my-1"
-                :disabled="sameToCurrent"
-                :variant="sameToCurrent ? 'disabled' : 'outline-info'"
-                :title="sameToCurrent ? 'Current History' : 'Switch to this history'"
-                @click="historyStore.setCurrentHistory(source.id)">
-                {{ sameToCurrent ? "Current History" : "Switch to" }}
-            </BButton>
-            <BButton
-                v-if="Object.keys(pinnedHistories).length > 0"
-                size="sm"
-                class="my-1"
-                variant="outline-danger"
-                title="Hide this history from the list"
-                @click="historyStore.unpinHistories([source.id])">
-                Hide
-            </BButton>
-        </div>
     </div>
 </template>

From c336828bb52b312de9f79b188d50b21214f158a7 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 30 May 2024 11:07:02 -0500
Subject: [PATCH 04/16] fix duplicate modals opening from `HistoryNavigation`

Using `v-b-modal:modal-id` had the disadvantage that if we had multiple components containing modals with same ids, they would all open simultaneously. Using `v-modal` to open modals instead removes this side effect.
---
 .../CurrentHistory/HistoryNavigation.vue      | 29 +++++++++++++------
 .../components/History/Modals/CopyModal.vue   | 24 +++++++++++++--
 2 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryNavigation.vue b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
index 7420c8f2e53c..7084e2713bfe 100644
--- a/client/src/components/History/CurrentHistory/HistoryNavigation.vue
+++ b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
@@ -71,7 +71,12 @@ const props = withDefaults(defineProps<Props>(), {
     minimal: false,
 });
 
+// modal refs
 const showSwitchModal = ref(false);
+const showDeleteModal = ref(false);
+const showPrivacyModal = ref(false);
+const showCopyModal = ref(false);
+
 const purgeHistory = ref(false);
 
 const userStore = useUserStore();
@@ -202,17 +207,17 @@ function userTitle(title: string) {
                     <BDropdownDivider />
 
                     <BDropdownItem
-                        v-b-modal:copy-current-history-modal
                         :disabled="isAnonymous"
-                        :title="userTitle('Copy History to a New History')">
+                        :title="userTitle('Copy History to a New History')"
+                        @click="showCopyModal = !showCopyModal">
                         <FontAwesomeIcon fixed-width :icon="faCopy" class="mr-1" />
                         <span v-localize>Copy this History</span>
                     </BDropdownItem>
 
                     <BDropdownItem
-                        v-b-modal:delete-history-modal
                         :disabled="!canEditHistory"
-                        :title="localize('Permanently Delete History')">
+                        :title="localize('Permanently Delete History')"
+                        @click="showDeleteModal = !showDeleteModal">
                         <FontAwesomeIcon fixed-width :icon="faTrash" class="mr-1" />
                         <span v-localize>Delete this History</span>
                     </BDropdownItem>
@@ -278,9 +283,9 @@ function userTitle(title: string) {
                     </BDropdownItem>
 
                     <BDropdownItem
-                        v-b-modal:history-privacy-modal
                         :disabled="isAnonymous || !canEditHistory"
-                        :title="userTitle('Make this History Private')">
+                        :title="userTitle('Make this History Private')"
+                        @click="showPrivacyModal = !showPrivacyModal">
                         <FontAwesomeIcon fixed-width :icon="faLock" class="mr-1" />
                         <span v-localize>Make Private</span>
                     </BDropdownItem>
@@ -297,13 +302,19 @@ function userTitle(title: string) {
             :show-modal.sync="showSwitchModal"
             @selectHistory="historyStore.setCurrentHistory($event.id)" />
 
-        <CopyModal id="copy-current-history-modal" :history="history" />
+        <CopyModal :history="history" :show-modal.sync="showCopyModal" />
 
         <BModal
-            id="history-privacy-modal"
+            v-model="showPrivacyModal"
             title="Make History Private"
             title-tag="h2"
             @ok="historyStore.secureHistory(history)">
+            <h4>
+                History:
+                <b
+                    ><i>{{ history.name }}</i></b
+                >
+            </h4>
             <p v-localize>
                 This will make all the data in this history private (excluding library datasets), and will set
                 permissions such that all new data is created as private. Any datasets within that are currently shared
@@ -312,7 +323,7 @@ function userTitle(title: string) {
         </BModal>
 
         <BModal
-            id="delete-history-modal"
+            v-model="showDeleteModal"
             title="Delete History?"
             title-tag="h2"
             @ok="onDelete"
diff --git a/client/src/components/History/Modals/CopyModal.vue b/client/src/components/History/Modals/CopyModal.vue
index 7f0f6423b0f4..d31c41332672 100644
--- a/client/src/components/History/Modals/CopyModal.vue
+++ b/client/src/components/History/Modals/CopyModal.vue
@@ -20,9 +20,16 @@ import localize from "@/utils/localization";
 
 interface Props {
     history: HistorySummary;
+    showModal?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    showModal: false,
+});
+
+const emit = defineEmits<{
+    (e: "update:show-modal", value: boolean): void;
+}>();
 
 const userStore = useUserStore();
 const historyStore = useHistoryStore();
@@ -32,6 +39,7 @@ const { currentUser, isAnonymous } = storeToRefs(userStore);
 const name = ref("");
 const copyAll = ref(false);
 const loading = ref(false);
+const localShowModal = ref(props.showModal);
 
 const title = computed(() => {
     return `Copying History: ${props.history.name}`;
@@ -55,6 +63,18 @@ const formValid = computed(() => {
     return newNameValid.value;
 });
 
+watch(
+    () => props.showModal,
+    (newVal) => {
+        localShowModal.value = newVal;
+    }
+);
+watch(
+    () => localShowModal.value,
+    (newVal) => {
+        emit("update:show-modal", newVal);
+    }
+);
 watch(
     () => props.history,
     (newHistory) => {
@@ -74,7 +94,7 @@ async function copy(close: () => void) {
 </script>
 
 <template>
-    <BModal v-bind="$attrs" :title="title" title-tag="h2" v-on="$listeners">
+    <BModal v-model="localShowModal" v-bind="$attrs" :title="title" title-tag="h2" v-on="$listeners">
         <transition name="fade">
             <BAlert v-localize :show="isAnonymous" variant="warning">
                 As an anonymous user, unless you log in or register, you will lose your current history after copying

From 7aadb71991be75cbbdaf37266597d4833ce27335 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 30 May 2024 11:44:07 -0500
Subject: [PATCH 05/16] hide annotation and tags if no pinned histories in
 multiview

---
 .../History/CurrentHistory/HistoryDetails.vue     |  2 +-
 .../components/History/Layout/DetailsLayout.vue   | 15 ++++++++++++---
 client/src/stores/historyStore.ts                 |  4 ++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryDetails.vue b/client/src/components/History/CurrentHistory/HistoryDetails.vue
index 705fe6d960e5..1f736c2b7e18 100644
--- a/client/src/components/History/CurrentHistory/HistoryDetails.vue
+++ b/client/src/components/History/CurrentHistory/HistoryDetails.vue
@@ -11,7 +11,7 @@ import UtcDate from "@/components/UtcDate.vue";
 interface Props {
     history: HistorySummary;
     writeable: boolean;
-    summarized?: "both" | "annotation" | "tags" | "none";
+    summarized?: "both" | "annotation" | "tags" | "none" | "hidden";
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/client/src/components/History/Layout/DetailsLayout.vue b/client/src/components/History/Layout/DetailsLayout.vue
index 8669fdebeb7c..2498fc2f2d59 100644
--- a/client/src/components/History/Layout/DetailsLayout.vue
+++ b/client/src/components/History/Layout/DetailsLayout.vue
@@ -20,7 +20,7 @@ interface Props {
     writeable?: boolean;
     annotation?: string;
     showAnnotation?: boolean;
-    summarized?: "both" | "annotation" | "tags" | "none";
+    summarized?: "both" | "annotation" | "tags" | "none" | "hidden";
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -125,7 +125,9 @@ function selectText() {
                 v-short="annotation"
                 class="mt-2"
                 data-description="annotation value" />
-            <div v-else-if="summarized" :class="{ annotation: ['both', 'annotation'].includes(summarized) }">
+            <div
+                v-else-if="summarized"
+                :class="{ annotation: ['both', 'annotation'].includes(summarized), hidden: summarized === 'hidden' }">
                 <TextSummary
                     v-if="annotation"
                     :description="annotation"
@@ -135,7 +137,11 @@ function selectText() {
             </div>
             <StatelessTags
                 v-if="tags"
-                :class="{ 'mt-2': !summarized, tags: ['both', 'tags'].includes(summarized) }"
+                :class="{
+                    'mt-2': !summarized,
+                    tags: ['both', 'tags'].includes(summarized),
+                    hidden: summarized === 'hidden',
+                }"
                 :value="tags"
                 disabled
                 :max-visible-tags="summarized ? 1 : 5" />
@@ -206,5 +212,8 @@ function selectText() {
     .annotation {
         min-height: 2rem;
     }
+    .hidden {
+        display: none;
+    }
 }
 </style>
diff --git a/client/src/stores/historyStore.ts b/client/src/stores/historyStore.ts
index 5f64fafd6be4..c5df5d2e66e4 100644
--- a/client/src/stores/historyStore.ts
+++ b/client/src/stores/historyStore.ts
@@ -102,6 +102,10 @@ export const useHistoryStore = defineStore("historyStore", () => {
         let tags = false;
         let loaded = true;
 
+        if (pinnedHistories.value.length === 0) {
+            return "hidden";
+        }
+
         for (const h of pinnedHistories.value) {
             const history = storedHistories.value[h.id];
             if (!history) {

From dea3daf005e4b7e5f1f530a2bbd08a8c0ae3de0a Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 30 May 2024 12:45:30 -0500
Subject: [PATCH 06/16] add `faTimes` icon to `Hide` button in multiview

---
 client/src/components/History/Multiple/MultipleViewItem.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/src/components/History/Multiple/MultipleViewItem.vue b/client/src/components/History/Multiple/MultipleViewItem.vue
index 87b6c41458eb..34e1959650d8 100644
--- a/client/src/components/History/Multiple/MultipleViewItem.vue
+++ b/client/src/components/History/Multiple/MultipleViewItem.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
@@ -11,6 +14,8 @@ import CollectionPanel from "@/components/History/CurrentCollection/CollectionPa
 import HistoryPanel from "@/components/History/CurrentHistory/HistoryPanel.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
+library.add(faTimes);
+
 interface Props {
     source: {
         id: string;
@@ -62,6 +67,7 @@ function onViewCollection(collection: object) {
                     variant="outline-danger"
                     title="Hide this history from the list"
                     @click="historyStore.unpinHistories([source.id])">
+                    <FontAwesomeIcon :icon="faTimes" />
                     Hide
                 </BButton>
             </div>

From 6e9a7fcd4ea29e5b579d9d63977e21eaa44648c4 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 22 Jul 2024 12:56:55 -0500
Subject: [PATCH 07/16] modify delete history modal for already delete
 histories (purge)

So that the dropdown item says "Purge this history" instead of delete for a history that is already deleted.
---
 .../CurrentHistory/HistoryNavigation.vue      | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryNavigation.vue b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
index 7084e2713bfe..533dd159cb02 100644
--- a/client/src/components/History/CurrentHistory/HistoryNavigation.vue
+++ b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
@@ -3,6 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import {
     faArchive,
     faBars,
+    faBurn,
     faColumns,
     faCopy,
     faExchangeAlt,
@@ -44,6 +45,7 @@ import SelectorModal from "@/components/History/Modals/SelectorModal.vue";
 library.add(
     faArchive,
     faBars,
+    faBurn,
     faColumns,
     faCopy,
     faExchangeAlt,
@@ -89,6 +91,10 @@ const canEditHistory = computed(() => {
     return canMutateHistory(props.history);
 });
 
+const isDeletedNotPurged = computed(() => {
+    return props.history.deleted && !props.history.purged;
+});
+
 const historyState = computed(() => {
     if (props.history.purged) {
         return "purged";
@@ -216,10 +222,11 @@ function userTitle(title: string) {
 
                     <BDropdownItem
                         :disabled="!canEditHistory"
-                        :title="localize('Permanently Delete History')"
+                        :title="localize(isDeletedNotPurged ? 'Permanently Delete History' : 'Delete History')"
                         @click="showDeleteModal = !showDeleteModal">
-                        <FontAwesomeIcon fixed-width :icon="faTrash" class="mr-1" />
-                        <span v-localize>Delete this History</span>
+                        <FontAwesomeIcon fixed-width :icon="isDeletedNotPurged ? faBurn : faTrash" class="mr-1" />
+                        <span v-if="isDeletedNotPurged" v-localize>Purge this History</span>
+                        <span v-else v-localize>Delete this History</span>
                     </BDropdownItem>
 
                     <BDropdownItem
@@ -324,14 +331,14 @@ function userTitle(title: string) {
 
         <BModal
             v-model="showDeleteModal"
-            title="Delete History?"
+            :title="isDeletedNotPurged ? 'Purge History?' : 'Delete History?'"
             title-tag="h2"
             @ok="onDelete"
-            @show="purgeHistory = false">
+            @show="purgeHistory = isDeletedNotPurged">
             <p v-localize>
                 Do you also want to permanently delete the history <i class="ml-1">{{ history.name }}</i>
             </p>
-            <BFormCheckbox id="purge-history" v-model="purgeHistory">
+            <BFormCheckbox id="purge-history" v-model="purgeHistory" :disabled="isDeletedNotPurged">
                 <span v-localize>Yes, permanently delete this history.</span>
             </BFormCheckbox>
         </BModal>

From c2a10b45a7c406f6958c0b51f187587ffef70660 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 22 Jul 2024 12:58:38 -0500
Subject: [PATCH 08/16] do not unpin a history when it is deleted

---
 client/src/stores/historyStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/stores/historyStore.ts b/client/src/stores/historyStore.ts
index c5df5d2e66e4..1c875955a903 100644
--- a/client/src/stores/historyStore.ts
+++ b/client/src/stores/historyStore.ts
@@ -235,7 +235,6 @@ export const useHistoryStore = defineStore("historyStore", () => {
             await createNewHistory();
         }
         del(storedHistories.value, deletedHistory.id);
-        unpinHistories([deletedHistory.id]);
         await handleTotalCountChange(1, true);
     }
 
@@ -389,6 +388,7 @@ export const useHistoryStore = defineStore("historyStore", () => {
         copyHistory,
         createNewHistory,
         deleteHistory,
+        handleTotalCountChange,
         loadCurrentHistory,
         loadHistories,
         loadHistoryById,

From 5f07fbcc6a5bf09a536b3b57d8e91f60e6b29543 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 22 Jul 2024 13:00:10 -0500
Subject: [PATCH 09/16] histories grid: handle history total count change for
 store

---
 client/src/components/Grid/configs/histories.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/client/src/components/Grid/configs/histories.ts b/client/src/components/Grid/configs/histories.ts
index 2c34d2b5a7e3..0186d3851920 100644
--- a/client/src/components/Grid/configs/histories.ts
+++ b/client/src/components/Grid/configs/histories.ts
@@ -71,6 +71,8 @@ const batch: BatchOperationArray = [
                 try {
                     const historyIds = data.map((x) => String(x.id));
                     await deleteHistories({ ids: historyIds });
+                    const historyStore = useHistoryStore();
+                    await historyStore.handleTotalCountChange(data.length, true);
                     return {
                         status: "success",
                         message: `Deleted ${data.length} histories.`,
@@ -93,6 +95,8 @@ const batch: BatchOperationArray = [
                 try {
                     const historyIds = data.map((x) => String(x.id));
                     await undeleteHistories({ ids: historyIds });
+                    const historyStore = useHistoryStore();
+                    await historyStore.handleTotalCountChange(data.length);
                     return {
                         status: "success",
                         message: `Restored ${data.length} histories.`,
@@ -115,6 +119,8 @@ const batch: BatchOperationArray = [
                 try {
                     const historyIds = data.map((x) => String(x.id));
                     await deleteHistories({ ids: historyIds, purge: true });
+                    const historyStore = useHistoryStore();
+                    await historyStore.handleTotalCountChange(data.length, true);
                     return {
                         status: "success",
                         message: `Purged ${data.length} histories.`,
@@ -186,6 +192,8 @@ const fields: FieldArray = [
                     if (confirm(_l("Are you sure that you want to delete this history?"))) {
                         try {
                             await deleteHistory({ history_id: String(data.id) });
+                            const historyStore = useHistoryStore();
+                            await historyStore.handleTotalCountChange(1, true);
                             return {
                                 status: "success",
                                 message: `'${data.name}' has been deleted.`,
@@ -207,6 +215,8 @@ const fields: FieldArray = [
                     if (confirm(_l("Are you sure that you want to permanently delete this history?"))) {
                         try {
                             await deleteHistory({ history_id: String(data.id), purge: true });
+                            const historyStore = useHistoryStore();
+                            await historyStore.handleTotalCountChange(1, true);
                             return {
                                 status: "success",
                                 message: `'${data.name}' has been permanently deleted.`,
@@ -227,6 +237,8 @@ const fields: FieldArray = [
                 handler: async (data: HistoryEntry) => {
                     try {
                         await undeleteHistory({ history_id: String(data.id) });
+                        const historyStore = useHistoryStore();
+                        await historyStore.handleTotalCountChange(1);
                         return {
                             status: "success",
                             message: `'${data.name}' has been restored.`,

From 7b29122232bfc8c12769bd0f9231db4b3d2309c9 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 22 Jul 2024 13:02:20 -0500
Subject: [PATCH 10/16] add purged/deleted/archived indicators for multiview
 items

---
 .../components/History/HistoryScrollList.vue  | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
index dad3c94eb05a..9b83f5df7afc 100644
--- a/client/src/components/History/HistoryScrollList.vue
+++ b/client/src/components/History/HistoryScrollList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheckSquare, faListAlt, faSquare } from "@fortawesome/free-regular-svg-icons";
-import { faArrowDown, faColumns, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
+import { faArchive, faArrowDown, faBurn, faColumns, faSignInAlt, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useInfiniteScroll } from "@vueuse/core";
 import { BAlert, BBadge, BButton, BButtonGroup, BListGroup, BListGroupItem, BOverlay } from "bootstrap-vue";
@@ -54,7 +54,7 @@ const emit = defineEmits<{
     (e: "update:show-modal", showModal: boolean): void;
 }>();
 
-library.add(faColumns, faSignInAlt, faListAlt, faArrowDown, faCheckSquare, faSquare);
+library.add(faColumns, faSignInAlt, faListAlt, faArrowDown, faCheckSquare, faSquare, faBurn, faTrash, faArchive);
 
 const busy = ref(false);
 const showAdvanced = ref(false);
@@ -278,6 +278,21 @@ async function loadMore(noScroll = false) {
                                 </div>
                                 <TextSummary v-else component="h4" :description="history.name" one-line-summary />
                                 <div class="d-flex align-items-center flex-gapx-1">
+                                    <BBadge pill>
+                                        <FontAwesomeIcon
+                                            v-if="history.purged"
+                                            title="Purged"
+                                            :icon="faBurn"
+                                            fixed-width />
+                                        <FontAwesomeIcon
+                                            v-else-if="history.deleted"
+                                            title="Deleted"
+                                            :icon="faTrash"
+                                            fixed-width />
+                                    </BBadge>
+                                    <BBadge v-if="history.archived" pill>
+                                        <FontAwesomeIcon title="Archived" :icon="faArchive" fixed-width />
+                                    </BBadge>
                                     <BBadge pill :title="localize('Amount of items in history')">
                                         {{ history.count }} {{ localize("items") }}
                                     </BBadge>

From 95b70903604197208170bc4557e07a59c4c2c984 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 23 Jul 2024 16:14:57 -0500
Subject: [PATCH 11/16] make adjustments to `DetailsLayout` and other history
 structuring

Move summarized type to its own file as well.
---
 .../History/CurrentHistory/HistoryDetails.vue | 21 ++++++++-
 .../HistoryOperations/HistoryOperations.vue   | 14 +++++-
 .../History/CurrentHistory/HistoryPanel.vue   | 45 +++++++++++++++++--
 .../components/History/HistoryScrollList.vue  | 24 +++++-----
 .../History/Layout/DetailsLayout.vue          |  4 +-
 client/src/components/History/Layout/types.ts |  1 +
 client/src/stores/historyStore.ts             | 42 +----------------
 7 files changed, 90 insertions(+), 61 deletions(-)
 create mode 100644 client/src/components/History/Layout/types.ts

diff --git a/client/src/components/History/CurrentHistory/HistoryDetails.vue b/client/src/components/History/CurrentHistory/HistoryDetails.vue
index 1f736c2b7e18..3255b56cae91 100644
--- a/client/src/components/History/CurrentHistory/HistoryDetails.vue
+++ b/client/src/components/History/CurrentHistory/HistoryDetails.vue
@@ -1,17 +1,24 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faArchive, faBurn, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BBadge } from "bootstrap-vue";
 
 import type { HistorySummary } from "@/api";
 import { useHistoryStore } from "@/stores/historyStore";
 
+import type { DetailsLayoutSummarized } from "../Layout/types";
+
 import TextSummary from "@/components/Common/TextSummary.vue";
 import DetailsLayout from "@/components/History/Layout/DetailsLayout.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
+library.add(faArchive, faBurn, faTrash);
+
 interface Props {
     history: HistorySummary;
     writeable: boolean;
-    summarized?: "both" | "annotation" | "tags" | "none" | "hidden";
+    summarized?: DetailsLayoutSummarized;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -53,6 +60,18 @@ function onSave(newDetails: HistorySummary) {
                 <span v-localize>last edited </span>
                 <UtcDate v-if="history.update_time" :date="history.update_time" mode="elapsed" />
             </BBadge>
+            <BBadge v-if="history.purged" pill class="alert-warning">
+                <FontAwesomeIcon :icon="faBurn" />
+                <span v-localize> Purged</span>
+            </BBadge>
+            <BBadge v-else-if="history.deleted" pill class="alert-danger">
+                <FontAwesomeIcon :icon="faTrash" />
+                <span v-localize> Deleted</span>
+            </BBadge>
+            <BBadge v-if="history.archived" pill class="alert-warning">
+                <FontAwesomeIcon :icon="faArchive" />
+                <span v-localize> Archived</span>
+            </BBadge>
         </template>
     </DetailsLayout>
 </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/HistoryOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/HistoryOperations.vue
index 4ae704e4b8fa..a9e593631b7b 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/HistoryOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/HistoryOperations.vue
@@ -12,6 +12,7 @@ library.add(faCheckSquare, faCompress);
 interface Props {
     history: HistorySummaryExtended;
     hasMatches: boolean;
+    editable: boolean;
     expandedCount: number;
     showSelection: boolean;
     isMultiViewItem: boolean;
@@ -32,7 +33,7 @@ function onUpdateOperationStatus(updateTime: number) {
 
 <template>
     <section>
-        <nav class="content-operations d-flex justify-content-between bg-secondary">
+        <nav v-if="editable" class="content-operations d-flex justify-content-between bg-secondary">
             <BButtonGroup>
                 <BButton
                     title="Select Items"
@@ -66,6 +67,17 @@ function onUpdateOperationStatus(updateTime: number) {
                 :history="history"
                 @update:operation-running="onUpdateOperationStatus" />
         </nav>
+        <nav v-else-if="isMultiViewItem" class="content-operations bg-secondary">
+            <BButton
+                title="Collapse Items"
+                class="rounded-0"
+                size="sm"
+                variant="link"
+                :disabled="!expandedCount"
+                @click="$emit('collapse-all')">
+                <FontAwesomeIcon :icon="faCompress" fixed-width />
+            </BButton>
+        </nav>
     </section>
 </template>
 
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 12d07ccab26b..07de28ce0cf0 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -84,7 +84,7 @@ const contentItemRefs = computed(() => {
 const currItemFocused = useActiveElement();
 const lastItemId = ref<string | null>(null);
 
-const { currentFilterText, currentHistoryId, pinnedHistoriesSummarizedStatus } = storeToRefs(useHistoryStore());
+const { currentFilterText, currentHistoryId, pinnedHistories, storedHistories } = storeToRefs(useHistoryStore());
 const { lastCheckedTime, totalMatchesCount, isWatching } = storeToRefs(useHistoryItemsStore());
 
 const historyStore = useHistoryStore();
@@ -143,8 +143,45 @@ const formattedSearchError = computed(() => {
     };
 });
 
+/** Returns a string that indicates whether all the pinned histories have annotations,
+ * tags, both, or none of them.
+ * This is used to format the `DetailsLayout` header uniformly for multi-view histories.
+ */
 const detailsSummarized = computed(() => {
-    return props.isMultiViewItem ? pinnedHistoriesSummarizedStatus.value : undefined;
+    if (!props.isMultiViewItem) {
+        return undefined;
+    }
+    if (pinnedHistories.value.length === 0) {
+        return "hidden";
+    }
+
+    let annotation = false;
+    let tags = false;
+    let loaded = true;
+
+    for (const h of pinnedHistories.value) {
+        const history = storedHistories.value[h.id];
+        if (!history) {
+            loaded = false;
+            break;
+        }
+        if (history.annotation) {
+            annotation = true;
+        }
+        if (history.tags.length > 0) {
+            tags = true;
+        }
+    }
+
+    if (!loaded || (annotation && tags)) {
+        return "both";
+    } else if (annotation) {
+        return "annotation";
+    } else if (tags) {
+        return "tags";
+    } else {
+        return "none";
+    }
 });
 
 const storeFilterText = computed(() => {
@@ -530,7 +567,7 @@ function setItemDragstart(
                         :summarized="detailsSummarized"
                         @update:history="historyStore.updateHistory($event)" />
 
-                    <HistoryMessages :history="history" :current-user="currentUser" />
+                    <HistoryMessages v-if="!isMultiViewItem" :history="history" :current-user="currentUser" />
 
                     <HistoryCounter
                         :history="history"
@@ -543,8 +580,8 @@ function setItemDragstart(
                         @reloadContents="reloadContents" />
 
                     <HistoryOperations
-                        v-if="canEditHistory"
                         :history="history"
+                        :editable="canEditHistory"
                         :is-multi-view-item="isMultiViewItem"
                         :show-selection="showSelection"
                         :expanded-count="expandedCount"
diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
index 9b83f5df7afc..c99e2cb619ab 100644
--- a/client/src/components/History/HistoryScrollList.vue
+++ b/client/src/components/History/HistoryScrollList.vue
@@ -278,20 +278,18 @@ async function loadMore(noScroll = false) {
                                 </div>
                                 <TextSummary v-else component="h4" :description="history.name" one-line-summary />
                                 <div class="d-flex align-items-center flex-gapx-1">
-                                    <BBadge pill>
-                                        <FontAwesomeIcon
-                                            v-if="history.purged"
-                                            title="Purged"
-                                            :icon="faBurn"
-                                            fixed-width />
-                                        <FontAwesomeIcon
-                                            v-else-if="history.deleted"
-                                            title="Deleted"
-                                            :icon="faTrash"
-                                            fixed-width />
+                                    <BBadge v-if="history.purged" pill class="alert-warning" title="Purged">
+                                        <FontAwesomeIcon :icon="faBurn" fixed-width />
                                     </BBadge>
-                                    <BBadge v-if="history.archived" pill>
-                                        <FontAwesomeIcon title="Archived" :icon="faArchive" fixed-width />
+                                    <BBadge v-else-if="history.deleted" pill class="alert-danger" title="Deleted">
+                                        <FontAwesomeIcon :icon="faTrash" fixed-width />
+                                    </BBadge>
+                                    <BBadge
+                                        v-if="history.archived && userOwnsHistory(currentUser, history)"
+                                        pill
+                                        class="alert-warning"
+                                        title="Archived">
+                                        <FontAwesomeIcon :icon="faArchive" fixed-width />
                                     </BBadge>
                                     <BBadge pill :title="localize('Amount of items in history')">
                                         {{ history.count }} {{ localize("items") }}
diff --git a/client/src/components/History/Layout/DetailsLayout.vue b/client/src/components/History/Layout/DetailsLayout.vue
index 2498fc2f2d59..19611ba408b9 100644
--- a/client/src/components/History/Layout/DetailsLayout.vue
+++ b/client/src/components/History/Layout/DetailsLayout.vue
@@ -9,6 +9,8 @@ import { computed, ref } from "vue";
 import { useUserStore } from "@/stores/userStore";
 import l from "@/utils/localization";
 
+import type { DetailsLayoutSummarized } from "./types";
+
 import TextSummary from "@/components/Common/TextSummary.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
@@ -20,7 +22,7 @@ interface Props {
     writeable?: boolean;
     annotation?: string;
     showAnnotation?: boolean;
-    summarized?: "both" | "annotation" | "tags" | "none" | "hidden";
+    summarized?: DetailsLayoutSummarized;
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/client/src/components/History/Layout/types.ts b/client/src/components/History/Layout/types.ts
new file mode 100644
index 000000000000..c637b520e8be
--- /dev/null
+++ b/client/src/components/History/Layout/types.ts
@@ -0,0 +1 @@
+export type DetailsLayoutSummarized = "both" | "annotation" | "tags" | "none" | "hidden";
diff --git a/client/src/stores/historyStore.ts b/client/src/stores/historyStore.ts
index 1c875955a903..4174cdd3b98c 100644
--- a/client/src/stores/historyStore.ts
+++ b/client/src/stores/historyStore.ts
@@ -97,42 +97,6 @@ export const useHistoryStore = defineStore("historyStore", () => {
         };
     });
 
-    const pinnedHistoriesSummarizedStatus = computed(() => {
-        let annotation = false;
-        let tags = false;
-        let loaded = true;
-
-        if (pinnedHistories.value.length === 0) {
-            return "hidden";
-        }
-
-        for (const h of pinnedHistories.value) {
-            const history = storedHistories.value[h.id];
-            if (!history) {
-                loaded = false;
-                break;
-            }
-
-            if (history.annotation) {
-                annotation = true;
-            }
-
-            if (history.tags.length > 0) {
-                tags = true;
-            }
-        }
-
-        if (!loaded || (annotation && tags)) {
-            return "both";
-        } else if (annotation) {
-            return "annotation";
-        } else if (tags) {
-            return "tags";
-        } else {
-            return "none";
-        }
-    });
-
     async function setCurrentHistory(historyId: string) {
         const currentHistory = (await setCurrentHistoryOnServer(historyId)) as HistoryDevDetailed;
         selectHistory(currentHistory);
@@ -369,11 +333,7 @@ export const useHistoryStore = defineStore("historyStore", () => {
         currentHistoryId,
         currentFilterText,
         pinnedHistories,
-        /** Returns a string that indicates whether all the pinned histories have annotations,
-         * tags, both, or none of them.
-         * This is used to format the `DetailsLayout` header uniformly for multi-view histories.
-         */
-        pinnedHistoriesSummarizedStatus,
+        storedHistories,
         getHistoryById,
         getHistoryNameById,
         setCurrentHistory,

From 3e0e9dcf6411f6c9025e9b43ac441e46de243d8c Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 24 Jul 2024 12:16:43 -0500
Subject: [PATCH 12/16] move batch operations to history store; use api methods
 there

---
 .../src/components/Grid/configs/histories.ts  | 25 +++---
 client/src/stores/historyStore.ts             | 81 ++++++++++++++---
 ...istory.services.js => history.services.ts} | 88 ++++++++-----------
 3 files changed, 117 insertions(+), 77 deletions(-)
 rename client/src/stores/services/{history.services.js => history.services.ts} (60%)

diff --git a/client/src/components/Grid/configs/histories.ts b/client/src/components/Grid/configs/histories.ts
index 0186d3851920..189b27c1cc9d 100644
--- a/client/src/components/Grid/configs/histories.ts
+++ b/client/src/components/Grid/configs/histories.ts
@@ -1,4 +1,5 @@
 import {
+    faBurn,
     faExchangeAlt,
     faEye,
     faPlus,
@@ -10,7 +11,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { useEventBus } from "@vueuse/core";
 
-import { deleteHistories, deleteHistory, historiesFetcher, undeleteHistories, undeleteHistory } from "@/api/histories";
+import { historiesFetcher } from "@/api/histories";
 import { updateTags } from "@/api/tags";
 import { useHistoryStore } from "@/stores/historyStore";
 import Filtering, { contains, equals, expandNameTag, toBool, type ValidFilter } from "@/utils/filtering";
@@ -70,9 +71,8 @@ const batch: BatchOperationArray = [
             if (confirm(_l(`Are you sure that you want to delete the selected histories?`))) {
                 try {
                     const historyIds = data.map((x) => String(x.id));
-                    await deleteHistories({ ids: historyIds });
                     const historyStore = useHistoryStore();
-                    await historyStore.handleTotalCountChange(data.length, true);
+                    await historyStore.deleteHistories(historyIds);
                     return {
                         status: "success",
                         message: `Deleted ${data.length} histories.`,
@@ -94,9 +94,8 @@ const batch: BatchOperationArray = [
             if (confirm(_l(`Are you sure that you want to restore the selected histories?`))) {
                 try {
                     const historyIds = data.map((x) => String(x.id));
-                    await undeleteHistories({ ids: historyIds });
                     const historyStore = useHistoryStore();
-                    await historyStore.handleTotalCountChange(data.length);
+                    await historyStore.restoreHistories(historyIds);
                     return {
                         status: "success",
                         message: `Restored ${data.length} histories.`,
@@ -112,15 +111,14 @@ const batch: BatchOperationArray = [
     },
     {
         title: "Purge",
-        icon: faTrash,
+        icon: faBurn,
         condition: (data: Array<HistoryEntry>) => !data.some((x) => x.purged),
         handler: async (data: Array<HistoryEntry>) => {
             if (confirm(_l(`Are you sure that you want to permanently delete the selected histories?`))) {
                 try {
                     const historyIds = data.map((x) => String(x.id));
-                    await deleteHistories({ ids: historyIds, purge: true });
                     const historyStore = useHistoryStore();
-                    await historyStore.handleTotalCountChange(data.length, true);
+                    await historyStore.deleteHistories(historyIds, true);
                     return {
                         status: "success",
                         message: `Purged ${data.length} histories.`,
@@ -191,9 +189,8 @@ const fields: FieldArray = [
                 handler: async (data: HistoryEntry) => {
                     if (confirm(_l("Are you sure that you want to delete this history?"))) {
                         try {
-                            await deleteHistory({ history_id: String(data.id) });
                             const historyStore = useHistoryStore();
-                            await historyStore.handleTotalCountChange(1, true);
+                            await historyStore.deleteHistory(String(data.id));
                             return {
                                 status: "success",
                                 message: `'${data.name}' has been deleted.`,
@@ -209,14 +206,13 @@ const fields: FieldArray = [
             },
             {
                 title: "Delete Permanently",
-                icon: faTrash,
+                icon: faBurn,
                 condition: (data: HistoryEntry) => !data.purged,
                 handler: async (data: HistoryEntry) => {
                     if (confirm(_l("Are you sure that you want to permanently delete this history?"))) {
                         try {
-                            await deleteHistory({ history_id: String(data.id), purge: true });
                             const historyStore = useHistoryStore();
-                            await historyStore.handleTotalCountChange(1, true);
+                            await historyStore.deleteHistory(String(data.id), true);
                             return {
                                 status: "success",
                                 message: `'${data.name}' has been permanently deleted.`,
@@ -236,9 +232,8 @@ const fields: FieldArray = [
                 condition: (data: HistoryEntry) => !!data.deleted && !data.purged,
                 handler: async (data: HistoryEntry) => {
                     try {
-                        await undeleteHistory({ history_id: String(data.id) });
                         const historyStore = useHistoryStore();
-                        await historyStore.handleTotalCountChange(1);
+                        await historyStore.restoreHistory(String(data.id));
                         return {
                             status: "success",
                             message: `'${data.name}' has been restored.`,
diff --git a/client/src/stores/historyStore.ts b/client/src/stores/historyStore.ts
index 4174cdd3b98c..f6e9f7e11962 100644
--- a/client/src/stores/historyStore.ts
+++ b/client/src/stores/historyStore.ts
@@ -8,14 +8,19 @@ import {
     type HistorySummary,
     type HistorySummaryExtended,
 } from "@/api";
-import { historyFetcher } from "@/api/histories";
+import {
+    deleteHistories as deleteHistoriesByIds,
+    deleteHistory as deleteHistoryById,
+    historyFetcher,
+    undeleteHistories,
+    undeleteHistory,
+} from "@/api/histories";
 import { archiveHistory, unarchiveHistory } from "@/api/histories.archived";
 import { HistoryFilters } from "@/components/History/HistoryFilters";
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
 import {
     cloneHistory,
     createAndSelectNewHistory,
-    deleteHistoryById,
     getCurrentHistoryFromServer,
     getHistoryByIdFromServer,
     getHistoryCount,
@@ -190,16 +195,67 @@ export const useHistoryStore = defineStore("historyStore", () => {
         return filteredHistoryIds[0];
     }
 
-    async function deleteHistory(historyId: string, purge: boolean) {
-        const deletedHistory = (await deleteHistoryById(historyId, purge)) as HistorySummary;
-        const nextAvailableHistoryId = getNextAvailableHistoryId([deletedHistory.id]);
-        if (nextAvailableHistoryId) {
-            await setCurrentHistory(nextAvailableHistoryId);
-        } else {
-            await createNewHistory();
+    async function deleteHistory(historyId: string, purge = false) {
+        try {
+            const { data } = await deleteHistoryById({ history_id: historyId, purge });
+            const deletedHistory = data as AnyHistory;
+            if (currentHistoryId.value === historyId) {
+                const nextAvailableHistoryId = getNextAvailableHistoryId([deletedHistory.id]);
+                if (nextAvailableHistoryId) {
+                    await setCurrentHistory(nextAvailableHistoryId);
+                } else {
+                    await createNewHistory();
+                }
+            }
+            del(storedHistories.value, deletedHistory.id);
+            await handleTotalCountChange(1, true);
+        } catch (error) {
+            rethrowSimple(error);
+        }
+    }
+
+    async function deleteHistories(ids: string[], purge = false) {
+        try {
+            const { data } = await deleteHistoriesByIds({ ids, purge });
+            const deletedHistories = data as AnyHistory[];
+            const historyIds = deletedHistories.map((x) => String(x.id));
+            if (currentHistoryId.value && historyIds.includes(currentHistoryId.value)) {
+                const nextAvailableHistoryId = getNextAvailableHistoryId(historyIds);
+                if (nextAvailableHistoryId) {
+                    await setCurrentHistory(nextAvailableHistoryId);
+                } else {
+                    await createNewHistory();
+                }
+            }
+            deletedHistories.forEach((history) => {
+                del(storedHistories.value, history.id);
+            });
+            await handleTotalCountChange(deletedHistories.length, true);
+        } catch (error) {
+            rethrowSimple(error);
+        }
+    }
+
+    async function restoreHistory(historyId: string) {
+        try {
+            const { data } = await undeleteHistory({ history_id: historyId });
+            const restoredHistory = data as AnyHistory;
+            await handleTotalCountChange(1);
+            setHistory(restoredHistory);
+        } catch (error) {
+            rethrowSimple(error);
+        }
+    }
+
+    async function restoreHistories(ids: string[]) {
+        try {
+            const { data } = await undeleteHistories({ ids });
+            const restoredHistories = data as AnyHistory[];
+            await handleTotalCountChange(restoredHistories.length);
+            setHistories(restoredHistories);
+        } catch (error) {
+            rethrowSimple(error);
         }
-        del(storedHistories.value, deletedHistory.id);
-        await handleTotalCountChange(1, true);
     }
 
     async function loadCurrentHistory(since?: string): Promise<HistoryDevDetailed | undefined> {
@@ -348,6 +404,9 @@ export const useHistoryStore = defineStore("historyStore", () => {
         copyHistory,
         createNewHistory,
         deleteHistory,
+        deleteHistories,
+        restoreHistory,
+        restoreHistories,
         handleTotalCountChange,
         loadCurrentHistory,
         loadHistories,
diff --git a/client/src/stores/services/history.services.js b/client/src/stores/services/history.services.ts
similarity index 60%
rename from client/src/stores/services/history.services.js
rename to client/src/stores/services/history.services.ts
index 6f095015d0ae..2907e4f66506 100644
--- a/client/src/stores/services/history.services.js
+++ b/client/src/stores/services/history.services.ts
@@ -1,14 +1,17 @@
-import axios from "axios";
-import { prependPath } from "utils/redirect";
+import axios, { type AxiosResponse } from "axios";
+import type { ApiResponse } from "openapi-typescript-fetch";
+
+import type { AnyHistory } from "@/api";
+import { prependPath } from "@/utils/redirect";
 
 /**
  * Generic json getter
- * @param {*} response
- * @return {Object} response.data or throws an error if response status is not 200
+ * @param response
+ * @return response.data or throws an error if response status is not 200
  */
-function doResponse(response) {
+function doResponse(response: AxiosResponse | ApiResponse) {
     if (response.status !== 200) {
-        throw new Error(response);
+        throw new Error(response.statusText);
     }
     return response.data;
 }
@@ -16,18 +19,15 @@ function doResponse(response) {
 /**
  * Some current endpoints don't accept JSON, so we need to
  * do some massaging to send in old form post data.
- * @param {Object} fields
  */
-function formData(fields = {}) {
+function formData(fields = {} as Record<string, any>) {
     return Object.keys(fields).reduce((result, fieldName) => {
         result.set(fieldName, fields[fieldName]);
         return result;
     }, new FormData());
 }
 
-/**
- * Default history request parameters.
- */
+/** Default history request parameters. */
 const stdHistoryParams = {
     view: "summary",
 };
@@ -43,7 +43,7 @@ const extendedHistoryParams = {
 
 /**
  * Create a new history, select it as the current history, and return it if successful.
- * @return {Object} the new history or throws an error if new history creation fails
+ * @return the new history or throws an error if new history creation fails
  */
 export async function createAndSelectNewHistory() {
     const url = "history/create_new_current";
@@ -57,11 +57,11 @@ export async function createAndSelectNewHistory() {
 
 /**
  * Generates copy of history on server.
- * @param {Object} history Source history
- * @param {String} name New history name
- * @param {Boolean} copyAll Copy existing contents
+ * @param history Source history
+ * @param name New history name
+ * @param copyAll Copy existing contents
  */
-export async function cloneHistory(history, name, copyAll) {
+export async function cloneHistory(history: AnyHistory, name: string, copyAll: boolean) {
     const url = "api/histories";
     const payload = {
         name,
@@ -73,23 +73,12 @@ export async function cloneHistory(history, name, copyAll) {
     return doResponse(response);
 }
 
-/**
- * Delete history on server and return the deleted history.
- * @param {String} id Encoded history id
- * @param {Boolean} [purge=false] Permanent delete
- */
-export async function deleteHistoryById(id, purge = false) {
-    const url = `api/histories/${id}` + (purge ? "?purge=True" : "");
-    const response = await axios.delete(prependPath(url), { params: stdHistoryParams });
-    return doResponse(response);
-}
-
 /**
  * Get current history from server and return it.
- * @param {String} since timestamp to get histories since
- * @return {Object} the current history
+ * @param since timestamp to get histories since
+ * @return the current history
  */
-export async function getCurrentHistoryFromServer(since = undefined) {
+export async function getCurrentHistoryFromServer(since: string | undefined = undefined) {
     const url = "history/current_history_json";
     const response = await axios.get(prependPath(url), { params: { since: since } });
     return doResponse(response);
@@ -97,10 +86,10 @@ export async function getCurrentHistoryFromServer(since = undefined) {
 
 /**
  * Set current history on server and return it.
- * @param {String} historyId Encoded history id
- * @return {Object} the current history
+ * @param historyId Encoded history id
+ * @return the current history
  */
-export async function setCurrentHistoryOnServer(historyId) {
+export async function setCurrentHistoryOnServer(historyId: string) {
     const url = "history/set_as_current";
     const response = await axios.get(prependPath(url), { params: { id: historyId } });
     return doResponse(response);
@@ -108,12 +97,12 @@ export async function setCurrentHistoryOnServer(historyId) {
 
 /**
  * Get list of histories from server and return them.
- * @param {Number} offset to start from (default = 0)
- * @param {Number | null} limit of histories to load (default = null; in which case no limit)
- * @param {String} queryString to append to url in the form `q=filter&qv=val&q=...`
- * @return {Promise.<Array>} list of histories
+ * @param offset to start from (default = 0)
+ * @param limit of histories to load (default = null; in which case no limit)
+ * @param queryString to append to url in the form `q=filter&qv=val&q=...`
+ * @return list of histories
  */
-export async function getHistoryList(offset = 0, limit = null, queryString = "") {
+export async function getHistoryList(offset = 0, limit: number | null = null, queryString = "") {
     const params = `view=summary&order=update_time&offset=${offset}`;
     let url = `api/histories?${params}`;
     if (limit !== null) {
@@ -128,7 +117,7 @@ export async function getHistoryList(offset = 0, limit = null, queryString = "")
 
 /**
  * Get number of histories for current user from server and return them.
- * @return {Promise.<Number>} number of histories
+ * @return number of histories
  */
 export async function getHistoryCount() {
     // This url is temp. for this PR, waiting on:
@@ -138,11 +127,8 @@ export async function getHistoryCount() {
     return doResponse(response);
 }
 
-/**
- * Load one history by id
- * @param {String} id
- */
-export async function getHistoryByIdFromServer(id) {
+/** Load one history by id */
+export async function getHistoryByIdFromServer(id: string) {
     const path = `api/histories/${id}`;
     const response = await axios.get(prependPath(path), { params: extendedHistoryParams });
     return doResponse(response);
@@ -151,10 +137,10 @@ export async function getHistoryByIdFromServer(id) {
 /**
  * Set permissions to private for indicated history
  * TODO: rewrite API endpoint for this
- * @param {Object} history the history to secure
- * @return {Object} the secured history
+ * @param history the history to secure
+ * @return the secured history
  */
-export async function secureHistoryOnServer(history) {
+export async function secureHistoryOnServer(history: AnyHistory) {
     const { id } = history;
     const url = "history/make_private";
     const response = await axios.post(prependPath(url), formData({ history_id: id }));
@@ -166,11 +152,11 @@ export async function secureHistoryOnServer(history) {
 
 /**
  * Update specific fields in history
- * @param {Object} historyId the history id to update
- * @param {Object} payload fields to update
- * @return {Object} the updated history
+ * @param historyId the history id to update
+ * @param payload fields to update
+ * @return the updated history
  */
-export async function updateHistoryFields(historyId, payload) {
+export async function updateHistoryFields(historyId: string, payload: Record<string, any>) {
     const url = `api/histories/${historyId}`;
     const response = await axios.put(prependPath(url), payload, { params: extendedHistoryParams });
     return doResponse(response);

From 3a6957558830de4af0f7a218c497f1e8959e23ec Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 24 Jul 2024 12:25:46 -0500
Subject: [PATCH 13/16] add `setNextAvailableHistoryId` function

---
 client/src/stores/historyStore.ts | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/client/src/stores/historyStore.ts b/client/src/stores/historyStore.ts
index f6e9f7e11962..72b23e073dd7 100644
--- a/client/src/stores/historyStore.ts
+++ b/client/src/stores/historyStore.ts
@@ -195,18 +195,22 @@ export const useHistoryStore = defineStore("historyStore", () => {
         return filteredHistoryIds[0];
     }
 
+    async function setNextAvailableHistoryId(excludedIds: string[]) {
+        if (currentHistoryId.value && excludedIds.includes(currentHistoryId.value)) {
+            const nextAvailableHistoryId = getNextAvailableHistoryId(excludedIds);
+            if (nextAvailableHistoryId) {
+                await setCurrentHistory(nextAvailableHistoryId);
+            } else {
+                await createNewHistory();
+            }
+        }
+    }
+
     async function deleteHistory(historyId: string, purge = false) {
         try {
             const { data } = await deleteHistoryById({ history_id: historyId, purge });
             const deletedHistory = data as AnyHistory;
-            if (currentHistoryId.value === historyId) {
-                const nextAvailableHistoryId = getNextAvailableHistoryId([deletedHistory.id]);
-                if (nextAvailableHistoryId) {
-                    await setCurrentHistory(nextAvailableHistoryId);
-                } else {
-                    await createNewHistory();
-                }
-            }
+            await setNextAvailableHistoryId([deletedHistory.id]);
             del(storedHistories.value, deletedHistory.id);
             await handleTotalCountChange(1, true);
         } catch (error) {
@@ -219,14 +223,7 @@ export const useHistoryStore = defineStore("historyStore", () => {
             const { data } = await deleteHistoriesByIds({ ids, purge });
             const deletedHistories = data as AnyHistory[];
             const historyIds = deletedHistories.map((x) => String(x.id));
-            if (currentHistoryId.value && historyIds.includes(currentHistoryId.value)) {
-                const nextAvailableHistoryId = getNextAvailableHistoryId(historyIds);
-                if (nextAvailableHistoryId) {
-                    await setCurrentHistory(nextAvailableHistoryId);
-                } else {
-                    await createNewHistory();
-                }
-            }
+            await setNextAvailableHistoryId(historyIds);
             deletedHistories.forEach((history) => {
                 del(storedHistories.value, history.id);
             });

From f5cc111f9f25effe4dc47b7b537f6b2ea1d9b977 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 25 Jul 2024 11:06:18 -0500
Subject: [PATCH 14/16] replace purged with "permanently deleted"
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David López <46503462+davelopez@users.noreply.github.com>
---
 .../History/CurrentHistory/HistoryMessages.vue         |  2 +-
 .../History/CurrentHistory/HistoryNavigation.vue       | 10 +++++-----
 client/src/components/History/HistoryScrollList.vue    |  6 +++++-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryMessages.vue b/client/src/components/History/CurrentHistory/HistoryMessages.vue
index ab5b6c1180cc..b078e41f5e73 100644
--- a/client/src/components/History/CurrentHistory/HistoryMessages.vue
+++ b/client/src/components/History/CurrentHistory/HistoryMessages.vue
@@ -32,7 +32,7 @@ const currentUserOwnsHistory = computed(() => {
     <div v-if="hasMessages" class="mx-3 mt-2" data-description="history messages">
         <BAlert v-if="history.purged" :show="history.purged" variant="warning">
             <FontAwesomeIcon :icon="faBurn" fixed-width />
-            {{ localize("History has been purged") }}
+            {{ localize("History has been permanently deleted") }}
         </BAlert>
         <BAlert v-else-if="history.deleted" :show="history.deleted" variant="warning">
             <FontAwesomeIcon :icon="faTrash" fixed-width />
diff --git a/client/src/components/History/CurrentHistory/HistoryNavigation.vue b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
index 533dd159cb02..4413c2401f31 100644
--- a/client/src/components/History/CurrentHistory/HistoryNavigation.vue
+++ b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
@@ -225,7 +225,7 @@ function userTitle(title: string) {
                         :title="localize(isDeletedNotPurged ? 'Permanently Delete History' : 'Delete History')"
                         @click="showDeleteModal = !showDeleteModal">
                         <FontAwesomeIcon fixed-width :icon="isDeletedNotPurged ? faBurn : faTrash" class="mr-1" />
-                        <span v-if="isDeletedNotPurged" v-localize>Purge this History</span>
+                        <span v-if="isDeletedNotPurged" v-localize>Permanently Delete History</span>
                         <span v-else v-localize>Delete this History</span>
                     </BDropdownItem>
 
@@ -318,9 +318,9 @@ function userTitle(title: string) {
             @ok="historyStore.secureHistory(history)">
             <h4>
                 History:
-                <b
-                    ><i>{{ history.name }}</i></b
-                >
+                <b>
+                    <i>{{ history.name }}</i>
+                </b>
             </h4>
             <p v-localize>
                 This will make all the data in this history private (excluding library datasets), and will set
@@ -331,7 +331,7 @@ function userTitle(title: string) {
 
         <BModal
             v-model="showDeleteModal"
-            :title="isDeletedNotPurged ? 'Purge History?' : 'Delete History?'"
+            :title="isDeletedNotPurged ? 'Permanently Delete History?' : 'Delete History?'"
             title-tag="h2"
             @ok="onDelete"
             @show="purgeHistory = isDeletedNotPurged">
diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
index c99e2cb619ab..a53b7a42913d 100644
--- a/client/src/components/History/HistoryScrollList.vue
+++ b/client/src/components/History/HistoryScrollList.vue
@@ -278,7 +278,11 @@ async function loadMore(noScroll = false) {
                                 </div>
                                 <TextSummary v-else component="h4" :description="history.name" one-line-summary />
                                 <div class="d-flex align-items-center flex-gapx-1">
-                                    <BBadge v-if="history.purged" pill class="alert-warning" title="Purged">
+                                    <BBadge
+                                        v-if="history.purged"
+                                        pill
+                                        class="alert-warning"
+                                        title="Permanently deleted">
                                         <FontAwesomeIcon :icon="faBurn" fixed-width />
                                     </BBadge>
                                     <BBadge v-else-if="history.deleted" pill class="alert-danger" title="Deleted">

From 9de0ee28cf1a3758fb778a0d800709ac854f5485 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 25 Jul 2024 11:44:59 -0500
Subject: [PATCH 15/16] add `HistoryIndicators` component

---
 .../History/CurrentHistory/HistoryDetails.vue | 26 +----------
 .../components/History/HistoryIndicators.vue  | 45 +++++++++++++++++++
 .../components/History/HistoryScrollList.vue  | 36 ++-------------
 3 files changed, 51 insertions(+), 56 deletions(-)
 create mode 100644 client/src/components/History/HistoryIndicators.vue

diff --git a/client/src/components/History/CurrentHistory/HistoryDetails.vue b/client/src/components/History/CurrentHistory/HistoryDetails.vue
index 3255b56cae91..0fa1c0d90f7e 100644
--- a/client/src/components/History/CurrentHistory/HistoryDetails.vue
+++ b/client/src/components/History/CurrentHistory/HistoryDetails.vue
@@ -1,19 +1,12 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faArchive, faBurn, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BBadge } from "bootstrap-vue";
-
 import type { HistorySummary } from "@/api";
 import { useHistoryStore } from "@/stores/historyStore";
 
 import type { DetailsLayoutSummarized } from "../Layout/types";
 
+import HistoryIndicators from "../HistoryIndicators.vue";
 import TextSummary from "@/components/Common/TextSummary.vue";
 import DetailsLayout from "@/components/History/Layout/DetailsLayout.vue";
-import UtcDate from "@/components/UtcDate.vue";
-
-library.add(faArchive, faBurn, faTrash);
 
 interface Props {
     history: HistorySummary;
@@ -56,22 +49,7 @@ function onSave(newDetails: HistorySummary) {
                 no-expand />
         </template>
         <template v-if="summarized" v-slot:update-time>
-            <BBadge v-b-tooltip pill>
-                <span v-localize>last edited </span>
-                <UtcDate v-if="history.update_time" :date="history.update_time" mode="elapsed" />
-            </BBadge>
-            <BBadge v-if="history.purged" pill class="alert-warning">
-                <FontAwesomeIcon :icon="faBurn" />
-                <span v-localize> Purged</span>
-            </BBadge>
-            <BBadge v-else-if="history.deleted" pill class="alert-danger">
-                <FontAwesomeIcon :icon="faTrash" />
-                <span v-localize> Deleted</span>
-            </BBadge>
-            <BBadge v-if="history.archived" pill class="alert-warning">
-                <FontAwesomeIcon :icon="faArchive" />
-                <span v-localize> Archived</span>
-            </BBadge>
+            <HistoryIndicators :history="history" detailed-time />
         </template>
     </DetailsLayout>
 </template>
diff --git a/client/src/components/History/HistoryIndicators.vue b/client/src/components/History/HistoryIndicators.vue
new file mode 100644
index 000000000000..d58df8490683
--- /dev/null
+++ b/client/src/components/History/HistoryIndicators.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faArchive, faBurn, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BBadge } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+
+import { type HistorySummary, userOwnsHistory } from "@/api";
+import { useUserStore } from "@/stores/userStore";
+import localize from "@/utils/localization";
+
+import UtcDate from "../UtcDate.vue";
+
+library.add(faArchive, faBurn, faTrash);
+
+const userStore = useUserStore();
+const { currentUser } = storeToRefs(userStore);
+
+const props = defineProps<{
+    history: HistorySummary;
+    includeCount?: boolean;
+    detailedTime?: boolean;
+}>();
+</script>
+
+<template>
+    <div class="d-flex align-items-center flex-gapx-1">
+        <BBadge v-if="props.includeCount" pill :title="localize('Amount of items in history')">
+            {{ history.count }} {{ localize("items") }}
+        </BBadge>
+        <BBadge v-if="history.update_time" pill :title="localize('Last edited')">
+            <span v-if="props.detailedTime" v-localize>last edited </span>
+            <UtcDate :date="history.update_time" mode="elapsed" />
+        </BBadge>
+        <BBadge v-if="props.history.purged" pill class="alert-warning" title="Permanently deleted">
+            <FontAwesomeIcon :icon="faBurn" fixed-width />
+        </BBadge>
+        <BBadge v-else-if="history.deleted" pill class="alert-danger" title="Deleted">
+            <FontAwesomeIcon :icon="faTrash" fixed-width />
+        </BBadge>
+        <BBadge v-if="history.archived && userOwnsHistory(currentUser, props.history)" pill title="Archived">
+            <FontAwesomeIcon :icon="faArchive" fixed-width />
+        </BBadge>
+    </div>
+</template>
diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
index a53b7a42913d..56bb35773595 100644
--- a/client/src/components/History/HistoryScrollList.vue
+++ b/client/src/components/History/HistoryScrollList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheckSquare, faListAlt, faSquare } from "@fortawesome/free-regular-svg-icons";
-import { faArchive, faArrowDown, faBurn, faColumns, faSignInAlt, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faColumns, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useInfiniteScroll } from "@vueuse/core";
 import { BAlert, BBadge, BButton, BButtonGroup, BListGroup, BListGroupItem, BOverlay } from "bootstrap-vue";
@@ -19,10 +19,10 @@ import localize from "@/utils/localization";
 import { HistoriesFilters } from "./HistoriesFilters";
 
 import TextSummary from "../Common/TextSummary.vue";
+import HistoryIndicators from "./HistoryIndicators.vue";
 import Heading from "@/components/Common/Heading.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import ScrollToTopButton from "@/components/ToolsList/ScrollToTopButton.vue";
-import UtcDate from "@/components/UtcDate.vue";
 
 type AdditionalOptions = "set-current" | "multi" | "center";
 type PinnedHistory = { id: string };
@@ -54,7 +54,7 @@ const emit = defineEmits<{
     (e: "update:show-modal", showModal: boolean): void;
 }>();
 
-library.add(faColumns, faSignInAlt, faListAlt, faArrowDown, faCheckSquare, faSquare, faBurn, faTrash, faArchive);
+library.add(faColumns, faSignInAlt, faListAlt, faArrowDown, faCheckSquare, faSquare);
 
 const busy = ref(false);
 const showAdvanced = ref(false);
@@ -277,35 +277,7 @@ async function loadMore(noScroll = false) {
                                     </i>
                                 </div>
                                 <TextSummary v-else component="h4" :description="history.name" one-line-summary />
-                                <div class="d-flex align-items-center flex-gapx-1">
-                                    <BBadge
-                                        v-if="history.purged"
-                                        pill
-                                        class="alert-warning"
-                                        title="Permanently deleted">
-                                        <FontAwesomeIcon :icon="faBurn" fixed-width />
-                                    </BBadge>
-                                    <BBadge v-else-if="history.deleted" pill class="alert-danger" title="Deleted">
-                                        <FontAwesomeIcon :icon="faTrash" fixed-width />
-                                    </BBadge>
-                                    <BBadge
-                                        v-if="history.archived && userOwnsHistory(currentUser, history)"
-                                        pill
-                                        class="alert-warning"
-                                        title="Archived">
-                                        <FontAwesomeIcon :icon="faArchive" fixed-width />
-                                    </BBadge>
-                                    <BBadge pill :title="localize('Amount of items in history')">
-                                        {{ history.count }} {{ localize("items") }}
-                                    </BBadge>
-                                    <BBadge
-                                        v-if="history.update_time"
-                                        v-b-tooltip.noninteractive.hover
-                                        pill
-                                        :title="localize('Last edited')">
-                                        <UtcDate :date="history.update_time" mode="elapsed" />
-                                    </BBadge>
-                                </div>
+                                <HistoryIndicators :history="history" include-count />
                             </div>
 
                             <p v-if="!isMultiviewPanel && history.annotation" class="my-1">{{ history.annotation }}</p>

From 1dac9d96a7f77dd94c51e46cdccc8929b0fec3f3 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 26 Jul 2024 10:19:08 +0200
Subject: [PATCH 16/16] Adapt HistoryView test

To use updated message for permanently deleted history
---
 client/src/components/History/HistoryView.test.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/History/HistoryView.test.js b/client/src/components/History/HistoryView.test.js
index c37f4306b124..d74ce6d885a2 100644
--- a/client/src/components/History/HistoryView.test.js
+++ b/client/src/components/History/HistoryView.test.js
@@ -185,7 +185,9 @@ describe("History center panel View", () => {
         expect(storageDashboardButtonDisabled(wrapper)).toBeFalsy();
 
         // instead we have an alert
-        expect(wrapper.find("[data-description='history messages']").text()).toBe("History has been purged");
+        expect(wrapper.find("[data-description='history messages']").text()).toBe(
+            "History has been permanently deleted"
+        );
     });
 
     it("should not display archived message and should be importable when user is not owner and history is archived", async () => {