[SECURITY] Timeline bug 7.9 (#71748)

* remove delay of rendering row

* Fix flyout timeline to behave as we wanted

* Fix tabs on timeline page

* disable sensor visibility when you have less than 100 events in timeline

* Fix container to fit content and not take all the place that it wants

* do not update timeline time when switching top nav

* fix timeline url in case

* review I

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: XavierM

x-pack/plugins/security_solution/public/cases/components/add_comment/index.tsx

@@ -8,7 +8,6 @@ import { EuiButton, EuiLoadingSpinner } from '@elastic/eui';
 import React, { useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 
-import { useDispatch } from 'react-redux';
 import { CommentRequest } from '../../../../../case/common/api';
 import { usePostComment } from '../../containers/use_post_comment';
 import { Case } from '../../containers/types';
@@ -19,12 +18,7 @@ import { Form, useForm, UseField } from '../../../shared_imports';
 
 import * as i18n from './translations';
 import { schema } from './schema';
-import {
-  dispatchUpdateTimeline,
-  queryTimelineById,
-} from '../../../timelines/components/open_timeline/helpers';
-import { updateIsLoading as dispatchUpdateIsLoading } from '../../../timelines/store/timeline/actions';
-import { useApolloClient } from '../../../common/utils/apollo_context';
+import { useTimelineClick } from '../utils/use_timeline_click';
 
 const MySpinner = styled(EuiLoadingSpinner)`
   position: absolute;
@@ -53,8 +47,7 @@ export const AddComment = React.memo<AddCommentProps>(
       options: { stripEmptyFields: false },
       schema,
     });
-    const dispatch = useDispatch();
-    const apolloClient = useApolloClient();
+
     const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline<CommentRequest>(
       form,
       'comment'
@@ -68,30 +61,9 @@ export const AddComment = React.memo<AddCommentProps>(
           `${comment}${comment.length > 0 ? '\n\n' : ''}${insertQuote}`
         );
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [insertQuote]);
+    }, [form, insertQuote]);
 
-    const handleTimelineClick = useCallback(
-      (timelineId: string) => {
-        queryTimelineById({
-          apolloClient,
-          timelineId,
-          updateIsLoading: ({
-            id: currentTimelineId,
-            isLoading: isLoadingTimeline,
-          }: {
-            id: string;
-            isLoading: boolean;
-          }) =>
-            dispatch(
-              dispatchUpdateIsLoading({ id: currentTimelineId, isLoading: isLoadingTimeline })
-            ),
-          updateTimeline: dispatchUpdateTimeline(dispatch),
-        });
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [apolloClient]
-    );
+    const handleTimelineClick = useTimelineClick();
 
     const onSubmit = useCallback(async () => {
       const { isValid, data } = await form.submit();
@@ -102,8 +74,8 @@ export const AddComment = React.memo<AddCommentProps>(
         postComment(data, onCommentPosted);
         form.reset();
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [form, onCommentPosted, onCommentSaving]);
+    }, [form, onCommentPosted, onCommentSaving, postComment]);
+
     return (
       <span id="add-comment-permLink">
         {isLoading && showLoading && <MySpinner data-test-subj="loading-spinner" size="xl" />}

x-pack/plugins/security_solution/public/cases/components/all_cases/index.test.tsx

@@ -29,14 +29,6 @@ const useGetCasesMock = useGetCases as jest.Mock;
 const useGetCasesStatusMock = useGetCasesStatus as jest.Mock;
 const useUpdateCasesMock = useUpdateCases as jest.Mock;
 
-jest.mock('react-router-dom', () => {
-  const originalModule = jest.requireActual('react-router-dom');
-  return {
-    ...originalModule,
-    useHistory: jest.fn(),
-  };
-});
-
 jest.mock('../../../common/components/link_to');
 
 describe('AllCases', () => {

x-pack/plugins/security_solution/public/cases/components/all_cases/index.tsx

@@ -5,7 +5,6 @@
  */
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useHistory } from 'react-router-dom';
 import {
   EuiBasicTable,
   EuiContextMenuPanel,
@@ -50,6 +49,8 @@ import { ConfigureCaseButton } from '../configure_cases/button';
 import { ERROR_PUSH_SERVICE_CALLOUT_TITLE } from '../use_push_to_service/translations';
 import { LinkButton } from '../../../common/components/links';
 import { SecurityPageName } from '../../../app/types';
+import { useKibana } from '../../../common/lib/kibana';
+import { APP_ID } from '../../../../common/constants';
 
 const Div = styled.div`
   margin-top: ${({ theme }) => theme.eui.paddingSizes.m};
@@ -81,13 +82,13 @@ const getSortField = (field: string): SortFieldCase => {
 };
 
 interface AllCasesProps {
-  onRowClick?: (id: string) => void;
+  onRowClick?: (id?: string) => void;
   isModal?: boolean;
   userCanCrud: boolean;
 }
 export const AllCases = React.memo<AllCasesProps>(
-  ({ onRowClick = () => {}, isModal = false, userCanCrud }) => {
-    const history = useHistory();
+  ({ onRowClick, isModal = false, userCanCrud }) => {
+    const { navigateToApp } = useKibana().services.application;
     const { formatUrl, search: urlSearch } = useFormatUrl(SecurityPageName.case);
     const { actionLicense } = useGetActionLicense();
     const {
@@ -234,9 +235,15 @@ export const AllCases = React.memo<AllCasesProps>(
     const goToCreateCase = useCallback(
       (ev) => {
         ev.preventDefault();
-        history.push(getCreateCaseUrl(urlSearch));
+        if (isModal && onRowClick != null) {
+          onRowClick();
+        } else {
+          navigateToApp(`${APP_ID}:${SecurityPageName.case}`, {
+            path: getCreateCaseUrl(urlSearch),
+          });
+        }
       },
-      [history, urlSearch]
+      [navigateToApp, isModal, onRowClick, urlSearch]
     );
 
     const actions = useMemo(
@@ -445,7 +452,11 @@ export const AllCases = React.memo<AllCasesProps>(
                 rowProps={(item) =>
                   isModal
                     ? {
-                        onClick: () => onRowClick(item.id),
+                        onClick: () => {
+                          if (onRowClick != null) {
+                            onRowClick(item.id);
+                          }
+                        },
                       }
                     : {}
                 }

x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.tsx

@@ -19,7 +19,7 @@ import * as i18n from './translations';
 interface AllCasesModalProps {
   onCloseCaseModal: () => void;
   showCaseModal: boolean;
-  onRowClick: (id: string) => void;
+  onRowClick: (id?: string) => void;
 }
 
 export const AllCasesModalComponent = ({

x-pack/plugins/security_solution/public/cases/components/create/index.tsx

@@ -33,6 +33,7 @@ import * as i18n from '../../translations';
 import { MarkdownEditorForm } from '../../../common/components//markdown_editor/form';
 import { useGetTags } from '../../containers/use_get_tags';
 import { getCaseDetailsUrl } from '../../../common/components/link_to';
+import { useTimelineClick } from '../utils/use_timeline_click';
 
 export const CommonUseField = getUseField({ component: Field });
 
@@ -87,15 +88,15 @@ export const Create = React.memo(() => {
     form,
     'description'
   );
+  const handleTimelineClick = useTimelineClick();
 
   const onSubmit = useCallback(async () => {
     const { isValid, data } = await form.submit();
     if (isValid) {
       // `postCase`'s type is incorrect, it actually returns a promise
       await postCase(data);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [form]);
+  }, [form, postCase]);
 
   const handleSetIsCancel = useCallback(() => {
     history.push('/');
@@ -145,6 +146,7 @@ export const Create = React.memo(() => {
               dataTestSubj: 'caseDescription',
               idAria: 'caseDescription',
               isDisabled: isLoading,
+              onClickTimeline: handleTimelineClick,
               onCursorPositionUpdate: handleCursorChange,
               topRightContent: (
                 <InsertTimelinePopover

x-pack/plugins/security_solution/public/cases/components/user_action_tree/user_action_markdown.test.tsx

@@ -44,6 +44,7 @@ describe('UserActionMarkdown ', () => {
 
     expect(queryTimelineByIdSpy).toBeCalledWith({
       apolloClient: mockUseApolloClient(),
+      graphEventId: '',
       timelineId,
       updateIsLoading: expect.any(Function),
       updateTimeline: expect.any(Function),
@@ -62,6 +63,7 @@ describe('UserActionMarkdown ', () => {
     wrapper.find(`[data-test-subj="markdown-timeline-link"]`).first().simulate('click');
     expect(queryTimelineByIdSpy).toBeCalledWith({
       apolloClient: mockUseApolloClient(),
+      graphEventId: '',
       timelineId,
       updateIsLoading: expect.any(Function),
       updateTimeline: expect.any(Function),

x-pack/plugins/security_solution/public/cases/components/user_action_tree/user_action_markdown.tsx

@@ -8,21 +8,14 @@ import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty, EuiButton } from '@elastic/e
 import React, { useCallback } from 'react';
 import styled, { css } from 'styled-components';
 
-import { useDispatch } from 'react-redux';
 import * as i18n from '../case_view/translations';
 import { Markdown } from '../../../common/components/markdown';
 import { Form, useForm, UseField } from '../../../shared_imports';
 import { schema, Content } 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/form';
-import {
-  dispatchUpdateTimeline,
-  queryTimelineById,
-} from '../../../timelines/components/open_timeline/helpers';
-
-import { updateIsLoading as dispatchUpdateIsLoading } from '../../../timelines/store/timeline/actions';
-import { useApolloClient } from '../../../common/utils/apollo_context';
+import { useTimelineClick } from '../utils/use_timeline_click';
 
 const ContentWrapper = styled.div`
   ${({ theme }) => css`
@@ -44,8 +37,6 @@ export const UserActionMarkdown = ({
   onChangeEditable,
   onSaveContent,
 }: UserActionMarkdownProps) => {
-  const dispatch = useDispatch();
-  const apolloClient = useApolloClient();
   const { form } = useForm<Content>({
     defaultValue: { content },
     options: { stripEmptyFields: false },
@@ -59,24 +50,7 @@ export const UserActionMarkdown = ({
     onChangeEditable(id);
   }, [id, onChangeEditable]);
 
-  const handleTimelineClick = useCallback(
-    (timelineId: string) => {
-      queryTimelineById({
-        apolloClient,
-        timelineId,
-        updateIsLoading: ({
-          id: currentTimelineId,
-          isLoading,
-        }: {
-          id: string;
-          isLoading: boolean;
-        }) => dispatch(dispatchUpdateIsLoading({ id: currentTimelineId, isLoading })),
-        updateTimeline: dispatchUpdateTimeline(dispatch),
-      });
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [apolloClient]
-  );
+  const handleTimelineClick = useTimelineClick();
 
   const handleSaveAction = useCallback(async () => {
     const { isValid, data } = await form.submit();

x-pack/plugins/security_solution/public/cases/components/utils/use_timeline_click.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useApolloClient } from '../../../common/utils/apollo_context';
+import {
+  dispatchUpdateTimeline,
+  queryTimelineById,
+} from '../../../timelines/components/open_timeline/helpers';
+import { updateIsLoading as dispatchUpdateIsLoading } from '../../../timelines/store/timeline/actions';
+
+export const useTimelineClick = () => {
+  const dispatch = useDispatch();
+  const apolloClient = useApolloClient();
+
+  const handleTimelineClick = useCallback(
+    (timelineId: string, graphEventId?: string) => {
+      queryTimelineById({
+        apolloClient,
+        graphEventId,
+        timelineId,
+        updateIsLoading: ({
+          id: currentTimelineId,
+          isLoading,
+        }: {
+          id: string;
+          isLoading: boolean;
+        }) => dispatch(dispatchUpdateIsLoading({ id: currentTimelineId, isLoading })),
+        updateTimeline: dispatchUpdateTimeline(dispatch),
+      });
+    },
+    [apolloClient, dispatch]
+  );
+
+  return handleTimelineClick;
+};

x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx

@@ -106,8 +106,7 @@ const EventsViewerComponent: React.FC<Props> = ({
 
   useEffect(() => {
     setIsTimelineLoading({ id, isLoading: isQueryLoading });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isQueryLoading]);
+  }, [id, isQueryLoading, setIsTimelineLoading]);
 
   const { queryFields, title, unit } = useMemo(() => getManageTimelineById(id), [
     getManageTimelineById,

x-pack/plugins/security_solution/public/common/components/markdown/index.test.tsx

@@ -157,7 +157,19 @@ describe('Markdown', () => {
         );
         wrapper.find('[data-test-subj="markdown-timeline-link"]').first().simulate('click');
 
-        expect(onClickTimeline).toHaveBeenCalledWith(timelineId);
+        expect(onClickTimeline).toHaveBeenCalledWith(timelineId, '');
+      });
+
+      test('timeline link onClick calls onClickTimeline with timelineId and graphEventId', () => {
+        const graphEventId = '2bc51864784c';
+        const markdownWithTimelineAndGraphEventLink = `A link to a timeline [timeline](http://localhost:5601/app/siem#/timelines?timeline=(id:'${timelineId}',isOpen:!t,graphEventId:'${graphEventId}'))`;
+
+        const wrapper = mount(
+          <Markdown raw={markdownWithTimelineAndGraphEventLink} onClickTimeline={onClickTimeline} />
+        );
+        wrapper.find('[data-test-subj="markdown-timeline-link"]').first().simulate('click');
+
+        expect(onClickTimeline).toHaveBeenCalledWith(timelineId, graphEventId);
       });
     });
   });