7415b40240
From the 2026-07-14 UI/UX audit (17/40). Four phases: P1 — Settings route crashed on Agents→Edit (Input/Textarea used but never imported). Added imports + a shared route-level error boundary (components/route-error.tsx) re-exported from all shell routes, so one crashing panel degrades to an explained card with the nav intact instead of replacing the whole app with a stack trace. Corrected the stale CLAUDE.md claim that `npm run typecheck` crashes — it works, and would have caught the missing import. P2 — Error/empty/feedback foundations. Fixed useSession identity churn that fired ~3x duplicate fetches per screen and self-inflicted 429s (referentially stable snapshot). New lib/errors.ts (describeError → plain-language + the fix) and components/data-state.tsx (DataState renders exactly one of error/loading/empty/content, so a failed load never shows as "empty"; DialogError for in-dialog failures; 429 auto-retry). Rolled across all 15 list routes; every mutation now toasts. Surfaced+fixed two silent-failure bugs (sso + buckets-CORS swallowed load errors; the latter could wipe rules on save). P3 — Nav IA + trust cleanup. Default-expanded rail; regrouped into 7 coherent sections; collapsed the Apps/Plan/Entitlements stub triplication into one honest /billing page; deleted fabricated seeded notifications and the dead Help menu item; fixed the 403 copy (referenced a tenant switcher that doesn't exist); removed orphan /assistant + /library routes; gated dev-seed login hints behind DEV; renamed /activity → /audit-log with a redirect. P4 — Tenant detail page (routes/tenants.$id.tsx + components/tenant-detail/*), closing the provision→configure gap. 8 tabs (Overview, Plan & quotas, Branding, Localization, Email & SMS, Feature flags, IP rules, Inbound webhooks), each verified saving to the real backend. Row name links to detail. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
// Per-route capability guard. Wrap the page body — if the active
|
|
// session doesn't hold the route's capability, render a 403 instead of
|
|
// the page. Server-side authz is still the real gate; this is UX so a
|
|
// deep link doesn't 500 inside a route loader that assumes access.
|
|
|
|
import { useLocation } from "react-router"
|
|
import { ShieldAlert } from "lucide-react"
|
|
|
|
import {
|
|
capabilityForPath,
|
|
useCapabilities,
|
|
type Capability,
|
|
} from "~/lib/capabilities"
|
|
import { Card, CardContent } from "~/components/ui/card"
|
|
|
|
type RouteGuardProps = {
|
|
children: React.ReactNode
|
|
/** Override the capability derived from the current path. Useful for
|
|
* nested routes where you want to check a specific cap. */
|
|
capability?: Capability
|
|
}
|
|
|
|
export function RouteGuard({ children, capability }: RouteGuardProps) {
|
|
const caps = useCapabilities()
|
|
const location = useLocation()
|
|
const required = capability ?? capabilityForPath(location.pathname)
|
|
// No mapping = route is intentionally unguarded (e.g. login flows
|
|
// never reach AppShell anyway).
|
|
if (!required) return <>{children}</>
|
|
if (caps.has(required)) return <>{children}</>
|
|
return <Forbidden capability={required} />
|
|
}
|
|
|
|
function Forbidden({ capability }: { capability: Capability }) {
|
|
return (
|
|
<div className="flex min-h-[60vh] items-center justify-center">
|
|
<Card className="max-w-md">
|
|
<CardContent className="flex flex-col items-center gap-3 py-10 text-center">
|
|
<ShieldAlert className="size-10 text-muted-foreground" />
|
|
<h2 className="text-lg font-semibold">You can't access this page</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
This view needs the{" "}
|
|
<code className="font-mono text-xs">{capability}</code> capability,
|
|
which your account doesn't hold on the current tenant. Ask a platform
|
|
administrator to grant it.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|