Filter groups and projects dropdowns of search page on backendwinh-search-page-filters

3 files changed, 21 insertions, 13 deletions

diff --git a/app/assets/javascripts/pages/search/show/search.js b/app/assets/javascripts/pages/search/show/search.js
index d44195f6b72..dc621bc87c0 100644
--- a/app/assets/javascripts/pages/search/show/search.js
+++ b/app/assets/javascripts/pages/search/show/search.js
@@ -15,6 +15,7 @@ export default class Search {
     $groupDropdown.glDropdown({
       selectable: true,
       filterable: true,
+      filterRemote: true,
       fieldName: 'group_id',
       search: {
         fields: ['full_name'],
@@ -43,6 +44,7 @@ export default class Search {
     $projectDropdown.glDropdown({
       selectable: true,
       filterable: true,
+      filterRemote: true,
       fieldName: 'project_id',
       search: {
         fields: ['name'],
diff --git a/changelogs/unreleased/winh-search-page-filters.yml b/changelogs/unreleased/winh-search-page-filters.yml
new file mode 100644
index 00000000000..90c5cd8d818
--- /dev/null
+++ b/changelogs/unreleased/winh-search-page-filters.yml
@@ -0,0 +1,5 @@
+---
+title: Filter groups and projects dropdowns of search page on backend
+merge_request: 16336
+author:
+type: fixed
diff --git a/spec/javascripts/search_spec.js b/spec/javascripts/search_spec.js
index fccb5b45a82..38e94d45e55 100644
--- a/spec/javascripts/search_spec.js
+++ b/spec/javascripts/search_spec.js
@@ -2,37 +2,38 @@ import Api from '~/api';
 import Search from '~/pages/search/show/search';
 
 describe('Search', () => {
-  const FIXTURE = 'search/show.html.raw';
-  preloadFixtures(FIXTURE);
+  const fixturePath = 'search/show.html.raw';
+  const searchTerm = 'some search';
+  const fillDropdownInput = (dropdownSelector) => {
+    const dropdownElement = document.querySelector(dropdownSelector).parentNode;
+    const inputElement = dropdownElement.querySelector('.dropdown-input-field');
+    inputElement.value = searchTerm;
+    return inputElement;
+  };
+
+  preloadFixtures(fixturePath);
 
   beforeEach(() => {
-    loadFixtures(FIXTURE);
+    loadFixtures(fixturePath);
+    new Search(); // eslint-disable-line no-new
   });
 
   it('requests groups from backend when filtering', (done) => {
-    const searchTerm = 'some search';
-    new Search(); // eslint-disable-line no-new
-    const dropdownElement = document.querySelector('.js-search-group-dropdown').parentNode;
-    const inputElement = dropdownElement.querySelector('.dropdown-input-field');
-    inputElement.value = searchTerm;
     spyOn(Api, 'groups').and.callFake((term) => {
       expect(term).toBe(searchTerm);
       done();
     });
+    const inputElement = fillDropdownInput('.js-search-group-dropdown');
 
     $(inputElement).trigger('input');
   });
 
   it('requests projects from backend when filtering', (done) => {
-    const searchTerm = 'some search';
-    new Search(); // eslint-disable-line no-new
-    const dropdownElement = document.querySelector('.js-search-project-dropdown').parentNode;
-    const inputElement = dropdownElement.querySelector('.dropdown-input-field');
-    inputElement.value = searchTerm;
     spyOn(Api, 'projects').and.callFake((term) => {
       expect(term).toBe(searchTerm);
       done();
     });
+    const inputElement = fillDropdownInput('.js-search-project-dropdown');
 
     $(inputElement).trigger('input');
   });