Separate milestone and epic queries when loading roadmap

Performance improvements
No user facing changes

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

@@ -34,7 +34,6 @@ export default {
       'currentGroupId',
       'epicIid',
       'epics',
-      'milestones',
       'timeframe',
       'epicsFetchInProgress',
       'epicsFetchResultEmpty',
@@ -62,12 +61,11 @@ export default {
       return !this.isWarningDismissed && this.epics.length > gon?.roadmap_epics_limit;
     },
   },
-  mounted() {
+  created() {
     this.fetchEpics();
-    this.fetchMilestones();
   },
   methods: {
-    ...mapActions(['fetchEpics', 'fetchMilestones']),
+    ...mapActions(['fetchEpics']),
     toggleSettings() {
       this.isSettingsSidebarOpen = !this.isSettingsSidebarOpen;
     },
@@ -98,7 +96,6 @@ export default {
         v-else-if="!epicsFetchFailure"
         :preset-type="presetType"
         :epics="epics"
-        :milestones="milestones"
         :timeframe="timeframe"
         :current-group-id="currentGroupId"
         :has-filters-applied="hasFiltersApplied"

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

@@ -12,15 +12,21 @@ export default {
     GlToggle,
   },
   computed: {
-    ...mapState(['milestonesType', 'isShowingMilestones']),
+    ...mapState(['milestonesType', 'isShowingMilestones', 'milestones']),
   },
   methods: {
-    ...mapActions(['setMilestonesType', 'toggleMilestones']),
+    ...mapActions(['setMilestonesType', 'toggleMilestones', 'fetchMilestones']),
     handleMilestonesChange(option) {
       if (option !== this.milestonesType) {
         this.setMilestonesType(option);
       }
     },
+    toggle(value) {
+      if (value && this.milestones.length === 0) {
+        this.fetchMilestones();
+      }
+      this.toggleMilestones();
+    },
   },
   i18n: {
     header: __('Milestones'),
@@ -48,7 +54,7 @@ export default {
         data-track-action="click_toggle"
         :data-track-label="$options.tracking.label"
         :data-track-property="$options.tracking.property"
-        @change="toggleMilestones"
+        @change="toggle"
       />
       <gl-form-radio-group
         v-if="isShowingMilestones"

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

 <script>
-import { mapState } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 
 import eventHub from '../event_hub';
 import { MILESTONES_GROUP, MILESTONES_SUBGROUP, MILESTONES_PROJECT } from '../constants';
@@ -23,10 +23,6 @@ export default {
       type: Array,
       required: true,
     },
-    milestones: {
-      type: Array,
-      required: true,
-    },
     timeframe: {
       type: Array,
       required: true,
@@ -41,7 +37,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['defaultInnerHeight', 'isShowingMilestones', 'milestonesType']),
+    ...mapState(['defaultInnerHeight', 'isShowingMilestones', 'milestonesType', 'milestones']),
     displayMilestones() {
       return Boolean(this.milestones.length) && this.isShowingMilestones;
     },
@@ -58,7 +54,13 @@ export default {
       }
     },
   },
+  mounted() {
+    if (this.isShowingMilestones) {
+      this.fetchMilestones();
+    }
+  },
   methods: {
+    ...mapActions(['fetchMilestones']),
     handleScroll() {
       const { scrollTop, scrollLeft, clientHeight, scrollHeight } = this.$el;
 

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

@@ -151,7 +151,6 @@ describe('RoadmapApp', () => {
         hasFiltersApplied,
         presetType,
         timeframe,
-        milestones: [],
       });
     });
 

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

@@ -13,18 +13,15 @@ import eventHub from 'ee/roadmap/event_hub';
 import createStore from 'ee/roadmap/store';
 import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
 
-import {
-  mockEpic,
-  mockTimeframeInitialDate,
-  mockGroupId,
-  mockMilestone,
-} from 'ee_jest/roadmap/mock_data';
+import { mockEpic, mockTimeframeInitialDate, mockGroupId } from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeMonths = getTimeframeForRangeType({
   timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
   presetType: PRESET_TYPES.MONTHS,
   initialDate: mockTimeframeInitialDate,
 });
+const presetType = PRESET_TYPES.MONTHS;
+const timeframeRangeType = DATE_RANGES.CURRENT_YEAR;
 
 describe('RoadmapShell', () => {
   Vue.use(Vuex);
@@ -37,13 +34,15 @@ describe('RoadmapShell', () => {
     store.dispatch('setInitialData', {
       defaultInnerHeight,
       childrenFlags: { 1: { itemExpanded: false } },
+      timeframe: mockTimeframeMonths,
+      presetType,
+      timeframeRangeType,
     });
   };
 
   const createComponent = (
     {
       epics = [mockEpic],
-      milestones = [mockMilestone],
       timeframe = mockTimeframeMonths,
       currentGroupId = mockGroupId,
       hasFiltersApplied = false,
@@ -56,7 +55,6 @@ describe('RoadmapShell', () => {
       propsData: {
         presetType: PRESET_TYPES.MONTHS,
         epics,
-        milestones,
         timeframe,
         currentGroupId,
         hasFiltersApplied,