feat(portal): M10.1 — fill the 10 customer-area shells
Four real surfaces wired to tenant-registry (settings, settings/api-keys CRUD, audit pagination, products live entitlements), five forward-looking empty states with CTAs. 56 vitest tests + 10 Playwright canaries. lib/format.ts consolidates date helpers. Refs: M10.1
This commit was merged in pull request #12.
This commit is contained in:
@@ -6,6 +6,7 @@ Generated section is appended on release tag via `git-cliff` (see `.gitea/workfl
|
||||
## [Unreleased]
|
||||
|
||||
### Added
|
||||
- feat(portal): M10.1 — real content for /settings + /settings/api-keys (full CRUD) + /audit (paginated, filterable) + /products (live entitlements). Forward-looking empty states with milestone hooks + CTAs on projects/users/integrations/billing/support.
|
||||
- feat(signup): M12.1 — public /start form creates a trial tenant via POST /v1/tenants (KC adapter provisions the org + invites the admin); dashboard renders a trial-days-left banner when status=trial
|
||||
- feat(catalog): M11.1 — /[slug]/catalog renders the live catalog, gates owned products, server-action 'Request' (POST /v1/catalog/request) + 'Start 14-day trial' (POST /v1/catalog/trial-request)
|
||||
- feat(test): M5.3 — Playwright e2e harness (apex / tenant / dev-stack-health specs). pnpm e2e + make e2e. CI e2e job gated behind RUN_E2E variable until stage exists.
|
||||
|
||||
@@ -1,16 +1,207 @@
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from "@/auth";
|
||||
import { NotAuthorized, ShellEmpty } from "@/components/ShellEmpty";
|
||||
import { NotAuthorized } from "@/components/ShellEmpty";
|
||||
import { formatDateTime, formatRelative, truncate } from "@/lib/format";
|
||||
import type { SessionWithExtras } from "@/lib/session";
|
||||
import { canSee } from "@/lib/session";
|
||||
import { fetchAudit, fetchTenantBySlug } from "@/lib/tenant-registry";
|
||||
|
||||
export default async function Page() {
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
export default async function AuditPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
searchParams: Promise<{ cursor?: string; action?: string; actor_id?: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const q = await searchParams;
|
||||
const session = (await auth()) as SessionWithExtras | null;
|
||||
if (!canSee(session, "audit")) return <NotAuthorized />;
|
||||
|
||||
const tenant = await fetchTenantBySlug(slug);
|
||||
if (!tenant) redirect(`/${slug}/dashboard`);
|
||||
|
||||
const cursor = q.cursor ? Number(q.cursor) : undefined;
|
||||
const page = await fetchAudit({
|
||||
tenant_id: tenant.id,
|
||||
action: q.action || undefined,
|
||||
actor_id: q.actor_id || undefined,
|
||||
limit: PAGE_SIZE,
|
||||
cursor: cursor && !Number.isNaN(cursor) ? cursor : undefined,
|
||||
});
|
||||
|
||||
const nextHref = page.next_cursor
|
||||
? buildHref(slug, { ...q, cursor: String(page.next_cursor) })
|
||||
: null;
|
||||
const resetHref = (q.action || q.actor_id || q.cursor) ? `/${slug}/audit` : null;
|
||||
|
||||
return (
|
||||
<ShellEmpty
|
||||
title="Audit log"
|
||||
description="Every state-changing action across portal + products."
|
||||
milestone="M10.2"
|
||||
/>
|
||||
<section>
|
||||
<h1 style={{ fontSize: 28, marginBottom: 8 }}>Audit log</h1>
|
||||
<p style={{ color: "#444", marginBottom: 16 }}>
|
||||
Every state-changing action emitted by the portal and the products.{" "}
|
||||
<a
|
||||
href="https://gitea.meghsakha.com/platform/docs/src/branch/main/PRODUCT_INTEGRATION_SPEC.md"
|
||||
style={{ color: "#0070f3" }}
|
||||
>
|
||||
Retraced-shape schema
|
||||
</a>{" "}
|
||||
— CSV / PDF export lands in M10.2.
|
||||
</p>
|
||||
|
||||
<Filters slug={slug} active={{ action: q.action, actor_id: q.actor_id }} />
|
||||
|
||||
{page.items.length === 0 ? (
|
||||
<p style={{ color: "#666", fontSize: 14, marginTop: 16 }}>
|
||||
No events match the current filter.
|
||||
</p>
|
||||
) : (
|
||||
<div style={{ overflow: "auto", marginTop: 16 }}>
|
||||
<table style={{ width: "100%", fontSize: 13, borderCollapse: "collapse" }}>
|
||||
<thead>
|
||||
<tr style={{ textAlign: "left", borderBottom: "1px solid #eaeaea" }}>
|
||||
<th style={th}>When</th>
|
||||
<th style={th}>Action</th>
|
||||
<th style={th}>Actor</th>
|
||||
<th style={th}>Target</th>
|
||||
<th style={th}>Product</th>
|
||||
<th style={th}>Meta</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{page.items.map((ev) => (
|
||||
<tr key={ev.id} style={{ borderBottom: "1px solid #f0f0f0" }}>
|
||||
<td style={td} title={formatDateTime(ev.created_at)}>
|
||||
{formatRelative(ev.created_at)}
|
||||
</td>
|
||||
<td style={{ ...td, fontFamily: "ui-monospace, monospace" }}>
|
||||
{ev.action}
|
||||
</td>
|
||||
<td style={td}>
|
||||
{ev.actor_name || ev.actor_id || (
|
||||
<em style={{ color: "#999" }}>system</em>
|
||||
)}
|
||||
</td>
|
||||
<td style={td}>
|
||||
{ev.target_type && (
|
||||
<span style={{ color: "#666" }}>{ev.target_type}:</span>
|
||||
)}{" "}
|
||||
{ev.target_name || ev.target_id || (
|
||||
<em style={{ color: "#999" }}>—</em>
|
||||
)}
|
||||
</td>
|
||||
<td style={td}>
|
||||
{ev.product || <em style={{ color: "#999" }}>portal</em>}
|
||||
</td>
|
||||
<td style={{ ...td, fontFamily: "ui-monospace, monospace", color: "#666" }}>
|
||||
{ev.metadata && Object.keys(ev.metadata).length > 0
|
||||
? truncate(JSON.stringify(ev.metadata), 50)
|
||||
: ""}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ marginTop: 16, display: "flex", justifyContent: "space-between" }}>
|
||||
<div>
|
||||
{resetHref && (
|
||||
<Link href={resetHref as `/${string}`} style={btnLink}>
|
||||
← Clear filters
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{nextHref && (
|
||||
<Link href={nextHref as `/${string}`} style={btnLink}>
|
||||
Next page →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function Filters({
|
||||
slug,
|
||||
active,
|
||||
}: {
|
||||
slug: string;
|
||||
active: { action?: string; actor_id?: string };
|
||||
}) {
|
||||
return (
|
||||
<form
|
||||
action={`/${slug}/audit`}
|
||||
method="GET"
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 8,
|
||||
marginTop: 8,
|
||||
padding: 12,
|
||||
background: "#fafafa",
|
||||
border: "1px solid #eaeaea",
|
||||
borderRadius: 6,
|
||||
}}
|
||||
>
|
||||
<label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13 }}>
|
||||
action
|
||||
<input
|
||||
name="action"
|
||||
defaultValue={active.action ?? ""}
|
||||
placeholder="tenant.created"
|
||||
style={{ ...inputStyle, padding: "4px 8px", fontSize: 13 }}
|
||||
/>
|
||||
</label>
|
||||
<label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13 }}>
|
||||
actor_id
|
||||
<input
|
||||
name="actor_id"
|
||||
defaultValue={active.actor_id ?? ""}
|
||||
placeholder="kc user id"
|
||||
style={{ ...inputStyle, padding: "4px 8px", fontSize: 13 }}
|
||||
/>
|
||||
</label>
|
||||
<button type="submit" style={btnSmall}>
|
||||
Filter
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function buildHref(slug: string, q: Record<string, string | undefined>): string {
|
||||
const qs = new URLSearchParams();
|
||||
for (const [k, v] of Object.entries(q)) {
|
||||
if (v) qs.set(k, v);
|
||||
}
|
||||
const s = qs.toString();
|
||||
return s ? `/${slug}/audit?${s}` : `/${slug}/audit`;
|
||||
}
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
padding: "8px 10px",
|
||||
border: "1px solid #ddd",
|
||||
borderRadius: 6,
|
||||
fontSize: 14,
|
||||
};
|
||||
const btnLink: React.CSSProperties = {
|
||||
color: "#0070f3",
|
||||
fontSize: 13,
|
||||
textDecoration: "none",
|
||||
};
|
||||
const btnSmall: React.CSSProperties = {
|
||||
padding: "4px 10px",
|
||||
background: "white",
|
||||
color: "#0070f3",
|
||||
border: "1px solid #0070f3",
|
||||
borderRadius: 4,
|
||||
fontSize: 12,
|
||||
cursor: "pointer",
|
||||
};
|
||||
const th: React.CSSProperties = { padding: "8px 10px", color: "#666", fontWeight: 500 };
|
||||
const td: React.CSSProperties = { padding: "8px 10px" };
|
||||
|
||||
@@ -1,16 +1,31 @@
|
||||
import Link from "next/link";
|
||||
import { auth } from "@/auth";
|
||||
import { NotAuthorized, ShellEmpty } from "@/components/ShellEmpty";
|
||||
import type { SessionWithExtras } from "@/lib/session";
|
||||
import { canSee } from "@/lib/session";
|
||||
|
||||
export default async function Page() {
|
||||
export default async function Page({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const session = (await auth()) as SessionWithExtras | null;
|
||||
if (!canSee(session, "billing")) return <NotAuthorized />;
|
||||
return (
|
||||
<ShellEmpty
|
||||
title="Billing"
|
||||
description="Plan, seats, invoices. Polar Checkout opens here."
|
||||
description="Plan, seats, invoices. Polar Checkout opens here for plan changes."
|
||||
milestone="M8.3"
|
||||
details="Polar.sh is the Merchant of Record — it handles EU VAT MOSS so we don't have to. Invoices mirror to ERPNext (Customer + Sales Invoice) so accounting stays in one place."
|
||||
cta={
|
||||
<Link
|
||||
href={`/${slug}/catalog`}
|
||||
style={{ color: "#0070f3", fontSize: 14, textDecoration: "underline" }}
|
||||
>
|
||||
Browse the catalog →
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,118 @@
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from "@/auth";
|
||||
import { NotAuthorized, ShellEmpty } from "@/components/ShellEmpty";
|
||||
import { NotAuthorized } from "@/components/ShellEmpty";
|
||||
import { formatDateTime, formatRelative } from "@/lib/format";
|
||||
import type { SessionWithExtras } from "@/lib/session";
|
||||
import { canSee } from "@/lib/session";
|
||||
import {
|
||||
fetchCatalog,
|
||||
fetchEntitlements,
|
||||
fetchTenantBySlug,
|
||||
type CatalogEntry,
|
||||
type Entitlement,
|
||||
} from "@/lib/tenant-registry";
|
||||
|
||||
export default async function Page() {
|
||||
export default async function ProductsPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const session = (await auth()) as SessionWithExtras | null;
|
||||
if (!canSee(session, "dashboard")) return <NotAuthorized />;
|
||||
if (!canSee(session, "products")) return <NotAuthorized />;
|
||||
|
||||
const tenant = await fetchTenantBySlug(slug);
|
||||
if (!tenant) redirect(`/${slug}/dashboard`);
|
||||
|
||||
const [catalog, entitlements] = await Promise.all([
|
||||
fetchCatalog(),
|
||||
fetchEntitlements(tenant.id),
|
||||
]);
|
||||
|
||||
const byKey = new Map(catalog.map((c) => [c.key, c]));
|
||||
const active = entitlements.filter((e) => e.enabled);
|
||||
|
||||
return (
|
||||
<ShellEmpty
|
||||
title="Products"
|
||||
description="Per-product tiles — open into the embedded web component."
|
||||
milestone="M10.1"
|
||||
/>
|
||||
<section>
|
||||
<h1 style={{ fontSize: 28, marginBottom: 8 }}>Products</h1>
|
||||
<p style={{ color: "#444", marginBottom: 24 }}>
|
||||
Live entitlements for <strong>{tenant.name}</strong>. Open a product to
|
||||
use its web component (M6.x / M7.x).
|
||||
</p>
|
||||
|
||||
{active.length === 0 ? (
|
||||
<div
|
||||
style={{
|
||||
padding: 16,
|
||||
border: "1px dashed #ddd",
|
||||
borderRadius: 8,
|
||||
background: "#fafafa",
|
||||
color: "#666",
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
<p style={{ marginBottom: 8 }}>No products yet.</p>
|
||||
<a href={`/${slug}/catalog`} style={{ color: "#0070f3" }}>
|
||||
Browse the catalog →
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<ul
|
||||
style={{
|
||||
listStyle: "none",
|
||||
padding: 0,
|
||||
display: "grid",
|
||||
gap: 12,
|
||||
gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
|
||||
}}
|
||||
>
|
||||
{active.map((e) => (
|
||||
<ProductCard key={e.product} ent={e} catalog={byKey.get(e.product)} />
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ProductCard({ ent, catalog }: { ent: Entitlement; catalog?: CatalogEntry }) {
|
||||
return (
|
||||
<li
|
||||
style={{
|
||||
padding: 16,
|
||||
border: "1px solid #eaeaea",
|
||||
borderRadius: 8,
|
||||
background: "white",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}
|
||||
>
|
||||
<strong style={{ fontSize: 15 }}>{catalog?.name ?? ent.product}</strong>
|
||||
{ent.expires_at && (
|
||||
<span
|
||||
title={formatDateTime(ent.expires_at)}
|
||||
style={{
|
||||
fontSize: 11,
|
||||
padding: "2px 8px",
|
||||
borderRadius: 4,
|
||||
background: "#fff7e0",
|
||||
color: "#7a5a00",
|
||||
}}
|
||||
>
|
||||
trial · {formatRelative(ent.expires_at)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{catalog?.description && (
|
||||
<p style={{ color: "#666", fontSize: 13, marginTop: 6, marginBottom: 12 }}>
|
||||
{catalog.description}
|
||||
</p>
|
||||
)}
|
||||
<div style={{ fontSize: 12, color: "#999", marginTop: 8 }}>
|
||||
Web component renders here once <code>{ent.product}-dashboard</code> is
|
||||
registered (M6.3 / M7.2).
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,8 +9,9 @@ export default async function Page() {
|
||||
return (
|
||||
<ShellEmpty
|
||||
title="Projects"
|
||||
description="Sub-tenancy: GCP-Project-style scoping per product."
|
||||
milestone="M10.1"
|
||||
description="Sub-tenancy: scope products by team/environment (GCP-Project-style)."
|
||||
milestone="M10.1 follow-up"
|
||||
details="Most tenants operate as a single implicit 'default' project. Multi-project mode activates once a product opts in via manifest.supports_projects=true."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,266 @@
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from "@/auth";
|
||||
import { NotAuthorized, ShellEmpty } from "@/components/ShellEmpty";
|
||||
import { NotAuthorized } from "@/components/ShellEmpty";
|
||||
import { formatDateTime, formatRelative, truncate } from "@/lib/format";
|
||||
import type { SessionWithExtras } from "@/lib/session";
|
||||
import { canSee } from "@/lib/session";
|
||||
import {
|
||||
createAPIKey,
|
||||
fetchAPIKeys,
|
||||
fetchCatalog,
|
||||
fetchTenantBySlug,
|
||||
revokeAPIKey,
|
||||
type APIKey,
|
||||
} from "@/lib/tenant-registry";
|
||||
|
||||
export default async function Page() {
|
||||
export default async function APIKeysPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
searchParams: Promise<{ plaintext?: string; err?: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const flash = await searchParams;
|
||||
const session = (await auth()) as SessionWithExtras | null;
|
||||
if (!canSee(session, "api-keys")) return <NotAuthorized />;
|
||||
|
||||
const tenant = await fetchTenantBySlug(slug);
|
||||
if (!tenant) redirect(`/${slug}/dashboard`);
|
||||
|
||||
const [keys, catalog] = await Promise.all([
|
||||
fetchAPIKeys(tenant.id),
|
||||
fetchCatalog(),
|
||||
]);
|
||||
const active = keys.filter((k) => !k.revoked_at);
|
||||
const revoked = keys.filter((k) => k.revoked_at);
|
||||
|
||||
async function doCreate(formData: FormData) {
|
||||
"use server";
|
||||
const name = String(formData.get("name") ?? "").trim();
|
||||
const product = String(formData.get("product") ?? "").trim();
|
||||
const tenantId = String(formData.get("tenant_id"));
|
||||
const slugV = String(formData.get("slug"));
|
||||
if (!name) redirect(`/${slugV}/settings/api-keys?err=missing_name`);
|
||||
|
||||
const res = await createAPIKey({
|
||||
tenant_id: tenantId,
|
||||
name,
|
||||
product: product || undefined,
|
||||
});
|
||||
if (!res.ok) {
|
||||
redirect(`/${slugV}/settings/api-keys?err=${res.error}`);
|
||||
}
|
||||
revalidatePath(`/${slugV}/settings/api-keys`);
|
||||
redirect(`/${slugV}/settings/api-keys?plaintext=${encodeURIComponent(res.plaintext)}`);
|
||||
}
|
||||
|
||||
async function doRevoke(formData: FormData) {
|
||||
"use server";
|
||||
const id = String(formData.get("id"));
|
||||
const slugV = String(formData.get("slug"));
|
||||
const res = await revokeAPIKey(id);
|
||||
if (!res.ok) {
|
||||
redirect(`/${slugV}/settings/api-keys?err=${res.error}`);
|
||||
}
|
||||
revalidatePath(`/${slugV}/settings/api-keys`);
|
||||
redirect(`/${slugV}/settings/api-keys`);
|
||||
}
|
||||
|
||||
return (
|
||||
<ShellEmpty
|
||||
title="API keys"
|
||||
description="Per-tenant API keys for headless product access."
|
||||
milestone="M15.1"
|
||||
/>
|
||||
<section>
|
||||
<h1 style={{ fontSize: 28, marginBottom: 8 }}>API keys</h1>
|
||||
<p style={{ color: "#444", marginBottom: 16 }}>
|
||||
Per-tenant keys for headless product calls. Hashed with argon2id;
|
||||
the plaintext is shown <strong>once</strong> on creation.
|
||||
</p>
|
||||
|
||||
{flash.plaintext && <PlaintextBanner plaintext={flash.plaintext} />}
|
||||
{flash.err && <ErrorBanner err={flash.err} />}
|
||||
|
||||
<h2 style={{ fontSize: 18, marginTop: 24, marginBottom: 8 }}>Create a new key</h2>
|
||||
<form action={doCreate} style={{ display: "grid", gap: 8, maxWidth: 480 }}>
|
||||
<input type="hidden" name="tenant_id" value={tenant.id} />
|
||||
<input type="hidden" name="slug" value={slug} />
|
||||
<label style={{ display: "grid", gap: 4, fontSize: 14 }}>
|
||||
<span>Name</span>
|
||||
<input name="name" required maxLength={100} placeholder="ci-bot" style={inputStyle} />
|
||||
</label>
|
||||
<label style={{ display: "grid", gap: 4, fontSize: 14 }}>
|
||||
<span>Product scope (optional)</span>
|
||||
<select name="product" defaultValue="" style={inputStyle}>
|
||||
<option value="">All products</option>
|
||||
{catalog.map((p) => (
|
||||
<option key={p.key} value={p.key}>
|
||||
{p.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<button type="submit" style={btnPrimary}>
|
||||
Create key
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<h2 style={{ fontSize: 18, marginTop: 32, marginBottom: 8 }}>
|
||||
Active keys ({active.length})
|
||||
</h2>
|
||||
{active.length === 0 ? (
|
||||
<p style={{ color: "#666", fontSize: 14 }}>No active keys.</p>
|
||||
) : (
|
||||
<KeyTable keys={active} doRevoke={doRevoke} slug={slug} canRevoke />
|
||||
)}
|
||||
|
||||
{revoked.length > 0 && (
|
||||
<>
|
||||
<h2 style={{ fontSize: 18, marginTop: 32, marginBottom: 8 }}>
|
||||
Revoked ({revoked.length})
|
||||
</h2>
|
||||
<KeyTable keys={revoked} doRevoke={doRevoke} slug={slug} canRevoke={false} />
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function PlaintextBanner({ plaintext }: { plaintext: string }) {
|
||||
return (
|
||||
<div
|
||||
role="status"
|
||||
style={{
|
||||
padding: 12,
|
||||
marginTop: 8,
|
||||
marginBottom: 8,
|
||||
borderRadius: 8,
|
||||
background: "#e6f7ec",
|
||||
border: "1px solid #a4d8b8",
|
||||
}}
|
||||
>
|
||||
<strong style={{ color: "#0a6e2a", fontSize: 14 }}>Key created</strong>
|
||||
<p style={{ margin: "8px 0", fontSize: 13, color: "#444" }}>
|
||||
Store this value — it cannot be retrieved later.
|
||||
</p>
|
||||
<code
|
||||
style={{
|
||||
display: "block",
|
||||
padding: "8px 10px",
|
||||
background: "white",
|
||||
border: "1px solid #ddd",
|
||||
borderRadius: 6,
|
||||
fontSize: 13,
|
||||
wordBreak: "break-all",
|
||||
}}
|
||||
>
|
||||
{plaintext}
|
||||
</code>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ErrorBanner({ err }: { err: string }) {
|
||||
return (
|
||||
<div
|
||||
role="status"
|
||||
style={{
|
||||
padding: 12,
|
||||
marginTop: 8,
|
||||
marginBottom: 8,
|
||||
borderRadius: 8,
|
||||
background: "#fdecea",
|
||||
border: "1px solid #e8a5a5",
|
||||
color: "#a82626",
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{err === "name_taken" && "A key with that name already exists."}
|
||||
{err === "missing_name" && "Name is required."}
|
||||
{err === "invalid_input" && "Input failed validation."}
|
||||
{!["name_taken", "missing_name", "invalid_input"].includes(err) && `Error: ${err}`}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function KeyTable({
|
||||
keys,
|
||||
doRevoke,
|
||||
slug,
|
||||
canRevoke,
|
||||
}: {
|
||||
keys: APIKey[];
|
||||
doRevoke: (fd: FormData) => Promise<void>;
|
||||
slug: string;
|
||||
canRevoke: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div style={{ overflow: "auto" }}>
|
||||
<table style={{ width: "100%", fontSize: 13, borderCollapse: "collapse" }}>
|
||||
<thead>
|
||||
<tr style={{ textAlign: "left", borderBottom: "1px solid #eaeaea" }}>
|
||||
<th style={th}>Name</th>
|
||||
<th style={th}>Prefix</th>
|
||||
<th style={th}>Product</th>
|
||||
<th style={th}>Created</th>
|
||||
<th style={th}>Last used</th>
|
||||
{canRevoke && <th style={th}></th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{keys.map((k) => (
|
||||
<tr key={k.id} style={{ borderBottom: "1px solid #f0f0f0" }}>
|
||||
<td style={td}>{truncate(k.name, 30)}</td>
|
||||
<td style={{ ...td, fontFamily: "ui-monospace, monospace" }}>{k.prefix}…</td>
|
||||
<td style={td}>{k.product || <em style={{ color: "#999" }}>all</em>}</td>
|
||||
<td style={td} title={formatDateTime(k.created_at)}>
|
||||
{formatRelative(k.created_at)}
|
||||
</td>
|
||||
<td style={td}>
|
||||
{k.last_used_at ? formatRelative(k.last_used_at) : <em style={{ color: "#999" }}>never</em>}
|
||||
</td>
|
||||
{canRevoke && (
|
||||
<td style={td}>
|
||||
<form action={doRevoke}>
|
||||
<input type="hidden" name="id" value={k.id} />
|
||||
<input type="hidden" name="slug" value={slug} />
|
||||
<button type="submit" style={btnDanger}>
|
||||
Revoke
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
padding: "8px 10px",
|
||||
border: "1px solid #ddd",
|
||||
borderRadius: 6,
|
||||
fontSize: 14,
|
||||
};
|
||||
const btnPrimary: React.CSSProperties = {
|
||||
marginTop: 4,
|
||||
padding: "8px 14px",
|
||||
background: "#0070f3",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: 6,
|
||||
fontSize: 14,
|
||||
cursor: "pointer",
|
||||
justifySelf: "start",
|
||||
};
|
||||
const btnDanger: React.CSSProperties = {
|
||||
padding: "4px 8px",
|
||||
background: "white",
|
||||
color: "#a82626",
|
||||
border: "1px solid #e8a5a5",
|
||||
borderRadius: 4,
|
||||
fontSize: 12,
|
||||
cursor: "pointer",
|
||||
};
|
||||
const th: React.CSSProperties = { padding: "8px 10px", color: "#666", fontWeight: 500 };
|
||||
const td: React.CSSProperties = { padding: "8px 10px" };
|
||||
|
||||
@@ -9,8 +9,9 @@ export default async function Page() {
|
||||
return (
|
||||
<ShellEmpty
|
||||
title="Integrations"
|
||||
description="Webhooks, outbound integrations, external IdP config."
|
||||
description="Webhooks, outbound integrations, and external IdP configuration."
|
||||
milestone="M15.2"
|
||||
details="Webhook delivery (signed payloads, retry-with-backoff, dead-letter queue) lands alongside the headless-product API surface."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,120 @@
|
||||
import { auth } from "@/auth";
|
||||
import { NotAuthorized, ShellEmpty } from "@/components/ShellEmpty";
|
||||
import { NotAuthorized } from "@/components/ShellEmpty";
|
||||
import { formatDateTime } from "@/lib/format";
|
||||
import type { SessionWithExtras } from "@/lib/session";
|
||||
import { canSee } from "@/lib/session";
|
||||
import { fetchTenantBySlug } from "@/lib/tenant-registry";
|
||||
|
||||
export default async function Page() {
|
||||
export default async function SettingsPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const session = (await auth()) as SessionWithExtras | null;
|
||||
if (!canSee(session, "settings")) return <NotAuthorized />;
|
||||
|
||||
const tenant = await fetchTenantBySlug(slug);
|
||||
if (!tenant) {
|
||||
return (
|
||||
<section>
|
||||
<h1 style={{ fontSize: 28 }}>Settings</h1>
|
||||
<p style={{ color: "#a82626" }}>Tenant not found.</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ShellEmpty
|
||||
title="Settings"
|
||||
description="Tenant identity, SSO, organization defaults."
|
||||
milestone="M10.1"
|
||||
/>
|
||||
<section>
|
||||
<h1 style={{ fontSize: 28, marginBottom: 8 }}>Settings</h1>
|
||||
<p style={{ color: "#444", marginBottom: 24 }}>
|
||||
Tenant identity and lifecycle metadata. Editing these lands in the
|
||||
M10.1 follow-up; for now contact <a href={`/${slug}/support`}>support</a>.
|
||||
</p>
|
||||
|
||||
<h2 style={{ fontSize: 18, marginTop: 16, marginBottom: 8 }}>Identity</h2>
|
||||
<Field label="Tenant ID" value={tenant.id} mono />
|
||||
<Field label="Slug" value={tenant.slug} mono />
|
||||
<Field label="Name" value={tenant.name} />
|
||||
<Field label="Kind" value={tenant.kind} />
|
||||
|
||||
<h2 style={{ fontSize: 18, marginTop: 24, marginBottom: 8 }}>Plan & status</h2>
|
||||
<Field label="Plan" value={tenant.plan} />
|
||||
<Field label="Status" value={tenant.status} badge={statusColor(tenant.status)} />
|
||||
{tenant.trial_ends_at && (
|
||||
<Field label="Trial ends at" value={formatDateTime(tenant.trial_ends_at)} mono />
|
||||
)}
|
||||
|
||||
<h2 style={{ fontSize: 18, marginTop: 24, marginBottom: 8 }}>Audit</h2>
|
||||
<Field label="Created" value={formatDateTime(tenant.created_at)} mono />
|
||||
<Field label="Last updated" value={formatDateTime(tenant.updated_at)} mono />
|
||||
|
||||
<h2 style={{ fontSize: 18, marginTop: 24, marginBottom: 8 }}>External links</h2>
|
||||
<p style={{ fontSize: 13, color: "#666" }}>
|
||||
ERPNext customer + Polar subscription land in M8.3; rendered here when
|
||||
the IDs land on the tenant row.
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
value,
|
||||
mono,
|
||||
badge,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
mono?: boolean;
|
||||
badge?: string;
|
||||
}) {
|
||||
return (
|
||||
<div style={{ display: "flex", padding: "6px 0", borderBottom: "1px solid #f0f0f0" }}>
|
||||
<span style={{ width: 160, color: "#666", fontSize: 13 }}>{label}</span>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: mono
|
||||
? "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
|
||||
: "inherit",
|
||||
fontSize: mono ? 13 : 14,
|
||||
}}
|
||||
>
|
||||
{badge ? (
|
||||
<span
|
||||
style={{
|
||||
padding: "2px 8px",
|
||||
borderRadius: 4,
|
||||
background: badge,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: 0.4,
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
) : (
|
||||
value
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function statusColor(s: string): string {
|
||||
switch (s) {
|
||||
case "active":
|
||||
return "#1a7a3e";
|
||||
case "trial":
|
||||
return "#a87a00";
|
||||
case "frozen":
|
||||
return "#a82626";
|
||||
case "archived":
|
||||
return "#666";
|
||||
case "demo":
|
||||
return "#0070f3";
|
||||
default:
|
||||
return "#444";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,8 +9,9 @@ export default async function Page() {
|
||||
return (
|
||||
<ShellEmpty
|
||||
title="Users"
|
||||
description="Invite IT_ADMIN, CXO, FINANCE, LEGAL, USER. Role assignment."
|
||||
milestone="M10.1"
|
||||
description="Invite teammates as IT_ADMIN, CXO, FINANCE, LEGAL, or USER."
|
||||
milestone="M10.1 follow-up"
|
||||
details="User management calls Keycloak's Organizations Admin API. The adapter exists (internal/keycloak in tenant-registry); this UI just needs the list + invite handlers wired."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,8 +9,9 @@ export default async function Page() {
|
||||
return (
|
||||
<ShellEmpty
|
||||
title="Support"
|
||||
description="Submit a ticket — Frappe HD customer portal embedded."
|
||||
description="Submit a ticket — Frappe HD's customer portal embedded here."
|
||||
milestone="M9.1"
|
||||
details="Email oncall@breakpilot.com in the meantime. Tickets that need engineering attention escalate into Gitea issues automatically (M9.2)."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,15 +1,22 @@
|
||||
// Reusable empty-state for a customer-area route shell. Every M5.2 route
|
||||
// renders one of these; real content lands in M10.1 / M11.x / M12.x /
|
||||
// M14.x / etc.
|
||||
// Empty state for surfaces whose real backend hasn't shipped yet.
|
||||
// `milestone` names the milestone that unblocks the surface; `cta` is an
|
||||
// optional in-portal action (link or button) the user can take in the
|
||||
// meantime (e.g., "Browse the catalog" while real billing waits on M8.3).
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
export function ShellEmpty({
|
||||
title,
|
||||
description,
|
||||
milestone,
|
||||
details,
|
||||
cta,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
milestone: string;
|
||||
details?: string;
|
||||
cta?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section style={{ maxWidth: 720 }}>
|
||||
@@ -25,15 +32,18 @@ export function ShellEmpty({
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
This surface is a route shell. Real implementation lands in{" "}
|
||||
<code>{milestone}</code>. See{" "}
|
||||
<a
|
||||
href="https://gitea.meghsakha.com/platform/docs/src/branch/main/PLATFORM_ARCHITECTURE.md"
|
||||
style={{ color: "#0070f3" }}
|
||||
>
|
||||
PLATFORM_ARCHITECTURE.md §5a
|
||||
</a>{" "}
|
||||
for the spec.
|
||||
<div style={{ marginBottom: details ? 8 : 0 }}>
|
||||
Lands in <code>{milestone}</code>. See{" "}
|
||||
<a
|
||||
href="https://gitea.meghsakha.com/platform/docs/src/branch/main/PLATFORM_ARCHITECTURE.md"
|
||||
style={{ color: "#0070f3" }}
|
||||
>
|
||||
PLATFORM_ARCHITECTURE.md §5a
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
{details && <p style={{ marginTop: 8, marginBottom: 0 }}>{details}</p>}
|
||||
{cta && <div style={{ marginTop: 12 }}>{cta}</div>}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { formatDateTime, formatRelative, truncate } from "./format";
|
||||
|
||||
describe("formatRelative", () => {
|
||||
const NOW = new Date("2026-05-20T12:00:00Z").getTime();
|
||||
test("seconds ago", () => {
|
||||
expect(formatRelative("2026-05-20T11:59:50Z", NOW)).toBe("10 seconds ago");
|
||||
});
|
||||
test("singular unit", () => {
|
||||
expect(formatRelative("2026-05-20T11:59:59Z", NOW)).toBe("1 second ago");
|
||||
});
|
||||
test("minutes ago", () => {
|
||||
expect(formatRelative("2026-05-20T11:55:00Z", NOW)).toBe("5 minutes ago");
|
||||
});
|
||||
test("hours ago", () => {
|
||||
expect(formatRelative("2026-05-20T09:00:00Z", NOW)).toBe("3 hours ago");
|
||||
});
|
||||
test("days ago", () => {
|
||||
expect(formatRelative("2026-05-13T12:00:00Z", NOW)).toBe("1 week ago");
|
||||
});
|
||||
test("future", () => {
|
||||
expect(formatRelative("2026-06-03T12:00:00Z", NOW)).toBe("in 2 weeks");
|
||||
});
|
||||
test("malformed input returns the input", () => {
|
||||
expect(formatRelative("not-a-date", NOW)).toBe("not-a-date");
|
||||
});
|
||||
test("years ago", () => {
|
||||
expect(formatRelative("2024-05-20T12:00:00Z", NOW)).toBe("2 years ago");
|
||||
});
|
||||
test("months ago", () => {
|
||||
expect(formatRelative("2026-01-20T12:00:00Z", NOW)).toBe("4 months ago");
|
||||
});
|
||||
});
|
||||
|
||||
describe("formatDateTime", () => {
|
||||
test("formats UTC", () => {
|
||||
expect(formatDateTime("2026-05-20T12:34:56Z")).toBe("2026-05-20 12:34:56 UTC");
|
||||
});
|
||||
test("malformed input returns input", () => {
|
||||
expect(formatDateTime("nope")).toBe("nope");
|
||||
});
|
||||
});
|
||||
|
||||
describe("truncate", () => {
|
||||
test("short string unchanged", () => {
|
||||
expect(truncate("hi", 10)).toBe("hi");
|
||||
});
|
||||
test("long string truncated with ellipsis", () => {
|
||||
expect(truncate("abcdefghij", 6)).toBe("abcde…");
|
||||
});
|
||||
test("default max", () => {
|
||||
expect(truncate("x".repeat(50)).length).toBe(40);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,56 @@
|
||||
// Lightweight date/time helpers — shared across server components so we
|
||||
// don't reinvent toLocaleString conventions per page.
|
||||
|
||||
export function formatRelative(iso: string, now: number = Date.now()): string {
|
||||
const t = new Date(iso).getTime();
|
||||
if (Number.isNaN(t)) return iso;
|
||||
const diff = t - now;
|
||||
const abs = Math.abs(diff);
|
||||
const ago = diff < 0;
|
||||
const units: [string, number][] = [
|
||||
["second", 1000],
|
||||
["minute", 60 * 1000],
|
||||
["hour", 3600 * 1000],
|
||||
["day", 24 * 3600 * 1000],
|
||||
["week", 7 * 24 * 3600 * 1000],
|
||||
["month", 30 * 24 * 3600 * 1000],
|
||||
["year", 365 * 24 * 3600 * 1000],
|
||||
];
|
||||
let unit = "second";
|
||||
let n = Math.round(abs / 1000);
|
||||
for (let i = units.length - 1; i >= 0; i--) {
|
||||
if (abs >= units[i][1]) {
|
||||
unit = units[i][0];
|
||||
n = Math.round(abs / units[i][1]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
const suffix = n === 1 ? unit : `${unit}s`;
|
||||
return ago ? `${n} ${suffix} ago` : `in ${n} ${suffix}`;
|
||||
}
|
||||
|
||||
export function formatDateTime(iso: string): string {
|
||||
const d = new Date(iso);
|
||||
if (Number.isNaN(d.getTime())) return iso;
|
||||
// YYYY-MM-DD HH:MM:SS — locale-stable, sortable, no surprises.
|
||||
const pad = (n: number) => String(n).padStart(2, "0");
|
||||
return (
|
||||
d.getUTCFullYear() +
|
||||
"-" +
|
||||
pad(d.getUTCMonth() + 1) +
|
||||
"-" +
|
||||
pad(d.getUTCDate()) +
|
||||
" " +
|
||||
pad(d.getUTCHours()) +
|
||||
":" +
|
||||
pad(d.getUTCMinutes()) +
|
||||
":" +
|
||||
pad(d.getUTCSeconds()) +
|
||||
" UTC"
|
||||
);
|
||||
}
|
||||
|
||||
export function truncate(s: string, max = 40): string {
|
||||
if (s.length <= max) return s;
|
||||
return s.slice(0, max - 1) + "…";
|
||||
}
|
||||
@@ -1,10 +1,14 @@
|
||||
import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
|
||||
import {
|
||||
createAPIKey,
|
||||
createTenant,
|
||||
fetchAPIKeys,
|
||||
fetchAudit,
|
||||
fetchCatalog,
|
||||
fetchEntitlements,
|
||||
fetchTenantBySlug,
|
||||
requestProduct,
|
||||
revokeAPIKey,
|
||||
startTrial,
|
||||
type Tenant,
|
||||
} from "./tenant-registry";
|
||||
@@ -198,3 +202,119 @@ describe("coverage gaps", () => {
|
||||
await expect(fetchCatalog()).rejects.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe("fetchAPIKeys", () => {
|
||||
test("happy path", async () => {
|
||||
globalThis.fetch = mockJSON(200, {
|
||||
items: [
|
||||
{ id: "1", tenant_id: "t1", name: "k1", scopes: [], prefix: "bp_a", created_at: "x" },
|
||||
],
|
||||
});
|
||||
const list = await fetchAPIKeys("t1");
|
||||
expect(list).toHaveLength(1);
|
||||
});
|
||||
test("404 → []", async () => {
|
||||
globalThis.fetch = mockJSON(404, {});
|
||||
expect(await fetchAPIKeys("t1")).toEqual([]);
|
||||
});
|
||||
test("non-200 throws", async () => {
|
||||
globalThis.fetch = mockJSON(500, {});
|
||||
await expect(fetchAPIKeys("t1")).rejects.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe("createAPIKey", () => {
|
||||
test("201 returns plaintext", async () => {
|
||||
globalThis.fetch = mockJSON(201, {
|
||||
api_key: { id: "1", tenant_id: "t1", name: "k", scopes: [], prefix: "bp_a", created_at: "x" },
|
||||
plaintext: "bp_abc123",
|
||||
});
|
||||
const res = await createAPIKey({ tenant_id: "t1", name: "k" });
|
||||
expect(res.ok).toBe(true);
|
||||
if (res.ok) expect(res.plaintext).toBe("bp_abc123");
|
||||
});
|
||||
test("404 → tenant_not_found", async () => {
|
||||
globalThis.fetch = mockJSON(404, {});
|
||||
expect(await createAPIKey({ tenant_id: "t1", name: "k" })).toEqual({
|
||||
ok: false,
|
||||
error: "tenant_not_found",
|
||||
});
|
||||
});
|
||||
test("400 → invalid_input", async () => {
|
||||
globalThis.fetch = mockJSON(400, {});
|
||||
expect(await createAPIKey({ tenant_id: "t1", name: "" })).toEqual({
|
||||
ok: false,
|
||||
error: "invalid_input",
|
||||
});
|
||||
});
|
||||
test("409 → name_taken", async () => {
|
||||
globalThis.fetch = mockJSON(409, {});
|
||||
expect(await createAPIKey({ tenant_id: "t1", name: "k" })).toEqual({
|
||||
ok: false,
|
||||
error: "name_taken",
|
||||
});
|
||||
});
|
||||
test("unexpected status", async () => {
|
||||
globalThis.fetch = mockJSON(500, {});
|
||||
expect(await createAPIKey({ tenant_id: "t1", name: "k" })).toEqual({
|
||||
ok: false,
|
||||
error: "unexpected_500",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("revokeAPIKey", () => {
|
||||
test("204 → ok", async () => {
|
||||
globalThis.fetch = vi.fn<typeof fetch>(async () => new Response(null, { status: 204 }));
|
||||
expect(await revokeAPIKey("k1")).toEqual({ ok: true });
|
||||
});
|
||||
test("404 → not_found", async () => {
|
||||
globalThis.fetch = mockJSON(404, {});
|
||||
expect(await revokeAPIKey("k1")).toEqual({ ok: false, error: "not_found" });
|
||||
});
|
||||
test("unexpected status", async () => {
|
||||
globalThis.fetch = mockJSON(500, {});
|
||||
expect(await revokeAPIKey("k1")).toEqual({ ok: false, error: "unexpected_500" });
|
||||
});
|
||||
});
|
||||
|
||||
describe("fetchAudit", () => {
|
||||
test("happy path with filters", async () => {
|
||||
const spy = mockJSON(200, {
|
||||
items: [{ id: 1, action: "tenant.created", created_at: "x" }],
|
||||
next_cursor: 1,
|
||||
});
|
||||
globalThis.fetch = spy;
|
||||
const res = await fetchAudit({
|
||||
tenant_id: "t1",
|
||||
product: "certifai",
|
||||
actor_id: "u1",
|
||||
action: "tenant.created",
|
||||
since: "2026-05-01T00:00:00Z",
|
||||
until: "2026-05-20T00:00:00Z",
|
||||
limit: 50,
|
||||
cursor: 10,
|
||||
});
|
||||
expect(res.items).toHaveLength(1);
|
||||
expect(res.next_cursor).toBe(1);
|
||||
const url = String(spy.mock.calls[0]![0]);
|
||||
expect(url).toContain("tenant_id=t1");
|
||||
expect(url).toContain("product=certifai");
|
||||
expect(url).toContain("actor_id=u1");
|
||||
expect(url).toContain("action=tenant.created");
|
||||
expect(url).toContain("limit=50");
|
||||
expect(url).toContain("cursor=10");
|
||||
});
|
||||
test("no filters", async () => {
|
||||
const spy = mockJSON(200, { items: [] });
|
||||
globalThis.fetch = spy;
|
||||
const res = await fetchAudit({});
|
||||
expect(res.items).toEqual([]);
|
||||
const url = String(spy.mock.calls[0]![0]);
|
||||
expect(url).toBe("http://test:1234/v1/audit?");
|
||||
});
|
||||
test("non-200 throws", async () => {
|
||||
globalThis.fetch = mockJSON(500, {});
|
||||
await expect(fetchAudit({ tenant_id: "t1" })).rejects.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -30,6 +30,41 @@ export type Entitlement = {
|
||||
expires_at?: string | null;
|
||||
};
|
||||
|
||||
export type APIKey = {
|
||||
id: string;
|
||||
tenant_id: string;
|
||||
product?: string;
|
||||
name: string;
|
||||
scopes: string[];
|
||||
prefix: string;
|
||||
created_by?: string;
|
||||
last_used_at?: string | null;
|
||||
revoked_at?: string | null;
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
export type AuditEvent = {
|
||||
id: number;
|
||||
tenant_id?: string;
|
||||
actor_id?: string;
|
||||
actor_name?: string;
|
||||
actor_type?: string;
|
||||
action: string;
|
||||
target_id?: string;
|
||||
target_type?: string;
|
||||
target_name?: string;
|
||||
product?: string;
|
||||
metadata?: Record<string, unknown>;
|
||||
source_ip?: string;
|
||||
user_agent?: string;
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
export type AuditPage = {
|
||||
items: AuditEvent[];
|
||||
next_cursor?: number;
|
||||
};
|
||||
|
||||
function baseUrl(): string {
|
||||
return process.env.TENANT_REGISTRY_URL ?? "http://localhost:8090";
|
||||
}
|
||||
@@ -157,3 +192,79 @@ export async function createTenant(
|
||||
if (status === 400) return { ok: false, error: "invalid_input" };
|
||||
return { ok: false, error: `unexpected_${status}` };
|
||||
}
|
||||
|
||||
// ─── api keys ────────────────────────────────────────────────────────────
|
||||
|
||||
export async function fetchAPIKeys(tenantId: string): Promise<APIKey[]> {
|
||||
const { status, data } = await req<{ items: APIKey[] }>(
|
||||
"GET",
|
||||
`/v1/api-keys?tenant_id=${encodeURIComponent(tenantId)}`,
|
||||
);
|
||||
if (status === 404) return [];
|
||||
if (status !== 200 || !data) {
|
||||
throw new Error(`tenant-registry: GET api-keys ${status}`);
|
||||
}
|
||||
return data.items;
|
||||
}
|
||||
|
||||
export type CreateAPIKeyInput = {
|
||||
tenant_id: string;
|
||||
name: string;
|
||||
product?: string;
|
||||
scopes?: string[];
|
||||
created_by?: string;
|
||||
};
|
||||
|
||||
export type CreateAPIKeyResult =
|
||||
| { ok: true; api_key: APIKey; plaintext: string }
|
||||
| { ok: false; error: string };
|
||||
|
||||
export async function createAPIKey(in_: CreateAPIKeyInput): Promise<CreateAPIKeyResult> {
|
||||
const { status, data } = await req<{ api_key: APIKey; plaintext: string }>(
|
||||
"POST",
|
||||
"/v1/api-keys",
|
||||
in_,
|
||||
);
|
||||
if (status === 201 && data) return { ok: true, api_key: data.api_key, plaintext: data.plaintext };
|
||||
if (status === 404) return { ok: false, error: "tenant_not_found" };
|
||||
if (status === 400) return { ok: false, error: "invalid_input" };
|
||||
if (status === 409) return { ok: false, error: "name_taken" };
|
||||
return { ok: false, error: `unexpected_${status}` };
|
||||
}
|
||||
|
||||
export async function revokeAPIKey(id: string): Promise<{ ok: boolean; error?: string }> {
|
||||
const { status } = await req<unknown>("DELETE", `/v1/api-keys/${encodeURIComponent(id)}`);
|
||||
if (status === 204) return { ok: true };
|
||||
if (status === 404) return { ok: false, error: "not_found" };
|
||||
return { ok: false, error: `unexpected_${status}` };
|
||||
}
|
||||
|
||||
// ─── audit ───────────────────────────────────────────────────────────────
|
||||
|
||||
export type AuditFilter = {
|
||||
tenant_id?: string;
|
||||
product?: string;
|
||||
actor_id?: string;
|
||||
action?: string;
|
||||
since?: string;
|
||||
until?: string;
|
||||
limit?: number;
|
||||
cursor?: number;
|
||||
};
|
||||
|
||||
export async function fetchAudit(f: AuditFilter): Promise<AuditPage> {
|
||||
const qs = new URLSearchParams();
|
||||
if (f.tenant_id) qs.set("tenant_id", f.tenant_id);
|
||||
if (f.product) qs.set("product", f.product);
|
||||
if (f.actor_id) qs.set("actor_id", f.actor_id);
|
||||
if (f.action) qs.set("action", f.action);
|
||||
if (f.since) qs.set("since", f.since);
|
||||
if (f.until) qs.set("until", f.until);
|
||||
if (f.limit) qs.set("limit", String(f.limit));
|
||||
if (f.cursor) qs.set("cursor", String(f.cursor));
|
||||
const { status, data } = await req<AuditPage>("GET", `/v1/audit?${qs.toString()}`);
|
||||
if (status !== 200 || !data) {
|
||||
throw new Error(`tenant-registry: GET audit ${status}`);
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
// One canary per shell surface — confirms the route mounts and renders
|
||||
// SOMETHING the user can see (heading or 403 gate) without OIDC.
|
||||
// All run signed-out, so role-gated routes land on the NotAuthorized 403.
|
||||
|
||||
test.describe("customer-area surfaces @needs-stack", () => {
|
||||
const surfaces = [
|
||||
{ path: "/products", expected: "403" },
|
||||
{ path: "/projects", expected: "403" },
|
||||
{ path: "/catalog", expected: "403" },
|
||||
{ path: "/settings", expected: "403" },
|
||||
{ path: "/settings/users", expected: "403" },
|
||||
{ path: "/settings/api-keys", expected: "403" },
|
||||
{ path: "/settings/integrations", expected: "403" },
|
||||
{ path: "/billing", expected: "403" },
|
||||
{ path: "/audit", expected: "403" },
|
||||
{ path: "/support", expected: "403" },
|
||||
];
|
||||
for (const { path, expected } of surfaces) {
|
||||
test(`acme${path} renders signed-out`, async ({ page }) => {
|
||||
await page.goto(path);
|
||||
await expect(page.getByRole("heading", { name: new RegExp(expected, "i") })).toBeVisible();
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user