fix: Owner change modal not showing content as expected

.changeset/loud-chairs-accept.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/i18n': patch
+'@rocket.chat/meteor': patch
+---
+
+Fixes some warnings on delete user modal when deleting a user who has owner role in some rooms.

apps/meteor/client/components/ConfirmOwnerChangeModal.tsx

@@ -1,9 +1,9 @@
 import { Box } from '@rocket.chat/fuselage';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { ComponentPropsWithoutRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 
 import GenericModal from './GenericModal';
-import RawText from './RawText';
 
 type ConfirmOwnerChangeModalProps = {
 	shouldChangeOwner: string[];
@@ -19,58 +19,70 @@ const ConfirmOwnerChangeModal = ({
 	onConfirm,
 	onCancel,
 }: ConfirmOwnerChangeModalProps) => {
-	const { t } = useTranslation();
+	const getChangeOwnerRooms = useEffectEvent(() => {
+		if (shouldChangeOwner.length === 0) {
+			return '';
+		}
 
-	let changeOwnerRooms = '';
-	if (shouldChangeOwner.length > 0) {
 		if (shouldChangeOwner.length === 1) {
-			changeOwnerRooms = t('A_new_owner_will_be_assigned_automatically_to_the__roomName__room', {
-				roomName: shouldChangeOwner.pop(),
-			});
-		} else if (shouldChangeOwner.length <= 5) {
-			changeOwnerRooms = t('A_new_owner_will_be_assigned_automatically_to_those__count__rooms__rooms__', {
-				count: shouldChangeOwner.length,
-				rooms: shouldChangeOwner.join(', '),
-			});
-		} else {
-			changeOwnerRooms = t('A_new_owner_will_be_assigned_automatically_to__count__rooms', {
-				count: shouldChangeOwner.length,
-			});
+			return (
+				<Trans
+					i18nKey='A_new_owner_will_be_assigned_automatically_to_the__roomName__room'
+					values={{ roomName: shouldChangeOwner[0] }}
+					components={{ bold: <Box is='span' fontWeight='bold' /> }}
+				/>
+			);
+		}
+		if (shouldChangeOwner.length <= 5) {
+			return (
+				<Trans
+					i18nKey='A_new_owner_will_be_assigned_automatically_to_those__count__rooms__rooms__'
+					values={{ count: shouldChangeOwner.length, rooms: shouldChangeOwner.join(', ') }}
+					components={{ br: <br />, bold: <Box is='span' fontWeight='bold' /> }}
+				/>
+			);
+		}
+		return (
+			<Trans
+				i18nKey='A_new_owner_will_be_assigned_automatically_to__count__rooms'
+				values={{ count: shouldChangeOwner.length }}
+				components={{ bold: <Box is='span' fontWeight='bold' /> }}
+			/>
+		);
+	});
+
+	const getRemovedRooms = useEffectEvent(() => {
+		if (shouldBeRemoved.length === 0) {
+			return '';
 		}
-	}
 
-	let removedRooms = '';
-	if (shouldBeRemoved.length > 0) {
 		if (shouldBeRemoved.length === 1) {
-			removedRooms = t('The_empty_room__roomName__will_be_removed_automatically', {
-				roomName: shouldBeRemoved.pop(),
-			});
-		} else if (shouldBeRemoved.length <= 5) {
-			removedRooms = t('__count__empty_rooms_will_be_removed_automatically__rooms__', {
-				count: shouldBeRemoved.length,
-				rooms: shouldBeRemoved.join(', '),
-			});
-		} else {
-			removedRooms = t('__count__empty_rooms_will_be_removed_automatically', {
-				count: shouldBeRemoved.length,
-			});
+			return (
+				<Trans
+					i18nKey='The_empty_room__roomName__will_be_removed_automatically'
+					values={{ roomName: shouldBeRemoved[0] }}
+					components={{ bold: <Box is='span' fontWeight='bold' /> }}
+				/>
+			);
+		}
+		if (shouldBeRemoved.length <= 5) {
+			return (
+				<Trans
+					i18nKey='__count__empty_rooms_will_be_removed_automatically__rooms__'
+					values={{ count: shouldBeRemoved.length, rooms: shouldBeRemoved.join(', ') }}
+					components={{ br: <br />, bold: <Box is='span' fontWeight='bold' /> }}
+				/>
+			);
 		}
-	}
+		return <Trans i18nKey='__count__empty_rooms_will_be_removed_automatically' values={{ count: shouldBeRemoved.length }} />;
+	});
 
 	return (
 		<GenericModal variant='danger' onClose={onCancel} onCancel={onCancel} confirmText={confirmText} onConfirm={onConfirm}>
 			{contentTitle}
 
-			{changeOwnerRooms && (
-				<Box marginBlock={16}>
-					<RawText>{changeOwnerRooms}</RawText>
-				</Box>
-			)}
-			{removedRooms && (
-				<Box marginBlock={16}>
-					<RawText>{removedRooms}</RawText>
-				</Box>
-			)}
+			{shouldChangeOwner && <Box marginBlock={16}>{getChangeOwnerRooms()}</Box>}
+			{shouldBeRemoved && <Box marginBlock={16}>{getRemovedRooms()}</Box>}
 		</GenericModal>
 	);
 };

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

@@ -1,4 +1,5 @@
 import { faker } from '@faker-js/faker';
+import type { IUser } from '@rocket.chat/apps-engine/definition/users';
 
 import { IS_EE } from './config/constants';
 import { Users } from './fixtures/userStates';
@@ -111,6 +112,85 @@ test.describe.parallel('administration', () => {
 			await expect(poAdmin.tabs.users.inputUserName).toHaveValue(username);
 			await expect(poAdmin.tabs.users.joinDefaultChannels).not.toBeVisible();
 		});
+
+		test.describe('Delete user', () => {
+			const nonEmptyChannelName = faker.string.uuid();
+			const emptyChannelName = faker.string.uuid();
+			let ownerUser: IUser;
+			let user: IUser;
+
+			test.beforeAll(async ({ api }) => {
+				const createUserResponse = await api.post('/users.create', {
+					email: faker.internet.email(),
+					name: faker.person.fullName(),
+					password: faker.internet.password(),
+					username: faker.internet.userName(),
+				});
+
+				user = (await createUserResponse.json()).user;
+
+				const createOwnerUserResponse = await api.post('/users.create', {
+					email: faker.internet.email(),
+					name: faker.person.fullName(),
+					password: faker.internet.password(),
+					username: faker.internet.userName(),
+				});
+
+				ownerUser = (await createOwnerUserResponse.json()).user;
+
+				// TODO: refactor createChannel utility in order to get channel data when creating
+				const response = await api.post('/channels.create', { name: nonEmptyChannelName, members: [ownerUser.username] });
+				const { channel: nonEmptyChannel } = await response.json();
+
+				await api.post('/channels.addOwner', { roomId: nonEmptyChannel._id, username: ownerUser.username });
+				await api.post('/channels.removeOwner', { roomId: nonEmptyChannel._id, userId: Users.admin.data._id });
+
+				// TODO: refactor createChannel utility in order to get channel data when creating
+				const res = await api.post('/groups.create', { name: emptyChannelName, members: [ownerUser.username] });
+				const { group: emptyRoom } = await res.json();
+
+				await api.post('/groups.addOwner', { roomId: emptyRoom._id, username: ownerUser.username });
+				await api.post('/groups.leave', { roomId: emptyRoom._id });
+			});
+
+			test('expect to show owner change modal, when deleting last owner of any room', async ({ page }) => {
+				await poAdmin.inputSearchUsers.type(ownerUser.username);
+				await poAdmin.getUserRow(ownerUser.username).click();
+				await poAdmin.tabs.users.btnMoreActions.click();
+				await poAdmin.tabs.users.btnDeleteUser.click();
+
+				await expect(page.getByRole('dialog', { name: 'Are you sure?' })).toBeVisible();
+
+				await page.getByRole('dialog').getByRole('button', { name: 'Delete' }).click();
+
+				await expect(page.getByRole('dialog', { name: 'Are you sure?' })).toContainText(
+					`A new owner will be assigned automatically to the ${nonEmptyChannelName} room.`,
+				);
+				await expect(page.getByRole('dialog', { name: 'Are you sure?' })).toContainText(
+					`The empty room ${emptyChannelName} will be removed automatically.`,
+				);
+				await expect(page.getByRole('dialog').getByRole('button', { name: 'Delete' })).toBeVisible();
+
+				await page.getByRole('dialog').getByRole('button', { name: 'Delete' }).click();
+
+				await expect(poUtils.toastBarSuccess).toBeVisible();
+				await expect(page.getByRole('heading', { name: 'No users' })).toBeVisible();
+			});
+
+			test('expect to delete user', async ({ page }) => {
+				await poAdmin.inputSearchUsers.type(user.username);
+				await poAdmin.getUserRow(user.username).click();
+				await poAdmin.tabs.users.btnMoreActions.click();
+				await poAdmin.tabs.users.btnDeleteUser.click();
+
+				await expect(page.getByRole('dialog', { name: 'Are you sure?' })).toBeVisible();
+
+				await page.getByRole('dialog').getByRole('button', { name: 'Delete' }).click();
+
+				await expect(poUtils.toastBarSuccess).toBeVisible();
+				await expect(page.getByRole('heading', { name: 'No users' })).toBeVisible();
+			});
+		});
 	});
 
 	test.describe('Rooms', () => {

apps/meteor/tests/e2e/page-objects/fragments/admin-flextab-users.ts

@@ -15,6 +15,14 @@ export class AdminFlextabUsers {
 		return this.page.locator('role=button[name="Add user"]');
 	}
 
+	get btnMoreActions(): Locator {
+		return this.page.locator('role=button[name="More"]');
+	}
+
+	get btnDeleteUser(): Locator {
+		return this.page.locator('role=menuitem[name="Delete"]');
+	}
+
 	get btnInvite(): Locator {
 		return this.page.locator('role=button[name="Invite"]');
 	}

packages/i18n/src/locales/ar.i18n.json

@@ -67,9 +67,9 @@
   "API_User_Limit": "حد المستخدم لإضافة جميع المستخدمين إلى Channel",
   "API_Wordpress_URL": "عنوان URL لـ WordPress",
   "APIs": "واجهات برمجة التطبيقات",
-  "A_new_owner_will_be_assigned_automatically_to__count__rooms": "سيتم تعيين مالك جديد تلقائيًا إلى <span style=\"font-weight: bold;\">{{count}}</span> من الغرف.",
-  "A_new_owner_will_be_assigned_automatically_to_the__roomName__room": "سيتم تعيين مالك جديد تلقائيًا إلى الغرفة <span style=\"font-weight: bold;\"> {{roomName}} </span>.",
-  "A_new_owner_will_be_assigned_automatically_to_those__count__rooms__rooms__": "سيتم تعيين مالك جديد تلقائيًا إلى هذه الغرف البالغ عددها <span style=\"font-weight: bold;\">{{count}}</span> :<br/> {{rooms}}.",
+  "A_new_owner_will_be_assigned_automatically_to__count__rooms": "سيتم تعيين مالك جديد تلقائيًا إلى <bold>{{count}}</bold> من الغرف.",
+  "A_new_owner_will_be_assigned_automatically_to_the__roomName__room": "سيتم تعيين مالك جديد تلقائيًا إلى الغرفة <bold>{{roomName}}</bold>.",
+  "A_new_owner_will_be_assigned_automatically_to_those__count__rooms__rooms__": "سيتم تعيين مالك جديد تلقائيًا إلى هذه الغرف البالغ عددها <bold>{{count}}</bold> :<br/> {{rooms}}.",
   "Accept": "قبول",
   "Accept_Call": "قبول المكالمة",
   "Accept_incoming_livechat_requests_even_if_there_are_no_online_agents": "قبول طلبات الدردشة الواردة عبر القناة متعددة الاتجاهات وإن لم يكن هناك وكلاء على الإنترنت",
@@ -3641,7 +3641,7 @@
   "The_application_name_is_required": "اسم التطبيق مطلوب",
   "The_channel_name_is_required": "اسم القناة مطلوب",
   "The_emails_are_being_sent": "يتم إرسال رسائل البريد الإلكتروني.",
-  "The_empty_room__roomName__will_be_removed_automatically": "ستتم إزالة الغرفة الفارغة <span style=\"font-weight: bold;\">{{roomName}}</span> will be تلقائيًا.",
+  "The_empty_room__roomName__will_be_removed_automatically": "ستتم إزالة الغرفة الفارغة <bold>{{roomName}}</bold> will be تلقائيًا.",
   "The_image_resize_will_not_work_because_we_can_not_detect_ImageMagick_or_GraphicsMagick_installed_in_your_server": "لن يعمل تغيير حجم الصورة لأننا لا نستطيع اكتشاف تثبيت ImageMagick أو GraphicsMagick على الخادم الخاص بك.",
   "The_message_is_a_discussion_you_will_not_be_able_to_recover": "الرسالة عبارة عن مناقشة أنك لن تتمكن من استعادة الرسائل!",
   "The_mobile_notifications_were_disabled_to_all_users_go_to_Admin_Push_to_enable_the_Push_Gateway_again": "تم تعطيل إشعارات الهاتف المحمول لجميع المستخدمين، انتقل إلى \"المسؤول > منبثق\" لتمكين البوابة المنبثقة مرة أخرى",
@@ -4873,7 +4873,7 @@
   "your_message": "رسالتك",
   "your_message_optional": "رسالتك (اختياري)",
   "__count__empty_rooms_will_be_removed_automatically": "ستتم إزالة {{count}} من الغرف الفارغة تلقائيًا.",
-  "__count__empty_rooms_will_be_removed_automatically__rooms__": "ستتم إزالة {{count}} من الغرف الفارغة تلقائيًا: <br/> {{rooms}}",
+  "__count__empty_rooms_will_be_removed_automatically__rooms__": "ستتم إزالة <bold>{{count}}</bold> من الغرف الفارغة تلقائيًا: <br/> {{rooms}}",
   "__username__is_no_longer__role__defined_by__user_by_": "لم يعد {{username}} في دور {{role}} من قِبل {{user_by}}",
   "__username__was_set__role__by__user_by_": "تم تعيين {{username}} في دور {{role}} من قِبل {{user_by}}"
 }

packages/i18n/src/locales/bn-IN.i18n.json

@@ -8,9 +8,9 @@
   "2_Erros_Information_and_Debug": "2 - ত্রুটি, তথ্য এবং ডিবাগ",
   "@username": "@ব্যবহারকারীর নাম",
   "@username_message": "@ ব্যবহারকারী নাম <message>",
-  "A_new_owner_will_be_assigned_automatically_to__count__rooms": "একজন নতুন মালিককে <span style=\"font-weight: bold;\">{{count}}</span> কক্ষে স্বয়ংক্রিয়ভাবে নিয়োগ দেওয়া হবে।",
-  "A_new_owner_will_be_assigned_automatically_to_the__roomName__room": "একজন নতুন মালিককে <span style=\"font-weight: bold;\">{{roomName}}</span> ঘরে স্বয়ংক্রিয়ভাবে নিয়োগ দেওয়া হবে।",
-  "A_new_owner_will_be_assigned_automatically_to_those__count__rooms__rooms__": "একজন নতুন মালিককে সেই <span style=\"font-weight: bold;\">{{count}}</span> কক্ষে স্বয়ংক্রিয়ভাবে নিয়োগ দেওয়া হবে: <br/>{{rooms}}।",
+  "A_new_owner_will_be_assigned_automatically_to__count__rooms": "একজন নতুন মালিককে <bold>{{count}}</bold> কক্ষে স্বয়ংক্রিয়ভাবে নিয়োগ দেওয়া হবে।",
+  "A_new_owner_will_be_assigned_automatically_to_the__roomName__room": "একজন নতুন মালিককে <bold>{{roomName}}</bold> ঘরে স্বয়ংক্রিয়ভাবে নিয়োগ দেওয়া হবে।",
+  "A_new_owner_will_be_assigned_automatically_to_those__count__rooms__rooms__": "একজন নতুন মালিককে সেই <bold>{{count}}</bold> কক্ষে স্বয়ংক্রিয়ভাবে নিয়োগ দেওয়া হবে: <br/>{{rooms}}।",
   "Accept": "গ্রহণ",
   "Accept_Call": "কল গ্রহণ করুন",
   "Accept_incoming_livechat_requests_even_if_there_are_no_online_agents": "কোনও এজেন্ট online এ না থাকলেও ইনকামিং ওমনিচ্যানেল অনুরোধগুলি গ্রহণ করুন",
@@ -42,5 +42,5 @@
   "access-setting-permissions_description": "সেটিং-ভিত্তিক অনুমতিগুলি সংশোধন করার অনুমতি",
   "add-user": "ব্যবহারকারী যুক্ত করুন",
   "__count__empty_rooms_will_be_removed_automatically": "{{count}} খালি ঘরগুলি স্বয়ংক্রিয়ভাবে সরানো হবে।",
-  "__count__empty_rooms_will_be_removed_automatically__rooms__": "{{count}} খালি ঘরগুলি স্বয়ংক্রিয়ভাবে সরানো হবে: <br/> {{rooms}}।"
+  "__count__empty_rooms_will_be_removed_automatically__rooms__": "<bold>{{count}}</bold> খালি ঘরগুলি স্বয়ংক্রিয়ভাবে সরানো হবে: <br/> {{rooms}}।"
 }

