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

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

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>
       )}

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);

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();

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"

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 && (