Handle state param in JS

ee/app/assets/javascripts/roadmap/utils/roadmap_utils.js

@@ -184,6 +184,7 @@ export const getEpicsPathForPreset = ({
   filterQueryString = '',
   presetType = '',
   timeframe = [],
+  state = 'all',
 }) => {
   let start;
   let end;
@@ -213,9 +214,7 @@ export const getEpicsPathForPreset = ({
 
   const startDate = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()}`;
   const endDate = `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`;
-
-  epicsPath += epicsPath.indexOf('?') > -1 ? '&' : '?';
-  epicsPath += `start_date=${startDate}&end_date=${endDate}`;
+  epicsPath += `?state=${state}&start_date=${startDate}&end_date=${endDate}`;
 
   if (filterQueryString) {
     epicsPath += `&${filterQueryString}`;

ee/app/views/groups/roadmap/show.html.haml

@@ -9,6 +9,6 @@
 - if @epics_count != 0
   = render 'shared/epic/search_bar', type: :epics, show_roadmap_presets: true
 
-  #js-roadmap{ data: { epics_path: group_epics_path(@group, state: 'all', format: :json), group_id: @group.id, empty_state_illustration: image_path('illustrations/epics/roadmap.svg'), has_filters_applied: "#{has_filters_applied}", new_epic_endpoint: group_epics_path(@group), preset_type: roadmap_layout } }
+  #js-roadmap{ data: { epics_path: group_epics_path(@group, format: :json), group_id: @group.id, empty_state_illustration: image_path('illustrations/epics/roadmap.svg'), has_filters_applied: "#{has_filters_applied}", new_epic_endpoint: group_epics_path(@group), preset_type: roadmap_layout } }
 - else
   = render 'shared/empty_states/roadmap'

ee/spec/javascripts/roadmap/utils/roadmap_utils_spec.js

@@ -149,7 +149,7 @@ describe('getEpicsPathForPreset', () => {
       presetType: PRESET_TYPES.QUARTERS,
     });
 
-    expect(epicsPath).toBe(`${basePath}?start_date=2017-10-1&end_date=2019-3-31`);
+    expect(epicsPath).toBe(`${basePath}?state=all&start_date=2017-10-1&end_date=2019-3-31`);
   });
 
   it('returns epics path string based on provided basePath and timeframe for Months', () => {
@@ -160,7 +160,7 @@ describe('getEpicsPathForPreset', () => {
       presetType: PRESET_TYPES.MONTHS,
     });
 
-    expect(epicsPath).toBe(`${basePath}?start_date=2017-12-1&end_date=2018-6-30`);
+    expect(epicsPath).toBe(`${basePath}?state=all&start_date=2017-12-1&end_date=2018-6-30`);
   });
 
   it('returns epics path string based on provided basePath and timeframe for Weeks', () => {
@@ -171,7 +171,7 @@ describe('getEpicsPathForPreset', () => {
       presetType: PRESET_TYPES.WEEKS,
     });
 
-    expect(epicsPath).toBe(`${basePath}?start_date=2017-12-24&end_date=2018-2-3`);
+    expect(epicsPath).toBe(`${basePath}?state=all&start_date=2017-12-24&end_date=2018-2-3`);
   });
 
   it('returns epics path string while preserving filterQueryString', () => {
@@ -184,23 +184,7 @@ describe('getEpicsPathForPreset', () => {
     });
 
     expect(epicsPath).toBe(
-      `${basePath}?start_date=2017-12-1&end_date=2018-6-30&scope=all&utf8=✓&state=opened&label_name[]=Bug`,
-    );
-  });
-
-  it('returns epics path string when basePath already contains a query param', () => {
-    const basePathWithQuery = `${basePath}?state=all`;
-
-    const timeframeMonths = getTimeframeForMonthsView(new Date(2018, 0, 1));
-    const epicsPath = getEpicsPathForPreset({
-      basePath: basePathWithQuery,
-      filterQueryString,
-      timeframe: timeframeMonths,
-      presetType: PRESET_TYPES.MONTHS,
-    });
-
-    expect(epicsPath).toBe(
-      `${basePathWithQuery}&start_date=2017-12-1&end_date=2018-6-30&scope=all&utf8=✓&state=opened&label_name[]=Bug`,
+      `${basePath}?state=all&start_date=2017-12-1&end_date=2018-6-30&scope=all&utf8=✓&state=opened&label_name[]=Bug`,
     );
   });
 });