From 484ea100378e9a7796e2eb0540cc5c1b54f78932 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 19 Apr 2025 20:05:49 -0500
Subject: [PATCH] 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       |  2 +-
 web/src/components/overlay/RoleChangeDialog.tsx | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/public/locales/en/views/settings.json b/web/public/locales/en/views/settings.json
index bab58a7a4..774a2d6e8 100644
--- a/web/public/locales/en/views/settings.json
+++ b/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",
diff --git a/web/src/components/overlay/RoleChangeDialog.tsx b/web/src/components/overlay/RoleChangeDialog.tsx
index f17930bea..c63152398 100644
--- a/web/src/components/overlay/RoleChangeDialog.tsx
+++ b/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>