Improve merge failed error

Improved merge failed error handling

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue

 <script>
 import { GlButton } from '@gitlab/ui';
-import { n__ } from '~/locale';
+import { sprintf, s__, n__ } from '~/locale';
 import { stripHtml } from '~/lib/utils/text_utility';
 import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
@@ -31,7 +31,15 @@ export default {
 
   computed: {
     mergeError() {
-      return this.mr.mergeError ? stripHtml(this.mr.mergeError, ' ').trim() : '';
+      const mergeError = this.mr.mergeError ? stripHtml(this.mr.mergeError, ' ').trim() : '';
+
+      return sprintf(
+        s__('mrWidget|%{mergeError}.'),
+        {
+          mergeError,
+        },
+        false,
+      );
     },
     timerText() {
       return n__(

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -191,7 +191,7 @@ export default {
       }
 
       return sprintf(
-        s__('mrWidget|Merge failed: %{mergeError}. Please try again.'),
+        s__('mrWidget|%{mergeError}. Try again.'),
         {
           mergeError,
         },

changelogs/unreleased/30141-improve-merge-failed-error-fe.yml

+---
+title: Improve merge failed error
+merge_request: 52555
+author:
+type: changed

locale/gitlab.pot

@@ -33990,6 +33990,12 @@ msgstr ""
 msgid "mrWidget|%{link_start}Learn more about resolving conflicts%{link_end}"
 msgstr ""
 
+msgid "mrWidget|%{mergeError}."
+msgstr ""
+
+msgid "mrWidget|%{mergeError}. Try again."
+msgstr ""
+
 msgid "mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB"
 msgstr ""
 
@@ -34116,9 +34122,6 @@ msgstr ""
 msgid "mrWidget|Merge failed."
 msgstr ""
 
-msgid "mrWidget|Merge failed: %{mergeError}. Please try again."
-msgstr ""
-
 msgid "mrWidget|Merge locally"
 msgstr ""
 

spec/features/merge_request/user_merges_when_pipeline_succeeds_spec.rb

@@ -145,7 +145,7 @@ RSpec.describe 'Merge request > User merges when pipeline succeeds', :js do
       before do
         merge_request.update!(
           merge_user: merge_request.author,
-          merge_error: 'Something went wrong.'
+          merge_error: 'Something went wrong'
         )
         refresh
       end
@@ -155,7 +155,7 @@ RSpec.describe 'Merge request > User merges when pipeline succeeds', :js do
         wait_for_requests
 
         page.within('.mr-section-container') do
-          expect(page).to have_content('Merge failed: Something went wrong. Please try again.')
+          expect(page).to have_content('Something went wrong. Try again.')
         end
       end
     end
@@ -174,7 +174,7 @@ RSpec.describe 'Merge request > User merges when pipeline succeeds', :js do
         wait_for_requests
 
         page.within('.mr-section-container') do
-          expect(page).to have_content('Merge failed: Something went wrong. Please try again.')
+          expect(page).to have_content('Something went wrong. Try again.')
         end
       end
     end

spec/features/merge_request/user_sees_merge_widget_spec.rb

@@ -319,7 +319,7 @@ RSpec.describe 'Merge request > User sees merge widget', :js do
       wait_for_requests
 
       page.within('.mr-section-container') do
-        expect(page).to have_content('Merge failed: Something went wrong')
+        expect(page).to have_content('Something went wrong.')
       end
     end
   end
@@ -340,7 +340,7 @@ RSpec.describe 'Merge request > User sees merge widget', :js do
       wait_for_requests
 
       page.within('.mr-section-container') do
-        expect(page).to have_content('Merge failed: Something went wrong')
+        expect(page).to have_content('Something went wrong.')
       end
     end
   end

spec/frontend/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js

@@ -54,7 +54,7 @@ describe('MRWidgetFailedToMerge', () => {
 
         Vue.nextTick()
           .then(() => {
-            expect(vm.mergeError).toBe('contains line breaks');
+            expect(vm.mergeError).toBe('contains line breaks.');
           })
           .then(done)
           .catch(done.fail);
@@ -120,7 +120,7 @@ describe('MRWidgetFailedToMerge', () => {
 
     it('renders given error', () => {
       expect(vm.$el.querySelector('.has-error-message').textContent.trim()).toEqual(
-        'Merge error happened',
+        'Merge error happened.',
       );
     });