move username to i18n key (#17818)

Some languages structure phrases and sentences differently, so the username can't always be assumed to be the last item in the phrase. This change uses the Trans component to maintain the HTML formatting.

web/public/locales/en/views/settings.json

@@ -483,7 +483,7 @@
       },
       "changeRole": {
         "title": "Change User Role",
-        "desc": "Update permissions for",
+        "desc": "Update permissions for <strong>{{username}}</strong>",
         "roleInfo": {
           "intro": "Select the appropriate role for this user:",
           "admin": "Admin",

web/src/components/overlay/RoleChangeDialog.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { Button } from "../ui/button";
 import {
   Dialog,
@@ -46,8 +46,14 @@ export default function RoleChangeDialog({
             {t("users.dialog.changeRole.title")}
           </DialogTitle>
           <DialogDescription>
-            {t("users.dialog.changeRole.desc")}
-            <span className="font-medium"> {username}</span>
+            <Trans
+              i18nKey="users.dialog.changeRole.desc"
+              ns="views/settings"
+              values={{ username }}
+              components={{
+                strong: <span className="font-medium" />,
+              }}
+            />
           </DialogDescription>
         </DialogHeader>