From 8a7b62ec857e4cc2a600488d8e1c075526775b68 Mon Sep 17 00:00:00 2001 From: Diego Rodrigues de Sa e Souza <8016841+diegosouzapw@users.noreply.github.com> Date: Sun, 5 Jul 2026 02:29:24 -0300 Subject: [PATCH] fix(dashboard): remove the always-on Auto-Routing (combo) banner from the home page (#6164) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The blue "Auto-Routing Active — OmniRoute is automatically routing requests using combo-based strategies" banner was rendered unconditionally on the home page (`/home`, the default dashboard landing) — it did NOT reflect whether auto-routing was actually active, and reappeared on every fresh browser / private window / cleared localStorage (dismissal is stored per-browser). It added noise to the landing page without conveying live state. Remove it: drop the usage + import from home/page.tsx and delete the now-unused component and its test. --- src/app/(dashboard)/home/page.tsx | 2 - .../components/AutoRoutingBanner.test.tsx | 116 ------------------ src/shared/components/AutoRoutingBanner.tsx | 80 ------------ 3 files changed, 198 deletions(-) delete mode 100644 src/shared/components/AutoRoutingBanner.test.tsx delete mode 100644 src/shared/components/AutoRoutingBanner.tsx diff --git a/src/app/(dashboard)/home/page.tsx b/src/app/(dashboard)/home/page.tsx index 0e27614634..b6c0796ad3 100644 --- a/src/app/(dashboard)/home/page.tsx +++ b/src/app/(dashboard)/home/page.tsx @@ -3,7 +3,6 @@ import { getMachineId } from "@/shared/utils/machine"; import { getSettings } from "@/lib/localDb"; import HomePageClient from "../dashboard/HomePageClient"; import BootstrapBanner from "../dashboard/BootstrapBanner"; -import AutoRoutingBanner from "@/shared/components/AutoRoutingBanner"; export const dynamic = "force-dynamic"; @@ -17,7 +16,6 @@ export default async function HomePage() { return ( <> {isBootstrapped && } - ); diff --git a/src/shared/components/AutoRoutingBanner.test.tsx b/src/shared/components/AutoRoutingBanner.test.tsx deleted file mode 100644 index e01cdd0b1d..0000000000 --- a/src/shared/components/AutoRoutingBanner.test.tsx +++ /dev/null @@ -1,116 +0,0 @@ -// @vitest-environment jsdom -import React from "react"; -import { act } from "react"; -import { createRoot } from "react-dom/client"; -import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; - -const cleanupCallbacks: Array<() => void> = []; - -function createTestStorage(): Storage { - const entries = new Map(); - return { - get length() { - return entries.size; - }, - clear: () => entries.clear(), - getItem: (key) => entries.get(key) ?? null, - key: (index) => Array.from(entries.keys())[index] ?? null, - removeItem: (key) => { - entries.delete(key); - }, - setItem: (key, value) => { - entries.set(key, value); - }, - }; -} - -function makeContainer(): HTMLElement { - const container = document.createElement("div"); - document.body.appendChild(container); - cleanupCallbacks.push(() => { - container.remove(); - }); - return container; -} - -describe("AutoRoutingBanner", () => { - beforeEach(() => { - ( - globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean } - ).IS_REACT_ACT_ENVIRONMENT = true; - vi.stubGlobal("localStorage", createTestStorage()); - localStorage.clear(); - }); - - afterEach(() => { - while (cleanupCallbacks.length > 0) { - cleanupCallbacks.pop()?.(); - } - document.body.innerHTML = ""; - localStorage.clear(); - vi.unstubAllGlobals(); - }); - - it("renders banner on first mount", async () => { - const { default: AutoRoutingBanner } = await import("./AutoRoutingBanner"); - const container = makeContainer(); - const root = createRoot(container); - await act(async () => { - root.render(); - }); - expect(container.querySelector('[role="banner"]')).toBeTruthy(); - expect(container.textContent).toContain("Auto-Routing Active"); - }); - - it("includes link to Combos page", async () => { - const { default: AutoRoutingBanner } = await import("./AutoRoutingBanner"); - const container = makeContainer(); - const root = createRoot(container); - await act(async () => { - root.render(); - }); - const link = container.querySelector('a[href="/dashboard/combos"]'); - expect(link).toBeTruthy(); - }); - - it("can be dismissed by clicking close button", async () => { - const { default: AutoRoutingBanner } = await import("./AutoRoutingBanner"); - const container = makeContainer(); - const root = createRoot(container); - await act(async () => { - root.render(); - }); - expect(container.querySelector('[role="banner"]')).toBeTruthy(); - const closeButton = container.querySelector('button[aria-label="Dismiss auto-routing banner"]'); - expect(closeButton).toBeTruthy(); - await act(async () => { - closeButton?.click(); - }); - expect(container.querySelector('[role="banner"]')).toBeFalsy(); - }); - - it("persists dismissal to localStorage", async () => { - const { default: AutoRoutingBanner } = await import("./AutoRoutingBanner"); - const container = makeContainer(); - const root = createRoot(container); - await act(async () => { - root.render(); - }); - const closeButton = container.querySelector('button[aria-label="Dismiss auto-routing banner"]'); - await act(async () => { - closeButton?.click(); - }); - expect(localStorage.getItem("auto-routing-banner-dismissed")).toBe("true"); - }); - - it("remains hidden after dismissal on remount", async () => { - localStorage.setItem("auto-routing-banner-dismissed", "true"); - const { default: AutoRoutingBanner } = await import("./AutoRoutingBanner"); - const container = makeContainer(); - const root = createRoot(container); - await act(async () => { - root.render(); - }); - expect(container.querySelector('[role="banner"]')).toBeFalsy(); - }); -}); diff --git a/src/shared/components/AutoRoutingBanner.tsx b/src/shared/components/AutoRoutingBanner.tsx deleted file mode 100644 index 3c232cdc8d..0000000000 --- a/src/shared/components/AutoRoutingBanner.tsx +++ /dev/null @@ -1,80 +0,0 @@ -"use client"; - -import Link from "next/link"; -import { useEffect, useState } from "react"; - -const AUTO_ROUTING_DISMISSED_KEY = "auto-routing-banner-dismissed"; - -export default function AutoRoutingBanner() { - const [isDismissed, setIsDismissed] = useState(false); - - useEffect(() => { - try { - const dismissed = localStorage.getItem(AUTO_ROUTING_DISMISSED_KEY); - if (dismissed === "true") { - // eslint-disable-next-line react-hooks/set-state-in-effect - setIsDismissed(true); - } - } catch { - // localStorage unavailable (SSR or private mode) — do nothing - } - }, []); - - const handleDismiss = () => { - try { - localStorage.setItem(AUTO_ROUTING_DISMISSED_KEY, "true"); - } catch { - // ignore localStorage errors (private mode, quotas) - } - - setIsDismissed(true); - }; - - if (isDismissed) return null; - - return ( -
-
-
- - - Auto-Routing Active - -
-
- OmniRoute is automatically routing requests using combo-based strategies. - - View or change your routing configuration on the{" "} - - Combos page - - . - -
- -
-
- ); -}