From 41f7cee99149f98f82afbe54587a4d2853f1ddc6 Mon Sep 17 00:00:00 2001
From: Fatih Acet <acetfatih@gmail.com>
Date: Mon, 8 Aug 2016 13:26:09 +0300
Subject: [PATCH] Show loading button while Ajax request is in progress.

---
 .../merge_conflict_data_provider.js.es6       |  6 ++--
 .../merge_conflict_resolver.js.es6            | 33 ++++++++++++-------
 .../stylesheets/pages/merge_conflicts.scss    |  4 +++
 .../merge_requests/conflicts.html.haml        | 10 +++---
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/merge_conflict_data_provider.js.es6 b/app/assets/javascripts/merge_conflict_data_provider.js.es6
index f0f51a65b94..7e20eb1ce66 100644
--- a/app/assets/javascripts/merge_conflict_data_provider.js.es6
+++ b/app/assets/javascripts/merge_conflict_data_provider.js.es6
@@ -11,6 +11,7 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
       hasError       : false,
       isParallel     : diffViewType === 'parallel',
       diffViewType   : diffViewType,
+      isSubmitting   : false,
       conflictsData  : {},
       resolutionData : {}
     }
@@ -18,7 +19,7 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
 
 
   decorateData(vueInstance, data) {
-    this.vueInstance    = vueInstance;
+    this.vueInstance = vueInstance;
 
     if (data.type === 'error') {
       vueInstance.hasError = true;
@@ -34,6 +35,7 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
     }
 
     vueInstance.conflictsData = data;
+    vueInstance.isSubmitting = false;
   }
 
 
@@ -233,7 +235,7 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
 
 
   isAllResolved() {
-    return this.getConflictsCount() === this.getResolvedCount();
+    return !this.vueInstance.isSubmitting && this.getConflictsCount() === this.getResolvedCount();
   }
 
 
diff --git a/app/assets/javascripts/merge_conflict_resolver.js.es6 b/app/assets/javascripts/merge_conflict_resolver.js.es6
index cff43a3b40f..59e26f1405a 100644
--- a/app/assets/javascripts/merge_conflict_resolver.js.es6
+++ b/app/assets/javascripts/merge_conflict_resolver.js.es6
@@ -31,6 +31,17 @@ window.MergeConflictResolver = class MergeConflictResolver {
   }
 
 
+  setComputedProperties() {
+    const dp = this.dataProvider;
+
+    return {
+      conflictsCount() { return dp.getConflictsCount() },
+      resolvedCount()  { return dp.getResolvedCount() },
+      allResolved()    { return dp.isAllResolved() }
+    }
+  }
+
+
   fetchData() {
     const dp = this.dataProvider;
 
@@ -47,21 +58,19 @@ window.MergeConflictResolver = class MergeConflictResolver {
   }
 
 
-  setComputedProperties() {
-    const dp = this.dataProvider;
-
-    return {
-      conflictsCount() { return dp.getConflictsCount() },
-      resolvedCount()  { return dp.getResolvedCount() },
-      allResolved()    { return dp.isAllResolved() }
-    }
-  }
-
   commit() {
+    this.vue.isSubmitting = true;
+
     $.post('./resolve_conflicts', this.dataProvider.getCommitData())
-      .then( (data) => {
-        window.location.href = data.redirect_to
+      .done( (data) => {
+        window.location.href = data.redirect_to;
       })
+      .error(() => {
+        new Flash('Something went wrong!');
+      })
+      .always(() => {
+        this.vue.isSubmitting = false;
+      });
   }
 
 }
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index 965348b3b88..ab5a2570827 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -137,4 +137,8 @@ $unselected_line:         #f8f8f8;
       outline: none;
     }
   }
+
+  .btn-success .fa-spinner {
+    color: #FFF;
+  }
 }
diff --git a/app/views/projects/merge_requests/conflicts.html.haml b/app/views/projects/merge_requests/conflicts.html.haml
index 14252fd3256..46e85187a42 100644
--- a/app/views/projects/merge_requests/conflicts.html.haml
+++ b/app/views/projects/merge_requests/conflicts.html.haml
@@ -126,8 +126,10 @@
         %textarea.form-control.js-commit-message{":disabled" => "!allResolved", "v-model" => "conflictsData.commitMessage"}
           {{{conflictsData.commitMessage}}}
 
-      %button{type: 'button', class: 'btn btn-success js-submit-button', ":disabled" => "!allResolved", "@click" => "commit()"}
-        Commit conflict resolution
+      %button{type: "button", class: "btn btn-success js-submit-button", ":disabled" => "!allResolved", "@click" => "commit()"}
+        %span Commit conflict resolution
+        %a.fa.fa-spin.fa-spinner{":class" => "{'hidden': !isSubmitting}"}
 
-      / %button{type: 'button', class: 'btn btn-cancel'}
-      /   Cancel
+      / FIXME: Hardcoded path
+      %a.btn.btn-cancel{"href" => "diffs"}
+        Cancel