diff --git a/docs/my-website/docs/pass_through/anthropic_completion.md b/docs/my-website/docs/pass_through/anthropic_completion.md index e644b7d348..e0c7c7c549 100644 --- a/docs/my-website/docs/pass_through/anthropic_completion.md +++ b/docs/my-website/docs/pass_through/anthropic_completion.md @@ -1,7 +1,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -# Anthropic SDK +# Anthropic Passthrough Pass-through endpoints for Anthropic - call provider-specific endpoint, in native format (no translation). diff --git a/ui/litellm-dashboard/src/components/add_model/add_model_tab.test.tsx b/ui/litellm-dashboard/src/components/add_model/add_model_tab.test.tsx new file mode 100644 index 0000000000..a74c6d283c --- /dev/null +++ b/ui/litellm-dashboard/src/components/add_model/add_model_tab.test.tsx @@ -0,0 +1,101 @@ +import { render, renderHook } from "@testing-library/react"; +import { describe, it, vi, expect } from "vitest"; +import { Form } from "antd"; +import AddModelTab from "./add_model_tab"; +import { Providers } from "../provider_info_helpers"; +import type { Team } from "../key_team_helpers/key_list"; +import type { CredentialItem } from "../networking"; +import type { UploadProps } from "antd/es/upload"; + +// Mock the networking module +vi.mock("../networking", async () => { + const actual = await vi.importActual("../networking"); + return { + ...actual, + getGuardrailsList: vi.fn().mockResolvedValue({ + guardrails: [{ guardrail_name: "test-guardrail-1" }, { guardrail_name: "test-guardrail-2" }], + }), + tagListCall: vi.fn().mockResolvedValue({}), + modelAvailableCall: vi.fn().mockResolvedValue({ + data: [{ id: "model-group-1" }, { id: "model-group-2" }], + }), + }; +}); + +describe("Add Model Tab", () => { + it("should render", () => { + // Create a form instance using renderHook + const { result } = renderHook(() => Form.useForm()); + const [form] = result.current; + + // Mock functions + const handleOk = vi.fn(); + const setSelectedProvider = vi.fn(); + const setProviderModelsFn = vi.fn(); + const getPlaceholder = vi.fn((provider: Providers) => `Enter ${provider} model name`); + const setShowAdvancedSettings = vi.fn(); + + // Mock data + const selectedProvider = Providers.OpenAI; + const providerModels = ["gpt-4", "gpt-3.5-turbo"]; + const showAdvancedSettings = false; + + const teams: Team[] = [ + { + team_id: "team-1", + team_alias: "Test Team", + models: ["gpt-4"], + max_budget: 100, + budget_duration: "monthly", + tpm_limit: null, + rpm_limit: null, + organization_id: "org-1", + created_at: "2024-01-01T00:00:00Z", + keys: [], + members_with_roles: [], + }, + ]; + + const credentials: CredentialItem[] = [ + { + credential_name: "test-credential", + credential_values: {}, + credential_info: { + custom_llm_provider: "openai", + description: "Test credential", + }, + }, + ]; + + const uploadProps: UploadProps = { + beforeUpload: () => false, + showUploadList: false, + }; + + const accessToken = "test-access-token"; + const userRole = "Admin"; + const premiumUser = true; + + const { getByRole } = render( + , + ); + // Check for the heading specifically + expect(getByRole("heading", { name: "Add Model" })).toBeInTheDocument(); + }); +}); diff --git a/ui/litellm-dashboard/src/components/add_model/add_model_tab.tsx b/ui/litellm-dashboard/src/components/add_model/add_model_tab.tsx index faf14c96a8..678ba741ca 100644 --- a/ui/litellm-dashboard/src/components/add_model/add_model_tab.tsx +++ b/ui/litellm-dashboard/src/components/add_model/add_model_tab.tsx @@ -240,7 +240,7 @@ const AddModelTab: React.FC = ({ - + = ({ /> -
-
- OR -
-
- @@ -277,13 +271,18 @@ const AddModelTab: React.FC = ({ console.log("🔑 Credential Name Changed:", credentialName); // Only show provider specific fields if no credentials selected if (!credentialName) { - return ; + return ( + <> +
+
+ OR +
+
+ + + ); } - return ( -
- Using existing credentials - no additional provider fields needed -
- ); + return null; }}