[Uptime] Add callout for synthetics UI

x-pack/plugins/uptime/public/components/overview/synthetics_callout.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiButton, EuiCallOut, EuiSpacer } from '@elastic/eui';
+import React, { useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+const SYNTHETICS_CALLOUT_LS_KEY = 'xpack.uptime.syntheticsCallout.display';
+const shouldShowSyntheticsCallout = () => {
+  let value = localStorage.getItem(SYNTHETICS_CALLOUT_LS_KEY);
+  if (value === null) {
+    localStorage.setItem(SYNTHETICS_CALLOUT_LS_KEY, 'true');
+    value = 'true';
+  }
+  return value === 'true';
+};
+const hideSyntheticsCallout = () => localStorage.setItem(SYNTHETICS_CALLOUT_LS_KEY, 'false');
+
+export const SyntheticsCallout = () => {
+  const [shouldShow, setShouldShow] = useState<boolean>(shouldShowSyntheticsCallout());
+  if (!shouldShow) {
+    return null;
+  }
+  return (
+    <>
+      <EuiCallOut
+        title={i18n.translate('xpack.uptime.overview.pageHeader.syntheticsCallout.title', {
+          defaultMessage: 'Elastic Synthetics',
+        })}
+        iconType="beaker"
+      >
+        <p>
+          <FormattedMessage
+            id="xpack.uptime.overview.pageHeader.syntheticsCallout.content"
+            defaultMessage="Elastic Uptime now supports synthetic browser monitors! Learn how to use them {here}."
+            values={{ here: <a href="https://elastic.co/synthetics">here</a> }}
+          />
+        </p>
+        <EuiButton
+          onClick={() => {
+            if (shouldShow) {
+              hideSyntheticsCallout();
+              setShouldShow(false);
+            }
+          }}
+        >
+          <FormattedMessage
+            id="xpack.uptime.overview.pageHeader.syntheticsCallout.dismissButtonText"
+            defaultMessage="Dismiss"
+          />
+        </EuiButton>
+      </EuiCallOut>
+      <EuiSpacer size="s" />
+    </>
+  );
+};

x-pack/plugins/uptime/public/pages/page_header.tsx

@@ -5,14 +5,15 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer, EuiButtonEmpty } from '@elastic/eui';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 import { UptimeDatePicker } from '../components/common/uptime_date_picker';
 import { SETTINGS_ROUTE } from '../../common/constants';
 import { ToggleAlertFlyoutButton } from '../components/overview/alerts/alerts_containers';
 import { useKibana } from '../../../../../src/plugins/kibana_react/public';
 import { ReactRouterEuiButtonEmpty } from '../components/common/react_router_helpers';
+import { SyntheticsCallout } from '../components/overview/synthetics_callout';
 
 interface PageHeaderProps {
   headingText: string | JSX.Element;
@@ -83,6 +84,7 @@ export const PageHeader = React.memo(
 
     return (
       <>
+        <SyntheticsCallout />
         <EuiFlexGroup
           alignItems="center"
           justifyContent="spaceBetween"