[Cases] Save draft user comment

x-pack/plugins/cases/public/common/translations.ts

@@ -311,6 +311,13 @@ export const ADD_TAG_CUSTOM_OPTION_LABEL = (searchValue: string) =>
     values: { searchValue },
   });
 
+export const VERSION_CONFLICT_WARNING = (markdownId: string) =>
+  i18n.translate('xpack.cases.configure.commentVersionConflictWarning', {
+    defaultMessage:
+      'This {markdownId} was updated. Saving your changes will overwrite the updated value.',
+    values: { markdownId },
+  });
+
 /**
  * EUI checkbox replace {searchValue} with the current
  * search value. We need to put the template variable

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

@@ -7,10 +7,10 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { waitFor, act } from '@testing-library/react';
+import { waitFor, act, fireEvent } from '@testing-library/react';
 import { noop } from 'lodash/fp';
 
-import { noCreateCasesPermissions, TestProviders } from '../../common/mock';
+import { noCreateCasesPermissions, TestProviders, createAppMockRenderer } from '../../common/mock';
 
 import { CommentType } from '../../../common/api';
 import { SECURITY_SOLUTION_OWNER } from '../../../common/constants';
@@ -20,6 +20,7 @@ import { AddComment } from '.';
 import { CasesTimelineIntegrationProvider } from '../timeline_context';
 import { timelineIntegrationMock } from '../__mock__/timeline';
 import type { CaseAttachmentWithoutOwner } from '../../types';
+import type { AppMockRenderer } from '../../common/mock';
 
 jest.mock('../../containers/use_create_attachments');
 
@@ -47,13 +48,19 @@ const sampleData: CaseAttachmentWithoutOwner = {
   comment: 'what a cool comment',
   type: CommentType.user as const,
 };
+const appId = 'testAppId';
+const draftKey = `cases.${appId}.${addCommentProps.caseId}.${addCommentProps.id}.markdownEditor`;
 
 describe('AddComment ', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     useCreateAttachmentsMock.mockImplementation(() => defaultResponse);
   });
 
+  afterEach(() => {
+    sessionStorage.removeItem(draftKey);
+  });
+
   it('should post comment on submit click', async () => {
     const wrapper = mount(
       <TestProviders>
@@ -209,3 +216,70 @@ describe('AddComment ', () => {
     });
   });
 });
+
+describe('draft comment ', () => {
+  let appMockRenderer: AppMockRenderer;
+
+  beforeEach(() => {
+    appMockRenderer = createAppMockRenderer();
+    jest.clearAllMocks();
+  });
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it('should clear session storage on submit', async () => {
+    const result = appMockRenderer.render(<AddComment {...addCommentProps} />);
+
+    fireEvent.change(result.getByLabelText('caseComment'), {
+      target: { value: sampleData.comment },
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    await waitFor(() => {
+      expect(result.getByLabelText('caseComment')).toHaveValue(sessionStorage.getItem(draftKey));
+    });
+
+    fireEvent.click(result.getByTestId('submit-comment'));
+
+    await waitFor(() => {
+      expect(onCommentSaving).toBeCalled();
+      expect(createAttachments).toBeCalledWith({
+        caseId: addCommentProps.caseId,
+        caseOwner: SECURITY_SOLUTION_OWNER,
+        data: [sampleData],
+        updateCase: onCommentPosted,
+      });
+      expect(result.getByLabelText('caseComment').textContent).toBe('');
+      expect(sessionStorage.getItem(draftKey)).toBe('');
+    });
+  });
+
+  describe('existing storage key', () => {
+    beforeEach(() => {
+      sessionStorage.setItem(draftKey, 'value set in storage');
+    });
+
+    afterEach(() => {
+      sessionStorage.removeItem(draftKey);
+    });
+
+    it('should have draft comment same as existing session storage', async () => {
+      const result = appMockRenderer.render(<AddComment {...addCommentProps} />);
+
+      expect(result.getByLabelText('caseComment')).toHaveValue('value set in storage');
+    });
+  });
+});

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

@@ -28,6 +28,8 @@ import { useCreateAttachments } from '../../containers/use_create_attachments';
 import type { Case } from '../../containers/types';
 import type { EuiMarkdownEditorRef } from '../markdown_editor';
 import { MarkdownEditorForm } from '../markdown_editor';
+import { getMarkdownEditorStorageKey } from '../markdown_editor/utils';
+import { removeItemFromSessionStorage } from '../utils';
 
 import * as i18n from './translations';
 import type { AddCommentFormSchema } from './schema';
@@ -68,8 +70,9 @@ export const AddComment = React.memo(
     ) => {
       const editorRef = useRef<EuiMarkdownEditorRef>(null);
       const [focusOnContext, setFocusOnContext] = useState(false);
-      const { permissions, owner } = useCasesContext();
+      const { permissions, owner, appId } = useCasesContext();
       const { isLoading, createAttachments } = useCreateAttachments();
+      const draftStorageKey = getMarkdownEditorStorageKey(appId, caseId, id);
 
       const { form } = useForm<AddCommentFormSchema>({
         defaultValue: initialCommentValue,
@@ -116,9 +119,21 @@ export const AddComment = React.memo(
             data: [{ ...data, type: CommentType.user }],
             updateCase: onCommentPosted,
           });
-          reset();
+
+          removeItemFromSessionStorage(draftStorageKey);
+
+          reset({ defaultValue: {} });
         }
-      }, [submit, onCommentSaving, createAttachments, caseId, owner, onCommentPosted, reset]);
+      }, [
+        submit,
+        onCommentSaving,
+        createAttachments,
+        caseId,
+        owner,
+        onCommentPosted,
+        reset,
+        draftStorageKey,
+      ]);
 
       /**
        * Focus on the text area when a quote has been added.
@@ -163,6 +178,7 @@ export const AddComment = React.memo(
                 componentProps={{
                   ref: editorRef,
                   id,
+                  draftStorageKey,
                   idAria: 'caseComment',
                   isDisabled: isLoading,
                   dataTestSubj: 'add-comment',

x-pack/plugins/cases/public/components/create/description.test.tsx

@@ -22,6 +22,11 @@ jest.mock('../markdown_editor/plugins/lens/use_lens_draft_comment');
 describe('Description', () => {
   let globalForm: FormHook;
   let appMockRender: AppMockRenderer;
+  const draftStorageKey = `cases.caseView.createCase.description.markdownEditor`;
+  const defaultProps = {
+    draftStorageKey,
+    isLoading: false,
+  };
 
   const MockHookWrapperComponent: React.FC = ({ children }) => {
     const { form } = useForm<FormProps>({
@@ -44,7 +49,7 @@ describe('Description', () => {
   it('it renders', async () => {
     const result = appMockRender.render(
       <MockHookWrapperComponent>
-        <Description isLoading={false} />
+        <Description {...defaultProps} />
       </MockHookWrapperComponent>
     );
 
@@ -54,7 +59,7 @@ describe('Description', () => {
   it('it changes the description', async () => {
     const result = appMockRender.render(
       <MockHookWrapperComponent>
-        <Description isLoading={false} />
+        <Description {...defaultProps} />
       </MockHookWrapperComponent>
     );
 

x-pack/plugins/cases/public/components/create/description.tsx

@@ -17,11 +17,12 @@ import { ID as LensPluginId } from '../markdown_editor/plugins/lens/constants';
 
 interface Props {
   isLoading: boolean;
+  draftStorageKey: string;
 }
 
 export const fieldName = 'description';
 
-const DescriptionComponent: React.FC<Props> = ({ isLoading }) => {
+const DescriptionComponent: React.FC<Props> = ({ isLoading, draftStorageKey }) => {
   const { draftComment, hasIncomingLensState, openLensModal, clearDraftComment } =
     useLensDraftComment();
   const { setFieldValue } = useFormContext();
@@ -62,6 +63,7 @@ const DescriptionComponent: React.FC<Props> = ({ isLoading }) => {
         caseTitle: title,
         caseTags: tags,
         disabledUiPlugins,
+        draftStorageKey,
       }}
     />
   );

x-pack/plugins/cases/public/components/create/form.test.tsx

@@ -7,7 +7,8 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { act, render, within } from '@testing-library/react';
+import { act, render, within, fireEvent } from '@testing-library/react';
+import { waitFor } from '@testing-library/dom';
 import { licensingMock } from '@kbn/licensing-plugin/public/mocks';
 
 import { NONE_CONNECTOR_ID } from '../../../common/api';
@@ -53,6 +54,7 @@ const casesFormProps: CreateCaseFormProps = {
 
 describe('CreateCaseForm', () => {
   let globalForm: FormHook;
+  const draftStorageKey = `cases.caseView.createCase.description.markdownEditor`;
 
   const MockHookWrapperComponent: React.FC<{ testProviderProps?: unknown }> = ({
     children,
@@ -80,6 +82,10 @@ describe('CreateCaseForm', () => {
     useCaseConfigureMock.mockImplementation(() => useCaseConfigureResponse);
   });
 
+  afterEach(() => {
+    sessionStorage.removeItem(draftStorageKey);
+  });
+
   it('renders with steps', async () => {
     const wrapper = mount(
       <MockHookWrapperComponent>
@@ -212,4 +218,46 @@ describe('CreateCaseForm', () => {
     expect(titleInput).toHaveValue('title');
     expect(descriptionInput).toHaveValue('description');
   });
+
+  describe('draft comment ', () => {
+    it('should clear session storage key on cancel', () => {
+      const result = render(
+        <MockHookWrapperComponent>
+          <CreateCaseForm
+            {...casesFormProps}
+            initialValue={{ title: 'title', description: 'description' }}
+          />
+        </MockHookWrapperComponent>
+      );
+
+      const cancelBtn = result.getByTestId('create-case-cancel');
+
+      fireEvent.click(cancelBtn);
+
+      fireEvent.click(result.getByTestId('confirmModalConfirmButton'));
+
+      expect(casesFormProps.onCancel).toHaveBeenCalled();
+      expect(sessionStorage.getItem(draftStorageKey)).toBe(null);
+    });
+
+    it('should clear session storage key on submit', () => {
+      const result = render(
+        <MockHookWrapperComponent>
+          <CreateCaseForm
+            {...casesFormProps}
+            initialValue={{ title: 'title', description: 'description' }}
+          />
+        </MockHookWrapperComponent>
+      );
+
+      const submitBtn = result.getByTestId('create-case-submit');
+
+      fireEvent.click(submitBtn);
+
+      waitFor(() => {
+        expect(casesFormProps.onSuccess).toHaveBeenCalled();
+        expect(sessionStorage.getItem(draftStorageKey)).toBe(null);
+      });
+    });
+  });
 });