Merge branch...

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

Add event to handle closing all board sidebars

Closes #197314

See merge request gitlab-org/gitlab!26886

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

@@ -2,6 +2,7 @@
 /* eslint-disable vue/require-default-prop */
 import IssueCardInner from './issue_card_inner.vue';
 import eventHub from '../eventhub';
+import sidebarEventHub from '~/sidebar/event_hub';
 import boardsStore from '../stores/boards_store';
 
 export default {
@@ -73,6 +74,11 @@ export default {
     showIssue(e) {
       if (e.target.classList.contains('js-no-trigger')) return;
 
+      // If no issues are opened, close all sidebars first
+      if (!boardsStore.detail?.issue?.id) {
+        sidebarEventHub.$emit('sidebar.closeAll');
+      }
+
       // If CMD or CTRL is clicked
       const isMultiSelect = this.canMultiSelect && (e.ctrlKey || e.metaKey);
 

app/assets/javascripts/boards/components/board_sidebar.js

@@ -103,12 +103,14 @@ export default Vue.extend({
     eventHub.$on('sidebar.addAssignee', this.addAssignee);
     eventHub.$on('sidebar.removeAllAssignees', this.removeAllAssignees);
     eventHub.$on('sidebar.saveAssignees', this.saveAssignees);
+    eventHub.$on('sidebar.closeAll', this.closeSidebar);
   },
   beforeDestroy() {
     eventHub.$off('sidebar.removeAssignee', this.removeAssignee);
     eventHub.$off('sidebar.addAssignee', this.addAssignee);
     eventHub.$off('sidebar.removeAllAssignees', this.removeAllAssignees);
     eventHub.$off('sidebar.saveAssignees', this.saveAssignees);
+    eventHub.$off('sidebar.closeAll', this.closeSidebar);
   },
   mounted() {
     new IssuableContext(this.currentUser);

ee/app/assets/javascripts/boards/components/board.js

-import { mapActions } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 import boardPromotionState from 'ee/boards/components/board_promotion_state';
 import { GlTooltip } from '@gitlab/ui';
 import Board from '~/boards/components/board';
 import { __, sprintf, s__ } from '~/locale';
 import boardsStore from '~/boards/stores/boards_store';
+import eventHub from '~/sidebar/event_hub';
 
 /**
  * Please have a look at:
@@ -22,6 +23,7 @@ export default Board.extend({
     boardPromotionState,
   },
   computed: {
+    ...mapState(['activeListId']),
     issuesTooltip() {
       const { issuesSize, maxIssueCount } = this.list;
 
@@ -48,6 +50,10 @@ export default Board.extend({
   methods: {
     ...mapActions(['setActiveListId']),
     openSidebarSettings() {
+      // If no list is opened, close all sidebars first
+      if (!this.activeListId) {
+        eventHub.$emit('sidebar.closeAll');
+      }
       this.setActiveListId(this.list.id);
     },
   },

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

@@ -12,6 +12,7 @@ import { mapActions, mapState } from 'vuex';
 import { __, n__ } from '~/locale';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
 import boardsStoreEE from '../stores/boards_store_ee';
+import eventHub from '~/sidebar/event_hub';
 import flash from '~/flash';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 
@@ -99,6 +100,12 @@ export default {
       }
     },
   },
+  created() {
+    eventHub.$on('sidebar.closeAll', this.closeSidebar);
+  },
+  beforeDestroy() {
+    eventHub.$off('sidebar.closeAll', this.closeSidebar);
+  },
   methods: {
     ...mapActions(['setActiveListId', 'updateListWipLimit']),
     closeSidebar() {

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

@@ -8,6 +8,7 @@ import BoardSettingsSidebar from 'ee/boards/components/board_settings_sidebar.vu
 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 sidebarEventHub from '~/sidebar/event_hub';
 import flash from '~/flash';
 import waitForPromises from 'helpers/wait_for_promises';
 
@@ -100,6 +101,20 @@ describe('BoardSettingsSideBar', () => {
           );
         });
       });
+
+      it('calls closeSidebar on sidebar.closeAll event', () => {
+        createComponent({ activeListId: 0 }, { setActiveListId: jest.fn() });
+
+        sidebarEventHub.$emit('sidebar.closeAll');
+
+        return wrapper.vm.$nextTick().then(() => {
+          expect(storeActions.setActiveListId).toHaveBeenCalledWith(
+            expect.anything(),
+            0,
+            undefined,
+          );
+        });
+      });
     });
 
     describe('when activeListId is zero', () => {

spec/frontend/boards/board_card_spec.js

@@ -9,6 +9,7 @@ import axios from '~/lib/utils/axios_utils';
 import waitForPromises from 'helpers/wait_for_promises';
 
 import eventHub from '~/boards/eventhub';
+import sidebarEventHub from '~/sidebar/event_hub';
 import '~/boards/models/label';
 import '~/boards/models/assignee';
 import '~/boards/models/list';
@@ -201,7 +202,8 @@ describe('Board card', () => {
 
     it('resets detail issue to empty if already set', () => {
       jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
-      [boardsStore.detail.issue] = list.issues;
+      const [issue] = list.issues;
+      boardsStore.detail.issue = issue;
       mountComponent();
 
       wrapper.trigger('mousedown');
@@ -210,4 +212,27 @@ describe('Board card', () => {
       expect(eventHub.$emit).toHaveBeenCalledWith('clearDetailIssue', undefined);
     });
   });
+
+  describe('sidebarHub events', () => {
+    it('closes all sidebars before showing an issue if no issues are opened', () => {
+      jest.spyOn(sidebarEventHub, '$emit').mockImplementation(() => {});
+      boardsStore.detail.issue = {};
+      mountComponent();
+
+      wrapper.trigger('mouseup');
+
+      expect(sidebarEventHub.$emit).toHaveBeenCalledWith('sidebar.closeAll');
+    });
+
+    it('it does not closes all sidebars before showing an issue if an issue is opened', () => {
+      jest.spyOn(sidebarEventHub, '$emit').mockImplementation(() => {});
+      const [issue] = list.issues;
+      boardsStore.detail.issue = issue;
+      mountComponent();
+
+      wrapper.trigger('mousedown');
+
+      expect(sidebarEventHub.$emit).not.toHaveBeenCalledWith('sidebar.closeAll');
+    });
+  });
 });