fix: incorrect e2ee toggle behavior on Teams creation modal and private/broadcast toggling

.changeset/rare-walls-press.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/i18n': patch
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where the encryption toggle was incorrectly reset/disabled/enabled in the Teams creation modal when Broadcast or Private was toggled, or when the user lacked unrelated permissions.

apps/meteor/client/NavBarV2/NavBarPagesGroup/actions/CreateTeamModal.spec.tsx

@@ -0,0 +1,258 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import CreateTeamModal from './CreateTeamModal';
+import CreateTeamModalOld from '../../../sidebar/header/CreateTeam';
+
+jest.mock('../../../lib/utils/goToRoomById', () => ({
+	goToRoomById: jest.fn(),
+}));
+
+type CreateTeamModalComponentType = typeof CreateTeamModal | typeof CreateTeamModalOld;
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+describe.each([
+	['CreateTeamModal', CreateTeamModalOld],
+	['CreateTeamModal in NavbarV2', CreateTeamModal],
+] as const)(
+	'%s',
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	(_name: string, CreateTeamModalComponent: CreateTeamModalComponentType) => {
+		it('should render with encryption option disabled and set to off when E2E_Enable=false and E2E_Enabled_Default_PrivateRooms=false', async () => {
+			render(<CreateTeamModalComponent onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', false).withSetting('E2E_Enabled_Default_PrivateRooms', false).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+			expect(encrypted).toBeInTheDocument();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+		});
+
+		it('should render with encryption option enabled and set to off when E2E_Enable=true and E2E_Enabled_Default_PrivateRooms=false', async () => {
+			render(<CreateTeamModalComponent onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', false).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+			expect(encrypted).toBeInTheDocument();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeEnabled();
+		});
+
+		it('should render with encryption option disabled and set to off when E2E_Enable=false and E2E_Enabled_Default_PrivateRooms=true', async () => {
+			render(<CreateTeamModalComponent onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', false).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+			expect(encrypted).toBeInTheDocument();
+
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+		});
+
+		it('should render with encryption option enabled and set to on when E2E_Enable=true and E2E_Enabled_Default_PrivateRooms=True', async () => {
+			render(<CreateTeamModalComponent onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+			expect(encrypted).toBeChecked();
+			expect(encrypted).toBeEnabled();
+		});
+
+		it('when Private goes ON → OFF: forces Encrypted OFF and disables it (E2E_Enable=true, E2E_Enabled_Default_PrivateRooms=true)', async () => {
+			render(<CreateTeamModalComponent onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+			const priv = screen.getByLabelText('Teams_New_Private_Label') as HTMLInputElement;
+
+			// initial: private=true, encrypted ON and enabled
+			expect(priv).toBeChecked();
+			expect(encrypted).toBeChecked();
+			expect(encrypted).toBeEnabled();
+
+			// Private ON -> OFF: encrypted must become OFF and disabled
+			await userEvent.click(priv);
+			expect(priv).not.toBeChecked();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+		});
+
+		it('when Private goes OFF → ON: keeps Encrypted OFF but re-enables it (E2E_Enable=true, E2E_Enabled_Default_PrivateRooms=true)', async () => {
+			render(<CreateTeamModalComponent onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+			const priv = screen.getByLabelText('Teams_New_Private_Label') as HTMLInputElement;
+
+			// turn private OFF to simulate user path from non-private
+			await userEvent.click(priv);
+			expect(priv).not.toBeChecked();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+
+			// turn private back ON -> encrypted should remain OFF but become enabled
+			await userEvent.click(priv);
+			expect(priv).toBeChecked();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeEnabled();
+		});
+
+		it('private team: toggling Broadcast on/off does not change or disable Encrypted', async () => {
+			render(<CreateTeamModalComponent onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+			const broadcast = screen.getByLabelText('Teams_New_Broadcast_Label') as HTMLInputElement;
+			const priv = screen.getByLabelText('Teams_New_Private_Label') as HTMLInputElement;
+
+			expect(priv).toBeChecked();
+			expect(encrypted).toBeChecked();
+			expect(encrypted).toBeEnabled();
+			expect(broadcast).not.toBeChecked();
+
+			// Broadcast: OFF -> ON (Encrypted unchanged + enabled)
+			await userEvent.click(broadcast);
+			expect(broadcast).toBeChecked();
+			expect(encrypted).toBeChecked();
+			expect(encrypted).toBeEnabled();
+
+			// Broadcast: ON -> OFF (Encrypted unchanged + enabled)
+			await userEvent.click(broadcast);
+			expect(broadcast).not.toBeChecked();
+			expect(encrypted).toBeChecked();
+			expect(encrypted).toBeEnabled();
+
+			// User can still toggle Encrypted freely while Broadcast is OFF
+			await userEvent.click(encrypted);
+			expect(encrypted).not.toBeChecked();
+
+			// User can still toggle Encrypted freely while Broadcast is ON
+			await userEvent.click(broadcast);
+			expect(broadcast).toBeChecked();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeEnabled();
+		});
+
+		it('non-private team: Encrypted remains OFF and disabled regardless of Broadcast state', async () => {
+			render(<CreateTeamModalComponent onClose={() => null} />, {
+				wrapper: mockAppRoot().withSetting('E2E_Enable', true).withSetting('E2E_Enabled_Default_PrivateRooms', true).build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const encrypted = screen.getByLabelText('Teams_New_Encrypted_Label') as HTMLInputElement;
+			const broadcast = screen.getByLabelText('Teams_New_Broadcast_Label') as HTMLInputElement;
+			const priv = screen.getByLabelText('Teams_New_Private_Label') as HTMLInputElement;
+
+			// Switch to non-private
+			await userEvent.click(priv);
+			expect(priv).not.toBeChecked();
+
+			// Encrypted must be OFF + disabled (non-private cannot be encrypted)
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+
+			// Broadcast: OFF -> ON (Encrypted stays OFF + disabled)
+			await userEvent.click(broadcast);
+			expect(broadcast).toBeChecked();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+
+			// Broadcast: ON -> OFF (Encrypted still OFF + disabled)
+			await userEvent.click(broadcast);
+			expect(broadcast).not.toBeChecked();
+			expect(encrypted).not.toBeChecked();
+			expect(encrypted).toBeDisabled();
+		});
+
+		it('should disable and turn on ReadOnly toggle when Broadcast is ON and no set-readonly permission', async () => {
+			render(<CreateTeamModalComponent onClose={() => null} />, {
+				wrapper: mockAppRoot().build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const broadcast = screen.getByLabelText('Teams_New_Broadcast_Label') as HTMLInputElement;
+			const readOnly = screen.getByLabelText('Teams_New_Read_only_Label') as HTMLInputElement;
+
+			expect(readOnly).not.toBeChecked();
+
+			// Broadcast: OFF -> ON (ReadOnly stays ON + disabled)
+			await userEvent.click(broadcast);
+			expect(broadcast).toBeChecked();
+			expect(readOnly).toBeChecked();
+			expect(readOnly).toBeDisabled();
+		});
+
+		it('should disable and turn on ReadOnly toggle when Broadcast is ON with set-readonly permission', async () => {
+			render(<CreateTeamModalComponent onClose={() => null} />, {
+				wrapper: mockAppRoot().withPermission('set-readonly').build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const broadcast = screen.getByLabelText('Teams_New_Broadcast_Label') as HTMLInputElement;
+			const readOnly = screen.getByLabelText('Teams_New_Read_only_Label') as HTMLInputElement;
+
+			expect(readOnly).not.toBeChecked();
+
+			// Broadcast: OFF -> ON (ReadOnly stays ON + disabled)
+			await userEvent.click(broadcast);
+			expect(broadcast).toBeChecked();
+			expect(readOnly).toBeChecked();
+			expect(readOnly).toBeDisabled();
+		});
+
+		it('should disable and turn off ReadOnly toggle when Broadcast is OFF with no set-readonly permission', async () => {
+			render(<CreateTeamModalComponent onClose={() => null} />, {
+				wrapper: mockAppRoot().build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const broadcast = screen.getByLabelText('Teams_New_Broadcast_Label') as HTMLInputElement;
+			const readOnly = screen.getByLabelText('Teams_New_Read_only_Label') as HTMLInputElement;
+
+			expect(broadcast).not.toBeChecked();
+			expect(readOnly).not.toBeChecked();
+			expect(readOnly).toBeDisabled();
+		});
+
+		it('should enable ReadOnly toggle when Broadcast is OFF with set-readonly permission', async () => {
+			render(<CreateTeamModalComponent onClose={() => null} />, {
+				wrapper: mockAppRoot().withPermission('set-readonly').build(),
+			});
+
+			await userEvent.click(screen.getByText('Advanced_settings'));
+
+			const broadcast = screen.getByLabelText('Teams_New_Broadcast_Label') as HTMLInputElement;
+			const readOnly = screen.getByLabelText('Teams_New_Read_only_Label') as HTMLInputElement;
+
+			expect(broadcast).not.toBeChecked();
+			expect(readOnly).not.toBeChecked();
+			expect(readOnly).toBeEnabled();
+		});
+	},
+);

apps/meteor/client/NavBarV2/NavBarPagesGroup/actions/CreateTeamModal.tsx

@@ -53,13 +53,13 @@ type CreateTeamModalProps = { onClose: () => void };
 const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 	const t = useTranslation();
 	const e2eEnabled = useSetting('E2E_Enable');
-	const e2eEnabledForPrivateByDefault = useSetting('E2E_Enabled_Default_PrivateRooms');
+	const e2eEnabledForPrivateByDefault = useSetting('E2E_Enabled_Default_PrivateRooms') && e2eEnabled;
 	const namesValidation = useSetting('UTF8_Channel_Names_Validation');
 	const allowSpecialNames = useSetting('UI_Allow_room_names_with_special_chars');
+	const canSetReadOnly = usePermissionWithScopedRoles('set-readonly', ['owner']);
 
 	const dispatchToastMessage = useToastMessageDispatch();
 	const canCreateTeam = usePermission('create-team');
-	const canSetReadOnly = usePermissionWithScopedRoles('set-readonly', ['owner']);
 
 	const checkTeamNameExists = useEndpoint('GET', '/v1/rooms.nameExists');
 	const createTeamAction = useEndpoint('POST', '/v1/teams.create');
@@ -113,15 +113,11 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 			setValue('encrypted', false);
 		}
 
-		if (broadcast) {
-			setValue('encrypted', false);
-		}
-
 		setValue('readOnly', broadcast);
 	}, [watch, setValue, broadcast, isPrivate]);
 
-	const canChangeReadOnly = !broadcast;
-	const canChangeEncrypted = isPrivate && !broadcast && e2eEnabled && !e2eEnabledForPrivateByDefault;
+	const readOnlyDisabled = broadcast || !canSetReadOnly;
+	const canChangeEncrypted = isPrivate && e2eEnabled;
 	const getEncryptedHint = useEncryptedRoomDescription('team');
 
 	const handleCreateTeam = async ({
@@ -265,7 +261,7 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 										render={({ field: { onChange, value, ref } }): ReactElement => (
 											<ToggleSwitch
 												id={encryptedId}
-												disabled={!canSetReadOnly || !canChangeEncrypted}
+												disabled={!canChangeEncrypted}
 												onChange={onChange}
 												aria-describedby={`${encryptedId}-hint`}
 												checked={value}
@@ -274,7 +270,7 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 										)}
 									/>
 								</FieldRow>
-								<FieldDescription id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, broadcast, encrypted })}</FieldDescription>
+								<FieldDescription id={`${encryptedId}-hint`}>{getEncryptedHint({ isPrivate, encrypted })}</FieldDescription>
 							</Field>
 							<Field>
 								<FieldRow>
@@ -286,7 +282,7 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 											<ToggleSwitch
 												id={readOnlyId}
 												aria-describedby={`${readOnlyId}-hint`}
-												disabled={!canChangeReadOnly}
+												disabled={readOnlyDisabled}
 												onChange={onChange}
 												checked={value}
 												ref={ref}

apps/meteor/client/NavBarV2/NavBarPagesGroup/actions/useEncryptedRoomDescription.spec.tsx

@@ -23,65 +23,34 @@ describe.each([
 			});
 			const describe = result.current;
 
-			expect(describe({ isPrivate: true, broadcast: false, encrypted: true })).toBe('Not_available_for_this_workspace');
+			expect(describe({ isPrivate: true, encrypted: true })).toBe('Not_available_for_this_workspace');
 		});
 
-		it('returns "Encrypted_not_available" when room is not private', () => {
+		it('returns "Encrypted_not_available" when room is not private and E2E is enabled', () => {
 			const { result } = renderHook(() => useEncryptedRoomDescriptionHook(roomType), {
 				wrapper: wrapper.withSetting('E2E_Enable', true).build(),
 			});
 			const describe = result.current;
 
-			expect(describe({ isPrivate: false, broadcast: false, encrypted: false })).toBe(`Encrypted_not_available`);
+			expect(describe({ isPrivate: false, encrypted: false })).toBe('Encrypted_not_available');
 		});
 
-		it('returns "Not_available_for_broadcast" when broadcast=true (even if encrypted is true)', () => {
+		it('returns "Encrypted_messages" when private and encrypted are true and E2E is enabled', () => {
 			const { result } = renderHook(() => useEncryptedRoomDescriptionHook(roomType), {
 				wrapper: wrapper.withSetting('E2E_Enable', true).build(),
 			});
 			const describe = result.current;
 
-			expect(describe({ isPrivate: true, broadcast: true, encrypted: true })).toBe(`Not_available_for_broadcast`);
-
-			expect(describe({ isPrivate: true, broadcast: true, encrypted: false })).toBe(`Not_available_for_broadcast`);
-		});
-
-		it('returns "Encrypted_messages" when private, not broadcast, and encrypted is true', () => {
-			const { result } = renderHook(() => useEncryptedRoomDescriptionHook(roomType), {
-				wrapper: wrapper.withSetting('E2E_Enable', true).build(),
-			});
-			const describe = result.current;
-
-			expect(describe({ isPrivate: true, broadcast: false, encrypted: true })).toBe(`Encrypted_messages`);
+			expect(describe({ isPrivate: true, encrypted: true })).toBe('Encrypted_messages');
 		});
 
-		it('returns "Encrypted_messages_false" when private, not broadcast, and encrypted is false', () => {
+		it('returns "Encrypted_messages_false" when private and encrypted are false and E2E is enabled', () => {
 			const { result } = renderHook(() => useEncryptedRoomDescriptionHook(roomType), {
 				wrapper: wrapper.withSetting('E2E_Enable', true).build(),
 			});
 			const describe = result.current;
 
-			expect(describe({ isPrivate: true, broadcast: false, encrypted: false })).toBe('Encrypted_messages_false');
-		});
-
-		describe('when broadcast is undefined', () => {
-			it('returns "Encrypted_messages" if private and encrypted is true and broadcast is undefined', () => {
-				const { result } = renderHook(() => useEncryptedRoomDescriptionHook(roomType), {
-					wrapper: wrapper.withSetting('E2E_Enable', true).build(),
-				});
-				const describe = result.current;
-
-				expect(describe({ isPrivate: true, encrypted: true })).toBe(`Encrypted_messages`);
-			});
-
-			it('returns "Encrypted_messages_false" if private and encrypted is false and broadcast is undefined', () => {
-				const { result } = renderHook(() => useEncryptedRoomDescriptionHook(roomType), {
-					wrapper: wrapper.withSetting('E2E_Enable', true).build(),
-				});
-				const describe = result.current;
-
-				expect(describe({ isPrivate: true, encrypted: false })).toBe('Encrypted_messages_false');
-			});
+			expect(describe({ isPrivate: true, encrypted: false })).toBe('Encrypted_messages_false');
 		});
 	});
 });