From 1c47fc7d1cec1aaa9a6605b09afa2aeeb6936cf3 Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Thu, 10 Apr 2025 19:46:21 -0300
Subject: [PATCH 1/4] fix: useAgentsList entering a loop after first fetch

---
 .../meteor/client/components/Omnichannel/hooks/useAgentsList.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/client/components/Omnichannel/hooks/useAgentsList.ts b/apps/meteor/client/components/Omnichannel/hooks/useAgentsList.ts
index d81f1b1f3e5a7..0c40ddf0d5826 100644
--- a/apps/meteor/client/components/Omnichannel/hooks/useAgentsList.ts
+++ b/apps/meteor/client/components/Omnichannel/hooks/useAgentsList.ts
@@ -76,7 +76,7 @@ export const useAgentsList = (
 
 			return {
 				items,
-				itemCount: total + 1,
+				itemCount: total,
 			};
 		},
 		[excludeId, getAgents, haveAll, haveNoAgentsSelectedOption, onlyAvailable, showIdleAgents, t, text],

From c443d4c9847aaf65cc0a0961539a5b6e91f40703 Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Thu, 10 Apr 2025 19:47:55 -0300
Subject: [PATCH 2/4] refactor: improved accesibility of add agent flow

---
 apps/meteor/client/components/AutoCompleteAgent.tsx    |  6 ++++--
 .../departments/DepartmentAgentsTable/AddAgent.tsx     | 10 ++++++++--
 .../DepartmentAgentsTable/DepartmentAgentsTable.tsx    |  7 ++++---
 .../views/omnichannel/departments/EditDepartment.tsx   |  7 +++++--
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/apps/meteor/client/components/AutoCompleteAgent.tsx b/apps/meteor/client/components/AutoCompleteAgent.tsx
index fad5b1a15d575..f20c688ef169f 100644
--- a/apps/meteor/client/components/AutoCompleteAgent.tsx
+++ b/apps/meteor/client/components/AutoCompleteAgent.tsx
@@ -1,13 +1,13 @@
 import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import type { ReactElement } from 'react';
+import type { AriaAttributes, ReactElement } from 'react';
 import { memo, useMemo, useState } from 'react';
 
 import { useRecordList } from '../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../lib/asyncState';
 import { useAgentsList } from './Omnichannel/hooks/useAgentsList';
 
