feat(auth-ui): asset editor

[CptSchnitz]

Assets were the only part of the authorization system with no user interface. Answering "what is deployed right now?" meant database access, and changing a policy meant hand-crafting an HTTP request with a base64 payload and a guessed version number.

This adds a fourth managed entity to auth-ui: browse every asset, open one into a full page, read it with syntax highlighting, edit it, and create new ones. Everything runs offline and no runtime dependency is added.

Commits, one per ticket

Commit	Ticket
07690ea	01 — test harness for auth-ui, scoped to this feature
6163e3d	03 — asset content codec
d5c8f7a	04 — assets list
b864c6b	02 — Rego language support
d4fc688	05 — open an asset read-only in a full page
f2c43d5	06 — edit an asset and save it
32e0c60	07 — make lost work hard
c22bdda	08 — create an asset
1a464a0	09 — asset version dropdown and comparison
db3c86a	code review findings folded in
16748c6	pr review findings folded in
5bf1804	second round of pr review findings folded in
c2ff05d	an asset page's action button lands where the list page's is
a14d308	the way back is named, the promised version is gone, the sidebar marks child routes

Changed after review

The nine points from the review, in order.

The filters take the shape the other entity pages use — search box, a filter toggle carrying a count, the filters in a panel, the active ones as removable badges. Every part of that block is mounted before any filter is chosen, and the loading spinner moved inside the table, because the real cause of the list shifting was the full-page spinner: starting a new query unmounted the header and the filters mid-click. The wording that read as machine-generated is rewritten — "All targeted environments" is now "All environments", "Templates and not" is "Templates and regular assets".

An asset opens read-only. Editing is a mode with one way in — an Edit button — and two ways out: Save, which asks before it writes, and Cancel, which asks before it throws edits away. Metadata follows the editor in and out, so the page cannot be half-editable.

A create and a save both say so. Both land on a page that otherwise looks exactly as it did before, so both leave a notice naming the asset version they produced. The toast alone was too easy to miss behind a navigation.

Latest and in-use are now told apart. An environment builds its bundle from the highest asset version targeting it, so a version the latest one stopped targeting stays live for that environment — previously the page called it "not the latest, read-only" and said nothing about it still running. The version dropdown annotates each entry (3 (latest), 1 (in use: np)), the non-latest banner adds what the version is still in use for, and the asset's header carries an "In use" badge. All of it computed the way the bundler computes it. The list is unchanged: a row still opens the latest.

Third round

The way back is the path, not an arrow. An icon-only arrow aligned the buttons but said nothing about where it went. The title row now reads Assets / authz.rego, the first half a muted link. The heading itself is still just the asset's name, so it is still the page's heading rather than a breadcrumb, and the row keeps the list page's height.

A new asset no longer promises its version. "Will be saved as asset version 1" was a promise about something the api assigns and that is always 1 here. The create page says nothing about it; the notice on the page a create lands on states it once it is a fact.

The sidebar marks an entry from anywhere underneath it. It compared the path for exact equality, and assets is the first entry with routes below it, so creating or opening an asset left nothing in the sidebar marked. It now matches an entry's children too — no change for the other entries, which have none.

Two smaller ones. The environments hint holds its line whether or not there is a hint in it, so ticking a box no longer moves the controls beside it. And a new asset's version is stated beside the title rather than sitting in what looked like a fillable field.

Second round

The filter row follows the other pages' order exactly. The first attempt reserved space for the count badge, the clear button and the badge row so that turning a filter on moved nothing — but that pushed the filter toggle off the right edge, which is the more visible of the two problems. Each of them now appears only when there is something to show, as on every other page. The one stability fix that stays is the loading spinner, which belongs in the table: it was the reason a filter change tore out the header and the filters.

The full-page asset views were missing their padding. Every list page adds p-6 on top of the main element's own, and the asset, create and version pages added none. That was half the jump between the list and an asset; the other half was the way back sitting on a line of its own above the title, which started the title row — and the button in it — one line lower than on the list page. The way back is now an icon button at the head of the title row, so every asset page opens with the same 36px row the list pages do: Add asset and Create sit in the same place, as do Edit and Save. The version view kept its version dropdown in that row, making it taller than any other page's; it joins the stack underneath, where the asset page already had it.

The save confirmation was warning about the wrong thing. It claimed an asset keeps no content history. The asset version is the history; what a save actually changes is what each targeted environment builds its next bundle from. It now names them — "This writes asset version 4. np, prod build their next bundle from it, in place of asset version 3." — and says so plainly when an asset targets nothing. The read-only warning made the same wrong claim and is corrected with it.

Worth a reviewer's attention

The application moves to a data router. App.tsx used <BrowserRouter> with a single flat level of children. The unsaved-work guard needs useBlocker, which only a data router provides, so the tree moves to createBrowserRouter over route objects in src/routes.tsx — shared with the tests, so both mount the same thing. The routes themselves are unchanged. One consequence: a data router catches render errors itself, so the root route gains an errorElement; without it a page that throws would reach the router's own default screen rather than this application's.

Saving goes through the shared fetch client, not $api.useMutation. Telling a 409 from any other failure needs the response status, and the query wrapper only surfaces the error body. src/pages/assets/save.ts is the one place that reaches past it, and the one place the schema's read-only-yet-required createdAt is papered over.

Safety around an irreversible save. There is no content history and no delete, so: a diff before every save, a confirmation on navigating away with edits, a stale save reported as a conflict that keeps the working content and shows it against the refetched stored content, a read-only mode for content that is not valid text, and a size warning before the api's 1 MB body limit turns into an opaque server error.

