Admin UX overhaul: P0 fixes, error-UX foundations, nav cleanup, tenant detail page
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>
This commit is contained in:
jules
@@ -8,8 +8,9 @@ import {
|
||||
Trash2,
|
||||
} from "lucide-react"
|
||||
|
||||
import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-core-client"
|
||||
import { AlertBanner, ConfirmDialog, EmptyState, LoadingOverlay } from "@crema/feedback-ui"
|
||||
import { useArcadiaClient } from "@crema/arcadia-core-client"
|
||||
import { useToast } from "@crema/notification-ui"
|
||||
import { ConfirmDialog, EmptyState } from "@crema/feedback-ui"
|
||||
import {
|
||||
IncidentTimeline,
|
||||
StatusBoard,
|
||||
@@ -20,6 +21,8 @@ import {
|
||||
} from "@crema/status-ui"
|
||||
|
||||
import { AppShell } from "~/components/layout/app-shell"
|
||||
import { DataState, DialogError } from "~/components/data-state"
|
||||
import { errorMessage } from "~/lib/errors"
|
||||
import { Badge } from "~/components/ui/badge"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import {
|
||||
@@ -103,26 +106,45 @@ export default function StatusPageRoute() {
|
||||
const [incidents, setIncidents] = useState<Incident[]>([])
|
||||
const [subscribers, setSubscribers] = useState<Subscriber[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [info, setInfo] = useState<string | null>(null)
|
||||
// Three independent endpoints, three independent errors. These used to be
|
||||
// `.catch(() => [])` — every failure silently became an empty list, so a
|
||||
// broken incidents endpoint rendered as the reassuring "No incidents. No
|
||||
// drama is the right state." One failing tab must not blank the other two.
|
||||
const [componentsError, setComponentsError] = useState<unknown>(null)
|
||||
const [incidentsError, setIncidentsError] = useState<unknown>(null)
|
||||
const [subscribersError, setSubscribersError] = useState<unknown>(null)
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setError(null)
|
||||
setLoading(true)
|
||||
try {
|
||||
const [c, i, s] = await Promise.all([
|
||||
listComponents(arcadia).catch(() => [] as StatusComponent[]),
|
||||
listIncidents(arcadia).catch(() => [] as Incident[]),
|
||||
listSubscribers(arcadia).catch(() => [] as Subscriber[]),
|
||||
])
|
||||
setComponents(c)
|
||||
setIncidents(i)
|
||||
setSubscribers(s)
|
||||
} catch (err) {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Failed to load status page.")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setComponentsError(null)
|
||||
setIncidentsError(null)
|
||||
setSubscribersError(null)
|
||||
|
||||
const [c, i, s] = await Promise.allSettled([
|
||||
listComponents(arcadia),
|
||||
listIncidents(arcadia),
|
||||
listSubscribers(arcadia),
|
||||
])
|
||||
|
||||
if (c.status === "fulfilled") setComponents(c.value)
|
||||
else {
|
||||
setComponents([])
|
||||
setComponentsError(c.reason)
|
||||
}
|
||||
|
||||
if (i.status === "fulfilled") setIncidents(i.value)
|
||||
else {
|
||||
setIncidents([])
|
||||
setIncidentsError(i.reason)
|
||||
}
|
||||
|
||||
if (s.status === "fulfilled") setSubscribers(s.value)
|
||||
else {
|
||||
setSubscribers([])
|
||||
setSubscribersError(s.reason)
|
||||
}
|
||||
|
||||
setLoading(false)
|
||||
}, [arcadia])
|
||||
|
||||
useEffect(() => {
|
||||
@@ -193,17 +215,6 @@ export default function StatusPageRoute() {
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
{error ? (
|
||||
<AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
|
||||
{error}
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
{info ? (
|
||||
<AlertBanner variant="success" dismissible onDismiss={() => setInfo(null)}>
|
||||
{info}
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
|
||||
{/* Live preview using the public-facing widget */}
|
||||
{uiComponents.length > 0 ? (
|
||||
<Card>
|
||||
@@ -242,9 +253,8 @@ export default function StatusPageRoute() {
|
||||
<ComponentsPanel
|
||||
components={components}
|
||||
loading={loading}
|
||||
error={componentsError}
|
||||
onChanged={refresh}
|
||||
onError={setError}
|
||||
onInfo={setInfo}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
@@ -253,14 +263,18 @@ export default function StatusPageRoute() {
|
||||
incidents={incidents}
|
||||
components={components}
|
||||
loading={loading}
|
||||
error={incidentsError}
|
||||
onChanged={refresh}
|
||||
onError={setError}
|
||||
onInfo={setInfo}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="subscribers" className="pt-4">
|
||||
<SubscribersPanel subscribers={subscribers} loading={loading} />
|
||||
<SubscribersPanel
|
||||
subscribers={subscribers}
|
||||
loading={loading}
|
||||
error={subscribersError}
|
||||
onRetry={refresh}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
@@ -296,17 +310,16 @@ function impactToSeverity(i: IncidentImpact): Severity {
|
||||
function ComponentsPanel({
|
||||
components,
|
||||
loading,
|
||||
error,
|
||||
onChanged,
|
||||
onError,
|
||||
onInfo,
|
||||
}: {
|
||||
components: StatusComponent[]
|
||||
loading: boolean
|
||||
error: unknown
|
||||
onChanged: () => Promise<void>
|
||||
onError: (msg: string | null) => void
|
||||
onInfo: (msg: string | null) => void
|
||||
}) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const toast = useToast()
|
||||
const [editor, setEditor] = useState<ComponentEditor>(null)
|
||||
const [pendingDelete, setPendingDelete] = useState<StatusComponent | null>(null)
|
||||
|
||||
@@ -323,13 +336,20 @@ function ComponentsPanel({
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="relative p-0">
|
||||
<LoadingOverlay
|
||||
active={loading && components.length === 0}
|
||||
label="Loading components…"
|
||||
/>
|
||||
{components.length === 0 && !loading ? (
|
||||
<EmptyState title="No components yet." description="Add the first one to seed the public board." className="py-8" />
|
||||
) : (
|
||||
<DataState
|
||||
loading={loading}
|
||||
error={error}
|
||||
isEmpty={components.length === 0}
|
||||
onRetry={onChanged}
|
||||
loadingLabel="Loading components…"
|
||||
empty={
|
||||
<EmptyState
|
||||
title="No components yet."
|
||||
description="Add the first one to seed the public board."
|
||||
className="py-8"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<ul className="divide-y border-y">
|
||||
{components.map((c) => (
|
||||
<li
|
||||
@@ -371,7 +391,7 @@ function ComponentsPanel({
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</DataState>
|
||||
</CardContent>
|
||||
|
||||
<ComponentEditorDialog
|
||||
@@ -379,10 +399,9 @@ function ComponentsPanel({
|
||||
onClose={() => setEditor(null)}
|
||||
onSaved={async (msg) => {
|
||||
setEditor(null)
|
||||
if (msg) onInfo(msg)
|
||||
await onChanged()
|
||||
toast.success(msg)
|
||||
}}
|
||||
onError={onError}
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
@@ -398,14 +417,15 @@ function ComponentsPanel({
|
||||
variant="danger"
|
||||
onConfirm={async () => {
|
||||
if (!pendingDelete) return
|
||||
const name = pendingDelete.name
|
||||
try {
|
||||
await deleteComponent(arcadia, pendingDelete.id)
|
||||
setPendingDelete(null)
|
||||
onInfo("Component deleted.")
|
||||
await onChanged()
|
||||
toast.success(`Deleted ${name}`)
|
||||
} catch (err) {
|
||||
onError(err instanceof ArcadiaError ? err.message : "Delete failed.")
|
||||
setPendingDelete(null)
|
||||
toast.error(errorMessage(err, `delete ${name}`))
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@@ -424,12 +444,10 @@ function ComponentEditorDialog({
|
||||
state,
|
||||
onClose,
|
||||
onSaved,
|
||||
onError,
|
||||
}: {
|
||||
state: ComponentEditor
|
||||
onClose: () => void
|
||||
onSaved: (msg?: string) => Promise<void>
|
||||
onError: (msg: string | null) => void
|
||||
onSaved: (msg: string) => Promise<void>
|
||||
}) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const open = state !== null
|
||||
@@ -442,6 +460,11 @@ function ComponentEditorDialog({
|
||||
const [groupName, setGroupName] = useState("")
|
||||
const [displayOrder, setDisplayOrder] = useState("0")
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState<unknown>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) setError(null)
|
||||
}, [open])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
@@ -461,7 +484,7 @@ function ComponentEditorDialog({
|
||||
}, [open, initial])
|
||||
|
||||
const submit = async () => {
|
||||
onError(null)
|
||||
setError(null)
|
||||
setSaving(true)
|
||||
try {
|
||||
const input: ComponentInput = {
|
||||
@@ -473,13 +496,13 @@ function ComponentEditorDialog({
|
||||
}
|
||||
if (isEdit && initial) {
|
||||
await updateComponent(arcadia, initial.id, input)
|
||||
await onSaved("Component updated.")
|
||||
await onSaved(`Updated ${name}`)
|
||||
} else {
|
||||
await createComponent(arcadia, input)
|
||||
await onSaved("Component created.")
|
||||
await onSaved(`Created ${name}`)
|
||||
}
|
||||
} catch (err) {
|
||||
onError(err instanceof ArcadiaError ? err.message : "Save failed.")
|
||||
setError(err)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
@@ -547,8 +570,21 @@ function ComponentEditorDialog({
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<DialogError
|
||||
error={error}
|
||||
context={isEdit ? "save the component" : "create the component"}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose} disabled={saving}>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
disabled={saving}
|
||||
data-action="status-component-form-cancel"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={submit} disabled={saving || !name} data-action="status-component-form-save">
|
||||
@@ -567,18 +603,17 @@ function IncidentsPanel({
|
||||
incidents,
|
||||
components,
|
||||
loading,
|
||||
error,
|
||||
onChanged,
|
||||
onError,
|
||||
onInfo,
|
||||
}: {
|
||||
incidents: Incident[]
|
||||
components: StatusComponent[]
|
||||
loading: boolean
|
||||
error: unknown
|
||||
onChanged: () => Promise<void>
|
||||
onError: (msg: string | null) => void
|
||||
onInfo: (msg: string | null) => void
|
||||
}) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const toast = useToast()
|
||||
const [editor, setEditor] = useState<IncidentEditor>(null)
|
||||
|
||||
return (
|
||||
@@ -594,15 +629,24 @@ function IncidentsPanel({
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="relative p-0">
|
||||
<LoadingOverlay active={loading && incidents.length === 0} label="Loading incidents…" />
|
||||
{incidents.length === 0 && !loading ? (
|
||||
<EmptyState
|
||||
icon={<AlertTriangle className="size-6" />}
|
||||
title="No incidents."
|
||||
description="No drama is the right state."
|
||||
className="py-8"
|
||||
/>
|
||||
) : (
|
||||
{/* "No drama is the right state" is a lovely thing to say — and a
|
||||
dangerous thing to say when the endpoint just 500'd. DataState makes
|
||||
sure it's only ever said about a load that actually succeeded. */}
|
||||
<DataState
|
||||
loading={loading}
|
||||
error={error}
|
||||
isEmpty={incidents.length === 0}
|
||||
onRetry={onChanged}
|
||||
loadingLabel="Loading incidents…"
|
||||
empty={
|
||||
<EmptyState
|
||||
icon={<AlertTriangle className="size-6" />}
|
||||
title="No incidents."
|
||||
description="No drama is the right state."
|
||||
className="py-8"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<ul className="flex flex-col divide-y border-y">
|
||||
{incidents.map((i) => (
|
||||
<li key={i.id} className="flex flex-col gap-2 px-3 py-3 text-sm">
|
||||
@@ -639,12 +683,10 @@ function IncidentsPanel({
|
||||
onClick={async () => {
|
||||
try {
|
||||
await resolveIncident(arcadia, i.id)
|
||||
onInfo("Incident resolved.")
|
||||
await onChanged()
|
||||
toast.success(`Resolved "${i.title}"`)
|
||||
} catch (err) {
|
||||
onError(
|
||||
err instanceof ArcadiaError ? err.message : "Resolve failed.",
|
||||
)
|
||||
toast.error(errorMessage(err, `resolve "${i.title}"`))
|
||||
}
|
||||
}}
|
||||
data-action={`status-incident-${i.id}-resolve`}
|
||||
@@ -683,7 +725,7 @@ function IncidentsPanel({
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</DataState>
|
||||
</CardContent>
|
||||
|
||||
<IncidentEditorDialog
|
||||
@@ -692,10 +734,9 @@ function IncidentsPanel({
|
||||
onClose={() => setEditor(null)}
|
||||
onSaved={async (msg) => {
|
||||
setEditor(null)
|
||||
if (msg) onInfo(msg)
|
||||
await onChanged()
|
||||
toast.success(msg)
|
||||
}}
|
||||
onError={onError}
|
||||
/>
|
||||
</Card>
|
||||
)
|
||||
@@ -714,13 +755,11 @@ function IncidentEditorDialog({
|
||||
components,
|
||||
onClose,
|
||||
onSaved,
|
||||
onError,
|
||||
}: {
|
||||
state: IncidentEditor
|
||||
components: StatusComponent[]
|
||||
onClose: () => void
|
||||
onSaved: (msg?: string) => Promise<void>
|
||||
onError: (msg: string | null) => void
|
||||
onSaved: (msg: string) => Promise<void>
|
||||
}) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const open = state !== null
|
||||
@@ -730,8 +769,7 @@ function IncidentEditorDialog({
|
||||
<PostUpdateDialog
|
||||
incident={state.incident}
|
||||
onClose={onClose}
|
||||
onSaved={() => onSaved("Update posted.")}
|
||||
onError={onError}
|
||||
onSaved={() => onSaved(`Posted an update on "${state.incident.title}"`)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -744,6 +782,11 @@ function IncidentEditorDialog({
|
||||
const [impact, setImpact] = useState<IncidentImpact>("minor")
|
||||
const [componentIds, setComponentIds] = useState<Set<string>>(new Set())
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState<unknown>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) setError(null)
|
||||
}, [open])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
@@ -761,7 +804,7 @@ function IncidentEditorDialog({
|
||||
}, [open, initial])
|
||||
|
||||
const submit = async () => {
|
||||
onError(null)
|
||||
setError(null)
|
||||
setSaving(true)
|
||||
try {
|
||||
const input: IncidentInput = {
|
||||
@@ -772,13 +815,13 @@ function IncidentEditorDialog({
|
||||
}
|
||||
if (isEdit && initial) {
|
||||
await updateIncident(arcadia, initial.id, input)
|
||||
await onSaved("Incident updated.")
|
||||
await onSaved(`Updated "${title}"`)
|
||||
} else {
|
||||
await createIncident(arcadia, input)
|
||||
await onSaved("Incident opened.")
|
||||
await onSaved(`Opened incident "${title}"`)
|
||||
}
|
||||
} catch (err) {
|
||||
onError(err instanceof ArcadiaError ? err.message : "Save failed.")
|
||||
setError(err)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
@@ -871,8 +914,21 @@ function IncidentEditorDialog({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<DialogError
|
||||
error={error}
|
||||
context={isEdit ? "save the incident" : "open the incident"}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose} disabled={saving}>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
disabled={saving}
|
||||
data-action="status-incident-form-cancel"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
@@ -893,26 +949,26 @@ function PostUpdateDialog({
|
||||
incident,
|
||||
onClose,
|
||||
onSaved,
|
||||
onError,
|
||||
}: {
|
||||
incident: Incident
|
||||
onClose: () => void
|
||||
onSaved: () => Promise<void>
|
||||
onError: (msg: string | null) => void
|
||||
}) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const [status, setStatus] = useState<IncidentStatus>(incident.status)
|
||||
const [body, setBody] = useState("")
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState<unknown>(null)
|
||||
|
||||
const submit = async () => {
|
||||
onError(null)
|
||||
setError(null)
|
||||
setSaving(true)
|
||||
try {
|
||||
await addIncidentUpdate(arcadia, incident.id, { status, body })
|
||||
await onSaved()
|
||||
} catch (err) {
|
||||
onError(err instanceof ArcadiaError ? err.message : "Post failed.")
|
||||
// The body the operator just wrote stays in the textarea.
|
||||
setError(err)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
@@ -955,8 +1011,16 @@ function PostUpdateDialog({
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? <DialogError error={error} context="post the update" /> : null}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose} disabled={saving}>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
disabled={saving}
|
||||
data-action="status-incident-update-cancel"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={submit} disabled={saving || !body} data-action="status-incident-update-save">
|
||||
@@ -974,30 +1038,32 @@ function PostUpdateDialog({
|
||||
function SubscribersPanel({
|
||||
subscribers,
|
||||
loading,
|
||||
error,
|
||||
onRetry,
|
||||
}: {
|
||||
subscribers: Subscriber[]
|
||||
loading: boolean
|
||||
error: unknown
|
||||
onRetry: () => void
|
||||
}) {
|
||||
if (loading && subscribers.length === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="relative py-8">
|
||||
<LoadingOverlay active label="Loading subscribers…" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
{subscribers.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={<Mail className="size-6" />}
|
||||
title="No subscribers yet."
|
||||
description="They appear here once they confirm via the public status page."
|
||||
className="py-8"
|
||||
/>
|
||||
) : (
|
||||
<DataState
|
||||
loading={loading}
|
||||
error={error}
|
||||
isEmpty={subscribers.length === 0}
|
||||
onRetry={onRetry}
|
||||
loadingLabel="Loading subscribers…"
|
||||
empty={
|
||||
<EmptyState
|
||||
icon={<Mail className="size-6" />}
|
||||
title="No subscribers yet."
|
||||
description="They appear here once they confirm via the public status page."
|
||||
className="py-8"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<ul className="divide-y border-y">
|
||||
{subscribers.map((s) => (
|
||||
<li
|
||||
@@ -1020,8 +1086,10 @@ function SubscribersPanel({
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</DataState>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export { RouteErrorBoundary as ErrorBoundary } from "~/components/route-error"
|
||||
|
||||
Reference in New Issue
Block a user