Merge request tabs stick when scrolling page

Closes #20548

CHANGELOG

@@ -194,6 +194,7 @@ v 8.12.0
   - Remove prefixes from transition CSS property (ClemMakesApps)
   - Add Sentry logging to API calls
   - Add BroadcastMessage API
+  - Merge request tabs are fixed when scrolling page
   - Use 'git update-ref' for safer web commits !6130
   - Sort pipelines requested through the API
   - Automatically expand hidden discussions when accessed by a permalink !5585 (Mike Greiling)

app/assets/javascripts/merge_request_tabs.js

@@ -68,6 +68,7 @@
       this._location = location;
       this.bindEvents();
       this.activateTab(this.opts.action);
+      this.initAffix();
     }
 
     MergeRequestTabs.prototype.bindEvents = function() {
@@ -367,6 +368,43 @@
     // Only when sidebar is collapsed
     };
 
+    MergeRequestTabs.prototype.initAffix = function () {
+      // Screen space on small screens is usually very sparse
+      // So we dont affix the tabs on these
+      if (Breakpoints.get().getBreakpointSize() === 'xs') return;
+
+      var $tabs = $('.js-tabs-affix'),
+          tabsWidth = $tabs.outerWidth(),
+          $diffTabs = $('#diff-notes-app'),
+          offsetTop = $tabs.offset().top - ($('.navbar-fixed-top').height() + $('.layout-nav').height());
+
+      $tabs.off('affix.bs.affix affix-top.bs.affix')
+        .affix({
+          offset: offsetTop
+        }).on('affix.bs.affix', function () {
+          $tabs.css({
+            left: $tabs.offset().left,
+            width: tabsWidth
+          });
+          $diffTabs.css({
+            marginTop: $tabs.height()
+          });
+        }).on('affix-top.bs.affix', function () {
+          $tabs.css({
+            left: '',
+            width: ''
+          });
+          $diffTabs.css({
+            marginTop: ''
+          });
+        });
+
+      // Fix bug when reloading the page already scrolling
+      if ($tabs.hasClass('affix')) {
+        $tabs.trigger('affix.bs.affix');
+      }
+    };
+
     return MergeRequestTabs;
 
   })();

app/assets/stylesheets/pages/merge_requests.scss

@@ -421,3 +421,12 @@
     margin-bottom: 20px;
   }
 }
+
+.merge-request-tabs {
+  background-color: #fff;
+
+  &.affix {
+    top: 100px;
+    z-index: 9;
+  }
+}

app/views/projects/merge_requests/_show.html.haml

@@ -47,7 +47,7 @@
           = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
 
     - if @commits_count.nonzero?
-      %ul.merge-request-tabs.nav-links.no-top.no-bottom
+      %ul.merge-request-tabs.nav-links.no-top.no-bottom.js-tabs-affix
         %li.notes-tab
           = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do
             Discussion

spec/features/merge_requests/sticky_tabs_spec.rb

+require 'spec_helper'
+
+feature 'Merge request tabs', js: true, feature: true do
+  let(:user)          { create(:user) }
+  let(:project)       { create(:project, :public) }
+  let(:merge_request) { create(:merge_request_with_diffs, source_project: project, author: user, title: "Bug NS-04") }
+
+  before do
+    project.team << [user, :master]
+    login_as user
+    visit diffs_namespace_project_merge_request_path(project.namespace, project, merge_request)
+  end
+
+  it 'affixes to top of page when scrolling' do
+    page.execute_script "window.scrollBy(0,10000)"
+    expect(page).to have_selector('.js-tabs-affix.affix')
+  end
+
+  it 'removes affix when scrolling to top' do
+    page.execute_script "window.scrollBy(0,10000)"
+    expect(page).to have_selector('.js-tabs-affix.affix')
+
+    page.execute_script "window.scrollBy(0,-10000)"
+    expect(page).to have_selector('.js-tabs-affix.affix-top')
+  end
+end