Commit 79c7188a authored by Phil Hughes's avatar Phil Hughes

Change the hash when changing tab

This allows the tab to be loaded by default when the page loads & the hash is present
parent 52d59a4e
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
Milestone.sortIssues = function(data) { Milestone.sortIssues = function(data) {
var sort_issues_url; var sort_issues_url;
sort_issues_url = location.href + "/sort_issues"; sort_issues_url = location.pathname + "/sort_issues";
return $.ajax({ return $.ajax({
type: "PUT", type: "PUT",
url: sort_issues_url, url: sort_issues_url,
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
Milestone.sortMergeRequests = function(data) { Milestone.sortMergeRequests = function(data) {
var sort_mr_url; var sort_mr_url;
sort_mr_url = location.href + "/sort_merge_requests"; sort_mr_url = location.pathname + "/sort_merge_requests";
return $.ajax({ return $.ajax({
type: "PUT", type: "PUT",
url: sort_mr_url, url: sort_mr_url,
...@@ -83,6 +83,12 @@ ...@@ -83,6 +83,12 @@
function Milestone() { function Milestone() {
this.bindIssuesSorting(); this.bindIssuesSorting();
this.bindTabsSwitching(); this.bindTabsSwitching();
this.loadInitialTab();
// Load merge request tab if it is active
// merge request tab is active based on different conditions in the backend
this.loadTab($('.js-milestone-tabs .active a'));
} }
Milestone.prototype.bindIssuesSorting = function() { Milestone.prototype.bindIssuesSorting = function() {
...@@ -100,12 +106,9 @@ ...@@ -100,12 +106,9 @@
Milestone.prototype.bindTabsSwitching = function() { Milestone.prototype.bindTabsSwitching = function() {
return $('a[data-toggle="tab"]').on('show.bs.tab', (e) => { return $('a[data-toggle="tab"]').on('show.bs.tab', (e) => {
const $target = $(e.target); const $target = $(e.target);
const endpoint = $target.data('endpoint');
if (endpoint && !$target.hasClass('is-loaded')) { location.hash = $target.attr('href');
this.loadMergeRequests($target.attr('href'), endpoint) this.loadTab($target);
.done(() => $target.addClass('is-loaded'));
}
}); });
}; };
...@@ -168,16 +171,33 @@ ...@@ -168,16 +171,33 @@
}); });
}; };
Milestone.prototype.loadMergeRequests = function(elId, url) { Milestone.prototype.loadInitialTab = function() {
return $.ajax({ const $target = $(`.js-milestone-tabs a[href="${location.hash}"]`);
url,
dataType: 'JSON', if ($target.length) {
}) $target.tab('show');
.fail(() => new Flash('Error loading merge requests')) }
.done((data) => { };
$(elId).html(data.html);
this.bindMergeRequestSorting(); Milestone.prototype.loadTab = function($target) {
}); const endpoint = $target.data('endpoint');
const tabElId = $target.attr('href');
if (endpoint && !$target.hasClass('is-loaded')) {
$.ajax({
url: endpoint,
dataType: 'JSON',
})
.fail(() => new Flash('Error loading milestone tab'))
.done((data) => {
$(tabElId).html(data.html);
$target.addClass('is-loaded');
if (tabElId === '#tab-merge-requests') {
this.bindMergeRequestSorting();
}
});
}
}; };
return Milestone; return Milestone;
......
...@@ -116,7 +116,7 @@ module MilestonesHelper ...@@ -116,7 +116,7 @@ module MilestonesHelper
end end
end end
def milestone_merge_request_path(milestone) def milestone_merge_request_tab_path(milestone)
if @project if @project
merge_requests_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json) merge_requests_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
elsif @group elsif @group
...@@ -124,7 +124,7 @@ module MilestonesHelper ...@@ -124,7 +124,7 @@ module MilestonesHelper
end end
end end
def milestone_participants_path(milestone) def milestone_participants_tab_path(milestone)
if @project if @project
participants_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json) participants_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
elsif @group elsif @group
...@@ -132,7 +132,7 @@ module MilestonesHelper ...@@ -132,7 +132,7 @@ module MilestonesHelper
end end
end end
def milestone_labels_path(milestone) def milestone_labels_tab_path(milestone)
if @project if @project
labels_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json) labels_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
elsif @group elsif @group
......
.text-center.prepend-top-default
= icon('spin spinner 2x', 'aria-hidden': 'true', 'aria-label': 'Loading tab content')
.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
.fade-left= icon('angle-left') .fade-left= icon('angle-left')
.fade-right= icon('angle-right') .fade-right= icon('angle-right')
%ul.nav-links.scrolling-tabs %ul.nav-links.scrolling-tabs.js-milestone-tabs
- if milestone.is_a?(GlobalMilestone) || can?(current_user, :read_issue, @project) - if milestone.is_a?(GlobalMilestone) || can?(current_user, :read_issue, @project)
%li.active %li.active
= link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do = link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do
Issues Issues
%span.badge= milestone.issues_visible_to_user(current_user).size %span.badge= milestone.issues_visible_to_user(current_user).size
%li %li
= link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_path(milestone) do = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
Merge Requests Merge Requests
%span.badge= milestone.merge_requests.size %span.badge= milestone.merge_requests.size
- else - else
%li.active %li.active
= link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_path(milestone) do = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
Merge Requests Merge Requests
%span.badge= milestone.merge_requests.size %span.badge= milestone.merge_requests.size
%li %li
= link_to '#tab-participants', 'data-toggle' => 'tab', 'data-endpoint': milestone_participants_path(milestone) do = link_to '#tab-participants', 'data-toggle' => 'tab', 'data-endpoint': milestone_participants_tab_path(milestone) do
Participants Participants
%span.badge= milestone.participants.count %span.badge= milestone.participants.count
%li %li
= link_to '#tab-labels', 'data-toggle' => 'tab', 'data-endpoint': milestone_labels_path(milestone) do = link_to '#tab-labels', 'data-toggle' => 'tab', 'data-endpoint': milestone_labels_tab_path(milestone) do
Labels Labels
%span.badge= milestone.labels.count %span.badge= milestone.labels.count
...@@ -34,18 +34,14 @@ ...@@ -34,18 +34,14 @@
= 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 = 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 .tab-pane#tab-merge-requests
-# loaded async -# loaded async
.text-center.prepend-top-default = render "shared/milestones/tab_loading"
= icon('spin spinner 2x')
- else - else
.tab-pane.active#tab-merge-requests .tab-pane.active#tab-merge-requests
-# loaded async -# loaded async
.text-center.prepend-top-default = render "shared/milestones/tab_loading"
= icon('spin spinner 2x')
.tab-pane#tab-participants .tab-pane#tab-participants
-# loaded async -# loaded async
.text-center.prepend-top-default = render "shared/milestones/tab_loading"
= icon('spin spinner 2x')
.tab-pane#tab-labels .tab-pane#tab-labels
-# loaded async -# loaded async
.text-center.prepend-top-default = render "shared/milestones/tab_loading"
= icon('spin spinner 2x')
---
title: Load milestone tabs asynchronously to increase initial load performance
merge_request:
author:
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment