From a347cf0a332ceb52ef579084bf0eae15999268e3 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Mon, 23 Feb 2026 21:06:17 -0800
Subject: [PATCH] feat: extract OnboardingErrorView component with tests

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../onboarding/OnboardingErrorView.test.tsx   | 25 +++++++++++++++++++
 .../app/onboarding/OnboardingErrorView.tsx    | 18 +++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/app/onboarding/OnboardingErrorView.test.tsx
 create mode 100644 ui/litellm-dashboard/src/app/onboarding/OnboardingErrorView.tsx

diff --git a/ui/litellm-dashboard/src/app/onboarding/OnboardingErrorView.test.tsx b/ui/litellm-dashboard/src/app/onboarding/OnboardingErrorView.test.tsx
new file mode 100644
index 00000000000..f2252a047a6
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/onboarding/OnboardingErrorView.test.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { OnboardingErrorView } from "./OnboardingErrorView";
+
+describe("OnboardingErrorView", () => {
+  it("shows the failed to load invitation message", () => {
+    render(<OnboardingErrorView />);
+    expect(screen.getByText("Failed to load invitation")).toBeInTheDocument();
+  });
+
+  it("shows the expiry description", () => {
+    render(<OnboardingErrorView />);
+    expect(
+      screen.getByText("The invitation link may be invalid or expired.")
+    ).toBeInTheDocument();
+  });
+
+  it("renders a Back to Login link pointing to /ui/login", () => {
+    render(<OnboardingErrorView />);
+    // antd Button with href renders as an <a> element
+    const link = screen.getByRole("link", { name: "Back to Login" });
+    expect(link).toHaveAttribute("href", "/ui/login");
+  });
+});
diff --git a/ui/litellm-dashboard/src/app/onboarding/OnboardingErrorView.tsx b/ui/litellm-dashboard/src/app/onboarding/OnboardingErrorView.tsx
new file mode 100644
index 00000000000..ca0f57c56ce
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/onboarding/OnboardingErrorView.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Alert, Button } from "antd";
+
+export function OnboardingErrorView() {
+  return (
+    <div className="mx-auto w-full max-w-md mt-10">
+      <Alert
+        type="error"
+        message="Failed to load invitation"
+        description="The invitation link may be invalid or expired."
+        showIcon
+      />
+      <div className="mt-4">
+        <Button href="/ui/login">Back to Login</Button>
+      </div>
+    </div>
+  );
+}