Load the "New Branch" button asynchronouslyasync-new-branch-button

This button depends on Issue#can_be_worked_on? which in turn depends on
Issue#related_branches. By rendering this button asynchronously we can
finally remove all usages of Issue#related_branches and
Issue#referenced_merge_requests from the issues "show" page.

7 files changed, 62 insertions, 11 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 558897ad892..4090202ec5e 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -13,6 +13,8 @@ v 8.7.1 (unreleased)
   - Use the `can?` helper instead of `current_user.can?`. !3882
   - Prevent users from deleting Webhooks via API they do not own
   - Fix Error 500 due to stale cache when projects are renamed or transferred
+  - The "New Branch" button is now loaded asynchronously
+  - Use the `can?` helper instead of `current_user.can?`
 
 v 8.7.0
   - Gitlab::GitAccess and Gitlab::GitAccessWiki are now instrumented
diff --git a/app/assets/javascripts/issue.js.coffee b/app/assets/javascripts/issue.js.coffee
index c7d74a12f99..157361404e0 100644
--- a/app/assets/javascripts/issue.js.coffee
+++ b/app/assets/javascripts/issue.js.coffee
@@ -12,6 +12,7 @@ class @Issue
 
     @initMergeRequests()
     @initRelatedBranches()
+    @initCanCreateBranch()
 
   initTaskList: ->
     $('.detail-page-description .js-task-list-container').taskList('enable')
@@ -92,3 +93,25 @@ class @Issue
       .success (data) ->
         if 'html' of data
           $container.html(data.html)
+
+  initCanCreateBranch: ->
+    $container = $('div#new-branch')
+
+    # If the user doesn't have the required permissions the container isn't
+    # rendered at all.
+    return unless $container
+
+    $.getJSON($container.data('path'))
+      .error ->
+        $container.find('.checking').hide()
+        $container.find('.unavailable').show()
+
+        new Flash('Failed to check if a new branch can be created.', 'alert')
+      .success (data) ->
+        if data.can_create_branch
+          $container.find('.checking').hide()
+          $container.find('.available').show()
+          $container.find('a').attr('disabled', false)
+        else
+          $container.find('.checking').hide()
+          $container.find('.unavailable').show()
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 18a74fe21a0..062da397b6b 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -139,6 +139,10 @@
     pointer-events: auto !important;
   }
 
+  &[disabled] {
+    pointer-events: none !important;
+  }
+
   .caret {
     margin-left: 5px;
   }
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index 7d4fc361ce2..9face235baa 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -3,8 +3,8 @@ class Projects::IssuesController < Projects::ApplicationController
   include IssuableActions
 
   before_action :module_enabled
-  before_action :issue,
-    only: [:edit, :update, :show, :referenced_merge_requests, :related_branches]
+  before_action :issue, only: [:edit, :update, :show, :referenced_merge_requests,
+                               :related_branches, :can_create_branch]
 
   # Allow read any issue
   before_action :authorize_read_issue!, only: [:show]
@@ -139,6 +139,18 @@ class Projects::IssuesController < Projects::ApplicationController
     end
   end
 
+  def can_create_branch
+    can_create = current_user &&
+      can?(current_user, :push_code, @project) &&
+      @issue.can_be_worked_on?(current_user)
+
+    respond_to do |format|
+      format.json do
+        render json: { can_create_branch: can_create }
+      end
+    end
+  end
+
   def bulk_update
     result = Issues::BulkUpdateService.new(project, current_user, bulk_update_params).execute
     redirect_back_or_default(default: { action: 'index' }, options: { notice: "#{result[:count]} issues updated" })
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index 6da8e4f33a9..469429ccf3c 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -1,5 +1,13 @@
-- if current_user && can?(current_user, :push_code, @project) && @issue.can_be_worked_on?(current_user)
+- if can?(current_user, :push_code, @project)
   .pull-right
-    = link_to namespace_project_branches_path(@project.namespace, @project, branch_name: @issue.to_branch_name, issue_iid: @issue.iid), method: :post, class: 'btn has-tooltip', title: @issue.to_branch_name do
-      = icon('code-fork')
-      New Branch
+    #new-branch{'data-path' => can_create_branch_namespace_project_issue_path(@project.namespace, @project, @issue)}
+      = link_to namespace_project_branches_path(@project.namespace, @project, branch_name: @issue.to_branch_name, issue_iid: @issue.iid), method: :post, class: 'btn has-tooltip', title: @issue.to_branch_name, disabled: 'disabled' do
+        .checking
+          %i.fa.fa-spinner.fa-spin
+          Checking branches
+        .available(style="display: none")
+          %i.fa.fa-code-fork
+          New branch
+        .unavailable(style="display: none")
+          %i.fa.fa-exclamation-triangle
+          New branch unavailable
diff --git a/config/routes.rb b/config/routes.rb
index 2f820aafed1..f2f71115e15 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -708,6 +708,7 @@ Rails.application.routes.draw do
             post :toggle_subscription
             get :referenced_merge_requests
             get :related_branches
+            get :can_create_branch
           end
           collection do
             post  :bulk_update
diff --git a/spec/features/issues/new_branch_button_spec.rb b/spec/features/issues/new_branch_button_spec.rb
index 9219b767547..16e188d2a8a 100644
--- a/spec/features/issues/new_branch_button_spec.rb
+++ b/spec/features/issues/new_branch_button_spec.rb
@@ -11,10 +11,10 @@ feature 'Start new branch from an issue', feature: true do
       login_as(user)
     end
 
-    it 'shown the new branch button', js: false do
+    it 'shows the new branch button', js: true do
       visit namespace_project_issue_path(project.namespace, project, issue)
 
-      expect(page).to have_link "New Branch"
+      expect(page).to have_css('#new-branch .available')
     end
 
     context "when there is a referenced merge request" do
@@ -34,16 +34,17 @@ feature 'Start new branch from an issue', feature: true do
       end
 
       it "hides the new branch button", js: true do
-        expect(page).not_to have_link "New Branch"
+        expect(page).not_to have_css('#new-branch .available')
         expect(page).to have_content /1 Related Merge Request/
       end
     end
   end
 
   context "for visiters" do
-    it 'no button is shown', js: false do
+    it 'no button is shown', js: true do
       visit namespace_project_issue_path(project.namespace, project, issue)
-      expect(page).not_to have_link "New Branch"
+
+      expect(page).not_to have_css('#new-branch')
     end
   end
 end