From 04662c653f59ff67c5b2f73a0e4a37f53598ff80 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Fri, 14 Mar 2025 09:12:30 -0700
Subject: [PATCH] ui - instantly show changes to create key table

---
 .../src/components/all_keys_table.tsx          | 18 ++++++++++++++++++
 .../src/components/create_key_button.tsx       |  5 +++++
 .../src/components/view_key_table.tsx          | 13 +++++++++++++
 3 files changed, 36 insertions(+)

diff --git a/ui/litellm-dashboard/src/components/all_keys_table.tsx b/ui/litellm-dashboard/src/components/all_keys_table.tsx
index 75820d093b..b0313c241f 100644
--- a/ui/litellm-dashboard/src/components/all_keys_table.tsx
+++ b/ui/litellm-dashboard/src/components/all_keys_table.tsx
@@ -32,6 +32,7 @@ interface AllKeysTableProps {
   userRole: string | null;
   organizations: Organization[] | null;
   setCurrentOrg: React.Dispatch<React.SetStateAction<Organization | null>>;
+  refresh?: () => void;
 }
 
 // Define columns similar to our logs table
@@ -98,6 +99,7 @@ export function AllKeysTable({
   userRole,
   organizations,
   setCurrentOrg,
+  refresh,
 }: AllKeysTableProps) {
   const [selectedKeyId, setSelectedKeyId] = useState<string | null>(null);
   const [userList, setUserList] = useState<UserResponse[]>([]);
@@ -131,6 +133,22 @@ export function AllKeysTable({
     }
   }, [accessToken, keys]);
 
+  // Add a useEffect to call refresh when a key is created
+  useEffect(() => {
+    if (refresh) {
+      const handleStorageChange = () => {
+        refresh();
+      };
+      
+      // Listen for storage events that might indicate a key was created
+      window.addEventListener('storage', handleStorageChange);
+      
+      return () => {
+        window.removeEventListener('storage', handleStorageChange);
+      };
+    }
+  }, [refresh]);
+
   const columns: ColumnDef<KeyResponse>[] = [
     {
       id: "expander",
diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx
index 205d4226dc..a641596cb3 100644
--- a/ui/litellm-dashboard/src/components/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_key_button.tsx
@@ -266,6 +266,11 @@ const CreateKey: React.FC<CreateKeyProps> = ({
       message.success("API Key Created");
       form.resetFields();
       localStorage.removeItem("userData" + userID);
+      
+      // Add this line to refresh the keys list immediately
+      if (window.refreshKeysList) {
+        window.refreshKeysList();
+      }
     } catch (error) {
       console.log("error in create key:", error);
       message.error(`Error creating the key: ${error}`);
diff --git a/ui/litellm-dashboard/src/components/view_key_table.tsx b/ui/litellm-dashboard/src/components/view_key_table.tsx
index 22e786dcbc..968b7cf4c8 100644
--- a/ui/litellm-dashboard/src/components/view_key_table.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_table.tsx
@@ -182,6 +182,11 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
     accessToken,
   });
 
+  // Make refresh function available globally so CreateKey can access it
+  if (typeof window !== 'undefined') {
+    window.refreshKeysList = refresh;
+  }
+
   const handlePageChange = (newPage: number) => {
     refresh({ page: newPage });
   };
@@ -421,6 +426,7 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
         userRole={userRole}
         organizations={organizations}
         setCurrentOrg={setCurrentOrg}
+        refresh={refresh}
       />
 
       {isDeleteModalOpen && (
@@ -619,4 +625,11 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
   );
 };
 
+// Add this type declaration at the top of the file to avoid TypeScript errors
+declare global {
+  interface Window {
+    refreshKeysList?: () => void;
+  }
+}
+
 export default ViewKeyTable;