test(dashboards): add the panel editor, config and dashboard list drivers

They target /api/v1/dashboards, which the backend now rejects, and have been skipped
since. Each behaviour is ported onto the drivers in the list and page specs.

docs/contributing/tests/e2e.md

@@ -128,7 +128,7 @@ test('TC-09 RouteTab switches the url', async ({ routing }) => {
 });
 ```
 
-- `driver(name, build)` adds a test-scoped fixture built on `authedPage`.
+- `driver(name, build, dispose?)` adds a test-scoped fixture built on `authedPage`. `dispose` runs after the test on the same page, so a driver can delete what it seeded.
 - `seeded(name, open, close)` adds a worker-scoped seed. `open` and `close` run on a throwaway admin page.
 - A driver reuses helpers by calling them, never by reaching for another fixture.
 - `drivers/` is AI-owned: coding agents generate and maintain it with the specs, and `.gitattributes` collapses it in diffs.

frontend/src/lib/uPlotV2/components/UPlotChart/UPlotChart.tsx

@@ -48,9 +48,6 @@ export default function UPlotChart({
 	const { setPlotContextInitialState } = usePlotContext();
 	const containerRef = useRef<HTMLDivElement>(null);
 	const plotInstanceRef = useRef<uPlot | null>(null);
-	// The container the live plot was created on. React detaches `containerRef`
-	// before effect cleanups run, so destroy clears this one, not the ref.
-	const plotHostRef = useRef<HTMLDivElement | null>(null);
 	const prevPropsRef = useRef<UPlotChartProps | null>(null);
 
 	/**
@@ -61,8 +58,7 @@ export default function UPlotChart({
 			onDestroy?.(plotInstanceRef.current);
 			plotInstanceRef.current.destroy();
 			plotInstanceRef.current = null;
-			setInstanceHandle(plotHostRef.current, null);
-			plotHostRef.current = null;
+			setInstanceHandle(containerRef.current, null);
 			setPlotContextInitialState({ uPlotInstance: null });
 			plotRef?.(null);
 		}
@@ -106,8 +102,7 @@ export default function UPlotChart({
 		});
 
 		plotInstanceRef.current = plot;
-		plotHostRef.current = containerRef.current;
-		setInstanceHandle(plotHostRef.current, plot);
+		setInstanceHandle(containerRef.current, plot);
 	}, [
 		config,
 		data,

frontend/src/lib/uPlotV2/components/__tests__/UPlotChart.test.tsx

@@ -352,57 +352,6 @@ describe('UPlotChart', () => {
 		});
 	});
 
-	describe('instance handle', () => {
-		const hostOf = (call: number): HTMLElement & { __uplot?: unknown } =>
-			mockUPlotConstructor.mock.calls[call][2];
-
-		it('hangs the live instance on the container it was created on', () => {
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={validData}
-					width={600}
-					height={400}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			expect(hostOf(0).__uplot).toBe(instances[0]);
-		});
-
-		it('clears the handle from that container on unmount', () => {
-			const { unmount } = render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={validData}
-					width={600}
-					height={400}
-				/>,
-				{ wrapper: Wrapper },
-			);
-			const host = hostOf(0);
-
-			unmount();
-
-			expect(host.__uplot).toBeUndefined();
-		});
-
-		it('clears the handle from that container when the data becomes empty', () => {
-			const config = createMockConfig();
-			const { rerender } = render(
-				<UPlotChart config={config} data={validData} width={600} height={400} />,
-				{ wrapper: Wrapper },
-			);
-			const host = hostOf(0);
-
-			rerender(
-				<UPlotChart config={config} data={emptyData} width={600} height={400} />,
-			);
-
-			expect(host.__uplot).toBeUndefined();
-		});
-	});
-
 	describe('spanGaps data transformation', () => {
 		it('inserts null break points before passing data to uPlot when a gap exceeds the numeric threshold', () => {
 			const config = createMockConfig();

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ListColumnsEditor/components/AddColumnDropdown/AddColumnDropdown.tsx

@@ -87,7 +87,7 @@ function AddColumnDropdown({
 								value={field.name}
 								isSelected={selectedNames.has(field.name)}
 								onSelect={(): void => onToggle(field)}
-								data-testid="list-columns-suggestion"
+								data-testid={`list-columns-suggestion-${field.name}`}
 							>
 								{field.name}
 							</ComboboxItem>

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ListColumnsEditor/components/SortableColumnChip/SortableColumnChip.tsx

@@ -37,7 +37,12 @@ function SortableColumnChip({
 	};
 
 	return (
-		<div ref={setNodeRef} style={style} className={styles.chip}>
+		<div
+			ref={setNodeRef}
+			style={style}
+			className={styles.chip}
+			data-testid={`list-column-chip-${name}`}
+		>
 			<span {...listeners} className={styles.grip}>
 				<Button
 					type="button"
@@ -61,7 +66,7 @@ function SortableColumnChip({
 				size="sm"
 				icon
 				aria-label={`Remove ${name}`}
-				testId="list-column-remove"
+				testId={`list-column-remove-${name}`}
 				onClick={(): void => onRemove(name)}
 			>
 				<X size={12} />

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.tsx

@@ -88,6 +88,7 @@ function PreviewPane(props: PreviewPaneProps): JSX.Element {
 	return (
 		<div
 			className={cx(styles.preview, { [styles.previewStatic]: !!staticDraft })}
+			data-testid="preview-pane"
 		>
 			{query && !query.hideHeader && (
 				<div className={styles.header}>

frontend/src/pages/DashboardPage/DashboardContainer/Panels/components/ResizableTable/ResizableHeader.tsx

@@ -16,6 +16,8 @@ export interface ResizableHeaderProps extends Omit<
 > {
 	width?: number;
 	onResize?: (e: SyntheticEvent<Element>, data: ResizeCallbackData) => void;
+	/** Column key, used only to give the drag grip a stable test handle. */
+	columnKey?: string;
 }
 
 /**
@@ -27,6 +29,7 @@ export interface ResizableHeaderProps extends Omit<
 function ResizableHeader({
 	width,
 	onResize,
+	columnKey,
 	...restProps
 }: ResizableHeaderProps): JSX.Element {
 	const handle = useMemo(
@@ -34,13 +37,14 @@ function ResizableHeader({
 			<span
 				className={styles.handle}
 				role="presentation"
+				data-testid={columnKey ? `column-resize-${columnKey}` : undefined}
 				// Stop the grip's click from reaching the column sorter underneath.
 				// The grip is a pointer-only resize affordance, not keyboard-actionable.
 				// oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
 				onClick={(e): void => e.stopPropagation()}
 			/>
 		),
-		[],
+		[columnKey],
 	);
 
 	if (!width || !onResize) {
@@ -64,6 +68,7 @@ function ResizableHeader({
 ResizableHeader.defaultProps = {
 	width: undefined,
 	onResize: undefined,
+	columnKey: undefined,
 };
 
 export default ResizableHeader;

frontend/src/pages/DashboardPage/DashboardContainer/Panels/hooks/useResizableColumns.ts

@@ -132,6 +132,7 @@ export function useResizableColumns<T>({
 					onHeaderCell: (): ResizableHeaderProps => ({
 						width,
 						onResize: key && width ? handleResize(key) : undefined,
+						columnKey: key,
 					}),
 				} as Column<T>;
 			}),

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader.tsx

@@ -104,7 +104,9 @@ function PanelHeader(props: PanelHeaderProps): JSX.Element {
 	return (
 		<div className={cx(styles.header, 'panel-drag-handle')}>
 			<div className={styles.headerLeft}>
-				<Typography.Text className={styles.headerTitle}>{name}</Typography.Text>
+				<Typography.Text className={styles.headerTitle} data-testid="panel-title">
+					{name}
+				</Typography.Text>
 				{description && (
 					<Tooltip title={description}>
 						<Info

frontend/src/pages/DashboardPage/PanelEditorPage/stories/PanelEditorPage.stories.tsx

@@ -99,7 +99,7 @@ export const ListPanelAddColumnOpen: Story = {
 				timeout: 10_000,
 			}),
 		);
-		await screen.findAllByTestId('list-columns-suggestion');
+		await screen.findAllByTestId(/^list-columns-suggestion-/);
 	},
 };
 

tests/e2e/drivers/dashboard-list.ts

@@ -0,0 +1,376 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { randomBytes } from 'crypto';
+
+import { expect, type Locator, type Page } from '@playwright/test';
+
+import { BASE_PATH } from '../helpers/base-path';
+import {
+	buildDashboard,
+	type PostableDashboard,
+	type Tag,
+} from '../helpers/dashboard-spec';
+
+import {
+	DASHBOARDS_API,
+	removeTrackedDashboards,
+	trackDashboard,
+} from './dashboards';
+import { driver } from './kit';
+import { test as editorTest } from './panel-editor';
+
+// The dashboards list page (`/dashboard`): the DSL search, sort, the New
+// dashboard modal and the per-row actions menu.
+
+const LIST_PATH = '/dashboard';
+
+/** The list route, with or without a query string. */
+export const LIST_URL = /\/dashboard(\?|$)/;
+
+/** Workers and browser projects share one backend, so names carry a random suffix. */
+export function uniqueName(label: string): string {
+	return `e2e list ${label} ${randomBytes(4).toString('hex')}`;
+}
+
+/** The list filter DSL, which the search box and the `query` param carry. */
+export function nameContains(text: string): string {
+	return `name CONTAINS '${text}'`;
+}
+
+/** A panel-less dashboard: the list only needs its name and tags. */
+export function listDashboard(
+	title: string,
+	tags: Tag[] = [],
+): PostableDashboard {
+	return buildDashboard({ title, sections: [], tags });
+}
+
+export type SortColumn = 'name' | 'created' | 'updated';
+export type SortOrder = 'asc' | 'desc';
+
+const SORT_OPTION: Record<SortColumn, string> = {
+	name: 'sort-by-name',
+	created: 'sort-by-last-created',
+	updated: 'sort-by-last-updated',
+};
+
+/** Row-menu items by the suffix of their `dashboard-action-<id>` test id. */
+export type RowAction =
+	| 'view'
+	| 'open-new-tab'
+	| 'copy-link'
+	| 'rename'
+	| 'edit-tags'
+	| 'duplicate'
+	| 'lock'
+	| 'delete';
+
+export type NewDashboardTab = 'Blank' | 'From a template' | 'Import JSON';
+
+/** A dashboard route, not the list or an editor route. */
+const DASHBOARD_ROUTE = /\/dashboard\/([^/?#]+)(?:[?#]|$)/;
+
+export interface NewDashboardFields {
+	name: string;
+	description?: string;
+	/** `key:value`, each committed with Enter. */
+	tags?: string[];
+}
+
+export interface DashboardList {
+	/** Narrowed by the `query` param to one name, since the list is paged. */
+	open(
+		name?: string,
+		sort?: { sort?: 'name' | 'created_at' | 'updated_at'; order?: SortOrder },
+	): Promise<void>;
+	newDashboardButton(): Locator;
+	nameInput(): Locator;
+	descriptionInput(): Locator;
+	tagsInput(): Locator;
+	tagChips(): Locator;
+	submit(): Locator;
+	/**
+	 * Fills and submits the Blank tab, then returns the id from the route it
+	 * lands on. The dashboard is deleted when the test ends.
+	 */
+	create(fields: NewDashboardFields): Promise<string>;
+	/** Rows render titles in `dashboard-title-<index>`, not by id. */
+	rowTitle(name: string): Locator;
+	/** Opens the row's actions menu and confirms Delete. */
+	delete(name: string): Promise<void>;
+
+	/** The page's own heading, named after the active view. */
+	heading(): Locator;
+	feedbackButton(): Locator;
+	shareButton(): Locator;
+	/** The search box's editable content (a CodeMirror editor). */
+	search(): Locator;
+	/** Shown only while the search box is empty. */
+	searchPlaceholder(): Locator;
+	/** Replaces the draft and runs it, as Run query does. */
+	runSearch(query: string): Promise<void>;
+	clearFilters(): Locator;
+	noResults(): Locator;
+	rows(): Locator;
+	/** Clicks the row's title and waits for its dashboard route. */
+	openRow(name: string): Promise<void>;
+
+	sortButton(): Locator;
+	sortBy(column: SortColumn): Promise<void>;
+	sortOrder(order: SortOrder): Promise<void>;
+
+	openRowMenu(name: string): Promise<void>;
+	rowMenu(): Locator;
+	rowMenuItems(): Locator;
+	rowAction(action: RowAction): Locator;
+	/** Clicks the list heading, outside the open menu. */
+	clickOutside(): Promise<void>;
+	/** Resolves with the tab Open in New Tab opens. */
+	openInNewTab(name: string): Promise<Page>;
+	/** Copies the row's link and returns the copied text. */
+	copyLink(name: string): Promise<string>;
+	/** Opens the delete confirmation without answering it. */
+	requestDelete(name: string): Promise<Locator>;
+	cancelDelete(): Promise<void>;
+
+	newDashboardDialog(): Locator;
+	openNewDashboard(tab?: NewDashboardTab): Promise<void>;
+	newDashboardTabs(): Locator;
+	jsonEditor(): Locator;
+	uploadJsonButton(): Locator;
+	importJsonSubmit(): Locator;
+	/** Escape from the dialog title, since the JSON editor keeps Escape. */
+	dismissWithEscape(): Promise<void>;
+	closeDialog(): Promise<void>;
+
+	/** Sidebar entries are `div.nav-item`, not links. */
+	sidebarDashboards(): Locator;
+	back(): Promise<void>;
+}
+
+function dashboardListDriver(page: Page): DashboardList {
+	const rowTitle = (name: string): Locator =>
+		page
+			.locator('[data-testid^="dashboard-title-"]')
+			.filter({ hasText: new RegExp(`^${escapeRegExp(name)}$`) });
+
+	const rowOf = (name: string): Locator =>
+		rowTitle(name).locator(
+			'xpath=ancestor::div[.//*[@data-testid="dashboard-action-icon"]][1]',
+		);
+	const search = (): Locator =>
+		page.getByTestId('dashboards-list-search').locator('.cm-content');
+	const rowMenu = (): Locator => page.getByRole('menu', { name: 'Action' });
+	const newDashboardDialog = (): Locator =>
+		page.getByRole('dialog', { name: 'New dashboard' });
+	// The antd confirm carries no test id.
+	const deleteConfirm = (): Locator => page.locator('.ant-modal-confirm');
+
+	// The sort popover stays open after a pick, and its trigger toggles it.
+	const pickSortOption = async (testId: string): Promise<void> => {
+		const option = page.getByTestId(testId);
+		if (!(await option.isVisible())) {
+			await page.getByTestId('sort-by').click();
+		}
+		await option.click();
+	};
+
+	const list: DashboardList = {
+		async open(name, sort = {}) {
+			const params = new URLSearchParams(
+				Object.entries({
+					query: name ? nameContains(name) : undefined,
+					...sort,
+				}).filter((entry): entry is [string, string] => entry[1] !== undefined),
+			).toString();
+			const search = params ? `?${params}` : '';
+			await page.goto(`${LIST_PATH}${search}`);
+			await expect(list.newDashboardButton()).toBeVisible();
+		},
+		newDashboardButton: () => page.getByTestId('new-dashboard-cta'),
+		nameInput: () => page.getByTestId('create-dashboard-name'),
+		descriptionInput: () => page.getByTestId('create-dashboard-description'),
+		tagsInput: () => page.getByTestId('create-dashboard-tags'),
+		tagChips: () => page.getByTestId('create-dashboard-tags-chip'),
+		submit: () => page.getByTestId('create-dashboard-submit'),
+		async create({ name, description, tags = [] }) {
+			await list.newDashboardButton().click();
+			await list.nameInput().fill(name);
+			if (description !== undefined) {
+				await list.descriptionInput().fill(description);
+			}
+			for (const tag of tags) {
+				await list.tagsInput().fill(tag);
+				await list.tagsInput().press('Enter');
+			}
+			await expect(list.tagChips()).toHaveCount(tags.length);
+
+			const [response] = await Promise.all([
+				page.waitForResponse(
+					(r) =>
+						r.request().method() === 'POST' &&
+						// The app is served under the base path, and so is its API.
+						new URL(r.url()).pathname === `${BASE_PATH}${DASHBOARDS_API}`,
+				),
+				list.submit().click(),
+			]);
+			// Tracked from the response, before the route settles, so a failed
+			// navigation still cleans up.
+			expect(response.ok(), `POST ${DASHBOARDS_API} failed`).toBe(true);
+			const created = ((await response.json()) as { data: { id: string } }).data
+				.id;
+			trackDashboard(page, created);
+
+			await page.waitForURL(DASHBOARD_ROUTE);
+			const id = DASHBOARD_ROUTE.exec(new URL(page.url()).pathname)?.[1];
+			expect(id).toBe(created);
+			return created;
+		},
+		rowTitle,
+		async delete(name) {
+			const confirm = await list.requestDelete(name);
+			await Promise.all([
+				page.waitForResponse(
+					(r) =>
+						r.request().method() === 'DELETE' &&
+						r.url().includes(`${DASHBOARDS_API}/`),
+				),
+				confirm.getByRole('button', { name: 'Delete', exact: true }).click(),
+			]);
+		},
+
+		heading: () => page.getByRole('heading', { level: 1 }),
+		feedbackButton: () => page.getByRole('button', { name: 'Feedback' }),
+		shareButton: () => page.getByRole('button', { name: 'Share' }),
+		search,
+		searchPlaceholder: () => search().locator('.cm-placeholder'),
+		async runSearch(query) {
+			await search().click();
+			await page.keyboard.press('ControlOrMeta+A');
+			await page.keyboard.insertText(query);
+			await expect(search()).toHaveText(query);
+			await page.getByTestId('dashboards-list-search-submit').click();
+			await page.waitForURL(
+				(url) => (url.searchParams.get('query') ?? '') === query.trim(),
+			);
+		},
+		clearFilters: () => page.getByTestId('dashboards-filter-clear'),
+		noResults: () => page.getByText(/^No dashboards match/),
+		rows: () => page.locator('[data-testid^="dashboard-title-"]'),
+		async openRow(name) {
+			await rowTitle(name).click();
+			await page.waitForURL(DASHBOARD_ROUTE);
+		},
+
+		sortButton: () => page.getByTestId('sort-by'),
+		async sortBy(column) {
+			await pickSortOption(SORT_OPTION[column]);
+		},
+		async sortOrder(order) {
+			await pickSortOption(`sort-order-${order}`);
+		},
+
+		async openRowMenu(name) {
+			await rowOf(name).getByTestId('dashboard-action-icon').click();
+			await expect(rowMenu()).toBeVisible();
+		},
+		rowMenu,
+		rowMenuItems: () => rowMenu().getByRole('menuitem'),
+		rowAction: (action) => page.getByTestId(`dashboard-action-${action}`),
+		async clickOutside() {
+			// The open menu makes the rest of the page inert to locator clicks.
+			const box = await list.heading().boundingBox();
+			expect(box, 'list heading has no box').not.toBeNull();
+			const { x, y, width, height } = box as NonNullable<typeof box>;
+			await page.mouse.click(x + width / 2, y + height / 2);
+		},
+		async openInNewTab(name) {
+			await list.openRowMenu(name);
+			const [tab] = await Promise.all([
+				page.context().waitForEvent('page'),
+				list.rowAction('open-new-tab').click(),
+			]);
+			await tab.waitForLoadState();
+			return tab;
+		},
+		async copyLink(name) {
+			// Clipboard permissions are Chromium-only, so the copy is caught in the
+			// page: react-use copies through a selection and execCommand, whose
+			// `copy` event a capture listener sees first.
+			await page.evaluate(() => {
+				const w = window as unknown as { __copied?: string };
+				delete w.__copied;
+				document.addEventListener(
+					'copy',
+					() => {
+						w.__copied = document.getSelection()?.toString() ?? '';
+					},
+					{ capture: true, once: true },
+				);
+			});
+			await list.openRowMenu(name);
+			await list.rowAction('copy-link').click();
+			await expect(rowMenu()).toBeHidden();
+			const copied = (): Promise<string | undefined> =>
+				page.evaluate(() => (window as unknown as { __copied?: string }).__copied);
+			await expect.poll(copied).toBeTruthy();
+			return (await copied()) as string;
+		},
+		async requestDelete(name) {
+			await list.openRowMenu(name);
+			await list.rowAction('delete').click();
+			await expect(deleteConfirm()).toContainText(name);
+			return deleteConfirm();
+		},
+		async cancelDelete() {
+			await deleteConfirm().getByRole('button', { name: 'Cancel' }).click();
+			await expect(deleteConfirm()).toBeHidden();
+		},
+
+		newDashboardDialog,
+		async openNewDashboard(tab) {
+			await list.newDashboardButton().click();
+			await expect(newDashboardDialog()).toBeVisible();
+			if (tab) {
+				await newDashboardDialog().getByRole('tab', { name: tab }).click();
+			}
+		},
+		newDashboardTabs: () => newDashboardDialog().getByRole('tab'),
+		jsonEditor: () => newDashboardDialog().locator('.monaco-editor'),
+		uploadJsonButton: () => page.getByTestId('upload-json-file'),
+		importJsonSubmit: () => page.getByTestId('import-json-submit'),
+		async dismissWithEscape() {
+			await newDashboardDialog()
+				.getByRole('heading', { name: 'New dashboard' })
+				.click();
+			await page.keyboard.press('Escape');
+		},
+		async closeDialog() {
+			await newDashboardDialog().getByRole('button', { name: 'Close' }).click();
+		},
+
+		sidebarDashboards: () =>
+			page.locator('.nav-item').filter({ hasText: /^Dashboards$/ }),
+		async back() {
+			await page.goBack();
+		},
+	};
+
+	return list;
+}
+
+function escapeRegExp(text: string): string {
+	return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+const withDashboardList = driver(
+	'dashboardList',
+	({ page }) => dashboardListDriver(page),
+	(_, { page }) => removeTrackedDashboards(page),
+);
+
+export const test = withDashboardList(editorTest);
+
+export * from './panel-editor';

tests/e2e/drivers/dashboards.ts

@@ -0,0 +1,348 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import {
+	expect,
+	type Locator,
+	type Page,
+	type Request,
+	type Route,
+} from '@playwright/test';
+
+import { BASE_PATH } from '../helpers/base-path';
+import { authToken } from '../helpers/common';
+import type { PostableDashboard } from '../helpers/dashboard-spec';
+import {
+	mockQueryRange,
+	mockQueryRangeError,
+	type MockOptions,
+	type QueryRangeBody,
+	unmockQueryRange,
+} from '../helpers/query-range-mock';
+
+import { driver, kit } from './kit';
+
+// `POST /api/v2/dashboards` takes the full perses spec in one call.
+
+export const DASHBOARDS_API = '/api/v2/dashboards';
+
+const QUERY_RANGE_GLOB = '**/api/v5/query_range';
+
+export const PATH = {
+	dashboard: (id: string): string => `/dashboard/${id}`,
+	/** `panelId` is 'new' for creation. */
+	editor: (id: string, panelId: string): string =>
+		`/dashboard/${id}/panel/${panelId}`,
+	/** Matches the dashboard route itself, with or without a query string. */
+	onDashboard: (id: string): RegExp => new RegExp(`/dashboard/${id}(\\?|$)`),
+	/** Matches the dashboard route once the View modal has written its params. */
+	onDashboardWithParams: (id: string): RegExp =>
+		new RegExp(`/dashboard/${id}\\?`),
+	newPanel: /\/panel\/new\?/,
+} as const;
+
+/**
+ * `panel-editor-v2` is not unique: the ResizablePanelGroup derives the same
+ * testid from its `id`, which is also its localStorage layout key.
+ */
+export const EDITOR_ROOT = '[data-testid="panel-editor-v2"]:not([data-group])';
+
+export interface GettableDashboard {
+	id: string;
+	name: string;
+	locked: boolean;
+	tags: { key: string; value: string }[];
+	spec: PostableDashboard['spec'];
+}
+
+export interface Dashboards {
+	/** Created for this test and deleted when it ends. */
+	seed(dashboard: PostableDashboard): Promise<string>;
+	seedAndOpen(dashboard: PostableDashboard): Promise<string>;
+	seedAndEdit(dashboard: PostableDashboard, panelId: string): Promise<string>;
+	/** The open dashboard's heading. */
+	title(): Locator;
+	/** Waits for the grid, not just the shell. */
+	open(id: string): Promise<void>;
+	/** For a dashboard with no panels: waits for the empty state instead. */
+	openEmpty(id: string): Promise<void>;
+	openEditor(id: string, panelId: string): Promise<void>;
+	/** Navigates without waiting for anything, for routes expected to redirect. */
+	visit(path: string): Promise<void>;
+	/**
+	 * A client-side route change, as a link would make: no reload, so only a
+	 * router blocker could stop it. For screens with no link to the target.
+	 */
+	navigateInApp(path: string): Promise<void>;
+	reload(): Promise<void>;
+	get(id: string): Promise<GettableDashboard>;
+	setLocked(id: string, locked: boolean): Promise<void>;
+	/** A panel's grid geometry as persisted, not as rendered. */
+	gridItem(id: string, panelId: string): Promise<GridGeometry>;
+	/** A query param of the current URL, where the time window lives. */
+	param(name: string): string | null;
+	emptyAddPanel(): Locator;
+	headerAddPanel(): Locator;
+	zoomOut(): Locator;
+	variable(name: string): Locator;
+	confirmDelete(): Locator;
+	/** Free text anywhere on the page, e.g. a confirm dialog's title. */
+	text(text: string): Locator;
+}
+
+export interface GridGeometry {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+
+export interface QueryRangeMock {
+	/** Fulfils every call with one body. Install before navigating. */
+	respond(body: QueryRangeBody, options?: MockOptions): Promise<void>;
+	fail(
+		message?: string,
+		options?: MockOptions & { status?: number },
+	): Promise<void>;
+	/** Holds every call until `release` is called, then serves `body`. */
+	hold(body: QueryRangeBody): Promise<{ release: () => void }>;
+	/** Drops interception so later calls reach the backend. */
+	reset(): Promise<void>;
+	/** Resolves with the next query_range request. */
+	nextRequest(): Promise<Request>;
+	/** The window of every query_range request from now on. */
+	recordWindows(): QueryWindow[];
+}
+
+/** A query_range request's `start` / `end`, in epoch ms, and which query it ran. */
+export interface QueryWindow {
+	start: number;
+	end: number;
+	/** The request type and composite query, serialized: equal for the same panel. */
+	query: string;
+}
+
+async function bearer(page: Page): Promise<{ Authorization: string }> {
+	return { Authorization: `Bearer ${await authToken(page)}` };
+}
+
+/**
+ * A 400 is almost always the strict decoder rejecting a stray key; the body
+ * names the field, so it is surfaced verbatim.
+ */
+async function createViaApi(
+	page: Page,
+	dashboard: PostableDashboard,
+): Promise<string> {
+	const res = await page.request.post(DASHBOARDS_API, {
+		data: dashboard,
+		headers: await bearer(page),
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`POST ${DASHBOARDS_API} ${res.status()}: ${await res.text()}`,
+		);
+	}
+	return ((await res.json()) as { data: GettableDashboard }).data.id;
+}
+
+export async function getViaApi(
+	page: Page,
+	id: string,
+): Promise<GettableDashboard> {
+	const res = await page.request.get(`${DASHBOARDS_API}/${id}`, {
+		headers: await bearer(page),
+	});
+	if (!res.ok()) {
+		throw new Error(
+			`GET ${DASHBOARDS_API}/${id} ${res.status()}: ${await res.text()}`,
+		);
+	}
+	return ((await res.json()) as { data: GettableDashboard }).data;
+}
+
+/** Same path, no body: PUT locks, DELETE unlocks. */
+async function setLockedViaApi(
+	page: Page,
+	id: string,
+	locked: boolean,
+): Promise<void> {
+	const url = `${DASHBOARDS_API}/${id}/lock`;
+	const headers = await bearer(page);
+	const res = locked
+		? await page.request.put(url, { headers })
+		: await page.request.delete(url, { headers });
+	if (!res.ok()) {
+		throw new Error(
+			`${locked ? 'PUT' : 'DELETE'} ${url} ${res.status()}: ${await res.text()}`,
+		);
+	}
+}
+
+const trackedByPage = new WeakMap<Page, string[]>();
+
+/** Registers a dashboard for deletion when the test owning `page` ends. */
+export function trackDashboard(page: Page, id: string): void {
+	trackedByPage.set(page, [...(trackedByPage.get(page) ?? []), id]);
+}
+
+/**
+ * Not asserted: a test that deleted its own dashboard, or left a closed page
+ * behind, must not fail on cleanup.
+ */
+export async function removeTrackedDashboards(page: Page): Promise<void> {
+	const ids = trackedByPage.get(page) ?? [];
+	trackedByPage.delete(page);
+	if (ids.length === 0) {
+		return;
+	}
+	try {
+		const headers = await bearer(page);
+		for (const id of ids) {
+			await page.request
+				.delete(`${DASHBOARDS_API}/${id}`, { headers })
+				.catch(() => undefined);
+		}
+	} catch {
+		/* the dashboards outlive the run rather than hiding why it failed */
+	}
+}
+
+function dashboardsDriver(page: Page): Dashboards {
+	const editorRoot = (): Locator => page.locator(EDITOR_ROOT);
+
+	const dashboards: Dashboards = {
+		async seed(dashboard) {
+			const id = await createViaApi(page, dashboard);
+			trackDashboard(page, id);
+			return id;
+		},
+		title: () => page.getByTestId('dashboard-title'),
+		async seedAndOpen(dashboard) {
+			const id = await dashboards.seed(dashboard);
+			await dashboards.open(id);
+			return id;
+		},
+		async seedAndEdit(dashboard, panelId) {
+			const id = await dashboards.seed(dashboard);
+			await dashboards.openEditor(id, panelId);
+			return id;
+		},
+		async open(id) {
+			await page.goto(PATH.dashboard(id));
+			await page
+				.locator('[data-panel-root]')
+				.first()
+				.waitFor({ state: 'attached' });
+		},
+		async openEmpty(id) {
+			await page.goto(PATH.dashboard(id));
+			await expect(dashboards.emptyAddPanel()).toBeVisible();
+		},
+		async openEditor(id, panelId) {
+			await page.goto(PATH.editor(id, panelId));
+			await expect(editorRoot()).toBeVisible();
+		},
+		async visit(path) {
+			await page.goto(path);
+		},
+		async navigateInApp(path) {
+			await page.evaluate((target) => {
+				window.history.pushState({}, '', target);
+				window.dispatchEvent(new PopStateEvent('popstate', { state: {} }));
+			}, `${BASE_PATH}${path}`);
+		},
+		async reload() {
+			await page.reload();
+		},
+		get: (id) => getViaApi(page, id),
+		setLocked: (id, locked) => setLockedViaApi(page, id, locked),
+		async gridItem(id, panelId) {
+			const { spec } = await getViaApi(page, id);
+			for (const layout of spec.layouts) {
+				const item = layout.spec.items.find(
+					(candidate) => candidate.content.$ref === `#/spec/panels/${panelId}`,
+				);
+				if (item) {
+					return { x: item.x, y: item.y, width: item.width, height: item.height };
+				}
+			}
+			throw new Error(`no grid item for panel ${panelId}`);
+		},
+		param: (name) => new URL(page.url()).searchParams.get(name),
+		emptyAddPanel: () => page.getByTestId('add-panel'),
+		headerAddPanel: () => page.getByTestId('add-panel-header'),
+		zoomOut: () => page.getByTestId('zoom-out-btn'),
+		variable: (name) => page.getByTestId(`variable-${name}`),
+		confirmDelete: () => page.getByTestId('confirm-delete'),
+		text: (text) => page.getByText(text),
+	};
+
+	return dashboards;
+}
+
+function queryRangeDriver(page: Page): QueryRangeMock {
+	const isQueryRange = (url: string): boolean => url.includes('/query_range');
+
+	return {
+		respond: (body, options) => mockQueryRange(page, body, options),
+		fail: (message, options) => mockQueryRangeError(page, message, options),
+		async hold(body) {
+			let release: () => void = () => undefined;
+			const gate = new Promise<void>((resolve) => {
+				release = resolve;
+			});
+			await page.route(QUERY_RANGE_GLOB, async (route: Route) => {
+				await gate;
+				await route.fulfill({
+					status: 200,
+					contentType: 'application/json',
+					body: JSON.stringify(body),
+				});
+			});
+			return { release: () => release() };
+		},
+		reset: () => unmockQueryRange(page),
+		nextRequest: () => page.waitForRequest((r) => isQueryRange(r.url())),
+		recordWindows() {
+			const windows: QueryWindow[] = [];
+			page.on('request', (request) => {
+				if (!isQueryRange(request.url())) {
+					return;
+				}
+				const body = request.postDataJSON() as {
+					start?: unknown;
+					end?: unknown;
+					requestType?: unknown;
+					compositeQuery?: unknown;
+				} | null;
+				if (typeof body?.start === 'number' && typeof body.end === 'number') {
+					windows.push({
+						start: body.start,
+						end: body.end,
+						query: JSON.stringify([body.requestType, body.compositeQuery]),
+					});
+				}
+			});
+			return windows;
+		},
+	};
+}
+
+const withDashboards = driver(
+	'dashboards',
+	({ page }) => dashboardsDriver(page),
+	(_, { page }) => removeTrackedDashboards(page),
+);
+
+const withQueryRange = driver('queryRange', ({ page }) =>
+	queryRangeDriver(page),
+);
+
+export const test = withQueryRange(withDashboards(kit));
+
+export { expect } from './kit';
+export * from '../helpers/dashboard-spec';
+export { heatmapPoints, QueryRange, ramp } from '../helpers/query-range-mock';
+export * from '../testdata/dashboards/panels';

