Merge branch '332917-boards-adding-new-list-should-update-issue-from-other-columns' into 'master'

Boards - Update Open column when adding list [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!63481

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,
+            });
           }
         },
       )
@@ -290,6 +298,9 @@ export default {
   },
 
   fetchItemsForList: ({ state, commit }, { listId, fetchNext = false }) => {
+    if (!fetchNext) {
+      commit(types.RESET_ITEMS_FOR_LIST, listId);
+    }
     commit(types.REQUEST_ITEMS_FOR_LIST, { listId, fetchNext });
 
     const { fullPath, fullBoardId, boardType, filterParams } = state;

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

@@ -15,6 +15,7 @@ export const UPDATE_LIST_FAILURE = 'UPDATE_LIST_FAILURE';
 export const TOGGLE_LIST_COLLAPSED = 'TOGGLE_LIST_COLLAPSED';
 export const REMOVE_LIST = 'REMOVE_LIST';
 export const REMOVE_LIST_FAILURE = 'REMOVE_LIST_FAILURE';
+export const RESET_ITEMS_FOR_LIST = 'RESET_ITEMS_FOR_LIST';
 export const REQUEST_ITEMS_FOR_LIST = 'REQUEST_ITEMS_FOR_LIST';
 export const RECEIVE_ITEMS_FOR_LIST_FAILURE = 'RECEIVE_ITEMS_FOR_LIST_FAILURE';
 export const RECEIVE_ITEMS_FOR_LIST_SUCCESS = 'RECEIVE_ITEMS_FOR_LIST_SUCCESS';

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

@@ -117,6 +117,11 @@ export default {
     state.boardLists = listsBackup;
   },
 
+  [mutationTypes.RESET_ITEMS_FOR_LIST]: (state, listId) => {
+    Vue.set(state, 'backupItemsList', state.boardItemsByListId[listId]);
+    Vue.set(state.boardItemsByListId, listId, []);
+  },
+
   [mutationTypes.REQUEST_ITEMS_FOR_LIST]: (state, { listId, fetchNext }) => {
     Vue.set(state.listsFlags, listId, { [fetchNext ? 'isLoadingMore' : 'isLoading']: true });
   },
@@ -138,6 +143,7 @@ export default {
       'Boards|An error occurred while fetching the board issues. Please reload the page.',
     );
     Vue.set(state.listsFlags, listId, { isLoading: false, isLoadingMore: false });
+    Vue.set(state.boardItemsByListId, listId, state.backupItemsList);
   },
 
   [mutationTypes.RESET_ISSUES]: (state) => {

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

@@ -11,6 +11,7 @@ export default () => ({
   boardLists: {},
   listsFlags: {},
   boardItemsByListId: {},
+  backupItemsList: [],
   isSettingAssignees: false,
   pageInfoByListId: {},
   boardItems: {},

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

@@ -245,6 +245,9 @@ export default {
     { state, commit, getters },
     { listId, fetchNext = false, noEpicIssues = false, forSwimlanes = false },
   ) => {
+    if (!fetchNext && !state.isShowingEpicsSwimlanes) {
+      commit(types.RESET_ITEMS_FOR_LIST, listId);
+    }
     commit(types.REQUEST_ITEMS_FOR_LIST, { listId, fetchNext });
 
     const { epicId, ...filterParams } = state.filterParams;

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

@@ -46,6 +46,7 @@ export default {
         ? ErrorMessages.fetchEpicsError
         : ErrorMessages.fetchIssueError;
     Vue.set(state.listsFlags, listId, { isLoading: false, isLoadingMore: false });
+    Vue.set(state.boardItemsByListId, listId, state.backupItemsList);
   },
 
   [mutationTypes.TOGGLE_EPICS_SWIMLANES]: (state) => {

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

@@ -288,7 +288,7 @@ describe('fetchEpicsSwimlanes', () => {
 describe('fetchItemsForList', () => {
   const listId = mockLists[0].id;
 
-  const state = {
+  let state = {
     fullPath: 'gitlab-org',
     boardId: '1',
     filterParams: {},
@@ -329,6 +329,10 @@ describe('fetchItemsForList', () => {
   };
 
   it('add epicWildcardId with ANY as value when forSwimlanes is true', () => {
+    state = {
+      ...state,
+      isShowingEpicsSwimlanes: true,
+    };
     jest.spyOn(gqlClient, 'query').mockResolvedValue(queryResponse);
 
     testAction(

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([
@@ -649,6 +676,10 @@ describe('fetchItemsForList', () => {
       { listId },
       state,
       [
+        {
+          type: types.RESET_ITEMS_FOR_LIST,
+          payload: listId,
+        },
         {
           type: types.REQUEST_ITEMS_FOR_LIST,
           payload: { listId, fetchNext: false },
@@ -671,6 +702,10 @@ describe('fetchItemsForList', () => {
       { listId },
       state,
       [
+        {
+          type: types.RESET_ITEMS_FOR_LIST,
+          payload: listId,
+        },
         {
           type: types.REQUEST_ITEMS_FOR_LIST,
           payload: { listId, fetchNext: false },

spec/frontend/boards/stores/mutations_spec.js

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