Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Form lib] Correctly add field to form on component mount #75796

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
b852854
Refactor use_field and use_form to correctly add field
sebelga Aug 24, 2020
18adb6d
[Security solution] Update RuleActionsField comp to not rely on the f…
sebelga Aug 24, 2020
e378a2f
Fix pipeline processors
sebelga Aug 24, 2020
31d9e3b
Update mappings editor to use memoize config and validation for fields
sebelga Aug 24, 2020
4f80819
Fix component integration tests
sebelga Aug 24, 2020
abbda2c
Fix TS issue
sebelga Aug 25, 2020
5afe601
[Form lib] FromDataProvider don't render anything until fields have m…
sebelga Aug 25, 2020
73c86a7
[Security solution] Fix riskScore form fields
sebelga Aug 25, 2020
bca378b
[Security solution] Fix security level form fields
sebelga Aug 25, 2020
d0f02db
[Form lib] Update form defaultValue whenever prop changes
sebelga Aug 25, 2020
4f8e5a7
Merge remote-tracking branch 'upstream/master' into bug/form-lib-addf…
sebelga Aug 25, 2020
9ccde27
Fix i18n issue
sebelga Aug 25, 2020
e3d5594
Merge branch 'master' into bug/form-lib-addfield-on-component-mount
elasticmachine Aug 25, 2020
fb8de5c
Fix jest test
sebelga Aug 26, 2020
55593c1
Merge branch 'bug/form-lib-addfield-on-component-mount' of github.com…
sebelga Aug 26, 2020
d04098b
Merge remote-tracking branch 'upstream/master' into bug/form-lib-addf…
sebelga Aug 26, 2020
ef8aa16
Merge branch 'master' into bug/form-lib-addfield-on-component-mount
elasticmachine Aug 26, 2020
bd693da
RiskScore: don't convert empty string to number
sebelga Aug 26, 2020
20e723d
Merge branch 'bug/form-lib-addfield-on-component-mount' of github.com…
sebelga Aug 26, 2020
c529e80
Put back "severity" and "riskScore" in the form schema
sebelga Aug 26, 2020
44b5572
Add test coverage to FormDataProvider to subscribe to updated form value
sebelga Aug 26, 2020
b0c271f
Merge branch 'master' into bug/form-lib-addfield-on-component-mount
elasticmachine Aug 27, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import React, { useState } from 'react';
import { act } from 'react-dom/test-utils';

import { registerTestBed, TestBed } from '../shared_imports';
Expand All @@ -36,13 +36,14 @@ describe('<FormDataProvider />', () => {
return (
<Form form={form}>
<UseField path="name" defaultValue="Initial value" data-test-subj="nameField" />
<UseField path="lastName" defaultValue="Initial value" data-test-subj="lastNameField" />
<FormDataProvider>
{(formData) => {
onFormData(formData);
return null;
}}
</FormDataProvider>
{/* Putting one field below to make sure the order in the DOM does not affect behaviour */}
<UseField path="lastName" defaultValue="Initial value" data-test-subj="lastNameField" />
</Form>
);
};
Expand Down Expand Up @@ -95,6 +96,63 @@ describe('<FormDataProvider />', () => {
});
});

test('should subscribe to the latest updated form data when mounting late', async () => {
const onFormData = jest.fn();

const TestComp = () => {
const { form } = useForm();
const [isOn, setIsOn] = useState(false);

return (
<Form form={form}>
<UseField path="name" defaultValue="Initial value" data-test-subj="nameField" />
<button onClick={() => setIsOn(true)} data-test-subj="btn">
Toggle On
</button>
{isOn && (
<FormDataProvider>
{(formData) => {
onFormData(formData);
return null;
}}
</FormDataProvider>
)}
</Form>
);
};

const setup = registerTestBed(TestComp, {
memoryRouter: { wrapComponent: false },
});

const {
form: { setInputValue },
find,
} = setup() as TestBed;

expect(onFormData.mock.calls.length).toBe(0); // Not present in the DOM yet

// Make some changes to the form fields
await act(async () => {
setInputValue('nameField', 'updated value');
});

// Update state to trigger the mounting of the FormDataProvider
await act(async () => {
find('btn').simulate('click').update();
});

expect(onFormData.mock.calls.length).toBe(1);

const [formDataUpdated] = onFormData.mock.calls[onFormData.mock.calls.length - 1] as Parameters<
OnUpdateHandler
>;

expect(formDataUpdated).toEqual({
name: 'updated value',
});
});

test('props.pathsToWatch (string): should not re-render the children when the field that changed is not the one provided', async () => {
const onFormData = jest.fn();

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export const FormDataProvider = React.memo(({ children, pathsToWatch }: Props) =
const form = useFormContext();
const { subscribe } = form;
const previousRawData = useRef<FormData>(form.__getFormData$().value);
const isMounted = useRef(false);
const [formData, setFormData] = useState<FormData>(previousRawData.current);

const onFormData = useCallback(
Expand Down Expand Up @@ -59,5 +60,17 @@ export const FormDataProvider = React.memo(({ children, pathsToWatch }: Props) =
return subscription.unsubscribe;
}, [subscribe, onFormData]);

useEffect(() => {
isMounted.current = true;
return () => {
isMounted.current = false;
};
}, []);

if (!isMounted.current && Object.keys(formData).length === 0) {
// No field has mounted yet, don't render anything
return null;
}

return children(formData);
});
Loading