move Galaxy config citation to CitationsList directly instead of services

We decided that it makes more sense for the Galaxy citation to be shown in the `Export Tool References` view, rather than on each tool form as well.

Author: ahmedhamidawan

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

@@ -0,0 +1,65 @@
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, type Wrapper } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+
+import CitationItem from "./CitationItem.vue";
+import MountTarget from "./CitationsList.vue";
+
+const localVue = getLocalVue(true);
+
+jest.mock("@/composables/config", () => ({
+    useConfig: jest.fn(() => ({
+        config: {
+            value: {
+                citation_bibtex:
+                    "@article{Galaxy2024, title={The Galaxy platform for accessible, reproducible, and collaborative data analyses: 2024 update}, author={{The Galaxy Community}}, journal={Nucleic Acids Research}, year={2024}, doi={10.1093/nar/gkae410}, url={https://doi.org/10.1093/nar/gkae410}}",
+            },
+        },
+    })),
+}));
+
+jest.mock("@/components/Citation/services", () => ({
+    getCitations: jest.fn(() =>
+        Promise.resolve([
+            {
+                raw: "@article{Hourahine_2020,\n\tdoi = {10.1063/1.5143190},\n\turl = {https://doi.org/10.1063%2F1.5143190},\n\tyear = 2020,\n\tmonth = {mar},\n\tpublisher = {{AIP} Publishing},\n\tvolume = {152},\n\tnumber = {12},\n\tpages = {124101},\n\tauthor = {B. Hourahine and B. Aradi and V. Blum and F. Bonaf{\\'{e}} and A. Buccheri and C. Camacho and C. Cevallos and M. Y. Deshaye and T. Dumitric{\\u{a}} and A. Dominguez and S. Ehlert and M. Elstner and T. van der Heide and J. Hermann and S. Irle and J. J. Kranz and C. K\u00f6hler and T. Kowalczyk and T. Kuba{\\v{r}} and I. S. Lee and V. Lutsker and R. J. Maurer and S. K. Min and I. Mitchell and C. Negre and T. A. Niehaus and A. M. N. Niklasson and A. J. Page and A. Pecchia and G. Penazzi and M. P. Persson and J. {\\v{R}}ez{\\'{a}}{\\v{c}} and C. G. S{\\'{a}}nchez and M. Sternberg and M. St\u00f6hr and F. Stuckenberg and A. Tkatchenko and V. W.-z. Yu and T. Frauenheim},\n\ttitle = {{DFTB}$\\mathplus$, a software package for efficient approximate density functional theory based atomistic simulations},\n\tjournal = {The Journal of Chemical Physics}\n}",
+                cite: {
+                    format: jest.fn(
+                        () =>
+                            '<div class="csl-bib-body"><div data-csl-entry-id="Hourahine_2020" class="csl-entry">Hourahine, B. (2020). DFTB$\\mathplus$, a software package for efficient approximate density functional theory based atomistic simulations. The Journal of Chemical Physics, 152(12), 124101. https://doi.org/10.1063/1.5143190</div></div>'
+                    ),
+                },
+            },
+        ])
+    ),
+}));
+
+describe("CitationsList", () => {
+    let wrapper: Wrapper<Vue>;
+
+    beforeEach(async () => {
+        wrapper = mount(MountTarget as object, {
+            propsData: {
+                id: "test-id",
+                source: "histories",
+            },
+            localVue,
+        });
+
+        await flushPromises();
+    });
+
+    it("renders the config Galaxy citation and any fetched citations", () => {
+        const citationItems = wrapper.findAllComponents(CitationItem);
+
+        // It finds the Galaxy citation from the config, and the mocked citation for the history tools.
+        expect(citationItems.length).toBe(2);
+
+        expect(citationItems.at(0).text()).toContain(
+            "The Galaxy platform for accessible, reproducible, and collaborative data analyses: 2024 update"
+        );
+        expect(citationItems.at(1).text()).toContain(
+            "DFTB$\\mathplus$, a software package for efficient approximate density functional theory based atomistic simulations"
+        );
+    });
+});

client/src/components/Citation/CitationsList.vue

@@ -2,13 +2,14 @@
 import { faCopy, faDownload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BCard, BCollapse, BNav, BNavItem, BSpinner } from "bootstrap-vue";
-import { onMounted, onUpdated, ref } from "vue";
+import { computed, onMounted, onUpdated, ref } from "vue";
 
 import { getCitations } from "@/components/Citation/services";
 import { useConfig } from "@/composables/config";
 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";
@@ -34,7 +35,7 @@ const { config } = useConfig(true);
 const emit = defineEmits(["rendered", "show", "shown", "hide", "hidden"]);
 
 const outputFormat = ref<string>(outputFormats.CITATION);
-const citations = ref<Citation[]>([]);
+const fetchedCitations = ref<Citation[]>([]);
 const isLoading = ref<boolean>(false);
 
 onUpdated(() => {
@@ -44,14 +45,32 @@ onUpdated(() => {
 onMounted(async () => {
     try {
         isLoading.value = true;
-        citations.value = await getCitations(props.source, props.id);
+        fetchedCitations.value = await getCitations(props.source, props.id);
     } catch (e) {
         console.error(e);
     } finally {
         isLoading.value = false;
     }
 });
 
+/** The fetched Citations in addition to the Galaxy citation from config */
+const citations = computed<Citation[]>(() => {
+    const allCitations = [...fetchedCitations.value];
+    
+    if (!config.value?.citation_bibtex) {
+        return allCitations;
+    }
+    
+    try {
+        const cite = new Cite(config.value.citation_bibtex);
+        const galaxyCitation = { raw: config.value.citation_bibtex, cite };
+        return [galaxyCitation, ...allCitations];
+    } catch (err) {
+        console.warn("Error parsing Galaxy BibTeX citation:", config.value.citation_bibtex, err);
+        return allCitations;
+    }
+});
+
 function copyBibtex() {
     const text = citationsToBibtexAsText();
     copy(text, "References copied to your clipboard as BibTeX");

client/src/components/Citation/services.ts

@@ -1,6 +1,5 @@
 import axios from "axios";
 
-import { useConfig } from "@/composables/config";
 import { getAppRoot } from "@/onload/loadConfig";
 import { rethrowSimple } from "@/utils/simple-error";
 
@@ -20,19 +19,7 @@ export async function getCitations(source: string, id: string): Promise<Citation
                 console.warn(`Error parsing bibtex: ${err}`);
             }
         }
-        // Inject Galaxy citation from config, using Cite for formatting
-        const { config } = useConfig();
-        let galaxyCitation = null;
-        const galaxy_bibtex = config.value?.citation_bibtex;
-        if (galaxy_bibtex) {
-            try {
-                const cite = new Cite(galaxy_bibtex);
-                galaxyCitation = { raw: galaxy_bibtex, cite };
-            } catch (err) {
-                console.warn("Error parsing Galaxy BibTeX:", err);
-            }
-        }
-        return galaxyCitation ? [galaxyCitation, ...citations] : citations;
+        return citations;
     } catch (e) {
         rethrowSimple(e);
     }