[Security Solution][Endpoint][Admin] Adds instructional tooltip for m…

…alware custom user notification (#85651) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Dec 14, 2020 · 8279c2d · 8279c2d
1 parent 80ca5a5
commit 8279c2d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 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
@@ -293,16 +293,18 @@ 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"]'
         );
         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/...ecurity_solution/public/management/pages/policy/view/policy_forms/protections/malware.tsx b/...ecurity_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(