From 44682694a7514f1431c769f11e32d854b8de44cc Mon Sep 17 00:00:00 2001 From: Vitalii Dmyterko Date: Wed, 6 Jul 2022 17:11:59 +0100 Subject: [PATCH 1/6] initial commit --- .../components/rules/pick_timeline/index.tsx | 3 +++ .../all/bulk_actions/forms/timeline_template_form.tsx | 1 + .../rules/all/bulk_actions/translations.tsx | 7 +++++++ .../components/timeline/search_super_select/index.tsx | 11 ++++++++--- .../components/timeline/selectable_timeline/index.tsx | 6 ++++-- 5 files changed, 23 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/pick_timeline/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/pick_timeline/index.tsx index b1d1df13e4a743..9c0daa440d38ec 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/pick_timeline/index.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/pick_timeline/index.tsx @@ -21,6 +21,7 @@ interface QueryBarDefineRuleProps { field: FieldHook; idAria: string; isDisabled: boolean; + placeholder?: string; } export const PickTimeline = ({ @@ -28,6 +29,7 @@ export const PickTimeline = ({ field, idAria, isDisabled = false, + placeholder, }: QueryBarDefineRuleProps) => { const [timelineId, setTimelineId] = useState(null); const [timelineTitle, setTimelineTitle] = useState(null); @@ -69,6 +71,7 @@ export const PickTimeline = ({ timelineId={timelineId} timelineTitle={timelineTitle} onTimelineChange={handleOnTimelineChange} + placeholder={placeholder} /> ); diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/forms/timeline_template_form.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/forms/timeline_template_form.tsx index 8e67b2711a278a..e0e4829ce1845a 100644 --- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/forms/timeline_template_form.tsx +++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/forms/timeline_template_form.tsx @@ -92,6 +92,7 @@ const TimelineTemplateFormComponent = (props: TimelineTemplateFormProps) => { componentProps={{ idAria: 'bulkEditRulesTimelineTemplateSelector', dataTestSubj: 'bulkEditRulesTimelineTemplateSelector', + placeholder: i18n.TEMPLATE_SELECTOR_PLACEHOLDER, }} /> diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/translations.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/translations.tsx index 3908c890b1f891..fcdac49675ef14 100644 --- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/translations.tsx +++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/translations.tsx @@ -32,6 +32,13 @@ export const bulkApplyTimelineTemplate = { } ), + TEMPLATE_SELECTOR_PLACEHOLDER: i18n.translate( + 'xpack.securitySolution.detectionEngine.rules.allRules.bulkActions.edit.applyTimelineTemplate.templateSelectorPlaceholder', + { + defaultMessage: 'Search Timeline templates', + } + ), + TEMPLATE_SELECTOR_DEFAULT_VALUE: i18n.translate( 'xpack.securitySolution.detectionEngine.rules.allRules.bulkActions.edit.applyTimelineTemplate.templateSelectorDefaultValue', { diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/search_super_select/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/search_super_select/index.tsx index af7ff36473fd79..dcf9970a75365e 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/search_super_select/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/search_super_select/index.tsx @@ -25,11 +25,11 @@ const StyledEuiFieldText = styled(EuiFieldText)` // To match EuiFieldText focus state &:focus { - background-color: #fff; + background-color: ${({ theme }) => theme.eui.euiFormBackgroundColor}; background-image: linear-gradient( to top, - #006bb4, - #006bb4 2px, + ${({ theme }) => theme.eui.euiFocusRingColor}, + ${({ theme }) => theme.eui.euiFocusRingColor} 2px, transparent 2px, transparent 100% ); @@ -49,6 +49,7 @@ interface SearchTimelineSuperSelectProps { timelineId: string | null; timelineTitle: string | null; timelineType?: TimelineTypeLiteral; + placeholder?: string; onTimelineChange: (timelineTitle: string, timelineId: string | null) => void; } @@ -70,6 +71,7 @@ const SearchTimelineSuperSelectComponent: React.FC { const [isPopoverOpen, setIsPopoverOpen] = useState(false); @@ -78,6 +80,7 @@ const SearchTimelineSuperSelectComponent: React.FC { + console.log('>>>>>>'); setIsPopoverOpen(true); }, []); @@ -87,6 +90,7 @@ const SearchTimelineSuperSelectComponent: React.FC @@ -132,6 +136,7 @@ const SearchTimelineSuperSelectComponent: React.FC ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx index 0d7d9892a9e5e4..8c02fde9bf6c2d 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx @@ -80,6 +80,7 @@ export interface SelectableTimelineProps { graphEventId?: string ) => void; timelineType: TimelineTypeLiteral; + placeholder?: string; } const SelectableTimelineComponent: React.FC = ({ @@ -88,6 +89,7 @@ const SelectableTimelineComponent: React.FC = ({ onClosePopover, onTimelineChange, timelineType, + placeholder, }) => { const [pageSize, setPageSize] = useState(ORIGINAL_PAGE_SIZE); const [heightTrigger, setHeightTrigger] = useState(0); @@ -211,7 +213,7 @@ const SelectableTimelineComponent: React.FC = ({ const searchProps: EuiSelectableProps['searchProps'] = useMemo( () => ({ 'data-test-subj': 'timeline-super-select-search-box', - placeholder: i18n.SEARCH_BOX_TIMELINE_PLACEHOLDER(timelineType), + placeholder: placeholder ?? i18n.SEARCH_BOX_TIMELINE_PLACEHOLDER(timelineType), onSearch: onSearchTimeline, incremental: true, append: ( @@ -224,7 +226,7 @@ const SelectableTimelineComponent: React.FC = ({ ), }), - [handleOnToggleOnlyFavorites, onSearchTimeline, onlyFavorites, timelineType] + [handleOnToggleOnlyFavorites, onSearchTimeline, onlyFavorites, timelineType, placeholder] ); const listProps: EuiSelectableProps['listProps'] = useMemo( From e23274ab50fe4ee80bfbdf140bf5f8519cd93563 Mon Sep 17 00:00:00 2001 From: Vitalii Dmyterko Date: Wed, 6 Jul 2022 17:15:03 +0100 Subject: [PATCH 2/6] cleanup --- .../timelines/components/timeline/search_super_select/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/search_super_select/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/search_super_select/index.tsx index dcf9970a75365e..b179ca9e35aebf 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/search_super_select/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/search_super_select/index.tsx @@ -80,7 +80,6 @@ const SearchTimelineSuperSelectComponent: React.FC { - console.log('>>>>>>'); setIsPopoverOpen(true); }, []); From 03bb6f10f4158de5b235c9e4618b4515b2680a96 Mon Sep 17 00:00:00 2001 From: Vitalii Dmyterko Date: Wed, 6 Jul 2022 17:36:52 +0100 Subject: [PATCH 3/6] fix reponsive issue --- .../timelines/components/timeline/selectable_timeline/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx index 8c02fde9bf6c2d..21998344e30379 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx @@ -155,7 +155,7 @@ const SelectableTimelineComponent: React.FC = ({ - + {title} From 2ea634b1631b3b81ac3b4af07424d70a8cdddb1e Mon Sep 17 00:00:00 2001 From: Vitalii Dmyterko <92328789+vitaliidm@users.noreply.github.com> Date: Fri, 8 Jul 2022 17:02:46 +0100 Subject: [PATCH 4/6] Update translations.tsx --- .../detection_engine/rules/all/bulk_actions/translations.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/translations.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/translations.tsx index fcdac49675ef14..44d314862edde3 100644 --- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/translations.tsx +++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/translations.tsx @@ -35,7 +35,7 @@ export const bulkApplyTimelineTemplate = { TEMPLATE_SELECTOR_PLACEHOLDER: i18n.translate( 'xpack.securitySolution.detectionEngine.rules.allRules.bulkActions.edit.applyTimelineTemplate.templateSelectorPlaceholder', { - defaultMessage: 'Search Timeline templates', + defaultMessage: 'Enter Timeline template', } ), From c1b6b5962bac720ce2e4e5d20a7dec9f315bd779 Mon Sep 17 00:00:00 2001 From: Vitalii Dmyterko <92328789+vitaliidm@users.noreply.github.com> Date: Mon, 11 Jul 2022 18:16:50 +0100 Subject: [PATCH 5/6] Update translations.tsx --- .../detection_engine/rules/all/bulk_actions/translations.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/translations.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/translations.tsx index 44d314862edde3..cce2d3e032a831 100644 --- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/translations.tsx +++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/bulk_actions/translations.tsx @@ -35,7 +35,7 @@ export const bulkApplyTimelineTemplate = { TEMPLATE_SELECTOR_PLACEHOLDER: i18n.translate( 'xpack.securitySolution.detectionEngine.rules.allRules.bulkActions.edit.applyTimelineTemplate.templateSelectorPlaceholder', { - defaultMessage: 'Enter Timeline template', + defaultMessage: 'Search Timeline template', } ), From 30061ca7f479dec06109af3193de624df0813fc1 Mon Sep 17 00:00:00 2001 From: Vitalii Dmyterko <92328789+vitaliidm@users.noreply.github.com> Date: Wed, 13 Jul 2022 08:50:48 +0100 Subject: [PATCH 6/6] Update x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx Co-authored-by: Garrett Spong --- .../timelines/components/timeline/selectable_timeline/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx index b7f95c8fedc857..e985d43e095c37 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx @@ -214,7 +214,7 @@ const SelectableTimelineComponent: React.FC = ({ 'data-test-subj': 'timeline-super-select-search-box', placeholder: placeholder ?? i18n.SEARCH_BOX_TIMELINE_PLACEHOLDER(timelineType), onSearch: onSearchTimeline, - incremental: true, + incremental: false, append: (