Swimlanes - Update list WIP limit

Use graphQL mutation to update list WIP limit in settings sidebar

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

 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlButton, GlFormInput } from '@gitlab/ui';
 import boardsStoreEE from 'ee/boards/stores/boards_store_ee';
 import { deprecatedCreateFlash as flash } from '~/flash';
@@ -37,6 +37,7 @@ export default {
   },
   computed: {
     ...mapState(['activeId']),
+    ...mapGetters(['shouldUseGraphQL']),
     wipLimitTypeText() {
       return n__('%d issue', '%d issues', this.maxIssueCount);
     },
@@ -75,9 +76,11 @@ export default {
         const wipLimit = this.currentWipLimit;
         const id = this.activeId;
 
-        this.updateListWipLimit({ maxIssueCount: this.currentWipLimit, id })
+        this.updateListWipLimit({ maxIssueCount: wipLimit, listId: id })
           .then(() => {
-            boardsStoreEE.setMaxIssueCountOnList(id, wipLimit);
+            if (!this.shouldUseGraphQL) {
+              boardsStoreEE.setMaxIssueCountOnList(id, wipLimit);
+            }
           })
           .catch(() => {
             this.unsetActiveId();
@@ -91,9 +94,11 @@ export default {
       }
     },
     clearWipLimit() {
-      this.updateListWipLimit({ maxIssueCount: 0, id: this.activeId })
+      this.updateListWipLimit({ maxIssueCount: 0, listId: this.activeId })
         .then(() => {
-          boardsStoreEE.setMaxIssueCountOnList(this.activeId, inactiveId);
+          if (!this.shouldUseGraphQL) {
+            boardsStoreEE.setMaxIssueCountOnList(this.activeId, inactiveId);
+          }
         })
         .catch(() => {
           this.unsetActiveId();

ee/app/assets/javascripts/boards/queries/list_update_limit_metrics.mutation.graphql

+#import "ee_else_ce/boards/queries/board_list.fragment.graphql"
+
+mutation boardListUpdateLimitMetrics($input: BoardListUpdateLimitMetricsInput!) {
+  boardListUpdateLimitMetrics(input: $input) {
+    list {
+      ...BoardListFragment
+    }
+    errors
+  }
+}

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

@@ -27,6 +27,7 @@ import issueSetEpic from '../queries/issue_set_epic.mutation.graphql';
 import issueSetWeight from '../queries/issue_set_weight.mutation.graphql';
 import listsIssuesQuery from '~/boards/queries/lists_issues.query.graphql';
 import issueMoveListMutation from '../queries/issue_move_list.mutation.graphql';
+import listUpdateLimitMetrics from '../queries/list_update_limit_metrics.mutation.graphql';
 import updateBoardEpicUserPreferencesMutation from '../queries/updateBoardEpicUserPreferences.mutation.graphql';
 
 const notImplemented = () => {
@@ -184,10 +185,33 @@ export default {
     commit(types.SET_SHOW_LABELS, val);
   },
 
-  updateListWipLimit({ state }, { maxIssueCount }) {
-    const { activeId } = state;
+  updateListWipLimit({ commit, getters }, { maxIssueCount, listId }) {
+    if (getters.shouldUseGraphQL) {
+      return gqlClient
+        .mutate({
+          mutation: listUpdateLimitMetrics,
+          variables: {
+            input: {
+              listId,
+              maxIssueCount,
+            },
+          },
+        })
+        .then(({ data }) => {
+          if (data?.boardListUpdateLimitMetrics?.errors.length) {
+            commit(types.UPDATE_LIST_FAILURE);
+          } else {
+            const list = data.boardListUpdateLimitMetrics?.list;
+            commit(types.UPDATE_LIST_SUCCESS, {
+              listId,
+              list: boardsStore.updateListPosition({ ...list, doNotFetchIssues: true }),
+            });
+          }
+        })
+        .catch(() => commit(types.UPDATE_LIST_FAILURE));
+    }
 
-    return axios.put(`${boardsStoreEE.store.state.endpoints.listsEndpoint}/${activeId}`, {
+    return axios.put(`${boardsStoreEE.store.state.endpoints.listsEndpoint}/${listId}`, {
       list: {
         max_issue_count: maxIssueCount,
       },

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

@@ -20,6 +20,8 @@ export const RECEIVE_ISSUES_FOR_EPIC_FAILURE = 'RECEIVE_ISSUES_FOR_EPIC_FAILURE'
 export const TOGGLE_EPICS_SWIMLANES = 'TOGGLE_EPICS_SWIMLANES';
 export const SET_EPICS_SWIMLANES = 'SET_EPICS_SWIMLANES';
 export const RECEIVE_BOARD_LISTS_SUCCESS = 'RECEIVE_BOARD_LISTS_SUCCESS';
+export const UPDATE_LIST_SUCCESS = 'UPDATE_LIST_SUCCESS';
+export const UPDATE_LIST_FAILURE = 'UPDATE_LIST_FAILURE';
 export const RECEIVE_SWIMLANES_FAILURE = 'RECEIVE_SWIMLANES_FAILURE';
 export const RECEIVE_FIRST_EPICS_SUCCESS = 'RECEIVE_FIRST_EPICS_SUCCESS';
 export const RECEIVE_EPICS_SUCCESS = 'RECEIVE_EPICS_SUCCESS';

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

@@ -67,6 +67,13 @@ export default {
   [mutationTypes.TOGGLE_PROMOTION_STATE]: () => {
     notImplemented();
   },
+  [mutationTypes.UPDATE_LIST_SUCCESS]: (state, { listId, list }) => {
+    Vue.set(state.boardLists, listId, list);
+  },
+
+  [mutationTypes.UPDATE_LIST_FAILURE]: state => {
+    state.error = s__('Boards|An error occurred while updating the list. Please try again.');
+  },
 
   [mutationTypes.RECEIVE_ISSUES_FOR_LIST_SUCCESS]: (
     state,

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

@@ -49,6 +49,7 @@ describe('BoardSettingsWipLimit', () => {
     const store = new Vuex.Store({
       state: vuexState,
       actions: storeActions,
+      getters: { shouldUseGraphQL: () => false },
     });
 
     wrapper = shallowMount(BoardSettingsWipLimit, {

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

@@ -244,6 +244,7 @@ describe('setShowLabels', () => {
 
 describe('updateListWipLimit', () => {
   let storeMock;
+  const getters = { shouldUseGraphQL: false };
 
   beforeEach(() => {
     storeMock = {
@@ -262,16 +263,67 @@ describe('updateListWipLimit', () => {
     jest.restoreAllMocks();
   });
 
-  it('should call the correct url', () => {
+  it('axios - should call the correct url', () => {
     const maxIssueCount = 0;
     const activeId = 1;
 
-    return actions.updateListWipLimit({ state: { activeId } }, { maxIssueCount }).then(() => {
-      expect(axios.put).toHaveBeenCalledWith(
-        `${boardsStoreEE.store.state.endpoints.listsEndpoint}/${activeId}`,
-        { list: { max_issue_count: maxIssueCount } },
-      );
+    return actions
+      .updateListWipLimit({ state: { activeId }, getters }, { maxIssueCount, listId: activeId })
+      .then(() => {
+        expect(axios.put).toHaveBeenCalledWith(
+          `${boardsStoreEE.store.state.endpoints.listsEndpoint}/${activeId}`,
+          { list: { max_issue_count: maxIssueCount } },
+        );
+      });
+  });
+
+  it('graphql - commit UPDATE_LIST_SUCCESS mutation on success', () => {
+    const maxIssueCount = 0;
+    const activeId = 1;
+    getters.shouldUseGraphQL = true;
+    jest.spyOn(gqlClient, 'mutate').mockResolvedValue({
+      data: {
+        boardListUpdateLimitMetrics: {
+          list: {
+            id: activeId,
+          },
+          errors: [],
+        },
+      },
     });
+
+    return testAction(
+      actions.updateListWipLimit,
+      { maxIssueCount, listId: activeId },
+      { isShowingEpicsSwimlanes: true, ...getters },
+      [
+        {
+          type: types.UPDATE_LIST_SUCCESS,
+          payload: {
+            listId: activeId,
+            list: expect.objectContaining({
+              id: activeId,
+            }),
+          },
+        },
+      ],
+      [],
+    );
+  });
+
+  it('graphql - commit UPDATE_LIST_FAILURE mutation on failure', () => {
+    const maxIssueCount = 0;
+    const activeId = 1;
+    getters.shouldUseGraphQL = true;
+    jest.spyOn(gqlClient, 'mutate').mockResolvedValue(Promise.reject());
+
+    return testAction(
+      actions.updateListWipLimit,
+      { maxIssueCount, listId: activeId },
+      { isShowingEpicsSwimlanes: true, ...getters },
+      [{ type: types.UPDATE_LIST_FAILURE }],
+      [],
+    );
   });
 });