Merge branch 'revert-1f1ce4a6' into 'master'

Revert "Merge branch 'fe-fix-incorrect-mitt-usage' into 'master'"

See merge request gitlab-org/gitlab!35074

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,12 +30,9 @@ export default {
     doAction() {
       this.isLoading = true;
 
-      eventHub.$emit(`${this.type}.key`, [
-        this.deployKey,
-        () => {
+      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,12 +35,7 @@ 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

-import mitt from 'mitt';
+import Vue from 'vue';
 
+/**
+ * Return a Vue like event hub
+ *
+ * - $on
+ * - $off
+ * - $once
+ * - $emit
+ *
+ * Please note, this was once implemented with `mitt`, but since then has been reverted
+ * because of some API issues. https://gitlab.com/gitlab-org/gitlab/-/merge_requests/35074
+ *
+ * We'd like to shy away from using a full fledged Vue instance from this in the future.
+ */
 export default () => {
-  const emitter = mitt();
-
-  const originalEmit = emitter.emit;
-
-  emitter.once = (event, handler) => {
-    const wrappedHandler = evt => {
-      handler(evt);
-      emitter.off(event, wrappedHandler);
-    };
-    emitter.on(event, wrappedHandler);
-  };
-
-  emitter.emit = (event, args = []) => {
-    originalEmit(event, args);
-  };
-
-  emitter.$on = emitter.on;
-  emitter.$once = emitter.once;
-  emitter.$off = emitter.off;
-  emitter.$emit = emitter.emit;
-
-  return emitter;
+  return new Vue();
 };

app/assets/javascripts/sidebar/event_hub.js

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

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

@@ -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);
     });
   });
 

package.json

@@ -105,7 +105,6 @@
     "mermaid": "^8.5.2",
     "mersenne-twister": "1.1.0",
     "minimatch": "^3.0.4",
-    "mitt": "^1.2.0",
     "monaco-editor": "^0.18.1",
     "monaco-editor-webpack-plugin": "^1.7.0",
     "mousetrap": "^1.4.6",

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.any(Function)]);
+      expect(eventHub.$emit).toHaveBeenCalledWith('enable.key', deployKey, expect.anything());
     });
   });
 

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,12 +41,13 @@ 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,10 +31,11 @@ describe('ItemActionsComponent', () => {
         jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
         vm.onLeaveGroup();
 
-        expect(eventHub.$emit).toHaveBeenCalledWith('showLeaveGroupModal', [
+        expect(eventHub.$emit).toHaveBeenCalledWith(
+          'showLeaveGroupModal',
           vm.group,
           vm.parentGroup,
-        ]);
+        );
       });
     });
   });

spec/frontend/helpers/event_hub_factory_spec.js

 import createEventHub from '~/helpers/event_hub_factory';
 
