refactor(i18n): adopt named interpolation and react-i18next's useTranslation

apps/meteor/client/components/UrlChangeModal.tsx

@@ -20,20 +20,16 @@ const UrlChangeModal = ({ onConfirm, siteUrl, currentUrl, onClose }: UrlChangeMo
 				dangerouslySetInnerHTML={{
 					__html: DOMPurify.sanitize(
 						t('The_setting_s_is_configured_to_s_and_you_are_accessing_from_s', {
-							postProcess: 'sprintf',
-							sprintf: [t('Site_Url'), siteUrl, currentUrl],
+							settingName: t('Site_Url'),
+							configuredUrl: siteUrl,
+							currentUrl,
 						}),
 					),
 				}}
 			/>
 			<p
 				dangerouslySetInnerHTML={{
-					__html: DOMPurify.sanitize(
-						t('Do_you_want_to_change_to_s_question', {
-							postProcess: 'sprintf',
-							sprintf: [currentUrl],
-						}),
-					),
+					__html: DOMPurify.sanitize(t('Do_you_want_to_change_to_s_question', { currentUrl })),
 				}}
 			/>
 		</GenericModal>

apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateChannelModal.tsx

@@ -147,7 +147,7 @@ const CreateChannelModal = ({ teamId = '', mainRoom, onClose, reload }: CreateCh
 
 		const { exists } = await channelNameExists({ roomName: name });
 		if (exists) {
-			return t('Channel_already_exist', name);
+			return t('Channel_already_exist', { channelName: name });
 		}
 	};
 

apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx

@@ -104,7 +104,7 @@ const EditStatusModal = ({ onClose }: EditStatusModalProps) => {
 							rules={{
 								maxLength: {
 									value: USER_STATUS_TEXT_MAX_LENGTH,
-									message: t('Max_length_is', USER_STATUS_TEXT_MAX_LENGTH),
+									message: t('Max_length_is', { limit: USER_STATUS_TEXT_MAX_LENGTH }),
 								},
 							}}
 							render={({ field }) => (

apps/meteor/client/views/account/profile/AccountProfileForm.tsx

@@ -254,7 +254,7 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>) => {
 							rules={{
 								maxLength: {
 									value: USER_STATUS_TEXT_MAX_LENGTH,
-									message: t('Max_length_is', USER_STATUS_TEXT_MAX_LENGTH),
+									message: t('Max_length_is', { limit: USER_STATUS_TEXT_MAX_LENGTH }),
 								},
 							}}
 							render={({ field }) => (
@@ -356,7 +356,7 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>) => {
 							control={control}
 							name='bio'
 							rules={{
-								maxLength: { value: BIO_TEXT_MAX_LENGTH, message: t('Max_length_is', BIO_TEXT_MAX_LENGTH) },
+								maxLength: { value: BIO_TEXT_MAX_LENGTH, message: t('Max_length_is', { limit: BIO_TEXT_MAX_LENGTH }) },
 							}}
 							render={({ field }) => (
 								<TextAreaInput

apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsOverview.tsx

@@ -120,7 +120,7 @@ const ChannelsOverview = () => {
 					itemsPerPage={itemsPerPage}
 					itemsPerPageLabel={(): string => t('Items_per_page:')}
 					showingResultsLabel={({ count, current, itemsPerPage }): string =>
-						t('Showing_results_of', { postProcess: 'sprintf', sprintf: [current + 1, Math.min(current + itemsPerPage, count), count] })
+						t('Showing_results_of', { from: current + 1, to: Math.min(current + itemsPerPage, count), total: count })
 					}
 					count={data?.total || 0}
 					onSetItemsPerPage={setItemsPerPage}

apps/meteor/client/views/admin/import/PrepareChannels.tsx

@@ -18,7 +18,7 @@ const PrepareChannels = ({ channels, channelsCount, setChannels }: PrepareChanne
 	const [itemsPerPage, setItemsPerPage] = useState<25 | 50 | 100>(25);
 	const showingResultsLabel = useCallback(
 		({ count, current, itemsPerPage }: { count: number; current: number; itemsPerPage: 25 | 50 | 100 }) =>
-			t('Showing_results_of', { postProcess: 'sprintf', sprintf: [current + 1, Math.min(current + itemsPerPage, count), count] }),
+			t('Showing_results_of', { from: current + 1, to: Math.min(current + itemsPerPage, count), total: count }),
 		[t],
 	);
 	const itemsPerPageLabel = useCallback(() => t('Items_per_page:'), [t]);

apps/meteor/client/views/admin/import/PrepareUsers.tsx

@@ -18,7 +18,7 @@ const PrepareUsers = ({ usersCount, users, setUsers }: PrepareUsersProps) => {
 	const [itemsPerPage, setItemsPerPage] = useState<25 | 50 | 100>(25);
 	const showingResultsLabel = useCallback(
 		({ count, current, itemsPerPage }: { count: number; current: number; itemsPerPage: 25 | 50 | 100 }) =>
-			t('Showing_results_of', { postProcess: 'sprintf', sprintf: [current + 1, Math.min(current + itemsPerPage, count), count] }),
+			t('Showing_results_of', { from: current + 1, to: Math.min(current + itemsPerPage, count), total: count }),
 		[t],
 	);
 	const itemsPerPageLabel = useCallback(() => t('Items_per_page:'), [t]);

apps/meteor/client/views/admin/permissions/UsersInRole/hooks/useRemoveUserFromRole.tsx

@@ -43,7 +43,7 @@ export const useRemoveUserFromRole = ({
 
 		setModal(
 			<GenericModal variant='danger' onConfirm={remove} onCancel={() => setModal(null)} confirmText={t('Delete')}>
-				{t('The_user_s_will_be_removed_from_role_s', { postProcess: 'sprintf', sprintf: [username, roleDescription || roleName] })}
+				{t('The_user_s_will_be_removed_from_role_s', { username, role: roleDescription || roleName })}
 			</GenericModal>,
 		);
 	});

apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/OAuthGroupPage.tsx

@@ -118,7 +118,7 @@ function OAuthGroupPage({ _id, onClickBack, ...group }: OAuthGroupPageProps) {
 							help={
 								<span
 									dangerouslySetInnerHTML={{
-										__html: DOMPurify.sanitize(t('Custom_oauth_helper', callbackURL(sectionName))),
+										__html: DOMPurify.sanitize(t('Custom_oauth_helper', { url: callbackURL(sectionName) })),
 									}}
 								/>
 							}

apps/meteor/client/views/admin/users/AdminUserForm.tsx

@@ -480,7 +480,9 @@ const AdminUserForm = ({ userData, onReload, context, refetchUserFormData, roleD
 							<Controller
 								control={control}
 								name='statusText'
-								rules={{ maxLength: { value: USER_STATUS_TEXT_MAX_LENGTH, message: t('Max_length_is', USER_STATUS_TEXT_MAX_LENGTH) } }}
+								rules={{
+									maxLength: { value: USER_STATUS_TEXT_MAX_LENGTH, message: t('Max_length_is', { limit: USER_STATUS_TEXT_MAX_LENGTH }) },
+								}}
 								render={({ field }) => (
 									<TextInput
 										{...field}
@@ -505,7 +507,7 @@ const AdminUserForm = ({ userData, onReload, context, refetchUserFormData, roleD
 							<Controller
 								control={control}
 								name='bio'
-								rules={{ maxLength: { value: BIO_TEXT_MAX_LENGTH, message: t('Max_length_is', BIO_TEXT_MAX_LENGTH) } }}
+								rules={{ maxLength: { value: BIO_TEXT_MAX_LENGTH, message: t('Max_length_is', { limit: BIO_TEXT_MAX_LENGTH }) } }}
 								render={({ field }) => (
 									<TextAreaInput
 										{...field}

apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx

@@ -174,10 +174,7 @@ const UsersTable = ({
 			{isSuccess && users.length === 0 && (
 				<GenericNoResults
 					icon='user'
-					title={t('Users_Table_Generic_No_users', {
-						postProcess: 'sprintf',
-						sprintf: [tab !== 'all' ? t(tab as TranslationKey) : ''],
-					})}
+					title={t('Users_Table_Generic_No_users', { status: tab !== 'all' ? t(tab as TranslationKey) : '' })}
 					description={t(`Users_Table_no_${tab}_users_description`)}
 				/>
 			)}

apps/meteor/client/views/room/contextualBar/ExportMessages/ExportMessages.tsx

@@ -63,10 +63,7 @@ const ExportMessages = () => {
 			toUsers: [],
 			additionalEmails: '',
 			messagesCount: 0,
-			subject: t('Mail_Messages_Subject', {
-				postProcess: 'sprintf',
-				sprintf: [roomName],
-			}),
+			subject: t('Mail_Messages_Subject', { roomName }),
 			format: isE2ERoom ? 'json' : 'html',
 		},
 	});
@@ -323,7 +320,7 @@ const ExportMessages = () => {
 															return undefined;
 														}
 
-														return t('Mail_Message_Invalid_emails', { postProcess: 'sprintf', sprintf: [additionalEmails] });
+														return t('Mail_Message_Invalid_emails', { emails: additionalEmails });
 													},
 													validateRecipient: (additionalEmails) => {
 														if (additionalEmails !== '' || toUsers?.length > 0) {

apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessagesWithData.tsx

@@ -123,19 +123,16 @@ const PruneMessagesWithData = () => {
 	const callOutText = useMemo(() => {
 		const name = room && ((isDirectMessageRoom(room) && room.usernames?.join(' x ')) || room.fname || room.name);
 		const exceptPinned = pinned ? ` ${t('except_pinned')}` : '';
-		const ifFrom = users.length
-			? ` ${t('if_they_are_from', {
-					postProcess: 'sprintf',
-					sprintf: [users.map((element) => element).join(', ')],
-				})}`
-			: '';
+		const ifFrom = users.length ? ` ${t('if_they_are_from', { users: users.map((element) => element).join(', ') })}` : '';
 		const filesOrMessages = attached ? t('files') : t('messages');
 
 		if (newerDate && olderDate) {
 			return (
 				t('Prune_Warning_between', {
-					postProcess: 'sprintf',
-					sprintf: [filesOrMessages, name, formatDate(fromDate, 'L LT'), formatDate(toDate, 'L LT')],
+					items: filesOrMessages,
+					roomName: name,
+					fromDate: formatDate(fromDate, 'L LT'),
+					toDate: formatDate(toDate, 'L LT'),
 				}) +
 				exceptPinned +
 				ifFrom
@@ -144,34 +141,17 @@ const PruneMessagesWithData = () => {
 
 		if (newerDate) {
 			return (
-				t('Prune_Warning_after', {
-					postProcess: 'sprintf',
-					sprintf: [filesOrMessages, name, formatDate(fromDate, 'L LT')],
-				}) +
-				exceptPinned +
-				ifFrom
+				t('Prune_Warning_after', { items: filesOrMessages, roomName: name, fromDate: formatDate(fromDate, 'L LT') }) + exceptPinned + ifFrom
 			);
 		}
 
 		if (olderDate) {
 			return (
-				t('Prune_Warning_before', {
-					postProcess: 'sprintf',
-					sprintf: [filesOrMessages, name, formatDate(toDate, 'L LT')],
-				}) +
-				exceptPinned +
-				ifFrom
+				t('Prune_Warning_before', { items: filesOrMessages, roomName: name, toDate: formatDate(toDate, 'L LT') }) + exceptPinned + ifFrom
 			);
 		}
 
-		return (
-			t('Prune_Warning_all', {
-				postProcess: 'sprintf',
-				sprintf: [filesOrMessages, name],
-			}) +
-			exceptPinned +
-			ifFrom
-		);
+		return t('Prune_Warning_all', { items: filesOrMessages, roomName: name }) + exceptPinned + ifFrom;
 	}, [attached, fromDate, newerDate, olderDate, pinned, room, t, toDate, users]);
 
 	const validateText = useMemo(() => {

apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx

@@ -94,7 +94,7 @@ export const useMuteUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: IR
 
 			return setModal(
 				<GenericModal variant='danger' confirmText={t('Yes_mute_user')} onClose={closeModal} onCancel={closeModal} onConfirm={onConfirm}>
-					{t('The_user_wont_be_able_to_type_in_s', roomName)}
+					{t('The_user_wont_be_able_to_type_in_s', { roomName })}
 				</GenericModal>,
 			);
 		};

apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx

@@ -71,7 +71,7 @@ export const useRemoveUserAction = (
 	const removeFromRoomEndpoint = room.t === 'p' ? '/v1/groups.kick' : '/v1/channels.kick';
 	const { mutateAsync: removeFromRoom } = useEndpointMutation('POST', removeFromRoomEndpoint, {
 		onSuccess: () => {
-			dispatchToastMessage({ type: 'success', message: t('User_has_been_removed_from_s', roomName) });
+			dispatchToastMessage({ type: 'success', message: t('User_has_been_removed_from_s', { roomName }) });
 			queryClient.invalidateQueries({ queryKey: roomsQueryKeys.members(room._id, room.t) });
 		},
 		onSettled: () => {
@@ -110,7 +110,7 @@ export const useRemoveUserAction = (
 				onCancel={closeModal}
 				onConfirm={(): Promise<void> => handleRemoveFromRoom(rid, uid)}
 			>
-				{t('The_user_will_be_removed_from_s', roomName)}
+				{t('The_user_will_be_removed_from_s', { roomName })}
 			</GenericModal>,
 		);
 	});

apps/meteor/server/slashcommands/create/server.ts

@@ -41,8 +41,7 @@ slashCommands.add({
 		if (room != null) {
 			void api.broadcast('notify.ephemeralMessage', userId, message.rid, {
 				msg: i18n.t('Channel_already_exist', {
-					postProcess: 'sprintf',
-					sprintf: [channelStr],
+					channelName: channelStr,
 					lng: settings.get('Language') || 'en',
 				}),
 			});

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

@@ -1,5 +1,5 @@
 import { getUserDisplayName, VideoConferenceStatus } from '@rocket.chat/core-typings';
-import { useSetting, useTranslation, useUserId, useUserPreference } from '@rocket.chat/ui-contexts';
+import { useSetting, useUserId, useUserPreference } from '@rocket.chat/ui-contexts';
 import type * as UiKit from '@rocket.chat/ui-kit';
 import {
 	VideoConfMessageSkeleton,
@@ -17,6 +17,7 @@ import {
 } from '@rocket.chat/ui-video-conf';
 import type { MouseEventHandler } from 'react';
 import { useContext, memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { UiKitContext } from '../..';
 import { useGoToRoom } from './hooks/useGoToRoom';
@@ -29,7 +30,7 @@ export type VideoConferenceBlockProps = BlockProps<UiKit.VideoConferenceBlock>;
 const MAX_USERS = 3;
 
 const VideoConferenceBlock = ({ block }: VideoConferenceBlockProps) => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const { callId, appId = 'videoconf-core' } = block;
 	const surfaceType = useSurfaceType();
 	const userId = useUserId();

packages/i18n/src/locales/af.i18n.json

@@ -395,7 +395,7 @@
   "Channel_Name_Placeholder": "Voer asseblief die naam van die kanaal in ...",
   "Channel_Unarchived": "Kanaal met naam `#%s` is suksesvol gearchiveer",
   "Channel_already_Unarchived": "Kanaal met naam `#%s` is reeds in Ongeparkeerde state",
-  "Channel_already_exist": "Die kanaal `#%s` bestaan ​​reeds.",
+  "Channel_already_exist": "Die kanaal `#{{channelName}}` bestaan ​​reeds.",
   "Channel_already_exist_static": "Die kanaal bestaan ​​reeds.",
   "Channel_created": "Kanaal `#%s` geskep.",
   "Channel_doesnt_exist": "Die kanaal `#%s` bestaan ​​nie.",
@@ -730,7 +730,7 @@
   "Custom_Translations": "Aangepaste vertalings",
   "Custom_Translations_Description": "Moet 'n geldige JSON wees waar sleutels tale bevat wat 'n woordeboek van sleutel en vertalings bevat. Voorbeeld: `{\"en\": {\"Channels\": \"Rooms\"},\"pt\": {\"Channels\": \"Salas\"}}`",
   "Custom_agent": "Aangepaste agent",
-  "Custom_oauth_helper": "Wanneer u u OAuth-verskaffer opstel, moet u 'n terugbel-URL in kennis stel. Gebruik <pre>%s</pre>.",
+  "Custom_oauth_helper": "Wanneer u u OAuth-verskaffer opstel, moet u 'n terugbel-URL in kennis stel. Gebruik <pre>{{url}}</pre>.",
   "Customize": "pas",
   "DB_Migration": "Databasis Migrasie",
   "DB_Migration_Date": "Databasis Migrasiedatum",
@@ -796,7 +796,7 @@
   "Displays_action_text": "Wys aksie teks",
   "Do_not_display_unread_counter": "Moenie enige toonbank van hierdie kanaal vertoon nie",
   "Do_you_want_to_accept": "Wil jy aanvaar?",
-  "Do_you_want_to_change_to_s_question": "Wil jy verander na <strong>%s</strong>?",
+  "Do_you_want_to_change_to_s_question": "Wil jy verander na <strong>{{currentUrl}}</strong>?",
   "Document_Domain": "Dokument Domein",
   "Domain": "domein",
   "Domain_added": "domein bygevoeg",
@@ -1353,12 +1353,12 @@
   "Logistics": "Logistics",
   "Logout": "Teken uit",
   "Logout_Others": "Logout Uit Ander Logged In Locations",
-  "Mail_Message_Invalid_emails": "Jy het een of meer ongeldige e-posse verskaf:%s",
+  "Mail_Message_Invalid_emails": "Jy het een of meer ongeldige e-posse verskaf: {{emails}}",
   "Mail_Message_Missing_to": "U moet een of meer gebruikers kies of een of meer e-posadresse verskaf, geskei deur kommas.",
   "Mail_Message_No_messages_selected_select_all": "Jy het geen boodskappe gekies nie",
   "Mail_Messages": "Pos boodskappe",
   "Mail_Messages_Instructions": "Kies watter boodskappe u per e-pos wil stuur deur op die boodskappe te klik",
-  "Mail_Messages_Subject": "Hier is 'n geselekteerde gedeelte van%s boodskappe",
+  "Mail_Messages_Subject": "Hier is 'n geselekteerde gedeelte van {{roomName}} boodskappe",
   "Mailer": "Mailer",
   "Mailer_body_tags": "Jy <b>moet</b> gebruik vir die intekeningskripsie.<br/>Jy mag `[name]`, `[fname]`, `[lname]` vir die volle naam, voornaam of van die gebruiker gebruik.<br/>Jy mag [e-pos] gebruik vir die gebruiker se e-pos.",
   "Mailing": "Mailing",
@@ -1386,7 +1386,7 @@
   "Markdown_Parser": "Markdown Parser",
   "Markdown_SupportSchemesForLink": "Markdown Support Schemes for Link",
   "Markdown_SupportSchemesForLink_Description": "Komma-geskeide lys van toegelate skemas",
-  "Max_length_is": "Maksimum lengte is%s",
+  "Max_length_is": "Maksimum lengte is {{limit}}",
   "Media": "media",
   "Medium": "medium",
   "Members_List": "Lede Lys",
@@ -1470,7 +1470,7 @@
   "Meta_language": "Taal",
   "Meta_msvalidate01": "MSValidate.01",
   "Meta_robots": "robots",
-  "Min_length_is": "Min lengte is%s",
+  "Min_length_is": "Min lengte is {{limit}}",
   "Minimum_balance": "Minimum balans",
   "Mobex_sms_gateway_from_number": "Van",
   "Mobex_sms_gateway_password": "wagwoord",
@@ -1683,10 +1683,10 @@
   "Prune": "snoei",
   "Prune_Messages": "Prune Messages",
   "Prune_Modal": "Is jy seker jy wil hierdie boodskappe snoei? Gesnoeide boodskappe kan nie herwin word nie.",
-  "Prune_Warning_after": "Dit sal alle %s in %s verwyder na %s.",
-  "Prune_Warning_all": "Dit sal alle %s in %s uitvee!",
-  "Prune_Warning_before": "Dit sal alle %s in %s verwyder voor %s.",
-  "Prune_Warning_between": "Dit sal alle %s in %s tussen %s en %s uitvee.",
+  "Prune_Warning_after": "Dit sal alle {{items}} in {{roomName}} verwyder na {{fromDate}}.",
+  "Prune_Warning_all": "Dit sal alle {{items}} in {{roomName}} uitvee!",
+  "Prune_Warning_before": "Dit sal alle {{items}} in {{roomName}} verwyder voor {{toDate}}.",
+  "Prune_Warning_between": "Dit sal alle {{items}} in {{roomName}} tussen {{fromDate}} en {{toDate}} uitvee.",
   "Prune_finished": "Prune is klaar",
   "Pruning_files": "Snoei tans lêers ...",
   "Pruning_messages": "Snoei boodskappe ...",
@@ -2072,9 +2072,9 @@
   "The_image_resize_will_not_work_because_we_can_not_detect_ImageMagick_or_GraphicsMagick_installed_in_your_server": "Die grootte van die prentjie sal nie werk nie omdat ons ImageMagick of GraphicsMagick nie op u bediener geïnstalleer het nie.",
   "The_redirectUri_is_required": "Die redirectUri is nodig",
   "The_server_will_restart_in_s_seconds": "Die bediener sal herbegin in%s sekondes",
-  "The_setting_s_is_configured_to_s_and_you_are_accessing_from_s": "Die instelling <strong>%s</strong> is ingestel op <strong>%s</strong> en jy kry toegang vanaf <strong>%s</strong>!",
-  "The_user_will_be_removed_from_s": "Die gebruiker sal van%s verwyder word",
-  "The_user_wont_be_able_to_type_in_s": "Die gebruiker sal nie in%s kan tik nie",
+  "The_setting_s_is_configured_to_s_and_you_are_accessing_from_s": "Die instelling <strong>{{settingName}}</strong> is ingestel op <strong>{{configuredUrl}}</strong> en jy kry toegang vanaf <strong>{{currentUrl}}</strong>!",
+  "The_user_will_be_removed_from_s": "Die gebruiker sal van {{roomName}} verwyder word",
+  "The_user_wont_be_able_to_type_in_s": "Die gebruiker sal nie in {{roomName}} kan tik nie",
   "Theme": "tema",
   "There_are_no_agents_added_to_this_department_yet": "Daar is nog geen agente by hierdie departement gevoeg nie.",
   "There_are_no_applications": "Geen oAuth-aansoeke is nog bygevoeg nie.",
@@ -2214,7 +2214,7 @@
   "User_has_been_deleted": "Gebruiker is verwyder",
   "User_has_been_ignored": "Gebruiker is geïgnoreer",
   "User_has_been_muted_in_s": "Gebruiker is gedemp in%s",
-  "User_has_been_removed_from_s": "Gebruiker is verwyder van%s",
+  "User_has_been_removed_from_s": "Gebruiker is verwyder van {{roomName}}",
   "User_has_been_unignored": "Gebruiker word nie meer geïgnoreer nie",
   "User_is_blocked": "Gebruiker is geblokkeer",
   "User_is_no_longer_an_admin": "Gebruiker is nie meer 'n admin nie",
@@ -2529,7 +2529,7 @@
   "force-delete-message_description": "Toestemming om 'n boodskap te verwyder wat alle beperkings ignoreer",
   "github_no_public_email": "Jy het geen e-pos as publieke e-pos in jou GitHub-rekening nie",
   "hours": "ure",
-  "if_they_are_from": "(as hulle van %s is)",
+  "if_they_are_from": "(as hulle van {{users}} is)",
   "importer_status_import_failed": "fout",
   "initials_avatar": "Voorletters Avatar",
   "inline_code": "inlyn kode",