diff --git a/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx b/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx index 866d7cbec7f..16f10d59cc3 100644 --- a/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx +++ b/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx @@ -1,4 +1,5 @@ -import { useState, useCallback } from "react"; +import { useState, useCallback, useMemo } from "react"; +import { useTranslation } from "react-i18next"; import { Modal, Form, Button, Select, Tooltip } from "antd"; import { UserAddOutlined } from "@ant-design/icons"; import debounce from "lodash/debounce"; @@ -43,19 +44,32 @@ const UserSearchModal: React.FC = ({ onCancel, onSubmit, accessToken, - title = "Add Team Member", - roles = [ - { - label: "admin", - value: "admin", - description: "Admin role. Can create team keys, add members, and manage settings.", - }, - { label: "user", value: "user", description: "User role. Can view team info, but not manage it." }, - ], + title, + roles, defaultRole = "user", teamId, }) => { + const { t } = useTranslation(); const [form] = Form.useForm(); + + const defaultRoles = useMemo( + () => [ + { + label: t("commonComponents.userSearchModal.roleAdminLabel"), + value: "admin", + description: t("commonComponents.userSearchModal.roleAdminDescription"), + }, + { + label: t("commonComponents.userSearchModal.roleUserLabel"), + value: "user", + description: t("commonComponents.userSearchModal.roleUserDescription"), + }, + ], + [t], + ); + + const effectiveRoles = roles ?? defaultRoles; + const effectiveTitle = title ?? t("commonComponents.userSearchModal.title"); const [userOptions, setUserOptions] = useState([]); const [loading, setLoading] = useState(false); const [selectedField, setSelectedField] = useState<"user_email" | "user_id">("user_email"); @@ -128,7 +142,14 @@ const UserSearchModal: React.FC = ({ }; return ( - + form={form} onFinish={handleSubmit} @@ -139,11 +160,11 @@ const UserSearchModal: React.FC = ({ role: defaultRole, }} > - + handleSearch(value, "user_id")} onSelect={(value, option) => handleSelect(value, option as UserOption)} @@ -170,9 +191,9 @@ const UserSearchModal: React.FC = ({ /> - +