Fetch lists for epic boards

Review feedback

ee/app/assets/javascripts/boards/boards_util.js

+import { sortBy } from 'lodash';
 import { urlParamsToObject } from '~/lib/utils/common_utils';
 import { objectToQuery } from '~/lib/utils/url_utility';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
@@ -35,13 +36,12 @@ export function formatListEpics(listEpics) {
   let listEpicsCount;
 
   const listData = listEpics.nodes.reduce((map, list) => {
-    // TODO update when list.epics.count is available
+    // TODO update when list.epics.count is available: https://gitlab.com/gitlab-org/gitlab/-/issues/301017
     listEpicsCount = list.epics.edges.length;
-    const sortedEpics = list.epics.edges.map((epicNode) => ({
+    let sortedEpics = list.epics.edges.map((epicNode) => ({
       ...epicNode.node,
     }));
-    // TODO update when relativePosition is available on epic
-    // sortedEpics = sortBy(sortedEpics, 'relativePosition');
+    sortedEpics = sortBy(sortedEpics, 'relativePosition');
 
     return {
       ...map,

ee/app/assets/javascripts/boards/graphql/lists_epics.query.graphql

 #import "~/graphql_shared/fragments/epic.fragment.graphql"
+#import "~/graphql_shared/fragments/label.fragment.graphql"
 
 query ListEpics(
   $fullPath: ID!
@@ -16,6 +17,12 @@ query ListEpics(
             edges {
               node {
                 ...EpicNode
+                relativePosition
+                labels {
+                  nodes {
+                    ...Label
+                  }
+                }
               }
             }
             pageInfo {

ee/app/controllers/groups/epic_boards_controller.rb

@@ -8,7 +8,7 @@ class Groups::EpicBoardsController < Groups::ApplicationController
   before_action :authorize_read_board!, only: [:index]
   before_action :assign_endpoint_vars
   before_action do
-    push_frontend_feature_flag(:epic_boards, group, default_enabled: false)
+    push_frontend_feature_flag(:epic_boards, group, default_enabled: :yaml)
   end
 
   feature_category :boards

ee/spec/frontend/boards/boards_util_spec.js

-import { transformBoardConfig } from 'ee/boards/boards_util';
+import {
+  formatListEpics,
+  formatEpicListsPageInfo,
+  transformBoardConfig,
+} from 'ee/boards/boards_util';
+import { mockLabel } from './mock_data';
+
+const listId = 'gid://gitlab/Boards::EpicList/3';
+
+describe('formatListEpics', () => {
+  it('formats raw response from list epics for state', () => {
+    const rawEpicsInLists = {
+      nodes: [
+        {
+          id: 'gid://gitlab/Boards::EpicList/3',
+          epics: {
+            edges: [
+              {
+                node: {
+                  title: 'epic title',
+                  id: 'gid://gitlab/Epic/1',
+                  labels: {
+                    nodes: [mockLabel],
+                  },
+                },
+              },
+            ],
+          },
+        },
+      ],
+    };
+
+    const result = formatListEpics(rawEpicsInLists);
+
+    expect(result).toEqual({
+      epics: {
+        1: {
+          assignees: [],
+          id: 1,
+          labels: [mockLabel],
+          title: 'epic title',
+        },
+      },
+      listData: { [listId]: [1] },
+      listEpicsCount: 1,
+    });
+  });
+});
+
+describe('formatEpicListsPageInfo', () => {
+  it('formats raw pageInfo response from epics for state', () => {
+    const rawEpicsInListsPageInfo = {
+      nodes: [
+        {
+          id: listId,
+          epics: {
+            pageInfo: {
+              endCursor: 'MjA',
+              hasNextPage: true,
+            },
+          },
+        },
+      ],
+    };
+
+    const result = formatEpicListsPageInfo(rawEpicsInListsPageInfo);
+
+    expect(result).toEqual({
+      [listId]: {
+        endCursor: 'MjA',
+        hasNextPage: true,
+      },
+    });
+  });
+});
 
 describe('transformBoardConfig', () => {
   beforeEach(() => {

ee/spec/frontend/boards/mock_data.js

@@ -3,6 +3,14 @@
 import Vue from 'vue';
 import '~/boards/models/list';
 
+export const mockLabel = {
+  id: 'gid://gitlab/GroupLabel/121',
+  title: 'To Do',
+  color: '#F0AD4E',
+  textColor: '#FFFFFF',
+  description: null,
+};
+
 export const mockLists = [
   {
     id: 'gid://gitlab/List/1',
@@ -22,13 +30,7 @@ export const mockLists = [
     position: 0,
     listType: 'label',
     collapsed: false,
-    label: {
-      id: 'gid://gitlab/GroupLabel/121',
-      title: 'To Do',
-      color: '#F0AD4E',
-      textColor: '#FFFFFF',
-      description: null,
-    },
+    label: mockLabel,
     maxIssueCount: 0,
     assignee: null,
     milestone: null,