From f4303f5e22fcc82063f3541fcfdc55c590a20306 Mon Sep 17 00:00:00 2001 From: yuneng-jiang Date: Mon, 23 Feb 2026 18:01:10 -0800 Subject: [PATCH] feat: add useOnboarding hook with query and mutation Co-Authored-By: Claude Sonnet 4.6 --- .../hooks/onboarding/useOnboarding.test.ts | 126 ++++++++++++++++++ .../hooks/onboarding/useOnboarding.ts | 29 ++++ 2 files changed, 155 insertions(+) create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/hooks/onboarding/useOnboarding.test.ts create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/hooks/onboarding/useOnboarding.ts diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/onboarding/useOnboarding.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/onboarding/useOnboarding.test.ts new file mode 100644 index 00000000000..f5f63c0586e --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/onboarding/useOnboarding.test.ts @@ -0,0 +1,126 @@ +import { getOnboardingCredentials, claimOnboardingToken } from "@/components/networking"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { renderHook, waitFor, act } from "@testing-library/react"; +import React, { ReactNode } from "react"; +import { beforeEach, describe, expect, it, vi } from "vitest"; +import { useOnboardingCredentials, useClaimOnboardingToken } from "./useOnboarding"; + +vi.mock("@/components/networking", () => ({ + getOnboardingCredentials: vi.fn(), + claimOnboardingToken: vi.fn(), +})); + +const mockUseUIConfig = vi.fn(); +vi.mock("@/app/(dashboard)/hooks/uiConfig/useUIConfig", () => ({ + useUIConfig: () => mockUseUIConfig(), +})); + +const mockCredentialsResponse = { token: "mock.jwt.token", login_url: "http://example.com/login" }; + +describe("useOnboardingCredentials", () => { + let queryClient: QueryClient; + + beforeEach(() => { + queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } }); + vi.clearAllMocks(); + mockUseUIConfig.mockReturnValue({ isLoading: false }); + }); + + const wrapper = ({ children }: { children: ReactNode }) => + React.createElement(QueryClientProvider, { client: queryClient }, children); + + it("fetches credentials when inviteId is provided and UIConfig is loaded", async () => { + (getOnboardingCredentials as any).mockResolvedValue(mockCredentialsResponse); + + const { result } = renderHook(() => useOnboardingCredentials("invite-123"), { wrapper }); + + expect(result.current.isLoading).toBe(true); + + await waitFor(() => expect(result.current.isSuccess).toBe(true)); + + expect(result.current.data).toEqual(mockCredentialsResponse); + expect(getOnboardingCredentials).toHaveBeenCalledWith("invite-123"); + expect(getOnboardingCredentials).toHaveBeenCalledTimes(1); + }); + + it("does not fetch when inviteId is null", async () => { + const { result } = renderHook(() => useOnboardingCredentials(null), { wrapper }); + + expect(result.current.isLoading).toBe(false); + expect(result.current.isFetched).toBe(false); + expect(getOnboardingCredentials).not.toHaveBeenCalled(); + }); + + it("does not fetch while UIConfig is loading", async () => { + mockUseUIConfig.mockReturnValue({ isLoading: true }); + + const { result } = renderHook(() => useOnboardingCredentials("invite-123"), { wrapper }); + + expect(result.current.isLoading).toBe(false); + expect(result.current.isFetched).toBe(false); + expect(getOnboardingCredentials).not.toHaveBeenCalled(); + }); + + it("exposes error state when fetch fails", async () => { + const error = new Error("Invalid invite"); + (getOnboardingCredentials as any).mockRejectedValue(error); + + const { result } = renderHook(() => useOnboardingCredentials("bad-invite"), { wrapper }); + + await waitFor(() => expect(result.current.isError).toBe(true)); + + expect(result.current.error).toEqual(error); + }); +}); + +describe("useClaimOnboardingToken", () => { + let queryClient: QueryClient; + + beforeEach(() => { + queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } }); + vi.clearAllMocks(); + mockUseUIConfig.mockReturnValue({ isLoading: false }); + }); + + const wrapper = ({ children }: { children: ReactNode }) => + React.createElement(QueryClientProvider, { client: queryClient }, children); + + it("calls claimOnboardingToken with correct params", async () => { + (claimOnboardingToken as any).mockResolvedValue({ success: true }); + + const { result } = renderHook(() => useClaimOnboardingToken(), { wrapper }); + + act(() => { + result.current.mutate({ + accessToken: "acc-token", + inviteId: "invite-123", + userId: "user-456", + password: "secret", + }); + }); + + await waitFor(() => expect(result.current.isSuccess).toBe(true)); + + expect(claimOnboardingToken).toHaveBeenCalledWith("acc-token", "invite-123", "user-456", "secret"); + }); + + it("exposes error state when mutation fails", async () => { + const error = new Error("Claim failed"); + (claimOnboardingToken as any).mockRejectedValue(error); + + const { result } = renderHook(() => useClaimOnboardingToken(), { wrapper }); + + act(() => { + result.current.mutate({ + accessToken: "acc-token", + inviteId: "invite-123", + userId: "user-456", + password: "secret", + }); + }); + + await waitFor(() => expect(result.current.isError).toBe(true)); + + expect(result.current.error).toEqual(error); + }); +}); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/onboarding/useOnboarding.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/onboarding/useOnboarding.ts new file mode 100644 index 00000000000..554444f46c1 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/onboarding/useOnboarding.ts @@ -0,0 +1,29 @@ +import { claimOnboardingToken, getOnboardingCredentials } from "@/components/networking"; +import { useMutation, useQuery } from "@tanstack/react-query"; +import { useUIConfig } from "../uiConfig/useUIConfig"; +import { createQueryKeys } from "../common/queryKeysFactory"; + +const onboardingKeys = createQueryKeys("onboarding"); + +export const useOnboardingCredentials = (inviteId: string | null) => { + const { isLoading: isUIConfigLoading } = useUIConfig(); + return useQuery({ + queryKey: onboardingKeys.detail(inviteId ?? ""), + queryFn: async () => await getOnboardingCredentials(inviteId!), + enabled: Boolean(inviteId) && !isUIConfigLoading, + }); +}; + +export interface ClaimTokenParams { + accessToken: string; + inviteId: string; + userId: string; + password: string; +} + +export const useClaimOnboardingToken = () => { + return useMutation({ + mutationFn: async ({ accessToken, inviteId, userId, password }: ClaimTokenParams) => + await claimOnboardingToken(accessToken, inviteId, userId, password), + }); +};