Set loading state to dropdown when checking if user can create branch.

3 files changed, 41 insertions, 19 deletions

diff --git a/app/assets/javascripts/create_merge_request_dropdown.js b/app/assets/javascripts/create_merge_request_dropdown.js
index c51bf24cd45..2ce483714ea 100644
--- a/app/assets/javascripts/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/create_merge_request_dropdown.js
@@ -17,6 +17,8 @@ export default class CreateMergeRequestDropdown {
     this.dropdownList = this.wrapperEl.querySelector('.dropdown-menu');
     this.availableButton = this.wrapperEl.querySelector('.available');
     this.unavailableButton = this.wrapperEl.querySelector('.unavailable');
+    this.unavailableButtonArrow = this.unavailableButton.querySelector('.fa');
+    this.unavailableButtonText = this.unavailableButton.querySelector('.text');
 
     this.createBranchPath = this.wrapperEl.dataset.createBranchPath;
     this.canCreatePath = this.wrapperEl.dataset.canCreatePath;
@@ -60,24 +62,43 @@ export default class CreateMergeRequestDropdown {
     this.dropdownToggle.setAttribute('disabled', 'disabled');
   }
 
+  setUnavailableButtonState(isLoading = true) {
+    if (isLoading) {
+      this.unavailableButtonArrow.classList.add('fa-spinner', 'fa-spin');
+      this.unavailableButtonArrow.classList.remove('fa-exclamation-triangle');
+    } else {
+      this.unavailableButtonArrow.classList.remove('fa-spinner', 'fa-spin');
+      this.unavailableButtonArrow.classList.add('fa-exclamation-triangle');
+    }
+
+    this.unavailableButtonText.textContent = `New branch unavailable${isLoading ? '...' : ''}`;
+  }
+
   checkAbilityToCreateBranch() {
-    return $.getJSON(this.canCreatePath)
-      .done((data) => {
-        if (data.can_create_branch) {
-          this.available();
-          this.enable();
-
-          if (!this.droplabInitialized) {
-            this.droplabInitialized = true;
-            this.initDroplab();
-            this.bindEvents();
-          }
+    return $.ajax({
+      method: 'GET',
+      dataType: 'json',
+      url: this.canCreatePath,
+      beforeSend: () => this.setUnavailableButtonState(),
+    })
+    .done((data) => {
+      this.setUnavailableButtonState(false);
+
+      if (data.can_create_branch) {
+        this.available();
+        this.enable();
+
+        if (!this.droplabInitialized) {
+          this.droplabInitialized = true;
+          this.initDroplab();
+          this.bindEvents();
         }
-      }).fail(() => {
-        this.unavailable();
-        this.disable();
-        new Flash('Failed to check if a new branch can be created.');
-      });
+      }
+    }).fail(() => {
+      this.unavailable();
+      this.disable();
+      new Flash('Failed to check if a new branch can be created.');
+    });
   }
 
   initDroplab() {
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 6f7a7a8ba1c..b18bbc329c3 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -177,7 +177,7 @@ ul.related-merge-requests > li {
   }
 
   .dropdown-menu {
-    max-width: 280px;
+    width: 300px;
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index b9ddf9a951c..9ca54c3fde6 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -2,8 +2,9 @@
   .create-mr-dropdown-wrap{ data: { can_create_path: can_create_branch_namespace_project_issue_path(@project.namespace, @project, @issue), create_mr_path: create_merge_request_namespace_project_issue_path(@project.namespace, @project, @issue), create_branch_path: namespace_project_branches_path(@project.namespace, @project, branch_name: @issue.to_branch_name, issue_iid: @issue.iid) } }
     .btn-group.unavailable
       %button.btn.btn-grouped{ type: 'button', disabled: 'disabled' }
-        = icon('exclamation-triangle')
-        New branch unavailable
+        = icon('spinner', class: 'fa-spin')
+        %span.text
+          New branch unavailable...
         %button.btn.btn-inverted.disabled.dropdown-toggle{ type: 'button', disabled: 'disabled' }
           = icon('caret-down')
     .btn-group.available.hide