tests/e2e/drivers/kit.ts

@@ -27,10 +27,15 @@ export type WorkerLayer<Adds> = <T extends object, W extends object>(
 	base: TestType<T, W>,
 ) => TestType<T, W & Adds>;
 
-/** A `withX` layer binding `build` to the authenticated page. */
+/**
+ * A `withX` layer binding `build` to the authenticated page. `dispose` runs
+ * after the test while the page is still open, so it can clean up over the
+ * same session.
+ */
 export function driver<Name extends string, T>(
 	name: Name,
 	build: (ctx: DriverContext) => T,
+	dispose?: (value: T, ctx: DriverContext) => Promise<void>,
 ): Layer<{ [K in Name]: T }> {
 	const fixture = {
 		// Playwright reads fixture dependencies from the source text, so
@@ -39,7 +44,11 @@ export function driver<Name extends string, T>(
 			{ authedPage }: { authedPage: Page },
 			use: (value: T) => Promise<void>,
 		) => {
-			await use(build({ page: authedPage }));
+			const value = build({ page: authedPage });
+			await use(value);
+			if (dispose) {
+				await dispose(value, { page: authedPage });
+			}
 		},
 	};
 	return ((test: TestType<Fixtures, Fixtures>) =>

tests/e2e/drivers/panel-config.ts

@@ -0,0 +1,105 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { type Locator, type Page } from '@playwright/test';
+
+import type { ContextLink, PanelPluginSpec } from '../helpers/dashboard-spec';
+import { SINGLE_PANEL_ID } from '../testdata/dashboards/panels';
+
+import { getViaApi } from './dashboards';
+import { driver } from './kit';
+import { test as editorTest } from './panel-editor';
+
+// The panel editor's config editors with UI of their own: thresholds and
+// context links.
+
+/** The label variant TimeSeries, Bar and Area use. */
+export interface ThresholdRow {
+	value(): Locator;
+	label(): Locator;
+	save(): Locator;
+}
+
+export interface Thresholds {
+	addButton(): Locator;
+	row(index: number): ThresholdRow;
+}
+
+export interface ContextLinks {
+	addButton(): Locator;
+	headerAdd(): Locator;
+	dialog(): Locator;
+	label(): Locator;
+	url(): Locator;
+	save(): Locator;
+	cancel(): Locator;
+	addParam(): Locator;
+	paramKey(index: number): Locator;
+	paramValue(index: number): Locator;
+	item(index: number): Locator;
+	edit(index: number): Locator;
+	remove(index: number): Locator;
+	/**
+	 * Closes the URL field's suggestion popover, which otherwise keeps the
+	 * dialog reflowing so buttons never settle. Escape would dismiss the whole
+	 * dialog.
+	 */
+	blurFields(): Promise<void>;
+}
+
+export interface SavedPanel {
+	plugin: PanelPluginSpec;
+	links: ContextLink[];
+}
+
+export interface PanelConfig {
+	thresholds: Thresholds;
+	contextLinks: ContextLinks;
+	/** The plugin spec and links as persisted, straight from the API. */
+	saved(dashboardId: string, panelId?: string): Promise<SavedPanel>;
+}
+
+function panelConfigDriver(page: Page): PanelConfig {
+	const contextLinkLabel = (): Locator => page.getByTestId('context-link-label');
+
+	return {
+		thresholds: {
+			addButton: () => page.getByTestId('panel-editor-v2-add-threshold'),
+			row: (index) => ({
+				value: () => page.getByTestId(`threshold-value-${index}`),
+				label: () => page.getByTestId(`threshold-label-${index}`),
+				save: () => page.getByTestId(`threshold-save-${index}`),
+			}),
+		},
+		contextLinks: {
+			addButton: () => page.getByTestId('panel-editor-v2-add-link'),
+			headerAdd: () => page.getByTestId('panel-editor-v2-add-link-header'),
+			dialog: () => page.getByTestId('context-link-dialog'),
+			label: contextLinkLabel,
+			url: () => page.getByTestId('context-link-url'),
+			save: () => page.getByTestId('context-link-save'),
+			cancel: () => page.getByTestId('context-link-cancel'),
+			addParam: () => page.getByTestId('context-link-add-param'),
+			paramKey: (index) => page.getByTestId(`context-link-param-key-${index}`),
+			paramValue: (index) => page.getByTestId(`context-link-param-value-${index}`),
+			item: (index) => page.getByTestId(`context-link-item-${index}`),
+			edit: (index) => page.getByTestId(`context-link-edit-${index}`),
+			remove: (index) => page.getByTestId(`context-link-remove-${index}`),
+			async blurFields() {
+				await contextLinkLabel().focus();
+			},
+		},
+		async saved(dashboardId, panelId = SINGLE_PANEL_ID) {
+			const { spec } = await getViaApi(page, dashboardId);
+			const panel = spec.panels[panelId].spec;
+			return { plugin: panel.plugin.spec, links: panel.links ?? [] };
+		},
+	};
+}
+
+const withPanelConfig = driver('config', ({ page }) => panelConfigDriver(page));
+
+export const test = withPanelConfig(editorTest);
+
+export * from './panel-editor';

tests/e2e/drivers/panel-editor.ts

@@ -0,0 +1,246 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { expect, type Locator, type Page } from '@playwright/test';
+
+import { PanelKind } from '../helpers/dashboard-spec';
+
+import { EDITOR_ROOT } from './dashboards';
+import { driver } from './kit';
+import { newPanelDriver } from './panel-editor/picker';
+import { type QueryPane, queryPaneAt } from './panel-editor/query';
+import { type EditorSelects, selectsAt } from './panel-editor/select';
+import { type TextPane, textPaneAt } from './panel-editor/text';
+import {
+	type TypeSwitcher,
+	typeSwitcherAt,
+} from './panel-editor/type-switcher';
+import {
+	type Chart,
+	chartAt,
+	type Markdown,
+	markdownAt,
+	RENDERER_TESTID,
+	test as panelsTest,
+} from './panels';
+
+// The panel editor; config sections only mount their editors while open.
+// Each pane lives in its own part under ./panel-editor.
+
+export const EditorText = {
+	title: 'Configure panel',
+	lockedReason: 'This dashboard is locked',
+	runQuery: 'Run Query',
+} as const;
+
+export const QueryTab = {
+	promql: 'PromQL',
+} as const;
+
+/** SettingsSection titles as rendered. */
+export const Section = {
+	visualization: 'Visualization',
+	formatting: 'Formatting & Units',
+	axes: 'Axes',
+	legend: 'Legend',
+	chartAppearance: 'Chart Appearance',
+	thresholds: 'Thresholds',
+	contextLinks: 'Context Links',
+	/** Text only. */
+	panelAppearance: 'Panel appearance',
+} as const;
+
+/** Config controls, each testid'd as `panel-editor-v2-<name>`. */
+export type EditorControl =
+	| 'soft-min'
+	| 'soft-max'
+	| 'decimals'
+	| 'legend-position';
+
+export interface PatchOperation {
+	op: string;
+	path: string;
+	value?: unknown;
+}
+
+export interface PanelEditor extends EditorSelects, TypeSwitcher {
+	root(): Locator;
+	title(): Locator;
+	description(): Locator;
+	saveButton(): Locator;
+	unsavedBadge(): Locator;
+	switchToView(): Locator;
+	/** Save is not gated on dirty state; fails the test on a rejected PATCH. */
+	save(): Promise<void>;
+	/** Clicks Save and returns whether the PATCH was accepted, for rejection paths. */
+	trySave(): Promise<{ ok: boolean; body: string }>;
+	/**
+	 * A dirty panel raises the discard dialog; `expectDirty` answers it, with
+	 * `keepEditing` choosing Cancel over Discard.
+	 */
+	close(options?: {
+		expectDirty?: boolean;
+		keepEditing?: boolean;
+	}): Promise<void>;
+	discardModal(): Locator;
+	/** Records the RFC-6902 ops each save sends. */
+	capturePatches(): PatchOperation[][];
+	section: {
+		toggle(title: string): Locator;
+		/** Idempotent: a blind click on an open section collapses it. */
+		expand(title: string): Promise<void>;
+		collapse(title: string): Promise<void>;
+	};
+	control(name: EditorControl): Locator;
+	/**
+	 * A ConfigTiles choice. The radio input is visually hidden, so the label
+	 * carrying `<group testid>-<value>` is the click target.
+	 */
+	tile(name: EditorControl, value: string): Locator;
+	setTile(name: EditorControl, value: string): Promise<void>;
+	/** The tile's radio input, for `toBeChecked`. */
+	tileInput(name: EditorControl, value: string): Locator;
+	/**
+	 * Whether a refresh or tab close would be held by the editor's
+	 * `beforeunload` prompt, checked without leaving the page.
+	 */
+	blocksUnload(): Promise<boolean>;
+	text: TextPane;
+	/** The heading text, which carries no testid. */
+	heading(): Locator;
+	/** A disabled Save swallows pointer events, so this hovers its tooltip trigger. */
+	hoverSave(): Promise<void>;
+	query: QueryPane;
+	preview: {
+		root(): Locator;
+		renderer(kind: PanelKind): Locator;
+		chart: Chart;
+		markdown: Markdown;
+	};
+}
+
+function isDashboardPatch(method: string, url: string): boolean {
+	return method === 'PATCH' && /\/api\/v2\/dashboards\//.test(url);
+}
+
+function editorDriver(page: Page): PanelEditor {
+	const byTestId = (suffix: string): Locator =>
+		page.getByTestId(`panel-editor-v2-${suffix}`);
+	const preview = (): Locator => page.getByTestId('preview-pane');
+	const sectionToggle = (title: string): Locator =>
+		page.getByTestId(
+			`config-section-${title.toLowerCase().replace(/\s+/g, '-')}`,
+		);
+
+	const editor: PanelEditor = {
+		root: () => page.locator(EDITOR_ROOT),
+		title: () => byTestId('title'),
+		description: () => byTestId('description'),
+		saveButton: () => byTestId('save'),
+		unsavedBadge: () => byTestId('unsaved-badge'),
+		switchToView: () => byTestId('switch-to-view'),
+		async save() {
+			const { ok, body } = await editor.trySave();
+			// A rejected patch leaves the editor open, which would otherwise surface
+			// as an unrelated timeout several lines later.
+			expect(ok, `dashboard PATCH failed: ${body}`).toBe(true);
+		},
+		async trySave() {
+			const [response] = await Promise.all([
+				page.waitForResponse((r) =>
+					isDashboardPatch(r.request().method(), r.url()),
+				),
+				byTestId('save').click(),
+			]);
+			return { ok: response.ok(), body: await response.text() };
+		},
+		async close(options) {
+			await byTestId('close').click();
+			if (!options?.expectDirty) {
+				return;
+			}
+			await expect(byTestId('discard-modal')).toBeVisible();
+			await byTestId(
+				options.keepEditing ? 'discard-cancel' : 'discard-confirm',
+			).click();
+		},
+		discardModal: () => byTestId('discard-modal'),
+		capturePatches() {
+			const batches: PatchOperation[][] = [];
+			page.on('request', (request) => {
+				if (!isDashboardPatch(request.method(), request.url())) {
+					return;
+				}
+				const body = request.postDataJSON() as PatchOperation[] | null;
+				if (body) {
+					batches.push(body);
+				}
+			});
+			return batches;
+		},
+		section: {
+			toggle: sectionToggle,
+			async expand(title) {
+				const toggle = sectionToggle(title);
+				await expect(toggle).toBeVisible();
+				if ((await toggle.getAttribute('aria-expanded')) !== 'true') {
+					await toggle.click();
+				}
+				await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+			},
+			async collapse(title) {
+				const toggle = sectionToggle(title);
+				if ((await toggle.getAttribute('aria-expanded')) === 'true') {
+					await toggle.click();
+				}
+				await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+			},
+		},
+		control: (name) => byTestId(name),
+		tile: (name, value) => byTestId(`${name}-${value}`),
+		async setTile(name, value) {
+			await editor.tile(name, value).click();
+		},
+		tileInput: (name, value) => editor.tile(name, value).locator('input'),
+		blocksUnload: () =>
+			page.evaluate(() => {
+				const event = new Event('beforeunload', { cancelable: true });
+				window.dispatchEvent(event);
+				return event.defaultPrevented;
+			}),
+		text: textPaneAt(page),
+		...selectsAt(page),
+		heading: () => editor.root().getByText(EditorText.title),
+		async hoverSave() {
+			await page
+				.locator('[data-slot="tooltip-trigger"]')
+				.filter({ has: byTestId('save') })
+				.hover();
+		},
+		...typeSwitcherAt(page),
+		query: queryPaneAt(page, EditorText.runQuery),
+		preview: {
+			root: preview,
+			renderer: (kind) => preview().getByTestId(RENDERER_TESTID[kind]),
+			chart: chartAt(page, () => preview().getByTestId('uplot-main-div')),
+			markdown: markdownAt(() =>
+				preview().getByTestId(RENDERER_TESTID[PanelKind.Text]),
+			),
+		},
+	};
+
+	return editor;
+}
+
+const withEditor = driver('editor', ({ page }) => editorDriver(page));
+const withNewPanel = driver('newPanel', ({ page }) => newPanelDriver(page));
+
+export const test = withNewPanel(withEditor(panelsTest));
+
+export * from './panels';
+export * from './panel-editor/picker';
+export * from './panel-editor/query';
+export * from './panel-editor/select';
+export * from './panel-editor/text';
+export * from './panel-editor/type-switcher';

tests/e2e/drivers/panel-editor/picker.ts

@@ -0,0 +1,126 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { expect, type Locator, type Page } from '@playwright/test';
+
+import { PanelKind } from '../../helpers/dashboard-spec';
+import { PATH } from '../dashboards';
+
+const NEW_PANEL_DRAWER = 'panel-type-drawer';
+
+/** The type browser's catalog, in render order. */
+export const PANEL_TYPE_TILES: {
+	kind: PanelKind;
+	label: string;
+	category: string;
+}[] = [
+	{
+		kind: PanelKind.TimeSeries,
+		label: 'Time Series',
+		category: 'Trends over time',
+	},
+	{
+		kind: PanelKind.AreaChart,
+		label: 'Area Chart',
+		category: 'Trends over time',
+	},
+	{
+		kind: PanelKind.BarChart,
+		label: 'Bar Chart',
+		category: 'Compare & rank',
+	},
+	{
+		kind: PanelKind.PieChart,
+		label: 'Pie Chart',
+		category: 'Compare & rank',
+	},
+	{
+		kind: PanelKind.Histogram,
+		label: 'Histogram',
+		category: 'Distributions',
+	},
+	{ kind: PanelKind.Heatmap, label: 'Heatmap', category: 'Distributions' },
+	{ kind: PanelKind.Number, label: 'Number', category: 'Single values' },
+	{ kind: PanelKind.Table, label: 'Table', category: 'Raw records' },
+	{ kind: PanelKind.List, label: 'List', category: 'Raw records' },
+	{ kind: PanelKind.Text, label: 'Text', category: 'Documentation' },
+];
+
+/**
+ * The New panel drawer every Add panel trigger opens. A tile click only selects
+ * (TimeSeries is preselected); the confirm button navigates to the editor.
+ */
+export interface NewPanelPicker {
+	root(): Locator;
+	tile(kind: PanelKind): Locator;
+	/** Visible tiles, in render order. */
+	tiles(): Locator;
+	/** Visible group headings, in render order. */
+	groups(): Locator;
+	search(): Locator;
+	/** A category chip; its accessible name carries the count. */
+	category(label: string): Locator;
+	emptyState(): Locator;
+	/** Reads "Add panel", or "Add to <section>" once there is a choice. */
+	confirmButton(): Locator;
+	/** Selects without confirming. */
+	pick(kind: PanelKind): Promise<void>;
+	confirm(): Promise<void>;
+	/** Selects and confirms, landing on the editor route. */
+	choose(kind: PanelKind): Promise<void>;
+	/** `value` is the layoutIndex, or 'root' for a root yet to be created. */
+	chooseSection(value: string): Promise<void>;
+	/** Switches the target to a new section named `title`. */
+	newSection(title: string): Promise<void>;
+	/** An empty section's own New Panel CTA. Should move to drivers/dashboards.ts. */
+	sectionAddPanel(): Locator;
+}
+
+export function newPanelDriver(page: Page): NewPanelPicker {
+	const root = (): Locator => page.getByTestId(NEW_PANEL_DRAWER);
+	const tiles = (): Locator =>
+		root().locator('[data-testid^="panel-type-signoz/"]');
+
+	const picker: NewPanelPicker = {
+		root,
+		tile: (kind) => root().getByTestId(`panel-type-${kind}`),
+		tiles,
+		groups: () => root().locator('section > span:first-child'),
+		search: () => root().getByTestId('panel-type-search'),
+		category: (label) =>
+			root()
+				.locator('button[aria-pressed]:not([data-testid])')
+				.filter({ hasText: new RegExp(`^${escapeRegExp(label)}\\d+$`) }),
+		emptyState: () => root().getByText(/No panel types match/),
+		confirmButton: () => root().getByTestId('panel-type-confirm'),
+		async pick(kind) {
+			await picker.tile(kind).click();
+			await expect(picker.tile(kind)).toHaveAttribute('aria-pressed', 'true');
+		},
+		async confirm() {
+			await picker.confirmButton().click();
+			await page.waitForURL(PATH.newPanel);
+		},
+		async choose(kind) {
+			await picker.pick(kind);
+			await picker.confirm();
+		},
+		async chooseSection(value) {
+			await root().getByRole('button', { name: 'Choose section' }).click();
+			await page.getByTestId(`panel-section-option-${value}`).click();
+		},
+		async newSection(title) {
+			await root().getByRole('button', { name: 'Choose section' }).click();
+			await page.getByTestId('panel-section-create').click();
+			await root().getByTestId('panel-section-name').fill(title);
+		},
+		sectionAddPanel: () =>
+			page.locator('[data-testid^="section-add-panel-"]').first(),
+	};
+	return picker;
+}
+
+function escapeRegExp(text: string): string {
+	return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}

tests/e2e/drivers/panel-editor/query.ts

@@ -0,0 +1,63 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { expect, type Locator, type Page } from '@playwright/test';
+
+export interface QueryPane {
+	builder(): Locator;
+	tab(label: string): Locator;
+	/** Has no testid at its call site. */
+	runButton(): Locator;
+	/** Clicks Run and waits for the response. */
+	run(): Promise<void>;
+	/** Ctrl/Cmd+Enter from inside the builder; waits for the response. */
+	runShortcut(): Promise<void>;
+	/** Picks a metric in the aggregation at `index`; options load as you type. */
+	selectMetric(metricName: string, index?: number): Promise<void>;
+	metricInput(index?: number): Locator;
+}
+
+export function queryPaneAt(page: Page, runLabel: string): QueryPane {
+	const builder = (): Locator =>
+		page.getByTestId('panel-editor-v2-query-builder');
+	const pane: QueryPane = {
+		builder: () => builder(),
+		// exact: 'Query Builder' is also a prefix of the 'AI Query Builder' tab.
+		tab: (label) => builder().getByRole('tab', { name: label, exact: true }),
+		runButton: () => page.getByRole('button', { name: runLabel }),
+		async run() {
+			await Promise.all([
+				page.waitForResponse((r) => r.url().includes('/query_range')),
+				pane.runButton().click(),
+			]);
+		},
+		async runShortcut() {
+			await Promise.all([
+				page.waitForResponse((r) => r.url().includes('/query_range')),
+				(async () => {
+					await builder().click();
+					await page.keyboard.press('ControlOrMeta+Enter');
+				})(),
+			]);
+		},
+		async selectMetric(metricName, index = 0) {
+			// An antd AutoComplete: the testid is on a wrapper.
+			const field = page.getByTestId(`metric-name-selector-${index}`);
+			await field.click();
+			await field.locator('input').fill(metricName);
+			const dropdown = page.locator(
+				'.ant-select-dropdown:not(.ant-select-dropdown-hidden)',
+			);
+			await expect(dropdown).toBeVisible();
+			await dropdown
+				.locator('.ant-select-item-option')
+				.filter({ hasText: metricName })
+				.first()
+				.click();
+		},
+		metricInput: (index = 0) =>
+			page.getByTestId(`metric-name-selector-${index}`).locator('input'),
+	};
+	return pane;
+}

tests/e2e/drivers/panel-editor/select.ts

@@ -0,0 +1,46 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { expect, type Locator, type Page } from '@playwright/test';
+
+// antd popups portal to `document.body`, so a testid finds the trigger and the
+// options live in a detached `.ant-select-dropdown`.
+
+export interface EditorSelects {
+	/** Picks an antd Select option by the trigger's testid. */
+	select(triggerTestId: string, optionLabel: string): Promise<void>;
+}
+
+async function openDropdown(
+	page: Page,
+	triggerTestId: string,
+): Promise<Locator> {
+	const trigger = page.getByTestId(triggerTestId);
+	await trigger.click();
+	// Resolve this Select's own list: a closing dropdown still matches
+	// `:not(.ant-select-dropdown-hidden)`, so two in a row trip strict mode.
+	const listId = await trigger.locator('input').getAttribute('aria-controls');
+	const dropdown = listId
+		? page
+				.locator(`#${listId}`)
+				.locator('xpath=ancestor::div[contains(@class,"ant-select-dropdown")][1]')
+		: page
+				.locator('.ant-select-dropdown:not(.ant-select-dropdown-hidden)')
+				.last();
+	await expect(dropdown).toBeVisible();
+	return dropdown;
+}
+
+export function selectsAt(page: Page): EditorSelects {
+	return {
+		async select(triggerTestId, optionLabel) {
+			const dropdown = await openDropdown(page, triggerTestId);
+			await dropdown
+				.locator('.ant-select-item-option')
+				.filter({ hasText: optionLabel })
+				.first()
+				.click();
+		},
+	};
+}

tests/e2e/drivers/panel-editor/text.ts

@@ -0,0 +1,38 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { type Locator, type Page } from '@playwright/test';
+
+/** The Text kind's editor pane and its own config controls. */
+export interface TextPane {
+	pane(): Locator;
+	/**
+	 * Replaces the whole body. Inserted as text, not typed, so CodeMirror's
+	 * bracket auto-close cannot double `[` or `(`.
+	 */
+	setMarkdown(markdown: string): Promise<void>;
+	toolbar(): Locator;
+	/** Rendered only when the dashboard has variables. */
+	insertVariableButton(): Locator;
+	/** The "Hide panel header" switch, inline under the title, not in a section. */
+	hideHeader(): Locator;
+}
+
+export function textPaneAt(page: Page): TextPane {
+	const textPane = (): Locator => page.getByTestId('text-panel-editor-pane');
+	const textInput = (): Locator => textPane().locator('.cm-content');
+	return {
+		pane: textPane,
+		async setMarkdown(markdown) {
+			await textInput().click();
+			await page.keyboard.press('ControlOrMeta+a');
+			await page.keyboard.press('Delete');
+			await page.keyboard.insertText(markdown);
+		},
+		toolbar: () => textPane().getByTestId('markdown-editor-toolbar'),
+		insertVariableButton: () =>
+			textPane().getByTestId('markdown-insert-variable'),
+		hideHeader: () => page.getByTestId('panel-header-hide'),
+	};
+}

tests/e2e/drivers/panel-editor/type-switcher.ts

@@ -0,0 +1,38 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { expect, type Locator, type Page } from '@playwright/test';
+
+import { PanelKind } from '../../helpers/dashboard-spec';
+
+const TYPE_SWITCHER_DRAWER = 'panel-type-switcher-drawer';
+
+export interface TypeSwitcher {
+	/** Opens the kind picker drawer and picks one. */
+	switchType(kind: PanelKind): Promise<void>;
+	/**
+	 * A tile in the open type-switcher drawer. Tiles are aria-disabled, not
+	 * disabled, so their reason tooltip still hovers.
+	 */
+	typeOption(kind: PanelKind): Locator;
+	openTypeSwitcher(): Promise<Locator>;
+}
+
+export function typeSwitcherAt(page: Page): TypeSwitcher {
+	const drawer = (): Locator => page.getByTestId(TYPE_SWITCHER_DRAWER);
+	const switcher: TypeSwitcher = {
+		typeOption: (kind) => drawer().getByTestId(`panel-type-${kind}`),
+		async openTypeSwitcher() {
+			await page.getByTestId('panel-editor-v2-type-switcher').click();
+			await expect(drawer()).toBeVisible();
+			return drawer();
+		},
+		async switchType(kind) {
+			await switcher.openTypeSwitcher();
+			await switcher.typeOption(kind).click();
+			await expect(drawer()).toHaveCount(0);
+		},
+	};
+	return switcher;
+}

tests/e2e/drivers/panels.ts

@@ -0,0 +1,232 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { expect, type Locator, type Page } from '@playwright/test';
+
+import { PanelKind } from '../helpers/dashboard-spec';
+
+import { test as dashboardsTest } from './dashboards';
+import { driver } from './kit';
+import { actionsAt, PanelAction, type PanelActions } from './panels/actions';
+import { type Chart, chartAt } from './panels/chart';
+import { openSelectOption } from './panels/dom';
+import { gridAt, type PanelGrid } from './panels/grid';
+import { type HeatmapTooltip, heatmapTooltipAt } from './panels/heatmap';
+import { type Legend, legendAt } from './panels/legend';
+import { type Markdown, markdownAt } from './panels/markdown';
+import { type PiePanel, pieAt } from './panels/pie';
+import { type TableRows, tableAt } from './panels/table';
+
+// Rendered panels, on the dashboard grid and in the View modal. Each surface
+// lives in its own part under ./panels, and so does a kind with UI of its own.
+
+export const PanelMessageText = {
+	noQueryTitle: 'Nothing to visualize yet',
+	// Curly apostrophe (U+2019): a straight quote will not match.
+	errorTitle: 'Couldn’t load panel data',
+	noDataTitle: 'No data in this time range',
+	extendAction: 'Extend time range',
+	retryAction: 'Retry',
+} as const;
+
+/** Root testid each kind's renderer puts on its own subtree. */
+export const RENDERER_TESTID: Record<PanelKind, string> = {
+	[PanelKind.TimeSeries]: 'time-series-renderer',
+	[PanelKind.BarChart]: 'bar-panel-renderer',
+	[PanelKind.AreaChart]: 'area-chart-renderer',
+	[PanelKind.Histogram]: 'histogram-panel-renderer',
+	[PanelKind.Number]: 'number-panel-renderer',
+	[PanelKind.PieChart]: 'pie-panel-renderer',
+	[PanelKind.Table]: 'table-panel-renderer',
+	[PanelKind.List]: 'list-panel-renderer',
+	[PanelKind.Heatmap]: 'heatmap-panel-renderer',
+	[PanelKind.Text]: 'text-panel',
+};
+
+export interface PanelHandle {
+	root(): Locator;
+	/** Panels fetch lazily behind an IntersectionObserver. */
+	scrollIntoView(): Promise<void>;
+	/** Scrolls in, then waits for the kind's own renderer. */
+	waitRendered(kind: PanelKind): Promise<void>;
+	renderer(kind: PanelKind): Locator;
+	/** `data-panel-visible`, 'true' once the panel entered the viewport. */
+	visibility(): Locator;
+	title(): Locator;
+	infoIcon(): Locator;
+	timePreference(): Locator;
+	statusWarning(): Locator;
+	statusError(): Locator;
+	loading(): Locator;
+	noData(): Locator;
+	noDataAction(): Locator;
+	noDataSecondaryAction(): Locator;
+	error(): Locator;
+	errorAction(): Locator;
+	text(text: string): Locator;
+	numberValue(): Locator;
+	markdown: Markdown;
+	pie: PiePanel;
+	chart: Chart;
+	legend: Legend;
+	actions: PanelActions;
+	table: TableRows;
+	grid: PanelGrid;
+}
+
+export interface Panels {
+	panel(id: string): PanelHandle;
+	/** Every panel title on the grid. */
+	titles(): Locator;
+	tooltip: {
+		container(): Locator;
+		/** Hover tooltips render their content twice, so this scopes to the tooltip role. */
+		statusContent(): Locator;
+		/** Free text inside any open tooltip. */
+		text(text: string): Locator;
+		heatmap: HeatmapTooltip;
+	};
+	drilldown: {
+		menu(): Locator;
+		/** Testids sit on an inner span; this walks up so disabled states assert. */
+		item(testId: string): Locator;
+		back(menu: 'breakout' | 'var'): Locator;
+		breakoutSearch(): Locator;
+		/** A page-level Escape does nothing: the handler needs the backdrop. */
+		dismiss(): Promise<void>;
+	};
+	view: {
+		/** Opens the modal through the actions menu. */
+		open(panelId: string): Promise<Locator>;
+		content(): Locator;
+		dialog(): Locator;
+		refresh(): Locator;
+		switchToEdit(): Locator;
+		chart: Chart;
+		renderer(kind: PanelKind): Locator;
+		markdown: Markdown;
+		/** Changes the kind for this session only. */
+		switchType(label: string): Promise<void>;
+	};
+	/** Fires the browser's Back. */
+	back(): Promise<void>;
+	/** Resolves with the tab a click opens. */
+	nextTab(): Promise<Page>;
+	/** Resolves with the suggested filename of the next download. */
+	nextDownload(): Promise<{ suggestedFilename: () => string }>;
+}
+
+function panelHandle(page: Page, id: string): PanelHandle {
+	const root = (): Locator => page.locator(`[data-panel-root="${id}"]`);
+	const byTestId = (testId: string): Locator => root().getByTestId(testId);
+
+	return {
+		root,
+		async scrollIntoView() {
+			await root().scrollIntoViewIfNeeded();
+		},
+		async waitRendered(kind) {
+			await root().scrollIntoViewIfNeeded();
+			await expect(root()).toHaveAttribute('data-panel-visible', 'true');
+			await expect(byTestId(RENDERER_TESTID[kind])).toBeVisible();
+		},
+		renderer: (kind) => byTestId(RENDERER_TESTID[kind]),
+		visibility: root,
+		title: () => byTestId('panel-title'),
+		infoIcon: () => byTestId('panel-header-info-icon'),
+		timePreference: () => byTestId('panel-time-preference'),
+		statusWarning: () => byTestId('panel-status-warning'),
+		statusError: () => byTestId('panel-status-error'),
+		loading: () => byTestId('panel-loading'),
+		noData: () => byTestId('panel-no-data'),
+		noDataAction: () => byTestId('panel-no-data-action'),
+		noDataSecondaryAction: () => byTestId('panel-no-data-secondary-action'),
+		error: () => byTestId('panel-error'),
+		errorAction: () => byTestId('panel-error-action'),
+		text: (text) => root().getByText(text),
+		numberValue: () => byTestId('number-panel-value'),
+		markdown: markdownAt(() => byTestId(RENDERER_TESTID[PanelKind.Text])),
+		pie: pieAt(page, () => byTestId(RENDERER_TESTID[PanelKind.PieChart])),
+		chart: chartAt(page, () => byTestId('uplot-main-div')),
+		legend: legendAt(root),
+		actions: actionsAt(page, id, root),
+		table: tableAt(root),
+		grid: gridAt(page, root),
+	};
+}
+
+function panelsDriver(page: Page): Panels {
+	const menu = (): Locator => page.locator('.context-menu');
+	const viewContent = (): Locator =>
+		page.getByTestId('view-panel-modal-content');
+
+	return {
+		panel: (id) => panelHandle(page, id),
+		titles: () => page.getByTestId('panel-title'),
+		tooltip: {
+			container: () => page.getByTestId('uplot-tooltip-container'),
+			statusContent: () =>
+				page.getByRole('tooltip').getByTestId('panel-status-content'),
+			text: (text) => page.getByText(text),
+			heatmap: heatmapTooltipAt(page),
+		},
+		drilldown: {
+			menu,
+			item: (testId) =>
+				page
+					.getByTestId(testId)
+					.locator(
+						'xpath=ancestor-or-self::button[contains(@class,"context-menu-item")][1]',
+					),
+			back: (submenu) => page.getByTestId(`drilldown-${submenu}-back`),
+			breakoutSearch: () => page.getByPlaceholder('Search breakout options...'),
+			async dismiss() {
+				// A corner, since the menu opens over the clicked point.
+				await page
+					.locator('.context-menu-backdrop')
+					.click({ position: { x: 5, y: 5 } });
+			},
+		},
+		view: {
+			async open(panelId) {
+				await panelHandle(page, panelId).actions.run(PanelAction.view);
+				await expect(viewContent()).toBeVisible();
+				return viewContent();
+			},
+			content: viewContent,
+			dialog: () => page.getByRole('dialog'),
+			refresh: () => page.getByTestId('view-panel-refresh'),
+			switchToEdit: () => page.getByTestId('view-panel-switch-to-edit'),
+			chart: chartAt(page, () => viewContent().getByTestId('uplot-main-div')),
+			renderer: (kind) => viewContent().getByTestId(RENDERER_TESTID[kind]),
+			markdown: markdownAt(() =>
+				viewContent().getByTestId(RENDERER_TESTID[PanelKind.Text]),
+			),
+			async switchType(label) {
+				await page.getByTestId('view-panel-type-selector').click();
+				await openSelectOption(page, label).click();
+			},
+		},
+		async back() {
+			await page.goBack();
+		},
+		nextTab: () => page.context().waitForEvent('page'),
+		nextDownload: () => page.waitForEvent('download'),
+	};
+}
+
+const withPanels = driver('panels', ({ page }) => panelsDriver(page));
+
+export const test = withPanels(dashboardsTest);
+
+export * from './dashboards';
+export * from './panels/actions';
+export * from './panels/chart';
+export * from './panels/dom';
+export * from './panels/grid';
+export * from './panels/heatmap';
+export * from './panels/legend';
+export * from './panels/markdown';
+export * from './panels/pie';
+export * from './panels/table';

tests/e2e/drivers/panels/actions.ts

@@ -0,0 +1,94 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { expect, type Locator, type Page } from '@playwright/test';
+
+// Panel action menu items take no testid (@signozhq/ui's dropdown preset drops
+// it), so their visible label is the contract, matched by Radix's menuitem role.
+
+export const PanelAction = {
+	view: 'View',
+	edit: 'Edit panel',
+	clone: 'Clone',
+	download: 'Download',
+	createAlert: 'Create Alerts',
+	move: 'Move to section',
+	delete: 'Delete panel',
+} as const;
+
+export type DownloadFormat = 'CSV' | 'PNG' | 'SVG';
+
+export interface PanelActions {
+	/** Dismisses any menu still open first: one caught mid-dismiss eats the click. */
+	open(): Promise<Locator>;
+	close(): Promise<void>;
+	item(label: string): Locator;
+	run(label: string): Promise<void>;
+	download(format: DownloadFormat): Promise<void>;
+	/** Opens the menu and lists the Download submenu's formats; [] without Download. */
+	downloads(): Promise<DownloadFormat[]>;
+	moveTo(sectionTitle: string): Promise<void>;
+}
+
+export function actionsAt(
+	page: Page,
+	panelId: string,
+	root: () => Locator,
+): PanelActions {
+	const menuItem = (label: string): Locator =>
+		page.getByRole('menuitem', { name: label, exact: true });
+
+	const actions: PanelActions = {
+		async open() {
+			await actions.close();
+			await root().scrollIntoViewIfNeeded();
+			// The trigger only appears on hover.
+			await root().hover();
+			await page.getByTestId(`panel-actions-${panelId}`).click();
+			const menu = page.getByRole('menu');
+			await expect(menu).toBeVisible();
+			return menu;
+		},
+		async close() {
+			if ((await page.getByRole('menu').count()) === 0) {
+				return;
+			}
+			// An open submenu takes the first Escape for itself.
+			await expect(async () => {
+				await page.keyboard.press('Escape');
+				await expect(page.getByRole('menu')).toHaveCount(0, { timeout: 1_000 });
+			}).toPass();
+		},
+		item: menuItem,
+		async run(label) {
+			await actions.open();
+			await menuItem(label).click();
+		},
+		async download(format) {
+			await actions.open();
+			await menuItem(PanelAction.download).hover();
+			await menuItem(`Download as ${format}`).click();
+		},
+		async downloads() {
+			await actions.open();
+			const download = menuItem(PanelAction.download);
+			if ((await download.count()) === 0) {
+				return [];
+			}
+			await download.hover();
+			const formats = page.getByRole('menuitem', { name: /^Download as / });
+			await expect(formats.first()).toBeVisible();
+			return (await formats.allInnerTexts()).map(
+				(text) => text.replace('Download as', '').trim() as DownloadFormat,
+			);
+		},
+		async moveTo(sectionTitle) {
+			await actions.open();
+			await menuItem(PanelAction.move).hover();
+			await menuItem(sectionTitle).click();
+		},
+	};
+
+	return actions;
+}

tests/e2e/drivers/panels/chart.ts

@@ -0,0 +1,99 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { expect, type Locator, type Page } from '@playwright/test';
+
+import { boxOf, dragHorizontally } from './dom';
+
+export interface UPlotScaleState {
+	min: number | null;
+	max: number | null;
+}
+
+/**
+ * Real chart state, read from the `__uplot` handle UPlotChart hangs off its
+ * container. The DOM only says a chart exists; the scales say what it shows.
+ */
+export interface Chart {
+	/** uPlot binds its cursor to `.u-over`, so this is the pointer target. */
+	plotArea(): Locator;
+	/** Throws when there is no plot, usually because the panel shows No Data. */
+	scales(): Promise<Record<string, UPlotScaleState>>;
+	click(): Promise<void>;
+	/**
+	 * Clicks the first series' middle data point inside the visible window,
+	 * placed through uPlot's own scales so it lands on data wherever it sits.
+	 */
+	clickPoint(): Promise<void>;
+	/** Fractions are of the plot area's own box, so panel size does not matter. */
+	drag(fromFraction: number, toFraction: number): Promise<void>;
+}
+
+export function chartAt(page: Page, host: () => Locator): Chart {
+	const plotArea = (): Locator => host().locator('.u-over');
+	return {
+		plotArea,
+		async scales() {
+			await expect(host()).toBeVisible();
+			return host().evaluate((node) => {
+				const plot = (node as { __uplot?: unknown }).__uplot as
+					| { scales: Record<string, { min?: number; max?: number }> }
+					| undefined;
+				if (!plot) {
+					throw new Error(
+						'no uPlot instance on the chart container — the panel probably rendered "No Data" instead of a plot',
+					);
+				}
+				return Object.fromEntries(
+					Object.entries(plot.scales).map(([key, scale]) => [
+						key,
+						{ min: scale.min ?? null, max: scale.max ?? null },
+					]),
+				);
+			});
+		},
+		async click() {
+			const box = await boxOf(host(), 'the chart');
+			await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
+		},
+		async clickPoint() {
+			await expect(host()).toBeVisible();
+			const point = await host().evaluate((node) => {
+				const plot = (node as { __uplot?: unknown }).__uplot as
+					| {
+							data: [number[], ...(number | null)[][]];
+							scales: { x: { min?: number; max?: number } };
+							series: { scale?: string }[];
+							over: HTMLElement;
+							valToPos: (value: number, scale: string) => number;
+					  }
+					| undefined;
+				if (!plot) {
+					throw new Error('no uPlot instance on the chart container');
+				}
+				const xs = plot.data[0];
+				const { min = -Infinity, max = Infinity } = plot.scales.x;
+				const visible = xs
+					.map((x, i) => ({ x, i }))
+					.filter(({ x }) => x >= min && x <= max);
+				const i = visible[Math.floor(visible.length / 2)]?.i ?? 0;
+				const y = plot.data[1]?.[i];
+				if (y == null) {
+					throw new Error(`no value at index ${i} of the first series`);
+				}
+				const over = plot.over.getBoundingClientRect();
+				return {
+					x: over.left + plot.valToPos(xs[i], 'x'),
+					y: over.top + plot.valToPos(y, plot.series[1].scale ?? 'y'),
+				};
+			});
+			await page.mouse.move(point.x, point.y);
+			await page.mouse.click(point.x, point.y);
+		},
+		async drag(fromFraction, toFraction) {
+			const box = await boxOf(plotArea(), 'the plot area');
+			await dragHorizontally(page, box, fromFraction, toFraction);
+		},
+	};
+}

tests/e2e/drivers/panels/dom.ts

@@ -0,0 +1,57 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { expect, type Locator, type Page } from '@playwright/test';
+
+export interface Box {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+
+export async function boxOf(
+	locator: Locator,
+	description: string,
+): Promise<Box> {
+	await locator.scrollIntoViewIfNeeded();
+	const box = await locator.boundingBox();
+	expect(box, `expected a bounding box for ${description}`).not.toBeNull();
+	return box as Box;
+}
+
+/** The extra pre-mousedown move gives uPlot a cursor anchor to drag from. */
+export async function dragHorizontally(
+	page: Page,
+	box: Box,
+	fromFraction: number,
+	toFraction: number,
+): Promise<void> {
+	const y = box.y + box.height / 2;
+	const startX = box.x + box.width * fromFraction;
+	await page.mouse.move(startX, y);
+	await page.mouse.move(startX, y);
+	await page.mouse.down();
+	await page.mouse.move(box.x + box.width * toFraction, y, { steps: 16 });
+	await page.mouse.up();
+}
+
+export async function dragBy(
+	page: Page,
+	from: { x: number; y: number },
+	to: { x: number; y: number },
+	steps: number,
+): Promise<void> {
+	await page.mouse.move(from.x, from.y);
+	await page.mouse.down();
+	await page.mouse.move(to.x, to.y, { steps });
+	await page.mouse.up();
+}
+
+/** A visible option of whichever antd Select is open. */
+export function openSelectOption(page: Page, label: string): Locator {
+	return page
+		.locator('.ant-select-dropdown:not(.ant-select-dropdown-hidden)')
+		.getByText(label, { exact: true });
+}

tests/e2e/drivers/panels/grid.ts

@@ -0,0 +1,58 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { type Locator, type Page } from '@playwright/test';
+
+import { boxOf, dragBy } from './dom';
+
+/**
+ * react-grid-layout exposes no testids; `.panel-drag-handle` and
+ * `.react-resizable-handle` are the class contract it is configured with
+ * (draggableHandle / draggableCancel in SectionGrid).
+ */
+export interface PanelGrid {
+	/** The grid item's rendered size in px. */
+	size(): Promise<{ width: number; height: number }>;
+	/** Drags RGL's south-east grip by the given offset. */
+	resize(dx: number, dy: number): Promise<void>;
+	/** Drags the header handle across its own width. */
+	dragByHeader(): Promise<void>;
+}
+
+export function gridAt(page: Page, root: () => Locator): PanelGrid {
+	// RGL appends the resize grip to its grid item, a sibling of the panel root.
+	const gridItem = (): Locator =>
+		root().locator('xpath=ancestor::div[contains(@class,"react-grid-item")][1]');
+	return {
+		async size() {
+			const { width, height } = await boxOf(gridItem(), 'the grid item');
+			return { width, height };
+		},
+		async resize(dx, dy) {
+			const grip = await boxOf(
+				gridItem().locator('.react-resizable-handle'),
+				'the resize handle',
+			);
+			await dragBy(
+				page,
+				{ x: grip.x + grip.width / 2, y: grip.y + grip.height / 2 },
+				{ x: grip.x + dx, y: grip.y + dy },
+				12,
+			);
+		},
+		async dragByHeader() {
+			const bar = await boxOf(
+				root().locator('.panel-drag-handle').first(),
+				'the drag handle',
+			);
+			const y = bar.y + bar.height / 2;
+			await dragBy(
+				page,
+				{ x: bar.x + bar.width / 4, y },
+				{ x: bar.x + bar.width, y },
+				15,
+			);
+		},
+	};
+}

tests/e2e/drivers/panels/heatmap.ts

@@ -0,0 +1,16 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { type Locator, type Page } from '@playwright/test';
+
+/** The cell tooltip, a component of its own rather than the uPlot tooltip. */
+export interface HeatmapTooltip {
+	root(): Locator;
+}
+
+export function heatmapTooltipAt(page: Page): HeatmapTooltip {
+	return {
+		root: () => page.getByTestId('heatmap-tooltip'),
+	};
+}

tests/e2e/drivers/panels/legend.ts

@@ -0,0 +1,19 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { type Locator } from '@playwright/test';
+
+export interface Legend {
+	item(label: string): Locator;
+	/** Rendered for a right legend, and a bottom one once its rows overflow. */
+	search(): Locator;
+}
+
+export function legendAt(root: () => Locator): Legend {
+	return {
+		item: (label) =>
+			root().locator('[data-legend-item-id]').filter({ hasText: label }),
+		search: () => root().getByTestId('legend-search-input'),
+	};
+}

tests/e2e/drivers/panels/markdown.ts

@@ -0,0 +1,27 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { type Locator } from '@playwright/test';
+
+/** A rendered Text panel body. */
+export interface Markdown {
+	root(): Locator;
+	heading(name: string): Locator;
+	listItems(): Locator;
+	link(name: string): Locator;
+	codeBlock(): Locator;
+	/** "Nothing written yet", for a blank body. */
+	empty(): Locator;
+}
+
+export function markdownAt(root: () => Locator): Markdown {
+	return {
+		root,
+		heading: (name) => root().getByRole('heading', { name }),
+		listItems: () => root().getByRole('listitem'),
+		link: (name) => root().getByRole('link', { name }),
+		codeBlock: () => root().locator('pre code'),
+		empty: () => root().getByTestId('text-panel-empty'),
+	};
+}

tests/e2e/drivers/panels/pie.ts

@@ -0,0 +1,31 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { type Locator, type Page } from '@playwright/test';
+
+/** The donut @visx draws. */
+export interface PiePanel {
+	/**
+	 * A slice's bounding-box centre can fall in the donut hole, so this clicks the
+	 * centroid, where the first slice's label leader line starts.
+	 */
+	clickSlice(): Promise<void>;
+}
+
+export function pieAt(page: Page, root: () => Locator): PiePanel {
+	return {
+		async clickSlice() {
+			const leader = root().locator('svg g line').first();
+			const { x, y } = await leader.evaluate((node) => {
+				const line = node as SVGLineElement;
+				const point = new DOMPoint(
+					line.x1.baseVal.value,
+					line.y1.baseVal.value,
+				).matrixTransform(line.getScreenCTM() ?? undefined);
+				return { x: point.x, y: point.y };
+			});
+			await page.mouse.click(x, y);
+		},
+	};
+}

tests/e2e/drivers/panels/table.ts

@@ -0,0 +1,15 @@
+/**
+ * AI-owned. Generated and maintained by coding agents alongside the specs that
+ * use it. Do not hand-edit: regenerate it with the spec that needs the change.
+ */
+import { type Locator } from '@playwright/test';
+
+export interface TableRows {
+	rows(): Locator;
+}
+
+export function tableAt(root: () => Locator): TableRows {
+	return {
+		rows: () => root().locator('tbody tr.ant-table-row'),
+	};
+}

tests/e2e/helpers/dashboard-spec.ts

@@ -0,0 +1,539 @@
+// Typed builders for the (Perses-shaped) dashboard spec — pure data, no
+// Playwright. Mirrors Go's `dashboardtypes.DashboardSpec`.
+//
+// Three server rules that surface as an opaque 400:
+//   1. POST decodes with DisallowUnknownFields — any stray key rejects it all.
+//   2. Every panel needs EXACTLY ONE query; Text needs `queries: []`.
+//   3. Panel keys match /^[a-zA-Z0-9_.-]+$/, so readable ids double as test
+//      handles (`panel-actions-${id}`).
+
+// ─── Kinds ───────────────────────────────────────────────────────────────
+
+export const PanelKind = {
+	TimeSeries: 'signoz/TimeSeriesPanel',
+	BarChart: 'signoz/BarChartPanel',
+	AreaChart: 'signoz/AreaChartPanel',
+	Histogram: 'signoz/HistogramPanel',
+	Number: 'signoz/NumberPanel',
+	PieChart: 'signoz/PieChartPanel',
+	Table: 'signoz/TablePanel',
+	List: 'signoz/ListPanel',
+	Heatmap: 'signoz/HeatmapPanel',
+	Text: 'signoz/TextPanel',
+} as const;
+
+export type PanelKind = (typeof PanelKind)[keyof typeof PanelKind];
+
+export type Signal = 'metrics' | 'logs' | 'traces';
+
+// ─── Queries ─────────────────────────────────────────────────────────────
+
+export interface MetricAggregation {
+	metricName: string;
+	timeAggregation: string;
+	spaceAggregation: string;
+	reduceTo: string;
+}
+
+/** Logs/traces aggregations are expression-shaped ("count()"), not metric-shaped. */
+export interface ExpressionAggregation {
+	expression: string;
+}
+
+export interface OrderBy {
+	key: { name: string };
+	direction: 'asc' | 'desc';
+}
+
+export interface BuilderQuerySpec {
+	name: string;
+	signal: Signal;
+	aggregations: (MetricAggregation | ExpressionAggregation)[];
+	filter?: { expression: string };
+	groupBy?: { name: string }[];
+	order?: OrderBy[];
+	limit?: number;
+}
+
+export type QueryPlugin =
+	| { kind: 'signoz/BuilderQuery'; spec: BuilderQuerySpec }
+	| { kind: 'signoz/PromQLQuery'; spec: { name: string; query: string } }
+	| { kind: 'signoz/ClickHouseSQL'; spec: { name: string; query: string } };
+
+/**
+ * List reads `raw`, Heatmap `heatmap`; every other kind reads `time_series`.
+ * Mixing them renders empty.
+ */
+export type QueryResultKind = 'time_series' | 'raw' | 'heatmap';
+
+export interface Query {
+	kind: QueryResultKind;
+	spec: { plugin: QueryPlugin };
+}
+
+// ─── Panel plugin specs ──────────────────────────────────────────────────
+
+export interface Threshold {
+	value: number;
+	color: string;
+	operator?:
+		| 'above'
+		| 'aboveOrEqual'
+		| 'below'
+		| 'belowOrEqual'
+		| 'equal'
+		| 'notEqual';
+	format?: 'background' | 'text';
+	unit?: string;
+	label?: string;
+	columnName?: string;
+}
+
+export type StackMode = 'none' | 'normal' | 'percent';
+
+export type HeatmapPalette =
+	| 'ice'
+	| 'moss'
+	| 'rust'
+	| 'graphite'
+	| 'ember'
+	| 'lagoon'
+	| 'orchid'
+	| 'verdant'
+	| 'lava'
+	| 'beacon';
+
+export interface HeatmapColors {
+	mode?: 'palette' | 'opacity';
+	palette?: HeatmapPalette;
+	scale?: 'log' | 'sqrt' | 'linear';
+	/** 2–128. */
+	steps?: number;
+	minCount?: number | null;
+	maxCount?: number | null;
+	/** Opacity mode only. */
+	fill?: string;
+}
+
+export interface TextPresentation {
+	textAlign?: 'left' | 'center' | 'right';
+	verticalAlign?: 'top' | 'center' | 'bottom';
+	/** A hex colour. */
+	background?: string;
+}
+
+/**
+ * One bag for every kind; the server's strict decoder rejects a key the kind
+ * does not declare, so a mismatch fails the seed rather than rendering wrong.
+ */
+export interface PanelPluginSpec {
+	visualization?: {
+		timePreference?: string;
+		fillSpans?: boolean;
+		stackedBarChart?: boolean;
+		/** Area only. */
+		stack?: StackMode;
+	};
+	formatting?: {
+		unit?: string;
+		decimalPrecision?: string;
+		columnUnits?: Record<string, string>;
+	};
+	axes?: {
+		softMin?: number | null;
+		softMax?: number | null;
+		isLogScale?: boolean;
+		/** Heatmap only, and its only axis key. */
+		y?: { scale: 'auto' | 'linear' | 'log' | 'symlog' };
+	};
+	legend?: {
+		position?: 'bottom' | 'right';
+		customColors?: Record<string, string>;
+	};
+	chartAppearance?: {
+		lineStyle?: 'solid' | 'dashed';
+		lineInterpolation?: 'linear' | 'spline' | 'step_before' | 'step_after';
+		/** Area drops `none`. */
+		fillMode?: 'none' | 'solid' | 'gradient';
+		/** Area only, 0–1. */
+		fillOpacity?: number;
+		showPoints?: boolean;
+		spanGaps?: { fillOnlyBelow?: boolean; fillLessThan?: string };
+		/** Heatmap only, and its only appearance key. */
+		colors?: HeatmapColors;
+	};
+	histogramBuckets?: {
+		bucketCount?: number;
+		bucketWidth?: number;
+		mergeAllActiveQueries?: boolean;
+	};
+	selectFields?: { name: string; signal?: Signal; fieldDataType?: string }[];
+	thresholds?: Threshold[];
+	/** Text only. */
+	mode?: 'markdown';
+	text?: string;
+	presentation?: TextPresentation;
+	headerOptions?: { hide: boolean };
+}
+
+/**
+ * Perses' link model — NOT the editor dialog's field names. The dialog labels
+ * its first field "Label", but it persists as `name`; there is no `label` key
+ * and the strict decoder rejects one.
+ */
+export interface ContextLink {
+	name: string;
+	url: string;
+	tooltip?: string;
+	renderVariables?: boolean;
+	targetBlank?: boolean;
+}
+
+export interface Panel {
+	kind: 'Panel';
+	spec: {
+		display: { name: string; description?: string };
+		links: ContextLink[];
+		plugin: { kind: PanelKind; spec: PanelPluginSpec };
+		/** Empty for Text, exactly one query for every other kind. */
+		queries: Query[];
+	};
+}
+
+// ─── Layout ──────────────────────────────────────────────────────────────
+
+export interface GridItem {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	content: { $ref: string };
+}
+
+export interface Layout {
+	kind: 'Grid';
+	spec: { display: { title: string }; items: GridItem[] };
+}
+
+// ─── Variables ───────────────────────────────────────────────────────────
+
+export type Variable =
+	| {
+			kind: 'ListVariable';
+			spec: {
+				name: string;
+				display: { name: string };
+				allowAllValue: boolean;
+				allowMultiple: boolean;
+				sort: 'none' | 'alphabetical-asc' | 'alphabetical-desc';
+				plugin:
+					| { kind: 'signoz/CustomVariable'; spec: { customValue: string } }
+					| { kind: 'signoz/QueryVariable'; spec: { queryValue: string } }
+					| {
+							kind: 'signoz/DynamicVariable';
+							spec: { name: string; signal: Signal };
+					  };
+			};
+	  }
+	| {
+			kind: 'TextVariable';
+			spec: { name: string; display: { name: string }; value: string };
+	  };
+
+// ─── Dashboard ───────────────────────────────────────────────────────────
+
+export interface DashboardSpec {
+	display: { name: string; description?: string };
+	variables: Variable[];
+	panels: Record<string, Panel>;
+	layouts: Layout[];
+	links: ContextLink[];
+	duration?: string;
+}
+
+export interface Tag {
+	key: string;
+	value: string;
+}
+
+export interface PostableDashboard {
+	schemaVersion: 'v6';
+	/** Must be EMPTY when `generateName` is true; the server derives it. */
+	name: string;
+	generateName: boolean;
+	tags: Tag[];
+	spec: DashboardSpec;
+}
+
+/** The backend pins this; a mismatch fails validation before anything else. */
+export const SCHEMA_VERSION = 'v6' as const;
+
+// ─── Golden-dataset constants ────────────────────────────────────────────
+//
+// What `seed/golden` writes: four metrics over 8 services, 6h of 5-min buckets.
+
+export const GOLDEN = {
+	metrics: {
+		calls: 'signoz_calls_total',
+		latencyCount: 'signoz_latency_count',
+		latencySum: 'signoz_latency_sum',
+		dbLatencyCount: 'signoz_db_latency_count',
+	},
+	services: [
+		'adservice',
+		'cartservice',
+		'checkoutservice',
+		'currencyservice',
+		'frontend',
+		'paymentservice',
+		'productcatalogservice',
+		'shippingservice',
+	],
+	environment: 'production',
+	/** Golden telemetry spans the last 6 hours, so windows wider than this add nothing. */
+	windowHours: 6,
+} as const;
+
+// ─── Query builders ──────────────────────────────────────────────────────
+
+/** A rate-over-counter metrics query grouped by service — the default fixture query. */
+export function metricsQuery(options?: {
+	name?: string;
+	metricName?: string;
+	timeAggregation?: string;
+	spaceAggregation?: string;
+	reduceTo?: string;
+	filter?: string;
+	groupBy?: string[];
+}): Query {
+	return {
+		kind: 'time_series',
+		spec: {
+			plugin: {
+				kind: 'signoz/BuilderQuery',
+				spec: {
+					name: options?.name ?? 'A',
+					signal: 'metrics',
+					aggregations: [
+						{
+							metricName: options?.metricName ?? GOLDEN.metrics.calls,
+							timeAggregation: options?.timeAggregation ?? 'rate',
+							spaceAggregation: options?.spaceAggregation ?? 'sum',
+							reduceTo: options?.reduceTo ?? 'sum',
+						},
+					],
+					filter: { expression: options?.filter ?? '' },
+					groupBy: (options?.groupBy ?? ['service.name']).map((name) => ({
+						name,
+					})),
+				},
+			},
+		},
+	};
+}
+
+/** A `raw` logs/traces query for List panels — ordered newest-first like the UI seeds it. */
+export function rawQuery(options?: {
+	name?: string;
+	signal?: Extract<Signal, 'logs' | 'traces'>;
+	filter?: string;
+	limit?: number;
+}): Query {
+	const signal = options?.signal ?? 'logs';
+	return {
+		kind: 'raw',
+		spec: {
+			plugin: {
+				kind: 'signoz/BuilderQuery',
+				spec: {
+					name: options?.name ?? 'A',
+					signal,
+					aggregations: [{ expression: 'count()' }],
+					filter: { expression: options?.filter ?? '' },
+					groupBy: [],
+					order: [
+						{ key: { name: 'timestamp' }, direction: 'desc' },
+						{ key: { name: 'id' }, direction: 'desc' },
+					],
+					...(options?.limit === undefined ? {} : { limit: options.limit }),
+				},
+			},
+		},
+	};
+}
+
+/**
+ * A logs/traces `count()` shaped as `time_series` — what Table and the chart
+ * kinds read (unlike `rawQuery`, which only List consumes). Also the only
+ * non-metrics seed that saves without picking a metric.
+ */
+export function logsCountQuery(options?: {
+	name?: string;
+	signal?: Extract<Signal, 'logs' | 'traces'>;
+	filter?: string;
+	groupBy?: string[];
+}): Query {
+	return {
+		kind: 'time_series',
+		spec: {
+			plugin: {
+				kind: 'signoz/BuilderQuery',
+				spec: {
+					name: options?.name ?? 'A',
+					signal: options?.signal ?? 'logs',
+					aggregations: [{ expression: 'count()' }],
+					filter: { expression: options?.filter ?? '' },
+					groupBy: (options?.groupBy ?? ['service.name']).map((name) => ({
+						name,
+					})),
+				},
+			},
+		},
+	};
+}
+
+/** A metrics builder query shaped as `heatmap`, the only result kind Heatmap reads. */
+export function heatmapQuery(
+	options?: Parameters<typeof metricsQuery>[0],
+): Query {
+	return { ...metricsQuery(options), kind: 'heatmap' };
+}
+
+export function promqlQuery(query: string, name = 'A'): Query {
+	return {
+		kind: 'time_series',
+		spec: { plugin: { kind: 'signoz/PromQLQuery', spec: { name, query } } },
+	};
+}
+
+export function clickhouseQuery(query: string, name = 'A'): Query {
+	return {
+		kind: 'time_series',
+		spec: { plugin: { kind: 'signoz/ClickHouseSQL', spec: { name, query } } },
+	};
+}
+
+// ─── Panel builder ───────────────────────────────────────────────────────
+
+export interface PanelOptions {
+	name: string;
+	description?: string;
+	pluginSpec?: PanelPluginSpec;
+	/**
+	 * Defaults to a metrics query shaped for the kind: `raw` for List, `heatmap`
+	 * for Heatmap. Ignored for Text, which carries none.
+	 */
+	query?: Query;
+	links?: ContextLink[];
+}
+
+function defaultQueryFor(kind: PanelKind): Query {
+	if (kind === PanelKind.List) {
+		return rawQuery();
+	}
+	if (kind === PanelKind.Heatmap) {
+		return heatmapQuery();
+	}
+	return metricsQuery();
+}
+
+export function panel(kind: PanelKind, options: PanelOptions): Panel {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: {
+				name: options.name,
+				...(options.description === undefined
+					? {}
+					: { description: options.description }),
+			},
+			links: options.links ?? [],
+			plugin: { kind, spec: options.pluginSpec ?? {} },
+			queries:
+				kind === PanelKind.Text ? [] : [options.query ?? defaultQueryFor(kind)],
+		},
+	};
+}
+
+// ─── Dashboard composer ──────────────────────────────────────────────────
+
+export interface SectionFixture {
+	title: string;
+	/** Keys become panel ids AND test handles, so keep them readable and unique. */
+	panels: Record<string, Panel>;
+}
+
+export interface DashboardFixtureOptions {
+	/** Defaults to a unique value; the server derives the internal name. */
+	title?: string;
+	description?: string;
+	sections: SectionFixture[];
+	variables?: Variable[];
+	duration?: string;
+	tags?: Tag[];
+}
+
+// pid distinguishes workers; the counter distinguishes seeds within one.
+let fixtureSeq = 0;
+function nextFixtureId(): string {
+	fixtureSeq += 1;
+	return `${process.pid}-${fixtureSeq}`;
+}
+
+/** Grid is 12 columns wide (SectionGrid `cols`), so 6×6 tiles two per row. */
+const PANEL_WIDTH = 6;
+const PANEL_HEIGHT = 6;
+const GRID_COLS = 12;
+const PER_ROW = GRID_COLS / PANEL_WIDTH;
+
+/** Two panels per row. Duplicate ids across sections are rejected loudly. */
+export function buildDashboard(
+	options: DashboardFixtureOptions,
+): PostableDashboard {
+	const panels: Record<string, Panel> = {};
+	const layouts: Layout[] = [];
+
+	for (const section of options.sections) {
+		const items: GridItem[] = [];
+		let index = 0;
+		for (const [id, panelSpec] of Object.entries(section.panels)) {
+			if (panels[id]) {
+				throw new Error(`duplicate panel id ${id} in dashboard fixture`);
+			}
+			panels[id] = panelSpec;
+			items.push({
+				x: (index % PER_ROW) * PANEL_WIDTH,
+				y: Math.floor(index / PER_ROW) * PANEL_HEIGHT,
+				width: PANEL_WIDTH,
+				height: PANEL_HEIGHT,
+				content: { $ref: `#/spec/panels/${id}` },
+			});
+			index += 1;
+		}
+		layouts.push({
+			kind: 'Grid',
+			spec: { display: { title: section.title }, items },
+		});
+	}
+
+	const title = options.title ?? `e2e-dashboard-${nextFixtureId()}`;
+	return {
+		schemaVersion: SCHEMA_VERSION,
+		name: '',
+		generateName: true,
+		tags: options.tags ?? [],
+		spec: {
+			display: {
+				name: title,
+				...(options.description === undefined
+					? {}
+					: { description: options.description }),
+			},
+			variables: options.variables ?? [],
+			panels,
+			layouts,
+			links: [],
+			...(options.duration === undefined ? {} : { duration: options.duration }),
+		},
+	};
+}

tests/e2e/helpers/query-range-mock.ts

@@ -0,0 +1,291 @@
+import type { Page, Route } from '@playwright/test';
+
+// Pinned `/api/v5/query_range` payloads. Install BEFORE `page.goto`.
+//
+// Prefer golden data and assert STRUCTURE: the dataset's content is
+// deterministic but `seed/golden` rebases timestamps to `now`, so labels and
+// counts are stable while exact numbers are not. Reach for this only when the
+// backend can't promise what the test needs — error/no-data/warning states,
+// exact numbers for thresholds and units, a known series count, or stable
+// pagination.
+//
+// Envelope (double-nested, easy to get wrong), mirroring `QueryRangeV5200`:
+//   { status, data: { type, meta, warning, data: { results: [...] } } }
+// `data.type` is the discriminator — a body under the wrong type renders as an
+// empty panel rather than failing loudly.
+
+const QUERY_RANGE_GLOB = '**/api/v5/query_range';
+
+type RequestType = 'time_series' | 'scalar' | 'raw' | 'trace' | 'heatmap';
+
+export interface QueryRangeBody {
+	status: string;
+	data: {
+		type: RequestType;
+		data: { results: unknown[] };
+		meta?: Record<string, unknown>;
+		warning?: Record<string, unknown>;
+	};
+}
+
+function envelope(type: RequestType, results: unknown[]): QueryRangeBody {
+	return { status: 'success', data: { type, data: { results } } };
+}
+
+// ─── Time helpers ────────────────────────────────────────────────────────
+
+const MINUTE_MS = 60_000;
+
+/**
+ * The default end of a generated series: now, floored to the minute, so series
+ * built by separate calls share their timestamps instead of straddling a
+ * millisecond.
+ */
+function defaultEndMs(): number {
+	return Math.floor(Date.now() / MINUTE_MS) * MINUTE_MS;
+}
+
+export interface TimeSeriesPoint {
+	timestamp: number;
+	value: number;
+}
+
+export interface SeriesSpec {
+	labels: Record<string, string>;
+	points: TimeSeriesPoint[];
+}
+
+export interface HeatmapPoint {
+	timestamp: number;
+	/** One count per bucket bound, plus a trailing open-above overflow. */
+	counts: number[];
+}
+
+export interface HeatmapSeriesSpec {
+	labels: Record<string, string>;
+	points: HeatmapPoint[];
+}
+
+/** Evenly spaced epoch-ms timestamps ending at `endMs`. */
+function timestamps(
+	count: number,
+	stepMinutes = 5,
+	endMs = defaultEndMs(),
+): number[] {
+	return Array.from(
+		{ length: count },
+		(_, i) => endMs - (count - 1 - i) * stepMinutes * MINUTE_MS,
+	);
+}
+
+/** A ramp of `count` points from `from` to `to` — readable, non-flat test data. */
+export function ramp(
+	count: number,
+	from: number,
+	to: number,
+	endMs = defaultEndMs(),
+): TimeSeriesPoint[] {
+	const step = count > 1 ? (to - from) / (count - 1) : 0;
+	return timestamps(count, 5, endMs).map((timestamp, i) => ({
+		timestamp,
+		value: from + step * i,
+	}));
+}
+
+/**
+ * `count` columns of `width` cells, every count non-zero and growing with both
+ * time and bucket, so any hovered cell has a value and the colour domain is known:
+ * 1 … count × width.
+ */
+export function heatmapPoints(
+	count: number,
+	width: number,
+	endMs = defaultEndMs(),
+): HeatmapPoint[] {
+	return timestamps(count, 5, endMs).map((timestamp, i) => ({
+		timestamp,
+		counts: Array.from({ length: width }, (_, j) => (i + 1) * (j + 1)),
+	}));
+}
+
+// ─── Payload builders ────────────────────────────────────────────────────
+
+export const QueryRange = {
+	/** Series must nest at `results[].aggregations[].series[]`. */
+	timeSeries(series: SeriesSpec[], queryName = 'A'): QueryRangeBody {
+		return envelope('time_series', [
+			{
+				queryName,
+				aggregations: [
+					{
+						index: 0,
+						alias: '',
+						series: series.map((s) => ({
+							labels: Object.entries(s.labels).map(([name, value]) => ({
+								key: { name },
+								value,
+							})),
+							values: s.points.map((p) => ({
+								timestamp: p.timestamp,
+								value: p.value,
+							})),
+						})),
+					},
+				],
+			},
+		]);
+	},
+
+	/** Rows are positional across `[...groupColumns, ...aggregationColumns]`. */
+	scalar(options: {
+		groupColumns?: string[];
+		aggregationColumns?: string[];
+		rows: (string | number)[][];
+		queryName?: string;
+		units?: Record<string, string>;
+	}): QueryRangeBody {
+		const queryName = options.queryName ?? 'A';
+		const group = (options.groupColumns ?? []).map((name) => ({
+			name,
+			queryName,
+			columnType: 'group',
+			...(options.units?.[name] ? { meta: { unit: options.units[name] } } : {}),
+		}));
+		const aggregation = (options.aggregationColumns ?? []).map((name, index) => ({
+			name,
+			queryName,
+			columnType: 'aggregation',
+			aggregationIndex: index,
+			...(options.units?.[name] ? { meta: { unit: options.units[name] } } : {}),
+		}));
+		return envelope('scalar', [
+			{ queryName, columns: [...group, ...aggregation], data: options.rows },
+		]);
+	},
+
+	/** List rows. `timestamp` is RFC-3339 here, not epoch ms — per the contract. */
+	raw(
+		rows: Record<string, unknown>[],
+		options?: { queryName?: string; nextCursor?: string },
+	): QueryRangeBody {
+		return envelope('raw', [
+			{
+				queryName: options?.queryName ?? 'A',
+				...(options?.nextCursor ? { nextCursor: options.nextCursor } : {}),
+				rows: rows.map((data) => ({
+					timestamp:
+						typeof data.timestamp === 'string'
+							? data.timestamp
+							: new Date(Number(data.timestamp ?? 0)).toISOString(),
+					data,
+				})),
+			},
+		]);
+	},
+
+	/**
+	 * Bucket bounds sit on the aggregation's `meta`; without them the panel
+	 * draws no grid. `series: []` is the heatmap's own no-data body.
+	 */
+	heatmap(
+		buckets: number[],
+		series: HeatmapSeriesSpec[],
+		queryName = 'A',
+	): QueryRangeBody {
+		return envelope('heatmap', [
+			{
+				queryName,
+				aggregations: [
+					{
+						index: 0,
+						alias: '',
+						meta: { buckets },
+						series: series.map((s) => ({
+							labels: Object.entries(s.labels).map(([name, value]) => ({
+								key: { name },
+								value,
+							})),
+							values: s.points.map((p) => ({
+								timestamp: p.timestamp,
+								values: p.counts,
+							})),
+						})),
+					},
+				],
+			},
+		]);
+	},
+
+	/** Successful but empty — drives `panel-no-data`. */
+	empty(queryName = 'A'): QueryRangeBody {
+		return envelope('time_series', [{ queryName, aggregations: [] }]);
+	},
+
+	/** Successful with a warning — drives the `panel-status-warning` indicator. */
+	withWarning(body: QueryRangeBody, message: string): QueryRangeBody {
+		return {
+			...body,
+			data: {
+				...body.data,
+				warning: { warnings: [{ message }], message },
+			},
+		};
+	},
+};
+
+// ─── Route installers ────────────────────────────────────────────────────
+
+export interface MockOptions {
+	/** Stop intercepting after N calls, letting later requests hit the backend. */
+	times?: number;
+}
+
+/** Fulfil every query_range call with one pinned body. */
+export async function mockQueryRange(
+	page: Page,
+	body: QueryRangeBody,
+	options?: MockOptions,
+): Promise<void> {
+	let served = 0;
+	await page.route(QUERY_RANGE_GLOB, async (route: Route) => {
+		if (options?.times !== undefined && served >= options.times) {
+			await route.fallback();
+			return;
+		}
+		served += 1;
+		await route.fulfill({
+			status: 200,
+			contentType: 'application/json',
+			body: JSON.stringify(body),
+		});
+	});
+}
+
+/** Fail every query_range call — drives `panel-error`. */
+export async function mockQueryRangeError(
+	page: Page,
+	message = 'mocked query failure',
+	options?: MockOptions & { status?: number },
+): Promise<void> {
+	let served = 0;
+	await page.route(QUERY_RANGE_GLOB, async (route: Route) => {
+		if (options?.times !== undefined && served >= options.times) {
+			await route.fallback();
+			return;
+		}
+		served += 1;
+		await route.fulfill({
+			status: options?.status ?? 500,
+			contentType: 'application/json',
+			body: JSON.stringify({
+				status: 'error',
+				error: { code: 'internal', message },
+			}),
+		});
+	});
+}
+
+/** Drop the interception so later navigation reaches the real backend again. */
+export async function unmockQueryRange(page: Page): Promise<void> {
+	await page.unroute(QUERY_RANGE_GLOB);
+}

tests/e2e/playwright.config.ts

@@ -36,11 +36,6 @@ for (const file of ['.env', '.env.local']) {
 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/**'],
-
 	// All Playwright output lands under artifacts/. One subdir per reporter
 	// plus results/ for per-test artifacts (traces/screenshots/videos).
 	// CI can archive the whole dir with `tar czf artifacts.tgz tests/e2e/artifacts`.

tests/e2e/testdata/dashboards/panels.ts

@@ -0,0 +1,250 @@
+import {
+	GOLDEN,
+	PanelKind,
+	clickhouseQuery,
+	buildDashboard,
+	metricsQuery,
+	panel,
+	promqlQuery,
+	rawQuery,
+	type ContextLink,
+	type PanelPluginSpec,
+	type PostableDashboard,
+	type Query,
+	type Variable,
+} from '../../helpers/dashboard-spec';
+
+// Dashboard fixtures for the dashboard suites. TypeScript rather than frozen JSON so
+// a contract change is a compile error, and panel ids stay visible to the specs
+// that use them as test handles.
+let seq = 0;
+function uniqueSuffix(): string {
+	seq += 1;
+	return `${process.pid}-${seq}`;
+}
+
+// ─── Compact (default multi-panel fixture) ───────────────────────────────
+
+export const COMPACT_PANELS = {
+	timeseries: 'ts-panel',
+	table: 'table-panel',
+	list: 'list-panel',
+} as const;
+
+/**
+ * The default multi-panel fixture: three panels, two sections.
+ *
+ * Every panel fires its own `query_range`, and over-seeding was the dominant
+ * load on the single-container stack. These three keep every distinction the
+ * specs assert — TimeSeries (charts, zoom, drilldown, createAlert), Table (CSV
+ * download, search), List (search, no createAlert) — and two sections keep
+ * Move-to-section and the modal's select-then-confirm branch reachable.
+ */
+export function compactDashboard(title?: string): PostableDashboard {
+	return buildDashboard({
+		title: title ?? `e2e-compact-${Date.now()}-${uniqueSuffix()}`,
+		sections: [
+			{
+				title: 'Charts',
+				panels: {
+					[COMPACT_PANELS.timeseries]: panel(PanelKind.TimeSeries, {
+						name: 'Calls by service',
+						description: 'Rate of signoz_calls_total grouped by service.name',
+					}),
+				},
+			},
+			{
+				title: 'Tabular',
+				panels: {
+					[COMPACT_PANELS.table]: panel(PanelKind.Table, {
+						name: 'Calls table',
+					}),
+					[COMPACT_PANELS.list]: panel(PanelKind.List, {
+						name: 'Recent logs',
+						pluginSpec: {
+							selectFields: [
+								{ name: 'timestamp', signal: 'logs' },
+								{ name: 'body', signal: 'logs' },
+							],
+						},
+						query: rawQuery({ signal: 'logs' }),
+					}),
+				},
+			},
+		],
+	});
+}
+
+// ─── Single panel ────────────────────────────────────────────────────────
+
+export const SINGLE_PANEL_ID = 'solo-panel';
+
+export interface SinglePanelOptions {
+	title?: string;
+	kind?: PanelKind;
+	panelName?: string;
+	/** Plugin config (legend, axes, formatting, thresholds, …) for the panel. */
+	pluginSpec?: PanelPluginSpec;
+	/** Replaces the kind's default query. */
+	query?: Query;
+	/** Context links attached to the panel. */
+	links?: ContextLink[];
+	/** Attaches the `VARIABLE_NAMES` variables, for interpolation cases. */
+	withVariables?: boolean;
+}
+
+/**
+ * One panel, one section. Fully configurable so specs never reach into the
+ * returned object — post-hoc mutation is four levels deep and breaks silently
+ * when the spec shape moves.
+ */
+export function singlePanelDashboard(
+	options: SinglePanelOptions = {},
+): PostableDashboard {
+	return buildDashboard({
+		title: options.title ?? `e2e-single-${Date.now()}-${uniqueSuffix()}`,
+		...(options.withVariables ? { variables: VARIABLES } : {}),
+		sections: [
+			{
+				title: 'Section',
+				panels: {
+					[SINGLE_PANEL_ID]: panel(options.kind ?? PanelKind.TimeSeries, {
+						name: options.panelName ?? 'Solo panel',
+						...(options.pluginSpec ? { pluginSpec: options.pluginSpec } : {}),
+						...(options.query ? { query: options.query } : {}),
+						...(options.links ? { links: options.links } : {}),
+					}),
+				},
+			},
+		],
+	});
+}
+
+/** No panels at all — drives the dashboard empty state and its New Panel CTA. */
+export function emptyDashboard(title?: string): PostableDashboard {
+	return buildDashboard({
+		title: title ?? `e2e-empty-${Date.now()}-${uniqueSuffix()}`,
+		sections: [],
+	});
+}
+
+// ─── Query-type coverage ─────────────────────────────────────────────────
+
+export const QUERY_TYPE_PANELS = {
+	builder: 'qb-panel',
+	promql: 'promql-panel',
+	clickhouse: 'chsql-panel',
+} as const;
+
+/** One panel per query type, for the capability and drilldown-gating specs. */
+export function queryTypesDashboard(title?: string): PostableDashboard {
+	return buildDashboard({
+		title: title ?? `e2e-query-types-${Date.now()}-${uniqueSuffix()}`,
+		sections: [
+			{
+				title: 'Query types',
+				panels: {
+					[QUERY_TYPE_PANELS.builder]: panel(PanelKind.TimeSeries, {
+						name: 'Builder query',
+					}),
+					[QUERY_TYPE_PANELS.promql]: panel(PanelKind.TimeSeries, {
+						name: 'PromQL query',
+						query: promqlQuery(`sum(rate(${GOLDEN.metrics.calls}[5m]))`),
+					}),
+					[QUERY_TYPE_PANELS.clickhouse]: panel(PanelKind.Table, {
+						name: 'ClickHouse query',
+						query: clickhouseQuery(
+							"SELECT now() AS ts, 'adservice' AS service, 1 AS A",
+						),
+					}),
+				},
+			},
+		],
+	});
+}
+
+// ─── Variables ───────────────────────────────────────────────────────────
+
+export const VARIABLE_NAMES = {
+	custom: 'serviceCustom',
+	dynamic: 'serviceDynamic',
+} as const;
+
+const VARIABLES: Variable[] = [
+	{
+		kind: 'ListVariable',
+		spec: {
+			name: VARIABLE_NAMES.custom,
+			display: { name: VARIABLE_NAMES.custom },
+			allowAllValue: false,
+			allowMultiple: false,
+			sort: 'none',
+			plugin: {
+				kind: 'signoz/CustomVariable',
+				// Closed list: resolves instantly, no backend round-trip.
+				spec: { customValue: GOLDEN.services.slice(0, 3).join(',') },
+			},
+		},
+	},
+	{
+		kind: 'ListVariable',
+		spec: {
+			name: VARIABLE_NAMES.dynamic,
+			display: { name: VARIABLE_NAMES.dynamic },
+			allowAllValue: true,
+			allowMultiple: true,
+			sort: 'alphabetical-asc',
+			plugin: {
+				kind: 'signoz/DynamicVariable',
+				spec: { name: 'service.name', signal: 'metrics' },
+			},
+		},
+	},
+];
+
+export const VARIABLE_PANEL_ID = 'var-panel';
+
+/** A panel filtered by a dashboard variable — backs the drilldown variable cases. */
+export function variablesDashboard(
+	title?: string,
+	query?: Query,
+): PostableDashboard {
+	return buildDashboard({
+		title: title ?? `e2e-variables-${Date.now()}-${uniqueSuffix()}`,
+		variables: VARIABLES,
+		sections: [
+			{
+				title: 'Variables',
+				panels: {
+					[VARIABLE_PANEL_ID]: panel(PanelKind.TimeSeries, {
+						name: 'Calls for $serviceCustom',
+						query:
+							query ??
+							metricsQuery({
+								filter: `service.name = $${VARIABLE_NAMES.custom}`,
+							}),
+					}),
+				},
+			},
+		],
+	});
+}
+
+/** Invalid on purpose: Text must carry `queries: []`; the server rejects this. */
+export function textPanelWithQueryDashboard(): PostableDashboard {
+	const text = panel(PanelKind.Text, { name: 'Notes' });
+	return buildDashboard({
+		title: `e2e-text-with-query-${Date.now()}-${uniqueSuffix()}`,
+		sections: [
+			{
+				title: 'Section',
+				panels: {
+					[SINGLE_PANEL_ID]: {
+						...text,
+						spec: { ...text.spec, queries: [metricsQuery()] },
+					},
+				},
+			},
+		],
+	});
+}

tests/e2e/tests/dashboards/details/03-viewing.spec.ts

@@ -1,206 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	APM_METRICS_TITLE,
-	authToken,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	createApmMetricsDashboardViaApi,
-} from '../../../helpers/dashboards';
-
-const seedIds = new Set<string>();
-const BASE_TITLE = 'detail-viewing-base';
-let baseDashboardId = '';
-let apmDashboardId = '';
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		baseDashboardId = await createDashboardViaApi(page, BASE_TITLE);
-		seedIds.add(baseDashboardId);
-		apmDashboardId = await createApmMetricsDashboardViaApi(page);
-		seedIds.add(apmDashboardId);
-	} 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 deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-async function gotoDetail(page: Page, id: string): Promise<void> {
-	await page.goto(`/dashboard/${id}`);
-}
-
-test.describe('Dashboard Detail Page — Viewing', () => {
-	test('TC-01 page chrome — breadcrumb, title, toolbar buttons render', async ({
-		authedPage: page,
-	}) => {
-		// Use the APM dashboard rather than the empty base — empty dashboards
-		// render an onboarding canvas with its own Configure / New Panel
-		// buttons, which duplicate the toolbar testids.
-		await gotoDetail(page, apmDashboardId);
-
-		await expect(
-			page.getByRole('button', { name: /Dashboard \// }),
-		).toBeVisible();
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${APM_METRICS_TITLE}`),
-			}),
-		).toBeVisible();
-
-		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
-		await expect(page).toHaveTitle(new RegExp(APM_METRICS_TITLE));
-
-		await expect(
-			page.getByRole('textbox', { name: /Last \d+/ }).first(),
-		).toBeVisible();
-		await expect(page.locator('.refresh-btn button')).toBeVisible();
-		await expect(
-			page.getByRole('button', { name: 'Set auto refresh' }),
-		).toBeVisible();
-		await expect(page.getByTestId('options')).toBeVisible();
-		await expect(page.getByTestId('show-drawer')).toBeVisible();
-		await expect(page.getByTestId('add-panel-header')).toBeVisible();
-		await expect(page.getByRole('button', { name: 'Feedback' })).toBeVisible();
-		await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
-	});
-
-	test('TC-02 breadcrumb returns to /dashboard', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, baseDashboardId);
-		await expect(
-			page.getByRole('button', { name: /Dashboard \// }),
-		).toBeVisible();
-
-		// `dispatchEvent('click')` — the expanded sidenav intercepts pointer
-		// events at the breadcrumb's center, defeating even `force: true`.
-		// Dispatching the click directly on the DOM node bypasses hit testing.
-		await page
-			.getByRole('button', { name: 'Dashboard /' })
-			.dispatchEvent('click');
-
-		await expect(page).toHaveURL(/\/dashboard$/);
-		await expect(
-			page.getByRole('heading', { name: 'Dashboards', level: 1 }),
-		).toBeVisible();
-	});
-
-	test('TC-03 tags bar renders for an imported dashboard', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${APM_METRICS_TITLE}`),
-			}),
-		).toBeVisible();
-
-		// `exact: true` is load-bearing — `apm` is a substring of the
-		// breadcrumb title `APM Metrics`, so a loose match would collide.
-		for (const tag of ['apm', 'latency', 'error rate', 'throughput']) {
-			await expect(page.getByText(tag, { exact: true })).toBeVisible();
-		}
-	});
-
-	test('TC-04 section row headers render for APM Metrics', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-
-		// known behaviour: APM Metrics fixture has two sections both named
-		// "Overview" — `.first()` deliberately matches whichever renders first.
-		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();
-	});
-
-	test('TC-05 at least one panel container renders', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${APM_METRICS_TITLE}`),
-			}),
-		).toBeVisible();
-
-		await expect(
-			page.getByText('Latency', { exact: true }).first(),
-		).toBeVisible();
-	});
-
-	test('TC-06 no JS pageerror during initial load', async ({
-		authedPage: page,
-	}) => {
-		const errors: Error[] = [];
-		page.on('pageerror', (err) => errors.push(err));
-
-		await gotoDetail(page, apmDashboardId);
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${APM_METRICS_TITLE}`),
-			}),
-		).toBeVisible();
-		await expect(
-			page.getByText('Latency', { exact: true }).first(),
-		).toBeVisible();
-
-		expect(errors).toHaveLength(0);
-	});
-
-	// ─── Cross-spec: connection with the dashboards-list page ────────────────
-
-	test('TC-07 navigating from the dashboards list lands on the detail page', async ({
-		authedPage: page,
-	}) => {
-		await page.goto('/dashboard');
-		await expect(
-			page.getByRole('heading', { name: 'Dashboards', level: 1 }),
-		).toBeVisible();
-
-		await page
-			.getByPlaceholder('Search by name, description, or tags...')
-			.fill(APM_METRICS_TITLE);
-		await expect(page.getByText(APM_METRICS_TITLE).first()).toBeVisible();
-		const actionIcon = page.getByTestId('dashboard-action-icon').first();
-		await actionIcon.scrollIntoViewIfNeeded();
-		await actionIcon.click();
-		await page.getByRole('tooltip').getByRole('button', { name: 'View' }).click();
-
-		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${APM_METRICS_TITLE}`),
-			}),
-		).toBeVisible();
-		await expect(
-			page.getByText('Latency', { exact: true }).first(),
-		).toBeVisible();
-	});
-});

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

@@ -1,539 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	createApmMetricsDashboardViaApi,
-	deleteDashboardViaApi,
-} from '../../../helpers/dashboards';
-
-// ─── 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;
-
-test.beforeEach(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		apmDashboardId = await createApmMetricsDashboardViaApi(page);
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.afterEach(async ({ browser }) => {
-	if (!apmDashboardId) {
-		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.
-	} 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('..');
-}
-
-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;
-		}
-		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 ({
-		authedPage: page,
-	}) => {
-		await gotoApmDashboard(page);
-
-		// 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);
-	});
-
-	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 ({
-		authedPage: page,
-	}) => {
-		await gotoApmDashboard(page);
-
-		// 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');
-	});
-
-	test('TC-05 rename a section, restore original name', async ({
-		authedPage: page,
-	}) => {
-		await gotoApmDashboard(page);
-
-		const renamed = `Renamed Section ${Date.now()}`;
-
-		// 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);
-	});
-
-	test('TC-06 cancel section rename leaves name unchanged', async ({
-		authedPage: page,
-	}) => {
-		await gotoApmDashboard(page);
-
-		await clickSectionSettings(sectionRow(page, 'External calls'));
-		await page
-			.getByRole('tooltip')
-			.getByRole('button', { name: 'Rename' })
-			.click();
-
-		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);
-	});
-
-	// 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 ({
-		authedPage: page,
-	}) => {
-		await gotoApmDashboard(page);
-
-		const panelName = `Test Panel ${Date.now()}`;
-
-		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);
-	});
-
-	// ─── New section in edit mode ────────────────────────────────────────────
-
-	test('TC-08 add a new section via edit mode, then remove it', async ({
-		authedPage: page,
-	}) => {
-		await gotoApmDashboard(page);
-
-		const sectionName = `Temp Section ${Date.now()}`;
-
-		await page.getByTestId('options').click();
-		await page.getByRole('menuitem', { 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();
-	});
-});

tests/e2e/tests/dashboards/details/21-panel-actions.spec.ts

@@ -1,635 +0,0 @@
-import type { Locator, Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	createApmMetricsDashboardViaApi,
-	createChartDataDashboardViaApi,
-	deleteDashboardViaApi,
-} from '../../../helpers/dashboards';
-
-// Tests in this file mutate the same dashboard (clone / delete panels). Run
-// them serially within the worker so state from one test does not leak into
-// another's assertions.
-test.describe.configure({ mode: 'serial' });
-
-const seedIds = new Set<string>();
-let apmDashboardId = '';
-
-const TIME_SERIES_PANEL = 'Latency';
-const TABLE_PANEL = 'Top operations';
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		apmDashboardId = await createApmMetricsDashboardViaApi(page);
-		seedIds.add(apmDashboardId);
-	} 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 deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-async function gotoDetail(page: Page, id: string): Promise<void> {
-	await page.goto(`/dashboard/${id}`);
-	// `GridCardLayout`'s auto-save effect fires a PUT on initial load when the
-	// local `dashboardLayout` state diverges from the server `layouts`. Under
-	// CI load this PUT can still be in-flight when a test registers its own
-	// `waitForResponse(PUT)` or triggers a mutation (clone / delete), causing
-	// the wrong PUT to be captured or concurrent writes to corrupt layout state.
-	// Drain the in-flight PUT now so every test in this file starts clean.
-	// The try/catch handles dashboards whose layout is already in sync (no PUT).
-	try {
-		await page.waitForResponse(
-			(r) => r.request().method() === 'PUT' && /\/dashboards\//.test(r.url()),
-			{ timeout: 5_000 },
-		);
-	} catch {
-		// No initial-load PUT within 5 s — layout was already synchronised.
-	}
-}
-
-/**
- * Click NewWidget's Save button after waiting for it to become enabled.
- *
- * Why this helper exists: `container/NewWidget/index.tsx` 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, failing the next assertion with "dialog not found".
- */
-async function clickNewWidgetSave(page: Page): Promise<void> {
-	const saveBtn = page.getByTestId('new-widget-save');
-	await expect(saveBtn).toBeVisible();
-	await expect(saveBtn).toBeEnabled({ timeout: 20_000 });
-	// `dispatchEvent('click')` — under CI viewport the editor's right-header
-	// can be partially covered by the sidenav's secondary nav panel, and
-	// `.click()` retries are then swallowed by the overlay. The synthetic
-	// click bypasses hit testing and triggers React's `onClick` directly.
-	await saveBtn.dispatchEvent('click');
-}
-
-/**
- * Locate the panel container (`.widget-graph-component-container`) for the
- * panel with the given title. The title is exposed via `data-testid={title}`
- * on the inner `Typography.Text` — traverse upward to the container so we
- * can scope the ⋮ icon, search icon, etc. to this panel only.
- *
- * Multiple panels with the same title (e.g. cloned `Latency` panels) are
- * disambiguated by `index`, defaulting to the first match in DOM order.
- */
-function panelContainer(page: Page, title: string, index = 0): Locator {
-	return page
-		.getByTestId(title)
-		.nth(index)
-		.locator(
-			'xpath=ancestor::div[contains(@class, "widget-graph-component-container")][1]',
-		);
-}
-
-/**
- * Reveal the panel header's ⋮ icon and open the action dropdown. Returns the
- * opened menu locator.
- *
- * The ⋮ icon is a `@signozhq/ui` `DropdownMenuSimple` (Radix
- * `@radix-ui/react-dropdown-menu` under the hood — see `WidgetHeader/index.tsx`),
- * so the menu opens on click, not hover. We still hover the container first
- * because the icon is `visibility: hidden` until the row is hovered (see the
- * `.widget-graph-component-container:hover` rule in `GridCardLayout.styles.scss`);
- * then we click the revealed icon to toggle the Radix menu open.
- */
-async function openPanelMoreMenu(
-	page: Page,
-	title: string,
-	index = 0,
-): Promise<Locator> {
-	const container = panelContainer(page, title, index);
-	await container.scrollIntoViewIfNeeded();
-	await container.hover();
-	const moreOptions = container.getByTestId('widget-header-options');
-	await moreOptions.click();
-	const menu = page.getByRole('menu');
-	await menu.waitFor({ state: 'visible' });
-	return menu;
-}
-
-test.describe('Dashboard Detail Page — Panel Actions', () => {
-	// ─── ⋮ menu contents ─────────────────────────────────────────────────────
-
-	test('TC-01 panel ⋮ menu shows the 5 actions for a Time Series panel', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-		await expect(
-			page.getByText(TIME_SERIES_PANEL, { exact: true }).first(),
-		).toBeVisible();
-
-		const menu = await openPanelMoreMenu(page, TIME_SERIES_PANEL);
-
-		// Time Series headerMenuList = ViewMenuAction + EditMenuAction
-		// = [View, Clone, Delete, Edit, CreateAlerts]. Download is hidden
-		// because panelTypes !== TABLE.
-		await expect(menu.getByRole('menuitem')).toHaveCount(5);
-		await expect(
-			menu.getByRole('menuitem', { name: 'View', exact: true }),
-		).toBeVisible();
-		await expect(
-			menu.getByRole('menuitem', { name: 'Edit', exact: true }),
-		).toBeVisible();
-		await expect(
-			menu.getByRole('menuitem', { name: 'Clone', exact: true }),
-		).toBeVisible();
-		await expect(
-			menu.getByRole('menuitem', { name: 'Delete', exact: true }),
-		).toBeVisible();
-		await expect(
-			menu.getByRole('menuitem', { name: /Create Alerts/ }),
-		).toBeVisible();
-
-		await page.keyboard.press('Escape');
-	});
-
-	test('TC-02 Table panel ⋮ menu replaces Create Alerts with Download as CSV', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-		await expect(
-			page.getByText(TABLE_PANEL, { exact: true }).first(),
-		).toBeVisible();
-
-		const menu = await openPanelMoreMenu(page, TABLE_PANEL);
-
-		// Table panels filter CreateAlerts out of the menu (see GridCard
-		// `menuList`) and the Download item turns visible because
-		// panelTypes === TABLE.
-		await expect(
-			menu.getByRole('menuitem', {
-				name: 'Download as CSV',
-				exact: true,
-			}),
-		).toBeVisible();
-		await expect(
-			menu.getByRole('menuitem', { name: /Create Alerts/ }),
-		).toHaveCount(0);
-
-		await page.keyboard.press('Escape');
-	});
-
-	// ─── View / Fullscreen ───────────────────────────────────────────────────
-
-	test('TC-03 View action opens fullscreen with `expandedWidgetId` URL param', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-		await expect(
-			page.getByText(TIME_SERIES_PANEL, { exact: true }).first(),
-		).toBeVisible();
-
-		const menu = await openPanelMoreMenu(page, TIME_SERIES_PANEL);
-		const viewItem = menu.getByRole('menuitem', { name: 'View', exact: true });
-		// The View menuitem is `disabled: queryResponse.isFetching` — wait
-		// for it to become enabled before clicking, otherwise the click is a
-		// no-op and the dialog never opens.
-		await expect(viewItem).toBeEnabled();
-		await viewItem.click();
-
-		const dialog = page.getByRole('dialog', { name: TIME_SERIES_PANEL });
-		await expect(dialog).toBeVisible();
-		await expect(page).toHaveURL(/expandedWidgetId=/);
-
-		await dialog.getByRole('button', { name: 'Close' }).click();
-		await expect(dialog).not.toBeVisible();
-		await expect(page).not.toHaveURL(/expandedWidgetId=/);
-	});
-
-	test('TC-04 fullscreen panel renders chart canvas or "No Data"', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-		await expect(
-			page.getByText(TIME_SERIES_PANEL, { exact: true }).first(),
-		).toBeVisible();
-
-		const menu = await openPanelMoreMenu(page, TIME_SERIES_PANEL);
-		const viewItem = menu.getByRole('menuitem', { name: 'View', exact: true });
-		await expect(viewItem).toBeEnabled();
-		await viewItem.click();
-
-		const dialog = page.getByRole('dialog', { name: TIME_SERIES_PANEL });
-		await expect(dialog).toBeVisible();
-
-		// known behaviour: the bootstrap stack ingests no telemetry, so a
-		// fully-rendered chart and a "No Data" empty state are both valid
-		// terminal states. Both can also coexist (the chart canvas mounts
-		// before the empty-state overlay paints), so assert that at least
-		// one of the two is reachable rather than using `.or().toBeVisible()`
-		// — that combination triggers strict-mode violations when both
-		// matches resolve.
-		const canvas = dialog.locator('canvas');
-		const noData = dialog.getByText(/no data/i);
-		await expect
-			.poll(async () => (await canvas.count()) + (await noData.count()), {
-				timeout: 30_000,
-			})
-			.toBeGreaterThan(0);
-
-		await dialog.getByRole('button', { name: 'Close' }).click();
-		await expect(dialog).not.toBeVisible();
-	});
-
-	// ─── Table search ────────────────────────────────────────────────────────
-
-	test('TC-05 Table panel search icon reveals search input', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-		await expect(
-			page.getByText(TABLE_PANEL, { exact: true }).first(),
-		).toBeVisible();
-
-		const container = panelContainer(page, TABLE_PANEL);
-		await container.scrollIntoViewIfNeeded();
-		await container.hover();
-
-		// The search icon is hover-revealed; click it to swap the title row
-		// out for the search input.
-		const searchIcon = container.getByTestId('widget-header-search');
-		await searchIcon.click();
-
-		// When `showGlobalSearch` is true, the WidgetHeader unmounts the
-		// Typography.Text that carries the title's `data-testid`, so the
-		// `panelContainer` ancestor chain no longer resolves. Look up the
-		// search input by its testid directly — only one search input is
-		// ever open at a time on a dashboard.
-		const searchInput = page.getByTestId('widget-header-search-input');
-		await expect(searchInput).toBeVisible();
-		await searchInput.fill('test');
-		await expect(searchInput).toHaveValue('test');
-	});
-
-	// ─── Download as CSV ─────────────────────────────────────────────────────
-
-	test('TC-06 Download as CSV triggers a file download', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-		await expect(
-			page.getByText(TABLE_PANEL, { exact: true }).first(),
-		).toBeVisible();
-
-		const menu = await openPanelMoreMenu(page, TABLE_PANEL);
-
-		// known behaviour: with no telemetry, the CSV may contain only the
-		// header row — asserting on `suggestedFilename()` is the resilient
-		// cross-environment signal that the download actually fired.
-		const [download] = await Promise.all([
-			page.waitForEvent('download'),
-			menu
-				.getByRole('menuitem', {
-					name: 'Download as CSV',
-					exact: true,
-				})
-				.click(),
-		]);
-
-		expect(download.suggestedFilename().length).toBeGreaterThan(0);
-	});
-
-	// ─── Clone / Delete ──────────────────────────────────────────────────────
-	//
-	// Clone unconditionally navigates to the panel editor (`/new`) — see
-	// `onCloneHandler` in WidgetGraphComponent. Saving from the editor
-	// returns to the dashboard with the duplicated panel persisted.
-
-	// TODO(e2e): re-enable once CI consistently passes. The Save dialog
-	// intermittently fails to appear on the GitHub Linux runner after
-	// clicking `new-widget-save` — `clickNewWidgetSave` gates on
-	// `toBeEnabled` + `dispatchEvent('click')` and passes locally (incl.
-	// `STRESS=1 CI=1`) but greens out under CI's slower scheduler in a way
-	// I haven't been able to reproduce. See CI-HARDENING.md.
-	test.skip('TC-07 Clone a panel creates a duplicate', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-		const titleLocator = page.getByText(TIME_SERIES_PANEL, { exact: true });
-		await expect(titleLocator.first()).toBeVisible();
-		const beforeCount = await titleLocator.count();
-
-		const menu = await openPanelMoreMenu(page, TIME_SERIES_PANEL);
-		const cloneItem = menu.getByRole('menuitem', { name: 'Clone', exact: true });
-		await expect(cloneItem).toBeEnabled();
-		await cloneItem.click();
-
-		// The clone handler PUTs the new layout, then redirects to /new.
-		await page.waitForURL(/\/new/);
-		await clickNewWidgetSave(page);
-
-		// The Save dialog title varies — "Save Widget" if the query is
-		// untouched (the case here, since clone preserves the original
-		// query) or "Unsaved Changes" otherwise. Match either by clicking
-		// OK in whichever dialog appears.
-		const saveDialog = page.getByRole('dialog');
-		await expect(saveDialog).toBeVisible();
-		await saveDialog.getByRole('button', { name: 'OK' }).click();
-
-		await page.waitForURL((url) => !url.pathname.includes('/new'));
-		await expect(titleLocator).toHaveCount(beforeCount + 1);
-
-		// Cleanup the cloned panel — its index is `beforeCount` (the last match).
-		const cleanupMenu = await openPanelMoreMenu(
-			page,
-			TIME_SERIES_PANEL,
-			beforeCount,
-		);
-		await cleanupMenu
-			.getByRole('menuitem', { name: 'Delete', exact: true })
-			.click();
-		const confirmDialog = page.getByRole('dialog', { name: 'Delete' });
-		await expect(confirmDialog).toBeVisible();
-		await confirmDialog.getByRole('button', { name: 'OK' }).click();
-		await expect(titleLocator).toHaveCount(beforeCount);
-	});
-
-	// TODO(e2e): re-enable once CI consistently passes. Tied to above test.
-	// Will work automatically when that test is re-enabled
-	test.skip('TC-08 Delete confirm dialog removes a cloned panel', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-		const titleLocator = page.getByText(TIME_SERIES_PANEL, { exact: true });
-		await expect(titleLocator.first()).toBeVisible();
-		const beforeCount = await titleLocator.count();
-
-		// Clone a disposable panel — never mutate the seed's original
-		// `Latency` panel because sibling specs depend on it.
-		const cloneMenu = await openPanelMoreMenu(page, TIME_SERIES_PANEL);
-		await cloneMenu.getByRole('menuitem', { name: 'Clone', exact: true }).click();
-		await page.waitForURL(/\/new/);
-		await clickNewWidgetSave(page);
-		await page.getByRole('dialog').getByRole('button', { name: 'OK' }).click();
-		await page.waitForURL((url) => !url.pathname.includes('/new'));
-		await expect(titleLocator).toHaveCount(beforeCount + 1);
-
-		// Delete the clone — last `Latency` in DOM order.
-		const deleteMenu = await openPanelMoreMenu(
-			page,
-			TIME_SERIES_PANEL,
-			beforeCount,
-		);
-		await deleteMenu
-			.getByRole('menuitem', { name: 'Delete', exact: true })
-			.click();
-
-		const dialog = page.getByRole('dialog', { name: 'Delete' });
-		await expect(dialog).toBeVisible();
-		await expect(dialog).toContainText(/are you sure/i);
-
-		await dialog.getByRole('button', { name: 'OK' }).click();
-		await expect(dialog).not.toBeVisible();
-		await expect(titleLocator).toHaveCount(beforeCount);
-	});
-
-	// TODO(e2e): re-enable once CI consistently passes. Tied to above test.
-	// Will work automatically when that test is re-enabled
-	test.skip('TC-09 Cancel delete keeps the panel', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-		const titleLocator = page.getByText(TIME_SERIES_PANEL, { exact: true });
-		await expect(titleLocator.first()).toBeVisible();
-		const beforeCount = await titleLocator.count();
-
-		// Clone a disposable panel to operate on.
-		const cloneMenu = await openPanelMoreMenu(page, TIME_SERIES_PANEL);
-		await cloneMenu.getByRole('menuitem', { name: 'Clone', exact: true }).click();
-		await page.waitForURL(/\/new/);
-		await clickNewWidgetSave(page);
-		await page.getByRole('dialog').getByRole('button', { name: 'OK' }).click();
-		await page.waitForURL((url) => !url.pathname.includes('/new'));
-		await expect(titleLocator).toHaveCount(beforeCount + 1);
-
-		const deleteMenu = await openPanelMoreMenu(
-			page,
-			TIME_SERIES_PANEL,
-			beforeCount,
-		);
-		await deleteMenu
-			.getByRole('menuitem', { name: 'Delete', exact: true })
-			.click();
-
-		const dialog = page.getByRole('dialog', { name: 'Delete' });
-		await expect(dialog).toBeVisible();
-		await dialog.getByRole('button', { name: 'Cancel' }).click();
-		await expect(dialog).not.toBeVisible();
-		// Cancel keeps the clone in place — count unchanged from the
-		// post-clone state.
-		await expect(titleLocator).toHaveCount(beforeCount + 1);
-
-		// Per-test cleanup: actually delete the clone we just kept so
-		// subsequent tests start from the seeded count.
-		const cleanupMenu = await openPanelMoreMenu(
-			page,
-			TIME_SERIES_PANEL,
-			beforeCount,
-		);
-		await cleanupMenu
-			.getByRole('menuitem', { name: 'Delete', exact: true })
-			.click();
-		const confirmDialog = page.getByRole('dialog', { name: 'Delete' });
-		await confirmDialog.getByRole('button', { name: 'OK' }).click();
-		await expect(titleLocator).toHaveCount(beforeCount);
-	});
-
-	// ─── Create Alerts ───────────────────────────────────────────────────────
-
-	test('TC-10 Create Alerts menuitem on a Time Series panel navigates to the alerts editor', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-		await expect(
-			page.getByText(TIME_SERIES_PANEL, { exact: true }).first(),
-		).toBeVisible();
-
-		const menu = await openPanelMoreMenu(page, TIME_SERIES_PANEL);
-		const createAlerts = menu.getByRole('menuitem', {
-			name: /Create Alerts/,
-		});
-		await expect(createAlerts).toBeEnabled();
-
-		// known behaviour: `useCreateAlerts` opens the alerts editor in a
-		// new tab via `window.open(...)` — the current page's URL does not
-		// change. Wait for the new browser tab on the context, not the
-		// existing page.
-		const [newPage] = await Promise.all([
-			page.context().waitForEvent('page'),
-			createAlerts.click(),
-		]);
-		await newPage.waitForLoadState();
-		await expect(newPage).toHaveURL(/\/alerts\/new/);
-		await newPage.close();
-	});
-
-	// ─── Deep coverage ───────────────────────────────────────────────────────
-
-	test('TC-11 fullscreen URL deep-link opens the panel modal directly', async ({
-		authedPage: page,
-	}) => {
-		// First navigate normally and capture the panel's widgetId from the
-		// View action's URL transition — we cannot hard-code a uuid.
-		await gotoDetail(page, apmDashboardId);
-		const menu = await openPanelMoreMenu(page, TIME_SERIES_PANEL);
-		const viewItem = menu.getByRole('menuitem', { name: 'View', exact: true });
-		await expect(viewItem).toBeEnabled();
-		await viewItem.click();
-		await expect(page).toHaveURL(/expandedWidgetId=/);
-		const expandedUrl = page.url();
-		await page
-			.getByRole('dialog', { name: TIME_SERIES_PANEL })
-			.getByRole('button', { name: 'Close' })
-			.click();
-		await expect(page).not.toHaveURL(/expandedWidgetId=/);
-
-		// Now hard-navigate to the captured deep-link in a fresh page state.
-		await page.goto(expandedUrl);
-		await expect(
-			page.getByRole('dialog', { name: TIME_SERIES_PANEL }),
-		).toBeVisible();
-		await expect(page).toHaveURL(/expandedWidgetId=/);
-	});
-
-	test('TC-12 Table panel search filters rows in real time', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-		const tableTitle = page.getByText(TABLE_PANEL, { exact: true }).first();
-		await expect(tableTitle).toBeVisible();
-
-		const container = panelContainer(page, TABLE_PANEL);
-		await container.scrollIntoViewIfNeeded();
-		await container.hover();
-		await container.getByTestId('widget-header-search').click();
-
-		const searchInput = page.getByTestId('widget-header-search-input');
-		await expect(searchInput).toBeVisible();
-
-		// known behaviour: the bootstrap stack ingests no telemetry, so the
-		// table body may be empty. The contract this TC guards is "typing in
-		// the search updates the input value live and does not throw" — a
-		// rendered row count check only fires when telemetry happens to seed
-		// rows. We log no console errors during the search keystrokes either.
-		const errors: Error[] = [];
-		page.on('pageerror', (err) => errors.push(err));
-
-		await searchInput.fill('foo');
-		await expect(searchInput).toHaveValue('foo');
-		await searchInput.fill('');
-		await expect(searchInput).toHaveValue('');
-		await searchInput.fill('bar-baz');
-		await expect(searchInput).toHaveValue('bar-baz');
-
-		expect(errors).toHaveLength(0);
-	});
-
-	test('TC-13 panel renders chart data from the bootstrap golden seed', async ({
-		authedPage: page,
-	}) => {
-		const chartId = await createChartDataDashboardViaApi(page);
-		seedIds.add(chartId);
-
-		await page.goto(`/dashboard/${chartId}`);
-		await expect(
-			page.getByRole('button', {
-				name: /dashboard-icon detail-chart-data-suite/,
-			}),
-		).toBeVisible();
-
-		const panel = page
-			.getByText('E2E Metric RPS', { exact: true })
-			.first()
-			.locator(
-				'xpath=ancestor::div[contains(@class,"widget-graph-component-container")][1]',
-			);
-		await expect(panel).toBeVisible();
-		await expect(panel.locator('canvas').first()).toBeVisible({
-			timeout: 30_000,
-		});
-
-		const dimensions = await panel
-			.locator('canvas')
-			.first()
-			.evaluate((el) => {
-				const c = el as HTMLCanvasElement;
-				return { w: c.width, h: c.height };
-			});
-		expect(dimensions.w).toBeGreaterThan(0);
-		expect(dimensions.h).toBeGreaterThan(0);
-
-		// Empty-state must NOT render — proves the golden seed landed and
-		// the panel query found rows.
-		await expect(panel.getByText(/no data/i)).toHaveCount(0);
-	});
-
-	// TODO(e2e): re-enable once CI consistently passes. Same panel
-	// clone-then-delete flake family as TC-07/TC-08/TC-09 above — the
-	// Save dialog and / or the delete confirmation intermittently fail
-	// on CI's slower scheduler.
-	test.skip('TC-14 Delete only removes the targeted panel — siblings remain', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-
-		// "DB Calls RPS" is a stable sibling we check survives the round-trip.
-		const sibling = page.getByText('DB Calls RPS', { exact: true }).first();
-		await sibling.scrollIntoViewIfNeeded();
-		await expect(sibling).toBeVisible();
-
-		const titleLocator = page.getByText(TIME_SERIES_PANEL, { exact: true });
-		const beforeCount = await titleLocator.count();
-
-		// Clone first so the test is read-only at the seed level.
-		const cloneMenu = await openPanelMoreMenu(page, TIME_SERIES_PANEL);
-		await cloneMenu.getByRole('menuitem', { name: 'Clone', exact: true }).click();
-		await page.waitForURL(/\/new/);
-		await clickNewWidgetSave(page);
-		await page.getByRole('dialog').getByRole('button', { name: 'OK' }).click();
-		await page.waitForURL((url) => !url.pathname.includes('/new'));
-		await expect(titleLocator).toHaveCount(beforeCount + 1);
-
-		// Delete the clone (last in DOM order).
-		const deleteMenu = await openPanelMoreMenu(
-			page,
-			TIME_SERIES_PANEL,
-			beforeCount,
-		);
-		await deleteMenu
-			.getByRole('menuitem', { name: 'Delete', exact: true })
-			.click();
-		await page
-			.getByRole('dialog', { name: 'Delete' })
-			.getByRole('button', { name: 'OK' })
-			.click();
-
-		// Originals + siblings still present.
-		await expect(titleLocator).toHaveCount(beforeCount);
-		await expect(sibling).toBeVisible();
-	});
-});

tests/e2e/tests/dashboards/details/35-add-panel.spec.ts

@@ -1,146 +0,0 @@
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-} from '../../../helpers/dashboards';
-
-// Scope: dashboard-side seams only —
-//   1. The toolbar "New Panel" button opens a dialog listing every panel type
-//      the app supports (the dashboard's responsibility).
-//   2. A panel created from the dialog actually lands on the canvas and
-//      survives a hard reload (the dashboard's persistence contract).
-//
-// Editor-internal behaviour (Query Builder vs ClickHouse tab, Panel Settings,
-// y-axis units, panel-type changes, etc.) belongs in a separate panel-editor
-// spec — do NOT add those here.
-
-test.describe.configure({ mode: 'serial' });
-
-const seedIds = new Set<string>();
-
-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 deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.describe('Dashboard Detail — Add Panel (entry-point + persistence)', () => {
-	test('TC-01 New Panel toolbar button opens a dialog listing all 7 panel types', async ({
-		authedPage: page,
-	}) => {
-		const ts = Date.now();
-		const id = await createDashboardViaApi(page, `add-panel-dialog-${ts}`);
-		seedIds.add(id);
-
-		await page.goto(`/dashboard/${id}`);
-		// Empty dashboards render an onboarding canvas with a duplicate
-		// `add-panel-header` CTA. Scope to the toolbar (`.right-section`).
-		await page
-			.locator('.dashboard-details .right-section')
-			.getByTestId('add-panel-header')
-			.click();
-
-		const dialog = page.getByRole('dialog', { name: 'New Panel' });
-		await expect(dialog).toBeVisible();
-
-		for (const tile of [
-			'panel-type-graph',
-			'panel-type-value',
-			'panel-type-table',
-			'panel-type-list',
-			'panel-type-bar',
-			'panel-type-pie',
-			'panel-type-histogram',
-		]) {
-			await expect(dialog.getByTestId(tile)).toBeVisible();
-		}
-
-		// Dialog dismisses via the Close (×) button — confirms the user can
-		// back out without entering the editor (no /new navigation happens
-		// until a tile is picked).
-		await dialog.getByRole('button', { name: 'Close' }).click();
-		await expect(dialog).toBeHidden();
-		await expect(page).not.toHaveURL(/\/new/);
-	});
-
-	// TODO(e2e): re-enable once CI consistently passes. Same flake family
-	// as `21-panel-actions.spec.ts` TC-07 — Save dialog intermittently
-	// fails to appear on CI after `new-widget-save` despite the
-	// `toBeEnabled` gate and `dispatchEvent('click')`. Passes locally
-	// (incl. `STRESS=1 CI=1`). See CI-HARDENING.md.
-	test.skip('TC-02 saving a new panel persists it on the canvas across reload', async ({
-		authedPage: page,
-	}) => {
-		const ts = Date.now();
-		const id = await createDashboardViaApi(page, `add-panel-persist-${ts}`);
-		seedIds.add(id);
-		const panelName = `e2e-panel-${ts}`;
-
-		await page.goto(`/dashboard/${id}`);
-		await page
-			.locator('.dashboard-details .right-section')
-			.getByTestId('add-panel-header')
-			.click();
-		await page
-			.getByRole('dialog', { name: 'New Panel' })
-			.getByTestId('panel-type-graph')
-			.click();
-
-		// We're now on the editor; minimal interaction — set the name and save.
-		// Anything else (queries, panel-type changes, units) is editor-internal
-		// and belongs in a panel-editor spec.
-		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 (see container/NewWidget/index.tsx). Under
-		// CI load the editor mounts with the disabled variant first; clicking
-		// before `toBeEnabled` resolves means the click hits 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')` — under CI viewport the editor's right-header
-		// can be partially covered by the sidenav's secondary nav panel. Bypass
-		// hit testing via a synthetic click. Also wait for the dialog before
-		// registering the PUT listener so we capture the save mutation rather
-		// than any unrelated background request.
-		await saveBtn.dispatchEvent('click');
-		const saveDialog = page.getByRole('dialog', { name: 'Save Widget' });
-		await expect(saveDialog).toBeVisible();
-
-		const savePut = page.waitForResponse(
-			(r) => r.request().method() === 'PUT' && /\/dashboards\//.test(r.url()),
-		);
-		await saveDialog.getByRole('button', { name: 'OK' }).click();
-		const putResp = await savePut;
-		expect(putResp.ok()).toBeTruthy();
-
-		// The editor navigates back to the dashboard inside the PUT onSuccess
-		// handler — wait for the URL to update before asserting on the canvas.
-		await page.waitForURL((url) => !url.pathname.includes('/new'));
-		// Back on the dashboard — the new panel must render with the typed name.
-		await expect(page).not.toHaveURL(/\/new/);
-		await expect(
-			page.getByText(panelName, { exact: true }).first(),
-		).toBeVisible();
-
-		// Persistence — hard reload, panel still there.
-		await page.reload();
-		await expect(
-			page.getByText(panelName, { exact: true }).first(),
-		).toBeVisible();
-	});
-});

