Merge pull request #17616 from davelopez/23.2_fix_invocation_switch_t…

…o_history

[23.2] Fix switch to history in invocations list

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);
+    });
+});

client/src/components/History/SwitchToHistoryLink.vue

@@ -0,0 +1,69 @@
+<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";
+
+import { HistorySummary } from "@/api";
+import { useHistoryStore } from "@/stores/historyStore";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+library.add(faArchive, faBurn);
+
+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="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>

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;

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>