Handle cannot_be_merged merge status

[ci skip]

5 files changed, 62 insertions, 43 deletions

diff --git a/app/assets/javascripts/merge_request/merge_request.js.es6 b/app/assets/javascripts/merge_request/merge_request.js.es6
index 65ab9baa931..3f71dafbaed 100644
--- a/app/assets/javascripts/merge_request/merge_request.js.es6
+++ b/app/assets/javascripts/merge_request/merge_request.js.es6
@@ -27,6 +27,9 @@ Vue.component('timeago', timeagoComponent);
 Vue.component('ci-status', ciStatusComponent);
 Vue.component('ci-icon', ciIconComponent);
 
+// States
+Vue.component('cannot-be-merged', mergeStatusCannotBeMerged);
+
 $(() => {
   // Initialize App
   window.vmMergeRequest = new Vue(mergeRequest);
diff --git a/app/assets/javascripts/merge_request/merge_request_bundle.js b/app/assets/javascripts/merge_request/merge_request_bundle.js
index 6f915f121e1..25fe6bdafd0 100644
--- a/app/assets/javascripts/merge_request/merge_request_bundle.js
+++ b/app/assets/javascripts/merge_request/merge_request_bundle.js
@@ -4,4 +4,5 @@
 //= require ./merge_request_partials
 //= require_directory ./components
 //= require_directory ./status
+//= require_directory ./merge_status
 //= require ./merge_request
diff --git a/app/assets/javascripts/merge_request/merge_request_service.es6 b/app/assets/javascripts/merge_request/merge_request_service.es6
index a1703401db9..5be8aa2b185 100644
--- a/app/assets/javascripts/merge_request/merge_request_service.es6
+++ b/app/assets/javascripts/merge_request/merge_request_service.es6
@@ -13,7 +13,7 @@ const mrService = {
 
     setTimeout(() => {
       successCallback();
-    }, 2000);
+    }, 1000);
   },
 
   getState(state) {
@@ -36,15 +36,15 @@ const mrService = {
 
   getMergeStatus() {
     const successCallback = () => {
-      mrStore.updateMergeStatus('can_be_merged');
+      mrStore.updateMergeStatus('cannot_be_merged');
     };
-    setTimeout(successCallback, 1000);
+    setTimeout(successCallback, 4000);
   },
 
   getCiStatus() {
     setTimeout(() => {
       mrStore.updateCiStatus('running');
-    }, 3000);
+    }, 5000);
   },
 
   // only for testing purposes
@@ -52,7 +52,7 @@ const mrService = {
     setTimeout(() => {
       console.log('xx');
       mrStore.updateCiStatus(ciStatus);
-    }, 5000);
+    }, 6000);
 
   }
 };
