Merge branch 'mr-widget-merge-error' into 'master'

Update rendering of merge request in merge request widget

Closes #40246

See merge request gitlab-org/gitlab-ce!28238

7 files changed, 24 insertions, 13 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue
index 040315b3c66..19a222462b3 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue
+++ b/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" />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
index a3a44dd8e99..83e7d6db9fa 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
+++ b/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
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index 5aa1f0799fc..615d59a7b8e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/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
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index eef2667e141..d02bb2f341d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -1,6 +1,6 @@
 <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>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bb7309148e5..294c938d87d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -12258,6 +12258,9 @@ msgstr ""
 msgid "mrWidget|Merge failed."
 msgstr ""
 
+msgid "mrWidget|Merge failed: %{mergeError}. Please try again."
+msgstr ""
+
 msgid "mrWidget|Merge locally"
 msgstr ""
 
diff --git a/spec/features/merge_request/user_merges_when_pipeline_succeeds_spec.rb b/spec/features/merge_request/user_merges_when_pipeline_succeeds_spec.rb
index e7b92dc5535..586b3ba170d 100644
--- a/spec/features/merge_request/user_merges_when_pipeline_succeeds_spec.rb
+++ b/spec/features/merge_request/user_merges_when_pipeline_succeeds_spec.rb
@@ -159,8 +159,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
@@ -178,8 +178,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
diff --git a/spec/features/merge_request/user_sees_merge_widget_spec.rb b/spec/features/merge_request/user_sees_merge_widget_spec.rb
index 1477307ed7b..0066e985fbb 100644
--- a/spec/features/merge_request/user_sees_merge_widget_spec.rb
+++ b/spec/features/merge_request/user_sees_merge_widget_spec.rb
@@ -327,8 +327,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
@@ -348,8 +348,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