tests/e2e/tests/dashboards/details/44-edit-panel.spec.ts

@@ -1,79 +0,0 @@
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	createApmMetricsDashboardViaApi,
-	deleteDashboardViaApi,
-} from '../../../helpers/dashboards';
-
-// This file's scope is intentionally narrow: prove that the detail page's
-// "Edit panel" entry-point lands the user in the panel editor at
-// `/dashboard/:id/new?widgetId=…`. Editor-internal behaviour (Query Builder
-// pre-population, ClickHouse tab, Panel Settings rename, query-edit + revert,
-// y-axis units, panel-type changes, etc.) is the responsibility of a separate
-// panel-editor spec — keep this file as the dashboard-side seam only.
-
-const seedIds = new Set<string>();
-let apmDashboardId = '';
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		apmDashboardId = await createApmMetricsDashboardViaApi(page);
-		seedIds.add(apmDashboardId);
-	} 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 deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.describe('Dashboard Detail — Edit Panel (entry-point only)', () => {
-	test('TC-01 Edit menu item on a panel navigates to the panel editor', async ({
-		authedPage: page,
-	}) => {
-		await page.goto(`/dashboard/${apmDashboardId}`);
-		await expect(
-			page.getByRole('button', { name: /dashboard-icon APM Metrics/ }),
-		).toBeVisible();
-
-		// "DB Calls RPS" is the only single-instance panel name in the APM
-		// Metrics fixture (other titles like "Latency" repeat across sections),
-		// so it round-trips uniquely without `.first()` gymnastics.
-		const panelTitle = page.getByText('DB Calls RPS', { exact: true }).first();
-		await panelTitle.scrollIntoViewIfNeeded();
-
-		// Walk up to the widget-graph container. Its `:hover` flips the ⋮ icon
-		// from `visibility: hidden` to visible (see GridCardLayout.styles.scss
-		// rule on `.widget-graph-component-container:hover .options-action`).
-		const container = panelTitle.locator(
-			'xpath=ancestor::*[contains(@class,"widget-graph-component-container")][1]',
-		);
-		await container.hover();
-
-		const options = container.getByTestId('widget-header-options');
-		// The ⋮ is a `@signozhq/ui` `DropdownMenuSimple` (Radix-based); it opens
-		// on click, not hover. The container hover above only reveals the icon
-		// (it's `visibility: hidden` until then) — the click toggles the menu.
-		await options.click();
-
-		await page.getByRole('menuitem', { name: 'Edit' }).click();
-
-		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+\/new\?.*widgetId=/);
-		await expect(page.getByTestId('new-widget-save')).toBeVisible();
-	});
-});

