Roadmap - Refactor VueX action/mutation to improve performance

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

@@ -81,6 +81,7 @@ export const receiveEpicsSuccess = (
   { commit, dispatch, state, getters },
   { rawEpics, newEpic, timeframeExtended },
 ) => {
+  const epicIds = [];
   const epics = rawEpics.reduce((filteredEpics, epic) => {
     const formattedEpic = roadmapItemUtils.formatRoadmapItemDetails(
       epic,
@@ -100,11 +101,13 @@ export const receiveEpicsSuccess = (
         newEpic,
       });
       filteredEpics.push(formattedEpic);
-      commit(types.UPDATE_EPIC_IDS, formattedEpic.id);
+      epicIds.push(formattedEpic.id);
     }
     return filteredEpics;
   }, []);
 
+  commit(types.UPDATE_EPIC_IDS, epicIds);
+
   if (timeframeExtended) {
     const updatedEpics = state.epics.concat(epics);
     sortEpics(updatedEpics, state.sortedBy);

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

@@ -11,8 +11,8 @@ export default {
     state.epics = epics;
   },
 
-  [types.UPDATE_EPIC_IDS](state, epicId) {
-    state.epicIds.push(epicId);
+  [types.UPDATE_EPIC_IDS](state, epicIds) {
+    state.epicIds.push(...epicIds);
   },
 
   [types.REQUEST_EPICS](state) {

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

@@ -94,7 +94,7 @@ describe('Roadmap Vuex Actions', () => {
         },
         state,
         [
-          { type: types.UPDATE_EPIC_IDS, payload: mockRawEpic.id },
+          { type: types.UPDATE_EPIC_IDS, payload: [mockRawEpic.id] },
           {
             type: types.RECEIVE_EPICS_SUCCESS,
             payload: [
@@ -149,7 +149,7 @@ describe('Roadmap Vuex Actions', () => {
         },
         state,
         [
-          { type: types.UPDATE_EPIC_IDS, payload: mockRawEpic.id },
+          { type: types.UPDATE_EPIC_IDS, payload: [mockRawEpic.id] },
           {
             type: types.RECEIVE_EPICS_FOR_TIMEFRAME_SUCCESS,
             payload: [{ ...mockFormattedEpic, newEpic: true }],

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

@@ -49,7 +49,7 @@ describe('Roadmap Store Mutations', () => {
 
   describe('UPDATE_EPIC_IDS', () => {
     it('Should insert provided epicId to epicIds array in state', () => {
-      mutations[types.UPDATE_EPIC_IDS](state, 22);
+      mutations[types.UPDATE_EPIC_IDS](state, [22]);
 
       expect(state.epicIds).toHaveLength(1);
       expect(state.epicIds[0]).toBe(22);