From 06d9487978d9179a22ea8b44053040116d78aede Mon Sep 17 00:00:00 2001
From: Dominique Clarke <dominique.clarke@elastic.co>
Date: Tue, 19 Apr 2022 23:25:07 -0400
Subject: [PATCH] [Uptime] update monitor management tour content (#130601)
 (#130631)

* uptime - update monitor management tour content

* update tests

* update styling

* adjust tests

(cherry picked from commit 320df4b79aed93ad1b93c97077bbbfd2da0b4033)
---
 x-pack/plugins/uptime/e2e/journeys/utils.ts   |  2 +-
 .../plugins/uptime/e2e/page_objects/login.tsx |  2 +-
 .../common/header/manage_monitors_btn.tsx     | 57 ++++++++++++++-----
 .../service_allowed_wrapper.tsx               |  4 +-
 4 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/uptime/e2e/journeys/utils.ts b/x-pack/plugins/uptime/e2e/journeys/utils.ts
index d63d09332a019..2bd7219f5867b 100644
--- 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
index 116128d4fe7d1..ae52bb45ddb84 100644
--- 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
index 6c95025219c50..b316b7b871c2c 100644
--- 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,6 +27,11 @@ export const ManageMonitorsBtn = () => {
 
   const { isDev } = useUptimeSettingsContext();
 
+  const handleOnClick = () => {
+    setIsOpen(false);
+    history.push(MONITOR_MANAGEMENT_ROUTE + '/all');
+  };
+
   if (!cloud?.isCloudEnabled && !isDev) {
     return null;
   }
@@ -34,27 +39,35 @@ export const ManageMonitorsBtn = () => {
   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
index 1c129ce74d958..4869b28495183 100644
--- 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.",
   }
 );