Merge f0e35e1361 into 34be7ffceb

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

@@ -86,7 +86,7 @@ export default function CreateKeyPage() {
     useState(false);
   const [userEmail, setUserEmail] = useState<null | string>(null);
   const [teams, setTeams] = useState<Team[] | null>(null);
-  const [keys, setKeys] = useState<null | any[]>(null);
+  const [keys, setKeys] = useState<null | any[]>([]);
   const [organizations, setOrganizations] = useState<Organization[]>([]);
   const [userModels, setUserModels] = useState<string[]>([]);
   const [proxySettings, setProxySettings] = useState<ProxySettings>({
@@ -98,6 +98,7 @@ export default function CreateKeyPage() {
   const searchParams = useSearchParams()!;
   const [modelData, setModelData] = useState<any>({ data: [] });
   const [token, setToken] = useState<string | null>(null);
+  const [createClicked, setCreateClicked] = useState<boolean>(false);
   const [userID, setUserID] = useState<string | null>(null);
 
   const invitation_id = searchParams.get("invitation_id");
@@ -121,6 +122,11 @@ export default function CreateKeyPage() {
 
   const [accessToken, setAccessToken] = useState<string | null>(null);
 
+  const addKey = (data: any) => {
+    setKeys((prevData) => (prevData ? [...prevData, data] : [data]))
+    setCreateClicked(() => !createClicked);
+  } 
+
   useEffect(() => {
     const token = getCookie("token");
     setToken(token);
@@ -213,6 +219,8 @@ export default function CreateKeyPage() {
             setTeams={setTeams}
             setKeys={setKeys}
             organizations={organizations}
+            addKey={addKey}
+            createClicked={createClicked}
           />
         ) : (
           <div className="flex flex-col min-h-screen">
@@ -247,6 +255,8 @@ export default function CreateKeyPage() {
                   setTeams={setTeams}
                   setKeys={setKeys}
                   organizations={organizations}
+                  addKey={addKey}
+                  createClicked={createClicked}
                 />
               ) : page == "models" ? (
                 <ModelDashboard

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

@@ -52,8 +52,8 @@ interface CreateKeyProps {
   userRole: string | null;
   accessToken: string;
   data: any[] | null;
-  setData: React.Dispatch<React.SetStateAction<any[] | null>>;
   teams: Team[] | null;
+  addKey: (data: any) => void;
 }
 
 interface User {
@@ -149,7 +149,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
   userRole,
   accessToken,
   data,
-  setData,
+  addKey,
 }) => {
   const [form] = Form.useForm();
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -267,13 +267,9 @@ const CreateKey: React.FC<CreateKeyProps> = ({
 
       console.log("key create Response:", response);
       
-      // Update the data state in this component
+      // Add the data to the state in the parent component
-      setData((prevData) => (prevData ? [...prevData, response] : [response]));
-      
       // Also directly update the keys list in AllKeysTable without an API call
-      if (window.addNewKeyToList) {
+      addKey(response)
-        window.addNewKeyToList(response);
-      }
       
       setApiKey(response["key"]);
       setSoftBudget(response["soft_budget"]);

ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx

@@ -87,7 +87,7 @@ selectedTeam?: Team;
 currentOrg: Organization | null;
 selectedKeyAlias: string | null;
 accessToken: string;
-currentPage?: number;
+createClicked: boolean;
 }
 
 interface PaginationData {
@@ -111,7 +111,7 @@ const useKeyList = ({
     currentOrg,
     selectedKeyAlias,
     accessToken,
-    currentPage = 1,
+    createClicked,
 }: UseKeyListProps): UseKeyListReturn => {
     const [keyData, setKeyData] = useState<KeyListResponse>({ 
         keys: [], 
@@ -161,7 +161,7 @@ const useKeyList = ({
           'selectedKeyAlias',
           selectedKeyAlias
         );
-    }, [selectedTeam, currentOrg, accessToken, selectedKeyAlias]);
+    }, [selectedTeam, currentOrg, accessToken, selectedKeyAlias, createClicked]);
 
     const setKeys = (newKeysOrUpdater: KeyResponse[] | ((prevKeys: KeyResponse[]) => KeyResponse[])) => {
         setKeyData(prevData => {

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

@@ -65,6 +65,8 @@ interface UserDashboardProps {
   setKeys: React.Dispatch<React.SetStateAction<Object[] | null>>;
   premiumUser: boolean;
   organizations: Organization[] | null;
+  addKey: (data: any) => void;
+  createClicked: boolean
 }
 
 type TeamInterface = {
@@ -84,7 +86,9 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
   setTeams,
   setKeys,
   premiumUser,
-  organizations
+  organizations,
+  addKey,
+  createClicked
 }) => {
   const [userSpendData, setUserSpendData] = useState<UserInfo | null>(
     null
@@ -350,7 +354,7 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
             userRole={userRole}
             accessToken={accessToken}
             data={keys}
-            setData={setKeys}
+            addKey={addKey}
           />
 
           <ViewKeyTable
@@ -368,6 +372,7 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
             currentOrg={currentOrg}
             setCurrentOrg={setCurrentOrg}
             organizations={organizations}
+            createClicked={createClicked}
           />
         </Col>
       </Grid>

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

@@ -110,6 +110,7 @@ interface ViewKeyTableProps {
   setCurrentOrg: React.Dispatch<React.SetStateAction<Organization | null>>;
   selectedKeyAlias: string | null;
   setSelectedKeyAlias: Setter<string | null>;
+  createClicked: boolean;
 }
 
 interface ItemData {
@@ -159,7 +160,8 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
   organizations,
   setCurrentOrg,
   selectedKeyAlias,
-  setSelectedKeyAlias
+  setSelectedKeyAlias,
+  createClicked
 }) => {
   const [isButtonClicked, setIsButtonClicked] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -186,16 +188,9 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
     currentOrg,
     selectedKeyAlias,
     accessToken,
+    createClicked,
   });
 
-  // Make both refresh and addKey functions available globally
-  if (typeof window !== 'undefined') {
-    window.refreshKeysList = refresh;
-    window.addNewKeyToList = (newKey) => {
-      // Add the new key to the keys list without making an API call
-      setKeys((prevKeys) => [newKey, ...prevKeys]);
-    };
-  }
 
   const handlePageChange = (newPage: number) => {
     refresh({ page: newPage });