mirror of
https://github.com/diegosouzapw/OmniRoute.git
synced 2026-07-26 09:52:11 +03:00
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:
committed by
GitHub
parent
e44f125992
commit
8a7b62ec85
@@ -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} />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user