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

170
app/routes/storage.tsx
View File

@@ -12,7 +12,8 @@ import {
Wrench,
} 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,
@@ -25,9 +26,11 @@ import {
type Column,
} from "@crema/table-ui"
import { SearchInput } from "@crema/search-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 { Button } from "~/components/ui/button"
import {
Card,
@@ -90,14 +93,27 @@ type EditorState =
| { mode: "edit"; config: StorageConfig }
| null
const ACTION_PAST_TENSE: Record<
Exclude<NonNullable<PendingAction>["kind"], never>,
string
> = {
deactivate: "Deactivated",
degraded: "Marked degraded",
maintenance: "Marked in maintenance",
delete: "Deleted",
}
export default function StorageRoute() {
const session = useSession()
const arcadia = useArcadiaClient()
const toast = useToast()
const [configs, setConfigs] = useState<StorageConfig[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [info, setInfo] = useState<string | null>(null)
// The raw thrown value — `DataState` normalises it into plain language. A
// 500 here used to render "Internal Server Error" *and* "No storage configs
// yet." side by side, which reads as an empty deployment.
const [error, setError] = useState<unknown>(null)
const [pending, setPending] = useState<PendingAction>(null)
const [editor, setEditor] = useState<EditorState>(null)
const [search, setSearch] = useState("")
@@ -109,7 +125,7 @@ export default function StorageRoute() {
const list = await listStorageConfigs(arcadia)
setConfigs(list)
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Failed to load storage configs.")
setError(err)
} finally {
setLoading(false)
}
@@ -131,30 +147,35 @@ export default function StorageRoute() {
else if (action.kind === "delete") await deleteStorageConfig(arcadia, action.config.id)
setPending(null)
await refresh()
toast.success(`${ACTION_PAST_TENSE[action.kind]} ${action.config.name}`)
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Action failed.")
setPending(null)
toast.error(errorMessage(err, `${action.kind} ${action.config.name}`))
}
},
[arcadia, refresh],
[arcadia, refresh, toast],
)
const validate = useCallback(
async (config: StorageConfig) => {
setError(null)
setInfo(null)
try {
const result = await validateStorageConfig(arcadia, config.id)
if (result?.ok) {
setInfo(`${config.name}: validation passed.`)
toast.success(`${config.name} validated`, {
description: "The backend answered with the credentials on file.",
})
} else {
setError(`${config.name}: ${result?.message ?? "validation failed."}`)
// The call succeeded; the *credentials* didn't. That's not a load
// failure, so it belongs in a toast, not the table's error slot.
toast.error(`${config.name} failed validation`, {
description: result?.message ?? undefined,
})
}
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Validation failed.")
toast.error(errorMessage(err, `validate ${config.name}`))
}
},
[arcadia],
[arcadia, toast],
)
const columns = useMemo<Column<StorageConfig>[]>(
@@ -216,7 +237,7 @@ export default function StorageRoute() {
refresh,
setPending,
setEditor,
setError,
toast,
validate,
})}
triggerDataAction={`storage-${slugify(c.name)}-actions`}
@@ -224,7 +245,7 @@ export default function StorageRoute() {
),
},
],
[arcadia, refresh, validate],
[arcadia, refresh, toast, validate],
)
const summary = useMemo(
@@ -295,17 +316,6 @@ export default function StorageRoute() {
</div>
</header>
{error ? (
<AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
{error}
</AlertBanner>
) : null}
{info ? (
<AlertBanner variant="success" dismissible onDismiss={() => setInfo(null)}>
{info}
</AlertBanner>
) : null}
<Card>
<CardHeader className="flex flex-row items-center justify-between gap-4">
<SearchInput
@@ -321,37 +331,41 @@ export default function StorageRoute() {
</CardHeader>
<CardContent className="relative p-0">
<LoadingOverlay active={loading && configs.length === 0} label="Loading storage configs…" />
{table.total === 0 && !loading ? (
<EmptyState
title={search ? "No configs match that search." : "No storage configs yet."}
description={
search
? "Try a different name, backend, or status."
: "Create your first storage config to start uploading objects."
}
className="py-12"
<DataState
loading={loading}
error={error}
isEmpty={table.total === 0}
onRetry={refresh}
loadingLabel="Loading storage configs…"
empty={
<EmptyState
title={search ? "No configs match that search." : "No storage configs yet."}
description={
search
? "Try a different name, backend, or status."
: "Create your first storage config to start uploading objects."
}
className="py-12"
/>
}
>
<DataTable
columns={columns}
rows={table.pageRows}
getRowId={(c) => c.id}
sort={table.sort}
onSortToggle={table.toggleSort}
loading={loading && configs.length > 0}
stickyHeader
/>
) : (
<>
<DataTable
columns={columns}
rows={table.pageRows}
getRowId={(c) => c.id}
sort={table.sort}
onSortToggle={table.toggleSort}
loading={loading && configs.length > 0}
stickyHeader
/>
<Pagination
page={table.page}
pageSize={table.pageSize}
total={table.total}
onPageChange={table.setPage}
onPageSizeChange={table.setPageSize}
/>
</>
)}
<Pagination
page={table.page}
pageSize={table.pageSize}
total={table.total}
onPageChange={table.setPage}
onPageSizeChange={table.setPageSize}
/>
</DataState>
</CardContent>
</Card>
</div>
@@ -412,11 +426,11 @@ export default function StorageRoute() {
<StorageEditorDialog
state={editor}
onClose={() => setEditor(null)}
onSaved={async () => {
onSaved={async (name, wasEdit) => {
setEditor(null)
await refresh()
toast.success(wasEdit ? `Saved ${name}` : `Created ${name}`)
}}
onError={setError}
/>
</AppShell>
)
@@ -437,11 +451,11 @@ function rowActions(
refresh: () => Promise<void>
setPending: (p: PendingAction) => void
setEditor: (s: EditorState) => void
setError: (msg: string | null) => void
toast: ReturnType<typeof useToast>
validate: (c: StorageConfig) => Promise<void>
},
): ActionItem[] {
const { arcadia, refresh, setPending, setEditor, setError, validate } = ctx
const { arcadia, refresh, setPending, setEditor, toast, validate } = ctx
const slug = slugify(c.name)
const items: ActionItem[] = []
@@ -478,8 +492,9 @@ function rowActions(
try {
await activateStorageConfig(arcadia, c.id)
await refresh()
toast.success(`Activated ${c.name}`)
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Activate failed.")
toast.error(errorMessage(err, `activate ${c.name}`))
}
},
})
@@ -495,8 +510,9 @@ function rowActions(
try {
await setDefaultStorageConfig(arcadia, c.id)
await refresh()
toast.success(`${c.name} is now the default backend`)
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Set default failed.")
toast.error(errorMessage(err, `set ${c.name} as the default backend`))
}
},
})
@@ -533,17 +549,18 @@ function StorageEditorDialog({
state,
onClose,
onSaved,
onError,
}: {
state: EditorState
onClose: () => void
onSaved: () => Promise<void>
onError: (msg: string | null) => void
onSaved: (name: string, wasEdit: boolean) => Promise<void>
}) {
const arcadia = useArcadiaClient()
const open = state !== null
const isEdit = state?.mode === "edit"
const initial = isEdit ? state.config : null
// Errors belong to the dialog, not the page: a page-level banner renders
// behind the modal scrim, where nobody reads it.
const [error, setError] = useState<unknown>(null)
const [name, setName] = useState("")
const [backend, setBackend] = useState<StorageBackend>("s3")
@@ -556,7 +573,11 @@ function StorageEditorDialog({
// Reset form whenever the dialog opens / target changes.
useEffect(() => {
if (!open) return
if (!open) {
setError(null)
return
}
setError(null)
if (initial) {
setName(initial.name)
setBackend(initial.backend_type)
@@ -595,7 +616,7 @@ function StorageEditorDialog({
}
const submit = async () => {
onError(null)
setError(null)
setSaving(true)
try {
const config: Record<string, unknown> = {}
@@ -633,9 +654,11 @@ function StorageEditorDialog({
} else {
await createStorageConfig(arcadia, input)
}
await onSaved()
await onSaved(name, isEdit)
} catch (err) {
onError(err instanceof ArcadiaError ? err.message : err instanceof Error ? err.message : "Save failed.")
// Keep the dialog open with the form intact — including any secret the
// operator just pasted — so they can fix and resubmit.
setError(err)
} finally {
setSaving(false)
}
@@ -749,6 +772,13 @@ function StorageEditorDialog({
</div>
</div>
{error ? (
<DialogError
error={error}
context={isEdit ? "save the storage config" : "create the storage config"}
/>
) : null}
<DialogFooter>
<Button variant="outline" onClick={onClose} disabled={saving} data-action="storage-form-cancel">
Cancel
@@ -841,3 +871,5 @@ function formatBytes(n: number | null): string {
}
return `${v < 10 ? v.toFixed(1) : Math.round(v)} ${units[i]}`
}
export { RouteErrorBoundary as ErrorBoundary } from "~/components/route-error"