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

1 files changed, 9 insertions, 0 deletions

diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 7840f05a8ae..d3faa2d8e51 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/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