Display parsing errors in test reports MR widget

Displays the `head` and `base` report parsing errors from
the `suite_errors` object (added by !54980) in the affected
suite section in the test reports MR widget

app/assets/javascripts/reports/components/grouped_test_reports_app.vue

 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlIcon } from '@gitlab/ui';
 import { once } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { sprintf, s__ } from '~/locale';
@@ -26,6 +26,7 @@ export default {
     IssuesList,
     Modal,
     GlButton,
+    GlIcon,
   },
   mixins: [Tracking.mixin()],
   props: {
@@ -159,6 +160,18 @@ export default {
             <template #summary>
               <div class="gl-display-inline-flex gl-flex-direction-column">
                 <div>{{ reportText(report) }}</div>
+                <div v-if="report.suite_errors">
+                  <div v-if="report.suite_errors.head">
+                    <gl-icon name="warning" class="gl-mx-2 gl-text-orange-500" />
+                    {{ s__('Reports|Head report parsing error:') }}
+                    {{ report.suite_errors.head }}
+                  </div>
+                  <div v-if="report.suite_errors.base">
+                    <gl-icon name="warning" class="gl-mx-2 gl-text-orange-500" />
+                    {{ s__('Reports|Base report parsing error:') }}
+                    {{ report.suite_errors.base }}
+                  </div>
+                </div>
                 <div v-if="hasRecentFailures(report.summary)">
                   {{ recentFailuresText(report.summary) }}
                 </div>

changelogs/unreleased/mf-test-report-parsing-errors-frontend.yml

+---
+title: Display parsing errors in test reports MR widget
+merge_request: 55037
+author:
+type: added

locale/gitlab.pot

@@ -25268,6 +25268,9 @@ msgstr ""
 msgid "Reports|An error occurred while loading report"
 msgstr ""
 
+msgid "Reports|Base report parsing error:"
+msgstr ""
+
 msgid "Reports|Class"
 msgstr ""
 
@@ -25290,6 +25293,9 @@ msgstr[1] ""
 msgid "Reports|Failure"
 msgstr ""
 
+msgid "Reports|Head report parsing error:"
+msgstr ""
+
 msgid "Reports|Identifier"
 msgstr ""
 

spec/frontend/reports/components/grouped_test_reports_app_spec.js

@@ -295,6 +295,27 @@ describe('Grouped test reports app', () => {
     });
   });
 
+  describe('with a report parsing errors', () => {
+    beforeEach(() => {
+      const reports = failedReport;
+      reports.suites[0].suite_errors = {
+        head: 'JUnit XML parsing failed: 2:24: FATAL: attributes construct error',
+        base: 'JUnit data parsing failed: string not matched',
+      };
+      setReports(reports);
+      mountComponent();
+    });
+
+    it('renders the error messages', () => {
+      expect(findSummaryDescription().text()).toContain(
+        'JUnit XML parsing failed: 2:24: FATAL: attributes construct error',
+      );
+      expect(findSummaryDescription().text()).toContain(
+        'JUnit data parsing failed: string not matched',
+      );
+    });
+  });
+
   describe('with error', () => {
     beforeEach(() => {
       mockStore.state.isLoading = false;