fix: Admin's edit room form not triggering (#31384)

.changeset/breezy-ladybugs-sip.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue not allowing admin users to edit rooms

apps/meteor/client/views/admin/emailInbox/EmailInboxForm.tsx

@@ -468,7 +468,7 @@ const EmailInboxForm = ({ inboxData }: { inboxData?: IEmailInboxPayload }): Reac
 												id={imapPortField}
 												{...field}
 												error={errors.imapPort?.message}
-												aria-aria-describedby={`${imapPortField}-error`}
+												aria-describedby={`${imapPortField}-error`}
 												aria-required={true}
 												aria-invalid={Boolean(errors.email)}
 											/>

apps/meteor/client/views/admin/rooms/EditRoom.tsx

@@ -72,10 +72,18 @@ const EditRoom = ({ room, onChange, onDelete }: EditRoomProps) => {
 		reset,
 		handleSubmit,
 		formState: { isDirty, errors, dirtyFields },
-	} = useForm({ defaultValues: getInitialValues(room) });
+	} = useForm({ values: getInitialValues(room) });
 
-	const { canViewName, canViewTopic, canViewAnnouncement, canViewArchived, canViewDescription, canViewType, canViewReadOnly } =
-		useEditAdminRoomPermissions(room);
+	const {
+		canViewName,
+		canViewTopic,
+		canViewAnnouncement,
+		canViewArchived,
+		canViewDescription,
+		canViewType,
+		canViewReadOnly,
+		canViewReactWhenReadOnly,
+	} = useEditAdminRoomPermissions(room);
 
 	const { roomType, readOnly, archived } = watch();
 
@@ -110,6 +118,7 @@ const EditRoom = ({ room, onChange, onDelete }: EditRoomProps) => {
 		await Promise.all([isDirty && handleUpdateRoomData(data), changeArchiving && handleArchive()].filter(Boolean));
 	});
 
+	const formId = useUniqueId();
 	const roomNameField = useUniqueId();
 	const ownerField = useUniqueId();
 	const roomDescription = useUniqueId();
