@olenbetong/appframe-cli 4.3.1 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 4.4.0
+
+### Minor Changes
+
+- 8e102e3: add support for editing transactions to deploy in af deploy
+
+### Patch Changes
+
+- Updated dependencies [8e102e3]
+  - @olenbetong/appframe-updater@0.4.0
+
 ## 4.3.1
 
 ### Patch Changes

package/cli/af-apply.js

@@ -3,8 +3,8 @@ import { listTransactions, transactionStatuses } from "@olenbetong/appframe-upda
 import chalk from "chalk";
 import inquirer from "inquirer";
 import open from "open";
-import { Command } from "./lib/Command.js";
 import { renderTransactionsEditor } from "./editor/TransactionsEditor.js";
+import { Command } from "./lib/Command.js";
 import { importJson } from "./lib/importJson.js";
 import { Server } from "./lib/Server.js";
 const isInteractive = process.stdout.isTTY;

package/cli/af-deploy.js

@@ -40,7 +40,7 @@ async function deployTransactions(namespaceArg, options) {
       if (action === "no") {
         process.exit(0);
       }
-      let instance = await renderTransactionsEditor({ server, namespace });
+      let instance = await renderTransactionsEditor({ filter: "deployEdit", server, namespace });
       await instance.waitUntilExit();
     }
     await server.deploy(namespace);

package/cli/editor/TransactionsEditor.js

@@ -3,28 +3,24 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Text, useApp } from "ink";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { TransactionsPreviewDialog } from "./TransactionsPreviewDialog.js";
+import { createStatusLine } from "./tableFormatting.js";
+import { useCommand } from "./useCommand.js";
 import { useScreenSize } from "./useScreenSize.js";
-import { useTransactionsEditorInput } from "./useTransactionsEditorInput.js";
-import { useTransactionsEditorData } from "./useTransactionsEditorData.js";
+import { useTransactionEdits } from "./useTransactionEdits.js";
+import { useTransactions } from "./useTransactions.js";
+import { useTransactionsSelection } from "./useTransactionsSelection.js";
+import { useTransactionsTableLayout } from "./useTransactionsTableLayout.js";
+import { CURSOR_PREFIX_WIDTH, HEADER_PREFIX, useVirtualScrolling } from "./useVirtualScrolling.js";
 import { withFullScreen } from "./withFullScreen.js";
-import {
-  DEFAULT_TABLE_SEPARATOR,
-  ERROR_COLUMN_MAX_LINES,
-  calculateColumnWidths,
-  createStatusLine,
-  createTransactionColumns,
-  formatRowLines,
-  mapTransactionsToRows
-} from "./tableFormatting.js";
-import { HEADER_PREFIX, CURSOR_PREFIX_WIDTH, useTransactionsTableViewport } from "./useTransactionsTableViewport.js";
 const HEADER_LINES = 2;
 const BASE_FOOTER_LINES = 1;
 const STATUS_LINES = 1;
 const FRAME_BORDER_LINES = 2;
