Boards - Update Open column when adding list

Review feedback

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

@@ -298,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,10 +117,12 @@ export default {
     state.boardLists = listsBackup;
   },
 
-  [mutationTypes.REQUEST_ITEMS_FOR_LIST]: (state, { listId, fetchNext }) => {
-    if (!fetchNext && !state.isShowingEpicsSwimlanes) {
+  [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 });
   },
 
@@ -141,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

@@ -676,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 },
@@ -698,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,24 @@ 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 = {
@@ -280,12 +298,12 @@ describe('Board Store Mutations', () => {
     };
 
     it.each`
-      fetchNext | isLoading    | isLoadingMore | listItems
-      ${true}   | ${undefined} | ${true}       | ${boardItemsByListId[listId]}
-      ${false}  | ${true}      | ${undefined}  | ${[]}
+      fetchNext | isLoading    | isLoadingMore
+      ${true}   | ${undefined} | ${true}
+      ${false}  | ${true}      | ${undefined}
     `(
       'sets isLoading to $isLoading and isLoadingMore to $isLoadingMore when fetchNext is $fetchNext',
-      ({ fetchNext, isLoading, isLoadingMore, listItems }) => {
+      ({ fetchNext, isLoading, isLoadingMore }) => {
         state = {
           ...state,
           boardItemsByListId,
@@ -298,7 +316,6 @@ describe('Board Store Mutations', () => {
 
         expect(state.listsFlags[listId].isLoading).toBe(isLoading);
         expect(state.listsFlags[listId].isLoadingMore).toBe(isLoadingMore);
-        expect(state.boardItemsByListId[listId]).toEqual(listItems);
       },
     );
   });