Update rendering of merge request in merge request widget

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/40246

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue

@@ -37,7 +37,7 @@ export default {
 </script>
 
 <template>
-  <div class="m-3 ml-5" :class="messageClass">
+  <div class="m-3 ml-7" :class="messageClass">
     <slot></slot>
     <gl-link v-if="helpPath" :href="helpPath" target="_blank">
       <icon :size="16" name="question-o" class="align-middle" />

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

@@ -35,9 +35,7 @@ export default {
     <status-icon status="warning" />
     <div class="media-body space-children">
       <span class="bold">
-        <template v-if="mr.mergeError"
-          >{{ mr.mergeError }}.</template
-        >
+        <template v-if="mr.mergeError">{{ mr.mergeError }}</template>
         {{ s__('mrWidget|This merge request failed to be merged automatically') }}
       </span>
       <button

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

@@ -330,6 +330,7 @@ export default {
         :commits-count="mr.commitsCount"
         :target-branch="mr.targetBranch"
         :is-fast-forward-enabled="mr.ffOnlyEnabled"
+        :class="{ 'border-bottom': mr.mergeError }"
       >
         <ul class="border-top content-list commits-list flex-list">
           <commit-edit

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

 <script>
 import _ from 'underscore';
-import { __ } from '~/locale';
+import { sprintf, s__, __ } from '~/locale';
 import Project from '~/pages/projects/project';
 import SmartInterval from '~/smart_interval';
 import MRWidgetStore from 'ee_else_ce/vue_merge_request_widget/stores/mr_widget_store';
@@ -125,6 +125,11 @@ export default {
           this.mr.pipeline.target_sha !== this.mr.targetBranchSha,
       );
     },
+    mergeError() {
+      return sprintf(s__('mrWidget|Merge failed: %{mergeError}. Please try again.'), {
+        mergeError: this.mr.mergeError,
+      });
+    },
   },
   watch: {
     state(newVal, oldVal) {
@@ -370,6 +375,10 @@ export default {
             }}
           </mr-widget-alert-message>
 
+          <mr-widget-alert-message v-if="mr.mergeError" type="danger">
+            {{ mergeError }}
+          </mr-widget-alert-message>
+
           <source-branch-removal-status v-if="shouldRenderSourceBranchRemovalStatus" />
         </div>
       </div>

locale/gitlab.pot

@@ -12234,6 +12234,9 @@ 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

@@ -158,8 +158,8 @@ describe 'Merge request > User merges when pipeline succeeds', :js do
         # Wait for the `ci_status` and `merge_check` requests
         wait_for_requests
 
-        page.within('.mr-widget-body') do
-          expect(page).to have_content('Something went wrong')
+        page.within('.mr-section-container') do
+          expect(page).to have_content('Merge failed: Something went wrong')
         end
       end
     end
@@ -177,8 +177,8 @@ describe 'Merge request > User merges when pipeline succeeds', :js do
         # Wait for the `ci_status` and `merge_check` requests
         wait_for_requests
 
-        page.within('.mr-widget-body') do
-          expect(page).to have_content('Something went wrong')
+        page.within('.mr-section-container') do
+          expect(page).to have_content('Merge failed: Something went wrong')
         end
       end
     end

spec/features/merge_request/user_sees_merge_widget_spec.rb

@@ -326,8 +326,8 @@ describe 'Merge request > User sees merge widget', :js do
       # Wait for the `ci_status` and `merge_check` requests
       wait_for_requests
 
-      page.within('.mr-widget-body') do
-        expect(page).to have_content('Something went wrong')
+      page.within('.mr-section-container') do
+        expect(page).to have_content('Merge failed: Something went wrong')
       end
     end
   end
@@ -347,8 +347,8 @@ describe 'Merge request > User sees merge widget', :js do
       # Wait for the `ci_status` and `merge_check` requests
       wait_for_requests
 
-      page.within('.mr-widget-body') do
-        expect(page).to have_content('Something went wrong')
+      page.within('.mr-section-container') do
+        expect(page).to have_content('Merge failed: Something went wrong')
       end
     end
   end