From 8279c2d1a2979d13cf2a9f5455327287d1b1a0b7 Mon Sep 17 00:00:00 2001
From: Candace Park <56409205+parkiino@users.noreply.github.com>
Date: Mon, 14 Dec 2020 14:27:58 -0500
Subject: [PATCH] [Security Solution][Endpoint][Admin] Adds instructional
 tooltip for malware custom user notification (#85651)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../pages/policy/view/policy_details.test.tsx |  8 +++-
 .../view/policy_forms/protections/malware.tsx | 40 +++++++++++++++----
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx
index bfa592b1f9c8e..e9c13b23834b1 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx
@@ -293,7 +293,7 @@ describe('Policy Details', () => {
         policyView = render(<PolicyDetails />);
       });
 
-      it('malware popup and message customization options are shown', () => {
+      it('malware popup, message customization options and tooltip are shown', () => {
         // use query for finding stuff, if it doesn't find it, just returns null
         const userNotificationCheckbox = policyView.find(
           'EuiCheckbox[data-test-subj="malwareUserNotificationCheckbox"]'
@@ -301,8 +301,10 @@ describe('Policy Details', () => {
         const userNotificationCustomMessageTextArea = policyView.find(
           'EuiTextArea[data-test-subj="malwareUserNotificationCustomMessage"]'
         );
+        const tooltip = policyView.find('EuiIconTip');
         expect(userNotificationCheckbox).toHaveLength(1);
         expect(userNotificationCustomMessageTextArea).toHaveLength(1);
+        expect(tooltip).toHaveLength(1);
       });
     });
     describe('when the subscription tier is gold or lower', () => {
@@ -311,15 +313,17 @@ describe('Policy Details', () => {
         policyView = render(<PolicyDetails />);
       });
 
-      it('malware popup and message customization options are hidden', () => {
+      it('malware popup, message customization options, and tooltip are hidden', () => {
         const userNotificationCheckbox = policyView.find(
           'EuiCheckbox[data-test-subj="malwareUserNotificationCheckbox"]'
         );
         const userNotificationCustomMessageTextArea = policyView.find(
           'EuiTextArea[data-test-subj="malwareUserNotificationCustomMessage"]'
         );
+        const tooltip = policyView.find('EuiIconTip');
         expect(userNotificationCheckbox).toHaveLength(0);
         expect(userNotificationCustomMessageTextArea).toHaveLength(0);
+        expect(tooltip).toHaveLength(0);
       });
     });
   });
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/malware.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/malware.tsx
index 330a0ba407453..d611c4102e8f8 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/malware.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/malware.tsx
@@ -18,6 +18,9 @@ import {
   EuiText,
   EuiTextArea,
   htmlIdGenerator,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIconTip,
 } from '@elastic/eui';
 import { cloneDeep } from 'lodash';
 import { APP_ID } from '../../../../../../../common/constants';
@@ -252,14 +255,37 @@ export const MalwareProtections = React.memo(() => {
         {isPlatinumPlus && userNotificationSelected && (
           <>
             <EuiSpacer size="s" />
-            <EuiText size="xs">
-              <h4>
-                <FormattedMessage
-                  id="xpack.securitySolution.endpoint.policyDetailsConfig.customizeUserNotification"
-                  defaultMessage="Customize notification message"
+            <EuiFlexGroup gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <EuiText size="xs">
+                  <h4>
+                    <FormattedMessage
+                      id="xpack.securitySolution.endpoint.policyDetailsConfig.customizeUserNotification"
+                      defaultMessage="Customize notification message"
+                    />
+                  </h4>
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiIconTip
+                  position="right"
+                  content={
+                    <>
+                      <FormattedMessage
+                        id="xpack.securitySolution.endpoint.policyDetailsConfig.customizeUserNotification.tooltip.a"
+                        defaultMessage="Selecting the user notification option will display a notification to the host user when malware is prevented or detected."
+                      />
+                      <EuiSpacer size="m" />
+                      <FormattedMessage
+                        id="xpack.securitySolution.endpoint.policyDetailsConfig.customizeUserNotification.tooltip.b"
+                        defaultMessage="
+                    The user notification can be customized in the text box below. Bracketed tags can be used to dynamically populate the applicable action (such as prevented or detected) and the filename."
+                      />
+                    </>
+                  }
                 />
-              </h4>
-            </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
             <EuiSpacer size="xs" />
             <EuiTextArea
               placeholder={i18n.translate(