fix: Missing department names on OC edit agent view (#33033)

.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.

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(
 		() => [

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();
+		});
+	});
 });

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}"]`);
+	}
 }