From 44d2ecfa9ba6bd3806337bbc4b69c8b0ef8187b2 Mon Sep 17 00:00:00 2001 From: Vitalii Dmyterko <92328789+vitaliidm@users.noreply.github.com> Date: Wed, 13 Jul 2022 11:26:24 +0100 Subject: [PATCH] [Security Solution][Detections] fixes various timeline components issues (#135907) ## Summary Addresses: https://github.com/elastic/kibana/issues/128740 ### 1. Responsiveness #### Before > It doesn't look good on a smaller screen:

#### After

Screenshot 2022-07-08 at 16 57 13

### 2. Focus #### Before > Its focus state seems off and doesn't match the combo box focus state (it's especially noticeable in Dark Mode).

#### After https://user-images.githubusercontent.com/92328789/178028779-ac268478-3f3d-4c13-9699-df9510e21ce5.mov ### 3. Clicking on "favorite star" #### Before > If you click the "favorite star" when selecting the first component it can't be reselected until focus is lost:

#### After https://user-images.githubusercontent.com/92328789/178028779-ac268478-3f3d-4c13-9699-df9510e21ce5.mov > Within Edit Rules (also notice how it re-open after selection....weird): Haven't found way to mitigate this, but anyway it doesn't impact heavily user experience or causes significant impact. So, I left it as it is. #### 4.Search bar placeholder text #### Before > It's not fully visible, and we should either make it shorter or truncate with ellipsis like we do in other parts of the UI: ![](https://user-images.githubusercontent.com/81987435/163236197-15aca8cb-8f71-485c-9b03-37900c0675c4.png) #### After More details on trimming of placeholder [here](https://github.com/elastic/kibana/issues/128740#issuecomment-1176119775) Screenshot 2022-07-11 at 18 29 01 ### Checklist Delete any items that are not applicable to this PR. - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Release note fixes multiple small issues with timeline template selector used on rule edit page and bulk edit --- .../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 | 10 +++++++--- .../components/timeline/selectable_timeline/index.tsx | 10 ++++++---- 5 files changed, 24 insertions(+), 7 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 ffff647a01a698..89ab7298bac8a9 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 @@ -22,6 +22,7 @@ interface QueryBarDefineRuleProps { field: FieldHook; idAria: string; isDisabled: boolean; + placeholder?: string; } export const PickTimeline = ({ @@ -29,6 +30,7 @@ export const PickTimeline = ({ field, idAria, isDisabled = false, + placeholder, }: QueryBarDefineRuleProps) => { const [timelineId, setTimelineId] = useState(null); const [timelineTitle, setTimelineTitle] = useState(null); @@ -70,6 +72,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 703e1b7b51fda5..3c5852926a5d72 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 @@ -91,6 +91,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..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 @@ -32,6 +32,13 @@ export const bulkApplyTimelineTemplate = { } ), + TEMPLATE_SELECTOR_PLACEHOLDER: i18n.translate( + 'xpack.securitySolution.detectionEngine.rules.allRules.bulkActions.edit.applyTimelineTemplate.templateSelectorPlaceholder', + { + defaultMessage: 'Search Timeline template', + } + ), + 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 2c4db3dc1c5a6f..bf8880afdf7209 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 @@ -27,11 +27,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% ); @@ -51,6 +51,7 @@ interface SearchTimelineSuperSelectProps { timelineId: string | null; timelineTitle: string | null; timelineType?: TimelineTypeLiteral; + placeholder?: string; onTimelineChange: (timelineTitle: string, timelineId: string | null) => void; } @@ -72,6 +73,7 @@ const SearchTimelineSuperSelectComponent: React.FC { const [isPopoverOpen, setIsPopoverOpen] = useState(false); @@ -89,6 +91,7 @@ const SearchTimelineSuperSelectComponent: React.FC @@ -134,6 +137,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 0c482999316633..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 @@ -79,6 +79,7 @@ export interface SelectableTimelineProps { graphEventId?: string ) => void; timelineType: TimelineTypeLiteral; + placeholder?: string; } const SelectableTimelineComponent: React.FC = ({ @@ -87,6 +88,7 @@ const SelectableTimelineComponent: React.FC = ({ onClosePopover, onTimelineChange, timelineType, + placeholder, }) => { const [pageSize, setPageSize] = useState(ORIGINAL_PAGE_SIZE); const [heightTrigger, setHeightTrigger] = useState(0); @@ -152,7 +154,7 @@ const SelectableTimelineComponent: React.FC = ({ - + {title} @@ -210,9 +212,9 @@ 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, + incremental: false, append: ( = ({ ), }), - [handleOnToggleOnlyFavorites, onSearchTimeline, onlyFavorites, timelineType] + [handleOnToggleOnlyFavorites, onSearchTimeline, onlyFavorites, timelineType, placeholder] ); const listProps: EuiSelectableProps['listProps'] = useMemo(