Experiments v2 — Part 2: Build the new Experiments UI

[oidacra]

Description

Today experiments exist only inside the page editor: the entry point is the UVE nav item (experiments/${page.identifier}), the list is per-page, and the create form is a drawer with only name and description because the page comes from the route context. A screen listing every experiment on the site has never existed, and there is no way to create an experiment by choosing a page.

This EPIC creates a new site-wide Experiments portlet — list, routed creation/configuration (/experiments/new is the Configure screen with an empty draft), and results — and modernizes the stack (NgRx Signal Store + Events plugin, replacing ComponentStore). Everything new works without the old flow ever breaking: both coexist in the same build, and the one place they overlap (the UVE experiments entry point) is switched by FEATURE_FLAG_EXPERIMENTS, off by default.

Strategy

1. Build the new portlet complete, then migrate and delete the old one. The old per-page UI stays untouched throughout; a final migration issue points UVE at the new flow and deletes the old tree.
2. Additive while both coexist. New code lives in a new site-wide/ subtree of libs/portlets/dot-experiments/portlet/. Only three existing files gain one line each (lib index.ts, app.routes.ts, Language.properties). Deliberate exceptions: the UVE-integration issue (behind the flag) and the migration.
3. Two switches. The feature flag switches UVE entry-point behavior; portlet registration gates the portlet itself — NOT registered for customers in this scope (a flag cannot hide a nav item: /api/v1/menu does not read flags and MenuGuardService bounces unregistered routes). Manual cms_layouts_portlets row on dev/QA for testing.
4. Built against the endpoint that exists today. The list ships with a documented client-side interim; a swap issue replaces it with the server-side contract when Add pagination, sorting, filtering and permission checks to the Experiments list endpoint #36823 lands.
5. One frontend issue per screen, each with its own Jest specs; E2E is a dedicated issue (no experiments E2E exists today, and the migration must not run without that safety net).

Functional parity

The design prototype describes less functionality than the current UI has. Twelve existing behaviors (row actions, inplace variant rename, copy-variant URL, page-lock awareness, scheduling time + duration bounds, results refresh, 10-session gate, promoted state, and more) are ported explicitly — each is an acceptance criterion in the issue that owns its screen. Nothing the current UI does is dropped silently.

Issues

Order	Issue	Area	Depends on
1	#36823 — list endpoint: pagination, sorting, filtering, permissions, enriched rows, counts (already filed; updated)	Backend	—
2	Backend API gaps: archive/restore, PATCH fix, goal operators, variant cap	Backend	—
3	Screen 1 — Portlet base + List	Frontend	— (current endpoint)
4	Screen 2 — Create/Update (/experiments/new + /:id/configuration)	Frontend	2, 3
5	Screen 3 — View Results	Frontend	3
6	UVE integration behind FEATURE_FLAG_EXPERIMENTS + variant Edit Content round-trip	Frontend	3, 4, 5
7	E2E test suite (incl. flag-off regression of the old flow)	Test	3-6
8	Swap the list to the server-side contract	Frontend	#36823, 3
9	Migration: delete the old experiments UI, remove the flag	Frontend	all above

Hard gates

• Add pagination, sorting, filtering and permission checks to the Experiments list endpoint #36823's permission filtering must land before the portlet is ever registered for customers — the current list() ignores its User argument entirely.
• Nothing is deleted (migration) before every ported behavior is verified on the dev/QA instance and the E2E suite is green.
• The PATCH side-effect fix blocks Create/Update: autosave is the creation mechanism, and today every PATCH creates an empty Rule.

Desired Outcome

• A user can list every experiment on a site, and create, configure, start and analyze an experiment end-to-end from the portlet, without opening the page editor.
• With the flag off, the existing UVE experiments flow behaves byte-identically to today at every point of this EPIC's development.
• At completion, a single modern implementation remains (old tree deleted, flag removed), with E2E coverage that experiments have never had.

Target Personas

• Content teams
• Developer teams

Links

• Design: Claude Design project 36aed5a6-ca42-4624-b187-a465a23ce909, file Experiments.dc.html (4 screens + 2 modals)
• Table reference: libs/portlets/dot-tags/ · Store reference: libs/image-editor/ (Signal Store Events)
• Child issues: linked as sub-issues once filed