From 2f69953d1fc5edcc0aa4ecfb9534fb45c46ee1fc Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 6 Mar 2024 18:10:08 +0100
Subject: [PATCH 1/4] Fix action on history name click for invocations

If the history is archived or purged instead of trying to set it as current history it will open a new browser tab with the history View.
---
 .../History/SwitchToHistoryLink.vue           | 50 +++++++++++++++++++
 .../Workflow/InvocationsList.test.js          |  9 +---
 .../components/Workflow/InvocationsList.vue   | 16 ++----
 3 files changed, 54 insertions(+), 21 deletions(-)
 create mode 100644 client/src/components/History/SwitchToHistoryLink.vue

diff --git a/client/src/components/History/SwitchToHistoryLink.vue b/client/src/components/History/SwitchToHistoryLink.vue
new file mode 100644
index 000000000000..424c67741bf7
--- /dev/null
+++ b/client/src/components/History/SwitchToHistoryLink.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { BLink } from "bootstrap-vue";
+import { computed } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { HistorySummary } from "@/api";
+import { useHistoryStore } from "@/stores/historyStore";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+const router = useRouter();
+const historyStore = useHistoryStore();
+
+interface Props {
+    historyId: string;
+}
+
+const props = defineProps<Props>();
+
+const history = computed(() => historyStore.getHistoryById(props.historyId));
+const canSwitch = computed(() => !!history.value && !history.value.archived && !history.value.purged);
+const actionText = computed(() => (canSwitch.value ? "Switch to" : "View in new tab"));
+
+function onClick(history: HistorySummary) {
+    console.log("onClick", history);
+    if (canSwitch.value) {
+        console.log("setCurrentHistory", history.id);
+        historyStore.setCurrentHistory(history.id);
+        return;
+    }
+    console.log("viewHistoryInNewTab", history);
+    viewHistoryInNewTab(history);
+}
+
+function viewHistoryInNewTab(history: HistorySummary) {
+    const routeData = router.resolve(`/histories/view?id=${history.id}`);
+    window.open(routeData.href, "_blank");
+}
+</script>
+
+<template>
+    <div>
+        <LoadingSpan v-if="!history" />
+        <div v-else v-b-tooltip.hover.top.html :title="`<b>${actionText}</b><br>${history.name}`" class="truncate">
+            <BLink class="history-link" href="#" @click.stop="onClick(history)">
+                {{ history.name }}
+            </BLink>
+        </div>
+    </div>
+</template>
diff --git a/client/src/components/Workflow/InvocationsList.test.js b/client/src/components/Workflow/InvocationsList.test.js
index d2f230303a08..4ff84348b67d 100644
--- a/client/src/components/Workflow/InvocationsList.test.js
+++ b/client/src/components/Workflow/InvocationsList.test.js
@@ -173,7 +173,7 @@ describe("InvocationsList.vue", () => {
             const row = rows[0];
             const columns = row.findAll("td");
             expect(columns.at(1).text()).toBe("workflow name");
-            expect(columns.at(2).text()).toBe("history name");
+            expect(columns.at(2).text()).toBe("Loading..."); // Checking the actual name will be tested in its own component
             expect(columns.at(3).text()).toBe(
                 formatDistanceToNow(parseISO(`${mockInvocationData.create_time}Z`), { addSuffix: true })
             );
@@ -192,13 +192,6 @@ describe("InvocationsList.vue", () => {
             expect(rows.length).toBe(1);
         });
 
-        it("calls switchHistory", async () => {
-            const mockMethod = jest.fn();
-            wrapper.vm.switchHistory = mockMethod;
-            await wrapper.find("#switch-to-history").trigger("click");
-            expect(mockMethod).toHaveBeenCalled();
-        });
-
         it("calls executeWorkflow", async () => {
             const mockMethod = jest.fn();
             $router.push = mockMethod;
diff --git a/client/src/components/Workflow/InvocationsList.vue b/client/src/components/Workflow/InvocationsList.vue
index 3bdc529f3e4a..82aa594a8434 100644
--- a/client/src/components/Workflow/InvocationsList.vue
+++ b/client/src/components/Workflow/InvocationsList.vue
@@ -55,14 +55,7 @@
                 </div>
             </template>
             <template v-slot:cell(history_id)="data">
-                <div
-                    v-b-tooltip.hover.top.html
-                    :title="`<b>Switch to</b><br>${getHistoryNameById(data.item.history_id)}`"
-                    class="truncate">
-                    <b-link id="switch-to-history" href="#" @click.stop="switchHistory(data.item.history_id)">
-                        {{ getHistoryNameById(data.item.history_id) }}
-                    </b-link>
-                </div>
+                <SwitchToHistoryLink :history-id="data.value" />
             </template>
             <template v-slot:cell(create_time)="data">
                 <UtcDate :date="data.value" mode="elapsed" />
@@ -86,7 +79,6 @@
 </template>
 
 <script>
-import { getGalaxyInstance } from "app";
 import { invocationsProvider } from "components/providers/InvocationsProvider";
 import UtcDate from "components/UtcDate";
 import WorkflowInvocationState from "components/WorkflowInvocationState/WorkflowInvocationState";
@@ -98,12 +90,14 @@ import { useWorkflowStore } from "@/stores/workflowStore";
 import paginationMixin from "./paginationMixin";
 
 import WorkflowRunButton from "./WorkflowRunButton.vue";
+import SwitchToHistoryLink from "@/components/History/SwitchToHistoryLink.vue";
 
 export default {
     components: {
         UtcDate,
         WorkflowInvocationState,
         WorkflowRunButton,
+        SwitchToHistoryLink,
     },
     mixins: [paginationMixin],
     props: {
@@ -215,10 +209,6 @@ export default {
         swapRowDetails(row) {
             row.toggleDetails();
         },
-        switchHistory(historyId) {
-            const Galaxy = getGalaxyInstance();
-            Galaxy.currHistoryPanel.switchToHistory(historyId);
-        },
     },
 };
 </script>

From fa34c46a975e80b789861e125b5f52abf7f63cc3 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 6 Mar 2024 18:10:23 +0100
Subject: [PATCH 2/4] Add SwitchToHistoryLink unit tests

---
 .../History/SwitchToHistoryLink.test.ts       | 100 ++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 client/src/components/History/SwitchToHistoryLink.test.ts

diff --git a/client/src/components/History/SwitchToHistoryLink.test.ts b/client/src/components/History/SwitchToHistoryLink.test.ts
new file mode 100644
index 000000000000..e45a043e5fa3
--- /dev/null
+++ b/client/src/components/History/SwitchToHistoryLink.test.ts
@@ -0,0 +1,100 @@
+import { createTestingPinia } from "@pinia/testing";
+import { getLocalVue } from "@tests/jest/helpers";
+import { shallowMount } from "@vue/test-utils";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import flushPromises from "flush-promises";
+
+import { type HistorySummary } from "@/api";
+
+import SwitchToHistoryLink from "./SwitchToHistoryLink.vue";
+
+const localVue = getLocalVue(true);
+
+const selectors = {
+    historyLink: ".history-link",
+} as const;
+
+function mountSwitchToHistoryLinkForHistory(history: HistorySummary) {
+    const pinia = createTestingPinia();
+
+    const axiosMock = new MockAdapter(axios);
+    axiosMock.onGet(`/api/histories/${history.id}`).reply(200, history);
+
+    const wrapper = shallowMount(SwitchToHistoryLink as object, {
+        propsData: {
+            historyId: history.id,
+        },
+        localVue,
+        pinia,
+        stubs: {
+            FontAwesomeIcon: true,
+        },
+    });
+    return wrapper;
+}
+
+async function expectOptionForHistory(option: string, history: HistorySummary) {
+    const wrapper = mountSwitchToHistoryLinkForHistory(history);
+
+    // Wait for the history to be loaded
+    await flushPromises();
+
+    expect(wrapper.html()).toContain(option);
+    expect(wrapper.text()).toContain(history.name);
+}
+
+describe("SwitchToHistoryLink", () => {
+    it("loads the history information from the store", async () => {
+        const history = {
+            id: "history-id-to-load",
+            name: "History Name",
+            deleted: false,
+            archived: false,
+            purged: false,
+        } as HistorySummary;
+        const wrapper = mountSwitchToHistoryLinkForHistory(history);
+
+        expect(wrapper.find(selectors.historyLink).exists()).toBe(false);
+        expect(wrapper.html()).toContain("Loading");
+
+        // Wait for the history to be loaded
+        await flushPromises();
+
+        expect(wrapper.find(selectors.historyLink).exists()).toBe(true);
+        expect(wrapper.text()).toContain(history.name);
+    });
+
+    it("should display the Switch option when the history can be switched to", async () => {
+        const history = {
+            id: "active-history-id",
+            name: "History Active",
+            deleted: false,
+            purged: false,
+            archived: false,
+        } as HistorySummary;
+        await expectOptionForHistory("Switch", history);
+    });
+
+    it("should display the View option when the history is purged", async () => {
+        const history = {
+            id: "purged-history-id",
+            name: "History Purged",
+            deleted: false,
+            purged: true,
+            archived: false,
+        } as HistorySummary;
+        await expectOptionForHistory("View", history);
+    });
+
+    it("should display the View option when the history is archived", async () => {
+        const history = {
+            id: "archived-history-id",
+            name: "History Archived",
+            deleted: false,
+            purged: false,
+            archived: true,
+        } as HistorySummary;
+        await expectOptionForHistory("View", history);
+    });
+});

From 56f15d9c1a737c8d5e7a533fb355b2f254f7d1c1 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 6 Mar 2024 18:24:27 +0100
Subject: [PATCH 3/4] Add icons to clarify the state of the history

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

diff --git a/client/src/components/History/SwitchToHistoryLink.vue b/client/src/components/History/SwitchToHistoryLink.vue
index 424c67741bf7..c76c061e80be 100644
--- a/client/src/components/History/SwitchToHistoryLink.vue
+++ b/client/src/components/History/SwitchToHistoryLink.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faArchive, faBurn } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BLink } from "bootstrap-vue";
 import { computed } from "vue";
 import { useRouter } from "vue-router/composables";
@@ -8,6 +11,8 @@ import { useHistoryStore } from "@/stores/historyStore";
 
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
+library.add(faArchive, faBurn);
+
 const router = useRouter();
 const historyStore = useHistoryStore();
 
@@ -42,6 +47,8 @@ function viewHistoryInNewTab(history: HistorySummary) {
     <div>
         <LoadingSpan v-if="!history" />
         <div v-else v-b-tooltip.hover.top.html :title="`<b>${actionText}</b><br>${history.name}`" class="truncate">
+            <FontAwesomeIcon v-if="history.purged" :icon="faBurn" title="This history has been purged" />
+            <FontAwesomeIcon v-if="history.archived" :icon="faArchive" title="This history has been archived" />
             <BLink class="history-link" href="#" @click.stop="onClick(history)">
                 {{ history.name }}
             </BLink>

From da6da819b21097a4f8aafbf495fec5ccd153d875 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Thu, 7 Mar 2024 18:19:52 +0100
Subject: [PATCH 4/4] Set icons style by popular opinion

---
 .../History/SwitchToHistoryLink.vue           | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/src/components/History/SwitchToHistoryLink.vue b/client/src/components/History/SwitchToHistoryLink.vue
index c76c061e80be..97dbb4aea469 100644
--- a/client/src/components/History/SwitchToHistoryLink.vue
+++ b/client/src/components/History/SwitchToHistoryLink.vue
@@ -23,7 +23,9 @@ interface Props {
 const props = defineProps<Props>();
 
 const history = computed(() => historyStore.getHistoryById(props.historyId));
+
 const canSwitch = computed(() => !!history.value && !history.value.archived && !history.value.purged);
+
 const actionText = computed(() => (canSwitch.value ? "Switch to" : "View in new tab"));
 
 function onClick(history: HistorySummary) {
@@ -46,12 +48,22 @@ function viewHistoryInNewTab(history: HistorySummary) {
 <template>
     <div>
         <LoadingSpan v-if="!history" />
-        <div v-else v-b-tooltip.hover.top.html :title="`<b>${actionText}</b><br>${history.name}`" class="truncate">
-            <FontAwesomeIcon v-if="history.purged" :icon="faBurn" title="This history has been purged" />
-            <FontAwesomeIcon v-if="history.archived" :icon="faArchive" title="This history has been archived" />
-            <BLink class="history-link" href="#" @click.stop="onClick(history)">
+        <div v-else v-b-tooltip.hover.top.html :title="`<b>${actionText}</b><br>${history.name}`" class="history-link">
+            <BLink class="truncate" href="#" @click.stop="onClick(history)">
                 {{ history.name }}
             </BLink>
+
+            <FontAwesomeIcon v-if="history.purged" :icon="faBurn" fixed-width />
+            <FontAwesomeIcon v-else-if="history.archived" :icon="faArchive" fixed-width />
         </div>
     </div>
 </template>
+
+<style scoped>
+.history-link {
+    display: flex;
+    gap: 1px;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>