@@ -125,7 +134,7 @@ const EditRoom = ({ room, onChange, onDelete }: EditRoomProps) => {
 
 	return (
 		<>
-			<ContextualbarScrollableContent is='form' onSubmit={handleSubmit(handleSave)}>
+			<ContextualbarScrollableContent id={formId} is='form' onSubmit={handleSubmit(handleSave)}>
 				{room.t !== 'd' && (
 					<Box pbe={24} display='flex' justifyContent='center'>
 						<Controller
@@ -249,7 +258,7 @@ const EditRoom = ({ room, onChange, onDelete }: EditRoomProps) => {
 												{...field}
 												disabled={isDeleting || isRoomFederated(room)}
 												checked={value}
-												aria-aria-describedby={`${readOnlyField}-hint`}
+												aria-describedby={`${readOnlyField}-hint`}
 											/>
 										)}
 									/>
@@ -257,7 +266,7 @@ const EditRoom = ({ room, onChange, onDelete }: EditRoomProps) => {
 								<FieldHint id={`${readOnlyField}-hint`}>{t('Only_authorized_users_can_write_new_messages')}</FieldHint>
 							</Field>
 						)}
-						{readOnly && (
+						{canViewReactWhenReadOnly && readOnly && (
 							<Field>
 								<FieldRow>
 									<FieldLabel htmlFor={reactWhenReadOnly}>{t('React_when_read_only')}</FieldLabel>
@@ -335,7 +344,7 @@ const EditRoom = ({ room, onChange, onDelete }: EditRoomProps) => {
 					<Button type='reset' disabled={!isDirty || isDeleting} onClick={() => reset()}>
 						{t('Reset')}
 					</Button>
-					<Button type='submit' disabled={!isDirty || isDeleting}>
+					<Button form={formId} type='submit' disabled={!isDirty || isDeleting}>
 						{t('Save')}
 					</Button>
 				</ButtonGroup>

apps/meteor/client/views/admin/rooms/useEditAdminRoomPermissions.ts

@@ -5,20 +5,37 @@ import { RoomSettingsEnum } from '../../../../definition/IRoomTypeConfig';
 import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
 
 export const useEditAdminRoomPermissions = (room: Pick<IRoom, RoomAdminFieldsType>) => {
-	const [canViewName, canViewTopic, canViewAnnouncement, canViewArchived, canViewDescription, canViewType, canViewReadOnly] =
-		useMemo(() => {
-			const isAllowed = roomCoordinator.getRoomDirectives(room.t).allowRoomSettingChange;
-			return [
-				isAllowed?.(room, RoomSettingsEnum.NAME),
-				isAllowed?.(room, RoomSettingsEnum.TOPIC),
-				isAllowed?.(room, RoomSettingsEnum.ANNOUNCEMENT),
-				isAllowed?.(room, RoomSettingsEnum.ARCHIVE_OR_UNARCHIVE),
-				isAllowed?.(room, RoomSettingsEnum.DESCRIPTION),
-				isAllowed?.(room, RoomSettingsEnum.TYPE),
-				isAllowed?.(room, RoomSettingsEnum.READ_ONLY),
-				isAllowed?.(room, RoomSettingsEnum.REACT_WHEN_READ_ONLY),
-			];
-		}, [room]);
+	const [
+		canViewName,
+		canViewTopic,
+		canViewAnnouncement,
+		canViewArchived,
+		canViewDescription,
+		canViewType,
+		canViewReadOnly,
+		canViewReactWhenReadOnly,
+	] = useMemo(() => {
+		const isAllowed = roomCoordinator.getRoomDirectives(room.t).allowRoomSettingChange;
+		return [
+			isAllowed?.(room, RoomSettingsEnum.NAME),
+			isAllowed?.(room, RoomSettingsEnum.TOPIC),
+			isAllowed?.(room, RoomSettingsEnum.ANNOUNCEMENT),
+			isAllowed?.(room, RoomSettingsEnum.ARCHIVE_OR_UNARCHIVE),
+			isAllowed?.(room, RoomSettingsEnum.DESCRIPTION),
+			isAllowed?.(room, RoomSettingsEnum.TYPE),
+			isAllowed?.(room, RoomSettingsEnum.READ_ONLY),
+			isAllowed?.(room, RoomSettingsEnum.REACT_WHEN_READ_ONLY),
+		];
+	}, [room]);
 
-	return { canViewName, canViewTopic, canViewAnnouncement, canViewArchived, canViewDescription, canViewType, canViewReadOnly };
+	return {
+		canViewName,
+		canViewTopic,
+		canViewAnnouncement,
+		canViewArchived,
+		canViewDescription,
+		canViewType,
+		canViewReadOnly,
+		canViewReactWhenReadOnly,
+	};
 };

apps/meteor/tests/e2e/administration.spec.ts

@@ -3,12 +3,14 @@ import { faker } from '@faker-js/faker';
 import { IS_EE } from './config/constants';
 import { Users } from './fixtures/userStates';
 import { Admin } from './page-objects';
+import { createTargetChannel } from './utils';
 import { test, expect } from './utils/test';
 
 test.use({ storageState: Users.admin.state });
 
 test.describe.parallel('administration', () => {
 	let poAdmin: Admin;
+	let targetChannel: string;
 
 	test.beforeEach(async ({ page }) => {
 		poAdmin = new Admin(page);
@@ -56,6 +58,9 @@ test.describe.parallel('administration', () => {
 	});
 
 	test.describe('Rooms', () => {
+		test.beforeAll(async ({ api }) => {
+			targetChannel = await createTargetChannel(api);
+		});
 		test.beforeEach(async ({ page }) => {
 			await page.goto('/admin/rooms');
 		});
@@ -64,6 +69,15 @@ test.describe.parallel('administration', () => {
 			await poAdmin.inputSearchRooms.type('general');
 			await page.waitForSelector('[qa-room-id="GENERAL"]');
 		});
+
+		test('should edit target channel', async () => {
+			await poAdmin.inputSearchRooms.type(targetChannel);
+			await poAdmin.getRoomRow(targetChannel).click();
+			await poAdmin.privateLabel.click();
+			await poAdmin.btnSave.click();
+			await expect(poAdmin.getRoomRow(targetChannel)).toContainText('Private Channel');
+		});
+		
 	});
 
 	test.describe('Permissions', () => {

apps/meteor/tests/e2e/page-objects/admin.ts

@@ -16,6 +16,18 @@ export class Admin {
 		return this.page.locator('input[placeholder ="Search rooms"]');
 	}
 
+	getRoomRow(name?: string): Locator {
+		return this.page.locator('[role="link"]', { hasText: name });
+	}
+
+	get btnSave(): Locator {
+		return this.page.locator('button >> text="Save"');
+	}
+
+	get privateLabel(): Locator {
+		return this.page.locator(`label >> text=Private`);
+	}
+
 	get inputSearchUsers(): Locator {
 		return this.page.locator('input[placeholder="Search Users"]');
 	}