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
### 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)
### 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(