refactor: Re-write playwright tests using best practices + add eslint config (#1508)

Fixes: HDX-3075

* Refactors to using Page model
* Extracts common interactions into components
* Re-writes tests to conform to new model
* Adds eslint plugin for playwright best practices
* Fixes bad lints

Note: The best practice is to not use `.waitForLoadState('networkidle')` however there are several instances where components are re-rendered completely due to underlying db queries. This causes flakiness in the tests. We will re-evaluate the best solution for this in a future ticket and remove the `networkidle` from the eslint ignore list.

Author: teeohhem

packages/api/.env.e2e

@@ -15,5 +15,6 @@ OPAMP_PORT=24320
 
 # Auto-create default connections and sources for new teams
 # Uses public demo ClickHouse instance with pre-populated data
-DEFAULT_CONNECTIONS='[{"name":"Demo ClickHouse","host":"https://sql-clickhouse.clickhouse.com","username":"otel_demo","password":""}]'
-DEFAULT_SOURCES='[{"from":{"databaseName":"otel_v2","tableName":"otel_logs"},"kind":"log","timestampValueExpression":"TimestampTime","name":"Demo Logs","displayedTimestampValueExpression":"Timestamp","implicitColumnExpression":"Body","serviceNameExpression":"ServiceName","eventAttributesExpression":"LogAttributes","resourceAttributesExpression":"ResourceAttributes","defaultTableSelectExpression":"Timestamp,ServiceName,SeverityText,Body","severityTextExpression":"SeverityText","traceIdExpression":"TraceId","spanIdExpression":"SpanId","connection":"Demo ClickHouse","traceSourceId":"Traces","metricSourceId":"Demo Metrics"},{"from":{"databaseName":"otel_v2","tableName":"otel_traces"},"kind":"trace","timestampValueExpression":"Timestamp","name":"Demo Traces","displayedTimestampValueExpression":"Timestamp","implicitColumnExpression":"SpanName","serviceNameExpression":"ServiceName","eventAttributesExpression":"SpanAttributes","resourceAttributesExpression":"ResourceAttributes","defaultTableSelectExpression":"Timestamp,ServiceName,StatusCode,round(Duration/1e6),SpanName","traceIdExpression":"TraceId","spanIdExpression":"SpanId","durationExpression":"Duration","durationPrecision":9,"parentSpanIdExpression":"ParentSpanId","spanNameExpression":"SpanName","spanKindExpression":"SpanKind","statusCodeExpression":"StatusCode","statusMessageExpression":"StatusMessage","connection":"Demo ClickHouse","logSourceId":"Demo Logs","metricSourceId":"Demo Metrics"},{"from":{"databaseName":"otel_v2","tableName":""},"kind":"metric","timestampValueExpression":"TimeUnix","name":"Demo Metrics","resourceAttributesExpression":"ResourceAttributes","serviceNameExpression":"ServiceName","metricTables":{"gauge":"otel_metrics_gauge","histogram":"otel_metrics_histogram","sum":"otel_metrics_sum","summary":"otel_metrics_summary","exponential histogram":"otel_metrics_exponential_histogram"},"connection":"Demo ClickHouse","logSourceId":"Demo Logs","traceSourceId":"Demo Traces"}]'
+DEFAULT_CONNECTIONS='[{"name":"local","host":"https://sql-clickhouse.clickhouse.com","username":"otel_demo","password":""}]'
+DEFAULT_SOURCES='[{"kind":"log","name":"Demo Logs","connection":"local","from":{"databaseName":"otel_v2","tableName":"otel_logs"},"timestampValueExpression":"TimestampTime","defaultTableSelectExpression":"Timestamp, ServiceName, SeverityText, Body","serviceNameExpression":"ServiceName","severityTextExpression":"SeverityText","eventAttributesExpression":"LogAttributes","resourceAttributesExpression":"ResourceAttributes","traceIdExpression":"TraceId","spanIdExpression":"SpanId","implicitColumnExpression":"Body","displayedTimestampValueExpression":"Timestamp","sessionSourceId":"Demo Sessions","traceSourceId":"Demo Traces","metricSourceId":"Demo Metrics"},{"kind":"trace","name":"Demo Traces","connection":"local","from":{"databaseName":"otel_v2","tableName":"otel_traces"},"timestampValueExpression":"Timestamp","defaultTableSelectExpression":"Timestamp, ServiceName, StatusCode, round(Duration / 1e6), SpanName","serviceNameExpression":"ServiceName","eventAttributesExpression":"SpanAttributes","resourceAttributesExpression":"ResourceAttributes","traceIdExpression":"TraceId","spanIdExpression":"SpanId","implicitColumnExpression":"SpanName","durationExpression":"Duration","durationPrecision":9,"parentSpanIdExpression":"ParentSpanId","spanKindExpression":"SpanKind","spanNameExpression":"SpanName","logSourceId":"Demo Logs","statusCodeExpression":"StatusCode","statusMessageExpression":"StatusMessage","spanEventsValueExpression":"Events","metricSourceId":"Demo Metrics","sessionSourceId":"Demo Sessions"},{"kind":"metric","name":"Demo Metrics","connection":"local","from":{"databaseName":"otel_v2","tableName":""},"timestampValueExpression":"TimeUnix","serviceNameExpression":"ServiceName","metricTables":{"gauge":"otel_metrics_gauge","histogram":"otel_metrics_histogram","sum":"otel_metrics_sum","summary":"otel_metrics_summary","exponential histogram":"otel_metrics_exponential_histogram"},"resourceAttributesExpression":"ResourceAttributes","logSourceId":"Demo Logs"},{"kind":"session","name":"Demo Sessions","connection":"local","from":{"databaseName":"otel_v2","tableName":"hyperdx_sessions"},"timestampValueExpression":"TimestampTime","defaultTableSelectExpression":"Timestamp, ServiceName, Body","serviceNameExpression":"ServiceName","severityTextExpression":"SeverityText","eventAttributesExpression":"LogAttributes","resourceAttributesExpression":"ResourceAttributes","traceSourceId":"Demo Traces","traceIdExpression":"TraceId","spanIdExpression":"SpanId","implicitColumnExpression":"Body"},{"kind":"trace","name":"ClickPy Traces","connection":"local","from":{"databaseName":"otel_clickpy","tableName":"otel_traces"},"timestampValueExpression":"Timestamp","defaultTableSelectExpression":"Timestamp, ServiceName, StatusCode, round(Duration / 1e6), SpanName","serviceNameExpression":"ServiceName","eventAttributesExpression":"SpanAttributes","resourceAttributesExpression":"ResourceAttributes","traceIdExpression":"TraceId","spanIdExpression":"SpanId","implicitColumnExpression":"SpanName","durationExpression":"Duration","durationPrecision":9,"parentSpanIdExpression":"ParentSpanId","spanKindExpression":"SpanKind","spanNameExpression":"SpanName","statusCodeExpression":"StatusCode","statusMessageExpression":"StatusMessage","spanEventsValueExpression":"Events","highlightedTraceAttributeExpressions":[{"sqlExpression":"if((SpanAttributes['http.route']) LIKE '%dashboard%', concat('https://clickpy.clickhouse.com', path(SpanAttributes['http.target'])), '')","alias":"clickpy_link"}],"sessionSourceId":"ClickPy Sessions"},{"kind":"session","name":"ClickPy Sessions","connection":"local","from":{"databaseName":"otel_clickpy","tableName":"hyperdx_sessions"},"timestampValueExpression":"TimestampTime","defaultTableSelectExpression":"Timestamp, ServiceName, Body","serviceNameExpression":"ServiceName","severityTextExpression":"SeverityText","eventAttributesExpression":"LogAttributes","resourceAttributesExpression":"ResourceAttributes","traceSourceId":"ClickPy Traces","traceIdExpression":"TraceId","spanIdExpression":"SpanId","implicitColumnExpression":"Body"}]'
+

packages/app/eslint.config.mjs

@@ -7,6 +7,7 @@ import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import prettierConfig from 'eslint-config-prettier';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import prettierPlugin from 'eslint-plugin-prettier/recommended';
+import playwrightPlugin from 'eslint-plugin-playwright';
 
 export default [
   js.configs.recommended,
@@ -116,11 +117,14 @@ export default [
   },
   {
     files: ['tests/e2e/**/*.{ts,js}'],
+    ...playwrightPlugin.configs['flat/recommended'],
     rules: {
+      ...playwrightPlugin.configs['flat/recommended'].rules,
       'no-console': 'off',
       'no-empty': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       '@next/next/no-html-link-for-pages': 'off',
+      'playwright/no-networkidle': 'off', // temporary until we have a better way to deal with react re-renders
     },
   },
   ...storybook.configs['flat/recommended'],

packages/app/package.json

@@ -134,6 +134,7 @@
     "@types/react-table": "^7.7.14",
     "@types/sqlstring": "^2.3.2",
     "eslint-config-next": "^16.0.10",
+    "eslint-plugin-playwright": "^2.4.0",
     "eslint-plugin-storybook": "10.1.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.2.0",

packages/app/src/components/DBSearchPageFilters.tsx

@@ -255,7 +255,7 @@ export const FilterCheckbox = ({
       </div>
       {pinned && (
         <Center me="1px">
-          <IconPinFilled size={12} />
+          <IconPinFilled size={12} data-testid={`filter-pin-${label}-pinned`} />
         </Center>
       )}
     </div>

packages/app/tests/e2e/components/ChartEditorComponent.ts

@@ -0,0 +1,141 @@
+/**
+ * ChartEditorComponent - Reusable component for chart/tile editor
+ * Used for creating and configuring dashboard tiles and chart explorer
+ */
+import { Locator, Page } from '@playwright/test';
+
+export class ChartEditorComponent {
+  readonly page: Page;
+  private readonly chartNameInput: Locator;
+  private readonly sourceSelector: Locator;
+  private readonly metricSelector: Locator;
+  private readonly runQueryButton: Locator;
+  private readonly saveButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.chartNameInput = page.getByTestId('chart-name-input');
+    this.sourceSelector = page.getByTestId('source-selector');
+    this.metricSelector = page.getByTestId('metric-name-selector');
+    this.runQueryButton = page.getByTestId('chart-run-query-button');
+    this.saveButton = page.getByTestId('chart-save-button');
+  }
+
+  /**
+   * Set chart name
+   */
+  async setChartName(name: string) {
+    await this.chartNameInput.fill(name);
+  }
+
+  /**
+   * Select a data source
+   */
+  async selectSource(sourceName: string) {
+    await this.sourceSelector.click();
+    // Use getByRole for more reliable selection
+    const sourceOption = this.page.getByRole('option', { name: sourceName });
+    await sourceOption.click({ timeout: 5000 });
+  }
+
+  /**
+   * Select a metric by name
+   */
+  async selectMetric(metricName: string, metricValue?: string) {
+    // Wait for metric selector to be visible
+    await this.metricSelector.waitFor({ state: 'visible', timeout: 5000 });
+
+    // Click to open dropdown
+    await this.metricSelector.click();
+
+    // Type to filter
+    await this.metricSelector.fill(metricName);
+
+    // If a specific metric value is provided, wait for and click it
+    if (metricValue) {
+      // Use attribute selector for combobox options
+      const targetMetricOption = this.page.locator(
+        `[data-combobox-option="true"][value="${metricValue}"]`,
+      );
+      await targetMetricOption.waitFor({ state: 'visible', timeout: 5000 });
+      await targetMetricOption.click({ timeout: 5000 });
+    } else {
+      // Otherwise just press Enter to select the first match
+      await this.page.keyboard.press('Enter');
+    }
+  }
+
+  /**
+   * Run the query and wait for it to complete
+   */
+  async runQuery() {
+    await this.runQueryButton.click();
+  }
+
+  /**
+   * Save the chart/tile and wait for modal to close
+   */
+  async save() {
+    await this.saveButton.click();
+    // Wait for save button to disappear (modal closes)
+    await this.saveButton.waitFor({ state: 'hidden', timeout: 2000 });
+  }
+
+  /**
+   * Wait for chart editor data to load (sources, metrics, etc.)
+   */
+  async waitForDataToLoad() {
+    await this.runQueryButton.waitFor({ state: 'visible', timeout: 2000 });
+    await this.page.waitForLoadState('networkidle');
+  }
+
+  /**
+   * Complete workflow: create a basic chart with name and save
+   */
+  async createBasicChart(name: string) {
+    // Wait for data sources to load before interacting
+    await this.waitForDataToLoad();
+    await this.setChartName(name);
+    await this.runQuery();
+    await this.save();
+  }
+
+  /**
+   * Complete workflow: create a chart with specific source and metric
+   */
+  async createChartWithMetric(
+    chartName: string,
+    sourceName: string,
+    metricName: string,
+    metricValue?: string,
+  ) {
+    // Wait for data sources to load before interacting
+    await this.waitForDataToLoad();
+    await this.selectSource(sourceName);
+    await this.selectMetric(metricName, metricValue);
+    await this.runQuery();
+    await this.save();
+  }
+
+  // Getters for assertions
+
+  get nameInput() {
+    return this.chartNameInput;
+  }
+
+  get source() {
+    return this.sourceSelector;
+  }
+
+  get metric() {
+    return this.metricSelector;
+  }
+
+  get runButton() {
+    return this.runQueryButton;
+  }
+
+  get saveBtn() {
+    return this.saveButton;
+  }
+}

packages/app/tests/e2e/components/FilterComponent.ts

@@ -0,0 +1,167 @@
+/**
+ * FilterComponent - Reusable component for search filters
+ * Used for applying, excluding, pinning, and searching filters
+ */
+import { Locator, Page } from '@playwright/test';
+
+export class FilterComponent {
+  readonly page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  /**
+   * Get filter group by name
+   * @param filterName - e.g., 'SeverityText', 'ServiceName'
+   */
+  getFilterGroup(filterName: string) {
+    return this.page.getByTestId(`filter-group-${filterName}`);
+  }
+
+  /**
+   * Get filter group control (clickable header)
+   */
+  getFilterGroupControl(index?: number) {
+    const controls = this.page.getByTestId('filter-group-control');
+    return index !== undefined ? controls.nth(index) : controls;
+  }
+
+  /**
+   * Open/expand a filter group
+   */
+  async openFilterGroup(filterName: string) {
+    await this.getFilterGroup(filterName).click();
+  }
+
+  /**
+   * Get checkbox for a specific filter value
+   * @param valueName - e.g., 'info', 'error', 'debug'
+   */
+  getFilterCheckbox(valueName: string) {
+    return this.page.getByTestId(`filter-checkbox-${valueName}`);
+  }
+
+  /**
+   * Get checkbox input element
+   */
+  getFilterCheckboxInput(valueName: string) {
+    return this.page.getByTestId(`filter-checkbox-input-${valueName}`);
+  }
+
+  /**
+   * Apply/select a filter value
+   */
+  async applyFilter(valueName: string) {
+    const checkbox = this.getFilterCheckbox(valueName);
+    await checkbox.click();
+  }
+
+  /**
+   * Exclude a filter value (invert the filter)
+   */
+  async excludeFilter(valueName: string) {
+    const filterCheckbox = this.getFilterCheckbox(valueName);
+    await filterCheckbox.hover();
+
+    const excludeButton = this.page.getByTestId(`filter-exclude-${valueName}`);
+    await excludeButton.first().click();
+  }
+
+  /**
+   * Pin a filter value to persist it
+   */
+  async pinFilter(valueName: string) {
+    const filterCheckbox = this.getFilterCheckbox(valueName);
+    await filterCheckbox.hover();
+
+    const pinButton = this.page.getByTestId(`filter-pin-${valueName}`);
+    await pinButton.click();
+  }
+
+  /**
+   * Clear/unselect a filter
+   */
+  async clearFilter(valueName: string) {
+    const input = this.getFilterCheckboxInput(valueName);
+    const checkbox = this.getFilterCheckbox(valueName);
+    await checkbox.click();
+    await input.click();
+  }
+
+  /**
+   * Get filter search input
+   */
+  getFilterSearchInput(filterName: string) {
+    return this.page.getByTestId(`filter-search-${filterName}`);
+  }
+
+  /**
+   * Search within a filter's values
+   */
+  async searchFilterValues(filterName: string, searchText: string) {
+    const searchInput = this.getFilterSearchInput(filterName);
+    await searchInput.fill(searchText);
+  }
+
+  /**
+   * Clear filter search
+   */
+  async clearFilterSearch(filterName: string) {
+    const searchInput = this.getFilterSearchInput(filterName);
+    await searchInput.clear();
+  }
+
+  /**
+   * Find and expand first filter group that has a search input (>5 values)
+   * Returns the filter name if found, null otherwise
+   */
+  async findFilterWithSearch(skipNames: string[] = []): Promise<string | null> {
+    const filterControls = this.getFilterGroupControl();
+    const count = await filterControls.count();
+
+    for (let i = 0; i < Math.min(count, 5); i++) {
+      const filter = filterControls.nth(i);
+      const filterText = (await filter.textContent()) || '';
+      const filterName = filterText.trim().replace(/\s*\(\d+\)\s*$/, '');
+
+      // Skip filters in the skip list
+      if (skipNames.some(skip => filterName.toLowerCase().includes(skip))) {
+        continue;
+      }
+
+      // Expand the filter
+      await filter.click();
+
+      // Check if search input appears
+      const searchInput = this.getFilterSearchInput(filterName);
+
+      try {
+        await searchInput.waitFor({ state: 'visible', timeout: 1000 });
+        // Search input is visible, return this filter name
+        return filterName;
+      } catch (e) {
+        // Search input not visible, collapse and try next
+        await filter.click();
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Check if filter checkbox is indeterminate (excluded state)
+   */
+  async isFilterExcluded(valueName: string): Promise<boolean> {
+    const input = this.getFilterCheckboxInput(valueName);
+    const indeterminate = await input.getAttribute('data-indeterminate');
+    return indeterminate === 'true';
+  }
+
+  /**
+   * Get all filter values for a specific filter group
+   */
+  getFilterValues(filterGroupName: string) {
+    return this.page.getByTestId(`filter-checkbox-${filterGroupName}`);
+  }
+}