feat(infrastructure-monitoring-details): add support to pin tooltip (#12414)

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -37,6 +37,7 @@ export default function ChartWrapper({
 	groupByPerQuery,
 	customTooltip,
 	pinnedTooltipElement,
+	tooltipPortalRoot,
 	'data-testid': testId,
 }: ChartProps): JSX.Element {
 	const plotInstanceRef = useRef<uPlot | null>(null);
@@ -118,6 +119,7 @@ export default function ChartWrapper({
 								syncMetadata={syncMetadata}
 								render={renderTooltipCallback}
 								pinnedTooltipElement={pinnedTooltipElement}
+								portalRoot={tooltipPortalRoot}
 							/>
 						)}
 					</UPlotChart>

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -30,6 +30,7 @@ interface BaseChartProps {
 	pinnedTooltipElement?: (clickData: ChartClickData) => React.ReactNode;
 	renderTooltipFooter?: (args: IRenderTooltipFooterArgs) => React.ReactNode;
 	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
+	tooltipPortalRoot?: HTMLElement | null;
 	'data-testid'?: string;
 }
 interface UPlotBasedChartProps {

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.tsx

@@ -40,6 +40,9 @@ export type {
 
 // TODO(H4ad): Improve this on component level
 const DRAWER_TRANSITION = { duration: 0.3, ease: [0.25, 0.1, 0.25, 1] };
+// Be careful when changing these props, this must be animated with transform but later
+// replaced with none, otherwise, the tooltip of the chart will be not positioned correctly
+// due to how the tooltip positioning calculation works
 const DRAWER_MOTION_PROPS = {
 	onOpenAutoFocus: (e: Event): void => e.preventDefault(),
 	initial: { opacity: 0, transform: 'translateX(100%)' },
@@ -47,6 +50,7 @@ const DRAWER_MOTION_PROPS = {
 		opacity: 1,
 		transform: 'translateX(0%)',
 		transition: DRAWER_TRANSITION,
+		transitionEnd: { transform: 'none' },
 	},
 	exit: {
 		opacity: 0,

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/ChartTooltipFooter.module.scss

@@ -0,0 +1,38 @@
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-5);
+	padding: var(--spacing-4) var(--spacing-6);
+	border-top: 1px dashed var(--l2-border);
+	background: var(--l1-background);
+	border-radius: 0 0 6px 6px;
+}
+
+.hintList {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	padding: var(--spacing-2) var(--spacing-8);
+	margin: 0;
+}
+
+.hint {
+	--typography-text-display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	position: relative;
+
+	&[data-active='false']::before {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: -12px;
+		transform: translateY(-50%);
+		width: 4px;
+		height: 4px;
+		border-radius: 50%;
+		background: var(--l2-foreground);
+		opacity: 0.5;
+	}
+}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/ChartTooltipFooter.tsx

@@ -0,0 +1,82 @@
+import { MousePointerClick, X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Kbd } from '@signozhq/ui/kbd';
+import logEvent from 'api/common/logEvent';
+import { Events } from 'constants/events';
+import { DEFAULT_PIN_TOOLTIP_KEY } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+
+import styles from './ChartTooltipFooter.module.scss';
+import { Typography } from '@signozhq/ui/typography';
+
+interface ChartTooltipFooterProps {
+	id: string;
+	pinKey?: string;
+	isPinned: boolean;
+	canSelectTimeRange?: boolean;
+	dismiss: () => void;
+}
+
+export default function ChartTooltipFooter({
+	id,
+	pinKey = DEFAULT_PIN_TOOLTIP_KEY,
+	isPinned,
+	canSelectTimeRange = true,
+	dismiss,
+}: ChartTooltipFooterProps): JSX.Element {
+	const handleUnpinClick = (): void => {
+		void logEvent(Events.TOOLTIP_UNPINNED, {
+			id,
+		});
+		dismiss();
+	};
+
+	return (
+		<output className={styles.footer} data-testid="entity-chart-tooltip-footer">
+			<div>
+				{isPinned ? (
+					<Typography.Text className={styles.hint} size="small">
+						<span>Press</span>
+						<Kbd active>{pinKey.toUpperCase()}</Kbd>
+						<span>or</span>
+						<Kbd active>Esc</Kbd>
+						<span>to unpin</span>
+					</Typography.Text>
+				) : (
+					<div className={styles.hintList}>
+						{canSelectTimeRange && (
+							<Typography.Text
+								className={styles.hint}
+								size="small"
+								data-active="false"
+							>
+								<Kbd>
+									<MousePointerClick size={12} />
+								</Kbd>
+								<span>Click and drag to zoom into a time range</span>
+							</Typography.Text>
+						)}
+						<Typography.Text className={styles.hint} size="small" data-active="false">
+							<span>Press</span>
+							<Kbd>{pinKey.toUpperCase()}</Kbd>
+							<span>to pin the tooltip</span>
+						</Typography.Text>
+					</div>
+				)}
+			</div>
+
+			{isPinned && (
+				<Button
+					variant="outlined"
+					color="secondary"
+					size="sm"
+					onClick={handleUnpinClick}
+					aria-label="Unpin tooltip"
+					data-testid="entity-chart-tooltip-unpin"
+				>
+					<X size={10} />
+					<span>Unpin</span>
+				</Button>
+			)}
+		</output>
+	);
+}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/EntityMetrics.tsx

@@ -1,11 +1,14 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Skeleton } from 'antd';
 import cx from 'classnames';
 import { InfraMonitoringEvents } from 'constants/events';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
+import {
+	IRenderTooltipFooterArgs,
+	LegendPosition,
+} from 'lib/uPlotV2/components/types';
 import {
 	InfraMonitoringEntity,
 	VIEW_TYPES,
@@ -33,6 +36,7 @@ import { isKeyNotFoundError } from '../utils';
 import styles from './EntityMetrics.module.scss';
 import { MetricsTable } from './MetricsTable';
 import { logInfraExplorerNavigatedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
+import ChartTooltipFooter from './ChartTooltipFooter';
 
 interface EntityMetricsProps<T> {
 	entity: T;
@@ -78,6 +82,10 @@ function EntityMetrics<T>({
 		category,
 	});
 
+	const [tooltipPortalEl, setTooltipPortalEl] = useState<HTMLDivElement | null>(
+		null,
+	);
+
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 	const graphRef = useRef<HTMLDivElement>(null);
@@ -171,6 +179,18 @@ function EntityMetrics<T>({
 							height={dimensions.height}
 							timezone={timezone}
 							yAxisUnit={entityWidgetInfo[idx].yAxisUnit}
+							canPinTooltip
+							tooltipPortalRoot={tooltipPortalEl ?? undefined}
+							renderTooltipFooter={({
+								isPinned,
+								dismiss,
+							}: IRenderTooltipFooterArgs) => (
+								<ChartTooltipFooter
+									id={configs[idx]?.getId() || idx.toString()}
+									isPinned={isPinned}
+									dismiss={dismiss}
+								/>
+							)}
 						/>
 					)
 				)}
@@ -180,6 +200,8 @@ function EntityMetrics<T>({
 
 	return (
 		<>
+			<div ref={setTooltipPortalEl} style={{ display: 'contents' }} />
+
 			<div className={styles.metricsHeader}>
 				<EntityDateTimeSelector
 					eventEntity={eventEntity}

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -51,6 +51,7 @@ export default function TooltipPlugin({
 	canPinTooltip = false,
 	pinKey = DEFAULT_PIN_TOOLTIP_KEY,
 	onClick,
+	portalRoot: portalRootProp,
 }: TooltipPluginProps): JSX.Element | null {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const rafId = useRef<number | null>(null);
@@ -59,7 +60,9 @@ export default function TooltipPlugin({
 	const renderRef = useRef(render);
 	renderRef.current = render;
 	const [portalRoot, setPortalRoot] = useState<HTMLElement>(
-		(document.fullscreenElement as HTMLElement) ?? document.body,
+		portalRootProp ??
+			(document.fullscreenElement as HTMLElement) ??
+			document.body,
 	);
 
 	// React-managed snapshot of what should be rendered. The controller
@@ -464,8 +467,12 @@ export default function TooltipPlugin({
 	}, [config]);
 
 	const resolvePortalRoot = useCallback((): void => {
-		setPortalRoot((document.fullscreenElement as HTMLElement) ?? document.body);
-	}, []);
+		setPortalRoot(
+			portalRootProp ??
+				(document.fullscreenElement as HTMLElement) ??
+				document.body,
+		);
+	}, [portalRootProp]);
 
 	useLayoutEffect((): (() => void) => {
 		resolvePortalRoot();

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts

@@ -67,6 +67,7 @@ export interface TooltipPluginProps {
 	pinnedTooltipElement?: (clickData: ChartClickData) => ReactNode;
 	maxWidth?: number;
 	maxHeight?: number;
+	portalRoot?: HTMLElement | null;
 }
 
 export interface ChartClickData {

tests/e2e/helpers/dashboards-v2.ts

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

tests/e2e/package.json

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

tests/e2e/parked-specs.json

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

tests/e2e/playwright.config.ts

@@ -2,23 +2,22 @@ import { defineConfig, devices } from '@playwright/test';
 import dotenv from 'dotenv';
 import path from 'path';
 
-import parkedSpecs from './parked-specs.json';
-
-// Precedence: real env > .env.local > .env. dotenv never overwrites a var that is
-// already set, so loading in that order gives local-backend coordinates (.env.local,
-// written by bootstrap/setup.py) priority over the staging defaults in .env, while an
-// explicitly exported var still wins over both — which is what lets a run be pointed
-// at another environment without editing a generated file.
-dotenv.config({ path: path.resolve(__dirname, '.env.local') });
+// .env holds user-provided defaults (staging creds).
+// .env.local is written by tests/e2e/bootstrap/setup.py when the pytest
+// lifecycle brings the backend up locally; override=true so local-backend
+// coordinates win over any stale .env values. Subprocess-injected env
+// (e.g. when pytest shells out to `pnpm test`) still takes priority —
+// dotenv doesn't touch vars that are already set in process.env.
 dotenv.config({ path: path.resolve(__dirname, '.env') });
+dotenv.config({ path: path.resolve(__dirname, '.env.local'), override: true });
 
 export default defineConfig({
 	testDir: './tests',
 
-	// Parked specs, listed one by one with a reason in parked-specs.json — not a
-	// blanket glob, so nothing new can land inside an excluded directory unnoticed.
-	// `pnpm guard:specs` keeps this list and the suite honest.
-	testIgnore: parkedSpecs.specs,
+	// 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).

tests/e2e/scripts/guard-specs.mjs

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

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

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

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

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

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

@@ -2,67 +2,65 @@ import type { Page } from '@playwright/test';
 
 import { expect, test } from '../../../fixtures/auth';
 import { newAdminContext } from '../../../helpers/auth';
-import { authToken } from '../../../helpers/dashboards';
 import {
-	createDashboardV2ViaApi,
-	dashboardV2Path,
-	deleteDashboardV2ViaApi,
-	getDashboardV2,
-	readVariableSelection,
-	variablePill,
-	variablesBar,
-	WIDE_VIEWPORT,
-} from '../../../helpers/dashboards-v2';
-import variablesFixture from '../../../testdata/variables-dashboard-v2.json';
+	authToken,
+	awaitVariablesResolved,
+	createDashboardViaApi,
+	deleteDashboardViaApi,
+} from '../../../helpers/dashboards';
 
-// Defining variables in dashboard settings: the list, the form, and what reaches the
-// runtime bar. Each test seeds its own dashboard, so a create or delete in one cannot
-// affect another and the file runs in parallel.
+const TELEMETRY_DEPENDENT_VARS = ['q_env', 'q_service', 'd_namespace'];
 
-test.use({ viewport: WIDE_VIEWPORT });
+// `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>();
 
-/** Seed a dashboard carrying the shared variable fixture, and open it. */
-async function seedAndOpen(page: Page, label: string): Promise<string> {
-	const id = await createDashboardV2ViaApi(
-		page,
-		`detail-configure-${label}-${process.env.TEST_WORKER_INDEX ?? '0'}`,
-		variablesFixture.spec,
-	);
+async function seed(page: Page, title: string): Promise<string> {
+	const id = await createDashboardViaApi(page, title);
 	seedIds.add(id);
-	await page.goto(dashboardV2Path(id));
-	await expect(variablesBar(page)).toBeVisible();
 	return id;
 }
 
-/**
- * Open the variables list. "Add variable" in the bar lands on the blank form, whose
- * "All variables" back-link is the list — one click fewer than going through the
- * settings drawer, and it does not depend on the drawer's tab layout.
- */
-async function openVariablesList(page: Page): Promise<void> {
-	await page.getByRole('button', { name: 'Add variable' }).click();
-	await page.getByTestId('variable-form-back').click();
-	await expect(page.getByTestId('variables-list')).toBeVisible();
-}
-
-/** Open the blank variable form straight from the bar. */
-async function openNewVariableForm(page: Page): Promise<void> {
-	await page.getByRole('button', { name: 'Add variable' }).click();
-	await expect(page.getByTestId('variable-name')).toBeVisible();
+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;
-	}
+	if (seedIds.size === 0) return;
 	const ctx = await newAdminContext(browser);
 	const page = await ctx.newPage();
 	try {
 		const token = await authToken(page);
 		for (const id of seedIds) {
-			await deleteDashboardV2ViaApi(ctx.request, id, token);
+			await deleteDashboardViaApi(ctx.request, id, token);
 			seedIds.delete(id);
 		}
 	} finally {
@@ -70,153 +68,620 @@ test.afterAll(async ({ browser }) => {
 	}
 });
 
-test.describe('Dashboard settings — variables', () => {
-	test('TC-01 the list shows every variable the dashboard defines', async ({
+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,
 	}) => {
-		await seedAndOpen(page, 'list');
-		await openVariablesList(page);
+		const id = await seed(page, 'cfg-drawer-chrome');
+		await page.goto(`/dashboard/${id}`);
 
-		for (const name of ['tb_env', 'cu_service', 'cu_region']) {
-			await expect(page.getByTestId(`variable-row-${name}`)).toBeVisible();
-		}
+		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 a new custom variable reaches the runtime bar', async ({
+	test('TC-02 update name, description, and tag — persists across reload', async ({
 		authedPage: page,
 	}) => {
-		const id = await seedAndOpen(page, 'create');
-		await openNewVariableForm(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}`);
 
-		await page.getByTestId('variable-name').fill('cu_tier');
-		await page.getByTestId('variable-type-custom').click();
-		await page.getByTestId('variable-custom-input').fill('gold,silver');
-		await page.getByTestId('variable-save').click();
+		const dialog = await openConfigureDrawer(page);
 
-		// Persisted in the spec, and rendered by the bar.
-		await expect
-			.poll(async () => {
-				const stored = await getDashboardV2(page, id);
-				return (stored.spec.variables as { spec: { name: string } }[]).map(
-					(variable) => variable.spec.name,
-				);
-			})
-			.toContain('cu_tier');
-		await expect(variablePill(page, 'cu_tier')).toBeVisible();
-	});
+		const nameInput = dialog.getByTestId('dashboard-name');
+		await nameInput.click();
+		await nameInput.fill('');
+		await nameInput.fill(updated);
 
-	test('TC-03 a duplicate name cannot be saved', async ({
-		authedPage: page,
-	}) => {
-		const id = await seedAndOpen(page, 'dupe');
-		await openNewVariableForm(page);
+		await dialog.getByTestId('dashboard-desc').fill('Automated test description');
 
-		await page.getByTestId('variable-name').fill('cu_service');
-		await page.getByTestId('variable-type-custom').click();
-		await page.getByTestId('variable-custom-input').fill('a,b');
+		const tagInput = dialog.getByPlaceholder('Start typing your tag name');
+		await tagInput.fill(`e2e-tag-${ts}`);
+		await tagInput.press('Enter');
 
-		// The form refuses the duplicate outright, so Save never becomes available.
-		await expect(page.getByTestId('variable-save')).toBeDisabled();
-
-		// And the dashboard does not end up with two `cu_service`.
-		const names = (
-			(await getDashboardV2(page, id)).spec.variables as {
-				spec: { name: string };
-			}[]
-		).map((variable) => variable.spec.name);
-		expect(names.filter((name) => name === 'cu_service')).toHaveLength(1);
-	});
-
-	test('TC-04 an empty name cannot be saved', async ({ authedPage: page }) => {
-		await seedAndOpen(page, 'noname');
-		await openNewVariableForm(page);
-
-		await page.getByTestId('variable-type-custom').click();
-		await page.getByTestId('variable-custom-input').fill('a,b');
-
-		await expect(page.getByTestId('variable-save')).toBeDisabled();
-	});
-
-	test('TC-05 editing a custom variable changes the options it offers', async ({
-		authedPage: page,
-	}) => {
-		const id = await seedAndOpen(page, 'edit');
-		await openVariablesList(page);
-
-		await page.getByTestId('variable-edit-cu_region').click();
-		await page.getByTestId('variable-custom-input').fill('ap-south');
-		await page.getByTestId('variable-save').click();
-
-		await expect
-			.poll(async () =>
-				JSON.stringify((await getDashboardV2(page, id)).spec.variables),
-			)
-			.toContain('ap-south');
-	});
-
-	test('TC-06 deleting a variable takes it off the list and out of the bar', async ({
-		authedPage: page,
-	}) => {
-		const id = await seedAndOpen(page, 'delete');
-		await openVariablesList(page);
-
-		await page.getByTestId('variable-delete-cu_region').click();
-		await page.getByTestId('variable-delete-confirm-cu_region').click();
-
-		await expect(page.getByTestId('variable-row-cu_region')).toBeHidden();
-		// The row goes optimistically; wait for the write before reloading, or the
-		// reload can race it and legitimately still show the variable.
-		await expect
-			.poll(async () =>
-				(
-					(await getDashboardV2(page, id)).spec.variables as {
-						spec: { name: string };
-					}[]
-				).map((variable) => variable.spec.name),
-			)
-			.not.toContain('cu_region');
+		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(variablesBar(page)).toBeVisible();
-		await expect(variablePill(page, 'cu_region')).toBeHidden();
+		await expect(
+			page.getByRole('button', {
+				name: new RegExp(`dashboard-icon ${updated}`),
+			}),
+		).toBeVisible();
 	});
 
-	test('TC-07 a variable saved as single-select does not render as ALL', async ({
+	test('TC-03 Discard reverts unsaved Overview changes', async ({
 		authedPage: page,
 	}) => {
-		await seedAndOpen(page, 'single');
-		await openNewVariableForm(page);
+		const original = 'cfg-overview-discard';
+		const id = await seed(page, original);
+		await page.goto(`/dashboard/${id}`);
 
-		await page.getByTestId('variable-name').fill('cu_single_tier');
-		await page.getByTestId('variable-type-custom').click();
-		await page.getByTestId('variable-custom-input').fill('gold,silver');
-		// ALL is only offered to a multi-select, so assert the switch state rather than
-		// assuming the form's default.
-		await expect(page.getByTestId('variable-multi-switch')).not.toBeChecked();
-		await page.getByTestId('variable-save').click();
+		const dialog = await openConfigureDrawer(page);
+		const nameInput = dialog.getByTestId('dashboard-name');
+		await expect(nameInput).toHaveValue(original);
 
-		await expect(variablePill(page, 'cu_single_tier')).toBeVisible();
-		await expect
-			.poll(() => readVariableSelection(page, 'cu_single_tier'))
-			.not.toBe('ALL');
+		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-08 discarding the form leaves the dashboard untouched', async ({
+	test('TC-04 Variables tab lists existing variables', async ({
 		authedPage: page,
 	}) => {
-		const id = await seedAndOpen(page, 'discard');
-		const before = JSON.stringify(
-			(await getDashboardV2(page, id)).spec.variables,
+		test.skip(
+			!hasVariablesHelper,
+			'createVariablesDashboardViaApi helper not yet available (lands with group 3)',
 		);
 
-		await openNewVariableForm(page);
-		await page.getByTestId('variable-name').fill('cu_discarded');
-		await page.getByTestId('variable-type-custom').click();
-		await page.getByTestId('variable-custom-input').fill('x,y');
-		await page.getByRole('button', { name: 'Discard' }).click();
+		const id = await seedVariablesDashboard(page, 'cfg-variables-list');
+		await page.goto(`/dashboard/${id}`);
 
-		const after = JSON.stringify((await getDashboardV2(page, id)).spec.variables);
-		expect(after).toBe(before);
-		await expect(variablePill(page, 'cu_discarded')).toBeHidden();
+		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/tsconfig.json

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