chore: Replace eventBus with mitt.js [CW-3275] (#9539)

# Replace the deprecated `eventBus` with mitt.js

## Description

Since eventBus and it's respective methods are deprecated and removed
from all future releases of vue, this was blocking us from migrating.
This PR replaces eventBus with
[mitt](https://github.com/developit/mitt). I have created a wrapper
mitt.js to simulate the same old event names so it's backwards
compatible, without making a lot of changes.


Fixes # (issue)

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality not to work as expected)
- [ ] This change requires a documentation update

## How Has This Been Tested?

1. Made sure all the places we're listening to bus events are working as
expected.
2. Respective specsf or the events from mitt.


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules

app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js

@@ -2,12 +2,21 @@ import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 import VTooltip from 'v-tooltip';
-
 import Button from 'dashboard/components/buttons/Button';
 import i18n from 'dashboard/i18n';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 import MoreActions from '../MoreActions';
 
+jest.mock('shared/helpers/mitt', () => ({
+  emitter: {
+    emit: jest.fn(),
+    on: jest.fn(),
+    off: jest.fn(),
+  },
+}));
+
+import { emitter } from 'shared/helpers/mitt';
+
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueI18n);
@@ -16,6 +25,12 @@ localVue.use(VTooltip);
 localVue.component('fluent-icon', FluentIcon);
 localVue.component('woot-button', Button);
 
+localVue.prototype.$emitter = {
+  emit: jest.fn(),
+  on: jest.fn(),
+  off: jest.fn(),
+};
+
 const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
 
 describe('MoveActions', () => {
@@ -29,12 +44,6 @@ describe('MoveActions', () => {
   let moreActions = null;
 
   beforeEach(() => {
-    window.bus = {
-      $emit: jest.fn(),
-      $on: jest.fn(),
-      $off: jest.fn(),
-    };
-
     state = {
       authenticated: true,
       currentChat,
@@ -76,7 +85,7 @@ describe('MoveActions', () => {
     it('shows alert', async () => {
       await moreActions.find('button:first-child').trigger('click');
 
-      expect(window.bus.$emit).toBeCalledWith(
+      expect(emitter.emit).toBeCalledWith(
         'newToastMessage',
         'This contact is blocked successfully. You will not be notified of any future conversations.',
         undefined
@@ -102,7 +111,7 @@ describe('MoveActions', () => {
     it('shows alert', async () => {
       await moreActions.find('button:first-child').trigger('click');
 
-      expect(window.bus.$emit).toBeCalledWith(
+      expect(emitter.emit).toBeCalledWith(
         'newToastMessage',
         'This contact is unblocked successfully.',
         undefined