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/mock_data.js

@@ -8,7 +8,23 @@ import { dateFromString } from 'helpers/datetime_helpers';
 
 export const mockScrollBarSize = 15;
 
-export const mockGroupId = 2;
+export const mockGroupId = 1;
+
+const mockGroup1 = {
+  id: `gid://gitlab/Group/${mockGroupId}`,
+  name: 'Gitlab Org',
+  fullName: 'Gitlab Org',
+  fullPath: '/groups/gitlab-org/',
+  __typename: 'Group',
+};
+
+const mockGroup2 = {
+  id: 'gid://gitlab/Group/2',
+  name: 'Marketing',
+  fullName: 'Gitlab Org / Marketing',
+  fullPath: '/groups/gitlab-org/marketing/',
+  __typename: 'Group',
+};
 
 export const mockShellWidth = 2000;
 
@@ -18,8 +34,6 @@ export const mockSortedBy = 'start_date_asc';
 
 export const basePath = '/groups/gitlab-org/-/epics.json';
 
-export const epicsPath = '/groups/gitlab-org/-/epics.json?start_date=2017-11-1&end_date=2018-4-30';
-
 export const mockNewEpicEndpoint = '/groups/gitlab-org/-/epics';
 
 export const mockSvgPath = '/foo/bar.svg';