Rego highlighting is lexical only, per ADR-0002 — no parsing, no diagnostics. Syntax errors keep surfacing downstream where the bundle is built.

Testing

auth-ui had no test runner; this adds the first one, confined by include patterns to this feature. Existing application code gets no tests here.

One seam: the global fetch, stubbed by the setup file before any page module loads, because the shared api client resolves its base url at module load behind a top-level await. Tests render real components through the real fetch client, query library and component tree. One forced seam: the editor cannot run under jsdom, so its React wrapper is aliased to a text area and a two-sided diff — highlighting and diff rendering are therefore outside component-test coverage, and the tokenizer is tested against the real library instead.

163 tests across 12 files. turbo run build, test and lint are green, and knip is clean.

Deliberately not done

Replication to other sites, deleting assets, Rego validation, server-side pagination, any API or schema change, and the existing JSON editor's dark-mode bug. API gaps found along the way — including a uri with no server-side traversal validation, and an asset version write path that overwrites rather than inserts — are recorded in the spec's Further Notes rather than worked around.

🤖 Generated with Claude Code

[CptSchnitz]

1. the structure of the filters is different than the other pages, it should be the same.
2. the english is not good - "all targeted environments", "templates and not" are not clear.
3. in the new asset page, when you choose environment, the "No targeted environments" is gone and changes the layout. the control should stay at the same place.
4. the asset version in the new asset page is not clear, something about the design.
5. before saving changes there should be "are you sure" prompt.
6. when creating a new asset or new version, its not clear that it worked, as you go to the asset page that looks the same, you dont get any indication.
7. there should a button to enter edit mode in the asset page, and also a undo / cancel button. it should not always be with edit enabled.
8. in the assets page, when choosing stuff in the filter, it changes the layout (might not matter after the filter changes.
9. right now when if for example version 1 is np, and version 2 is prod, when filtering by np you cant see it, even when its still the working version for np.

[CptSchnitz]

A create silently overwrites an existing asset whose version is 1, rather than reporting a name collision.

This page always posts version: 1, and upsertAsset (apps/auth-manager/src/asset/models/assetManager.ts:63-79) only throws AssetVersionMismatchError when maxVersion !== asset.version. An asset already at version 1 takes the update branch: its content is replaced by whatever was just typed and stored as version 2. No 409 ever reaches here.

Every asset that has never been edited sits at version 1, so this is the ordinary case, not an edge one. There is no delete and no content history, so the overwritten content is gone. tests/assets/create-asset.spec.tsx:99 stubs the 409 and asserts the wording, which is why the suite is green over the hole — the server's unit tests (apps/auth-manager/tests/unit/asset/models/assetManager.spec.mts) cover "version is not 1" and "version doesn't match", not this one.

The spec's whole safety story is that destructive mistakes are made hard; this is the one path that destroys an asset with no confirmation at all. GET /asset/{assetName} is already wired for AssetPage and answers with an empty list for an unknown name — check it before posting and refuse when it returns rows. If that is out of scope, it at least belongs in the spec's Further Notes with the other API gaps, because the API change it implies is not optional.

[CptSchnitz]

The move to a data router changes the meaning of what three existing pages already do to the URL. ClientsPage.tsx:63, ConnectionsPage.tsx:60 and DomainsPage.tsx:46 each call window.history.replaceState({}, '', url.toString()) on every filter change. Under <BrowserRouter> that was harmless. createBrowserRouter keeps {usr, key, idx} in history state and reads idx on every push — index = getIndex() + 1 — so after the wipe every entry pushed thereafter carries idx: NaN. I confirmed that in this repo with a throwaway spec: filter the clients list, click a sidebar link, history.state.idx is NaN.

useBlocker is the only consumer of that number, and it is this PR's unsaved-work guard. On a POP it computes delta = NaN, which passes its own delta != null check, and calls history.go(NaN); react-router's warning string names this exact scenario ("navigating outside the router via window.history.pushState"). I could not reproduce the browser-side symptom under jsdom — its history.go is not a faithful oracle — so please check it in a browser: filter the clients list, open an asset, edit it, press Back. Story 47 asks for no regression on the existing pages, and the guard is the one thing between an edit and losing it.

The change is one token in each of the three pages:

window.history.replaceState(window.history.state, '', url.toString());

or switch them to setSearchParams(..., { replace: true }) the way AssetsPage already does.

[CptSchnitz]

environment, type and template are all checked against their allowed values — "the url is external input" — but pageSize takes any positive integer. ?pageSize=999 slices correctly and leaves the page-size Select rendering nothing, since no SelectItem matches and there is no placeholder. Consider running it through oneOf(..., PAGE_SIZES).

[CptSchnitz]

Fold into the import on line 4 — same module, two statements.

[ronenkapelian]

An asset name is not unique in the /asset collection response — every version of an asset is a separate row with the same name. Your own seed data has this today (olKmsNiH v1/v2/v3, skpsBeRC v1/v2, fuYkBNgE v1/v2), so this fires on a stock checkout, no special setup needed.

To see the visible symptom (not just the console warning)
Take a screenshot or just note the order of rows on /assets right after it first loads.
Type a character into the search box, then delete it (so the filter is back to "no filter" — same data as before).
Compare the row order to step 1 — it's different, even though it's the exact same 19 assets with no filter applied. That's React silently reusing/misplacing DOM nodes because it can't tell rows with the same key apart.

[ronenkapelian]

[nitpick] - kind of 😄
useBlocker only intercepts in-app (react-router) navigations. It does not intercept a hard reload, a tab close, or a same-page window.location.reload()