Rename listid to id for generalization of sidebar mechanism

app/assets/javascripts/boards/constants.js

@@ -13,7 +13,7 @@ export const ListType = {
   blank: 'blank',
 };
 
-export const inactiveListId = 0;
+export const inactiveId = 0;
 
 export default {
   BoardType,

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

-import { inactiveListId } from '~/boards/constants';
+import { inactiveId } from '~/boards/constants';
 
 export default () => ({
   endpoints: {},
   isShowingLabels: true,
-  activeListId: inactiveListId,
+  activeId: inactiveId,
 });

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

@@ -3,7 +3,7 @@ import { mapState, mapActions } from 'vuex';
 import BoardListHeaderFoss from '~/boards/components/board_list_header.vue';
 import { __, sprintf, s__ } from '~/locale';
 import boardsStore from '~/boards/stores/boards_store';
-import { inactiveListId } from '~/boards/constants';
+import { inactiveId } from '~/boards/constants';
 import eventHub from '~/sidebar/event_hub';
 
 export default {
@@ -14,7 +14,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(['activeListId']),
+    ...mapState(['activeId']),
     issuesTooltip() {
       const { issuesSize, maxIssueCount } = this.list;
 
@@ -39,13 +39,13 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['setActiveListId']),
+    ...mapActions(['setActiveId']),
     openSidebarSettings() {
-      if (this.activeListId === inactiveListId) {
+      if (this.activeId === inactiveId) {
         eventHub.$emit('sidebar.closeAll');
       }
 
-      this.setActiveListId(this.list.id);
+      this.setActiveId(this.list.id);
     },
   },
 };

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

@@ -15,7 +15,7 @@ import boardsStoreEE from '../stores/boards_store_ee';
 import eventHub from '~/sidebar/event_hub';
 import flash from '~/flash';
 import { isScopedLabel } from '~/lib/utils/common_utils';
-import { inactiveListId } from '~/boards/constants';
+import { inactiveId } from '~/boards/constants';
 
 // NOTE: need to revisit how we handle headerHeight, because we have so many different header and footer options.
 export default {
@@ -52,16 +52,16 @@ export default {
     };
   },
   computed: {
-    ...mapState(['activeListId']),
+    ...mapState(['activeId']),
     activeList() {
       /*
         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);
+      return boardsStoreEE.store.state.lists.find(({ id }) => id === this.activeId);
     },
     isSidebarOpen() {
-      return this.activeListId !== inactiveListId;
+      return this.activeId !== inactiveId;
     },
     activeListLabel() {
       return this.activeList.label;
@@ -108,10 +108,10 @@ export default {
     eventHub.$off('sidebar.closeAll', this.closeSidebar);
   },
   methods: {
-    ...mapActions(['setActiveListId', 'updateListWipLimit']),
+    ...mapActions(['setActiveId', 'updateListWipLimit']),
     closeSidebar() {
       this.edit = false;
-      this.setActiveListId(inactiveListId);
+      this.setActiveId(inactiveId);
     },
     showInput() {
       this.edit = true;
@@ -128,7 +128,7 @@ export default {
         this.updating = true;
         // need to reassign bc were clearing the ref in resetStateAfterUpdate.
         const wipLimit = this.currentWipLimit;
-        const id = this.activeListId;
+        const id = this.activeId;
 
         this.updateListWipLimit({ maxIssueCount: this.currentWipLimit, id })
           .then(() => {
@@ -137,7 +137,7 @@ export default {
           })
           .catch(() => {
             this.resetStateAfterUpdate();
-            this.setActiveListId(inactiveListId);
+            this.setActiveId(inactiveId);
             flash(__('Something went wrong while updating your list settings'));
           });
       } else {
@@ -145,14 +145,14 @@ export default {
       }
     },
     clearWipLimit() {
-      this.updateListWipLimit({ maxIssueCount: 0, id: this.activeListId })
+      this.updateListWipLimit({ maxIssueCount: 0, id: this.activeId })
         .then(() => {
-          boardsStoreEE.setMaxIssueCountOnList(this.activeListId, 0);
+          boardsStoreEE.setMaxIssueCountOnList(this.activeId, 0);
           this.resetStateAfterUpdate();
         })
         .catch(() => {
           this.resetStateAfterUpdate();
-          this.setActiveListId(inactiveListId);
+          this.setActiveId(inactiveId);
           flash(__('Something went wrong while updating your list settings'));
         });
     },
@@ -202,9 +202,9 @@ export default {
           </gl-avatar-link>
         </template>
         <template v-else-if="boardListType === $options.milestone">
-          <gl-link class="js-milestone" :href="activeListMilestone.webUrl">{{
-            activeListMilestone.title
-          }}</gl-link>
+          <gl-link class="js-milestone" :href="activeListMilestone.webUrl">
+            {{ activeListMilestone.title }}
+          </gl-link>
         </template>
       </div>
       <div class="d-flex justify-content-between flex-column">

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

@@ -67,13 +67,13 @@ export default {
     commit(types.SET_SHOW_LABELS, val);
   },
 
-  setActiveListId({ commit }, listId) {
+  setActiveId({ commit }, listId) {
     commit(types.SET_ACTIVE_LIST_ID, listId);
   },
   updateListWipLimit({ state }, { maxIssueCount }) {
-    const { activeListId } = state;
+    const { activeId } = state;
 
-    return axios.put(`${boardsStoreEE.store.state.endpoints.listsEndpoint}/${activeListId}`, {
+    return axios.put(`${boardsStoreEE.store.state.endpoints.listsEndpoint}/${activeId}`, {
       list: {
         max_issue_count: maxIssueCount,
       },

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

@@ -12,7 +12,7 @@ export default {
     state.isShowingLabels = val;
   },
   [mutationTypes.SET_ACTIVE_LIST_ID]: (state, id) => {
-    state.activeListId = id;
+    state.activeId = id;
   },
 
   [mutationTypes.REQUEST_AVAILABLE_BOARDS]: () => {

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

@@ -5,7 +5,7 @@ import AxiosMockAdapter from 'axios-mock-adapter';
 
 import BoardListHeader from 'ee/boards/components/board_list_header.vue';
 import List from '~/boards/models/list';
-import { ListType, inactiveListId } from '~/boards/constants';
+import { ListType, inactiveId } from '~/boards/constants';
 import axios from '~/lib/utils/axios_utils';
 import sidebarEventHub from '~/sidebar/event_hub';
 
@@ -29,7 +29,7 @@ describe('Board List Header Component', () => {
     window.gon = {};
     axiosMock = new AxiosMockAdapter(axios);
     axiosMock.onGet(`${TEST_HOST}/lists/1/issues`).reply(200, { issues: [] });
-    store = new Vuex.Store({ state: { activeListId: inactiveListId } });
+    store = new Vuex.Store({ state: { activeId: inactiveId } });
     jest.spyOn(store, 'dispatch').mockImplementation();
   });
 
@@ -145,7 +145,7 @@ describe('Board List Header Component', () => {
         });
 
         it('does not emits event when there is an active List', () => {
-          store.state.activeListId = listObj.id;
+          store.state.activeId = listObj.id;
           createComponent({ listType: hasSettings[0] });
           wrapper.vm.openSidebarSettings();
 

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

@@ -11,7 +11,7 @@ import bs from '~/boards/stores/boards_store';
 import sidebarEventHub from '~/sidebar/event_hub';
 import flash from '~/flash';
 import waitForPromises from 'helpers/wait_for_promises';
-import { inactiveListId } from '~/boards/constants';
+import { inactiveId } from '~/boards/constants';
 
 jest.mock('~/flash');
 // NOTE: needed for calling boardsStore.addList
@@ -29,11 +29,7 @@ describe('BoardSettingsSideBar', () => {
   const listId = 1;
   const currentWipLimit = 1; // Needs to be other than null to trigger requests.
 
-  const createComponent = (
-    state = { activeListId: inactiveListId },
-    actions = {},
-    localState = {},
-  ) => {
+  const createComponent = (state = { activeId: inactiveId }, actions = {}, localState = {}) => {
     storeActions = actions;
 
     const store = new Vuex.Store({
@@ -93,35 +89,35 @@ describe('BoardSettingsSideBar', () => {
     describe('on close', () => {
       it('calls closeSidebar', () => {
         const spy = jest.fn();
-        createComponent({ activeListId: inactiveListId }, { setActiveListId: spy });
+        createComponent({ activeId: inactiveId }, { setActiveId: spy });
 
         wrapper.find(GlDrawer).vm.$emit('close');
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(storeActions.setActiveListId).toHaveBeenCalledWith(
+          expect(storeActions.setActiveId).toHaveBeenCalledWith(
             expect.anything(),
-            inactiveListId,
+            inactiveId,
             undefined,
           );
         });
       });
 
       it('calls closeSidebar on sidebar.closeAll event', () => {
-        createComponent({ activeListId: inactiveListId }, { setActiveListId: jest.fn() });
+        createComponent({ activeId: inactiveId }, { setActiveId: jest.fn() });
 
         sidebarEventHub.$emit('sidebar.closeAll');
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(storeActions.setActiveListId).toHaveBeenCalledWith(
+          expect(storeActions.setActiveId).toHaveBeenCalledWith(
             expect.anything(),
-            inactiveListId,
+            inactiveId,
             undefined,
           );
         });
       });
     });
 
-    describe('when activeListId is zero', () => {
+    describe('when activeId is zero', () => {
       it('renders GlDrawer with open false', () => {
         createComponent();
 
@@ -129,7 +125,7 @@ describe('BoardSettingsSideBar', () => {
       });
     });
 
-    describe('when activeListId is greater than zero', () => {
+    describe('when activeId is greater than zero', () => {
       beforeEach(() => {
         mock = new MockAdapter(axios);
 
@@ -145,13 +141,13 @@ describe('BoardSettingsSideBar', () => {
       });
 
       it('renders GlDrawer with open false', () => {
-        createComponent({ activeListId: 1 });
+        createComponent({ activeId: 1 });
 
         expect(wrapper.find(GlDrawer).props('open')).toBe(true);
       });
     });
 
-    describe('when activeListId is in boardsStore', () => {
+    describe('when activeId is in boardsStore', () => {
       beforeEach(() => {
         mock = new MockAdapter(axios);
 
@@ -161,7 +157,7 @@ describe('BoardSettingsSideBar', () => {
           list_type: 'label',
         });
 
-        createComponent({ activeListId: listId });
+        createComponent({ activeId: listId });
       });
 
       afterEach(() => {
@@ -177,13 +173,13 @@ describe('BoardSettingsSideBar', () => {
       });
     });
 
-    describe('when activeListId is not in boardsStore', () => {
+    describe('when activeId is not in boardsStore', () => {
       beforeEach(() => {
         mock = new MockAdapter(axios);
 
         boardsStore.store.addList({ id: listId, label: { title: labelTitle, color: labelColor } });
 
-        createComponent({ activeListId: inactiveListId });
+        createComponent({ activeId: inactiveId });
       });
 
       afterEach(() => {
@@ -216,7 +212,7 @@ describe('BoardSettingsSideBar', () => {
       });
 
       it('renders "None" in the block', () => {
-        createComponent({ activeListId: listId });
+        createComponent({ activeId: listId });
 
         expect(wrapper.find('.js-wip-limit').text()).toMatchSnapshot();
       });
@@ -242,13 +238,13 @@ describe('BoardSettingsSideBar', () => {
         });
 
         it('renders the correct milestone text', () => {
-          createComponent({ activeListId: 1 });
+          createComponent({ activeId: 1 });
 
           expect(wrapper.find('.js-milestone').text()).toMatchSnapshot();
         });
 
         it('renders the correct list type text', () => {
-          createComponent({ activeListId: 1 });
+          createComponent({ activeId: 1 });
 
           expect(wrapper.find('.js-list-label').text()).toMatchSnapshot();
         });
@@ -270,14 +266,14 @@ describe('BoardSettingsSideBar', () => {
         });
 
         it('renders gl-avatar-link with correct href', () => {
-          createComponent({ activeListId: 1 });
+          createComponent({ activeId: 1 });
 
           expect(wrapper.find(GlAvatarLink).exists()).toBe(true);
           expect(wrapper.find(GlAvatarLink).attributes('href')).toEqual('https://gitlab.com/root');
         });
 
         it('renders gl-avatar-labeled with "root" as username and name as "Test"', () => {
-          createComponent({ activeListId: 1 });
+          createComponent({ activeId: 1 });
 
           expect(wrapper.find(GlAvatarLabeled).exists()).toBe(true);
           expect(wrapper.find(GlAvatarLabeled).attributes('label')).toEqual('Test');
@@ -285,7 +281,7 @@ describe('BoardSettingsSideBar', () => {
         });
 
         it('renders the correct list type text', () => {
-          createComponent({ activeListId: 1 });
+          createComponent({ activeId: 1 });
 
           expect(wrapper.find('.js-list-label').text()).toMatchSnapshot();
         });
@@ -303,7 +299,7 @@ describe('BoardSettingsSideBar', () => {
           list_type: 'label',
         });
 
-        createComponent({ activeListId: num });
+        createComponent({ activeId: num });
 
         expect(wrapper.find('.js-wip-limit').text()).toMatchSnapshot();
       });
@@ -320,7 +316,7 @@ describe('BoardSettingsSideBar', () => {
         list_type: 'label',
       });
 
-      createComponent({ activeListId: listId }, { updateListWipLimit: () => {} });
+      createComponent({ activeId: listId }, { updateListWipLimit: () => {} });
     });
 
     it('renders an input', () => {
@@ -364,7 +360,7 @@ describe('BoardSettingsSideBar', () => {
           config: { data: JSON.stringify({ list: { max_issue_count: 0 } }) },
         });
 
-        createComponent({ activeListId: listId }, { updateListWipLimit: spy });
+        createComponent({ activeId: listId }, { updateListWipLimit: spy });
       });
 
       it('resets wipLimit to 0', () => {
@@ -388,7 +384,7 @@ describe('BoardSettingsSideBar', () => {
           list_type: 'label',
         });
 
-        createComponent({ activeListId: listId }, { updateListWipLimit: () => {} });
+        createComponent({ activeId: listId }, { updateListWipLimit: () => {} });
       });
 
       it('does not render the remove limit button', () => {
@@ -425,7 +421,7 @@ describe('BoardSettingsSideBar', () => {
             config: { data: JSON.stringify({ list: { max_issue_count: '4' } }) },
           });
           createComponent(
-            { activeListId: 1 },
+            { activeId: 1 },
             { updateListWipLimit: spy },
             { edit: true, currentWipLimit },
           );
@@ -441,7 +437,7 @@ describe('BoardSettingsSideBar', () => {
           it('doesnt call updateListWipLimit', () => {
             const spy = jest.fn().mockResolvedValue({});
             createComponent(
-              { activeListId: 1 },
+              { activeId: 1 },
               { updateListWipLimit: spy },
               { edit: true, currentWipLimit: 2 },
             );
@@ -458,7 +454,7 @@ describe('BoardSettingsSideBar', () => {
           it('doesnt call updateListWipLimit', () => {
             const spy = jest.fn().mockResolvedValue({});
             createComponent(
-              { activeListId: 1 },
+              { activeId: 1 },
               { updateListWipLimit: spy },
               { edit: true, currentWipLimit: null },
             );
@@ -477,7 +473,7 @@ describe('BoardSettingsSideBar', () => {
           beforeEach(() => {
             const spy = jest.fn().mockResolvedValue({});
             createComponent(
-              { activeListId: 1 },
+              { activeId: 1 },
               { updateListWipLimit: spy },
               { edit: true, currentWipLimit: maxIssueCount },
             );
@@ -508,8 +504,8 @@ describe('BoardSettingsSideBar', () => {
           beforeEach(() => {
             const spy = jest.fn().mockRejectedValue();
             createComponent(
-              { activeListId: 1 },
-              { updateListWipLimit: spy, setActiveListId: () => {} },
+              { activeId: 1 },
+              { updateListWipLimit: spy, setActiveId: () => {} },
               { edit: true, currentWipLimit },
             );
 
@@ -527,7 +523,7 @@ describe('BoardSettingsSideBar', () => {
 
     describe('passing of props to gl-form-input', () => {
       beforeEach(() => {
-        createComponent({ activeListId: listId }, { updateListWipLimit: () => {} }, { edit: true });
+        createComponent({ activeId: listId }, { updateListWipLimit: () => {} }, { edit: true });
       });
 
       it('passes `trim`', () => {

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

@@ -3,7 +3,7 @@ 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';
-import { inactiveListId } from '~/boards/constants';
+import { inactiveId } from '~/boards/constants';
 
 jest.mock('axios');
 
@@ -30,14 +30,14 @@ describe('setShowLabels', () => {
   });
 });
 
-describe('setActiveListId', () => {
+describe('setActiveId', () => {
   it('should commit mutation SET_ACTIVE_LIST_ID', done => {
     const state = {
-      activeListId: inactiveListId,
+      activeId: inactiveId,
     };
 
     testAction(
-      actions.setActiveListId,
+      actions.setActiveId,
       1,
       state,
       [{ type: types.SET_ACTIVE_LIST_ID, payload: 1 }],
@@ -63,11 +63,11 @@ describe('updateListWipLimit', () => {
   it('should call the correct url', () => {
     axios.put.mockResolvedValue({ data: {} });
     const maxIssueCount = 0;
-    const activeListId = 1;
+    const activeId = 1;
 
-    return actions.updateListWipLimit({ state: { activeListId } }, { maxIssueCount }).then(() => {
+    return actions.updateListWipLimit({ state: { activeId } }, { maxIssueCount }).then(() => {
       expect(axios.put).toHaveBeenCalledWith(
-        `${boardsStoreEE.store.state.endpoints.listsEndpoint}/${activeListId}`,
+        `${boardsStoreEE.store.state.endpoints.listsEndpoint}/${activeId}`,
         { list: { max_issue_count: maxIssueCount } },
       );
     });

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

 import mutations from 'ee/boards/stores/mutations';
-import { inactiveListId } from '~/boards/constants';
+import { inactiveId } from '~/boards/constants';
 import { mockLists, mockEpics } from '../mock_data';
 
 const expectNotImplemented = action => {
@@ -24,12 +24,12 @@ describe('SET_ACTIVE_LIST_ID', () => {
   it('updates aciveListId to be the value that is passed', () => {
     const expectedId = 1;
     const state = {
-      activeListId: inactiveListId,
+      activeId: inactiveId,
     };
 
     mutations.SET_ACTIVE_LIST_ID(state, expectedId);
 
-    expect(state.activeListId).toBe(expectedId);
+    expect(state.activeId).toBe(expectedId);
   });
 });