Fixes method not replacing URL parameters correctly

3 files changed, 57 insertions, 10 deletions

diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 4aad0128aef..46b80c04e20 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -263,7 +263,7 @@
     });
 
     /**
-     * Updates the search parameter of a URL given the parameter and values provided.
+     * Updates the search parameter of a URL given the parameter and value provided.
      *
      * If no search params are present we'll add it.
      * If param for page is already present, we'll update it
@@ -278,17 +278,24 @@
       let search;
       const locationSearch = window.location.search;
 
-      if (locationSearch.length === 0) {
-        search = `?${param}=${value}`;
-      }
+      if (locationSearch.length) {
+        const parameters = locationSearch.substring(1, locationSearch.length)
+          .split('&')
+          .reduce((acc, element) => {
+            const val = element.split('=');
+            acc[val[0]] = decodeURIComponent(val[1]);
+            return acc;
+          }, {});
 
-      if (locationSearch.indexOf(param) !== -1) {
-        const regex = new RegExp(param + '=\\d');
-        search = locationSearch.replace(regex, `${param}=${value}`);
-      }
+        parameters[param] = value;
 
-      if (locationSearch.length && locationSearch.indexOf(param) === -1) {
-        search = `${locationSearch}&${param}=${value}`;
+        const toString = Object.keys(parameters)
+          .map(val => `${val}=${encodeURIComponent(parameters[val])}`)
+          .join('&');
+
+        search = `?${toString}`;
+      } else {
+        search = `?${param}=${value}`;
       }
 
       return search;
diff --git a/changelogs/unreleased/30264-fix-vue-pagination.yml b/changelogs/unreleased/30264-fix-vue-pagination.yml
new file mode 100644
index 00000000000..d5846e52bcf
--- /dev/null
+++ b/changelogs/unreleased/30264-fix-vue-pagination.yml
@@ -0,0 +1,5 @@
+---
+title: Fixes method not replacing URL parameters correctly and breaking pipelines
+  pagination
+merge_request:
+author:
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 7cf39d37181..5c63e5024f5 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -261,5 +261,40 @@ require('~/lib/utils/common_utils');
         });
       }, 10000);
     });
+
+    describe('gl.utils.setParamInURL', () => {
+      it('should return the parameter', () => {
+        expect(gl.utils.setParamInURL('page', 156)).toBe('?page=156');
+        expect(gl.utils.setParamInURL('page', '156')).toBe('?page=156');
+      });
+
+      it('should update the existing parameter when its a number', () => {
+        window.history.pushState({}, null, '?page=15');
+
+        expect(gl.utils.setParamInURL('page', 16)).toBe('?page=16');
+        expect(gl.utils.setParamInURL('page', '16')).toBe('?page=16');
+        expect(gl.utils.setParamInURL('page', true)).toBe('?page=true');
+      });
+
+      it('should update the existing parameter when its a string', () => {
+        window.history.pushState({}, null, '?scope=all');
+
+        expect(gl.utils.setParamInURL('scope', 'finished')).toBe('?scope=finished');
+      });
+
+      it('should update the existing parameter when more than one parameter exists', () => {
+        window.history.pushState({}, null, '?scope=all&page=15');
+
+        expect(gl.utils.setParamInURL('scope', 'finished')).toBe('?scope=finished&page=15');
+      });
+
+      it('should add a new parameter to the end of the existing ones', () => {
+        window.history.pushState({}, null, '?scope=all');
+
+        expect(gl.utils.setParamInURL('page', 16)).toBe('?scope=all&page=16');
+        expect(gl.utils.setParamInURL('page', '16')).toBe('?scope=all&page=16');
+        expect(gl.utils.setParamInURL('page', true)).toBe('?scope=all&page=true');
+      });
+    });
   });
 })();