[Manage monitors] Added beta label (#129188)

Co-authored-by: Abdul Zahid <awahab07@yahoo.com>

x-pack/plugins/translations/translations/ja-JP.json

@@ -28910,7 +28910,6 @@
     "xpack.uptime.page_header.analyzeData.label": "［データの探索］ビューに移動して、合成/ユーザーデータを可視化",
     "xpack.uptime.page_header.defineConnector.popover.defaultLink": "デフォルトのコネクターを定義",
     "xpack.uptime.page_header.defineConnector.settingsLink": "設定",
-    "xpack.uptime.page_header.manageLink": "モニター管理",
     "xpack.uptime.page_header.manageLink.label": "アップタイムモニター管理ページに移動",
     "xpack.uptime.page_header.settingsLink": "設定",
     "xpack.uptime.page_header.settingsLink.label": "アップタイム設定ページに移動",

x-pack/plugins/translations/translations/zh-CN.json

@@ -28941,7 +28941,6 @@
     "xpack.uptime.page_header.analyzeData.label": "导航到“浏览数据”视图以可视化 Synthetics/用户数据",
     "xpack.uptime.page_header.defineConnector.popover.defaultLink": "定义默认连接器",
     "xpack.uptime.page_header.defineConnector.settingsLink": "设置",
-    "xpack.uptime.page_header.manageLink": "监测管理",
     "xpack.uptime.page_header.manageLink.label": "导航到 Uptime 监测管理页面",
     "xpack.uptime.page_header.settingsLink": "设置",
     "xpack.uptime.page_header.settingsLink.label": "导航到 Uptime 设置页面",

x-pack/plugins/uptime/e2e/journeys/monitor_details.journey.ts

@@ -15,7 +15,7 @@
 import { journey, step, expect, before, Page } from '@elastic/synthetics';
 import { monitorManagementPageProvider } from '../page_objects/monitor_management';
 
-journey('MontiorDetails', async ({ page, params }: { page: Page; params: any }) => {
+journey('MonitorDetails', async ({ page, params }: { page: Page; params: any }) => {
   const uptime = monitorManagementPageProvider({ page, kibanaUrl: params.kibanaUrl });
 
   before(async () => {

x-pack/plugins/uptime/public/apps/plugin.ts

@@ -50,6 +50,7 @@ import { LazySyntheticsCustomAssetsExtension } from '../components/fleet_package
 import { Start as InspectorPluginStart } from '../../../../../src/plugins/inspector/public';
 import { CasesUiStart } from '../../../cases/public';
 import { uptimeOverviewNavigatorParams } from './locators/overview';
+import { CloudSetup } from '../../../cloud/public';
 
 export interface ClientPluginsSetup {
   home?: HomePublicPluginSetup;
@@ -57,6 +58,7 @@ export interface ClientPluginsSetup {
   observability: ObservabilityPublicSetup;
   share: SharePluginSetup;
   triggersActionsUi: TriggersAndActionsUIPublicPluginSetup;
+  cloud?: CloudSetup;
 }
 
 export interface ClientPluginsStart {

x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx

@@ -16,14 +16,11 @@ import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'
 import { useUptimeSettingsContext } from '../../../contexts/uptime_settings_context';
 import { useGetUrlParams } from '../../../hooks';
 import { ToggleAlertFlyoutButton } from '../../overview/alerts/alerts_containers';
-import {
-  MONITOR_MANAGEMENT_ROUTE,
-  MONITOR_ROUTE,
-  SETTINGS_ROUTE,
-} from '../../../../common/constants';
+import { MONITOR_ROUTE, SETTINGS_ROUTE } from '../../../../common/constants';
 import { stringifyUrlParams } from '../../../lib/helper/stringify_url_params';
 import { InspectorHeaderLink } from './inspector_header_link';
 import { monitorStatusSelector } from '../../../state/selectors';
+import { ManageMonitorsBtn } from './manage_monitors_btn';
 
 const ADD_DATA_LABEL = i18n.translate('xpack.uptime.addDataButtonLabel', {
   defaultMessage: 'Add data',
@@ -76,21 +73,7 @@ export function ActionMenuContent(): React.ReactElement {
 
   return (
     <EuiHeaderLinks gutterSize="xs">
-      <EuiHeaderLink
-        aria-label={i18n.translate('xpack.uptime.page_header.manageLink.label', {
-          defaultMessage: 'Navigate to the Uptime Monitor Management page',
-        })}
-        color="text"
-        data-test-subj="management-page-link"
-        href={history.createHref({
-          pathname: MONITOR_MANAGEMENT_ROUTE + '/all',
-        })}
-      >
-        <FormattedMessage
-          id="xpack.uptime.page_header.manageLink"
-          defaultMessage="Monitor Management"
-        />
-      </EuiHeaderLink>
+      <ManageMonitorsBtn />
 
       <EuiHeaderLink
         aria-label={i18n.translate('xpack.uptime.page_header.settingsLink.label', {

x-pack/plugins/uptime/public/components/common/header/manage_monitors_btn.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiHeaderLink, EuiTourStep, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+
+import { MONITOR_MANAGEMENT_ROUTE } from '../../../../common/constants';
+import { PUBLIC_BETA_DESCRIPTION } from '../../../pages/monitor_management/service_allowed_wrapper';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+import { ClientPluginsSetup } from '../../../apps/plugin';
+import { useUptimeSettingsContext } from '../../../contexts/uptime_settings_context';
+
+export const ManageMonitorsBtn = () => {
+  const [isOpen, setIsOpen] = useLocalStorage('xpack.uptime.monitorManagement.openTour', true);
+
+  const history = useHistory();
+
+  const { cloud } = useKibana<ClientPluginsSetup>().services;
+
+  const { isDev } = useUptimeSettingsContext();
+
+  if (!cloud?.isCloudEnabled && !isDev) {
+    return null;
+  }
+
+  return (
+    <EuiTourStep
+      content={
+        <EuiText>
+          <p>{PUBLIC_BETA_DESCRIPTION}</p>
+        </EuiText>
+      }
+      isStepOpen={isOpen}
+      minWidth={300}
+      onFinish={() => setIsOpen(false)}
+      step={1}
+      stepsTotal={1}
+      title={MONITOR_MANAGEMENT_LABEL}
+      anchorPosition="upCenter"
+    >
+      <EuiHeaderLink
+        aria-label={i18n.translate('xpack.uptime.page_header.manageLink.label', {
+          defaultMessage: 'Navigate to the Uptime Monitor Management page',
+        })}
+        color="text"
+        data-test-subj="management-page-link"
+        href={history.createHref({
+          pathname: MONITOR_MANAGEMENT_ROUTE + '/all',
+        })}
+      >
+        <FormattedMessage
+          id="xpack.uptime.page_header.manageMonitors"
+          defaultMessage="Monitor Management"
+        />
+      </EuiHeaderLink>
+    </EuiTourStep>
+  );
+};
+
+const MONITOR_MANAGEMENT_LABEL = i18n.translate('xpack.uptime.monitorManagement.try.label', {
+  defaultMessage: 'Try Monitor Management',
+});

x-pack/plugins/uptime/public/components/monitor_management/add_monitor_btn.tsx

@@ -194,7 +194,7 @@ const SYNTHETICS_DISABLE_TOOL_TIP_MESSAGE = i18n.translate(
   'xpack.uptime.monitorManagement.syntheticsDisableToolTip',
   {
     defaultMessage:
-      'Disabling Monitor Management with immediately stop the execution of monitors in all test locations and prevent the creation of new monitors.',
+      'Disabling Monitor Management will immediately stop the execution of monitors in all test locations and prevent the creation of new monitors.',
   }
 );
 

x-pack/plugins/uptime/public/pages/monitor_management/service_allowed_wrapper.test.tsx

@@ -63,7 +63,7 @@ describe('ServiceAllowedWrapper', () => {
         </ServiceAllowedWrapper>
       );
 
-      expect(await findByText('Monitor management')).toBeInTheDocument();
+      expect(await findByText('Monitor Management')).toBeInTheDocument();
       expect(forNearestAnchor(getByText)('Request access')).toBeEnabled();
       expect(forNearestAnchor(getByText)('Request access')).toHaveAttribute(
         'href',
@@ -82,7 +82,7 @@ describe('ServiceAllowedWrapper', () => {
         </ServiceAllowedWrapper>
       );
 
-      expect(await findByText('Monitor management')).toBeInTheDocument();
+      expect(await findByText('Monitor Management')).toBeInTheDocument();
       expect(forNearestButton(getByText)('Request access')).toBeDisabled();
     });
 
@@ -97,7 +97,7 @@ describe('ServiceAllowedWrapper', () => {
         </ServiceAllowedWrapper>
       );
 
-      expect(await findByText('Monitor management')).toBeInTheDocument();
+      expect(await findByText('Monitor Management')).toBeInTheDocument();
     });
   });
 });

x-pack/plugins/uptime/public/pages/monitor_management/service_allowed_wrapper.tsx

@@ -44,8 +44,8 @@ const REQUEST_ACCESS_LABEL = i18n.translate('xpack.uptime.monitorManagement.requ
   defaultMessage: 'Request access',
 });
 
-const MONITOR_MANAGEMENT_LABEL = i18n.translate('xpack.uptime.monitorManagement.label', {
-  defaultMessage: 'Monitor management',
+export const MONITOR_MANAGEMENT_LABEL = i18n.translate('xpack.uptime.monitorManagement.label', {
+  defaultMessage: 'Monitor Management',
 });
 
 const LOADING_MONITOR_MANAGEMENT_LABEL = i18n.translate(
@@ -55,12 +55,12 @@ const LOADING_MONITOR_MANAGEMENT_LABEL = i18n.translate(
   }
 );
 
-const PUBLIC_BETA_DESCRIPTION = i18n.translate(
+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.",
+      "run on Elastic's managed Synthetics service nodes.",
   }
 );

x-pack/plugins/uptime/public/routes.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { FC, useEffect } from 'react';
-import { EuiPageTemplateProps } from '@elastic/eui';
+import { EuiPageTemplateProps, EuiBetaBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { Route, Switch } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
@@ -235,7 +235,7 @@ const getRoutes = (): RouteProps[] => {
     },
     {
       title: i18n.translate('xpack.uptime.monitorManagementRoute.title', {
-        defaultMessage: 'Manage Monitors | {baseTitle}',
+        defaultMessage: 'Monitor Management | {baseTitle}',
         values: { baseTitle },
       }),
       path: MONITOR_MANAGEMENT_ROUTE + '/:type',
@@ -248,10 +248,22 @@ const getRoutes = (): RouteProps[] => {
       telemetryId: UptimePage.MonitorManagement,
       pageHeader: {
         pageTitle: (
-          <FormattedMessage
-            id="xpack.uptime.monitorManagement.pageHeader.title"
-            defaultMessage="Manage monitors"
-          />
+          <EuiFlexGroup alignItems="center" gutterSize="xs">
+            <EuiFlexItem grow={false}>
+              <FormattedMessage
+                id="xpack.uptime.monitorManagement.pageHeader.title"
+                defaultMessage="Monitor Management"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiBetaBadge
+                label="Beta"
+                tooltipContent={i18n.translate('xpack.uptime.routes.monitorManagement.betaLabel', {
+                  defaultMessage: 'This module is not GA. Please help us by reporting any bugs.',
+                })}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
         ),
         rightSideItems: [<AddMonitorBtn />],
       },