From 76f1170b800a1e19a9b2adcb233346fa2c1ce12c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 16 Apr 2025 21:29:11 -0500
Subject: [PATCH] fix i18n in role change dialog

---
 web/public/locales/en/views/settings.json     | 10 ++++++--
 .../components/overlay/RoleChangeDialog.tsx   | 23 +++++++++++++++----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/web/public/locales/en/views/settings.json b/web/public/locales/en/views/settings.json
index 9f9ced4d8d..9a92b396cc 100644
--- a/web/public/locales/en/views/settings.json
+++ b/web/public/locales/en/views/settings.json
@@ -483,8 +483,14 @@
       },
       "changeRole": {
         "title": "Change User Role",
-        "desc": "Update permissions for <span className=\"font-medium\">{{username}}</span>",
-        "roleInfo": "<p>Select the appropriate role for this user:</p><ul className=\"mt-2 space-y-1 pl-5\"><li> • <span className=\"font-medium\">Admin:</span> Full access to all features. </li><li> • <span className=\"font-medium\">Viewer:</span> Limited to Live dashboards, Review, Explore, and Exports only.</li></ul>"
+        "desc": "Update permissions for",
+        "roleInfo": {
+          "intro": "Select the appropriate role for this user:",
+          "admin": "Admin",
+          "adminDesc": "Full access to all features.",
+          "viewer": "Viewer",
+          "viewerDesc": "Limited to Live dashboards, Review, Explore, and Exports only."
+        }
       }
     }
   },
diff --git a/web/src/components/overlay/RoleChangeDialog.tsx b/web/src/components/overlay/RoleChangeDialog.tsx
index a242ffba33..f17930bead 100644
--- a/web/src/components/overlay/RoleChangeDialog.tsx
+++ b/web/src/components/overlay/RoleChangeDialog.tsx
@@ -1,4 +1,4 @@
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { Button } from "../ui/button";
 import {
   Dialog,
@@ -46,13 +46,28 @@ export default function RoleChangeDialog({
             {t("users.dialog.changeRole.title")}
           </DialogTitle>
           <DialogDescription>
-            {t("users.dialog.changeRole.desc", { username })}
+            {t("users.dialog.changeRole.desc")}
+            <span className="font-medium"> {username}</span>
           </DialogDescription>
         </DialogHeader>
 
-        <div className="py-6">
+        <div className="py-3">
           <div className="mb-4 text-sm text-muted-foreground">
-            <Trans ns="views/settings">users.dialog.changeRole.roleInfo</Trans>
+            <p>{t("users.dialog.changeRole.roleInfo.intro")}</p>
+            <ul className="mt-2 list-disc space-y-1 pl-5">
+              <li>
+                <span className="font-medium">
+                  {t("users.dialog.changeRole.roleInfo.admin")}
+                </span>
+                : {t("users.dialog.changeRole.roleInfo.adminDesc")}
+              </li>
+              <li>
+                <span className="font-medium">
+                  {t("users.dialog.changeRole.roleInfo.viewer")}
+                </span>
+                : {t("users.dialog.changeRole.roleInfo.viewerDesc")}
+              </li>
+            </ul>
           </div>
 
           <Select