fix: Translate "None" option in agent assignment dropdown (#11060)

# Pull Request Template

## Description

This PR includes a translation update for the "None" option in the agent
assignment multi-select dropdown.

Fixes
https://linear.app/chatwoot/issue/CW-4140/none-option-in-assign-agent-multi-select-is-not-translated

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

**Test cases**
1. Check in conversation sidebar
2. Check in command bar
3. Check in participation dropdown


## 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
- [ ] 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
- [ ] Any dependent changes have been merged and published in downstream
modules

app/javascript/dashboard/composables/spec/useAgentsList.spec.js

@@ -5,9 +5,26 @@ import { useMapGetter } from 'dashboard/composables/store';
 import { allAgentsData, formattedAgentsData } from './fixtures/agentFixtures';
 import * as agentHelper from 'dashboard/helper/agentHelper';
 
+// Mock vue-i18n
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: key => (key === 'AGENT_MGMT.MULTI_SELECTOR.LIST.NONE' ? 'None' : key),
+  }),
+}));
+
 vi.mock('dashboard/composables/store');
 vi.mock('dashboard/helper/agentHelper');
 
+// Create a mock None agent
+const mockNoneAgent = {
+  confirmed: true,
+  name: 'None',
+  id: 0,
+  role: 'agent',
+  account_id: 0,
+  email: 'None',
+};
+
 const mockUseMapGetter = (overrides = {}) => {
   const defaultGetters = {
     getCurrentUser: ref(allAgentsData[0]),
@@ -28,14 +45,6 @@ describe('useAgentsList', () => {
     agentHelper.getSortedAgentsByAvailability.mockReturnValue(
       formattedAgentsData.slice(1)
     );
-    agentHelper.getCombinedAgents.mockImplementation(
-      (agents, includeNone, isAgentSelected) => {
-        if (includeNone && isAgentSelected) {
-          return [agentHelper.createNoneAgent, ...agents];
-        }
-        return agents;
-      }
-    );
 
     mockUseMapGetter();
   });
@@ -44,24 +53,26 @@ describe('useAgentsList', () => {
     const { agentsList, assignableAgents } = useAgentsList();
 
     expect(assignableAgents.value).toEqual(allAgentsData);
-    expect(agentsList.value).toEqual([
+    expect(agentsList.value[0]).toEqual(mockNoneAgent);
-      agentHelper.createNoneAgent,
+    expect(agentsList.value.length).toBe(
-      ...formattedAgentsData.slice(1),
+      formattedAgentsData.slice(1).length + 1
-    ]);
+    );
   });
 
   it('includes None agent when includeNoneAgent is true', () => {
     const { agentsList } = useAgentsList(true);
 
-    expect(agentsList.value[0]).toEqual(agentHelper.createNoneAgent);
+    expect(agentsList.value[0]).toEqual(mockNoneAgent);
-    expect(agentsList.value.length).toBe(formattedAgentsData.length);
+    expect(agentsList.value.length).toBe(
+      formattedAgentsData.slice(1).length + 1
+    );
   });
 
   it('excludes None agent when includeNoneAgent is false', () => {
     const { agentsList } = useAgentsList(false);
 
-    expect(agentsList.value[0]).not.toEqual(agentHelper.createNoneAgent);
+    expect(agentsList.value[0].id).not.toBe(0);
-    expect(agentsList.value.length).toBe(formattedAgentsData.length - 1);
+    expect(agentsList.value.length).toBe(formattedAgentsData.slice(1).length);
   });
 
   it('handles empty assignable agents', () => {
@@ -73,7 +84,7 @@ describe('useAgentsList', () => {
     const { agentsList, assignableAgents } = useAgentsList();
 
     expect(assignableAgents.value).toEqual([]);
-    expect(agentsList.value).toEqual([agentHelper.createNoneAgent]);
+    expect(agentsList.value).toEqual([mockNoneAgent]);
   });
 
   it('handles missing inbox_id', () => {
@@ -86,6 +97,6 @@ describe('useAgentsList', () => {
     const { agentsList, assignableAgents } = useAgentsList();
 
     expect(assignableAgents.value).toEqual([]);
-    expect(agentsList.value).toEqual([agentHelper.createNoneAgent]);
+    expect(agentsList.value).toEqual([mockNoneAgent]);
   });
 });

app/javascript/dashboard/composables/useAgentsList.js

@@ -1,9 +1,9 @@
 import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
 import {
   getAgentsByUpdatedPresence,
   getSortedAgentsByAvailability,
-  getCombinedAgents,
 } from 'dashboard/helper/agentHelper';
 
 /**
@@ -13,6 +13,7 @@ import {
  * @returns {Object} An object containing the agents list and assignable agents.
  */
 export function useAgentsList(includeNoneAgent = true) {
+  const { t } = useI18n();
   const currentUser = useMapGetter('getCurrentUser');
   const currentChat = useMapGetter('getSelectedChat');
   const currentAccountId = useMapGetter('getCurrentAccountId');
@@ -21,6 +22,19 @@ export function useAgentsList(includeNoneAgent = true) {
   const inboxId = computed(() => currentChat.value?.inbox_id);
   const isAgentSelected = computed(() => currentChat.value?.meta?.assignee);
 
+  /**
+   * Creates a 'None' agent object
+   * @returns {Object} None agent object
+   */
+  const createNoneAgent = () => ({
+    confirmed: true,
+    name: t('AGENT_MGMT.MULTI_SELECTOR.LIST.NONE') || 'None',
+    id: 0,
+    role: 'agent',
+    account_id: 0,
+    email: 'None',
+  });
+
   /**
    * @type {import('vue').ComputedRef<Array>}
    */
@@ -43,11 +57,10 @@ export function useAgentsList(includeNoneAgent = true) {
       agentsByUpdatedPresence
     );
 
-    return getCombinedAgents(
+    return [
-      filteredAgentsByAvailability,
+      ...(includeNoneAgent && isAgentSelected.value ? [createNoneAgent()] : []),
-      includeNoneAgent,
+      ...filteredAgentsByAvailability,
-      isAgentSelected.value
+    ];
-    );
   });
 
   return {

app/javascript/dashboard/helper/agentHelper.js

@@ -1,16 +1,3 @@
-/**
- * Default agent object representing 'None'
- * @type {Object}
- */
-export const createNoneAgent = {
-  confirmed: true,
-  name: 'None',
-  id: 0,
-  role: 'agent',
-  account_id: 0,
-  email: 'None',
-};
-
 /**
  * Filters and sorts agents by availability status
  * @param {Array} agents - List of agents
@@ -62,22 +49,3 @@ export const getAgentsByUpdatedPresence = (
   );
   return agentsWithDynamicPresenceUpdate;
 };
-
-/**
- * Combines the filtered agents with the 'None' agent option if applicable.
- *
- * @param {Array} filteredAgentsByAvailability - The list of agents sorted by availability.
- * @param {boolean} includeNoneAgent - Whether to include the 'None' agent option.
- * @param {boolean} isAgentSelected - Whether an agent is currently selected.
- * @returns {Array} The combined list of agents, potentially including the 'None' agent.
- */
-export const getCombinedAgents = (
-  filteredAgentsByAvailability,
-  includeNoneAgent,
-  isAgentSelected
-) => {
-  return [
-    ...(includeNoneAgent && isAgentSelected ? [createNoneAgent] : []),
-    ...filteredAgentsByAvailability,
-  ];
-};

app/javascript/dashboard/helper/specs/agentHelper.spec.js

@@ -2,8 +2,6 @@ import {
   getAgentsByAvailability,
   getSortedAgentsByAvailability,
   getAgentsByUpdatedPresence,
-  getCombinedAgents,
-  createNoneAgent,
 } from '../agentHelper';
 import {
   allAgentsData,
@@ -93,39 +91,4 @@ describe('agentHelper', () => {
       ).toEqual([]);
     });
   });
-
-  describe('getCombinedAgents', () => {
-    it('includes None agent when includeNoneAgent is true and isAgentSelected is true', () => {
-      const result = getCombinedAgents(sortedByAvailability, true, true);
-      expect(result).toEqual([createNoneAgent, ...sortedByAvailability]);
-      expect(result.length).toBe(sortedByAvailability.length + 1);
-      expect(result[0]).toEqual(createNoneAgent);
-    });
-
-    it('excludes None agent when includeNoneAgent is false', () => {
-      const result = getCombinedAgents(sortedByAvailability, false, true);
-      expect(result).toEqual(sortedByAvailability);
-      expect(result.length).toBe(sortedByAvailability.length);
-      expect(result[0]).not.toEqual(createNoneAgent);
-    });
-
-    it('excludes None agent when isAgentSelected is false', () => {
-      const result = getCombinedAgents(sortedByAvailability, true, false);
-      expect(result).toEqual(sortedByAvailability);
-      expect(result.length).toBe(sortedByAvailability.length);
-      expect(result[0]).not.toEqual(createNoneAgent);
-    });
-
-    it('returns only filtered agents when both includeNoneAgent and isAgentSelected are false', () => {
-      const result = getCombinedAgents(sortedByAvailability, false, false);
-      expect(result).toEqual(sortedByAvailability);
-      expect(result.length).toBe(sortedByAvailability.length);
-    });
-
-    it('handles empty filteredAgentsByAvailability array', () => {
-      const result = getCombinedAgents([], true, true);
-      expect(result).toEqual([createNoneAgent]);
-      expect(result.length).toBe(1);
-    });
-  });
 });

app/javascript/dashboard/i18n/locale/en/agentMgmt.json

@@ -105,6 +105,9 @@
         "AGENT": "Select agent",
         "TEAM": "Select team"
       },
+      "LIST": {
+        "NONE": "None"
+      },
       "SEARCH": {
         "NO_RESULTS": {
           "AGENT": "No agents found",