Boards - Update Open column when adding list

Reloads items from Open column when adding or removing a list to avoid
inaccurate list of issues.

app/assets/javascripts/boards/constants.js

@@ -36,6 +36,7 @@ export const ListTypeTitles = {
   milestone: __('Milestone'),
   iteration: __('Iteration'),
   label: __('Label'),
+  backlog: __('Open'),
 };
 
 export const formType = {

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

@@ -12,6 +12,7 @@ import {
   updateListQueries,
   issuableTypes,
   FilterFields,
+  ListTypeTitles,
 } from 'ee_else_ce/boards/constants';
 import createBoardListMutation from 'ee_else_ce/boards/graphql/board_list_create.mutation.graphql';
 import issueMoveListMutation from 'ee_else_ce/boards/graphql/issue_move_list.mutation.graphql';
@@ -169,8 +170,11 @@ export default {
       });
   },
 
-  addList: ({ commit }, list) => {
+  addList: ({ commit, dispatch, getters }, list) => {
     commit(types.RECEIVE_ADD_LIST_SUCCESS, updateListPosition(list));
+    dispatch('fetchItemsForList', {
+      listId: getters.getListByTitle(ListTypeTitles.backlog).id,
+    });
   },
 
   fetchLabels: ({ state, commit, getters }, searchTerm) => {
@@ -261,7 +265,7 @@ export default {
     commit(types.TOGGLE_LIST_COLLAPSED, { listId, collapsed });
   },
 
-  removeList: ({ state: { issuableType, boardLists }, commit }, listId) => {
+  removeList: ({ state: { issuableType, boardLists }, commit, dispatch, getters }, listId) => {
     const listsBackup = { ...boardLists };
 
     commit(types.REMOVE_LIST, listId);
@@ -281,6 +285,10 @@ export default {
         }) => {
           if (errors.length > 0) {
             commit(types.REMOVE_LIST_FAILURE, listsBackup);
+          } else {
+            dispatch('fetchItemsForList', {
+              listId: getters.getListByTitle(ListTypeTitles.backlog).id,
+            });
           }
         },
       )

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

@@ -118,6 +118,9 @@ export default {
   },
 
   [mutationTypes.REQUEST_ITEMS_FOR_LIST]: (state, { listId, fetchNext }) => {
+    if (!fetchNext && !state.isShowingEpicsSwimlanes) {
+      Vue.set(state.boardItemsByListId, listId, []);
+    }
     Vue.set(state.listsFlags, listId, { [fetchNext ? 'isLoadingMore' : 'isLoading']: true });
   },
 

spec/frontend/boards/stores/actions_spec.js

@@ -15,6 +15,7 @@ import {
   formatIssueInput,
   formatIssue,
   getMoveData,
+  updateListPosition,
 } from '~/boards/boards_util';
 import destroyBoardListMutation from '~/boards/graphql/board_list_destroy.mutation.graphql';
 import issueCreateMutation from '~/boards/graphql/issue_create.mutation.graphql';
@@ -36,6 +37,7 @@ import {
   mockMoveIssueParams,
   mockMoveState,
   mockMoveData,
+  mockList,
 } from '../mock_data';
 
 jest.mock('~/flash');
@@ -374,6 +376,24 @@ describe('createIssueList', () => {
   });
 });
 
