Merge pull request #17170 from BerriAI/litellm_key_create_duration_fix

[Fix] UI - Create Key Duration Fix

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(<CreateKey {...defaultProps} />);
+    expect(screen.getByRole("button", { name: /create new key/i })).toBeInTheDocument();
+  });
+});

ui/litellm-dashboard/src/components/organisms/create_key_button.tsx

@@ -904,11 +904,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                         : "Premium feature - Upgrade to disable global guardrails by key"
                     }
                   >
-                    <Switch 
-                      disabled={!premiumUser}
-                      checkedChildren="Yes"
-                      unCheckedChildren="No"
-                    />
+                    <Switch disabled={!premiumUser} checkedChildren="Yes" unCheckedChildren="No" />
                   </Form.Item>
                   <Form.Item
                     label={
@@ -973,7 +969,9 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                       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<CreateKeyProps> = ({
                         />
                       </div>
                     </AccordionBody>
-                    <Form.Item name="duration" hidden initialValue="">
+                    <Form.Item name="duration" hidden initialValue={null}>
                       <Input />
                     </Form.Item>
                   </Accordion>