From 7bc3fce77d6717ccea1dc30e1eb0c2d48e181015 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 29 Jun 2022 09:37:54 +0100
Subject: [PATCH] Change file extension filtering in merge request file tree

This changes the filtering in the merge request file tree
to use micromatch library to allow for glob matching.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/343985
---
 .../diffs/components/tree_list.vue            | 18 +++++++++--
 locale/gitlab.pot                             |  2 +-
 package.json                                  |  1 +
 .../diffs/components/tree_list_spec.js        | 32 ++++++++++++++++++-
 4 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index 85e4199d1c1a38..ffbea854001271 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
+import micromatch from 'micromatch';
 import { s__, sprintf } from '~/locale';
 import FileTree from '~/vue_shared/components/file_tree.vue';
 import DiffFileRow from './diff_file_row.vue';
@@ -28,14 +29,24 @@ export default {
     ...mapState('diffs', ['tree', 'renderTreeList', 'currentDiffFileId', 'viewedDiffFileIds']),
     ...mapGetters('diffs', ['allBlobs']),
     filteredTreeList() {
-      const search = this.search.toLowerCase().trim();
+      let search = this.search.toLowerCase().trim();
 
       if (search === '') {
         return this.renderTreeList ? this.tree : this.allBlobs;
       }
 
+      const searchSplit = search.split(',').filter((t) => t);
+
+      if (searchSplit.length > 1) {
+        search = `(${searchSplit.map((s) => s.replace(/(^ +| +$)/g, '')).join('|')})`;
+      } else {
+        [search] = searchSplit;
+      }
+
       return this.allBlobs.reduce((acc, folder) => {
-        const tree = folder.tree.filter((f) => f.path.toLowerCase().indexOf(search) >= 0);
+        const tree = folder.tree.filter((f) =>
+          micromatch.contains(f.path, search, { nocase: true }),
+        );
 
         if (tree.length) {
           return acc.concat({
@@ -54,7 +65,7 @@ export default {
       this.search = '';
     },
   },
-  searchPlaceholder: sprintf(s__('MergeRequest|Search files (%{modifier_key}P)'), {
+  searchPlaceholder: sprintf(s__('MergeRequest|Search (e.g. *.vue) (%{modifier_key}P)'), {
     modifier_key: /Mac/i.test(navigator.userAgent) ? '⌘' : 'Ctrl+',
   }),
   DiffFileRow,
@@ -74,6 +85,7 @@ export default {
           type="search"
           name="diff-tree-search"
           class="form-control"
+          data-testid="diff-tree-search"
         />
         <button
           v-show="search"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 8541420acc3488..2afd781935bad3 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -24431,7 +24431,7 @@ msgstr ""
 msgid "MergeRequest|No files found"
 msgstr ""
 
-msgid "MergeRequest|Search files (%{modifier_key}P)"
+msgid "MergeRequest|Search (e.g. *.vue) (%{modifier_key}P)"
 msgstr ""
 
 msgid "Merged"
diff --git a/package.json b/package.json
index e33699b0402c63..3fb6f98b18a48d 100644
--- a/package.json
+++ b/package.json
@@ -140,6 +140,7 @@
     "marked": "^0.3.12",
     "mathjax": "3",
     "mermaid": "^9.1.1",
+    "micromatch": "^4.0.5",
     "minimatch": "^3.0.4",
     "monaco-editor": "^0.25.2",
     "monaco-editor-webpack-plugin": "^4.0.0",
diff --git a/spec/frontend/diffs/components/tree_list_spec.js b/spec/frontend/diffs/components/tree_list_spec.js
index 963805f4792f65..931a9562d3657d 100644
--- a/spec/frontend/diffs/components/tree_list_spec.js
+++ b/spec/frontend/diffs/components/tree_list_spec.js
@@ -50,6 +50,19 @@ describe('Diffs tree list component', () => {
         type: 'blob',
         parentPath: 'app',
       },
+      'test.rb': {
+        addedLines: 0,
+        changed: true,
+        deleted: false,
+        fileHash: 'test',
+        key: 'test.rb',
+        name: 'test.rb',
+        path: 'app/test.rb',
+        removedLines: 0,
+        tempFile: true,
+        type: 'blob',
+        parentPath: 'app',
+      },
       app: {
         key: 'app',
         path: 'app',
@@ -85,6 +98,23 @@ describe('Diffs tree list component', () => {
       createComponent();
     });
 
+    describe('search by file extension', () => {
+      it.each`
+        extension       | itemSize
+        ${'*.md'}       | ${0}
+        ${'*.js'}       | ${1}
+        ${'index.js'}   | ${1}
+        ${'app/*.js'}   | ${1}
+        ${'*.js, *.rb'} | ${2}
+      `('it returns $itemSize item for $extension', async ({ extension, itemSize }) => {
+        wrapper.find('[data-testid="diff-tree-search"]').setValue(extension);
+
+        await nextTick();
+
+        expect(getFileRows()).toHaveLength(itemSize);
+      });
+    });
+
     it('renders tree', () => {
       expect(getFileRows()).toHaveLength(2);
       expect(getFileRows().at(0).html()).toContain('index.js');
@@ -120,7 +150,7 @@ describe('Diffs tree list component', () => {
       wrapper.vm.$store.state.diffs.renderTreeList = false;
 
       await nextTick();
-      expect(getFileRows()).toHaveLength(1);
+      expect(getFileRows()).toHaveLength(2);
     });
 
     it('renders file paths when renderTreeList is false', async () => {
-- 
GitLab