tests/e2e/tests/dashboards/details/56-time-range.spec.ts

@@ -1,235 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	createApmMetricsDashboardViaApi,
-	deleteDashboardViaApi,
-} from '../../../helpers/dashboards';
-
-const seedIds = new Set<string>();
-let apmId = '';
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		apmId = await createApmMetricsDashboardViaApi(page);
-		seedIds.add(apmId);
-	} 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 deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-async function openTimePicker(page: Page): Promise<void> {
-	await page
-		.getByRole('textbox', { name: /Last \d+/ })
-		.first()
-		.click();
-}
-
-test.describe('Dashboard Detail — Time Range', () => {
-	test('TC-01 selecting a preset updates the textbox label and URL', async ({
-		authedPage: page,
-	}) => {
-		await page.goto(`/dashboard/${apmId}`);
-		await expect(
-			page.getByRole('button', { name: /dashboard-icon APM Metrics/ }),
-		).toBeVisible();
-
-		await openTimePicker(page);
-
-		const refetch = page.waitForResponse((r) => r.url().includes('/query_range'));
-		await page.getByRole('button', { name: 'Last 1 hour 1h' }).click();
-		const response = await refetch;
-
-		await expect(
-			page.getByRole('textbox', { name: 'Last 1 hour' }),
-		).toBeVisible();
-		await expect(page).toHaveURL(/relativeTime=1h/);
-		// Without seeded telemetry the backend may return 4xx for query_range
-		// (panels render "No Data" — a known harness limitation, not a test
-		// bug). Cancelled in-flight responses also surface here as non-ok.
-		// Only 5xx is a real failure; the URL + textbox label assertions
-		// above already prove the preset click took effect.
-		expect(response.status()).toBeLessThan(500);
-	});
-
-	test('TC-02 switching presets twice updates the label both times', async ({
-		authedPage: page,
-	}) => {
-		await page.goto(`/dashboard/${apmId}`);
-		await expect(
-			page.getByRole('button', { name: /dashboard-icon APM Metrics/ }),
-		).toBeVisible();
-
-		await openTimePicker(page);
-		await page.getByRole('button', { name: 'Last 6 hours 6h' }).click();
-		await expect(
-			page.getByRole('textbox', { name: 'Last 6 hours' }),
-		).toBeVisible();
-		await expect(page).toHaveURL(/relativeTime=6h/);
-
-		await openTimePicker(page);
-		await page.getByRole('button', { name: 'Last 1 day 1d' }).click();
-		await expect(page.getByRole('textbox', { name: 'Last 1 day' })).toBeVisible();
-		await expect(page).toHaveURL(/relativeTime=1d/);
-		await expect(page).not.toHaveURL(/relativeTime=6h/);
-	});
-
-	test('TC-03 custom date range picker reflects selected dates and switches URL to absolute timestamps', async ({
-		authedPage: page,
-	}) => {
-		await page.goto(`/dashboard/${apmId}`);
-		await expect(
-			page.getByRole('button', { name: /dashboard-icon APM Metrics/ }),
-		).toBeVisible();
-
-		await openTimePicker(page);
-		await page.getByRole('button', { name: 'Custom Date Range' }).click();
-
-		const prevMonth = page.getByRole('button', {
-			name: 'Go to the Previous Month',
-		});
-		for (let i = 0; i < 2; i += 1) {
-			await prevMonth.click();
-		}
-
-		// Calendar day buttons have accessible names like "Saturday, March
-		// 14th, 2026" (the rendered label is "14" but a11y appends the suffix
-		// + month + year). Pick a known day by its long-form name regex
-		// against the gridcell — `\b14th\b` is unambiguous and avoids
-		// matching siblings like "14" inside "2014".
-		await page
-			.getByRole('gridcell', { name: /\b14th\b/ })
-			.first()
-			.click();
-
-		const refetch = page.waitForResponse((r) => r.url().includes('/query_range'));
-		await page.getByRole('button', { name: 'Apply' }).click();
-		const response = await refetch;
-
-		await expect(
-			page.getByRole('textbox', { name: /\d{2}\/\d{2}\/\d{4}/ }).first(),
-		).toBeVisible();
-		await expect(page).toHaveURL(/startTime=\d+/);
-		await expect(page).toHaveURL(/endTime=\d+/);
-		// As TC-01: backend 4xx (no telemetry) is acceptable; only 5xx is
-		// failure. Apply triggered the refetch, which is what we verify.
-		expect(response.status()).toBeLessThan(500);
-	});
-
-	test('TC-04 timezone change updates the toolbar timezone label', async ({
-		authedPage: page,
-	}) => {
-		await page.goto(`/dashboard/${apmId}`);
-		await expect(
-			page.getByRole('button', { name: /dashboard-icon APM Metrics/ }),
-		).toBeVisible();
-
-		await openTimePicker(page);
-		await page.getByRole('button', { name: 'Change Timezone' }).click();
-		await expect(
-			page.getByRole('textbox', { name: 'Search timezones...' }),
-		).toBeVisible();
-
-		await page
-			.getByRole('button', { name: /Coordinated Universal Time —/ })
-			.click();
-		await page.keyboard.press('Escape');
-
-		await expect(page.getByText('UTC', { exact: true }).first()).toBeVisible();
-	});
-
-	test('TC-05 refresh-interval popup contents', async ({ authedPage: page }) => {
-		await page.goto(`/dashboard/${apmId}`);
-		await expect(
-			page.getByRole('button', { name: /dashboard-icon APM Metrics/ }),
-		).toBeVisible();
-
-		await page.getByRole('button', { name: 'Set auto refresh' }).click();
-
-		const autoRefresh = page.getByRole('checkbox', { name: 'Auto Refresh' });
-		await expect(autoRefresh).toBeVisible();
-		await expect(autoRefresh).not.toBeChecked();
-
-		// Labels match the live build (no `15 minutes` / `12 hours` — the
-		// test plan's enumeration was approximate).
-		for (const label of [
-			'5 seconds',
-			'10 seconds',
-			'30 seconds',
-			'1 minute',
-			'5 minutes',
-			'10 minutes',
-			'30 minutes',
-			'1 hour',
-			'2 hours',
-			'1 day',
-		]) {
-			await expect(
-				page.getByRole('button', { name: label, exact: true }),
-			).toBeVisible();
-		}
-	});
-
-	test('TC-06 toggling auto-refresh on then changing the interval', async ({
-		authedPage: page,
-	}) => {
-		await page.goto(`/dashboard/${apmId}`);
-		await expect(
-			page.getByRole('button', { name: /dashboard-icon APM Metrics/ }),
-		).toBeVisible();
-
-		await page.getByRole('button', { name: 'Set auto refresh' }).click();
-
-		const autoRefresh = page.getByRole('checkbox', { name: 'Auto Refresh' });
-		await autoRefresh.click();
-		await expect(autoRefresh).toBeChecked();
-
-		await page.getByRole('button', { name: '1 minute', exact: true }).click();
-		await page.getByRole('button', { name: '5 minutes', exact: true }).click();
-		await expect(autoRefresh).toBeChecked();
-
-		await autoRefresh.click();
-		await expect(autoRefresh).not.toBeChecked();
-	});
-
-	test('TC-07 manual sync triggers a query_range refetch', async ({
-		authedPage: page,
-	}) => {
-		await page.goto(`/dashboard/${apmId}`);
-		await expect(
-			page.getByRole('button', { name: /dashboard-icon APM Metrics/ }),
-		).toBeVisible();
-		await expect(
-			page.getByText('Latency', { exact: true }).first(),
-		).toBeVisible();
-
-		const refetch = page.waitForResponse((r) => r.url().includes('/query_range'));
-		await page.locator('.refresh-btn button').click();
-		const response = await refetch;
-		// 4xx is expected without seeded telemetry; only 5xx is a failure.
-		// The sync click successfully triggering a query_range fetch is the
-		// behaviour under test.
-		expect(response.status()).toBeLessThan(500);
-	});
-});

