Replace all 'render' props to 'children' props in Formik elements (#238)

* pass render function as a child instead of using props for <Formik> <Field> and <FieldArray> * update jest snapshot files
opendistro-for-elasticsearch · Feb 5, 2021 · e4fab48 · e4fab48
1 parent 1029b84
commit e4fab48
Show file tree

Hide file tree

Showing 29 changed files with 99 additions and 143 deletions.
diff --git a/public/components/FormControls/FormikInputWrapper/FormikInputWrapper.js b/public/components/FormControls/FormikInputWrapper/FormikInputWrapper.js
@@ -18,7 +18,9 @@ import PropTypes from 'prop-types';
 import { Field } from 'formik';
 
 const FormikInputWrapper = ({ name, fieldProps, render }) => (
-  <Field name={name} {...fieldProps} render={({ field, form }) => render({ field, form })} />
+  <Field name={name} {...fieldProps}>
+    {({ field, form }) => render({ field, form })}
+  </Field>
 );
 
 FormikInputWrapper.propTypes = {

diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/MonitorExpressions.test.js b/public/pages/CreateMonitor/components/MonitorExpressions/MonitorExpressions.test.js
@@ -23,10 +23,9 @@ import MonitorExpressions from './MonitorExpressions';
 describe('MonitorExpressions', () => {
   test('renders', () => {
     const component = (
-      <Formik
-        initialValues={FORMIK_INITIAL_VALUES}
-        render={() => <MonitorExpressions onRunQuery={() => {}} dataTypes={[]} ofEnabled={false} />}
-      />
+      <Formik initialValues={FORMIK_INITIAL_VALUES}>
+        {() => <MonitorExpressions onRunQuery={() => {}} dataTypes={[]} ofEnabled={false} />}
+      </Formik>
     );
 
     expect(render(component)).toMatchSnapshot();

diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/ForExpression.test.js b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/ForExpression.test.js
@@ -24,17 +24,16 @@ import { DEFAULT_CLOSED_STATES } from '../MonitorExpressions';
 describe('ForExpression', () => {
   test('renders', () => {
     const component = (
-      <Formik
-        initialValues={FORMIK_INITIAL_VALUES}
-        render={props => (
+      <Formik initialValues={FORMIK_INITIAL_VALUES}>
+        {(props) => (
           <ForExpression
             formik={props}
             openedStates={DEFAULT_CLOSED_STATES}
             openExpression={() => {}}
             closeExpression={() => {}}
           />
         )}
-      />
+      </Formik>
     );
 
     expect(render(component)).toMatchSnapshot();

diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/OfExpression.test.js b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/OfExpression.test.js
@@ -24,9 +24,8 @@ import { DEFAULT_CLOSED_STATES } from '../MonitorExpressions';
 describe('OfExpression', () => {
   test('renders', () => {
     const component = (
-      <Formik
-        initialValues={FORMIK_INITIAL_VALUES}
-        render={props => (
+      <Formik initialValues={FORMIK_INITIAL_VALUES}>
+        {(props) => (
           <OfExpression
             formik={props}
             openedStates={DEFAULT_CLOSED_STATES}
@@ -35,7 +34,7 @@ describe('OfExpression', () => {
             dataTypes={[]}
           />
         )}
-      />
+      </Formik>
     );
 
     expect(render(component)).toMatchSnapshot();

diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/OverExpression.test.js b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/OverExpression.test.js
@@ -24,17 +24,16 @@ import { DEFAULT_CLOSED_STATES } from '../MonitorExpressions';
 describe('OverExpression', () => {
   test('renders', () => {
     const component = (
-      <Formik
-        initialValues={FORMIK_INITIAL_VALUES}
-        render={props => (
+      <Formik initialValues={FORMIK_INITIAL_VALUES}>
+        {(props) => (
           <OverExpression
             formik={props}
             openedStates={DEFAULT_CLOSED_STATES}
             openExpression={() => {}}
             closeExpression={() => {}}
           />
         )}
-      />
+      </Formik>
     );
 
     expect(render(component)).toMatchSnapshot();

diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhenExpression.test.js b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhenExpression.test.js
@@ -24,17 +24,16 @@ import { DEFAULT_CLOSED_STATES } from '../MonitorExpressions';
 describe('WhenExpression', () => {
   test('renders', () => {
     const component = (
-      <Formik
-        initialValues={FORMIK_INITIAL_VALUES}
-        render={props => (
+      <Formik initialValues={FORMIK_INITIAL_VALUES}>
+        {(props) => (
           <WhenExpression
             formik={props}
             openedStates={DEFAULT_CLOSED_STATES}
             openExpression={() => {}}
             closeExpression={() => {}}
           />
         )}
-      />
+      </Formik>
     );
 
     expect(render(component)).toMatchSnapshot();

diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhereExpression.test.js b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhereExpression.test.js
@@ -31,9 +31,8 @@ const dataTypes = {
 const openExpression = jest.fn();
 const closeExpression = jest.fn();
 const getMountWrapper = (state = false) => (
-  <Formik
-    initialValues={FORMIK_INITIAL_VALUES}
-    render={(props) => (
+  <Formik initialValues={FORMIK_INITIAL_VALUES}>
+    {(props) => (
       <WhereExpression
         formik={props}
         dataTypes={dataTypes}
@@ -43,7 +42,7 @@ const getMountWrapper = (state = false) => (
         onMadeChanges={jest.fn()}
       />
     )}
-  />
+  </Formik>
 );
 
 describe('WhereExpression', () => {

diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js
@@ -22,20 +22,17 @@ import TimezoneComboBox from './TimezoneComboBox';
 const Daily = () => (
   <EuiFlexGroup direction="column" style={{ paddingLeft: '10px', marginTop: '5px' }}>
     <EuiFlexItem style={{ marginTop: '0px' }}>
-      <Field
-        name="daily"
-        render={({
+      <Field name="daily">
+        {({
           field: { value, onChange, onBlur, ...rest },
           form: { touched, errors, setFieldValue },
         }) => (
           <EuiFormRow label="Around" style={{ marginTop: '0px' }}>
             <EuiDatePicker
               showTimeSelect
               showTimeSelectOnly
-              selected={moment()
-                .hours(value)
-                .minutes(0)}
-              onChange={date => {
+              selected={moment().hours(value).minutes(0)}
+              onChange={(date) => {
                 setFieldValue('daily', date.hours());
               }}
               dateFormat="hh:mm A"
@@ -44,7 +41,7 @@ const Daily = () => (
             />
           </EuiFormRow>
         )}
-      />
+      </Field>
     </EuiFlexItem>
     <EuiFlexItem style={{ marginTop: '0px' }}>
       <TimezoneComboBox />

diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js
@@ -28,7 +28,7 @@ const checkboxFlexItem = (day, checked, setFieldValue, setFieldTouched) => (
       id={day}
       label={_.startCase(day)}
       checked={checked}
-      onChange={e => {
+      onChange={(e) => {
         setFieldValue(`weekly.${day}`, e.target.checked);
       }}
       onBlur={() => setFieldTouched('weekly')}
@@ -37,29 +37,27 @@ const checkboxFlexItem = (day, checked, setFieldValue, setFieldTouched) => (
   </EuiFlexItem>
 );
 
-const validate = value => {
+const validate = (value) => {
   const booleans = Object.values(value);
-  if (!booleans.some(bool => bool)) return 'Must select at least one weekday';
+  if (!booleans.some((bool) => bool)) return 'Must select at least one weekday';
 };
 
 const Weekly = () => (
   <Fragment>
-    <Field
-      name="weekly"
-      validate={validate}
-      render={({ field: { value }, form: { touched, errors, setFieldValue, setFieldTouched } }) => (
+    <Field name="weekly" validate={validate}>
+      {({ field: { value }, form: { touched, errors, setFieldValue, setFieldTouched } }) => (
         <EuiFormRow
           label="Every"
           isInvalid={touched.weekly && !!errors.weekly}
           error={errors.weekly}
           style={{ paddingLeft: '10px', marginTop: '5px' }}
         >
           <EuiFlexGroup alignItems="center">
-            {days.map(day => checkboxFlexItem(day, value[day], setFieldValue, setFieldTouched))}
+            {days.map((day) => checkboxFlexItem(day, value[day], setFieldValue, setFieldTouched))}
           </EuiFlexGroup>
         </EuiFormRow>
       )}
-    />
+    </Field>
     <Daily />
   </Fragment>
 );

diff --git a/public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/AnomalyDetector.test.js b/public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/AnomalyDetector.test.js
@@ -29,12 +29,11 @@ const renderEmptyMessage = jest.fn();
 function getMountWrapper() {
   return mount(
     <CoreContext.Provider value={{ http: httpClientMock }}>
-      <Formik
-        initialValues={FORMIK_INITIAL_VALUES}
-        render={({ values }) => (
+      <Formik initialValues={FORMIK_INITIAL_VALUES}>
+        {({ values }) => (
           <AnomalyDetectors values={values} renderEmptyMessage={renderEmptyMessage} />
         )}
-      />
+      </Formik>
     </CoreContext.Provider>
   );
 }

diff --git a/...eMonitor/containers/AnomalyDetectors/__tests__/__snapshots__/AnomalyDetector.test.js.snap b/...eMonitor/containers/AnomalyDetectors/__tests__/__snapshots__/AnomalyDetector.test.js.snap
@@ -53,7 +53,6 @@ exports[`AnomalyDetectors renders 1`] = `
       },
     }
   }
-  render={[Function]}
 >
   <AnomalyDetectors
     renderEmptyMessage={[MockFunction]}
@@ -156,7 +155,6 @@ exports[`AnomalyDetectors renders 1`] = `
         >
           <Field
             name="detectorId"
-            render={[Function]}
             validate={[Function]}
           >
             <FormikFormRow

diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js b/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
@@ -133,11 +133,8 @@ export default class CreateMonitor extends Component {
     const { edit, httpClient, monitorToEdit, notifications, isDarkMode } = this.props;
     return (
       <div style={{ padding: '25px 50px' }}>
-        <Formik
-          initialValues={initialValues}
-          onSubmit={this.onSubmit}
-          validateOnChange={false}
-          render={({ values, errors, handleSubmit, isSubmitting, isValid }) => (
+        <Formik initialValues={initialValues} onSubmit={this.onSubmit} validateOnChange={false}>
+          {({ values, errors, handleSubmit, isSubmitting, isValid }) => (
             <Fragment>
               <EuiTitle size="l">
                 <h1>{edit ? 'Edit' : 'Create'} monitor</h1>
@@ -182,7 +179,7 @@ export default class CreateMonitor extends Component {
               />
             </Fragment>
           )}
-        />
+        </Formik>
       </div>
     );
   }

diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/__snapshots__/CreateMonitor.test.js.snap b/public/pages/CreateMonitor/containers/CreateMonitor/__snapshots__/CreateMonitor.test.js.snap
@@ -61,8 +61,9 @@ exports[`CreateMonitor renders 1`] = `
       }
     }
     onSubmit={[Function]}
-    render={[Function]}
     validateOnChange={false}
-  />
+  >
+    <Component />
+  </Formik>
 </div>
 `;
diff --git a/public/pages/CreateMonitor/containers/MonitorIndex/MonitorIndex.test.js b/public/pages/CreateMonitor/containers/MonitorIndex/MonitorIndex.test.js
@@ -31,10 +31,9 @@ const runAllPromises = () => new Promise(setImmediate);
 
 function getMountWrapper(customProps = {}) {
   return mount(
-    <Formik
-      initialValues={FORMIK_INITIAL_VALUES}
-      render={() => <MonitorIndex httpClient={httpClientMock} {...customProps} />}
-    />
+    <Formik initialValues={FORMIK_INITIAL_VALUES}>
+      {() => <MonitorIndex httpClient={httpClientMock} {...customProps} />}
+    </Formik>
   );
 }
 

diff --git a/public/pages/CreateMonitor/containers/MonitorIndex/__snapshots__/MonitorIndex.test.js.snap b/public/pages/CreateMonitor/containers/MonitorIndex/__snapshots__/MonitorIndex.test.js.snap
@@ -53,7 +53,6 @@ exports[`MonitorIndex renders 1`] = `
       },
     }
   }
-  render={[Function]}
 >
   <MonitorIndex
     httpClient={[MockFunction]}
@@ -113,7 +112,6 @@ exports[`MonitorIndex renders 1`] = `
       >
         <Field
           name="index"
-          render={[Function]}
           validate={[Function]}
         >
           <FormikFormRow

diff --git a/public/pages/CreateTrigger/components/Action/actions/Message.test.js b/public/pages/CreateTrigger/components/Action/actions/Message.test.js
@@ -23,8 +23,8 @@ jest.mock('@elastic/eui/lib/components/form/form_row/make_id', () => () => 'test
 
 function getRenderWrapper(customProps = {}) {
   return render(
-    <Formik
-      render={() => (
+    <Formik>
+      {() => (
         <Message
           action={{
             message_template: {
@@ -39,7 +39,7 @@ function getRenderWrapper(customProps = {}) {
           setFlyout={jest.fn()}
         />
       )}
-    />
+    </Formik>
   );
 }
 

diff --git a/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.js b/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.js
@@ -67,23 +67,21 @@ class TriggerExpressions extends Component {
           }}
         >
           <EuiFlexItem grow={false} style={{ width: 150 }}>
-            <Field
-              name={keyFieldName}
-              render={({ field: { onBlur, ...rest }, form: { touched, errors } }) => (
+            <Field name={keyFieldName}>
+              {({ field: { onBlur, ...rest }, form: { touched, errors } }) => (
                 <EuiFormRow
                   isInvalid={touched.thresholdEnum && !!errors.thresholdEnum}
                   error={errors.thresholdEnum}
                 >
                   <EuiSelect options={THRESHOLD_ENUM_OPTIONS} {...rest} />
                 </EuiFormRow>
               )}
-            />
+            </Field>
           </EuiFlexItem>
 
           <EuiFlexItem grow={false} style={{ width: 100 }}>
-            <Field
-              name={valueFieldName}
-              render={({ field, form: { touched, errors } }) => (
+            <Field name={valueFieldName}>
+              {({ field, form: { touched, errors } }) => (
                 <EuiFormRow
                   style={{ paddingLeft: '10px' }}
                   isInvalid={touched.thresholdValue && !!errors.thresholdValue}
@@ -92,7 +90,7 @@ class TriggerExpressions extends Component {
                   <EuiFieldNumber {...field} />
                 </EuiFormRow>
               )}
-            />
+            </Field>
           </EuiFlexItem>
         </EuiFlexGroup>
       </div>

diff --git a/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.test.js b/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.test.js
@@ -32,7 +32,7 @@ describe('TriggerExpressions', () => {
   });
 
   test('calls openExpression when clicking expression', () => {
-    const wrapper = mount(<Formik render={() => <TriggerExpressions {...props} />} />);
+    const wrapper = mount(<Formik children={() => <TriggerExpressions {...props} />} />);
     const openExpression = jest.spyOn(
       wrapper.find(TriggerExpressions).instance(),
       'openExpression'
@@ -48,7 +48,7 @@ describe('TriggerExpressions', () => {
   });
 
   test('calls closeExpression when closing popover', async () => {
-    const wrapper = mount(<Formik render={() => <TriggerExpressions {...props} />} />);
+    const wrapper = mount(<Formik children={() => <TriggerExpressions {...props} />} />);
     const openExpression = jest.spyOn(
       wrapper.find(TriggerExpressions).instance(),
       'openExpression'