[Security Solution] Super select (#73271)

* fix icon * fix items * Cleanup * match styling Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Patryk Kopycinski <contact@patrykkopycinski.com>
elastic · Jul 28, 2020 · 2ea2f10 · 2ea2f10
1 parent d010711
commit 2ea2f10
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 31 deletions.
diff --git a/...gins/security_solution/public/timelines/components/timeline/search_super_select/index.tsx b/...gins/security_solution/public/timelines/components/timeline/search_super_select/index.tsx
@@ -4,19 +4,41 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiInputPopover, EuiSelectableOption, EuiSuperSelect } from '@elastic/eui';
+import { EuiInputPopover, EuiSelectableOption, EuiFieldText } from '@elastic/eui';
 import React, { memo, useCallback, useMemo, useState } from 'react';
-import { createGlobalStyle } from 'styled-components';
+import styled from 'styled-components';
 
 import { OpenTimelineResult } from '../../open_timeline/types';
 import { SelectableTimeline } from '../selectable_timeline';
 import * as i18n from '../translations';
 import { TimelineType, TimelineTypeLiteral } from '../../../../../common/types/timeline';
 
-const SearchTimelineSuperSelectGlobalStyle = createGlobalStyle`
-  .euiPopover__panel.euiPopover__panel-isOpen.timeline-search-super-select-popover__popoverPanel {
-    visibility: hidden;
-    z-index: 0;
+const StyledEuiFieldText = styled(EuiFieldText)`
+  padding-left: 12px;
+  padding-right: 40px;
+
+  &[readonly] {
+    cursor: pointer;
+    background-size: 0 100%;
+    background-repeat: no-repeat;
+
+    // To match EuiFieldText focus state
+    &:focus {
+      background-color: #fff;
+      background-image: linear-gradient(
+        to top,
+        #006bb4,
+        #006bb4 2px,
+        transparent 2px,
+        transparent 100%
+      );
+      background-size: 100% 100%;
+    }
+  }
+
+  & + .euiFormControlLayoutIcons {
+    left: unset;
+    right: 12px;
   }
 `;
 
@@ -29,13 +51,6 @@ interface SearchTimelineSuperSelectProps {
   onTimelineChange: (timelineTitle: string, timelineId: string | null) => void;
 }
 
-const basicSuperSelectOptions = [
-  {
-    value: '-1',
-    inputDisplay: i18n.DEFAULT_TIMELINE_TITLE,
-  },
-];
-
 const getBasicSelectableOptions = (timelineId: string) => [
   {
     description: i18n.DEFAULT_TIMELINE_DESCRIPTION,
@@ -67,26 +82,15 @@ const SearchTimelineSuperSelectComponent: React.FC<SearchTimelineSuperSelectProp
 
   const superSelect = useMemo(
     () => (
-      <EuiSuperSelect
+      <StyledEuiFieldText
+        readOnly
         disabled={isDisabled}
         onFocus={handleOpenPopover}
-        options={
-          timelineId == null
-            ? basicSuperSelectOptions
-            : [
-                {
-                  value: timelineId,
-                  inputDisplay: timelineTitle,
-                },
-              ]
-        }
-        valueOfSelected={timelineId == null ? '-1' : timelineId}
-        itemLayoutAlign="top"
-        hasDividers={false}
-        popoverClassName="timeline-search-super-select-popover"
+        value={timelineTitle ?? i18n.DEFAULT_TIMELINE_TITLE}
+        icon="arrowDown"
       />
     ),
-    [handleOpenPopover, isDisabled, timelineId, timelineTitle]
+    [handleOpenPopover, isDisabled, timelineTitle]
   );
 
   const handleGetSelectableOptions = useCallback(
@@ -126,7 +130,6 @@ const SearchTimelineSuperSelectComponent: React.FC<SearchTimelineSuperSelectProp
         onTimelineChange={onTimelineChange}
         timelineType={timelineType}
       />
-      <SearchTimelineSuperSelectGlobalStyle />
     </EuiInputPopover>
   );
 };

diff --git a/...gins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx b/...gins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx
@@ -165,7 +165,7 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
         responsive={false}
       >
         <EuiFlexItem grow={false}>
-          <EuiIcon type={`${option.checked === 'on' ? 'check' : 'none'}`} color="primary" />
+          <EuiIcon type={`${option.checked === 'on' ? 'check' : 'empty'}`} color="primary" />
         </EuiFlexItem>
         <EuiFlexItem grow={true}>
           <EuiFlexGroup gutterSize="none" direction="column">