fix(ui): wire bulk invite template download button

ui/litellm-dashboard/src/components/bulk_create_users_button.test.tsx

@@ -1,6 +1,7 @@
-import { render } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import BulkCreateUsersButton from "./bulk_create_users_button";
+import { getProxyUISettings } from "./networking";
 
 vi.mock("./networking", () => ({
   userCreateCall: vi.fn(),
@@ -21,8 +22,45 @@ vi.mock("./molecules/notifications_manager", () => ({
 }));
 
 describe("BulkCreateUsersButton", () => {
-  it("should render", () => {
-    const { getByText } = render(<BulkCreateUsersButton accessToken="test-token" teams={[]} possibleUIRoles={null} />);
-    expect(getByText("+ Bulk Invite Users")).toBeInTheDocument();
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.restoreAllMocks();
+  });
+
+  const renderBulkCreateUsersButton = async () => {
+    render(<BulkCreateUsersButton accessToken="test-token" teams={[]} possibleUIRoles={null} />);
+    await waitFor(() => expect(getProxyUISettings).toHaveBeenCalled());
+  };
+
+  it("should render", async () => {
+    await renderBulkCreateUsersButton();
+    expect(screen.getByRole("button", { name: "+ Bulk Invite Users" })).toBeInTheDocument();
+  });
+
+  it("should download the CSV template when the template button is clicked", async () => {
+    if (!URL.createObjectURL) {
+      Object.defineProperty(URL, "createObjectURL", {
+        configurable: true,
+        value: vi.fn(),
+      });
+    }
+
+    const createObjectURLSpy = vi.spyOn(URL, "createObjectURL").mockReturnValue("blob:template");
+    const revokeObjectURLSpy = vi.spyOn(URL, "revokeObjectURL").mockImplementation(() => {});
+    const anchorClickSpy = vi.spyOn(HTMLAnchorElement.prototype, "click");
+
+    await renderBulkCreateUsersButton();
+
+    act(() => {
+      fireEvent.click(screen.getByRole("button", { name: "+ Bulk Invite Users" }));
+    });
+
+    act(() => {
+      fireEvent.click(screen.getByRole("button", { name: /Download CSV Template/ }));
+    });
+
+    expect(createObjectURLSpy).toHaveBeenCalledWith(expect.any(Blob));
+    expect(anchorClickSpy).toHaveBeenCalledOnce();
+    expect(revokeObjectURLSpy).toHaveBeenCalledWith("blob:template");
   });
 });

ui/litellm-dashboard/src/components/bulk_create_users_button.tsx

@@ -629,7 +629,13 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
                   </div>
                 </div>
 
-                <Button type="primary" size="large" className="w-full md:w-auto" icon={<DownloadOutlined />}>
+                <Button
+                  type="primary"
+                  size="large"
+                  className="w-full md:w-auto"
+                  icon={<DownloadOutlined />}
+                  onClick={downloadTemplate}
+                >
                   Download CSV Template
                 </Button>
               </div>