From d1a3e65fb314e34927c01903dfa18f5f464e2836 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 29 May 2024 15:34:28 -0500
Subject: [PATCH] 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 e433f5a5738a..c87db5961306 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);
@@ -99,11 +99,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"
@@ -116,6 +119,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"
@@ -130,10 +134,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" />
@@ -146,10 +151,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')"
@@ -158,7 +165,7 @@ function userTitle(title: string) {
                         <span v-localize>Show Histories Side-by-Side</span>
                     </BDropdownItem>
 
-                    <BDropdownDivider />
+                    <BDropdownDivider v-if="!props.minimal" />
 
                     <BDropdownItem
                         :title="localize('Resume all Paused Jobs in this History')"
@@ -253,6 +260,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>