From 6ab64f0229bd394748c1ae29f4f0eddf0773cd0d Mon Sep 17 00:00:00 2001
From: mateo-berri <277851410+mateo-berri@users.noreply.github.com>
Date: Sat, 5 Sep 2026 17:46:26 -0700
Subject: [PATCH] refactor(ui): move the credential wizard next to
 CredentialsPanel

AddProviderPanel is no longer a panel or about providers, so it becomes AddCredentialWizard under components/model_add, colocated with the panel that opens it
---
 .../model_add/CredentialsPanel.test.tsx          |  4 ++--
 .../components/model_add/CredentialsPanel.tsx    |  4 ++--
 .../AddCredentialWizard.integration.test.tsx}    |  8 ++++----
 .../AddCredentialWizard.tsx}                     |  4 ++--
 .../add_credential_wizard}/ReviewModelsStep.tsx  |  4 ++--
 .../add_credential_wizard}/WizardSteps.tsx       | 16 ++++++++--------
 .../anthropicFederation.test.ts                  |  0
 .../anthropicFederation.ts                       |  0
 .../add_credential_wizard}/wizardLogic.test.ts   |  0
 .../add_credential_wizard}/wizardLogic.ts        |  0
 10 files changed, 20 insertions(+), 20 deletions(-)
 rename ui/litellm-dashboard/src/{app/(dashboard)/models-and-endpoints/panels/add-provider/AddProviderPanel.integration.test.tsx => components/model_add/add_credential_wizard/AddCredentialWizard.integration.test.tsx} (99%)
 rename ui/litellm-dashboard/src/{app/(dashboard)/models-and-endpoints/panels/add-provider/AddProviderPanel.tsx => components/model_add/add_credential_wizard/AddCredentialWizard.tsx} (99%)
 rename ui/litellm-dashboard/src/{app/(dashboard)/models-and-endpoints/panels/add-provider => components/model_add/add_credential_wizard}/ReviewModelsStep.tsx (96%)
 rename ui/litellm-dashboard/src/{app/(dashboard)/models-and-endpoints/panels/add-provider => components/model_add/add_credential_wizard}/WizardSteps.tsx (92%)
 rename ui/litellm-dashboard/src/{app/(dashboard)/models-and-endpoints/panels/add-provider => components/model_add/add_credential_wizard}/anthropicFederation.test.ts (100%)
 rename ui/litellm-dashboard/src/{app/(dashboard)/models-and-endpoints/panels/add-provider => components/model_add/add_credential_wizard}/anthropicFederation.ts (100%)
 rename ui/litellm-dashboard/src/{app/(dashboard)/models-and-endpoints/panels/add-provider => components/model_add/add_credential_wizard}/wizardLogic.test.ts (100%)
 rename ui/litellm-dashboard/src/{app/(dashboard)/models-and-endpoints/panels/add-provider => components/model_add/add_credential_wizard}/wizardLogic.ts (100%)

diff --git a/ui/litellm-dashboard/src/components/model_add/CredentialsPanel.test.tsx b/ui/litellm-dashboard/src/components/model_add/CredentialsPanel.test.tsx
index 67774efc1e9..587b6ae34e8 100644
--- a/ui/litellm-dashboard/src/components/model_add/CredentialsPanel.test.tsx
+++ b/ui/litellm-dashboard/src/components/model_add/CredentialsPanel.test.tsx
@@ -56,8 +56,8 @@ vi.mock("./CredentialModal", () => ({
   },
 }));
 
