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

@@ -268,11 +268,23 @@ export async function typeVariableValue(
 
 // ─── Panels and sections ──────────────────────────────────────────────────
 
-export const panelByTitle = (page: Page, title: string): Locator =>
-	page.locator('[data-panel-id]').filter({ hasText: title });
+// 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 sectionByName = (page: Page, name: string): Locator =>
-	page.locator('[data-section-id]').filter({ hasText: name });
+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> {

tests/e2e/parked-specs.json

@@ -1,8 +1,8 @@
 {
 	"$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/12-sections.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/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/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/tests/dashboards/list.spec.ts

@@ -1,53 +1,57 @@
-import type { Locator, Page } from '@playwright/test';
+import type { Page } from '@playwright/test';
 
 import { expect, test } from '../../fixtures/auth';
 import { newAdminContext } from '../../helpers/auth';
-import { authToken } from '../../helpers/dashboards';
 import {
-	createDashboardV2ViaApi,
-	deleteDashboardV2ViaApi,
-	WIDE_VIEWPORT,
-} from '../../helpers/dashboards-v2';
+	APM_METRICS_TITLE,
+	authToken,
+	createDashboardViaApi,
+	DEFAULT_DASHBOARD_TITLE,
+	deleteDashboardViaApi,
+	findDashboardIdByTitle,
+	gotoDashboardsList,
+	importApmMetricsDashboardViaUI,
+	openDashboardActionMenu,
+	SEARCH_PLACEHOLDER,
+} from '../../helpers/dashboards';
 
-// The V2 dashboards list: the views rail, the list itself, search, sort and pinning.
-// Seeded through the v2 API, and every assertion is scoped to this suite's own
-// dashboards — the workspace is shared, so counting rows or asserting on "the first
-// row" would depend on what else exists.
-
-test.use({ viewport: WIDE_VIEWPORT });
+// Tests in this file mutate the dashboard list (create / delete). Run them
+// serially within the worker so state from one test does not leak into
+// another's assertions. Files still run in parallel via the project-level
+// fullyParallel setting.
+test.describe.configure({ mode: 'serial' });
 
+// ─── Suite-level seed registry ───────────────────────────────────────────
+//
+// Every dashboard a test creates is recorded here, and one `afterAll`
+// deletes the lot at suite teardown. Individual tests do not need their
+// own `try / finally` cleanup blocks.
 const seedIds = new Set<string>();
-const RUN = `${Date.now()}-${process.env.TEST_WORKER_INDEX ?? '0'}`;
-const listPath = '/dashboard';
+const BASE_FIXTURE_TITLE = 'dashboards-list-base-fixture';
 
-/** A title unique to this run, so searches can only match what this suite made. */
-const title = (label: string): string => `e2e-list-${label}-${RUN}`;
-
-async function seed(page: Page, label: string): Promise<string> {
-	const id = await createDashboardV2ViaApi(page, title(label));
+/** Seed a dashboard via API and register it for suite cleanup. */
+async function seed(page: Page, title: string): Promise<string> {
+	const id = await createDashboardViaApi(page, title);
 	seedIds.add(id);
 	return id;
 }
 
-async function gotoList(page: Page): Promise<void> {
-	await page.goto(listPath);
-	await expect(
-		page.getByRole('heading', { name: 'All dashboards' }),
-	).toBeVisible();
-}
-
-/** Rows are indexed, not keyed by name — find the row holding a given title. */
-const rowByTitle = (page: Page, dashboardTitle: string): Locator =>
-	page.locator('[data-testid^="dashboard-title-"]').filter({
-		hasText: dashboardTitle,
-	});
-
-/** Type into the list's query box and run it. */
-async function search(page: Page, term: string): Promise<void> {
-	await page.getByTestId('dashboards-list-search').click();
-	await page.keyboard.type(term);
-	await page.getByTestId('dashboards-list-search-submit').click();
-}
+test.beforeAll(async ({ browser }) => {
+	// Persistent fixtures the read-only tests rely on:
+	//   - A minimal base dashboard — keeps the list non-empty so the search
+	//     input / sort button render. Seeded first via API so the workspace
+	//     is populated before the UI import flow runs.
+	//   - APM Metrics — a richer, real-world dashboard imported through the
+	//     real Import JSON UI flow (file upload + Monaco editor + submit).
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		seedIds.add(await createDashboardViaApi(page, BASE_FIXTURE_TITLE));
+		seedIds.add(await importApmMetricsDashboardViaUI(page));
+	} finally {
+		await ctx.close();
+	}
+});
 
 test.afterAll(async ({ browser }) => {
 	if (seedIds.size === 0) {
@@ -58,7 +62,7 @@ test.afterAll(async ({ browser }) => {
 	try {
 		const token = await authToken(page);
 		for (const id of seedIds) {
-			await deleteDashboardV2ViaApi(ctx.request, id, token);
+			await deleteDashboardViaApi(ctx.request, id, token);
 			seedIds.delete(id);
 		}
 	} finally {
@@ -66,146 +70,501 @@ test.afterAll(async ({ browser }) => {
 	}
 });
 
-test.describe('Dashboards list', () => {
+test.describe('Dashboards List Page', () => {
+	// ─── Page load and layout ────────────────────────────────────────────────
+
 	test('TC-01 page chrome and core controls render', async ({
 		authedPage: page,
 	}) => {
-		await gotoList(page);
+		await gotoDashboardsList(page);
 
-		await expect(page.getByRole('heading', { name: 'Views' })).toBeVisible();
-		await expect(page.getByTestId('new-dashboard-cta')).toBeVisible();
-		await expect(page.getByTestId('dashboards-list-search')).toBeVisible();
+		await expect(page).toHaveURL('/dashboard');
+		await expect(page).toHaveTitle('SigNoz | All Dashboards');
+
+		await expect(
+			page.getByRole('heading', { name: 'Dashboards', level: 1 }),
+		).toBeVisible();
+		await expect(
+			page.getByText('Create and manage dashboards for your workspace.'),
+		).toBeVisible();
+
+		await expect(page.getByPlaceholder(SEARCH_PLACEHOLDER)).toBeVisible();
+		await expect(page.getByText('All Dashboards')).toBeVisible();
 		await expect(page.getByTestId('sort-by')).toBeVisible();
+
+		await expect(page.getByAltText('dashboard-image').first()).toBeVisible();
+
+		await expect(page.getByRole('button', { name: 'Feedback' })).toBeVisible();
+		await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
 	});
 
-	test('TC-02 every view in the rail is reachable', async ({
+	// ─── Search functionality ────────────────────────────────────────────────
+
+	test('TC-02 search by title returns matching dashboard', async ({
 		authedPage: page,
 	}) => {
-		await gotoList(page);
+		const name = 'dashboards-list-search-title';
+		await seed(page, name);
 
-		for (const view of ['mine', 'pinned', 'recent', 'all', 'locked']) {
-			await page.getByTestId(`dashboards-view-${view}`).click();
-			await expect(page.getByTestId(`dashboards-view-${view}`)).toBeVisible();
-			// The list frame survives every view switch, empty or not.
-			await expect(page.getByTestId('dashboards-list-search')).toBeVisible();
+		await gotoDashboardsList(page);
+		const search = page.getByPlaceholder(SEARCH_PLACEHOLDER);
+
+		await search.fill(name);
+		await expect(page).toHaveURL(new RegExp(`search=${name}`));
+		await expect(search).toHaveValue(name);
+		await expect(page.getByAltText('dashboard-image').first()).toBeVisible();
+		await expect(page.getByText(name).first()).toBeVisible();
+	});
+
+	test('TC-03 search by tag returns the APM Metrics dashboard', async ({
+		authedPage: page,
+	}) => {
+		// APM Metrics carries multiple tags — searching by one of them ("apm")
+		// surfaces the imported dashboard. This exercises the tag-match branch
+		// in the filter, distinct from title-match.
+		await gotoDashboardsList(page);
+		const search = page.getByPlaceholder(SEARCH_PLACEHOLDER);
+
+		await search.fill('apm');
+		await expect(page).toHaveURL(/search=apm/);
+		await expect(page.getByText(APM_METRICS_TITLE).first()).toBeVisible();
+	});
+
+	test('TC-04 direct navigation with ?search= pre-fills the input and filters results', async ({
+		authedPage: page,
+	}) => {
+		const name = 'dashboards-list-search-deeplink';
+		await seed(page, name);
+
+		await page.goto(`/dashboard?search=${name}`);
+		await page
+			.getByRole('heading', { name: 'Dashboards', level: 1 })
+			.waitFor({ state: 'visible' });
+
+		await expect(page.getByPlaceholder(SEARCH_PLACEHOLDER)).toHaveValue(name);
+		await expect(page.getByText(name).first()).toBeVisible();
+	});
+
+	test('TC-05 clearing search restores the full list', async ({
+		authedPage: page,
+	}) => {
+		await gotoDashboardsList(page);
+		const search = page.getByPlaceholder(SEARCH_PLACEHOLDER);
+
+		await search.fill('apm');
+		await expect(page).toHaveURL(/search=apm/);
+
+		await search.fill('');
+		// The app keeps the empty `search=` param in the URL — assert that no
+		// non-empty value remains and that rows are rendered again.
+		await expect(page).not.toHaveURL(/search=[^&]/);
+		await expect(search).toHaveValue('');
+		await expect(page.getByAltText('dashboard-image').first()).toBeVisible();
+	});
+
+	test('TC-06 search with no matching results shows empty state', async ({
+		authedPage: page,
+	}) => {
+		await gotoDashboardsList(page);
+		const search = page.getByPlaceholder(SEARCH_PLACEHOLDER);
+
+		await search.fill('xyznonexistent999');
+
+		await expect(page.getByAltText('dashboard-image')).toHaveCount(0);
+		await expect(search).toBeVisible();
+		await expect(search).toHaveValue('xyznonexistent999');
+	});
+
+	test('TC-07 search is case-insensitive', async ({ authedPage: page }) => {
+		await gotoDashboardsList(page);
+		const search = page.getByPlaceholder(SEARCH_PLACEHOLDER);
+
+		await search.fill(APM_METRICS_TITLE.toLowerCase());
+		await expect(page.getByAltText('dashboard-image').first()).toBeVisible();
+		await expect(page.getByText(APM_METRICS_TITLE).first()).toBeVisible();
+	});
+
+	// ─── Sorting ─────────────────────────────────────────────────────────────
+	//
+	// `sortHandle` in DashboardsList.tsx hard-codes `order: 'descend'` —
+	// ascending mode is not yet implemented. Both sort options ride the same
+	// descending-only path, so one parameterised test covers them.
+
+	test('TC-08 sort options write columnKey & order=descend to the URL', async ({
+		authedPage: page,
+	}) => {
+		for (const [optionTestId, columnKey] of [
+			['sort-by-last-updated', 'updatedAt'],
+			['sort-by-last-created', 'createdAt'],
+		] as const) {
+			await gotoDashboardsList(page);
+			await expect(page).not.toHaveURL(/columnKey/);
+
+			await page.getByTestId('sort-by').click();
+			const option = page.getByTestId(optionTestId);
+			await option.waitFor({ state: 'visible' });
+			await option.click();
+
+			await expect(page).toHaveURL(new RegExp(`columnKey=${columnKey}`));
+			await expect(page).toHaveURL(/order=descend/);
+			await expect(page).not.toHaveURL(/order=ascend/);
 		}
 	});
 
-	test('TC-03 a newly created dashboard is listed', async ({
+	// ─── Row actions (context menu) ──────────────────────────────────────────
+
+	test('TC-09 admin sees all five options in the action menu', async ({
 		authedPage: page,
 	}) => {
-		await seed(page, 'listed');
-		await gotoList(page);
+		const name = 'dashboards-list-actions-menu';
+		await seed(page, name);
 
-		await expect(rowByTitle(page, title('listed'))).toBeVisible();
+		await gotoDashboardsList(page);
+		const tooltip = await openDashboardActionMenu(page, name);
+		await expect(tooltip).toBeVisible();
+
+		await expect(tooltip.getByRole('button', { name: 'View' })).toBeVisible();
+		await expect(
+			tooltip.getByRole('button', { name: 'Open in New Tab' }),
+		).toBeVisible();
+		await expect(
+			tooltip.getByRole('button', { name: 'Copy Link' }),
+		).toBeVisible();
+		await expect(
+			tooltip.getByRole('button', { name: 'Export JSON' }),
+		).toBeVisible();
+		// Delete is rendered as a generic, not a button.
+		await expect(tooltip.getByText('Delete dashboard')).toBeVisible();
 	});
 
-	test('TC-04 opening a dashboard from the list lands on its detail page', async ({
+	test('TC-10 view action navigates to the dashboard detail page', async ({
 		authedPage: page,
 	}) => {
-		const id = await seed(page, 'open');
-		await gotoList(page);
+		const name = 'dashboards-list-action-view';
+		await seed(page, name);
 
-		await rowByTitle(page, title('open')).click();
-
-		await expect(page).toHaveURL(new RegExp(`/dashboard/${id}`));
-		await expect(page.getByTestId('dashboard-title')).toContainText(
-			title('open'),
-		);
-	});
-
-	test('TC-05 search narrows the list to a matching dashboard', async ({
-		authedPage: page,
-	}) => {
-		await seed(page, 'searchable');
-		await seed(page, 'other');
-		await gotoList(page);
-
-		await search(page, title('searchable'));
-
-		await expect(rowByTitle(page, title('searchable'))).toBeVisible();
-		await expect(rowByTitle(page, title('other'))).toBeHidden();
-	});
-
-	test('TC-06 a search matching nothing leaves no rows of ours', async ({
-		authedPage: page,
-	}) => {
-		await seed(page, 'nomatch');
-		await gotoList(page);
-
-		await search(page, `${title('nomatch')}-absent`);
-
-		await expect(rowByTitle(page, title('nomatch'))).toBeHidden();
-	});
-
-	test('TC-07 pinning a dashboard puts it in the Pinned view', async ({
-		authedPage: page,
-	}) => {
-		await seed(page, 'pin');
-		await gotoList(page);
-
-		const row = rowByTitle(page, title('pin'));
-		await expect(row).toBeVisible();
-		// The pin control is indexed like the title it sits beside.
-		const index = await row.getAttribute('data-testid');
-		const pinIndex = (index ?? '').replace('dashboard-title-', '');
-		await page.getByTestId(`dashboard-pin-${pinIndex}`).click();
-
-		await page.getByTestId('dashboards-view-pinned').click();
-		await expect(rowByTitle(page, title('pin'))).toBeVisible();
-	});
-
-	test('TC-08 the create CTA opens the new-dashboard modal', async ({
-		authedPage: page,
-	}) => {
-		await gotoList(page);
-
-		await page.getByTestId('new-dashboard-cta').click();
-
-		for (const field of [
-			'create-dashboard-name',
-			'create-dashboard-description',
-			'create-dashboard-tags',
-		]) {
-			await expect(page.getByTestId(field)).toBeVisible();
-		}
-		await expect(page.getByTestId('create-dashboard-submit')).toBeVisible();
-	});
-
-	test('TC-09 creating a dashboard through the modal lands on it', async ({
-		authedPage: page,
-	}) => {
-		await gotoList(page);
-		await page.getByTestId('new-dashboard-cta').click();
-
-		const name = title('via-modal');
-		await page.getByTestId('create-dashboard-name').fill(name);
-		await page.getByTestId('create-dashboard-submit').click();
+		await gotoDashboardsList(page);
+		const tooltip = await openDashboardActionMenu(page, name);
+		await tooltip.getByRole('button', { name: 'View' }).click();
 
 		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
-		await expect(page.getByTestId('dashboard-title')).toContainText(name);
-
-		// Created through the UI, so register it for cleanup by id from the URL.
-		const created = page.url().split('/dashboard/')[1]?.split('?')[0] ?? '';
-		expect(created).not.toBe('');
-		seedIds.add(created);
 	});
 
-	test('TC-10 a deleted dashboard leaves the list', async ({
+	test('TC-11 open in new tab opens the dashboard in a new browser tab', async ({
 		authedPage: page,
 	}) => {
-		const id = await seed(page, 'deleted');
-		await gotoList(page);
-		await expect(rowByTitle(page, title('deleted'))).toBeVisible();
+		const name = 'dashboards-list-action-newtab';
+		await seed(page, name);
 
-		const token = await authToken(page);
-		await deleteDashboardV2ViaApi(page.request, id, token);
-		seedIds.delete(id);
+		await gotoDashboardsList(page);
+		const tooltip = await openDashboardActionMenu(page, name);
 
-		await page.reload();
+		// Use page.context() — the auth fixture creates its own context per
+		// test, which is not the same as the default `context` fixture.
+		const [newPage] = await Promise.all([
+			page.context().waitForEvent('page'),
+			tooltip.getByRole('button', { name: 'Open in New Tab' }).click(),
+		]);
+
+		await newPage.waitForLoadState();
+		await expect(newPage).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
+		await newPage.close();
+	});
+
+	test('TC-12 copy link copies the dashboard URL to the clipboard', async ({
+		authedPage: page,
+	}) => {
+		const name = 'dashboards-list-action-copy';
+		await seed(page, name);
+
+		await gotoDashboardsList(page);
+		await page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
+
+		const tooltip = await openDashboardActionMenu(page, name);
+		await tooltip.getByRole('button', { name: 'Copy Link' }).click();
+
+		await expect(page.getByText(/copied|success/i)).toBeVisible();
+
+		const clipboardText = await page.evaluate(async () =>
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			(globalThis as any).navigator.clipboard.readText(),
+		);
+		expect(clipboardText).toMatch(/\/dashboard\/[0-9a-f-]+/);
+	});
+
+	test('TC-13 export JSON downloads the dashboard as a JSON file', async ({
+		authedPage: page,
+	}) => {
+		const name = 'dashboards-list-action-export';
+		await seed(page, name);
+
+		await gotoDashboardsList(page);
+		const tooltip = await openDashboardActionMenu(page, name);
+
+		const [download] = await Promise.all([
+			page.waitForEvent('download'),
+			tooltip.getByRole('button', { name: 'Export JSON' }).click(),
+		]);
+
+		expect(download.suggestedFilename()).toMatch(/\.json$/);
+	});
+
+	test('TC-14 action menu closes when clicking outside the popover', async ({
+		authedPage: page,
+	}) => {
+		const name = 'dashboards-list-action-dismiss';
+		await seed(page, name);
+
+		await gotoDashboardsList(page);
+		await openDashboardActionMenu(page, name);
+		await expect(page.getByRole('tooltip')).toBeVisible();
+
+		await page.getByRole('heading', { name: 'Dashboards', level: 1 }).click();
+		await expect(page.getByRole('tooltip')).not.toBeVisible();
+
+		await expect(page).toHaveURL(/\/dashboard($|\?)/);
+	});
+
+	// ─── Creating dashboards via "New dashboard" dropdown ─────────────────────
+	//
+	// The "Enter dashboard name…" inline input on the list page is a
+	// `RequestDashboardBtn` (template-request feedback form), not a create
+	// flow. The only UI create path is the "New dashboard" dropdown.
+
+	test('TC-15 New dashboard dropdown shows exactly three options', async ({
+		authedPage: page,
+	}) => {
+		await gotoDashboardsList(page);
+		await page.getByTestId('new-dashboard-cta').click();
+
+		const menu = page.getByRole('menu');
+		await expect(menu).toBeVisible();
+		await expect(menu.getByTestId('create-dashboard-menu-cta')).toBeVisible();
+		await expect(menu.getByTestId('import-json-menu-cta')).toBeVisible();
+		await expect(menu.getByTestId('view-templates-menu-cta')).toBeVisible();
+	});
+
+	test('TC-16 Create dashboard dropdown option creates a dashboard with the default name', async ({
+		authedPage: page,
+	}) => {
+		await gotoDashboardsList(page);
+		await page.getByTestId('new-dashboard-cta').click();
+		await page.getByTestId('create-dashboard-menu-cta').click();
+
+		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
+		await expect(page.getByText('Configure your new dashboard')).toBeVisible();
+		// "Configure" appears twice on the new-dashboard onboarding state — once
+		// in the toolbar and once in the empty-state section. The test only
+		// needs to confirm the onboarding rendered, so .first() is sufficient.
 		await expect(
-			page.getByRole('heading', { name: 'All dashboards' }),
+			page.getByRole('button', { name: 'Configure' }).first(),
 		).toBeVisible();
-		await expect(rowByTitle(page, title('deleted'))).toBeHidden();
+		await expect(
+			page.getByRole('button', { name: /New Panel/ }).first(),
+		).toBeVisible();
+
+		// Register the UI-created dashboard with the suite teardown. After a
+		// successful "Create dashboard" the row must exist — assert that and
+		// then unconditionally register, so the test contains no `if`.
+		const sampleId = await findDashboardIdByTitle(page, DEFAULT_DASHBOARD_TITLE);
+		expect(
+			sampleId,
+			`${DEFAULT_DASHBOARD_TITLE} not found after UI create`,
+		).toBeDefined();
+		seedIds.add(sampleId as string);
+	});
+
+	test('TC-17 Import JSON dialog opens with code editor and upload button', async ({
+		authedPage: page,
+	}) => {
+		await gotoDashboardsList(page);
+		await page.getByTestId('new-dashboard-cta').click();
+		await page.getByTestId('import-json-menu-cta').click();
+
+		const dialog = page.getByRole('dialog');
+		await expect(dialog).toBeVisible();
+		await expect(dialog.getByText('Import Dashboard JSON')).toBeVisible();
+		// "Upload JSON file" appears twice — once as the Ant Upload's hidden
+		// span wrapper, once as the visible button. .first() is enough to
+		// confirm the upload affordance rendered.
+		await expect(
+			dialog.getByRole('button', { name: 'Upload JSON file' }).first(),
+		).toBeVisible();
+		await expect(
+			dialog.getByRole('button', { name: 'Import and Next' }),
+		).toBeVisible();
+	});
+
+	test('TC-18 Import JSON dialog dismisses via Escape and via the close button', async ({
+		authedPage: page,
+	}) => {
+		await gotoDashboardsList(page);
+
+		// Escape path — Monaco grabs focus on mount and swallows Escape; click
+		// the modal title first to blur Monaco so Ant's Modal `keyboard`
+		// handler picks up the keystroke.
+		await page.getByTestId('new-dashboard-cta').click();
+		await page.getByTestId('import-json-menu-cta').click();
+		let dialog = page.getByRole('dialog');
+		await expect(dialog).toBeVisible();
+		await dialog.getByText('Import Dashboard JSON').click();
+		await page.keyboard.press('Escape');
+		await expect(dialog).not.toBeVisible();
+		await expect(page).toHaveURL(/\/dashboard($|\?)/);
+
+		// Close-button path — re-open and dismiss via the X.
+		await page.getByTestId('new-dashboard-cta').click();
+		await page.getByTestId('import-json-menu-cta').click();
+		dialog = page.getByRole('dialog');
+		await expect(dialog).toBeVisible();
+		await dialog.getByRole('button', { name: /close/i }).click();
+		await expect(dialog).not.toBeVisible();
+		await expect(page).toHaveURL(/\/dashboard($|\?)/);
+	});
+
+	// ─── Deleting dashboards ─────────────────────────────────────────────────
+	//
+	// Known behaviour: clicking Cancel in the confirmation dialog navigates to
+	// the dashboard detail page rather than staying on the list.
+
+	test('TC-19 delete confirmation dialog shows dashboard name with Cancel and Delete buttons', async ({
+		authedPage: page,
+	}) => {
+		const name = 'dashboards-list-delete-confirm';
+		await seed(page, name);
+
+		await gotoDashboardsList(page);
+		const tooltip = await openDashboardActionMenu(page, name);
+		// Ant's Popover can position the tooltip so the "Delete dashboard"
+		// item ends up outside the viewport (especially in CI, where font
+		// rendering shifts layout subtly). `click({ force: true })` skips
+		// actionability checks but Playwright still requires the click
+		// coordinates to land inside the viewport. `dispatchEvent('click')`
+		// fires the synthetic event directly on the DOM node — React's
+		// onClick handler runs normally — and bypasses coordinate checks
+		// entirely. This is the robust fix for Ant Popover positioning.
+		await tooltip.getByText('Delete dashboard').dispatchEvent('click');
+
+		const dialog = page.getByRole('dialog');
+		await expect(dialog).toBeVisible();
+		await expect(dialog.getByRole('heading')).toContainText(
+			'Are you sure you want to delete the',
+		);
+		await expect(dialog.getByRole('heading')).toContainText(name);
+
+		await expect(dialog.getByRole('button', { name: 'Cancel' })).toBeVisible();
+		await expect(dialog.getByRole('button', { name: 'Delete' })).toBeVisible();
+	});
+
+	test('TC-20 cancelling delete navigates to the dashboard detail page (known behaviour)', async ({
+		authedPage: page,
+	}) => {
+		const name = 'dashboards-list-delete-cancel';
+		await seed(page, name);
+
+		await gotoDashboardsList(page);
+		const tooltip = await openDashboardActionMenu(page, name);
+		await tooltip.getByText('Delete dashboard').dispatchEvent('click');
+		await expect(page.getByRole('dialog')).toBeVisible();
+
+		await page.getByRole('button', { name: 'Cancel' }).click();
+		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
+	});
+
+	test('TC-21 confirming delete removes the dashboard from the list', async ({
+		authedPage: page,
+	}) => {
+		const name = 'dashboards-list-delete-confirmed';
+		const id = await seed(page, name);
+
+		await gotoDashboardsList(page);
+		const tooltip = await openDashboardActionMenu(page, name);
+		await tooltip.getByText('Delete dashboard').dispatchEvent('click');
+
+		const dialog = page.getByRole('dialog');
+		await expect(dialog).toBeVisible();
+
+		// The Delete mutation is async — wait for the API response *and* the
+		// dialog to dismiss before navigating away, otherwise React Query's
+		// in-flight mutation gets cancelled by the navigation.
+		const deleteResponse = page.waitForResponse(
+			(r) => r.request().method() === 'DELETE' && /\/dashboards\//.test(r.url()),
+		);
+		await dialog.getByRole('button', { name: 'Delete' }).click();
+		await deleteResponse;
+		await expect(dialog).not.toBeVisible();
+
+		// After deletion, searching for the name should return no results.
+		await gotoDashboardsList(page);
+		await page.getByPlaceholder(SEARCH_PLACEHOLDER).fill(name);
+		await expect(page.getByAltText('dashboard-image')).toHaveCount(0);
+
+		// The UI delete already removed the resource — drop it from the
+		// suite-cleanup set so afterAll doesn't 404 on it.
+		seedIds.delete(id);
+	});
+
+	// ─── Row click navigation ────────────────────────────────────────────────
+
+	test('TC-22 clicking a dashboard row navigates to the detail page', async ({
+		authedPage: page,
+	}) => {
+		const name = 'dashboards-list-row-click';
+		await seed(page, name);
+
+		await gotoDashboardsList(page);
+		await page.getByPlaceholder(SEARCH_PLACEHOLDER).fill(name);
+
+		await page.getByAltText('dashboard-image').first().click();
+
+		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
+	});
+
+	test('TC-23 sidebar Dashboards link navigates to the list page', async ({
+		authedPage: page,
+	}) => {
+		await page.goto('/home');
+		// Sidebar items are <div class="nav-item"> with the label as visible
+		// text — they're not <a role="link">, so getByRole won't reach them.
+		// Filter on the exact label to avoid matching nested items that
+		// happen to contain the substring.
+		await page
+			.locator('.nav-item')
+			.filter({ hasText: /^Dashboards$/ })
+			.click();
+		await expect(page).toHaveURL(/\/dashboard/);
+		await expect(page).toHaveTitle('SigNoz | All Dashboards');
+	});
+
+	// ─── URL state and deep linking ──────────────────────────────────────────
+
+	test('TC-24 browser Back after navigating to a dashboard restores search state', async ({
+		authedPage: page,
+	}) => {
+		const name = 'dashboards-list-back-search';
+		await seed(page, name);
+
+		await page.goto(`/dashboard?search=${name}`);
+		await page
+			.getByRole('heading', { name: 'Dashboards', level: 1 })
+			.waitFor({ state: 'visible' });
+
+		await page.getByAltText('dashboard-image').first().click();
+		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
+
+		await page.goBack();
+		await expect(page).toHaveURL(new RegExp(`search=${name}`));
+		await expect(page.getByPlaceholder(SEARCH_PLACEHOLDER)).toHaveValue(name);
+	});
+
+	test('TC-25 direct navigation with sort params honours them on load', async ({
+		authedPage: page,
+	}) => {
+		await page.goto('/dashboard?columnKey=updatedAt&order=descend');
+		await page
+			.getByRole('heading', { name: 'Dashboards', level: 1 })
+			.waitFor({ state: 'visible' });
+		await expect(page).toHaveURL(/columnKey=updatedAt/);
+		await expect(page).toHaveURL(/order=descend/);
 	});
 });