New Messaging for Tool Form Modal Errors

client/src/components/Common/ErrorPluginTracker.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { getGalaxyInstance } from "@/app";
+
+const errorReportingAvailable = computed(() => {
+    const Galaxy = getGalaxyInstance();
+    return Galaxy.Sentry.isInitialized ?? "Your error has been logged in Sentry to improve your experience.";
+});
+</script>
+<template>
+    <span v-localize>
+        {{ errorReportingAvailable }}
+    </span>
+</template>

client/src/components/Tool/ToolForm.vue

@@ -13,14 +13,22 @@
         <b-modal v-model="showError" size="sm" :title="errorTitle | l" scrollable ok-only>
             <b-alert v-if="errorMessage" show variant="danger">
                 {{ errorMessage }}
+                <ErrorPluginTracker />
             </b-alert>
             <b-alert v-if="submissionRequestFailed" 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>
+            <BLink
+                :aria-expanded="isExpanded ? 'true' : 'false'"
+                aria-controls="collapse-previous"
+                @click="isExpanded = !isExpanded">
+                ({{ expandedIcon }}) Error transcript:
+            </BLink>
+            <BCollapse id="collapse-previous" v-model="isExpanded">
+                <pre class="rounded code">{{ errorContentPretty }}</pre>
+            </BCollapse>
+            <br />
         </b-modal>
         <ToolRecommendation v-if="showRecommendation" :tool-id="formConfig.id" />
         <ToolCard
@@ -111,6 +119,7 @@
 
 <script>
 import { getGalaxyInstance } from "app";
+import { BCollapse, BLink } from "bootstrap-vue";
 import ButtonSpinner from "components/Common/ButtonSpinner";
 import Heading from "components/Common/Heading";
 import FormDisplay from "components/Form/FormDisplay";
@@ -132,6 +141,7 @@ import { getToolFormData, submitJob, updateToolFormData } from "./services";
 import ToolCard from "./ToolCard";
 import { allowCachedJobs } from "./utilities";
 
+import ErrorPluginTracker from "@/components/Common/ErrorPluginTracker.vue";
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 
 export default {
@@ -145,6 +155,9 @@ export default {
         ToolEntryPoints,
         ToolRecommendation,
         Heading,
+        ErrorPluginTracker,
+        BCollapse,
+        BLink,
     },
     props: {
         id: {
@@ -205,6 +218,7 @@ export default {
             ],
             immutableHistoryMessage:
                 "This history is immutable and you cannot run tools in it. Please switch to a different history.",
+            isExpanded: false,
         };
     },
     computed: {
@@ -252,6 +266,9 @@ export default {
         runButtonTitle() {
             return "Run Tool";
         },
+        expandedIcon() {
+            return this.isExpanded ? "-" : "+";
+        },
     },
     watch: {
         currentHistoryId() {