diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.test.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.test.tsx
new file mode 100644
index 0000000000..08c05f5fad
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.test.tsx
@@ -0,0 +1,64 @@
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import CreateKey from "./create_key_button";
+
+const mockKeyCreateCall = vi.fn().mockResolvedValue({
+ key: "test-api-key",
+ soft_budget: null,
+});
+
+vi.mock("./networking", () => ({
+ keyCreateCall: mockKeyCreateCall,
+ modelAvailableCall: vi.fn().mockResolvedValue({ data: [] }),
+ getGuardrailsList: vi.fn().mockResolvedValue({ guardrails: [] }),
+ getPromptsList: vi.fn().mockResolvedValue({ prompts: [] }),
+ proxyBaseUrl: "http://localhost:4000",
+ getPossibleUserRoles: vi.fn().mockResolvedValue({
+ Admin: { ui_label: "Admin" },
+ User: { ui_label: "User" },
+ }),
+ userFilterUICall: vi.fn().mockResolvedValue([]),
+ keyCreateServiceAccountCall: vi.fn().mockResolvedValue({
+ key: "test-service-account-key",
+ soft_budget: null,
+ }),
+ fetchMCPAccessGroups: vi.fn().mockResolvedValue([]),
+}));
+
+vi.mock("./molecules/notifications_manager", () => ({
+ default: {
+ success: vi.fn(),
+ fromBackend: vi.fn(),
+ error: vi.fn(),
+ warning: vi.fn(),
+ info: vi.fn(),
+ clear: vi.fn(),
+ },
+}));
+
+describe("CreateKey", () => {
+ const defaultProps = {
+ userID: "test-user-id",
+ team: null,
+ userRole: "Admin",
+ accessToken: "test-token",
+ data: [],
+ teams: [],
+ addKey: vi.fn(),
+ premiumUser: false,
+ };
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ localStorage.clear();
+ mockKeyCreateCall.mockResolvedValue({
+ key: "test-api-key",
+ soft_budget: null,
+ });
+ });
+
+ it("should render the CreateKey component", () => {
+ render();
+ expect(screen.getByRole("button", { name: /create new key/i })).toBeInTheDocument();
+ });
+});
diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
index 1cb4623ca6..216982ea92 100644
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
@@ -904,11 +904,7 @@ const CreateKey: React.FC = ({
: "Premium feature - Upgrade to disable global guardrails by key"
}
>
-
+
= ({
value={form.getFieldValue("allowed_passthrough_routes")}
accessToken={accessToken}
placeholder={
- !premiumUser ? "Premium feature - Upgrade to set pass through routes by key" : "Select or enter pass through routes"
+ !premiumUser
+ ? "Premium feature - Upgrade to set pass through routes by key"
+ : "Select or enter pass through routes"
}
disabled={!premiumUser}
teamId={selectedCreateKeyTeam ? selectedCreateKeyTeam.team_id : null}
@@ -1181,7 +1179,7 @@ const CreateKey: React.FC = ({
/>
-
+