Fix search bar search param encodingfix-search-bar-search-param

3 files changed, 74 insertions, 1 deletions

diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
index 8d62324b79f..029564ffc61 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -196,7 +196,8 @@
       });
 
       if (searchToken) {
-        paths.push(`search=${encodeURIComponent(searchToken)}`);
+        const sanitized = searchToken.split(' ').map(t => encodeURIComponent(t)).join('+');
+        paths.push(`search=${sanitized}`);
       }
 
       Turbolinks.visit(`?scope=all&utf8=✓&${paths.join('&')}`);
diff --git a/changelogs/unreleased/fix-search-bar-search-param.yml b/changelogs/unreleased/fix-search-bar-search-param.yml
new file mode 100644
index 00000000000..4df14d3bf13
--- /dev/null
+++ b/changelogs/unreleased/fix-search-bar-search-param.yml
@@ -0,0 +1,4 @@
+---
+title: Fix search bar search param encoding
+merge_request: 8753
+author:
diff --git a/spec/javascripts/filtered_search/filtered_search_manager_spec.js.es6 b/spec/javascripts/filtered_search/filtered_search_manager_spec.js.es6
new file mode 100644
index 00000000000..c8b5c2b36ad
--- /dev/null
+++ b/spec/javascripts/filtered_search/filtered_search_manager_spec.js.es6
@@ -0,0 +1,68 @@
+/* global Turbolinks */
+
+//= require turbolinks
+//= require lib/utils/common_utils
+//= require filtered_search/filtered_search_token_keys
+//= require filtered_search/filtered_search_tokenizer
+//= require filtered_search/filtered_search_dropdown_manager
+//= require filtered_search/filtered_search_manager
+
+(() => {
+  describe('Filtered Search Manager', () => {
+    describe('search', () => {
+      let manager;
+      const defaultParams = '?scope=all&utf8=✓&state=opened';
+
+      function getInput() {
+        return document.querySelector('.filtered-search');
+      }
+
+      beforeEach(() => {
+        setFixtures(`
+          <input type='text' class='filtered-search' />
+        `);
+
+        spyOn(gl.FilteredSearchManager.prototype, 'bindEvents').and.callFake(() => {});
+        spyOn(gl.FilteredSearchManager.prototype, 'loadSearchParamsFromURL').and.callFake(() => {});
+        spyOn(gl.FilteredSearchDropdownManager.prototype, 'setDropdown').and.callFake(() => {});
+        spyOn(gl.utils, 'getParameterByName').and.returnValue(null);
+
+        manager = new gl.FilteredSearchManager();
+      });
+
+      afterEach(() => {
+        getInput().outerHTML = '';
+      });
+
+      it('should search with a single word', () => {
+        getInput().value = 'searchTerm';
+
+        spyOn(Turbolinks, 'visit').and.callFake((url) => {
+          expect(url).toEqual(`${defaultParams}&search=searchTerm`);
+        });
+
+        manager.search();
+      });
+
+      it('should search with multiple words', () => {
+        getInput().value = 'awesome search terms';
+
+        spyOn(Turbolinks, 'visit').and.callFake((url) => {
+          expect(url).toEqual(`${defaultParams}&search=awesome+search+terms`);
+        });
+
+        manager.search();
+      });
+
+      it('should search with special characters', () => {
+        getInput().value = '~!@#$%^&*()_+{}:<>,.?/';
+
+        spyOn(Turbolinks, 'visit').and.callFake((url) => {
+          expect(url).toEqual(`${defaultParams}&search=~!%40%23%24%25%5E%26*()_%2B%7B%7D%3A%3C%3E%2C.%3F%2F`);
+        });
+
+        manager.search();
+      });
+    });
+  });
+})();