-export function TransactionsEditor({ server, namespace, showErrorColumn = true, onReady }) {
+const SAVE_SHORTCUTS = ["ctrl+s", "meta+s"];
+const EXIT_SHORTCUTS = ["ctrl+x", "meta+x"];
+export function TransactionsEditor({ filter, server, namespace, showErrorColumn = true }) {
   let { width: terminalColumns, height: terminalRows } = useScreenSize();
   let { exit } = useApp();
-  let [offset, setOffset] = useState(0);
   let [cursor, setCursor] = useState(0);
   let [actionMessage, setActionMessage] = useState(null);
   let [actionColor, setActionColor] = useState("gray");
@@ -37,45 +33,41 @@ export function TransactionsEditor({ server, namespace, showErrorColumn = true,
     transactions,
     loading,
     error,
-    refresh,
+    refresh: fetchTransactions,
     normalizedTransactions,
-    transactionRecordByPrimKey,
-    displayTransactions,
-    modifiedPrimKeys,
+    transactionMap
+  } = useTransactions({ server, namespace, filter });
+  let [lastRefreshOptions, setLastRefreshOptions] = useState({
+    preserveViewport: false,
+    anchorPrimKey: null
+  });
+  let refresh = useCallback(
+    async (options = {}) => {
+      let { preserveViewport = false, anchorPrimKey = null } = options;
+      setLastRefreshOptions({ preserveViewport, anchorPrimKey });
+      await fetchTransactions(options);
+    },
+    [fetchTransactions]
+  );
+  let { selectedPrimKeys, toggleSelection } = useTransactionsSelection(transactions);
+  let { pendingStatuses, modifiedPrimKeys, cycleStatus, save } = useTransactionEdits({
+    normalizedTransactions,
+    transactionRecordMap: transactionMap,
     selectedPrimKeys,
-    setSelectedPrimKeys,
-    cycleStatus,
-    handleSave,
-    lastRefreshOptions
-  } = useTransactionsEditorData({ server, namespace, showErrorColumn, onActionMessage });
-  useEffect(() => {
-    onReady?.({ refresh });
-  }, [onReady, refresh]);
-  useEffect(() => {
-    void refresh();
-  }, [refresh]);
-  useEffect(() => {
-    let { preserveViewport = false, anchorPrimKey = null } = lastRefreshOptions;
-    if (!preserveViewport) {
-      setOffset(0);
-      setCursor(0);
-      return;
-    }
-    if (anchorPrimKey) {
-      let index = transactions.findIndex((transaction) => transaction.PrimKey === anchorPrimKey);
-      if (index >= 0) {
-        setCursor(index);
-      }
-    }
-  }, [lastRefreshOptions, transactions]);
-  let rows = useMemo(
-    () => mapTransactionsToRows(displayTransactions, showErrorColumn),
-    [displayTransactions, showErrorColumn]
+    server,
+    onActionMessage,
+    refresh
+  });
+  let displayTransactions = useMemo(
+    () => normalizedTransactions.map((transaction) => ({
+      ...transaction,
+      Status: pendingStatuses[transaction.PrimKey] ?? transaction.Status
+    })),
+    [normalizedTransactions, pendingStatuses]
   );
-  let messageLineCount = (error ? 1 : 0) + (loading ? 1 : 0);
   let instructionsLineCount = BASE_FOOTER_LINES;
   let frameHeight = Math.max(
-    terminalRows - instructionsLineCount - messageLineCount,
+    terminalRows - instructionsLineCount,
     FRAME_BORDER_LINES + HEADER_LINES + STATUS_LINES + 1
   );
   let innerHeight = Math.max(frameHeight - FRAME_BORDER_LINES, 0);
@@ -83,139 +75,113 @@ export function TransactionsEditor({ server, namespace, showErrorColumn = true,
   let frameWidth = Math.max(terminalColumns, FRAME_BORDER_LINES + CURSOR_PREFIX_WIDTH + 1);
   let innerWidth = Math.max(frameWidth - FRAME_BORDER_LINES, 0);
   let tableWidth = Math.max(innerWidth - CURSOR_PREFIX_WIDTH, 0);
-  let baseColumns = useMemo(() => createTransactionColumns(showErrorColumn), [showErrorColumn]);
-  let columns = useMemo(
-    () => baseColumns.map((column) => {
-      if (!column.wrap) {
-        return column;
-      }
-      let maxLines = column.maxWrapLines ?? ERROR_COLUMN_MAX_LINES;
-      let limited = Math.max(1, Math.min(maxLines, dataAreaHeight || maxLines));
-      if (limited === maxLines) {
-        return column;
-      }
-      return { ...column, maxWrapLines: limited };
-    }),
-    [baseColumns, dataAreaHeight]
-  );
-  let widths = useMemo(
-    () => calculateColumnWidths({
-      columns,
-      rows,
-      totalWidth: tableWidth,
-      separator: DEFAULT_TABLE_SEPARATOR
-    }),
-    [columns, rows, tableWidth]
-  );
-  let headerRow = useMemo(
-    () => Object.fromEntries(columns.map((column) => [column.key, column.header])),
-    [columns]
-  );
-  let headerLines = useMemo(
-    () => formatRowLines({ row: headerRow, columns, widths, separator: DEFAULT_TABLE_SEPARATOR }),
-    [columns, headerRow, widths]
-  );
-  let { tableContentWidth, lineWidth, bodyLines, displayedRowCount, pageStep, getHeightBetween, totalRowCount } = useTransactionsTableViewport({
-    rows,
+  let { columns, rows, widths, tableContentWidth, lineWidth, header, divider } = useTransactionsTableLayout({
+    displayTransactions,
+    showErrorColumn,
+    tableWidth
+  });
+  let { bodyLines, pageStep, stats, setOffset } = useVirtualScrolling({
     cursor,
-    offset,
+    setCursor,
     dataAreaHeight,
+    rows,
     columns,
     widths,
+    tableContentWidth,
+    lineWidth,
     normalizedTransactions,
     selectedPrimKeys,
     modifiedPrimKeys,
     loading
   });
-  let header = useMemo(
-    () => `${HEADER_PREFIX}${(headerLines[0] ?? "").padEnd(tableContentWidth, " ")}`,
-    [headerLines, tableContentWidth]
-  );
-  let divider = useMemo(() => {
-    let separator = "\u2500".repeat(DEFAULT_TABLE_SEPARATOR.length);
-    let content = columns.map((_, index) => "\u2500".repeat(widths[index])).join(separator);
-    return `${HEADER_PREFIX}${content.padEnd(tableContentWidth, " ")}`;
-  }, [columns, tableContentWidth, widths]);
   useEffect(() => {
-    setOffset((current) => {
-      if (totalRowCount === 0) {
-        return 0;
+    let { preserveViewport = false, anchorPrimKey = null } = lastRefreshOptions;
+    if (!preserveViewport) {
+      setOffset(0);
+      setCursor(0);
+      return;
+    }
+    if (anchorPrimKey) {
+      let index = transactions.findIndex((transaction) => transaction.PrimKey === anchorPrimKey);
+      if (index >= 0) {
+        setCursor(index);
       }
-      let clamped = Math.max(Math.min(current, totalRowCount - 1), 0);
-      return clamped;
-    });
-  }, [totalRowCount]);
-  useEffect(() => {
+    }
+  }, [lastRefreshOptions, setOffset, transactions]);
+  function handlePreview() {
+    let focused = normalizedTransactions[cursor];
+    if (!focused) {
+      onActionMessage("No transaction focused for preview.", "yellow");
+      return;
+    }
+    setPreviewOpen(true);
+  }
+  let totalRowCount = stats.totalRowCount;
+  function focusPrevious() {
+    setCursor((current) => totalRowCount === 0 ? 0 : Math.max(current - 1, 0));
+  }
+  function focusNext() {
     setCursor((current) => {
       if (totalRowCount === 0) {
         return 0;
       }
-      return Math.min(current, totalRowCount - 1);
+      return Math.min(current + 1, totalRowCount - 1);
     });
-  }, [totalRowCount]);
-  useEffect(() => {
-    if (dataAreaHeight <= 0) {
-      return;
-    }
-    setOffset((current) => {
+  }
+  function pageUpCursor() {
+    setCursor((current) => Math.max(current - pageStep, 0));
+  }
+  function pageDownCursor() {
+    setCursor((current) => {
       if (totalRowCount === 0) {
         return 0;
       }
-      let next = Math.max(Math.min(current, totalRowCount - 1), 0);
-      if (cursor < next) {
-        return cursor;
-      }
-      let height = getHeightBetween(next, cursor);
-      while (height > dataAreaHeight && next < cursor) {
-        next += 1;
-        height = getHeightBetween(next, cursor);
-      }
-      return next;
+      return Math.min(current + pageStep, totalRowCount - 1);
     });
-  }, [cursor, dataAreaHeight, getHeightBetween, totalRowCount]);
-  let handlePreview = useCallback(() => {
-    let focused = normalizedTransactions[cursor];
-    if (!focused) {
-      onActionMessage("No transaction focused for preview.", "yellow");
-      return;
-    }
-    let record = transactionRecordByPrimKey.get(focused.PrimKey);
-    if (!record) {
-      onActionMessage("Unable to resolve focused transaction for preview.", "red");
-      return;
+  }
+  let focusedPrimKey = normalizedTransactions[cursor]?.PrimKey ?? null;
+  function handlePreviewClose() {
+    if (previewOpen) {
+      setPreviewOpen(false);
+      refresh({ preserveViewport: true, anchorPrimKey: normalizedTransactions[cursor]?.PrimKey ?? null });
     }
-    setPreviewOpen(true);
-  }, [cursor, normalizedTransactions, transactionRecordByPrimKey, onActionMessage]);
-  useTransactionsEditorInput({
-    setCursor,
-    setSelectedPrimKeys,
-    totalRowCount,
-    pageStep,
-    normalizedTransactions,
-    cursor,
-    cycleStatus: () => cycleStatus(normalizedTransactions[cursor]?.PrimKey ?? null),
-    handleSave,
-    previewOpen,
-    handlePreview,
-    onPreviewClose: useCallback(() => setPreviewOpen(false), []),
-    refresh,
-    exit
-  });
-  let startRow = totalRowCount === 0 ? 0 : offset + 1;
-  let stats = [`${totalRowCount} rows`, `showing ${displayedRowCount}`, `starting at ${startRow}`];
+  }
+  let tableCommandsEnabled = !previewOpen;
+  useCommand("up", focusPrevious, tableCommandsEnabled);
+  useCommand("down", focusNext, tableCommandsEnabled);
+  useCommand("pageup", pageUpCursor, tableCommandsEnabled);
+  useCommand("pagedown", pageDownCursor, tableCommandsEnabled);
+  useCommand("home", () => setCursor(0), tableCommandsEnabled);
+  useCommand("end", () => setCursor(Math.max(totalRowCount - 1, 0)), tableCommandsEnabled);
+  useCommand(SAVE_SHORTCUTS, save, tableCommandsEnabled);
+  useCommand("space", () => toggleSelection(focusedPrimKey), tableCommandsEnabled);
+  useCommand("s", () => cycleStatus(focusedPrimKey), tableCommandsEnabled);
+  useCommand("r", () => refresh({ preserveViewport: true, anchorPrimKey: focusedPrimKey }), tableCommandsEnabled);
+  useCommand("p", handlePreview, tableCommandsEnabled);
+  useCommand("escape", handlePreviewClose, true);
+  useCommand(EXIT_SHORTCUTS, exit, true);
+  let statusParts = [`showing ${stats.firstVisibleRow}-${stats.lastVisibleRow} of ${stats.totalRowCount}`];
   if (selectedPrimKeys.size > 0) {
-    stats.push(`${selectedPrimKeys.size} selected`);
+    statusParts.push(`${selectedPrimKeys.size} selected`);
   }
   if (modifiedPrimKeys.size > 0) {
-    stats.push(`${modifiedPrimKeys.size} modified`);
+    statusParts.push(`${modifiedPrimKeys.size} modified`);
+  }
+  let statsText = statusParts.length > 0 ? `(${statusParts.join(" - ")})` : "";
+  let statusMessage = "";
+  let statusColor = "gray";
+  if (error) {
+    statusMessage = error.message.replace(/\s+/g, " ").trim();
+    statusColor = "red";
+  } else if (loading) {
+    statusMessage = "Loading transactions\u2026";
+    statusColor = "blue";
+  } else if (actionMessage) {
+    statusMessage = actionMessage.replace(/\s+/g, " ").trim();
+    statusColor = actionColor;
   }
-  let statsText = stats.length > 0 ? `(${stats.join(" - ")})` : "";
-  let statusLine = createStatusLine(actionMessage ?? "", statsText, lineWidth, HEADER_PREFIX);
-  let statusColor = actionMessage ? actionColor : "gray";
-  let focusedTransaction = transactionRecordByPrimKey.get(normalizedTransactions[cursor]?.PrimKey ?? null);
+  let statusLine = createStatusLine(statusMessage, statsText, lineWidth, HEADER_PREFIX);
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: frameWidth, height: terminalRows, position: "relative", children: [
-    error ? /* @__PURE__ */ jsx(Text, { color: "red", wrap: "truncate", children: error.message }) : null,
-    loading ? /* @__PURE__ */ jsx(Text, { color: "blue", wrap: "truncate", children: "Loading transactions\u2026" }) : null,
     /* @__PURE__ */ jsxs(
       Box,
       {
@@ -234,11 +200,21 @@ export function TransactionsEditor({ server, namespace, showErrorColumn = true,
       }
     ),
     /* @__PURE__ */ jsx(Text, { color: "gray", wrap: "truncate", children: "\u2191/\u2193 move \xB7 PgUp/PgDn jump \xB7 Space toggle select \xB7 s cycle status \xB7 ctrl+s save \xB7 ctrl+x exit \xB7 r refresh \xB7 p preview \xB7 esc close preview" }),
-    previewOpen && focusedTransaction ? /* @__PURE__ */ jsx(TransactionsPreviewDialog, { record: focusedTransaction, frameWidth }) : null
+    previewOpen ? /* @__PURE__ */ jsx(
+      TransactionsPreviewDialog,
+      {
+        server,
+        namespace,
+        frameWidth,
+        focusedPrimKey,
+        focusNext,
+        focusPrevious
+      }
+    ) : null
   ] });
 }
-export async function renderTransactionsEditor(props) {
-  const ink = withFullScreen(/* @__PURE__ */ jsx(TransactionsEditor, { ...props }));
+export async function renderTransactionsEditor({ filter = "edit", ...props }) {
+  const ink = withFullScreen(/* @__PURE__ */ jsx(TransactionsEditor, { ...props, filter }));
   await ink.start();
   return ink;
 }