coop/rose-ash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

host: relate/unrelate keep both lists in sync (add to current list, never blank the picker)
Some checks failed
Test, Build, and Deploy / test-build-deploy (push) Failing after 30s
Details

Browse Source 
Two reported bugs on the edit page's relation editor:
 1. relating a candidate didn't add it to the current-relations list (the AJAX
    relate just deleted the candidate row; the relation only showed after a reload);
 2. removing a relation could blank the relate picker.

Fix (lib/host/blog.sx): both the candidate's relate form and a current relation's
remove form now target #rel-editor-<kind> with sx-swap=outerHTML, and the
relate/unrelate handlers return the re-rendered editor for that kind (current list +
a fresh picker). So one swap keeps BOTH lists in sync: the related post moves into
the current list and out of the (re-loaded) candidate pool; removing moves it back.
Gated on the SX-Target header, so a plain boosted form / no-JS POST (the is-a-tag
toggle) still redirects + re-renders #content.

Engine fix (web/orchestration.sx): handle-html-response's non-select branch called
post-swap on the OLD target, which an outerHTML swap has already REPLACED — so the
swapped-in content's triggers (here the re-rendered picker's "load") never bound and
the picker stayed empty. post-swap the swap result (the new node), mirroring the
sx-select branch. Recompiled orchestration.sxbc for the content-addressed client.

