Update graphql response mock data and fix bug

- remove unused epicUtils helper
- camelcase all data fields
- fix a bug
  Only display group name of an epic
  when the current group's id differs from
  the group id of the epic.

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

 <script>
 import { GlButton, GlIcon, GlLoadingIcon, GlTooltip } from '@gitlab/ui';
 import { mapState } from 'vuex';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __, n__ } from '~/locale';
 import { EPIC_LEVEL_MARGIN } from '../constants';
 import eventHub from '../event_hub';
@@ -48,8 +49,11 @@ export default {
     itemId() {
       return this.epic.id;
     },
+    epicGroupId() {
+      return getIdFromGraphQLId(this.epic.group.id);
+    },
     isEpicGroupDifferent() {
-      return this.currentGroupId !== this.epic.groupId;
+      return this.currentGroupId !== this.epicGroupId;
     },
     isExpandIconHidden() {
       return !this.epic.hasChildren;
@@ -147,10 +151,10 @@ export default {
         <div class="epic-group-timeframe d-flex text-secondary">
           <span
             v-if="isEpicGroupDifferent && !epic.hasParent"
-            :title="epic.groupFullName"
+            :title="epic.group.fullName"
             class="epic-group"
           >
-            {{ epic.groupName }}
+            {{ epic.group.name }}
           </span>
           <span v-if="isEpicGroupDifferent && !epic.hasParent" class="mx-1" aria-hidden="true"
             >&middot;</span

ee/app/assets/javascripts/roadmap/queries/epic.fragment.graphql

@@ -19,6 +19,7 @@ fragment BaseEpic on Epic {
     closedEpics
   }
   group {
+    id
     name
     fullName
     fullPath

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

@@ -57,7 +57,7 @@ const fetchGroupEpics = (
         ? data?.group?.epic?.children?.edges || []
         : data?.group?.epics?.edges || [];
 
-      return epicUtils.extractGroupEpics(edges);
+      return edges.map((e) => e.node);
     });
 };
 
@@ -72,7 +72,7 @@ export const fetchChildrenEpics = (state, { parentItem }) => {
     })
     .then(({ data }) => {
       const edges = data?.group?.epic?.children?.edges || [];
-      return epicUtils.extractGroupEpics(edges);
+      return edges.map((e) => e.node);
     });
 };
 

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

@@ -7,23 +7,6 @@ export const gqClient = createGqClient(
   },
 );
 
-export const flattenGroupProperty = ({ node: epicNode }) => ({
-  ...epicNode,
-  // We can get rid of below two lines
-  // by updating `epic_item_details.vue`
-  // once we move to GraphQL permanently.
-  groupName: epicNode.group.name,
-  groupFullName: epicNode.group.fullName,
-});
-
-/**
- * Returns array of epics extracted from GraphQL response
- * discarding the `edges`->`node` nesting
- *
- * @param {Object} edges
- */
-export const extractGroupEpics = (edges) => edges.map(flattenGroupProperty);
-
 export const addIsChildEpicTrueProperty = (obj) => ({ ...obj, isChildEpic: true });
 
 export const generateKey = (epic) => `${epic.isChildEpic ? 'child-epic-' : 'epic-'}${epic.id}`;

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

