bsmnt 0.13.1 → 0.15.0

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/components/redirect-import-dialog.tsx

@@ -0,0 +1,538 @@
+import { DownloadIcon, UploadIcon } from "@sanity/icons";
+import {
+	Badge,
+	type BadgeTone,
+	Box,
+	Button,
+	Card,
+	Dialog,
+	Flex,
+	Spinner,
+	Stack,
+	Tab,
+	TabList,
+	Text,
+} from "@sanity/ui";
+import { type DragEvent, useRef, useState, useSyncExternalStore } from "react";
+import { type LayoutProps, useClient } from "sanity";
+import { formatCsv } from "@/lib/integrations/sanity/csv";
+import { apiVersion } from "@/lib/integrations/sanity/env";
+import { PINNED_PAGE_ENTRIES } from "@/lib/integrations/sanity/pinned-pages";
+import { PAGE_SITEMAP_QUERY } from "@/lib/integrations/sanity/queries";
+import {
+	commitRedirectImport,
+	describePath,
+	type ExistingRedirect,
+	importReportRows,
+	MAX_FILE_BYTES,
+	normalizePath,
+	type PlannedRow,
+	planRedirectImport,
+	REDIRECT_CSV_TEMPLATE,
+	RedirectImportError,
+	type RowStatus,
+	readRedirectCsv,
+	rowsToWrite,
+	statusLabel,
+} from "@/lib/integrations/sanity/redirect-import";
+import type { PAGE_SITEMAP_QUERY_RESULT } from "@/lib/integrations/sanity/sanity.types";
+
+const VISIBLE_ROWS = 300;
+
+let isOpen = false;
+const listeners = new Set<() => void>();
+const subscribe = (listener: () => void) => {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+};
+const setOpen = (value: boolean) => {
+	isOpen = value;
+	for (const listener of listeners) listener();
+};
+
+/** Opened from the Redirects list menu; rendered by `StudioLayout`. */
+export const openRedirectImport = () => setOpen(true);
+
+export function StudioLayout(props: LayoutProps) {
+	const open = useSyncExternalStore(
+		subscribe,
+		() => isOpen,
+		() => false,
+	);
+	return (
+		<>
+			{props.renderDefault(props)}
+			{open ? <RedirectImportDialog onClose={() => setOpen(false)} /> : null}
+		</>
+	);
+}
+
+// Full URLs on these hosts import as paths; the launch domain counts with or without www.
+const getSiteHosts = () => {
+	const hosts = new Set([window.location.host]);
+	const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
+	if (baseUrl && URL.canParse(baseUrl)) {
+		const { host } = new URL(baseUrl);
+		hosts.add(host);
+		hosts.add(host.startsWith("www.") ? host.slice(4) : `www.${host}`);
+	}
+	return [...hosts];
+};
+
+type Stage =
+	| { kind: "pick"; error?: string }
+	| { kind: "reading"; fileName: string }
+	| { kind: "review"; fileName: string; rows: PlannedRow[]; notes: string[] }
+	| { kind: "importing"; fileName: string; written: number; total: number }
+	| {
+			kind: "done";
+			fileName: string;
+			rows: PlannedRow[];
+			written: Set<PlannedRow>;
+			error?: string;
+	  };
+
+type Filter = "write" | "attention" | "rest" | "all";
+
+const TONES: Record<RowStatus, BadgeTone> = {
+	create: "positive",
+	update: "caution",
+	unchanged: "default",
+	duplicate: "default",
+	skipped: "default",
+	error: "critical",
+};
+
+const ALL_FILTER = { id: "all", title: "All", test: () => true } as const;
+
+const FILTERS: {
+	id: Filter;
+	title: string;
+	test: (row: PlannedRow) => boolean;
+}[] = [
+	{
+		id: "write",
+		title: "To import",
+		test: (row) => row.status === "create" || row.status === "update",
+	},
+	{
+		id: "attention",
+		title: "Needs a look",
+		test: (row) => row.status === "error" || row.notes.length > 0,
+	},
+	{
+		id: "rest",
+		title: "Left alone",
+		test: (row) =>
+			row.status === "unchanged" ||
+			row.status === "duplicate" ||
+			row.status === "skipped",
+	},
+	ALL_FILTER,
+];
+
+const plural = (count: number, word: string) =>
+	`${count} ${word}${count === 1 ? "" : "s"}`;
+
+const statusCode = (permanent: boolean) => (permanent ? "308" : "307");
+
+const download = (fileName: string, text: string) => {
+	const url = URL.createObjectURL(
+		new Blob([text], { type: "text/csv;charset=utf-8" }),
+	);
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = fileName;
+	link.click();
+	setTimeout(() => URL.revokeObjectURL(url), 1000);
+};
+
+const reportName = (fileName: string) =>
+	`${fileName.replace(/\.[^.]+$/, "")}-import-report.csv`;
+
+function RowItem({ row }: { row: PlannedRow }) {
+	const target = row.redirect
+		? describePath(row.redirect.destination)
+		: row.destination || "—";
+	const source = row.redirect ? describePath(row.redirect.source) : row.source;
+	return (
+		<Card borderBottom paddingY={2} paddingX={1}>
+			<Flex align="flex-start" gap={3}>
+				<Box style={{ minWidth: 48 }}>
+					<Text muted size={1}>
+						Row {row.line}
+					</Text>
+				</Box>
+				<Stack flex={1} space={2}>
+					<Text size={1} style={{ overflowWrap: "anywhere" }}>
+						{source || "—"} → {target}
+						{row.redirect?.permanent === false ? " (307)" : ""}
+					</Text>
+					{row.previous ? (
+						<Text muted size={1} style={{ overflowWrap: "anywhere" }}>
+							Was {describePath(row.previous.destination)} (
+							{statusCode(row.previous.permanent)})
+						</Text>
+					) : null}
+					{row.problem ? (
+						<Text
+							size={1}
+							style={{
+								color:
+									row.status === "error"
+										? "var(--card-badge-critical-fg-color)"
+										: undefined,
+							}}
+						>
+							{row.problem}
+						</Text>
+					) : null}
+					{row.notes.map((note) => (
+						<Text key={note} muted size={1}>
+							{note}
+						</Text>
+					))}
+				</Stack>
+				<Badge tone={TONES[row.status]}>{statusLabel(row.status)}</Badge>
+			</Flex>
+		</Card>
+	);
+}
+
+function Review({ rows, notes }: { rows: PlannedRow[]; notes: string[] }) {
+	const [filter, setFilter] = useState<Filter>(
+		rows.some((row) => row.status === "error") ? "attention" : "write",
+	);
+	const active = FILTERS.find(({ id }) => id === filter) ?? ALL_FILTER;
+	const shown = rows.filter(active.test);
+	const counts = new Map<RowStatus, number>();
+	for (const row of rows) {
+		counts.set(row.status, (counts.get(row.status) ?? 0) + 1);
+	}
+
+	return (
+		<Stack space={4}>
+			<Flex gap={2} wrap="wrap">
+				{(Object.keys(TONES) as RowStatus[]).map((status) =>
+					counts.get(status) ? (
+						<Badge key={status} tone={TONES[status]}>
+							{statusLabel(status)}: {counts.get(status)}
+						</Badge>
+					) : null,
+				)}
+			</Flex>
+			{notes.map((note) => (
+				<Card key={note} padding={3} radius={2} tone="caution">
+					<Text size={1}>{note}</Text>
+				</Card>
+			))}
+			<TabList space={1}>
+				{FILTERS.map(({ id, title, test }) => (
+					<Tab
+						aria-controls="redirect-import-rows"
+						id={`redirect-import-${id}`}
+						key={id}
+						label={`${title} (${rows.filter(test).length})`}
+						onClick={() => setFilter(id)}
+						selected={filter === id}
+					/>
+				))}
+			</TabList>
+			<Stack id="redirect-import-rows">
+				{shown.length === 0 ? (
+					<Text muted size={1}>
+						Nothing here.
+					</Text>
+				) : (
+					shown
+						.slice(0, VISIBLE_ROWS)
+						.map((row) => <RowItem key={row.line} row={row} />)
+				)}
+				{shown.length > VISIBLE_ROWS ? (
+					<Box paddingTop={3}>
+						<Text muted size={1}>
+							Showing {VISIBLE_ROWS} of {shown.length}. The report lists every
+							row.
+						</Text>
+					</Box>
+				) : null}
+			</Stack>
+		</Stack>
+	);
+}
+
+function RedirectImportDialog({ onClose }: { onClose: () => void }) {
+	const client = useClient({ apiVersion });
+	const input = useRef<HTMLInputElement>(null);
+	const [stage, setStage] = useState<Stage>({ kind: "pick" });
+	const [dragging, setDragging] = useState(false);
+
+	const read = async (file: File) => {
+		if (file.size > MAX_FILE_BYTES) {
+			setStage({
+				kind: "pick",
+				error: "That file is over 5 MB. Split it into smaller files.",
+			});
+			return;
+		}
+		setStage({ kind: "reading", fileName: file.name });
+		let parsed: ReturnType<typeof readRedirectCsv>;
+		try {
+			parsed = readRedirectCsv(await file.text());
+		} catch {
+			setStage({ kind: "pick", error: `Couldn't open ${file.name}.` });
+			return;
+		}
+		if ("error" in parsed) {
+			setStage({ kind: "pick", error: parsed.error });
+			return;
+		}
+
+		let existing: ExistingRedirect[];
+		let pages: PAGE_SITEMAP_QUERY_RESULT;
+		try {
+			[existing, pages] = await Promise.all([
+				client
+					.withConfig({ perspective: "raw" })
+					.fetch<ExistingRedirect[]>(
+						`*[_type == "redirect"]{ _id, _rev, "source": source.current, destination, permanent }`,
+					),
+				client
+					.withConfig({ perspective: "published" })
+					.fetch<PAGE_SITEMAP_QUERY_RESULT>(PAGE_SITEMAP_QUERY, {
+						pinnedIds: PINNED_PAGE_ENTRIES.map((entry) => entry.id),
+					}),
+			]);
+		} catch (error) {
+			setStage({
+				kind: "pick",
+				error: `Couldn't load the current redirects: ${error instanceof Error ? error.message : String(error)}`,
+			});
+			return;
+		}
+
+		setStage({
+			kind: "review",
+			fileName: file.name,
+			notes: parsed.notes,
+			rows: planRedirectImport(parsed.rows, {
+				existing,
+				routes: new Set(pages.map((page) => normalizePath(page.slug ?? ""))),
+				siteHosts: getSiteHosts(),
+			}),
+		});
+	};
+
+	const runImport = async (fileName: string, rows: PlannedRow[]) => {
+		const writes = rowsToWrite(rows);
+		setStage({ kind: "importing", fileName, written: 0, total: writes.length });
+		try {
+			const written = await commitRedirectImport(client, rows, (count) =>
+				setStage({
+					kind: "importing",
+					fileName,
+					written: count,
+					total: writes.length,
+				}),
+			);
+			setStage({ kind: "done", fileName, rows, written: new Set(written) });
+		} catch (error) {
+			setStage({
+				kind: "done",
+				fileName,
+				rows,
+				written: new Set(
+					error instanceof RedirectImportError ? error.written : [],
+				),
+				error: error instanceof Error ? error.message : String(error),
+			});
+		}
+	};
+
+	const onDrop = (event: DragEvent) => {
+		event.preventDefault();
+		setDragging(false);
+		const file = event.dataTransfer.files[0];
+		if (file) void read(file);
+	};
+
+	const busy = stage.kind === "reading" || stage.kind === "importing";
+	const writes = stage.kind === "review" ? rowsToWrite(stage.rows) : [];
+
+	const footer = (
+		<Flex gap={2} justify="space-between" padding={2}>
+			{stage.kind === "review" || stage.kind === "done" ? (
+				<Button
+					icon={DownloadIcon}
+					mode="bleed"
+					onClick={() =>
+						download(
+							reportName(stage.fileName),
+							formatCsv(
+								["row", "source", "destination", "type", "result", "details"],
+								importReportRows(
+									stage.rows,
+									stage.kind === "done" ? stage.written : new Set(),
+								),
+							),
+						)
+					}
+					text="Download report"
+				/>
+			) : (
+				<Box />
+			)}
+			<Flex gap={2}>
+				{stage.kind === "review" ? (
+					<>
+						<Button
+							mode="ghost"
+							onClick={() => setStage({ kind: "pick" })}
+							text="Choose another file"
+						/>
+						<Button
+							disabled={writes.length === 0}
+							onClick={() => void runImport(stage.fileName, stage.rows)}
+							text={
+								writes.length === 0
+									? "Nothing to import"
+									: `Import ${plural(writes.length, "redirect")}`
+							}
+							tone="primary"
+						/>
+					</>
+				) : null}
+				{stage.kind === "done" ? (
+					<Button onClick={onClose} text="Close" tone="primary" />
+				) : null}
+			</Flex>
+		</Flex>
+	);
+
+	return (
+		<Dialog
+			footer={footer}
+			header={
+				stage.kind === "pick" ? "Import redirects" : `Import ${stage.fileName}`
+			}
+			id="redirect-import"
+			{...(busy ? {} : { onClickOutside: onClose, onClose })}
+			width={2}
+		>
+			<Box padding={4}>
+				{stage.kind === "pick" ? (
+					<Stack space={4}>
+						<Text size={1}>
+							A CSV with a <code>source</code> and a <code>destination</code>{" "}
+							column, and optionally <code>type</code>: permanent (308, the
+							default) or temporary (307). Paths or full URLs on this site both
+							work. Rows without a destination are skipped, and existing
+							redirects with the same source are updated.
+						</Text>
+						{stage.error ? (
+							<Card padding={3} radius={2} role="alert" tone="critical">
+								<Text size={1}>{stage.error}</Text>
+							</Card>
+						) : null}
+						<Card
+							border
+							onDragLeave={() => setDragging(false)}
+							onDragOver={(event) => {
+								event.preventDefault();
+								setDragging(true);
+							}}
+							onDrop={onDrop}
+							padding={5}
+							radius={2}
+							style={{ borderStyle: "dashed" }}
+							tone={dragging ? "primary" : "default"}
+						>
+							<Stack space={3} style={{ justifyItems: "center" }}>
+								<Button
+									icon={UploadIcon}
+									onClick={() => input.current?.click()}
+									text="Choose a CSV file"
+								/>
+								<Text muted size={1}>
+									or drop it here
+								</Text>
+							</Stack>
+							<input
+								accept=".csv,.tsv,.txt,text/csv,text/tab-separated-values,text/plain"
+								hidden
+								onChange={(event) => {
+									const file = event.currentTarget.files?.[0];
+									event.currentTarget.value = "";
+									if (file) void read(file);
+								}}
+								ref={input}
+								type="file"
+							/>
+						</Card>
+						<Box>
+							<Button
+								icon={DownloadIcon}
+								mode="bleed"
+								onClick={() =>
+									download("redirects-template.csv", REDIRECT_CSV_TEMPLATE)
+								}
+								text="Download a template"
+							/>
+						</Box>
+					</Stack>
+				) : null}
+
+				{stage.kind === "reading" ? (
+					<Flex align="center" gap={3}>
+						<Spinner muted />
+						<Text size={1}>Checking every row against the site…</Text>
+					</Flex>
+				) : null}
+
+				{stage.kind === "review" ? (
+					<Stack space={4}>
+						<Text size={1}>
+							Rows marked Error are left out. Imported redirects are published
+							straight away.
+						</Text>
+						<Review notes={stage.notes} rows={stage.rows} />
+					</Stack>
+				) : null}
+
+				{stage.kind === "importing" ? (
+					<Flex align="center" gap={3}>
+						<Spinner muted />
+						<Text size={1}>
+							Imported {stage.written} of {stage.total}… Keep this open until it
+							finishes.
+						</Text>
+					</Flex>
+				) : null}
+
+				{stage.kind === "done" ? (
+					<Stack space={4}>
+						{stage.error ? (
+							<Card padding={3} radius={2} role="alert" tone="critical">
+								<Text size={1}>
+									Imported {stage.written.size} of{" "}
+									{rowsToWrite(stage.rows).length} before the import stopped:{" "}
+									{stage.error}. Importing the same file again is safe: rows
+									already done show as Unchanged.
+								</Text>
+							</Card>
+						) : (
+							<Card padding={3} radius={2} tone="positive">
+								<Text size={1}>
+									Imported {plural(stage.written.size, "redirect")}.
+								</Text>
+							</Card>
+						)}
+						<Review notes={[]} rows={stage.rows} />
+					</Stack>
+				) : null}
+			</Box>
+		</Dialog>
+	);
+}

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/csv.ts

