Merge branch 'diff-changed-files-dropdown' into 'master'

Moved changed files into a dropdown

Closes #29778

See merge request !13128

7 files changed, 122 insertions, 6 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index a17680794cc..7d11cd0b6b2 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -115,7 +115,7 @@ GitLabDropdownFilter = (function() {
     } else {
       elements = this.options.elements();
       if (search_text) {
-        return elements.each(function() {
+        elements.each(function() {
           var $el, matches;
           $el = $(this);
           matches = fuzzaldrinPlus.match($el.text().trim(), search_text);
@@ -128,8 +128,10 @@ GitLabDropdownFilter = (function() {
           }
         });
       } else {
-        return elements.show().removeClass('option-hidden');
+        elements.show().removeClass('option-hidden');
       }
+
+      elements.parent().find('.dropdown-menu-empty-link').toggleClass('hidden', elements.is(':visible'));
     }
   };
 
@@ -732,9 +734,15 @@ GitLabDropdown = (function() {
   GitLabDropdown.prototype.focusTextInput = function(triggerFocus = false) {
     if (this.options.filterable) {
       this.dropdown.one('transitionend', () => {
+        const initialScrollTop = $(window).scrollTop();
+
         if (this.dropdown.is('.open')) {
           this.filterInput.focus();
         }
+
+        if ($(window).scrollTop() < initialScrollTop) {
+          $(window).scrollTop(initialScrollTop);
+        }
       });
 
       if (triggerFocus) {
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 122ec138c59..e916724b666 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -86,8 +86,9 @@
       // This is required to handle non-unicode characters in hash
       hash = decodeURIComponent(hash);
 
-      var fixedTabs = document.querySelector('.js-tabs-affix');
-      var fixedNav = document.querySelector('.navbar-gitlab');
+      const fixedTabs = document.querySelector('.js-tabs-affix');
+      const fixedDiffStats = document.querySelector('.js-diff-files-changed.is-stuck');
+      const fixedNav = document.querySelector('.navbar-gitlab');
 
       var adjustment = 0;
       if (fixedNav) adjustment -= fixedNav.offsetHeight;
@@ -104,6 +105,11 @@
         if (fixedTabs) {
           adjustment -= fixedTabs.offsetHeight;
         }
+
+        if (fixedDiffStats) {
+          adjustment -= fixedDiffStats.offsetHeight;
+        }
+
         window.scrollBy(0, adjustment);
       }
     };
diff --git a/app/assets/javascripts/lib/utils/sticky.js b/app/assets/javascripts/lib/utils/sticky.js
new file mode 100644
index 00000000000..43a808b6ab3
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/sticky.js
@@ -0,0 +1,23 @@
+export const isSticky = (el, scrollY, stickyTop) => {
+  const top = el.offsetTop - scrollY;
+
+  if (top === stickyTop) {
+    el.classList.add('is-stuck');
+  } else {
+    el.classList.remove('is-stuck');
+  }
+};
+
+export default (el) => {
+  if (!el) return;
+
+  const computedStyle = window.getComputedStyle(el);
+
+  if (!/sticky/.test(computedStyle.position)) return;
+
+  const stickyTop = parseInt(computedStyle.top, 10);
+
+  document.addEventListener('scroll', () => isSticky(el, window.scrollY, stickyTop), {
+    passive: true,
+  });
+};
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 7840f05a8ae..4ffd71d9de5 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -7,6 +7,7 @@ import Cookies from 'js-cookie';
 import './breakpoints';
 import './flash';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
+import stickyMonitor from './lib/utils/sticky';
 
 /* eslint-disable max-len */
 // MergeRequestTabs
@@ -266,6 +267,10 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
           const $container = $('#diffs');
           $container.html(data.html);
 
+          this.initChangesDropdown();
+
+          stickyMonitor(document.querySelector('.js-diff-files-changed'));
+
           if (typeof gl.diffNotesCompileComponents !== 'undefined') {
             gl.diffNotesCompileComponents();
           }
@@ -314,6 +319,13 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
       });
     }
 
+    initChangesDropdown() {
+      $('.js-diff-stats-dropdown').glDropdown({
+        filterable: true,
+        remoteFilter: false,
+      });
+    }
+
     // Show or hide the loading spinner
     //
     // status - Boolean, true to show, false to hide
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 89dd99831e4..bd4bd541c3a 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -574,6 +574,7 @@
 
 .dropdown-input-field,
 .default-dropdown-input {
+  display: block;
   width: 100%;
   min-height: 30px;
   padding: 0 7px;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 398fd4444ea..da77346d8b2 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -395,12 +395,11 @@
   background-color: transparent;
   border: 0;
   color: $gl-link-color;
-  transition: color 0.1s linear;
+  font-weight: 600;
 
   &:hover,
   &:focus {
     outline: none;
-    text-decoration: underline;
     color: $gl-link-hover-color;
   }
 }
@@ -559,3 +558,68 @@
     outline: 0;
   }
 }
+
+.diff-files-changed {
+  .commit-stat-summary {
+    @include new-style-dropdown;
+    z-index: -1;
+
+    @media (min-width: $screen-sm-min) {
+      margin-left: -$gl-padding;
+      padding-left: $gl-padding;
+      background-color: $white-light;
+    }
+  }
+
+  @media (min-width: $screen-sm-min) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 84px;
+    background-color: $white-light;
+    z-index: 190;
+
+    + .files,
+    + .alert {
+      margin-top: 1px;
+    }
+
+    &:not(.is-stuck) .diff-stats-additions-deletions-collapsed {
+      display: none;
+    }
+
+    &.is-stuck {
+      padding-top: 0;
+      padding-bottom: 0;
+      border-bottom: 1px solid $white-dark;
+      transform: translateY(16px);
+
+      .diff-stats-additions-deletions-expanded,
+      .inline-parallel-buttons {
+        display: none;
+      }
+
+      + .files,
+      + .alert {
+        margin-top: 30px;
+      }
+    }
+  }
+}
+
+.diff-file-changes {
+  width: 450px;
+  z-index: 150;
+
+  @media (min-width: $screen-sm-min) {
+    left: $gl-padding;
+  }
+
+  a {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+.diff-file-changes-path {
+  @include str-truncated(78%);
+}
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 4693b2434c7..a4e19094508 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -691,8 +691,10 @@
 }
 
 .mr-version-controls {
+  position: relative;
   background: $gray-light;
   color: $gl-text-color;
+  z-index: 199;
 
   .mr-version-menus-container {
     display: -webkit-flex;