@@ -31,7 +31,7 @@ describe('EpicItemDetails', () => {
         currentGroupId: mockGroupId,
         timeframeString: 'Jul 10, 2017 – Jun 2, 2018',
         childLevel: 0,
-        childrenFlags: { 41: { itemExpanded: false } },
+        childrenFlags: { [mockFormattedEpic.id]: { itemExpanded: false } },
         hasFiltersApplied: false,
         isChildrenEmpty: false,
         ...props,
@@ -88,31 +88,19 @@ describe('EpicItemDetails', () => {
   });
 
   describe('epic group name', () => {
-    const epic = {
-      id: '41',
-      ...mockFormattedEpic,
-      groupId: 1,
-      groupName: 'Bar',
-      groupFullName: 'Foo / Bar',
-      descendantCounts: {
-        closedIssues: 3,
-        openedIssues: 2,
-      },
-    };
-
     describe('when the epic group ID is different from the current group ID', () => {
       it('is displayed and set to the title attribute', () => {
-        createWrapper({ epic, currentGroupId: 2 });
+        createWrapper({ currentGroupId: 123 });
         expect(getEpicGroupNameData()).toEqual({
-          groupName: epic.groupName,
-          title: epic.groupFullName,
+          groupName: mockFormattedEpic.group.name,
+          title: mockFormattedEpic.group.fullName,
         });
       });
     });
 
     describe('when the epic group ID is the same as the current group ID', () => {
       it('is hidden', () => {
-        createWrapper({ epic, currentGroupId: 1 });
+        createWrapper({ currentGroupId: mockGroupId });
         expect(getGroupName().exists()).toBe(false);
       });
     });
@@ -178,7 +166,6 @@ describe('EpicItemDetails', () => {
         let epic;
         beforeEach(() => {
           epic = createMockEpic({
-            id: 41,
             hasChildren: true,
             children: {
               edges: [mockFormattedChildEpic1],
@@ -203,7 +190,7 @@ describe('EpicItemDetails', () => {
 
         describe('when child epics are expanded', () => {
           const childrenFlags = {
-            41: { itemExpanded: true },
+            [mockFormattedEpic.id]: { itemExpanded: true },
           };
 
           beforeEach(() => {
@@ -241,7 +228,7 @@ describe('EpicItemDetails', () => {
         describe('when child epics are not expanded', () => {
           beforeEach(() => {
             const childrenFlags = {
-              41: { itemExpanded: false },
+              [mockFormattedEpic.id]: { itemExpanded: false },
             };
             createWrapper({
               epic,

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

@@ -36,7 +36,7 @@ const createComponent = ({
   currentGroupId = mockGroupId,
   childLevel = 0,
   childrenEpics = {},
-  childrenFlags = { 1: { itemExpanded: false } },
+  childrenFlags = { [mockEpic.id]: { itemExpanded: false } },
   hasFiltersApplied = false,
 }) => {
   return mount(EpicItemComponent, {

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

@@ -18,7 +18,6 @@ import {
   mockEpicsWithParents,
   mockSortedBy,
   basePath,
-  epicsPath,
 } from 'ee_jest/roadmap/mock_data';
 
 const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
@@ -29,7 +28,6 @@ store.dispatch('setInitialData', {
   presetType: PRESET_TYPES.MONTHS,
   timeframe: mockTimeframeMonths,
   filterQueryString: '',
-  initialEpicsPath: epicsPath,
   basePath,
 });
 

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

@@ -9,7 +9,11 @@ import {
 } from 'ee/roadmap/constants';
 import createStore from 'ee/roadmap/store';
 import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
-import { mockTimeframeInitialDate, mockGroupId, rawMilestones } from 'ee_jest/roadmap/mock_data';
+import {
+  mockTimeframeInitialDate,
+  mockGroupId,
+  mockGroupMilestones,
+} from 'ee_jest/roadmap/mock_data';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 const initializeStore = (mockTimeframeMonths) => {
@@ -19,7 +23,7 @@ const initializeStore = (mockTimeframeMonths) => {
     presetType: PRESET_TYPES.MONTHS,
     timeframe: mockTimeframeMonths,
   });
-  store.dispatch('receiveMilestonesSuccess', { rawMilestones });
+  store.dispatch('receiveMilestonesSuccess', { rawMilestones: mockGroupMilestones });
   return store;
 };
 

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

@@ -13,7 +13,6 @@ import * as types from 'ee/roadmap/store/mutation_types';
 import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
 import {
   basePath,
-  epicsPath,
   mockFormattedEpic,
   mockFormattedChildEpic2,
   mockGroupId,
@@ -62,7 +61,6 @@ describe('RoadmapApp', () => {
       timeframe,
       hasFiltersApplied,
       filterQueryString: '',
-      initialEpicsPath: epicsPath,
       basePath,
     });
   });

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

@@ -13,19 +13,21 @@ import axios from '~/lib/utils/axios_utils';
 import {
   mockGroupId,
   basePath,
-  epicsPath,
   mockTimeframeInitialDate,
   mockTimeframeMonthsPrepend,
   mockTimeframeMonthsAppend,
   rawEpics,
   mockRawEpic,
+  mockRawEpic2,
   mockFormattedEpic,
+  mockFormattedEpic2,
   mockSortedBy,
   mockGroupEpicsQueryResponse,
-  mockGroupEpicsQueryResponseFormatted,
-  mockGroupMilestonesQueryResponse,
+  mockGroupEpics,
   mockEpicChildEpicsQueryResponse,
-  rawMilestones,
+  mockChildEpicNode1,
+  mockGroupMilestonesQueryResponse,
+  mockGroupMilestones,
   mockMilestone,
   mockFormattedMilestone,
 } from '../mock_data';
@@ -46,7 +48,6 @@ describe('Roadmap Vuex Actions', () => {
       timeframe: mockTimeframeMonths,
       presetType: PRESET_TYPES.MONTHS,
       sortedBy: mockSortedBy,
-      initialEpicsPath: epicsPath,
       filterQueryString: '',
       basePath,
       timeframeStartDate,
@@ -76,55 +77,21 @@ describe('Roadmap Vuex Actions', () => {
       return testAction(
         actions.receiveEpicsSuccess,
         {
-          rawEpics: [
-            {
-              ...mockRawEpic,
-              start_date: '2017-12-31',
-              end_date: '2018-2-15',
-              descendantWeightSum: {
-                closedIssues: 3,
-                openedIssues: 2,
-              },
-              descendantCounts: {
-                openedEpics: 3,
-                closedEpics: 2,
-              },
-            },
-          ],
+          rawEpics: [mockRawEpic2],
         },
         state,
         [
-          { type: types.UPDATE_EPIC_IDS, payload: [mockRawEpic.id] },
+          { type: types.UPDATE_EPIC_IDS, payload: [mockRawEpic2.id] },
           {
             type: types.RECEIVE_EPICS_SUCCESS,
-            payload: [
-              {
-                ...mockFormattedEpic,
-                startDateOutOfRange: false,
-                endDateOutOfRange: false,
-                startDate: new Date(2017, 11, 31),
-                originalStartDate: new Date(2017, 11, 31),
-                endDate: new Date(2018, 1, 15),
-                originalEndDate: new Date(2018, 1, 15),
-              },
-            ],
+            payload: [mockFormattedEpic2],
           },
         ],
         [
           {
             type: 'initItemChildrenFlags',
             payload: {
-              epics: [
-                {
-                  ...mockFormattedEpic,
-                  startDateOutOfRange: false,
-                  endDateOutOfRange: false,
-                  startDate: new Date(2017, 11, 31),
-                  originalStartDate: new Date(2017, 11, 31),
-                  endDate: new Date(2018, 1, 15),
-                  originalEndDate: new Date(2018, 1, 15),
-                },
-              ],
+              epics: [mockFormattedEpic2],
             },
           },
         ],
@@ -135,15 +102,7 @@ describe('Roadmap Vuex Actions', () => {
       return testAction(
         actions.receiveEpicsSuccess,
         {
-          rawEpics: [
-            {
-              ...mockRawEpic,
-              descendantWeightSum: {
-                closedIssues: 3,
-                openedIssues: 2,
-              },
-            },
-          ],
+          rawEpics: [mockRawEpic],
           newEpic: true,
           timeframeExtended: true,
         },
@@ -162,9 +121,9 @@ describe('Roadmap Vuex Actions', () => {
               epics: [
                 {
                   ...mockFormattedEpic,
+                  newEpic: true,
                   startDateOutOfRange: true,
                   endDateOutOfRange: false,
-                  newEpic: true,
                 },
               ],
             },
@@ -223,7 +182,7 @@ describe('Roadmap Vuex Actions', () => {
           [
             {
               type: 'receiveEpicsSuccess',
-              payload: { rawEpics: mockGroupEpicsQueryResponseFormatted },
+              payload: { rawEpics: mockGroupEpics },
             },
           ],
         );
@@ -275,7 +234,7 @@ describe('Roadmap Vuex Actions', () => {
             {
               type: 'receiveEpicsSuccess',
               payload: {
-                rawEpics: mockGroupEpicsQueryResponseFormatted,
+                rawEpics: mockGroupEpics,
                 newEpic: true,
                 timeframeExtended: true,
               },
@@ -369,21 +328,7 @@ describe('Roadmap Vuex Actions', () => {
         actions.receiveChildrenSuccess,
         {
           parentItemId: '41',
-          rawChildren: [
-            {
-              ...mockRawEpic,
-              start_date: '2017-12-31',
-              end_date: '2018-2-15',
-              descendantWeightSum: {
-                closedIssues: 3,
-                openedIssues: 2,
-              },
-              descendantCounts: {
-                openedEpics: 3,
-                closedEpics: 2,
-              },
-            },
-          ],
+          rawChildren: [mockRawEpic2],
         },
         state,
         [
@@ -393,13 +338,7 @@ describe('Roadmap Vuex Actions', () => {
               parentItemId: '41',
               children: [
                 {
-                  ...mockFormattedEpic,
-                  startDateOutOfRange: false,
-                  endDateOutOfRange: false,
-                  startDate: new Date(2017, 11, 31),
-                  originalStartDate: new Date(2017, 11, 31),
-                  endDate: new Date(2018, 1, 15),
-                  originalEndDate: new Date(2018, 1, 15),
+                  ...mockFormattedEpic2,
                   isChildEpic: true,
                 },
               ],
@@ -416,13 +355,7 @@ describe('Roadmap Vuex Actions', () => {
             payload: {
               epics: [
                 {
-                  ...mockFormattedEpic,
-                  startDateOutOfRange: false,
-                  endDateOutOfRange: false,
-                  startDate: new Date(2017, 11, 31),
-                  originalStartDate: new Date(2017, 11, 31),
-                  endDate: new Date(2018, 1, 15),
-                  originalEndDate: new Date(2018, 1, 15),
+                  ...mockFormattedEpic2,
                   isChildEpic: true,
                 },
               ],
@@ -504,10 +437,6 @@ describe('Roadmap Vuex Actions', () => {
         itemExpanded: false,
       };
 
-      const children = epicUtils.extractGroupEpics(
-        mockEpicChildEpicsQueryResponse.data.group.epic.children.edges,
-      );
-
       testAction(
         actions.toggleEpic,
         { parentItem },
@@ -522,7 +451,7 @@ describe('Roadmap Vuex Actions', () => {
             type: 'receiveChildrenSuccess',
             payload: {
               parentItemId: parentItem.id,
-              rawChildren: children,
+              rawChildren: [mockChildEpicNode1],
             },
           },
         ],
@@ -668,7 +597,7 @@ describe('Roadmap Vuex Actions', () => {
             },
             {
               type: 'receiveMilestonesSuccess',
-              payload: { rawMilestones },
+              payload: { rawMilestones: mockGroupMilestones },
             },
           ],
         );
@@ -747,7 +676,7 @@ describe('Roadmap Vuex Actions', () => {
 
   describe('refreshMilestoneDates', () => {
     it('should update milestones after refreshing milestone dates to match with updated timeframe', () => {
-      const milestones = rawMilestones.map((milestone) =>
+      const milestones = mockGroupMilestones.map((milestone) =>
         roadmapItemUtils.formatRoadmapItemDetails(
           milestone,
           state.timeframeStartDate,

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

@@ -3,13 +3,7 @@ import mutations from 'ee/roadmap/store/mutations';
 
 import defaultState from 'ee/roadmap/store/state';
 
-import {
-  mockGroupId,
-  basePath,
-  epicsPath,
-  mockSortedBy,
-  mockEpic,
-} from 'ee_jest/roadmap/mock_data';
+import { mockGroupId, basePath, mockSortedBy, mockEpic } from 'ee_jest/roadmap/mock_data';
 
 const setEpicMockData = (state) => {
   state.epics = [mockEpic];
@@ -33,7 +27,6 @@ describe('Roadmap Store Mutations', () => {
         epicsFetchResultEmpty: false,
         currentGroupId: mockGroupId,
         sortedBy: mockSortedBy,
-        initialEpicsPath: epicsPath,
         defaultInnerHeight: 600,
         extendedTimeframe: [],
         filterQueryString: '',

ee/spec/frontend/roadmap/utils/epic_utils_spec.js

 import * as epicUtils from 'ee/roadmap/utils/epic_utils';
 
-import { mockGroupEpicsQueryResponse } from '../mock_data';
-
-describe('extractGroupEpics', () => {
-  it('returns array of epics with `edges->nodes` nesting removed', () => {
-    const { edges } = mockGroupEpicsQueryResponse.data.group.epics;
-    const extractedEpics = epicUtils.extractGroupEpics(edges);
-
-    expect(extractedEpics).toHaveLength(edges.length);
-    expect(extractedEpics[0]).toEqual(
-      expect.objectContaining({
-        ...edges[0].node,
-        groupName: edges[0].node.group.name,
-        groupFullName: edges[0].node.group.fullName,
-      }),
-    );
-  });
-});
-
 describe('addIsChildEpicTrueProperty', () => {
   const title = 'Lorem ipsum dolar sit';
   const description = 'Beatae suscipit dolorum nihil quidem est accusamus';