tests/e2e/tests/dashboards/details/67-variables.spec.ts

@@ -1,483 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	awaitVariablesResolved,
-	createVariablesDashboardViaApi,
-	deleteDashboardViaApi,
-} from '../../../helpers/dashboards';
-import variablesTemplate from '../../../testdata/variables-dashboard.json';
-
-// Variables that depend on backend resolution against seeded telemetry the
-// bootstrap stack does not produce. Skip them so `awaitVariablesResolved`
-// does not block on values that can never appear.
-const TELEMETRY_DEPENDENT_VARS = ['q_env', 'q_service', 'd_namespace'];
-
-test.describe.configure({ mode: 'serial' });
-
-const seedIds = new Set<string>();
-let varDashboardId = '';
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		varDashboardId = await createVariablesDashboardViaApi(
-			page,
-			'detail-variables-suite',
-		);
-		seedIds.add(varDashboardId);
-		// Per the framework contract: every variable with a default has its
-		// `selectedValue` set in the seed JSON; backend-resolved variables
-		// (Query / Dynamic) cannot resolve without seeded telemetry, so we
-		// list them in `skipNames`. Tests must not race ahead of seed
-		// materialisation — this gate ensures the persisted dashboard is in
-		// a known state before any test runs.
-		await awaitVariablesResolved(page, varDashboardId, {
-			skipNames: TELEMETRY_DEPENDENT_VARS,
-		});
-	} 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 deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-function variablesQueryParam(state: Record<string, unknown>): string {
-	return encodeURIComponent(encodeURIComponent(JSON.stringify(state)));
-}
-
-async function gotoVariablesDashboard(
-	page: Page,
-	urlState?: Record<string, unknown>,
-): Promise<void> {
-	const url = urlState
-		? `/dashboard/${varDashboardId}?variables=${variablesQueryParam(urlState)}`
-		: `/dashboard/${varDashboardId}`;
-	await page.goto(url);
-	await expect(
-		page.getByRole('button', {
-			name: /dashboard-icon detail-variables-suite/,
-		}),
-	).toBeVisible();
-}
-
-test.describe('Dashboard Detail — Variables', () => {
-	test('TC-01 variables bar renders all four types', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page);
-
-		for (const name of [
-			'$tb_env',
-			'$tb_service',
-			'$cu_single',
-			'$cu_env_all',
-			'$cu_services',
-			'$q_env',
-			'$q_service',
-			'$d_namespace',
-		]) {
-			await expect(page.getByText(name, { exact: true })).toBeVisible();
-		}
-
-		// Textbox variables expose their current value via `value` and `title`
-		// attributes (the antd Input has no accessible name matching the value),
-		// so we match on input[value="..."] rather than getByRole+name.
-		await expect(page.locator('input[value="otel-demo"]')).toBeVisible();
-		await expect(page.locator('input[value="frontend"]')).toBeVisible();
-
-		await expect(page.getByTestId('variable-select')).toHaveCount(6);
-	});
-
-	test('TC-02 selecting a value in a single-value Custom variable updates URL and aria-selected', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page);
-
-		// $cu_single (nth(0)) — single-select Custom with three static
-		// options. Driving Custom rather than Query keeps the test
-		// deterministic regardless of seeded telemetry.
-		const dropdown = page.getByTestId('variable-select').nth(0);
-		await dropdown.click();
-		await page.getByRole('option', { name: 'mq-kafka' }).click();
-
-		await expect(
-			dropdown.locator('.ant-select-selection-item', { hasText: 'mq-kafka' }),
-		).toBeVisible();
-		await expect(page).toHaveURL(/variables=.*mq-kafka/);
-
-		await dropdown.click();
-		await expect(page.getByRole('option', { name: 'mq-kafka' })).toHaveAttribute(
-			'aria-selected',
-			'true',
-		);
-		await page.keyboard.press('Escape');
-	});
-
-	test('TC-03 multi-select renders chips and URL encodes array', async ({
-		authedPage: page,
-	}) => {
-		// URL state seeds adservice + cartservice as initial selection; this also
-		// guarantees the URL contains the encoded array so we can assert on it
-		// without relying on the seeded server-side selection rendering identically
-		// across reloads.
-		await gotoVariablesDashboard(page, {
-			cu_services: ['adservice', 'cartservice'],
-		});
-
-		await expect(
-			page.getByRole('button', { name: 'Remove tag adservice' }),
-		).toBeVisible();
-		await expect(
-			page.getByRole('button', { name: 'Remove tag cartservice' }),
-		).toBeVisible();
-
-		await expect(page).toHaveURL(/adservice/);
-		await expect(page).toHaveURL(/cartservice/);
-	});
-
-	test('TC-04 removing a chip updates URL', async ({ authedPage: page }) => {
-		await gotoVariablesDashboard(page, {
-			cu_services: ['adservice', 'cartservice'],
-		});
-
-		await expect(
-			page.getByRole('button', { name: 'Remove tag adservice' }),
-		).toBeVisible();
-		await page.getByRole('button', { name: 'Remove tag adservice' }).click();
-
-		// Removing a chip on a multi-select expands the dropdown; URL state
-		// only commits when the dropdown closes (onDropdownVisibleChange =>
-		// false). The CustomMultiSelect swallows Escape, so click outside the
-		// dropdown to dismiss it.
-		await page.locator('img[alt="dashboard-img"]').click();
-		await expect(page.getByRole('listbox')).toBeHidden();
-
-		await expect(
-			page.getByRole('button', { name: 'Remove tag adservice' }),
-		).toBeHidden();
-		await expect(
-			page.getByRole('button', { name: 'Remove tag cartservice' }),
-		).toBeVisible();
-		await expect(page).toHaveURL(/variables=/);
-		await expect(page).not.toHaveURL(/adservice/);
-	});
-
-	test('TC-05 ALL option on a Custom variable', async ({ authedPage: page }) => {
-		await gotoVariablesDashboard(page, { cu_env_all: 'otel-demo' });
-
-		// $cu_env_all (nth(1)) — multi-select Custom with showALLOption: true,
-		// so the dropdown exposes an "ALL" toggle alongside the static options.
-		const dropdown = page.getByTestId('variable-select').nth(1);
-		await expect(
-			dropdown.locator('.ant-select-selection-item', {
-				hasText: 'otel-demo',
-			}),
-		).toBeVisible();
-
-		await dropdown.click();
-		await page.getByRole('option', { name: 'ALL' }).click();
-
-		// When ALL is selected, the multi-select renders an "ALL" badge in a
-		// custom container (not the standard .ant-select-selection-item), so
-		// match on the option's checked state inside the dropdown listbox
-		// rather than on the closed-state chip.
-		await expect(page.getByRole('option', { name: 'ALL' })).toHaveAttribute(
-			'aria-selected',
-			'true',
-		);
-		await expect(page).toHaveURL(/variables=/);
-	});
-
-	test('TC-06 textbox variable update propagates to URL', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page);
-
-		// Locate by the testid wrapping a stable id, since `input[value="..."]`
-		// becomes stale the moment we fill('') the field.
-		await expect(page.locator('input[value="otel-demo"]')).toBeVisible();
-		const tb = page.getByPlaceholder('Enter value').first();
-		await tb.click();
-		await tb.fill('');
-		await tb.fill('production');
-		await tb.press('Enter');
-
-		await expect(page.locator('input[value="production"]')).toBeVisible();
-		await expect(page).toHaveURL(/variables=.*production/);
-	});
-
-	test('TC-07 cascading: child variable listbox opens after parent change', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page, { q_env: 'otel-demo' });
-
-		// q_service (nth(4)) is cascaded from q_env (nth(3)).
-		const child = page.getByTestId('variable-select').nth(4);
-		await child.click();
-
-		// known behaviour: the child's option list requires seeded telemetry —
-		// the bootstrap stack has none, so we only assert that the listbox
-		// renders without crashing rather than checking specific options.
-		await expect(page.getByRole('listbox').first()).toBeVisible();
-		await page.keyboard.press('Escape');
-
-		await expect(page).toHaveURL(/otel-demo/);
-	});
-
-	test('TC-08 URL deep-link restores variable state on hard reload', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page, { cu_env_all: 'mq-kafka' });
-
-		const dropdown = page.getByTestId('variable-select').nth(1);
-		await expect(
-			dropdown.locator('.ant-select-selection-item', { hasText: 'mq-kafka' }),
-		).toBeVisible();
-
-		await page.reload({ waitUntil: 'domcontentloaded' });
-		await expect(
-			page.getByRole('button', {
-				name: /dashboard-icon detail-variables-suite/,
-			}),
-		).toBeVisible();
-		await expect(
-			dropdown.locator('.ant-select-selection-item', { hasText: 'mq-kafka' }),
-		).toBeVisible();
-
-		await expect(page).toHaveURL(/variables=%257B/);
-	});
-
-	// ─── Deep coverage ───────────────────────────────────────────────────────
-
-	test('TC-09 ALL → specific value → ALL round-trip preserves URL state', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page);
-		const dropdown = page.getByTestId('variable-select').nth(1); // cu_env_all
-
-		// Seed defaults to ALL — open, pick a specific value, assert URL.
-		await dropdown.click();
-		await page.getByRole('option', { name: 'mq-kafka' }).click();
-		await page.keyboard.press('Escape');
-		await expect(page).toHaveURL(/mq-kafka/);
-
-		// Re-open, switch back to ALL — URL must update again.
-		await dropdown.click();
-		const allOption = page.getByRole('option', { name: 'ALL' });
-		await allOption.click();
-		await expect(allOption).toHaveAttribute('aria-selected', 'true');
-		await page.keyboard.press('Escape');
-		// `mq-kafka` should no longer appear in the URL after reverting to ALL.
-		await expect(page).not.toHaveURL(/mq-kafka/);
-	});
-
-	test('TC-10 two variables changed in sequence both encode in URL', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page);
-
-		// cu_single — pick `production`.
-		const single = page.getByTestId('variable-select').nth(0);
-		await single.click();
-		await page.getByRole('option', { name: 'production' }).click();
-		await page.keyboard.press('Escape');
-		await expect(page).toHaveURL(/production/);
-
-		// q_service — open the multi-select, dismiss without picking. The URL
-		// should still contain the previous selection.
-		const cuServices = page.getByTestId('variable-select').nth(2);
-		await cuServices.click();
-		await page.keyboard.press('Escape');
-		await expect(page).toHaveURL(/production/);
-		await expect(page).toHaveURL(/cu_single/);
-	});
-
-	test('TC-11 navigating away and back preserves the URL-encoded state', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page, { cu_single: 'mq-kafka' });
-		const dropdown = page.getByTestId('variable-select').nth(0);
-		await expect(
-			dropdown.locator('.ant-select-selection-item', { hasText: 'mq-kafka' }),
-		).toBeVisible();
-		const stateUrl = page.url();
-
-		// Leave to the list, come back via browser back — URL is restored.
-		// `dispatchEvent('click')` — the expanded sidenav intercepts pointer
-		// events at the breadcrumb's center, defeating even `force: true`.
-		// Dispatching the click directly on the DOM node bypasses hit testing.
-		await page
-			.getByRole('button', { name: 'Dashboard /' })
-			.dispatchEvent('click');
-		await expect(page).toHaveURL(/\/dashboard$/);
-		await page.goBack();
-		await expect(page).toHaveURL(stateUrl);
-		await expect(
-			dropdown.locator('.ant-select-selection-item', { hasText: 'mq-kafka' }),
-		).toBeVisible();
-	});
-
-	// ─── TBD coverage — placeholders to fill in when each feature lands ──────
-	//
-	// Each `test.skip` below marks a behaviour the spec does NOT yet exercise.
-	// They are intentional gaps, not bugs — when the feature ships or the seed
-	// gains telemetry, replace `test.skip` with `test`, drop the comment, and
-	// implement.
-
-	// eslint-disable-next-line playwright/expect-expect
-	test.skip('TC-12 Custom variable without a default prompts user to select a value', async () => {
-		// Requires extending variables-dashboard.json with a Custom variable
-		// that has no `selectedValue` and no `allSelected`. The UI should
-		// render the dropdown empty/"Select value" until a user picks.
-	});
-
-	// eslint-disable-next-line playwright/expect-expect
-	test.skip('TC-13 Query variable with pre-seeded selectedValue renders without backend resolution', async () => {
-		// Requires extending variables-dashboard.json with a Query variable
-		// that ships with `selectedValue` already populated — the UI should
-		// trust the seed and not block on a query.
-	});
-
-	test('TC-14 multi-select Query variable without telemetry shows an empty option list', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page);
-
-		// q_service is the only multi-select Query in the seed (nth(4) in
-		// the dropdown order). Without telemetry the option list is empty —
-		// assert the empty-state explicitly.
-		const child = page.getByTestId('variable-select').nth(4);
-		await child.click();
-		const listbox = page.getByRole('listbox').first();
-		await expect(listbox).toBeVisible();
-		await expect(listbox.getByRole('option')).toHaveCount(0);
-		await page.keyboard.press('Escape');
-	});
-
-	test('TC-15 Dynamic variable resolves a seeded namespace value', async ({
-		authedPage: page,
-	}) => {
-		// d_namespace's `dynamicVariablesAttribute` is `k8s.namespace.name`
-		// over the `metrics` source. The bootstrap OTel collector ingests
-		// the golden dataset which tags every resource with
-		// `k8s.namespace.name=signoz-<service>` for 8 distinct services.
-		// SigNoz's `signoz_metrics.distributed_metadata` table is populated
-		// naturally by the collector's signozclickhousemetrics exporter, and
-		// `/api/v1/fields/values?signal=metrics&name=k8s.namespace.name`
-		// surfaces the values so the Dynamic variable auto-resolves.
-		await gotoVariablesDashboard(page);
-
-		// d_namespace is the 6th dropdown variable in DOM order. The
-		// closed-state of the combobox renders the auto-resolved value
-		// inline next to the variable name. Match any of the 8 seeded
-		// namespaces — ordering depends on the backend sort, so we accept
-		// whichever it returns first.
-		const dynamic = page.getByTestId('variable-select').nth(5);
-		await expect(dynamic).toContainText(/signoz-\w+/, { timeout: 15_000 });
-	});
-
-	// eslint-disable-next-line playwright/expect-expect
-	test.skip('TC-16 changing a variable referenced in a panel query refetches the panel data', async () => {
-		// $service.name and $deployment.environment are referenced by APM
-		// panel queries. Asserting that a variable change triggers a
-		// query_range refetch with the new substitution requires either
-		// seeded telemetry or a network-request listener that confirms the
-		// outbound query body contains the new value. Defer until the
-		// chart-data assertion path is in place.
-	});
-
-	test('TC-17 variable bar order matches the `order` field in dashboard JSON', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page);
-
-		// Expected order matches the `order` field in variables-dashboard.json.
-		const expected = [
-			'$tb_env',
-			'$tb_service',
-			'$cu_single',
-			'$cu_env_all',
-			'$cu_services',
-			'$q_env',
-			'$q_service',
-			'$d_namespace',
-		];
-		const allText = await page.locator('text=/^\\$\\w+$/').allInnerTexts();
-		const actual = allText.filter((t) => /^\$\w+$/.test(t));
-		expect(actual.slice(0, expected.length)).toEqual(expected);
-	});
-
-	// eslint-disable-next-line playwright/expect-expect
-	test.skip('TC-18 reordering variables via drag persists to the dashboard JSON', async () => {
-		// The Configure → Variables tab supports drag handles. After a
-		// reorder, the persisted `order` fields should update and the
-		// variables bar should re-render in the new order.
-	});
-
-	test('TC-19 variable removed via Configure disappears from the variables bar', async ({
-		authedPage: page,
-	}) => {
-		await gotoVariablesDashboard(page);
-
-		// `tb_service` (textbox, no dependents) — easiest to remove cleanly.
-		await expect(page.getByText('$tb_service', { exact: true })).toBeVisible();
-
-		await page
-			.locator('.dashboard-details .right-section')
-			.getByTestId('show-drawer')
-			.click();
-		const dialog = page.getByRole('dialog');
-		await dialog.getByRole('tab', { name: 'Variables' }).click();
-		const tabpanel = dialog.getByRole('tabpanel', { name: 'Variables' });
-
-		const nameCell = tabpanel.getByText('tb_service', { exact: true }).first();
-		await nameCell.hover();
-		await nameCell
-			.locator(
-				'xpath=ancestor::*[contains(@class,"variable-item") or self::tr][1]',
-			)
-			.locator('.delete-variable-button')
-			.first()
-			.dispatchEvent('click');
-		const confirm = page
-			.getByRole('dialog')
-			.filter({ hasText: /delete variable/i })
-			.last();
-		await confirm.getByRole('button', { name: 'OK' }).click();
-
-		await expect(tabpanel.getByText('tb_service', { exact: true })).toHaveCount(
-			0,
-		);
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-
-		await expect(page.getByText('$tb_service', { exact: true })).toHaveCount(0);
-
-		// Restore the persisted variable so subsequent serial-mode tests still pass.
-		const token = await authToken(page);
-		await page.request.put(`/api/v1/dashboards/${varDashboardId}`, {
-			data: { ...variablesTemplate, title: 'detail-variables-suite' },
-			headers: { Authorization: `Bearer ${token}` },
-		});
-		await page.reload();
-		await expect(page.getByText('$tb_service', { exact: true })).toBeVisible();
-	});
-});

