Add functionality for when use edits max issue count

On the board setting sidebar, when the sidebar is open
the user can now update wip limits based on max
issue count.

Comments;

app/assets/stylesheets/framework/common.scss

@@ -573,6 +573,7 @@ img.emoji {
 .gl-font-size-large { font-size: $gl-font-size-large; }
 
 .gl-line-height-24 { line-height: $gl-line-height-24; }
+.gl-line-height-14 { line-height: $gl-line-height-14; }
 
 .gl-font-size-12 { font-size: $gl-font-size-12; }
 .gl-font-size-14 { font-size: $gl-font-size-14; }

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

 <script>
-import { GlDrawer, GlLabel } from '@gitlab/ui';
-import { __ } from '~/locale';
-import boardsStore from '~/boards/stores/boards_store';
+import { GlDrawer, GlLabel, GlButton, GlFormInput } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
+import { __ } from '~/locale';
+import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
+import boardsStoreEE from '../stores/boards_store_ee';
+import flash from '~/flash';
 
 // NOTE: need to revisit how we handle headerHeight, because we have so many different header and footer options.
 export default {
   headerHeight: process.env.NODE_ENV === 'development' ? '75px' : '40px',
+  listSettingsText: __('List Settings'),
+  labelListText: __('List Label'),
+  editLinkText: __('Edit'),
+  noneText: __('None'),
+  wipLimitText: __('Work in Progress Limit'),
   components: {
     GlDrawer,
     GlLabel,
+    GlButton,
+    GlFormInput,
+  },
+  directives: {
+    autofocusonshow,
+  },
+  data() {
+    return {
+      edit: false,
+      currentWipLimit: 0,
+      updating: false,
+    };
   },
   computed: {
     ...mapState(['activeListId']),
-    isOpen() {
-      return this.activeListId > 0;
-    },
     activeList() {
-      return boardsStore.state.lists.find(({ id }) => id === this.activeListId);
+      /*
+        Warning: Though a computed property it is not reactive because we are
+        referencing a List Model class. Reactivity only applies to plain JS objects
+      */
+
+      return boardsStoreEE.store.state.lists.find(({ id }) => id === this.activeListId);
+    },
+    isSidebarOpen() {
+      return this.activeListId > 0;
     },
     activeListLabel() {
       if (this.activeList) {
@@ -26,34 +50,100 @@ export default {
 
       return { color: '', title: '' };
     },
-    listSettingsText() {
-      return __('List Settings');
-    },
-    labelListText() {
-      return __('Label List');
+    activeListWipLimit() {
+      if (this.activeList) {
+        return this.activeList.maxIssueCount === 0
+          ? this.$options.noneText
+          : this.activeList.maxIssueCount;
+      }
+
+      return this.$options.noneText;
     },
   },
   methods: {
-    ...mapActions(['setActiveListId']),
+    ...mapActions(['setActiveListId', 'updateListWipLimit']),
     closeSidebar() {
+      this.edit = false;
       this.setActiveListId(0);
     },
+    showInput() {
+      this.edit = true;
+      this.currentWipLimit = this.activeList.maxIssueCount;
+    },
+    resetStateAfterUpdate() {
+      this.edit = false;
+      this.updating = false;
+      this.currentWipLimit = 0;
+    },
+    offFocus() {
+      if (this.currentWipLimit !== this.activeList.maxIssueCount) {
+        this.updating = true;
+
+        this.updateListWipLimit({ maxIssueCount: this.currentWipLimit, id: this.activeListId })
+          .then(({ config }) => {
+            /*
+              Move to BoardsStore bc we are consolidating all List
+              Model code and then moving it from BoardsStore to Vuex.
+            */
+
+            boardsStoreEE.store.findList('id', this.activeListId).maxIssueCount = JSON.parse(
+              config.data,
+            ).list.max_issue_count;
+            this.resetStateAfterUpdate();
+          })
+          .catch(() => {
+            this.resetStateAfterUpdate();
+            this.setActiveListId(0);
+            flash(__('Something went wrong while updating your list settings'));
+          });
+      } else {
+        this.edit = false;
+      }
+    },
+    onEnter() {
+      this.offFocus();
+    },
   },
 };
 </script>
 
 <template>
-  <gl-drawer :open="isOpen" :header-height="$options.headerHeight" @close="closeSidebar">
-    <template #header>{{ listSettingsText }}</template>
+  <gl-drawer
+    class="js-board-settings-sidebar"
+    :open="isSidebarOpen"
+    :header-height="$options.headerHeight"
+    @close="closeSidebar"
+  >
+    <template #header>{{ $options.listSettingsText }}</template>
     <template>
-      <div class="js-board-settings-sidebar d-flex flex-column align-items-start">
-        <label>{{ labelListText }}</label>
+      <div class="d-flex flex-column align-items-start">
+        <label>{{ $options.labelListText }}</label>
         <gl-label
           :title="activeListLabel.title"
           :background-color="activeListLabel.color"
           color="light"
         />
       </div>
+      <div class="d-flex justify-content-between">
+        <div>
+          <label>{{ $options.wipLimitText }}</label>
+          <gl-form-input
+            v-if="edit"
+            v-model.number="currentWipLimit"
+            v-autofocusonshow
+            :disabled="updating"
+            type="number"
+            min="0"
+            trim
+            @keydown.enter.native="onEnter"
+            @blur="offFocus"
+          />
+          <p v-else class="js-wip-limit bold">{{ activeListWipLimit }}</p>
+        </div>
+        <gl-button class="h-100 border-0 gl-line-height-14" variant="link" @click="showInput">
+          {{ $options.editLinkText }}
+        </gl-button>
+      </div>
     </template>
   </gl-drawer>
 </template>

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

+import axios from 'axios';
 import actionsCE from '~/boards/stores/actions';
+import boardsStoreEE from './boards_store_ee';
 import * as types from './mutation_types';
 
 const notImplemented = () => {
@@ -16,6 +18,15 @@ export default {
   setActiveListId({ commit }, listId) {
     commit(types.SET_ACTIVE_LIST_ID, listId);
   },
+  updateListWipLimit({ state }, { maxIssueCount }) {
+    const { activeListId } = state;
+
+    return axios.put(`${boardsStoreEE.store.state.endpoints.listsEndpoint}/${activeListId}`, {
+      list: {
+        max_issue_count: maxIssueCount,
+      },
+    });
+  },
 
   fetchAllBoards: () => {
     notImplemented();

ee/spec/features/boards/boards_spec.rb

@@ -216,6 +216,64 @@ describe 'issue boards', :js do
           expect(page.find('.js-board-settings-sidebar').find('.gl-label-text')).to have_text("Brount")
         end
       end
+
+      context 'when boards setting sidebar is open' do
+        before do
+          page.within(find(".board:nth-child(2)")) do
+            click_button('List Settings')
+          end
+        end
+
+        context "when user off clicks" do
+          it 'updates the max issue count wip limit' do
+            max_issue_count = 2
+            page.within(find('.js-board-settings-sidebar')) do
+              click_button("Edit")
+
+              find('input').set(max_issue_count)
+            end
+
+            # Off click
+            find('body').click
+
+            wait_for_requests
+
+            expect(page.find('.js-wip-limit')).to have_text(max_issue_count)
+          end
+
+          context "When user sets max issue count to 0" do
+            it 'updates the max issue count wip limit to None' do
+              max_issue_count = 0
+              page.within(find('.js-board-settings-sidebar')) do
+                click_button("Edit")
+
+                find('input').set(max_issue_count)
+              end
+
+              # Off click
+              find('body').click
+
+              wait_for_requests
+
+              expect(page.find('.js-wip-limit')).to have_text("None")
+            end
+          end
+        end
+
+        context "when user hits enter" do
+          it 'updates the max issue count wip limit' do
+            page.within(find('.js-board-settings-sidebar')) do
+              click_button("Edit")
+
+              find('input').set(1).native.send_keys(:return)
+            end
+
+            wait_for_requests
+
+            expect(page.find('.js-wip-limit')).to have_text(1)
+          end
+        end
+      end
     end
 
     context 'When FF is turned off' do

ee/spec/frontend/boards/components/__snapshots__/board_settings_sidebar_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BoardSettingsSideBar when activeList is present when activeListWipLimit is 0 renders "None" in the block 1`] = `"None"`;
+
+exports[`BoardSettingsSideBar when activeList is present when activeListWipLimit is greater than 0 it renders 1 1`] = `"1"`;
+
+exports[`BoardSettingsSideBar when activeList is present when activeListWipLimit is greater than 0 it renders 11 1`] = `"11"`;

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

+import '~/boards/models/list';
 import MockAdapter from 'axios-mock-adapter';
 import axios from 'axios';
 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlDrawer, GlLabel } from '@gitlab/ui';
+import { GlDrawer, GlLabel, GlButton, GlFormInput } from '@gitlab/ui';
 import BoardSettingsSidebar from 'ee/boards/components/board_settings_sidebar.vue';
-import boardsStore from '~/boards/stores/boards_store';
+import boardsStore from 'ee_else_ce/boards/stores/boards_store_ee';
+import getters from 'ee_else_ce/boards/stores/getters';
+import bs from '~/boards/stores/boards_store';
+import flash from '~/flash';
+import waitForPromises from 'helpers/wait_for_promises';
 
+jest.mock('~/flash');
 // NOTE: needed for calling boardsStore.addList
-import '~/boards/models/list';
 
 const localVue = createLocalVue();
 
@@ -21,25 +26,51 @@ describe('BoardSettingsSideBar', () => {
   const labelColor = '#FFFF';
   const listId = 1;
 
-  const createComponent = (state = {}, actions = {}) => {
+  const createComponent = (state = {}, actions = {}, localState = {}) => {
     storeActions = actions;
 
     const store = new Vuex.Store({
       state,
       actions: storeActions,
+      getters,
     });
 
     wrapper = shallowMount(BoardSettingsSidebar, {
       store,
       localVue,
+      data() {
+        return localState;
+      },
+      sync: false,
     });
   };
 
+  const triggerBlur = type => {
+    if (type === 'blur') {
+      wrapper.find(GlFormInput).vm.$emit('blur');
+    }
+
+    if (type === 'enter') {
+      wrapper.find(GlFormInput).trigger('keydown.enter');
+    }
+  };
+
   beforeEach(() => {
-    boardsStore.create();
+    // mock CE store
+    const storeMock = {
+      state: { lists: [] },
+      create() {},
+      setCurrentBoard: jest.fn(),
+      findList: bs.findList,
+      addList: bs.addList,
+      removeList: bs.removeList,
+    };
+
+    boardsStore.initEESpecific(storeMock);
   });
 
   afterEach(() => {
+    jest.restoreAllMocks();
     wrapper.destroy();
   });
 
@@ -91,7 +122,11 @@ describe('BoardSettingsSideBar', () => {
       beforeEach(() => {
         mock = new MockAdapter(axios);
 
-        boardsStore.addList({ id: listId, label: { title: labelTitle, color: labelColor } });
+        boardsStore.store.addList({
+          id: listId,
+          label: { title: labelTitle, color: labelColor },
+          list_type: 'label',
+        });
 
         createComponent({ activeListId: listId });
       });
@@ -113,7 +148,7 @@ describe('BoardSettingsSideBar', () => {
       beforeEach(() => {
         mock = new MockAdapter(axios);
 
-        boardsStore.addList({ id: listId, label: { title: labelTitle, color: labelColor } });
+        boardsStore.store.addList({ id: listId, label: { title: labelTitle, color: labelColor } });
 
         createComponent({ activeListId: 0 });
       });
@@ -131,4 +166,214 @@ describe('BoardSettingsSideBar', () => {
       });
     });
   });
+
+  describe('when activeList is present', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      boardsStore.store.removeList(listId);
+    });
+
+    describe('when activeListWipLimit is 0', () => {
+      beforeEach(() => {
+        boardsStore.store.addList({
+          id: listId,
+          label: { title: labelTitle, color: labelColor },
+          max_issue_count: 0,
+          list_type: 'label',
+        });
+      });
+
+      it('renders "None" in the block', () => {
+        createComponent({ activeListId: listId });
+
+        expect(wrapper.find('.js-wip-limit').text()).toMatchSnapshot();
+      });
+    });
+
+    describe('when activeListWipLimit is greater than 0', () => {
+      it.each`
+        num
+        ${1}
+        ${11}
+      `('it renders $num', ({ num }) => {
+        boardsStore.store.addList({
+          id: num,
+          label: { title: labelTitle, color: labelColor },
+          max_issue_count: num,
+          list_type: 'label',
+        });
+
+        createComponent({ activeListId: num });
+
+        expect(wrapper.find('.js-wip-limit').text()).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('when clicking edit', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+      boardsStore.store.addList({
+        id: listId,
+        label: { title: labelTitle, color: labelColor },
+        max_issue_count: 4,
+        list_type: 'label',
+      });
+
+      createComponent({ activeListId: listId });
+    });
+
+    it('renders an input', done => {
+      wrapper.find(GlButton).vm.$emit('click');
+
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          expect(wrapper.find(GlFormInput).exists()).toBe(true);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('does not render current wipLimit text', done => {
+      wrapper.find(GlButton).vm.$emit('click');
+
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          expect(wrapper.find('.js-wip-limit').exists()).toBe(false);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('sets wipLimit to be the value of list.maxIssueCount', done => {
+      expect(wrapper.vm.currentWipLimit).toEqual(0);
+
+      wrapper.find(GlButton).vm.$emit('click');
+
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          expect(wrapper.vm.currentWipLimit).toBe(4);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('when edit is true', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+
+      boardsStore.store.addList({
+        id: listId,
+        label: { title: labelTitle, color: labelColor },
+        max_issue_count: 2,
+        list_type: 'label',
+      });
+    });
+
+    afterEach(() => {
+      flash.mockReset();
+      boardsStore.store.removeList(listId, 'label');
+    });
+
+    describe.each`
+      blurMethod
+      ${'enter'}
+      ${'blur'}
+    `('$blurMethod', ({ blurMethod }) => {
+      describe(`when blur is triggered by ${blurMethod}`, () => {
+        it('calls updateListWipLimit', () => {
+          const spy = jest.fn().mockResolvedValue({
+            config: { data: JSON.stringify({ list: { max_issue_count: 'hello' } }) },
+          });
+          createComponent({ activeListId: 1 }, { updateListWipLimit: spy }, { edit: true });
+
+          triggerBlur(blurMethod);
+
+          return wrapper.vm.$nextTick().then(() => {
+            expect(spy).toHaveBeenCalledTimes(1);
+          });
+        });
+
+        describe('when component wipLimit and List.maxIssueCount are equal', () => {
+          it('doesnt call updateListWipLimit', () => {
+            const spy = jest.fn(() =>
+              Promise.resolve({
+                config: { data: JSON.stringify({ list: { max_issue_count: 0 } }) },
+              }),
+            );
+            createComponent(
+              { activeListId: 1 },
+              { updateListWipLimit: spy },
+              { edit: true, currentWipLimit: 2 },
+            );
+
+            triggerBlur(blurMethod);
+
+            return wrapper.vm.$nextTick().then(() => {
+              expect(spy).toHaveBeenCalledTimes(0);
+            });
+          });
+        });
+
+        describe('when response is successful', () => {
+          const maxIssueCount = 11;
+
+          beforeEach(() => {
+            const spy = jest.fn(() =>
+              Promise.resolve({
+                config: { data: JSON.stringify({ list: { max_issue_count: maxIssueCount } }) },
+              }),
+            );
+            createComponent({ activeListId: 1 }, { updateListWipLimit: spy }, { edit: true });
+
+            triggerBlur(blurMethod);
+
+            return waitForPromises();
+          });
+
+          it('sets activeWipLimit to new maxIssueCount value', () => {
+            /*
+             * DANGER: bad coupling to the computed prop of the component because the
+             * computed prop relys on the list from boardStore, for now this is the way around
+             * stale values from boardsStore being updated, when we move List and BoardsStore to Vuex
+             * or Graphql we will be able to query the DOM for the new value.
+             */
+            expect(wrapper.vm.activeList.maxIssueCount).toEqual(maxIssueCount);
+          });
+
+          it('toggles GlFormInput on blur', () => {
+            expect(wrapper.find(GlFormInput).exists()).toBe(false);
+            expect(wrapper.find('.js-wip-limit').exists()).toBe(true);
+            expect(wrapper.vm.updating).toBe(false);
+          });
+        });
+
+        describe('when response fails', () => {
+          beforeEach(() => {
+            const spy = jest.fn().mockRejectedValue();
+            createComponent(
+              { activeListId: 1 },
+              { updateListWipLimit: spy, setActiveListId: () => {} },
+              { edit: true },
+            );
+
+            triggerBlur(blurMethod);
+
+            return waitForPromises();
+          });
+
+          it('calls flash with expected error', () => {
+            expect(flash).toHaveBeenCalledTimes(1);
+          });
+        });
+      });
+    });
+  });
 });

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

+import axios from 'axios';
+import boardsStoreEE from 'ee/boards/stores/boards_store_ee';
 import actions from 'ee/boards/stores/actions';
 import * as types from 'ee/boards/stores/mutation_types';
 import testAction from 'helpers/vuex_action_helper';
 
+jest.mock('axios');
+
 const expectNotImplemented = action => {
   it('is not implemented', () => {
     expect(action).toThrow(new Error('Not implemented!'));
@@ -35,6 +39,33 @@ describe('setActiveListId', () => {
   });
 });
 
+describe('updateListWipLimit', () => {
+  let storeMock;
+
+  beforeEach(() => {
+    storeMock = {
+      state: { endpoints: { listsEndpoint: '/test' } },
+      create: () => {},
+      setCurrentBoard: () => {},
+    };
+
+    boardsStoreEE.initEESpecific(storeMock);
+  });
+
+  it('should call the correct url', () => {
+    axios.put.mockResolvedValue({ data: {} });
+    const maxIssueCount = 0;
+    const activeListId = 1;
+
+    return actions.updateListWipLimit({ state: { activeListId } }, { maxIssueCount }).then(() => {
+      expect(axios.put).toHaveBeenCalledWith(
+        `${boardsStoreEE.store.state.endpoints.listsEndpoint}/${activeListId}`,
+        { list: { max_issue_count: maxIssueCount } },
+      );
+    });
+  });
+});
+
 describe('fetchAllBoards', () => {
   expectNotImplemented(actions.fetchAllBoards);
 });

locale/gitlab.pot

@@ -10365,9 +10365,6 @@ msgstr ""
 msgid "Label"
 msgstr ""
 
-msgid "Label List"
-msgstr ""
-
 msgid "Label actions dropdown"
 msgstr ""
 
@@ -10791,6 +10788,9 @@ msgstr ""
 msgid "List"
 msgstr ""
 
+msgid "List Label"
+msgstr ""
+
 msgid "List Settings"
 msgstr ""
 
@@ -16882,6 +16882,9 @@ msgstr ""
 msgid "Something went wrong while stopping this environment. Please try again."
 msgstr ""
 
+msgid "Something went wrong while updating your list settings"
+msgstr ""
+
 msgid "Something went wrong, unable to add %{project} to dashboard"
 msgstr ""
 
@@ -20653,6 +20656,9 @@ msgstr ""
 msgid "Withdraw Access Request"
 msgstr ""
 
+msgid "Work in Progress Limit"
+msgstr ""
+
 msgid "Workflow Help"
 msgstr ""