Load related MRs/branches asynchronouslyasync-related-mrs

Currently this works by loading the HAML partials via XHR. While this is
not the nicest setup it _is_ the easiest setup using the tools we
currently have.

Loading this data asynchronously doesn't make loading the related
MRs/branches itself faster, it merely ensures that loading the issue
itself is not slowed down.

Fixes gitlab-org/gitlab-ce#14949

6 files changed, 66 insertions, 15 deletions

diff --git a/CHANGELOG b/CHANGELOG
index ed59bc1b252..adbcd8f8bcf 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -3,6 +3,7 @@ Please view this file on the master branch, on stable branches it's out of date.
 v 8.7.0 (unreleased)
   - All service classes (those residing in app/services) are now instrumented (Yorick Peterse)
   - Developers can now add custom tags to transactions (Yorick Peterse)
+  - Loading of an issue's referenced merge requests and related branches is now done asynchronously (Yorick Peterse)
   - Enable gzip for assets, makes the page size significantly smaller. !3544 / !3632 (Connor Shea)
   - Load award emoji images separately unless opening the full picker. Saves several hundred KBs of data for most pages. (Connor Shea)
   - All images in discussions and wikis now link to their source files !3464 (Connor Shea).
diff --git a/app/assets/javascripts/issue.js.coffee b/app/assets/javascripts/issue.js.coffee
index 946d83b7bdd..c3fba2aeb76 100644
--- a/app/assets/javascripts/issue.js.coffee
+++ b/app/assets/javascripts/issue.js.coffee
@@ -10,6 +10,9 @@ class @Issue
       @initTaskList()
       @initIssueBtnEventListeners()
 
+    @initMergeRequests()
+    @initRelatedBranches()
+
   initTaskList: ->
     $('.detail-page-description .js-task-list-container').taskList('enable')
     $(document).on 'tasklist:changed', '.detail-page-description .js-task-list-container', @updateTaskList
@@ -69,3 +72,23 @@ class @Issue
       type: 'PATCH'
       url: $('form.js-issuable-update').attr('action')
       data: patchData
+
+  initMergeRequests: ->
+    container = $('#merge-requests')
+
+    $.getJSON(container.data('url'))
+      .error () ->
+        new Flash('Failed to load referenced merge requests', 'alert')
+      .success (data) ->
+        if 'html' of data
+          container.html(data.html)
+
+  initRelatedBranches: ->
+    container = $('#related-branches')
+
+    $.getJSON(container.data('url'))
+      .error () ->
+        new Flash('Failed to load related branches', 'alert')
+      .success (data) ->
+        if 'html' of data
+          container.html(data.html)
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index 6d649e72f84..c26cfeccf1d 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -3,7 +3,8 @@ class Projects::IssuesController < Projects::ApplicationController
   include IssuableActions
 
   before_action :module_enabled
-  before_action :issue, only: [:edit, :update, :show]
+  before_action :issue,
+    only: [:edit, :update, :show, :referenced_merge_requests, :related_branches]
 
   # Allow read any issue
   before_action :authorize_read_issue!, only: [:show]
@@ -17,9 +18,6 @@ class Projects::IssuesController < Projects::ApplicationController
   # Allow issues bulk update
   before_action :authorize_admin_issues!, only: [:bulk_update]
 
-  # Cross-reference merge requests
-  before_action :closed_by_merge_requests, only: [:show]
-
   respond_to :html
 
   def index
@@ -65,8 +63,6 @@ class Projects::IssuesController < Projects::ApplicationController
     @note = @project.notes.new(noteable: @issue)
     @notes = @issue.notes.nonawards.with_associations.fresh
     @noteable = @issue
-    @merge_requests = @issue.referenced_merge_requests(current_user)
-    @related_branches = @issue.related_branches - @merge_requests.map(&:source_branch)
 
     respond_to do |format|
       format.html
@@ -118,15 +114,39 @@ class Projects::IssuesController < Projects::ApplicationController
     end
   end
 
+  def referenced_merge_requests
+    @merge_requests = @issue.referenced_merge_requests(current_user)
+    @closed_by_merge_requests = @issue.closed_by_merge_requests(current_user)
+
+    respond_to do |format|
+      format.json do
+        render json: {
+          html: view_to_html_string('projects/issues/_merge_requests')
+        }
+      end
+    end
+  end
+
+  def related_branches
+    merge_requests = @issue.referenced_merge_requests(current_user)
+
+    @related_branches = @issue.related_branches -
+      merge_requests.map(&:source_branch)
+
+    respond_to do |format|
+      format.json do
+        render json: {
+          html: view_to_html_string('projects/issues/_related_branches')
+        }
+      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" })
   end
 
-  def closed_by_merge_requests
-    @closed_by_merge_requests ||= @issue.closed_by_merge_requests(current_user)
-  end
-
   protected
 
   def issue
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 6fa059cbe68..db37bb52ee3 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -64,9 +64,11 @@
               = @issue.description
       = edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue_edited_ago')
 
-      .merge-requests
-        = render 'merge_requests'
-        = render 'related_branches'
+      #merge-requests{'data-url' => referenced_merge_requests_namespace_project_issue_url(@project.namespace, @project, @issue)}
+        // This element is filled in using Javascript.
+
+      #related-branches{'data-url' => related_branches_namespace_project_issue_url(@project.namespace, @project, @issue)}
+        // This element is filled in using Javascript.
 
     .content-block.content-block-small
       = render 'new_branch'
diff --git a/config/routes.rb b/config/routes.rb
index 48601b7567b..688b83d2c95 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -701,6 +701,8 @@ Rails.application.routes.draw do
         resources :issues, constraints: { id: /\d+/ } do
           member do
             post :toggle_subscription
+            get :referenced_merge_requests
+            get :related_branches
           end
           collection do
             post  :bulk_update
diff --git a/features/steps/shared/issuable.rb b/features/steps/shared/issuable.rb
index b6d70a26c21..24b3fb6eacb 100644
--- a/features/steps/shared/issuable.rb
+++ b/features/steps/shared/issuable.rb
@@ -71,13 +71,16 @@ module SharedIssuable
 
   step 'I should not see any related merge requests' do
     page.within '.issue-details' do
-      expect(page).not_to have_content('.merge-requests')
+      expect(page).not_to have_content('#merge-requests .merge-requests-title')
     end
   end
 
   step 'I should see the "Enterprise fix" related merge request' do
-    page.within '.merge-requests' do
+    page.within '#merge-requests .merge-requests-title' do
       expect(page).to have_content('1 Related Merge Request')
+    end
+
+    page.within '#merge-requests ul' do
       expect(page).to have_content('Enterprise fix')
     end
   end