From 720e0cfd0e130229b8b72f51e1f70b19bad601e6 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Mon, 12 Oct 2020 13:53:15 +0300 Subject: [PATCH 1/2] Fix timeline search --- .../public/cases/components/add_comment/index.tsx | 13 +------------ .../public/cases/components/create/index.tsx | 15 ++------------- .../timeline/selectable_timeline/index.tsx | 15 ++++++++++----- 3 files changed, 13 insertions(+), 30 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 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); }, From 9a5ff41415675b52813f9ba5f8f1e6497b260d3d Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Mon, 12 Oct 2020 23:55:21 +0300 Subject: [PATCH 2/2] Delete InsertTimelinePopover component --- .../insert_timeline_popover/index.test.tsx | 22 ----- .../insert_timeline_popover/index.tsx | 95 ------------------- 2 files changed, 117 deletions(-) delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.test.tsx deleted file mode 100644 index bfd76f0a98d46..0000000000000 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/* - * 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 React from 'react'; -import { mount } from 'enzyme'; -import { InsertTimelinePopoverComponent } from '.'; - -const onTimelineChange = jest.fn(); -const props = { - isDisabled: false, - onTimelineChange, -}; - -describe('Insert timeline popover ', () => { - it('it renders', () => { - const wrapper = mount(); - expect(wrapper.find('[data-test-subj="insert-timeline-popover"]').exists()).toBeTruthy(); - }); -}); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx deleted file mode 100644 index 11ad54321da88..0000000000000 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx +++ /dev/null @@ -1,95 +0,0 @@ -/* - * 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 { EuiButtonIcon, EuiPopover, EuiSelectableOption, EuiToolTip } from '@elastic/eui'; -import React, { memo, useCallback, useMemo, useState } from 'react'; - -import { OpenTimelineResult } from '../../open_timeline/types'; -import { SelectableTimeline } from '../selectable_timeline'; -import * as i18n from '../translations'; -import { TimelineType } from '../../../../../common/types/timeline'; - -interface InsertTimelinePopoverProps { - isDisabled: boolean; - hideUntitled?: boolean; - onTimelineChange: ( - timelineTitle: string, - timelineId: string | null, - graphEventId?: string - ) => void; -} - -type Props = InsertTimelinePopoverProps; - -export const InsertTimelinePopoverComponent: React.FC = ({ - isDisabled, - hideUntitled = false, - onTimelineChange, -}) => { - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - - const handleClosePopover = useCallback(() => { - setIsPopoverOpen(false); - }, []); - - const handleOpenPopover = useCallback(() => { - setIsPopoverOpen(true); - }, []); - - const insertTimelineButton = useMemo( - () => ( - {i18n.INSERT_TIMELINE}

}> - - - ), - [handleOpenPopover, isDisabled] - ); - - const handleGetSelectableOptions = useCallback( - ({ timelines }) => [ - ...timelines.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: undefined, - } as EuiSelectableOption) - ), - ], - [] - ); - - return ( - - - - ); -}; - -export const InsertTimelinePopover = memo(InsertTimelinePopoverComponent);