Adds a feature flag to the diff fuzzy file finder

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/57403

app/assets/javascripts/diffs/components/tree_list.vue

@@ -13,18 +13,43 @@ export default {
     Icon,
     FileRow,
   },
+  data() {
+    return {
+      search: '',
+    };
+  },
   computed: {
     ...mapState('diffs', ['tree', 'renderTreeList']),
     ...mapGetters('diffs', ['allBlobs']),
     filteredTreeList() {
-      return this.renderTreeList ? this.tree : this.allBlobs;
+      const search = this.search.toLowerCase().trim();
+
+      if (search === '' || this.$options.fuzzyFileFinderEnabled)
+        return this.renderTreeList ? this.tree : this.allBlobs;
+
+      return this.allBlobs.reduce((acc, folder) => {
+        const tree = folder.tree.filter(f => f.path.toLowerCase().indexOf(search) >= 0);
+
+        if (tree.length) {
+          return acc.concat({
+            ...folder,
+            tree,
+          });
+        }
+
+        return acc;
+      }, []);
     },
   },
   methods: {
     ...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile', 'toggleFileFinder']),
+    clearSearch() {
+      this.search = '';
+    },
   },
   shortcutKeyCharacter: `${/Mac/i.test(navigator.userAgent) ? '⌘' : 'Ctrl'}+P`,
   FileRowStats,
+  diffTreeFiltering: gon.features && gon.features.diffTreeFiltering,
 };
 </script>
 
@@ -33,17 +58,36 @@ export default {
     <div class="append-bottom-8 position-relative tree-list-search d-flex">
       <div class="flex-fill d-flex">
         <icon name="search" class="position-absolute tree-list-icon" />
-        <button
-          type="button"
-          class="form-control text-left text-secondary"
-          @click="toggleFileFinder(true)"
-        >
-          {{ s__('MergeRequest|Search files') }}
-        </button>
-        <span
-          class="position-absolute text-secondary diff-tree-search-shortcut"
-          v-html="$options.shortcutKeyCharacter"
-        ></span>
+        <template v-if="$options.diffTreeFiltering">
+          <input
+            v-model="search"
+            :placeholder="s__('MergeRequest|Filter files')"
+            type="search"
+            class="form-control"
+          />
+          <button
+            v-show="search"
+            :aria-label="__('Clear search')"
+            type="button"
+            class="position-absolute bg-transparent tree-list-icon tree-list-clear-icon border-0 p-0"
+            @click="clearSearch"
+          >
+            <icon name="close" />
+          </button>
+        </template>
+        <template v-else>
+          <button
+            type="button"
+            class="form-control text-left text-secondary"
+            @click="toggleFileFinder(true)"
+          >
+            {{ s__('MergeRequest|Search files') }}
+          </button>
+          <span
+            class="position-absolute text-secondary diff-tree-search-shortcut"
+            v-html="$options.shortcutKeyCharacter"
+          ></span>
+        </template>
       </div>
     </div>
     <div :class="{ 'pt-0 tree-list-blobs': !renderTreeList }" class="tree-list-scroll">
@@ -79,7 +123,7 @@ export default {
   pointer-events: none;
 }
 
-.tree-list-icon {
+.tree-list-icon:not(button) {
   pointer-events: none;
 }
 </style>

app/controllers/projects/merge_requests_controller.rb

@@ -16,6 +16,10 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
   before_action :authenticate_user!, only: [:assign_related_issues]
   before_action :check_user_can_push_to_source_branch!, only: [:rebase]
 
+  before_action only: [:show] do
+    push_frontend_feature_flag(:diff_tree_filtering, default_enabled: true)
+  end
+
   def index
     @merge_requests = @issuables
 

locale/gitlab.pot

@@ -4494,6 +4494,9 @@ msgstr ""
 msgid "MergeRequest| %{paragraphStart}changed the description %{descriptionChangedTimes} times %{timeDifferenceMinutes}%{paragraphEnd}"
 msgstr ""
 
+msgid "MergeRequest|Filter files"
+msgstr ""
+
 msgid "MergeRequest|No files found"
 msgstr ""