fix(dashboard): remove the always-on Auto-Routing (combo) banner from the home page (#6164)

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 <AutoRoutingBanner /> usage + import from home/page.tsx and
delete the now-unused component and its test.
This commit is contained in:
Diego Rodrigues de Sa e Souza
2026-07-05 02:29:24 -03:00
committed by GitHub
parent e44f125992
commit 8a7b62ec85
3 changed files with 0 additions and 198 deletions

View File

@@ -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 && <BootstrapBanner />}
<AutoRoutingBanner />
<HomePageClient machineId={machineId} />
</>
);

View File

@@ -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<string, string>();
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(<AutoRoutingBanner />);
});
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(<AutoRoutingBanner />);
});
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(<AutoRoutingBanner />);
});
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(<AutoRoutingBanner />);
});
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(<AutoRoutingBanner />);
});
expect(container.querySelector('[role="banner"]')).toBeFalsy();
});
});

View File

@@ -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 (
<div
role="banner"
aria-label="Auto-routing mode active"
className="relative overflow-hidden rounded-lg border-l-4 border-blue-500 bg-blue-50/50 p-4 my-4 dark:bg-blue-950/30 transition-colors"
>
<div className="flex items-start gap-3">
<div className="flex items-center gap-2">
<span className="inline-flex h-2 w-2 animate-pulse rounded-full bg-blue-500" />
<span className="font-semibold text-sm text-blue-700 dark:text-blue-300">
Auto-Routing Active
</span>
</div>
<div className="text-sm leading-relaxed text-text-muted">
OmniRoute is automatically routing requests using combo-based strategies.
<span className="block sm:inline sm:ml-1">
View or change your routing configuration on the{" "}
<Link
href="/dashboard/combos"
className="text-blue-600 hover:text-blue-800 underline dark:text-blue-400 dark:hover:text-blue-300"
>
Combos page
</Link>
.
</span>
</div>
<button
type="button"
onClick={handleDismiss}
aria-label="Dismiss auto-routing banner"
className="ml-auto flex-shrink-0 rounded-md p-1 text-text-muted hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900/50 dark:hover:text-blue-300 transition-colors"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="h-5 w-5"
aria-hidden="true"
>
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
);
}