Display Epics in Epic Board

Rename state and mutations from issues to be more generic

app/assets/javascripts/boards/boards_util.js

@@ -36,11 +36,11 @@ export function formatIssue(issue) {
 }
 
 export function formatListIssues(listIssues) {
-  const issues = {};
-  let listIssuesCount;
+  const boardItems = {};
+  let listItemsCount;
 
   const listData = listIssues.nodes.reduce((map, list) => {
-    listIssuesCount = list.issues.count;
+    listItemsCount = list.issues.count;
     let sortedIssues = list.issues.edges.map((issueNode) => ({
       ...issueNode.node,
     }));
@@ -58,14 +58,14 @@ export function formatListIssues(listIssues) {
           assignees: i.assignees?.nodes || [],
         };
 
-        issues[id] = listIssue;
+        boardItems[id] = listIssue;
 
         return id;
       }),
     };
   }, {});
 
-  return { listData, issues, listIssuesCount };
+  return { listData, boardItems, listItemsCount };
 }
 
 export function formatListsPageInfo(lists) {

app/assets/javascripts/boards/components/board_column.vue

@@ -32,12 +32,12 @@ export default {
   },
   computed: {
     ...mapState(['filterParams', 'highlightedLists']),
-    ...mapGetters(['getIssuesByList']),
+    ...mapGetters(['getBoardItemsByList']),
     highlighted() {
       return this.highlightedLists.includes(this.list.id);
     },
-    listIssues() {
-      return this.getIssuesByList(this.list.id);
+    listItems() {
+      return this.getBoardItemsByList(this.list.id);
     },
     isListDraggable() {
       return isListDraggable(this.list);
@@ -87,7 +87,7 @@ export default {
       <board-list
         ref="board-list"
         :disabled="disabled"
-        :issues="listIssues"
+        :board-items="listItems"
         :list="list"
         :can-admin-list="canAdminList"
       />

app/assets/javascripts/boards/components/board_list.vue

@@ -12,8 +12,8 @@ import BoardNewIssue from './board_new_issue.vue';
 export default {
   name: 'BoardList',
   i18n: {
-    loadingIssues: __('Loading issues'),
-    loadingMoreissues: __('Loading more issues'),
+    loading: __('Loading'),
+    loadingMoreboardItems: __('Loading more'),
     showingAllIssues: __('Showing all issues'),
   },
   components: {
@@ -30,7 +30,7 @@ export default {
       type: Object,
       required: true,
     },
-    issues: {
+    boardItems: {
       type: Array,
       required: true,
     },
@@ -51,11 +51,11 @@ export default {
     ...mapState(['pageInfoByListId', 'listsFlags']),
     paginatedIssueText() {
       return sprintf(__('Showing %{pageSize} of %{total} issues'), {
-        pageSize: this.issues.length,
+        pageSize: this.boardItems.length,
         total: this.list.issuesCount,
       });
     },
-    issuesSizeExceedsMax() {
+    boardItemsSizeExceedsMax() {
       return this.list.maxIssueCount > 0 && this.list.issuesCount > this.list.maxIssueCount;
     },
     hasNextPage() {
@@ -72,7 +72,7 @@ export default {
       return this.canAdminList ? this.$refs.list.$el : this.$refs.list;
     },
     showingAllIssues() {
-      return this.issues.length === this.list.issuesCount;
+      return this.boardItems.length === this.list.issuesCount;
     },
     treeRootWrapper() {
       return this.canAdminList ? Draggable : 'ul';
@@ -85,14 +85,14 @@ export default {
         tag: 'ul',
         'ghost-class': 'board-card-drag-active',
         'data-list-id': this.list.id,
-        value: this.issues,
+        value: this.boardItems,
       };
 
       return this.canAdminList ? options : {};
     },
   },
   watch: {
-    issues() {
+    boardItems() {
       this.$nextTick(() => {
         this.showCount = this.scrollHeight() > Math.ceil(this.listHeight());
       });
@@ -201,7 +201,7 @@ export default {
     <div
       v-if="loading"
       class="gl-mt-4 gl-text-center"
-      :aria-label="$options.i18n.loadingIssues"
+      :aria-label="$options.i18n.loading"
       data-testid="board_list_loading"
     >
       <gl-loading-icon />
@@ -214,25 +214,25 @@ export default {
       v-bind="treeRootOptions"
       :data-board="list.id"
       :data-board-type="list.listType"
-      :class="{ 'bg-danger-100': issuesSizeExceedsMax }"
+      :class="{ 'bg-danger-100': boardItemsSizeExceedsMax }"
       class="board-list gl-w-full gl-h-full gl-list-style-none gl-mb-0 gl-p-2 js-board-list"
       data-testid="tree-root-wrapper"
       @start="handleDragOnStart"
       @end="handleDragOnEnd"
     >
       <board-card
-        v-for="(issue, index) in issues"
+        v-for="(item, index) in boardItems"
         ref="issue"
-        :key="issue.id"
+        :key="item.id"
         :index="index"
         :list="list"
-        :issue="issue"
+        :issue="item"
         :disabled="disabled"
       />
       <li v-if="showCount" class="board-list-count gl-text-center" data-issue-id="-1">
         <gl-loading-icon
           v-if="loadingMore"
-          :label="$options.i18n.loadingMoreissues"
+          :label="$options.i18n.loadingMoreboardItems"
           data-testid="count-loading-icon"
         />
         <span v-if="showingAllIssues">{{ $options.i18n.showingAllIssues }}</span>

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

@@ -289,9 +289,9 @@ export default {
       })
       .then(({ data }) => {
         const { lists } = data[boardType]?.board;
-        const listIssues = formatListIssues(lists);
+        const listItems = formatListIssues(lists);
         const listPageInfo = formatListsPageInfo(lists);
-        commit(types.RECEIVE_ITEMS_FOR_LIST_SUCCESS, { listIssues, listPageInfo, listId });
+        commit(types.RECEIVE_ITEMS_FOR_LIST_SUCCESS, { listItems, listPageInfo, listId });
       })
       .catch(() => commit(types.RECEIVE_ITEMS_FOR_LIST_FAILURE, listId));
   },
@@ -304,8 +304,8 @@ export default {
     { state, commit },
     { issueId, issueIid, issuePath, fromListId, toListId, moveBeforeId, moveAfterId },
   ) => {
-    const originalIssue = state.issues[issueId];
-    const fromList = state.issuesByListId[fromListId];
+    const originalIssue = state.boardItems[issueId];
+    const fromList = state.boardItemsByListId[fromListId];
     const originalIndex = fromList.indexOf(Number(issueId));
     commit(types.MOVE_ISSUE, { originalIssue, fromListId, toListId, moveBeforeId, moveAfterId });
 

app/assets/javascripts/boards/stores/getters.js

@@ -4,17 +4,17 @@ import { inactiveId } from '../constants';
 export default {
   isSidebarOpen: (state) => state.activeId !== inactiveId,
   isSwimlanesOn: () => false,
-  getIssueById: (state) => (id) => {
-    return state.issues[id] || {};
+  getBoardItemById: (state) => (id) => {
+    return state.boardItems[id] || {};
   },
 
-  getIssuesByList: (state, getters) => (listId) => {
-    const listIssueIds = state.issuesByListId[listId] || [];
-    return listIssueIds.map((id) => getters.getIssueById(id));
+  getBoardItemsByList: (state, getters) => (listId) => {
+    const listItemsIds = state.boardItemsByListId[listId] || [];
+    return listItemsIds.map((id) => getters.getBoardItemById(id));
   },
 
   activeIssue: (state) => {
-    return state.issues[state.activeId] || {};
+    return state.boardItems[state.activeId] || {};
   },
 
   groupPathForActiveIssue: (_, getters) => {

app/assets/javascripts/boards/stores/mutations.js

@@ -11,13 +11,13 @@ const notImplemented = () => {
 };
 
 export const removeIssueFromList = ({ state, listId, issueId }) => {
-  Vue.set(state.issuesByListId, listId, pull(state.issuesByListId[listId], issueId));
+  Vue.set(state.boardItemsByListId, listId, pull(state.boardItemsByListId[listId], issueId));
   const list = state.boardLists[listId];
   Vue.set(state.boardLists, listId, { ...list, issuesCount: list.issuesCount - 1 });
 };
 
 export const addIssueToList = ({ state, listId, issueId, moveBeforeId, moveAfterId, atIndex }) => {
-  const listIssues = state.issuesByListId[listId];
+  const listIssues = state.boardItemsByListId[listId];
   let newIndex = atIndex || 0;
   if (moveBeforeId) {
     newIndex = listIssues.indexOf(moveBeforeId) + 1;
@@ -25,7 +25,7 @@ export const addIssueToList = ({ state, listId, issueId, moveBeforeId, moveAfter
     newIndex = listIssues.indexOf(moveAfterId);
   }
   listIssues.splice(newIndex, 0, issueId);
-  Vue.set(state.issuesByListId, listId, listIssues);
+  Vue.set(state.boardItemsByListId, listId, listIssues);
   const list = state.boardLists[listId];
   Vue.set(state.boardLists, listId, { ...list, issuesCount: list.issuesCount + 1 });
 };
@@ -108,14 +108,13 @@ export default {
     Vue.set(state.listsFlags, listId, { [fetchNext ? 'isLoadingMore' : 'isLoading']: true });
   },
 
-  [mutationTypes.RECEIVE_ITEMS_FOR_LIST_SUCCESS]: (state, { listIssues, listPageInfo, listId }) => {
-    const { listData, issues } = listIssues;
-    Vue.set(state, 'issues', { ...state.issues, ...issues });
-
+  [mutationTypes.RECEIVE_ITEMS_FOR_LIST_SUCCESS]: (state, { listItems, listPageInfo, listId }) => {
+    const { listData, boardItems } = listItems;
+    Vue.set(state, 'boardItems', { ...state.boardItems, ...boardItems });
     Vue.set(
-      state.issuesByListId,
+      state.boardItemsByListId,
       listId,
-      union(state.issuesByListId[listId] || [], listData[listId]),
+      union(state.boardItemsByListId[listId] || [], listData[listId]),
     );
     Vue.set(state.pageInfoByListId, listId, listPageInfo[listId]);
     Vue.set(state.listsFlags, listId, { isLoading: false, isLoadingMore: false });
@@ -129,18 +128,18 @@ export default {
   },
 
   [mutationTypes.RESET_ISSUES]: (state) => {
-    Object.keys(state.issuesByListId).forEach((listId) => {
-      Vue.set(state.issuesByListId, listId, []);
+    Object.keys(state.boardItemsByListId).forEach((listId) => {
+      Vue.set(state.boardItemsByListId, listId, []);
     });
   },
 
   [mutationTypes.UPDATE_ISSUE_BY_ID]: (state, { issueId, prop, value }) => {
-    if (!state.issues[issueId]) {
+    if (!state.boardItems[issueId]) {
       /* eslint-disable-next-line @gitlab/require-i18n-strings */
       throw new Error('No issue found.');
     }
 
-    Vue.set(state.issues[issueId], prop, value);
+    Vue.set(state.boardItems[issueId], prop, value);
   },
 
   [mutationTypes.SET_ASSIGNEE_LOADING](state, isLoading) {
@@ -167,7 +166,7 @@ export default {
     const toList = state.boardLists[toListId];
 
     const issue = moveIssueListHelper(originalIssue, fromList, toList);
-    Vue.set(state.issues, issue.id, issue);
+    Vue.set(state.boardItems, issue.id, issue);
 
     removeIssueFromList({ state, listId: fromListId, issueId: issue.id });
     addIssueToList({ state, listId: toListId, issueId: issue.id, moveBeforeId, moveAfterId });
@@ -175,7 +174,7 @@ export default {
 
   [mutationTypes.MOVE_ISSUE_SUCCESS]: (state, { issue }) => {
     const issueId = getIdFromGraphQLId(issue.id);
-    Vue.set(state.issues, issueId, formatIssue({ ...issue, id: issueId }));
+    Vue.set(state.boardItems, issueId, formatIssue({ ...issue, id: issueId }));
   },
 
   [mutationTypes.MOVE_ISSUE_FAILURE]: (
@@ -183,7 +182,7 @@ export default {
     { originalIssue, fromListId, toListId, originalIndex },
   ) => {
     state.error = s__('Boards|An error occurred while moving the issue. Please try again.');
-    Vue.set(state.issues, originalIssue.id, originalIssue);
+    Vue.set(state.boardItems, originalIssue.id, originalIssue);
     removeIssueFromList({ state, listId: toListId, issueId: originalIssue.id });
     addIssueToList({
       state,
@@ -216,7 +215,7 @@ export default {
       issueId: issue.id,
       atIndex: position,
     });
-    Vue.set(state.issues, issue.id, issue);
+    Vue.set(state.boardItems, issue.id, issue);
   },
 
   [mutationTypes.ADD_ISSUE_TO_LIST_FAILURE]: (state, { list, issueId }) => {
@@ -226,7 +225,7 @@ export default {
 
   [mutationTypes.REMOVE_ISSUE_FROM_LIST]: (state, { list, issue }) => {
     removeIssueFromList({ state, listId: list.id, issueId: issue.id });
-    Vue.delete(state.issues, issue.id);
+    Vue.delete(state.boardItems, issue.id);
   },
 
   [mutationTypes.SET_CURRENT_PAGE]: () => {

app/assets/javascripts/boards/stores/state.js

@@ -9,10 +9,10 @@ export default () => ({
   sidebarType: '',
   boardLists: {},
   listsFlags: {},
-  issuesByListId: {},
+  boardItemsByListId: {},
   isSettingAssignees: false,
   pageInfoByListId: {},
-  issues: {},
+  boardItems: {},
   filterParams: {},
   boardConfig: {},
   labels: [],

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

@@ -32,12 +32,12 @@ export function fullEpicBoardId(epicBoardId) {
 }
 
 export function formatListEpics(listEpics) {
-  const epics = {};
-  let listEpicsCount;
+  const boardItems = {};
+  let listItemsCount;
 
   const listData = listEpics.nodes.reduce((map, list) => {
     // TODO update when list.epics.count is available: https://gitlab.com/gitlab-org/gitlab/-/issues/301017
-    listEpicsCount = list.epics.edges.length;
+    listItemsCount = list.epics.edges.length;
     let sortedEpics = list.epics.edges.map((epicNode) => ({
       ...epicNode.node,
     }));
@@ -55,14 +55,14 @@ export function formatListEpics(listEpics) {
           assignees: i.assignees?.nodes || [],
         };
 
-        epics[id] = listEpic;
+        boardItems[id] = listEpic;
 
         return id;
       }),
     };
   }, {});
 
-  return { listData, epics, listEpicsCount };
+  return { listData, boardItems, listItemsCount };
 }
 
 export function formatEpicListsPageInfo(lists) {

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

@@ -76,7 +76,7 @@ const fetchAndFormatListIssues = (state, extraVariables) => {
     })
     .then(({ data }) => {
       const { lists } = data[boardType]?.board;
-      return { listIssues: formatListIssues(lists), listPageInfo: formatListsPageInfo(lists) };
+      return { listItems: formatListIssues(lists), listPageInfo: formatListsPageInfo(lists) };
     });
 };
 
@@ -100,7 +100,7 @@ const fetchAndFormatListEpics = (state, extraVariables) => {
     })
     .then(({ data }) => {
       const { lists } = data.group?.epicBoard;
-      return { listEpics: formatListEpics(lists), listPageInfo: formatEpicListsPageInfo(lists) };
+      return { listItems: formatListEpics(lists), listPageInfo: formatEpicListsPageInfo(lists) };
     });
 };
 
@@ -317,12 +317,10 @@ export default {
     };
 
     if (state.isEpicBoard) {
-      // This currently always fails. Epics will be loaded and displayed in the next iteration
-      // Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/233438
       return fetchAndFormatListEpics(state, variables)
-        .then(({ listEpics, listPageInfo }) => {
+        .then(({ listItems, listPageInfo }) => {
           commit(types.RECEIVE_ITEMS_FOR_LIST_SUCCESS, {
-            listEpics,
+            listItems,
             listPageInfo,
             listId,
             noEpicIssues,
@@ -332,9 +330,9 @@ export default {
     }
 
     return fetchAndFormatListIssues(state, variables)
-      .then(({ listIssues, listPageInfo }) => {
+      .then(({ listItems, listPageInfo }) => {
         commit(types.RECEIVE_ITEMS_FOR_LIST_SUCCESS, {
-          listIssues,
+          listItems,
           listPageInfo,
           listId,
           noEpicIssues,
@@ -353,8 +351,8 @@ export default {
     };
 
     return fetchAndFormatListIssues(state, variables)
-      .then(({ listIssues }) => {
-        commit(types.RECEIVE_ISSUES_FOR_EPIC_SUCCESS, { ...listIssues, epicId });
+      .then(({ listItems }) => {
+        commit(types.RECEIVE_ISSUES_FOR_EPIC_SUCCESS, { ...listItems, epicId });
       })
       .catch(() => commit(types.RECEIVE_ISSUES_FOR_EPIC_FAILURE, epicId));
   },
@@ -484,8 +482,8 @@ export default {
     { state, commit },
     { issueId, issueIid, issuePath, fromListId, toListId, moveBeforeId, moveAfterId, epicId },
   ) => {
-    const originalIssue = state.issues[issueId];
-    const fromList = state.issuesByListId[fromListId];
+    const originalIssue = state.boardItems[issueId];
+    const fromList = state.boardItemsByListId[fromListId];
     const originalIndex = fromList.indexOf(Number(issueId));
     commit(types.MOVE_ISSUE, {
       originalIssue,

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

@@ -8,12 +8,12 @@ export default {
   },
   getIssuesByEpic: (state, getters) => (listId, epicId) => {
     return getters
-      .getIssuesByList(listId)
+      .getBoardItemsByList(listId)
       .filter((issue) => issue.epic && issue.epic.id === epicId);
   },
 
   getUnassignedIssues: (state, getters) => (listId) => {
-    return getters.getIssuesByList(listId).filter((i) => Boolean(i.epic) === false);
+    return getters.getBoardItemsByList(listId).filter((i) => Boolean(i.epic) === false);
   },
 
   shouldUseGraphQL: (state) => {

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

@@ -65,33 +65,50 @@ export default {
 
   [mutationTypes.RECEIVE_ITEMS_FOR_LIST_SUCCESS]: (
     state,
-    { listIssues, listPageInfo, listId, noEpicIssues },
+    { listItems, listPageInfo, listId, noEpicIssues },
   ) => {
-    const { listData, issues, listIssuesCount } = listIssues;
-    Vue.set(state, 'issues', { ...state.issues, ...issues });
+    const { listData, boardItems, listItemsCount } = listItems;
+    Vue.set(state, 'boardItems', { ...state.boardItems, ...boardItems });
     Vue.set(
-      state.issuesByListId,
+      state.boardItemsByListId,
       listId,
-      union(state.issuesByListId[listId] || [], listData[listId]),
+      union(state.boardItemsByListId[listId] || [], listData[listId]),
     );
     Vue.set(state.pageInfoByListId, listId, listPageInfo[listId]);
     Vue.set(state.listsFlags, listId, {
       isLoading: false,
       isLoadingMore: false,
-      unassignedIssuesCount: noEpicIssues ? listIssuesCount : undefined,
+      unassignedIssuesCount: noEpicIssues ? listItemsCount : undefined,
     });
   },
 
+  [mutationTypes.RECEIVE_ITEMS_FOR_LIST_FAILURE]: (state, listId) => {
+    if (state.isEpicBoard) {
+      state.error = s__(
+        'Boards|An error occurred while fetching the board epics. Please reload the page.',
+      );
+    } else {
+      state.error = s__(
+        'Boards|An error occurred while fetching the board issues. Please reload the page.',
+      );
+    }
+    Vue.set(state.listsFlags, listId, { isLoading: false, isLoadingMore: false });
+  },
+
   [mutationTypes.REQUEST_ISSUES_FOR_EPIC]: (state, epicId) => {
     Vue.set(state.epicsFlags, epicId, { isLoading: true });
   },
 
-  [mutationTypes.RECEIVE_ISSUES_FOR_EPIC_SUCCESS]: (state, { listData, issues, epicId }) => {
+  [mutationTypes.RECEIVE_ISSUES_FOR_EPIC_SUCCESS]: (state, { listData, boardItems, epicId }) => {
     Object.entries(listData).forEach(([listId, list]) => {
-      Vue.set(state.issuesByListId, listId, union(state.issuesByListId[listId] || [], list));
+      Vue.set(
+        state.boardItemsByListId,
+        listId,
+        union(state.boardItemsByListId[listId] || [], list),
+      );
     });
 
-    Vue.set(state, 'issues', { ...state.issues, ...issues });
+    Vue.set(state, 'boardItems', { ...state.boardItems, ...boardItems });
     Vue.set(state.epicsFlags, epicId, { isLoading: false });
   },
 
@@ -157,9 +174,9 @@ export default {
     const issue = moveIssueListHelper(originalIssue, fromList, toList);
 
     if (epicId === null) {
-      Vue.set(state.issues, issue.id, { ...issue, epic: null });
+      Vue.set(state.boardItems, issue.id, { ...issue, epic: null });
     } else if (epicId !== undefined) {
-      Vue.set(state.issues, issue.id, { ...issue, epic: { id: epicId } });
+      Vue.set(state.boardItems, issue.id, { ...issue, epic: { id: epicId } });
     }
 
     removeIssueFromList({ state, listId: fromListId, issueId: issue.id });

ee/spec/features/epic_boards/epic_boards_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'epic boards', :js do
+  let_it_be(:user) { create(:user) }
+  let_it_be(:group) { create(:group, :public) }
+
+  let_it_be(:epic_board) { create(:epic_board, group: group) }
+  let_it_be(:label) { create(:group_label, group: group, name: 'Label1') }
+  let_it_be(:label_list) { create(:epic_list, epic_board: epic_board, label: label, position: 0) }
+  let_it_be(:backlog_list) { create(:epic_list, epic_board: epic_board, list_type: :closed) }
+  let_it_be(:closed_list) { create(:epic_list, epic_board: epic_board, list_type: :backlog) }
+
+  let_it_be(:epic1) { create(:epic, group: group, labels: [label], title: 'Epic1') }
+  let_it_be(:epic2) { create(:epic, group: group, title: 'Epic2') }
+
+  context 'display epics in board' do
+    before do
+      stub_licensed_features(epics: true)
+      sign_in(user)
+      visit_epic_boards_page
+    end
+
+    it 'displays default lists and a label list' do
+      lists = %w[Open Label1 Closed]
+
+      wait_for_requests
+
+      expect(page).to have_selector('.board-header', count: 3)
+
+      page.all('.board-header').each_with_index do |list, i|
+        expect(list.find('.board-title')).to have_content(lists[i])
+      end
+    end
+
+    it 'displays one epic in Open list' do
+      page.within("[data-board-type='backlog']") do
+        expect(page).to have_selector('.board-card', count: 1)
+        page.within(first('.board-card')) do
+          expect(page).to have_content('Epic2')
+        end
+      end
+    end
+
+    it 'displays one epic in Label list' do
+      page.within("[data-board-type='label']") do
+        expect(page).to have_selector('.board-card', count: 1)
+        page.within(first('.board-card')) do
+          expect(page).to have_content('Epic1')
+        end
+      end
+    end
+  end
+
+  def visit_epic_boards_page
+    visit group_epic_boards_path(group)
+    wait_for_requests
+  end
+end

ee/spec/frontend/boards/boards_util_spec.js

@@ -33,7 +33,7 @@ describe('formatListEpics', () => {
     const result = formatListEpics(rawEpicsInLists);
 
     expect(result).toEqual({
-      epics: {
+      boardItems: {
         1: {
           assignees: [],
           id: 1,
@@ -42,7 +42,7 @@ describe('formatListEpics', () => {
         },
       },
       listData: { [listId]: [1] },
-      listEpicsCount: 1,
+      listItemsCount: 1,
     });
   });
 });

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

@@ -16,15 +16,15 @@ describe('EpicLane', () => {
 
   const updateBoardEpicUserPreferencesSpy = jest.fn();
 
-  const createStore = ({ isLoading = false, issuesByListId = mockIssuesByListId }) => {
+  const createStore = ({ isLoading = false, boardItemsByListId = mockIssuesByListId }) => {
     return new Vuex.Store({
       actions: {
         fetchIssuesForEpic: jest.fn(),
         updateBoardEpicUserPreferences: updateBoardEpicUserPreferencesSpy,
       },
       state: {
-        issuesByListId,
-        issues,
+        boardItemsByListId,
+        boardItems: issues,
         epicsFlags: {
           [mockEpic.id]: { isLoading },
         },
@@ -36,9 +36,9 @@ describe('EpicLane', () => {
   const createComponent = ({
     props = {},
     isLoading = false,
-    issuesByListId = mockIssuesByListId,
+    boardItemsByListId = mockIssuesByListId,
   } = {}) => {
-    const store = createStore({ isLoading, issuesByListId });
+    const store = createStore({ isLoading, boardItemsByListId });
 
     const defaultProps = {
       epic: mockEpic,
@@ -125,7 +125,7 @@ describe('EpicLane', () => {
     });
 
     it('does not render when issuesCount is 0', () => {
-      createComponent({ issuesByListId: {} });
+      createComponent({ boardItemsByListId: {} });
       expect(findByTestId('board-epic-lane').exists()).toBe(false);
     });
   });

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

@@ -19,8 +19,8 @@ describe('EpicsSwimlanes', () => {
     return new Vuex.Store({
       state: {
         epics: mockEpics,
-        issuesByListId: mockIssuesByListId,
-        issues,
+        boardItemsByListId: mockIssuesByListId,
+        boardItems: issues,
         pageInfoByListId: {
           'gid://gitlab/List/1': {},
           'gid://gitlab/List/2': {},

ee/spec/frontend/boards/components/sidebar/board_sidebar_epic_select_spec.js

@@ -30,7 +30,7 @@ describe('ee/boards/components/sidebar/board_sidebar_epic_select.vue', () => {
   const createStore = ({
     initialState = {
       activeId: mockIssueWithoutEpic.id,
-      issues: { [mockIssueWithoutEpic.id]: { ...mockIssueWithoutEpic } },
+      boardItems: { [mockIssueWithoutEpic.id]: { ...mockIssueWithoutEpic } },
       epicsCacheById: {},
       epicFetchInProgress: false,
     },
@@ -120,7 +120,7 @@ describe('ee/boards/components/sidebar/board_sidebar_epic_select.vue', () => {
       createStore({
         initialState: {
           activeId: mockIssueWithEpic.id,
-          issues: { [mockIssueWithEpic.id]: { ...mockIssueWithEpic } },
+          boardItems: { [mockIssueWithEpic.id]: { ...mockIssueWithEpic } },
           epicsCacheById: {},
           epicFetchInProgress: true,
         },
@@ -138,7 +138,7 @@ describe('ee/boards/components/sidebar/board_sidebar_epic_select.vue', () => {
       createStore({
         initialState: {
           activeId: mockIssueWithEpic.id,
-          issues: { [mockIssueWithEpic.id]: { ...mockIssueWithEpic } },
+          boardItems: { [mockIssueWithEpic.id]: { ...mockIssueWithEpic } },
           epicsCacheById: {},
           epicFetchInProgress: true,
         },
@@ -163,7 +163,7 @@ describe('ee/boards/components/sidebar/board_sidebar_epic_select.vue', () => {
       createStore({
         initialState: {
           activeId: mockIssueWithEpic.id,
-          issues: { [mockIssueWithEpic.id]: { ...mockIssueWithEpic } },
+          boardItems: { [mockIssueWithEpic.id]: { ...mockIssueWithEpic } },
           epicsCacheById: { [mockAssignedEpic.id]: { ...mockAssignedEpic } },
           epicFetchInProgress: false,
         },
@@ -182,7 +182,7 @@ describe('ee/boards/components/sidebar/board_sidebar_epic_select.vue', () => {
       createStore({
         initialState: {
           activeId: mockIssueWithoutEpic.id,
-          issues: { [mockIssueWithoutEpic.id]: { ...mockIssueWithoutEpic } },
+          boardItems: { [mockIssueWithoutEpic.id]: { ...mockIssueWithoutEpic } },
           epicsCacheById: {},
           epicFetchInProgress: false,
         },
@@ -193,7 +193,7 @@ describe('ee/boards/components/sidebar/board_sidebar_epic_select.vue', () => {
         // 'setActiveIssueEpic' sets the active issue's epic to the selected epic
         // and stores the assigned epic's data in 'epicsCacheById'
         store.state.epicFetchInProgress = true;
-        store.state.issues[mockIssueWithoutEpic.id].epic = { ...mockAssignedEpic };
+        store.state.boardItems[mockIssueWithoutEpic.id].epic = { ...mockAssignedEpic };
         store.state.epicsCacheById = { [mockAssignedEpic.id]: { ...mockAssignedEpic } };
         store.state.epicFetchInProgress = false;
       });
@@ -236,7 +236,7 @@ describe('ee/boards/components/sidebar/board_sidebar_epic_select.vue', () => {
       createStore({
         initialState: {
           activeId: mockIssueWithEpic.id,
-          issues: { [mockIssueWithEpic.id]: { ...mockIssueWithEpic } },
+          boardItems: { [mockIssueWithEpic.id]: { ...mockIssueWithEpic } },
           epicsCacheById: { [mockAssignedEpic.id]: { ...mockAssignedEpic } },
           epicFetchInProgress: false,
         },
@@ -245,7 +245,7 @@ describe('ee/boards/components/sidebar/board_sidebar_epic_select.vue', () => {
 
       jest.spyOn(wrapper.vm, 'setActiveIssueEpic').mockImplementation(async () => {
         // Remove assigned epic from the active issue
-        store.state.issues[mockIssueWithoutEpic.id].epic = null;
+        store.state.boardItems[mockIssueWithoutEpic.id].epic = null;
       });
 
       findEpicSelect().vm.$emit('epicSelect', null);

ee/spec/frontend/boards/components/sidebar/board_sidebar_time_tracker_spec.js

@@ -24,7 +24,7 @@ describe('BoardSidebarTimeTracker', () => {
 
   beforeEach(() => {
     store = createStore();
-    store.state.issues = {
+    store.state.boardItems = {
       1: {
         timeEstimate: 3600,
         totalTimeSpent: 1800,

ee/spec/frontend/boards/components/sidebar/board_sidebar_weight_input_spec.js

@@ -22,7 +22,7 @@ describe('ee/boards/components/sidebar/board_sidebar_weight_input.vue', () => {
 
   const createWrapper = ({ weight = 0 } = {}) => {
     store = createStore();
-    store.state.issues = { [TEST_ISSUE.id]: { ...TEST_ISSUE, weight } };
+    store.state.boardItems = { [TEST_ISSUE.id]: { ...TEST_ISSUE, weight } };
     store.state.activeId = TEST_ISSUE.id;
 
     wrapper = shallowMount(BoardSidebarWeightInput, {
@@ -58,7 +58,7 @@ describe('ee/boards/components/sidebar/board_sidebar_weight_input.vue', () => {
       jest.spyOn(wrapper.vm, 'setActiveIssueWeight');
       findWeightInput().vm.$emit('input', TEST_WEIGHT);
       findWeightForm().vm.$emit('submit', { preventDefault: () => {} });
-      store.state.issues[TEST_ISSUE.id].weight = TEST_WEIGHT;
+      store.state.boardItems[TEST_ISSUE.id].weight = TEST_WEIGHT;
       await wrapper.vm.$nextTick();
     });
 
@@ -82,7 +82,7 @@ describe('ee/boards/components/sidebar/board_sidebar_weight_input.vue', () => {
       jest.spyOn(wrapper.vm, 'setActiveIssueWeight');
       findWeightInput().vm.$emit('input', 0);
       findWeightForm().vm.$emit('submit', { preventDefault: () => {} });
-      store.state.issues[TEST_ISSUE.id].weight = 0;
+      store.state.boardItems[TEST_ISSUE.id].weight = 0;
       await wrapper.vm.$nextTick();
     });
 
@@ -98,7 +98,7 @@ describe('ee/boards/components/sidebar/board_sidebar_weight_input.vue', () => {
       createWrapper({ weight: TEST_WEIGHT });
       jest.spyOn(wrapper.vm, 'setActiveIssueWeight');
       findResetButton().vm.$emit('click');
-      store.state.issues[TEST_ISSUE.id].weight = 0;
+      store.state.boardItems[TEST_ISSUE.id].weight = 0;
       await wrapper.vm.$nextTick();
     });
 

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

@@ -788,7 +788,7 @@ describe('setActiveIssueEpic', () => {
 });
 
 describe('setActiveIssueWeight', () => {
-  const state = { issues: { [mockIssue.id]: mockIssue } };
+  const state = { boardItems: { [mockIssue.id]: mockIssue } };
   const getters = { activeIssue: mockIssue };
   const testWeight = mockIssue.weight + 1;
   const input = {
@@ -857,8 +857,8 @@ describe('moveIssue', () => {
     boardType: 'group',
     disabled: false,
     boardLists: mockLists,
-    issuesByListId: listIssues,
-    issues,
+    boardItemsByListId: listIssues,
+    boardItems: issues,
   };
 
   it('should commit MOVE_ISSUE mutation and MOVE_ISSUE_SUCCESS mutation when successful', (done) => {

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

@@ -11,9 +11,9 @@ import {
 
 describe('EE Boards Store Getters', () => {
   const boardsState = {
-    issuesByListId: mockIssuesByListId,
+    boardItemsByListId: mockIssuesByListId,
     epics: mockEpics,
-    issues,
+    boardItems: issues,
   };
 
   describe('isSwimlanesOn', () => {
@@ -72,9 +72,9 @@ describe('EE Boards Store Getters', () => {
 
   describe('getIssuesByEpic', () => {
     it('returns issues for a given listId and epicId', () => {
-      const getIssuesByList = () => mockIssues;
+      const getBoardItemsByList = () => mockIssues;
       expect(
-        getters.getIssuesByEpic(boardsState, { getIssuesByList })(
+        getters.getIssuesByEpic(boardsState, { getBoardItemsByList })(
           'gid://gitlab/List/2',
           'gid://gitlab/Epic/41',
         ),
@@ -84,9 +84,9 @@ describe('EE Boards Store Getters', () => {
 
   describe('getUnassignedIssues', () => {
     it('returns issues not assigned to an epic for a given listId', () => {
-      const getIssuesByList = () => [mockIssue, mockIssue3, mockIssue4];
+      const getBoardItemsByList = () => [mockIssue, mockIssue3, mockIssue4];
       expect(
-        getters.getUnassignedIssues(boardsState, { getIssuesByList })('gid://gitlab/List/1'),
+        getters.getUnassignedIssues(boardsState, { getBoardItemsByList })('gid://gitlab/List/1'),
       ).toEqual([mockIssue3, mockIssue4]);
     });
   });

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

@@ -15,8 +15,8 @@ const initialBoardListsState = {
 };
 
 let state = {
-  issuesByListId: {},
-  issues: {},
+  boardItemsByListId: {},
+  boardItems: {},
   boardLists: initialBoardListsState,
   epicsFlags: {
     [epicId]: { isLoading: true },
@@ -92,7 +92,7 @@ describe('REQUEST_ISSUES_FOR_EPIC', () => {
 });
 
 describe('RECEIVE_ISSUES_FOR_EPIC_SUCCESS', () => {
-  it('sets issuesByListId and issues state for epic issues and loading state to false', () => {
+  it('sets boardItemsByListId and issues state for epic issues and loading state to false', () => {
     const listIssues = {
       'gid://gitlab/List/1': [mockIssue.id],
       'gid://gitlab/List/2': [mockIssue2.id],
@@ -104,12 +104,12 @@ describe('RECEIVE_ISSUES_FOR_EPIC_SUCCESS', () => {
 
     mutations.RECEIVE_ISSUES_FOR_EPIC_SUCCESS(state, {
       listData: listIssues,
-      issues,
+      boardItems: issues,
       epicId,
     });
 
-    expect(state.issuesByListId).toEqual(listIssues);
-    expect(state.issues).toEqual(issues);
+    expect(state.boardItemsByListId).toEqual(listIssues);
+    expect(state.boardItems).toEqual(issues);
     expect(state.epicsFlags[epicId].isLoading).toBe(false);
   });
 });
@@ -257,7 +257,7 @@ describe('RECEIVE_EPICS_SUCCESS', () => {
 });
 
 describe('RESET_EPICS', () => {
-  it('should remove issues from issuesByListId state', () => {
+  it('should remove issues from boardItemsByListId state', () => {
     state = {
       ...state,
       epics: mockEpics,
@@ -283,13 +283,13 @@ describe('MOVE_ISSUE', () => {
 
     state = {
       ...state,
-      issuesByListId: listIssues,
-      issues,
+      boardItemsByListId: listIssues,
+      boardItems: issues,
     };
   });
 
-  it('updates issuesByListId, moving issue between lists and updating epic id on issue', () => {
-    expect(state.issues['437'].epic.id).toEqual('gid://gitlab/Epic/40');
+  it('updates boardItemsByListId, moving issue between lists and updating epic id on issue', () => {
+    expect(state.boardItems['437'].epic.id).toEqual('gid://gitlab/Epic/40');
 
     mutations.MOVE_ISSUE(state, {
       originalIssue: mockIssue2,
@@ -303,12 +303,12 @@ describe('MOVE_ISSUE', () => {
       'gid://gitlab/List/2': [mockIssue2.id],
     };
 
-    expect(state.issuesByListId).toEqual(updatedListIssues);
-    expect(state.issues['437'].epic.id).toEqual(epicId);
+    expect(state.boardItemsByListId).toEqual(updatedListIssues);
+    expect(state.boardItems['437'].epic.id).toEqual(epicId);
   });
 
   it('removes epic id from issue when epicId is null', () => {
-    expect(state.issues['437'].epic.id).toEqual('gid://gitlab/Epic/40');
+    expect(state.boardItems['437'].epic.id).toEqual('gid://gitlab/Epic/40');
 
     mutations.MOVE_ISSUE(state, {
       originalIssue: mockIssue2,
@@ -322,8 +322,8 @@ describe('MOVE_ISSUE', () => {
       'gid://gitlab/List/2': [mockIssue2.id],
     };
 
-    expect(state.issuesByListId).toEqual(updatedListIssues);
-    expect(state.issues['437'].epic).toEqual(null);
+    expect(state.boardItemsByListId).toEqual(updatedListIssues);
+    expect(state.boardItems['437'].epic).toEqual(null);
   });
 });
 

locale/gitlab.pot

@@ -4808,6 +4808,9 @@ msgstr ""
 msgid "Boards|An error occurred while fetching issues. Please reload the page."
 msgstr ""
 
+msgid "Boards|An error occurred while fetching the board epics. Please reload the page."
+msgstr ""
+
 msgid "Boards|An error occurred while fetching the board issues. Please reload the page."
 msgstr ""
 

spec/frontend/boards/board_list_spec.js

@@ -29,8 +29,8 @@ const createComponent = ({
   state = {},
 } = {}) => {
   const store = createStore({
-    issuesByListId: mockIssuesByListId,
-    issues,
+    boardItemsByListId: mockIssuesByListId,
+    boardItems: issues,
     pageInfoByListId: {
       'gid://gitlab/List/1': { hasNextPage: true },
       'gid://gitlab/List/2': {},
@@ -65,7 +65,7 @@ const createComponent = ({
     propsData: {
       disabled: false,
       list,
-      issues: [issue],
+      boardItems: [issue],
       canAdminList: true,
       ...componentProps,
     },

spec/frontend/boards/components/sidebar/board_sidebar_due_date_spec.js

@@ -24,7 +24,7 @@ describe('~/boards/components/sidebar/board_sidebar_due_date.vue', () => {
 
   const createWrapper = ({ dueDate = null } = {}) => {
     store = createStore();
-    store.state.issues = { [TEST_ISSUE.id]: { ...TEST_ISSUE, dueDate } };
+    store.state.boardItems = { [TEST_ISSUE.id]: { ...TEST_ISSUE, dueDate } };
     store.state.activeId = TEST_ISSUE.id;
 
     wrapper = shallowMount(BoardSidebarDueDate, {
@@ -61,7 +61,7 @@ describe('~/boards/components/sidebar/board_sidebar_due_date.vue', () => {
       createWrapper();
 
       jest.spyOn(wrapper.vm, 'setActiveIssueDueDate').mockImplementation(() => {
-        store.state.issues[TEST_ISSUE.id].dueDate = TEST_DUE_DATE;
+        store.state.boardItems[TEST_ISSUE.id].dueDate = TEST_DUE_DATE;
       });
       findDatePicker().vm.$emit('input', TEST_PARSED_DATE);
       await wrapper.vm.$nextTick();
@@ -86,7 +86,7 @@ describe('~/boards/components/sidebar/board_sidebar_due_date.vue', () => {
       createWrapper();
 
       jest.spyOn(wrapper.vm, 'setActiveIssueDueDate').mockImplementation(() => {
-        store.state.issues[TEST_ISSUE.id].dueDate = null;
+        store.state.boardItems[TEST_ISSUE.id].dueDate = null;
       });
       findDatePicker().vm.$emit('clear');
       await wrapper.vm.$nextTick();
@@ -104,7 +104,7 @@ describe('~/boards/components/sidebar/board_sidebar_due_date.vue', () => {
       createWrapper({ dueDate: TEST_DUE_DATE });
 
       jest.spyOn(wrapper.vm, 'setActiveIssueDueDate').mockImplementation(() => {
-        store.state.issues[TEST_ISSUE.id].dueDate = null;
+        store.state.boardItems[TEST_ISSUE.id].dueDate = null;
       });
       findResetButton().vm.$emit('click');
       await wrapper.vm.$nextTick();

spec/frontend/boards/components/sidebar/board_sidebar_issue_title_spec.js

@@ -34,7 +34,7 @@ describe('~/boards/components/sidebar/board_sidebar_issue_title.vue', () => {
 
   const createWrapper = (issue = TEST_ISSUE_A) => {
     store = createStore();
-    store.state.issues = { [issue.id]: { ...issue } };
+    store.state.boardItems = { [issue.id]: { ...issue } };
     store.dispatch('setActiveId', { id: issue.id });
 
     wrapper = shallowMount(BoardSidebarIssueTitle, {
@@ -74,7 +74,7 @@ describe('~/boards/components/sidebar/board_sidebar_issue_title.vue', () => {
       createWrapper();
 
       jest.spyOn(wrapper.vm, 'setActiveIssueTitle').mockImplementation(() => {
-        store.state.issues[TEST_ISSUE_A.id].title = TEST_TITLE;
+        store.state.boardItems[TEST_ISSUE_A.id].title = TEST_TITLE;
       });
       findFormInput().vm.$emit('input', TEST_TITLE);
       findForm().vm.$emit('submit', { preventDefault: () => {} });
@@ -147,7 +147,7 @@ describe('~/boards/components/sidebar/board_sidebar_issue_title.vue', () => {
       createWrapper(TEST_ISSUE_B);
 
       jest.spyOn(wrapper.vm, 'setActiveIssueTitle').mockImplementation(() => {
-        store.state.issues[TEST_ISSUE_B.id].title = TEST_TITLE;
+        store.state.boardItems[TEST_ISSUE_B.id].title = TEST_TITLE;
       });
       findFormInput().vm.$emit('input', TEST_TITLE);
       findCancelButton().vm.$emit('click');

spec/frontend/boards/components/sidebar/board_sidebar_labels_select_spec.js

@@ -25,7 +25,7 @@ describe('~/boards/components/sidebar/board_sidebar_labels_select.vue', () => {
 
   const createWrapper = ({ labels = [] } = {}) => {
     store = createStore();
-    store.state.issues = { [TEST_ISSUE.id]: { ...TEST_ISSUE, labels } };
+    store.state.boardItems = { [TEST_ISSUE.id]: { ...TEST_ISSUE, labels } };
     store.state.activeId = TEST_ISSUE.id;
 
     wrapper = shallowMount(BoardSidebarLabelsSelect, {
@@ -66,7 +66,7 @@ describe('~/boards/components/sidebar/board_sidebar_labels_select.vue', () => {
 
       jest.spyOn(wrapper.vm, 'setActiveIssueLabels').mockImplementation(() => TEST_LABELS);
       findLabelsSelect().vm.$emit('updateSelectedLabels', TEST_LABELS_PAYLOAD);
-      store.state.issues[TEST_ISSUE.id].labels = TEST_LABELS;
+      store.state.boardItems[TEST_ISSUE.id].labels = TEST_LABELS;
       await wrapper.vm.$nextTick();
     });
 

spec/frontend/boards/components/sidebar/board_sidebar_milestone_select_spec.js

@@ -22,7 +22,7 @@ describe('~/boards/components/sidebar/board_sidebar_milestone_select.vue', () =>
 
   const createWrapper = ({ milestone = null, loading = false } = {}) => {
     store = createStore();
-    store.state.issues = { [TEST_ISSUE.id]: { ...TEST_ISSUE, milestone } };
+    store.state.boardItems = { [TEST_ISSUE.id]: { ...TEST_ISSUE, milestone } };
     store.state.activeId = TEST_ISSUE.id;
 
     wrapper = shallowMount(BoardSidebarMilestoneSelect, {
@@ -113,7 +113,7 @@ describe('~/boards/components/sidebar/board_sidebar_milestone_select.vue', () =>
       createWrapper();
 
       jest.spyOn(wrapper.vm, 'setActiveIssueMilestone').mockImplementation(() => {
-        store.state.issues[TEST_ISSUE.id].milestone = TEST_MILESTONE;
+        store.state.boardItems[TEST_ISSUE.id].milestone = TEST_MILESTONE;
       });
       findDropdownItem().vm.$emit('click');
       await wrapper.vm.$nextTick();
@@ -137,7 +137,7 @@ describe('~/boards/components/sidebar/board_sidebar_milestone_select.vue', () =>
       createWrapper({ milestone: TEST_MILESTONE });
 
       jest.spyOn(wrapper.vm, 'setActiveIssueMilestone').mockImplementation(() => {
-        store.state.issues[TEST_ISSUE.id].milestone = null;
+        store.state.boardItems[TEST_ISSUE.id].milestone = null;
       });
       findUnsetMilestoneItem().vm.$emit('click');
       await wrapper.vm.$nextTick();

spec/frontend/boards/components/sidebar/board_sidebar_subscription_spec.js

@@ -22,7 +22,7 @@ describe('~/boards/components/sidebar/board_sidebar_subscription_spec.vue', () =
 
   const createComponent = (activeIssue = { ...mockActiveIssue }) => {
     store = createStore();
-    store.state.issues = { [activeIssue.id]: activeIssue };
+    store.state.boardItems = { [activeIssue.id]: activeIssue };
     store.state.activeId = activeIssue.id;
 
     wrapper = mount(BoardSidebarSubscription, {

spec/frontend/boards/stores/actions_spec.js

@@ -573,7 +573,7 @@ describe('fetchItemsForList', () => {
         },
         {
           type: types.RECEIVE_ITEMS_FOR_LIST_SUCCESS,
-          payload: { listIssues: formattedIssues, listPageInfo, listId },
+          payload: { listItems: formattedIssues, listPageInfo, listId },
         },
       ],
       [],
@@ -624,8 +624,8 @@ describe('moveIssue', () => {
     boardType: 'group',
     disabled: false,
     boardLists: mockLists,
-    issuesByListId: listIssues,
-    issues,
+    boardItemsByListId: listIssues,
+    boardItems: issues,
   };
 
   it('should commit MOVE_ISSUE mutation and MOVE_ISSUE_SUCCESS mutation when successful', (done) => {
@@ -905,7 +905,7 @@ describe('addListIssue', () => {
 });
 
 describe('setActiveIssueLabels', () => {
-  const state = { issues: { [mockIssue.id]: mockIssue } };
+  const state = { boardItems: { [mockIssue.id]: mockIssue } };
   const getters = { activeIssue: mockIssue };
   const testLabelIds = labels.map((label) => label.id);
   const input = {
@@ -950,7 +950,7 @@ describe('setActiveIssueLabels', () => {
 });
 
 describe('setActiveIssueDueDate', () => {
-  const state = { issues: { [mockIssue.id]: mockIssue } };
+  const state = { boardItems: { [mockIssue.id]: mockIssue } };
   const getters = { activeIssue: mockIssue };
   const testDueDate = '2020-02-20';
   const input = {
@@ -1001,7 +1001,7 @@ describe('setActiveIssueDueDate', () => {
 });
 
 describe('setActiveIssueSubscribed', () => {
-  const state = { issues: { [mockActiveIssue.id]: mockActiveIssue } };
+  const state = { boardItems: { [mockActiveIssue.id]: mockActiveIssue } };
   const getters = { activeIssue: mockActiveIssue };
   const subscribedState = true;
   const input = {
@@ -1052,7 +1052,7 @@ describe('setActiveIssueSubscribed', () => {
 });
 
 describe('setActiveIssueMilestone', () => {
-  const state = { issues: { [mockIssue.id]: mockIssue } };
+  const state = { boardItems: { [mockIssue.id]: mockIssue } };
   const getters = { activeIssue: mockIssue };
   const testMilestone = {
     ...mockMilestone,
@@ -1106,7 +1106,7 @@ describe('setActiveIssueMilestone', () => {
 });
 
 describe('setActiveIssueTitle', () => {
-  const state = { issues: { [mockIssue.id]: mockIssue } };
+  const state = { boardItems: { [mockIssue.id]: mockIssue } };
   const getters = { activeIssue: mockIssue };
   const testTitle = 'Test Title';
   const input = {

spec/frontend/boards/stores/getters_spec.js

@@ -38,15 +38,15 @@ describe('Boards - Getters', () => {
     });
   });
 
-  describe('getIssueById', () => {
-    const state = { issues: { 1: 'issue' } };
+  describe('getBoardItemById', () => {
+    const state = { boardItems: { 1: 'issue' } };
 
     it.each`
       id     | expected
       ${'1'} | ${'issue'}
       ${''}  | ${{}}
     `('returns $expected when $id is passed to state', ({ id, expected }) => {
-      expect(getters.getIssueById(state)(id)).toEqual(expected);
+      expect(getters.getBoardItemById(state)(id)).toEqual(expected);
     });
   });
 
@@ -56,7 +56,7 @@ describe('Boards - Getters', () => {
       ${'1'} | ${'issue'}
       ${''}  | ${{}}
     `('returns $expected when $id is passed to state', ({ id, expected }) => {
-      const state = { issues: { 1: 'issue' }, activeId: id };
+      const state = { boardItems: { 1: 'issue' }, activeId: id };
 
       expect(getters.activeIssue(state)).toEqual(expected);
     });
@@ -94,17 +94,18 @@ describe('Boards - Getters', () => {
     });
   });
 
-  describe('getIssuesByList', () => {
+  describe('getBoardItemsByList', () => {
     const boardsState = {
-      issuesByListId: mockIssuesByListId,
-      issues,
+      boardItemsByListId: mockIssuesByListId,
+      boardItems: issues,
     };
     it('returns issues for a given listId', () => {
-      const getIssueById = (issueId) => [mockIssue, mockIssue2].find(({ id }) => id === issueId);
+      const getBoardItemById = (issueId) =>
+        [mockIssue, mockIssue2].find(({ id }) => id === issueId);
 
-      expect(getters.getIssuesByList(boardsState, { getIssueById })('gid://gitlab/List/2')).toEqual(
-        mockIssues,
-      );
+      expect(
+        getters.getBoardItemsByList(boardsState, { getBoardItemById })('gid://gitlab/List/2'),
+      ).toEqual(mockIssues);
     });
   });
 

spec/frontend/boards/stores/mutations_spec.js

@@ -222,24 +222,24 @@ describe('Board Store Mutations', () => {
   });
 
   describe('RESET_ISSUES', () => {
-    it('should remove issues from issuesByListId state', () => {
-      const issuesByListId = {
+    it('should remove issues from boardItemsByListId state', () => {
+      const boardItemsByListId = {
         'gid://gitlab/List/1': [mockIssue.id],
       };
 
       state = {
         ...state,
-        issuesByListId,
+        boardItemsByListId,
       };
 
       mutations[types.RESET_ISSUES](state);
 
-      expect(state.issuesByListId).toEqual({ 'gid://gitlab/List/1': [] });
+      expect(state.boardItemsByListId).toEqual({ 'gid://gitlab/List/1': [] });
     });
   });
 
   describe('RECEIVE_ITEMS_FOR_LIST_SUCCESS', () => {
-    it('updates issuesByListId and issues on state', () => {
+    it('updates boardItemsByListId and issues on state', () => {
       const listIssues = {
         'gid://gitlab/List/1': [mockIssue.id],
       };
@@ -249,10 +249,10 @@ describe('Board Store Mutations', () => {
 
       state = {
         ...state,
-        issuesByListId: {
+        boardItemsByListId: {
           'gid://gitlab/List/1': [],
         },
-        issues: {},
+        boardItems: {},
         boardLists: initialBoardListsState,
       };
 
@@ -264,13 +264,13 @@ describe('Board Store Mutations', () => {
       };
 
       mutations.RECEIVE_ITEMS_FOR_LIST_SUCCESS(state, {
-        listIssues: { listData: listIssues, issues },
+        listItems: { listData: listIssues, boardItems: issues },
         listPageInfo,
         listId: 'gid://gitlab/List/1',
       });
 
-      expect(state.issuesByListId).toEqual(listIssues);
-      expect(state.issues).toEqual(issues);
+      expect(state.boardItemsByListId).toEqual(listIssues);
+      expect(state.boardItems).toEqual(issues);
     });
   });
 
@@ -306,7 +306,7 @@ describe('Board Store Mutations', () => {
       state = {
         ...state,
         error: undefined,
-        issues: {
+        boardItems: {
           ...issue,
         },
       };
@@ -320,7 +320,7 @@ describe('Board Store Mutations', () => {
           value,
         });
 
-        expect(state.issues[issueId]).toEqual({ ...issue[issueId], id: '2' });
+        expect(state.boardItems[issueId]).toEqual({ ...issue[issueId], id: '2' });
       });
     });
 
@@ -346,7 +346,7 @@ describe('Board Store Mutations', () => {
   });
 
   describe('MOVE_ISSUE', () => {
-    it('updates issuesByListId, moving issue between lists', () => {
+    it('updates boardItemsByListId, moving issue between lists', () => {
       const listIssues = {
         'gid://gitlab/List/1': [mockIssue.id, mockIssue2.id],
         'gid://gitlab/List/2': [],
@@ -359,9 +359,9 @@ describe('Board Store Mutations', () => {
 
       state = {
         ...state,
-        issuesByListId: listIssues,
+        boardItemsByListId: listIssues,
         boardLists: initialBoardListsState,
-        issues,
+        boardItems: issues,
       };
 
       mutations.MOVE_ISSUE(state, {
@@ -375,7 +375,7 @@ describe('Board Store Mutations', () => {
         'gid://gitlab/List/2': [mockIssue2.id],
       };
 
-      expect(state.issuesByListId).toEqual(updatedListIssues);
+      expect(state.boardItemsByListId).toEqual(updatedListIssues);
     });
   });
 
@@ -387,19 +387,19 @@ describe('Board Store Mutations', () => {
 
       state = {
         ...state,
-        issues,
+        boardItems: issues,
       };
 
       mutations.MOVE_ISSUE_SUCCESS(state, {
         issue: rawIssue,
       });
 
-      expect(state.issues).toEqual({ 436: { ...mockIssue, id: 436 } });
+      expect(state.boardItems).toEqual({ 436: { ...mockIssue, id: 436 } });
     });
   });
 
   describe('MOVE_ISSUE_FAILURE', () => {
-    it('updates issuesByListId, reverting moving issue between lists, and sets error message', () => {
+    it('updates boardItemsByListId, reverting moving issue between lists, and sets error message', () => {
       const listIssues = {
         'gid://gitlab/List/1': [mockIssue.id],
         'gid://gitlab/List/2': [mockIssue2.id],
@@ -407,7 +407,7 @@ describe('Board Store Mutations', () => {
 
       state = {
         ...state,
-        issuesByListId: listIssues,
+        boardItemsByListId: listIssues,
         boardLists: initialBoardListsState,
       };
 
@@ -423,7 +423,7 @@ describe('Board Store Mutations', () => {
         'gid://gitlab/List/2': [],
       };
 
-      expect(state.issuesByListId).toEqual(updatedListIssues);
+      expect(state.boardItemsByListId).toEqual(updatedListIssues);
       expect(state.error).toEqual('An error occurred while moving the issue. Please try again.');
     });
   });
@@ -449,7 +449,7 @@ describe('Board Store Mutations', () => {
   });
 
   describe('ADD_ISSUE_TO_LIST', () => {
-    it('adds issue to issues state and issue id in list in issuesByListId', () => {
+    it('adds issue to issues state and issue id in list in boardItemsByListId', () => {
       const listIssues = {
         'gid://gitlab/List/1': [mockIssue.id],
       };
@@ -459,8 +459,8 @@ describe('Board Store Mutations', () => {
 
       state = {
         ...state,
-        issuesByListId: listIssues,
-        issues,
+        boardItemsByListId: listIssues,
+        boardItems: issues,
         boardLists: initialBoardListsState,
       };
 
@@ -468,14 +468,14 @@ describe('Board Store Mutations', () => {
 
       mutations.ADD_ISSUE_TO_LIST(state, { list: mockLists[0], issue: mockIssue2 });
 
-      expect(state.issuesByListId['gid://gitlab/List/1']).toContain(mockIssue2.id);
-      expect(state.issues[mockIssue2.id]).toEqual(mockIssue2);
+      expect(state.boardItemsByListId['gid://gitlab/List/1']).toContain(mockIssue2.id);
+      expect(state.boardItems[mockIssue2.id]).toEqual(mockIssue2);
       expect(state.boardLists['gid://gitlab/List/1'].issuesCount).toBe(2);
     });
   });
 
   describe('ADD_ISSUE_TO_LIST_FAILURE', () => {
-    it('removes issue id from list in issuesByListId and sets error message', () => {
+    it('removes issue id from list in boardItemsByListId and sets error message', () => {
       const listIssues = {
         'gid://gitlab/List/1': [mockIssue.id, mockIssue2.id],
       };
@@ -486,20 +486,20 @@ describe('Board Store Mutations', () => {
 
       state = {
         ...state,
-        issuesByListId: listIssues,
-        issues,
+        boardItemsByListId: listIssues,
+        boardItems: issues,
         boardLists: initialBoardListsState,
       };
 
       mutations.ADD_ISSUE_TO_LIST_FAILURE(state, { list: mockLists[0], issueId: mockIssue2.id });
 
-      expect(state.issuesByListId['gid://gitlab/List/1']).not.toContain(mockIssue2.id);
+      expect(state.boardItemsByListId['gid://gitlab/List/1']).not.toContain(mockIssue2.id);
       expect(state.error).toBe('An error occurred while creating the issue. Please try again.');
     });
   });
 
   describe('REMOVE_ISSUE_FROM_LIST', () => {
-    it('removes issue id from list in issuesByListId and deletes issue from state', () => {
+    it('removes issue id from list in boardItemsByListId and deletes issue from state', () => {
       const listIssues = {
         'gid://gitlab/List/1': [mockIssue.id, mockIssue2.id],
       };
@@ -510,15 +510,15 @@ describe('Board Store Mutations', () => {
 
       state = {
         ...state,
-        issuesByListId: listIssues,
-        issues,
+        boardItemsByListId: listIssues,
+        boardItems: issues,
         boardLists: initialBoardListsState,
       };
 
       mutations.ADD_ISSUE_TO_LIST_FAILURE(state, { list: mockLists[0], issueId: mockIssue2.id });
 
-      expect(state.issuesByListId['gid://gitlab/List/1']).not.toContain(mockIssue2.id);
-      expect(state.issues).not.toContain(mockIssue2);
+      expect(state.boardItemsByListId['gid://gitlab/List/1']).not.toContain(mockIssue2.id);
+      expect(state.boardItems).not.toContain(mockIssue2);
     });
   });