Tests:
 - web/tests/test-relate-picker.sx: relating re-syncs the editor (post in current
   list + picker re-loads); removing does likewise — both fail without the engine fix.
 - lib/host/tests/blog.sx: relate/unrelate return the re-rendered editor fragment
   (200, #rel-editor + picker), forms wire to #rel-editor-KIND/outerHTML, plain
   boosted POST still 303.
 - relate-picker.spec.js: the full in-page flow (relate adds to list, remove keeps
   the picker, no reload) + persistence.

Verified: host conformance 277/277, web engine suite 8/8, run-picker-check 3/3,
run-spa-check 3/3.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
giles
2026-06-29 19:53:20 +00:00
parent 09465f4483
commit 268e91cd5d
7 changed files with 248 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
lib/host/blog.sx
View File

@@ -364,16 +364,18 @@
(quasiquote
(li :id (unquote (str "cand-" kind "-" (get p :slug)))
:style "border-bottom:1px solid #eee"
;; AJAX relate: sx-post the relation, then sx-swap="delete" removes THIS
;; candidate row (its sx-target) — it's now related, so it leaves the pool
;; without a reload or a list refetch. method+action stay for the no-JS
;; fallback (plain POST -> 303 -> reload); the engine prevents the double
;; submit when it handles sx-post.
;; AJAX relate: sx-post the relation, then sx-swap="outerHTML" re-renders the
;; WHOLE relation editor for this kind (its sx-target #rel-editor-KIND) — the
;; just-related post moves into the current-relations list and out of the
;; candidate pool, and the fresh picker re-loads its candidates. (A bare
;; delete of this row added the relation server-side but never showed it in
;; the current list; re-rendering the editor keeps BOTH lists in sync.)
;; method+action stay for the no-JS fallback (plain POST -> 303 -> reload).
(form :method "post" :style "margin:0"
:action (unquote (str "/" slug "/relate"))
:sx-post (unquote (str "/" slug "/relate"))
:sx-target (unquote (str "#cand-" kind "-" (get p :slug)))
:sx-swap "delete"
:sx-target (unquote (str "#rel-editor-" kind))
:sx-swap "outerHTML"
(input :type "hidden" :name "other" :value (unquote (get p :slug)))
(input :type "hidden" :name "kind" :value (unquote kind))
(button :type "submit"
@@ -434,11 +436,12 @@
;; so the blog degrades gracefully to plain server-rendered pages.
(define host/blog--spa-req? (fn (req) (= (dream-header req "sx-request") "true")))
;; An AJAX in-place row delete vs. a plain boosted form. The engine sends an
;; SX-Target header for an sx-post form (the relation-editor's remove button,
;; sx-target=#cur-…), but NOT for a plain boosted form (the is-a-tag toggle). So
;; this tells "delete just this row, empty 200" apart from "redirect + re-render".
(define host/blog--row-swap-req?
;; An AJAX editor swap (the picker's relate / the editor's remove) vs. a plain
;; boosted form. The engine sends an SX-Target header for an sx-post form
;; (sx-target=#rel-editor-…), but NOT for a plain boosted form (the is-a-tag
;; toggle). So this tells "return the re-rendered editor fragment" apart from
;; "redirect + re-render #content" (the toggle / no-JS path).
(define host/blog--editor-swap-req?
(fn (req)
(and (host/blog--spa-req? req)
(let ((t (dream-header req "sx-target"))) (and t (not (= t "")))))))
@@ -591,25 +594,30 @@
(let ((spec (host/blog--kind-spec kind))
(current (host/blog-out slug kind)))
(quasiquote
(div :style "margin-top:2em;border-top:1px solid #ccc;padding-top:1em"
;; #rel-editor-KIND wraps the WHOLE editor (current list + picker) so relate
;; and unrelate can re-render it with one outerHTML swap — keeping the two
;; lists in sync. The fresh picker re-loads its candidates (an explicit
;; outerHTML swap installs a NEW form the engine binds, unlike the old
;; redirect that morphed the stale picker and left it empty).
(div :id (unquote (str "rel-editor-" kind))
:style "margin-top:2em;border-top:1px solid #ccc;padding-top:1em"
(h3 (unquote (get spec :label)))
(unquote
(if (> (len current) 0)
(cons (quote ul)
(map (fn (s)
(quasiquote
;; AJAX unrelate: sx-post the removal, then sx-swap="delete"
;; removes just THIS current-relation row (its sx-target) in
;; place — NO #content re-render, so the relate picker (the
;; "posts to relate" list) is left untouched. method+action
;; stay for the no-JS fallback (plain POST -> 303 -> reload).
(li :id (unquote (str "cur-" kind "-" s))
(a :href (unquote (str "/" s "/")) (unquote s)) " "
;; remove: sx-post the unrelate, then sx-swap="outerHTML"
;; re-renders this kind's editor (its sx-target
;; #rel-editor-KIND) — the row leaves the current list and
;; the post returns to the candidate pool, both in sync,
;; with the picker NOT cleared. method+action stay for no-JS.
(li (a :href (unquote (str "/" s "/")) (unquote s)) " "
(form :method "post" :style "display:inline"
:action (unquote (str "/" slug "/unrelate"))
:sx-post (unquote (str "/" slug "/unrelate"))
:sx-target (unquote (str "#cur-" kind "-" s))
:sx-swap "delete"
:sx-target (unquote (str "#rel-editor-" kind))
:sx-swap "outerHTML"
(input :type "hidden" :name "other" :value (unquote s))
(input :type "hidden" :name "kind" :value (unquote kind))
(button :type "submit" "remove")))))
@@ -889,11 +897,13 @@
(when (and other (not (= other "")) (not (= other slug))
(host/blog--kind-spec kind) (host/blog-exists? other))
(host/blog-relate! slug other kind))
;; AJAX (the picker's sx-post): return an empty 200 so the candidate
;; form's sx-swap="delete" removes just that one row — no full reload,
;; no candidate-list refetch. Plain POST (no-JS) still redirects.
(if (host/blog--spa-req? req)
(dream-html "")
;; AJAX (the picker's sx-post, carries SX-Target): return the re-rendered
;; editor for this kind so its sx-swap="outerHTML" replaces #rel-editor-KIND
;; — the just-related post shows in the current list and the picker refreshes
;; its candidates. text/html so the client's DOMParser swap path renders the
;; already-expanded fragment. Plain boosted form / no-JS still redirects.
(if (host/blog--editor-swap-req? req)
(dream-html (render-page (host/blog--relation-editor slug kind)))
(dream-redirect (str "/" slug "/edit"))))))))
;; POST /<slug>/unrelate — remove the relation to `other` under `kind` (default
@@ -906,12 +916,13 @@
(begin
(when (and other (not (= other "")) (host/blog--kind-spec kind))
(host/blog-unrelate! slug other kind))
;; AJAX in-place remove (the editor's sx-post, carries SX-Target): return an
;; empty 200 so the current-relation row's sx-swap="delete" removes just that
;; one row — no #content re-render, so the relate picker is untouched. A plain
;; boosted form (the tag toggle) or a no-JS POST still redirects + re-renders.
(if (host/blog--row-swap-req? req)
(dream-html "")
;; AJAX remove (the editor's sx-post, carries SX-Target): return the
;; re-rendered editor for this kind so its sx-swap="outerHTML" replaces
;; #rel-editor-KIND — the row leaves the current list, the post returns to the
;; (re-loaded) candidate pool, and the picker is NOT cleared. A plain boosted
;; form (the tag toggle) or a no-JS POST still redirects + re-renders #content.
(if (host/blog--editor-swap-req? req)
(dream-html (render-page (host/blog--relation-editor slug kind)))
(dream-redirect (str "/" slug "/edit")))))))
;; GET /<slug>/edit — edit form pre-filled with the post's current title, raw

53
lib/host/playwright/relate-picker.spec.js
View File

@@ -50,28 +50,53 @@ async function login(page) {
}
test.describe('relate picker (browser-only)', () => {
test('the remove button on a current relation actually unrelates it', async ({ page }) => {
test('relating a candidate adds it to the current list AND removing keeps the picker', async ({ page }) => {
// The whole in-page flow the user reported broken — no reloads. Relating a
// candidate re-renders the editor: the post moves into the current-relations
// list and the picker re-loads its candidates (it is NOT blanked). Removing it
// re-renders the editor back: the post leaves the current list and the picker
// still offers candidates.
test.setTimeout(75000);
await loginTo(page, `/${HOST}/edit`);
await waitReady(page);
// relate Item 13 via the picker, then reload so it shows in the current list
await page.evaluate(() => { window.__noReload = true; });
// relate Item 13 from the picker
await page.fill(RELF, 'Item 13');
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 10000 }).toBe(1);
await page.locator(`${RELROWS} button`).first().click();
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 10000 }).toBe(0);
const relLink = page.locator('a[href="/picker-item-13/"]');
// ISSUE 1: it now appears in the CURRENT relations list (added, not just removed)
await expect(relLink).toHaveCount(1, { timeout: 12000 });
// and the re-rendered picker still offers candidates (not blanked)
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 12000 }).toBeGreaterThan(0);
// now remove it via its current-list remove button
await page.locator('li:has(a[href="/picker-item-13/"]) button').click();
await expect(relLink).toHaveCount(0, { timeout: 12000 }); // left the current list
// ISSUE 2: removing must NOT clear "the list of posts to relate"
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 12000 }).toBeGreaterThan(0);
expect(await page.evaluate(() => window.__noReload)).toBe(true); // all in-page, no reload
// and the relation truly persisted gone (reload shows it not present)
await page.reload();
await waitReady(page);
const relLink = page.locator('a[href="/picker-item-13/"]');
await expect(relLink).toHaveCount(1); // current relation present
// the picker is populated (empty filter -> first page of candidates)
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 12000 }).toBeGreaterThan(0);
// click its remove button
await page.locator('li:has(a[href="/picker-item-13/"]) button').click();
await expect(relLink).toHaveCount(0, { timeout: 12000 }); // relation removed
// REGRESSION: removing a relation must NOT clear "the list of posts to relate".
// (The old plain-boosted remove form redirected -> re-rendered #content and the
// picker came back empty; the AJAX in-place remove leaves the picker untouched.)
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 12000 }).toBeGreaterThan(0);
await expect(page.locator('a[href="/picker-item-13/"]')).toHaveCount(0);
});
test('relating a candidate persists the relation', async ({ page }) => {
test.setTimeout(75000);
await loginTo(page, `/${HOST}/edit`);
await waitReady(page);
await page.fill(RELF, 'Item 07');
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 10000 }).toBe(1);
await page.locator(`${RELROWS} button`).first().click();
await expect(page.locator('a[href="/picker-item-07/"]')).toHaveCount(1, { timeout: 12000 });
// persisted across a reload
await page.reload();
await waitReady(page);
await expect(page.locator('a[href="/picker-item-07/"]')).toHaveCount(1);
// and visible on the public post page
await page.goto(`/${HOST}/`);
await expect(page.getByRole('heading', { name: 'Related posts' })).toBeVisible();
await expect(page.locator('body')).toContainText('Picker Item 07');
});
test('picker populates after a boosted SPA nav to the edit page', async ({ page }) => {

67
lib/host/tests/blog.sx
View File

@@ -296,34 +296,63 @@
(contains? (dream-resp-body (host-bl-app (host-bl-req "/alpha-post/relate-options"))) "rp-more")
false)
;; -- unrelate: AJAX in-place row delete (regression: removing a related post must
;; NOT clear the relate picker). The remove button is now an sx-post form that
;; deletes just its own current-relation row (sx-target=#cur-…, sx-swap=delete),
;; so #content is never re-rendered and the picker is left intact. --
;; -- relate / unrelate keep BOTH lists in sync by re-rendering the kind's editor.
;; Regressions: (1) relating a candidate must ADD it to the current-relations
;; list (not just delete the candidate row); (2) removing must NOT clear the
;; relate picker. Both the candidate's relate form and the remove form target
;; #rel-editor-KIND with sx-swap=outerHTML; the handler returns the re-rendered
;; editor, so the current list updates and the fresh picker re-loads. --
(host/blog-relate! "alpha-post" "beta-post" "related")
(host-bl-test "relation-editor remove button is an AJAX in-place delete"
;; the editor wraps current list + picker in #rel-editor-KIND; remove re-renders it
(host-bl-test "relation-editor wires remove to re-render the kind's editor"
(let ((html (render-page (host/blog--relation-editor "alpha-post" "related"))))
(list (contains? html "id=\"cur-related-beta-post\"") ;; row has a target id
(list (contains? html "id=\"rel-editor-related\"") ;; the swap target
(contains? html "sx-post=\"/alpha-post/unrelate\"") ;; AJAX, not plain post
(contains? html "sx-target=\"#cur-related-beta-post\"")
(contains? html "sx-swap=\"delete\"")))
(contains? html "sx-target=\"#rel-editor-related\"")
(contains? html "sx-swap=\"outerHTML\"")))
(list true true true true))
;; the AJAX remove (carries SX-Target) returns an empty 200 so only the row is
;; swapped out — no redirect, no #content re-render that would blank the picker.
(host-bl-test "unrelate (AJAX, SX-Target) returns an empty 200"
;; the candidate's relate form targets the SAME editor (so relating re-renders it)
(host-bl-test "picker candidate relate form re-renders the kind's editor"
(let ((html (render-page (host/blog--picker-item "alpha-post" {:slug "gamma-post" :title "Gamma"} "related"))))
(list (contains? html "sx-post=\"/alpha-post/relate\"")
(contains? html "sx-target=\"#rel-editor-related\"")
(contains? html "sx-swap=\"outerHTML\"")))
(list true true true))
;; a POST request to a /:slug/… route, with the :slug route param populated (which
;; the route matcher would set) plus headers + a form body.
(define host-bl-relreq
(fn (slug action headers other kind)
(merge (dream-request "POST" (str "/" slug "/" action) headers
(str "other=" other "&kind=" kind))
{:params {:slug slug}})))
;; the AJAX remove (carries SX-Target) returns the re-rendered editor fragment (200,
;; with the #rel-editor wrapper + the picker) — not an empty body or a redirect.
(host-bl-test "unrelate (AJAX, SX-Target) returns the re-rendered editor fragment"
(let ((resp (host/blog-unrelate-submit
(dream-request "POST" "/alpha-post/unrelate"
{:sx-request "true" :sx-target "#cur-related-beta-post"}
"other=beta-post&kind=related"))))
(list (dream-status resp) (dream-resp-body resp)))
(list 200 ""))
(host-bl-relreq "alpha-post" "unrelate"
{:sx-request "true" :sx-target "#rel-editor-related"}
"beta-post" "related"))))
(list (dream-status resp)
(contains? (dream-resp-body resp) "rel-editor-related")
(contains? (dream-resp-body resp) "relate-picker")))
(list 200 true true))
;; relate (AJAX, SX-Target) likewise returns the editor with the new relation listed
(host/blog-unrelate! "alpha-post" "gamma-post" "related") ;; clean state
(host-bl-test "relate (AJAX, SX-Target) returns the editor showing the new relation"
(let ((resp (host/blog-relate-submit
(host-bl-relreq "alpha-post" "relate"
{:sx-request "true" :sx-target "#rel-editor-related"}
"gamma-post" "related"))))
(list (dream-status resp)
(contains? (dream-resp-body resp) "/gamma-post/"))) ;; now in the current list
(list 200 true))
(host/blog-unrelate! "alpha-post" "gamma-post" "related")
;; a plain boosted form / no-JS POST (no SX-Target) still redirects + re-renders,
;; so the is-a-tag toggle and graceful degradation are unaffected.
(host/blog-relate! "alpha-post" "beta-post" "related")
(host-bl-test "unrelate (plain boosted / no-JS, no SX-Target) still redirects"
(dream-status (host/blog-unrelate-submit
(dream-request "POST" "/alpha-post/unrelate"
{:sx-request "true"} "other=beta-post&kind=related")))
(host-bl-relreq "alpha-post" "unrelate"
{:sx-request "true"} "beta-post" "related")))
303)
(host/blog-unrelate! "alpha-post" "beta-post" "related")
(host/blog-put! "hint-post" "Hint Post" "(p \"h\")" "published")