Use sidebar.closeAll event on board_column lists

app/assets/javascripts/boards/constants.js

@@ -8,6 +8,8 @@ export const ListType = {
   blank: 'blank',
 };
 
+export const inactiveListId = 0;
+
 export default {
   ListType,
 };

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

 <script>
-import { mapActions } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import BoardColumnFoss from '~/boards/components/board_column.vue';
 import { __, sprintf, s__ } from '~/locale';
 import boardsStore from '~/boards/stores/boards_store';
+import { inactiveListId } from '~/boards/constants';
 import BoardPromotionState from 'ee/boards/components/board_promotion_state';
+import eventHub from '~/sidebar/event_hub';
 
 export default {
   components: {
@@ -16,6 +18,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(['activeListId']),
     issuesTooltip() {
       const { issuesSize, maxIssueCount } = this.list;
 
@@ -42,6 +45,10 @@ export default {
   methods: {
     ...mapActions(['setActiveListId']),
     openSidebarSettings() {
+      if (this.activeListId === inactiveListId) {
+        eventHub.$emit('sidebar.closeAll');
+      }
+
       this.setActiveListId(this.list.id);
     },
   },

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

 import Vue from 'vue';
-import { shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 
 import Board from 'ee/boards/components/board_column.vue';
 import List from '~/boards/models/list';
-import { ListType } from '~/boards/constants';
+import { ListType, inactiveListId } from '~/boards/constants';
 import axios from '~/lib/utils/axios_utils';
+import sidebarEventHub from '~/sidebar/event_hub';
 
 import { TEST_HOST } from 'helpers/test_constants';
 import { listObj } from 'jest/boards/mock_data';
@@ -14,7 +16,12 @@ import { listObj } from 'jest/boards/mock_data';
 // so we are mocking it in this test
 jest.mock('ee/boards/components/board_promotion_state', () => ({}));
 
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
 describe('Board Column Component', () => {
+  let store;
   let wrapper;
   let axiosMock;
 
@@ -22,6 +29,8 @@ describe('Board Column Component', () => {
     window.gon = {};
     axiosMock = new AxiosMockAdapter(axios);
     axiosMock.onGet(`${TEST_HOST}/lists/1/issues`).reply(200, { issues: [] });
+    store = new Vuex.Store({ state: { activeListId: inactiveListId } });
+    jest.spyOn(store, 'dispatch').mockImplementation();
   });
 
   afterEach(() => {
@@ -61,6 +70,8 @@ describe('Board Column Component', () => {
     }
 
     wrapper = shallowMount(Board, {
+      store,
+      localVue,
       propsData: {
         boardId,
         disabled: false,
@@ -117,6 +128,28 @@ describe('Board Column Component', () => {
           expect([...hasSettings, ...hasNoSettings]).toContain(value);
         });
       });
+
+      describe('emits sidebar.closeAll event on openSidebarSettings', () => {
+        beforeEach(() => {
+          jest.spyOn(sidebarEventHub, '$emit');
+        });
+
+        it('emits event if no active List', () => {
+          // Shares the same behavior for any settings-enabled List type
+          createComponent({ listType: hasSettings[0] });
+          wrapper.vm.openSidebarSettings();
+
+          expect(sidebarEventHub.$emit).toHaveBeenCalledWith('sidebar.closeAll');
+        });
+
+        it('does not emits event when there is an active List', () => {
+          store.state.activeListId = listObj.id;
+          createComponent({ listType: hasSettings[0] });
+          wrapper.vm.openSidebarSettings();
+
+          expect(sidebarEventHub.$emit).not.toHaveBeenCalled();
+        });
+      });
     });
   });
 });