Merge branch '28010-mr-merge-button-default-to-danger' into 'master'

Default to dangerous MR merge button

Closes #28010

See merge request !9245

3 files changed, 40 insertions, 24 deletions

diff --git a/app/assets/javascripts/merge_request_widget.js.es6 b/app/assets/javascripts/merge_request_widget.js.es6
index 00c6c050612..5f1bd474a0c 100644
--- a/app/assets/javascripts/merge_request_widget.js.es6
+++ b/app/assets/javascripts/merge_request_widget.js.es6
@@ -129,8 +129,9 @@ require('./smart_interval');
     };
 
     MergeRequestWidget.prototype.getMergeStatus = function() {
-      return $.get(this.opts.merge_check_url, function(data) {
+      return $.get(this.opts.merge_check_url, (data) => {
         var $html = $(data);
+        this.updateMergeButton(this.status, this.hasCi, $html);
         $('.mr-widget-body').replaceWith($html.find('.mr-widget-body'));
         $('.mr-widget-footer').replaceWith($html.find('.mr-widget-footer'));
       });
@@ -154,9 +155,9 @@ require('./smart_interval');
       return $.getJSON(this.opts.ci_status_url, (function(_this) {
         return function(data) {
           var message, status, title;
-          if (!data.status) {
-            return;
-          }
+          _this.status = data.status;
+          _this.hasCi = data.has_ci;
+          _this.updateMergeButton(_this.status, _this.hasCi);
           if (data.environments && data.environments.length) _this.renderEnvironments(data.environments);
           if (data.status !== _this.opts.ci_status ||
               data.sha !== _this.opts.ci_sha ||
@@ -232,36 +233,45 @@ require('./smart_interval');
         return;
       }
       $('.ci_widget').hide();
-      allowed_states = ["failed", "canceled", "running", "pending", "success", "success_with_warnings", "skipped", "not_found"];
-      if (indexOf.call(allowed_states, state) !== -1) {
-        $('.ci_widget.ci-' + state).show();
+      $('.ci_widget.ci-' + state).show();
+
+      this.initMiniPipelineGraph();
+    };
+
+    MergeRequestWidget.prototype.showCICoverage = function(coverage) {
+      var text = `Coverage ${coverage}%`;
+      return $('.ci_widget:visible .ci-coverage').text(text);
+    };
+
+    MergeRequestWidget.prototype.updateMergeButton = function(state, hasCi, $html) {
+      const allowed_states = ["failed", "canceled", "running", "pending", "success", "success_with_warnings", "skipped", "not_found"];
+      let stateClass = 'btn-danger';
+      if (!hasCi) {
+        stateClass = 'btn-create';
+      } else if (indexOf.call(allowed_states, state) !== -1) {
         switch (state) {
           case "failed":
           case "canceled":
           case "not_found":
-            this.setMergeButtonClass('btn-danger');
+            stateClass = 'btn-danger';
             break;
           case "running":
-            this.setMergeButtonClass('btn-info');
+            stateClass = 'btn-info';
             break;
           case "success":
           case "success_with_warnings":
-            this.setMergeButtonClass('btn-create');
+            stateClass = 'btn-create';
         }
       } else {
         $('.ci_widget.ci-error').show();
-        this.setMergeButtonClass('btn-danger');
+        stateClass = 'btn-danger';
       }
-    };
 
-    MergeRequestWidget.prototype.showCICoverage = function(coverage) {
-      var text;
-      text = 'Coverage ' + coverage + '%';
-      return $('.ci_widget:visible .ci-coverage').text(text);
+      this.setMergeButtonClass(stateClass, $html);
     };
 
-    MergeRequestWidget.prototype.setMergeButtonClass = function(css_class) {
-      return $('.js-merge-button,.accept-action .dropdown-toggle').removeClass('btn-danger btn-info btn-create').addClass(css_class);
+    MergeRequestWidget.prototype.setMergeButtonClass = function(css_class, $html = $('.mr-state-widget')) {
+      return $html.find('.js-merge-button').removeClass('btn-danger btn-info btn-create').addClass(css_class);
     };
 
     MergeRequestWidget.prototype.updatePipelineUrls = function(id) {
diff --git a/app/assets/javascripts/merge_request_widget/ci_bundle.js.es6 b/app/assets/javascripts/merge_request_widget/ci_bundle.js.es6
index 547dfa9e677..21d7c3e168e 100644
--- a/app/assets/javascripts/merge_request_widget/ci_bundle.js.es6
+++ b/app/assets/javascripts/merge_request_widget/ci_bundle.js.es6
@@ -15,14 +15,14 @@
     });
 
     $(document)
-    .off('click', '.accept_merge_request')
-    .on('click', '.accept_merge_request', () => {
-      $('.js-merge-button').html('<i class="fa fa-spinner fa-spin"></i> Merge in progress');
+    .off('click', '.accept-merge-request')
+    .on('click', '.accept-merge-request', () => {
+      $('.js-merge-button, .js-merge-when-pipeline-succeeds-button').html('<i class="fa fa-spinner fa-spin"></i> Merge in progress');
     });
 
     $(document)
-    .off('click', '.merge_when_pipeline_succeeds')
-    .on('click', '.merge_when_pipeline_succeeds', () => {
+    .off('click', '.merge-when-pipeline-succeeds')
+    .on('click', '.merge-when-pipeline-succeeds', () => {
       $('#merge_when_pipeline_succeeds').val('1');
     });
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 0b0c4bc130d..a629a5333d7 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -29,7 +29,7 @@
         background-color: $gl-success;
       }
 
-      .accept_merge_request {
+      .accept-merge-request {
         &.ci-pending,
         &.ci-running {
           @include btn-blue;
@@ -42,6 +42,12 @@
           @include btn-red;
         }
       }
+
+      .dropdown-toggle {
+        .fa {
+          color: inherit;
+        }
+      }
     }
 
     .accept-control {