[Security Solution][Detections] fixes various timeline components iss…

…ues (#135907)

## Summary

Addresses: #128740

### 1. Responsiveness

#### Before
> It doesn't look good on a smaller screen:

<p align="center">
  <img width="300" src="https://puu.sh/IRpyP/eb7bebabc7.png" />
</p>

#### After
<p align="center">
<img width="501" alt="Screenshot 2022-07-08 at 16 57 13" src="https://user-images.githubusercontent.com/92328789/178028639-aca44597-b6d3-4234-be08-6cbd435afe44.png">
</p>

### 2. Focus

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

<p align="center">
  <img width="300" src="https://user-images.githubusercontent.com/2946766/160513096-73cda874-057c-48da-9ac3-97db48ca78b1.gif" />
</p>

#### 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:

<p align="center">
  <img width="300" src="https://user-images.githubusercontent.com/2946766/160513715-9a4e251a-e071-47ce-b5e8-cdc5ed302e33.gif" />
</p>

#### 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](#128740 (comment))
<img width="1529" alt="Screenshot 2022-07-11 at 18 29 01" src="https://user-images.githubusercontent.com/92328789/178323118-d2c437fd-6027-4ac0-bb42-532d524ac8db.png">

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

x-pack/plugins/security_solution/public/detections/components/rules/pick_timeline/index.tsx

@@ -22,13 +22,15 @@ interface QueryBarDefineRuleProps {
   field: FieldHook;
   idAria: string;
   isDisabled: boolean;
+  placeholder?: string;
 }
 
 export const PickTimeline = ({
   dataTestSubj,
   field,
   idAria,
   isDisabled = false,
+  placeholder,
 }: QueryBarDefineRuleProps) => {
   const [timelineId, setTimelineId] = useState<string | null>(null);
   const [timelineTitle, setTimelineTitle] = useState<string | null>(null);
@@ -70,6 +72,7 @@ export const PickTimeline = ({
         timelineId={timelineId}
         timelineTitle={timelineTitle}
         onTimelineChange={handleOnTimelineChange}
+        placeholder={placeholder}
       />
     </EuiFormRow>
   );

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,
         }}
       />
     </BulkEditFormWrapper>

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',
     {

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<SearchTimelineSuperSelectProp
   timelineTitle,
   timelineType = TimelineType.template,
   onTimelineChange,
+  placeholder,
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
@@ -89,6 +91,7 @@ const SearchTimelineSuperSelectComponent: React.FC<SearchTimelineSuperSelectProp
         readOnly
         disabled={isDisabled}
         onFocus={handleOpenPopover}
+        onClick={handleOpenPopover}
         value={timelineTitle ?? i18n.DEFAULT_TIMELINE_TITLE}
         icon="arrowDown"
       />
@@ -134,6 +137,7 @@ const SearchTimelineSuperSelectComponent: React.FC<SearchTimelineSuperSelectProp
         onClosePopover={handleClosePopover}
         onTimelineChange={onTimelineChange}
         timelineType={timelineType}
+        placeholder={placeholder}
       />
     </EuiInputPopover>
   );

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<SelectableTimelineProps> = ({
@@ -87,6 +88,7 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
   onClosePopover,
   onTimelineChange,
   timelineType,
+  placeholder,
 }) => {
   const [pageSize, setPageSize] = useState(ORIGINAL_PAGE_SIZE);
   const [heightTrigger, setHeightTrigger] = useState(0);
@@ -152,7 +154,7 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
           <EuiIcon type={`${option.checked === 'on' ? 'check' : 'empty'}`} color="primary" />
         </EuiFlexItem>
         <TimelineContentItem grow={true}>
-          <EuiFlexGroup gutterSize="none" direction="column">
+          <EuiFlexGroup gutterSize="none" direction="column" responsive={false}>
             <EuiFlexItem data-test-subj="timeline">
               <EuiToolTip content={title} anchorClassName="eui-textTruncate eui-alignMiddle">
                 <EuiHighlight search={searchValue}>{title}</EuiHighlight>
@@ -210,9 +212,9 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
   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: (
         <StyledEuiFilterButton
           data-test-subj="only-favorites-toggle"
@@ -223,7 +225,7 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
         </StyledEuiFilterButton>
       ),
     }),
-    [handleOnToggleOnlyFavorites, onSearchTimeline, onlyFavorites, timelineType]
+    [handleOnToggleOnlyFavorites, onSearchTimeline, onlyFavorites, timelineType, placeholder]
   );
 
   const listProps: EuiSelectableProps['listProps'] = useMemo(