[Security Solution] Super select (elastic#73271)

* fix icon * fix items * Cleanup * match styling Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Patryk Kopycinski <[email protected]> # Conflicts: # x-pack/plugins/security_solution/public/timelines/components/timeline/search_super_select/index.tsx # x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx
angorayc · Jul 28, 2020 · d952c13 · d952c13
1 parent 34e62ab
commit d952c13
Show file tree

Hide file tree

Showing 2 changed files with 448 additions and 0 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
@@ -0,0 +1,137 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiInputPopover, EuiSelectableOption, EuiFieldText } from '@elastic/eui';
+import React, { memo, useCallback, useMemo, useState } from 'react';
+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 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;
+  }
+`;
+
+interface SearchTimelineSuperSelectProps {
+  isDisabled: boolean;
+  hideUntitled?: boolean;
+  timelineId: string | null;
+  timelineTitle: string | null;
+  timelineType?: TimelineTypeLiteral;
+  onTimelineChange: (timelineTitle: string, timelineId: string | null) => void;
+}
+
+const getBasicSelectableOptions = (timelineId: string) => [
+  {
+    description: i18n.DEFAULT_TIMELINE_DESCRIPTION,
+    favorite: [],
+    label: i18n.DEFAULT_TIMELINE_TITLE,
+    id: undefined,
+    title: i18n.DEFAULT_TIMELINE_TITLE,
+    checked: timelineId === '-1' ? 'on' : undefined,
+  } as EuiSelectableOption,
+];
+
+const SearchTimelineSuperSelectComponent: React.FC<SearchTimelineSuperSelectProps> = ({
+  isDisabled,
+  hideUntitled = false,
+  timelineId,
+  timelineTitle,
+  timelineType = TimelineType.template,
+  onTimelineChange,
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const handleClosePopover = useCallback(() => {
+    setIsPopoverOpen(false);
+  }, []);
+
+  const handleOpenPopover = useCallback(() => {
+    setIsPopoverOpen(true);
+  }, []);
+
+  const superSelect = useMemo(
+    () => (
+      <StyledEuiFieldText
+        readOnly
+        disabled={isDisabled}
+        onFocus={handleOpenPopover}
+        value={timelineTitle ?? i18n.DEFAULT_TIMELINE_TITLE}
+        icon="arrowDown"
+      />
+    ),
+    [handleOpenPopover, isDisabled, timelineTitle]
+  );
+
+  const handleGetSelectableOptions = useCallback(
+    ({ timelines, onlyFavorites, searchTimelineValue }) => [
+      ...(!onlyFavorites && searchTimelineValue === ''
+        ? getBasicSelectableOptions(timelineId == null ? '-1' : timelineId)
+        : []),
+      ...timelines
+        .filter((t: OpenTimelineResult) => !hideUntitled || t.title !== '')
+        .map(
+          (t: OpenTimelineResult, index: number) =>
+            ({
+              description: t.description,
+              favorite: t.favorite,
+              label: t.title,
+              id: t.savedObjectId,
+              key: `${t.title}-${index}`,
+              title: t.title,
+              checked: t.savedObjectId === timelineId ? 'on' : undefined,
+            } as EuiSelectableOption)
+        ),
+    ],
+    [hideUntitled, timelineId]
+  );
+
+  return (
+    <EuiInputPopover
+      id="searchTimelinePopover"
+      input={superSelect}
+      isOpen={isPopoverOpen}
+      closePopover={handleClosePopover}
+    >
+      <SelectableTimeline
+        hideUntitled={hideUntitled}
+        getSelectableOptions={handleGetSelectableOptions}
+        onClosePopover={handleClosePopover}
+        onTimelineChange={onTimelineChange}
+        timelineType={timelineType}
+      />
+    </EuiInputPopover>
+  );
+};
+
+export const SearchTimelineSuperSelect = memo(SearchTimelineSuperSelectComponent);