From 7d644d0b6e4c3753144e489e371481083f33e771 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Tue, 28 Jul 2020 15:16:05 +0300 Subject: [PATCH 1/2] Add tooltips --- .../pages/detection_engine/rules/index.tsx | 20 +++++++------ .../detection_engine/rules/translations.ts | 8 ++++++ .../timeline/properties/helpers.tsx | 28 ++++++++++--------- .../timeline/properties/translations.ts | 7 +++++ 4 files changed, 41 insertions(+), 22 deletions(-) diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/index.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/index.tsx index f49ee8246024a..b6f58ef7045f8 100644 --- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/index.tsx +++ b/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 = () => { )} - - {i18n.UPLOAD_VALUE_LISTS} - + + + {i18n.UPLOAD_VALUE_LISTS} + + ( ]); return ( - - {buttonText} - + + + {buttonText} + + ); } ); @@ -226,7 +228,7 @@ export const ExistingCase = React.memo( : i18n.ATTACH_TIMELINE_TO_EXISTING_CASE; return ( - <> + ( > {buttonText} - + ); } ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/translations.ts index 34681d5ed6809..c7c261b24ecb9 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/translations.ts +++ b/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', { From 62983f1b74c1a8d5044871cdad914fbf85d66104 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Tue, 28 Jul 2020 21:09:34 +0300 Subject: [PATCH 2/2] Hide tooltip when actions are active --- .../detection_engine/rules/translations.ts | 2 +- .../timeline/properties/helpers.tsx | 26 +++++++++++++++---- .../timeline/properties/translations.ts | 2 +- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts index 4db38729e6a10..b20c8de8ed58b 100644 --- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts +++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts @@ -31,7 +31,7 @@ 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.', + 'Use value lists to create an exception when a field value matches a value found in a list', } ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx index 9a987c131ee4b..86334308558b8 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx +++ b/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,8 +192,8 @@ export const NewCase = React.memo( timelineTitle, ]); - return ( - + const button = useMemo( + () => ( ( > {buttonText} + ), + [compact, timelineStatus, handleClick, buttonText] + ); + return timelineStatus === TimelineStatus.draft ? ( + + {button} + ) : ( + button ); } ); @@ -227,8 +235,8 @@ export const ExistingCase = React.memo( ? i18n.ATTACH_TO_EXISTING_CASE : i18n.ATTACH_TIMELINE_TO_EXISTING_CASE; - return ( - + const button = useMemo( + () => ( ( > {buttonText} + ), + [buttonText, handleClick, timelineStatus, compact] + ); + return timelineStatus === TimelineStatus.draft ? ( + + {button} + ) : ( + button ); } ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/translations.ts index c7c261b24ecb9..1fc3b7b00f847 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/translations.ts +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/translations.ts @@ -154,7 +154,7 @@ 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.', + defaultMessage: 'Please provide a title for your timeline in order to attach it to a case', } );