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
2025-11-02 12:08:01 +00:00 · 2024-05-31 15:50:36 +05:30
parent e3eca47c31
commit b474929f5e
60 changed files with 276 additions and 161 deletions
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -110,11 +110,11 @@ export default {
  mounted() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
-    bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
+    this.$emitter.on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
-    bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
+    this.$emitter.off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
  },

  methods: {
--- a/app/javascript/dashboard/routes/dashboard/commands/bulkActionsHotKeys.js
+++ b/app/javascript/dashboard/routes/dashboard/commands/bulkActionsHotKeys.js
@@ -11,6 +11,7 @@ import {
  ICON_REOPEN_CONVERSATION,
  ICON_RESOLVE_CONVERSATION,
 } from './CommandBarIcons';
+import { emitter } from 'shared/helpers/mitt';

 import { createSnoozeHandlers } from './commandBarActions';

@@ -37,7 +38,7 @@ export const RESOLVED_CONVERSATION_BULK_ACTIONS = [
    title: 'COMMAND_BAR.COMMANDS.REOPEN_CONVERSATION',
    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
    icon: ICON_REOPEN_CONVERSATION,
-    handler: () => bus.$emit(CMD_BULK_ACTION_REOPEN_CONVERSATION),
+    handler: () => emitter.emit(CMD_BULK_ACTION_REOPEN_CONVERSATION),
  },
 ];

@@ -47,7 +48,7 @@ export const OPEN_CONVERSATION_BULK_ACTIONS = [
    title: 'COMMAND_BAR.COMMANDS.RESOLVE_CONVERSATION',
    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
    icon: ICON_RESOLVE_CONVERSATION,
-    handler: () => bus.$emit(CMD_BULK_ACTION_RESOLVE_CONVERSATION),
+    handler: () => emitter.emit(CMD_BULK_ACTION_RESOLVE_CONVERSATION),
  },
 ];

--- a/app/javascript/dashboard/routes/dashboard/commands/commandBarActions.js
+++ b/app/javascript/dashboard/routes/dashboard/commands/commandBarActions.js
@@ -1,4 +1,5 @@
 import wootConstants from 'dashboard/constants/globals';
+import { emitter } from 'shared/helpers/mitt';

 import {
  CMD_MUTE_CONVERSATION,
@@ -26,7 +27,7 @@ export const OPEN_CONVERSATION_ACTIONS = [
    title: 'COMMAND_BAR.COMMANDS.RESOLVE_CONVERSATION',
    section: 'COMMAND_BAR.SECTIONS.CONVERSATION',
    icon: ICON_RESOLVE_CONVERSATION,
-    handler: () => bus.$emit(CMD_RESOLVE_CONVERSATION),
+    handler: () => emitter.emit(CMD_RESOLVE_CONVERSATION),
  },
 ];

@@ -37,7 +38,7 @@ export const createSnoozeHandlers = (busEventName, parentId, section) => {
    parent: parentId,
    section: section,
    icon: ICON_SNOOZE_CONVERSATION,
-    handler: () => bus.$emit(busEventName, option),
+    handler: () => emitter.emit(busEventName, option),
  }));
 };

@@ -61,7 +62,7 @@ export const RESOLVED_CONVERSATION_ACTIONS = [
    title: 'COMMAND_BAR.COMMANDS.REOPEN_CONVERSATION',
    section: 'COMMAND_BAR.SECTIONS.CONVERSATION',
    icon: ICON_REOPEN_CONVERSATION,
-    handler: () => bus.$emit(CMD_REOPEN_CONVERSATION),
+    handler: () => emitter.emit(CMD_REOPEN_CONVERSATION),
  },
 ];