+describe('addList', () => {
+  const getters = {
+    getListByTitle: jest.fn().mockReturnValue(mockList),
+  };
+
+  it('should commit RECEIVE_ADD_LIST_SUCCESS mutation and  dispatch fetchItemsForList action', () => {
+    testAction({
+      action: actions.addList,
+      payload: mockLists[1],
+      state: { ...getters },
+      expectedMutations: [
+        { type: types.RECEIVE_ADD_LIST_SUCCESS, payload: updateListPosition(mockLists[1]) },
+      ],
+      expectedActions: [{ type: 'fetchItemsForList', payload: { listId: mockList.id } }],
+    });
+  });
+});
+
 describe('fetchLabels', () => {
   it('should commit mutation RECEIVE_LABELS_SUCCESS on success', async () => {
     const queryResponse = {
@@ -521,7 +541,8 @@ describe('toggleListCollapsed', () => {
 
 describe('removeList', () => {
   let state;
-  const list = mockLists[0];
+  let getters;
+  const list = mockLists[1];
   const listId = list.id;
   const mutationVariables = {
     mutation: destroyBoardListMutation,
@@ -535,6 +556,9 @@ describe('removeList', () => {
       boardLists: mockListsById,
       issuableType: issuableTypes.issue,
     };
+    getters = {
+      getListByTitle: jest.fn().mockReturnValue(mockList),
+    };
   });
 
   afterEach(() => {
@@ -544,13 +568,15 @@ describe('removeList', () => {
   it('optimistically deletes the list', () => {
     const commit = jest.fn();
 
-    actions.removeList({ commit, state }, listId);
+    actions.removeList({ commit, state, getters, dispatch: () => {} }, listId);
 
     expect(commit.mock.calls).toEqual([[types.REMOVE_LIST, listId]]);
   });
 
   it('keeps the updated list if remove succeeds', async () => {
     const commit = jest.fn();
+    const dispatch = jest.fn();
+
     jest.spyOn(gqlClient, 'mutate').mockResolvedValue({
       data: {
         destroyBoardList: {
@@ -559,17 +585,18 @@ describe('removeList', () => {
       },
     });
 
-    await actions.removeList({ commit, state }, listId);
+    await actions.removeList({ commit, state, getters, dispatch }, listId);
 
     expect(gqlClient.mutate).toHaveBeenCalledWith(mutationVariables);
     expect(commit.mock.calls).toEqual([[types.REMOVE_LIST, listId]]);
+    expect(dispatch.mock.calls).toEqual([['fetchItemsForList', { listId: mockList.id }]]);
   });
 
   it('restores the list if update fails', async () => {
     const commit = jest.fn();
     jest.spyOn(gqlClient, 'mutate').mockResolvedValue(Promise.reject());
 
-    await actions.removeList({ commit, state }, listId);
+    await actions.removeList({ commit, state, getters, dispatch: () => {} }, listId);
 
     expect(gqlClient.mutate).toHaveBeenCalledWith(mutationVariables);
     expect(commit.mock.calls).toEqual([
@@ -588,7 +615,7 @@ describe('removeList', () => {
       },
     });
 
-    await actions.removeList({ commit, state }, listId);
+    await actions.removeList({ commit, state, getters, dispatch: () => {} }, listId);
 
     expect(gqlClient.mutate).toHaveBeenCalledWith(mutationVariables);
     expect(commit.mock.calls).toEqual([

spec/frontend/boards/stores/mutations_spec.js

@@ -273,6 +273,36 @@ describe('Board Store Mutations', () => {
     });
   });
 
+  describe('REQUEST_ITEMS_FOR_LIST', () => {
+    const listId = 'gid://gitlab/List/1';
+    const boardItemsByListId = {
+      [listId]: [mockIssue.id],
+    };
+
+    it.each`
+      fetchNext | isLoading    | isLoadingMore | listItems
+      ${true}   | ${undefined} | ${true}       | ${boardItemsByListId[listId]}
+      ${false}  | ${true}      | ${undefined}  | ${[]}
+    `(
+      'sets isLoading to $isLoading and isLoadingMore to $isLoadingMore when fetchNext is $fetchNext',
+      ({ fetchNext, isLoading, isLoadingMore, listItems }) => {
+        state = {
+          ...state,
+          boardItemsByListId,
+          listsFlags: {
+            [listId]: {},
+          },
+        };
+
+        mutations[types.REQUEST_ITEMS_FOR_LIST](state, { listId, fetchNext });
+
+        expect(state.listsFlags[listId].isLoading).toBe(isLoading);
+        expect(state.listsFlags[listId].isLoadingMore).toBe(isLoadingMore);
+        expect(state.boardItemsByListId[listId]).toEqual(listItems);
+      },
+    );
+  });
+
   describe('RECEIVE_ITEMS_FOR_LIST_SUCCESS', () => {
     it('updates boardItemsByListId and issues on state', () => {
       const listIssues = {