@@ -155,9 +169,7 @@ export const mockEpic = {
     'Explicabo et soluta minus praesentium minima ab et voluptatem. Quas architecto vero corrupti voluptatibus labore accusantium consectetur. Aliquam aut impedit voluptates illum molestias aut harum. Aut non odio praesentium aut.\n\nQuo asperiores aliquid sed nobis. Omnis sint iste provident numquam. Qui voluptatem tempore aut aut voluptas dolorem qui.\n\nEst est nemo quod est. Odit modi eos natus cum illo aut. Expedita nostrum ea est omnis magnam ut eveniet maxime. Itaque ipsam provident minima et occaecati ut. Dicta est perferendis sequi perspiciatis rerum voluptatum deserunt.',
   title:
     'Cupiditate exercitationem unde harum reprehenderit maxime eius velit recusandae incidunt quia.',
-  groupId: 2,
-  groupName: 'Gitlab Org',
-  groupFullName: 'Gitlab Org',
+  group: mockGroup1,
   startDate: new Date('2017-11-10'),
   originalStartDate: new Date('2017-11-10'),
   endDate: new Date('2018-06-02'),
@@ -169,27 +181,36 @@ export const mockEpic = {
 };
 
 export const mockRawEpic = {
-  id: 41,
-  iid: 2,
-  description: null,
+  __typename: 'Epic',
+  parent: null,
+  id: 'gid://gitlab/Epic/41',
+  iid: '2',
   title: 'Another marketing',
-  group_id: 56,
-  group_name: 'Marketing',
-  group_full_name: 'Gitlab Org / Marketing',
-  start_date: '2017-6-26',
-  end_date: '2018-03-10',
-  web_url: '/groups/gitlab-org/marketing/-/epics/2',
-  created_at: '2021-01-22T13:51:19Z',
-  updated_at: '2021-01-27T05:40:19Z',
-  user_discussions_count: 2,
+  description: '',
+  state: 'opened',
+  startDate: '2017-06-26',
+  dueDate: '2018-03-10',
+  webUrl: 'http://gdk.test:3000/groups/gitlab-org/marketing/-/epics/1',
+  hasChildren: false,
+  hasParent: false,
   confidential: false,
+  descendantWeightSum: {
+    closedIssues: 3,
+    openedIssues: 2,
+    __typename: 'EpicDescendantWeights',
+  },
   descendantCounts: {
     openedEpics: 3,
     closedEpics: 2,
+    __typename: 'EpicDescendantCount',
   },
-  group: {
-    fullPath: '/groups/gitlab-org/marketing/',
-  },
+  group: mockGroup1,
+};
+
+export const mockRawEpic2 = {
+  ...mockRawEpic,
+  startDate: '2017-12-31',
+  dueDate: '2018-02-15',
 };
 
 export const mockFormattedChildEpic1 = {
@@ -197,9 +218,7 @@ export const mockFormattedChildEpic1 = {
   iid: 52,
   description: null,
   title: 'Marketing child epic 1',
-  groupId: 56,
-  groupName: 'Marketing',
-  groupFullName: 'Gitlab Org / Marketing',
+  group: mockGroup1,
   startDate: new Date(2017, 10, 1),
   originalStartDate: new Date(2017, 5, 26),
   endDate: new Date(2018, 2, 10),
@@ -221,9 +240,7 @@ export const mockFormattedChildEpic2 = {
   iid: 53,
   description: null,
   title: 'Marketing child epic 2',
-  groupId: 56,
-  groupName: 'Marketing',
-  groupFullName: 'Gitlab Org / Marketing',
+  group: mockGroup1,
   startDate: new Date(2017, 10, 1),
   originalStartDate: new Date(2017, 5, 26),
   endDate: new Date(2018, 2, 10),
@@ -240,37 +257,27 @@ export const mockFormattedChildEpic2 = {
 };
 
 export const mockFormattedEpic = {
-  id: 41,
-  iid: 2,
-  description: null,
-  title: 'Another marketing',
-  groupId: 56,
-  groupName: 'Marketing',
-  groupFullName: 'Gitlab Org / Marketing',
+  ...mockRawEpic,
   startDate: new Date(2017, 10, 1),
   originalStartDate: new Date(2017, 5, 26),
   endDate: new Date(2018, 2, 10),
   originalEndDate: new Date(2018, 2, 10),
   startDateOutOfRange: true,
   endDateOutOfRange: false,
-  webUrl: '/groups/gitlab-org/marketing/-/epics/2',
-  newEpic: undefined,
-  createdAt: '2021-01-22T13:51:19Z',
-  updatedAt: '2021-01-27T05:40:19Z',
-  userDiscussionsCount: 2,
   confidential: false,
-  descendantWeightSum: {
-    closedIssues: 3,
-    openedIssues: 2,
-  },
-  descendantCounts: {
-    openedEpics: 3,
-    closedEpics: 2,
-  },
   isChildEpic: false,
-  group: {
-    fullPath: '/groups/gitlab-org/marketing/',
-  },
+};
+
+export const mockFormattedEpic2 = {
+  ...mockRawEpic2,
+  isChildEpic: false,
+  newEpic: undefined,
+  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),
 };
 
 export const rawEpics = [
@@ -279,43 +286,37 @@ export const rawEpics = [
     iid: 2,
     description: null,
     title: 'Another marketing',
-    group_id: 56,
-    group_name: 'Marketing',
-    group_full_name: 'Gitlab Org / Marketing',
-    start_date: '2017-12-26',
-    end_date: '2018-03-10',
-    web_url: '/groups/gitlab-org/marketing/-/epics/2',
+    startDate: '2017-12-26',
+    endDate: '2018-03-10',
+    webUrl: '/groups/gitlab-org/marketing/-/epics/2',
     descendantCounts: defaultDescendantCounts,
     hasParent: true,
     parent: {
       id: '40',
     },
+    group: mockGroup2,
   },
   {
     id: 40,
     iid: 1,
     description: null,
     title: 'Marketing epic',
-    group_id: 56,
-    group_name: 'Marketing',
-    group_full_name: 'Gitlab Org / Marketing',
-    start_date: '2017-12-25',
-    end_date: '2018-03-09',
-    web_url: '/groups/gitlab-org/marketing/-/epics/1',
+    startDate: '2017-12-25',
+    endDate: '2018-03-09',
+    webUrl: '/groups/gitlab-org/marketing/-/epics/1',
     descendantCounts: defaultDescendantCounts,
     hasParent: false,
+    group: mockGroup2,
   },
   {
     id: 39,
     iid: 12,
     description: null,
     title: 'Epic with end in first timeframe month',
-    group_id: 2,
-    group_name: 'Gitlab Org',
-    group_full_name: 'Gitlab Org',
-    start_date: '2017-04-02',
-    end_date: '2017-11-30',
-    web_url: '/groups/gitlab-org/-/epics/12',
+    group: mockGroup1,
+    startDate: '2017-04-02',
+    endDate: '2017-11-30',
+    webUrl: '/groups/gitlab-org/-/epics/12',
     descendantCounts: defaultDescendantCounts,
     hasParent: false,
   },
@@ -324,12 +325,10 @@ export const rawEpics = [
     iid: 11,
     description: null,
     title: 'Epic with end date out of range',
-    group_id: 2,
-    group_name: 'Gitlab Org',
-    group_full_name: 'Gitlab Org',
-    start_date: '2018-01-15',
-    end_date: '2020-01-03',
-    web_url: '/groups/gitlab-org/-/epics/11',
+    group: mockGroup2,
+    startDate: '2018-01-15',
+    endDate: '2020-01-03',
+    webUrl: '/groups/gitlab-org/-/epics/11',
     descendantCounts: defaultDescendantCounts,
     hasParent: false,
   },
@@ -338,12 +337,10 @@ export const rawEpics = [
     iid: 10,
     description: null,
     title: 'Epic with timeline in same month',
-    group_id: 2,
-    group_name: 'Gitlab Org',
-    group_full_name: 'Gitlab Org',
-    start_date: '2018-01-01',
-    end_date: '2018-01-31',
-    web_url: '/groups/gitlab-org/-/epics/10',
+    group: mockGroup2,
+    startDate: '2018-01-01',
+    endDate: '2018-01-31',
+    webUrl: '/groups/gitlab-org/-/epics/10',
     descendantCounts: defaultDescendantCounts,
     hasParent: false,
   },
@@ -352,12 +349,10 @@ export const rawEpics = [
     iid: 8,
     description: null,
     title: 'Epic with out of range start & null end',
-    group_id: 2,
-    group_name: 'Gitlab Org',
-    group_full_name: 'Gitlab Org',
-    start_date: '2017-09-04',
-    end_date: null,
-    web_url: '/groups/gitlab-org/-/epics/8',
+    group: mockGroup1,
+    startDate: '2017-09-04',
+    endDate: null,
+    webUrl: '/groups/gitlab-org/-/epics/8',
     descendantCounts: defaultDescendantCounts,
     hasParent: false,
   },
@@ -366,12 +361,10 @@ export const rawEpics = [
     iid: 6,
     description: null,
     title: 'Epic with only start date',
-    group_id: 2,
-    group_name: 'Gitlab Org',
-    group_full_name: 'Gitlab Org',
-    start_date: '2017-11-27',
-    end_date: null,
-    web_url: '/groups/gitlab-org/-/epics/6',
+    group: mockGroup1,
+    startDate: '2017-11-27',
+    endDate: null,
+    webUrl: '/groups/gitlab-org/-/epics/6',
     descendantCounts: defaultDescendantCounts,
     hasParent: false,
   },
@@ -381,12 +374,10 @@ export const rawEpics = [
     description:
       'Animi dolorem error ipsam assumenda. Dolor reprehenderit sit soluta molestias id. Explicabo vel dolores numquam earum ut aliquid. Quisquam aliquam a totam laborum quia.\n\nEt voluptatem reiciendis qui cum. Labore ratione delectus minus et voluptates. Dolor voluptatem nisi neque fugiat ut ullam dicta odit. Aut quaerat provident ducimus aut molestiae hic esse.\n\nSuscipit non repellat laudantium quaerat. Voluptatum dolor explicabo vel illo earum. Laborum vero occaecati qui autem cumque dolorem autem. Enim voluptatibus a dolorem et.',
     title: 'Et repellendus quo et laboriosam corrupti ex nisi qui.',
-    group_id: 2,
-    group_name: 'Gitlab Org',
-    group_full_name: 'Gitlab Org',
-    start_date: '2018-01-01',
-    end_date: '2018-02-02',
-    web_url: '/groups/gitlab-org/-/epics/4',
+    group: mockGroup1,
+    startDate: '2018-01-01',
+    endDate: '2018-02-02',
+    webUrl: '/groups/gitlab-org/-/epics/4',
     descendantCounts: defaultDescendantCounts,
     hasParent: false,
   },
@@ -396,12 +387,10 @@ export const rawEpics = [
     description:
       'Magnam placeat ut esse aut vel. Et sit ab soluta ut eos et et. Nesciunt expedita sit et optio maiores quas facilis. Provident ut aut et nihil. Nesciunt ipsum fuga labore dolor quia.\n\nSit suscipit impedit aut dolore non provident. Nesciunt nemo excepturi voluptatem natus veritatis. Vel ut possimus reiciendis dolorem et. Recusandae voluptatem voluptatum aut iure. Sapiente quia est iste similique quidem quia omnis et.\n\nId aut assumenda beatae iusto est dicta consequatur. Tempora voluptatem pariatur ab velit vero ut reprehenderit fuga. Dolor modi aspernatur eos atque eveniet harum sed voluptatem. Dolore iusto voluptas dolor enim labore dolorum consequatur dolores.',
     title: 'Nostrum ut nisi fugiat accusantium qui velit dignissimos.',
-    group_id: 2,
-    group_name: 'Gitlab Org',
-    group_full_name: 'Gitlab Org',
-    start_date: '2017-12-01',
-    end_date: '2018-03-26',
-    web_url: '/groups/gitlab-org/-/epics/3',
+    group: mockGroup1,
+    startDate: '2017-12-01',
+    endDate: '2018-03-26',
+    webUrl: '/groups/gitlab-org/-/epics/3',
     descendantCounts: defaultDescendantCounts,
     hasParent: true,
     parent: {
@@ -414,12 +403,10 @@ export const rawEpics = [
     description:
       'Deleniti id facere numquam cum consectetur sint ipsum consequatur. Odit nihil harum consequuntur est nemo adipisci. Incidunt suscipit voluptatem et culpa at voluptatem consequuntur. Rerum aliquam earum quia consequatur ipsam quae ut.\n\nQuod molestias ducimus quia ratione nostrum ut adipisci. Fugiat officiis reiciendis repellendus quia ut ipsa. Voluptatum ut dolor perferendis nostrum. Porro a ducimus sequi qui quos ea. Earum velit architecto necessitatibus at dicta.\n\nModi aut non fugiat autem doloribus nobis ea. Sit quam corrupti blanditiis nihil tempora ratione enim ex. Aliquam quia ut impedit ut velit reprehenderit quae amet. Unde quod at dolorum eligendi in ducimus perspiciatis accusamus.',
     title: 'Sit beatae amet quaerat consequatur non repudiandae qui.',
-    group_id: 2,
-    group_name: 'Gitlab Org',
-    group_full_name: 'Gitlab Org',
-    start_date: '2017-11-26',
-    end_date: '2018-03-22',
-    web_url: '/groups/gitlab-org/-/epics/2',
+    group: mockGroup1,
+    startDate: '2017-11-26',
+    endDate: '2018-03-22',
+    webUrl: '/groups/gitlab-org/-/epics/2',
     descendantCounts: defaultDescendantCounts,
     hasParent: false,
   },
@@ -430,12 +417,10 @@ export const rawEpics = [
       'Explicabo et soluta minus praesentium minima ab et voluptatem. Quas architecto vero corrupti voluptatibus labore accusantium consectetur. Aliquam aut impedit voluptates illum molestias aut harum. Aut non odio praesentium aut.\n\nQuo asperiores aliquid sed nobis. Omnis sint iste provident numquam. Qui voluptatem tempore aut aut voluptas dolorem qui.\n\nEst est nemo quod est. Odit modi eos natus cum illo aut. Expedita nostrum ea est omnis magnam ut eveniet maxime. Itaque ipsam provident minima et occaecati ut. Dicta est perferendis sequi perspiciatis rerum voluptatum deserunt.',
     title:
       'Cupiditate exercitationem unde harum reprehenderit maxime eius velit recusandae incidunt quia.',
-    group_id: 2,
-    group_name: 'Gitlab Org',
-    group_full_name: 'Gitlab Org',
-    start_date: '2017-07-10',
-    end_date: '2018-06-02',
-    web_url: '/groups/gitlab-org/-/epics/1',
+    group: mockGroup1,
+    startDate: '2017-07-10',
+    endDate: '2018-06-02',
+    webUrl: '/groups/gitlab-org/-/epics/1',
     descendantCounts: defaultDescendantCounts,
     hasParent: false,
   },
@@ -444,12 +429,10 @@ export const rawEpics = [
     iid: 2,
     description: null,
     title: 'Epic with invalid dates',
-    group_id: 56,
-    group_name: 'Marketing',
-    group_full_name: 'Gitlab Org / Marketing',
-    start_date: '2018-12-26',
-    end_date: '2018-03-10',
-    web_url: '/groups/gitlab-org/marketing/-/epics/22',
+    group: mockGroup2,
+    startDate: '2018-12-26',
+    endDate: '2018-03-10',
+    webUrl: '/groups/gitlab-org/marketing/-/epics/22',
     descendantCounts: defaultDescendantCounts,
     hasParent: false,
   },
@@ -502,73 +485,115 @@ export const mockUnsortedEpics = [
   },
 ];
 
-export const mockGroupEpicsQueryResponse = {
-  data: {
-    group: {
-      id: 'gid://gitlab/Group/2',
-      name: 'Gitlab Org',
-      epics: {
-        edges: [
-          {
-            node: {
+export const mockEpicNode1 = {
+  __typename: 'Epic',
+  parent: null,
   id: 'gid://gitlab/Epic/40',
+  iid: '2',
   title: 'Marketing epic',
+  description: 'Mock epic description',
+  state: 'opened',
   startDate: '2017-12-25',
-              dueDate: '2018-03-09',
-              webUrl: '/groups/gitlab-org/marketing/-/epics/1',
-              group: {
-                name: 'Gitlab Org',
-                fullName: 'Gitlab Org',
-              },
+  dueDate: '2018-02-15',
+  webUrl: 'http://gdk.test:3000/groups/gitlab-org/marketing/-/epics/1',
+  hasChildren: false,
+  hasParent: false,
+  confidential: false,
+  descendantWeightSum: {
+    closedIssues: 3,
+    openedIssues: 2,
+    __typename: 'EpicDescendantWeights',
   },
+  descendantCounts: {
+    openedEpics: 3,
+    closedEpics: 2,
+    __typename: 'EpicDescendantCount',
   },
-          {
-            node: {
+  group: mockGroup1,
+};
+
+export const mockEpicNode2 = {
+  __typename: 'Epic',
+  parent: null,
   id: 'gid://gitlab/Epic/41',
+  iid: '3',
   title: 'Another marketing',
   startDate: '2017-12-26',
   dueDate: '2018-03-10',
-              webUrl: '/groups/gitlab-org/marketing/-/epics/2',
+  state: 'opened',
+  webUrl: 'http://gdk.test:3000/groups/gitlab-org/marketing/-/epics/2',
+  descendantWeightSum: {
+    closedIssues: 0,
+    openedIssues: 1,
+    __typename: 'EpicDescendantWeights',
+  },
+  descendantCounts: {
+    openedEpics: 0,
+    closedEpics: 0,
+    __typename: 'EpicDescendantCount',
+  },
+  group: mockGroup1,
+};
+
+export const mockGroupEpics = [mockEpicNode1, mockEpicNode2];
+
+export const mockGroupEpicsQueryResponse = {
+  data: {
     group: {
+      id: 'gid://gitlab/Group/1',
       name: 'Gitlab Org',
-                fullName: 'Gitlab Org',
+      epics: {
+        edges: [
+          {
+            node: {
+              ...mockEpicNode1,
             },
+            __typename: 'EpicEdge',
           },
+          {
+            node: {
+              ...mockEpicNode2,
+            },
+            __typename: 'EpicEdge',
           },
         ],
+        __typename: 'EpicConnection',
       },
+      __typename: 'Group',
     },
   },
 };
 
-export const mockGroupEpicsQueryResponseFormatted = [
-  {
-    id: 'gid://gitlab/Epic/40',
-    title: 'Marketing epic',
-    startDate: '2017-12-25',
-    dueDate: '2018-03-09',
-    webUrl: '/groups/gitlab-org/marketing/-/epics/1',
-    group: {
-      name: 'Gitlab Org',
-      fullName: 'Gitlab Org',
+export const mockChildEpicNode1 = {
+  __typename: 'Epic',
+  id: 'gid://gitlab/Epic/70',
+  iid: '10',
+  title: 'child epic title',
+  description: null,
+  state: 'opened',
+  webUrl: 'http://gdk.test:3000/groups/gitlab-org/-/epics/10',
+  startDate: null,
+  dueDate: null,
+  hasChildren: false,
+  hasParent: true,
+  confidential: false,
+  descendantWeightSum: {
+    closedIssues: 0,
+    openedIssues: 0,
+    __typename: 'EpicDescendantWeights',
   },
-    groupName: 'Gitlab Org',
-    groupFullName: 'Gitlab Org',
+  descendantCounts: {
+    openedEpics: 0,
+    closedEpics: 0,
+    __typename: 'EpicDescendantCount',
   },
-  {
-    id: 'gid://gitlab/Epic/41',
-    title: 'Another marketing',
-    startDate: '2017-12-26',
-    dueDate: '2018-03-10',
-    webUrl: '/groups/gitlab-org/marketing/-/epics/2',
   group: {
     name: 'Gitlab Org',
     fullName: 'Gitlab Org',
+    fullPath: 'gitlab-org',
+    __typename: 'Group',
   },
-    groupName: 'Gitlab Org',
-    groupFullName: 'Gitlab Org',
-  },
-];
+};
 
 export const mockEpicChildEpicsQueryResponse = {
   data: {
@@ -578,54 +603,27 @@ export const mockEpicChildEpicsQueryResponse = {
       epic: {
         id: 'gid://gitlab/Epic/1',
         title: 'Error omnis quos consequatur',
+        hasChildren: true,
         children: {
-          edges: mockGroupEpicsQueryResponse.data.group.epics.edges,
-        },
+          edges: [
+            {
+              node: {
+                ...mockChildEpicNode1,
               },
+              __typename: 'EpicEdge',
             },
+          ],
+          __typename: 'EpicConnection',
         },
-};
-
-export const mockEpicChildEpicsQueryResponseFormatted = {
-  data: {
-    group: {
-      id: 'gid://gitlab/Group/2',
-      name: 'Gitlab Org',
-      epic: {
-        id: 'gid://gitlab/Epic/1',
-        title: 'Error omnis quos consequatur',
-        children: [mockFormattedChildEpic1, mockFormattedChildEpic2],
+        __typename: 'Epic',
       },
+      __typename: 'Group',
     },
   },
 };
 
-export const rawMilestones = [
-  {
-    id: 'gid://gitlab/Milestone/40',
-    iid: 1,
-    state: 'active',
-    description: null,
-    title: 'Milestone 1',
-    startDate: '2017-12-25',
-    dueDate: '2018-03-09',
-    webPath: '/groups/gitlab-org/-/milestones/1',
-  },
-  {
-    id: 'gid://gitlab/Milestone/41',
-    iid: 2,
-    state: 'active',
-    description: null,
-    title: 'Milestone 2',
-    startDate: '2017-12-26',
-    dueDate: '2018-03-10',
-    webPath: '/groups/gitlab-org/-/milestones/2',
-  },
-];
-
 export const mockMilestone = {
   id: 1,
-  iid: 1,
   state: 'active',
   description:
     'Explicabo et soluta minus praesentium minima ab et voluptatem. Quas architecto vero corrupti voluptatibus labore accusantium consectetur. Aliquam aut impedit voluptates illum molestias aut harum. Aut non odio praesentium aut.\n\nQuo asperiores aliquid sed nobis. Omnis sint iste provident numquam. Qui voluptatem tempore aut aut voluptas dolorem qui.\n\nEst est nemo quod est. Odit modi eos natus cum illo aut. Expedita nostrum ea est omnis magnam ut eveniet maxime. Itaque ipsam provident minima et occaecati ut. Dicta est perferendis sequi perspiciatis rerum voluptatum deserunt.',
@@ -641,7 +639,6 @@ export const mockMilestone = {
 
 export const mockMilestone2 = {
   id: 2,
-  iid: 2,
   state: 'active',
   description:
     'Explicabo et soluta minus praesentium minima ab et voluptatem. Quas architecto vero corrupti voluptatibus labore accusantium consectetur. Aliquam aut impedit voluptates illum molestias aut harum. Aut non odio praesentium aut.\n\nQuo asperiores aliquid sed nobis. Omnis sint iste provident numquam. Qui voluptatem tempore aut aut voluptas dolorem qui.\n\nEst est nemo quod est. Odit modi eos natus cum illo aut. Expedita nostrum ea est omnis magnam ut eveniet maxime. Itaque ipsam provident minima et occaecati ut. Dicta est perferendis sequi perspiciatis rerum voluptatum deserunt.',
@@ -656,7 +653,6 @@ export const mockMilestone2 = {
 
 export const mockFormattedMilestone = {
   id: 1,
-  iid: 1,
   state: 'active',
   title:
     'Cupiditate exercitationem unde harum reprehenderit maxime eius velit recusandae incidunt quia.',
@@ -675,6 +671,36 @@ export const mockFormattedMilestone = {
   newMilestone: undefined,
 };
 
+export const mockGroupMilestoneNode1 = {
+  id: 'gid://gitlab/Milestone/40',
+  title: 'Sprint - Tempore voluptatibus et aut consequatur similique animi dolores veritatis.',
+  description: '',
+  state: 'active',
+  startDate: '2017-12-25',
+  dueDate: '2018-03-09',
+  webPath: '/gitlab-org/gitlab-org/-/milestones/1',
+  projectMilestone: false,
+  groupMilestone: true,
+  subgroupMilestone: false,
+  __typename: 'Milestone',
+};
+
+export const mockGroupMilestoneNode2 = {
+  id: 'gid://gitlab/Milestone/41',
+  description: 'Maiores dolor vel nihil non nam commodi.',
+  title: 'Milestone 2',
+  state: 'active',
+  startDate: '2017-12-26',
+  dueDate: '2018-03-10',
+  webPath: '/gitlab-org/gitlab-test/-/milestones/2',
+  projectMilestone: false,
+  groupMilestone: true,
+  subgroupMilestone: false,
+  __typename: 'Milestone',
+};
+
+export const mockGroupMilestones = [mockGroupMilestoneNode1, mockGroupMilestoneNode2];
+
 export const mockGroupMilestonesQueryResponse = {
   data: {
     group: {
@@ -684,30 +710,20 @@ export const mockGroupMilestonesQueryResponse = {
         edges: [
           {
             node: {
-              iid: 1,
-              id: 'gid://gitlab/Milestone/40',
-              state: 'active',
-              description: null,
-              title: 'Milestone 1',
-              startDate: '2017-12-25',
-              dueDate: '2018-03-09',
-              webPath: '/groups/gitlab-org/-/milestones/1',
+              ...mockGroupMilestoneNode1,
             },
+            __typename: 'MilestoneEdge',
           },
           {
             node: {
-              iid: 2,
-              id: 'gid://gitlab/Milestone/41',
-              state: 'active',
-              description: null,
-              title: 'Milestone 2',
-              startDate: '2017-12-26',
-              dueDate: '2018-03-10',
-              webPath: '/groups/gitlab-org/-/milestones/2',
+              ...mockGroupMilestoneNode2,
             },
+            __typename: 'MilestoneEdge',
           },
         ],
+        __typename: 'MilestoneConnection',
       },
+      __typename: 'Group',
     },
   },
 };

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';