On boards, move weight and issue count to async call

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

@@ -8,6 +8,7 @@ import defaultSortableConfig from '~/sortable/sortable_config';
 import Tracking from '~/tracking';
 import { toggleFormEventPrefix, DraggableItemTypes } from '../constants';
 import eventHub from '../eventhub';
+import listQuery from '../graphql/board_lists_deferred.query.graphql';
 import BoardCard from './board_card.vue';
 import BoardNewIssue from './board_new_issue.vue';
 
@@ -50,11 +51,22 @@ export default {
       showEpicForm: false,
     };
   },
+  apollo: {
+    boardList: {
+      query: listQuery,
+      variables() {
+        return {
+          id: this.list.id,
+          filters: this.filterParams,
+        };
+      },
+    },
+  },
   computed: {
-    ...mapState(['pageInfoByListId', 'listsFlags']),
+    ...mapState(['pageInfoByListId', 'listsFlags', 'filterParams']),
     ...mapGetters(['isEpicBoard']),
     listItemsCount() {
-      return this.isEpicBoard ? this.list.epicsCount : this.list.issuesCount;
+      return this.isEpicBoard ? this.list.epicsCount : this.boardList?.issuesCount;
     },
     paginatedIssueText() {
       return sprintf(__('Showing %{pageSize} of %{total} %{issuableType}'), {

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

@@ -20,6 +20,7 @@ import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import AccessorUtilities from '../../lib/utils/accessor';
 import { inactiveId, LIST, ListType, toggleFormEventPrefix } from '../constants';
 import eventHub from '../eventhub';
+import listQuery from '../graphql/board_lists_deferred.query.graphql';
 import ItemCount from './item_count.vue';
 
 export default {
@@ -74,7 +75,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['activeId']),
+    ...mapState(['activeId', 'filterParams']),
     ...mapGetters(['isEpicBoard', 'isSwimlanesOn']),
     isLoggedIn() {
       return Boolean(this.currentUserId);
@@ -119,14 +120,11 @@ export default {
       }
       return false;
     },
-    itemsCount() {
-      return this.list.issuesCount;
-    },
     countIcon() {
       return 'issues';
     },
     itemsTooltipLabel() {
-      return n__(`%d issue`, `%d issues`, this.itemsCount);
+      return n__(`%d issue`, `%d issues`, this.boardLists?.issuesCount);
     },
     chevronTooltip() {
       return this.list.collapsed ? this.$options.i18n.expand : this.$options.i18n.collapse;
@@ -158,6 +156,23 @@ export default {
     userCanDrag() {
       return !this.disabled && isListDraggable(this.list);
     },
+    isLoading() {
+      return this.$apollo.queries.boardList.loading;
+    },
+  },
+  apollo: {
+    boardList: {
+      query: listQuery,
+      variables() {
+        return {
+          id: this.list.id,
+          filters: this.filterParams,
+        };
+      },
+      skip() {
+        return this.isEpicBoard;
+      },
+    },
   },
   created() {
     const localCollapsed = parseBoolean(localStorage.getItem(`${this.uniqueKey}.collapsed`));
@@ -375,10 +390,10 @@ export default {
           </gl-sprintf>
         </div>
         <div v-else>• {{ itemsTooltipLabel }}</div>
-        <div v-if="weightFeatureAvailable">
+        <div v-if="weightFeatureAvailable && !isLoading">
           •
           <gl-sprintf :message="__('%{totalWeight} total weight')">
-            <template #totalWeight>{{ list.totalWeight }}</template>
+            <template #totalWeight>{{ boardList.totalWeight }}</template>
           </gl-sprintf>
         </div>
       </gl-tooltip>
@@ -396,14 +411,18 @@ export default {
           <gl-tooltip :target="() => $refs.itemCount" :title="itemsTooltipLabel" />
           <span ref="itemCount" class="gl-display-inline-flex gl-align-items-center">
             <gl-icon class="gl-mr-2" :name="countIcon" />
-            <item-count :items-size="itemsCount" :max-issue-count="list.maxIssueCount" />
+            <item-count
+              v-if="!isLoading"
+              :items-size="isEpicBoard ? list.epicsCount : boardList.issuesCount"
+              :max-issue-count="list.maxIssueCount"
+            />
           </span>
           <!-- EE start -->
-          <template v-if="weightFeatureAvailable && !isEpicBoard">
+          <template v-if="weightFeatureAvailable && !isEpicBoard && !isLoading">
             <gl-tooltip :target="() => $refs.weightTooltip" :title="weightCountToolTip" />
             <span ref="weightTooltip" class="gl-display-inline-flex gl-ml-3">
               <gl-icon class="gl-mr-2" name="weight" />
-              {{ list.totalWeight }}
+              {{ boardList.totalWeight }}
             </span>
           </template>
           <!-- EE end -->

app/assets/javascripts/boards/graphql/board_list_shared.fragment.graphql

@@ -4,7 +4,6 @@ fragment BoardListShared on BoardList {
   position
   listType
   collapsed
-  issuesCount
   label {
     id
     title

app/assets/javascripts/boards/graphql/board_lists_deferred.query.graphql

+query BoardList($id: ID!, $filters: BoardIssueInput) {
+  boardList(id: $id, issueFilters: $filters) {
+    id
+    issuesCount
+  }
+}

app/assets/javascripts/boards/graphql/lists_issues.query.graphql

 #import "ee_else_ce/boards/graphql/issue.fragment.graphql"
 
-query BoardListEE(
+query BoardListsEE(
   $fullPath: ID!
   $boardId: ID!
   $id: ID

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

@@ -30,6 +30,7 @@ import {
 } from 'ee_else_ce/boards/boards_util';
 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';
+import totalCountAndWeightQuery from 'ee_else_ce/boards/graphql/board_lists_deferred.query.graphql';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { queryToObject } from '~/lib/utils/url_utility';
@@ -501,9 +502,10 @@ export default {
 
   updateIssueOrder: async ({ commit, dispatch, state }, { moveData, mutationVariables = {} }) => {
     try {
-      const { itemId, fromListId, toListId, moveBeforeId, moveAfterId } = moveData;
+      const { itemId, fromListId, toListId, moveBeforeId, moveAfterId, itemNotInToList } = moveData;
       const {
         fullBoardId,
+        filterParams,
         boardItems: {
           [itemId]: { iid, referencePath },
         },
@@ -522,6 +524,67 @@ export default {
           // 'mutationVariables' allows EE code to pass in extra parameters.
           ...mutationVariables,
         },
+        update(
+          cache,
+          {
+            data: {
+              issueMoveList: {
+                issue: { weight },
+              },
+            },
+          },
+        ) {
+          if (fromListId === toListId) return;
+
+          const updateFromList = () => {
+            const fromList = cache.readQuery({
+              query: totalCountAndWeightQuery,
+              variables: { id: fromListId, filters: filterParams },
+            });
+
+            const updatedFromList = {
+              boardList: {
+                __typename: 'BoardList',
+                id: fromList.boardList.id,
+                issuesCount: fromList.boardList.issuesCount - 1,
+                totalWeight: fromList.boardList.totalWeight - Number(weight),
+              },
+            };
+
+            cache.writeQuery({
+              query: totalCountAndWeightQuery,
+              variables: { id: fromListId, filters: filterParams },
+              data: updatedFromList,
+            });
+          };
+
+          const updateToList = () => {
+            if (!itemNotInToList) return;
+
+            const toList = cache.readQuery({
+              query: totalCountAndWeightQuery,
+              variables: { id: toListId, filters: filterParams },
+            });
+
+            const updatedToList = {
+              boardList: {
+                __typename: 'BoardList',
+                id: toList.boardList.id,
+                issuesCount: toList.boardList.issuesCount + 1,
+                totalWeight: toList.boardList.totalWeight + Number(weight),
+              },
+            };
+
+            cache.writeQuery({
+              query: totalCountAndWeightQuery,
+              variables: { id: toListId, filters: filterParams },
+              data: updatedToList,
+            });
+          };
+
+          updateFromList();
+          updateToList();
+        },
       });
 
       if (data?.issueMoveList?.errors.length || !data.issueMoveList) {
@@ -565,7 +628,7 @@ export default {
   },
 
   addListNewIssue: (
-    { state: { boardConfig, boardType, fullPath }, dispatch, commit },
+    { state: { boardConfig, boardType, fullPath, filterParams }, dispatch, commit },
     { issueInput, list, placeholderId = `tmp-${new Date().getTime()}` },
   ) => {
     const input = formatIssueInput(issueInput, boardConfig);
@@ -581,6 +644,27 @@ export default {
       .mutate({
         mutation: issueCreateMutation,
         variables: { input },
+        update(cache) {
+          const fromList = cache.readQuery({
+            query: totalCountAndWeightQuery,
+            variables: { id: list.id, filters: filterParams },
+          });
+
+          const updatedList = {
+            boardList: {
+              __typename: 'BoardList',
+              id: fromList.boardList.id,
+              issuesCount: fromList.boardList.issuesCount + 1,
+              totalWeight: fromList.boardList.totalWeight,
+            },
+          };
+
+          cache.writeQuery({
+            query: totalCountAndWeightQuery,
+            variables: { id: list.id, filters: filterParams },
+            data: updatedList,
+          });
+        },
       })
       .then(({ data }) => {
         if (data.createIssue.errors.length) {

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

@@ -5,17 +5,32 @@ import { mapGetters } from 'vuex';
 /* eslint-disable @gitlab/no-runtime-template-compiler */
 import BoardListHeaderFoss from '~/boards/components/board_list_header.vue';
 import { n__, __, sprintf } from '~/locale';
+import listQuery from '../graphql/board_lists_deferred.query.graphql';
 
 export default {
   extends: BoardListHeaderFoss,
   inject: ['weightFeatureAvailable'],
+  apollo: {
+    boardList: {
+      query: listQuery,
+      variables() {
+        return {
+          id: this.list.id,
+          filters: this.filterParams,
+        };
+      },
+      skip() {
+        return this.isEpicBoard;
+      },
+    },
+  },
   computed: {
     ...mapGetters(['isEpicBoard']),
     countIcon() {
       return this.isEpicBoard ? 'epic' : 'issues';
     },
     itemsCount() {
-      return this.isEpicBoard ? this.list.epicsCount : this.list.issuesCount;
+      return this.isEpicBoard ? this.list.epicsCount : this.boardList?.issuesCount;
     },
     itemsTooltipLabel() {
       const { maxIssueCount } = this.list;
@@ -31,7 +46,7 @@ export default {
         : n__(`%d issue`, `%d issues`, this.itemsCount);
     },
     weightCountToolTip() {
-      const { totalWeight } = this.list;
+      const { totalWeight } = this.boardList;
 
       if (this.weightFeatureAvailable) {
         return sprintf(__('%{totalWeight} total weight'), { totalWeight });

ee/app/assets/javascripts/boards/graphql/board_list.fragment.graphql

@@ -3,7 +3,6 @@
 fragment BoardListFragment on BoardList {
   ...BoardListShared
   maxIssueCount
-  totalWeight
   assignee {
     id
     name

ee/app/assets/javascripts/boards/graphql/board_lists_deferred.query.graphql

+query BoardListEE($id: ID!, $filters: BoardIssueInput) {
+  boardList(id: $id, issueFilters: $filters) {
+    id
+    totalWeight
+    issuesCount
+  }
+}

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

@@ -96,7 +96,7 @@ export default {
   ...actionsCE,
 
   addListNewIssue: async (
-    { state: { boardConfig, boardType, fullPath }, dispatch, commit },
+    { state: { boardConfig, boardType, fullPath, filterParams }, dispatch, commit },
     issueInputObj,
   ) => {
     const { iterationId } = boardConfig;
@@ -127,6 +127,7 @@ export default {
           boardConfig: { ...boardConfig, iterationId, iterationCadenceId },
           boardType,
           fullPath,
+          filterParams,
         },
         dispatch,
         commit,

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

 import { GlButton, GlButtonGroup } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import Vuex from 'vuex';
 
 import BoardListHeader from 'ee/boards/components/board_list_header.vue';
 import defaultGetters from 'ee/boards/stores/getters';
-import { mockList, mockLabelList } from 'jest/boards/mock_data';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { boardListQueryResponse, mockList, mockLabelList } from 'jest/boards/mock_data';
 import { ListType, inactiveId } from '~/boards/constants';
 import boardsEventHub from '~/boards/eventhub';
+import listQuery from 'ee/boards/graphql/board_lists_deferred.query.graphql';
 import sidebarEventHub from '~/sidebar/event_hub';
 
-const localVue = createLocalVue();
-
-localVue.use(Vuex);
+Vue.use(VueApollo);
+Vue.use(Vuex);
 
 const listMocks = {
   [ListType.assignee]: {
@@ -34,6 +38,18 @@ const listMocks = {
 describe('Board List Header Component', () => {
   let store;
   let wrapper;
+  let fakeApollo;
+
+  beforeEach(() => {
+    store = new Vuex.Store({ state: { activeId: inactiveId }, defaultGetters });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    fakeApollo = null;
+
+    localStorage.clear();
+  });
 
   const createComponent = ({
     listType = ListType.backlog,
@@ -41,6 +57,7 @@ describe('Board List Header Component', () => {
     withLocalStorage = true,
     isSwimlanesHeader = false,
     weightFeatureAvailable = false,
+    listQueryHandler = jest.fn().mockResolvedValue(boardListQueryResponse()),
     currentUserId = 1,
     state = { activeId: inactiveId },
     getters = {},
@@ -61,6 +78,7 @@ describe('Board List Header Component', () => {
       );
     }
 
+    fakeApollo = createMockApollo([[listQuery, listQueryHandler]]);
     store = new Vuex.Store({
       state,
       getters: {
@@ -72,8 +90,8 @@ describe('Board List Header Component', () => {
     jest.spyOn(store, 'dispatch').mockImplementation();
 
     wrapper = shallowMount(BoardListHeader, {
+      apolloProvider: fakeApollo,
       store,
-      localVue,
       propsData: {
         disabled: false,
         list: listMock,
@@ -188,10 +206,15 @@ describe('Board List Header Component', () => {
   });
 
   describe('weightFeatureAvailable', () => {
-    it('weightFeatureAvailable is true', () => {
+    it('weightFeatureAvailable is true', async () => {
       createComponent({ weightFeatureAvailable: true });
 
-      expect(wrapper.find({ ref: 'weightTooltip' }).exists()).toBe(true);
+      await waitForPromises();
+
+      const weightTooltip = wrapper.find({ ref: 'weightTooltip' });
+
+      expect(weightTooltip.exists()).toBe(true);
+      expect(weightTooltip.text()).toContain(boardListQueryResponse().data.boardList.totalWeight);
     });
 
     it('weightFeatureAvailable is false', () => {

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

@@ -1467,6 +1467,7 @@ describe('addListNewIssue', () => {
               iterationCadenceId,
             }),
           },
+          update: expect.anything(),
         });
       });
     });
@@ -1500,6 +1501,7 @@ describe('addListNewIssue', () => {
           variables: {
             input: formatIssueInput(mockIssue, state.boardConfig),
           },
+          update: expect.anything(),
         });
       });
     });
@@ -1536,6 +1538,7 @@ describe('addListNewIssue', () => {
         variables: {
           input: formatIssueInput(mockIssue, state.boardConfig),
         },
+        update: expect.anything(),
       });
     });
   });

spec/frontend/boards/board_list_helper.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
 import Vuex from 'vuex';
 
 import BoardCard from '~/boards/components/board_card.vue';
@@ -6,7 +7,15 @@ import BoardList from '~/boards/components/board_list.vue';
 import BoardNewIssue from '~/boards/components/board_new_issue.vue';
 import BoardNewItem from '~/boards/components/board_new_item.vue';
 import defaultState from '~/boards/stores/state';
-import { mockList, mockIssuesByListId, issues, mockGroupProjects } from './mock_data';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import listQuery from '~/boards/graphql/board_lists_deferred.query.graphql';
+import {
+  mockList,
+  mockIssuesByListId,
+  issues,
+  mockGroupProjects,
+  boardListQueryResponse,
+} from './mock_data';
 
 export default function createComponent({
   listIssueProps = {},
@@ -15,16 +24,23 @@ export default function createComponent({
   actions = {},
   getters = {},
   provide = {},
+  data = {},
   state = defaultState,
   stubs = {
     BoardNewIssue,
     BoardNewItem,
     BoardCard,
   },
+  issuesCount,
 } = {}) {
   const localVue = createLocalVue();
+  localVue.use(VueApollo);
   localVue.use(Vuex);
 
+  const fakeApollo = createMockApollo([
+    [listQuery, jest.fn().mockResolvedValue(boardListQueryResponse(issuesCount))],
+  ]);
+
   const store = new Vuex.Store({
     state: {
       selectedProject: mockGroupProjects[0],
@@ -68,6 +84,7 @@ export default function createComponent({
   }
 
   const component = shallowMount(BoardList, {
+    apolloProvider: fakeApollo,
     localVue,
     store,
     propsData: {
@@ -87,6 +104,11 @@ export default function createComponent({
       ...provide,
     },
     stubs,
+    data() {
+      return {
+        ...data,
+      };
+    },
   });
 
   return component;

spec/frontend/boards/board_list_spec.js

@@ -38,7 +38,7 @@ describe('Board list component', () => {
 
   describe('When Expanded', () => {
     beforeEach(() => {
-      wrapper = createComponent();
+      wrapper = createComponent({ issuesCount: 1 });
     });
 
     it('renders component', () => {
@@ -97,14 +97,6 @@ describe('Board list component', () => {
       await wrapper.vm.$nextTick();
       expect(wrapper.find('.board-list-count').attributes('data-issue-id')).toBe('-1');
     });
-
-    it('shows how many more issues to load', async () => {
-      wrapper.vm.showCount = true;
-      wrapper.setProps({ list: { issuesCount: 20 } });
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find('.board-list-count').text()).toBe('Showing 1 of 20 issues');
-    });
   });
 
   describe('load more issues', () => {
@@ -113,9 +105,7 @@ describe('Board list component', () => {
     };
 
     beforeEach(() => {
-      wrapper = createComponent({
-        listProps: { issuesCount: 25 },
-      });
+      wrapper = createComponent();
     });
 
     it('does not load issues if already loading', () => {
@@ -131,13 +121,27 @@ describe('Board list component', () => {
     it('shows loading more spinner', async () => {
       wrapper = createComponent({
         state: { listsFlags: { 'gid://gitlab/List/1': { isLoadingMore: true } } },
+        data: {
+          showCount: true,
+        },
       });
-      wrapper.vm.showCount = true;
 
       await wrapper.vm.$nextTick();
 
       expect(findIssueCountLoadingIcon().exists()).toBe(true);
     });
+
+    it('shows how many more issues to load', async () => {
+      // wrapper.vm.showCount = true;
+      wrapper = createComponent({
+        data: {
+          showCount: true,
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('.board-list-count').text()).toBe('Showing 1 of 20 issues');
+    });
   });
 
   describe('max issue count warning', () => {

spec/frontend/boards/components/board_list_header_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import Vuex from 'vuex';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
-import { mockLabelList } from 'jest/boards/mock_data';
+import { boardListQueryResponse, mockLabelList } from 'jest/boards/mock_data';
 import BoardListHeader from '~/boards/components/board_list_header.vue';
 import { ListType } from '~/boards/constants';
+import listQuery from '~/boards/graphql/board_lists_deferred.query.graphql';
 
-const localVue = createLocalVue();
-
-localVue.use(Vuex);
+Vue.use(VueApollo);
+Vue.use(Vuex);
 
 describe('Board List Header Component', () => {
   let wrapper;
   let store;
+  let fakeApollo;
 
   const updateListSpy = jest.fn();
   const toggleListCollapsedSpy = jest.fn();
@@ -20,6 +24,7 @@ describe('Board List Header Component', () => {
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
+    fakeApollo = null;
 
     localStorage.clear();
   });
@@ -29,6 +34,7 @@ describe('Board List Header Component', () => {
     collapsed = false,
     withLocalStorage = true,
     currentUserId = 1,
+    listQueryHandler = jest.fn().mockResolvedValue(boardListQueryResponse()),
   } = {}) => {
     const boardId = '1';
 
@@ -56,10 +62,12 @@ describe('Board List Header Component', () => {
       getters: { isEpicBoard: () => false },
     });
 
+    fakeApollo = createMockApollo([[listQuery, listQueryHandler]]);
+
     wrapper = extendedWrapper(
       shallowMount(BoardListHeader, {
+        apolloProvider: fakeApollo,
         store,
-        localVue,
         propsData: {
           disabled: false,
           list: listMock,

spec/frontend/boards/mock_data.js

@@ -662,3 +662,14 @@ export const mockGroupLabelsResponse = {
     },
   },
 };
+
+export const boardListQueryResponse = (issuesCount = 20) => ({
+  data: {
+    boardList: {
+      __typename: 'BoardList',
+      id: 'gid://gitlab/BoardList/5',
+      totalWeight: 5,
+      issuesCount,
+    },
+  },
+});

spec/frontend/boards/stores/actions_spec.js

@@ -1241,6 +1241,7 @@ describe('updateIssueOrder', () => {
         moveBeforeId: undefined,
         moveAfterId: undefined,
       },
+      update: expect.anything(),
     };
     jest.spyOn(gqlClient, 'mutate').mockResolvedValue({
       data: {
@@ -1447,6 +1448,7 @@ describe('addListNewIssue', () => {
       variables: {
         input: formatIssueInput(mockIssue, stateWithBoardConfig.boardConfig),
       },
+      update: expect.anything(),
     });
   });
 
@@ -1478,6 +1480,7 @@ describe('addListNewIssue', () => {
       variables: {
         input: formatIssueInput(issue, stateWithBoardConfig.boardConfig),
       },
+      update: expect.anything(),
     });
     expect(payload.labelIds).toEqual(['gid://gitlab/GroupLabel/4', 'gid://gitlab/GroupLabel/5']);
     expect(payload.assigneeIds).toEqual(['gid://gitlab/User/1', 'gid://gitlab/User/2']);