feat(credentials.tsx): working POST request to add new credentials to db

ui/litellm-dashboard/src/components/model_add/add_credentials_tab.tsx

@@ -67,10 +67,6 @@ const AddCredentialsModal: React.FC<AddCredentialsModalProps> = ({
             value={selectedProvider}
             onChange={(value) => {
               setSelectedProvider(value);
-              form.setFieldsValue({ 
-                model: [],
-                model_name: undefined 
-              });
             }}
           >
             {Object.entries(Providers).map(([providerEnum, providerDisplayName]) => (
@@ -134,7 +130,6 @@ const AddCredentialsModal: React.FC<AddCredentialsModalProps> = ({
               Cancel
             </Button>
             <Button 
-              type="primary" 
               htmlType="submit"
             >
               Add Credential

ui/litellm-dashboard/src/components/model_add/credentials.tsx

@@ -13,9 +13,9 @@ import {
 } from "@tremor/react";
 import { UploadProps } from "antd/es/upload";
 import { PlusIcon } from "@heroicons/react/solid";
-import { getCredentialsList } from "@/components/networking"; // Assume this is your networking function
+import { getCredentialsList, credentialCreateCall } from "@/components/networking"; // Assume this is your networking function
 import AddCredentialsTab from "./add_credentials_tab";
-import { Form } from "antd";
+import { Form, message } from "antd";
 interface CredentialsPanelProps {
   accessToken: string | null;
   uploadProps: UploadProps;
@@ -45,24 +45,28 @@ const CredentialsPanel: React.FC<CredentialsPanelProps> = ({ accessToken, upload
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
   const [form] = Form.useForm();
 
-  const handleAddCredential = (values: any) => {
+  const handleAddCredential = async (values: any) => {
+    if (!accessToken) {
+      console.error('No access token found');
+      return;
+    }
+
+    const filter_credential_values = Object.entries(values)
+      .filter(([key]) => !['credential_name', 'custom_llm_provider'].includes(key))
+      .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
     // Transform form values into credential structure
     const newCredential = {
       credential_name: values.credential_name,
-      provider: values.custom_llm_provider,
+      credential_values: filter_credential_values,
-      credential_values: {
-        api_key: values.api_key,
-        api_base: values.api_base
-      },
       credential_info: {
-        type: values.custom_llm_provider,
+        custom_llm_provider: values.custom_llm_provider,
-        required: true, // You might want to make this configurable
-        default: values.credential_name
       }
     };
 
     // Add to list and close modal
-    setCredentialsList([...credentialsList, newCredential]);
+    const response = await credentialCreateCall(accessToken, newCredential);
+    message.success('Credential added successfully');
+    console.log(`response: ${JSON.stringify(response)}`);
     setIsAddModalOpen(false);
     form.resetFields();
   };
@@ -168,7 +172,7 @@ const CredentialsPanel: React.FC<CredentialsPanelProps> = ({ accessToken, upload
       {isAddModalOpen && (
         <AddCredentialsTab 
           form={form}
-          handleOk={handleAddCredential}
+          onAddCredential={handleAddCredential}
           isVisible={isAddModalOpen}
           onCancel={() => setIsAddModalOpen(false)}
           uploadProps={uploadProps}

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

@@ -2527,6 +2527,51 @@ export const teamCreateCall = async (
   }
 };
 
+export const credentialCreateCall = async (
+  accessToken: string,
+  formValues: Record<string, any> // Assuming formValues is an object
+) => {
+  try {
+    console.log("Form Values in credentialCreateCall:", formValues); // Log the form values before making the API call
+    if (formValues.metadata) {
+      console.log("formValues.metadata:", formValues.metadata);
+      // if there's an exception JSON.parse, show it in the message
+      try {
+        formValues.metadata = JSON.parse(formValues.metadata);
+      } catch (error) {
+        throw new Error("Failed to parse metadata: " + error);
+      }
+    }
+
+    const url = proxyBaseUrl ? `${proxyBaseUrl}/credentials` : `/credentials`;
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        [globalLitellmHeaderName]: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        ...formValues, // Include formValues in the request body
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.text();
+      handleError(errorData);
+      console.error("Error response from the server:", errorData);
+      throw new Error("Network response was not ok");
+    }
+
+    const data = await response.json();
+    console.log("API Response:", data);
+    return data;
+    // Handle success - you might want to update some state or UI based on the created key
+  } catch (error) {
+    console.error("Failed to create key:", error);
+    throw error;
+  }
+};
+
 export const keyUpdateCall = async (
   accessToken: string,
   formValues: Record<string, any> // Assuming formValues is an object