[7.x] [Security Solutions] Add tooltips (#73436) (#73627)

Co-authored-by: Christos Nasikas <christos.nasikas@elastic.co>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/index.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import React, { useCallback, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -204,14 +204,16 @@ const RulesPageComponent: React.FC = () => {
               </EuiFlexItem>
             )}
             <EuiFlexItem grow={false}>
-              <EuiButton
-                data-test-subj="open-value-lists-modal-button"
-                iconType="importAction"
-                isDisabled={userHasNoPermissions(canUserCRUD) || loading}
-                onClick={showValueListsModal}
-              >
-                {i18n.UPLOAD_VALUE_LISTS}
-              </EuiButton>
+              <EuiToolTip position="top" content={i18n.UPLOAD_VALUE_LISTS_TOOLTIP}>
+                <EuiButton
+                  data-test-subj="open-value-lists-modal-button"
+                  iconType="importAction"
+                  isDisabled={userHasNoPermissions(canUserCRUD) || loading}
+                  onClick={showValueListsModal}
+                >
+                  {i18n.UPLOAD_VALUE_LISTS}
+                </EuiButton>
+              </EuiToolTip>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiButton

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts

@@ -27,6 +27,14 @@ export const UPLOAD_VALUE_LISTS = i18n.translate(
   }
 );
 
+export const UPLOAD_VALUE_LISTS_TOOLTIP = i18n.translate(
+  'xpack.securitySolution.lists.detectionEngine.rules.uploadValueListsButtonTooltip',
+  {
+    defaultMessage:
+      'Use value lists to create an exception when a field value matches a value found in a list',
+  }
+);
+
 export const ADD_NEW_RULE = i18n.translate(
   'xpack.securitySolution.detectionEngine.rules.addNewRuleTitle',
   {

x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx

@@ -17,7 +17,7 @@ import {
   EuiOverlayMask,
   EuiToolTip,
 } from '@elastic/eui';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import uuid from 'uuid';
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
@@ -192,18 +192,28 @@ export const NewCase = React.memo<NewCaseProps>(
       timelineTitle,
     ]);
 
-    return (
-      <EuiButtonEmpty
-        data-test-subj="attach-timeline-case"
-        color={compact ? undefined : 'text'}
-        iconSide="left"
-        iconType="paperClip"
-        disabled={timelineStatus === TimelineStatus.draft}
-        onClick={handleClick}
-        size={compact ? 'xs' : undefined}
-      >
-        {buttonText}
-      </EuiButtonEmpty>
+    const button = useMemo(
+      () => (
+        <EuiButtonEmpty
+          data-test-subj="attach-timeline-case"
+          color={compact ? undefined : 'text'}
+          iconSide="left"
+          iconType="paperClip"
+          disabled={timelineStatus === TimelineStatus.draft}
+          onClick={handleClick}
+          size={compact ? 'xs' : undefined}
+        >
+          {buttonText}
+        </EuiButtonEmpty>
+      ),
+      [compact, timelineStatus, handleClick, buttonText]
+    );
+    return timelineStatus === TimelineStatus.draft ? (
+      <EuiToolTip position="left" content={i18n.ATTACH_TIMELINE_TO_CASE_TOOLTIP}>
+        {button}
+      </EuiToolTip>
+    ) : (
+      button
     );
   }
 );
@@ -225,8 +235,8 @@ export const ExistingCase = React.memo<ExistingCaseProps>(
       ? i18n.ATTACH_TO_EXISTING_CASE
       : i18n.ATTACH_TIMELINE_TO_EXISTING_CASE;
 
-    return (
-      <>
+    const button = useMemo(
+      () => (
         <EuiButtonEmpty
           data-test-subj="attach-timeline-existing-case"
           color={compact ? undefined : 'text'}
@@ -238,7 +248,15 @@ export const ExistingCase = React.memo<ExistingCaseProps>(
         >
           {buttonText}
         </EuiButtonEmpty>
-      </>
+      ),
+      [buttonText, handleClick, timelineStatus, compact]
+    );
+    return timelineStatus === TimelineStatus.draft ? (
+      <EuiToolTip position="left" content={i18n.ATTACH_TIMELINE_TO_CASE_TOOLTIP}>
+        {button}
+      </EuiToolTip>
+    ) : (
+      button
     );
   }
 );

x-pack/plugins/security_solution/public/timelines/components/timeline/properties/translations.ts

@@ -151,6 +151,13 @@ export const ATTACH_TO_EXISTING_CASE = i18n.translate(
   }
 );
 
+export const ATTACH_TIMELINE_TO_CASE_TOOLTIP = i18n.translate(
+  'xpack.securitySolution.timeline.properties.attachTimelineToCaseTooltip',
+  {
+    defaultMessage: 'Please provide a title for your timeline in order to attach it to a case',
+  }
+);
+
 export const STREAM_LIVE = i18n.translate(
   'xpack.securitySolution.timeline.properties.streamLiveButtonLabel',
   {