mergeError message has been binded using v-html directive

3 files changed, 30 insertions, 6 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
index 05fecd4de35..df866ed5706 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue
@@ -1,5 +1,6 @@
 <script>
 import { n__ } from '~/locale';
+import { stripHtml } from '~/lib/utils/text_utility';
 import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
 
@@ -27,6 +28,9 @@ export default {
   },
 
   computed: {
+    mergeError() {
+      return this.mr.mergeError ? stripHtml(this.mr.mergeError, ' ').trim() : '';
+    },
     timerText() {
       return n__(
         'Refreshing in a second to show the updated status...',
@@ -83,9 +87,9 @@ export default {
         <span class="bold">
           <span
             class="has-error-message"
-            v-if="mr.mergeError"
+            v-if="mergeError"
           >
-            {{ mr.mergeError }}.
+            {{ mergeError }}.
           </span>
           <span v-else>
             {{ s__("mrWidget|Merge failed.") }}
diff --git a/changelogs/unreleased/fix-br-decode.yml b/changelogs/unreleased/fix-br-decode.yml
new file mode 100644
index 00000000000..66ecc3deb35
--- /dev/null
+++ b/changelogs/unreleased/fix-br-decode.yml
@@ -0,0 +1,5 @@
+---
+title: mergeError message has been binded using v-html directive
+merge_request: 19058
+author: Murat Dogan
+type: fixed
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js
index a0a74648328..8de99fd3c96 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js
@@ -6,6 +6,7 @@ import mountComponent from 'spec/helpers/vue_mount_component_helper';
 describe('MRWidgetFailedToMerge', () => {
   const dummyIntervalId = 1337;
   let Component;
+  let mr;
   let vm;
 
   beforeEach(() => {
@@ -13,10 +14,11 @@ describe('MRWidgetFailedToMerge', () => {
     spyOn(eventHub, '$emit');
     spyOn(window, 'setInterval').and.returnValue(dummyIntervalId);
     spyOn(window, 'clearInterval').and.stub();
+    mr = {
+      mergeError: 'Merge error happened',
+    };
     vm = mountComponent(Component, {
-      mr: {
-        mergeError: 'Merge error happened.',
-      },
+      mr,
     });
   });
 
@@ -44,6 +46,19 @@ describe('MRWidgetFailedToMerge', () => {
         expect(vm.timerText).toEqual('Refreshing in a second to show the updated status...');
       });
     });
+
+    describe('mergeError', () => {
+      it('removes forced line breaks', done => {
+        mr.mergeError = 'contains<br />line breaks<br />';
+
+        Vue.nextTick()
+          .then(() => {
+            expect(vm.mergeError).toBe('contains line breaks');
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+    });
   });
 
   describe('created', () => {
@@ -103,7 +118,7 @@ describe('MRWidgetFailedToMerge', () => {
 
     it('renders given error', () => {
       expect(vm.$el.querySelector('.has-error-message').textContent.trim()).toEqual(
-        'Merge error happened..',
+        'Merge error happened.',
       );
     });