Load the "New Branch" button asynchronously

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.

CHANGELOG

@@ -20,6 +20,8 @@ v 8.7.1 (unreleased)
   - Prevent users from deleting Webhooks via API they do not own
   - Fix Error 500 due to stale cache when projects are renamed or transferred
   - Update width of search box to fix Safari bug. !3900 (Jedidiah)
+  - 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

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()

app/assets/stylesheets/framework/buttons.scss

@@ -139,6 +139,10 @@
     pointer-events: auto !important;
   }
 
+  &[disabled] {
+    pointer-events: none !important;
+  }
+
   .caret {
     margin-left: 5px;
   }

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" })

app/views/projects/issues/_new_branch.html.haml

-- 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

config/routes.rb

@@ -710,6 +710,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

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