1 files changed, 62 insertions, 54 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 602b68ea572..c302960f16e 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,66 +1,74 @@
 <script>
-  import { n__ } from '~/locale';
-  import statusIcon from '../mr_widget_status_icon.vue';
-  import eventHub from '../../event_hub';
+import { n__ } from '~/locale';
+import { stripHtml } from '~/lib/utils/text_utility';
+import statusIcon from '../mr_widget_status_icon.vue';
+import eventHub from '../../event_hub';
 
-  export default {
-    name: 'MRWidgetFailedToMerge',
+export default {
+  name: 'MRWidgetFailedToMerge',
 
-    components: {
-      statusIcon,
-    },
+  components: {
+    statusIcon,
+  },
 
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
+  },
 
-    data() {
-      return {
-        timer: 10,
-        isRefreshing: false,
-      };
-    },
+  data() {
+    return {
+      timer: 10,
+      isRefreshing: false,
+      intervalId: null,
+    };
+  },
 
-    computed: {
-      timerText() {
-        return n__(
-          'Refreshing in a second to show the updated status...',
-          'Refreshing in %d seconds to show the updated status...',
-          this.timer,
-        );
-      },
+  computed: {
+    mergeError() {
+      return this.mr.mergeError ? stripHtml(this.mr.mergeError, ' ').trim() : '';
     },
-
-    mounted() {
-      setInterval(() => {
-        this.updateTimer();
-      }, 1000);
+    timerText() {
+      return n__(
+        'Refreshing in a second to show the updated status...',
+        'Refreshing in %d seconds to show the updated status...',
+        this.timer,
+      );
     },
+  },
 
-    created() {
-      eventHub.$emit('DisablePolling');
-    },
+  mounted() {
+    this.intervalId = setInterval(this.updateTimer, 1000);
+  },
+
+  created() {
+    eventHub.$emit('DisablePolling');
+  },
 
-    methods: {
-      refresh() {
-        this.isRefreshing = true;
-        eventHub.$emit('MRWidgetUpdateRequested');
-        eventHub.$emit('EnablePolling');
-      },
-      updateTimer() {
-        this.timer = this.timer - 1;
+  beforeDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  },
 
-        if (this.timer === 0) {
-          this.refresh();
-        }
-      },
+  methods: {
+    refresh() {
+      this.isRefreshing = true;
+      eventHub.$emit('MRWidgetUpdateRequested');
+      eventHub.$emit('EnablePolling');
     },
+    updateTimer() {
+      this.timer = this.timer - 1;
 
-  };
+      if (this.timer === 0) {
+        this.refresh();
+      }
+    },
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
@@ -72,16 +80,16 @@
     </template>
     <template v-else>
       <status-icon
-        status="warning"
         :show-disabled-button="true"
+        status="warning"
       />
       <div class="media-body space-children">
         <span class="bold">
           <span
-            class="has-error-message"
             v-if="mr.mergeError"
+            class="has-error-message"
           >
-            {{ mr.mergeError }}.
+            {{ mergeError }}.
           </span>
           <span v-else>
             {{ s__("mrWidget|Merge failed.") }}
@@ -93,9 +101,9 @@
           </span>
         </span>
         <button
-          @click="refresh"
-          class="btn btn-default btn-xs js-refresh-button"
+          class="btn btn-default btn-sm js-refresh-button"
           type="button"
+          @click="refresh"
         >
           {{ s__("mrWidget|Refresh now") }}
         </button>