From 666409f377f3aef900738c2d4c9d37fc12820ea5 Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Wed, 24 Mar 2021 18:50:26 -0700
Subject: [PATCH 1/3] Use search param in refs call to filter revisions

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/324612
---
 .../compare/components/revision_dropdown.vue  | 48 +++++++++++--------
 .../324612-tag-not-visible-compare-page.yml   |  5 ++
 .../components/revision_dropdown_spec.js      | 30 +++++++++++-
 3 files changed, 62 insertions(+), 21 deletions(-)
 create mode 100644 changelogs/unreleased/324612-tag-not-visible-compare-page.yml

diff --git a/app/assets/javascripts/projects/compare/components/revision_dropdown.vue b/app/assets/javascripts/projects/compare/components/revision_dropdown.vue
index a175af2f32e4b2..e18f181377b176 100644
--- a/app/assets/javascripts/projects/compare/components/revision_dropdown.vue
+++ b/app/assets/javascripts/projects/compare/components/revision_dropdown.vue
@@ -1,10 +1,12 @@
 <script>
 import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlDropdownSectionHeader } from '@gitlab/ui';
+import { debounce } from 'lodash';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
 
-const emptyDropdownText = s__('CompareRevisions|Select branch/tag');
+const EMPTY_DROPDOWN_TEXT = s__('CompareRevisions|Select branch/tag');
+const SEARCH_DEBOUNCE_MS = 300;
 
 export default {
   components: {
@@ -38,19 +40,11 @@ export default {
     };
   },
   computed: {
-    filteredBranches() {
-      return this.branches.filter((branch) =>
-        branch.toLowerCase().includes(this.searchTerm.toLowerCase()),
-      );
+    hasBranches() {
+      return this.branches?.length;
     },
-    hasFilteredBranches() {
-      return this.filteredBranches.length;
-    },
-    filteredTags() {
-      return this.tags.filter((tag) => tag.toLowerCase().includes(this.searchTerm.toLowerCase()));
-    },
-    hasFilteredTags() {
-      return this.filteredTags.length;
+    hasTags() {
+      return this.tags?.length;
     },
   },
   watch: {
@@ -59,13 +53,27 @@ export default {
         this.fetchBranchesAndTags(true);
       }
     },
+    searchTerm: debounce(function debounceSearch() {
+      this.searchBranchesAndTags();
+    }, SEARCH_DEBOUNCE_MS),
   },
   mounted() {
     this.fetchBranchesAndTags();
   },
   methods: {
+    searchBranchesAndTags() {
+      return axios
+        .get(this.refsProjectPath, {
+          params: {
+            search: this.searchTerm,
+          },
+        })
+        .then(({ data }) => {
+          this.branches = data.Branches || [];
+          this.tags = data.Tags || [];
+        });
+    },
     fetchBranchesAndTags(reset = false) {
-      const endpoint = this.refsProjectPath;
       this.loading = true;
 
       if (reset) {
@@ -73,7 +81,7 @@ export default {
       }
 
       return axios
-        .get(endpoint)
+        .get(this.refsProjectPath)
         .then(({ data }) => {
           this.branches = data.Branches || [];
           this.tags = data.Tags || [];
@@ -90,7 +98,7 @@ export default {
         });
     },
     getDefaultBranch() {
-      return this.paramsBranch || emptyDropdownText;
+      return this.paramsBranch || EMPTY_DROPDOWN_TEXT;
     },
     onClick(revision) {
       this.selectedRevision = revision;
@@ -119,11 +127,11 @@ export default {
           @keyup.enter="onSearchEnter"
         />
       </template>
-      <gl-dropdown-section-header v-if="hasFilteredBranches">
+      <gl-dropdown-section-header v-if="hasBranches">
         {{ s__('CompareRevisions|Branches') }}
       </gl-dropdown-section-header>
       <gl-dropdown-item
-        v-for="(branch, index) in filteredBranches"
+        v-for="(branch, index) in branches"
         :key="`branch${index}`"
         is-check-item
         :is-checked="selectedRevision === branch"
@@ -131,11 +139,11 @@ export default {
       >
         {{ branch }}
       </gl-dropdown-item>
-      <gl-dropdown-section-header v-if="hasFilteredTags">
+      <gl-dropdown-section-header v-if="hasTags">
         {{ s__('CompareRevisions|Tags') }}
       </gl-dropdown-section-header>
       <gl-dropdown-item
-        v-for="(tag, index) in filteredTags"
+        v-for="(tag, index) in tags"
         :key="`tag${index}`"
         is-check-item
         :is-checked="selectedRevision === tag"
diff --git a/changelogs/unreleased/324612-tag-not-visible-compare-page.yml b/changelogs/unreleased/324612-tag-not-visible-compare-page.yml
new file mode 100644
index 00000000000000..fe390607661282
--- /dev/null
+++ b/changelogs/unreleased/324612-tag-not-visible-compare-page.yml
@@ -0,0 +1,5 @@
+---
+title: Use search param in refs call to filter revisions
+merge_request: 57442
+author:
+type: fixed
diff --git a/spec/frontend/projects/compare/components/revision_dropdown_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
index 69d3167c99c53a..03b0172d892268 100644
--- a/spec/frontend/projects/compare/components/revision_dropdown_spec.js
+++ b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
@@ -1,4 +1,4 @@
-import { GlDropdown } from '@gitlab/ui';
+import { GlDropdown, GlSearchBoxByType } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import createFlash from '~/flash';
@@ -23,6 +23,10 @@ describe('RevisionDropdown component', () => {
         ...defaultProps,
         ...props,
       },
+      stubs: {
+        GlDropdown,
+        GlSearchBoxByType,
+      },
     });
   };
 
@@ -36,6 +40,7 @@ describe('RevisionDropdown component', () => {
   });
 
   const findGlDropdown = () => wrapper.find(GlDropdown);
+  const findSearchBox = () => wrapper.find(GlSearchBoxByType);
 
   it('sets hidden input', () => {
     createComponent();
@@ -85,6 +90,29 @@ describe('RevisionDropdown component', () => {
     expect(axios.get).toHaveBeenLastCalledWith(newRefsProjectPath);
   });
 
+  it('makes request with search param when filtering via search', async () => {
+    jest.spyOn(axios, 'get').mockResolvedValue({
+      data: {
+        Branches: [],
+        Tags: [],
+      },
+    });
+
+    const mockSearchTerm = 'foobar';
+    createComponent();
+    findSearchBox().vm.$emit('input', mockSearchTerm);
+    await axios.waitForAll();
+
+    expect(axios.get).toHaveBeenCalledWith(
+      defaultProps.refsProjectPath,
+      expect.objectContaining({
+        params: {
+          search: mockSearchTerm,
+        },
+      }),
+    );
+  });
+
   describe('GlDropdown component', () => {
     it('renders props', () => {
       createComponent();
-- 
GitLab


From 31814c18203f846662d320cb268d03eb5e80006d Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Mon, 29 Mar 2021 16:31:48 -0700
Subject: [PATCH 2/3] Address reviewer's comment

- casting
- add catch
- remove unnecessary interpolation
---
 .../compare/components/revision_dropdown.vue  | 19 +++++++++++++------
 locale/gitlab.pot                             |  3 +++
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/projects/compare/components/revision_dropdown.vue b/app/assets/javascripts/projects/compare/components/revision_dropdown.vue
index e18f181377b176..d0b69344c129bd 100644
--- a/app/assets/javascripts/projects/compare/components/revision_dropdown.vue
+++ b/app/assets/javascripts/projects/compare/components/revision_dropdown.vue
@@ -41,10 +41,10 @@ export default {
   },
   computed: {
     hasBranches() {
-      return this.branches?.length;
+      return Boolean(this.branches?.length);
     },
     hasTags() {
-      return this.tags?.length;
+      return Boolean(this.tags?.length);
     },
   },
   watch: {
@@ -71,6 +71,13 @@ export default {
         .then(({ data }) => {
           this.branches = data.Branches || [];
           this.tags = data.Tags || [];
+        })
+        .catch(() => {
+          createFlash({
+            message: s__(
+              'CompareRevisions|There was an error while searching the branch/tag list. Please try again.',
+            ),
+          });
         });
     },
     fetchBranchesAndTags(reset = false) {
@@ -131,8 +138,8 @@ export default {
         {{ s__('CompareRevisions|Branches') }}
       </gl-dropdown-section-header>
       <gl-dropdown-item
-        v-for="(branch, index) in branches"
-        :key="`branch${index}`"
+        v-for="branch in branches"
+        :key="branch"
         is-check-item
         :is-checked="selectedRevision === branch"
         @click="onClick(branch)"
@@ -143,8 +150,8 @@ export default {
         {{ s__('CompareRevisions|Tags') }}
       </gl-dropdown-section-header>
       <gl-dropdown-item
-        v-for="(tag, index) in tags"
-        :key="`tag${index}`"
+        v-for="tag in tags"
+        :key="tag"
         is-check-item
         :is-checked="selectedRevision === tag"
         @click="onClick(tag)"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 5ac5e30310b41d..1358125b748910 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7829,6 +7829,9 @@ msgstr ""
 msgid "CompareRevisions|There was an error while loading the branch/tag list. Please try again."
 msgstr ""
 
+msgid "CompareRevisions|There was an error while searching the branch/tag list. Please try again."
+msgstr ""
+
 msgid "CompareRevisions|There was an error while updating the branch/tag list. Please try again."
 msgstr ""
 
-- 
GitLab


From f70a1b67cae9a3da8c1764f694465121cc94279a Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Tue, 30 Mar 2021 20:23:22 -0700
Subject: [PATCH 3/3] Add spec for search error

---
 .../components/revision_dropdown_spec.js      | 47 ++++++++++++-------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/spec/frontend/projects/compare/components/revision_dropdown_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
index 03b0172d892268..aab9607ceae754 100644
--- a/spec/frontend/projects/compare/components/revision_dropdown_spec.js
+++ b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
@@ -90,27 +90,38 @@ describe('RevisionDropdown component', () => {
     expect(axios.get).toHaveBeenLastCalledWith(newRefsProjectPath);
   });
 
-  it('makes request with search param when filtering via search', async () => {
-    jest.spyOn(axios, 'get').mockResolvedValue({
-      data: {
-        Branches: [],
-        Tags: [],
-      },
-    });
+  describe('search', () => {
+    it('shows flash message on error', async () => {
+      axiosMock.onGet('some/invalid/path').replyOnce(404);
 
-    const mockSearchTerm = 'foobar';
-    createComponent();
-    findSearchBox().vm.$emit('input', mockSearchTerm);
-    await axios.waitForAll();
+      createComponent();
+
+      await wrapper.vm.searchBranchesAndTags();
+      expect(createFlash).toHaveBeenCalled();
+    });
 
-    expect(axios.get).toHaveBeenCalledWith(
-      defaultProps.refsProjectPath,
-      expect.objectContaining({
-        params: {
-          search: mockSearchTerm,
+    it('makes request with search param', async () => {
+      jest.spyOn(axios, 'get').mockResolvedValue({
+        data: {
+          Branches: [],
+          Tags: [],
         },
-      }),
-    );
+      });
+
+      const mockSearchTerm = 'foobar';
+      createComponent();
+      findSearchBox().vm.$emit('input', mockSearchTerm);
+      await axios.waitForAll();
+
+      expect(axios.get).toHaveBeenCalledWith(
+        defaultProps.refsProjectPath,
+        expect.objectContaining({
+          params: {
+            search: mockSearchTerm,
+          },
+        }),
+      );
+    });
   });
 
   describe('GlDropdown component', () => {
-- 
GitLab