CremaUIStudio/arcadia-admin
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Admin UX overhaul: P0 fixes, error-UX foundations, nav cleanup, tenant detail page

Browse Source 
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
2026-07-14 13:43:57 +10:00
parent 938143f3f5
commit 7415b40240
51 changed files with 5923 additions and 4575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
app/routes/sso.tsx
View File

@@ -9,7 +9,8 @@ import {
X,
} from "lucide-react"
import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-core-client"
import { useArcadiaClient } from "@crema/arcadia-core-client"
import { useToast } from "@crema/notification-ui"
import {
ActionsCell,
BadgeCell,
@@ -18,21 +19,16 @@ import {
Pagination,
useTable,
type ActionItem,
type BadgeTone,
type Column,
} from "@crema/table-ui"
import { AlertBanner, ConfirmDialog, EmptyState, LoadingOverlay } from "@crema/feedback-ui"
import { ConfirmDialog, EmptyState } from "@crema/feedback-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 {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "~/components/ui/card"
import { Card, CardContent } from "~/components/ui/card"
import {
Dialog,
DialogContent,
@@ -68,40 +64,65 @@ type Editor =
| { kind: "edit"; idp: IdentityProvider }
| null
/** Who a SAML session belongs to, in the operator's words. */
function sessionLabel(s: SamlSession): string {
return s.name_id ?? s.user_id
}
export default function SsoRoute() {
const session = useSession()
const arcadia = useArcadiaClient()
const toast = useToast()
// Two tabs, two independent fetches. They used to share one load that
// swallowed each failure with `.catch(() => [])`, so a broken endpoint was
// indistinguishable from "no identity providers".
const [idps, setIdps] = useState<IdentityProvider[]>([])
const [idpsLoading, setIdpsLoading] = useState(true)
const [idpsError, setIdpsError] = useState<unknown>(null)
const [sessions, setSessions] = useState<SamlSession[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [info, setInfo] = useState<string | null>(null)
const [sessionsLoading, setSessionsLoading] = useState(true)
const [sessionsError, setSessionsError] = useState<unknown>(null)
const [editor, setEditor] = useState<Editor>(null)
const [pendingDelete, setPendingDelete] = useState<IdentityProvider | null>(null)
const [pendingSessionDestroy, setPendingSessionDestroy] = useState<SamlSession | null>(null)
const refresh = useCallback(async () => {
setError(null)
setLoading(true)
const refreshIdps = useCallback(async () => {
setIdpsError(null)
setIdpsLoading(true)
try {
const [i, s] = await Promise.all([
listIdentityProviders(arcadia).catch(() => [] as IdentityProvider[]),
listSamlSessions(arcadia).catch(() => [] as SamlSession[]),
])
setIdps(i)
setSessions(s)
setIdps(await listIdentityProviders(arcadia))
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Failed to load SSO data.")
setIdpsError(err)
} finally {
setLoading(false)
setIdpsLoading(false)
}
}, [arcadia])
const refreshSessions = useCallback(async () => {
setSessionsError(null)
setSessionsLoading(true)
try {
setSessions(await listSamlSessions(arcadia))
} catch (err) {
setSessionsError(err)
} finally {
setSessionsLoading(false)
}
}, [arcadia])
const refresh = useCallback(async () => {
await Promise.all([refreshIdps(), refreshSessions()])
}, [refreshIdps, refreshSessions])
useEffect(() => {
if (session) refresh()
}, [session, refresh])
const loading = idpsLoading || sessionsLoading
useRegisterContext("sso", {
identity_providers: idps.length,
enabled_idps: idps.filter((i) => i.enabled).length,
@@ -176,12 +197,13 @@ export default function SsoRoute() {
label: i.enabled ? "Disable" : "Enable",
dataAction: `idp-${i.id}-toggle`,
onSelect: async () => {
const verb = i.enabled ? "disable" : "enable"
try {
await updateIdentityProvider(arcadia, i.id, { enabled: !i.enabled })
setInfo(`${i.name} ${i.enabled ? "disabled" : "enabled"}.`)
await refresh()
await refreshIdps()
toast.success(`${i.enabled ? "Disabled" : "Enabled"} ${i.name}`)
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Toggle failed.")
toast.error(errorMessage(err, `${verb} ${i.name}`))
}
},
},
@@ -198,7 +220,7 @@ export default function SsoRoute() {
},
},
],
[arcadia, refresh],
[arcadia, refreshIdps, toast],
)
const idpTable = useTable<IdentityProvider>({
@@ -231,17 +253,6 @@ export default function SsoRoute() {
</div>
</header>
{error ? (
<AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
{error}
</AlertBanner>
) : null}
{info ? (
<AlertBanner variant="success" dismissible onDismiss={() => setInfo(null)}>
{info}
</AlertBanner>
) : null}
<Tabs defaultValue="idps">
<TabsList>
<TabsTrigger value="idps" data-action="sso-tab-idps">
@@ -255,48 +266,59 @@ export default function SsoRoute() {
<TabsContent value="idps" className="pt-4">
<Card>
<CardContent className="relative p-0">
<LoadingOverlay active={loading && idps.length === 0} label="Loading IdPs…" />
{idpTable.total === 0 && !loading ? (
<EmptyState
icon={<KeyRound className="size-6" />}
title="No identity providers."
description="Connect a SAML IdP (Okta, Azure AD, Google Workspace, etc.) to enable SSO for this tenant."
className="py-12"
<DataState
loading={idpsLoading}
error={idpsError}
isEmpty={idpTable.total === 0}
onRetry={refreshIdps}
loadingLabel="Loading IdPs…"
empty={
<EmptyState
icon={<KeyRound className="size-6" />}
title="No identity providers."
description="Connect a SAML IdP (Okta, Azure AD, Google Workspace, etc.) to enable SSO for this tenant."
className="py-12"
/>
}
>
<DataTable
columns={idpColumns}
rows={idpTable.pageRows}
getRowId={(i) => i.id}
sort={idpTable.sort}
onSortToggle={idpTable.toggleSort}
loading={idpsLoading && idps.length > 0}
stickyHeader
/>
) : (
<>
<DataTable
columns={idpColumns}
rows={idpTable.pageRows}
getRowId={(i) => i.id}
sort={idpTable.sort}
onSortToggle={idpTable.toggleSort}
loading={loading && idps.length > 0}
stickyHeader
/>
<Pagination
page={idpTable.page}
pageSize={idpTable.pageSize}
total={idpTable.total}
onPageChange={idpTable.setPage}
onPageSizeChange={idpTable.setPageSize}
/>
</>
)}
<Pagination
page={idpTable.page}
pageSize={idpTable.pageSize}
total={idpTable.total}
onPageChange={idpTable.setPage}
onPageSizeChange={idpTable.setPageSize}
/>
</DataState>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="sessions" className="pt-4">
<Card>
<CardContent className="p-0">
{sessions.length === 0 ? (
<EmptyState
title="No active SAML sessions."
description="Sessions appear here once users authenticate via the IdP."
className="py-12"
/>
) : (
<CardContent className="relative p-0">
<DataState
loading={sessionsLoading}
error={sessionsError}
isEmpty={sessions.length === 0}
onRetry={refreshSessions}
loadingLabel="Loading sessions…"
empty={
<EmptyState
title="No active SAML sessions."
description="Sessions appear here once users authenticate via the IdP."
className="py-12"
/>
}
>
<ul className="divide-y border-y">
{sessions.map((s) => (
<li
@@ -305,7 +327,7 @@ export default function SsoRoute() {
>
<div className="flex flex-col gap-0.5">
<span className="flex items-center gap-2">
<code className="font-mono text-xs">{s.name_id ?? s.user_id}</code>
<code className="font-mono text-xs">{sessionLabel(s)}</code>
{s.expires_at && new Date(s.expires_at).getTime() < Date.now() ? (
<Badge variant="destructive">expired</Badge>
) : (
@@ -333,7 +355,7 @@ export default function SsoRoute() {
</li>
))}
</ul>
)}
</DataState>
</CardContent>
</Card>
</TabsContent>
@@ -346,21 +368,22 @@ export default function SsoRoute() {
title="Delete identity provider?"
description={
pendingDelete
? `${pendingDelete.name} will be removed. Existing SAML sessions remain valid until they expire.`
? `Nobody can sign in through ${pendingDelete.name} once it's deleted, and its configuration — including the certificate — is gone for good. Existing SAML sessions stay valid until they expire. Disable it instead if this is temporary.`
: ""
}
confirmLabel="Delete"
variant="danger"
onConfirm={async () => {
if (!pendingDelete) return
const name = pendingDelete.name
try {
await deleteIdentityProvider(arcadia, pendingDelete.id)
setPendingDelete(null)
setInfo("Identity provider deleted.")
await refresh()
toast.success(`Deleted ${name}`)
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Delete failed.")
setPendingDelete(null)
toast.error(errorMessage(err, `delete ${name}`))
}
}}
/>
@@ -371,21 +394,22 @@ export default function SsoRoute() {
title="Destroy SAML session?"
description={
pendingSessionDestroy
? `Session for ${pendingSessionDestroy.name_id ?? pendingSessionDestroy.user_id} will be revoked.`
? `${sessionLabel(pendingSessionDestroy)} is signed out immediately and has to authenticate with the IdP again.`
: ""
}
confirmLabel="Destroy"
variant="danger"
onConfirm={async () => {
if (!pendingSessionDestroy) return
const who = sessionLabel(pendingSessionDestroy)
try {
await destroySamlSession(arcadia, pendingSessionDestroy.id)
setPendingSessionDestroy(null)
setInfo("Session destroyed.")
await refresh()
await refreshSessions()
toast.success(`Destroyed the session for ${who}`)
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Destroy failed.")
setPendingSessionDestroy(null)
toast.error(errorMessage(err, `destroy the session for ${who}`))
}
}}
/>
@@ -393,12 +417,11 @@ export default function SsoRoute() {
<IdpEditorDialog
state={editor}
onClose={() => setEditor(null)}
onSaved={async (msg) => {
onSaved={async (message) => {
setEditor(null)
if (msg) setInfo(msg)
await refresh()
await refreshIdps()
toast.success(message)
}}
onError={setError}
/>
</AppShell>
)
@@ -408,12 +431,10 @@ function IdpEditorDialog({
state,
onClose,
onSaved,
onError,
}: {
state: Editor
onClose: () => void
onSaved: (msg?: string) => Promise<void>
onError: (msg: string | null) => void
onSaved: (message: string) => Promise<void>
}) {
const arcadia = useArcadiaClient()
const open = state !== null
@@ -431,9 +452,14 @@ function IdpEditorDialog({
const [certificate, setCertificate] = useState("")
const [attrJson, setAttrJson] = useState("{}")
const [saving, setSaving] = useState(false)
// Inside the dialog, above the buttons — a page banner here would sit behind
// the scrim, and a rejected certificate would look like nothing happened.
const [error, setError] = useState<unknown>(null)
useEffect(() => {
if (!open) return
setError(null)
setSaving(false)
if (initial) {
setName(initial.name)
setEntityId(initial.entity_id)
@@ -460,7 +486,7 @@ function IdpEditorDialog({
}, [open, initial])
const submit = async () => {
onError(null)
setError(null)
setSaving(true)
try {
let attribute_mapping: Record<string, string> = {}
@@ -484,20 +510,15 @@ function IdpEditorDialog({
if (isEdit && initial) {
await updateIdentityProvider(arcadia, initial.id, input)
await onSaved("Identity provider updated.")
await onSaved(`Saved ${name.trim()}`)
} else {
await createIdentityProvider(arcadia, input)
await onSaved("Identity provider created.")
await onSaved(`Created ${name.trim()}`)
}
} catch (err) {
onError(
err instanceof ArcadiaError
? err.message
: err instanceof Error
? err.message
: "Save failed.",
)
} finally {
// Keep the pasted certificate and JSON on screen — retyping them is the
// last thing an operator should have to do after a failed save.
setError(err)
setSaving(false)
}
}
@@ -636,8 +657,15 @@ function IdpEditorDialog({
</div>
</div>
{error ? (
<DialogError
error={error}
context={isEdit ? "save the identity provider" : "create the identity provider"}
/>
) : null}
<DialogFooter>
<Button variant="outline" onClick={onClose} disabled={saving}>
<Button variant="outline" onClick={onClose} disabled={saving} data-action="idp-form-cancel">
Cancel
</Button>
<Button
@@ -653,3 +681,5 @@ function IdpEditorDialog({
</Dialog>
)
}
export { RouteErrorBoundary as ErrorBoundary } from "~/components/route-error"