From 559a312c9cfc752ea76ccd2bb0c6aab516664ee6 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Fri, 19 Apr 2024 15:07:13 -0700
Subject: [PATCH] ui - show teams as dropdown in create user flow

---
 ui/litellm-dashboard/src/app/page.tsx         |  1 +
 .../src/components/create_user_button.tsx     | 42 +++++++------------
 .../src/components/view_users.tsx             |  4 +-
 3 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 7bd0656236a..0a7cc6403fa 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/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}
             />
diff --git a/ui/litellm-dashboard/src/components/create_user_button.tsx b/ui/litellm-dashboard/src/components/create_user_button.tsx
index 94ddcabb04e..e2c467be49a 100644
--- a/ui/litellm-dashboard/src/components/create_user_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_user_button.tsx
@@ -7,9 +7,10 @@ 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);
@@ -90,38 +91,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>
diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx
index 7270b0d22da..d9fa5f78445 100644
--- a/ui/litellm-dashboard/src/components/view_users.tsx
+++ b/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">