Use new form data hook

elastic · Sep 15, 2020 · 5859391 · 5859391
1 parent c02ee6f
commit 5859391
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 50 deletions.
diff --git a/x-pack/plugins/security_solution/public/cases/components/__mock__/form.ts b/x-pack/plugins/security_solution/public/cases/components/__mock__/form.ts
@@ -4,9 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { useForm } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form';
+import { useFormData } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form_data';
+
 jest.mock(
   '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
 );
+jest.mock(
+  '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form_data'
+);
+
 export const mockFormHook = {
   isSubmitted: false,
   isSubmitting: false,
@@ -41,3 +47,4 @@ export const getFormMock = (sampleData: any) => ({
 });
 
 export const useFormMock = useForm as jest.Mock;
+export const useFormDataMock = useFormData as jest.Mock;
diff --git a/x-pack/plugins/security_solution/public/cases/components/add_comment/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/add_comment/index.test.tsx
@@ -15,6 +15,7 @@ import { Router, routeData, mockHistory, mockLocation } from '../__mock__/router
 import { useInsertTimeline } from '../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline';
 import { usePostComment } from '../../containers/use_post_comment';
 import { useForm } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form';
+import { useFormData } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form_data';
 
 // we don't have the types for waitFor just yet, so using "as waitFor" until when we do
 import { wait as waitFor } from '@testing-library/react';
@@ -23,10 +24,15 @@ jest.mock(
   '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
 );
 
+jest.mock(
+  '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form_data'
+);
+
 jest.mock('../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline');
 jest.mock('../../containers/use_post_comment');
 
-export const useFormMock = useForm as jest.Mock;
+const useFormMock = useForm as jest.Mock;
+const useFormDataMock = useFormData as jest.Mock;
 
 const useInsertTimelineMock = useInsertTimeline as jest.Mock;
 const usePostCommentMock = usePostComment as jest.Mock;
@@ -73,6 +79,7 @@ describe('AddComment ', () => {
     useInsertTimelineMock.mockImplementation(() => defaultInsertTimeline);
     usePostCommentMock.mockImplementation(() => defaultPostCommment);
     useFormMock.mockImplementation(() => ({ form: formHookMock }));
+    useFormDataMock.mockImplementation(() => [{ comment: sampleData.comment }]);
     jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
   });
 

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
@@ -14,7 +14,7 @@ import { Case } from '../../containers/types';
 import { MarkdownEditorForm } from '../../../common/components/markdown_editor/form';
 import { InsertTimelinePopover } from '../../../timelines/components/timeline/insert_timeline_popover';
 import { useInsertTimeline } from '../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline';
-import { Form, useForm, UseField } from '../../../shared_imports';
+import { Form, useForm, UseField, useFormData } from '../../../shared_imports';
 
 import * as i18n from './translations';
 import { schema } from './schema';
@@ -46,23 +46,31 @@ export const AddComment = React.memo(
   forwardRef<AddCommentRefObject, AddCommentProps>(
     ({ caseId, disabled, showLoading = true, onCommentPosted, onCommentSaving }, ref) => {
       const { isLoading, postComment } = usePostComment(caseId);
+
       const { form } = useForm<CommentRequest>({
         defaultValue: initialCommentValue,
         options: { stripEmptyFields: false },
         schema,
       });
-      const { getFormData, setFieldValue, reset, submit } = form;
-      const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline<CommentRequest>(
-        form,
-        'comment'
+
+      const fieldName = 'comment';
+      const { setFieldValue, reset, submit } = form;
+      const [{ comment }] = useFormData({ form, watch: [fieldName] });
+
+      const onCommentChange = useCallback((newValue) => setFieldValue(fieldName, newValue), [
+        setFieldValue,
+      ]);
+
+      const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline(
+        comment,
+        onCommentChange
       );
 
       const addQuote = useCallback(
         (quote) => {
-          const { comment } = getFormData();
-          setFieldValue('comment', `${comment}${comment.length > 0 ? '\n\n' : ''}${quote}`);
+          setFieldValue(fieldName, `${comment}${comment.length > 0 ? '\n\n' : ''}${quote}`);
         },
-        [getFormData, setFieldValue]
+        [comment, setFieldValue]
       );
 
       useImperativeHandle(ref, () => ({
@@ -87,7 +95,7 @@ export const AddComment = React.memo(
           {isLoading && showLoading && <MySpinner data-test-subj="loading-spinner" size="xl" />}
           <Form form={form}>
             <UseField
-              path="comment"
+              path={fieldName}
               component={MarkdownEditorForm}
               componentProps={{
                 idAria: 'caseComment',

diff --git a/x-pack/plugins/security_solution/public/cases/components/create/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/create/index.test.tsx
@@ -16,16 +16,23 @@ import { useInsertTimeline } from '../../../timelines/components/timeline/insert
 import { usePostCase } from '../../containers/use_post_case';
 import { useGetTags } from '../../containers/use_get_tags';
 
-jest.mock('../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline');
-jest.mock('../../containers/use_post_case');
 import { useForm } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form';
+import { useFormData } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form_data';
 
 // we don't have the types for waitFor just yet, so using "as waitFor" until when we do
 import { wait as waitFor } from '@testing-library/react';
 
+jest.mock('../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline');
+jest.mock('../../containers/use_post_case');
+
 jest.mock(
   '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
 );
+
+jest.mock(
+  '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form_data'
+);
+
 jest.mock('../../containers/use_get_tags');
 jest.mock(
   '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/components/form_data_provider',
@@ -35,7 +42,8 @@ jest.mock(
   })
 );
 
-export const useFormMock = useForm as jest.Mock;
+const useFormMock = useForm as jest.Mock;
+const useFormDataMock = useFormData as jest.Mock;
 
 const useInsertTimelineMock = useInsertTimeline as jest.Mock;
 const usePostCaseMock = usePostCase as jest.Mock;
@@ -83,6 +91,7 @@ describe('Create case', () => {
     useInsertTimelineMock.mockImplementation(() => defaultInsertTimeline);
     usePostCaseMock.mockImplementation(() => defaultPostCase);
     useFormMock.mockImplementation(() => ({ form: formHookMock }));
+    useFormDataMock.mockImplementation(() => [{ description: sampleData.description }]);
     jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
     (useGetTags as jest.Mock).mockImplementation(() => ({
       tags: sampleTags,

diff --git a/x-pack/plugins/security_solution/public/cases/components/create/index.tsx b/x-pack/plugins/security_solution/public/cases/components/create/index.tsx
@@ -24,6 +24,7 @@ import {
   useForm,
   UseField,
   FormDataProvider,
+  useFormData,
 } from '../../../shared_imports';
 import { usePostCase } from '../../containers/use_post_case';
 import { schema } from './schema';
@@ -69,13 +70,18 @@ export const Create = React.memo(() => {
     options: { stripEmptyFields: false },
     schema,
   });
-  const { submit } = form;
+
+  const fieldName = 'description';
+  const { submit, setFieldValue } = form;
+  const [{ description }] = useFormData({ form, watch: [fieldName] });
+
   const { tags: tagOptions } = useGetTags();
   const [options, setOptions] = useState(
     tagOptions.map((label) => ({
       label,
     }))
   );
+
   useEffect(
     () =>
       setOptions(
@@ -85,10 +91,16 @@ export const Create = React.memo(() => {
       ),
     [tagOptions]
   );
-  const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline<CasePostRequest>(
-    form,
-    'description'
+
+  const onDescriptionChange = useCallback((newValue) => setFieldValue(fieldName, newValue), [
+    setFieldValue,
+  ]);
+
+  const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline(
+    description,
+    onDescriptionChange
   );
+
   const handleTimelineClick = useTimelineClick();
 
   const onSubmit = useCallback(async () => {
@@ -141,7 +153,7 @@ export const Create = React.memo(() => {
         </Container>
         <ContainerBig>
           <UseField
-            path="description"
+            path={fieldName}
             component={MarkdownEditorForm}
             componentProps={{
               dataTestSubj: 'caseDescription',