From 17f3d5e96ae53a45307176cc5f20a6e2870c0f08 Mon Sep 17 00:00:00 2001
From: csuadev <72958726+csuadev@users.noreply.github.com>
Date: Thu, 15 Aug 2024 22:01:43 +0200
Subject: [PATCH] fix: Missing department names on OC edit agent view (#33033)

---
 .changeset/fast-lobsters-turn.md              |  5 ++++
 .../views/omnichannel/agents/AgentEdit.tsx    | 17 +++++++++++---
 .../omnichannel/omnichannel-agents.spec.ts    | 23 +++++++++++++++++++
 .../e2e/page-objects/omnichannel-agents.ts    |  4 ++++
 4 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/fast-lobsters-turn.md

diff --git a/.changeset/fast-lobsters-turn.md b/.changeset/fast-lobsters-turn.md
new file mode 100644
index 000000000000..ff1d97ea7289
--- /dev/null
+++ b/.changeset/fast-lobsters-turn.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed an issue due to an endpoint pagination that was causing that when an agent have assigned more than 50 departments, the departments have a blank space instead of the name.
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx b/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx
index 7b854b0f36c3..9e114b7a0c64 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx
@@ -34,7 +34,7 @@ import { MaxChatsPerAgent } from '../additionalForms';
 
 type AgentEditProps = {
 	agentData: Pick<ILivechatAgent, '_id' | 'username' | 'name' | 'status' | 'statusLivechat' | 'emails' | 'livechat'>;
-	userDepartments: Pick<ILivechatDepartmentAgents, 'departmentId'>[];
+	userDepartments: (Pick<ILivechatDepartmentAgents, 'departmentId'> & { departmentName: string })[];
 	availableDepartments: Pick<ILivechatDepartment, '_id' | 'name' | 'archived'>[];
 };
 
@@ -50,15 +50,26 @@ const AgentEdit = ({ agentData, userDepartments, availableDepartments }: AgentEd
 
 	const email = getUserEmailAddress(agentData);
 
+	const departments: Pick<ILivechatDepartment, '_id' | 'name' | 'archived'>[] = useMemo(() => {
+		const pending = userDepartments
+			.filter(({ departmentId }) => !availableDepartments.find((dep) => dep._id === departmentId))
+			.map((dep) => ({
+				_id: dep.departmentId,
+				name: dep.departmentName,
+			}));
+
+		return [...availableDepartments, ...pending];
+	}, [availableDepartments, userDepartments]);
+
 	const departmentsOptions: SelectOption[] = useMemo(() => {
 		const archivedDepartment = (name: string, archived?: boolean) => (archived ? `${name} [${t('Archived')}]` : name);
 
 		return (
-			availableDepartments.map(({ _id, name, archived }) =>
+			departments.map(({ _id, name, archived }) =>
 				name ? [_id, archivedDepartment(name, archived)] : [_id, archivedDepartment(_id, archived)],
 			) || []
 		);
-	}, [availableDepartments, t]);
+	}, [departments, t]);
 
 	const statusOptions: SelectOption[] = useMemo(
 		() => [
diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-agents.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-agents.spec.ts
index ad4657b1841c..239978928126 100644
--- a/apps/meteor/tests/e2e/omnichannel/omnichannel-agents.spec.ts
+++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-agents.spec.ts
@@ -105,4 +105,27 @@ test.describe.serial('OC - Manage Agents', () => {
 			await poOmnichannelAgents.btnSave.click();
 		});
 	});
+
+	test('OC - Edit agent  - Manage departments', async ({ page }) => {
+		await poOmnichannelAgents.selectUsername('user1');
+		await poOmnichannelAgents.btnAdd.click();
+		await poOmnichannelAgents.inputSearch.fill('user1');
+		await poOmnichannelAgents.findRowByUsername('user1').click();
+
+		await poOmnichannelAgents.btnEdit.click();
+		await poOmnichannelAgents.selectDepartment(department.data.name);
+		await poOmnichannelAgents.btnSave.click();
+
+		await test.step('expect the selected department is visible', async () => {
+			await poOmnichannelAgents.findRowByUsername('user1').click();
+
+			// mock the endpoint to use the one without pagination
+			await page.route('/api/v1/livechat/department?showArchived=true', async (route) => {
+				await route.fulfill({ json: { departments: [] } });
+			});
+
+			await poOmnichannelAgents.btnEdit.click();
+			await expect(poOmnichannelAgents.findSelectedDepartment(department.data.name)).toBeVisible();
+		});
+	});
 });
diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
index d588e409423f..4bde20c1da20 100644
--- a/apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
+++ b/apps/meteor/tests/e2e/page-objects/omnichannel-agents.ts
@@ -93,4 +93,8 @@ export class OmnichannelAgents {
 	findRowByName(name: string) {
 		return this.page.locator('tr', { has: this.page.locator(`td >> text="${name}"`) });
 	}
+
+	findSelectedDepartment(name: string) {
+		return this.page.locator(`role=option[name="${name}"]`);
+	}
 }