From d5c8c368b90c15709bf53dac961ab62f5c360b18 Mon Sep 17 00:00:00 2001
From: hujambo-dunia <michelle.savage.1@gmail.com>
Date: Mon, 13 Jan 2025 09:49:37 -0500
Subject: [PATCH] Refactored Dataset Error Page email web form

Make component reusable, changes made:
* Componentized email web form into Vue.js
* Decoupled the View (html email) from the Controller (API methods)
* Abstracted the View elements for reuse with other objects (eg.Tools)
* Utilized existing dependency (Python Jinja2) for repo consistency

Reported by @hexylena in issue
https://github.com/galaxyproject/galaxy/issues/17560 .
---
 .../Collections/common/UserReportingError.vue |  88 ++++++++++++
 .../Collections/common/reporting.ts           |  34 +++++
 .../DatasetInformation/DatasetError.vue       |  72 +---------
 .../templates/mail/error-report-dataset.html  |  87 ++++++++++++
 .../templates/mail/error-report-dataset.txt   |  44 ++++++
 lib/galaxy/tools/errors.py                    | 128 +-----------------
 6 files changed, 263 insertions(+), 190 deletions(-)
 create mode 100644 client/src/components/Collections/common/UserReportingError.vue
 create mode 100644 client/src/components/Collections/common/reporting.ts
 create mode 100644 lib/galaxy/config/templates/mail/error-report-dataset.html
 create mode 100644 lib/galaxy/config/templates/mail/error-report-dataset.txt

diff --git a/client/src/components/Collections/common/UserReportingError.vue b/client/src/components/Collections/common/UserReportingError.vue
new file mode 100644
index 000000000000..811d24e2c0aa
--- /dev/null
+++ b/client/src/components/Collections/common/UserReportingError.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faBug } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton } from "bootstrap-vue";
+import { computed, ref } from "vue";
+
+import { submitReport } from "@/components/Collections/common/reporting";
+import { useMarkdown } from "@/composables/markdown";
+import localize from "@/utils/localization";
+
+import FormElement from "@/components/Form/FormElement.vue";
+
+library.add(faBug);
+
+interface Props {
+    reportableData: object;
+    reportingEmail: string;
+}
+
+const props = defineProps<Props>();
+const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
+const message = ref("");
+const errorMessage = ref("");
+const resultMessages = ref<string[][]>([]);
+const showForm = computed(() => {
+    const noResult = !resultMessages.value.length;
+    const hasError = resultMessages.value.some((msg) => msg[1] === "danger");
+    return noResult || hasError;
+});
+const FIELD_MESSAGE = {
+    loginRequired: localize("You must be logged in to send emails."),
+    dataRequired: localize("You must provide a valid object to send emails."),
+};
+const fieldMessages = computed(() =>
+    [!props.reportableData && FIELD_MESSAGE.dataRequired, !props.reportingEmail && FIELD_MESSAGE.loginRequired].filter(
+        Boolean
+    )
+);
+
+async function handleSubmit(data?: any, email?: string | null) {
+    if (!data || !email) {
+        return;
+    }
+
+    const { messages, error } = await submitReport(data, message.value, email);
+
+    if (error) {
+        errorMessage.value = error;
+    } else {
+        resultMessages.value = messages;
+    }
+}
+</script>
+
+<template>
+    <div>
+        <BAlert v-for="(resultMessage, index) in resultMessages" :key="index" :variant="resultMessage[1]" show>
+            <span v-html="renderMarkdown(resultMessage[0])" />
+        </BAlert>
+
+        <div v-if="showForm" id="data-error-form">
+            <div>
+                <span class="mr-2 font-weight-bold">{{ localize("Your email address") }}</span>
+                <span v-if="props.reportingEmail">{{ props.reportingEmail }}</span>
+                <span v-else>{{ FIELD_MESSAGE.loginRequired }}</span>
+            </div>
+            <div>
+                <span class="mr-2 font-weight-bold">{{
+                    localize("Please provide detailed information on the activities leading to this issue:")
+                }}</span>
+                <span v-if="!props.reportableData">{{ FIELD_MESSAGE.dataRequired }}</span>
+            </div>
+            <FormElement v-if="props.reportableData" id="object-error-message" v-model="message" :area="true" />
+        </div>
+
+        <BButton
+            id="data-error-submit"
+            v-b-tooltip.hover
+            :title="fieldMessages.join('\n')"
+            variant="primary"
+            class="mt-3"
+            @click="handleSubmit(props.reportableData, props.reportingEmail)">
+            <FontAwesomeIcon :icon="faBug" class="mr-1" />
+            Report
+        </BButton>
+    </div>
+</template>
diff --git a/client/src/components/Collections/common/reporting.ts b/client/src/components/Collections/common/reporting.ts
new file mode 100644
index 000000000000..9ea253248827
--- /dev/null
+++ b/client/src/components/Collections/common/reporting.ts
@@ -0,0 +1,34 @@
+import { GalaxyApi } from "@/api";
+import { type HDADetailed } from "@/api";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+export interface ReportableObject {
+    id: string;
+    creating_job: string;
+}
+
+export async function submitReport(
+    reportableData: HDADetailed,
+    message: string,
+    email: string
+): Promise<{ messages: string[][]; error?: string }> {
+    try {
+        const { data, error } = await GalaxyApi().POST("/api/jobs/{job_id}/error", {
+            params: {
+                path: { job_id: reportableData.creating_job },
+            },
+            body: {
+                dataset_id: reportableData.id,
+                message,
+                email,
+            },
+        });
+
+        if (error) {
+            return { messages: [], error: errorMessageAsString(error) };
+        }
+        return { messages: data.messages };
+    } catch (err) {
+        return { messages: [], error: errorMessageAsString(err) };
+    }
+}
diff --git a/client/src/components/DatasetInformation/DatasetError.vue b/client/src/components/DatasetInformation/DatasetError.vue
index cbe9f3e40189..9c09951773ff 100644
--- a/client/src/components/DatasetInformation/DatasetError.vue
+++ b/client/src/components/DatasetInformation/DatasetError.vue
@@ -1,21 +1,18 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faBug } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BCard } from "bootstrap-vue";
+import { BAlert, BCard } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, onMounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 
 import { GalaxyApi, type HDADetailed } from "@/api";
 import { fetchDatasetDetails } from "@/api/datasets";
 import { type JobDetails, type JobInputSummary } from "@/api/jobs";
