Merge pull request #20702 from itisAliRH/history-navigation-improvements

History Components Navigation/Heading Improvements

Author: ahmedhamidawan

client/src/components/Citation/CitationsList.test.ts

@@ -1,11 +1,14 @@
+import { createTestingPinia } from "@pinia/testing";
 import { getLocalVue } from "@tests/jest/helpers";
 import { mount, type Wrapper } from "@vue/test-utils";
 import flushPromises from "flush-promises";
+import VueRouter from "vue-router";
 
 import CitationItem from "./CitationItem.vue";
 import MountTarget from "./CitationsList.vue";
 
 const localVue = getLocalVue(true);
+localVue.use(VueRouter);
 
 jest.mock("@/composables/config", () => ({
     useConfig: jest.fn(() => ({
@@ -38,12 +41,19 @@ describe("CitationsList", () => {
     let wrapper: Wrapper<Vue>;
 
     beforeEach(async () => {
+        const pinia = createTestingPinia();
+
+        const router = new VueRouter();
+        router.push("/histories/citations?id=test-id");
+
         wrapper = mount(MountTarget as object, {
             propsData: {
                 id: "test-id",
                 source: "histories",
             },
             localVue,
+            pinia,
+            router,
         });
 
         await flushPromises();

client/src/components/Citation/CitationsList.vue

@@ -6,13 +6,14 @@ import { computed, onMounted, onUpdated, ref } from "vue";
 
 import { getCitations } from "@/components/Citation/services";
 import { useConfig } from "@/composables/config";
+import { useHistoryStore } from "@/stores/historyStore";
 import { copy } from "@/utils/clipboard";
 
 import type { Citation } from ".";
 import { Cite } from "./cite";
 
 import CitationItem from "@/components/Citation/CitationItem.vue";
-import Heading from "@/components/Common/Heading.vue";
+import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 
 const outputFormats = Object.freeze({
     CITATION: "bibliography",
@@ -31,6 +32,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const { config } = useConfig(true);
+const historyStore = useHistoryStore();
 
 const emit = defineEmits(["rendered", "show", "shown", "hide", "hidden"]);
 
@@ -53,6 +55,16 @@ onMounted(async () => {
     }
 });
 
+const breadcrumbItems = computed(() => [
+    { title: "Histories", to: "/histories/list" },
+    {
+        title: historyStore.getHistoryNameById(props.id),
+        to: `/histories/view?id=${props.id}`,
+        superText: historyStore.currentHistoryId === props.id ? "current" : undefined,
+    },
+    { title: "Tool References" },
+]);
+
 /** The fetched Citations in addition to the Galaxy citation from config */
 const citations = computed<Citation[]>(() => {
     const allCitations = [...fetchedCitations.value];
@@ -120,7 +132,8 @@ function citationsToBibtexAsText() {
 
 <template>
     <div>
-        <Heading h1 separator inline size="lg">History Tool References</Heading>
+        <BreadcrumbHeading :items="breadcrumbItems" />
+
         <div v-if="isLoading" class="text-center">
             <BSpinner />
             <p class="ml-2">Loading references...</p>

client/src/components/Common/BreadcrumbHeading.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BLink } from "bootstrap-vue";
 import type { RawLocation } from "vue-router";
 import { useRouter } from "vue-router/composables";
@@ -33,9 +34,11 @@ function isPathActive(path: RawLocation): boolean {
                     :title="`Go back to ${localize(item.title)}`"
                     :to="item.to"
                     class="breadcrumb-heading-header-active">
+                    <FontAwesomeIcon v-if="item.icon" :icon="item.icon" />
                     {{ localize(item.title) }}
                 </BLink>
                 <span v-else :key="'else-' + index" class="breadcrumb-heading-header-inactive">
+                    <FontAwesomeIcon v-if="item.icon" :icon="item.icon" />
                     {{ localize(item.title) }}
                 </span>
 

client/src/components/Common/index.ts

@@ -1,3 +1,4 @@
+import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import type { RawLocation } from "vue-router";
 
 // TODO: Not sure if this is the best place for this type
@@ -9,14 +10,24 @@ export type ColorVariant = "primary" | "secondary" | "success" | "danger" | "war
  * displayed alongside the item.
  */
 export interface BreadcrumbItem {
-    /** The display text for the breadcrumb item */
+    /**
+     * The label of the breadcrumb item.
+     */
     title: string;
-    /** Optional The URL or route to navigate to when the breadcrumb item is clicked.
+
+    /**
+     * Optional The URL or route to navigate to when the breadcrumb item is clicked.
      * the item will not be clickable if this is not provided or the current route matches this location.
      */
     to?: RawLocation;
+
     /**
      * Optional additional text displayed above the item.
      */
     superText?: string;
+
+    /**
+     * Optional icon to display alongside the breadcrumb item.
+     */
+    icon?: IconDefinition;
 }

client/src/components/Grid/GridInvocation.vue

@@ -22,6 +22,7 @@ interface Props {
     ownerGrid?: boolean;
     filteredFor?: { type: "History" | "StoredWorkflow"; id: string; name: string };
     invocationsList?: WorkflowInvocation[];
+    hideHeading?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps<Props>(), {
     ownerGrid: true,
     filteredFor: undefined,
     invocationsList: undefined,
+    hideHeading: false,
 });
 
 const { currentUser } = storeToRefs(useUserStore());
@@ -100,7 +102,7 @@ function refreshTable() {
 
 <template>
     <div class="d-flex flex-column">
-        <div v-if="forStoredWorkflow || forHistory" class="d-flex">
+        <div v-if="!hideHeading && (forStoredWorkflow || forHistory)" class="d-flex">
             <Heading h1 separator inline truncate size="lg" class="flex-grow-1 mb-2">{{ effectiveTitle }}</Heading>
         </div>
         <GridList

client/src/components/History/Archiving/HistoryArchiveWizard.test.ts

@@ -27,7 +27,6 @@ const { server, http } = useServerMock();
 const TEST_HISTORY_ID = "test-history-id";
 const TEST_HISTORY = {
     id: TEST_HISTORY_ID,
-    name: "fake-history-name",
     archived: false,
 };
 
@@ -63,13 +62,6 @@ describe("HistoryArchiveWizard.vue", () => {
         );
     });
 
-    it("should render the history name in the header", async () => {
-        const wrapper = await mountComponentWithHistory(TEST_HISTORY as HistorySummary);
-
-        const header = wrapper.find("h1");
-        expect(header.text()).toContain(TEST_HISTORY.name);
-    });
-
     it("should render only the simple archival mode when no writeable file sources are available", async () => {
         const wrapper = await mountComponentWithHistory(TEST_HISTORY as HistorySummary);
 

client/src/components/History/Archiving/HistoryArchiveWizard.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faArchive } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BCard, BTab, BTabs } from "bootstrap-vue";
 import { computed, ref } from "vue";
 import { RouterLink } from "vue-router";
@@ -12,12 +10,11 @@ import { useFileSources } from "@/composables/fileSources";
 import { useToast } from "@/composables/toast";
 import { useHistoryStore } from "@/stores/historyStore";
 
+import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import HistoryArchiveExportSelector from "@/components/History/Archiving/HistoryArchiveExportSelector.vue";
 import HistoryArchiveSimple from "@/components/History/Archiving/HistoryArchiveSimple.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-library.add(faArchive);
-
 const historyStore = useHistoryStore();
 const { config } = useConfig(true);
 const toast = useToast();
@@ -65,16 +62,25 @@ async function onArchiveHistory(exportRecordId?: string) {
         isArchiving.value = false;
     }
 }
+
+const breadcrumbItems = computed(() => [
+    { title: "Histories", to: "/histories/list" },
+    {
+        title: history.value?.name || "Archive History",
+        to: `/histories/view?id=${props.historyId}`,
+        superText: historyStore.currentHistoryId === props.historyId ? "current" : undefined,
+    },
+    { title: "Archive", icon: faArchive },
+]);
 </script>
 
 <template>
     <div class="history-archive-wizard">
-        <FontAwesomeIcon icon="archive" size="2x" class="text-primary float-left mr-2" />
-        <h1 class="h-lg">
-            Archive
-            <LoadingSpan v-if="!history" spinner-only />
-            <b v-else>{{ history.name }}</b>
-        </h1>
+        <BreadcrumbHeading :items="breadcrumbItems" />
+
+        <BAlert v-if="!history" show>
+            <LoadingSpan spinner-only />
+        </BAlert>
 
         <BAlert v-if="isHistoryAlreadyArchived" id="history-archived-alert" show variant="success">
             This history has been archived. You can access it from the

client/src/components/History/CurrentHistory/HistoryNavigation.test.ts

@@ -2,38 +2,14 @@ import { getLocalVue } from "@tests/jest/helpers";
 import { shallowMount } from "@vue/test-utils";
 import { createPinia } from "pinia";
 
+import type { RegisteredUser } from "@/api";
 import { useUserStore } from "@/stores/userStore";
 
 import HistoryNavigation from "./HistoryNavigation.vue";
 
 const localVue = getLocalVue();
 
-// all options
-const expectedOptions = [
-    "Show Histories Side-by-Side",
-    "Resume Paused Jobs",
-    "Copy this History",
-    "Delete this History",
-    "Export Tool References",
-    "Export History to File",
-    "Archive History",
-    "Extract Workflow",
-    "Show Invocations",
-    "Share & Manage Access",
-];
-
-// options enabled for logged-out users
-const anonymousOptions = [
-    "Resume Paused Jobs",
-    "Delete this History",
-    "Export Tool References",
-    "Export History to File",
-];
-
-// options disabled for logged-out users
-const anonymousDisabledOptions = expectedOptions.filter((option) => !anonymousOptions.includes(option));
-
-async function createWrapper(propsData: object, userData?: any) {
+async function createWrapper(propsData: object, userData?: Partial<RegisteredUser>) {
     const pinia = createPinia();
 
     const wrapper = shallowMount(HistoryNavigation as object, {
@@ -43,7 +19,7 @@ async function createWrapper(propsData: object, userData?: any) {
     });
 
     const userStore = useUserStore();
-    userStore.currentUser = { ...userStore.currentUser, ...userData };
+    userStore.currentUser = { ...(userStore.currentUser as RegisteredUser), ...userData };
 
     return wrapper;
 }
@@ -65,12 +41,6 @@ describe("History Navigation", () => {
         expect(createButton.attributes().disabled).toBeFalsy();
         const switchButton = wrapper.find("*[data-description='switch to another history']");
         expect(switchButton.attributes().disabled).toBeFalsy();
-
-        const dropDown = wrapper.find("*[data-description='history options']");
-        const optionElements = dropDown.findAll("bdropdownitem-stub");
-        const optionTexts = optionElements.wrappers.map((el) => el.text());
-
-        expect(optionTexts).toStrictEqual(expectedOptions);
     });
 
     it("disables options for anonymous users", async () => {
@@ -83,28 +53,5 @@ describe("History Navigation", () => {
         expect(createButton.attributes().disabled).toBeTruthy();
         const switchButton = wrapper.find("*[data-description='switch to another history']");
         expect(switchButton.attributes().disabled).toBeTruthy();
-
-        const dropDown = wrapper.find("*[data-description='history options']");
-        const enabledOptionElements = dropDown.findAll("bdropdownitem-stub:not([disabled])");
-        const enabledOptionTexts = enabledOptionElements.wrappers.map((el) => el.text());
-        expect(enabledOptionTexts).toStrictEqual(anonymousOptions);
-
-        const disabledOptionElements = dropDown.findAll("bdropdownitem-stub[disabled]");
-        const disabledOptionTexts = disabledOptionElements.wrappers.map((el) => el.text());
-        expect(disabledOptionTexts).toStrictEqual(anonymousDisabledOptions);
-    });
-
-    it("prompts anonymous users to log in", async () => {
-        const wrapper = await createWrapper({
-            history: { id: "current_history_id" },
-            histories: [],
-        });
-
-        const dropDown = wrapper.find("*[data-description='history options']");
-        const disabledOptionElements = dropDown.findAll("bdropdownitem-stub[disabled]");
-
-        disabledOptionElements.wrappers.forEach((option) => {
-            expect((option.attributes("title") as string).toLowerCase()).toContain("log in");
-        });
     });
 });