tests/e2e/tests/dashboards/details/78-edit-mode.spec.ts

@@ -1,332 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-} from '../../../helpers/dashboards';
-
-test.describe.configure({ mode: 'serial' });
-
-const seedIds = new Set<string>();
-
-async function seed(page: Page, title: string): Promise<string> {
-	const id = await createDashboardViaApi(page, title);
-	seedIds.add(id);
-	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);
-		for (const id of seedIds) {
-			await deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-async function openEditMode(page: Page): Promise<void> {
-	await page.getByTestId('options').click();
-}
-
-async function closeEditModeIfOpen(page: Page): Promise<void> {
-	const lockBtn = page.getByRole('button', { name: 'Lock Dashboard' });
-	if (await lockBtn.isVisible().catch(() => false)) {
-		await lockBtn.click({ force: true });
-	}
-}
-
-test.describe('Dashboard Detail — Edit Mode', () => {
-	test('TC-01 edit-mode popup contains all six action buttons', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'edit-mode-popup');
-		await page.goto(`/dashboard/${id}`);
-
-		await openEditMode(page);
-
-		await expect(
-			page.getByRole('button', { name: 'Lock Dashboard' }),
-		).toBeVisible();
-		await expect(
-			page.getByRole('button', { name: 'Rename', exact: true }),
-		).toBeVisible();
-		await expect(page.getByRole('button', { name: 'Full screen' })).toBeVisible();
-		await expect(page.getByRole('button', { name: 'New section' })).toBeVisible();
-		await expect(page.getByRole('button', { name: 'Export JSON' })).toBeVisible();
-		await expect(
-			page.getByRole('button', { name: 'Copy as JSON' }),
-		).toBeVisible();
-
-		await page.getByRole('button', { name: 'Lock Dashboard' }).click();
-		await expect(
-			page.getByRole('button', { name: 'Lock Dashboard' }),
-		).toBeHidden();
-	});
-
-	test('TC-02 Lock Dashboard exits edit mode', async ({ authedPage: page }) => {
-		const id = await seed(page, 'edit-mode-lock');
-		await page.goto(`/dashboard/${id}`);
-
-		await openEditMode(page);
-		await page.getByRole('button', { name: 'Lock Dashboard' }).click();
-
-		await expect(
-			page.getByRole('button', { name: 'Lock Dashboard' }),
-		).toBeHidden();
-		await expect(
-			page.getByRole('button', { name: 'Rename', exact: true }),
-		).toBeHidden();
-		await expect(page.getByRole('button', { name: 'New section' })).toBeHidden();
-		await expect(page.getByRole('button', { name: 'Export JSON' })).toBeHidden();
-	});
-
-	test('TC-03 rename dashboard — breadcrumb updates, then restore', async ({
-		authedPage: page,
-	}) => {
-		const ts = Date.now();
-		const original = `original-${ts}`;
-		const renamed = `Renamed-${ts}`;
-		const id = await seed(page, original);
-		await page.goto(`/dashboard/${id}`);
-
-		await openEditMode(page);
-		await page.getByRole('button', { name: 'Rename', exact: true }).click();
-
-		const renameDialog = page.getByRole('dialog', {
-			name: 'Rename Dashboard',
-		});
-		await expect(renameDialog).toBeVisible();
-
-		const nameInput = renameDialog.getByTestId('dashboard-name');
-		await nameInput.fill('');
-		await nameInput.fill(renamed);
-		await renameDialog.getByRole('button', { name: 'Rename Dashboard' }).click();
-
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${renamed}`),
-			}),
-		).toBeVisible();
-
-		// Restore.
-		await openEditMode(page);
-		await page.getByRole('button', { name: 'Rename', exact: true }).click();
-		const restoreDialog = page.getByRole('dialog', {
-			name: 'Rename Dashboard',
-		});
-		const restoreInput = restoreDialog.getByTestId('dashboard-name');
-		await restoreInput.fill('');
-		await restoreInput.fill(original);
-		await restoreDialog.getByRole('button', { name: 'Rename Dashboard' }).click();
-
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${original}`),
-			}),
-		).toBeVisible();
-	});
-
-	test('TC-04 cancel rename leaves name unchanged', async ({
-		authedPage: page,
-	}) => {
-		const ts = Date.now();
-		const original = `cancel-rename-${ts}`;
-		const id = await seed(page, original);
-		await page.goto(`/dashboard/${id}`);
-
-		await openEditMode(page);
-		await page.getByRole('button', { name: 'Rename', exact: true }).click();
-
-		const renameDialog = page.getByRole('dialog', {
-			name: 'Rename Dashboard',
-		});
-		const nameInput = renameDialog.getByTestId('dashboard-name');
-		await nameInput.fill('');
-		await nameInput.fill('Should Not Be Saved');
-
-		await renameDialog.getByRole('button', { name: 'Cancel' }).click();
-
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${original}`),
-			}),
-		).toBeVisible();
-		await expect(page.getByText('Should Not Be Saved')).toBeHidden();
-	});
-
-	test('TC-05 add a new section via edit mode, then remove it', async ({
-		authedPage: page,
-	}) => {
-		const ts = Date.now();
-		const id = await seed(page, `edit-mode-section-${ts}`);
-		await page.goto(`/dashboard/${id}`);
-
-		await openEditMode(page);
-		await page.getByRole('button', { name: 'New section' }).click();
-
-		const sectionDialog = page.getByRole('dialog', { name: 'New Section' });
-		const sectionName = `e2e-section-${ts}`;
-		await sectionDialog.getByTestId('section-name').fill(sectionName);
-		await sectionDialog.getByRole('button', { name: 'Create Section' }).click();
-
-		const sectionTitle = page
-			.locator('.section-title')
-			.filter({ hasText: sectionName });
-		await expect(sectionTitle).toBeVisible();
-
-		// Cleanup — remove the section. The ellipsis trigger sits on the
-		// `.row-panel` container alongside the section title; the popover it
-		// opens has rootClassName="row-settings" and renders at body level.
-		const sectionRow = sectionTitle.locator(
-			'xpath=ancestor::*[contains(@class, "row-panel")]',
-		);
-		await sectionRow.hover();
-		await sectionRow.locator('.settings-icon').click();
-		const rowSettingsPopover = page.locator('.row-settings');
-		await expect(rowSettingsPopover).toBeVisible();
-		await rowSettingsPopover
-			.getByRole('button', { name: 'Remove Section' })
-			.click();
-
-		const deleteDialog = page.getByRole('dialog', { name: 'Delete Row' });
-		await expect(deleteDialog).toBeVisible();
-		await deleteDialog.getByRole('button', { name: 'OK' }).click();
-
-		await expect(sectionTitle).toBeHidden();
-	});
-
-	test('TC-06 Export JSON triggers a .json download', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'edit-mode-export');
-		await page.goto(`/dashboard/${id}`);
-
-		await openEditMode(page);
-
-		const downloadPromise = page.waitForEvent('download');
-		await page.getByRole('button', { name: 'Export JSON' }).click();
-		const download = await downloadPromise;
-
-		expect(download.suggestedFilename()).toMatch(/\.json$/);
-
-		await closeEditModeIfOpen(page);
-	});
-
-	test('TC-07 Copy as JSON puts dashboard JSON on the clipboard', async ({
-		authedPage: page,
-	}) => {
-		await page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
-
-		const ts = Date.now();
-		const title = `edit-mode-copy-${ts}`;
-		const id = await seed(page, title);
-		await page.goto(`/dashboard/${id}`);
-
-		await openEditMode(page);
-		await page.getByRole('button', { name: 'Copy as JSON' }).click();
-
-		const clipboardText = await page.evaluate(() =>
-			navigator.clipboard.readText(),
-		);
-		const parsed = JSON.parse(clipboardText) as { title?: string };
-		expect(parsed.title ?? '').toContain(title);
-
-		await closeEditModeIfOpen(page);
-	});
-
-	// known behaviour: headless Chromium does not honour the Fullscreen API,
-	// so we cannot assert `document.fullscreenElement`. Verifying that the
-	// click is benign (breadcrumb still rendered) is the strongest cross-env
-	// check available.
-	test('TC-08 Full screen — clicking does not crash the dashboard', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'edit-mode-fullscreen');
-		await page.goto(`/dashboard/${id}`);
-
-		await openEditMode(page);
-		await page.getByRole('button', { name: 'Full screen' }).click();
-
-		await expect(
-			page.getByRole('button', { name: /Dashboard \// }),
-		).toBeVisible();
-
-		await page.keyboard.press('Escape');
-		await closeEditModeIfOpen(page);
-	});
-
-	// ─── Deep coverage ───────────────────────────────────────────────────────
-
-	test('TC-09 lock → unlock round-trip restores edit-mode controls', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'edit-mode-lock-roundtrip');
-		await page.goto(`/dashboard/${id}`);
-
-		// Lock the dashboard.
-		await openEditMode(page);
-		await page.getByRole('button', { name: 'Lock Dashboard' }).click();
-		await expect(
-			page.getByRole('button', { name: 'Lock Dashboard' }),
-		).toBeHidden();
-
-		// Re-opening the popup after a lock shows the Unlock label instead of
-		// Lock. The button label flips based on `isDashboardLocked`.
-		await openEditMode(page);
-		const unlockBtn = page.getByRole('button', { name: 'Unlock Dashboard' });
-		await expect(unlockBtn).toBeVisible();
-		await unlockBtn.click();
-
-		// After unlock, the popup should re-expose the original action buttons.
-		await openEditMode(page);
-		await expect(
-			page.getByRole('button', { name: 'Rename', exact: true }),
-		).toBeVisible();
-		await expect(page.getByRole('button', { name: 'New section' })).toBeVisible();
-		await closeEditModeIfOpen(page);
-	});
-
-	test('TC-10 rename persists across hard reload', async ({
-		authedPage: page,
-	}) => {
-		const ts = Date.now();
-		const original = `rename-persist-${ts}`;
-		const renamed = `Renamed-Persist-${ts}`;
-		const id = await seed(page, original);
-		await page.goto(`/dashboard/${id}`);
-
-		await openEditMode(page);
-		await page.getByRole('button', { name: 'Rename', exact: true }).click();
-		const renameDialog = page.getByRole('dialog', {
-			name: 'Rename Dashboard',
-		});
-		const nameInput = renameDialog.getByTestId('dashboard-name');
-		await nameInput.fill('');
-		await nameInput.fill(renamed);
-		await renameDialog.getByRole('button', { name: 'Rename Dashboard' }).click();
-
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${renamed}`),
-			}),
-		).toBeVisible();
-
-		// Hard reload — name must still be the renamed one.
-		await page.reload();
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${renamed}`),
-			}),
-		).toBeVisible();
-		await expect(page).toHaveTitle(new RegExp(renamed));
-	});
-});

tests/e2e/tests/dashboards/details/87-configure.spec.ts

@@ -1,687 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	awaitVariablesResolved,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-} from '../../../helpers/dashboards';
-
-const TELEMETRY_DEPENDENT_VARS = ['q_env', 'q_service', 'd_namespace'];
-
-// `createVariablesDashboardViaApi` is added by the group-3 spec. Import lazily
-// so this file still compiles while it is missing — tests that need it skip
-// at runtime.
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const dashboardsHelpers = require('../../../helpers/dashboards') as {
-	createVariablesDashboardViaApi?: (
-		page: Page,
-		title: string,
-	) => Promise<string>;
-};
-const hasVariablesHelper =
-	typeof dashboardsHelpers.createVariablesDashboardViaApi === 'function';
-
-test.describe.configure({ mode: 'serial' });
-
-const seedIds = new Set<string>();
-
-async function seed(page: Page, title: string): Promise<string> {
-	const id = await createDashboardViaApi(page, title);
-	seedIds.add(id);
-	return id;
-}
-
-async function seedVariablesDashboard(
-	page: Page,
-	title: string,
-): Promise<string> {
-	if (!dashboardsHelpers.createVariablesDashboardViaApi) {
-		throw new Error('createVariablesDashboardViaApi helper is not available');
-	}
-	const id = await dashboardsHelpers.createVariablesDashboardViaApi(page, title);
-	seedIds.add(id);
-	// Wait for the seeded dashboard's variables to fully resolve before any
-	// caller test acts on them. Variables with defaults already have
-	// `selectedValue` set; Query/Dynamic variables can't resolve without
-	// telemetry and are skipped.
-	await awaitVariablesResolved(page, id, {
-		skipNames: TELEMETRY_DEPENDENT_VARS,
-	});
-	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);
-		for (const id of seedIds) {
-			await deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-async function openConfigureDrawer(page: Page) {
-	// An empty dashboard renders an onboarding canvas with a duplicate
-	// `data-testid="show-drawer"` Configure CTA alongside the toolbar one.
-	// Scope to the toolbar (`.dashboard-details .right-section`) to avoid the
-	// strict-mode collision.
-	await page
-		.locator('.dashboard-details .right-section')
-		.getByTestId('show-drawer')
-		.click();
-	const dialog = page.getByRole('dialog');
-	await expect(dialog).toBeVisible();
-	return dialog;
-}
-
-async function deleteVariableByName(page: Page, varName: string) {
-	const dialog = await openConfigureDrawer(page);
-	await dialog.getByRole('tab', { name: 'Variables' }).click();
-	const tabpanel = dialog.getByRole('tabpanel', { name: 'Variables' });
-	const nameCell = tabpanel.getByText(varName, { exact: true }).first();
-	await nameCell.hover();
-	// Walk up to the surrounding row container to scope the delete-button
-	// search; `.variable-item` (or the variable row container) wraps the
-	// hover-revealed delete button.
-	await nameCell
-		.locator('xpath=ancestor::*[contains(@class,"variable-item") or self::tr][1]')
-		.locator('.delete-variable-button')
-		.first()
-		.dispatchEvent('click');
-	const confirm = page
-		.getByRole('dialog')
-		.filter({ hasText: /delete variable/i })
-		.last();
-	await confirm.getByRole('button', { name: 'OK' }).click();
-	await expect(tabpanel.getByText(varName, { exact: true })).toHaveCount(0);
-	await dialog.getByRole('button', { name: /close/i }).first().click();
-}
-
-test.describe('Dashboard Detail — Configure drawer', () => {
-	test('TC-01 Configure drawer opens with three tabs and Overview is active', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'cfg-drawer-chrome');
-		await page.goto(`/dashboard/${id}`);
-
-		const dialog = await openConfigureDrawer(page);
-
-		await expect(dialog.getByText('Dashboard Configuration')).toBeVisible();
-		await expect(dialog.getByRole('tab', { name: 'Overview' })).toBeVisible();
-		await expect(dialog.getByRole('tab', { name: 'Variables' })).toBeVisible();
-		await expect(dialog.getByRole('tab', { name: 'Publish' })).toBeVisible();
-
-		await expect(dialog.getByRole('tab', { name: 'Overview' })).toHaveAttribute(
-			'aria-selected',
-			'true',
-		);
-		await expect(
-			dialog.getByRole('tabpanel', { name: 'Overview' }),
-		).toBeVisible();
-
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-		await expect(dialog).not.toBeVisible();
-	});
-
-	test('TC-02 update name, description, and tag — persists across reload', async ({
-		authedPage: page,
-	}) => {
-		const ts = Date.now();
-		const original = `cfg-overview-save-${ts}`;
-		const updated = `Configured-${ts}`;
-		const id = await seed(page, original);
-		await page.goto(`/dashboard/${id}`);
-
-		const dialog = await openConfigureDrawer(page);
-
-		const nameInput = dialog.getByTestId('dashboard-name');
-		await nameInput.click();
-		await nameInput.fill('');
-		await nameInput.fill(updated);
-
-		await dialog.getByTestId('dashboard-desc').fill('Automated test description');
-
-		const tagInput = dialog.getByPlaceholder('Start typing your tag name');
-		await tagInput.fill(`e2e-tag-${ts}`);
-		await tagInput.press('Enter');
-
-		const saveBtn = dialog.getByRole('button', { name: 'Save' });
-		await saveBtn.scrollIntoViewIfNeeded();
-		const [putResp] = await Promise.all([
-			page.waitForResponse(
-				(r) => r.request().method() === 'PUT' && /\/dashboards\//.test(r.url()),
-			),
-			saveBtn.click({ force: true }),
-		]);
-		expect(putResp.ok()).toBeTruthy();
-
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-		await page.reload();
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${updated}`),
-			}),
-		).toBeVisible();
-	});
-
-	test('TC-03 Discard reverts unsaved Overview changes', async ({
-		authedPage: page,
-	}) => {
-		const original = 'cfg-overview-discard';
-		const id = await seed(page, original);
-		await page.goto(`/dashboard/${id}`);
-
-		const dialog = await openConfigureDrawer(page);
-		const nameInput = dialog.getByTestId('dashboard-name');
-		await expect(nameInput).toHaveValue(original);
-
-		await nameInput.fill('Temp Modified Name');
-		const discard = dialog.getByRole('button', { name: 'Discard' });
-		await expect(discard).toBeVisible();
-		await discard.click();
-
-		await expect(nameInput).toHaveValue(original);
-		await expect(dialog.getByRole('button', { name: 'Save' })).not.toBeVisible();
-
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-	});
-
-	test('TC-04 Variables tab lists existing variables', async ({
-		authedPage: page,
-	}) => {
-		test.skip(
-			!hasVariablesHelper,
-			'createVariablesDashboardViaApi helper not yet available (lands with group 3)',
-		);
-
-		const id = await seedVariablesDashboard(page, 'cfg-variables-list');
-		await page.goto(`/dashboard/${id}`);
-
-		const dialog = await openConfigureDrawer(page);
-		await dialog.getByRole('tab', { name: 'Variables' }).click();
-		const tabpanel = dialog.getByRole('tabpanel', { name: 'Variables' });
-		await expect(tabpanel).toBeVisible();
-
-		for (const varName of [
-			'tb_env',
-			'tb_service',
-			'cu_env_all',
-			'cu_services',
-			'q_env',
-			'q_service',
-			'd_namespace',
-		]) {
-			// Variable rows render as plain text inside the Variables tab
-			// (not a true Antd `Table` with role="row"). Locate via text.
-			await expect(
-				tabpanel.getByText(varName, { exact: true }).first(),
-			).toBeVisible();
-		}
-
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-	});
-
-	test('TC-05 add a Textbox variable — appears in the variables bar and is interactive', async ({
-		authedPage: page,
-	}) => {
-		test.skip(
-			!hasVariablesHelper,
-			'createVariablesDashboardViaApi helper not yet available (lands with group 3)',
-		);
-
-		const id = await seedVariablesDashboard(page, 'cfg-variables-add-textbox');
-		await page.goto(`/dashboard/${id}`);
-
-		const ts = Date.now();
-		const varName = `tb_var_${ts}`;
-
-		const dialog = await openConfigureDrawer(page);
-		await dialog.getByRole('tab', { name: 'Variables' }).click();
-		await dialog.getByTestId('add-new-variable').click();
-
-		await dialog.getByPlaceholder('Unique name of the variable').fill(varName);
-		await dialog.getByRole('button', { name: 'Textbox' }).click();
-
-		const saveBtn = dialog.getByRole('button', { name: 'Save Variable' });
-		await expect(saveBtn).toBeEnabled();
-		await saveBtn.click({ force: true });
-
-		const tabpanel = dialog.getByRole('tabpanel', { name: 'Variables' });
-		await expect(
-			tabpanel.getByText(varName, { exact: true }).first(),
-		).toBeVisible();
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-		await expect(dialog).not.toBeVisible();
-
-		await expect(page.getByText(`$${varName}`)).toBeVisible();
-
-		const newTextbox = page.locator('input[placeholder="Enter value"]').last();
-		await newTextbox.fill('test-value');
-		await newTextbox.press('Enter');
-		await expect(page).toHaveURL(/test-value/);
-
-		await deleteVariableByName(page, varName);
-	});
-
-	test('TC-06 add a Custom variable — appears in the list', async ({
-		authedPage: page,
-	}) => {
-		test.skip(
-			!hasVariablesHelper,
-			'createVariablesDashboardViaApi helper not yet available (lands with group 3)',
-		);
-
-		const id = await seedVariablesDashboard(page, 'cfg-variables-add-custom');
-		await page.goto(`/dashboard/${id}`);
-
-		const ts = Date.now();
-		const varName = `custom_var_${ts}`;
-
-		const dialog = await openConfigureDrawer(page);
-		await dialog.getByRole('tab', { name: 'Variables' }).click();
-		await dialog.getByTestId('add-new-variable').click();
-
-		await dialog.getByPlaceholder('Unique name of the variable').fill(varName);
-		await dialog.getByRole('button', { name: 'Custom' }).click();
-
-		await dialog
-			.getByRole('button', { name: 'Save Variable' })
-			.click({ force: true });
-
-		const tabpanel = dialog.getByRole('tabpanel', { name: 'Variables' });
-		await expect(
-			tabpanel.getByText(varName, { exact: true }).first(),
-		).toBeVisible();
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-
-		await deleteVariableByName(page, varName);
-	});
-
-	// known limitation: TC-07 (add a Dynamic (Beta) variable) is intentionally
-	// not implemented. Dynamic variables source from the SigNoz attribute
-	// index — the bootstrap stack ingests no telemetry, so the field selector
-	// renders an empty option list and Save Variable can never be enabled.
-	// Re-add once the bootstrap seeds telemetry attributes.
-
-	test('TC-08 selecting Query type renders the query editor', async ({
-		authedPage: page,
-	}) => {
-		test.skip(
-			!hasVariablesHelper,
-			'createVariablesDashboardViaApi helper not yet available (lands with group 3)',
-		);
-
-		const id = await seedVariablesDashboard(page, 'cfg-variables-add-query');
-		await page.goto(`/dashboard/${id}`);
-
-		const ts = Date.now();
-		const varName = `query_var_${ts}`;
-
-		const dialog = await openConfigureDrawer(page);
-		await dialog.getByRole('tab', { name: 'Variables' }).click();
-		await dialog.getByTestId('add-new-variable').click();
-
-		await dialog.getByPlaceholder('Unique name of the variable').fill(varName);
-		await dialog.getByRole('button', { name: /Query/ }).click();
-
-		// Monaco is lazy-loaded — its bundle chunk can take several seconds to
-		// arrive under parallel-worker CI load, far longer than the default 5 s
-		// locator timeout. 20 s is comfortable headroom without masking real
-		// regressions.
-		await expect(dialog.locator('.monaco-editor').first()).toBeVisible({
-			timeout: 20_000,
-		});
-
-		await dialog.getByRole('button', { name: 'Discard' }).click();
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-	});
-
-	test('TC-09 Save Variable disabled when name is empty', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'cfg-variables-empty-name');
-		await page.goto(`/dashboard/${id}`);
-
-		const dialog = await openConfigureDrawer(page);
-		await dialog.getByRole('tab', { name: 'Variables' }).click();
-		await dialog.getByTestId('add-new-variable').click();
-
-		const nameField = dialog.getByPlaceholder('Unique name of the variable');
-		await expect(nameField).toHaveValue('');
-		await expect(
-			dialog.getByRole('button', { name: 'Save Variable' }),
-		).toBeDisabled();
-
-		await dialog.getByRole('button', { name: 'Discard' }).click();
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-	});
-
-	test('TC-10 Publish tab shows private message and Publish button', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'cfg-publish');
-		await page.goto(`/dashboard/${id}`);
-
-		const dialog = await openConfigureDrawer(page);
-		await dialog.getByRole('tab', { name: 'Publish' }).click();
-		await expect(dialog.getByRole('tabpanel', { name: 'Publish' })).toBeVisible();
-
-		await expect(
-			dialog.getByText(
-				'This dashboard is private. Publish it to make it accessible to anyone with the link.',
-			),
-		).toBeVisible();
-		await expect(
-			dialog.getByRole('checkbox', { name: 'Enable time range' }),
-		).toBeVisible();
-		await expect(
-			dialog.getByText("Dashboard variables won't work in public dashboards"),
-		).toBeVisible();
-		await expect(
-			dialog.getByRole('button', { name: 'Publish dashboard' }),
-		).toBeVisible();
-
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-	});
-
-	// ─── TBD coverage — placeholders to fill in when each feature lands ──────
-	//
-	// `test.skip` placeholders for behaviours not yet covered. Replace with
-	// `test` and implement when the corresponding feature ships or the seed
-	// gains the necessary state.
-
-	test('TC-11 edit existing variable — rename', async ({ authedPage: page }) => {
-		test.skip(
-			!hasVariablesHelper,
-			'createVariablesDashboardViaApi helper not available',
-		);
-
-		const id = await seedVariablesDashboard(page, 'cfg-rename-variable');
-		await page.goto(`/dashboard/${id}`);
-		await expect(page.getByText('$tb_env', { exact: true })).toBeVisible();
-
-		const dialog = await openConfigureDrawer(page);
-		await dialog.getByRole('tab', { name: 'Variables' }).click();
-		const tabpanel = dialog.getByRole('tabpanel', { name: 'Variables' });
-
-		// Hover the row to reveal the edit button (Pylon overlay can intercept,
-		// so dispatchEvent fires the click directly on the React onClick).
-		const nameCell = tabpanel.getByText('tb_env', { exact: true }).first();
-		await nameCell.hover();
-		await nameCell
-			.locator(
-				'xpath=ancestor::*[contains(@class,"variable-item") or self::tr][1]',
-			)
-			.locator('.edit-variable-button')
-			.first()
-			.dispatchEvent('click');
-
-		// Editor form mounts; rename and save.
-		const renamed = `tb_env_renamed_${Date.now()}`;
-		const nameInput = dialog.getByPlaceholder('Unique name of the variable');
-		await expect(nameInput).toHaveValue('tb_env');
-		await nameInput.fill(renamed);
-		await dialog
-			.getByRole('button', { name: 'Save Variable' })
-			.click({ force: true });
-
-		// Variables bar reflects the rename; the original label is gone.
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-		await expect(page.getByText(`$${renamed}`, { exact: true })).toBeVisible();
-		await expect(page.getByText('$tb_env', { exact: true })).toHaveCount(0);
-	});
-
-	test('TC-12 edit existing variable — change type (CUSTOM → QUERY)', async ({
-		authedPage: page,
-	}) => {
-		test.skip(
-			!hasVariablesHelper,
-			'createVariablesDashboardViaApi helper not available',
-		);
-
-		const id = await seedVariablesDashboard(page, 'cfg-change-type');
-		await page.goto(`/dashboard/${id}`);
-
-		const dialog = await openConfigureDrawer(page);
-		await dialog.getByRole('tab', { name: 'Variables' }).click();
-		const tabpanel = dialog.getByRole('tabpanel', { name: 'Variables' });
-		const nameCell = tabpanel.getByText('cu_single', { exact: true }).first();
-		await nameCell.hover();
-		await nameCell
-			.locator(
-				'xpath=ancestor::*[contains(@class,"variable-item") or self::tr][1]',
-			)
-			.locator('.edit-variable-button')
-			.first()
-			.dispatchEvent('click');
-
-		// Change type from Custom to Query and verify the form swaps to the
-		// Query editor (Monaco SQL editor mounts where the comma-separated
-		// values input used to live).
-		await dialog.getByRole('button', { name: /Query/ }).click();
-		// Monaco is lazy-loaded — its bundle chunk can take several seconds to
-		// arrive under parallel-worker CI load, far longer than the default 5 s
-		// locator timeout. 20 s is comfortable headroom without masking real
-		// regressions.
-		await expect(dialog.locator('.monaco-editor').first()).toBeVisible({
-			timeout: 20_000,
-		});
-
-		// The previous Custom-specific fields must no longer be visible.
-		await expect(dialog.getByPlaceholder(/Comma separated values/i)).toHaveCount(
-			0,
-		);
-
-		// Discard rather than save — saving without filling the new query
-		// would leave a half-configured Query variable. The contract this TC
-		// guards is "type switching swaps the form correctly", which the
-		// assertions above already prove.
-		await dialog.getByRole('button', { name: 'Discard' }).click();
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-	});
-
-	test('TC-13 edit existing variable — change default textbox value persists across reload', async ({
-		authedPage: page,
-	}) => {
-		test.skip(
-			!hasVariablesHelper,
-			'createVariablesDashboardViaApi helper not available',
-		);
-
-		const id = await seedVariablesDashboard(page, 'cfg-change-default');
-		await page.goto(`/dashboard/${id}`);
-		await expect(page.locator('input[value="otel-demo"]')).toBeVisible();
-
-		const dialog = await openConfigureDrawer(page);
-		await dialog.getByRole('tab', { name: 'Variables' }).click();
-		const tabpanel = dialog.getByRole('tabpanel', { name: 'Variables' });
-		const nameCell = tabpanel.getByText('tb_env', { exact: true }).first();
-		await nameCell.hover();
-		await nameCell
-			.locator(
-				'xpath=ancestor::*[contains(@class,"variable-item") or self::tr][1]',
-			)
-			.locator('.edit-variable-button')
-			.first()
-			.dispatchEvent('click');
-
-		// Update the default textbox value. The Default Value input is the
-		// second/third field (Name first); locate it via its placeholder.
-		const defaultInput = dialog
-			.getByPlaceholder(/Enter default value|Default value/i)
-			.first();
-		await defaultInput.fill('new-default');
-
-		// PUT confirms the variable persisted server-side before we close +
-		// reload. Without this wait the reload races the save and the old
-		// "otel-demo" default renders, producing the observed flake.
-		const putResponse = page.waitForResponse(
-			(r) => r.request().method() === 'PUT' && /\/dashboards\//.test(r.url()),
-		);
-		await dialog
-			.getByRole('button', { name: 'Save Variable' })
-			.click({ force: true });
-		await putResponse;
-
-		// Reload — the new default renders without URL state because it's
-		// now the persisted seed value.
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-		await page.reload();
-		await expect(page.locator('input[value="new-default"]')).toBeVisible();
-	});
-
-	test('TC-14 delete variable — removed from variables bar', async ({
-		authedPage: page,
-	}) => {
-		test.skip(
-			!hasVariablesHelper,
-			'createVariablesDashboardViaApi helper not available',
-		);
-
-		const id = await seedVariablesDashboard(page, 'cfg-delete-variable');
-		await page.goto(`/dashboard/${id}`);
-		await expect(page.getByText('$tb_env', { exact: true })).toBeVisible();
-
-		// Reuse the existing helper and assert the variables bar reflects
-		// the deletion — `deleteVariableByName` covers the Configure-side
-		// removal; the bar update is the new contract this TC adds.
-		await deleteVariableByName(page, 'tb_env');
-		await expect(page.getByText('$tb_env', { exact: true })).toHaveCount(0);
-		// Sibling textbox is unaffected.
-		await expect(page.getByText('$tb_service', { exact: true })).toBeVisible();
-	});
-
-	test('TC-15 variable name validation — duplicate name keeps Save disabled', async ({
-		authedPage: page,
-	}) => {
-		test.skip(
-			!hasVariablesHelper,
-			'createVariablesDashboardViaApi helper not available',
-		);
-
-		const id = await seedVariablesDashboard(page, 'cfg-validate-duplicate');
-		await page.goto(`/dashboard/${id}`);
-
-		const dialog = await openConfigureDrawer(page);
-		await dialog.getByRole('tab', { name: 'Variables' }).click();
-		await dialog.getByTestId('add-new-variable').click();
-
-		await dialog.getByPlaceholder('Unique name of the variable').fill('tb_env');
-		await dialog.getByRole('button', { name: 'Textbox' }).click();
-
-		// Save Variable should refuse to enable while the name collides with
-		// an existing variable. Assert the button stays disabled, OR a
-		// validation message surfaces — UI may pick either signal.
-		const saveBtn = dialog.getByRole('button', { name: 'Save Variable' });
-		const errorMsg = dialog.getByText(/already exists|duplicate|in use/i);
-
-		// Either Save is disabled, or an explicit error is shown — both are
-		// valid contracts. `Promise.race` between the two assertions tolerates
-		// whichever the UI provides.
-		await expect
-			.poll(async () => {
-				const disabled = await saveBtn.isDisabled().catch(() => false);
-				const err = await errorMsg.isVisible().catch(() => false);
-				return disabled || err;
-			})
-			.toBeTruthy();
-
-		await dialog.getByRole('button', { name: 'Discard' }).click();
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-	});
-
-	// eslint-disable-next-line playwright/expect-expect
-	test.skip('TC-16 variable name validation — invalid characters / whitespace', async () => {
-		// Names containing spaces, $-prefix, dots, etc. should be rejected
-		// by the validator. Confirm Save Variable stays disabled with an
-		// inline error message.
-	});
-
-	// eslint-disable-next-line playwright/expect-expect
-	test.skip('TC-17 reorder variables via drag persists `order` in JSON', async () => {
-		// The Variables tab supports drag handles. After a reorder, the
-		// persisted `data.variables[*].order` reflects the new sequence and
-		// the variables bar re-renders accordingly.
-	});
-
-	// eslint-disable-next-line playwright/expect-expect
-	test.skip('TC-18 add a Dynamic (Beta) variable via Configure → pick seeded attribute', async () => {
-		// Dynamic-variable resolution itself is covered by
-		// `67-variables` TC-15 (seed metric → Dynamic dropdown lists the
-		// namespace → URL state updates). What this TC adds is the Configure
-		// drawer's *Add Variable → Dynamic* form, whose attribute-picker
-		// uses a combobox whose stable locator hasn't been pinned in this
-		// suite yet — leave skipped pending a snapshot pass.
-	});
-
-	// eslint-disable-next-line playwright/expect-expect
-	test.skip('TC-19 Variable description renders in tooltip / inline metadata', async () => {
-		// `description` field on each variable should be surfaced in the
-		// variables bar tooltip and in the Variables tab's row.
-	});
-
-	// eslint-disable-next-line playwright/expect-expect
-	test.skip('TC-20 Save Variable disabled while query is in flight', async () => {
-		// For a Query variable mid-resolution, Save Variable should be
-		// disabled until the query returns options. Otherwise we'd save
-		// a variable with an empty option list.
-	});
-
-	test('TC-21 cancel-mid-edit variable changes are not persisted', async ({
-		authedPage: page,
-	}) => {
-		test.skip(
-			!hasVariablesHelper,
-			'createVariablesDashboardViaApi helper not available',
-		);
-
-		const id = await seedVariablesDashboard(page, 'cfg-cancel-edit-variable');
-		await page.goto(`/dashboard/${id}`);
-		await expect(page.getByText('$tb_env', { exact: true })).toBeVisible();
-
-		// Open the editor for tb_env and dirty the Name field.
-		const dialog = await openConfigureDrawer(page);
-		await dialog.getByRole('tab', { name: 'Variables' }).click();
-		const tabpanel = dialog.getByRole('tabpanel', { name: 'Variables' });
-		const nameCell = tabpanel.getByText('tb_env', { exact: true }).first();
-		await nameCell.hover();
-		await nameCell
-			.locator(
-				'xpath=ancestor::*[contains(@class,"variable-item") or self::tr][1]',
-			)
-			.locator('.edit-variable-button')
-			.first()
-			.dispatchEvent('click');
-
-		const nameInput = dialog.getByPlaceholder('Unique name of the variable');
-		await expect(nameInput).toHaveValue('tb_env');
-		await nameInput.fill('SHOULD_NOT_PERSIST');
-
-		// Discard, then re-open the same row. The Name must still be the
-		// original — abandoned edits never reach the persisted JSON.
-		await dialog.getByRole('button', { name: 'Discard' }).click();
-		await dialog.getByRole('button', { name: /close/i }).first().click();
-		await expect(page.getByText('$tb_env', { exact: true })).toBeVisible();
-		await expect(
-			page.getByText('$SHOULD_NOT_PERSIST', { exact: true }),
-		).toHaveCount(0);
-
-		// Reopen Configure → tb_env still has the original name.
-		const dialog2 = await openConfigureDrawer(page);
-		await dialog2.getByRole('tab', { name: 'Variables' }).click();
-		await expect(
-			dialog2
-				.getByRole('tabpanel', { name: 'Variables' })
-				.getByText('tb_env', { exact: true })
-				.first(),
-		).toBeVisible();
-	});
-});

