From 4b33115892fa583782c627e73b7617fd91e45605 Mon Sep 17 00:00:00 2001
From: Dominique Clarke <doclarke71@gmail.com>
Date: Tue, 14 Sep 2021 11:42:08 -0400
Subject: [PATCH] [Uptime][Synthetics Integration] add browser callout
 (#108935)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: shahzad31 <shahzad31comp@gmail.com>
---
 .../fleet_package/custom_fields.test.tsx      |  5 ++++
 .../fleet_package/custom_fields.tsx           | 30 +++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.test.tsx b/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.test.tsx
index 5bcd235b9b60e..3a13be1aa3f68 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.test.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.test.tsx
@@ -203,6 +203,11 @@ describe('<CustomFields />', () => {
     getAllByLabelText('Zip URL').forEach((node) => {
       expect(node).toBeInTheDocument();
     });
+    expect(
+      getByText(
+        /To create a "Browser" monitor, please ensure you are using the elastic-agent-complete Docker container, which contains the dependencies to run these mon/
+      )
+    ).toBeInTheDocument();
 
     // ensure at least one browser advanced option is present
     advancedOptionsButton = getByText('Advanced Browser options');
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.tsx b/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.tsx
index 87f7a98aa4a6f..d641df9c44c5f 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.tsx
@@ -15,6 +15,8 @@ import {
   EuiSpacer,
   EuiDescribedFormGroup,
   EuiCheckbox,
+  EuiCallOut,
+  EuiLink,
 } from '@elastic/eui';
 import { ConfigKeys, DataStream, Validation } from './types';
 import { useMonitorTypeContext } from './contexts';
@@ -122,6 +124,34 @@ export const CustomFields = memo<Props>(
                   />
                 </EuiFormRow>
               )}
+              <EuiSpacer size="s" />
+              {isBrowser && (
+                <EuiCallOut
+                  title={
+                    <FormattedMessage
+                      id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorType.browser.warning.description"
+                      defaultMessage='To create a "Browser" monitor, please ensure you are using the elastic-agent-complete Docker container, which contains the dependencies to run these monitors. For more information, please visit our {link}.'
+                      values={{
+                        link: (
+                          <EuiLink
+                            target="_blank"
+                            href="https://www.elastic.co/guide/en/observability/current/synthetics-quickstart-fleet.html"
+                            external
+                          >
+                            <FormattedMessage
+                              id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorType.browser.warning.link"
+                              defaultMessage="synthetics documentation"
+                            />
+                          </EuiLink>
+                        ),
+                      }}
+                    />
+                  }
+                  iconType="help"
+                  size="s"
+                />
+              )}
+              <EuiSpacer size="s" />
               {renderSimpleFields(monitorType)}
             </EuiFlexItem>
           </EuiFlexGroup>