[7.x] [Security Solution][Timeline] Fix SelectableTimeline search (#8…

…0128) (#80290)
elastic · Oct 13, 2020 · 7e6030b · 7e6030b
1 parent 98eb9cd
commit 7e6030b
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 147 deletions.
diff --git a/x-pack/plugins/security_solution/public/cases/components/add_comment/index.tsx b/x-pack/plugins/security_solution/public/cases/components/add_comment/index.tsx
@@ -12,7 +12,6 @@ import { CommentRequest } from '../../../../../case/common/api';
 import { usePostComment } from '../../containers/use_post_comment';
 import { Case } from '../../containers/types';
 import { MarkdownEditorForm } from '../../../common/components/markdown_editor/eui_form';
-import { InsertTimelinePopover } from '../../../timelines/components/timeline/insert_timeline_popover';
 import { useInsertTimeline } from '../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline';
 import { Form, useForm, UseField, useFormData } from '../../../shared_imports';
 
@@ -61,10 +60,7 @@ export const AddComment = React.memo(
         setFieldValue,
       ]);
 
-      const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline(
-        comment,
-        onCommentChange
-      );
+      const { handleCursorChange } = useInsertTimeline(comment, onCommentChange);
 
       const addQuote = useCallback(
         (quote) => {
@@ -116,13 +112,6 @@ export const AddComment = React.memo(
                     {i18n.ADD_COMMENT}
                   </EuiButton>
                 ),
-                topRightContent: (
-                  <InsertTimelinePopover
-                    hideUntitled={true}
-                    isDisabled={isLoading}
-                    onTimelineChange={handleOnTimelineChange}
-                  />
-                ),
               }}
             />
           </Form>

diff --git a/x-pack/plugins/security_solution/public/cases/components/create/index.tsx b/x-pack/plugins/security_solution/public/cases/components/create/index.tsx
@@ -28,7 +28,6 @@ import {
 } from '../../../shared_imports';
 import { usePostCase } from '../../containers/use_post_case';
 import { schema, FormProps } from './schema';
-import { InsertTimelinePopover } from '../../../timelines/components/timeline/insert_timeline_popover';
 import { useInsertTimeline } from '../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline';
 import { MarkdownEditorForm } from '../../../common/components/markdown_editor/eui_form';
 import { useGetTags } from '../../containers/use_get_tags';
@@ -136,10 +135,7 @@ export const Create = React.memo(() => {
     setFieldValue,
   ]);
 
-  const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline(
-    description,
-    onDescriptionChange
-  );
+  const { handleCursorChange } = useInsertTimeline(description, onDescriptionChange);
 
   const handleTimelineClick = useTimelineClick();
 
@@ -221,20 +217,13 @@ export const Create = React.memo(() => {
                 isDisabled: isLoading,
                 onClickTimeline: handleTimelineClick,
                 onCursorPositionUpdate: handleCursorChange,
-                topRightContent: (
-                  <InsertTimelinePopover
-                    hideUntitled={true}
-                    isDisabled={isLoading}
-                    onTimelineChange={handleOnTimelineChange}
-                  />
-                ),
               }}
             />
           </Container>
         </>
       ),
     }),
-    [isLoading, options, handleCursorChange, handleTimelineClick, handleOnTimelineChange]
+    [isLoading, options, handleCursorChange, handleTimelineClick]
   );
 
   const secondStep = useMemo(

diff --git a/...rity_solution/public/timelines/components/timeline/insert_timeline_popover/index.test.tsx b/...rity_solution/public/timelines/components/timeline/insert_timeline_popover/index.test.tsx
diff --git a/.../security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx b/.../security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx
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
@@ -16,7 +16,7 @@ import {
   EuiFilterGroup,
   EuiFilterButton,
 } from '@elastic/eui';
-import { isEmpty } from 'lodash/fp';
+import { isEmpty, debounce } from 'lodash/fp';
 import React, { memo, useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
@@ -120,9 +120,14 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
   const selectableListOuterRef = useRef<HTMLDivElement | null>(null);
   const selectableListInnerRef = useRef<HTMLDivElement | null>(null);
 
-  const onSearchTimeline = useCallback((val) => {
-    setSearchTimelineValue(val);
-  }, []);
+  const debouncedSetSearchTimelineValue = useMemo(() => debounce(500, setSearchTimelineValue), []);
+
+  const onSearchTimeline = useCallback(
+    (val) => {
+      debouncedSetSearchTimelineValue(val);
+    },
+    [debouncedSetSearchTimelineValue]
+  );
 
   const handleOnToggleOnlyFavorites = useCallback(() => {
     setOnlyFavorites(!onlyFavorites);
@@ -238,7 +243,7 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
     isLoading: loading,
     placeholder: useMemo(() => i18n.SEARCH_BOX_TIMELINE_PLACEHOLDER(timelineType), [timelineType]),
     onSearch: onSearchTimeline,
-    incremental: false,
+    incremental: true,
     inputRef: (node: HTMLInputElement | null) => {
       setSearchRef(node);
     },