-type AutoCompleteAgentProps = {
+type AutoCompleteAgentProps = Pick<AriaAttributes, 'aria-labelledby'> & {
 	value: string;
 	error?: string;
 	placeholder?: string;
@@ -31,6 +31,7 @@ const AutoCompleteAgent = ({
 	onlyAvailable = false,
 	withTitle = false,
 	onChange,
+	'aria-labelledby': ariaLabelledBy,
 }: AutoCompleteAgentProps): ReactElement => {
 	const [agentsFilter, setAgentsFilter] = useState<string>('');
 
@@ -57,6 +58,7 @@ const AutoCompleteAgent = ({
 			setFilter={setAgentsFilter as (value: string | number | undefined) => void}
 			options={agentsItems}
 			data-qa='autocomplete-agent'
+			aria-labelledby={ariaLabelledBy}
 			endReached={
 				agentsPhase === AsyncStatePhase.LOADING ? (): void => undefined : (start): void => loadMoreAgents(start, Math.min(50, agentsTotal))
 			}
diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AddAgent.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AddAgent.tsx
index 86cb80c7c4d5c..7ddbdb66a6b41 100644
--- a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AddAgent.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AddAgent.tsx
@@ -1,6 +1,7 @@
 import { Box, Button } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import type { AriaAttributes } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -8,7 +9,12 @@ import AutoCompleteAgent from '../../../../components/AutoCompleteAgent';
 import { useEndpointAction } from '../../../../hooks/useEndpointAction';
 import type { IDepartmentAgent } from '../definitions';
 
-function AddAgent({ agentList, onAdd }: { agentList: IDepartmentAgent[]; onAdd: (agent: IDepartmentAgent) => void }) {
+type AddAgentProps = Pick<AriaAttributes, 'aria-labelledby'> & {
+	agentList: IDepartmentAgent[];
+	onAdd: (agent: IDepartmentAgent) => void;
+};
+
+function AddAgent({ agentList, onAdd, 'aria-labelledby': ariaLabelledBy }: AddAgentProps) {
 	const { t } = useTranslation();
 
 	const [userId, setUserId] = useState('');
@@ -37,7 +43,7 @@ function AddAgent({ agentList, onAdd }: { agentList: IDepartmentAgent[]; onAdd:
 	});
 
 	return (
-		<Box display='flex' alignItems='center'>
+		<Box role='group' aria-labelledby={ariaLabelledBy} display='flex' alignItems='center'>
 			<AutoCompleteAgent value={userId} onChange={handleAgent} />
 			<Button disabled={!userId} onClick={handleSave} mis={8} primary>
 				{t('Add')}
diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx
index 462bfbf20efb8..1830769d08ec1 100644
--- a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx
@@ -1,4 +1,5 @@
 import { Pagination } from '@rocket.chat/fuselage';
+import type { AriaAttributes } from 'react';
 import { useMemo } from 'react';
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { useWatch, useFieldArray } from 'react-hook-form';
@@ -10,12 +11,12 @@ import type { EditDepartmentFormData } from '../definitions';
 import AddAgent from './AddAgent';
 import AgentRow from './AgentRow';
 
-type DepartmentAgentsTableProps = {
+type DepartmentAgentsTableProps = Pick<AriaAttributes, 'aria-labelledby'> & {
 	control: Control<EditDepartmentFormData>;
 	register: UseFormRegister<EditDepartmentFormData>;
 };
 
-function DepartmentAgentsTable({ control, register }: DepartmentAgentsTableProps) {
+function DepartmentAgentsTable({ control, register, 'aria-labelledby': ariaLabelledBy }: DepartmentAgentsTableProps) {
 	const { t } = useTranslation();
 	const { fields, append, remove } = useFieldArray({ control, name: 'agentList' });
 	const agentList = useWatch({ control, name: 'agentList' });
@@ -25,7 +26,7 @@ function DepartmentAgentsTable({ control, register }: DepartmentAgentsTableProps
 
 	return (
 		<>
-			<AddAgent agentList={agentList} data-qa='DepartmentSelect-AgentsTable' onAdd={append} />
+			<AddAgent aria-labelledby={ariaLabelledBy} agentList={agentList} data-qa='DepartmentSelect-AgentsTable' onAdd={append} />
 
 			<GenericTable>
 				<GenericTableHeader>
diff --git a/apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx b/apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx
index fd4ea1652b78c..6145a0337debb 100644
--- a/apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx
@@ -139,6 +139,7 @@ function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmen
 	const chatClosingTagsField = useId();
 	const allowReceiveForwardOffline = useId();
 	const unitFieldId = useId();
+	const agentsLabelId = useId();
 
 	return (
 		<Page flexDirection='row'>
@@ -444,9 +445,11 @@ function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmen
 						<Divider mb={16} />
 
 						<Field>
-							<FieldLabel mb={4}>{t('Agents')}</FieldLabel>
+							<FieldLabel id={agentsLabelId} mb={4}>
+								{t('Agents')}
+							</FieldLabel>
 							<Box display='flex' flexDirection='column' height='50vh'>
-								<DepartmentsAgentsTable control={control} register={register} />
+								<DepartmentsAgentsTable aria-labelledby={agentsLabelId} control={control} register={register} />
 							</Box>
 						</Field>
 					</FieldGroup>

From abd09df505b16356c9b721ac760f6ef879417092 Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Thu, 10 Apr 2025 19:51:00 -0300
Subject: [PATCH 3/4] test: added e2e tests

---
 .../omnichannel-departaments.spec.ts          | 38 +++++++++++++++++--
 .../page-objects/omnichannel-departments.ts   | 16 ++++++++
 2 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-departaments.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-departaments.spec.ts
index 023d11de47570..f6c156847c2f5 100644
--- a/apps/meteor/tests/e2e/omnichannel/omnichannel-departaments.spec.ts
+++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-departaments.spec.ts
@@ -4,6 +4,7 @@ import type { Page } from '@playwright/test';
 import { IS_EE } from '../config/constants';
 import { Users } from '../fixtures/userStates';
 import { OmnichannelDepartments } from '../page-objects';
+import { createAgent } from '../utils/omnichannel/agents';
 import { createDepartment, deleteDepartment } from '../utils/omnichannel/departments';
 import { test, expect } from '../utils/test';
 
@@ -19,15 +20,18 @@ test.describe('OC - Manage Departments', () => {
 	test.skip(!IS_EE, 'Enterprise Edition Only');
 
 	let poOmnichannelDepartments: OmnichannelDepartments;
+	let agent: Awaited<ReturnType<typeof createAgent>>;
 
 	test.beforeAll(async ({ api }) => {
 		// turn on department removal
 		await api.post('/settings/Omnichannel_enable_department_removal', { value: true });
+		agent = await createAgent(api, 'user1');
 	});
 
 	test.afterAll(async ({ api }) => {
 		// turn off department removal
 		await api.post('/settings/Omnichannel_enable_department_removal', { value: false });
+		await agent.delete();
 	});
 
 	test.describe('Create first department', async () => {
@@ -38,7 +42,7 @@ test.describe('OC - Manage Departments', () => {
 			await poOmnichannelDepartments.sidenav.linkDepartments.click();
 		});
 
-		test('Create department', async () => {
+		test('Create department', async ({ page }) => {
 			const departmentName = faker.string.uuid();
 
 			await poOmnichannelDepartments.headingButtonNew('Create department').click();
@@ -65,12 +69,40 @@ test.describe('OC - Manage Departments', () => {
 				await expect(poOmnichannelDepartments.errorMessage(ERROR.requiredEmail)).not.toBeVisible();
 			});
 
-			await test.step('expect create new department', async () => {
+			await test.step('expect to fill required fields', async () => {
 				await poOmnichannelDepartments.btnEnabled.click();
 				await poOmnichannelDepartments.inputName.fill(departmentName);
 				await poOmnichannelDepartments.inputEmail.fill(faker.internet.email());
-				await poOmnichannelDepartments.btnSave.click();
+			});
+
+			await test.step('expect to fetch agents a reasonable number of times', async () => {
+				let requestCount = 0;
+
+				await page.route('**/v1/livechat/users/agent*', async (route) => {
+					requestCount++;
+					await route.continue();
+				});
+
+				await poOmnichannelDepartments.inputAgents.click();
+				await poOmnichannelDepartments.inputAgents.fill('user1');
 
+				await page.waitForTimeout(1000);
+				await expect(requestCount).toBeGreaterThan(0);
+				await expect(requestCount).toBeLessThan(3);
+
+				await poOmnichannelDepartments.inputAgents.click();
+			});
+
+			await test.step('expect to add an agent', async () => {
+				await poOmnichannelDepartments.inputAgents.click();
+				await poOmnichannelDepartments.inputAgents.fill('user1');
+				await poOmnichannelDepartments.findOption('user1 (@user1)').click();
+				await poOmnichannelDepartments.btnAddAgent.click();
+				await expect(poOmnichannelDepartments.findAgentRow('user1')).toBeVisible();
+			});
+
+			await test.step('expect create new department', async () => {
+				await poOmnichannelDepartments.btnSave.click();
 				await poOmnichannelDepartments.search(departmentName);
 				await expect(poOmnichannelDepartments.firstRowInTable).toBeVisible();
 			});
diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
index 9bab98fcfe00a..dd2607719e5f2 100644
--- a/apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
+++ b/apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
@@ -170,4 +170,20 @@ export class OmnichannelDepartments {
 		await this.inputUnit.click();
 		await this.findOption(unitName).click();
 	}
+
+	get fieldGroupAgents() {
+		return this.page.getByLabel('Agents', { exact: true });
+	}
+
+	get inputAgents() {
+		return this.fieldGroupAgents.getByRole('textbox');
+	}
+
+	get btnAddAgent() {
+		return this.fieldGroupAgents.getByRole('button', { name: 'Add', exact: true });
+	}
+
+	findAgentRow(name: string) {
+		return this.page.locator('tr', { has: this.page.getByText(name, { exact: true }) });
+	}
 }

From 347f27b71f34f832e9c3d4755da091e69147e48c Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Fri, 11 Apr 2025 11:48:15 -0300
Subject: [PATCH 4/4] chore: changeset

---
 .changeset/gold-laws-wink.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/gold-laws-wink.md

diff --git a/.changeset/gold-laws-wink.md b/.changeset/gold-laws-wink.md
new file mode 100644
index 0000000000000..4af030b274cf0
--- /dev/null
+++ b/.changeset/gold-laws-wink.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixes a fetch infinite loop when adding agents to a department