feat: Add Command bar for improved productivity (#3352)

Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -8,7 +8,7 @@
         icon="ion-checkmark"
         emoji="✅"
         :is-loading="isLoading"
-        @click="() => toggleStatus(STATUS_TYPE.RESOLVED)"
+        @click="onCmdResolveConversation"
       >
         {{ this.$t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
       </woot-button>
@@ -19,7 +19,7 @@
         icon="ion-refresh"
         emoji="👀"
         :is-loading="isLoading"
-        @click="() => toggleStatus(STATUS_TYPE.OPEN)"
+        @click="onCmdOpenConversation"
       >
         {{ this.$t('CONVERSATION.HEADER.REOPEN_ACTION') }}
       </woot-button>
@@ -29,7 +29,7 @@
         color-scheme="primary"
         icon="ion-person"
         :is-loading="isLoading"
-        @click="() => toggleStatus(STATUS_TYPE.OPEN)"
+        @click="onCmdOpenConversation"
       >
         {{ this.$t('CONVERSATION.HEADER.OPEN_ACTION') }}
       </woot-button>
@@ -118,6 +118,11 @@ import {
   startOfTomorrow,
   startOfWeek,
 } from 'date-fns';
+import {
+  CMD_REOPEN_CONVERSATION,
+  CMD_RESOLVE_CONVERSATION,
+  CMD_SNOOZE_CONVERSATION,
+} from '../../routes/dashboard/commands/commandBarBusEvents';
 
 export default {
   components: {
@@ -135,9 +140,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({
-      currentChat: 'getSelectedChat',
-    }),
+    ...mapGetters({ currentChat: 'getSelectedChat' }),
     isOpen() {
       return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN;
     },
@@ -170,6 +173,16 @@ export default {
       };
     },
   },
+  mounted() {
+    bus.$on(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
+    bus.$on(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
+    bus.$on(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
+  },
+  destroyed() {
+    bus.$off(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
+    bus.$off(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
+    bus.$off(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
+  },
   methods: {
     async handleKeyEvents(e) {
       const allConversations = document.querySelectorAll(
@@ -204,6 +217,18 @@ export default {
         }
       }
     },
+    onCmdSnoozeConversation(snoozeType) {
+      this.toggleStatus(
+        this.STATUS_TYPE.SNOOZED,
+        this.snoozeTimes[snoozeType] || null
+      );
+    },
+    onCmdOpenConversation() {
+      this.toggleStatus(this.STATUS_TYPE.OPEN);
+    },
+    onCmdResolveConversation() {
+      this.toggleStatus(this.STATUS_TYPE.RESOLVED);
+    },
     showOpenButton() {
       return this.isResolved || this.isSnoozed;
     },

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -64,8 +64,20 @@ export default {
         this.$store.dispatch('inboxAssignableAgents/fetch', { inboxId });
       }
     },
+    'currentChat.id'() {
+      this.fetchLabels();
+    },
+  },
+  mounted() {
+    this.fetchLabels();
   },
   methods: {
+    fetchLabels() {
+      if (!this.currentChat.id) {
+        return;
+      }
+      this.$store.dispatch('conversationLabels/get', this.currentChat.id);
+    },
     onToggleContactPanel() {
       this.$emit('contact-panel-toggle');
     },

app/javascript/dashboard/components/widgets/conversation/MoreActions.vue

@@ -38,6 +38,11 @@ import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import EmailTranscriptModal from './EmailTranscriptModal';
 import ResolveAction from '../../buttons/ResolveAction';
+import {
+  CMD_MUTE_CONVERSATION,
+  CMD_SEND_TRANSCRIPT,
+  CMD_UNMUTE_CONVERSATION,
+} from '../../../routes/dashboard/commands/commandBarBusEvents';
 
 export default {
   components: {
@@ -47,36 +52,35 @@ export default {
   mixins: [alertMixin, clickaway],
   data() {
     return {
-      showConversationActions: false,
       showEmailActionsModal: false,
     };
   },
   computed: {
-    ...mapGetters({
-      currentChat: 'getSelectedChat',
-    }),
+    ...mapGetters({ currentChat: 'getSelectedChat' }),
+  },
+  mounted() {
+    bus.$on(CMD_MUTE_CONVERSATION, this.mute);
+    bus.$on(CMD_UNMUTE_CONVERSATION, this.unmute);
+    bus.$on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
+  },
+  destroyed() {
+    bus.$off(CMD_MUTE_CONVERSATION, this.mute);
+    bus.$off(CMD_UNMUTE_CONVERSATION, this.unmute);
+    bus.$off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
   },
   methods: {
     mute() {
       this.$store.dispatch('muteConversation', this.currentChat.id);
       this.showAlert(this.$t('CONTACT_PANEL.MUTED_SUCCESS'));
-      this.toggleConversationActions();
     },
     unmute() {
       this.$store.dispatch('unmuteConversation', this.currentChat.id);
       this.showAlert(this.$t('CONTACT_PANEL.UNMUTED_SUCCESS'));
-      this.toggleConversationActions();
     },
     toggleEmailActionsModal() {
       this.showEmailActionsModal = !this.showEmailActionsModal;
       this.hideConversationActions();
     },
-    toggleConversationActions() {
-      this.showConversationActions = !this.showConversationActions;
-    },
-    hideConversationActions() {
-      this.showConversationActions = false;
-    },
   },
 };
 </script>

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

@@ -33,6 +33,8 @@ describe('MoveActions', () => {
   beforeEach(() => {
     window.bus = {
       $emit: jest.fn(),
+      $on: jest.fn(),
+      $off: jest.fn(),
     };
 
     state = {