-vi.mock("@/app/(dashboard)/models-and-endpoints/panels/add-provider/AddProviderPanel", () => ({
-  default: function AddProviderPanelMock({ onClose }: { onClose: () => void }) {
+vi.mock("./add_credential_wizard/AddCredentialWizard", () => ({
+  default: function AddCredentialWizardMock({ onClose }: { onClose: () => void }) {
     return (
       <button data-testid="add-credential-wizard-close" onClick={onClose}>
         close wizard
diff --git a/ui/litellm-dashboard/src/components/model_add/CredentialsPanel.tsx b/ui/litellm-dashboard/src/components/model_add/CredentialsPanel.tsx
index f15fc62b725..45d1ce1479d 100644
--- a/ui/litellm-dashboard/src/components/model_add/CredentialsPanel.tsx
+++ b/ui/litellm-dashboard/src/components/model_add/CredentialsPanel.tsx
@@ -5,7 +5,7 @@ import { useState } from "react";
 
 import { useCredentials } from "@/app/(dashboard)/hooks/credentials/useCredentials";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import AddProviderPanel from "@/app/(dashboard)/models-and-endpoints/panels/add-provider/AddProviderPanel";
+import AddCredentialWizard from "./add_credential_wizard/AddCredentialWizard";
 import { credentialDeleteCall, CredentialItem, credentialUpdateCall } from "@/components/networking";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
@@ -123,7 +123,7 @@ export default function CredentialsPanel() {
             <DialogHeader>
               <DialogTitle>Add Credential</DialogTitle>
             </DialogHeader>
-            <AddProviderPanel onClose={() => setIsAddWizardOpen(false)} />
+            <AddCredentialWizard onClose={() => setIsAddWizardOpen(false)} />
           </DialogContent>
         </Dialog>
       )}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/AddProviderPanel.integration.test.tsx b/ui/litellm-dashboard/src/components/model_add/add_credential_wizard/AddCredentialWizard.integration.test.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/AddProviderPanel.integration.test.tsx
rename to ui/litellm-dashboard/src/components/model_add/add_credential_wizard/AddCredentialWizard.integration.test.tsx
index 6516ac06f8f..c914a46f96b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/AddProviderPanel.integration.test.tsx
+++ b/ui/litellm-dashboard/src/components/model_add/add_credential_wizard/AddCredentialWizard.integration.test.tsx
@@ -5,10 +5,10 @@ import {
   screen,
   waitFor,
   within,
-} from "../../../../../../tests/test-utils";
+} from "../../../../tests/test-utils";
 import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import AddProviderPanel from "./AddProviderPanel";
+import AddCredentialWizard from "./AddCredentialWizard";
 
 const discoverProviderModelsCall = vi.fn();
 const credentialCreateCall = vi.fn();
@@ -129,7 +129,7 @@ const PROXY_ADMIN = { accessToken: "test-access-token" };
 const setup = async () => {
   const user = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never });
   const onClose = vi.fn();
-  renderWithProviders(<AddProviderPanel onClose={onClose} />);
+  renderWithProviders(<AddCredentialWizard onClose={onClose} />);
   await screen.findByLabelText("Provider");
   return { user, onClose };
 };
@@ -179,7 +179,7 @@ const expectNoFederationIdFields = () => {
   }
 };
 
-describe("AddProviderPanel", () => {
+describe("AddCredentialWizard", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockAuthorized.mockReturnValue(PROXY_ADMIN);
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/AddProviderPanel.tsx b/ui/litellm-dashboard/src/components/model_add/add_credential_wizard/AddCredentialWizard.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/AddProviderPanel.tsx
rename to ui/litellm-dashboard/src/components/model_add/add_credential_wizard/AddCredentialWizard.tsx
index 7b6908539f2..9014af2d7be 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/AddProviderPanel.tsx
+++ b/ui/litellm-dashboard/src/components/model_add/add_credential_wizard/AddCredentialWizard.tsx
@@ -94,11 +94,11 @@ const StepIndicator: React.FC<{ step: WizardStep; skipJwks: boolean }> = ({ step
   );
 };
 
-interface AddProviderPanelProps {
+interface AddCredentialWizardProps {
   onClose: () => void;
 }
 
-export default function AddProviderPanel({ onClose }: AddProviderPanelProps) {
+export default function AddCredentialWizard({ onClose }: AddCredentialWizardProps) {
   const { accessToken } = useAuthorized();
   const queryClient = useQueryClient();
   const { data: providerMetadata } = useProviderFields();
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/ReviewModelsStep.tsx b/ui/litellm-dashboard/src/components/model_add/add_credential_wizard/ReviewModelsStep.tsx
similarity index 96%
rename from ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/ReviewModelsStep.tsx
rename to ui/litellm-dashboard/src/components/model_add/add_credential_wizard/ReviewModelsStep.tsx
index 20326a48736..7db1c846e1b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/ReviewModelsStep.tsx
+++ b/ui/litellm-dashboard/src/components/model_add/add_credential_wizard/ReviewModelsStep.tsx
@@ -101,11 +101,11 @@ const ReviewModelsStep: React.FC<ReviewModelsStepProps> = ({ rows, setRows, crea
 
         <div className="flex items-end gap-2">
           <div className="flex-1">
-            <label htmlFor="add-provider-manual-model" className="mb-1 block text-xs text-muted-foreground">
+            <label htmlFor="credential-wizard-manual-model" className="mb-1 block text-xs text-muted-foreground">
               Add a hidden model manually
             </label>
             <Input
-              id="add-provider-manual-model"
+              id="credential-wizard-manual-model"
               value={manualId}
               onChange={(e) => setManualId(e.target.value)}
               placeholder="upstream model id"
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/WizardSteps.tsx b/ui/litellm-dashboard/src/components/model_add/add_credential_wizard/WizardSteps.tsx
similarity index 92%
rename from ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/WizardSteps.tsx
rename to ui/litellm-dashboard/src/components/model_add/add_credential_wizard/WizardSteps.tsx
index ed5bcc923aa..8a9ea7cb817 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/WizardSteps.tsx
+++ b/ui/litellm-dashboard/src/components/model_add/add_credential_wizard/WizardSteps.tsx
@@ -47,9 +47,9 @@ export const ProviderStep: React.FC<ProviderStepProps> = ({
   <Card>
     <CardContent className="space-y-4">
       <Field>
-        <FieldLabel htmlFor="add-provider-provider">Provider</FieldLabel>
+        <FieldLabel htmlFor="credential-wizard-provider">Provider</FieldLabel>
         <SearchSelect
-          inputId="add-provider-provider"
+          inputId="credential-wizard-provider"
           options={providerOptions}
           placeholder="Select a provider"
           value={selectedProvider ?? ""}
@@ -57,9 +57,9 @@ export const ProviderStep: React.FC<ProviderStepProps> = ({
         />
       </Field>
       <Field>
-        <FieldLabel htmlFor="add-provider-credential-name">Credential name</FieldLabel>
+        <FieldLabel htmlFor="credential-wizard-credential-name">Credential name</FieldLabel>
         <Input
-          id="add-provider-credential-name"
+          id="credential-wizard-credential-name"
           value={credentialName}
           onChange={(e) => onCredentialNameChange(e.target.value)}
           placeholder="e.g. anthropic-prod"
@@ -120,15 +120,15 @@ export const JwksStep: React.FC<JwksStepProps> = ({
         )}
         {ANTHROPIC_FEDERATION_FIELDS.map((field) => (
           <Field key={field.key}>
-            <FieldLabel htmlFor={`add-provider-${field.key}`}>{field.label}</FieldLabel>
+            <FieldLabel htmlFor={`credential-wizard-${field.key}`}>{field.label}</FieldLabel>
             <Input
-              id={`add-provider-${field.key}`}
+              id={`credential-wizard-${field.key}`}
               value={federationIds[field.key]}
               aria-required={field.required || undefined}
-              aria-describedby={`add-provider-${field.key}-hint`}
+              aria-describedby={`credential-wizard-${field.key}-hint`}
               onChange={(e) => onFederationIdChange(field.key, e.target.value)}
             />
-            <FieldDescription id={`add-provider-${field.key}-hint`}>{field.hint}</FieldDescription>
+            <FieldDescription id={`credential-wizard-${field.key}-hint`}>{field.hint}</FieldDescription>
           </Field>
         ))}
         {missing.length > 0 && (
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/anthropicFederation.test.ts b/ui/litellm-dashboard/src/components/model_add/add_credential_wizard/anthropicFederation.test.ts
similarity index 100%
rename from ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/anthropicFederation.test.ts
rename to ui/litellm-dashboard/src/components/model_add/add_credential_wizard/anthropicFederation.test.ts
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/anthropicFederation.ts b/ui/litellm-dashboard/src/components/model_add/add_credential_wizard/anthropicFederation.ts
similarity index 100%
rename from ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/anthropicFederation.ts
rename to ui/litellm-dashboard/src/components/model_add/add_credential_wizard/anthropicFederation.ts
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/wizardLogic.test.ts b/ui/litellm-dashboard/src/components/model_add/add_credential_wizard/wizardLogic.test.ts
similarity index 100%
rename from ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/wizardLogic.test.ts
rename to ui/litellm-dashboard/src/components/model_add/add_credential_wizard/wizardLogic.test.ts
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/wizardLogic.ts b/ui/litellm-dashboard/src/components/model_add/add_credential_wizard/wizardLogic.ts
similarity index 100%
rename from ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/add-provider/wizardLogic.ts
rename to ui/litellm-dashboard/src/components/model_add/add_credential_wizard/wizardLogic.ts