feat: Add a view for mentions (#3505)

- Added a new table mentions for saving user mentions
- Added a filter conversation_type in the API
- Added a view to see the mentions

app/javascript/dashboard/components/ChatList.vue

@@ -51,6 +51,7 @@ l<template>
         :active-label="label"
         :team-id="teamId"
         :chat="chat"
+        :conversation-type="conversationType"
         :show-assignee="showAssigneeInConversationCard"
       />
 
@@ -133,6 +134,10 @@ export default {
       type: String,
       default: '',
     },
+    conversationType: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -203,6 +208,9 @@ export default {
         page: this.currentPage + 1,
         labels: this.label ? [this.label] : undefined,
         teamId: this.teamId ? this.teamId : undefined,
+        conversationType: this.conversationType
+          ? this.conversationType
+          : undefined,
       };
     },
     pageTitle() {
@@ -215,6 +223,9 @@ export default {
       if (this.label) {
         return `#${this.label}`;
       }
+      if (this.conversationType === 'mention') {
+        return this.$t('CHAT_LIST.MENTION_HEADING');
+      }
       return this.$t('CHAT_LIST.TAB_HEADING');
     },
     conversationList() {
@@ -251,6 +262,9 @@ export default {
     label() {
       this.resetAndFetchData();
     },
+    conversationType() {
+      this.resetAndFetchData();
+    },
   },
   mounted() {
     this.$store.dispatch('setChatFilter', this.activeStatus);

app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js

@@ -12,6 +12,8 @@ const conversations = accountId => ({
     'conversations_through_label',
     'team_conversations',
     'conversations_through_team',
+    'conversation_mentions',
+    'conversation_through_mentions',
   ],
   menuItems: [
     {
@@ -22,6 +24,13 @@ const conversations = accountId => ({
       toolTip: 'Conversation from all subscribed inboxes',
       toStateName: 'home',
     },
+    {
+      icon: 'mention',
+      label: 'MENTIONED_CONVERSATIONS',
+      key: 'conversation_mentions',
+      toState: frontendURL(`accounts/${accountId}/mentions/conversations`),
+      toStateName: 'conversation_mentions',
+    },
   ],
 });
 

app/javascript/dashboard/components/specs/SidemenuIcon.spec.js

@@ -1,9 +1,9 @@
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import SidemenuIcon from '../SidemenuIcon';
 
 describe('SidemenuIcon', () => {
   test('matches snapshot', () => {
-    const wrapper = mount(SidemenuIcon);
+    const wrapper = shallowMount(SidemenuIcon);
     expect(wrapper.vm).toBeTruthy();
     expect(wrapper.element).toMatchSnapshot();
   });

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

@@ -133,6 +133,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    conversationType: {
+      type: String,
+      default: '',
+    },
   },
 
   computed: {
@@ -243,6 +247,7 @@ export default {
         id: chat.id,
         label: this.activeLabel,
         teamId: this.teamId,
+        conversationType: this.conversationType,
       });
       router.push({ path: frontendURL(path) });
     },

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

@@ -5,7 +5,7 @@ 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';
 
 const localVue = createLocalVue();
@@ -13,6 +13,7 @@ localVue.use(Vuex);
 localVue.use(VueI18n);
 localVue.use(VTooltip);
 
+localVue.component('fluent-icon', FluentIcon);
 localVue.component('woot-button', Button);
 
 const i18nConfig = new VueI18n({