feat(experiments): the page's experiments as a panel beside the canvas (#37478)

[oidacra]

Closes #37478

With FEATURE_FLAG_EXPERIMENTS_PORTLET on, the Universal Visual Editor's Experiments entry point currently ejects the editor: the science nav item navigates to the portlet, the iframe is torn down, and the editor gets back to the page through the breadcrumb. This keeps the editor on the page — the experiments for the page in hand render in a panel beside the canvas, behind the same flag. No new switch, no second rollout.

It also closes what #37005 (flagged UVE entry point) left half-done. Its FR-021c asked for the page filter to be "visible and clearable"; the filter is applied but has no affordance to clear it, and clearing it would be a dead end — the portlet is opt-in, so on a stock instance the admin menu carries no Experiments entry to return to. In a page-scoped panel there is no filter to clear: the panel is the page's scope by construction, and "clearable" becomes an explicit link out to the full portlet.

Proposed Changes

The flow, end to end

• The Experiments nav item becomes an action, not a destination — no navigation, no route, no address change. A panel opens beside the canvas and the page stays rendered.
• A page with no experiments opens straight on creation. An empty list is not a resting state — on an untested page there is exactly one useful next step.
• A page with experiments opens on that page's list, and the editor picks one to configure.
• The page is fixed in creation and configuration. No page picker, no editable page field, no change-page flow — the editor is standing on the page, so a control offering to move the experiment elsewhere contradicts the surface it renders on.
• Preview / Edit Content on a variant leaves for the page as that variant, with a banner naming the variant and the experiment and saying whether it is editable. One control returns and reopens the panel on the same experiment's configuration — not the list, not a restarted sequence.
• Results stay full-screen, opened from configuration as they are today.

Two phases, one PR

Phase	Scope
1	The list and the creation entry point. A row's Configure still opens full-screen.
2	Configuration in the panel, including the variant round-trip.

Phase 1 ships usable on its own, and carries the shared plumbing below — phase 2 changes none of it.

The load-bearing work

• The list store stops owning the URL in panel mode. It hydrates from query params, mirrors every view-state change back with Location.go(…{queryParamsHandling:'merge'}) and re-hydrates on popstate. UVE writes its own params with no merge, replacing the whole query string. Two writers on one address: the panel's state gets silently dropped by UVE's next view change. In the panel the view state lives in memory, seeded from pageId/languageId. This is the largest piece of work here, and it is a store change.
• One page-scoped request. The list calls getAllUnfiltered() — every experiment on every site — then resolves each distinct pageId through a bulk htmlpageasset lookup and narrows client-side. The panel calls the existing getAll(pageId) and skips the lookup, because UVE already holds pageAsset(). Three requests plus a full-set payload become one. Same swap point as Experiments Portlet — swap the List to the server-side contract #37007 (server-side list contract).
• The flag read stays fail-closed. Adding it to UVE_FEATURE_FLAGS would invert the default — withFlags maps FEATURE_FLAG_NOT_FOUND to true. The dedicated readExperimentsPortletSwitch stays, and the shell already makes that request for the nav item, so the panel adds none.
• One implementation of each screen, two presentations. The portlet's list and configuration components are adapted to render as both portlet and sidebar — no parallel copy. LIST_TABLE_STYLE's min-width: 81rem (1296px across seven columns) cannot render at panel width, so the layout is what becomes mode-dependent; the state and the rules are shared. The page column drops in panel mode.
• Lazy, without hurting fluidity. The experiments code never enters the UVE editor chunk. A UVE load that never opens the panel fires zero experiments requests. The panel responds to the gesture immediately in a loading state; the page never stutters or reloads while it loads.
• Loading, error, empty and read-only are their own requirements. Because "nothing to show" now moves the editor to creation rather than resting, none of the others may be mistaken for it — a failed load is never an empty page, and a misconfigured analytics app says so.
• No breadcrumb. Inside UVE the trail belongs to the page.

Must not break

• Flag off: the legacy per-page screens and the experiments/{pageId} destination, untouched — and the flag still fails closed on a missing key and on a failed read.
• The variant Edit Content round-trip from Experiments Portlet — UVE integration behind FEATURE_FLAG_EXPERIMENTS_PORTLET + variant Edit Content round-trip #37005 (flagged UVE entry point).
• The full portlet at /experiments, reachable and unfiltered from the main navigation, keeping its table, its columns and its address-backed view state.
• UVE's own URL: the panel writes nothing to it.

Additional Info

