Migrate every part of the Transaction Edit modal's HTML to Selmer templates
(zero Hiccup in the render path) and delete the mm multi-modal "wizard"
abstraction entirely -- there was only ever one step.
- New auto-ap.ssr.components.selmer (sc) + ~22 shared component partials under
resources/templates/components/ (typeahead, button-group, radio-card,
data-grid, validated-field, modal, buttons, inputs, SVGs). Each wrapper renders
its own partial; dynamic HTMX/Alpine attrs bridge via attrs->str -> {{attrs|safe}}.
- 15 modal templates under resources/templates/transaction-edit/.
- Delete EditWizard/LinksStep records + all mm/* usage. Plain handlers: flat
wrap-decode-edit (fields renamed off step-params[...], stray keys stripped),
flat wrap-derive-state, *errors*-based field errors, generic wrap-form-4xx-2.
- Drop the edit-wizard-navigate route (routes ~12 -> 5).
- Fix: stray `method` (tab button-group hidden) leaked into the upsert -> 500;
strip decoded map to schema keys.
- e2e selectors updated (#wizard-form->#edit-form, #wizardmodal->#editmodal,
step-params[...] field names). Parity: swap 6/6, edit 8/8, suite 38/1
(1 pre-existing unrelated nav test).
- ssr-form-migration skill updated with the learnings (composition mechanics,
sc/* library, drop-the-wizard recipe, scorecard row, 3 new gotchas).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
7.4 KiB
Forms vs. wizards (and the data-driven wizard engine)
Classify first
| Signal | Classification |
|---|---|
One logical step — even with a ?mode= toggle, $/% radio, or add/remove rows |
plain form |
| The user genuinely advances through ordered steps, each validated before the next | wizard |
| In doubt | form |
Most "wizards" in this codebase are single-step forms wearing wizard costumes: they
implement the multi-step protocol (mm/ModalWizardStep + friends), serialize an EDN
snapshot into hidden fields, and register 10–20 stacked-middleware routes — all for one
step. That is pure overhead to delete.
Done — Transaction Edit is now a plain form.
LinksStep/EditWizardand allmm/*usage were deleted fromtransaction/edit.clj; the worked example below is realized, not aspirational. See "Single-step → plain form (realized)".
The machinery being replaced
The old shape (kept here as the "before"):
(defrecord LinksStep [linear-wizard]
mm/ModalWizardStep
(step-name [_] "Transaction Actions")
(step-key [_] :links)
(edit-path [_ _] [])
(step-schema [_] (mm/form-schema linear-wizard))
(render-step [this {{:keys [snapshot step-params]} :multi-form-state :as request}] ...))
…plus the snapshot round-trip: the whole accumulating form state is serialized to hidden
fields (custom EDN readers), then rebuilt every request by merging the posted pieces back
into the snapshot (:multi-form-state :snapshot is read ~75× in edit.clj). The
serialization needs custom readers, the merge is error-prone, and the payload grows each
step.
Single-step → plain form
Two routes: GET (render) and POST (validate + save). State is plain form fields + an
entity id. No snapshot, no server state, no protocol.
{::route/edit (fn [req] (html-response (render-edit-form {:entity (get-entity req)})))
::route/edit-submit (fn [req] (validate-and-save req))}
A ?mode= toggle is just the GET re-rendering with a different query param — still a
plain form. An add-row interaction is one extra POST that appends a fresh row and
re-renders (the +1 route).
Single-step → plain form (realized: Transaction Edit)
What replacing the wizard actually looked like, end to end:
- Delete the records + middleware.
EditWizard/LinksStep,mm/open-wizard-handler,mm/next-handler,mm/submit-handler,mm/wrap-wizard,mm/wrap-decode-multi-form-state, and theedit-wizard-navigateroute all go.render-stepbecomes a plainrender-form. - Rename the fields off
step-params[...]. Field names are now the schema path directly ((path->name2 :transaction/accounts 0 :transaction-account/account)→transaction/accounts[0][transaction-account/account]). They decode straight into the form schema via the unchangedwrap-nested-form-params+mc/decode— no two-key snapshot/step-params decode. Strip stray keys after decode (select-keysto the schema's keys) or a non-schema input like the tab group'smethodhidden 500s the save (seegotchas.md). - Flat state.
wrap-derive-statebuilds a plain{:snapshot :edit-path :step-params}map (not theMultiStepFormStaterecord):entity-onlyfields from the entity, editable fields from the live posted form (absent = cleared). The ~34:snapshotreads keep working. - Validation/error flow without
wrap-ensure-step. Reuse the genericwrap-form-4xx-2directly:(-> submit-edit (wrap-form-4xx-2 render-form-response) …).submit-editrunsassert-schemathen dispatches the save; on a throw,wrap-form-4xx-2re-renders the whole form with:form-errorskeyed by schema paths. A*errors*dynamic var (bound byrender-form) replaces the form-cursor's*form-errors*for field lookups. - Routes shrink to
edit-wizard(GET open),edit-submit(POST),edit-form-changed(POST whole-form re-render for dependent changes),location-select(GET),unlink-payment(POST).
Genuinely multi-step → data-driven engine with session-stored step state
Inspiration — Django
formtoolsWizardView. Django's wizard does not round-trip a serialized blob of the whole form through the page. Each step's validated data is written to a storage backend (the user session by default) under that step's key, and the steps are combined only at the very end viaget_all_cleaned_data(). We adopt the same model: replace the EDN snapshot + piecewise merging with per-step form state stored in the Ring session. A step writes its own data under its own key; nothing is merged into a snapshot and nothing about other steps rides through the form. Refs:formtools.wizard.views.WizardView,SessionStorage,get_all_cleaned_data()(https://django-formtools.readthedocs.io/en/latest/wizard.html).
A wizard is data:
(def vendor-wizard-config
{:steps [{:key :info :schema info-schema :fields [...] :render render-info-step
:next (fn [data] :terms)}
{:key :terms :schema terms-schema :fields [...] :render render-terms-step
:next (fn [data] :done)}]
:init-fn (fn [req] {...})
:submit-route "/admin/vendor/wizard/submit"
:done-fn (fn [all-data req] (save! all-data) (html-response "Saved"))})
with a tiny engine (no protocols) whose state lives in the session, keyed by a wizard
instance id, each step's data under its own step key — the formtools SessionStorage
model. No snapshot, no custom EDN readers, no merge-into-snapshot:
;; Storage backed by the Ring session. Path: [:wizards <wizard-id> :step-data <step-key>]
(defn create-wizard! [session config]
(let [id (str (java.util.UUID/randomUUID))]
[id (assoc-in session [:wizards id]
{:current-step (-> config :steps first :key) :step-data {}})]))
(defn put-step [session id k data] (assoc-in session [:wizards id :step-data k] data)) ; replace, not merge
(defn set-step [session id k] (assoc-in session [:wizards id :current-step] k))
(defn get-all [session id] (->> (get-in session [:wizards id :step-data]) vals (apply merge)))
(defn forget [session id] (update session :wizards dissoc id))
The render emits only a reference token (wizard-id, current-step) in the form —
never the form's state. The submit handler validates the posted step, put-steps it,
computes :next, and either advances (set-step) or finishes (get-all + :done-fn +
forget). Every fn returns the updated session for the handler to thread into the Ring
response ((assoc resp :session session')).
Two routes per wizard: open (partial open-wizard config) and submit
(partial handle-step-submit config). State is namespaced by wizard-id inside the
session, so multiple in-flight wizards (and browser tabs) don't collide, and it is
discarded on completion (forget).
Storage lifetime (Open decision 1)
State lives in the Ring session, scoped to true multi-step wizards (plain forms hold
none). Lifetime follows the session; forget on completion prevents session bloat. For
long-lived wizards, confirm the session backend (in-memory vs. durable) is acceptable or
pick a durable store. This engine is built in Phase 6 (Transaction Rule) — until then
this file describes the target; validate components/wizard_state.clj +
components/wizard2.clj against it when they land, and update this doc from the real
implementation.