Wrap intl in span identifying translation

frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx

@@ -5,7 +5,7 @@ import Alert from "react-bootstrap/Alert";
 import { deleteProxyHost, toggleProxyHost } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useProxyHosts } from "src/hooks";
-import { intl } from "src/locale";
+import { intl, T } from "src/locale";
 import { DeleteConfirmModal, ProxyHostModal } from "src/modals";
 import { showSuccess } from "src/notifications";
 import Table from "./Table";
@@ -41,6 +41,7 @@ export default function TableWrapper() {
 	if (search && data) {
 		filtered = data?.filter((_item) => {
 			return true;
+			// TODO
 			// item.domainNames.some((domain: string) => domain.toLowerCase().includes(search)) ||
 			// item.forwardDomainName.toLowerCase().includes(search)
 			// );
@@ -57,7 +58,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: "proxy-hosts.title" })}</h2>
+							<h2 className="mt-1 mb-0">
+								<T id="proxy-hosts.title" />
+							</h2>
 						</div>
 						{data?.length ? (
 							<div className="col-md-auto col-sm-12">
@@ -74,7 +77,7 @@ export default function TableWrapper() {
 										/>
 									</div>
 									<Button size="sm" className="btn-lime">
-										{intl.formatMessage({ id: "proxy-hosts.add" })}
+										<T id="proxy-hosts.add" />
 									</Button>
 								</div>
 							</div>
@@ -93,12 +96,12 @@ export default function TableWrapper() {
 				{editId ? <ProxyHostModal id={editId} onClose={() => setEditId(0)} /> : null}
 				{deleteId ? (
 					<DeleteConfirmModal
-						title={intl.formatMessage({ id: "proxy-host.delete.title" })}
+						title="proxy-host.delete.title"
 						onConfirm={handleDelete}
 						onClose={() => setDeleteId(0)}
 						invalidations={[["proxy-hosts"], ["proxy-host", deleteId]]}
 					>
-						{intl.formatMessage({ id: "proxy-host.delete.content" })}
+						<T id="proxy-host.delete.content" />
 					</DeleteConfirmModal>
 				) : null}
 			</div>