regression: GUI crashing when editing a OC room

apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/RoomEdit/RoomEdit.tsx

@@ -3,11 +3,11 @@ import { Field, FieldLabel, FieldRow, TextInput, ButtonGroup, Button } from '@ro
 import { CustomFieldsForm } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
-import { useCallback } from 'react';
+import { useCallback, useId } from 'react';
 import { useController, useForm } from 'react-hook-form';
 
 import { hasAtLeastOnePermission } from '../../../../../../../app/authorization/client';
-import { ContextualbarFooter, ContextualbarScrollableContent } from '../../../../../../components/Contextualbar';
+import { ContextualbarContent, ContextualbarFooter, ContextualbarScrollableContent } from '../../../../../../components/Contextualbar';
 import Tags from '../../../../../../components/Omnichannel/Tags';
 import { useOmnichannelPriorities } from '../../../../../../omnichannel/hooks/useOmnichannelPriorities';
 import { SlaPoliciesSelect, PrioritiesSelect } from '../../../../additionalForms';
@@ -117,11 +117,15 @@ function RoomEdit({ room, visitor, reload, reloadInfo, onClose }: RoomEditProps)
 		[dispatchToastMessage, isFormValid, onClose, queryClient, reload, reloadInfo, room._id, saveRoom, t, visitor._id],
 	);
 
+	const topicField = useId();
+
+	// TODO: this loading should be checked in the `RoomEditWithData`
+	// This component should not have logical data
 	if (isCustomFieldsLoading || isSlaPoliciesLoading || isPrioritiesLoading) {
 		return (
-			<ContextualbarScrollableContent>
+			<ContextualbarContent>
 				<FormSkeleton />
-			</ContextualbarScrollableContent>
+			</ContextualbarContent>
 		);
 	}
 
@@ -133,9 +137,9 @@ function RoomEdit({ room, visitor, reload, reloadInfo, onClose }: RoomEditProps)
 				)}
 
 				<Field>
-					<FieldLabel>{t('Topic')}</FieldLabel>
+					<FieldLabel htmlFor={topicField}>{t('Topic')}</FieldLabel>
 					<FieldRow>
-						<TextInput {...register('topic')} flexGrow={1} />
+						<TextInput {...register('topic')} id={topicField} flexGrow={1} />
 					</FieldRow>
 				</Field>
 

apps/meteor/tests/e2e/omnichannel/omnichannel-chat-history.spec.ts

@@ -48,6 +48,14 @@ test.describe('Omnichannel chat history', () => {
 			await agent.poHomeOmnichannel.sidenav.openChat(newVisitor.name);
 		});
 
+		await test.step('expect to be able to edit room info', async () => {
+			await agent.poHomeOmnichannel.roomInfo.btnEditRoomInfo.click();
+			await agent.poHomeOmnichannel.roomInfo.inputTopic.fill('any_topic');
+			await agent.poHomeOmnichannel.roomInfo.btnSaveEditRoom.click();
+
+			await expect(agent.poHomeOmnichannel.roomInfo.dialogRoomInfo).toContainText('any_topic');
+		});
+
 		await test.step('Expect to be able to close an omnichannel to conversation', async () => {
 			await agent.poHomeOmnichannel.content.btnCloseChat.click();
 			await agent.poHomeOmnichannel.content.inputModalClosingComment.type('any_comment');

apps/meteor/tests/e2e/page-objects/fragments/home-omnichannel-content.ts

@@ -55,10 +55,6 @@ export class HomeOmnichannelContent extends HomeContent {
 		return this.page.getByRole('dialog').locator('p[data-type="email"]');
 	}
 
-	get infoContactName(): Locator {
-		return this.page.locator('[data-qa-id="contactInfo-name"]');
-	}
-
 	get btnReturn(): Locator {
 		return this.page.locator('[data-qa-id="ToolBoxAction-back"]');
 	}
@@ -71,10 +67,6 @@ export class HomeOmnichannelContent extends HomeContent {
 		return this.page.locator('[data-qa-id="on-hold-modal"]');
 	}
 
-	get btnEditRoomInfo(): Locator {
-		return this.page.locator('button[data-qa-id="room-info-edit"]');
-	}
-
 	get btnOnHoldConfirm(): Locator {
 		return this.modalOnHold.locator('role=button[name="Place chat On-Hold"]');
 	}

apps/meteor/tests/e2e/page-objects/home-omnichannel.ts

@@ -7,6 +7,7 @@ import { OmnichannelContacts } from './omnichannel-contacts-list';
 import { OmnichannelCurrentChats } from './omnichannel-current-chats';
 import { OmnichannelManager } from './omnichannel-manager';
 import { OmnichannelMonitors } from './omnichannel-monitors';
+import { OmnichannelRoomInfo } from './omnichannel-room-info';
 import { OmnichannelTranscript } from './omnichannel-transcript';
 import { OmnichannelTriggers } from './omnichannel-triggers';
 
@@ -37,6 +38,8 @@ export class HomeOmnichannel {
 
 	readonly contacts: OmnichannelContacts;
 
+	readonly roomInfo: OmnichannelRoomInfo;
+
 	constructor(page: Page) {
 		this.page = page;
 		this.content = new HomeOmnichannelContent(page);
@@ -51,6 +54,7 @@ export class HomeOmnichannel {
 		this.managers = new OmnichannelManager(page);
 		this.monitors = new OmnichannelMonitors(page);
 		this.contacts = new OmnichannelContacts(page);
+		this.roomInfo = new OmnichannelRoomInfo(page);
 	}
 
 	get toastSuccess(): Locator {

apps/meteor/tests/e2e/page-objects/omnichannel-room-info.ts

@@ -7,6 +7,26 @@ export class OmnichannelRoomInfo {
 		this.page = page;
 	}
 
+	get dialogRoomInfo(): Locator {
+		return this.page.getByRole('dialog', { name: 'Room Information' });
+	}
+
+	get btnEditRoomInfo(): Locator {
+		return this.dialogRoomInfo.getByRole('button', { name: 'Edit' });
+	}
+
+	get dialogEditRoom(): Locator {
+		return this.page.getByRole('dialog', { name: 'Edit Room' });
+	}
+
+	get inputTopic(): Locator {
+		return this.dialogEditRoom.getByRole('textbox', { name: 'Topic' });
+	}
+
+	get btnSaveEditRoom(): Locator {
+		return this.dialogEditRoom.getByRole('button', { name: 'Save' });
+	}
+
 	getInfo(value: string): Locator {
 		return this.page.locator(`span >> text="${value}"`);
 	}