packages/i18n/src/locales/ca.i18n.json

@@ -67,9 +67,9 @@
   "API_User_Limit": "Límit d'usuari per afegir tots els usuaris a Channel",
   "API_Wordpress_URL": "URL de WordPress",
   "APIs": "APIs",
-  "A_new_owner_will_be_assigned_automatically_to__count__rooms": "Un nou propietari serà assignat automàticament a les <span style=\"font-weight: bold;\">{{count}}</span> sales.",
-  "A_new_owner_will_be_assigned_automatically_to_the__roomName__room": "Un nou propietari s'assignarà automàticament a la sala <span style=\"font-weight: bold;\">{{roomName}}</span>.",
-  "A_new_owner_will_be_assigned_automatically_to_those__count__rooms__rooms__": "S'assignarà automàticament un nou propietari a les <span style=\"font-weight: bold;\">{{count}}</span> sales: <br/> {{rooms}}.",
+  "A_new_owner_will_be_assigned_automatically_to__count__rooms": "Un nou propietari serà assignat automàticament a les <bold>{{count}}</bold> sales.",
+  "A_new_owner_will_be_assigned_automatically_to_the__roomName__room": "Un nou propietari s'assignarà automàticament a la sala <bold>{{roomName}}</bold>.",
+  "A_new_owner_will_be_assigned_automatically_to_those__count__rooms__rooms__": "S'assignarà automàticament un nou propietari a les <bold>{{count}}</bold> sales: <br/> {{rooms}}.",
   "Accept": "Accepta",
   "Accept_Call": "Accepta Trucada",
   "Accept_incoming_livechat_requests_even_if_there_are_no_online_agents": "Acceptar sol·licituds entrants de LiveChat encara que no hagi agents en línia",
