Fix UX E2E tests

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/breakdown_filter.ts

@@ -6,12 +6,12 @@
 
 import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
 import { DEFAULT_TIMEOUT } from './csm_dashboard';
+import { waitForLoadingToFinish } from './utils';
 
 /** The default time in ms to wait for a Cypress command to complete */
 
 Given(`a user clicks the page load breakdown filter`, () => {
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
   cy.get('.euiStat__title-isLoading').should('not.be.visible');
   const breakDownBtn = cy.get(
     '[data-test-subj=pldBreakdownFilter]',

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/client_metrics_helper.ts

@@ -5,6 +5,7 @@
  */
 
 import { DEFAULT_TIMEOUT } from './csm_dashboard';
+import { waitForLoadingToFinish } from './utils';
 
 /**
  * Verifies the behavior of the client metrics component
@@ -17,8 +18,7 @@ export function verifyClientMetrics(
 ) {
   const clientMetricsSelector = '[data-cy=client-metrics] .euiStat__title';
 
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
 
   if (checkTitleStatus) {
     cy.get('.euiStat__title', DEFAULT_TIMEOUT).should('be.visible');

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_dashboard.ts

@@ -7,6 +7,7 @@
 import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
 import { loginAndWaitForPage } from '../../../integration/helpers';
 import { verifyClientMetrics } from './client_metrics_helper';
+import { waitForLoadingToFinish } from './utils';
 
 /** The default time in ms to wait for a Cypress command to complete */
 export const DEFAULT_TIMEOUT = { timeout: 60 * 1000 };
@@ -36,8 +37,8 @@ Then(`should display percentile for page load chart`, () => {
 
   cy.get('.euiLoadingChart', DEFAULT_TIMEOUT).should('be.visible');
 
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
+
   cy.get('.euiStat__title-isLoading').should('not.be.visible');
 
   cy.get(pMarkers).eq(0).should('have.text', '50th');
@@ -52,8 +53,7 @@ Then(`should display percentile for page load chart`, () => {
 Then(`should display chart legend`, () => {
   const chartLegend = 'div.echLegendItem__label';
 
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
   cy.get('.euiLoadingChart').should('not.be.visible');
 
   cy.get(chartLegend, DEFAULT_TIMEOUT).eq(0).should('have.text', 'Overall');
@@ -64,8 +64,7 @@ Then(`should display tooltip on hover`, () => {
 
   const pMarkers = '[data-cy=percentile-markers] span.euiToolTipAnchor';
 
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
   cy.get('.euiLoadingChart').should('not.be.visible');
 
   const marker = cy.get(pMarkers, DEFAULT_TIMEOUT).eq(0);

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts

@@ -7,10 +7,10 @@
 import { When, Then } from 'cypress-cucumber-preprocessor/steps';
 import { DEFAULT_TIMEOUT } from './csm_dashboard';
 import { verifyClientMetrics } from './client_metrics_helper';
+import { waitForLoadingToFinish } from './utils';
 
 When(/^the user filters by "([^"]*)"$/, (filterName) => {
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
   cy.get('.euiStat__title-isLoading').should('not.be.visible');
   cy.get(`#local-filter-${filterName}`).click();
 
@@ -51,8 +51,7 @@ When(/^the user filters by "([^"]*)"$/, (filterName) => {
 });
 
 Then(/^it filters the client metrics "([^"]*)"$/, (filterName) => {
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
   cy.get('.euiStat__title-isLoading').should('not.be.visible');
 
   const data =

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/percentile_select.ts

@@ -6,11 +6,10 @@
 
 import { When, Then } from 'cypress-cucumber-preprocessor/steps';
 import { verifyClientMetrics } from './client_metrics_helper';
-import { getDataTestSubj } from './utils';
+import { getDataTestSubj, waitForLoadingToFinish } from './utils';
 
 When('the user changes the selected percentile', () => {
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
 
   getDataTestSubj('uxPercentileSelect').select('95');
 });

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts

@@ -7,10 +7,10 @@
 import { When, Then } from 'cypress-cucumber-preprocessor/steps';
 import { verifyClientMetrics } from './client_metrics_helper';
 import { DEFAULT_TIMEOUT } from './csm_dashboard';
+import { waitForLoadingToFinish } from './utils';
 
 When('the user changes the selected service name', () => {
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
   cy.get(`[data-cy=serviceNameFilter]`, DEFAULT_TIMEOUT).select('client');
 });
 

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/url_search_filter.ts

@@ -6,18 +6,18 @@
 
 import { When, Then } from 'cypress-cucumber-preprocessor/steps';
 import { DEFAULT_TIMEOUT } from './csm_dashboard';
+import { waitForLoadingToFinish } from './utils';
 
 When(`a user clicks inside url search field`, () => {
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
   cy.get('.euiStat__title-isLoading').should('not.be.visible');
   cy.get('span[data-cy=csmUrlFilter]', DEFAULT_TIMEOUT).within(() => {
     cy.get('input.euiFieldSearch').click();
   });
 });
 
 Then(`it displays top pages in the suggestion popover`, () => {
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
 
   cy.get('div.euiPopover__panel-isOpen', DEFAULT_TIMEOUT).within(() => {
     const listOfUrls = cy.get('li.euiSelectableListItem');
@@ -38,17 +38,17 @@ Then(`it displays top pages in the suggestion popover`, () => {
 });
 
 When(`a user enters a query in url search field`, () => {
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
 
   cy.get('[data-cy=csmUrlFilter]').within(() => {
     cy.get('input.euiSelectableSearch').type('cus');
   });
 
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
 });
 
 Then(`it should filter results based on query`, () => {
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
 
   cy.get('div.euiPopover__panel-isOpen', DEFAULT_TIMEOUT).within(() => {
     const listOfUrls = cy.get('li.euiSelectableListItem');

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/utils.ts

@@ -6,9 +6,12 @@
 
 import { DEFAULT_TIMEOUT } from './csm_dashboard';
 
+export function waitForLoadingToFinish() {
+  cy.get('[data-test-subj=globalLoadingIndicator]', DEFAULT_TIMEOUT);
+}
+
 export function getDataTestSubj(dataTestSubj: string) {
-  // wait for all loading to finish
-  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  waitForLoadingToFinish();
 
   return cy.get(`[data-test-subj=${dataTestSubj}]`, DEFAULT_TIMEOUT);
 }