diff --git a/app/assets/javascripts/merge_request/merge_status/cannot_be_merged.js.es6 b/app/assets/javascripts/merge_request/merge_status/cannot_be_merged.js.es6
new file mode 100644
index 00000000000..7ffd9ed4095
--- /dev/null
+++ b/app/assets/javascripts/merge_request/merge_status/cannot_be_merged.js.es6
@@ -0,0 +1,10 @@
+const mergeStatusCannotBeMerged = {
+  template: ` <h4 class="has-conflicts">
+                <i class="fa fa-exclamation-triangle"></i>
+                This merge request contains merge conflicts
+              </h4>
+              <p>
+                Please resolve these conflicts or
+                <a class="how_to_merge_link vlink" data-toggle="modal" href="#modal_merge_info">merge this request manually</a>.
+              </p>`
+};
diff --git a/app/assets/javascripts/merge_request/status/opened.js.es6 b/app/assets/javascripts/merge_request/status/opened.js.es6
index 01406b4de05..758efdc6445 100644
--- a/app/assets/javascripts/merge_request/status/opened.js.es6
+++ b/app/assets/javascripts/merge_request/status/opened.js.es6
@@ -19,50 +19,55 @@ const mrWidgetOpened = {
   template: `<div class="mr-state-widget">
               <ci-status :ci="ci" :merge-request="mergeRequest"></ci-status>
               <div class="mr-widget-body">
-                <template v-if="mergeRequest.mergeStatus==='unchecked'">
-                  <strong>
-                    <i class="fa fa-spinner fa-spin"></i>
-                    Checking ability to merge automatically&hellip;
-                  </strong>
+                <template v-if="mergeRequest.mergeStatus==='cannot_be_merged'">
+                  <cannot-be-merged></cannot-be-merged>
                 </template>
                 <template v-else>
-                  <div class="accept-merge-holder clearfix">
-                    <div class="clearfix">
-                      <div class="accept-action">
-                        <mr-accept-button @do-accept-merge-request="onAcceptMergeRequest" :merge-request="mergeRequest" :ci="ci"></mr-accept-button>
-                      </div>
-                      <div class="accept-control checkbox">
-                        <label for="mr-remove-branch">
-                          <input type="checkbox" id="mr-remove-branch" v-model="removeBranch">
-                          Remove Source Branch
-                        </label>
-                      </div>
-                      <div class="accept-control right">
-                        <a class="modify-merge-commit-link" href="#" @click="toggleCommitMessage">
-                          <i class="fa fa-edit" v-if="!showCommitMessage"></i>
-                          <i class="fa fa-chevron-up" v-if="showCommitMessage"></i>
-                          Modify commit message
-                        </a>
-                      </div>
-                    </div>
-                    <div v-if="showCommitMessage">
-                      <div class="form-group commit_message-group">
-                        <label class="control-label" for="commit_message-825c2b031c44ce57296fa2585b06f63c">
-                          Commit message
-                        </label>
-                        <div class="col-sm-10">
-                          <div class="commit-message-container">
-                          <div class="max-width-marker"></div>
-                          <textarea name="commit_message" id="x" class="form-control js-commit-message" required="required" rows="14"  v-model="mergeRequest.mergeCommitMessage"></textarea>
+                  <template v-if="mergeRequest.mergeStatus==='unchecked'">
+                    <strong>
+                      <i class="fa fa-spinner fa-spin"></i>
+                      Checking ability to merge automatically&hellip;
+                    </strong>
+                  </template>
+                  <template v-else>
+                    <div class="accept-merge-holder clearfix">
+                      <div class="clearfix">
+                        <div class="accept-action">
+                          <mr-accept-button @do-accept-merge-request="onAcceptMergeRequest" :merge-request="mergeRequest" :ci="ci"></mr-accept-button>
                         </div>
-                        <p class="hint">
-                          Try to keep the first line under 52 characters
-                          and the others under 72.
-                        </p>
+                        <div class="accept-control checkbox">
+                          <label for="mr-remove-branch">
+                            <input type="checkbox" id="mr-remove-branch" v-model="removeBranch">
+                            Remove Source Branch
+                          </label>
+                        </div>
+                        <div class="accept-control right">
+                          <a class="modify-merge-commit-link" href="#" @click="toggleCommitMessage">
+                            <i class="fa fa-edit" v-if="!showCommitMessage"></i>
+                            <i class="fa fa-chevron-up" v-if="showCommitMessage"></i>
+                            Modify commit message
+                          </a>
+                        </div>
+                      </div>
+                      <div v-if="showCommitMessage">
+                        <div class="form-group commit_message-group">
+                          <label class="control-label" for="commit_message-825c2b031c44ce57296fa2585b06f63c">
+                            Commit message
+                          </label>
+                          <div class="col-sm-10">
+                            <div class="commit-message-container">
+                            <div class="max-width-marker"></div>
+                            <textarea name="commit_message" id="x" class="form-control js-commit-message" required="required" rows="14"  v-model="mergeRequest.mergeCommitMessage"></textarea>
+                          </div>
+                          <p class="hint">
+                            Try to keep the first line under 52 characters
+                            and the others under 72.
+                          </p>
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
+                  </template>
                 </template>
               </div>
             </div>`,