Stacked on issue-37005-experiments-uve-integration (#37256), which is still open — that branch is the base, not main.

The specification is the first commit here (specs/37478-uve-experiments-panel/): 47 functional requirements, 16 success criteria, 7 user stories, 13 resolved decisions. Implementation follows in this same PR.

One correction to the issue. #37478 item 5 states that the list route's DotPushPublishEnvironmentsResolver is read by the row menu, and that a panel mounted outside the router would break Push Publish silently. It is not read — dot-experiments-list.component.ts never touches route data, Push Publish opens through DotPushPublishDialogService with only an assetIdentifier, and dot-add-to-bundle fetches its own bundles. That resolver is a prefetch nothing consumes (contrast dot-locales-list.component.ts:75, which does read it). Both actions therefore work from a panel row with no route plumbing. Recorded as decision D9; the issue has been corrected. The health-gate half of item 5 does hold and is covered.

One decision deliberately left open (O1). The panel's width for phase 2. Configuration is a multi-card form laid out for a full-width column and its Variants card is a table, so it does not fit phase 1's width. Two candidates — a wider panel for that screen only (the Edit Content side panel already varies its own width, 80% to 100%), or a single-column reflow of the cards. It blocks nothing in phase 1.

Related: #37007 (server-side list contract, same swap point), #37008 (migration — this makes it simpler: the experiments routed child and the legacy branch of the nav item both go, and no full-page eject survives). Epic: #36763 (Experiments: A/B Testing v2).

Checklist

• Tests
• Translations
• Security Implications Contemplated (add notes if applicable)

[claude]

Claude finished @oidacra's task in 3m 1s —— View job

---

Code Review

Reviewed the phase-1 panel plumbing (store, panel component, EMA shell integration), the constants/i18n, and the tests against origin/main. The store's view-state contract is well-covered by dot-experiments-panel.store.spec.ts, the fail-closed flag read is pinned by a test, and the four message keys used in $titleKey (experiment.container.configuration.title, experiment.container.report.title, experiments.configure.header.new-experiment, plus the new experiments.panel.*) all resolve.

One non-blocking finding:

New Issues

• 🟡 Medium: core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts:~200 — the dynamic await import('@dotcms/portlets/dot-experiments/portlet') in $experimentsPanelEffect has no failure handling. A chunk-load failure (a real, common event after a deploy while an editor session is still open on the old build) rejects the async callback as an unhandled promise rejection: the panel silently never appears, nothing is logged, and the editor gets no feedback — the science gesture just does nothing. @defer (which this replaces) has a @error block for exactly this; the imperative version dropped it. Suggest wrapping the import() in try/catch and surfacing/logging the failure. Fix this →

Nothing else stood out. The open → close → open and close → clear → resume-after-await races in the same effect are correctly guarded by the re-check of isOpen() and experimentsPanelHost.length === 0 after the await, and store ownership at shell scope (rather than on the panel) is sound for surviving the variant round trip.

Note: the review comments/threads on spec.md (empty-state opening, the page-fixed hint, the badge, and the D15/#37005 flag-lifetime contradiction that erickgonzalez asked to resolve before planning) are spec/product decisions, not code defects — they're outside the scope of this code review and are being tracked in those threads.

_{· branch issue-37478-uve-experiments-panel}

done

[erickgonzalez]

Just a nitpick:

D15 contradicts an already-approved spec

D15 says so itself: #37005 SC-002 promises an operator switch on this same flag, and FR-047/FR-048 rest on the opposite reframing. Two approved specs cannot both be right, and FR-048 is a hard requirement built on that reading.
Resolve before planning: amend #37005's SC-002 and get it re-approved, or drop FR-048 from this spec.

[oidacra]

@erickgonzalez on D15 and #37005 — you were right that the spec said this, and the spec was wrong to say it. I went back to #37005's text and there is no contradiction to resolve, so neither of the two resolutions is needed. D15 is corrected instead.

#37005 already hands the flag's removal to #37008. Two places in its own text:

• Scope Note: "This does not retire the old screens or remove the switch — a later migration issue (Experiments Portlet — migration: delete the old per-page experiments UI and remove the flag #37008) does that."
• Relationship to Experiments Portlet — migration: delete the old per-page experiments UI and remove the flag #37008: "Experiments Portlet — migration: delete the old per-page experiments UI and remove the flag #37008 ... retires FEATURE_FLAG_EXPERIMENTS_PORTLET, the switch this work introduces, together with its shipped default and its wiring."

Its US3 is also P2 and scoped to "someone who deliberately opts in". So on the flag's lifetime the two specs agree, and D15 was asserting a disagreement that is not in the text.

SC-002 and FR-048 constrain different things. SC-002 measures how fast a flip takes effect ("under one minute, without a deployment or restart") — it says nothing about how long the flag lives or what may be built behind it. FR-048 constrains what may be built on either side. This spec keeps #37005's own uncached, fail-closed reader unchanged (FR-005): readExperimentsPortletSwitch reads the raw key rather than the memoizing getFeatureFlag, precisely so that a flip lands without a restart. SC-002 therefore goes on being satisfied here, unmodified.

FR-048 also conflicts with nothing in #37005 — its FR-014, "the switch MUST NOT change the behavior of any capability other than the ... entry point", pushes the same way.

What changed in the spec: D15's last paragraph no longer claims a contradiction, and instead records this check with the citations above. The note under US3 that said the reframing "needs reconciling with #37005's own spec" is corrected too. FR-047 and FR-048 stand as they were, and #37005 needs no amendment.

On "resolve before planning" — the plan ran after this verification, and nothing in it turned on the outcome: the reader is #37005's, unchanged, and flag-off remains today's behavior exactly. The only planning artifact that moved was the note recording the check.