diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/RoomEdit/RoomEdit.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/RoomEdit/RoomEdit.tsx index 0e884e2f65a..0f32fdad70b 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/RoomEdit/RoomEdit.tsx +++ b/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 ( - + - + ); } @@ -133,9 +137,9 @@ function RoomEdit({ room, visitor, reload, reloadInfo, onClose }: RoomEditProps) )} - {t('Topic')} + {t('Topic')} - + diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-chat-history.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-chat-history.spec.ts index 232e76a2d87..3661e419395 100644 --- a/apps/meteor/tests/e2e/omnichannel/omnichannel-chat-history.spec.ts +++ b/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'); diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-omnichannel-content.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-omnichannel-content.ts index 8df460cdb21..37f35b8202d 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/home-omnichannel-content.ts +++ b/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"]'); } diff --git a/apps/meteor/tests/e2e/page-objects/home-omnichannel.ts b/apps/meteor/tests/e2e/page-objects/home-omnichannel.ts index 89fde4b5a90..6560f271dc0 100644 --- a/apps/meteor/tests/e2e/page-objects/home-omnichannel.ts +++ b/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 { diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-room-info.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-room-info.ts index 5f3db0513af..5df39c592a9 100644 --- a/apps/meteor/tests/e2e/page-objects/omnichannel-room-info.ts +++ b/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}"`); }