From 817f34b649597d207b72e381546ac3ef86a7cb77 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 27 Jan 2025 15:58:51 -0800
Subject: [PATCH] edit create key button

---
 .../src/components/create_key_button.tsx                 | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx
index 59e7e275a62..69a7f2027f2 100644
--- a/ui/litellm-dashboard/src/components/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_key_button.tsx
@@ -23,6 +23,7 @@ import {
   message,
   Radio,
 } from "antd";
+import { unfurlWildcardModelsInList, getModelDisplayName } from "./key_team_helpers/fetch_available_models_team_key";
 import {
   keyCreateCall,
   slackBudgetAlertsHealthCheck,
@@ -80,8 +81,8 @@ const CreateKey: React.FC<CreateKeyProps> = ({
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [apiKey, setApiKey] = useState(null);
   const [softBudget, setSoftBudget] = useState(null);
-  const [userModels, setUserModels] = useState([]);
-  const [modelsToPick, setModelsToPick] = useState([]);
+  const [userModels, setUserModels] = useState<string[]>([]);
+  const [modelsToPick, setModelsToPick] = useState<string[]>([]);
   const [keyOwner, setKeyOwner] = useState("you");
   const [predefinedTags, setPredefinedTags] = useState(getPredefinedTags(data));
   const [guardrailsList, setGuardrailsList] = useState<string[]>([]);
@@ -213,6 +214,8 @@ const CreateKey: React.FC<CreateKeyProps> = ({
       tempModelsToPick = userModels;
     }
 
+    tempModelsToPick = unfurlWildcardModelsInList(tempModelsToPick, userModels);
+
     setModelsToPick(tempModelsToPick);
   }, [team, userModels]);
 
@@ -310,7 +313,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                 </Option>
                 {modelsToPick.map((model: string) => (
                   <Option key={model} value={model}>
-                    {model}
+                    {getModelDisplayName(model)}
                   </Option>
                 ))}
               </Select>