From ab9705781f483eeb8bc9aa3506ea584434318e42 Mon Sep 17 00:00:00 2001 From: Nandini Bagga <56165694+NANDINI-star@users.noreply.github.com> Date: Sat, 26 Apr 2025 23:51:56 +0900 Subject: [PATCH] create key table render fix (#10224) Co-authored-by: Krish Dholakia --- ui/litellm-dashboard/src/app/page.tsx | 11 ++++++++++- .../src/components/create_key_button.tsx | 12 ++++-------- .../src/components/key_team_helpers/key_list.tsx | 6 +++--- .../src/components/user_dashboard.tsx | 9 +++++++-- .../src/components/view_key_table.tsx | 13 ++++--------- 5 files changed, 28 insertions(+), 23 deletions(-) diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx index 2a3b7422ce1..70387046401 100644 --- a/ui/litellm-dashboard/src/app/page.tsx +++ b/ui/litellm-dashboard/src/app/page.tsx @@ -103,7 +103,7 @@ export default function CreateKeyPage() { useState(false); const [userEmail, setUserEmail] = useState(null); const [teams, setTeams] = useState(null); - const [keys, setKeys] = useState(null); + const [keys, setKeys] = useState([]); const [organizations, setOrganizations] = useState([]); const [userModels, setUserModels] = useState([]); const [proxySettings, setProxySettings] = useState({ @@ -115,6 +115,7 @@ export default function CreateKeyPage() { const searchParams = useSearchParams()!; const [modelData, setModelData] = useState({ data: [] }); const [token, setToken] = useState(null); + const [createClicked, setCreateClicked] = useState(false); const [authLoading, setAuthLoading] = useState(true); const [userID, setUserID] = useState(null); @@ -139,6 +140,10 @@ export default function CreateKeyPage() { const [accessToken, setAccessToken] = useState(null); + const addKey = (data: any) => { + setKeys((prevData) => (prevData ? [...prevData, data] : [data])) + setCreateClicked(() => !createClicked); + } const redirectToLogin = authLoading === false && token === null && invitation_id === null; useEffect(() => { @@ -243,6 +248,8 @@ export default function CreateKeyPage() { setTeams={setTeams} setKeys={setKeys} organizations={organizations} + addKey={addKey} + createClicked={createClicked} /> ) : (
@@ -277,6 +284,8 @@ export default function CreateKeyPage() { setTeams={setTeams} setKeys={setKeys} organizations={organizations} + addKey={addKey} + createClicked={createClicked} /> ) : page == "models" ? ( >; teams: Team[] | null; + addKey: (data: any) => void; } interface User { @@ -149,7 +149,7 @@ const CreateKey: React.FC = ({ userRole, accessToken, data, - setData, + addKey, }) => { const [form] = Form.useForm(); const [isModalVisible, setIsModalVisible] = useState(false); @@ -267,13 +267,9 @@ const CreateKey: React.FC = ({ console.log("key create Response:", response); - // Update the data state in this component - setData((prevData) => (prevData ? [...prevData, response] : [response])); - + // Add the data to the state in the parent component // Also directly update the keys list in AllKeysTable without an API call - if (window.addNewKeyToList) { - window.addNewKeyToList(response); - } + addKey(response) setApiKey(response["key"]); setSoftBudget(response["soft_budget"]); diff --git a/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx b/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx index 533968361dc..6ae5f559a64 100644 --- a/ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx +++ b/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({ keys: [], @@ -163,7 +163,7 @@ const useKeyList = ({ 'selectedKeyAlias', selectedKeyAlias ); - }, [selectedTeam, currentOrg, accessToken, selectedKeyAlias]); + }, [selectedTeam, currentOrg, accessToken, selectedKeyAlias, createClicked]); const setKeys = (newKeysOrUpdater: KeyResponse[] | ((prevKeys: KeyResponse[]) => KeyResponse[])) => { setKeyData(prevData => { diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx index 4279c124d0a..6c1c6962d0d 100644 --- a/ui/litellm-dashboard/src/components/user_dashboard.tsx +++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx @@ -66,6 +66,8 @@ interface UserDashboardProps { setKeys: React.Dispatch>; premiumUser: boolean; organizations: Organization[] | null; + addKey: (data: any) => void; + createClicked: boolean } type TeamInterface = { @@ -85,7 +87,9 @@ const UserDashboard: React.FC = ({ setTeams, setKeys, premiumUser, - organizations + organizations, + addKey, + createClicked }) => { const [userSpendData, setUserSpendData] = useState( null @@ -417,7 +421,7 @@ const UserDashboard: React.FC = ({ userRole={userRole} accessToken={accessToken} data={keys} - setData={setKeys} + addKey={addKey} /> = ({ currentOrg={currentOrg} setCurrentOrg={setCurrentOrg} organizations={organizations} + createClicked={createClicked} /> diff --git a/ui/litellm-dashboard/src/components/view_key_table.tsx b/ui/litellm-dashboard/src/components/view_key_table.tsx index c2d742f27ca..84b319a7076 100644 --- a/ui/litellm-dashboard/src/components/view_key_table.tsx +++ b/ui/litellm-dashboard/src/components/view_key_table.tsx @@ -110,6 +110,7 @@ interface ViewKeyTableProps { setCurrentOrg: React.Dispatch>; selectedKeyAlias: string | null; setSelectedKeyAlias: Setter; + createClicked: boolean; } interface ItemData { @@ -159,7 +160,8 @@ const ViewKeyTable: React.FC = ({ organizations, setCurrentOrg, selectedKeyAlias, - setSelectedKeyAlias + setSelectedKeyAlias, + createClicked }) => { const [isButtonClicked, setIsButtonClicked] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); @@ -186,16 +188,9 @@ const ViewKeyTable: React.FC = ({ 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 });