Roadmap - Prevent page reload when changing daterange in settings

Behind roadmap_settings feature flag

ee/app/assets/javascripts/roadmap/components/roadmap_app.vue

@@ -4,7 +4,6 @@ import { mapState, mapActions } from 'vuex';
 
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
-import { DATE_RANGES } from '../constants';
 import EpicsListEmpty from './epics_list_empty.vue';
 import RoadmapFilters from './roadmap_filters.vue';
 import RoadmapSettings from './roadmap_settings.vue';
@@ -20,15 +19,6 @@ export default {
   },
   mixins: [glFeatureFlagMixin()],
   props: {
-    timeframeRangeType: {
-      type: String,
-      required: false,
-      default: DATE_RANGES.CURRENT_QUARTER,
-    },
-    presetType: {
-      type: String,
-      required: true,
-    },
     emptyStateIllustrationPath: {
       type: String,
       required: true,
@@ -52,6 +42,8 @@ export default {
       'isChildEpics',
       'hasFiltersApplied',
       'filterParams',
+      'presetType',
+      'timeframeRangeType',
     ]),
     showFilteredSearchbar() {
       if (this.epicsFetchResultEmpty) {

ee/app/assets/javascripts/roadmap/components/roadmap_daterange.vue

 <script>
 import { GlFormGroup, GlFormRadioGroup, GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { mapState } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 
-import { visitUrl, mergeUrlParams } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
 
 import { PRESET_TYPES, DATE_RANGES } from '../constants';
@@ -59,6 +58,7 @@ export default {
     },
   },
   methods: {
+    ...mapActions(['setDaterange', 'fetchEpics', 'fetchMilestones']),
     handleDaterangeSelect(value) {
       this.selectedDaterange = value;
     },
@@ -67,24 +67,19 @@ export default {
     },
     handleDaterangeDropdownClose() {
       if (this.initialSelectedDaterange !== this.selectedDaterange) {
-        visitUrl(
-          mergeUrlParams(
-            {
-              timeframe_range_type: this.selectedDaterange,
-              layout: getPresetTypeForTimeframeRangeType(this.selectedDaterange),
-            },
-            window.location.href,
-          ),
-        );
+        this.setDaterange({
+          timeframeRangeType: this.selectedDaterange,
+          presetType: getPresetTypeForTimeframeRangeType(this.selectedDaterange),
+        });
+        this.fetchEpics();
+        this.fetchMilestones();
       }
     },
     handleRoadmapLayoutChange(presetType) {
-      visitUrl(
-        mergeUrlParams(
-          { timeframe_range_type: this.selectedDaterange, layout: presetType },
-          window.location.href,
-        ),
-      );
+      if (presetType !== this.presetType) {
+        this.setDaterange({ timeframeRangeType: this.selectedDaterange, presetType });
+        this.fetchEpics();
+      }
     },
   },
   i18n: {

ee/app/assets/javascripts/roadmap/roadmap_bundle.js

@@ -129,8 +129,6 @@ export default () => {
     render(createElement) {
       return createElement('roadmap-app', {
         props: {
-          timeframeRangeType: this.timeframeRangeType,
-          presetType: this.presetType,
           emptyStateIllustrationPath: this.emptyStateIllustrationPath,
         },
       });

ee/app/assets/javascripts/roadmap/store/actions.js

@@ -319,6 +319,9 @@ export const setBufferSize = ({ commit }, bufferSize) => commit(types.SET_BUFFER
 
 export const setEpicsState = ({ commit }, epicsState) => commit(types.SET_EPICS_STATE, epicsState);
 
+export const setDaterange = ({ commit }, { timeframeRangeType, presetType }) =>
+  commit(types.SET_DATERANGE, { timeframeRangeType, presetType });
+
 export const setFilterParams = ({ commit }, filterParams) =>
   commit(types.SET_FILTER_PARAMS, filterParams);
 

ee/app/assets/javascripts/roadmap/store/mutation_types.js

@@ -29,5 +29,6 @@ export const RECEIVE_MILESTONES_FAILURE = 'RECEIVE_MILESTONES_FAILURE';
 export const SET_BUFFER_SIZE = 'SET_BUFFER_SIZE';
 
 export const SET_EPICS_STATE = 'SET_EPICS_STATE';
+export const SET_DATERANGE = 'SET_DATERANGE';
 export const SET_FILTER_PARAMS = 'SET_FILTER_PARAMS';
 export const SET_SORTED_BY = 'SET_SORTED_BY';

ee/app/assets/javascripts/roadmap/store/mutations.js

 import Vue from 'vue';
 
+import { getTimeframeForRangeType } from '../utils/roadmap_utils';
 import * as types from './mutation_types';
 
 const resetEpics = (state) => {
@@ -93,6 +94,8 @@ export default {
   },
   [types.REQUEST_MILESTONES](state) {
     state.milestonesFetchInProgress = true;
+    state.milestones = [];
+    state.milestoneIds = [];
   },
   [types.RECEIVE_MILESTONES_SUCCESS](state, milestones) {
     state.milestonesFetchInProgress = false;
@@ -122,6 +125,16 @@ export default {
     resetEpics(state);
   },
 
+  [types.SET_DATERANGE](state, { timeframeRangeType, presetType }) {
+    state.timeframeRangeType = timeframeRangeType;
+    state.presetType = presetType;
+    state.timeframe = getTimeframeForRangeType({
+      timeframeRangeType,
+      presetType,
+    });
+    resetEpics(state);
+  },
+
   [types.SET_SORTED_BY](state, sortedBy) {
     state.childrenEpics = {};
     state.sortedBy = sortedBy;

ee/spec/features/groups/group_roadmap_spec.rb

@@ -167,8 +167,6 @@ RSpec.describe 'group epic roadmap', :js do
             page.find('[data-testid="daterange-dropdown"] button.dropdown-toggle').click
             click_button(range_type)
           end
-
-          open_settings_sidebar
         end
 
         it 'renders daterange filtering dropdown with "This quarter" selected by default no layout presets available', :aggregate_failures do

ee/spec/frontend/roadmap/components/roadmap_app_spec.js

@@ -30,6 +30,7 @@ describe('RoadmapApp', () => {
   const epics = [mockFormattedEpic];
   const hasFiltersApplied = true;
   const presetType = PRESET_TYPES.MONTHS;
+  const timeframeRangeType = DATE_RANGES.CURRENT_YEAR;
   const timeframe = getTimeframeForRangeType({
     timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
     presetType: PRESET_TYPES.MONTHS,
@@ -40,7 +41,6 @@ describe('RoadmapApp', () => {
     return shallowMountExtended(RoadmapApp, {
       propsData: {
         emptyStateIllustrationPath,
-        presetType,
       },
       provide: {
         groupFullPath: 'gitlab-org',
@@ -64,6 +64,7 @@ describe('RoadmapApp', () => {
       hasFiltersApplied,
       filterQueryString: '',
       basePath,
+      timeframeRangeType,
     });
   });
 

ee/spec/frontend/roadmap/store/actions_spec.js

@@ -487,14 +487,14 @@ describe('Roadmap Vuex Actions', () => {
     beforeEach(() => {
       mockState = {
         fullPath: 'gitlab-org',
-        milestonessState: 'active',
+        milestonesState: 'active',
         presetType: PRESET_TYPES.MONTHS,
         timeframe: mockTimeframeMonths,
       };
 
       expectedVariables = {
         fullPath: 'gitlab-org',
-        state: mockState.milestonessState,
+        state: mockState.milestonesState,
         timeframe: {
           start: '2018-01-01',
           end: '2018-12-31',
@@ -644,4 +644,21 @@ describe('Roadmap Vuex Actions', () => {
       );
     });
   });
+
+  describe('setDaterange', () => {
+    it('should set epicsState in store state', () => {
+      return testAction(
+        actions.setDaterange,
+        { timeframeRangeType: 'CURRENT_YEAR', presetType: 'MONTHS' },
+        state,
+        [
+          {
+            type: types.SET_DATERANGE,
+            payload: { timeframeRangeType: 'CURRENT_YEAR', presetType: 'MONTHS' },
+          },
+        ],
+        [],
+      );
+    });
+  });
 });

ee/spec/frontend/roadmap/store/mutations_spec.js

@@ -2,6 +2,7 @@ import * as types from 'ee/roadmap/store/mutation_types';
 import mutations from 'ee/roadmap/store/mutations';
 
 import defaultState from 'ee/roadmap/store/state';
+import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
 
 import {
   mockGroupId,
@@ -303,6 +304,28 @@ describe('Roadmap Store Mutations', () => {
     });
   });
 
+  describe('SET_DATERANGE', () => {
+    it('Should set `timeframeRangeType`, `presetType` and `timeframe` to the state and reset existing epics', () => {
+      const timeframeRangeType = 'CURRENT_YEAR';
+      const presetType = 'MONTHS';
+      setEpicMockData(state);
+
+      mutations[types.SET_DATERANGE](state, { timeframeRangeType, presetType });
+
+      expect(state).toMatchObject({
+        timeframeRangeType,
+        presetType,
+        timeframe: getTimeframeForRangeType({
+          timeframeRangeType,
+          presetType,
+        }),
+        epics: [],
+        childrenFlags: {},
+        epicIds: [],
+      });
+    });
+  });
+
   describe('SET_SORTED_BY', () => {
     it('Should set `sortedBy` to the state and reset existing parent epics and children epics', () => {
       const sortedBy = 'start_date_asc';