Utilize URLSearchParams API

We can simplify our path creation by using
the URLSearchParams utility.

ee/app/assets/javascripts/analytics/repository_analytics/components/group_repository_analytics.vue

@@ -10,7 +10,6 @@ import {
 } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import { pikadayToString } from '~/lib/utils/datetime_utility';
-import { getProjectIdQueryParams } from '../utils';
 import getGroupProjects from '../graphql/queries/get_group_projects.query.graphql';
 
 export default {
@@ -72,7 +71,19 @@ export default {
       const endDate = pikadayToString(today);
       today.setDate(today.getDate() - this.selectedDateRange.value);
       const startDate = pikadayToString(today);
-      return `${this.groupAnalyticsCoverageReportsPath}&start_date=${startDate}&end_date=${endDate}${this.selectedProjectIdsParam}`;
+
+      const queryParams = new URLSearchParams({
+        start_date: startDate,
+        end_date: endDate,
+        project_ids: this.selectedProjectIdsParam,
+      });
+
+      if (this.selectAllProjects) {
+        // not including a project_ids param is the same as selecting all the projects
+        queryParams.delete('project_ids');
+      }
+
+      return `${this.groupAnalyticsCoverageReportsPath}&${queryParams.toString()}`;
     },
     downloadCSVModalButton() {
       return {
@@ -96,12 +107,7 @@ export default {
       );
     },
     selectedProjectIdsParam() {
-      if (this.selectAllProjects) {
-        return ''; // not including a project_ids param is the same as selecting all the projects
-      }
-      return `&${getProjectIdQueryParams(
-        this.groupProjects.filter(project => project.isSelected),
-      )}`;
+      return this.groupProjects.filter(project => project.isSelected).map(project => project.id);
     },
   },
   methods: {

ee/app/assets/javascripts/analytics/repository_analytics/utils.js

-export const getProjectIdQueryParams = projects =>
-  `project_ids=${projects.map(project => project.id).join(',')}`;

ee/spec/frontend/analytics/repository_analytics/components/group_repository_analytics_spec.js

@@ -82,6 +82,19 @@ describe('Group repository analytics app', () => {
         });
       });
 
+      describe('with two or more projects selected without selecting all projects', () => {
+        beforeEach(() => {
+          selectCodeCoverageProjectById(groupProjectsData[0].id);
+          selectCodeCoverageProjectById(groupProjectsData[1].id);
+        });
+
+        it('renders primary action as a link with two project IDs as parameters', () => {
+          const expectedPath = `${groupAnalyticsCoverageReportsPathWithDates}&project_ids=${groupProjectsData[0].id}%2C${groupProjectsData[1].id}`;
+
+          expect(findCodeCoverageDownloadButton().attributes('href')).toBe(expectedPath);
+        });
+      });
+
       describe('with one project selected', () => {
         beforeEach(() => {
           selectCodeCoverageProjectById(groupProjectsData[0].id);

ee/spec/frontend/analytics/repository_analytics/utils_spec.js

-import { getProjectIdQueryParams } from 'ee/analytics/repository_analytics/utils';
-
-describe('group repository analytics util functions', () => {
-  describe('getProjectIdQueryParams', () => {
-    it('returns query param string project ids', () => {
-      const projects = [{ id: 1 }, { id: 2 }];
-      const expectedString = 'project_ids=1,2';
-
-      expect(getProjectIdQueryParams(projects)).toBe(expectedString);
-    });
-  });
-});