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 @@
Milestone.sortIssues = function(data) {
var sort_issues_url;
sort_issues_url = location.href + "/sort_issues";
sort_issues_url = location.pathname + "/sort_issues";
return $.ajax({
type: "PUT",
url: sort_issues_url,
......@@ -38,7 +38,7 @@
Milestone.sortMergeRequests = function(data) {
var sort_mr_url;
sort_mr_url = location.href + "/sort_merge_requests";
sort_mr_url = location.pathname + "/sort_merge_requests";
return $.ajax({
type: "PUT",
url: sort_mr_url,
......@@ -83,6 +83,12 @@
function Milestone() {
this.bindIssuesSorting();
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() {
......@@ -100,12 +106,9 @@
Milestone.prototype.bindTabsSwitching = function() {
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'));
}
location.hash = $target.attr('href');
this.loadTab($target);
});
};
......@@ -168,16 +171,33 @@
});
};
Milestone.prototype.loadMergeRequests = function(elId, url) {
return $.ajax({
url,
Milestone.prototype.loadInitialTab = function() {
const $target = $(`.js-milestone-tabs a[href="${location.hash}"]`);
if ($target.length) {
$target.tab('show');
}
};
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 merge requests'))
.fail(() => new Flash('Error loading milestone tab'))
.done((data) => {
$(elId).html(data.html);
$(tabElId).html(data.html);
$target.addClass('is-loaded');
if (tabElId === '#tab-merge-requests') {
this.bindMergeRequestSorting();
}
});
}
};
return Milestone;
......
......@@ -116,7 +116,7 @@ module MilestonesHelper
end
end
def milestone_merge_request_path(milestone)
def milestone_merge_request_tab_path(milestone)
if @project
merge_requests_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
elsif @group
......@@ -124,7 +124,7 @@ module MilestonesHelper
end
end
def milestone_participants_path(milestone)
def milestone_participants_tab_path(milestone)
if @project
participants_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
elsif @group
......@@ -132,7 +132,7 @@ module MilestonesHelper
end
end
def milestone_labels_path(milestone)
def milestone_labels_tab_path(milestone)
if @project
labels_namespace_project_milestone_path(@project.namespace, @project, milestone, format: :json)
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
.fade-left= icon('angle-left')
.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)
%li.active
= link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do
Issues
%span.badge= milestone.issues_visible_to_user(current_user).size
%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
%span.badge= milestone.merge_requests.size
- else
%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
%span.badge= milestone.merge_requests.size
%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
%span.badge= milestone.participants.count
%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
%span.badge= milestone.labels.count
......@@ -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
.tab-pane#tab-merge-requests
-# loaded async
.text-center.prepend-top-default
= icon('spin spinner 2x')
= render "shared/milestones/tab_loading"
- else
.tab-pane.active#tab-merge-requests
-# loaded async
.text-center.prepend-top-default
= icon('spin spinner 2x')
= render "shared/milestones/tab_loading"
.tab-pane#tab-participants
-# loaded async
.text-center.prepend-top-default
= icon('spin spinner 2x')
= render "shared/milestones/tab_loading"
.tab-pane#tab-labels
-# loaded async
.text-center.prepend-top-default
= icon('spin spinner 2x')
= render "shared/milestones/tab_loading"
---
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