Fix flakiness on custom time range saved searches

test/functional/services/dashboard/panel_settings.ts

@@ -9,7 +9,7 @@
 import { FtrProviderContext } from '../../ftr_provider_context';
 import { CommonlyUsed } from '../../page_objects/time_picker';
 
-export function DashboardCustomizePanelProvider({ getService }: FtrProviderContext) {
+export function DashboardCustomizePanelProvider({ getService, getPageObject }: FtrProviderContext) {
   const log = getService('log');
   const retry = getService('retry');
   const toasts = getService('toasts');
@@ -39,6 +39,34 @@ export function DashboardCustomizePanelProvider({ getService }: FtrProviderConte
       await testSubjects.missingOrFail(this.TOGGLE_TIME_RANGE_TEST_SUBJ);
     }
 
+    public async enableCustomTimeRange() {
+      log.debug('enableCustomTimeRange');
+      const toggle = await testSubjects.find(this.TOGGLE_TIME_RANGE_TEST_SUBJ);
+
+      if ((await toggle.getAttribute('aria-checked')) === 'false') {
+        await toggle.click();
+        await retry.waitFor(
+          'custom time range to be enabled',
+          async () => (await toggle.getAttribute('aria-checked')) === 'true',
+          async () => await toggle.click()
+        );
+      }
+    }
+
+    public async disableCustomTimeRange() {
+      log.debug('disableCustomTimeRange');
+      const toggle = await testSubjects.find(this.TOGGLE_TIME_RANGE_TEST_SUBJ);
+
+      if ((await toggle.getAttribute('aria-checked')) === 'true') {
+        await toggle.click();
+        await retry.waitFor(
+          'custom time range to be disabled',
+          async () => (await toggle.getAttribute('aria-checked')) === 'false',
+          async () => await toggle.click()
+        );
+      }
+    }
+
     public async findFlyout() {
       log.debug('findFlyout');
       return await testSubjects.find(this.FLYOUT_TEST_SUBJ);
@@ -50,15 +78,21 @@ export function DashboardCustomizePanelProvider({ getService }: FtrProviderConte
       return await flyout.findByCssSelector(`[data-test-subj="${testSubject}"]`);
     }
 
-    public async findToggleQuickMenuButton() {
-      log.debug('findToggleQuickMenuButton');
+    public async findDatePickerQuickMenuButton() {
+      log.debug('findDatePickerQuickMenuButton');
       return await this.findFlyoutTestSubject('superDatePickerToggleQuickMenuButton');
     }
 
-    public async clickToggleQuickMenuButton() {
-      log.debug('clickToggleQuickMenuButton');
-      const button = await this.findToggleQuickMenuButton();
+    public async openDatePickerQuickMenu() {
+      log.debug('openDatePickerQuickMenu');
+      const button = await this.findDatePickerQuickMenuButton();
       await button.click();
+
+      await retry.waitFor(
+        'super date picker quick menu to be displayed',
+        async () => await testSubjects.isDisplayed('superDatePickerQuickMenu'),
+        async () => await button.click()
+      );
     }
 
     public async clickCommonlyUsedTimeRange(time: CommonlyUsed) {
@@ -111,10 +145,5 @@ export function DashboardCustomizePanelProvider({ getService }: FtrProviderConte
         await testSubjects.waitForDeleted('cancelCustomizePanelButton');
       });
     }
-
-    public async clickToggleShowCustomTimeRange() {
-      log.debug('clickToggleShowCustomTimeRange');
-      await testSubjects.click(this.TOGGLE_TIME_RANGE_TEST_SUBJ);
-    }
   })();
 }

x-pack/test/functional/apps/dashboard/group2/panel_time_range.ts

@@ -44,8 +44,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       it('can add a custom time range to a panel', async () => {
         await PageObjects.lens.createAndAddLensFromDashboard({});
         await dashboardPanelActions.customizePanel();
-        await dashboardCustomizePanel.clickToggleShowCustomTimeRange();
-        await dashboardCustomizePanel.clickToggleQuickMenuButton();
+        await dashboardCustomizePanel.enableCustomTimeRange();
+        await dashboardCustomizePanel.openDatePickerQuickMenu();
         await dashboardCustomizePanel.clickCommonlyUsedTimeRange('Last_30 days');
         await dashboardCustomizePanel.clickSaveButton();
         await PageObjects.dashboard.waitForRenderComplete();
@@ -56,7 +56,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       it('can remove a custom time range from a panel', async () => {
         await dashboardBadgeActions.clickTimeRangeBadgeAction();
-        await dashboardCustomizePanel.clickToggleShowCustomTimeRange();
+        await dashboardCustomizePanel.disableCustomTimeRange();
         await dashboardCustomizePanel.clickSaveButton();
         await PageObjects.dashboard.waitForRenderComplete();
         await dashboardBadgeActions.expectMissingTimeRangeBadgeAction();
@@ -68,8 +68,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       it('can add a custom time range to panel', async () => {
         await dashboardPanelActions.saveToLibrary('My by reference visualization');
         await dashboardPanelActions.customizePanel();
-        await dashboardCustomizePanel.clickToggleShowCustomTimeRange();
-        await dashboardCustomizePanel.clickToggleQuickMenuButton();
+        await dashboardCustomizePanel.enableCustomTimeRange();
+        await dashboardCustomizePanel.openDatePickerQuickMenu();
         await dashboardCustomizePanel.clickCommonlyUsedTimeRange('Last_30 days');
         await dashboardCustomizePanel.clickSaveButton();
         await PageObjects.dashboard.waitForRenderComplete();
@@ -80,7 +80,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       it('can remove a custom time range from a panel', async () => {
         await dashboardBadgeActions.clickTimeRangeBadgeAction();
-        await dashboardCustomizePanel.clickToggleShowCustomTimeRange();
+        await dashboardCustomizePanel.disableCustomTimeRange();
         await dashboardCustomizePanel.clickSaveButton();
         await PageObjects.dashboard.waitForRenderComplete();
         await dashboardBadgeActions.expectMissingTimeRangeBadgeAction();

x-pack/test/functional/apps/dashboard/group3/drilldowns/explore_data_panel_action.ts

@@ -46,7 +46,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await dashboard.gotoDashboardEditMode(drilldowns.DASHBOARD_WITH_PIE_CHART_NAME);
 
       await panelActions.customizePanel();
-      await dashboardCustomizePanel.clickToggleShowCustomTimeRange();
+      await dashboardCustomizePanel.disableCustomTimeRange();
       await dashboardCustomizePanel.clickSaveButton();
       await dashboard.saveDashboard('Dashboard with Pie Chart');
     });
@@ -80,8 +80,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await dashboard.gotoDashboardEditMode(drilldowns.DASHBOARD_WITH_PIE_CHART_NAME);
 
       await panelActions.customizePanel();
-      await dashboardCustomizePanel.clickToggleShowCustomTimeRange();
-      await dashboardCustomizePanel.clickToggleQuickMenuButton();
+      await dashboardCustomizePanel.enableCustomTimeRange();
+      await dashboardCustomizePanel.openDatePickerQuickMenu();
       await dashboardCustomizePanel.clickCommonlyUsedTimeRange('Last_90 days');
       await dashboardCustomizePanel.clickSaveButton();
 

x-pack/test/functional/apps/discover/saved_searches.ts

@@ -45,8 +45,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.common.unsetTime();
     });
 
-    // FLAKY: https://github.com/elastic/kibana/issues/104578
-    describe.skip('Customize time range', () => {
+    describe('Customize time range', () => {
       it('should be possible to customize time range for saved searches on dashboards', async () => {
         await PageObjects.common.navigateToApp('dashboard');
         await PageObjects.dashboard.clickNewDashboard();
@@ -55,8 +54,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         expect(await dataGrid.getDocCount()).to.be(500);
 
         await panelActions.customizePanel();
-        await dashboardCustomizePanel.clickToggleShowCustomTimeRange();
-        await dashboardCustomizePanel.clickToggleQuickMenuButton();
+        await dashboardCustomizePanel.enableCustomTimeRange();
+        await dashboardCustomizePanel.openDatePickerQuickMenu();
         await dashboardCustomizePanel.clickCommonlyUsedTimeRange('Last_90 days');
         await dashboardCustomizePanel.clickSaveButton();
 

x-pack/test/functional/apps/lens/open_in_lens/tsvb/dashboard.ts

@@ -42,8 +42,8 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       await dashboard.waitForRenderComplete();
       const originalEmbeddableCount = await canvas.getEmbeddableCount();
       await dashboardPanelActions.customizePanel();
-      await dashboardCustomizePanel.clickToggleShowCustomTimeRange();
-      await dashboardCustomizePanel.clickToggleQuickMenuButton();
+      await dashboardCustomizePanel.enableCustomTimeRange();
+      await dashboardCustomizePanel.openDatePickerQuickMenu();
       await dashboardCustomizePanel.clickCommonlyUsedTimeRange('Last_30 days');
       await dashboardCustomizePanel.clickSaveButton();
       await dashboard.waitForRenderComplete();
@@ -80,8 +80,8 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       await dashboard.waitForRenderComplete();
       const originalEmbeddableCount = await canvas.getEmbeddableCount();
       await dashboardPanelActions.customizePanel();
-      await dashboardCustomizePanel.clickToggleShowCustomTimeRange();
-      await dashboardCustomizePanel.clickToggleQuickMenuButton();
+      await dashboardCustomizePanel.enableCustomTimeRange();
+      await dashboardCustomizePanel.openDatePickerQuickMenu();
       await dashboardCustomizePanel.clickCommonlyUsedTimeRange('Last_30 days');
       await dashboardCustomizePanel.clickSaveButton();
       await dashboard.waitForRenderComplete();

x-pack/test/functional/apps/uptime/overview.ts

@@ -11,7 +11,7 @@ import { FtrProviderContext } from '../../ftr_provider_context';
 export const UPTIME_HEARTBEAT_DATA = 'x-pack/test/functional/es_archives/uptime/full_heartbeat';
 
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
-  const { uptime } = getPageObjects(['uptime']);
+  const { uptime, common } = getPageObjects(['uptime', 'common']);
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
 
@@ -104,7 +104,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       });
       await uptime.setMonitorListPageSize(50);
       // the pagination parameter should be cleared after a size change
-      await new Promise((resolve) => setTimeout(resolve, 1000));
+      await common.sleep(1000);
       await retry.try(async () => {
         await uptime.pageUrlContains('pagination', false);
       });

x-pack/test/functional/page_objects/navigational_search.ts

@@ -12,11 +12,10 @@ interface SearchResult {
   label: string;
 }
 
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
 export class NavigationalSearchPageObject extends FtrService {
   private readonly find = this.ctx.getService('find');
   private readonly testSubjects = this.ctx.getService('testSubjects');
+  private readonly common = this.ctx.getPageObject('common');
 
   async focus() {
     const field = await this.testSubjects.find('nav-search-input');
@@ -69,7 +68,7 @@ export class NavigationalSearchPageObject extends FtrService {
     // without heavy flakiness in this situation.
     // there is NO ui indication of any kind to detect when all the emissions are done,
     // so we are forced to fallback to awaiting a given amount of time once the first options are displayed.
-    await delay(waitUntil);
+    await this.common.sleep(waitUntil);
   }
 
   async getDisplayedResults() {
@@ -79,7 +78,7 @@ export class NavigationalSearchPageObject extends FtrService {
 
   async isNoResultsPlaceholderDisplayed(checkAfter: number = 3000) {
     // see comment in `waitForResultsLoaded`
-    await delay(checkAfter);
+    await this.common.sleep(checkAfter);
     return this.testSubjects.exists('nav-search-no-results');
   }
 

x-pack/test/functional/services/cases/single_case_view.ts

@@ -106,7 +106,7 @@ export function CasesSingleViewServiceProvider({ getService, getPageObject }: Ft
         '[data-test-subj="euiMarkdownEditorToolbarButton"][aria-label="Visualization"]'
       );
       await addVisualizationButton.moveMouseTo();
-      await new Promise((resolve) => setTimeout(resolve, 500)); // give tooltip time to open
+      await common.sleep(500); // give tooltip time to open
     },
 
     async assertCaseTitle(expectedTitle: string) {

x-pack/test/functional/services/data_stream.ts

@@ -8,15 +8,14 @@
 import type { MappingProperty } from '@elastic/elasticsearch/lib/api/types';
 import type { FtrProviderContext } from '../ftr_provider_context';
 
-const waitFor = (time: number = 1000) => new Promise((r) => setTimeout(r, time));
-
 /**
  * High level interface to operate with Elasticsearch data stream and TSDS.
  */
-export function DataStreamProvider({ getService }: FtrProviderContext) {
+export function DataStreamProvider({ getService, getPageObject }: FtrProviderContext) {
   const es = getService('es');
   const log = getService('log');
   const retry = getService('retry');
+  const common = getPageObject('common');
 
   const downsampleDefaultOptions = {
     isStream: true,
@@ -65,7 +64,7 @@ export function DataStreamProvider({ getService }: FtrProviderContext) {
             waitTime / 1000
           }s before running the downsampling to avoid a null_pointer_exception`
         );
-        await waitFor(waitTime);
+        await common.sleep(waitTime);
 
         try {
           log.info(`downsampling "${sourceIndex}" index...`);

x-pack/test/functional/services/infra_source_configuration_form.ts

@@ -8,10 +8,14 @@
 import { FtrProviderContext } from '../ftr_provider_context';
 import { WebElementWrapper } from '../../../../test/functional/services/lib/web_element_wrapper';
 
-export function InfraSourceConfigurationFormProvider({ getService }: FtrProviderContext) {
+export function InfraSourceConfigurationFormProvider({
+  getService,
+  getPageObject,
+}: FtrProviderContext) {
   const retry = getService('retry');
   const testSubjects = getService('testSubjects');
   const browser = getService('browser');
+  const common = getPageObject('common');
 
   return {
     /**
@@ -94,15 +98,15 @@ export function InfraSourceConfigurationFormProvider({ getService }: FtrProvider
       const movementDifference = destinationIndex - sourceIndex;
       await moveLogColumnHandle.pressKeys(browser.keys.SPACE);
       for (let i = 0; i < Math.abs(movementDifference); i++) {
-        await new Promise((res) => setTimeout(res, KEY_PRESS_DELAY_MS));
+        await common.sleep(KEY_PRESS_DELAY_MS);
         if (movementDifference > 0) {
           await moveLogColumnHandle.pressKeys(browser.keys.ARROW_DOWN);
         } else {
           await moveLogColumnHandle.pressKeys(browser.keys.ARROW_UP);
         }
       }
       await moveLogColumnHandle.pressKeys(browser.keys.SPACE);
-      await new Promise((res) => setTimeout(res, KEY_PRESS_DELAY_MS));
+      await common.sleep(KEY_PRESS_DELAY_MS);
     },
 
     /**

x-pack/test/functional/services/uptime/navigation.ts

@@ -32,7 +32,7 @@ export function UptimeNavigationProvider({ getService, getPageObjects }: FtrProv
   return {
     async refreshApp() {
       await browser.refresh();
-      await new Promise((resolve) => setTimeout(resolve, 1000));
+      await PageObjects.common.sleep(1000);
       await PageObjects.header.waitUntilLoadingHasFinished();
     },