From b803e73023cd4008d046a667125aacb6ed8cfc90 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 19 Apr 2025 19:17:15 -0500
Subject: [PATCH] move username to i18n key

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 bab58a7a4c..774a2d6e8d 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 f17930bead..c631523980 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>