Merge pull request #3180 from BerriAI/ui_create_user_flow

[UI] Show teams as dropdown in invite user flow

ui/litellm-dashboard/src/app/page.tsx

@@ -145,6 +145,7 @@ const CreateKeyPage = () => {
               userRole={userRole}
               token={token}
               keys={keys}
+              teams={teams}
               accessToken={accessToken}
               setKeys={setKeys}
             />

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

@@ -1,15 +1,16 @@
 import React, { useState, useEffect } from "react";
 import { Button, Modal, Form, Input, message, Select, InputNumber } from "antd";
-import { Button as Button2 } from "@tremor/react";
+import { Button as Button2, Text } from "@tremor/react";
 import { userCreateCall, modelAvailableCall } from "./networking";
 const { Option } = Select;
 
 interface CreateuserProps {
   userID: string;
   accessToken: string;
+  teams: any[] | null;
 }
 
-const Createuser: React.FC<CreateuserProps> = ({ userID, accessToken }) => {
+const Createuser: React.FC<CreateuserProps> = ({ userID, accessToken, teams }) => {
   const [form] = Form.useForm();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [apiuser, setApiuser] = useState<string | null>(null);
@@ -59,7 +60,7 @@ const Createuser: React.FC<CreateuserProps> = ({ userID, accessToken }) => {
       message.info("Making API Call");
       setIsModalVisible(true);
       console.log("formValues in create user:", formValues);
-      const response = await userCreateCall(accessToken, userID, formValues);
+      const response = await userCreateCall(accessToken, null, formValues);
       console.log("user create Response:", response);
       setApiuser(response["key"]);
       message.success("API user Created");
@@ -73,16 +74,18 @@ const Createuser: React.FC<CreateuserProps> = ({ userID, accessToken }) => {
   return (
     <div>
       <Button2 className="mx-auto" onClick={() => setIsModalVisible(true)}>
-        + Create New User
+        + Invite User
       </Button2>
       <Modal
-        title="Create User"
+        title="Invite User"
         visible={isModalVisible}
         width={800}
         footer={null}
         onOk={handleOk}
         onCancel={handleCancel}
       >
+        <Text className="mb-1">Invite a user to login to the Admin UI and create Keys</Text>
+        <Text className="mb-6"><b>Note: SSO Setup Required for this</b></Text>
         <Form
           form={form}
           onFinish={handleCreate}
@@ -90,38 +93,27 @@ const Createuser: React.FC<CreateuserProps> = ({ userID, accessToken }) => {
           wrapperCol={{ span: 16 }}
           labelAlign="left"
         >
-          <Form.Item label="User ID" name="user_id">
-            <Input placeholder="Enter User ID" />
+          <Form.Item label="User Email" name="user_email">
+            <Input placeholder="Enter User Email" />
           </Form.Item>
           <Form.Item label="Team ID" name="team_id">
-            <Input placeholder="ai_team" />
-          </Form.Item>
-          <Form.Item label="Models" name="models">
-            <Select
-              mode="multiple"
-              placeholder="Select models"
+          <Select
+              placeholder="Select Team ID"
               style={{ width: "100%" }}
             >
-              {userModels.map((model) => (
-                <Option key={model} value={model}>
-                  {model}
+              {teams ? (
+                teams.map((team: any) => (
+                  <Option key={team.team_id} value={team.team_id}>
+                    {team.team_alias}
+                  </Option>
+                ))
+              ) : (
+                <Option key="default" value={null}>
+                  Default Team
                 </Option>
-              ))}
+              )}
             </Select>
           </Form.Item>
-
-          <Form.Item label="Max Budget (USD)" name="max_budget">
-            <InputNumber step={0.01} precision={2} width={200} />
-          </Form.Item>
-          <Form.Item label="Tokens per minute Limit (TPM)" name="tpm_limit">
-            <InputNumber step={1} width={400} />
-          </Form.Item>
-          <Form.Item label="Requests per minute Limit (RPM)" name="rpm_limit">
-            <InputNumber step={1} width={400} />
-          </Form.Item>
-          <Form.Item label="Duration (eg: 30s, 30h, 30d)" name="duration">
-            <Input />
-          </Form.Item>
           <Form.Item label="Metadata" name="metadata">
             <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
           </Form.Item>
@@ -132,23 +124,19 @@ const Createuser: React.FC<CreateuserProps> = ({ userID, accessToken }) => {
       </Modal>
       {apiuser && (
         <Modal
-          title="Save Your User"
+          title="User Created Successfully"
           visible={isModalVisible}
           onOk={handleOk}
           onCancel={handleCancel}
           footer={null}
         >
           <p>
-            Please save this secret user somewhere safe and accessible. For
-            security reasons, <b>you will not be able to view it again</b>{" "}
-            through your LiteLLM account. If you lose this secret user, you will
-            need to generate a new one.
-          </p>
-          <p>
-            {apiuser != null
-              ? `API user: ${apiuser}`
-              : "User being created, this might take 30s"}
+            User has been created to access your proxy. Please Ask them to Log In.
           </p>
+          <br></br>
+
+          <p><b>Note: This Feature is only supported through SSO on the Admin UI</b></p>
+          
         </Modal>
       )}
     </div>

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

@@ -158,7 +158,7 @@ export const keyCreateCall = async (
 
 export const userCreateCall = async (
   accessToken: string,
-  userID: string,
+  userID: string | null,
   formValues: Record<string, any> // Assuming formValues is an object
 ) => {
   try {

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

@@ -36,6 +36,7 @@ interface ViewUserDashboardProps {
   keys: any[] | null;
   userRole: string | null;
   userID: string | null;
+  teams: any[] | null;
   setKeys: React.Dispatch<React.SetStateAction<Object[] | null>>;
 }
 
@@ -45,6 +46,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
   keys,
   userRole,
   userID,
+  teams,
   setKeys,
 }) => {
   const [userData, setUserData] = useState<null | any[]>(null);
@@ -151,7 +153,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
   return (
     <div style={{ width: "100%" }}>
       <Grid className="gap-2 p-2 h-[75vh] w-full mt-8">
-        <CreateUser userID={userID} accessToken={accessToken} />
+        <CreateUser userID={userID} accessToken={accessToken} teams={teams}/>
         <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh] mb-4">
           <TabGroup>
             <TabList variant="line" defaultValue="1">