tests/e2e/tests/dashboards/details/95-edge-cases.spec.ts

@@ -1,243 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	APM_METRICS_TITLE,
-	authToken,
-	createApmMetricsDashboardViaApi,
-	createDashboardViaApi,
-	createVariablesDashboardViaApi,
-	deleteDashboardViaApi,
-} from '../../../helpers/dashboards';
-
-const seedIds = new Set<string>();
-const VARIABLES_TITLE = 'detail-edge-cases-variables';
-let apmDashboardId = '';
-let variablesDashboardId = '';
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		apmDashboardId = await createApmMetricsDashboardViaApi(page);
-		seedIds.add(apmDashboardId);
-		variablesDashboardId = await createVariablesDashboardViaApi(
-			page,
-			VARIABLES_TITLE,
-		);
-		seedIds.add(variablesDashboardId);
-	} 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 deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-function encodeVariables(payload: Record<string, unknown>): string {
-	return encodeURIComponent(encodeURIComponent(JSON.stringify(payload)));
-}
-
-async function gotoDetail(page: Page, id: string, query = ''): Promise<void> {
-	await page.goto(`/dashboard/${id}${query}`);
-}
-
-test.describe('Dashboard Detail Page — Edge Cases', () => {
-	test('TC-01 panels show "No Data" for a far-past time range without pageerror', async ({
-		authedPage: page,
-	}) => {
-		const errors: Error[] = [];
-		page.on('pageerror', (err) => errors.push(err));
-
-		await gotoDetail(
-			page,
-			apmDashboardId,
-			'?startTime=1672531200000&endTime=1672531260000',
-		);
-
-		// The dashboard chrome must render with the far-past range applied:
-		// breadcrumb resolves the dashboard title, panel headers render, and the
-		// time-range textbox reflects the URL.
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${APM_METRICS_TITLE}`),
-			}),
-		).toBeVisible();
-		await expect(
-			page.getByText('Latency', { exact: true }).first(),
-		).toBeVisible();
-
-		// known behaviour: with no variable values resolvable in the far-past
-		// window, APM panels stay in a waiting-on-variable state and never
-		// render the uplot "No Data" overlay. The contract this TC really
-		// guards is that the page does not throw — assert no client-side
-		// pageerror was raised.
-		expect(errors).toHaveLength(0);
-	});
-
-	test('TC-02 nonexistent dashboard ID handled gracefully', async ({
-		authedPage: page,
-	}) => {
-		await page.goto('/dashboard/nonexistent-id-99999');
-
-		// The chrome (sidebar logo) must always render, regardless of whether
-		// the app redirects to /dashboard or shows an in-place error shell.
-		// The bogus-id breadcrumb must never resolve.
-		await expect(page.getByRole('img', { name: 'SigNoz' })).toBeVisible();
-		await expect(
-			page.getByRole('button', {
-				name: /dashboard-icon nonexistent-id-99999/,
-			}),
-		).toBeHidden();
-	});
-
-	test('TC-03 sidebar nav still works after hitting a nonexistent dashboard URL', async ({
-		authedPage: page,
-	}) => {
-		await page.goto('/dashboard/nonexistent-id-99999');
-		await expect(page.getByRole('img', { name: 'SigNoz' })).toBeVisible();
-
-		await page
-			.locator('.nav-item')
-			.filter({ hasText: /^Dashboards$/ })
-			.click();
-
-		await expect(page).toHaveURL(/\/dashboard($|\?)/);
-		await expect(
-			page.getByRole('heading', { name: 'Dashboards', level: 1 }),
-		).toBeVisible();
-	});
-
-	test('TC-04 variable URL deep-link survives hard reload', async ({
-		authedPage: page,
-	}) => {
-		const deepLink = `?variables=${encodeVariables({ q_env: 'otel-demo' })}`;
-		await gotoDetail(page, variablesDashboardId, deepLink);
-
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${VARIABLES_TITLE}`),
-			}),
-		).toBeVisible();
-		await expect(page.getByText('$q_env', { exact: true })).toBeVisible();
-
-		await expect(page).toHaveURL(/variables=%257B/);
-		await expect(page).toHaveURL(/otel-demo/);
-
-		// Dropdown index — selects (in DOM order): 0=cu_single, 1=cu_env_all,
-		// 2=cu_services, 3=q_env, 4=q_service, 5=d_namespace.
-		const qEnv = page.getByTestId('variable-select').nth(3);
-		await expect(
-			qEnv.locator('.ant-select-selection-item', { hasText: 'otel-demo' }),
-		).toBeVisible();
-
-		await page.reload({ waitUntil: 'domcontentloaded' });
-
-		await expect(page).toHaveURL(/variables=%257B/);
-		await expect(page).toHaveURL(/otel-demo/);
-		await expect(
-			qEnv.locator('.ant-select-selection-item', { hasText: 'otel-demo' }),
-		).toBeVisible();
-	});
-
-	test('TC-05 a single broken time range does not crash the dashboard canvas', async ({
-		authedPage: page,
-	}) => {
-		const errors: Error[] = [];
-		page.on('pageerror', (err) => errors.push(err));
-
-		// known behaviour: the app may either reject a swapped range
-		// client-side or render error states per-panel — either way, the
-		// dashboard chrome and at least one panel header must still render.
-		await gotoDetail(page, apmDashboardId, '?startTime=999999&endTime=999998');
-
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${APM_METRICS_TITLE}`),
-			}),
-		).toBeVisible();
-		await expect(
-			page.getByText('Latency', { exact: true }).first(),
-		).toBeVisible();
-
-		expect(errors).toHaveLength(0);
-	});
-
-	test('TC-06 sidebar Dashboards link from detail page navigates to /dashboard', async ({
-		authedPage: page,
-	}) => {
-		await gotoDetail(page, apmDashboardId);
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${APM_METRICS_TITLE}`),
-			}),
-		).toBeVisible();
-
-		await page
-			.locator('.nav-item')
-			.filter({ hasText: /^Dashboards$/ })
-			.click();
-
-		await expect(page).toHaveURL(/\/dashboard($|\?)/);
-		await expect(
-			page.getByRole('heading', { name: 'Dashboards', level: 1 }),
-		).toBeVisible();
-	});
-
-	// ─── Deep coverage ───────────────────────────────────────────────────────
-
-	test('TC-07 a 200-character dashboard name renders without breaking layout', async ({
-		authedPage: page,
-	}) => {
-		const longName = `LongName-${'x'.repeat(190)}`;
-		const id = await createDashboardViaApi(page, longName);
-		seedIds.add(id);
-
-		await gotoDetail(page, id);
-
-		await expect(
-			page.getByRole('button', {
-				name: new RegExp(`dashboard-icon ${longName.slice(0, 30)}`),
-			}),
-		).toBeVisible();
-		// The toolbar must still render — long titles cannot push the toolbar
-		// off-screen or unmount it. Scope to `.right-section` because empty
-		// dashboards render an onboarding canvas with duplicate testids.
-		const toolbar = page.locator('.dashboard-details .right-section');
-		await expect(toolbar.getByTestId('show-drawer')).toBeVisible();
-		await expect(toolbar.getByTestId('add-panel-header')).toBeVisible();
-	});
-
-	test('TC-08 special characters in the dashboard name round-trip via URL and breadcrumb', async ({
-		authedPage: page,
-	}) => {
-		const trickyName = `Spec & Chars / "${Date.now()}" — émoji 🎯`;
-		const id = await createDashboardViaApi(page, trickyName);
-		seedIds.add(id);
-
-		await gotoDetail(page, id);
-
-		// The full title must round-trip through the breadcrumb without HTML
-		// entity mangling (`&amp;`, `&quot;` are bugs we'd want to catch).
-		await expect(
-			page.getByText(trickyName, { exact: true }).first(),
-		).toBeVisible();
-		// document.title is set from the dashboard name — confirm it is intact.
-		await expect(page).toHaveTitle(new RegExp('Spec & Chars'));
-	});
-});