@@ -0,0 +1,88 @@
+const BOM = String.fromCharCode(0xfeff);
+const DELIMITERS = [",", ";", "\t"] as const;
+
+// Excel writes `;` where the decimal separator is a comma, and TSV exports use tabs.
+const detectDelimiter = (text: string) => {
+	const counts = new Map<string, number>();
+	let quoted = false;
+	for (const char of text) {
+		if (char === '"') quoted = !quoted;
+		else if (!quoted && (char === "\n" || char === "\r")) break;
+		else if (!quoted) counts.set(char, (counts.get(char) ?? 0) + 1);
+	}
+	return DELIMITERS.reduce((best, delimiter) =>
+		(counts.get(delimiter) ?? 0) > (counts.get(best) ?? 0) ? delimiter : best,
+	);
+};
+
+// Blank lines stay in, so a record's index + 1 is its row number in a spreadsheet.
+export const parseCsvRecords = (input: string): string[][] => {
+	const text = input.startsWith(BOM) ? input.slice(1) : input;
+	const delimiter = detectDelimiter(text);
+	const records: string[][] = [];
+	let record: string[] = [];
+	let field = "";
+	let quoted = false;
+	let quoteRow = 0;
+
+	for (let index = 0; index < text.length; index++) {
+		const char = text[index];
+		if (quoted) {
+			if (char === '"' && text[index + 1] === '"') {
+				field += '"';
+				index++;
+			} else if (char === '"') {
+				quoted = false;
+			} else {
+				field += char;
+			}
+		} else if (char === '"') {
+			quoted = true;
+			quoteRow = records.length + 1;
+		} else if (char === delimiter) {
+			record.push(field);
+			field = "";
+		} else if (char === "\n" || char === "\r") {
+			if (char === "\r" && text[index + 1] === "\n") index++;
+			record.push(field);
+			records.push(record);
+			record = [];
+			field = "";
+		} else {
+			field += char;
+		}
+	}
+
+	// Otherwise every row after it would vanish into one field.
+	if (quoted) {
+		throw new Error(
+			`Row ${quoteRow} opens a quote that never closes. Close or remove it, then try again.`,
+		);
+	}
+
+	if (field || record.length > 0) {
+		record.push(field);
+		records.push(record);
+	}
+
+	return records;
+};
+
+// Spreadsheets run a cell starting with one of these as a formula.
+const FORMULA_PREFIX = /^[=+\-@\t\r]/;
+
+const escapeField = (value: string) => {
+	const safe = FORMULA_PREFIX.test(value) ? `'${value}` : value;
+	return /[",\n\r]/.test(safe) ? `"${safe.replaceAll('"', '""')}"` : safe;
+};
+
+export const formatCsv = (
+	columns: readonly string[],
+	rows: readonly Record<string, string | number | null | undefined>[],
+) =>
+	`${[
+		columns.join(","),
+		...rows.map((row) =>
+			columns.map((column) => escapeField(String(row[column] ?? ""))).join(","),
+		),
+	].join("\n")}\n`;

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/fetchers/breadcrumbs.ts

@@ -0,0 +1,22 @@
+import { cache } from "react";
+import { fetchSanity } from "@/lib/integrations/sanity/live";
+import { BREADCRUMB_PAGES_QUERY } from "@/lib/integrations/sanity/queries";
+import type { BREADCRUMB_PAGES_QUERY_RESULT } from "@/lib/integrations/sanity/sanity.types";
+import { BREADCRUMBS_TAG } from "@/lib/integrations/sanity/tags";
+import { breadcrumbPaths } from "@/lib/utils/breadcrumbs";
+
+// Only the pages a path's crumbs can name: the homepage, its ancestors and
+// itself. Tagged apart from the page's own slug tag: publishing an ancestor can
+// rename a crumb.
+export const getBreadcrumbPages = cache(
+	async (path: string | null): Promise<BREADCRUMB_PAGES_QUERY_RESULT> => {
+		const { data } = await fetchSanity<BREADCRUMB_PAGES_QUERY_RESULT>({
+			query: BREADCRUMB_PAGES_QUERY,
+			params: { paths: breadcrumbPaths(path) },
+			tags: [BREADCRUMBS_TAG],
+			stega: false,
+		});
+
+		return data ?? [];
+	},
+);

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/icons.ts

@@ -12,6 +12,7 @@ import {
 	BuildingsIcon,
 	CalendarBlankIcon,
 	CardsIcon,
+	CubeIcon,
 	FileTextIcon,
 	FolderOpenIcon,
 	FootprintsIcon,
@@ -19,7 +20,6 @@ import {
 	ListBulletsIcon,
 	ListIcon,
 	LockKeyIcon,
-	PackageIcon,
 	QuestionIcon,
 	RocketIcon,
 	ShapesIcon,
@@ -45,7 +45,6 @@ const asDuotoneIcon = (IconComponent: Icon): SanityStudioIcon => {
 	return DuotoneIcon;
 };
 
-export const pageBuilderCardIcon = asDuotoneIcon(PackageIcon);
 export const pageBuilderCardListIcon = asDuotoneIcon(ListIcon);
 
 export const authorIcon = asDuotoneIcon(UserCircleIcon);
@@ -54,6 +53,7 @@ export const pageListIcon = asDuotoneIcon(ListBulletsIcon);
 
 export const blogCategoryIcon = asDuotoneIcon(TagIcon);
 
+export const componentIcon = asDuotoneIcon(CubeIcon);
 export const componentsFolderIcon = asDuotoneIcon(ShapesIcon);
 
 export const companyDataIcon = asDuotoneIcon(BuildingsIcon);