Merge branch...

Merge branch '197314-the-board-list-issuable-sidebar-and-board-list-settings-overlap-when-both-are-opened' into 'master'

Use sidebar.closeAll event on board_column lists

See merge request gitlab-org/gitlab!29456

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

@@ -353,7 +353,7 @@ export default {
               v-if="isSettingsShown"
               ref="settingsBtn"
               :aria-label="__(`List settings`)"
-              class="no-drag rounded-right"
+              class="no-drag rounded-right js-board-settings-button"
               title="List settings"
               type="button"
               @click="openSidebarSettings"

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/changelogs/unreleased/197314-the-board-list-issuable-sidebar-and-board-list-settings-overlap-wh.yml

+---
+title: Close all other sidebars when the boards list settings sidebar is opened
+merge_request: 29456
+author:
+type: fixed

ee/spec/features/boards/sidebar_spec.rb

@@ -331,4 +331,30 @@ describe 'Issue Boards', :js do
       end
     end
   end
+
+  context 'when opening sidebars' do
+    let(:settings_button) { find('.js-board-settings-button') }
+
+    it 'closes card sidebar when opening settings sidebar' do
+      click_card(card1)
+
+      expect(page).to have_selector('.right-sidebar')
+
+      settings_button.click
+
+      expect(page).to have_selector('.js-board-settings-sidebar')
+      expect(page).not_to have_selector('.right-sidebar')
+    end
+
+    it 'closes settings sidebar when opening card sidebar' do
+      settings_button.click
+
+      expect(page).to have_selector('.js-board-settings-sidebar')
+
+      click_card(card1)
+
+      expect(page).to have_selector('.right-sidebar')
+      expect(page).not_to have_selector('.js-board-settings-sidebar')
+    end
+  end
 end

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();
+        });
+      });
     });
   });
 });