tests/e2e/tests/dashboards/list.spec.ts

@@ -1,570 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../fixtures/auth';
-import { newAdminContext } from '../../helpers/auth';
-import {
-	APM_METRICS_TITLE,
-	authToken,
-	createDashboardViaApi,
-	DEFAULT_DASHBOARD_TITLE,
-	deleteDashboardViaApi,
-	findDashboardIdByTitle,
-	gotoDashboardsList,
-	importApmMetricsDashboardViaUI,
-	openDashboardActionMenu,
-	SEARCH_PLACEHOLDER,
-} from '../../helpers/dashboards';
-
-// 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 BASE_FIXTURE_TITLE = 'dashboards-list-base-fixture';
-
-/** 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;
-}
-
-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) {
-		return;
-	}
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const token = await authToken(page);
-		for (const id of seedIds) {
-			await deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.describe('Dashboards List Page', () => {
-	// ─── Page load and layout ────────────────────────────────────────────────
-
-	test('TC-01 page chrome and core controls render', async ({
-		authedPage: page,
-	}) => {
-		await gotoDashboardsList(page);
-
-		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();
-	});
-
-	// ─── Search functionality ────────────────────────────────────────────────
-
-	test('TC-02 search by title returns matching dashboard', async ({
-		authedPage: page,
-	}) => {
-		const name = 'dashboards-list-search-title';
-		await seed(page, name);
-
-		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/);
-		}
-	});
-
-	// ─── Row actions (context menu) ──────────────────────────────────────────
-
-	test('TC-09 admin sees all five options in the action menu', async ({
-		authedPage: page,
-	}) => {
-		const name = 'dashboards-list-actions-menu';
-		await seed(page, name);
-
-		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-10 view action navigates to the dashboard detail page', async ({
-		authedPage: page,
-	}) => {
-		const name = 'dashboards-list-action-view';
-		await seed(page, name);
-
-		await gotoDashboardsList(page);
-		const tooltip = await openDashboardActionMenu(page, name);
-		await tooltip.getByRole('button', { name: 'View' }).click();
-
-		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
-	});
-
-	test('TC-11 open in new tab opens the dashboard in a new browser tab', async ({
-		authedPage: page,
-	}) => {
-		const name = 'dashboards-list-action-newtab';
-		await seed(page, name);
-
-		await gotoDashboardsList(page);
-		const tooltip = await openDashboardActionMenu(page, name);
-
-		// 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('button', { name: 'Configure' }).first(),
-		).toBeVisible();
-		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/);
-	});
-});