@olenbetong/appframe-cli 4.3.1 → 4.4.0

package/src/editor/TransactionsPreviewDialog.tsx

@@ -1,163 +1,226 @@
-import type { TransactionsRecord } from "@olenbetong/appframe-updater";
-import { Box, Text, useInput } from "ink";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { type TransactionStatusCode, transactionStatusLabels } from "@olenbetong/appframe-updater";
+import { Box, Text } from "ink";
+import { type ReactNode, useMemo } from "react";
 
+import type { Server } from "../lib/Server.js";
 import { FullScreenBox } from "./FullScreenBox.js";
+import { STATUS_DIRTY_INDICATOR } from "./tableFormatting.js";
+import { useCommand } from "./useCommand.js";
 import { useScreenSize } from "./useScreenSize.js";
+import { useScrollableText } from "./useScrollableText.js";
+import { useTransactionEdits } from "./useTransactionEdits.js";
+import { useTransactions } from "./useTransactions.js";
+import { useTransactionText } from "./useTransactionText.js";
+import { useVirtualText } from "./useVirtualText.js";
 
-function formatPreviewValue(value: unknown) {
-	if (typeof value === "string") {
-		let lines = value.split(/\r?\n/);
-		return lines.length > 0 ? lines : [""];
-	}
+const PREVIEW_SAVE_SHORTCUTS = ["ctrl+s", "meta+s"];
+const NO_TRANSACTION_FILTER = "1 = 0";
 
-	if (value && typeof value === "object") {
-		try {
-			let serialized = JSON.stringify(value, null, 2);
-			if (serialized) {
-				return serialized.split("\n");
-			}
-		} catch {}
-	}
+function escapePrimKey(primKey: string) {
+	return primKey.replace(/'/g, "''");
+}
 
-	if (value === null) {
-		return ["null"];
+function createPrimKeyFilter(primKey: string | null) {
+	if (!primKey) {
+		return NO_TRANSACTION_FILTER;
 	}
 
-	return [String(value)];
+	return `PrimKey = '${escapePrimKey(primKey)}'`;
 }
 
 export type TransactionsPreviewDialogProps = {
-	record: TransactionsRecord;
+	server: Server;
+	namespace: string | number;
 	frameWidth: number;
+	focusedPrimKey: string | null;
+	focusNext: () => void;
+	focusPrevious: () => void;
 };
 
-type PreviewLine = {
-	type: "line";
-	key: string;
-	entryKey: string;
-	line: string;
-	lineIndex: number;
-};
+function Shortcut({ keyboard, command }: { keyboard: string; command: string }) {
+	return (
+		<Text>
+			[{keyboard}] {command}
+		</Text>
+	);
+}
 
-type PreviewSpacer = {
-	type: "spacer";
-	key: string;
-};
+export function TransactionsPreviewDialog({
+	server,
+	namespace,
+	frameWidth,
+	focusedPrimKey,
+	focusNext,
+	focusPrevious,
+}: TransactionsPreviewDialogProps) {
+	let transactionFilter = useMemo(() => createPrimKeyFilter(focusedPrimKey), [focusedPrimKey]);
+	let { loading, error, refresh, normalizedTransactions, transactionMap } = useTransactions({
+		server,
+		namespace,
+		filter: transactionFilter,
+	});
+
+	let selectedPrimKeys = useMemo(
+		() => (focusedPrimKey ? new Set([focusedPrimKey]) : new Set<string>()),
+		[focusedPrimKey],
+	);
 
-type PreviewItem = PreviewLine | PreviewSpacer;
+	let { pendingStatuses, cycleStatus, save } = useTransactionEdits({
+		normalizedTransactions,
+		transactionRecordMap: transactionMap,
+		selectedPrimKeys,
+		server,
+		refresh,
+	});
 
-export function TransactionsPreviewDialog({ record, frameWidth }: TransactionsPreviewDialogProps) {
-	let previewEntries = useMemo(
-		() =>
-			Object.entries(record)
-				.filter(([key]) => key !== "PrimKey")
-				.map(([key, value]) => ({ key, lines: formatPreviewValue(value) })),
-		[record],
-	);
+	let record = focusedPrimKey ? transactionMap.get(focusedPrimKey) : undefined;
+	let pendingStatus = focusedPrimKey ? pendingStatuses[focusedPrimKey] : undefined;
 
-	let maxKeyLength = useMemo(
-		() => previewEntries.reduce((max, entry) => Math.max(max, entry.key.length), 0),
-		[previewEntries],
-	);
+	let statusPreviewValue = useMemo(() => {
+		if (!record) {
+			return "";
+		}
+
+		let originalStatus = record.Status;
+		let numericOriginal =
+			typeof originalStatus === "number"
+				? originalStatus
+				: typeof originalStatus === "string"
+					? Number(originalStatus)
+					: null;
+
+		let baseText: string;
+		if (pendingStatus !== undefined) {
+			baseText = String(pendingStatus);
+		} else if (originalStatus === null) {
+			baseText = "null";
+		} else if (originalStatus === undefined) {
+			baseText = "";
+		} else {
+			baseText = String(originalStatus);
+		}
 
-	let previewItems = useMemo<PreviewItem[]>(() => {
-		if (previewEntries.length === 0) {
-			return [];
+		let labelSource: number | null = null;
+		if (pendingStatus !== undefined) {
+			labelSource = pendingStatus;
+		} else if (numericOriginal !== null && Number.isFinite(numericOriginal)) {
+			labelSource = numericOriginal;
 		}
 
-		let items: PreviewItem[] = [];
-		previewEntries.forEach((entry, entryIndex) => {
-			entry.lines.forEach((line, lineIndex) => {
-				items.push({
-					type: "line",
-					key: `${entry.key}-${lineIndex}`,
-					entryKey: entry.key,
-					line,
-					lineIndex,
-				});
-			});
-
-			if (entryIndex < previewEntries.length - 1) {
-				items.push({ type: "spacer", key: `${entry.key}-spacer` });
+		if (labelSource !== null) {
+			let label = transactionStatusLabels[labelSource as TransactionStatusCode];
+			if (label) {
+				baseText = baseText.length > 0 ? `${baseText} (${label})` : `(${label})`;
 			}
-		});
+		}
+
+		let isDirty = false;
+		if (pendingStatus !== undefined) {
+			isDirty = numericOriginal === null || !Number.isFinite(numericOriginal) || pendingStatus !== numericOriginal;
+		}
+
+		if (isDirty) {
+			baseText = `${baseText}${STATUS_DIRTY_INDICATOR}`;
+		}
 
-		return items;
-	}, [previewEntries]);
+		return baseText;
+	}, [pendingStatus, record]);
 
-	let rawKeyColumnWidth = Math.max(maxKeyLength, 1);
-	let availableDialogWidth = Math.max(frameWidth - 4, 1);
-	let dialogWidth = Math.min(Math.max(rawKeyColumnWidth + 80, 10), availableDialogWidth);
-	let keyColumnWidth = Math.min(rawKeyColumnWidth, Math.max(dialogWidth - 4, 1));
+	let { text: transactionText, dialogWidth } = useTransactionText({
+		transaction: record,
+		statusPreviewValue,
+		frameWidth,
+	});
 
 	let { height: screenHeight } = useScreenSize();
 
-	let headerLineCount = 3 + (record.Name ? 1 : 0);
+	let headerLineCount = 3 + (record?.Name ? 1 : 0);
 	let marginLines = 1; // Box marginTop between header and content
-	let nonContentLines = headerLineCount + marginLines;
-	let contentLineCount = previewItems.length > 0 ? previewItems.length : 1;
-	let naturalDialogHeight = nonContentLines + contentLineCount;
-	let maxDialogHeight = Math.max(screenHeight - 4, nonContentLines + 1);
-	maxDialogHeight = Math.min(maxDialogHeight, Math.max(screenHeight - 2, 1));
-	let dialogHeight = Math.min(naturalDialogHeight, maxDialogHeight);
-	let contentHeight = Math.max(dialogHeight - nonContentLines, 1);
-
-	let [scrollOffset, setScrollOffset] = useState(0);
+	let baseNonContentLines = headerLineCount + marginLines;
+	let contentLineCount = transactionText.length > 0 ? transactionText.length : 1;
+
+	let computeLayout = (extraNonContentLines: number) => {
+		let nonContentLines = baseNonContentLines + extraNonContentLines;
+		let naturalDialogHeight = nonContentLines + contentLineCount;
+		let maxDialogHeight = Math.max(screenHeight - 4, nonContentLines + 1);
+		maxDialogHeight = Math.min(maxDialogHeight, Math.max(screenHeight - 2, 1));
+		let dialogHeightValue = Math.min(naturalDialogHeight, maxDialogHeight);
+		let contentHeightValue = Math.max(dialogHeightValue - nonContentLines, 1);
+		return { dialogHeight: dialogHeightValue, contentHeight: contentHeightValue, nonContentLines };
+	};
+
+	let { dialogHeight, contentHeight } = computeLayout(0);
+	let showScrollSummary = record && transactionText.length > contentHeight;
+	if (showScrollSummary) {
+		({ dialogHeight, contentHeight } = computeLayout(2));
+	}
 
 	let previewSignature = useMemo(
-		() => previewItems.map((item) => (item.type === "spacer" ? item.key : `${item.key}:${item.line}`)).join("|"),
-		[previewItems],
+		() => `${focusedPrimKey ?? ""}|${transactionText.join("|")}`,
+		[focusedPrimKey, transactionText],
 	);
 
-	let lastPreviewSignatureRef = useRef(previewSignature);
-
-	useEffect(() => {
-		if (lastPreviewSignatureRef.current !== previewSignature) {
-			lastPreviewSignatureRef.current = previewSignature;
-			setScrollOffset(0);
-		}
-	}, [previewSignature]);
-
-	let totalItems = previewItems.length;
-	let maxScrollOffset = Math.max((totalItems || 1) - contentHeight, 0);
-
-	useEffect(() => {
-		setScrollOffset((offset) => Math.min(offset, maxScrollOffset));
-	}, [maxScrollOffset]);
-
-	useInput(
-		(_, key) => {
-			if (key.upArrow) {
-				setScrollOffset((offset) => Math.max(offset - 1, 0));
-				return;
-			}
-
-			if (key.downArrow) {
-				setScrollOffset((offset) => Math.min(offset + 1, maxScrollOffset));
-				return;
+	let { scrollOffset } = useScrollableText({
+		textLength: transactionText.length,
+		viewportHeight: contentHeight,
+		signature: previewSignature,
+	});
+
+	let { visibleText, totalLines, offset } = useVirtualText({
+		text: transactionText,
+		viewportHeight: contentHeight,
+		scrollOffset,
+	});
+
+	useCommand("left", focusPrevious, true);
+	useCommand("right", focusNext, true);
+	useCommand(
+		PREVIEW_SAVE_SHORTCUTS,
+		() => {
+			if (focusedPrimKey) {
+				save({ primKey: focusedPrimKey });
 			}
-
-			if (key.pageUp) {
-				setScrollOffset((offset) => Math.max(offset - Math.max(contentHeight - 1, 1), 0));
-				return;
-			}
-
-			if (key.pageDown) {
-				setScrollOffset((offset) => Math.min(offset + Math.max(contentHeight - 1, 1), maxScrollOffset));
-				return;
+		},
+		focusedPrimKey !== null,
+	);
+	useCommand(
+		"s",
+		() => {
+			if (focusedPrimKey) {
+				cycleStatus(focusedPrimKey, { exclusive: true });
 			}
 		},
-		{ isActive: previewItems.length > contentHeight },
+		focusedPrimKey !== null,
 	);
 
-	let visibleItems = previewItems.slice(scrollOffset, scrollOffset + contentHeight);
-
 	let summaryText = useMemo(() => {
-		let start = scrollOffset + 1;
-		let end = Math.min(scrollOffset + contentHeight, previewItems.length);
-		return `Showing ${start}–${end} of ${previewItems.length}`;
-	}, [contentHeight, previewItems.length, scrollOffset]);
+		if (totalLines === 0) {
+			return "";
+		}
+
+		let start = offset + 1;
+		let end = Math.min(offset + contentHeight, totalLines);
+		return `Showing ${start}–${end} of ${totalLines}`;
+	}, [contentHeight, offset, totalLines]);
+
+	let bodyContent: ReactNode;
+	if (!focusedPrimKey) {
+		bodyContent = <Text color="gray">No transaction selected.</Text>;
+	} else if (error) {
+		bodyContent = <Text color="red">{error.message}</Text>;
+	} else if (!record) {
+		bodyContent = loading ? (
+			<Text color="gray">Loading transaction…</Text>
+		) : (
+			<Text color="yellow">Transaction not found.</Text>
+		);
+	} else if (transactionText.length === 0) {
+		bodyContent = <Text color="gray">No data available.</Text>;
+	} else {
+		bodyContent = visibleText.map((line, index) => (
+			<Text key={`${offset + index}`}>{line.length > 0 ? line : " "}</Text>
+		));
+	}
 
 	return (
 		<FullScreenBox position="absolute" justifyContent="center" alignItems="center">
@@ -171,32 +234,19 @@ export function TransactionsPreviewDialog({ record, frameWidth }: TransactionsPr
 				backgroundColor="black"
 			>
 				<Text bold>Transaction preview</Text>
-				{record.Name ? <Text>{record.Name}</Text> : null}
-				<Text color="gray">Press Escape to close. Use ↑/↓ or PgUp/PgDn to scroll.</Text>
+				{record?.Name ? <Text>{record.Name}</Text> : null}
+				<Text color="gray">
+					<Shortcut keyboard="esc" command="Close preview" /> · <Shortcut keyboard="←/→" command="Change focus" /> ·{" "}
+					<Shortcut keyboard="↑/↓" command="Scroll" /> · <Shortcut keyboard="PgUp/PgDn" command="Scroll faster" /> ·{" "}
+					<Shortcut keyboard="s" command="Cycle status" /> · <Shortcut keyboard="Ctrl+S" command="Save" />
+				</Text>
 				<Box marginTop={1} flexDirection="column" height={contentHeight}>
-					{previewEntries.length === 0 ? (
-						<Text color="gray">No data available.</Text>
-					) : (
-						visibleItems.map((item) =>
-							item.type === "spacer" ? (
-								<Text key={item.key}> </Text>
-							) : (
-								<Box key={item.key} flexDirection="row" alignItems="flex-start">
-									<Box width={keyColumnWidth} marginRight={1} flexShrink={0}>
-										<Text bold={item.lineIndex === 0} wrap="truncate-end">
-											{item.lineIndex === 0 ? item.entryKey.padEnd(keyColumnWidth) : ""}
-										</Text>
-									</Box>
-									<Box flexGrow={1} flexShrink={1}>
-										<Text wrap="wrap">{item.line}</Text>
-									</Box>
-								</Box>
-							),
-						)
-					)}
+					{bodyContent}
 				</Box>
-				{previewEntries.length > 0 && previewItems.length > contentHeight ? (
-					<Text color="gray">{summaryText}</Text>
+				{showScrollSummary ? (
+					<Box marginTop={1} flexDirection="column">
+						<Text color="gray">{summaryText}</Text>
+					</Box>
 				) : null}
 			</Box>
 		</FullScreenBox>

package/src/editor/tableFormatting.ts

@@ -14,8 +14,6 @@ const STATUS_COLUMN_MIN_WIDTH = (() => {
 	return Math.max("Status".length, longest + STATUS_DIRTY_INDICATOR.length);
 })();
 
-export const ERROR_COLUMN_MAX_LINES = 5;
-
 export interface TableColumn<Row> {
 	key: keyof Row;
 	header: string;
@@ -23,8 +21,6 @@ export interface TableColumn<Row> {
 	max: number;
 	weight: number;
 	shrinkPriority?: number;
-	wrap?: boolean;
-	maxWrapLines?: number;
 }
 
 export interface EditorTransactionRow {
@@ -56,65 +52,6 @@ export function truncateCellValue(value: string, width: number) {
 	return `${value.slice(0, width - 1)}…`;
 }
 
-export function wrapCellValue(value: string, width: number, maxLines: number) {
-	if (width <= 0 || maxLines <= 0) {
-		return [];
-	}
-
-	let sanitized = sanitizeCellValue(value);
-	if (sanitized.length === 0) {
-		return ["".padEnd(width, " ")];
-	}
-
-	let remaining = sanitized;
-	let lines: string[] = [];
-
-	while (remaining.length > 0 && lines.length < maxLines) {
-		if (remaining.length <= width) {
-			lines.push(remaining.padEnd(width, " "));
-			remaining = "";
-			break;
-		}
-
-		let sliceEnd = Math.min(width, remaining.length);
-		let breakIndex = remaining.lastIndexOf(" ", sliceEnd);
-		if (breakIndex <= 0) {
-			breakIndex = sliceEnd;
-		}
-
-		let chunk = remaining.slice(0, breakIndex).trimEnd();
-		if (chunk.length === 0) {
-			chunk = remaining.slice(0, width);
-			breakIndex = chunk.length;
-		}
-
-		lines.push(chunk.padEnd(width, " "));
-		remaining = remaining.slice(breakIndex).trimStart();
-	}
-
-	if (remaining.length > 0) {
-		let ellipsisLine: string;
-		if (lines.length === 0) {
-			let truncated = remaining.slice(0, Math.max(width - 1, 0));
-			ellipsisLine = `${truncated}${width > 0 ? "…" : ""}`;
-		} else {
-			let last = lines.pop() ?? "";
-			let trimmed = last.trimEnd();
-			if (trimmed.length >= width) {
-				trimmed = trimmed.slice(0, Math.max(width - 1, 0));
-			}
-			ellipsisLine = `${trimmed}${width > 0 ? "…" : ""}`;
-		}
-		lines.push(ellipsisLine.padEnd(width, " "));
-	}
-
-	if (lines.length === 0) {
-		lines.push("".padEnd(width, " "));
-	}
-
-	return lines;
-}
-
 export function calculateColumnWidths<Row extends Record<string, unknown>>({
 	columns,
 	rows,
@@ -218,39 +155,18 @@ export function formatRowLines<Row extends Record<string, unknown>>({
 	widths: number[];
 	separator?: string;
 }) {
-	let columnLines = columns.map((column, index) => {
+	let parts = columns.map((column, index) => {
 		let width = widths[index];
-		if (column.wrap) {
-			let maxLines = column.maxWrapLines ?? 1;
-			return wrapCellValue(String(row[column.key] ?? ""), width, maxLines);
-		}
 		let value = sanitizeCellValue(row[column.key]);
-		return [truncateCellValue(value, width)];
+		return truncateCellValue(value, width);
 	});
 
-	let height = columnLines.reduce((max, lines) => Math.max(max, lines.length), 0);
-	let lines: string[] = [];
-
-	for (let lineIndex = 0; lineIndex < height; lineIndex++) {
-		let parts = columnLines.map((column, index) => {
-			let width = widths[index];
-			let value = column[lineIndex] ?? "";
-			if (value.length < width) {
-				return value.padEnd(width, " ");
-			}
-			if (value.length > width) {
-				return truncateCellValue(value, width);
-			}
-			return value;
-		});
-		lines.push(parts.join(separator));
-	}
-
-	if (lines.length === 0) {
-		lines.push(columns.map((_, index) => "".padEnd(widths[index], " ")).join(separator));
+	let line = parts.join(separator);
+	if (line.length === 0) {
+		return [columns.map((_, index) => "".padEnd(widths[index], " ")).join(separator)];
 	}
 
-	return lines;
+	return [line];
 }
 
 export function addViewportEllipsis(line: string) {
@@ -308,8 +224,8 @@ export function createStatusLine(message: string, stats: string, lineWidth: numb
 export function createTransactionColumns(showError: boolean): TableColumn<EditorTransactionRow>[] {
 	let columns: TableColumn<EditorTransactionRow>[] = [
 		{ key: "Namespace", header: "Namespace", min: 10, max: 24, weight: 0, shrinkPriority: 3 },
-		{ key: "Name", header: "Name", min: 4, max: 40, weight: 1, shrinkPriority: 1 },
-		{ key: "CreatedBy", header: "CreatedBy", min: 8, max: 20, weight: 0, shrinkPriority: 4 },
+		{ key: "Name", header: "Name", min: 32, max: 40, weight: 1, shrinkPriority: 1 },
+		{ key: "CreatedBy", header: "CreatedBy", min: 13, max: 20, weight: 0, shrinkPriority: 4 },
 		{
 			key: "Status",
 			header: "Status",
@@ -328,8 +244,6 @@ export function createTransactionColumns(showError: boolean): TableColumn<Editor
 			max: 120,
 			weight: 2,
 			shrinkPriority: 0,
-			wrap: true,
-			maxWrapLines: ERROR_COLUMN_MAX_LINES,
 		});
 	}