[kbn/response-ops-alerts-table] set data-test-subj for EuiDataGrid based on loading status

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}

x-pack/solutions/security/packages/kbn-scout-security/src/playwright/fixtures/test/page_objects/alerts_table.ts

@@ -10,24 +10,22 @@ 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() {
     await this.page.gotoApp(PAGE_URL);
   }
 
   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 });
+  }
 }

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(() => {

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;

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);

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',

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_WITH_DATA_SELECTOR = 'alertsTable';
+const ALERTS_TABLE_WITH_DATA_SELECTOR = 'alertsTableIsLoaded';
 const ALERTS_TABLE_NO_DATA_SELECTOR = 'alertsTableEmptyState';
 const ALERTS_TABLE_ERROR_PROMPT_SELECTOR = 'alertsTableErrorPrompt';
 const ALERTS_TABLE_ACTIONS_MENU_SELECTOR = 'alertsTableActionsMenu';

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({

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);
     });
   });

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"]';
 

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"]';

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 });
 };

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');