Add setUrlParams utility

- This utility adds new query params,
updates existing params with a new value
and removes params with value null/undefined

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

@@ -245,3 +245,38 @@ export function objectToQuery(obj) {
     .map(k => `${encodeURIComponent(k)}=${encodeURIComponent(obj[k])}`)
     .join('&');
 }
+
+/**
+ * Sets query params for a given URL
+ * It adds new query params, updates existing params with a new value and removes params with value null/undefined
+ *
+ * @param {Object} params The query params to be set/updated
+ * @param {String} url The url to be operated on
+ * @param {Boolean} clearParams Indicates whether existing query params should be removed or not
+ * @returns {String} A copy of the original with the updated query params
+ */
+export const setUrlParams = (params, url = window.location.href, clearParams = false) => {
+  const urlObj = new URL(url);
+  const queryString = urlObj.search;
+  const searchParams = clearParams ? new URLSearchParams('') : new URLSearchParams(queryString);
+
+  Object.keys(params).forEach(key => {
+    if (params[key] === null || params[key] === undefined) {
+      searchParams.delete(key);
+    } else if (Array.isArray(params[key])) {
+      params[key].forEach((val, idx) => {
+        if (idx === 0) {
+          searchParams.set(key, val);
+        } else {
+          searchParams.append(key, val);
+        }
+      });
+    } else {
+      searchParams.set(key, params[key]);
+    }
+  });
+
+  urlObj.search = searchParams.toString();
+
+  return urlObj.toString();
+};

spec/frontend/lib/utils/url_utility_spec.js

@@ -323,3 +323,45 @@ describe('URL utility', () => {
     });
   });
 });
+
+describe('setUrlParams', () => {
+  it('adds new params as query string', () => {
+    const url = 'https://gitlab.com/test';
+
+    expect(
+      urlUtils.setUrlParams({ group_id: 'gitlab-org', project_id: 'my-project' }, url),
+    ).toEqual('https://gitlab.com/test?group_id=gitlab-org&project_id=my-project');
+  });
+
+  it('updates an existing parameter', () => {
+    const url = 'https://gitlab.com/test?group_id=gitlab-org&project_id=my-project';
+
+    expect(urlUtils.setUrlParams({ project_id: 'gitlab-test' }, url)).toEqual(
+      'https://gitlab.com/test?group_id=gitlab-org&project_id=gitlab-test',
+    );
+  });
+
+  it("removes the project_id param when it's value is null", () => {
+    const url = 'https://gitlab.com/test?group_id=gitlab-org&project_id=my-project';
+
+    expect(urlUtils.setUrlParams({ project_id: null }, url)).toEqual(
+      'https://gitlab.com/test?group_id=gitlab-org',
+    );
+  });
+
+  it('handles arrays properly', () => {
+    const url = 'https://gitlab.com/test';
+
+    expect(urlUtils.setUrlParams({ label_name: ['foo', 'bar'] }, url)).toEqual(
+      'https://gitlab.com/test?label_name=foo&label_name=bar',
+    );
+  });
+
+  it('removes all existing URL params and sets a new param when cleanParams=true', () => {
+    const url = 'https://gitlab.com/test?group_id=gitlab-org&project_id=my-project';
+
+    expect(urlUtils.setUrlParams({ foo: 'bar' }, url, true)).toEqual(
+      'https://gitlab.com/test?foo=bar',
+    );
+  });
+});