test(e2e): rewrite the sections spec for V2

Seven tests over the sections and the panels inside them: each section renders with
its title, each panel renders, a panel belongs to the section whose layout references
it, collapsing hides that section's panels and leaves its neighbours alone, expanding
brings them back, a panel exposes its actions menu, and a panel with nothing to show
renders its no-data state rather than an error.

Replaces the V1 file, including its two `test.skip` placeholders — collapse and the
per-section add/delete — and drops its parked-specs.json entry. The collapse one is
covered here for real; adding a panel through the editor belongs with the panel-editor
spec, not this file.

The last test is worth keeping honest about: the fixture's queries target signals a
test stack holds nothing for, so the panels resolve empty. That the empty case reads
as "no data" and not as a failure is exactly the assertion.

tests/e2e/helpers/dashboards-v2.ts

@@ -0,0 +1,311 @@
+import type { APIRequestContext, Locator, Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { authToken } from './dashboards';
+
+// Helpers for the V2 dashboard detail page (`DashboardPageV2`), which now serves
+// /dashboard/:id unconditionally. The V1 helpers in ./dashboards.ts still cover
+// seeding through the v1 API and the list page.
+//
+// Interaction contracts encoded here rather than in each spec:
+//   - a multi-select variable commits on dropdown CLOSE, not per toggle;
+//   - an ALL selection renders as an overlay reading "ALL", not as tags;
+//   - a variable is only settled once its options have arrived.
+
+export const dashboardV2Path = (id: string): string => `/dashboard/${id}`;
+
+/** Perses-style spec the v2 API stores. Only what the specs need is typed. */
+export interface DashboardV2Spec {
+	display: { name: string; description?: string };
+	layouts: unknown[];
+	panels: Record<string, unknown>;
+	variables: unknown[];
+	[key: string]: unknown;
+}
+
+export const SCHEMA_VERSION = 'v6';
+
+/** An empty but valid spec — the base every fixture spreads over. */
+export function emptyV2Spec(name: string): DashboardV2Spec {
+	return { display: { name }, layouts: [], panels: {}, variables: [] };
+}
+
+// ─── Seeding through the v2 API ───────────────────────────────────────────
+//
+// Specs seed the shape they assert against, rather than relying on whatever the
+// v1 -> v2 migration happens to produce or on telemetry that ambient data may or
+// may not contain. Migration output is covered on its own, from the v1 fixtures.
+
+export async function createDashboardV2ViaApi(
+	page: Page,
+	name: string,
+	spec?: Partial<DashboardV2Spec>,
+): Promise<string> {
+	const token = await authToken(page);
+	const res = await page.request.post('/api/v2/dashboards', {
+		data: {
+			name,
+			schemaVersion: SCHEMA_VERSION,
+			tags: [],
+			// `name` wins over any display name the fixture carries, so a fixture can be
+			// seeded twice under two titles and each spec can still find its own.
+			spec: {
+				...emptyV2Spec(name),
+				...spec,
+				display: { ...spec?.display, name },
+			},
+		},
+		headers: { Authorization: `Bearer ${token}` },
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`POST /api/v2/dashboards ${res.status()}: ${await res.text()}`,
+		);
+	}
+	const body = (await res.json()) as { data?: { id?: string } };
+	const id = body.data?.id;
+	if (!id) {
+		throw new Error(
+			`POST /api/v2/dashboards returned no id: ${JSON.stringify(body)}`,
+		);
+	}
+	return id;
+}
+
+export async function getDashboardV2(
+	page: Page,
+	id: string,
+): Promise<{ spec: DashboardV2Spec; [key: string]: unknown }> {
+	const token = await authToken(page);
+	const res = await page.request.get(`/api/v2/dashboards/${id}`, {
+		headers: { Authorization: `Bearer ${token}` },
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`GET /api/v2/dashboards/${id} ${res.status()}: ${await res.text()}`,
+		);
+	}
+	const body = (await res.json()) as {
+		data: { spec: DashboardV2Spec; [key: string]: unknown };
+	};
+	return body.data;
+}
+
+export async function deleteDashboardV2ViaApi(
+	request: APIRequestContext,
+	id: string,
+	token: string,
+): Promise<void> {
+	await request.delete(`/api/v2/dashboards/${id}`, {
+		headers: { Authorization: `Bearer ${token}` },
+	});
+}
+
+// ─── Variables bar ────────────────────────────────────────────────────────
+
+export const variablesBar = (page: Page): Locator =>
+	page.getByTestId('dashboard-variables-bar');
+
+/** The pill for one variable: its name, the control, and (while loading) a spinner. */
+export const variablePill = (page: Page, name: string): Locator =>
+	page.getByTestId(`variable-${name}`);
+
+/** List variables (query / custom / dynamic) — the select control. */
+export const variableControl = (page: Page, name: string): Locator =>
+	page.getByTestId(`variable-select-${name}`);
+
+/** Text variables — a plain input, not a select. */
+export const variableTextInput = (page: Page, name: string): Locator =>
+	page.getByTestId(`variable-input-${name}`);
+
+/**
+ * The bar collapses variables that do not fit into a "+N" button. At the config's
+ * 1280px viewport that starts with the second variable, so a spec asserting on
+ * several pills at once must widen the viewport:
+ *
+ *   test.use({ viewport: WIDE_VIEWPORT });
+ */
+export const WIDE_VIEWPORT = { width: 1920, height: 1080 };
+
+/**
+ * The overflow ("+N") tooltip listing the collapsed variables. `.first()` because the
+ * tooltip primitive renders its content twice — once visible, once as an a11y copy —
+ * so an unscoped locator is a strict-mode violation rather than a missing element.
+ */
+export const hiddenVariablesTooltip = (page: Page): Locator =>
+	page.getByTestId('hidden-variables-tooltip').first();
+
+/** Resolved when the variable's options have arrived and its spinner is gone. */
+export async function awaitVariableSettled(
+	page: Page,
+	name: string,
+): Promise<void> {
+	await expect(variablePill(page, name)).toBeVisible();
+	await expect(page.getByTestId(`variable-loading-${name}`)).toBeHidden();
+}
+
+/**
+ * What a list variable's closed control shows — "ALL" for an ALL selection, else its
+ * tags. Asserts the control exists first: a missing one (wrong name, or a text
+ * variable, which uses {@link variableTextInput}) otherwise hangs until the test
+ * times out with nothing to point at.
+ */
+export async function readVariableSelection(
+	page: Page,
+	name: string,
+): Promise<string> {
+	const pill = variablePill(page, name);
+	await expect(pill).toBeVisible();
+	// The ALL overlay sits in the control's wrapper, as a SIBLING of the element
+	// carrying the testid — scope from the pill, or an ALL selection reads as empty.
+	const allOverlay = pill.locator('.all-text');
+	if ((await allOverlay.count()) > 0 && (await allOverlay.isVisible())) {
+		return (await allOverlay.textContent())?.trim() ?? '';
+	}
+	return (await variableControl(page, name).innerText()).trim();
+}
+
+/** The open option list, whichever control opened it. */
+export const anyDropdown = (page: Page): Locator =>
+	page.locator('.custom-multiselect-dropdown, .custom-select-dropdown');
+
+export async function openVariableDropdown(
+	page: Page,
+	name: string,
+): Promise<void> {
+	await awaitVariableSettled(page, name);
+	await variableControl(page, name).click();
+	await expect(anyDropdown(page)).toBeVisible();
+}
+
+/**
+ * Close the open dropdown, which is what commits a multi-select edit. Pressing
+ * Escape leaves the control focused without re-opening it, unlike clicking away.
+ */
+export async function closeVariableDropdown(page: Page): Promise<void> {
+	// Escape closes it when the control still holds focus, which a row click can move.
+	// Falling back to a click outside covers that, and is what a user does anyway —
+	// either way the close is what commits the edit.
+	await page.keyboard.press('Escape');
+	if (await anyDropdown(page).first().isVisible()) {
+		await page.getByTestId('dashboard-title').click();
+	}
+	await expect(anyDropdown(page).first()).toBeHidden();
+}
+
+const escapeForRegExp = (value: string): string =>
+	value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+/**
+ * One option row in the open dropdown, matched on its label element rather than the
+ * row's accessible name: hovering reveals the Only / Toggle buttons, whose text joins
+ * that name, so a name-based locator stops matching halfway through an interaction.
+ */
+export function optionRow(page: Page, value: string): Locator {
+	const exact = new RegExp(`^${escapeForRegExp(value)}$`);
+	// Multi-select rows carry a `.option-label-text` and, once hovered, Only / Toggle
+	// buttons whose text would break an exact match on the row itself. Single-select
+	// rows have neither — just the label — so each shape needs its own matcher.
+	const multi = page
+		.locator('.custom-multiselect-dropdown .option-item')
+		.filter({ has: page.locator('.option-label-text', { hasText: exact }) });
+	const single = page
+		.locator('.custom-select-dropdown .option-item')
+		.filter({ hasText: exact });
+	return multi.or(single);
+}
+
+export async function pickVariableValues(
+	page: Page,
+	name: string,
+	values: string[],
+): Promise<void> {
+	await openVariableDropdown(page, name);
+	const [first, ...rest] = values;
+
+	// Start from the row's "Only" button rather than its checkbox: an ALL selection
+	// opens with every option checked, so a click would UNcheck the wanted value and
+	// leave the rest selected. "Only" collapses to exactly this option either way,
+	// and the clear icon is deliberately unavailable while the draft is all.
+	// Wait for each target to be visible before acting: the dropdown re-renders as
+	// options resolve, and a click on a row that is still arriving (or has just been
+	// replaced) hangs until the test times out.
+	const firstRow = optionRow(page, first);
+	await expect(firstRow).toBeVisible();
+	await firstRow.hover();
+	const onlyButton = firstRow.locator('.only-btn');
+	await expect(onlyButton).toBeVisible();
+	await onlyButton.click();
+
+	// Additional values then add to that selection. Click the row's checkbox, not the
+	// row: the row body carries no toggle handler, so clicking it leaves the option
+	// unchecked and the value silently absent from the commit.
+	for (const value of rest) {
+		const row = optionRow(page, value);
+		await expect(row).toBeVisible();
+		const checkbox = row.locator('.option-checkbox');
+		if ((await checkbox.count()) > 0) {
+			await checkbox.first().click();
+		} else {
+			await row.click();
+		}
+	}
+	await closeVariableDropdown(page);
+}
+
+/** Type a value the option list does not offer, and commit it. */
+export async function typeVariableValue(
+	page: Page,
+	name: string,
+	value: string,
+): Promise<void> {
+	await openVariableDropdown(page, name);
+	await page.keyboard.type(value);
+	const dropdown = page.locator('.custom-multiselect-dropdown');
+	await dropdown.getByText(value, { exact: true }).first().click();
+	await closeVariableDropdown(page);
+}
+
+// ─── Panels and sections ──────────────────────────────────────────────────
+
+// A section's id is derived from its first panel's key, e.g. panel `p-timeseries` gives
+// section `sec-p-timeseries` — stable for a seeded fixture, since the keys are ours.
+export const sectionId = (firstPanelKey: string): string =>
+	`sec-${firstPanelKey}`;
+
+export const section = (page: Page, firstPanelKey: string): Locator =>
+	page.getByTestId(`dashboard-section-${sectionId(firstPanelKey)}`);
+
+export const sectionToggle = (page: Page, firstPanelKey: string): Locator =>
+	page.getByTestId(`dashboard-section-toggle-${sectionId(firstPanelKey)}`);
+
+export const panelActions = (page: Page, panelKey: string): Locator =>
+	page.getByTestId(`panel-actions-${panelKey}`);
+
+/** A panel by its display name — panels carry no per-panel testid on the card itself. */
+export const panelByTitle = (page: Page, title: string): Locator =>
+	page.getByText(title, { exact: true });
+
+/** Resolved when no panel on the page is still fetching. */
+export async function awaitPanelsSettled(page: Page): Promise<void> {
+	await expect(page.getByTestId('panel-refetching')).toHaveCount(0);
+}
+
+/**
+ * The values currently checked in a multi-select's list, read from the open dropdown —
+ * the closed control shows at most one tag plus a "+N", so it cannot confirm a
+ * multi-value selection on its own. Excludes the aggregate ALL row.
+ */
+export async function readCheckedOptions(
+	page: Page,
+	name: string,
+): Promise<string[]> {
+	await openVariableDropdown(page, name);
+	const labels = await page
+		.locator(
+			'.custom-multiselect-dropdown .option-item[aria-selected="true"]:not(.all-option) .option-label-text',
+		)
+		.allInnerTexts();
+	await closeVariableDropdown(page);
+	return labels.map((label) => label.trim());
+}

tests/e2e/package.json

@@ -21,6 +21,7 @@
     "fmt:check": "oxfmt --check .",
     "lint": "oxlint .",
     "lint:fix": "oxlint . --fix",
+    "guard:specs": "node scripts/guard-specs.mjs",
     "typecheck": "tsc --noEmit"
   },
   "keywords": [

tests/e2e/parked-specs.json

@@ -0,0 +1,20 @@
+{
+	"$comment": "Specs not currently running, and why. This is the ONLY place a spec may be excluded from the suite: `playwright.config.ts` feeds `specs` to `testIgnore`, and `pnpm guard:specs` fails if any spec that is NOT listed here contains a skipped, fixme'd or .only test. So a spec is either running and complete, or parked here with a reason — nothing rots quietly in between. Every entry is removed by the PR that migrates it; the list only shrinks.",
+	"specs": [
+		"**/tests/dashboards/list.spec.ts",
+		"**/tests/dashboards/details/03-viewing.spec.ts",
+		"**/tests/dashboards/details/21-panel-actions.spec.ts",
+		"**/tests/dashboards/details/35-add-panel.spec.ts",
+		"**/tests/dashboards/details/44-edit-panel.spec.ts",
+		"**/tests/dashboards/details/56-time-range.spec.ts",
+		"**/tests/dashboards/details/67-variables.spec.ts",
+		"**/tests/dashboards/details/78-edit-mode.spec.ts",
+		"**/tests/dashboards/details/87-configure.spec.ts",
+		"**/tests/dashboards/details/95-edge-cases.spec.ts",
+		"**/tests/trace-details/preview-fields.spec.ts"
+	],
+	"reasons": {
+		"**/tests/dashboards/**": "Written against V1 dashboard behaviour; the V1 -> V2 migration changed what they assert. Being rewritten area by area — see the E0-E8 plan.",
+		"**/tests/trace-details/preview-fields.spec.ts": "Entirely `describe.skip` since it was added: the hover card's preview field needs seeded telemetry the suite does not provide yet."
+	}
+}

tests/e2e/playwright.config.ts

@@ -2,22 +2,23 @@ import { defineConfig, devices } from '@playwright/test';
 import dotenv from 'dotenv';
 import path from 'path';
 
-// .env holds user-provided defaults (staging creds).
-// .env.local is written by tests/e2e/bootstrap/setup.py when the pytest
-// lifecycle brings the backend up locally; override=true so local-backend
-// coordinates win over any stale .env values. Subprocess-injected env
-// (e.g. when pytest shells out to `pnpm test`) still takes priority —
-// dotenv doesn't touch vars that are already set in process.env.
+import parkedSpecs from './parked-specs.json';
+
+// Precedence: real env > .env.local > .env. dotenv never overwrites a var that is
+// already set, so loading in that order gives local-backend coordinates (.env.local,
+// written by bootstrap/setup.py) priority over the staging defaults in .env, while an
+// explicitly exported var still wins over both — which is what lets a run be pointed
+// at another environment without editing a generated file.
+dotenv.config({ path: path.resolve(__dirname, '.env.local') });
 dotenv.config({ path: path.resolve(__dirname, '.env') });
-dotenv.config({ path: path.resolve(__dirname, '.env.local'), override: true });
 
 export default defineConfig({
 	testDir: './tests',
 
-	// Temporarily excluded: the V1 -> V2 dashboard migration changes the
-	// behaviour the dashboards specs assert against, so they fail as written.
-	// Remove this once they are updated for the V2 dashboard.
-	testIgnore: ['**/tests/dashboards/**'],
+	// Parked specs, listed one by one with a reason in parked-specs.json — not a
+	// blanket glob, so nothing new can land inside an excluded directory unnoticed.
+	// `pnpm guard:specs` keeps this list and the suite honest.
+	testIgnore: parkedSpecs.specs,
 
 	// All Playwright output lands under artifacts/. One subdir per reporter
 	// plus results/ for per-test artifacts (traces/screenshots/videos).

tests/e2e/scripts/guard-specs.mjs

@@ -0,0 +1,91 @@
+// Keeps the suite honest: a spec is either running and complete, or parked in
+// parked-specs.json with a reason. Fails on a skipped/fixme'd/only test in a spec that
+// is not parked, and on a parked entry that no longer matches anything.
+//
+// Run: pnpm guard:specs
+
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const parked = JSON.parse(
+	readFileSync(join(root, 'parked-specs.json'), 'utf8'),
+);
+
+/** Every *.spec.ts under tests/, repo-relative with forward slashes. */
+function specFiles(dir) {
+	return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+		const full = join(dir, entry.name);
+		if (entry.isDirectory()) {
+			return specFiles(full);
+		}
+		return entry.name.endsWith('.spec.ts') ? [full] : [];
+	});
+}
+
+/** A parked glob (`**​/tests/x/y.spec.ts`) matched against an absolute path. */
+function matchesGlob(glob, absolutePath) {
+	const ANY_DIRS = '\u0000';
+	const pattern = glob
+		.replace(/[.+^${}()|[\]\\]/g, '\\$&')
+		.replace(/\*\*\//g, ANY_DIRS)
+		// Single `*` never crosses a path separator; do this before expanding ANY_DIRS,
+		// whose replacement itself contains a `*`.
+		.replace(/\*/g, '[^/]*')
+		.split(ANY_DIRS)
+		.join('(?:.*/)?');
+	return new RegExp(`^${pattern}$`).test(absolutePath.split('\\').join('/'));
+}
+
+// Declaration form only — `test.skip(condition, reason)` inside a test body is a
+// legitimate runtime guard, not a parked test.
+const OFFENDERS = [
+	{ label: 'test.skip', re: /(?<![\w.])test\.skip\(\s*['"`]/g },
+	{ label: 'test.fixme', re: /(?<![\w.])test\.fixme\(\s*['"`]/g },
+	{ label: 'describe.skip', re: /describe\.skip\(/g },
+	{ label: 'describe.fixme', re: /describe\.fixme\(/g },
+	{ label: 'test.only', re: /(?<![\w.])test\.only\(/g },
+	{ label: 'describe.only', re: /describe\.only\(/g },
+];
+
+const testsDir = join(root, 'tests');
+const files = statSync(testsDir, { throwIfNoEntry: false })
+	? specFiles(testsDir)
+	: [];
+const failures = [];
+
+for (const file of files) {
+	if (parked.specs.some((glob) => matchesGlob(glob, file))) {
+		continue;
+	}
+	const source = readFileSync(file, 'utf8');
+	for (const { label, re } of OFFENDERS) {
+		const hits = source.match(re);
+		if (hits) {
+			failures.push(
+				`${relative(root, file)}: ${hits.length} × ${label} — finish it, or park the spec in parked-specs.json with a reason`,
+			);
+		}
+	}
+}
+
+for (const glob of parked.specs) {
+	if (!files.some((file) => matchesGlob(glob, file))) {
+		failures.push(
+			`parked-specs.json: "${glob}" matches no spec — drop the stale entry`,
+		);
+	}
+}
+
+if (failures.length > 0) {
+	console.error(
+		`\nguard:specs failed\n\n${failures.map((f) => `  ✗ ${f}`).join('\n')}\n`,
+	);
+	process.exit(1);
+}
+
+// eslint-disable-next-line no-console
+console.log(
+	`guard:specs ok — ${files.length - parked.specs.length}/${files.length} specs running, ${parked.specs.length} parked`,
+);

tests/e2e/testdata/sections-dashboard-v2.json

@@ -0,0 +1,363 @@
+{
+	"$comment": "Three grid sections with two panels each, trimmed from a real V2 dashboard so the structure (sections, panels, layout refs, collapse state, plugin kinds) is faithful without depending on any particular telemetry. Panel queries target signals this stack may hold nothing for — that is fine: these specs assert on structure and chrome, never on chart values. Variables are text + custom, whose options come from the definition.",
+	"spec": {
+		"display": { "name": "sections-v2", "description": "" },
+		"variables": [
+			{
+				"kind": "TextVariable",
+				"spec": {
+					"name": "textbox.environment",
+					"display": { "name": "textbox.environment", "description": "" },
+					"value": "prod",
+					"constant": false
+				}
+			},
+			{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "custom.service.name",
+					"display": { "name": "custom.service.name", "description": "" },
+					"allowMultiple": true,
+					"allowAllValue": true,
+					"sort": "alphabetical-asc",
+					"plugin": {
+						"kind": "signoz/CustomVariable",
+						"spec": { "customValue": "checkout,payments,cart" }
+					}
+				}
+			}
+		],
+		"panels": {
+			"p-timeseries": {
+				"kind": "Panel",
+				"spec": {
+					"display": { "name": "Requests over time", "description": "" },
+					"plugin": {
+						"kind": "signoz/TimeSeriesPanel",
+						"spec": {
+							"visualization": { "timePreference": "global_time", "fillSpans": false },
+							"formatting": { "unit": "none", "decimalPrecision": "2" },
+							"legend": { "position": "bottom", "mode": "list", "customColors": null }
+						}
+					},
+					"queries": [
+						{
+							"kind": "time_series",
+							"spec": {
+								"name": "A",
+								"plugin": {
+									"kind": "signoz/BuilderQuery",
+									"spec": {
+										"name": "A",
+										"signal": "logs",
+										"source": "",
+										"aggregations": [{ "expression": "count()" }],
+										"disabled": false,
+										"filter": { "expression": "service.name IN $custom.service.name" },
+										"groupBy": [
+											{
+												"name": "service.name",
+												"signal": "",
+												"fieldContext": "resource",
+												"fieldDataType": "string"
+											}
+										],
+										"order": [],
+										"having": { "expression": "" },
+										"functions": [],
+										"legend": ""
+									}
+								}
+							}
+						}
+					],
+					"links": []
+				}
+			},
+			"p-table": {
+				"kind": "Panel",
+				"spec": {
+					"display": { "name": "Requests by pod", "description": "" },
+					"plugin": {
+						"kind": "signoz/TablePanel",
+						"spec": {
+							"visualization": { "timePreference": "global_time" },
+							"formatting": { "columnUnits": { "A": "" }, "decimalPrecision": "2" },
+							"thresholds": null
+						}
+					},
+					"queries": [
+						{
+							"kind": "scalar",
+							"spec": {
+								"name": "A",
+								"plugin": {
+									"kind": "signoz/BuilderQuery",
+									"spec": {
+										"name": "A",
+										"signal": "logs",
+										"source": "",
+										"aggregations": [{ "expression": "count()" }],
+										"disabled": false,
+										"filter": { "expression": "service.name IN $custom.service.name" },
+										"groupBy": [
+											{
+												"name": "k8s.pod.name",
+												"signal": "",
+												"fieldContext": "resource",
+												"fieldDataType": "string"
+											}
+										],
+										"order": [],
+										"having": { "expression": "" },
+										"functions": [],
+										"legend": ""
+									}
+								}
+							}
+						}
+					],
+					"links": []
+				}
+			},
+			"p-promql": {
+				"kind": "Panel",
+				"spec": {
+					"display": { "name": "Duration rate (PromQL)", "description": "" },
+					"plugin": {
+						"kind": "signoz/TimeSeriesPanel",
+						"spec": {
+							"visualization": { "timePreference": "global_time", "fillSpans": false },
+							"formatting": { "unit": "none", "decimalPrecision": "2" },
+							"legend": { "position": "bottom", "mode": "list", "customColors": null }
+						}
+					},
+					"queries": [
+						{
+							"kind": "time_series",
+							"spec": {
+								"name": "A",
+								"plugin": {
+									"kind": "signoz/PromQLQuery",
+									"spec": {
+										"name": "A",
+										"query": "sum by (\"service.name\") (rate({\"http.server.duration.count\"}[5m]))",
+										"disabled": false,
+										"step": 0,
+										"stats": false,
+										"legend": ""
+									}
+								}
+							}
+						}
+					],
+					"links": []
+				}
+			},
+			"p-number": {
+				"kind": "Panel",
+				"spec": {
+					"display": { "name": "Total requests", "description": "" },
+					"plugin": {
+						"kind": "signoz/NumberPanel",
+						"spec": {
+							"visualization": { "timePreference": "global_time" },
+							"formatting": { "unit": "none", "decimalPrecision": "2" },
+							"thresholds": null
+						}
+					},
+					"queries": [
+						{
+							"kind": "scalar",
+							"spec": {
+								"name": "A",
+								"plugin": {
+									"kind": "signoz/PromQLQuery",
+									"spec": {
+										"name": "A",
+										"query": "sum(rate({\"http.server.duration.count\"}[5m]))",
+										"disabled": false,
+										"step": 0,
+										"stats": false,
+										"legend": ""
+									}
+								}
+							}
+						}
+					],
+					"links": []
+				}
+			},
+			"p-pie": {
+				"kind": "Panel",
+				"spec": {
+					"display": { "name": "Split by environment", "description": "" },
+					"plugin": {
+						"kind": "signoz/PieChartPanel",
+						"spec": {
+							"visualization": { "timePreference": "global_time" },
+							"formatting": { "unit": "none", "decimalPrecision": "2" },
+							"legend": { "position": "bottom", "mode": "list", "customColors": null }
+						}
+					},
+					"queries": [
+						{
+							"kind": "scalar",
+							"spec": {
+								"name": "A",
+								"plugin": {
+									"kind": "signoz/BuilderQuery",
+									"spec": {
+										"name": "A",
+										"signal": "logs",
+										"source": "",
+										"aggregations": [{ "expression": "count()" }],
+										"disabled": false,
+										"filter": {
+											"expression": "deployment.environment = $textbox.environment"
+										},
+										"groupBy": [
+											{
+												"name": "service.name",
+												"signal": "",
+												"fieldContext": "resource",
+												"fieldDataType": "string"
+											}
+										],
+										"order": [],
+										"having": { "expression": "" },
+										"functions": [],
+										"legend": ""
+									}
+								}
+							}
+						}
+					],
+					"links": []
+				}
+			},
+			"p-bar": {
+				"kind": "Panel",
+				"spec": {
+					"display": { "name": "Stacked by pod", "description": "" },
+					"plugin": {
+						"kind": "signoz/BarChartPanel",
+						"spec": {
+							"visualization": {
+								"timePreference": "global_time",
+								"fillSpans": false,
+								"stackedBarChart": true
+							},
+							"formatting": { "unit": "none", "decimalPrecision": "2" },
+							"legend": { "position": "bottom", "mode": "list", "customColors": null },
+							"thresholds": null
+						}
+					},
+					"queries": [
+						{
+							"kind": "time_series",
+							"spec": {
+								"name": "A",
+								"plugin": {
+									"kind": "signoz/BuilderQuery",
+									"spec": {
+										"name": "A",
+										"signal": "logs",
+										"source": "",
+										"aggregations": [{ "expression": "count()" }],
+										"disabled": false,
+										"filter": { "expression": "" },
+										"groupBy": [
+											{
+												"name": "k8s.pod.name",
+												"signal": "",
+												"fieldContext": "resource",
+												"fieldDataType": "string"
+											}
+										],
+										"order": [],
+										"having": { "expression": "" },
+										"functions": [],
+										"legend": ""
+									}
+								}
+							}
+						}
+					],
+					"links": []
+				}
+			}
+		},
+		"layouts": [
+			{
+				"kind": "Grid",
+				"spec": {
+					"display": { "title": "Query Builder", "collapse": { "open": true } },
+					"items": [
+						{
+							"x": 0,
+							"y": 0,
+							"width": 6,
+							"height": 6,
+							"content": { "$ref": "#/spec/panels/p-timeseries" }
+						},
+						{
+							"x": 6,
+							"y": 0,
+							"width": 6,
+							"height": 6,
+							"content": { "$ref": "#/spec/panels/p-table" }
+						}
+					]
+				}
+			},
+			{
+				"kind": "Grid",
+				"spec": {
+					"display": { "title": "PromQL", "collapse": { "open": true } },
+					"items": [
+						{
+							"x": 0,
+							"y": 0,
+							"width": 6,
+							"height": 6,
+							"content": { "$ref": "#/spec/panels/p-promql" }
+						},
+						{
+							"x": 6,
+							"y": 0,
+							"width": 6,
+							"height": 6,
+							"content": { "$ref": "#/spec/panels/p-number" }
+						}
+					]
+				}
+			},
+			{
+				"kind": "Grid",
+				"spec": {
+					"display": { "title": "Mixed", "collapse": { "open": true } },
+					"items": [
+						{
+							"x": 0,
+							"y": 0,
+							"width": 6,
+							"height": 6,
+							"content": { "$ref": "#/spec/panels/p-pie" }
+						},
+						{
+							"x": 6,
+							"y": 0,
+							"width": 6,
+							"height": 6,
+							"content": { "$ref": "#/spec/panels/p-bar" }
+						}
+					]
+				}
+			}
+		],
+		"duration": "",
+		"refreshInterval": "",
+		"links": []
+	}
+}

tests/e2e/testdata/variables-dashboard-v2.json

@@ -0,0 +1,48 @@
+{
+	"$comment": "V2 (Perses-shape) dashboard spec seeded through POST /api/v2/dashboards. Only text and custom variables, so it resolves without telemetry: option lists are fixed by the definition, which keeps assertions on them deterministic. Query and dynamic variables are seeded per-spec alongside the telemetry they need.",
+	"spec": {
+		"display": { "name": "variables-v2", "description": "" },
+		"layouts": [],
+		"panels": {},
+		"variables": [
+			{
+				"kind": "TextVariable",
+				"spec": {
+					"name": "tb_env",
+					"display": { "name": "tb_env", "description": "Free-text environment" },
+					"value": "prod",
+					"constant": false
+				}
+			},
+			{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "cu_service",
+					"display": { "name": "cu_service", "description": "Multi-select with ALL" },
+					"allowMultiple": true,
+					"allowAllValue": true,
+					"sort": "none",
+					"plugin": {
+						"kind": "signoz/CustomVariable",
+						"spec": { "customValue": "checkout,payments,cart" }
+					}
+				}
+			},
+			{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "cu_region",
+					"display": { "name": "cu_region", "description": "Single-select with a default" },
+					"allowMultiple": false,
+					"allowAllValue": false,
+					"sort": "none",
+					"defaultValue": "eu-west",
+					"plugin": {
+						"kind": "signoz/CustomVariable",
+						"spec": { "customValue": "us-east,eu-west" }
+					}
+				}
+			}
+		]
+	}
+}

tests/e2e/tests/dashboards/details/01-smoke.spec.ts

@@ -0,0 +1,110 @@
+import { expect, test } from '../../../fixtures/auth';
+import { newAdminContext } from '../../../helpers/auth';
+import { authToken } from '../../../helpers/dashboards';
+import {
+	createDashboardV2ViaApi,
+	dashboardV2Path,
+	deleteDashboardV2ViaApi,
+	pickVariableValues,
+	readVariableSelection,
+	variablePill,
+	variablesBar,
+	variableTextInput,
+	WIDE_VIEWPORT,
+} from '../../../helpers/dashboards-v2';
+import customVariables from '../../../testdata/variables-dashboard-v2.json';
+
+// The foundation the other dashboards specs build on: seeding a V2 spec through the
+// v2 API, opening it, and driving the variables bar. Everything here is deterministic
+// — custom and text variables need no telemetry, so this spec cannot go red because
+// of what the stack happens to hold.
+
+test.use({ viewport: WIDE_VIEWPORT });
+
+const seedIds = new Set<string>();
+let dashboardId = '';
+
+// Per worker: `beforeAll` runs once in each, and the v2 API rejects a duplicate name.
+const SUITE_TITLE = `detail-smoke-suite-${process.env.TEST_WORKER_INDEX ?? '0'}`;
+
+test.beforeAll(async ({ browser }) => {
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		dashboardId = await createDashboardV2ViaApi(
+			page,
+			SUITE_TITLE,
+			customVariables.spec,
+		);
+		seedIds.add(dashboardId);
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.afterAll(async ({ browser }) => {
+	if (seedIds.size === 0) {
+		return;
+	}
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const token = await authToken(page);
+		for (const id of seedIds) {
+			await deleteDashboardV2ViaApi(ctx.request, id, token);
+			seedIds.delete(id);
+		}
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.describe('Dashboard detail — V2 foundation', () => {
+	test('TC-01 a seeded V2 dashboard opens with its title and variables bar', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(dashboardV2Path(dashboardId));
+
+		await expect(page.getByTestId('dashboard-title')).toContainText(SUITE_TITLE);
+		await expect(variablesBar(page)).toBeVisible();
+		for (const name of ['tb_env', 'cu_service', 'cu_region']) {
+			await expect(variablePill(page, name)).toBeVisible();
+		}
+	});
+
+	test('TC-02 a text variable renders the value it was seeded with', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(dashboardV2Path(dashboardId));
+
+		await expect(variableTextInput(page, 'tb_env')).toHaveValue('prod');
+	});
+
+	test('TC-03 an ALL-enabled multi-select reads ALL until a value is picked', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(dashboardV2Path(dashboardId));
+
+		// Seeded with allowAllValue and no default, so it resolves to ALL.
+		await expect
+			.poll(() => readVariableSelection(page, 'cu_service'))
+			.toBe('ALL');
+
+		// A multi-select commits when the dropdown closes, not per toggle.
+		await pickVariableValues(page, 'cu_service', ['checkout']);
+
+		await expect
+			.poll(() => readVariableSelection(page, 'cu_service'))
+			.toContain('checkout');
+	});
+
+	test('TC-04 a single-select renders its configured default', async ({
+		authedPage: page,
+	}) => {
+		await page.goto(dashboardV2Path(dashboardId));
+
+		await expect
+			.poll(() => readVariableSelection(page, 'cu_region'))
+			.toContain('eu-west');
+	});
+});

tests/e2e/tests/dashboards/details/12-sections.spec.ts

@@ -2,538 +2,156 @@ import type { Page } from '@playwright/test';
 
 import { expect, test } from '../../../fixtures/auth';
 import { newAdminContext } from '../../../helpers/auth';
+import { authToken } from '../../../helpers/dashboards';
 import {
-	authToken,
-	createApmMetricsDashboardViaApi,
-	deleteDashboardViaApi,
-} from '../../../helpers/dashboards';
+	createDashboardV2ViaApi,
+	dashboardV2Path,
+	deleteDashboardV2ViaApi,
+	panelActions,
+	panelByTitle,
+	section,
+	sectionToggle,
+	variablesBar,
+	WIDE_VIEWPORT,
+} from '../../../helpers/dashboards-v2';
+import sectionsFixture from '../../../testdata/sections-dashboard-v2.json';
 
-// ─── Per-test seed lifecycle ────────────────────────────────────────────
-//
-// Each test gets its own freshly-seeded APM Metrics dashboard (4 sections,
-// 16 panels — including the duplicate-named "Overview" sections, which the
-// fixture intentionally ships). Per-test seeding eliminates the "previous
-// test left the dashboard in a collapsed/renamed state" class of CI flakes
-// that bit us repeatedly with `beforeAll`-shared seed: it is no longer
-// possible for one test's restore PUT to race the next test's GET, because
-// the next test does not see the previous test's dashboard at all.
-//
-// `serial` mode is no longer required for correctness (tests are hermetic)
-// but we keep parallel runs intra-file because seed creation is the
-// per-test cost — running them concurrently inside the worker would just
-// pile up more concurrent dashboards without helping.
-let apmDashboardId: string;
+// Sections and the panels inside them, seeded from a spec trimmed out of a real V2
+// dashboard: three grid sections, six panels across six plugin kinds. Assertions are
+// structural — titles, membership, collapse — never chart values, so nothing here
+// depends on the stack holding telemetry.
 
-test.beforeEach(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		apmDashboardId = await createApmMetricsDashboardViaApi(page);
-	} finally {
-		await ctx.close();
-	}
-});
+test.use({ viewport: WIDE_VIEWPORT });
 
-test.afterEach(async ({ browser }) => {
-	if (!apmDashboardId) {
+const seedIds = new Set<string>();
+
+const SECTIONS = [
+	{ title: 'Query Builder', firstPanel: 'p-timeseries' },
+	{ title: 'PromQL', firstPanel: 'p-promql' },
+	{ title: 'Mixed', firstPanel: 'p-pie' },
+];
+const PANEL_TITLES = [
+	'Requests over time',
+	'Requests by pod',
+	'Duration rate (PromQL)',
+	'Total requests',
+	'Split by environment',
+	'Stacked by pod',
+];
+
+async function seedAndOpen(page: Page, label: string): Promise<string> {
+	const id = await createDashboardV2ViaApi(
+		page,
+		`detail-sections-${label}-${process.env.TEST_WORKER_INDEX ?? '0'}`,
+		sectionsFixture.spec,
+	);
+	seedIds.add(id);
+	await page.goto(dashboardV2Path(id));
+	await expect(variablesBar(page)).toBeVisible();
+	return id;
+}
+
+test.afterAll(async ({ browser }) => {
+	if (seedIds.size === 0) {
 		return;
 	}
 	const ctx = await newAdminContext(browser);
 	const page = await ctx.newPage();
 	try {
 		const token = await authToken(page);
-		await deleteDashboardViaApi(ctx.request, apmDashboardId, token);
-	} catch {
-		// Best-effort cleanup — a failing delete should not mask test
-		// failures the user actually needs to see.
+		for (const id of seedIds) {
+			await deleteDashboardV2ViaApi(ctx.request, id, token);
+			seedIds.delete(id);
+		}
 	} finally {
-		apmDashboardId = '';
 		await ctx.close();
 	}
 });
 
-/**
- * Resolve the `.row-panel` container for a section by traversing up from its
- * title text. The fixture ships two sections both literally named "Overview"
- * — pass `index` to disambiguate. Two `..` hops reach `.row-panel`, which
- * holds both the chevron and the settings-icon for that row.
- */
-function sectionRow(
-	page: Page,
-	name: string | RegExp,
-	index = 0,
-): ReturnType<Page['locator']> {
-	return page
-		.getByText(name, { exact: typeof name === 'string' })
-		.nth(index)
-		.locator('..')
-		.locator('..');
-}
+test.describe('Dashboard detail — sections and panels', () => {
+	test('TC-01 every section in the spec renders with its title', async ({
+		authedPage: page,
+	}) => {
+		await seedAndOpen(page, 'render');
 
-async function gotoApmDashboard(page: Page): Promise<void> {
-	await page.goto(`/dashboard/${apmDashboardId}`);
-	await page
-		.getByRole('button', { name: /dashboard-icon APM Metrics/ })
-		.waitFor({ state: 'visible' });
-
-	// `GridCardLayout`'s auto-save `useEffect` (line 226 of the source) is
-	// gated on `!isDashboardFetching` but `isDashboardFetching` is NOT in the
-	// effect's dep array. Concretely: if a chevron is clicked while any
-	// `[REACT_QUERY_KEY.DASHBOARD_BY_ID]` query is in flight, the effect runs
-	// once for the new `dashboardLayout`, sees `isDashboardFetching=true`, and
-	// returns early — and never re-runs when the GET later completes, because
-	// `dashboardLayout` didn't change again. The PUT is *never* fired and
-	// `toggleSectionAndWaitForPut` blocks until the 30 s test timeout.
-	//
-	// Wait until the in-flight dashboard GETs settle so the effect's gate
-	// evaluates to `false` on the next click. We assert this two ways: a panel
-	// from each visible section must render (proves data is hydrated), and
-	// `Latency` (the first panel of the first Overview section) must paint.
-	await expect(page.getByText('Latency', { exact: true }).first()).toBeVisible({
-		timeout: 20_000,
-	});
-}
-
-/**
- * Click `.row-icon` (chevron) on a section row. The collapse/expand state is
- * driven by React local state — `setDashboardLayout` updates synchronously
- * and the (suffixed / unsuffixed) title appears on the next render. We do
- * NOT wait for the auto-save PUT here: it's gated on `!isDashboardFetching`
- * in `GridCardLayout.tsx` and can be skipped entirely under CI load.
- * Persistence does not matter because each test seeds a fresh dashboard.
- *
- * `dispatchEvent('click')` — under CI viewport the expanded sidenav's
- * `nav-item-data` subtree intercepts pointer events at the chevron's
- * position (verified in CI run #26162502354). `.click({ force: true })`
- * still lands the event at the visual centre and is swallowed by the
- * overlay; dispatching the click directly on the SVG node bypasses hit
- * testing entirely and triggers React's `onClick` handler.
- */
-async function toggleSection(row: ReturnType<Page['locator']>): Promise<void> {
-	const chevron = row.locator('.row-icon');
-	await chevron.scrollIntoViewIfNeeded();
-	await expect(chevron).toBeVisible();
-
-	const page = chevron.page();
-	// Register a PUT listener BEFORE the click. The auto-save effect in
-	// `GridCardLayout` fires a PUT when `!isDashboardFetching` — if the PUT
-	// arrives, its `onSuccess` triggers a brief loading-state re-render that
-	// unmounts every `.row-panel`. The next toggle's chevron lookup either
-	// misses (locator times out) or grabs a transient node that detaches
-	// during scroll. Sequencing: dispatch click → await PUT (3 s short
-	// timeout in case auto-save was gated) → wait for the loading spinner
-	// to be absent.
-	const putSettled = page
-		.waitForResponse(
-			(r) => r.request().method() === 'PUT' && /\/dashboards\//.test(r.url()),
-			{ timeout: 3_000 },
-		)
-		.catch(() => null);
-
-	await chevron.dispatchEvent('click');
-	await putSettled;
-	await expect(page.getByAltText('loading')).toHaveCount(0, {
-		timeout: 20_000,
-	});
-}
-
-// Poll a section to the target collapsed/expanded state, re-clicking if a
-// toggle is dropped under CI load. `name` has no regex metacharacters.
-async function setSectionCollapsed(
-	page: Page,
-	name: string,
-	collapsed: boolean,
-): Promise<void> {
-	const collapsedTitle = new RegExp(`^${name} \\(\\d+ widgets?\\)$`);
-	await expect(async () => {
-		const alreadyCollapsed = (await page.getByText(collapsedTitle).count()) > 0;
-		if (alreadyCollapsed === collapsed) {
-			return;
+		for (const { title, firstPanel } of SECTIONS) {
+			await expect(section(page, firstPanel)).toBeVisible();
+			await expect(section(page, firstPanel)).toContainText(title);
 		}
-		await toggleSection(
-			sectionRow(page, alreadyCollapsed ? collapsedTitle : name),
-		);
-		expect((await page.getByText(collapsedTitle).count()) > 0).toBe(collapsed);
-	}).toPass({ timeout: 30_000 });
-}
-
-/**
- * Click the settings (⋮) icon on a section header, bypassing the sidenav's
- * pointer-event interception via `dispatchEvent('click')` (same root cause
- * as `toggleSectionAndWaitForPut`). The settings popover (Rename / New Panel
- * / Remove Section) lives on the LEFT of the row at the same x-coordinate
- * as the chevron, so it suffers the same overlap.
- */
-async function clickSectionSettings(
-	row: ReturnType<Page['locator']>,
-): Promise<void> {
-	const icon = row.locator('.settings-icon');
-	await icon.scrollIntoViewIfNeeded();
-	await expect(icon).toBeVisible();
-	await icon.dispatchEvent('click');
-}
-
-test.describe('Dashboard Detail — Sections', () => {
-	// ─── Collapse / expand chevron and widget-count suffix ───────────────────
-
-	// TODO(e2e): re-enable once CI consistently passes. Passes locally
-	// (including `STRESS=1 CI=1`) but flakes on GitHub Linux runner — the
-	// chevron click intermittently fails to land its auto-save PUT despite
-	// `dispatchEvent('click')` + `Latency` panel hydration gate. Suspect
-	// remaining race lives in `GridCardLayout`'s auto-save `useEffect` not
-	// listing `isDashboardFetching` in its deps. See CI-HARDENING.md item 5.
-	test.skip('TC-01 collapsing a section hides panels and shows widget count', async ({
-		authedPage: page,
-	}) => {
-		await gotoApmDashboard(page);
-
-		// "DB Metrics" is the third section in the APM fixture and lives below
-		// the fold on the 1280×720 CI viewport. Scroll its title into view and
-		// wait for visibility so the 14×14 chevron is actionable.
-		const dbMetricsTitle = page.getByText('DB Metrics', { exact: true }).first();
-		await dbMetricsTitle.scrollIntoViewIfNeeded();
-		await expect(dbMetricsTitle).toBeVisible();
-		await toggleSection(sectionRow(page, 'DB Metrics'));
-
-		// After collapse the section title is rewritten to include the count
-		// suffix; assert with a regex so the test is robust to widget-count
-		// drift in the fixture.
-		await expect(
-			page.getByText(/^DB Metrics \(\d+ widgets?\)$/).first(),
-		).toBeVisible();
-
-		// Restore: chevron-down is the row-icon variant rendered for collapsed
-		// sections. Re-resolve via the new (suffixed) title.
-		await toggleSection(sectionRow(page, /^DB Metrics \(\d+ widgets?\)$/));
-		await expect(page.getByText(/^DB Metrics \(\d+ widgets?\)$/)).toHaveCount(0);
 	});
 
-	test('TC-02 widget count matches number of panels visible before collapse', async ({
+	test('TC-02 every panel in the spec renders with its title', async ({
 		authedPage: page,
 	}) => {
-		await gotoApmDashboard(page);
+		await seedAndOpen(page, 'panels');
 
-		// The first Overview section in the APM fixture holds these four
-		// panels — they're our ground truth for the count assertion below.
-		await expect(
-			page.getByText('Latency', { exact: true }).first(),
-		).toBeVisible();
-		await expect(
-			page.getByText('Request rate', { exact: true }).first(),
-		).toBeVisible();
-		await expect(
-			page.getByText('Error percentage', { exact: true }).first(),
-		).toBeVisible();
-		await expect(
-			page.getByText('Top operations', { exact: true }).first(),
-		).toBeVisible();
-
-		await toggleSection(sectionRow(page, 'Overview', 0));
-
-		await expect(
-			page.getByText('Overview (4 widgets)', { exact: true }).first(),
-		).toBeVisible();
-
-		// Restore.
-		await toggleSection(sectionRow(page, 'Overview (4 widgets)'));
-		await expect(
-			page.getByText('Overview (4 widgets)', { exact: true }),
-		).toHaveCount(0);
+		for (const title of PANEL_TITLES) {
+			await expect(panelByTitle(page, title).first()).toBeVisible();
+		}
 	});
 
-	test('TC-03 expanding restores panels', async ({ authedPage: page }) => {
-		await gotoApmDashboard(page);
-
-		// Collapse "DB Metrics" instead of the first Overview — its widgets
-		// have unique titles ("DB Calls RPS" / "Database Calls Avg Duration")
-		// so collapse/expand transitions can be asserted without colliding
-		// with the duplicate-titled panels in the two Overview sections.
-		// "DB Metrics" lives further down the canvas; scroll into view first
-		// so the panels actually mount (the canvas virtualises off-screen).
-		const dbCalls = page.getByText('DB Calls RPS', { exact: true }).first();
-		await dbCalls.scrollIntoViewIfNeeded();
-		await expect(dbCalls).toBeVisible({ timeout: 15_000 });
-		await toggleSection(sectionRow(page, 'DB Metrics'));
-		await expect(
-			page.getByText(/^DB Metrics \(\d+ widgets?\)$/).first(),
-		).toBeVisible();
-
-		// While collapsed, "DB Calls RPS" should fully unmount.
-		await expect(page.getByText('DB Calls RPS', { exact: true })).toHaveCount(0);
-
-		await toggleSection(sectionRow(page, /^DB Metrics \(\d+ widgets?\)$/));
-
-		await expect(
-			page.getByText('DB Calls RPS', { exact: true }).first(),
-		).toBeVisible();
-		await expect(page.getByText(/^DB Metrics \(\d+ widgets?\)$/)).toHaveCount(0);
-	});
-
-	// ─── Section options menu (Rename / New Panel / Remove Section) ──────────
-
-	test('TC-04 section options menu shows Rename / New Panel / Remove Section', async ({
+	test('TC-03 a panel belongs to the section that references it', async ({
 		authedPage: page,
 	}) => {
-		await gotoApmDashboard(page);
+		await seedAndOpen(page, 'membership');
 
-		// Use DB Metrics — its settings popover is guaranteed to render all
-		// three buttons when the section is expanded. WidgetRow.tsx hides
-		// "Remove Section" while a section is collapsed.
-		await clickSectionSettings(sectionRow(page, 'DB Metrics'));
-
-		const tooltip = page.getByRole('tooltip');
-		await expect(tooltip).toBeVisible();
-		await expect(tooltip.getByRole('button', { name: 'Rename' })).toBeVisible();
-		await expect(
-			tooltip.getByRole('button', { name: 'New Panel', exact: true }),
-		).toBeVisible();
-		await expect(
-			tooltip.getByRole('button', { name: 'Remove Section' }),
-		).toBeVisible();
-
-		await page.keyboard.press('Escape');
+		// The layout puts these two in "PromQL" and nothing else there.
+		const promql = section(page, 'p-promql');
+		await expect(promql).toContainText('Duration rate (PromQL)');
+		await expect(promql).toContainText('Total requests');
+		await expect(promql).not.toContainText('Requests over time');
 	});
 
-	test('TC-05 rename a section, restore original name', async ({
+	test('TC-04 collapsing a section hides the panels inside it', async ({
 		authedPage: page,
 	}) => {
-		await gotoApmDashboard(page);
+		await seedAndOpen(page, 'collapse');
+		await expect(panelByTitle(page, 'Requests over time').first()).toBeVisible();
 
-		const renamed = `Renamed Section ${Date.now()}`;
+		await sectionToggle(page, 'p-timeseries').click();
 
-		// DB Metrics has a unique name, avoiding the duplicate-Overview snag.
-		await clickSectionSettings(sectionRow(page, 'DB Metrics'));
-		await page
-			.getByRole('tooltip')
-			.getByRole('button', { name: 'Rename' })
-			.click();
-
-		const renameDialog = page.getByRole('dialog', { name: 'Rename Section' });
-		await expect(renameDialog).toBeVisible();
-		const nameInput = renameDialog.getByPlaceholder('Enter row name here...');
-		await nameInput.click();
-		await nameInput.fill(renamed);
-		await renameDialog.getByRole('button', { name: 'Apply Changes' }).click();
-		await expect(renameDialog).not.toBeVisible();
-
-		await expect(page.getByText(renamed, { exact: true }).first()).toBeVisible();
-
-		// Restore.
-		await clickSectionSettings(sectionRow(page, renamed));
-		await page
-			.getByRole('tooltip')
-			.getByRole('button', { name: 'Rename' })
-			.click();
-		const restoreDialog = page.getByRole('dialog', { name: 'Rename Section' });
-		const restoreInput = restoreDialog.getByPlaceholder('Enter row name here...');
-		await restoreInput.click();
-		await restoreInput.fill('DB Metrics');
-		await restoreDialog.getByRole('button', { name: 'Apply Changes' }).click();
-		await expect(restoreDialog).not.toBeVisible();
-
-		await expect(
-			page.getByText('DB Metrics', { exact: true }).first(),
-		).toBeVisible();
-		await expect(page.getByText(renamed, { exact: true })).toHaveCount(0);
+		await expect(panelByTitle(page, 'Requests over time').first()).toBeHidden();
+		// Its neighbours are untouched.
+		await expect(panelByTitle(page, 'Total requests').first()).toBeVisible();
 	});
 
-	test('TC-06 cancel section rename leaves name unchanged', async ({
+	test('TC-05 expanding a collapsed section brings its panels back', async ({
 		authedPage: page,
 	}) => {
-		await gotoApmDashboard(page);
+		await seedAndOpen(page, 'expand');
+		const toggle = sectionToggle(page, 'p-timeseries');
 
-		await clickSectionSettings(sectionRow(page, 'External calls'));
-		await page
-			.getByRole('tooltip')
-			.getByRole('button', { name: 'Rename' })
-			.click();
+		await toggle.click();
+		await expect(panelByTitle(page, 'Requests over time').first()).toBeHidden();
 
-		const dialog = page.getByRole('dialog', { name: 'Rename Section' });
-		await expect(dialog).toBeVisible();
-		const input = dialog.getByPlaceholder('Enter row name here...');
-		await input.click();
-		await input.fill('Should Not Be Applied');
-
-		await dialog.getByRole('button', { name: 'Cancel' }).click();
-		await expect(dialog).not.toBeVisible();
-
-		await expect(
-			page.getByText('External calls', { exact: true }).first(),
-		).toBeVisible();
-		await expect(page.getByText('Should Not Be Applied')).toHaveCount(0);
+		await toggle.click();
+		await expect(panelByTitle(page, 'Requests over time').first()).toBeVisible();
 	});
 
-	// TODO(e2e): re-enable once CI consistently passes. Flaky because of hover interaction on menu, will be changing with new implementation with perses.
-	test.skip('TC-07 add a new panel to a section, then delete it', async ({
+	test('TC-06 a panel exposes its actions menu', async ({
 		authedPage: page,
 	}) => {
-		await gotoApmDashboard(page);
+		await seedAndOpen(page, 'actions');
 
-		const panelName = `Test Panel ${Date.now()}`;
+		await panelByTitle(page, 'Requests over time').first().hover();
+		await panelActions(page, 'p-timeseries').click();
 
-		await clickSectionSettings(sectionRow(page, 'DB Metrics'));
-		await page
-			.getByRole('tooltip')
-			.getByRole('button', { name: 'New Panel', exact: true })
-			.click();
-
-		const panelTypeDialog = page.getByRole('dialog', { name: 'New Panel' });
-		await expect(panelTypeDialog).toBeVisible();
-		await panelTypeDialog.getByTestId('panel-type-graph').click();
-
-		// We're now in the panel editor at /dashboard/:id/new?widgetId=…
-		await page.waitForURL(/\/new/);
-		await page.getByTestId('panel-name-input').fill(panelName);
-
-		// NewWidget renders TWO buttons with `data-testid="new-widget-save"` —
-		// a disabled variant when `isSaveDisabled` is true and an enabled
-		// variant when it is false. Under CI load the editor mounts with the
-		// disabled variant first; without `toBeEnabled` the click can hit the
-		// disabled button and the Save dialog never opens.
-		const saveBtn = page.getByTestId('new-widget-save');
-		await expect(saveBtn).toBeVisible();
-		await expect(saveBtn).toBeEnabled({ timeout: 20_000 });
-		// `dispatchEvent('click')` — sidenav overlap risk on CI; see the same
-		// rationale on `toggleSectionAndWaitForPut` above.
-		await saveBtn.dispatchEvent('click');
-		const saveDialog = page.getByRole('dialog', { name: 'Save Widget' });
-		await expect(saveDialog).toBeVisible();
-
-		// PUT confirms the panel persisted server-side — more reliable than
-		// waiting on redux state to propagate before navigating back.
-		const putResponse = page.waitForResponse(
-			(r) => r.request().method() === 'PUT' && /\/dashboards\//.test(r.url()),
-		);
-		await saveDialog.getByRole('button', { name: 'OK' }).click();
-		await putResponse;
-
-		await page.waitForURL((url) => !url.pathname.includes('/new'));
-		await expect(
-			page.getByText(panelName, { exact: true }).first(),
-		).toBeVisible();
-
-		// The panel ⋮ menu is a Radix `DropdownMenuSimple` — it opens on click,
-		// not hover (see `openPanelMoreMenu` in 21-panel-actions.spec.ts). The
-		// container hover only reveals the kebab (it's `visibility: hidden`
-		// until then); the click toggles the menu. Wait for the menu role to be
-		// visible before clicking Delete.
-		const panelTitle = page.getByText(panelName, { exact: true }).first();
-		await panelTitle.hover();
-		const panelContainer = panelTitle.locator('../..');
-		await panelContainer.scrollIntoViewIfNeeded();
-		await panelContainer.hover();
-		await panelContainer.getByTestId('widget-header-options').click();
-		const menu = page.getByRole('menu');
-		await menu.waitFor({ state: 'visible' });
-		await menu.getByRole('menuitem', { name: 'Delete', exact: true }).click();
-
-		const deleteDialog = page.getByRole('dialog', { name: 'Delete' });
-		await expect(deleteDialog).toBeVisible();
-
-		const deletePut = page.waitForResponse(
-			(r) => r.request().method() === 'PUT' && /\/dashboards\//.test(r.url()),
-		);
-		await deleteDialog.getByRole('button', { name: 'OK' }).click();
-		await deletePut;
-		await expect(deleteDialog).not.toBeVisible();
-		await expect(page.getByText(panelName, { exact: true })).toHaveCount(0);
+		// Assert the affordances the menu offers rather than a container testid: the one
+		// in the source is not rendered on this path, and the items are what users act on.
+		await expect(page.getByRole('menu')).toBeVisible();
+		for (const item of ['View', 'Edit panel', 'Clone', 'Delete panel']) {
+			await expect(page.getByRole('menuitem', { name: item })).toBeVisible();
+		}
 	});
 
-	// ─── New section in edit mode ────────────────────────────────────────────
-
-	test('TC-08 add a new section via edit mode, then remove it', async ({
+	test('TC-07 a panel with nothing to show renders its no-data state, not an error', async ({
 		authedPage: page,
 	}) => {
-		await gotoApmDashboard(page);
+		await seedAndOpen(page, 'nodata');
 
-		const sectionName = `Temp Section ${Date.now()}`;
-
-		await page.getByTestId('options').click();
-		await page.getByRole('button', { name: 'New section' }).click();
-
-		const newSectionDialog = page.getByRole('dialog', { name: 'New Section' });
-		await expect(newSectionDialog).toBeVisible();
-		await newSectionDialog.getByTestId('section-name').fill(sectionName);
-		await newSectionDialog
-			.getByRole('button', { name: 'Create Section' })
-			.click();
-		await expect(newSectionDialog).not.toBeVisible();
-
-		await expect(
-			page.getByText(sectionName, { exact: true }).first(),
-		).toBeVisible();
-
-		await clickSectionSettings(sectionRow(page, sectionName));
-		await page
-			.getByRole('tooltip')
-			.getByRole('button', { name: 'Remove Section' })
-			.click();
-
-		const deleteRowDialog = page.getByRole('dialog', { name: 'Delete Row' });
-		await expect(deleteRowDialog).toBeVisible();
-		await deleteRowDialog.getByRole('button', { name: 'OK' }).click();
-		await expect(deleteRowDialog).not.toBeVisible();
-
-		await expect(page.getByText(sectionName, { exact: true })).toHaveCount(0);
-
-		// Original sections are untouched.
-		await expect(
-			page.getByText('Overview', { exact: true }).first(),
-		).toBeVisible();
-		await expect(
-			page.getByText('DB Metrics', { exact: true }).first(),
-		).toBeVisible();
-		await expect(
-			page.getByText('External calls', { exact: true }).first(),
-		).toBeVisible();
-	});
-
-	// ─── Deep coverage ───────────────────────────────────────────────────────
-
-	test('TC-09 collapsing two sections in sequence shows both as collapsed', async ({
-		authedPage: page,
-	}) => {
-		await gotoApmDashboard(page);
-
-		await setSectionCollapsed(page, 'DB Metrics', true);
-		await expect(
-			page.getByText(/^DB Metrics \(\d+ widgets?\)$/).first(),
-		).toBeVisible();
-
-		await setSectionCollapsed(page, 'External calls', true);
-		await expect(
-			page.getByText(/^External calls \(\d+ widgets?\)$/).first(),
-		).toBeVisible();
-
-		// Restore both so the test leaves no state behind.
-		await setSectionCollapsed(page, 'DB Metrics', false);
-		await setSectionCollapsed(page, 'External calls', false);
-		await expect(page.getByText(/^DB Metrics \(\d+ widgets?\)$/)).toHaveCount(0);
-		await expect(page.getByText(/^External calls \(\d+ widgets?\)$/)).toHaveCount(
-			0,
-		);
-	});
-
-	test('TC-10 panels inside a collapsed section are not in the DOM', async ({
-		authedPage: page,
-	}) => {
-		await gotoApmDashboard(page);
-
-		// "DB Calls RPS" is a unique panel inside the "DB Metrics" section.
-		const dbPanel = page.getByText('DB Calls RPS', { exact: true });
-		await dbPanel.first().scrollIntoViewIfNeeded();
-		await expect(dbPanel.first()).toBeVisible();
-
-		await toggleSection(sectionRow(page, 'DB Metrics'));
-		await expect(
-			page.getByText(/^DB Metrics \(\d+ widgets?\)$/).first(),
-		).toBeVisible();
-
-		// Panels inside the collapsed section unmount, not just hidden.
-		await expect(dbPanel).toHaveCount(0);
-
-		// Restore.
-		await toggleSection(sectionRow(page, /^DB Metrics \(\d+ widgets?\)$/));
-		await expect(dbPanel.first()).toBeVisible();
+		// The seeded queries target signals this stack holds nothing for, so the panels
+		// resolve empty — that must read as "no data", never as a failure.
+		await expect(page.getByTestId('panel-no-data').first()).toBeVisible();
+		await expect(page.getByTestId('panel-error')).toHaveCount(0);
 	});
 });

tests/e2e/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "module": "commonjs",
+    "module": "esnext",
     "moduleResolution": "bundler",
-    "lib": ["ES2020"],
+    "lib": ["ES2020", "DOM"],
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,