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
174
app/components/tenant-detail/feature-flags-tab.tsx
Normal file
174
app/components/tenant-detail/feature-flags-tab.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import { RefreshCw, RotateCcw } from "lucide-react"
|
||||
|
||||
import { useArcadiaClient } from "@crema/arcadia-core-client"
|
||||
import { useToast } from "@crema/notification-ui"
|
||||
import { BadgeCell } from "@crema/table-ui"
|
||||
import { EmptyState } from "@crema/feedback-ui"
|
||||
|
||||
import type { TenantTabProps } from "~/routes/tenants.$id"
|
||||
import { DataState } from "~/components/data-state"
|
||||
import { errorMessage } from "~/lib/errors"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card"
|
||||
import { Switch } from "~/components/ui/switch"
|
||||
import {
|
||||
clearFeatureFlag,
|
||||
listFeatureFlags,
|
||||
setFeatureFlag,
|
||||
type TenantFeatureFlag,
|
||||
} from "~/lib/arcadia/tenants"
|
||||
|
||||
/**
|
||||
* Per-tenant feature-flag overrides. The list is every platform-defined flag
|
||||
* with this tenant's effective value; a flag is either inherited from the
|
||||
* platform default ("default") or pinned for this tenant ("override"). Toggling
|
||||
* a row pins it; "Revert" drops the override so it follows the default again.
|
||||
* You can't add arbitrary keys here — a flag has to exist at the platform level
|
||||
* before a tenant can override it.
|
||||
*/
|
||||
export function FeatureFlagsTab({ tenant }: TenantTabProps) {
|
||||
const arcadia = useArcadiaClient()
|
||||
const toast = useToast()
|
||||
|
||||
const [flags, setFlags] = useState<TenantFeatureFlag[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<unknown>(null)
|
||||
const [busy, setBusy] = useState<string | null>(null)
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setError(null)
|
||||
setLoading(true)
|
||||
try {
|
||||
setFlags(await listFeatureFlags(arcadia, tenant.id))
|
||||
} catch (err) {
|
||||
setError(err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [arcadia, tenant.id])
|
||||
|
||||
useEffect(() => {
|
||||
load()
|
||||
}, [load])
|
||||
|
||||
const toggle = async (flag: TenantFeatureFlag, next: boolean) => {
|
||||
setBusy(flag.key)
|
||||
// Optimistic: reflect the pin immediately, roll back on failure.
|
||||
setFlags((prev) =>
|
||||
prev.map((f) => (f.key === flag.key ? { ...f, enabled: next, source: "override" } : f)),
|
||||
)
|
||||
try {
|
||||
await setFeatureFlag(arcadia, tenant.id, flag.key, next)
|
||||
toast.success(`${next ? "Enabled" : "Disabled"} ${flag.key} for ${tenant.name}`)
|
||||
await load()
|
||||
} catch (err) {
|
||||
setFlags((prev) => prev.map((f) => (f.key === flag.key ? flag : f)))
|
||||
toast.error(errorMessage(err, `override ${flag.key}`))
|
||||
} finally {
|
||||
setBusy(null)
|
||||
}
|
||||
}
|
||||
|
||||
const revert = async (flag: TenantFeatureFlag) => {
|
||||
setBusy(flag.key)
|
||||
try {
|
||||
await clearFeatureFlag(arcadia, tenant.id, flag.key)
|
||||
toast.success(`${flag.key} follows the platform default again`)
|
||||
await load()
|
||||
} catch (err) {
|
||||
toast.error(errorMessage(err, `revert ${flag.key}`))
|
||||
} finally {
|
||||
setBusy(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-start justify-between gap-4">
|
||||
<div>
|
||||
<CardTitle>Feature flags</CardTitle>
|
||||
<CardDescription>
|
||||
Override a platform flag for this tenant. Un-overridden flags follow
|
||||
the platform default.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={load}
|
||||
disabled={loading}
|
||||
data-action="tenant-detail-flags-refresh"
|
||||
>
|
||||
<RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<DataState
|
||||
loading={loading}
|
||||
error={error}
|
||||
isEmpty={flags.length === 0}
|
||||
onRetry={load}
|
||||
loadingLabel="Loading feature flags…"
|
||||
empty={
|
||||
<EmptyState
|
||||
title="No platform feature flags defined"
|
||||
description="Flags are defined at the platform level; once they exist, you can pin any of them on or off for this tenant here."
|
||||
className="py-12"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<ul className="divide-y">
|
||||
{flags.map((flag) => (
|
||||
<li key={flag.key} className="flex items-center gap-3 px-4 py-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="font-mono text-sm">{flag.key}</code>
|
||||
<BadgeCell
|
||||
label={flag.source === "override" ? "override" : "default"}
|
||||
tone={flag.source === "override" ? "info" : "default"}
|
||||
/>
|
||||
</div>
|
||||
{flag.description ? (
|
||||
<p className="mt-0.5 truncate text-xs text-muted-foreground">
|
||||
{flag.description}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{flag.source === "override" ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => revert(flag)}
|
||||
disabled={busy === flag.key}
|
||||
data-action={`tenant-detail-flags-revert-${flag.key}`}
|
||||
title="Revert to the platform default"
|
||||
>
|
||||
<RotateCcw className="size-4" />
|
||||
Revert
|
||||
</Button>
|
||||
) : null}
|
||||
|
||||
<Switch
|
||||
checked={flag.enabled}
|
||||
onCheckedChange={(v) => toggle(flag, v)}
|
||||
disabled={busy === flag.key}
|
||||
data-action={`tenant-detail-flags-toggle-${flag.key}`}
|
||||
aria-label={`Override ${flag.key}`}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</DataState>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user