@@ -70,7 +71,7 @@ export const SEND_TRANSCRIPT_ACTION = {
  title: 'COMMAND_BAR.COMMANDS.SEND_TRANSCRIPT',
  section: 'COMMAND_BAR.SECTIONS.CONVERSATION',
  icon: ICON_SEND_TRANSCRIPT,
-  handler: () => bus.$emit(CMD_SEND_TRANSCRIPT),
+  handler: () => emitter.emit(CMD_SEND_TRANSCRIPT),
 };

 export const UNMUTE_ACTION = {
@@ -78,7 +79,7 @@ export const UNMUTE_ACTION = {
  title: 'COMMAND_BAR.COMMANDS.UNMUTE_CONVERSATION',
  section: 'COMMAND_BAR.SECTIONS.CONVERSATION',
  icon: ICON_UNMUTE_CONVERSATION,
-  handler: () => bus.$emit(CMD_UNMUTE_CONVERSATION),
+  handler: () => emitter.emit(CMD_UNMUTE_CONVERSATION),
 };

 export const MUTE_ACTION = {
@@ -86,5 +87,5 @@ export const MUTE_ACTION = {
  title: 'COMMAND_BAR.COMMANDS.MUTE_CONVERSATION',
  section: 'COMMAND_BAR.SECTIONS.CONVERSATION',
  icon: ICON_MUTE_CONVERSATION,
-  handler: () => bus.$emit(CMD_MUTE_CONVERSATION),
+  handler: () => emitter.emit(CMD_MUTE_CONVERSATION),
 };
--- a/app/javascript/dashboard/routes/dashboard/commands/conversationHotKeys.js
+++ b/app/javascript/dashboard/routes/dashboard/commands/conversationHotKeys.js
@@ -1,5 +1,6 @@
 import { mapGetters } from 'vuex';
 import wootConstants from 'dashboard/constants/globals';
+import { emitter } from 'shared/helpers/mitt';

 import { CMD_AI_ASSIST } from './commandBarBusEvents';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
@@ -318,7 +319,7 @@ export default {
        section: this.$t('COMMAND_BAR.SECTIONS.AI_ASSIST'),
        priority: item,
        icon: item.icon,
-        handler: () => bus.$emit(CMD_AI_ASSIST, item.key),
+        handler: () => emitter.emit(CMD_AI_ASSIST, item.key),
      }));
      return [
        {
--- a/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js
+++ b/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js
@@ -2,6 +2,7 @@ import wootConstants from 'dashboard/constants/globals';

 import { CMD_SNOOZE_NOTIFICATION } from './commandBarBusEvents';
 import { ICON_SNOOZE_NOTIFICATION } from './CommandBarIcons';
+import { emitter } from 'shared/helpers/mitt';

 import { isAInboxViewRoute } from 'dashboard/helper/routeHelpers';

@@ -21,7 +22,7 @@ const INBOX_SNOOZE_EVENTS = [
    section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
    icon: ICON_SNOOZE_NOTIFICATION,
    handler: () =>
-      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.AN_HOUR_FROM_NOW),
+      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.AN_HOUR_FROM_NOW),
  },
  {
    id: SNOOZE_OPTIONS.UNTIL_TOMORROW,
@@ -30,7 +31,7 @@ const INBOX_SNOOZE_EVENTS = [
    parent: 'snooze_notification',
    icon: ICON_SNOOZE_NOTIFICATION,
    handler: () =>
-      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_TOMORROW),
+      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_TOMORROW),
  },
  {
    id: SNOOZE_OPTIONS.UNTIL_NEXT_WEEK,
@@ -39,7 +40,7 @@ const INBOX_SNOOZE_EVENTS = [
    parent: 'snooze_notification',
    icon: ICON_SNOOZE_NOTIFICATION,
    handler: () =>
-      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_NEXT_WEEK),
+      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_NEXT_WEEK),
  },
  {
    id: SNOOZE_OPTIONS.UNTIL_NEXT_MONTH,
@@ -48,7 +49,7 @@ const INBOX_SNOOZE_EVENTS = [
    parent: 'snooze_notification',
    icon: ICON_SNOOZE_NOTIFICATION,
    handler: () =>
-      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_NEXT_MONTH),
+      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_NEXT_MONTH),
  },
  {
    id: SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME,
@@ -57,7 +58,7 @@ const INBOX_SNOOZE_EVENTS = [
    parent: 'snooze_notification',
    icon: ICON_SNOOZE_NOTIFICATION,
    handler: () =>
-      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME),
+      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME),
  },
 ];
 export default {
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -169,7 +169,7 @@ export default {
            after: messageId,
          })
          .then(() => {
-            bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE, { messageId });
+            this.$emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE, { messageId });
          });
      } else {
        this.$store.dispatch('clearSelectedState');
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -271,7 +271,10 @@ export default {
    },
    toggleConversationModal() {
      this.showConversationModal = !this.showConversationModal;
-      bus.$emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, this.showConversationModal);
+      this.$emitter.emit(
+        BUS_EVENTS.NEW_CONVERSATION_MODAL,
+        this.showConversationModal
+      );
    },
    toggleDeleteModal() {
      this.showDeleteModal = !this.showDeleteModal;
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -265,7 +265,7 @@ export default {
  },

  mounted() {
-    bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
+    this.$emitter.on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);

    const slug = this.$route.params.portalSlug;
    if (slug) this.lastActivePortalSlug = slug;
@@ -273,7 +273,7 @@ export default {
    this.fetchPortalAndItsCategories();
  },
  beforeDestroy() {
-    bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
+    this.$emitter.off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
  },
  updated() {
    const slug = this.$route.params.portalSlug;
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
@@ -140,7 +140,7 @@ export default {
      this.$store
        .dispatch('setActiveChat', { data: selectedConversation })
        .then(() => {
-          bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
+          this.$emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
        });
    },
    findConversation() {
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
@@ -92,10 +92,10 @@ export default {
    ...mapGetters({ meta: 'notifications/getMeta' }),
  },
  mounted() {
-    bus.$on(CMD_SNOOZE_NOTIFICATION, this.onCmdSnoozeNotification);
+    this.$emitter.on(CMD_SNOOZE_NOTIFICATION, this.onCmdSnoozeNotification);
  },
  destroyed() {
-    bus.$off(CMD_SNOOZE_NOTIFICATION, this.onCmdSnoozeNotification);
+    this.$emitter.off(CMD_SNOOZE_NOTIFICATION, this.onCmdSnoozeNotification);
  },
  methods: {
    openSnoozeNotificationModal() {
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
@@ -69,8 +69,10 @@
 <script>
 import { required, minLength, email } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';

 export default {
+  mixins: [alertMixin],
  props: {
    onClose: {
      type: Function,
@@ -117,9 +119,6 @@ export default {
  },

  methods: {
-    showAlert(message) {
-      bus.$emit('newToastMessage', message);
-    },
    async addAgent() {
      try {
        await this.$store.dispatch('agents/create', {
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
@@ -83,6 +83,7 @@ import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vu
 import Modal from '../../../../components/Modal.vue';
 import Auth from '../../../../api/auth';
 import wootConstants from 'dashboard/constants/globals';
+import alertMixin from 'shared/mixins/alertMixin';

 const { AVAILABILITY_STATUS_KEYS } = wootConstants;

@@ -91,6 +92,7 @@ export default {
    WootSubmitButton,
    Modal,
  },
+  mixins: [alertMixin],
  props: {
    id: {
      type: Number,
@@ -169,9 +171,6 @@ export default {
    },
  },
  methods: {
-    showAlert(message) {
-      bus.$emit('newToastMessage', message);
-    },
    async editAgent() {
      try {
        await this.$store.dispatch('agents/update', {
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -130,6 +130,7 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import Thumbnail from '../../../../components/widgets/Thumbnail.vue';
 import AddAgent from './AddAgent.vue';
 import EditAgent from './EditAgent.vue';
+import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: {
@@ -137,7 +138,7 @@ export default {
    EditAgent,
    Thumbnail,
  },
-  mixins: [globalConfigMixin],
+  mixins: [globalConfigMixin, alertMixin],
  data() {
    return {
      loading: {},
@@ -230,19 +231,19 @@ export default {
    async deleteAgent(id) {
      try {
        await this.$store.dispatch('agents/delete', id);
-        this.showAlert(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+        this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
      } catch (error) {
-        this.showAlert(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
+        this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
      }
    },
    // Show SnackBar
-    showAlert(message) {
+    showAlertMessage(message) {
      // Reset loading, current selected agent
      this.loading[this.currentAgent.id] = false;
      this.currentAgent = {};
      // Show message
      this.agentAPI.message = message;
-      bus.$emit('newToastMessage', message);
+      this.showAlert(message);
    },
  },
 };
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -132,12 +132,14 @@
 import { mapGetters } from 'vuex';
 import AddCanned from './AddCanned.vue';
 import EditCanned from './EditCanned.vue';
+import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: {
    AddCanned,
    EditCanned,
  },
+  mixins: [alertMixin],
  data() {
    return {
      loading: {},
@@ -187,13 +189,13 @@ export default {
      });
      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
    },
-    showAlert(message) {
+    showAlertMessage(message) {
      // Reset loading, current selected agent
      this.loading[this.selectedResponse.id] = false;
      this.selectedResponse = {};
      // Show message
      this.cannedResponseAPI.message = message;
-      bus.$emit('newToastMessage', message);
+      this.showAlert(message);
    },
    // Edit Function
    openAddPopup() {
@@ -230,12 +232,14 @@ export default {
      this.$store
        .dispatch('deleteCannedResponse', id)
        .then(() => {
-          this.showAlert(this.$t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+          this.showAlertMessage(
+            this.$t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE')
+          );
        })
        .catch(error => {
          const errorMessage =
            error?.message || this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE');
-          this.showAlert(errorMessage);
+          this.showAlertMessage(errorMessage);
        });
    },
  },
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
@@ -51,11 +51,13 @@ import { mapGetters } from 'vuex';
 import InboxMembersAPI from '../../../../api/inboxMembers';
 import router from '../../../index';
 import PageHeader from '../SettingsSubPageHeader.vue';
+import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: {
    PageHeader,
  },
+  mixins: [alertMixin],

  validations: {
    selectedAgents: {
@@ -98,7 +100,7 @@ export default {
          },
        });
      } catch (error) {
-        bus.$emit('newToastMessage', error.message);
+        this.showAlert(error.message);
      }
      this.isCreating = false;
    },
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -136,12 +136,13 @@ import Settings from './Settings.vue';
 import adminMixin from '../../../../mixins/isAdmin';
 import accountMixin from '../../../../mixins/account';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: {
    Settings,
  },
-  mixins: [adminMixin, accountMixin, globalConfigMixin],
+  mixins: [adminMixin, accountMixin, globalConfigMixin, alertMixin],
  data() {
    return {
      loading: {},
@@ -194,15 +195,9 @@ export default {
    async deleteInbox({ id }) {
      try {
        await this.$store.dispatch('inboxes/delete', id);
-        bus.$emit(
-          'newToastMessage',
-          this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE')
-        );
+        this.showAlert(this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE'));
      } catch (error) {
-        bus.$emit(
-          'newToastMessage',
-          this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE')
-        );
+        this.showAlert(this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE'));
      }
    },

--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
@@ -128,7 +128,7 @@ export default {
    this.$store.dispatch('agents/get');
    this.fetchAllData();

-    bus.$on('fetch_overview_reports', () => {
+    this.$emitter.on('fetch_overview_reports', () => {
      this.fetchAllData();
    });
  },