Commit 72e41096 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Merge branch 'rs-persist-tab-selection' into 'master'

Persist current merge request tab selection via URL

Closes internal https://dev.gitlab.org/gitlab/gitlabhq/issues/2350

See merge request !728
parents 72f18898 5c52eaa9
...@@ -3,15 +3,30 @@ ...@@ -3,15 +3,30 @@
#= require task_list #= require task_list
class @MergeRequest class @MergeRequest
# Initialize MergeRequest behavior
#
# Options:
# action - String, current controller action
# diffs_loaded - Boolean, have diffs been pre-rendered server-side?
# (default: true if `action` is 'diffs', otherwise false)
# commits_loaded - Boolean, have commits been pre-rendered server-side?
# (default: false)
#
# check_enable - Boolean, whether to check automerge status
# url_to_automerge_check - String, URL to use to check automerge status
# current_status - String, current automerge status
# ci_enable - Boolean, whether a CI service is enabled
# url_to_ci_check - String, URL to use to check CI status
#
constructor: (@opts) -> constructor: (@opts) ->
@initContextWidget() @initContextWidget()
this.$el = $('.merge-request') this.$el = $('.merge-request')
@diffs_loaded = if @opts.action == 'diffs' then true else false
@commits_loaded = false
this.activateTab(@opts.action) @diffs_loaded = @opts.diffs_loaded or @opts.action == 'diffs'
@commits_loaded = @opts.commits_loaded or false
this.bindEvents() this.bindEvents()
this.activateTabFromHash()
this.initMergeWidget() this.initMergeWidget()
this.$('.show-all-commits').on 'click', => this.$('.show-all-commits').on 'click', =>
...@@ -65,8 +80,21 @@ class @MergeRequest ...@@ -65,8 +80,21 @@ class @MergeRequest
, 'json' , 'json'
bindEvents: -> bindEvents: ->
this.$('.merge-request-tabs').on 'click', 'li', (event) => this.$('.merge-request-tabs a[data-toggle="tab"]').on 'shown.bs.tab', (e) =>
this.activateTab($(event.currentTarget).data('action')) $target = $(e.target)
# Nothing else to be done if we're on the first tab
return if $target.data('action') == 'notes'
# Persist current tab selection via URL
href = $target.attr('href')
if href.substr(0,1) == '#'
location.replace("#!#{href.substr(1)}")
# Lazy-load diffs
if $target.data('action') == 'diffs'
this.loadDiff() unless @diffs_loaded
$('.diff-header').trigger("sticky_kit:recalc")
this.$('.accept_merge_request').on 'click', -> this.$('.accept_merge_request').on 'click', ->
$('.automerge_widget.can_be_merged').hide() $('.automerge_widget.can_be_merged').hide()
...@@ -84,21 +112,27 @@ class @MergeRequest ...@@ -84,21 +112,27 @@ class @MergeRequest
this.$('.remove_source_branch_in_progress').hide() this.$('.remove_source_branch_in_progress').hide()
this.$('.remove_source_branch_widget.failed').show() this.$('.remove_source_branch_widget.failed').show()
activateTab: (action) -> # Activates a tab section based on the `#!` URL hash
this.$('.merge-request-tabs li').removeClass 'active' #
this.$('.tab-content').hide() # If no hash value is present (i.e., on the initial page load), the first tab
switch action # is selected by default.
when 'diffs' #
this.$('.merge-request-tabs .diffs-tab').addClass 'active' # ... unless the current controller action is `diffs`, in which case that tab
this.loadDiff() unless @diffs_loaded # is selected instead. Fun, right?
this.$('.diffs').show() #
$(".diff-header").trigger("sticky_kit:recalc") # Note: We use a `#!` instead of a standard URL hash for two reasons:
when 'commits' #
this.$('.merge-request-tabs .commits-tab').addClass 'active' # 1. Prevents the hash acting like an anchor and scrolling the page.
this.$('.commits').show() # 2. Prevents mutating browser history.
else activateTabFromHash: ->
this.$('.merge-request-tabs .notes-tab').addClass 'active' # Correct the hash if we came here directly via the `/diffs` path
this.$('.notes').show() if location.hash == '' and @opts.action == 'diffs'
location.replace('#!diffs')
if location.hash == ''
this.$('.merge-request-tabs a[data-toggle="tab"]:first').tab('show')
else if location.hash.substr(0,2) == '#!'
this.$(".merge-request-tabs a[href='##{location.hash.substr(2)}']").tab("show")
showState: (state) -> showState: (state) ->
$('.automerge_widget').hide() $('.automerge_widget').hide()
...@@ -127,7 +161,7 @@ class @MergeRequest ...@@ -127,7 +161,7 @@ class @MergeRequest
loadDiff: (event) -> loadDiff: (event) ->
$.ajax $.ajax
type: 'GET' type: 'GET'
url: this.$('.merge-request-tabs .diffs-tab a').attr('href') + ".json" url: this.$('.merge-request-tabs .diffs-tab a').data('source') + ".json"
beforeSend: => beforeSend: =>
this.$('.mr-loading-status .loading').show() this.$('.mr-loading-status .loading').show()
complete: => complete: =>
......
...@@ -19,20 +19,21 @@ ...@@ -19,20 +19,21 @@
.mr-compare.merge-request .mr-compare.merge-request
%ul.nav.nav-tabs.merge-request-tabs %ul.nav.nav-tabs.merge-request-tabs
%li.commits-tab{data: {action: 'commits', toggle: 'tab'}} %li.commits-tab
= link_to url_for(params) do = link_to '#commits', data: {action: 'commits', toggle: 'tab'} do
%i.fa.fa-history = icon('history')
Commits Commits
%span.badge= @commits.size %span.badge= @commits.size
%li.diffs-tab{data: {action: 'diffs', toggle: 'tab'}} %li.diffs-tab
= link_to url_for(params) do = link_to '#diffs', data: {action: 'diffs', toggle: 'tab'} do
%i.fa.fa-list-alt = icon('list-alt')
Changes Changes
%span.badge= @diffs.size %span.badge= @diffs.size
.commits.tab-content .tab-content
#commits.commits.tab-pane
= render "projects/commits/commits", project: @project = render "projects/commits/commits", project: @project
.diffs.tab-content #diffs.diffs.tab-pane
- if @diffs.present? - if @diffs.present?
= render "projects/diffs/diffs", diffs: @diffs, project: @project = render "projects/diffs/diffs", diffs: @diffs, project: @project
- elsif @commits.size > MergeRequestDiff::COMMITS_SAFE_SIZE - elsif @commits.size > MergeRequestDiff::COMMITS_SAFE_SIZE
...@@ -55,6 +56,8 @@ ...@@ -55,6 +56,8 @@
:javascript :javascript
var merge_request var merge_request
merge_request = new MergeRequest({ merge_request = new MergeRequest({
action: 'commits' action: 'diffs',
diffs_loaded: true,
commits_loaded: true
}); });
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
%span.pull-right %span.pull-right
.btn-group .btn-group
%a.btn.dropdown-toggle{ data: {toggle: :dropdown} } %a.btn.dropdown-toggle{ data: {toggle: :dropdown} }
%i.fa.fa-download = icon('download')
Download as Download as
%span.caret %span.caret
%ul.dropdown-menu %ul.dropdown-menu
...@@ -37,27 +37,28 @@ ...@@ -37,27 +37,28 @@
- if @commits.present? - if @commits.present?
%ul.nav.nav-tabs.merge-request-tabs %ul.nav.nav-tabs.merge-request-tabs
%li.notes-tab{data: {action: 'notes', toggle: 'tab'}} %li.notes-tab
= link_to merge_request_path(@merge_request) do = link_to '#notes', data: {action: 'notes', toggle: 'tab'} do
%i.fa.fa-comments = icon('comments')
Discussion Discussion
%span.badge= @merge_request.mr_and_commit_notes.user.count %span.badge= @merge_request.mr_and_commit_notes.user.count
%li.commits-tab{data: {action: 'commits', toggle: 'tab'}} %li.commits-tab
= link_to merge_request_path(@merge_request), title: 'Commits' do = link_to '#commits', data: {action: 'commits', toggle: 'tab'} do
%i.fa.fa-history = icon('history')
Commits Commits
%span.badge= @commits.size %span.badge= @commits.size
%li.diffs-tab{data: {action: 'diffs', toggle: 'tab'}} %li.diffs-tab
= link_to diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request) do = link_to '#diffs', data: {source: diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), action: 'diffs', toggle: 'tab'} do
%i.fa.fa-list-alt = icon('list-alt')
Changes Changes
%span.badge= @merge_request.diffs.size %span.badge= @merge_request.diffs.size
.notes.tab-content.voting_notes#notes{ class: (controller.action_name == 'show') ? "" : "hide" } .tab-content
#notes.notes.tab-pane.voting_notes
= render "projects/merge_requests/discussion" = render "projects/merge_requests/discussion"
.commits.tab-content #commits.commits.tab-pane
= render "projects/merge_requests/show/commits" = render "projects/merge_requests/show/commits"
.diffs.tab-content #diffs.diffs.tab-pane
- if current_page?(action: 'diffs') - if current_page?(action: 'diffs')
= render "projects/merge_requests/show/diffs" = render "projects/merge_requests/show/diffs"
......
...@@ -113,7 +113,10 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps ...@@ -113,7 +113,10 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
end end
step 'I click on the Changes tab via Javascript' do step 'I click on the Changes tab via Javascript' do
find('.diffs-tab').click within '.merge-request-tabs' do
click_link 'Changes'
end
sleep 2 sleep 2
end end
......
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