[Cases] Add another newline after a quote message (#116104)

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

@@ -120,7 +120,7 @@ describe('AddComment ', () => {
   });
 
   it('should insert a quote', async () => {
-    const sampleQuote = 'what a cool quote';
+    const sampleQuote = 'what a cool quote \n with new lines';
     const ref = React.createRef<AddCommentRefObject>();
     const wrapper = mount(
       <TestProviders>
@@ -138,10 +138,40 @@ describe('AddComment ', () => {
     });
 
     expect(wrapper.find(`[data-test-subj="add-comment"] textarea`).text()).toBe(
-      `${sampleData.comment}\n\n${sampleQuote}`
+      `${sampleData.comment}\n\n> what a cool quote \n>  with new lines \n\n`
     );
   });
 
+  it('should call onFocus when adding a quote', async () => {
+    const ref = React.createRef<AddCommentRefObject>();
+
+    mount(
+      <TestProviders>
+        <AddComment {...addCommentProps} ref={ref} />
+      </TestProviders>
+    );
+
+    ref.current!.editor!.textarea!.focus = jest.fn();
+    await act(async () => {
+      ref.current!.addQuote('a comment');
+    });
+
+    expect(ref.current!.editor!.textarea!.focus).toHaveBeenCalled();
+  });
+
+  it('should NOT call onFocus on mount', async () => {
+    const ref = React.createRef<AddCommentRefObject>();
+
+    mount(
+      <TestProviders>
+        <AddComment {...addCommentProps} ref={ref} />
+      </TestProviders>
+    );
+
+    ref.current!.editor!.textarea!.focus = jest.fn();
+    expect(ref.current!.editor!.textarea!.focus).not.toHaveBeenCalled();
+  });
+
   it('it should insert a timeline', async () => {
     const useInsertTimelineMock = jest.fn();
     let attachTimeline = noop;

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

@@ -5,14 +5,22 @@
  * 2.0.
  */
 
+import React, {
+  useCallback,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+  useEffect,
+  useState,
+} from 'react';
 import { EuiButton, EuiFlexItem, EuiFlexGroup, EuiLoadingSpinner } from '@elastic/eui';
-import React, { useCallback, useRef, forwardRef, useImperativeHandle } from 'react';
 import styled from 'styled-components';
+import { isEmpty } from 'lodash';
 
 import { CommentType } from '../../../common';
 import { usePostComment } from '../../containers/use_post_comment';
 import { Case } from '../../containers/types';
-import { MarkdownEditorForm } from '../markdown_editor';
+import { EuiMarkdownEditorRef, MarkdownEditorForm } from '../markdown_editor';
 import { Form, useForm, UseField, useFormData } from '../../common/shared_imports';
 
 import * as i18n from './translations';
@@ -33,6 +41,7 @@ const initialCommentValue: AddCommentFormSchema = {
 export interface AddCommentRefObject {
   addQuote: (quote: string) => void;
   setComment: (newComment: string) => void;
+  editor: EuiMarkdownEditorRef | null;
 }
 
 export interface AddCommentProps {
@@ -61,7 +70,8 @@ export const AddComment = React.memo(
       },
       ref
     ) => {
-      const editorRef = useRef();
+      const editorRef = useRef<EuiMarkdownEditorRef>(null);
+      const [focusOnContext, setFocusOnContext] = useState(false);
       const owner = useOwnerContext();
       const { isLoading, postComment } = usePostComment();
 
@@ -77,7 +87,10 @@ export const AddComment = React.memo(
 
       const addQuote = useCallback(
         (quote) => {
-          setFieldValue(fieldName, `${comment}${comment.length > 0 ? '\n\n' : ''}${quote}`);
+          const addCarrots = quote.replace(new RegExp('\r?\n', 'g'), '\n> ');
+          const val = `> ${addCarrots} \n\n`;
+          setFieldValue(fieldName, `${comment}${comment.length > 0 ? '\n\n' : ''}${val}`);
+          setFocusOnContext(true);
         },
         [comment, setFieldValue]
       );
@@ -111,6 +124,38 @@ export const AddComment = React.memo(
         }
       }, [submit, onCommentSaving, postComment, caseId, owner, onCommentPosted, subCaseId, reset]);
 
+      /**
+       * Focus on the text area when a quote has been added.
+       *
+       * The useEffect will run only when focusOnContext
+       * changes.
+       *
+       * The useEffect is also called once one mount
+       * where the comment is empty. We do not want to focus
+       * in this scenario.
+       *
+       * Ideally we would like to put the
+       * editorRef.current?.textarea?.focus(); inside the if (focusOnContext).
+       * The reason this is not feasible is because when it sets the
+       * focusOnContext to false a render will occur again and the
+       * focus will be lost.
+       *
+       * We do not put the comment in the dependency list
+       * because we do not want to focus when the user
+       * is typing.
+       */
+
+      useEffect(() => {
+        if (!isEmpty(comment)) {
+          editorRef.current?.textarea?.focus();
+        }
+
+        if (focusOnContext) {
+          setFocusOnContext(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [focusOnContext]);
+
       return (
         <span id="add-comment-permLink">
           {isLoading && showLoading && <MySpinner data-test-subj="loading-spinner" size="xl" />}

x-pack/plugins/cases/public/components/markdown_editor/editor.tsx

@@ -37,7 +37,7 @@ interface MarkdownEditorProps {
   value: string;
 }
 
-type EuiMarkdownEditorRef = ElementRef<typeof EuiMarkdownEditor>;
+export type EuiMarkdownEditorRef = ElementRef<typeof EuiMarkdownEditor>;
 
 export interface MarkdownEditorRef {
   textarea: HTMLTextAreaElement | null;

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

@@ -348,7 +348,7 @@ describe(`UserActionTree`, () => {
       .first()
       .simulate('click');
     await waitFor(() => {
-      expect(setFieldValue).toBeCalledWith('comment', `> ${props.data.description} \n`);
+      expect(setFieldValue).toBeCalledWith('comment', `> ${props.data.description} \n\n`);
     });
   });
 

x-pack/plugins/cases/public/components/user_action_tree/index.tsx

@@ -226,10 +226,8 @@ export const UserActionTree = React.memo(
 
     const handleManageQuote = useCallback(
       (quote: string) => {
-        const addCarrots = quote.replace(new RegExp('\r?\n', 'g'), '  \n> ');
-
         if (commentRefs.current[NEW_ID]) {
-          commentRefs.current[NEW_ID].addQuote(`> ${addCarrots} \n`);
+          commentRefs.current[NEW_ID].addQuote(quote);
         }
 
         handleOutlineComment('add-comment');