Load milestone tabs asynchronously

app/assets/javascripts/milestone.js

@@ -81,9 +81,7 @@
     };
 
     function Milestone() {
-      var oldMouseStart;
       this.bindIssuesSorting();
-      this.bindMergeRequestSorting();
       this.bindTabsSwitching();
     }
 
@@ -100,13 +98,14 @@
     };
 
     Milestone.prototype.bindTabsSwitching = function() {
-      return $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
-        var currentTabClass, previousTabClass;
-        currentTabClass = $(e.target).data('show');
-        previousTabClass = $(e.relatedTarget).data('show');
-        $(previousTabClass).hide();
-        $(currentTabClass).removeClass('hidden');
-        return $(currentTabClass).show();
+      return $('a[data-toggle="tab"]').on('show.bs.tab', (e) => {
+        const $target = $(e.target);
+        const endpoint = $target.data('endpoint');
+
+        if (endpoint && !$target.hasClass('is-loaded')) {
+          this.loadMergeRequests($target.attr('href'), endpoint)
+            .done(() => $target.addClass('is-loaded'));
+        }
       });
     };
 
@@ -169,6 +168,18 @@
       });
     };
 
+    Milestone.prototype.loadMergeRequests = function(elId, url) {
+      return $.ajax({
+        url,
+        dataType: 'JSON',
+      })
+      .fail(() => new Flash('Error loading merge requests'))
+      .done((data) => {
+        $(elId).html(data.html);
+        this.bindMergeRequestSorting();
+      });
+    };
+
     return Milestone;
   })();
 }).call(window);

app/controllers/concerns/milestone_actions.rb

@@ -0,0 +1,42 @@
+module MilestoneActions
+  extend ActiveSupport::Concern
+
+  def merge_requests
+    respond_to do |format|
+      format.json do
+        render json: tabs_json("shared/milestones/_merge_requests_tab", {
+          merge_requests: @milestone.merge_requests,
+          show_project_name: true
+        })
+      end
+    end
+  end
+
+  def participants
+    respond_to do |format|
+      format.json do
+        render json: tabs_json("shared/milestones/_participants_tab", {
+          users: @milestone.participants
+        })
+      end
+    end
+  end
+
+  def labels
+    respond_to do |format|
+      format.json do
+        render json: tabs_json("shared/milestones/_labels_tab", {
+          labels: @milestone.labels
+        })
+      end
+    end
+  end
+
+  private
+
+  def tabs_json(partial, data = {})
+    {
+      html: view_to_html_string(partial, data)
+    }
+  end
+end

app/controllers/groups/milestones_controller.rb

@@ -1,6 +1,8 @@
 class Groups::MilestonesController < Groups::ApplicationController
+  include MilestoneActions
+
   before_action :group_projects
-  before_action :milestone, only: [:show, :update]
+  before_action :milestone, only: [:show, :update, :merge_requests, :participants, :labels]
   before_action :authorize_admin_milestones!, only: [:new, :create, :update]
 
   def index

app/controllers/projects/milestones_controller.rb

@@ -1,6 +1,8 @@
 class Projects::MilestonesController < Projects::ApplicationController
+  include MilestoneActions
+
   before_action :module_enabled
-  before_action :milestone, only: [:edit, :update, :destroy, :show, :sort_issues, :sort_merge_requests]
+  before_action :milestone, only: [:edit, :update, :destroy, :show, :sort_issues, :sort_merge_requests, :merge_requests, :participants, :labels]
 
   # Allow read any milestone
   before_action :authorize_read_milestone!

app/helpers/milestones_helper.rb

@@ -115,4 +115,28 @@ module MilestonesHelper
       end
     end
   end
+
+  def milestone_merge_request_path(milestone)
+    if @project
+      merge_requests_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
+    elsif @group
+      merge_requests_group_milestone_path(@group, milestone.safe_title, title: milestone.title, format: :json)
+    end
+  end
+
+  def milestone_participants_path(milestone)
+    if @project
+      participants_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
+    elsif @group
+      participants_group_milestone_path(@group, milestone.safe_title, title: milestone.title, format: :json)
+    end
+  end
+
+  def milestone_labels_path(milestone)
+    if @project
+      labels_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
+    elsif @group
+      labels_group_milestone_path(@group, milestone.safe_title, title: milestone.title, format: :json)
+    end
+  end
 end

app/views/shared/milestones/_tabs.html.haml

@@ -8,20 +8,20 @@
           Issues
           %span.badge= milestone.issues_visible_to_user(current_user).size
       %li
-        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-show' => '.tab-merge-requests-buttons' do
+        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_path(milestone) do
           Merge Requests
           %span.badge= milestone.merge_requests.size
     - else
       %li.active
-        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-show' => '.tab-merge-requests-buttons' do
+        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_path(milestone) do
           Merge Requests
           %span.badge= milestone.merge_requests.size
     %li
-      = link_to '#tab-participants', 'data-toggle' => 'tab' do
+      = link_to '#tab-participants', 'data-toggle' => 'tab', 'data-endpoint': milestone_participants_path(milestone) do
         Participants
         %span.badge= milestone.participants.count
     %li
-      = link_to '#tab-labels', 'data-toggle' => 'tab' do
+      = link_to '#tab-labels', 'data-toggle' => 'tab', 'data-endpoint': milestone_labels_path(milestone) do
         Labels
         %span.badge= milestone.labels.count
 
@@ -33,11 +33,19 @@
     .tab-pane.active#tab-issues
       = render 'shared/milestones/issues_tab', issues: milestone.issues_visible_to_user(current_user).include_associations, show_project_name: show_project_name, show_full_project_name: show_full_project_name
     .tab-pane#tab-merge-requests
-      = render 'shared/milestones/merge_requests_tab', merge_requests: milestone.merge_requests, show_project_name: show_project_name, show_full_project_name: show_full_project_name
+      -# loaded async
+      .text-center.prepend-top-default
+        = icon('spin spinner 2x')
   - else
     .tab-pane.active#tab-merge-requests
-      = render 'shared/milestones/merge_requests_tab', merge_requests: milestone.merge_requests, show_project_name: show_project_name, show_full_project_name: show_full_project_name
+      -# loaded async
+      .text-center.prepend-top-default
+        = icon('spin spinner 2x')
   .tab-pane#tab-participants
-    = render 'shared/milestones/participants_tab', users: milestone.participants
+    -# loaded async
+    .text-center.prepend-top-default
+      = icon('spin spinner 2x')
   .tab-pane#tab-labels
-    = render 'shared/milestones/labels_tab', labels: milestone.labels
+    -# loaded async
+    .text-center.prepend-top-default
+      = icon('spin spinner 2x')

config/routes/group.rb

@@ -10,7 +10,13 @@ scope(path: 'groups/*group_id',
   end
 
   resource :avatar, only: [:destroy]
-  resources :milestones, constraints: { id: /[^\/]+/ }, only: [:index, :show, :update, :new, :create]
+  resources :milestones, constraints: { id: /[^\/]+/ }, only: [:index, :show, :update, :new, :create] do
+    member do
+      get :merge_requests
+      get :participants
+      get :labels
+    end
+  end
 
   resources :labels, except: [:show] do
     post :toggle_subscription, on: :member

config/routes/project.rb

@@ -205,6 +205,9 @@ constraints(ProjectUrlConstrainer.new) do
         member do
           put :sort_issues
           put :sort_merge_requests
+          get :merge_requests
+          get :participants
+          get :labels
         end
       end