[Cases] [104391] Prevent onSave error when field has not changed (#118825) (#119111)

* [Cases] [104391] Update onSave call to confirm a change before attempting to save.

* Update tests

* Fixes from PR

Co-authored-by: Kristof-Pierre Cummings <kristofpierre.cummings@elastic.co>

Co-authored-by: Kristof C <kpac.ja@gmail.com>
Co-authored-by: Kristof-Pierre Cummings <kristofpierre.cummings@elastic.co>

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

@@ -11,7 +11,6 @@ import { waitFor } from '@testing-library/react';
 // eslint-disable-next-line @kbn/eslint/module_migration
 import routeData from 'react-router';
 
-import { getFormMock, useFormMock, useFormDataMock } from '../__mock__/form';
 import { useUpdateComment } from '../../containers/use_update_comment';
 import {
   basicCase,
@@ -71,9 +70,6 @@ describe(`UserActionTree`, () => {
       isLoadingIds: [],
       patchComment,
     }));
-    const formHookMock = getFormMock(sampleData);
-    useFormMock.mockImplementation(() => ({ form: formHookMock }));
-    useFormDataMock.mockImplementation(() => [{ content: sampleData.content, comment: '' }]);
 
     jest
       .spyOn(routeData, 'useParams')
@@ -259,6 +255,13 @@ describe(`UserActionTree`, () => {
       .first()
       .simulate('click');
 
+    wrapper
+      .find(`.euiMarkdownEditorTextArea`)
+      .first()
+      .simulate('change', {
+        target: { value: sampleData.content },
+      });
+
     wrapper
       .find(
         `[data-test-subj="comment-create-action-${props.data.comments[0].id}"] [data-test-subj="user-action-save-markdown"]`
@@ -304,6 +307,13 @@ describe(`UserActionTree`, () => {
       .first()
       .simulate('click');
 
+    wrapper
+      .find(`.euiMarkdownEditorTextArea`)
+      .first()
+      .simulate('change', {
+        target: { value: sampleData.content },
+      });
+
     wrapper
       .find(`[data-test-subj="description-action"] [data-test-subj="user-action-save-markdown"]`)
       .first()
@@ -322,22 +332,17 @@ describe(`UserActionTree`, () => {
     });
   });
 
-  it('quotes', async () => {
-    const commentData = {
-      comment: '',
-    };
-    const setFieldValue = jest.fn();
+  it('shows quoted text in last MarkdownEditorTextArea', async () => {
+    const quoteableText = `> ${defaultProps.data.description} \n\n`;
 
-    const formHookMock = getFormMock(commentData);
-    useFormMock.mockImplementation(() => ({ form: { ...formHookMock, setFieldValue } }));
-
-    const props = defaultProps;
     const wrapper = mount(
       <TestProviders>
-        <UserActionTree {...props} />
+        <UserActionTree {...defaultProps} />
       </TestProviders>
     );
 
+    expect(wrapper.find(`.euiMarkdownEditorTextArea`).text()).not.toContain(quoteableText);
+
     wrapper
       .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-ellipses"]`)
       .first()
@@ -347,8 +352,9 @@ describe(`UserActionTree`, () => {
       .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-quote"]`)
       .first()
       .simulate('click');
+
     await waitFor(() => {
-      expect(setFieldValue).toBeCalledWith('comment', `> ${props.data.description} \n\n`);
+      expect(wrapper.find(`.euiMarkdownEditorTextArea`).text()).toContain(quoteableText);
     });
   });
 

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

@@ -13,6 +13,7 @@ import { waitFor } from '@testing-library/react';
 const onChangeEditable = jest.fn();
 const onSaveContent = jest.fn();
 
+const newValue = 'Hello from Tehas';
 const hyperlink = `[hyperlink](http://elastic.co)`;
 const defaultProps = {
   content: `A link to a timeline ${hyperlink}`,
@@ -37,19 +38,41 @@ describe('UserActionMarkdown ', () => {
     expect(wrapper.find(`[data-test-subj="markdown-link"]`).first().text()).toContain('hyperlink');
   });
 
-  it('Save button click calls onSaveContent and onChangeEditable', async () => {
+  it('Save button click calls onSaveContent and onChangeEditable when text area value changed', async () => {
     const wrapper = mount(
       <TestProviders>
         <UserActionMarkdown {...defaultProps} />
       </TestProviders>
     );
+
+    wrapper
+      .find(`.euiMarkdownEditorTextArea`)
+      .first()
+      .simulate('change', {
+        target: { value: newValue },
+      });
+
     wrapper.find(`[data-test-subj="user-action-save-markdown"]`).first().simulate('click');
 
     await waitFor(() => {
-      expect(onSaveContent).toHaveBeenCalledWith(defaultProps.content);
+      expect(onSaveContent).toHaveBeenCalledWith(newValue);
       expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id);
     });
   });
+  it('Does not call onSaveContent if no change from current text', async () => {
+    const wrapper = mount(
+      <TestProviders>
+        <UserActionMarkdown {...defaultProps} />
+      </TestProviders>
+    );
+
+    wrapper.find(`[data-test-subj="user-action-save-markdown"]`).first().simulate('click');
+
+    await waitFor(() => {
+      expect(onChangeEditable).toHaveBeenCalledWith(defaultProps.id);
+    });
+    expect(onSaveContent).not.toHaveBeenCalled();
+  });
   it('Cancel button click calls only onChangeEditable', async () => {
     const wrapper = mount(
       <TestProviders>

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

@@ -49,11 +49,12 @@ export const UserActionMarkdown = forwardRef<UserActionMarkdownRefObject, UserAc
 
     const handleSaveAction = useCallback(async () => {
       const { isValid, data } = await submit();
-      if (isValid) {
+
+      if (isValid && data.content !== content) {
         onSaveContent(data.content);
       }
       onChangeEditable(id);
-    }, [id, onChangeEditable, onSaveContent, submit]);
+    }, [content, id, onChangeEditable, onSaveContent, submit]);
 
     const setComment = useCallback(
       (newComment) => {