[8.x] [kbn/response-ops-alerts-table] set data-test-subj for EuiDataGrid based on loading status (#217230) (#218243)

# Backport This will backport the following commits from `main` to `8.x`: - [[kbn/response-ops-alerts-table] set data-test-subj for EuiDataGrid based on loading status (#217230)](https://github.com/elastic/kibana/pull/217230)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
2025-04-23 09:19:04 -04:00 · 2025-04-15 17:18:21 +02:00 · 2025-04-15 17:18:21 +02:00 · 2e306a27f3
commit 2e306a27f3
parent 93b2fd62d9
13 changed files with 23 additions and 20 deletions
--- a/src/platform/packages/shared/response-ops/alerts-table/components/alerts_data_grid.tsx
+++ b/src/platform/packages/shared/response-ops/alerts-table/components/alerts_data_grid.tsx
@ -358,7 +358,7 @@ export const AlertsDataGrid = typedMemo(
              ref={dataGridRef}
              css={rowStyles}
              aria-label="Alerts table"
-              data-test-subj="alertsTable"
+              data-test-subj={isLoading ? `alertsTableIsLoading` : `alertsTableIsLoaded`}
              height={height}
              columns={columnsWithCellActions}
              columnVisibility={columnVisibility}
--- a/x-pack/solutions/security/packages/kbn-scout-security/src/playwright/fixtures/test/page_objects/alerts_table.ts
+++ b/x-pack/solutions/security/packages/kbn-scout-security/src/playwright/fixtures/test/page_objects/alerts_table.ts
@ -10,16 +10,14 @@ import { ScoutPage, Locator, expect } from '@kbn/scout';
 const PAGE_URL = 'security/alerts';

 export class AlertsTablePage {
-  public detectionsAlertsContainer: Locator;
+  public detectionsAlertsWrapper: Locator;
  public alertRow: Locator;
-  public alertsTableBody: Locator;
+  public alertsTable: Locator;

  constructor(private readonly page: ScoutPage) {
-    this.detectionsAlertsContainer = this.page.testSubj.locator('detectionsAlertsPage');
+    this.detectionsAlertsWrapper = this.page.testSubj.locator('detectionsAlertsPage');
    this.alertRow = this.page.locator('div.euiDataGridRow');
-    this.alertsTableBody = this.page.testSubj
-      .locator('alertsTable')
-      .locator(`[data-test-subj='euiDataGridBody']`);
+    this.alertsTable = this.page.testSubj.locator('alertsTableIsLoaded'); // Search for loaded Alerts table
  }

  async navigate() {
@ -27,7 +25,7 @@ export class AlertsTablePage {
  }

  async expandAlertDetailsFlyout(ruleName: string) {
-    await this.alertsTableBody.waitFor({ state: 'visible' });
+    await this.alertsTable.waitFor({ state: 'visible' });
    // Filter alert by unique rule name
    const row = this.alertRow.filter({ hasText: ruleName });
    await expect(
@ -37,4 +35,9 @@ export class AlertsTablePage {

    return row.locator(`[data-test-subj='expand-event']`).click();
  }
+
+  async waitForDetectionsAlertsWrapper() {
+    // Increased timeout to 20 seconds because this page sometimes takes longer to load
+    return this.detectionsAlertsWrapper.waitFor({ state: 'visible', timeout: 20_000 });
+  }
 }
--- a/x-pack/solutions/security/plugins/security_solution/public/management/cypress/e2e/response_actions/isolate_mocked_data.cy.ts
+++ b/x-pack/solutions/security/plugins/security_solution/public/management/cypress/e2e/response_actions/isolate_mocked_data.cy.ts
@ -139,7 +139,7 @@ describe('Isolate command', { tags: ['@ess', '@serverless', '@brokenInServerless
        loadPage(APP_ALERTS_PATH);
        closeAllToasts();

-        cy.getByTestSubj('alertsTable').within(() => {
+        cy.getByTestSubj('alertsTableIsLoaded').within(() => {
          cy.getByTestSubj('expand-event')
            .first()
            .within(() => {
--- a/x-pack/solutions/security/plugins/security_solution/public/management/cypress/screens/alerts.ts
+++ b/x-pack/solutions/security/plugins/security_solution/public/management/cypress/screens/alerts.ts
@ -30,7 +30,7 @@ export const getAlertsTableRows = (timeout?: number): Cypress.Chainable<JQuery<H
        clickAlertListRefreshButton();

        return cy
-          .getByTestSubj('alertsTable')
+          .getByTestSubj('alertsTableIsLoaded')
          .find<HTMLDivElement>('.euiDataGridRow')
          .then(($rowsFound) => {
            $rows = $rowsFound;
--- a/x-pack/solutions/security/plugins/security_solution/ui_tests/parallel_tests/flyout/alert_details_url_sync.spec.ts
+++ b/x-pack/solutions/security/plugins/security_solution/ui_tests/parallel_tests/flyout/alert_details_url_sync.spec.ts
@ -28,7 +28,7 @@ spaceTest.describe('Expandable flyout state sync', { tag: ['@ess', '@svlSecurity
    const urlBeforeAlertDetails = page.url();
    expect(urlBeforeAlertDetails).not.toContain(RIGHT);

-    await pageObjects.alertsTablePage.detectionsAlertsContainer.waitFor({ state: 'visible' });
+    await pageObjects.alertsTablePage.waitForDetectionsAlertsWrapper();
    await pageObjects.alertsTablePage.expandAlertDetailsFlyout(ruleName);

    const urlAfterAlertDetails = page.url();
@ -38,7 +38,7 @@ spaceTest.describe('Expandable flyout state sync', { tag: ['@ess', '@svlSecurity
    await expect(headerTitle).toHaveText(ruleName);

    await page.reload();
-    await pageObjects.alertsTablePage.detectionsAlertsContainer.waitFor({ state: 'visible' });
+    await pageObjects.alertsTablePage.waitForDetectionsAlertsWrapper();

    const urlAfterReload = page.url();
    expect(urlAfterReload).toContain(RIGHT);
--- a/x-pack/test/cloud_security_posture_functional/constants/test_subject_ids.ts
+++ b/x-pack/test/cloud_security_posture_functional/constants/test_subject_ids.ts
@ -64,7 +64,7 @@ export const testSubjectIds = {
  GRAPH_ACTIONS_TOGGLE_SEARCH_ID: 'cloudSecurityGraphGraphInvestigationToggleSearch',
  GRAPH_ACTIONS_INVESTIGATE_IN_TIMELINE_ID:
    'cloudSecurityGraphGraphInvestigationInvestigateInTimeline',
-  ALERT_TABLE_ROW_CSS_SELECTOR: '[data-test-subj="alertsTable"] .euiDataGridRow',
+  ALERT_TABLE_ROW_CSS_SELECTOR: '[data-test-subj="alertsTableIsLoaded"] .euiDataGridRow',
  SETUP_TECHNOLOGY_SELECTOR: 'setup-technology-selector',
  DIRECT_ACCESS_KEYS: 'direct_access_keys',
  SETUP_TECHNOLOGY_SELECTOR_AGENTLESS_RADIO: 'setup-technology-agentless-radio',
--- a/x-pack/test/functional/services/observability/alerts/common.ts
+++ b/x-pack/test/functional/services/observability/alerts/common.ts
@ -21,7 +21,7 @@ const DATE_WITH_DATA = {

 const ALERTS_FLYOUT_SELECTOR = 'alertsFlyout';
 const FILTER_FOR_VALUE_BUTTON_SELECTOR = 'filterForValue';
-const ALERTS_TABLE_CONTAINER_SELECTOR = 'alertsTable';
+const ALERTS_TABLE_CONTAINER_SELECTOR = 'alertsTableIsLoaded';
 const ALERTS_TABLE_ERROR_PROMPT_SELECTOR = 'alertsTableErrorPrompt';
 const ALERTS_TABLE_ACTIONS_MENU_SELECTOR = 'alertsTableActionsMenu';
 const VIEW_RULE_DETAILS_SELECTOR = 'viewRuleDetails';
--- a/x-pack/test/functional/services/observability/overview/common.ts
+++ b/x-pack/test/functional/services/observability/overview/common.ts
@ -22,7 +22,7 @@ const ALERTS_TITLE = 'Alerts';
 const ALERTS_ACCORDION_SELECTOR = `accordion-${ALERTS_TITLE}`;
 const ALERTS_SECTION_BUTTON_CSS_SELECTOR = `[data-test-subj=${ALERTS_ACCORDION_SELECTOR}] button.euiAccordion__button`;
 const ALERTS_TABLE_NO_DATA_SELECTOR = 'alertsTableEmptyState';
-const ALERTS_TABLE_WITH_DATA_SELECTOR = 'alertsTable';
+const ALERTS_TABLE_WITH_DATA_SELECTOR = 'alertsTableIsLoaded';
 const ALERTS_TABLE_LOADING_SELECTOR = 'internalAlertsPageLoading';

 export function ObservabilityOverviewCommonProvider({
--- a/x-pack/test/security_solution_cypress/cypress/e2e/investigations/alerts/alerts_table_api_calls.cy.ts
+++ b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/alerts/alerts_table_api_calls.cy.ts
@ -41,7 +41,7 @@ describe('Alert Table API calls', { tags: ['@ess', '@serverless'] }, () => {
  });

  it('should call `api/lists/index` only once', () => {
-    cy.get('[data-test-subj="alertsTable"]').then(() => {
+    cy.get('[data-test-subj="alertsTableIsLoaded"]').then(() => {
      expect(callCount, 'number of times lists index api is called').to.equal(1);
    });
  });
--- a/x-pack/test/security_solution_cypress/cypress/screens/common/data_grid.ts
+++ b/x-pack/test/security_solution_cypress/cypress/screens/common/data_grid.ts
@ -38,7 +38,7 @@ export const GET_DATA_GRID_HEADER_CELL_ACTION_GROUP = (fieldName: string) => {
 };

 export const DATA_GRID_FULL_SCREEN =
-  '[data-test-subj="alertsTable"] [data-test-subj="dataGridFullScreenButton"]';
+  '[data-test-subj="alertsTableIsLoaded"] [data-test-subj="dataGridFullScreenButton"]';

 export const DATA_GRID_FIELD_SORT_BTN = '[data-test-subj="dataGridColumnSortingButton"]';

--- a/x-pack/test/security_solution_cypress/cypress/screens/rule_details.ts
+++ b/x-pack/test/security_solution_cypress/cypress/screens/rule_details.ts
@ -87,7 +87,7 @@ export const NEW_TERMS_FIELDS_DETAILS = 'Fields';
 export const NEW_TERMS_HISTORY_WINDOW_DETAILS = 'History Window Size';

 export const FIELDS_BROWSER_BTN =
-  '[data-test-subj="alertsTable"] [data-test-subj="show-field-browser"]';
+  '[data-test-subj="alertsTableIsLoaded"] [data-test-subj="show-field-browser"]';

 export const LAST_EXECUTION_STATUS_REFRESH_BUTTON =
  '[data-test-subj="ruleLastExecutionStatusRefreshButton"]';
--- a/x-pack/test/security_solution_cypress/cypress/tasks/alerts.ts
+++ b/x-pack/test/security_solution_cypress/cypress/tasks/alerts.ts
@ -489,7 +489,7 @@ export const sumAlertCountFromAlertCountTable = (callback?: (sumOfEachRow: numbe
 };

 export const selectFirstPageAlerts = () => {
-  const ALERTS_DATA_GRID = '[data-test-subj="alertsTable"]';
+  const ALERTS_DATA_GRID = '[data-test-subj="alertsTableIsLoaded"]';
  cy.get(ALERTS_DATA_GRID).find(SELECT_ALL_VISIBLE_ALERTS).scrollIntoView();
  cy.get(ALERTS_DATA_GRID).find(SELECT_ALL_VISIBLE_ALERTS).click({ force: true });
 };
--- a/x-pack/test/security_solution_ftr/page_objects/detections/index.ts
+++ b/x-pack/test/security_solution_ftr/page_objects/detections/index.ts
@ -8,7 +8,7 @@
 import { WebElementWrapper } from '@kbn/ftr-common-functional-ui-services';
 import { FtrService } from '../../../functional/ftr_provider_context';

-const ALERT_TABLE_ROW_CSS_SELECTOR = '[data-test-subj="alertsTable"] .euiDataGridRow';
+const ALERT_TABLE_ROW_CSS_SELECTOR = '[data-test-subj="alertsTableIsLoaded"] .euiDataGridRow';

 export class DetectionsPageObject extends FtrService {
  private readonly find = this.ctx.getService('find');