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 index 14c42697dcbb4..3e3d21b9926d1 100644 --- 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} ), - topRightContent: ( - - ), }} /> 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 index b7a80bcf6633c..42633c5d2ccf8 100644 --- 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: ( - - ), }} /> ), }), - [isLoading, options, handleCursorChange, handleTimelineClick, handleOnTimelineChange] + [isLoading, options, handleCursorChange, handleTimelineClick] ); const secondStep = useMemo( 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 641a4105e1af1..a80576c7237f4 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 @@ -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 = ({ const selectableListOuterRef = useRef(null); const selectableListInnerRef = useRef(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 = ({ isLoading: loading, placeholder: useMemo(() => i18n.SEARCH_BOX_TIMELINE_PLACEHOLDER(timelineType), [timelineType]), onSearch: onSearchTimeline, - incremental: false, + incremental: true, inputRef: (node: HTMLInputElement | null) => { setSearchRef(node); },