From 6152282d6afdfaa86c7123540a95bc3b66858bdb Mon Sep 17 00:00:00 2001
From: hujambo-dunia <michelle.savage.1@gmail.com>
Date: Fri, 5 Apr 2024 11:04:05 -0400
Subject: [PATCH] Added Transcript content in order so errors generated from
 Tool Form page's modal will be retained and passed through to the Error
 Report Email

---
 .../components/Common/SelfReportingError.vue  | 57 +++++++++++--------
 client/src/components/Tool/ToolForm.vue       | 41 +++++++++----
 2 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/client/src/components/Common/SelfReportingError.vue b/client/src/components/Common/SelfReportingError.vue
index 55212935b883..a283a5ec981c 100644
--- a/client/src/components/Common/SelfReportingError.vue
+++ b/client/src/components/Common/SelfReportingError.vue
@@ -21,19 +21,6 @@
                 </div>
             </div>
         </div>
-        <JobProblemProvider v-slot="{ result: jobProblems }" :job-id="dataset.creating_job" @error="onError">
-            <div v-if="jobProblems && (jobProblems.has_duplicate_inputs || jobProblems.has_empty_inputs)">
-                <h4 class="common_problems mt-3 h-md">Detected Common Potential Problems</h4>
-                <p v-if="jobProblems.has_empty_inputs" id="dataset-error-has-empty-inputs">
-                    The tool was started with one or more empty input datasets. This frequently results in tool errors
-                    due to problematic input choices.
-                </p>
-                <p v-if="jobProblems.has_duplicate_inputs" id="dataset-error-has-duplicate-inputs">
-                    The tool was started with one or more duplicate input datasets. This frequently results in tool
-                    errors due to problematic input choices.
-                </p>
-            </div>
-        </JobProblemProvider>
         <h4 class="mt-3 h-md">Troubleshooting</h4>
         <p>
             There are a number of helpful resources to self diagnose and correct problems.
@@ -60,23 +47,31 @@
                 v-model="message"
                 :area="true"
                 title="Please provide detailed information on the activities leading to this issue:" />
-            <b-button
-                id="dataset-error-submit"
-                variant="primary"
-                class="mt-3"
-                :disabled="disableSubmit"
-                @click="submit(dataset, currentUser?.email)">
+            <BLink
+                :aria-expanded="isExpanded ? 'true' : 'false'"
+                aria-controls="collapse-previous"
+                @click="isExpanded = !isExpanded">
+                ({{ title }}) Error transcript:
+            </BLink>
+            <BCollapse id="collapse-previous" v-model="isExpanded">
+                <pre class="rounded code">{{ transcript }}</pre>
+            </BCollapse><br>
+                <BButton
+                    id="dataset-error-submit"
+                    variant="primary"
+                    class="mt-3"
+                    :disabled="disableSubmit"
+                    @click="submit(dataset, currentUser?.email)">
                 <FontAwesomeIcon icon="bug" class="mr-1" />Report
-            </b-button>
+            </BButton>
         </div>
     </div>
 </template>
 
 <script>
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert } from "bootstrap-vue";
+import { BAlert, BButton, BCollapse, BLink } from "bootstrap-vue";
 import FormElement from "components/Form/FormElement";
-import { JobProblemProvider } from "components/providers/JobProvider";
 import { mapState } from "pinia";
 
 import { getGalaxyInstance } from "@/app";
@@ -89,8 +84,10 @@ export default {
     components: {
         FontAwesomeIcon,
         FormElement,
-        JobProblemProvider,
         BAlert,
+        BButton,
+        BCollapse,
+        BLink,
     },
     props: {
         dataset: {
@@ -105,6 +102,10 @@ export default {
             type: Array,
             default: () => [],
         },
+        transcript: {
+            type: String,
+            default: "",
+        },
     },
     setup() {
         const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
@@ -115,6 +116,7 @@ export default {
             message: null,
             errorMessage: null,
             resultMessages: [],
+            isExpanded: false,
         };
     },
     computed: {
@@ -128,13 +130,18 @@ export default {
             const isEmailActive = !getGalaxyInstance().config.show_inactivity_warning;
             return !this.currentUser?.email || !isEmailActive;
         },
+        title() {
+            return this.isExpanded ? `-` : `+`;  
+        },
     },
     methods: {
         onError(err) {
             this.errorMessage = err;
         },
-        submit(dataset, email) {
-            sendErrorReport(dataset, this.message, email).then(
+        submit(dataset, userEmailJob) {
+            const email = userEmailJob || this.currentUserEmail;
+            const message = this.message;
+            sendErrorReport(dataset, message, email, this.transcript).then(
                 (resultMessages) => {
                     this.resultMessages = resultMessages;
                 },
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 9c524b2c0511..539cf0d707b0 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -8,16 +8,15 @@
             <ToolEntryPoints v-for="job in entryPoints" :key="job.id" :job-id="job.id" />
         </div>
         <b-modal v-model="showError" size="sm" :title="errorTitle | l" scrollable ok-only>
-            <b-alert v-if="errorMessage" show variant="danger">
-                {{ errorMessage }}
-            </b-alert>
-            <b-alert show variant="warning">
-                The server could not complete this request. Please verify your parameter settings, retry submission and
-                contact the Galaxy Team if this error persists. A transcript of the submitted data is shown below.
-            </b-alert>
-            <small class="text-muted">
-                <pre>{{ errorContentPretty }}</pre>
-            </small>
+            {{ /* TODO integrate submit-prop into larger form */ }}
+            <SelfReportingError
+                :result-messages="[]"
+                :show-form="'true'"
+                :message="''"
+                :submit="submit"
+                :transcript="errorContentPretty"
+                :command-outputs="buildCommandOutputs(errorMessage)"
+                :notifications="buildNotifications(formConfig.id)" />
         </b-modal>
         <ToolRecommendation v-if="showRecommendation" :tool-id="formConfig.id" />
         <ToolCard
@@ -126,6 +125,7 @@ import { getToolFormData, submitJob, updateToolFormData } from "./services";
 import ToolCard from "./ToolCard";
 import { allowCachedJobs } from "./utilities";
 
+import SelfReportingError from "../Common/SelfReportingError.vue";
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 
 export default {
@@ -139,6 +139,7 @@ export default {
         ToolEntryPoints,
         ToolRecommendation,
         Heading,
+        SelfReportingError,
     },
     props: {
         id: {
@@ -399,6 +400,26 @@ export default {
                 }
             );
         },
+        buildNotifications(toolId) {
+            return [
+                {
+                    text: `An error occurred while running the tool <b id='dataset-error-tool-id' class='text-break  '>${toolId}</b>.`,
+                    variant: "danger",
+                },
+                {
+                    text: `The server could not complete this request. Please verify your parameter settings, retry submission and contact the Galaxy team if this error persists. A transcript of the submitted data is shown below.`,
+                    variant: "warning",
+                },
+            ];
+        },
+        buildCommandOutputs(detail) {
+            return [
+                {
+                    text: "Tool Message (?)",
+                    detail: [detail],
+                },
+            ];
+        },
     },
 };
 </script>