ai-workspace-services/litellm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix edit credentials modal (#10519)

Browse Source
This commit is contained in:
tanjiro 2025-05-04 00:53:25 +09:00 committed by GitHub
parent 7273bb442a
commit f858a7d670
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui/litellm-dashboard/src/components/model_add/add_credentials_tab.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import {
Card,
Form,
@ -41,8 +41,6 @@ const AddCredentialsModal: React.FC<AddCredentialsModalProps> = ({
const [selectedProvider, setSelectedProvider] = useState<Providers>(Providers.OpenAI);
const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
console.log(`existingCredential in add credentials tab: ${JSON.stringify(existingCredential)}`);
const handleSubmit = (values: any) => {
if (addOrEdit === "add") {
onAddCredential(values);
@ -52,6 +50,20 @@ const AddCredentialsModal: React.FC<AddCredentialsModalProps> = ({
form.resetFields();
};
useEffect(() => {
if (existingCredential) {
form.setFieldsValue({
credential_name: existingCredential.credential_name,
custom_llm_provider: existingCredential.credential_info.custom_llm_provider,
api_base: existingCredential.credential_values.api_base,
api_version: existingCredential.credential_values.api_version,
base_model: existingCredential.credential_values.base_model,
api_key: existingCredential.credential_values.api_key,
});
setSelectedProvider(existingCredential.credential_info.custom_llm_provider as Providers);
}
}, [existingCredential]);
return (
<Modal
title={addOrEdit === "add" ? "Add New Credential" : "Edit Credential"}
@ -89,9 +101,9 @@ const AddCredentialsModal: React.FC<AddCredentialsModalProps> = ({
tooltip="Helper to auto-populate provider specific fields"
>
<AntdSelect
value={existingCredential?.credential_info.custom_llm_provider || selectedProvider}
onChange={(value) => {
setSelectedProvider(value as Providers);
form.setFieldValue("custom_llm_provider", value);
}}
>
{Object.entries(Providers).map(([providerEnum, providerDisplayName]) => (
@ -108,8 +120,9 @@ const AddCredentialsModal: React.FC<AddCredentialsModalProps> = ({
const target = e.target as HTMLImageElement;
const parent = target.parentElement;
if (parent) {
const fallbackDiv = document.createElement('div');
fallbackDiv.className = 'w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-xs';
const fallbackDiv = document.createElement("div");
fallbackDiv.className =
"w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-xs";
fallbackDiv.textContent = providerDisplayName.charAt(0);
parent.replaceChild(fallbackDiv, target);
}

8
ui/litellm-dashboard/src/components/model_add/credentials.tsx
View File

@ -38,12 +38,10 @@ const CredentialsPanel: React.FC<CredentialsPanelProps> = ({ accessToken, upload
const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false);
const [selectedCredential, setSelectedCredential] = useState<CredentialItem | null>(null);
const [form] = Form.useForm();
console.log(`selectedCredential in credentials panel: ${JSON.stringify(selectedCredential)}`);
const restrictedFields = ['credential_name', 'custom_llm_provider'];
const handleUpdateCredential = async (values: any) => {
if (!accessToken) {
console.error('No access token found');
return;
}
@ -61,14 +59,12 @@ const CredentialsPanel: React.FC<CredentialsPanelProps> = ({ accessToken, upload
const response = await credentialUpdateCall(accessToken, values.credential_name, newCredential);
message.success('Credential updated successfully');
console.log(`response: ${JSON.stringify(response)}`);
setIsUpdateModalOpen(false);
fetchCredentials(accessToken);
}
const handleAddCredential = async (values: any) => {
if (!accessToken) {
console.error('No access token found');
return;
}
@ -87,7 +83,6 @@ const CredentialsPanel: React.FC<CredentialsPanelProps> = ({ accessToken, upload
// Add to list and close modal
const response = await credentialCreateCall(accessToken, newCredential);
message.success('Credential added successfully');
console.log(`response: ${JSON.stringify(response)}`);
setIsAddModalOpen(false);
fetchCredentials(accessToken);
};
@ -120,11 +115,9 @@ const CredentialsPanel: React.FC<CredentialsPanelProps> = ({ accessToken, upload
const handleDeleteCredential = async (credentialName: string) => {
if (!accessToken) {
console.error('No access token found');
return;
}
const response = await credentialDeleteCall(accessToken, credentialName);
console.log(`response: ${JSON.stringify(response)}`);
message.success('Credential deleted successfully');
fetchCredentials(accessToken);
};
@ -175,7 +168,6 @@ const CredentialsPanel: React.FC<CredentialsPanelProps> = ({ accessToken, upload
variant="light"
size="sm"
onClick={() => {
console.log(`credential being set: ${JSON.stringify(credential)}`);
setSelectedCredential(credential);
setIsUpdateModalOpen(true);
}}

2
ui/litellm-dashboard/src/components/networking.tsx
View File

@ -42,7 +42,7 @@ export interface Organization {
export interface CredentialItem {
credential_name: string;
credential_values: object;
credential_values: any;
credential_info: {
custom_llm_provider?: string;
description?: string;