Add epic board scope to newly created epic

Changelog: fixed
EE: true

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

@@ -91,6 +91,14 @@ export function formatEpicListsPageInfo(lists) {
   return listData;
 }
 
+export function formatEpicInput(epicInput, boardConfig) {
+  const { labelIds = [], ...restEpicInput } = epicInput;
+  return {
+    ...restEpicInput,
+    addLabelIds: [...labelIds, ...boardConfig.labelIds],
+  };
+}
+
 export function transformBoardConfig(boardConfig) {
   const updatedBoardConfig = {};
   const passedFilterParams = queryToObject(window.location.search, { gatherArrays: true });

ee/app/assets/javascripts/boards/components/board_new_epic.vue

@@ -3,8 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import BoardNewItem from '~/boards/components/board_new_item.vue';
 import { toggleFormEventPrefix } from '~/boards/constants';
 import eventHub from '~/boards/eventhub';
-
-import { fullEpicBoardId } from '../boards_util';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
 import GroupSelect from './group_select.vue';
 
@@ -36,11 +35,12 @@ export default {
   methods: {
     ...mapActions(['addListNewEpic']),
     submit({ title }) {
+      const labels = this.list.label ? [this.list.label] : [];
+
       return this.addListNewEpic({
         epicInput: {
           title,
-          boardId: fullEpicBoardId(this.boardId),
-          listId: this.list.id,
+          labelIds: labels?.map((l) => getIdFromGraphQLId(l.id)),
           groupPath: this.groupPath,
         },
         list: this.list,

ee/app/assets/javascripts/boards/graphql/epic_create.mutation.graphql

 #import "ee/graphql_shared/fragments/epic.fragment.graphql"
 #import "~/graphql_shared/fragments/label.fragment.graphql"
 
-mutation CreateEpic($input: BoardEpicCreateInput!) {
-  boardEpicCreate(input: $input) {
+mutation CreateEpic($input: CreateEpicInput!) {
+  createEpic(input: $input) {
     epic {
       ...EpicNode
       labels {

ee/app/assets/javascripts/boards/stores/actions.js

@@ -21,6 +21,7 @@ import {
   formatEpic,
   formatListEpics,
   formatEpicListsPageInfo,
+  formatEpicInput,
   FiltersInfo,
 } from '../boards_util';
 
@@ -536,7 +537,7 @@ export default {
   },
 
   addListNewEpic: (
-    { dispatch, commit },
+    { state: { boardConfig }, dispatch, commit },
     { epicInput, list, placeholderId = `tmp-${new Date().getTime()}` },
   ) => {
     const placeholderEpic = {
@@ -552,14 +553,14 @@ export default {
     gqlClient
       .mutate({
         mutation: epicCreateMutation,
-        variables: { input: epicInput },
+        variables: { input: formatEpicInput(epicInput, boardConfig) },
       })
       .then(({ data }) => {
-        if (data.boardEpicCreate.errors?.length) {
-          throw new Error(data.boardEpicCreate.errors[0]);
+        if (data.createEpic.errors?.length) {
+          throw new Error(data.createEpic.errors[0]);
         }
 
-        const rawEpic = data.boardEpicCreate?.epic;
+        const rawEpic = data.createEpic?.epic;
         const formattedEpic = formatEpic({ ...rawEpic, id: getIdFromGraphQLId(rawEpic.id) });
         dispatch('removeListItem', { listId: list.id, itemId: placeholderId });
         dispatch('addListItem', { list, item: formattedEpic, position: 0 });

ee/spec/frontend/boards/components/board_new_epic_spec.js

@@ -80,8 +80,7 @@ describe('Epic boards new epic form', () => {
       list: expect.any(Object),
       epicInput: {
         title: 'Foo',
-        boardId: 'gid://gitlab/Boards::EpicBoard/1',
-        listId: 'gid://gitlab/List/1',
+        labelIds: [],
       },
     });
   });

ee/spec/frontend/boards/stores/actions_spec.js

@@ -934,7 +934,7 @@ describe('addListNewEpic', () => {
     boardType: 'group',
     fullPath: 'gitlab-org/gitlab',
     boardConfig: {
-      labelIds: [],
+      labelIds: ['gid://gitlab/GroupLabel/23'],
       assigneeId: null,
       milestoneId: -1,
     },
@@ -945,7 +945,7 @@ describe('addListNewEpic', () => {
   it('should add board scope to the epic being created', async () => {
     jest.spyOn(gqlClient, 'mutate').mockResolvedValue({
       data: {
-        boardEpicCreate: {
+        createEpic: {
           epic: mockEpic,
           errors: [],
         },
@@ -964,7 +964,7 @@ describe('addListNewEpic', () => {
           ...mockEpic,
           groupPath: state.fullPath,
           id: 'gid://gitlab/Epic/41',
-          labels: [],
+          addLabelIds: ['gid://gitlab/GroupLabel/23'],
         },
       },
     });
@@ -978,7 +978,7 @@ describe('addListNewEpic', () => {
 
     jest.spyOn(gqlClient, 'mutate').mockResolvedValue({
       data: {
-        boardEpicCreate: {
+        createEpic: {
           epic,
           errors: [],
         },
@@ -986,8 +986,8 @@ describe('addListNewEpic', () => {
     });
 
     const payload = {
-      ...epic,
-      labelIds: [...epic.labelIds, 'gid://gitlab/GroupLabel/5'],
+      ...mockEpic,
+      addLabelIds: [...epic.labelIds, 'gid://gitlab/GroupLabel/23'],
     };
 
     await actions.addListNewEpic(
@@ -999,19 +999,22 @@ describe('addListNewEpic', () => {
       mutation: epicCreateMutation,
       variables: {
         input: {
-          ...epic,
+          ...payload,
           groupPath: state.fullPath,
         },
       },
     });
-    expect(payload.labelIds).toEqual(['gid://gitlab/GroupLabel/4', 'gid://gitlab/GroupLabel/5']);
+    expect(payload.addLabelIds).toEqual([
+      'gid://gitlab/GroupLabel/4',
+      'gid://gitlab/GroupLabel/23',
+    ]);
   });
 
   describe('when issue creation mutation request succeeds', () => {
     it('dispatches a correct set of mutations', () => {
       jest.spyOn(gqlClient, 'mutate').mockResolvedValue({
         data: {
-          boardEpicCreate: {
+          createEpic: {
             epic: mockEpic,
             errors: [],
           },
@@ -1054,7 +1057,7 @@ describe('addListNewEpic', () => {
     it('dispatches a correct set of mutations', () => {
       jest.spyOn(gqlClient, 'mutate').mockResolvedValue({
         data: {
-          boardEpicCreate: {
+          createEpic: {
             epic: mockEpic,
             errors: [{ foo: 'bar' }],
           },