@@ -3583,7 +3583,7 @@
   "The_application_name_is_required": "El nom de laplicació és obligatori.",
   "The_channel_name_is_required": "Es requereix el nom del canal",
   "The_emails_are_being_sent": "Els missatges de correu-e s'estan enviant.",
-  "The_empty_room__roomName__will_be_removed_automatically": "La sala buida <span style=\"font-weight: bold;\">{{roomName}}</span> s'eliminarà automàticament.",
+  "The_empty_room__roomName__will_be_removed_automatically": "La sala buida <bold>{{roomName}}</bold> s'eliminarà automàticament.",
   "The_image_resize_will_not_work_because_we_can_not_detect_ImageMagick_or_GraphicsMagick_installed_in_your_server": "L'ajust de mida de les imatges no funcionarà perquè no podem detectar ni ImageMagick ni GraphicsMagick al servidor.",
   "The_message_is_a_discussion_you_will_not_be_able_to_recover": "El missatge és una discussió, no podrà recuperar els missatges!",
   "The_mobile_notifications_were_disabled_to_all_users_go_to_Admin_Push_to_enable_the_Push_Gateway_again": "Les notificacions mòbils es deshabilitaron per a tots els usuaris, aneu a \"Admin> Push\" per habilitar Push inici novament",
@@ -4681,7 +4681,7 @@
   "your_message": "El seu missatge",
   "your_message_optional": "el seu missatge (opcional)",
   "__count__empty_rooms_will_be_removed_automatically": "{{count}} sales buides seran eliminades automàticament.",
-  "__count__empty_rooms_will_be_removed_automatically__rooms__": "{{count}} sales buides seran eliminades automàticament: <br/> {{rooms}}.",
+  "__count__empty_rooms_will_be_removed_automatically__rooms__": "<bold>{{count}}</bold> sales buides seran eliminades automàticament: <br/> {{rooms}}.",
   "__username__is_no_longer__role__defined_by__user_by_": "{{username}} ja no és {{role}} (per {{user_by}})",
   "__username__was_set__role__by__user_by_": "Ara {{username}} és {{role}} (per {{user_by}})"
 }