From cb4a9d13651b78a590cd3a5ad5fb62ba1a52f641 Mon Sep 17 00:00:00 2001
From: Krish Dholakia <krrishdholakia@gmail.com>
Date: Thu, 3 Apr 2025 20:00:45 -0700
Subject: [PATCH] UI Improvements + Fixes - remove 'default key' on user signup
 + fix showing user models available for personal key creation (#9741)

* fix(create_user_button.tsx): don't auto create key on user signup

prevents unknown key from being created whenever user signs up

* fix(top_key_view.tsx): show key hash on hover for new usage tab

* fix(create_key_button.tsx): fix showing user models they have access to during personal key creatio
---
 ui/litellm-dashboard/src/app/onboarding/page.tsx      |  2 +-
 .../src/components/create_key_button.tsx              | 11 ++++++-----
 .../src/components/create_user_button.tsx             |  6 +++---
 ui/litellm-dashboard/src/components/networking.tsx    |  2 ++
 ui/litellm-dashboard/src/components/top_key_view.tsx  |  2 +-
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/onboarding/page.tsx b/ui/litellm-dashboard/src/app/onboarding/page.tsx
index e46e46fcb54..d65d2eb5101 100644
--- a/ui/litellm-dashboard/src/app/onboarding/page.tsx
+++ b/ui/litellm-dashboard/src/app/onboarding/page.tsx
@@ -110,7 +110,7 @@ export default function Onboarding() {
           color="sky"
         >
           <Grid numItems={2} className="flex justify-between items-center">
-            <Col>SSO is under the Enterprise Tirer.</Col>
+            <Col>SSO is under the Enterprise Tier.</Col>
 
             <Col>
               <Button variant="primary" className="mb-2">
diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx
index cc0a3899289..b3a4ed32652 100644
--- a/ui/litellm-dashboard/src/components/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_key_button.tsx
@@ -92,7 +92,7 @@ const getPredefinedTags = (data: any[] | null) => {
   return uniqueTags;
 }
 
-export const fetchTeamModels = async (userID: string, userRole: string, accessToken: string, teamID: string): Promise<string[]> => {
+export const fetchTeamModels = async (userID: string, userRole: string, accessToken: string, teamID: string | null): Promise<string[]> => {
   try {
     if (userID === null || userRole === null) {
       return [];
@@ -177,6 +177,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
   const handleCancel = () => {
     setIsModalVisible(false);
     setApiKey(null);
+    setSelectedCreateKeyTeam(null);
     form.resetFields();
   };
 
@@ -291,14 +292,14 @@ const CreateKey: React.FC<CreateKeyProps> = ({
   };
 
   useEffect(() => {
-    if (userID && userRole && accessToken && selectedCreateKeyTeam) {
-      fetchTeamModels(userID, userRole, accessToken, selectedCreateKeyTeam.team_id).then((models) => {
-        let allModels = Array.from(new Set([...selectedCreateKeyTeam.models, ...models]));
+    if (userID && userRole && accessToken) {
+      fetchTeamModels(userID, userRole, accessToken, selectedCreateKeyTeam?.team_id ?? null).then((models) => {
+        let allModels = Array.from(new Set([...(selectedCreateKeyTeam?.models ?? []), ...models]));
         setModelsToPick(allModels);
       });
     }
     form.setFieldValue('models', []);
-  }, [selectedCreateKeyTeam]);
+  }, [selectedCreateKeyTeam, accessToken, userID, userRole]);
 
   // Add a callback function to handle user creation
   const handleUserCreated = (userId: string) => {
diff --git a/ui/litellm-dashboard/src/components/create_user_button.tsx b/ui/litellm-dashboard/src/components/create_user_button.tsx
index 793a2933ccb..65a20823f13 100644
--- a/ui/litellm-dashboard/src/components/create_user_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_user_button.tsx
@@ -53,7 +53,7 @@ const Createuser: React.FC<CreateuserProps> = ({
   const [uiSettings, setUISettings] = useState<UISettings | null>(null);
   const [form] = Form.useForm();
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const [apiuser, setApiuser] = useState<string | null>(null);
+  const [apiuser, setApiuser] = useState<boolean>(false);
   const [userModels, setUserModels] = useState<string[]>([]);
   const [isInvitationLinkModalVisible, setIsInvitationLinkModalVisible] =
     useState(false);
@@ -113,7 +113,7 @@ const Createuser: React.FC<CreateuserProps> = ({
 
   const handleCancel = () => {
     setIsModalVisible(false);
-    setApiuser(null);
+    setApiuser(false);
     form.resetFields();
   };
 
@@ -130,7 +130,7 @@ const Createuser: React.FC<CreateuserProps> = ({
       console.log("formValues in create user:", formValues);
       const response = await userCreateCall(accessToken, null, formValues);
       console.log("user create Response:", response);
-      setApiuser(response["key"]);
+      setApiuser(true);
       const user_id = response.data?.user_id || response.user_id;
 
       // Call the callback if provided (for embedded mode)
diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index 9190319cc92..fb33ee48156 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -528,6 +528,8 @@ export const userCreateCall = async (
       delete formValues.description;
       formValues.metadata = JSON.stringify(formValues.metadata);
     }
+
+    formValues.auto_create_key = false;
     // if formValues.metadata is not undefined, make it a valid dict
     if (formValues.metadata) {
       console.log("formValues.metadata:", formValues.metadata);
diff --git a/ui/litellm-dashboard/src/components/top_key_view.tsx b/ui/litellm-dashboard/src/components/top_key_view.tsx
index 3c9b53f8d0b..643cea0a6d0 100644
--- a/ui/litellm-dashboard/src/components/top_key_view.tsx
+++ b/ui/litellm-dashboard/src/components/top_key_view.tsx
@@ -141,7 +141,7 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({
                   <div className="space-y-1.5">
                     <div className="text-sm">
                       <span className="text-gray-300">Key: </span>
-                      <span className="font-mono text-gray-100">{item?.key?.slice(0, 10)}...</span>
+                      <span className="font-mono text-gray-100">{item?.api_key?.slice(0, 10)}...</span>
                     </div>
                     <div className="text-sm">
                       <span className="text-gray-300">Spend: </span>