+const TEST_EVENT = 'foobar';
+
 describe('event bus factory', () => {
   let eventBus;
+  let handler;
 
   beforeEach(() => {
     eventBus = createEventHub();
+    handler = jest.fn();
   });
 
   afterEach(() => {
     eventBus = null;
   });
 
-  describe('underlying module', () => {
-    let mitt;
+  describe('instance', () => {
+    it.each`
+      method
+      ${'$on'}
+      ${'$once'}
+      ${'$off'}
+      ${'$emit'}
+    `('has $method method', ({ method }) => {
+      expect(eventBus[method]).toEqual(expect.any(Function));
+    });
+  });
 
+  describe('$on', () => {
     beforeEach(() => {
-      jest.resetModules();
-      jest.mock('mitt');
-
-      // eslint-disable-next-line global-require
-      mitt = require('mitt');
-      mitt.mockReturnValue(() => ({}));
-
-      const createEventHubActual = jest.requireActual('~/helpers/event_hub_factory').default;
-      eventBus = createEventHubActual();
+      eventBus.$on(TEST_EVENT, handler);
     });
 
-    it('creates an emitter', () => {
-      expect(mitt).toHaveBeenCalled();
+    it('calls handler when event is emitted', () => {
+      eventBus.$emit(TEST_EVENT);
+      expect(handler).toHaveBeenCalledWith();
     });
+
+    it('calls handler with multiple args', () => {
+      eventBus.$emit(TEST_EVENT, 'arg1', 'arg2', 'arg3');
+      expect(handler).toHaveBeenCalledWith('arg1', 'arg2', 'arg3');
     });
 
-  describe('instance', () => {
-    it.each`
-      method
-      ${'on'}
-      ${'once'}
-      ${'off'}
-      ${'emit'}
-    `('binds $$method to $method ', ({ method }) => {
-      expect(typeof eventBus[method]).toBe('function');
-      expect(eventBus[method]).toBe(eventBus[`$${method}`]);
+    it('calls handler multiple times', () => {
+      eventBus.$emit(TEST_EVENT, 'arg1', 'arg2', 'arg3');
+      eventBus.$emit(TEST_EVENT, 'arg1', 'arg2', 'arg3');
+
+      expect(handler).toHaveBeenCalledTimes(2);
     });
+
+    it('does not call handler after $off with handler', () => {
+      eventBus.$off(TEST_EVENT, handler);
+
+      eventBus.$emit(TEST_EVENT);
+
+      expect(handler).not.toHaveBeenCalled();
     });
 
-  describe('once', () => {
-    const event = 'foobar';
-    let handler;
+    it('does not call handler after $off', () => {
+      eventBus.$off(TEST_EVENT);
 
-    beforeEach(() => {
-      jest.spyOn(eventBus, 'on');
-      jest.spyOn(eventBus, 'off');
-      handler = jest.fn();
-      eventBus.once(event, handler);
+      eventBus.$emit(TEST_EVENT);
+
+      expect(handler).not.toHaveBeenCalled();
+    });
   });
 
-    it('calls on internally', () => {
-      expect(eventBus.on).toHaveBeenCalled();
+  describe('$once', () => {
+    beforeEach(() => {
+      eventBus.$once(TEST_EVENT, handler);
     });
 
     it('calls handler when event is emitted', () => {
-      eventBus.emit(event);
+      eventBus.$emit(TEST_EVENT);
       expect(handler).toHaveBeenCalled();
     });
 
-    it('calls off when event is emitted', () => {
-      eventBus.emit(event);
-      expect(eventBus.off).toHaveBeenCalled();
-    });
-
     it('calls the handler only once when event is emitted multiple times', () => {
-      eventBus.emit(event);
-      eventBus.emit(event);
+      eventBus.$emit(TEST_EVENT);
+      eventBus.$emit(TEST_EVENT);
       expect(handler).toHaveBeenCalledTimes(1);
     });
 
@@ -80,14 +87,18 @@ describe('event bus factory', () => {
         handler = jest.fn().mockImplementation(() => {
           throw new Error();
         });
-        eventBus.once(event, handler);
+        eventBus.$once(TEST_EVENT, handler);
       });
 
       it('calls off when event is emitted', () => {
         expect(() => {
-          eventBus.emit(event);
+          eventBus.$emit(TEST_EVENT);
         }).toThrow();
-        expect(eventBus.off).toHaveBeenCalled();
+        expect(() => {
+          eventBus.$emit(TEST_EVENT);
+        }).not.toThrow();
+
+        expect(handler).toHaveBeenCalledTimes(1);
       });
     });
   });

yarn.lock

@@ -8232,11 +8232,6 @@ mississippi@^3.0.0:
     stream-each "^1.1.0"
     through2 "^2.0.0"
 
-mitt@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mitt/-/mitt-1.2.0.tgz#cb24e6569c806e31bd4e3995787fe38a04fdf90d"
-  integrity sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw==
-
 mixin-deep@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
@@ -9763,16 +9758,11 @@ rc@^1.2.8, rc@~1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-is@^16.12.0:
+react-is@^16.12.0, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^16.8.4:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
-  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
-
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"