Moved changed files into a dropdown

This makes navigating through diff files quickly. Currently we just
toggle a list, which could be pretty big. This moves it into a dropdown
to make it much easier.

Also includes a filter bar to quickly search for certain
files/extensions.

Closes #29778

app/assets/javascripts/merge_request_tabs.js

@@ -266,6 +266,8 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
           const $container = $('#diffs');
           $container.html(data.html);
 
+          this.initChangesDropdown();
+
           if (typeof gl.diffNotesCompileComponents !== 'undefined') {
             gl.diffNotesCompileComponents();
           }
@@ -314,6 +316,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

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,17 @@
     outline: 0;
   }
 }
+
+.diff-file-changes {
+  width: 450px;
+  z-index: 150;
+
+  a {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+.diff-file-changes-path {
+  @include str-truncated(78%);
+}

app/helpers/diff_helper.rb

@@ -148,6 +148,24 @@ module DiffHelper
     options
   end
 
+  def diff_file_changed_icon(diff_file)
+    if diff_file.deleted_file? || diff_file.renamed_file?
+      "minus"
+    elsif diff_file.new_file?
+      "plus"
+    else
+      "adjust"
+    end
+  end
+
+  def diff_file_changed_icon_color(diff_file)
+    if diff_file.deleted_file?
+      "cred"
+    elsif diff_file.new_file?
+      "cgreen"
+    end
+  end
+
   private
 
   def diff_btn(title, name, selected)

app/views/projects/diffs/_stats.html.haml

-.js-toggle-container
-  .commit-stat-summary
-    Showing
-    %button.diff-stats-summary-toggler.js-toggle-button{ type: "button" }
-      %strong= pluralize(diff_files.size, "changed file")
-    with
-    %strong.cgreen #{diff_files.sum(&:added_lines)} additions
-    and
-    %strong.cred #{diff_files.sum(&:removed_lines)} deletions
-  .file-stats.js-toggle-content.hide
-    %ul
-      - diff_files.each do |diff_file|
-        - file_hash = hexdigest(diff_file.file_path)
-        %li
-          - if diff_file.deleted_file?
-            %span.deleted-file
-              %a{ href: "##{file_hash}" }
-                %i.fa.fa-minus
-                = diff_file.old_path
-          - elsif diff_file.renamed_file?
-            %span.renamed-file
-              %a{ href: "##{file_hash}" }
-                %i.fa.fa-minus
-                = diff_file.old_path
-                →
-                = diff_file.new_path
-          - elsif diff_file.new_file?
-            %span.new-file
-              %a{ href: "##{file_hash}" }
-                %i.fa.fa-plus
-                = diff_file.new_path
-          - else
-            %span.edit-file
-              %a{ href: "##{file_hash}" }
-                %i.fa.fa-adjust
-                = diff_file.new_path
+.commit-stat-summary.dropdown
+  Showing
+  %button.diff-stats-summary-toggler.js-diff-stats-dropdown{ type: "button", data: { toggle: "dropdown" } }<
+    = pluralize(diff_files.size, "changed file")
+    = icon("caret-down fw")
+  with
+  %strong.cgreen #{diff_files.sum(&:added_lines)} additions
+  and
+  %strong.cred #{diff_files.sum(&:removed_lines)} deletions
+  .dropdown-menu.diff-file-changes
+    = dropdown_filter("Search file")
+    .dropdown-content
+      %ul
+        - diff_files.each do |diff_file|
+          - file_hash = hexdigest(diff_file.file_path)
+          - added_lines = diff_file.added_lines
+          - removed_lines = diff_file.removed_lines
+          %li
+            %a{ href: "##{file_hash}", title: diff_file.new_path }
+              = icon("#{diff_file_changed_icon(diff_file)} fw", class: "#{diff_file_changed_icon_color(diff_file)} append-right-5")
+              %span.diff-file-changes-path= diff_file.new_path
+              .pull-right
+                %span.cgreen= "+#{added_lines}"
+                %span.cred= "-#{removed_lines}"

changelogs/unreleased/diff-changed-files-dropdown.yml

+---
+title: Moved diff changed files into a dropdown
+merge_request:
+author: