From a560e2d262526478dfb1e5f2677600ca7eae9fd7 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 12 Mar 2025 17:49:56 -0700
Subject: [PATCH] feat: re-add llm credentials to models page

---
 ui/litellm-dashboard/src/app/page.tsx         |  3 ---
 .../{ => model_add}/credentials.tsx           | 25 ++++++++++++-------
 .../src/components/model_dashboard.tsx        |  5 ++++
 3 files changed, 21 insertions(+), 12 deletions(-)
 rename ui/litellm-dashboard/src/components/{ => model_add}/credentials.tsx (91%)

diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index b417cf5d164..e7964445146 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -28,7 +28,6 @@ import CacheDashboard from "@/components/cache_dashboard";
 import { setGlobalLitellmHeaderName } from "@/components/networking";
 import { Organization } from "@/components/networking";
 import GuardrailsPanel from "@/components/guardrails";
-import CredentialsPanel from "@/components/credentials";
 import TransformRequestPanel from "@/components/transform_request";
 import { fetchUserModels } from "@/components/create_key_button";
 import { fetchTeams } from "@/components/common_components/fetch_teams";
@@ -313,8 +312,6 @@ export default function CreateKeyPage() {
                 <GuardrailsPanel accessToken={accessToken} />
               ) : page == "transform-request" ? (
                 <TransformRequestPanel accessToken={accessToken} />
-              ) : page == "credentials" ? (
-                <CredentialsPanel accessToken={accessToken} />
               ) : page == "general-settings" ? (
                 <GeneralSettings
                   userID={userID}
diff --git a/ui/litellm-dashboard/src/components/credentials.tsx b/ui/litellm-dashboard/src/components/model_add/credentials.tsx
similarity index 91%
rename from ui/litellm-dashboard/src/components/credentials.tsx
rename to ui/litellm-dashboard/src/components/model_add/credentials.tsx
index d06826e1361..7c32dd72d72 100644
--- a/ui/litellm-dashboard/src/components/credentials.tsx
+++ b/ui/litellm-dashboard/src/components/model_add/credentials.tsx
@@ -8,10 +8,11 @@ import {
   TableRow,
   Card,
   Text,
-  Badge
+  Badge,
+  Button
 } from "@tremor/react";
 import { PlusIcon } from "@heroicons/react/solid";
-import { getCredentialsList } from "./networking"; // Assume this is your networking function
+import { getCredentialsList } from "@/components/networking"; // Assume this is your networking function
 
 interface CredentialsPanelProps {
   accessToken: string | null;
@@ -75,6 +76,12 @@ const CredentialsPanel: React.FC<CredentialsPanelProps> = ({ accessToken }) => {
 
   return (
     <div className="w-full mx-auto flex-auto overflow-y-auto m-8 p-2">
+      <Button 
+        onClick={() => setIsAddModalOpen(true)}
+        className="mb-4"
+      >
+        Add Credential
+      </Button>
       <div className="flex justify-between items-center mb-4">
         <Text>
           Configured credentials for different AI providers. Add and manage your API credentials.{" "}
@@ -87,13 +94,6 @@ const CredentialsPanel: React.FC<CredentialsPanelProps> = ({ accessToken }) => {
             Docs
           </a>
         </Text>
-        <button 
-          onClick={() => setIsAddModalOpen(true)}
-          className="flex items-center bg-blue-500 text-white px-3 py-2 rounded-md hover:bg-blue-600 transition-colors"
-        >
-          <PlusIcon className="h-5 w-5 mr-2" />
-          Add Credential
-        </button>
       </div>
 
       <Card>
@@ -137,10 +137,17 @@ const CredentialsPanel: React.FC<CredentialsPanelProps> = ({ accessToken }) => {
         </Table>
       </Card>
 
+      
+
       {/* TODO: Implement Add Credential Modal */}
       {isAddModalOpen && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
           {/* Modal content for adding credentials */}
+          <Button 
+            onClick={() => setIsAddModalOpen(false)}
+          >
+            Close
+          </Button>
         </div>
       )}
     </div>
diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx
index 65eb02ad55a..75036f1f482 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx
@@ -23,6 +23,7 @@ import LiteLLMModelNameField from "./add_model/litellm_model_name";
 import AdvancedSettings from "./add_model/advanced_settings";
 import ProviderSpecificFields from "./add_model/provider_specific_fields";
 import { handleAddModelSubmit } from "./add_model/handle_add_model_submit";
+import CredentialsPanel from "@/components/model_add/credentials";
 import { getDisplayModelName } from "./view_model/model_name_display";
 import EditModelModal, { handleEditModelSubmit } from "./edit_model/edit_model_modal";
 import {
@@ -1039,6 +1040,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
               </Tab>
               <Tab>Model Analytics</Tab>
               <Tab>Model Retry Settings</Tab>
+              <Tab>LLM Credentials</Tab>
             </div>
 
             <div className="flex items-center space-x-2">
@@ -1481,6 +1483,9 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
                 Save
               </Button>
             </TabPanel>
+            <TabPanel>
+              <CredentialsPanel accessToken={accessToken} />
+            </TabPanel>
           </TabPanels>
         </TabGroup>
       )}