-import { useMarkdown } from "@/composables/markdown";
 import { useUserStore } from "@/stores/userStore";
-import localize from "@/utils/localization";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import UserReportingError from "../Collections/common/UserReportingError.vue";
 import DatasetErrorDetails from "@/components/DatasetInformation/DatasetErrorDetails.vue";
-import FormElement from "@/components/Form/FormElement.vue";
 import GalaxyWizard from "@/components/GalaxyWizard.vue";
 
 library.add(faBug);
@@ -25,28 +22,15 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-
 const userStore = useUserStore();
 const { currentUser } = storeToRefs(userStore);
-
-const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
-
-const message = ref("");
 const jobLoading = ref(true);
 const errorMessage = ref("");
 const datasetLoading = ref(false);
 const jobDetails = ref<JobDetails>();
 const jobProblems = ref<JobInputSummary>();
-const resultMessages = ref<string[][]>([]);
 const dataset = ref<HDADetailed>();
 
-const showForm = computed(() => {
-    const noResult = !resultMessages.value.length;
-    const hasError = resultMessages.value.some((msg) => msg[1] === "danger");
-
-    return noResult || hasError;
-});
-
 async function getDatasetDetails() {
     datasetLoading.value = true;
     try {
@@ -93,31 +77,6 @@ async function getJobProblems(jobId: string) {
     jobProblems.value = data;
 }
 
-async function submit(dataset?: HDADetailed, userEmailJob?: string | null) {
-    if (!dataset) {
-        errorMessage.value = "No dataset found.";
-        return;
-    }
-
-    const { data, error } = await GalaxyApi().POST("/api/jobs/{job_id}/error", {
-        params: {
-            path: { job_id: dataset.creating_job },
-        },
-        body: {
-            dataset_id: dataset.id,
-            message: message.value,
-            email: userEmailJob,
-        },
-    });
-
-    if (error) {
-        errorMessage.value = errorMessageAsString(error);
-        return;
-    }
-
-    resultMessages.value = data.messages;
-}
-
 function onMissingJobId() {
     errorMessage.value = "No job ID found for this dataset.";
 }
@@ -205,30 +164,7 @@ onMounted(async () => {
             </p>
 
             <h4 class="mb-3 h-md">Issue Report</h4>
-            <BAlert v-for="(resultMessage, index) in resultMessages" :key="index" :variant="resultMessage[1]" show>
-                <span v-html="renderMarkdown(resultMessage[0])" />
-            </BAlert>
-
-            <div v-if="showForm" id="dataset-error-form">
-                <span class="mr-2 font-weight-bold">{{ localize("Your email address") }}</span>
-                <span v-if="currentUser?.email">{{ currentUser.email }}</span>
-                <span v-else>{{ localize("You must be logged in to receive emails") }}</span>
-
-                <FormElement
-                    id="dataset-error-message"
-                    v-model="message"
-                    :area="true"
-                    title="Please provide detailed information on the activities leading to this issue:" />
-
-                <BButton
-                    id="dataset-error-submit"
-                    variant="primary"
-                    class="mt-3"
-                    @click="submit(dataset, jobDetails?.user_email)">
-                    <FontAwesomeIcon :icon="faBug" class="mr-1" />
-                    Report
-                </BButton>
-            </div>
+            <UserReportingError :reportable-data="dataset" :reporting-email="currentUser?.email" />
         </div>
     </div>
 </template>
diff --git a/lib/galaxy/config/templates/mail/error-report-dataset.html b/lib/galaxy/config/templates/mail/error-report-dataset.html
new file mode 100644
index 000000000000..60f08f88b258
--- /dev/null
+++ b/lib/galaxy/config/templates/mail/error-report-dataset.html
@@ -0,0 +1,87 @@
+<html>
+  <body>
+    <h1>Galaxy Tool Error Report</h1>
+    <span class="sub">
+    <i>from </i>
+    <span style="font-family: monospace;">
+    <a href="{{ host  }}">{{ host  }}</a>
+    </span>
+    </span>
+    <h3>Error Localization</h3>
+    <table style="margin:1em">
+      <tbody>
+        <tr>
+          <td>Dataset</td>
+          <td>
+            <a href="{{ hda_show_params_link }}">{{ dataset_id }} ({{ dataset_id_encoded }})</a>
+          </td>
+        </tr>
+        <tr style="background-color: #f2f2f2">
+          <td>History</td>
+          <td>
+            <a href="{{ history_view_link }}">{{ history_id }} ({{ history_id_encoded }})</a>
+          </td>
+        </tr>
+        <tr>
+          <td>Failed Job</td>
+          <td>{{ hid }}: {{ history_item_name }} ({{ hda_id_encoded }})</td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>User Provided Information</h3>
+    The user 
+    <span style="font-family: monospace;">{{ email_str }}</span> provided the following information:
+    <pre style="white-space: pre-wrap;background: #eeeeee;border:1px solid black;padding:1em;">
+        {{ message }}
+    </pre>
+    <h3>Detailed Job Information</h3>
+    Job environment and execution information is available at the job 
+    <a href="{{ hda_show_params_link }}">info page</a>.
+    <table style="margin:1em">
+      <tbody>
+        <tr>
+          <td>Job ID</td>
+          <td>{{ job_id }} ({{ job_id_encoded }})</td>
+        </tr>
+        <tr style="background-color: #f2f2f2">
+          <td>Tool ID</td>
+          <td>{{ job_tool_id }}</td>
+        </tr>
+        <tr>
+          <td>Tool Version</td>
+          <td>{{ tool_version }}</td>
+        </tr>
+        <tr style="background-color: #f2f2f2">
+          <td>Job PID or DRM id</td>
+          <td>{{ job_runner_external_id }}</td>
+        </tr>
+        <tr>
+          <td>Job Tool Version</td>
+          <td>{{ job_tool_version }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <h3>Job Execution and Failure Information</h3>
+    <h4>Command Line</h4>
+    <pre style="white-space: pre-wrap;background: #eeeeee;border:1px solid black;padding:1em;">
+        {{ job_command_line }}
+    </pre>
+    <h4>stderr</h4>
+    <pre style="white-space: pre-wrap;background: #eeeeee;border:1px solid black;padding:1em;">
+        {{ job_stderr }}
+    </pre>
+    <h4>stdout</h4>
+    <pre style="white-space: pre-wrap;background: #eeeeee;border:1px solid black;padding:1em;">
+        {{ job_stdout }}
+    </pre>
+    <h4>Job Information</h4>
+    <pre style="white-space: pre-wrap;background: #eeeeee;border:1px solid black;padding:1em;">
+        {{ job_info }}
+    </pre>
+    <h4>Job Traceback</h4>
+    <pre style="white-space: pre-wrap;background: #eeeeee;border:1px solid black;padding:1em;">
+        {{ job_traceback }}
+    </pre>
+    This is an automated message. Do not reply to this address.
+  </body>
+</html>
diff --git a/lib/galaxy/config/templates/mail/error-report-dataset.txt b/lib/galaxy/config/templates/mail/error-report-dataset.txt
new file mode 100644
index 000000000000..80106234b54c
--- /dev/null
+++ b/lib/galaxy/config/templates/mail/error-report-dataset.txt
@@ -0,0 +1,44 @@
+GALAXY TOOL ERROR REPORT
+------------------------
+
+This error report was sent from the Galaxy instance hosted on the server
+"{{ host }}"
+-----------------------------------------------------------------------------
+This is in reference to dataset id {{ dataset_id }} ({{ dataset_id_encoded }}) from history id {{ history_id }} ({{ history_id_encoded }})
+-----------------------------------------------------------------------------
+You should be able to view the history containing the related history item ({{ hda_id_encoded }})
+
+{{ hid }}: {{ history_item_name }}
+
+by logging in as a Galaxy admin user to the Galaxy instance referenced above
+and pointing your browser to the following link.
+
+{{ history_view_link }}
+-----------------------------------------------------------------------------
+The user {{ email_str }} provided the following information:
+
+{{ message }}
+-----------------------------------------------------------------------------
+info url: {{ hda_show_params_link }}
+job id: {{ job_id }} ({{ job_id_encoded }})
+tool id: {{ job_tool_id }}
+tool version: {{ tool_version }}
+job pid or drm id: {{ job_runner_external_id }}
+job tool version: {{ job_tool_version }}
+-----------------------------------------------------------------------------
+job command line:
+{{ job_command_line }}
+-----------------------------------------------------------------------------
+job stderr:
+{{ job_stderr }}
+-----------------------------------------------------------------------------
+job stdout:
+{{ job_stdout }}
+-----------------------------------------------------------------------------
+job info:
+{{ job_info }}
+-----------------------------------------------------------------------------
+job traceback:
+{{ job_traceback }}
+-----------------------------------------------------------------------------
+(This is an automated message).
diff --git a/lib/galaxy/tools/errors.py b/lib/galaxy/tools/errors.py
index e6d3a79429f1..87dda9f7dfc2 100644
--- a/lib/galaxy/tools/errors.py
+++ b/lib/galaxy/tools/errors.py
@@ -2,8 +2,6 @@
 Functionality for dealing with tool errors.
 """
 
-import string
-
 import markupsafe
 
 from galaxy import (
@@ -12,123 +10,10 @@
 )
 from galaxy.security.validate_user_input import validate_email_str
 from galaxy.util import unicodify
+from galaxy.config import templates
 
-error_report_template = """
-GALAXY TOOL ERROR REPORT
-------------------------
-
-This error report was sent from the Galaxy instance hosted on the server
-"${host}"
------------------------------------------------------------------------------
-This is in reference to dataset id ${dataset_id} (${dataset_id_encoded}) from history id ${history_id} (${history_id_encoded})
------------------------------------------------------------------------------
-You should be able to view the history containing the related history item (${hda_id_encoded})
-
-${hid}: ${history_item_name}
-
-by logging in as a Galaxy admin user to the Galaxy instance referenced above
-and pointing your browser to the following link.
-
-${history_view_link}
------------------------------------------------------------------------------
-The user ${email_str} provided the following information:
-
-${message}
------------------------------------------------------------------------------
-info url: ${hda_show_params_link}
-job id: ${job_id} (${job_id_encoded})
-tool id: ${job_tool_id}
-tool version: ${tool_version}
-job pid or drm id: ${job_runner_external_id}
-job tool version: ${job_tool_version}
------------------------------------------------------------------------------
-job command line:
-${job_command_line}
------------------------------------------------------------------------------
-job stderr:
-${job_stderr}
------------------------------------------------------------------------------
-job stdout:
-${job_stdout}
------------------------------------------------------------------------------
-job info:
-${job_info}
------------------------------------------------------------------------------
-job traceback:
-${job_traceback}
------------------------------------------------------------------------------
-(This is an automated message).
-"""
-
-error_report_template_html = """
-<html>
-    <body>
-<h1>Galaxy Tool Error Report</h1>
-<span class="sub"><i>from</i> <span style="font-family: monospace;"><a href="${host}">${host}</a></span>
-
-<h3>Error Localization</h3>
-<table style="margin:1em">
-    <tbody>
-        <tr><td>Dataset</td><td><a href="${hda_show_params_link}">${dataset_id} (${dataset_id_encoded})</a></td></tr>
-        <tr style="background-color: #f2f2f2"><td>History</td><td><a href="${history_view_link}">${history_id} (${history_id_encoded})</a></td></tr>
-        <tr><td>Failed Job</td><td>${hid}: ${history_item_name} (${hda_id_encoded})</td></tr>
-    </tbody>
-</table>
-
-<h3>User Provided Information</h3>
-
-The user <span style="font-family: monospace;">${email_str}</span> provided the following information:
-
-<pre style="white-space: pre-wrap;background: #eeeeee;border:1px solid black;padding:1em;">
-${message}
-</pre>
-
-
-<h3>Detailed Job Information</h3>
-
-Job environment and execution information is available at the job <a href="${hda_show_params_link}">info page</a>.
-
-<table style="margin:1em">
-    <tbody>
-        <tr><td>Job ID</td><td>${job_id} (${job_id_encoded})</td></tr>
-        <tr style="background-color: #f2f2f2"><td>Tool ID</td><td>${job_tool_id}</td></tr>
-        <tr><td>Tool Version</td><td>${tool_version}</td></tr>
-        <tr style="background-color: #f2f2f2"><td>Job PID or DRM id</td><td>${job_runner_external_id}</td></tr>
-        <tr><td>Job Tool Version</td><td>${job_tool_version}</td></tr>
-    </tbody>
-</table>
-
-<h3>Job Execution and Failure Information</h3>
-
-<h4>Command Line</h4>
-<pre style="white-space: pre-wrap;background: #eeeeee;border:1px solid black;padding:1em;">
-${job_command_line}
-</pre>
-
-<h4>stderr</h4>
-<pre style="white-space: pre-wrap;background: #eeeeee;border:1px solid black;padding:1em;">
-${job_stderr}
-</pre>
-
-<h4>stdout</h4>
-<pre style="white-space: pre-wrap;background: #eeeeee;border:1px solid black;padding:1em;">
-${job_stdout}
-</pre>
-
-<h4>Job Information</h4>
-<pre style="white-space: pre-wrap;background: #eeeeee;border:1px solid black;padding:1em;">
-${job_info}
-</pre>
-
-<h4>Job Traceback</h4>
-<pre style="white-space: pre-wrap;background: #eeeeee;border:1px solid black;padding:1em;">
-${job_traceback}
-</pre>
-
-This is an automated message. Do not reply to this address.
-</body></html>
-"""
-
+error_report_template = "mail/error-report-dataset.txt"
+error_report_template_html = "mail/error-report-dataset.html"
 
 class ErrorReporter:
     def __init__(self, hda, app):
@@ -217,15 +102,14 @@ def create_report(self, user, email="", message="", redact_user_details_in_bugre
             email_str=email_str,
             message=util.unicodify(message),
         )
-
-        self.report = string.Template(error_report_template).safe_substitute(report_variables)
-
+        self.report = templates.render(error_report_template, report_variables, self.app.config.templates_dir)
+        
         # Escape all of the content  for use in the HTML report
         for parameter in report_variables.keys():
             if report_variables[parameter] is not None:
                 report_variables[parameter] = markupsafe.escape(unicodify(report_variables[parameter]))
 
-        self.html_report = string.Template(error_report_template_html).safe_substitute(report_variables)
+        self.html_report = templates.render(error_report_template_html, report_variables, self.app.config.templates_dir)
 
     def _send_report(self, user, email=None, message=None, **kwd):
         return self.report