feat(ui): i18n for email event settings

ui/litellm-dashboard/src/components/email_events/email_event_settings.tsx

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { Card, Text, Button } from "@tremor/react";
 import { Typography, Divider, Spin, Checkbox } from "antd";
 import NotificationsManager from "../molecules/notifications_manager";
 import { getEmailEventSettings, updateEmailEventSettings, resetEmailEventSettings } from "../networking";
 import { EmailEvent } from "../../types";
 import { EmailEventSetting } from "./types";
+import { TFunction } from "i18next";
 
 const { Title } = Typography;
 
@@ -13,6 +15,7 @@ interface EmailEventSettingsProps {
 }
 
 const EmailEventSettings: React.FC<EmailEventSettingsProps> = ({ accessToken }) => {
+  const { t } = useTranslation();
   const [loading, setLoading] = useState(true);
   const [eventSettings, setEventSettings] = useState<EmailEventSetting[]>([]);
 
@@ -48,7 +51,7 @@ const EmailEventSettings: React.FC<EmailEventSettingsProps> = ({ accessToken })
 
     try {
       await updateEmailEventSettings(accessToken, { settings: eventSettings });
-      NotificationsManager.success("Email event settings updated successfully");
+      NotificationsManager.success(t("emailEvents.emailEventSettings.saveSuccess"));
     } catch (error) {
       console.error("Failed to update email event settings:", error);
       NotificationsManager.fromBackend(error);
@@ -60,7 +63,7 @@ const EmailEventSettings: React.FC<EmailEventSettingsProps> = ({ accessToken })
 
     try {
       await resetEmailEventSettings(accessToken);
-      NotificationsManager.success("Email event settings reset to defaults");
+      NotificationsManager.success(t("emailEvents.emailEventSettings.resetSuccess"));
       // Refresh settings after reset
       fetchEventSettings();
     } catch (error) {
@@ -70,26 +73,26 @@ const EmailEventSettings: React.FC<EmailEventSettingsProps> = ({ accessToken })
   };
 
   // Helper function to get a description for each event type
-  const getEventDescription = (event: EmailEvent): string => {
+  const getEventDescription = (event: EmailEvent, tFn: TFunction): string => {
     // Convert event name to a sentence with more context
     if (event.includes("Virtual Key Created")) {
-      return "An email will be sent to the user when a new virtual key is created with their user ID";
+      return tFn("emailEvents.emailEventSettings.descVirtualKeyCreated");
     } else if (event.includes("New User Invitation")) {
-      return "An email will be sent to the email address of the user when a new user is created";
+      return tFn("emailEvents.emailEventSettings.descNewUserInvitation");
     } else {
       // Handle any other event type from the API
       const words = event
         .split(/(?=[A-Z])/)
         .join(" ")
         .toLowerCase();
-      return `Receive an email notification when ${words}`;
+      return tFn("emailEvents.emailEventSettings.descGeneric", { words });
     }
   };
 
   return (
     <Card>
-      <Title level={4}>Email Notifications</Title>
-      <Text>Select which events should trigger email notifications.</Text>
+      <Title level={4}>{t("emailEvents.emailEventSettings.title")}</Title>
+      <Text>{t("emailEvents.emailEventSettings.subtitle")}</Text>
       <Divider />
 
       {loading ? (
@@ -106,7 +109,7 @@ const EmailEventSettings: React.FC<EmailEventSettingsProps> = ({ accessToken })
               />
               <div className="ml-3">
                 <Text>{setting.event}</Text>
-                <div className="text-sm text-gray-500 block">{getEventDescription(setting.event)}</div>
+                <div className="text-sm text-gray-500 block">{getEventDescription(setting.event, t)}</div>
               </div>
             </div>
           ))}
@@ -115,10 +118,10 @@ const EmailEventSettings: React.FC<EmailEventSettingsProps> = ({ accessToken })
 
       <div className="mt-6 flex space-x-4">
         <Button onClick={handleSaveSettings} disabled={loading}>
-          Save Changes
+          {t("emailEvents.emailEventSettings.saveChanges")}
         </Button>
         <Button onClick={handleResetSettings} variant="secondary" disabled={loading}>
-          Reset to Defaults
+          {t("emailEvents.emailEventSettings.resetToDefaults")}
         </Button>
       </div>
     </Card>

ui/litellm-dashboard/src/locales/en.json

@@ -8382,5 +8382,18 @@
       "updateSuccess": "Auto router configuration updated successfully",
       "updateFailed": "Failed to update auto router configuration"
     }
+  },
+  "emailEvents": {
+    "emailEventSettings": {
+      "title": "Email Notifications",
+      "subtitle": "Select which events should trigger email notifications.",
+      "saveSuccess": "Email event settings updated successfully",
+      "resetSuccess": "Email event settings reset to defaults",
+      "saveChanges": "Save Changes",
+      "resetToDefaults": "Reset to Defaults",
+      "descVirtualKeyCreated": "An email will be sent to the user when a new virtual key is created with their user ID",
+      "descNewUserInvitation": "An email will be sent to the email address of the user when a new user is created",
+      "descGeneric": "Receive an email notification when {{words}}"
+    }
   }
 }

ui/litellm-dashboard/src/locales/zh-CN.json

@@ -8382,5 +8382,18 @@
       "updateSuccess": "自动路由器配置更新成功",
       "updateFailed": "更新自动路由器配置失败"
     }
+  },
+  "emailEvents": {
+    "emailEventSettings": {
+      "title": "邮件通知",
+      "subtitle": "选择哪些事件应触发邮件通知。",
+      "saveSuccess": "邮件事件设置已成功更新",
+      "resetSuccess": "邮件事件设置已重置为默认值",
+      "saveChanges": "保存更改",
+      "resetToDefaults": "重置为默认值",
+      "descVirtualKeyCreated": "当使用用户 ID 创建新虚拟密钥时，将向该用户发送一封邮件",
+      "descNewUserInvitation": "当新用户创建时，将向该用户的邮件地址发送一封邮件",
+      "descGeneric": "当 {{words}} 时接收邮件通知"
+    }
   }
 }