@nanobpm/urban 0.19.0 → 0.21.0

package/dist/runtime/core/modules/pages.js

@@ -392,6 +392,27 @@ function renderText(node) {
   return el(v === "heading" ? "h1" : "p", { class: cls }, node.props.text || "");
 }
 
+// A grid td cell. When the column declares linkField, the cell text (the
+// column's own value) becomes a link to the URL held in that other field,
+// opened in a new tab. Only http(s) hrefs are linked — anything else (e.g. a
+// javascript: URL smuggled through row data) falls back to plain text — and
+// external links get rel=noopener noreferrer so the opened page can't reach
+// window.opener. Shared by the top-level grid and child grids.
+function gridCell(col, row) {
+  const text = row[col.field] == null ? "" : String(row[col.field]);
+  if (col.linkField) {
+    const href = row[col.linkField] == null ? "" : String(row[col.linkField]);
+    if (text !== "" && /^https?:\/\//i.test(href)) {
+      return el(
+        "td",
+        {},
+        el("a", { class: "pc-link", href, target: "_blank", rel: "noopener noreferrer" }, text),
+      );
+    }
+  }
+  return el("td", {}, text);
+}
+
 function renderActionForm(node) {
   const p = node.props;
   const card = el("section", { class: "pc-card" });
@@ -458,6 +479,23 @@ function renderDataGrid(node) {
   card.append(table);
   const span = String((cols.length || 1) + (hasExtra ? 1 : 0));
 
+  // Expansion state has to outlive the poll: refresh() rebuilds the whole tbody
+  // every refreshMs, so without this an open detail row (where you answer an
+  // escalation) would collapse on the next tick. We remember which rowKeys are
+  // open, and reuse the already-built detail <tr> for them across refreshes so a
+  // half-typed answer survives too. Keyed by p.rowKey; grids without one keep the
+  // old (collapse-on-refresh) behavior.
+  const expanded = new Set();
+  const detailNodes = new Map();
+  // A row only participates in expansion/detail-node caching if it has a real
+  // (non-null) rowKey. Coercing a missing key through String() would yield the
+  // literal "undefined"/"null" and collide unrelated rows, so treat it as keyless.
+  const rowKeyOf = (row) => {
+    if (!p.rowKey) return null;
+    const v = row[p.rowKey];
+    return v == null ? null : String(v);
+  };
+
   function dataUrl(source, tbl, filters, order) {
     let u = "/app/data/" + encodeURIComponent(source) + "/" + encodeURIComponent(tbl);
     const qs = [];
@@ -552,7 +590,7 @@ function renderDataGrid(node) {
         cbody.append(el("tr", {}, el("td", { colspan: cspan }, "None")));
       }
       for (const cr of rows) {
-        const cells = ccols.map((c) => el("td", {}, cr[c.field] == null ? "" : String(cr[c.field])));
+        const cells = ccols.map((c) => gridCell(c, cr));
         if (cg.lazyField) {
           const lf = cg.lazyField;
           const has = cr[lf.field] != null && String(cr[lf.field]).trim() !== "";
@@ -606,7 +644,8 @@ function renderDataGrid(node) {
   }
 
   function renderRow(row) {
-    const cells = cols.map((c) => el("td", {}, row[c.field] == null ? "" : String(row[c.field])));
+    const cells = cols.map((c) => gridCell(c, row));
+    const key = rowKeyOf(row);
     let toggle = null;
     if (hasExtra) {
       const actionCell = el("td", { class: "pc-row-actions" });
@@ -623,16 +662,29 @@ function renderDataGrid(node) {
     const tr = el("tr", {}, ...cells);
     tbody.append(tr);
     if (detail && toggle) {
-      const dtr = el("tr", { hidden: "" }, el("td", { colspan: span }));
-      let built = false;
+      const isOpen = key != null && expanded.has(key);
+      // Reuse an already-built detail row for an open PR across refreshes so its
+      // expanded state — and any half-typed escalation answer in the form — survives
+      // the poll. A closed (or keyless) row always gets a fresh, lazily-built panel.
+      let entry = key != null ? detailNodes.get(key) : null;
+      if (!(isOpen && entry && entry.built)) {
+        const dtr = el("tr", { hidden: isOpen ? null : "" }, el("td", { colspan: span }));
+        entry = { dtr, built: false };
+        if (key != null) detailNodes.set(key, entry);
+        if (isOpen) { entry.built = true; dtr.firstChild.append(detailPanel(row)); }
+      }
+      const dtr = entry.dtr;
+      toggle.textContent = dtr.hidden ? "▸" : "▾";
       toggle.addEventListener("click", (ev) => {
         ev.stopPropagation();
         const open = dtr.hidden;
         dtr.hidden = !open;
         toggle.textContent = open ? "▾" : "▸";
-        if (open && !built) {
-          built = true;
-          dtr.firstChild.append(detailPanel(row));
+        if (open) {
+          if (key != null) expanded.add(key);
+          if (!entry.built) { entry.built = true; dtr.firstChild.append(detailPanel(row)); }
+        } else if (key != null) {
+          expanded.delete(key);
         }
       });
       tbody.append(dtr);
@@ -642,6 +694,14 @@ function renderDataGrid(node) {
   async function refresh() {
     try {
       const { rows } = await getJSON(dataUrl(p.data.source, p.data.table, activeFilter, p.data.orderBy));
+      // Forget expansion / cached detail nodes for rows no longer present so the maps
+      // don't grow without bound and a stale answer can't resurface on a key reuse.
+      if (p.rowKey) {
+        const live = new Set();
+        for (const r of rows) { const k = rowKeyOf(r); if (k != null) live.add(k); }
+        for (const k of [...detailNodes.keys()]) if (!live.has(k)) detailNodes.delete(k);
+        for (const k of [...expanded]) if (!live.has(k)) expanded.delete(k);
+      }
       tbody.replaceChildren();
       for (const row of rows) renderRow(row);
       if (!rows.length) tbody.append(el("tr", {}, el("td", { colspan: span }, "No rows")));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanobpm/urban",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "Urban: build and run code-first apps on Nano — runtime, derivation toolkit, and CLI in one. Author durable processes with @nanobpm/workflow (defineFlow), a typed datasource, forms, triggers and surfaces from a nano.app.json manifest, on Node or Deno.",
   "license": "Apache-2.0",
   "type": "module",

package/src/runtime/core/modules/pages.test.ts

@@ -89,6 +89,35 @@ test("GET /app/runtime.js serves the renderer module", async () => {
   assert.match(res.body ?? "", /pc:refresh/);
 });
 
+test("renderer preserves grid row-detail expansion across refreshes", async () => {
+  // Regression: the 5s poll rebuilds the whole tbody, which used to collapse an open
+  // detail row (e.g. the escalation-answer form). The client now tracks open rowKeys
+  // and reuses their built detail node so expansion (and a half-typed answer) survives.
+  const res = await dispatch("GET", "/app/runtime.js");
+  const js = res.body ?? "";
+  assert.match(js, /const expanded = new Set\(\)/);
+  assert.match(js, /const detailNodes = new Map\(\)/);
+  assert.match(js, /expanded\.add\(key\)/);
+  assert.match(js, /expanded\.delete\(key\)/);
+  // A missing/null rowKey must be treated as keyless (null) rather than coerced to
+  // the string "undefined"/"null", which would collide unrelated rows in the caches.
+  assert.match(js, /rowKeyOf/);
+  assert.match(js, /v == null \? null : String\(v\)/);
+});
+
+test("renderer wires a column's linkField to a new-tab anchor", async () => {
+  const res = await dispatch("GET", "/app/runtime.js");
+  const js = res.body ?? "";
+  // A column declaring `linkField` renders its text as a link to that field's
+  // URL, opened safely in a new tab. Guard the whole shape so the feature can't
+  // silently regress: the field is read, http(s) is required, and the anchor
+  // opens in a new tab with a hardened rel.
+  assert.match(js, /col\.linkField/);
+  assert.match(js, /\^https\?:/);
+  assert.match(js, /target: "_blank"/);
+  assert.match(js, /rel: "noopener noreferrer"/);
+});
+
 test("GET /app/pages/<id> returns the page json, 404 for unknown", async () => {
   const ok = await dispatch("GET", "/app/pages/home");
   assert.equal(ok.status, 200);

package/src/runtime/core/modules/pages.ts

@@ -427,6 +427,27 @@ function renderText(node) {
   return el(v === "heading" ? "h1" : "p", { class: cls }, node.props.text || "");
 }
 
+// A grid td cell. When the column declares linkField, the cell text (the
+// column's own value) becomes a link to the URL held in that other field,
+// opened in a new tab. Only http(s) hrefs are linked — anything else (e.g. a
+// javascript: URL smuggled through row data) falls back to plain text — and
+// external links get rel=noopener noreferrer so the opened page can't reach
+// window.opener. Shared by the top-level grid and child grids.
+function gridCell(col, row) {
+  const text = row[col.field] == null ? "" : String(row[col.field]);
+  if (col.linkField) {
+    const href = row[col.linkField] == null ? "" : String(row[col.linkField]);
+    if (text !== "" && /^https?:\/\//i.test(href)) {
+      return el(
+        "td",
+        {},
+        el("a", { class: "pc-link", href, target: "_blank", rel: "noopener noreferrer" }, text),
+      );
+    }
+  }
+  return el("td", {}, text);
+}
+
 function renderActionForm(node) {
   const p = node.props;
   const card = el("section", { class: "pc-card" });
@@ -493,6 +514,23 @@ function renderDataGrid(node) {
   card.append(table);
   const span = String((cols.length || 1) + (hasExtra ? 1 : 0));
 
+  // Expansion state has to outlive the poll: refresh() rebuilds the whole tbody
+  // every refreshMs, so without this an open detail row (where you answer an
+  // escalation) would collapse on the next tick. We remember which rowKeys are
+  // open, and reuse the already-built detail <tr> for them across refreshes so a
+  // half-typed answer survives too. Keyed by p.rowKey; grids without one keep the
+  // old (collapse-on-refresh) behavior.
+  const expanded = new Set();
+  const detailNodes = new Map();
+  // A row only participates in expansion/detail-node caching if it has a real
+  // (non-null) rowKey. Coercing a missing key through String() would yield the
+  // literal "undefined"/"null" and collide unrelated rows, so treat it as keyless.
+  const rowKeyOf = (row) => {
+    if (!p.rowKey) return null;
+    const v = row[p.rowKey];
+    return v == null ? null : String(v);
+  };
+
   function dataUrl(source, tbl, filters, order) {
     let u = "/app/data/" + encodeURIComponent(source) + "/" + encodeURIComponent(tbl);
     const qs = [];
@@ -587,7 +625,7 @@ function renderDataGrid(node) {
         cbody.append(el("tr", {}, el("td", { colspan: cspan }, "None")));
       }
       for (const cr of rows) {
-        const cells = ccols.map((c) => el("td", {}, cr[c.field] == null ? "" : String(cr[c.field])));
+        const cells = ccols.map((c) => gridCell(c, cr));
         if (cg.lazyField) {
           const lf = cg.lazyField;
           const has = cr[lf.field] != null && String(cr[lf.field]).trim() !== "";
@@ -641,7 +679,8 @@ function renderDataGrid(node) {
   }
 
   function renderRow(row) {
-    const cells = cols.map((c) => el("td", {}, row[c.field] == null ? "" : String(row[c.field])));
+    const cells = cols.map((c) => gridCell(c, row));
+    const key = rowKeyOf(row);
     let toggle = null;
     if (hasExtra) {
       const actionCell = el("td", { class: "pc-row-actions" });
@@ -658,16 +697,29 @@ function renderDataGrid(node) {
     const tr = el("tr", {}, ...cells);
     tbody.append(tr);
     if (detail && toggle) {
-      const dtr = el("tr", { hidden: "" }, el("td", { colspan: span }));
-      let built = false;
+      const isOpen = key != null && expanded.has(key);
+      // Reuse an already-built detail row for an open PR across refreshes so its
+      // expanded state — and any half-typed escalation answer in the form — survives
+      // the poll. A closed (or keyless) row always gets a fresh, lazily-built panel.
+      let entry = key != null ? detailNodes.get(key) : null;
+      if (!(isOpen && entry && entry.built)) {
+        const dtr = el("tr", { hidden: isOpen ? null : "" }, el("td", { colspan: span }));
+        entry = { dtr, built: false };
+        if (key != null) detailNodes.set(key, entry);
+        if (isOpen) { entry.built = true; dtr.firstChild.append(detailPanel(row)); }
+      }
+      const dtr = entry.dtr;
+      toggle.textContent = dtr.hidden ? "▸" : "▾";
       toggle.addEventListener("click", (ev) => {
         ev.stopPropagation();
         const open = dtr.hidden;
         dtr.hidden = !open;
         toggle.textContent = open ? "▾" : "▸";
-        if (open && !built) {
-          built = true;
-          dtr.firstChild.append(detailPanel(row));
+        if (open) {
+          if (key != null) expanded.add(key);
+          if (!entry.built) { entry.built = true; dtr.firstChild.append(detailPanel(row)); }
+        } else if (key != null) {
+          expanded.delete(key);
         }
       });
       tbody.append(dtr);
@@ -677,6 +729,14 @@ function renderDataGrid(node) {
   async function refresh() {
     try {
       const { rows } = await getJSON(dataUrl(p.data.source, p.data.table, activeFilter, p.data.orderBy));
+      // Forget expansion / cached detail nodes for rows no longer present so the maps
+      // don't grow without bound and a stale answer can't resurface on a key reuse.
+      if (p.rowKey) {
+        const live = new Set();
+        for (const r of rows) { const k = rowKeyOf(r); if (k != null) live.add(k); }
+        for (const k of [...detailNodes.keys()]) if (!live.has(k)) detailNodes.delete(k);
+        for (const k of [...expanded]) if (!live.has(k)) expanded.delete(k);
+      }
       tbody.replaceChildren();
       for (const row of rows) renderRow(row);
       if (!rows.length) tbody.append(el("tr", {}, el("td", { colspan: span }, "No rows")));