Wrap intl in span identifying translation

frontend/src/pages/Users/Empty.tsx

@@ -1,6 +1,6 @@
 import type { Table as ReactTable } from "@tanstack/react-table";
 import { Button } from "src/components";
-import { intl } from "src/locale";
+import { T } from "src/locale";
 
 interface Props {
 	tableInstance: ReactTable<any>;
@@ -13,13 +13,19 @@ export default function Empty({ tableInstance, onNewUser, isFiltered }: Props) {
 			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
 				<div className="text-center my-4">
 					{isFiltered ? (
-						<h2>{intl.formatMessage({ id: "empty-search" })}</h2>
+						<h2>
+							<T id="empty-search" />
+						</h2>
 					) : (
 						<>
-							<h2>{intl.formatMessage({ id: "users.empty" })}</h2>
-							<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
+							<h2>
+								<T id="users.empty" />
+							</h2>
+							<p className="text-muted">
+								<T id="empty-subtitle" />
+							</p>
 							<Button className="btn-orange my-3" onClick={onNewUser}>
-								{intl.formatMessage({ id: "users.add" })}
+								<T id="users.add" />
 							</Button>
 						</>
 					)}

frontend/src/pages/Users/Table.tsx

@@ -10,7 +10,7 @@ import {
 	ValueWithDateFormatter,
 } from "src/components";
 import { TableLayout } from "src/components/Table/TableLayout";
-import { intl } from "src/locale";
+import { intl, T } from "src/locale";
 import Empty from "./Empty";
 
 interface Props {
@@ -101,12 +101,7 @@ export default function Table({
 							</button>
 							<div className="dropdown-menu dropdown-menu-end">
 								<span className="dropdown-header">
-									{intl.formatMessage(
-										{
-											id: "users.actions-title",
-										},
-										{ id: info.row.original.id },
-									)}
+									<T id="users.actions-title" data={{ id: info.row.original.id }} />
 								</span>
 								<a
 									className="dropdown-item"
@@ -117,7 +112,7 @@ export default function Table({
 									}}
 								>
 									<IconEdit size={16} />
-									{intl.formatMessage({ id: "user.edit" })}
+									<T id="users.edit" />
 								</a>
 								{currentUserId !== info.row.original.id ? (
 									<>
@@ -130,7 +125,7 @@ export default function Table({
 											}}
 										>
 											<IconShield size={16} />
-											{intl.formatMessage({ id: "action.permissions" })}
+											<T id="action.permissions" />
 										</a>
 										<a
 											className="dropdown-item"
@@ -141,7 +136,7 @@ export default function Table({
 											}}
 										>
 											<IconLock size={16} />
-											{intl.formatMessage({ id: "user.set-password" })}
+											<T id="user.set-password" />
 										</a>
 										<a
 											className="dropdown-item"
@@ -152,9 +147,7 @@ export default function Table({
 											}}
 										>
 											<IconPower size={16} />
-											{intl.formatMessage({
-												id: info.row.original.isDisabled ? "action.enable" : "action.disable",
-											})}
+											<T id={info.row.original.isDisabled ? "action.enable" : "action.disable"} />
 										</a>
 										<div className="dropdown-divider" />
 										<a
@@ -166,7 +159,7 @@ export default function Table({
 											}}
 										>
 											<IconTrash size={16} />
-											{intl.formatMessage({ id: "action.delete" })}
+											<T id="action.delete" />
 										</a>
 									</>
 								) : null}

frontend/src/pages/Users/TableWrapper.tsx

@@ -5,7 +5,7 @@ import Alert from "react-bootstrap/Alert";
 import { deleteUser, toggleUser } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useUser, useUsers } from "src/hooks";
-import { intl } from "src/locale";
+import { intl, T } from "src/locale";
 import { DeleteConfirmModal, PermissionsModal, SetPasswordModal, UserModal } from "src/modals";
 import { showSuccess } from "src/notifications";
 import Table from "./Table";
@@ -61,7 +61,9 @@ export default function TableWrapper() {
 				<div className="card-header">
 					<div className="row w-full">
 						<div className="col">
-							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "users.title" })}</h2>
+							<h2 className="mt-1 mb-0">
+								<T id="users.title" />
+							</h2>
 						</div>
 						{data?.length ? (
 							<div className="col-md-auto col-sm-12">
@@ -80,7 +82,7 @@ export default function TableWrapper() {
 									</div>
 
 									<Button size="sm" className="btn-orange" onClick={() => setEditUserId("new")}>
-										{intl.formatMessage({ id: "users.add" })}
+										<T id="users.add" />
 									</Button>
 								</div>
 							</div>
@@ -105,12 +107,12 @@ export default function TableWrapper() {
 				) : null}
 				{deleteUserId ? (
 					<DeleteConfirmModal
-						title={intl.formatMessage({ id: "user.delete.title" })}
+						title="user.delete.title"
 						onConfirm={handleDelete}
 						onClose={() => setDeleteUserId(0)}
 						invalidations={[["users"], ["user", deleteUserId]]}
 					>
-						{intl.formatMessage({ id: "user.delete.content" })}
+						<T id="user.delete.content" />
 					</DeleteConfirmModal>
 				) : null}
 				{editUserPasswordId ? (