feat: Add assign team option to the context menu (#5153)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue

@@ -6,7 +6,7 @@
         :key="option.key"
         :option="option"
         variant="icon"
-        @click.native="toggleStatus(option.key, null)"
+        @click="toggleStatus(option.key, null)"
       />
     </template>
     <menu-item-with-submenu :option="snoozeMenuConfig">
@@ -14,7 +14,7 @@
         v-for="(option, i) in snoozeMenuConfig.options"
         :key="i"
         :option="option"
-        @click.native="snoozeConversation(option.snoozedUntil)"
+        @click="snoozeConversation(option.snoozedUntil)"
       />
     </menu-item-with-submenu>
     <menu-item-with-submenu :option="labelMenuConfig">
@@ -24,7 +24,7 @@
           :key="label.id"
           :option="generateMenuLabelConfig(label, 'label')"
           variant="label"
-          @click.native="$emit('assign-label', label)"
+          @click="$emit('assign-label', label)"
         />
       </template>
     </menu-item-with-submenu>
@@ -36,10 +36,18 @@
           :key="agent.id"
           :option="generateMenuLabelConfig(agent, 'agent')"
           variant="agent"
-          @click.native="$emit('assign-agent', agent)"
+          @click="$emit('assign-agent', agent)"
         />
       </template>
     </menu-item-with-submenu>
+    <menu-item-with-submenu :option="teamMenuConfig">
+      <menu-item
+        v-for="team in teams"
+        :key="team.id"
+        :option="generateMenuLabelConfig(team, 'team')"
+        @click="$emit('assign-team', team)"
+      />
+    </menu-item-with-submenu>
   </div>
 </template>
 
@@ -119,11 +127,17 @@ export default {
         icon: 'person-add',
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.ASSIGN_AGENT'),
       },
+      teamMenuConfig: {
+        key: 'team',
+        icon: 'people-team-add',
+        label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.ASSIGN_TEAM'),
+      },
     };
   },
   computed: {
     ...mapGetters({
       labels: 'labels/getLabels',
+      teams: 'teams/getTeams',
       assignableAgentsUiFlags: 'inboxAssignableAgents/getUIFlags',
     }),
     assignableAgents() {
@@ -160,6 +174,7 @@ export default {
         ...(type === 'text' && { label: option.label }),
         ...(type === 'label' && { label: option.title }),
         ...(type === 'agent' && { label: option.name }),
+        ...(type === 'team' && { label: option.name }),
       };
     },
   },

app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="menu">
+  <div class="menu" @click.stop="$emit('click')">
     <fluent-icon
       v-if="variant === 'icon' && option.icon"
       :icon="option.icon"
@@ -18,7 +18,7 @@
       size="20px"
       class="agent-thumbnail"
     />
-    <p class="menu-label">{{ option.label }}</p>
+    <p class="menu-label truncate-text">{{ option.label }}</p>
   </div>
 </template>
 
@@ -45,14 +45,16 @@ export default {
 .menu {
   display: flex;
   align-items: center;
-  width: 100%;
+  flex-wrap: nowrap;
+  width: calc(var(--space-mega) * 2);
   padding: var(--space-smaller);
   border-radius: var(--border-radius-small);
-  min-width: calc(var(--space-mega) * 2);
+  overflow: hidden;
 
   .menu-label {
     margin: 0;
     font-size: var(--font-size-mini);
+    flex-shrink: 0;
   }
 
   .menu-icon {