[Uptime] update monitor management tour content (#130601) (#130631)

* uptime - update monitor management tour content * update tests * update styling * adjust tests (cherry picked from commit 320df4b)
elastic · Apr 20, 2022 · 06d9487 · 06d9487
1 parent 78e8dbc
commit 06d9487
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 18 deletions.
diff --git a/x-pack/plugins/uptime/e2e/journeys/utils.ts b/x-pack/plugins/uptime/e2e/journeys/utils.ts
@@ -31,7 +31,7 @@ export async function loginToKibana({
 
   await waitForLoadingToFinish({ page });
   // Close Monitor Management tour added in 8.2.0
-  await page.click('text=Close tour');
+  await page.click('[data-test-subj=syntheticsManagementTourDismiss]');
 }
 
 export const byTestId = (testId: string) => {

diff --git a/x-pack/plugins/uptime/e2e/page_objects/login.tsx b/x-pack/plugins/uptime/e2e/page_objects/login.tsx
@@ -38,7 +38,7 @@ export function loginPageProvider({
       await this.waitForLoadingToFinish();
       // Close Monitor Management tour added in 8.2.0
       try {
-        await page.click('text=Close tour');
+        await page.click('[data-test-subj=syntheticsManagementTourDismiss]');
       } catch (e) {
         return;
       }

diff --git a/x-pack/plugins/uptime/public/components/common/header/manage_monitors_btn.tsx b/x-pack/plugins/uptime/public/components/common/header/manage_monitors_btn.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiHeaderLink, EuiTourStep, EuiText } from '@elastic/eui';
+import { EuiButton, EuiHeaderLink, EuiLink, EuiSpacer, EuiTourStep, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
@@ -27,34 +27,47 @@ export const ManageMonitorsBtn = () => {
 
   const { isDev } = useUptimeSettingsContext();
 
+  const handleOnClick = () => {
+    setIsOpen(false);
+    history.push(MONITOR_MANAGEMENT_ROUTE + '/all');
+  };
+
   if (!cloud?.isCloudEnabled && !isDev) {
     return null;
   }
 
   return (
     <EuiTourStep
       content={
-        <EuiText>
-          <p>{PUBLIC_BETA_DESCRIPTION}</p>
-        </EuiText>
+        <>
+          <EuiText size="s">
+            <p>{PUBLIC_BETA_DESCRIPTION}</p>
+          </EuiText>
+          <EuiSpacer />
+          <EuiButton color="primary" fill onClick={handleOnClick}>
+            {MONITOR_MANAGEMENT_LABEL}
+          </EuiButton>
+        </>
       }
       isStepOpen={isOpen}
-      minWidth={300}
       onFinish={() => setIsOpen(false)}
       step={1}
       stepsTotal={1}
-      title={MONITOR_MANAGEMENT_LABEL}
+      subtitle={NEW_LABEL}
+      title={GETTING_STARTED_LABEL}
       anchorPosition="upCenter"
+      maxWidth={416}
+      footerAction={
+        <EuiLink data-test-subj="syntheticsManagementTourDismiss" onClick={() => setIsOpen(false)}>
+          {DISMISS_LABEL}
+        </EuiLink>
+      }
     >
       <EuiHeaderLink
-        aria-label={i18n.translate('xpack.uptime.page_header.manageLink.label', {
-          defaultMessage: 'Navigate to the Uptime Monitor Management page',
-        })}
+        aria-label={NAVIGATE_LABEL}
         color="text"
-        data-test-subj="management-page-link"
-        href={history.createHref({
-          pathname: MONITOR_MANAGEMENT_ROUTE + '/all',
-        })}
+        data-test-subj="syntheticsManagementPageLink"
+        onClick={handleOnClick}
       >
         <FormattedMessage
           id="xpack.uptime.page_header.manageMonitors"
@@ -65,6 +78,24 @@ export const ManageMonitorsBtn = () => {
   );
 };
 
+const GETTING_STARTED_LABEL = i18n.translate(
+  'xpack.uptime.monitorManagement.gettingStarted.label',
+  {
+    defaultMessage: 'Get started with Synthetic Monitoring',
+  }
+);
+
 const MONITOR_MANAGEMENT_LABEL = i18n.translate('xpack.uptime.monitorManagement.try.label', {
   defaultMessage: 'Try Monitor Management',
 });
+const DISMISS_LABEL = i18n.translate('xpack.uptime.monitorManagement.try.dismiss', {
+  defaultMessage: 'Dismiss',
+});
+
+const NAVIGATE_LABEL = i18n.translate('xpack.uptime.page_header.manageLink.label', {
+  defaultMessage: 'Navigate to the Uptime Monitor Management page',
+});
+
+const NEW_LABEL = i18n.translate('xpack.uptime.monitorManagement.new.label', {
+  defaultMessage: 'New',
+});
diff --git a/x-pack/plugins/uptime/public/pages/monitor_management/service_allowed_wrapper.tsx b/x-pack/plugins/uptime/public/pages/monitor_management/service_allowed_wrapper.tsx
@@ -59,8 +59,6 @@ export const PUBLIC_BETA_DESCRIPTION = i18n.translate(
   'xpack.uptime.monitorManagement.publicBetaDescription',
   {
     defaultMessage:
-      'Monitor management is available only for selected public beta users. With public\n' +
-      'beta access, you will be able to add HTTP, TCP, ICMP and Browser checks which will\n' +
-      "run on Elastic's managed Synthetics service nodes.",
+      "We've got a brand new app on the way. In the meantime, we're excited to give you early access to our globally managed testing infrastructure. This will allow you to upload synthetic monitors using our new point and click script recorder and manage your monitors with a new UI.",
   }
 );