Implement task 006 site config versioning and audit events
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
import type {
|
||||
ScriptConfigVersionCreateRequest,
|
||||
ScriptConfigVersionSummary,
|
||||
} from "@pipeline/shared";
|
||||
|
||||
export type AdminScriptVersionRow = {
|
||||
id: string;
|
||||
version: number;
|
||||
status: string;
|
||||
createdBy: string;
|
||||
createdAt: string;
|
||||
activatedAt: string | null;
|
||||
publishingYamlHash: string;
|
||||
transformScriptHash: string;
|
||||
isActive: boolean;
|
||||
rollbackTargetVersionId: string | null;
|
||||
diff: string;
|
||||
};
|
||||
|
||||
export type NewAdminScriptVersionDraft = {
|
||||
publishingYaml: string;
|
||||
transformScript: string;
|
||||
diff: string;
|
||||
activate: boolean;
|
||||
rollbackTargetVersionId: string;
|
||||
};
|
||||
|
||||
export type DraftValidationErrors = Partial<Record<keyof NewAdminScriptVersionDraft, string>>;
|
||||
|
||||
const DEFAULT_DIFF = '{\n "summary": "manual publish pipeline change"\n}';
|
||||
const DEFAULT_PUBLISHING_YAML = "target: site\nrepository:\n branch: main\n";
|
||||
const DEFAULT_TRANSFORM_SCRIPT = "export function transformArticle(article) {\n return article;\n}\n";
|
||||
|
||||
export function buildAdminScriptVersionRows(
|
||||
versions: readonly ScriptConfigVersionSummary[],
|
||||
): AdminScriptVersionRow[] {
|
||||
return versions.map((version) => ({
|
||||
id: version.id,
|
||||
version: version.version,
|
||||
status: version.status,
|
||||
createdBy: version.created_by,
|
||||
createdAt: version.created_at,
|
||||
activatedAt: version.activated_at ?? null,
|
||||
publishingYamlHash: version.publishing_yaml_hash,
|
||||
transformScriptHash: version.transform_script_hash,
|
||||
isActive: version.status === "ACTIVE",
|
||||
rollbackTargetVersionId: version.rollback_target_version_id ?? null,
|
||||
diff: JSON.stringify(version.diff),
|
||||
}));
|
||||
}
|
||||
|
||||
export function defaultScriptVersionDraft(): NewAdminScriptVersionDraft {
|
||||
return {
|
||||
publishingYaml: DEFAULT_PUBLISHING_YAML,
|
||||
transformScript: DEFAULT_TRANSFORM_SCRIPT,
|
||||
diff: DEFAULT_DIFF,
|
||||
activate: false,
|
||||
rollbackTargetVersionId: "",
|
||||
};
|
||||
}
|
||||
|
||||
export function buildCreateScriptVersionPayload(
|
||||
draft: NewAdminScriptVersionDraft,
|
||||
): ScriptConfigVersionCreateRequest {
|
||||
const parsedDiff = parseJsonObject(draft.diff) ?? {};
|
||||
|
||||
return {
|
||||
publishing_yaml: draft.publishingYaml,
|
||||
transform_script: draft.transformScript,
|
||||
diff: parsedDiff,
|
||||
activate: draft.activate,
|
||||
rollback_target_version_id: draft.rollbackTargetVersionId
|
||||
? (draft.rollbackTargetVersionId as string)
|
||||
: null,
|
||||
version: null,
|
||||
};
|
||||
}
|
||||
|
||||
export function parseJsonObject(value: string): Record<string, unknown> | null {
|
||||
if (!value.trim()) {
|
||||
return {};
|
||||
}
|
||||
try {
|
||||
const parsed = JSON.parse(value);
|
||||
if (
|
||||
parsed &&
|
||||
typeof parsed === "object" &&
|
||||
!Array.isArray(parsed) &&
|
||||
parsed !== null
|
||||
) {
|
||||
return parsed as Record<string, unknown>;
|
||||
}
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,300 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState, type FormEvent } from "react";
|
||||
|
||||
import type { ScriptConfigVersionSummary, TargetSiteConfig } from "@pipeline/shared";
|
||||
|
||||
import { ApiError, DEMO_ADMIN_EMAIL, activateScriptConfigVersion, createScriptConfigVersion, fetchScriptConfigVersions, rollbackScriptConfigVersion } from "@/shared/pipeline-api";
|
||||
import {
|
||||
buildAdminScriptVersionRows,
|
||||
buildCreateScriptVersionPayload,
|
||||
defaultScriptVersionDraft,
|
||||
parseJsonObject,
|
||||
type DraftValidationErrors,
|
||||
type NewAdminScriptVersionDraft,
|
||||
} from "./model";
|
||||
|
||||
type AdminScriptVersionsPanelProps = {
|
||||
site: TargetSiteConfig;
|
||||
initialVersions: readonly ScriptConfigVersionSummary[];
|
||||
};
|
||||
|
||||
function parseOptionalError(value: string): string | null {
|
||||
if (value.trim().length === 0) {
|
||||
return "Required value";
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function AdminScriptVersionsPanel({
|
||||
site,
|
||||
initialVersions,
|
||||
}: AdminScriptVersionsPanelProps) {
|
||||
const [versions, setVersions] = useState<readonly ScriptConfigVersionSummary[]>(
|
||||
initialVersions,
|
||||
);
|
||||
const [draft, setDraft] = useState<NewAdminScriptVersionDraft>(
|
||||
defaultScriptVersionDraft(),
|
||||
);
|
||||
const [errors, setErrors] = useState<DraftValidationErrors>({});
|
||||
const [formError, setFormError] = useState("");
|
||||
const [actionMessage, setActionMessage] = useState("");
|
||||
const [isSubmitting, setSubmitting] = useState(false);
|
||||
|
||||
const rows = useMemo(
|
||||
() =>
|
||||
buildAdminScriptVersionRows(versions),
|
||||
[versions],
|
||||
);
|
||||
|
||||
const hasVersions = rows.length > 0;
|
||||
const canSubmit = !isSubmitting;
|
||||
const rollbackCandidates = rows.filter((row) => row.id !== site.active_script_config_version_id);
|
||||
|
||||
async function refreshVersions() {
|
||||
const latest = await fetchScriptConfigVersions(
|
||||
site.id,
|
||||
DEMO_ADMIN_EMAIL,
|
||||
);
|
||||
setVersions(latest.versions);
|
||||
}
|
||||
|
||||
function updateField<K extends keyof NewAdminScriptVersionDraft>(
|
||||
field: K,
|
||||
value: NewAdminScriptVersionDraft[K],
|
||||
) {
|
||||
setDraft((current) => ({ ...current, [field]: value }));
|
||||
}
|
||||
|
||||
function clearMessages() {
|
||||
setFormError("");
|
||||
setActionMessage("");
|
||||
}
|
||||
|
||||
async function handleCreateVersion(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
const nextErrors: DraftValidationErrors = {};
|
||||
|
||||
const publishingYamlError = parseOptionalError(draft.publishingYaml);
|
||||
const transformScriptError = parseOptionalError(draft.transformScript);
|
||||
const diffObject = parseJsonObject(draft.diff);
|
||||
|
||||
if (publishingYamlError) {
|
||||
nextErrors.publishingYaml = publishingYamlError;
|
||||
}
|
||||
if (transformScriptError) {
|
||||
nextErrors.transformScript = transformScriptError;
|
||||
}
|
||||
if (diffObject === null) {
|
||||
nextErrors.diff = "Invalid JSON object";
|
||||
}
|
||||
|
||||
if (draft.rollbackTargetVersionId) {
|
||||
const validRollback = rows.some((row) => row.id === draft.rollbackTargetVersionId);
|
||||
if (!validRollback) {
|
||||
nextErrors.rollbackTargetVersionId = "Select a valid version ID";
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(nextErrors).length > 0) {
|
||||
setErrors(nextErrors);
|
||||
return;
|
||||
}
|
||||
|
||||
setErrors({});
|
||||
clearMessages();
|
||||
setSubmitting(true);
|
||||
|
||||
try {
|
||||
const payload = buildCreateScriptVersionPayload(draft);
|
||||
await createScriptConfigVersion(site.id, payload, DEMO_ADMIN_EMAIL);
|
||||
setActionMessage("New version created");
|
||||
await refreshVersions();
|
||||
} catch (error) {
|
||||
if (error instanceof ApiError) {
|
||||
setFormError(error.message || "Request failed");
|
||||
} else {
|
||||
setFormError("Unable to create publishing version");
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleActivate(versionId: string) {
|
||||
setSubmitting(true);
|
||||
clearMessages();
|
||||
try {
|
||||
await activateScriptConfigVersion(site.id, versionId, DEMO_ADMIN_EMAIL);
|
||||
await refreshVersions();
|
||||
setActionMessage("Version activated");
|
||||
} catch (error) {
|
||||
if (error instanceof ApiError) {
|
||||
setFormError(error.message || "Request failed");
|
||||
} else {
|
||||
setFormError("Unable to activate version");
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRollback(versionId: string) {
|
||||
setSubmitting(true);
|
||||
clearMessages();
|
||||
try {
|
||||
await rollbackScriptConfigVersion(site.id, versionId, DEMO_ADMIN_EMAIL);
|
||||
await refreshVersions();
|
||||
setActionMessage("Rollback applied");
|
||||
} catch (error) {
|
||||
if (error instanceof ApiError) {
|
||||
setFormError(error.message || "Request failed");
|
||||
} else {
|
||||
setFormError("Unable to rollback version");
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section>
|
||||
<h2>{site.name} script versions</h2>
|
||||
{formError ? <p className="formError">Error: {formError}</p> : null}
|
||||
{actionMessage ? <p className="formSuccess">{actionMessage}</p> : null}
|
||||
|
||||
<h3>Create new version</h3>
|
||||
<form className="articleForm" onSubmit={handleCreateVersion}>
|
||||
<label htmlFor="publishingYaml">Publishing YAML</label>
|
||||
<textarea
|
||||
id="publishingYaml"
|
||||
className="codeArea"
|
||||
value={draft.publishingYaml}
|
||||
onChange={(event) => updateField("publishingYaml", event.target.value)}
|
||||
/>
|
||||
{errors.publishingYaml ? <p className="fieldError">{errors.publishingYaml}</p> : null}
|
||||
|
||||
<label htmlFor="transformScript">Transform script</label>
|
||||
<textarea
|
||||
id="transformScript"
|
||||
className="codeArea"
|
||||
value={draft.transformScript}
|
||||
onChange={(event) => updateField("transformScript", event.target.value)}
|
||||
/>
|
||||
{errors.transformScript ? (
|
||||
<p className="fieldError">{errors.transformScript}</p>
|
||||
) : null}
|
||||
|
||||
<label htmlFor="diff">Diff payload (JSON)</label>
|
||||
<textarea
|
||||
id="diff"
|
||||
className="codeArea"
|
||||
value={draft.diff}
|
||||
onChange={(event) => updateField("diff", event.target.value)}
|
||||
/>
|
||||
{errors.diff ? <p className="fieldError">{errors.diff}</p> : null}
|
||||
|
||||
<label htmlFor="activate">
|
||||
<input
|
||||
id="activate"
|
||||
type="checkbox"
|
||||
checked={draft.activate}
|
||||
onChange={(event) => updateField("activate", event.target.checked)}
|
||||
/>
|
||||
Activate on create
|
||||
</label>
|
||||
|
||||
<label htmlFor="rollbackTargetVersionId">Rollback target version (optional)</label>
|
||||
<select
|
||||
id="rollbackTargetVersionId"
|
||||
value={draft.rollbackTargetVersionId}
|
||||
onChange={(event) => updateField("rollbackTargetVersionId", event.target.value)}
|
||||
>
|
||||
<option value="">None</option>
|
||||
{rollbackCandidates.map((candidate) => (
|
||||
<option key={candidate.id} value={candidate.id}>
|
||||
v{candidate.version}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.rollbackTargetVersionId ? (
|
||||
<p className="fieldError">{errors.rollbackTargetVersionId}</p>
|
||||
) : null}
|
||||
|
||||
<div className="formActions">
|
||||
<button type="submit" disabled={!canSubmit}>
|
||||
{isSubmitting ? "Saving..." : "Create version"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h3>Version history</h3>
|
||||
{!hasVersions ? (
|
||||
<p className="emptyState">No versions yet.</p>
|
||||
) : (
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Version</th>
|
||||
<th>Status</th>
|
||||
<th>Created</th>
|
||||
<th>Activated</th>
|
||||
<th>Author</th>
|
||||
<th>Hashes</th>
|
||||
<th>Rollback target</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((version) => (
|
||||
<tr key={version.id}>
|
||||
<td>
|
||||
{version.version} {version.isActive ? "(active)" : null}
|
||||
<div style={{ marginTop: 6 }}>
|
||||
<strong>diff</strong>: {version.diff}
|
||||
</div>
|
||||
</td>
|
||||
<td>{version.status}</td>
|
||||
<td>{new Date(version.createdAt).toLocaleString()}</td>
|
||||
<td>
|
||||
{version.activatedAt
|
||||
? new Date(version.activatedAt).toLocaleString()
|
||||
: "—"}
|
||||
</td>
|
||||
<td>{version.createdBy}</td>
|
||||
<td>
|
||||
<div>YAML: {version.publishingYamlHash.slice(0, 8)}</div>
|
||||
<div>Script: {version.transformScriptHash.slice(0, 8)}</div>
|
||||
</td>
|
||||
<td>{version.rollbackTargetVersionId ?? "—"}</td>
|
||||
<td>
|
||||
{!version.isActive ? (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleActivate(version.id)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Activate
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRollback(version.id)}
|
||||
disabled={isSubmitting}
|
||||
className="tableAction"
|
||||
>
|
||||
Rollback
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<span>Current</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,325 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState, type FormEvent } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import type { TargetSiteConfigCreateRequest } from "@pipeline/shared";
|
||||
|
||||
import { ApiError, createTargetSite, DEMO_ADMIN_EMAIL } from "@/shared/pipeline-api";
|
||||
|
||||
type AdminSiteDraft = {
|
||||
name: string;
|
||||
slug: string;
|
||||
defaultLanguage: string;
|
||||
brandVoice: string;
|
||||
audience: string;
|
||||
publishingType: string;
|
||||
repositoryUrl: string;
|
||||
productionBranch: string;
|
||||
contentFormat: string;
|
||||
contentPathTemplate: string;
|
||||
assetPathTemplate: string;
|
||||
dryRunRenderer: string;
|
||||
frontmatterMapping: string;
|
||||
seoRules: string;
|
||||
visualRules: string;
|
||||
sourceRules: string;
|
||||
};
|
||||
|
||||
type ValidationErrors = Partial<Record<keyof AdminSiteDraft, string>>;
|
||||
|
||||
const defaultDraft = (): AdminSiteDraft => ({
|
||||
name: "",
|
||||
slug: "",
|
||||
defaultLanguage: "en",
|
||||
brandVoice: "Practical and helpful editorial guidance.",
|
||||
audience: "Content and marketing teams.",
|
||||
publishingType: "git_next",
|
||||
repositoryUrl: "",
|
||||
productionBranch: "main",
|
||||
contentFormat: "mdx",
|
||||
contentPathTemplate: "content/articles/{slug}.mdx",
|
||||
assetPathTemplate: "public/articles/{slug}/{filename}",
|
||||
dryRunRenderer: "next-mdx",
|
||||
frontmatterMapping: JSON.stringify(
|
||||
{
|
||||
title: "title",
|
||||
description: "description",
|
||||
publishedAt: "published_at",
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
seoRules: JSON.stringify({}, null, 2),
|
||||
visualRules: JSON.stringify({}, null, 2),
|
||||
sourceRules: JSON.stringify({}, null, 2),
|
||||
});
|
||||
|
||||
function parseJsonField(value: string): Record<string, unknown> | null {
|
||||
if (!value.trim()) {
|
||||
return {};
|
||||
}
|
||||
try {
|
||||
const parsed = JSON.parse(value);
|
||||
if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
|
||||
return parsed as Record<string, unknown>;
|
||||
}
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function AdminSiteCreateForm() {
|
||||
const router = useRouter();
|
||||
const [values, setValues] = useState<AdminSiteDraft>(defaultDraft());
|
||||
const [errors, setErrors] = useState<ValidationErrors>({});
|
||||
const [formError, setFormError] = useState("");
|
||||
const [isSubmitting, setSubmitting] = useState(false);
|
||||
|
||||
const canSubmit = useMemo(
|
||||
() =>
|
||||
!isSubmitting &&
|
||||
values.name.trim() !== "" &&
|
||||
values.slug.trim() !== "" &&
|
||||
values.repositoryUrl.trim() !== "" &&
|
||||
values.brandVoice.trim() !== "" &&
|
||||
values.audience.trim() !== "",
|
||||
[isSubmitting, values],
|
||||
);
|
||||
|
||||
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
|
||||
const nextErrors: ValidationErrors = {};
|
||||
const parsedFrontmatter = parseJsonField(values.frontmatterMapping);
|
||||
const parsedSeo = parseJsonField(values.seoRules);
|
||||
const parsedVisual = parseJsonField(values.visualRules);
|
||||
const parsedSource = parseJsonField(values.sourceRules);
|
||||
|
||||
if (parsedFrontmatter === null) {
|
||||
nextErrors.frontmatterMapping = "Invalid JSON object";
|
||||
}
|
||||
if (parsedSeo === null) {
|
||||
nextErrors.seoRules = "Invalid JSON object";
|
||||
}
|
||||
if (parsedVisual === null) {
|
||||
nextErrors.visualRules = "Invalid JSON object";
|
||||
}
|
||||
if (parsedSource === null) {
|
||||
nextErrors.sourceRules = "Invalid JSON object";
|
||||
}
|
||||
if (!values.slug.trim()) {
|
||||
nextErrors.slug = "Slug is required";
|
||||
}
|
||||
if (!values.name.trim()) {
|
||||
nextErrors.name = "Name is required";
|
||||
}
|
||||
if (!values.repositoryUrl.trim()) {
|
||||
nextErrors.repositoryUrl = "Repository URL is required";
|
||||
}
|
||||
if (!values.brandVoice.trim()) {
|
||||
nextErrors.brandVoice = "Brand voice is required";
|
||||
}
|
||||
if (!values.audience.trim()) {
|
||||
nextErrors.audience = "Audience is required";
|
||||
}
|
||||
if (Object.keys(nextErrors).length > 0) {
|
||||
setErrors(nextErrors);
|
||||
return;
|
||||
}
|
||||
|
||||
setErrors({});
|
||||
setFormError("");
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const payload: TargetSiteConfigCreateRequest = {
|
||||
name: values.name,
|
||||
slug: values.slug,
|
||||
publishing_type: values.publishingType,
|
||||
default_language: values.defaultLanguage,
|
||||
brand_voice: values.brandVoice,
|
||||
audience: values.audience,
|
||||
seo_rules: parsedSeo ?? {},
|
||||
visual_rules: parsedVisual ?? {},
|
||||
source_rules: parsedSource ?? {},
|
||||
publishing_rules: {
|
||||
repository_url: values.repositoryUrl,
|
||||
production_branch: values.productionBranch,
|
||||
content_format: values.contentFormat,
|
||||
content_path_template: values.contentPathTemplate,
|
||||
asset_path_template: values.assetPathTemplate,
|
||||
frontmatter_mapping: parsedFrontmatter ?? {},
|
||||
dry_run_renderer: values.dryRunRenderer || null,
|
||||
},
|
||||
};
|
||||
|
||||
await createTargetSite(payload, DEMO_ADMIN_EMAIL);
|
||||
router.push("/admin/sites");
|
||||
router.refresh();
|
||||
} catch (error) {
|
||||
if (error instanceof ApiError) {
|
||||
setFormError(error.message || "Request failed");
|
||||
} else {
|
||||
setFormError("Unable to create site config");
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
function updateField<K extends keyof AdminSiteDraft>(
|
||||
field: K,
|
||||
value: AdminSiteDraft[K],
|
||||
) {
|
||||
setValues((current) => ({ ...current, [field]: value }));
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="articleForm" onSubmit={handleSubmit}>
|
||||
<h2>Create target site config</h2>
|
||||
{formError ? <p className="formError">Error: {formError}</p> : null}
|
||||
<label htmlFor="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
value={values.name}
|
||||
onChange={(event) => updateField("name", event.target.value)}
|
||||
placeholder="Editorial blog"
|
||||
/>
|
||||
{errors.name ? <p className="fieldError">{errors.name}</p> : null}
|
||||
|
||||
<label htmlFor="slug">Slug</label>
|
||||
<input
|
||||
id="slug"
|
||||
value={values.slug}
|
||||
onChange={(event) => updateField("slug", event.target.value)}
|
||||
placeholder="editorial-blog"
|
||||
/>
|
||||
{errors.slug ? <p className="fieldError">{errors.slug}</p> : null}
|
||||
|
||||
<label htmlFor="defaultLanguage">Default language</label>
|
||||
<input
|
||||
id="defaultLanguage"
|
||||
value={values.defaultLanguage}
|
||||
onChange={(event) => updateField("defaultLanguage", event.target.value)}
|
||||
/>
|
||||
|
||||
<label htmlFor="publishingType">Publishing type</label>
|
||||
<input
|
||||
id="publishingType"
|
||||
value={values.publishingType}
|
||||
onChange={(event) => updateField("publishingType", event.target.value)}
|
||||
/>
|
||||
|
||||
<label htmlFor="brandVoice">Brand voice</label>
|
||||
<input
|
||||
id="brandVoice"
|
||||
value={values.brandVoice}
|
||||
onChange={(event) => updateField("brandVoice", event.target.value)}
|
||||
placeholder="Confident and practical"
|
||||
/>
|
||||
{errors.brandVoice ? <p className="fieldError">{errors.brandVoice}</p> : null}
|
||||
|
||||
<label htmlFor="audience">Audience</label>
|
||||
<input
|
||||
id="audience"
|
||||
value={values.audience}
|
||||
onChange={(event) => updateField("audience", event.target.value)}
|
||||
placeholder="Marketing and editorial teams"
|
||||
/>
|
||||
{errors.audience ? <p className="fieldError">{errors.audience}</p> : null}
|
||||
|
||||
<label htmlFor="repositoryUrl">Repository URL</label>
|
||||
<input
|
||||
id="repositoryUrl"
|
||||
value={values.repositoryUrl}
|
||||
onChange={(event) => updateField("repositoryUrl", event.target.value)}
|
||||
placeholder="git@github.com:org/repo.git"
|
||||
/>
|
||||
{errors.repositoryUrl ? <p className="fieldError">{errors.repositoryUrl}</p> : null}
|
||||
|
||||
<label htmlFor="productionBranch">Production branch</label>
|
||||
<input
|
||||
id="productionBranch"
|
||||
value={values.productionBranch}
|
||||
onChange={(event) => updateField("productionBranch", event.target.value)}
|
||||
placeholder="main"
|
||||
/>
|
||||
|
||||
<label htmlFor="contentFormat">Content format</label>
|
||||
<input
|
||||
id="contentFormat"
|
||||
value={values.contentFormat}
|
||||
onChange={(event) => updateField("contentFormat", event.target.value)}
|
||||
placeholder="mdx"
|
||||
/>
|
||||
|
||||
<label htmlFor="contentPathTemplate">Content path template</label>
|
||||
<input
|
||||
id="contentPathTemplate"
|
||||
value={values.contentPathTemplate}
|
||||
onChange={(event) => updateField("contentPathTemplate", event.target.value)}
|
||||
placeholder="content/articles/{slug}.mdx"
|
||||
/>
|
||||
|
||||
<label htmlFor="assetPathTemplate">Asset path template</label>
|
||||
<input
|
||||
id="assetPathTemplate"
|
||||
value={values.assetPathTemplate}
|
||||
onChange={(event) => updateField("assetPathTemplate", event.target.value)}
|
||||
placeholder="public/articles/{slug}/{filename}"
|
||||
/>
|
||||
|
||||
<label htmlFor="dryRunRenderer">Dry-run renderer</label>
|
||||
<input
|
||||
id="dryRunRenderer"
|
||||
value={values.dryRunRenderer}
|
||||
onChange={(event) => updateField("dryRunRenderer", event.target.value)}
|
||||
/>
|
||||
|
||||
<label htmlFor="frontmatterMapping">Frontmatter mapping (JSON)</label>
|
||||
<textarea
|
||||
id="frontmatterMapping"
|
||||
className="codeArea"
|
||||
value={values.frontmatterMapping}
|
||||
onChange={(event) => updateField("frontmatterMapping", event.target.value)}
|
||||
/>
|
||||
{errors.frontmatterMapping ? (
|
||||
<p className="fieldError">{errors.frontmatterMapping}</p>
|
||||
) : null}
|
||||
|
||||
<label htmlFor="seoRules">SEO rules (JSON)</label>
|
||||
<textarea
|
||||
id="seoRules"
|
||||
className="codeArea"
|
||||
value={values.seoRules}
|
||||
onChange={(event) => updateField("seoRules", event.target.value)}
|
||||
/>
|
||||
{errors.seoRules ? <p className="fieldError">{errors.seoRules}</p> : null}
|
||||
|
||||
<label htmlFor="visualRules">Visual rules (JSON)</label>
|
||||
<textarea
|
||||
id="visualRules"
|
||||
className="codeArea"
|
||||
value={values.visualRules}
|
||||
onChange={(event) => updateField("visualRules", event.target.value)}
|
||||
/>
|
||||
{errors.visualRules ? <p className="fieldError">{errors.visualRules}</p> : null}
|
||||
|
||||
<label htmlFor="sourceRules">Source rules (JSON)</label>
|
||||
<textarea
|
||||
id="sourceRules"
|
||||
className="codeArea"
|
||||
value={values.sourceRules}
|
||||
onChange={(event) => updateField("sourceRules", event.target.value)}
|
||||
/>
|
||||
{errors.sourceRules ? <p className="fieldError">{errors.sourceRules}</p> : null}
|
||||
|
||||
<div className="formActions">
|
||||
<button type="submit" disabled={!canSubmit}>
|
||||
{isSubmitting ? "Creating..." : "Create site"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import type { TargetSiteConfig } from "@pipeline/shared";
|
||||
|
||||
export type AdminSiteRow = {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
publishingRepository: string;
|
||||
productionBranch: string;
|
||||
activeVersionId: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
export function buildAdminSiteRows(
|
||||
sites: readonly TargetSiteConfig[],
|
||||
): AdminSiteRow[] {
|
||||
return sites.map((site) => ({
|
||||
id: site.id,
|
||||
name: site.name,
|
||||
slug: site.slug,
|
||||
publishingRepository: site.publishing_rules.repository_url,
|
||||
productionBranch: site.publishing_rules.production_branch,
|
||||
activeVersionId: site.active_script_config_version_id ?? null,
|
||||
createdAt: site.created_at,
|
||||
updatedAt: site.updated_at,
|
||||
}));
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import type { AdminSiteRow } from "./model";
|
||||
|
||||
type AdminSiteConfigTableProps = {
|
||||
rows: readonly AdminSiteRow[];
|
||||
};
|
||||
|
||||
export function AdminSiteConfigTable({ rows }: AdminSiteConfigTableProps) {
|
||||
if (rows.length === 0) {
|
||||
return <p className="emptyState">No target sites yet.</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Slug</th>
|
||||
<th>Repository</th>
|
||||
<th>Branch</th>
|
||||
<th>Active config version</th>
|
||||
<th>Revisions</th>
|
||||
<th>Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row) => (
|
||||
<tr key={row.id}>
|
||||
<td>{row.name}</td>
|
||||
<td>{row.slug}</td>
|
||||
<td>{row.publishingRepository}</td>
|
||||
<td>{row.productionBranch}</td>
|
||||
<td>{row.activeVersionId ?? "none"}</td>
|
||||
<td>
|
||||
<Link href={`/admin/scripts?siteId=${row.id}`}>Versions</Link>
|
||||
</td>
|
||||
<td>{new Date(row.updatedAt).toLocaleString()}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user