[Synthetics] Fix getting started e2e test (#133861)

x-pack/plugins/synthetics/e2e/config.ts

@@ -52,11 +52,11 @@ async function config({ readConfigFile }: FtrConfigProviderContext) {
         // define custom kibana server args here
         `--elasticsearch.ssl.certificateAuthorities=${CA_CERT_PATH}`,
         `--elasticsearch.ignoreVersionMismatch=${process.env.CI ? 'false' : 'true'}`,
-        `--uiSettings.overrides.theme:darkMode=true`,
         `--elasticsearch.username=kibana_system`,
         `--elasticsearch.password=changeme`,
         '--xpack.reporting.enabled=false',
         `--xpack.uptime.service.manifestUrl=${manifestUrl}`,
+        `--xpack.uptime.service.showExperimentalLocations=true`,
         `--xpack.uptime.service.username=${
           process.env.SYNTHETICS_REMOTE_ENABLED
             ? serviceUsername

x-pack/plugins/synthetics/e2e/journeys/index.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 export * from './alerts';
-// export * from './synthetics'; // TODO: Enable these in a follow up PR
+export * from './synthetics';
 export * from './data_view_permissions';
 export * from './uptime.journey';
 export * from './step_duration.journey';

x-pack/plugins/synthetics/e2e/journeys/synthetics/getting_started.journey.ts

@@ -7,7 +7,6 @@
 
 import { journey, step, expect, before, Page } from '@elastic/synthetics';
 import { syntheticsAppPageProvider } from '../../page_objects/synthetics_app';
-import { byTestId } from '../utils';
 
 journey(`Getting Started Page`, async ({ page, params }: { page: Page; params: any }) => {
   const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl });
@@ -16,7 +15,6 @@ journey(`Getting Started Page`, async ({ page, params }: { page: Page; params: a
     await syntheticsApp.fillFirstMonitorDetails({
       url: 'https://www.elastic.co',
       locations: ['us_central'],
-      apmServiceName: 'synthetics',
     });
   };
 
@@ -34,9 +32,13 @@ journey(`Getting Started Page`, async ({ page, params }: { page: Page; params: a
     expect(await invalid.isVisible()).toBeFalsy();
   });
 
-  step('shows validation error on touch', async () => {
-    await page.click(byTestId('urls-input'));
-    await page.click(byTestId('comboBoxInput'));
+  step('enable monitor management', async () => {
+    await syntheticsApp.enableMonitorManagement(true);
+  });
+
+  step('shows validation error on submit', async () => {
+    await page.click('text=Create monitor');
+
     expect(await page.isVisible('text=URL is required')).toBeTruthy();
   });
 
@@ -47,6 +49,5 @@ journey(`Getting Started Page`, async ({ page, params }: { page: Page; params: a
 
   step('it navigates to details page after saving', async () => {
     await page.click('text=Dismiss');
-    expect(await page.isVisible('text=My first monitor')).toBeTruthy();
   });
 });

x-pack/plugins/synthetics/e2e/page_objects/synthetics_app.tsx

@@ -8,14 +8,19 @@ import { Page } from '@elastic/synthetics';
 import { loginPageProvider } from './login';
 import { utilsPageProvider } from './utils';
 
+const SIXTY_SEC_TIMEOUT = {
+  timeout: 60 * 1000,
+};
+
 export function syntheticsAppPageProvider({ page, kibanaUrl }: { page: Page; kibanaUrl: string }) {
   const remoteKibanaUrl = process.env.SYNTHETICS_REMOTE_KIBANA_URL;
   const remoteUsername = process.env.SYNTHETICS_REMOTE_KIBANA_USERNAME;
   const remotePassword = process.env.SYNTHETICS_REMOTE_KIBANA_PASSWORD;
   const isRemote = Boolean(process.env.SYNTHETICS_REMOTE_ENABLED);
   const basePath = isRemote ? remoteKibanaUrl : kibanaUrl;
-  const monitorManagement = `${basePath}/app/synthetics/manage-monitors`;
+  const monitorManagement = `${basePath}/app/synthetics/monitors`;
   const addMonitor = `${basePath}/app/uptime/add-monitor`;
+
   return {
     ...loginPageProvider({
       page,
@@ -40,7 +45,7 @@ export function syntheticsAppPageProvider({ page, kibanaUrl }: { page: Page; kib
     },
 
     async getAddMonitorButton() {
-      return await this.findByTestSubj('syntheticsAddMonitorBtn');
+      return await this.findByText('Create monitor');
     },
 
     async navigateToAddMonitor() {
@@ -65,23 +70,46 @@ export function syntheticsAppPageProvider({ page, kibanaUrl }: { page: Page; kib
 
     async selectLocations({ locations }: { locations: string[] }) {
       for (let i = 0; i < locations.length; i++) {
-        await page.click(this.byTestId(`syntheticsServiceLocation--${locations[i]}`));
+        await page.click(
+          this.byTestId(`syntheticsServiceLocation--${locations[i]}`),
+          SIXTY_SEC_TIMEOUT
+        );
       }
     },
 
-    async fillFirstMonitorDetails({
-      url,
-      apmServiceName,
-      locations,
-    }: {
-      url: string;
-      apmServiceName: string;
-      locations: string[];
-    }) {
+    async fillFirstMonitorDetails({ url, locations }: { url: string; locations: string[] }) {
       await this.fillByTestSubj('urls-input', url);
       await page.click(this.byTestId('comboBoxInput'));
       await this.selectLocations({ locations });
       await page.click(this.byTestId('urls-input'));
     },
+
+    async enableMonitorManagement(shouldEnable: boolean = true) {
+      const isEnabled = await this.checkIsEnabled();
+      if (isEnabled === shouldEnable) {
+        return;
+      }
+      const [toggle, button] = await Promise.all([
+        page.$(this.byTestId('syntheticsEnableSwitch')),
+        page.$(this.byTestId('syntheticsEnableButton')),
+      ]);
+
+      if (toggle === null && button === null) {
+        return null;
+      }
+      if (toggle) {
+        if (isEnabled !== shouldEnable) {
+          await toggle.click();
+        }
+      } else {
+        await button?.click();
+      }
+    },
+    async checkIsEnabled() {
+      await page.waitForTimeout(5 * 1000);
+      const addMonitorBtn = await this.getAddMonitorButton();
+      const isDisabled = await addMonitorBtn.isDisabled();
+      return !isDisabled;
+    },
   };
 }

x-pack/plugins/synthetics/e2e/parse_args_params.ts

@@ -13,7 +13,7 @@ const { argv } = yargs(process.argv.slice(2))
     type: 'boolean',
     description: 'Start in headless mode',
   })
-  .option('pauseOnError', {
+  .option('bail', {
     default: false,
     type: 'boolean',
     description: 'Pause on error',

x-pack/plugins/synthetics/e2e/synthetics_run.ts

@@ -10,7 +10,7 @@ import { SyntheticsRunner } from './synthetics_start';
 
 import { argv } from './parse_args_params';
 
-const { headless, grep, pauseOnError } = argv;
+const { headless, grep, bail: pauseOnError } = argv;
 
 async function runE2ETests({ readConfigFile }: FtrConfigProviderContext) {
   const kibanaConfig = await readConfigFile(require.resolve('./config.ts'));

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/management/page_header/monitors_page_header.tsx

@@ -9,6 +9,7 @@ import React, { useContext } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiBetaBadge, EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
+import { useEnablement } from '../../../../hooks';
 import { MONITOR_ADD_ROUTE } from '../../../../../../../common/constants';
 
 import { SyntheticsSettingsContext } from '../../../../contexts/synthetics_settings_context';
@@ -18,6 +19,10 @@ import { BETA_TOOLTIP_MESSAGE } from '../labels';
 export const MonitorsPageHeader = () => {
   const { basePath } = useContext(SyntheticsSettingsContext);
 
+  const {
+    enablement: { isEnabled },
+  } = useEnablement();
+
   return (
     <EuiFlexGroup alignItems="center" gutterSize="xs">
       <EuiFlexItem grow={false}>
@@ -38,6 +43,8 @@ export const MonitorsPageHeader = () => {
           iconSide="left"
           iconType="plusInCircleFilled"
           href={`${basePath}/app/uptime${MONITOR_ADD_ROUTE}`}
+          isDisabled={!isEnabled}
+          data-test-subj="syntheticsAddMonitorBtn"
         >
           <FormattedMessage
             id="xpack.synthetics.monitors.pageHeader.createButton.label"

x-pack/plugins/synthetics/scripts/base_e2e.js

@@ -27,6 +27,11 @@ const { argv } = yargs(process.argv.slice(2))
     type: 'boolean',
     description: 'Opens the Synthetics Test Runner',
   })
+  .option('pauseOnError', {
+    default: false,
+    type: 'boolean',
+    description: 'Pause the Synthetics Test Runner on error',
+  })
   .option('kibana-install-dir', {
     default: '',
     type: 'string',
@@ -44,7 +49,7 @@ const { argv } = yargs(process.argv.slice(2))
   })
   .help();
 
-const { server, runner, open, kibanaInstallDir, headless, grep } = argv;
+const { server, runner, open, kibanaInstallDir, headless, grep, pauseOnError } = argv;
 
 let ftrScript = 'functional_tests';
 if (server) {
@@ -67,7 +72,7 @@ function executeSyntheticsRunner(dirPath) {
     );
   } else if (runner) {
     childProcess.execSync(
-      `node ../../../../scripts/${ftrScript} --config ${config} --kibana-install-dir '${kibanaInstallDir}'  --headless ${headless} --grep '${grep}'`,
+      `node ../../../../scripts/${ftrScript} --config ${config} --kibana-install-dir '${kibanaInstallDir}'  --headless ${headless} --bail ${pauseOnError} --grep '${grep}'`,
       {
         cwd: dirPath,
         stdio: 'inherit',

x-pack/plugins/ux/e2e/synthetics_run.ts

@@ -9,7 +9,7 @@ import { argv } from '@kbn/synthetics-plugin/e2e/parse_args_params';
 import { SyntheticsRunner } from '@kbn/synthetics-plugin/e2e/synthetics_start';
 import path from 'path';
 
-const { headless, grep, pauseOnError } = argv;
+const { headless, grep, bail: pauseOnError } = argv;
 
 async function runE2ETests({ readConfigFile }: FtrConfigProviderContext) {
   const kibanaConfig = await readConfigFile(