From 559a312c9cfc752ea76ccd2bb0c6aab516664ee6 Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Fri, 19 Apr 2024 15:07:13 -0700 Subject: [PATCH 1/3] 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 7bd0656236..0a7cc6403f 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 94ddcabb04..e2c467be49 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 = ({ userID, accessToken }) => { +const Createuser: React.FC = ({ userID, accessToken, teams }) => { const [form] = Form.useForm(); const [isModalVisible, setIsModalVisible] = useState(false); const [apiuser, setApiuser] = useState(null); @@ -90,38 +91,27 @@ const Createuser: React.FC = ({ userID, accessToken }) => { wrapperCol={{ span: 16 }} labelAlign="left" > - - + + - - - - - - - - - - - - - - - - - diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx index 7270b0d22d..d9fa5f7844 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>; } @@ -45,6 +46,7 @@ const ViewUserDashboard: React.FC = ({ keys, userRole, userID, + teams, setKeys, }) => { const [userData, setUserData] = useState(null); @@ -151,7 +153,7 @@ const ViewUserDashboard: React.FC = ({ return (
- + From 5d9f6282ce839adaadd42d71ab981cff2199646a Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Fri, 19 Apr 2024 15:17:50 -0700 Subject: [PATCH 2/3] create_user using user_email --- .../src/components/create_user_button.tsx | 18 +++++++----------- .../src/components/networking.tsx | 2 +- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/ui/litellm-dashboard/src/components/create_user_button.tsx b/ui/litellm-dashboard/src/components/create_user_button.tsx index e2c467be49..e2da08a63a 100644 --- a/ui/litellm-dashboard/src/components/create_user_button.tsx +++ b/ui/litellm-dashboard/src/components/create_user_button.tsx @@ -60,7 +60,7 @@ const Createuser: React.FC = ({ userID, accessToken, teams }) = 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"); @@ -122,23 +122,19 @@ const Createuser: React.FC = ({ userID, accessToken, teams }) = {apiuser && (

- Please save this secret user somewhere safe and accessible. For - security reasons, you will not be able to view it again{" "} - through your LiteLLM account. If you lose this secret user, you will - need to generate a new one. -

-

- {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.

+

+ +

Note: This Feature is only supported through SSO on the Admin UI

+ )}
diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index 46ec87e399..4b961ca347 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/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 // Assuming formValues is an object ) => { try { From 5613f9b30abb47048bc51a7a6f3315b8a1ea1eff Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Fri, 19 Apr 2024 15:26:29 -0700 Subject: [PATCH 3/3] UI - invite user flow --- .../src/components/create_user_button.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/ui/litellm-dashboard/src/components/create_user_button.tsx b/ui/litellm-dashboard/src/components/create_user_button.tsx index e2da08a63a..b3fbfd5d77 100644 --- a/ui/litellm-dashboard/src/components/create_user_button.tsx +++ b/ui/litellm-dashboard/src/components/create_user_button.tsx @@ -1,6 +1,6 @@ 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; @@ -74,16 +74,18 @@ const Createuser: React.FC = ({ userID, accessToken, teams }) = return (
setIsModalVisible(true)}> - + Create New User + + Invite User + Invite a user to login to the Admin UI and create Keys + Note: SSO Setup Required for this