Display Ready to Merge widget when MWPS fails40246-mwps-refresh-failure

2 files changed, 33 insertions, 26 deletions

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 2133124347c..0392a75452a 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
@@ -1,19 +1,29 @@
 <script>
   import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+  import callout from '~/vue_shared/components/callout.vue';
+  import { s__ } from '~/locale';
   import eventHub from '../../event_hub';
   import statusIcon from '../mr_widget_status_icon.vue';
+  import { ReadyToMergeState } from '../../dependencies';
 
   export default {
     name: 'MRWidgetAutoMergeFailed',
     components: {
       statusIcon,
       loadingIcon,
+      callout,
+      'mr-widget-ready-to-merge': ReadyToMergeState,
     },
     props: {
       mr: {
         type: Object,
         required: true,
       },
+      service: {
+        type: Object,
+        required: false,
+        default: () => {},
+      },
     },
     data() {
       return {
@@ -27,29 +37,23 @@
           this.isRefreshing = false;
         });
       },
+      calloutMessage() {
+        return this.mr.mergeError ? `${this.mr.mergeError}.` : s__('mrWidget|This merge request failed to be merged automatically');
+      },
     },
   };
 </script>
 <template>
-  <div class="mr-widget-body media">
-    <status-icon status="warning" />
-    <div class="media-body space-children">
-      <span class="bold">
-        <template v-if="mr.mergeError">{{ mr.mergeError }}.</template>
-        {{ s__("mrWidget|This merge request failed to be merged automatically") }}
-      </span>
-      <button
-        :disabled="isRefreshing"
-        type="button"
-        class="btn btn-sm btn-default"
-        @click="refreshWidget"
-      >
-        <loading-icon
-          v-if="isRefreshing"
-          :inline="true"
-        />
-        {{ s__("mrWidget|Refresh") }}
-      </button>
+  <div class="mr-widget-body">
+    <mr-widget-ready-to-merge
+      :mr="mr"
+      :service="service"
+    />
+    <div class="mr-widget-callout media mt-2">
+      <callout
+        :message="calloutMessage()"
+        category="danger"
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 7b8cad254c7..9f67bde1871 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -47,7 +47,6 @@
   }
 }
 
-
 .mr-widget-heading {
   position: relative;
   border: 1px solid $border-color;
@@ -265,6 +264,11 @@
   .mr-widget-body {
     line-height: 28px;
 
+    .bs-callout {
+      width: 100%;
+      display: block;
+    }
+
     @include clearfix;
 
     &.media > *:first-child {
@@ -455,7 +459,7 @@
 
 .mr-list {
   .merge-request {
-    padding: 10px  0 10px 15px;
+    padding: 10px 0 10px 15px;
     position: relative;
     display: -webkit-flex;
     display: flex;
@@ -469,7 +473,6 @@
       margin-bottom: 2px;
 
       .ci-status-link {
-
         svg {
           height: 16px;
           width: 16px;
@@ -516,6 +519,7 @@
   }
 }
 
+.mr-widget-callout,
 .mr-links {
   padding-left: $status-icon-size + $gl-btn-padding;
 }
@@ -699,7 +703,6 @@
 
 .table-holder {
   .ci-table {
-
     th {
       background-color: $white-light;
       color: $gl-text-color-secondary;
@@ -765,7 +768,7 @@
 
   &.affix {
     left: 0;
-    transition: right .15s;
+    transition: right 0.15s;
 
     @include media-breakpoint-down(xs) {
       right: 0;
@@ -874,7 +877,7 @@
   }
 
   > *:not(:last-child) {
-    margin-right: .3em;
+    margin-right: 0.3em;
   }
 
   svg {
@@ -907,7 +910,7 @@
   &[disabled] {
     cursor: not-allowed;
     box-shadow: none;
-    opacity: .65;
+    opacity: 0.65;
 
     &:hover {
       color: $file-mode-changed;