From 22e9dca66226ca591cccc5c693c342645df8b986 Mon Sep 17 00:00:00 2001
From: stephmilovic <stephanie.milovic@elastic.co>
Date: Mon, 8 Jun 2020 16:03:47 -0600
Subject: [PATCH] fix add comment preview

---
 .../cases/components/add_comment/index.tsx    | 32 +++++++++++++++++++
 .../use_insert_timeline.tsx                   |  2 +-
 2 files changed, 33 insertions(+), 1 deletion(-)

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 a57fae8081bea4..a830b299d655b7 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
@@ -8,6 +8,7 @@ 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';
@@ -18,6 +19,12 @@ 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';
 
 const MySpinner = styled(EuiLoadingSpinner)`
   position: absolute;
@@ -46,6 +53,8 @@ export const AddComment = React.memo<AddCommentProps>(
       options: { stripEmptyFields: false },
       schema,
     });
+    const dispatch = useDispatch();
+    const apolloClient = useApolloClient();
     const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline<CommentRequest>(
       form,
       'comment'
@@ -62,6 +71,28 @@ export const AddComment = React.memo<AddCommentProps>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [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 onSubmit = useCallback(async () => {
       const { isValid, data } = await form.submit();
       if (isValid) {
@@ -86,6 +117,7 @@ export const AddComment = React.memo<AddCommentProps>(
               dataTestSubj: 'add-comment',
               placeholder: i18n.ADD_COMMENT_HELP_TEXT,
               onCursorPositionUpdate: handleCursorChange,
+              onClickTimeline: handleTimelineClick,
               bottomRightContent: (
                 <EuiButton
                   data-test-subj="submit-comment"
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx
index 0f9e64082a603d..8101982f96210a 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx
@@ -17,7 +17,7 @@ export const useInsertTimeline = <T extends FormData>(form: FormHook<T>, fieldNa
   });
   const handleOnTimelineChange = useCallback(
     (title: string, id: string | null) => {
-      const builtLink = `${basePath}/app/siem#/timelines?timeline=(id:'${id}',isOpen:!t)`;
+      const builtLink = `${basePath}/app/security_solution#/timelines?timeline=(id:'${id}',isOpen:!t)`;
       const currentValue = form.getFormData()[fieldName];
       const newValue: string = [
         currentValue.slice(0, cursorPosition.start),