Merge branch 'mrincon-refactor-getParameterByName' into 'master'

Refactor getParameterByName

See merge request gitlab-org/gitlab!65441

app/assets/javascripts/groups/groups_filterable_list.js

@@ -86,11 +86,11 @@ export default class GroupFilterableList extends FilterableList {
     // Get option query param, also preserve currently applied query param
     const sortParam = getParameterByName(
       'sort',
-      isOptionFilterBySort ? e.currentTarget.href : window.location.href,
+      isOptionFilterBySort ? e.currentTarget.search : window.location.search,
     );
     const archivedParam = getParameterByName(
       'archived',
-      isOptionFilterByArchivedProjects ? e.currentTarget.href : window.location.href,
+      isOptionFilterByArchivedProjects ? e.currentTarget.search : window.location.search,
     );
 
     if (sortParam) {

app/assets/javascripts/lib/utils/url_utility.js

@@ -107,25 +107,6 @@ export function getParameterValues(sParam, url = window.location) {
   }, []);
 }
 
-/**
- * This function accepts the `name` of the param to parse in the url
- * if the name does not exist this function will return `null`
- * otherwise it will return the value of the param key provided
- *
- * @param {String} name
- * @param {String?} urlToParse
- * @returns value of the parameter as string
- */
-export const getParameterByName = (name, urlToParse) => {
-  const url = urlToParse || window.location.href;
-  const parsedName = name.replace(/[[\]]/g, '\\$&');
-  const regex = new RegExp(`[?&]${parsedName}(=([^&#]*)|&|#|$)`);
-  const results = regex.exec(url);
-  if (!results) return null;
-  if (!results[2]) return '';
-  return decodeUrlParameter(results[2]);
-};
-
 /**
  * Merges a URL to a set of params replacing value for
  * those already present.
@@ -513,6 +494,19 @@ export function queryToObject(query, { gatherArrays = false, legacySpacesDecode
   }, {});
 }
 
+/**
+ * This function accepts the `name` of the param to parse in the url
+ * if the name does not exist this function will return `null`
+ * otherwise it will return the value of the param key provided
+ *
+ * @param {String} name
+ * @param {String?} urlToParse
+ * @returns value of the parameter as string
+ */
+export const getParameterByName = (name, query = window.location.search) => {
+  return queryToObject(query)[name] || null;
+};
+
 /**
  * Convert search query object back into a search query
  *

spec/frontend/diffs/store/getters_versions_dropdowns_spec.js

@@ -54,7 +54,7 @@ describe('Compare diff version dropdowns', () => {
 
       Object.defineProperty(window, 'location', {
         writable: true,
-        value: { href: `https://example.gitlab.com${diffHeadParam}` },
+        value: { search: diffHeadParam },
       });
 
       expectedFirstVersion = {

spec/frontend/lib/utils/url_utility_spec.js

@@ -101,48 +101,6 @@ describe('URL utility', () => {
     });
   });
 
-  describe('getParameterByName', () => {
-    const { getParameterByName } = urlUtils;
-
-    it('should return valid parameter', () => {
-      setWindowLocation({ href: 'https://gitlab.com?scope=all&p=2' });
-
-      expect(getParameterByName('p')).toEqual('2');
-      expect(getParameterByName('scope')).toBe('all');
-    });
-
-    it('should return invalid parameter', () => {
-      setWindowLocation({ href: 'https://gitlab.com?scope=all&p=2' });
-
-      expect(getParameterByName('fakeParameter')).toBe(null);
-    });
-
-    it('should return a parameter with spaces', () => {
-      setWindowLocation({ href: 'https://gitlab.com?search=my terms' });
-
-      expect(getParameterByName('search')).toBe('my terms');
-    });
-
-    it('should return a parameter with encoded spaces', () => {
-      setWindowLocation({ href: 'https://gitlab.com?search=my%20terms' });
-
-      expect(getParameterByName('search')).toBe('my terms');
-    });
-
-    it('should return a parameter with plus signs as spaces', () => {
-      setWindowLocation({ href: 'https://gitlab.com?search=my+terms' });
-
-      expect(getParameterByName('search')).toBe('my terms');
-    });
-
-    it('should return valid parameters if URL is provided', () => {
-      expect(getParameterByName('foo', 'http://cocteau.twins?foo=bar')).toBe('bar');
-      expect(getParameterByName('manan', 'http://cocteau.twins?foo=bar&manan=canchu')).toBe(
-        'canchu',
-      );
-    });
-  });
-
   describe('mergeUrlParams', () => {
     const { mergeUrlParams } = urlUtils;
 
@@ -762,6 +720,49 @@ describe('URL utility', () => {
     });
   });
 
+  describe('getParameterByName', () => {
+    const { getParameterByName } = urlUtils;
+
+    it('should return valid parameter', () => {
+      setWindowLocation({ search: '?scope=all&p=2' });
+
+      expect(getParameterByName('p')).toEqual('2');
+      expect(getParameterByName('scope')).toBe('all');
+    });
+
+    it('should return invalid parameter', () => {
+      setWindowLocation({ search: '?scope=all&p=2' });
+
+      expect(getParameterByName('fakeParameter')).toBe(null);
+    });
+
+    it('should return a parameter with spaces', () => {
+      setWindowLocation({ search: '?search=my terms' });
+
+      expect(getParameterByName('search')).toBe('my terms');
+    });
+
+    it('should return a parameter with encoded spaces', () => {
+      setWindowLocation({ search: '?search=my%20terms' });
+
+      expect(getParameterByName('search')).toBe('my terms');
+    });
+
+    it('should return a parameter with plus signs as spaces', () => {
+      setWindowLocation({ search: '?search=my+terms' });
+
+      expect(getParameterByName('search')).toBe('my terms');
+    });
+
+    it('should return valid parameters if search is provided', () => {
+      expect(getParameterByName('foo', 'foo=bar')).toBe('bar');
+      expect(getParameterByName('foo', '?foo=bar')).toBe('bar');
+
+      expect(getParameterByName('manan', 'foo=bar&manan=canchu')).toBe('canchu');
+      expect(getParameterByName('manan', '?foo=bar&manan=canchu')).toBe('canchu');
+    });
+  });
+
   describe('objectToQuery', () => {
     it('converts search query object back into a search query', () => {
       const searchQueryObject = { one: '1', two: '2' };