Fix event hub emits with multiple event args

- This should fix some preexisting bugs with
  deploy_keys and groups
- This sets up the boards and sidebar to move
  to mitt

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

@@ -89,10 +89,10 @@ export default {
           eventHub.$emit('clearDetailIssue', isMultiSelect);
 
           if (isMultiSelect) {
-            eventHub.$emit('newDetailIssue', this.issue, isMultiSelect);
+            eventHub.$emit('newDetailIssue', [this.issue, isMultiSelect]);
           }
         } else {
-          eventHub.$emit('newDetailIssue', this.issue, isMultiSelect);
+          eventHub.$emit('newDetailIssue', [this.issue, isMultiSelect]);
           boardsStore.setListDetail(this.list);
         }
       }

app/assets/javascripts/boards/index.js

@@ -202,7 +202,7 @@ export default () => {
       updateTokens() {
         this.filterManager.updateTokens();
       },
-      updateDetailIssue(newIssue, multiSelect = false) {
+      updateDetailIssue([newIssue, multiSelect = false]) {
         const { sidebarInfoEndpoint } = newIssue;
         if (sidebarInfoEndpoint && newIssue.subscribed === undefined) {
           newIssue.setFetchingState('subscriptions', true);

app/assets/javascripts/deploy_keys/components/action_btn.vue

@@ -30,9 +30,12 @@ export default {
     doAction() {
       this.isLoading = true;
 
-      eventHub.$emit(`${this.type}.key`, this.deployKey, () => {
-        this.isLoading = false;
-      });
+      eventHub.$emit(`${this.type}.key`, [
+        this.deployKey,
+        () => {
+          this.isLoading = false;
+        },
+      ]);
     },
   },
 };

app/assets/javascripts/deploy_keys/components/app.vue

@@ -90,13 +90,13 @@ export default {
           return new Flash(s__('DeployKeys|Error getting deploy keys'));
         });
     },
-    enableKey(deployKey) {
+    enableKey([deployKey]) {
       this.service
         .enableKey(deployKey.id)
         .then(this.fetchKeys)
         .catch(() => new Flash(s__('DeployKeys|Error enabling deploy key')));
     },
-    disableKey(deployKey, callback) {
+    disableKey([deployKey, callback]) {
       if (
         // eslint-disable-next-line no-alert
         window.confirm(s__('DeployKeys|You are going to remove this deploy key. Are you sure?'))

app/assets/javascripts/groups/components/app.vue

@@ -123,7 +123,7 @@ export default {
         this.updateGroups(res, Boolean(filterGroupsBy));
       });
     },
-    fetchPage(page, filterGroupsBy, sortBy, archived) {
+    fetchPage([page, filterGroupsBy, sortBy, archived]) {
       this.isLoading = true;
 
       return this.fetchGroups({
@@ -169,7 +169,7 @@ export default {
         parentGroup.isOpen = false;
       }
     },
-    showLeaveGroupModal(group, parentGroup) {
+    showLeaveGroupModal([group, parentGroup]) {
       const { fullName } = group;
       this.targetGroup = group;
       this.targetParentGroup = parentGroup;

app/assets/javascripts/groups/components/groups.vue

@@ -35,7 +35,12 @@ export default {
       const filterGroupsParam = getParameterByName('filter');
       const sortParam = getParameterByName('sort');
       const archivedParam = getParameterByName('archived');
-      eventHub.$emit(`${this.action}fetchPage`, page, filterGroupsParam, sortParam, archivedParam);
+      eventHub.$emit(`${this.action}fetchPage`, [
+        page,
+        filterGroupsParam,
+        sortParam,
+        archivedParam,
+      ]);
     },
   },
 };

app/assets/javascripts/groups/components/item_actions.vue

@@ -37,7 +37,7 @@ export default {
   },
   methods: {
     onLeaveGroup() {
-      eventHub.$emit(`${this.action}showLeaveGroupModal`, this.group, this.parentGroup);
+      eventHub.$emit(`${this.action}showLeaveGroupModal`, [this.group, this.parentGroup]);
     },
   },
 };

app/assets/javascripts/helpers/event_hub_factory.js

@@ -3,6 +3,8 @@ import mitt from 'mitt';
 export default () => {
   const emitter = mitt();
 
+  const originalEmit = emitter.emit;
+
   emitter.once = (event, handler) => {
     const wrappedHandler = evt => {
       handler(evt);
@@ -11,6 +13,10 @@ export default () => {
     emitter.on(event, wrappedHandler);
   };
 
+  emitter.emit = (event, args = []) => {
+    originalEmit(event, args);
+  };
+
   emitter.$on = emitter.on;
   emitter.$once = emitter.once;
   emitter.$off = emitter.off;

app/assets/javascripts/sidebar/event_hub.js

-import Vue from 'vue';
+import createEventHub from '~/helpers/event_hub_factory';
 
-const eventHub = new Vue();
+const eventHub = createEventHub();
 
 // TODO: remove eventHub hack after code splitting refactor
 window.emitSidebarEvent = (...args) => eventHub.$emit(...args);

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

 /* eslint-disable class-methods-use-this, no-param-reassign */
 /*
-  no-param-reassign is disabled because one method of BoardsStoreEE 
+  no-param-reassign is disabled because one method of BoardsStoreEE
   modify the passed parameter in conformity with non-ee BoardsStore.
 */
 
@@ -190,7 +190,7 @@ class BoardsStoreEE {
     issue.epic = newEpic;
   }
 
-  updateWeight(newWeight, id) {
+  updateWeight([newWeight, id]) {
     const { issue } = this.store.detail;
     if (issue.id === id && issue.sidebarInfoEndpoint) {
       issue.setLoadingState('weight', true);

ee/app/assets/javascripts/sidebar/components/weight/sidebar_weight.vue

@@ -27,7 +27,7 @@ export default {
   },
 
   methods: {
-    onUpdateWeight(newWeight) {
+    onUpdateWeight([newWeight]) {
       this.mediator.updateWeight(newWeight).catch(() => {
         Flash(__('Error occurred while updating the issue weight'));
       });

ee/app/assets/javascripts/sidebar/components/weight/weight.vue

@@ -140,14 +140,14 @@ export default {
         $(this.$el).trigger('hidden.gl.dropdown');
 
         if (isNewValue) {
-          eventHub.$emit('updateWeight', value, this.id);
+          eventHub.$emit('updateWeight', [value, this.id]);
         }
 
         this.showEditField(false);
       }
     },
     removeWeight() {
-      eventHub.$emit('updateWeight', '', this.id);
+      eventHub.$emit('updateWeight', ['', this.id]);
     },
   },
 };

ee/spec/frontend/sidebar/weight_spec.js

@@ -125,7 +125,7 @@ describe('Weight', () => {
       vm.$refs.editableField.dispatchEvent(event);
 
       expect(vm.hasValidInput).toBe(true);
-      expect(eventHub.$emit).toHaveBeenCalledWith('updateWeight', expectedWeightValue, ID);
+      expect(eventHub.$emit).toHaveBeenCalledWith('updateWeight', [expectedWeightValue, ID]);
     });
   });
 
@@ -143,7 +143,7 @@ describe('Weight', () => {
 
     return vm.$nextTick(() => {
       expect(vm.hasValidInput).toBe(true);
-      expect(eventHub.$emit).toHaveBeenCalledWith('updateWeight', '', ID);
+      expect(eventHub.$emit).toHaveBeenCalledWith('updateWeight', ['', ID]);
     });
   });
 

spec/frontend/boards/board_card_spec.js

@@ -196,7 +196,7 @@ describe('Board card', () => {
       wrapper.trigger('mousedown');
       wrapper.trigger('mouseup');
 
-      expect(eventHub.$emit).toHaveBeenCalledWith('newDetailIssue', wrapper.vm.issue, undefined);
+      expect(eventHub.$emit).toHaveBeenCalledWith('newDetailIssue', [wrapper.vm.issue, undefined]);
       expect(boardsStore.detail.list).toEqual(wrapper.vm.list);
     });
 

spec/frontend/deploy_keys/components/action_btn_spec.js

@@ -32,7 +32,7 @@ describe('Deploy keys action btn', () => {
     wrapper.trigger('click');
 
     return wrapper.vm.$nextTick().then(() => {
-      expect(eventHub.$emit).toHaveBeenCalledWith('enable.key', deployKey, expect.anything());
+      expect(eventHub.$emit).toHaveBeenCalledWith('enable.key', [deployKey, expect.any(Function)]);
     });
   });
 

spec/frontend/deploy_keys/components/app_spec.js

@@ -88,7 +88,7 @@ describe('Deploy keys app component', () => {
         jest.spyOn(wrapper.vm.service, 'getKeys').mockImplementation(() => {});
         jest.spyOn(wrapper.vm.service, 'enableKey').mockImplementation(() => Promise.resolve());
 
-        eventHub.$emit('enable.key', key);
+        eventHub.$emit('enable.key', [key]);
 
         return wrapper.vm.$nextTick();
       })
@@ -106,7 +106,7 @@ describe('Deploy keys app component', () => {
         jest.spyOn(wrapper.vm.service, 'getKeys').mockImplementation(() => {});
         jest.spyOn(wrapper.vm.service, 'disableKey').mockImplementation(() => Promise.resolve());
 
-        eventHub.$emit('disable.key', key);
+        eventHub.$emit('disable.key', [key]);
 
         return wrapper.vm.$nextTick();
       })
@@ -124,7 +124,7 @@ describe('Deploy keys app component', () => {
         jest.spyOn(wrapper.vm.service, 'getKeys').mockImplementation(() => {});
         jest.spyOn(wrapper.vm.service, 'disableKey').mockImplementation(() => Promise.resolve());
 
-        eventHub.$emit('remove.key', key);
+        eventHub.$emit('remove.key', [key]);
 
         return wrapper.vm.$nextTick();
       })

spec/frontend/groups/components/app_spec.js

@@ -184,7 +184,7 @@ describe('AppComponent', () => {
         jest.spyOn(window.history, 'replaceState').mockImplementation(() => {});
         jest.spyOn($, 'scrollTo').mockImplementation(() => {});
 
-        const fetchPagePromise = vm.fetchPage(2, null, null, true);
+        const fetchPagePromise = vm.fetchPage([2, null, null, true]);
 
         expect(vm.isLoading).toBe(true);
         expect(vm.fetchGroups).toHaveBeenCalledWith({
@@ -275,7 +275,7 @@ describe('AppComponent', () => {
 
         expect(vm.targetGroup).toBe(null);
         expect(vm.targetParentGroup).toBe(null);
-        vm.showLeaveGroupModal(group, mockParentGroupItem);
+        vm.showLeaveGroupModal([group, mockParentGroupItem]);
 
         expect(vm.targetGroup).not.toBe(null);
         expect(vm.targetParentGroup).not.toBe(null);
@@ -286,7 +286,7 @@ describe('AppComponent', () => {
 
         expect(vm.showModal).toBe(false);
         expect(vm.groupLeaveConfirmationMessage).toBe('');
-        vm.showLeaveGroupModal(group, mockParentGroupItem);
+        vm.showLeaveGroupModal([group, mockParentGroupItem]);
 
         expect(vm.showModal).toBe(true);
         expect(vm.groupLeaveConfirmationMessage).toBe(
@@ -298,7 +298,7 @@ describe('AppComponent', () => {
     describe('hideLeaveGroupModal', () => {
       it('hides modal confirmation which is shown before leaving the group', () => {
         const group = { ...mockParentGroupItem };
-        vm.showLeaveGroupModal(group, mockParentGroupItem);
+        vm.showLeaveGroupModal([group, mockParentGroupItem]);
 
         expect(vm.showModal).toBe(true);
         vm.hideLeaveGroupModal();

spec/frontend/groups/components/groups_spec.js

@@ -41,13 +41,12 @@ describe('GroupsComponent', () => {
 
         vm.change(2);
 
-        expect(eventHub.$emit).toHaveBeenCalledWith(
-          'fetchPage',
+        expect(eventHub.$emit).toHaveBeenCalledWith('fetchPage', [
           2,
           expect.any(Object),
           expect.any(Object),
           expect.any(Object),
-        );
+        ]);
       });
     });
   });

spec/frontend/groups/components/item_actions_spec.js

@@ -31,11 +31,10 @@ describe('ItemActionsComponent', () => {
         jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
         vm.onLeaveGroup();
 
-        expect(eventHub.$emit).toHaveBeenCalledWith(
-          'showLeaveGroupModal',
+        expect(eventHub.$emit).toHaveBeenCalledWith('showLeaveGroupModal', [
           vm.group,
           vm.parentGroup,
-        );
+        ]);
       });
     });
   });