fix - edit user role on admin ui

ui/litellm-dashboard/src/components/edit_user.tsx

@@ -23,12 +23,13 @@ import {
 
 interface EditUserModalProps {
   visible: boolean;
+  possibleUIRoles: null | Record<string, Record<string, string>>;
   onCancel: () => void;
   user: any;
   onSubmit: (data: any) => void;
 }
 
-const EditUserModal: React.FC<EditUserModalProps> = ({ visible, onCancel, user, onSubmit }) => {
+const EditUserModal: React.FC<EditUserModalProps> = ({ visible, possibleUIRoles, onCancel, user, onSubmit }) => {
   const [editedUser, setEditedUser] = useState(user);
   const [form] = Form.useForm();
 
@@ -94,9 +95,15 @@ const EditUserModal: React.FC<EditUserModalProps> = ({ visible, onCancel, user,
               name="user_role"
             >
             <Select2>
-                <Select2.Option value="proxy_admin">Proxy Admin (Can create, edit, delete keys, teams)</Select2.Option>
+    {possibleUIRoles &&
-                <Select2.Option value="proxy_admin_viewer">Proxy Viewer (Can just view spend, cannot created keys, teams)</Select2.Option>
+        Object.entries(possibleUIRoles).map(([role, { ui_label, description }]) => (
-            </Select2>
+            <SelectItem key={role} value={role} title={ui_label}>
+                <div className='flex'>
+                {ui_label} <p className="ml-2" style={{ color: "gray", fontSize: "12px" }}>{description}</p>
+                </div>
+            </SelectItem>
+        ))}
+</Select2>
 
             </Form.Item>
 

ui/litellm-dashboard/src/components/networking.tsx

@@ -1390,6 +1390,34 @@ export const userGetAllUsersCall = async (
   }
 };
 
+export const getPossibleUserRoles = async (
+  accessToken: String,
+) => {
+  try {
+    const url = proxyBaseUrl
+      ? `${proxyBaseUrl}/user/available_roles`
+      : `/user/available_roles`;
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.text();
+      throw new Error("Network response was not ok");
+    }
+    const data = await response.json();
+    console.log("response from user/available_role", data);
+    return data;
+    // Handle success - you might want to update some state or UI based on the created key
+  } catch (error) {
+    throw error;
+  }
+};
+
 export const teamCreateCall = async (
   accessToken: string,
   formValues: Record<string, any> // Assuming formValues is an object

ui/litellm-dashboard/src/components/view_users.tsx

@@ -24,7 +24,7 @@ import {
   Icon,
   TextInput,
 } from "@tremor/react";
-import { userInfoCall, userUpdateUserCall } from "./networking";
+import { userInfoCall, userUpdateUserCall, getPossibleUserRoles } from "./networking";
 import { Badge, BadgeDelta, Button } from "@tremor/react";
 import RequestAccess from "./request_model_access";
 import CreateUser from "./create_user_button";
@@ -63,6 +63,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
   const [selectedItem, setSelectedItem] = useState<null | any>(null);
   const [editModalVisible, setEditModalVisible] = useState(false);
   const [selectedUser, setSelectedUser] = useState(null);
+  const [possibleUIRoles, setPossibleUIRoles] = useState<Record<string, Record<string, string>>>({});
   const defaultPageSize = 25;
 
   const handleEditCancel = async () => {
@@ -107,11 +108,16 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
         );
         console.log("user data response:", userDataResponse);
         setUserData(userDataResponse);
+
+        const availableUserRoles = await getPossibleUserRoles(accessToken);
+        setPossibleUIRoles(availableUserRoles);
+
       } catch (error) {
         console.error("There was an error fetching the model data", error);
       }
     };
 
+
     if (accessToken && token && userRole && userID) {
       fetchData();
     }
@@ -283,6 +289,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
           </TabGroup>
           <EditUserModal
           visible={editModalVisible}
+          possibleUIRoles={possibleUIRoles}
           onCancel={handleEditCancel}
           user={selectedUser}
           onSubmit={handleEditSubmit}