Fix unnecessarily escaped merge error text

Previously merge errors that included quotes, slashes, or other escaped
characters were difficult to read. This commit uses the new v-safe-html
to display the merge error.

Relates to https://gitlab.com/gitlab-org/gitlab/-/issues/246816

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -4,6 +4,7 @@ import MRWidgetStore from 'ee_else_ce/vue_merge_request_widget/stores/mr_widget_
 import MRWidgetService from 'ee_else_ce/vue_merge_request_widget/services/mr_widget_service';
 import MrWidgetApprovals from 'ee_else_ce/vue_merge_request_widget/components/approvals/approvals.vue';
 import stateMaps from 'ee_else_ce/vue_merge_request_widget/stores/state_maps';
+import { GlSafeHtmlDirective } from '@gitlab/ui';
 import { sprintf, s__, __ } from '~/locale';
 import Project from '~/pages/projects/project';
 import SmartInterval from '~/smart_interval';
@@ -52,6 +53,9 @@ export default {
   // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25
   // eslint-disable-next-line @gitlab/require-i18n-strings
   name: 'MRWidget',
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   components: {
     Loading,
     'mr-widget-header': WidgetHeader,
@@ -499,7 +503,7 @@ export default {
           </mr-widget-alert-message>
 
           <mr-widget-alert-message v-if="mr.mergeError" type="danger">
-            {{ mergeError }}
+            <span v-safe-html="mergeError"></span>
           </mr-widget-alert-message>
 
           <source-branch-removal-status v-if="shouldRenderSourceBranchRemovalStatus" />

changelogs/unreleased/sh-improve-merge-error-display.yml

+---
+title: Fix unnecessarily escaped merge error text
+merge_request: 44844
+author:
+type: fixed

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -4,6 +4,7 @@ import GroupedMetricsReportsApp from 'ee/vue_shared/metrics_reports/grouped_metr
 import reportsMixin from 'ee/vue_shared/security_reports/mixins/reports_mixin';
 import { componentNames } from 'ee/reports/components/issue_body';
 import MrWidgetLicenses from 'ee/vue_shared/license_compliance/mr_widget_license_report.vue';
+import { GlSafeHtmlDirective } from '@gitlab/ui';
 import ReportSection from '~/reports/components/report_section.vue';
 import BlockingMergeRequestsReport from './components/blocking_merge_requests/blocking_merge_requests_report.vue';
 
@@ -22,6 +23,9 @@ export default {
     GroupedMetricsReportsApp,
     ReportSection,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   extends: CEWidgetOptions,
   mixins: [reportsMixin],
   componentNames,
@@ -384,7 +388,7 @@ export default {
           </mr-widget-alert-message>
 
           <mr-widget-alert-message v-if="mr.mergeError" type="danger">
-            {{ mergeError }}
+            <span v-safe-html="mergeError"></span>
           </mr-widget-alert-message>
 
           <source-branch-removal-status v-if="shouldRenderSourceBranchRemovalStatus" />