update Formik formatting to remove warnings

awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx

@@ -13,9 +13,8 @@ function VariablesField({ id, name, label, readOnly }) {
   const [mode, setMode] = useState(YAML_MODE);
 
   return (
-    <Field
+    <Field name={name}>
-      name={name}
+      {({ field, form }) => (
-      render={({ field, form }) => (
         <div className="pf-c-form__group">
           <Split gutter="sm">
             <SplitItem>
@@ -60,7 +59,7 @@ function VariablesField({ id, name, label, readOnly }) {
           ) : null}
         </div>
       )}
-    />
+    </Field>
   );
 }
 VariablesField.propTypes = {

awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import { Formik } from 'formik';
-import { sleep } from '../../../testUtils/testUtils';
 import VariablesField from './VariablesField';
 
 describe('VariablesField', () => {
@@ -13,12 +12,11 @@ describe('VariablesField', () => {
   it('should render code mirror input', () => {
     const value = '---\n';
     const wrapper = mount(
-      <Formik
+      <Formik initialValues={{ variables: value }}>
-        initialValues={{ variables: value }}
+        {() => (
-        render={() => (
           <VariablesField id="the-field" name="variables" label="Variables" />
         )}
-      />
+      </Formik>
     );
     const codemirror = wrapper.find('Controlled');
     expect(codemirror.prop('value')).toEqual(value);
@@ -27,12 +25,11 @@ describe('VariablesField', () => {
   it('should render yaml/json toggles', async () => {
     const value = '---\n';
     const wrapper = mount(
-      <Formik
+      <Formik initialValues={{ variables: value }}>
-        initialValues={{ variables: value }}
+        {() => (
-        render={() => (
           <VariablesField id="the-field" name="variables" label="Variables" />
         )}
-      />
+      </Formik>
     );
     const buttons = wrapper.find('Button');
     expect(buttons).toHaveLength(2);
@@ -56,12 +53,11 @@ describe('VariablesField', () => {
   it('should set Formik error if yaml is invalid', async () => {
     const value = '---\nfoo bar\n';
     const wrapper = mount(
-      <Formik
+      <Formik initialValues={{ variables: value }}>
-        initialValues={{ variables: value }}
+        {() => (
-        render={() => (
           <VariablesField id="the-field" name="variables" label="Variables" />
         )}
-      />
+      </Formik>
     );
     wrapper
       .find('Button')
@@ -78,10 +74,8 @@ describe('VariablesField', () => {
     const value = '---\nfoo: bar\n';
     const handleSubmit = jest.fn();
     const wrapper = mount(
-      <Formik
+      <Formik initialValues={{ variables: value }} onSubmit={handleSubmit}>
-        initialValues={{ variables: value }}
+        {formik => (
-        onSubmit={handleSubmit}
-        render={formik => (
           <form onSubmit={formik.handleSubmit}>
             <VariablesField id="the-field" name="variables" label="Variables" />
             <button type="submit" id="submit">
@@ -89,7 +83,7 @@ describe('VariablesField', () => {
             </button>
           </form>
         )}
-      />
+      </Formik>
     );
     await act(async () => {
       wrapper.find('CodeMirrorInput').invoke('onChange')(

awx/ui_next/src/components/FormField/CheckboxField.jsx

@@ -11,10 +11,8 @@ const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
 
 function CheckboxField({ id, name, label, tooltip, validate, ...rest }) {
   return (
-    <Field
+    <Field name={name} validate={validate}>
-      name={name}
+      {({ field }) => (
-      validate={validate}
-      render={({ field }) => (
         <Checkbox
           aria-label={label}
           label={
@@ -37,7 +35,7 @@ function CheckboxField({ id, name, label, tooltip, validate, ...rest }) {
           }}
         />
       )}
-    />
+    </Field>
   );
 }
 CheckboxField.propTypes = {

awx/ui_next/src/components/FormField/PasswordField.jsx

@@ -22,10 +22,8 @@ function PasswordField(props) {
   };
 
   return (
-    <Field
+    <Field name={name} validate={validate}>
-      name={name}
+      {({ field, form }) => {
-      validate={validate}
-      render={({ field, form }) => {
         const isValid =
           form && (!form.touched[field.name] || !form.errors[field.name]);
         return (
@@ -65,7 +63,7 @@ function PasswordField(props) {
           </FormGroup>
         );
       }}
-    />
+    </Field>
   );
 }
 

awx/ui_next/src/components/FormField/PasswordField.test.jsx

@@ -11,10 +11,11 @@ describe('PasswordField', () => {
         initialValues={{
           password: '',
         }}
-        render={() => (
+      >
+        {() => (
           <PasswordField id="test-password" name="password" label="Password" />
         )}
-      />
+      </Formik>
     );
     expect(wrapper).toHaveLength(1);
   });
@@ -25,10 +26,11 @@ describe('PasswordField', () => {
         initialValues={{
           password: '',
         }}
-        render={() => (
+      >
+        {() => (
           <PasswordField id="test-password" name="password" label="Password" />
         )}
-      />
+      </Formik>
     );
     expect(wrapper.find('input').prop('type')).toBe('password');
     expect(wrapper.find('EyeSlashIcon').length).toBe(1);

awx/ui_next/src/screens/Host/shared/HostForm.jsx

@@ -19,7 +19,6 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
   const [inventory, setInventory] = useState(
     host ? host.summary_fields.inventory : ''
   );
-  console.log('render');
 
   return (
     <Formik
@@ -30,7 +29,8 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
         variables: host.variables,
       }}
       onSubmit={handleSubmit}
-      render={formik => (
+    >
+      {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
           <FormRow>
             <FormField
@@ -54,7 +54,8 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
                   i18n._(t`Select a value for this field`),
                   i18n
                 )}
-                render={({ form }) => (
+              >
+                {({ form }) => (
                   <InventoryLookup
                     value={inventory}
                     onBlur={() => form.setFieldTouched('inventory')}
@@ -72,7 +73,7 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
                     error={form.errors.inventory}
                   />
                 )}
-              />
+              </Field>
             )}
           </FormRow>
           <FormRow>
@@ -88,7 +89,7 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
           />
         </Form>
       )}
-    />
+    </Formik>
   );
 }
 

awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx

@@ -41,7 +41,8 @@ function InventoryForm({
       onSubmit={values => {
         onSubmit(values);
       }}
-      render={formik => (
+    >
+      {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
           <FormRow>
             <FormField
@@ -66,7 +67,8 @@ function InventoryForm({
                 i18n._(t`Select a value for this field`),
                 i18n
               )}
-              render={({ form, field }) => (
+            >
+              {({ form, field }) => (
                 <OrganizationLookup
                   helperTextInvalid={form.errors.organization}
                   isValid={
@@ -82,12 +84,13 @@ function InventoryForm({
                   required
                 />
               )}
-            />
+            </Field>
             <Field
               id="inventory-insights_credential"
               label={i18n._(t`Insights Credential`)}
               name="insights_credential"
-              render={({ field, form }) => (
+            >
+              {({ field, form }) => (
                 <CredentialLookup
                   label={i18n._(t`Insights Credential`)}
                   credentialTypeId={credentialTypeId}
@@ -97,14 +100,15 @@ function InventoryForm({
                   value={field.value}
                 />
               )}
-            />
+            </Field>
           </FormRow>
           <FormRow>
             <Field
               id="inventory-instanceGroups"
               label={i18n._(t`Instance Groups`)}
               name="instanceGroups"
-              render={({ field, form }) => (
+            >
+              {({ field, form }) => (
                 <InstanceGroupsLookup
                   value={field.value}
                   onChange={value => {
@@ -112,7 +116,7 @@ function InventoryForm({
                   }}
                 />
               )}
-            />
+            </Field>
           </FormRow>
           <FormRow>
             <VariablesField
@@ -132,7 +136,7 @@ function InventoryForm({
           </FormRow>
         </Form>
       )}
-    />
+    </Formik>
   );
 }
 

awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx

@@ -28,10 +28,8 @@ function InventoryGroupForm({
   return (
     <Card className="awx-c-card">
       <CardBody>
-        <Formik
+        <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-          initialValues={initialValues}
+          {formik => (
-          onSubmit={handleSubmit}
-          render={formik => (
             <Form autoComplete="off" onSubmit={formik.handleSubmit}>
               <FormRow css="grid-template-columns: repeat(auto-fit, minmax(300px, 500px));">
                 <FormField
@@ -63,7 +61,7 @@ function InventoryGroupForm({
               {error ? <div>error</div> : null}
             </Form>
           )}
-        />
+        </Formik>
       </CardBody>
     </Card>
   );

awx/ui_next/src/screens/Inventory/shared/InventoryHostForm.jsx

@@ -19,7 +19,8 @@ function InventoryHostForm({ handleSubmit, handleCancel, host, i18n }) {
         variables: host.variables,
       }}
       onSubmit={handleSubmit}
-      render={formik => (
+    >
+      {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
           <FormRow>
             <FormField
@@ -52,7 +53,7 @@ function InventoryHostForm({ handleSubmit, handleCancel, host, i18n }) {
           />
         </Form>
       )}
-    />
+    </Formik>
   );
 }
 

awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx

@@ -91,7 +91,8 @@ function OrganizationForm({ organization, i18n, me, onCancel, onSubmit }) {
         max_hosts: organization.max_hosts || '0',
       }}
       onSubmit={handleSubmit}
-      render={formik => (
+    >
+      {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
           <FormRow>
             <FormField
@@ -132,9 +133,8 @@ function OrganizationForm({ organization, i18n, me, onCancel, onSubmit }) {
               isDisabled={!me.is_superuser}
             />
             {custom_virtualenvs && custom_virtualenvs.length > 1 && (
-              <Field
+              <Field name="custom_virtualenv">
-                name="custom_virtualenv"
+                {({ field }) => (
-                render={({ field }) => (
                   <FormGroup
                     fieldId="org-custom-virtualenv"
                     label={i18n._(t`Ansible Environment`)}
@@ -151,7 +151,7 @@ function OrganizationForm({ organization, i18n, me, onCancel, onSubmit }) {
                     />
                   </FormGroup>
                 )}
-              />
+              </Field>
             )}
           </FormRow>
           <InstanceGroupsLookup
@@ -167,7 +167,7 @@ function OrganizationForm({ organization, i18n, me, onCancel, onSubmit }) {
           />
         </Form>
       )}
-    />
+    </Formik>
   );
 }
 

awx/ui_next/src/screens/Project/shared/ProjectForm.jsx

@@ -201,7 +201,8 @@ function ProjectForm({ project, ...props }) {
             scm_url: project.scm_url || '',
           }}
           onSubmit={handleSubmit}
-          render={formik => (
+        >
+          {formik => (
             <Form
               autoComplete="off"
               onSubmit={formik.handleSubmit}
@@ -228,7 +229,8 @@ function ProjectForm({ project, ...props }) {
                     i18n._(t`Select a value for this field`),
                     i18n
                   )}
-                  render={({ form }) => (
+                >
+                  {({ form }) => (
                     <OrganizationLookup
                       helperTextInvalid={form.errors.organization}
                       isValid={
@@ -243,14 +245,15 @@ function ProjectForm({ project, ...props }) {
                       required
                     />
                   )}
-                />
+                </Field>
                 <Field
                   name="scm_type"
                   validate={required(
                     i18n._(t`Select a value for this field`),
                     i18n
                   )}
-                  render={({ field, form }) => (
+                >
+                  {({ field, form }) => (
                     <FormGroup
                       fieldId="project-scm-type"
                       helperTextInvalid={form.errors.scm_type}
@@ -286,7 +289,7 @@ function ProjectForm({ project, ...props }) {
                       />
                     </FormGroup>
                   )}
-                />
+                </Field>
                 {formik.values.scm_type !== '' && (
                   <ScmTypeFormRow>
                     <SubFormTitle size="md">
@@ -345,9 +348,8 @@ function ProjectForm({ project, ...props }) {
                   {({ custom_virtualenvs }) =>
                     custom_virtualenvs &&
                     custom_virtualenvs.length > 1 && (
-                      <Field
+                      <Field name="custom_virtualenv">
-                        name="custom_virtualenv"
+                        {({ field }) => (
-                        render={({ field }) => (
                           <FormGroup
                             fieldId="project-custom-virtualenv"
                             label={i18n._(t`Ansible Environment`)}
@@ -378,7 +380,7 @@ function ProjectForm({ project, ...props }) {
                             />
                           </FormGroup>
                         )}
-                      />
+                      </Field>
                     )
                   }
                 </Config>
@@ -389,7 +391,7 @@ function ProjectForm({ project, ...props }) {
               />
             </Form>
           )}
-        />
+        </Formik>
       )}
     </Config>
   );

awx/ui_next/src/screens/Project/shared/ProjectSubForms/InsightsSubForm.jsx

@@ -16,7 +16,8 @@ const InsightsSubForm = ({
     <Field
       name="credential"
       validate={required(i18n._(t`Select a value for this field`), i18n)}
-      render={({ form }) => (
+    >
+      {({ form }) => (
         <CredentialLookup
           credentialTypeId={credential.typeId}
           label={i18n._(t`Insights Credential`)}
@@ -31,7 +32,7 @@ const InsightsSubForm = ({
           required
         />
       )}
-    />
+    </Field>
     <ScmTypeOptions hideAllowOverride scmUpdateOnLaunch={scmUpdateOnLaunch} />
   </>
 );

awx/ui_next/src/screens/Project/shared/ProjectSubForms/ManualSubForm.jsx

@@ -76,7 +76,8 @@ const ManualSubForm = ({
         <Field
           name="local_path"
           validate={required(i18n._(t`Select a value for this field`), i18n)}
-          render={({ field, form }) => (
+        >
+          {({ field, form }) => (
             <FormGroup
               fieldId="project-local-path"
               helperTextInvalid={form.errors.local_path}
@@ -99,7 +100,7 @@ const ManualSubForm = ({
               />
             </FormGroup>
           )}
-        />
+        </Field>
       )}
     </>
   );

awx/ui_next/src/screens/Project/shared/ProjectSubForms/SharedFields.jsx

@@ -42,9 +42,8 @@ export const BranchFormField = withI18n()(({ i18n, label }) => (
 
 export const ScmCredentialFormField = withI18n()(
   ({ i18n, credential, onCredentialSelection }) => (
-    <Field
+    <Field name="credential">
-      name="credential"
+      {({ form }) => (
-      render={({ form }) => (
         <CredentialLookup
           credentialTypeId={credential.typeId}
           label={i18n._(t`SCM Credential`)}
@@ -55,7 +54,7 @@ export const ScmCredentialFormField = withI18n()(
           }}
         />
       )}
-    />
+    </Field>
   )
 );
 

awx/ui_next/src/screens/Team/shared/TeamForm.jsx

@@ -24,7 +24,8 @@ function TeamForm(props) {
         organization: team.organization || '',
       }}
       onSubmit={handleSubmit}
-      render={formik => (
+    >
+      {formik => (
         <Form
           autoComplete="off"
           onSubmit={formik.handleSubmit}
@@ -51,7 +52,8 @@ function TeamForm(props) {
                 i18n._(t`Select a value for this field`),
                 i18n
               )}
-              render={({ form }) => (
+            >
+              {({ form }) => (
                 <OrganizationLookup
                   helperTextInvalid={form.errors.organization}
                   isValid={
@@ -66,7 +68,7 @@ function TeamForm(props) {
                   required
                 />
               )}
-            />
+            </Field>
           </FormRow>
           <FormActionGroup
             onCancel={handleCancel}
@@ -74,7 +76,7 @@ function TeamForm(props) {
           />
         </Form>
       )}
-    />
+    </Formik>
   );
 }
 

awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx

@@ -146,7 +146,6 @@ class JobTemplateForm extends Component {
       setFieldValue,
       i18n,
       template,
-      values,
     } = this.props;
     const jobTypeOptions = [
       {
@@ -206,7 +205,8 @@ class JobTemplateForm extends Component {
             name="job_type"
             validate={required(null, i18n)}
             onBlur={handleBlur}
-            render={({ form, field }) => {
+          >
+            {({ form, field }) => {
               const isValid = !form.touched.job_type || !form.errors.job_type;
               return (
                 <FormGroup
@@ -231,11 +231,12 @@ class JobTemplateForm extends Component {
                 </FormGroup>
               );
             }}
-          />
+          </Field>
           <Field
             name="inventory"
             validate={required(i18n._(t`Select a value for this field`), i18n)}
-            render={({ form }) => (
+          >
+            {({ form }) => (
               <InventoryLookup
                 value={inventory}
                 onBlur={() => form.setFieldTouched('inventory')}
@@ -253,11 +254,9 @@ class JobTemplateForm extends Component {
                 error={form.errors.inventory}
               />
             )}
-          />
+          </Field>
-          <Field
+          <Field name="project" validate={this.handleProjectValidation()}>
-            name="project"
+            {({ form }) => (
-            validate={this.handleProjectValidation()}
-            render={({ form }) => (
               <ProjectLookup
                 value={project}
                 onBlur={() => form.setFieldTouched('project')}
@@ -269,12 +268,13 @@ class JobTemplateForm extends Component {
                 required
               />
             )}
-          />
+          </Field>
           <Field
             name="playbook"
             validate={required(i18n._(t`Select a value for this field`), i18n)}
             onBlur={handleBlur}
-            render={({ field, form }) => {
+          >
+            {({ field, form }) => {
               const isValid = !form.touched.playbook || !form.errors.playbook;
               return (
                 <FormGroup
@@ -300,12 +300,11 @@ class JobTemplateForm extends Component {
                 </FormGroup>
               );
             }}
-          />
+          </Field>
         </FormRow>
         <FormRow>
-          <Field
+          <Field name="labels">
-            name="labels"
+            {({ field }) => (
-            render={({ field }) => (
               <FormGroup label={i18n._(t`Labels`)} fieldId="template-labels">
                 <FieldTooltip
                   content={i18n._(t`Optional labels that describe this job template,
@@ -319,13 +318,11 @@ class JobTemplateForm extends Component {
                 />
               </FormGroup>
             )}
-          />
+          </Field>
         </FormRow>
         <FormRow>
-          <Field
+          <Field name="credentials" fieldId="template-credentials">
-            name="credentials"
+            {({ field }) => (
-            fieldId="template-credentials"
-            render={({ field }) => (
               <MultiCredentialsLookup
                 value={field.value}
                 onChange={newCredentials =>
@@ -337,7 +334,7 @@ class JobTemplateForm extends Component {
                 )}
               />
             )}
-          />
+          </Field>
         </FormRow>
         <AdvancedFieldsWrapper label="Advanced">
           <FormRow>
@@ -370,9 +367,8 @@ class JobTemplateForm extends Component {
                   playbook. Multiple patterns are allowed. Refer to Ansible
                   documentation for more information and examples on patterns.`)}
             />
-            <Field
+            <Field name="verbosity">
-              name="verbosity"
+              {({ field }) => (
-              render={({ field }) => (
                 <FormGroup
                   fieldId="template-verbosity"
                   label={i18n._(t`Verbosity`)}
@@ -388,7 +384,7 @@ class JobTemplateForm extends Component {
                   />
                 </FormGroup>
               )}
-            />
+            </Field>
             <FormField
               id="template-job-slicing"
               name="job_slice_count"
@@ -409,9 +405,8 @@ class JobTemplateForm extends Component {
                 before the task is canceled. Defaults to 0 for no job
                 timeout.`)}
             />
-            <Field
+            <Field name="diff_mode">
-              name="diff_mode"
+              {({ field, form }) => (
-              render={({ field, form }) => (
                 <FormGroup
                   fieldId="template-show-changes"
                   label={i18n._(t`Show Changes`)}
@@ -433,11 +428,10 @@ class JobTemplateForm extends Component {
                   </div>
                 </FormGroup>
               )}
-            />
+            </Field>
           </FormRow>
-          <Field
+          <Field name="instanceGroups">
-            name="instanceGroups"
+            {({ field, form }) => (
-            render={({ field, form }) => (
               <InstanceGroupsLookup
                 css="margin-top: 20px"
                 value={field.value}
@@ -446,10 +440,9 @@ class JobTemplateForm extends Component {
                   to run on.`)}
               />
             )}
-          />
+          </Field>
-          <Field
+          <Field name="job_tags">
-            name="job_tags"
+            {({ field, form }) => (
-            render={({ field, form }) => (
               <FormGroup
                 label={i18n._(t`Job Tags`)}
                 css="margin-top: 20px"
@@ -468,10 +461,9 @@ class JobTemplateForm extends Component {
                 />
               </FormGroup>
             )}
-          />
+          </Field>
-          <Field
+          <Field name="skip_tags">
-            name="skip_tags"
+            {({ field, form }) => (
-            render={({ field, form }) => (
               <FormGroup
                 label={i18n._(t`Skip Tags`)}
                 css="margin-top: 20px"
@@ -490,7 +482,7 @@ class JobTemplateForm extends Component {
                 />
               </FormGroup>
             )}
-          />
+          </Field>
           <GridFormGroup
             fieldId="template-option-checkboxes"
             isInline

awx/ui_next/src/screens/User/shared/UserForm.jsx

@@ -76,7 +76,8 @@ function UserForm(props) {
         user_type: userType,
       }}
       onSubmit={handleValidateAndSubmit}
-      render={formik => (
+    >
+      {formik => (
         <Form
           autoComplete="off"
           onSubmit={formik.handleSubmit}
@@ -141,7 +142,8 @@ function UserForm(props) {
                   i18n._(t`Select a value for this field`),
                   i18n
                 )}
-                render={({ form }) => (
+              >
+                {({ form }) => (
                   <OrganizationLookup
                     helperTextInvalid={form.errors.organization}
                     isValid={
@@ -156,11 +158,10 @@ function UserForm(props) {
                     required
                   />
                 )}
-              />
+              </Field>
             )}
-            <Field
+            <Field name="user_type">
-              name="user_type"
+              {({ form, field }) => {
-              render={({ form, field }) => {
                 const isValid =
                   !form.touched.user_type || !form.errors.user_type;
                 return (
@@ -180,7 +181,7 @@ function UserForm(props) {
                   </FormGroup>
                 );
               }}
-            />
+            </Field>
           </FormRow>
           <FormActionGroup
             onCancel={handleCancel}
@@ -188,7 +189,7 @@ function UserForm(props) {
           />
         </Form>
       )}
-    />
+    </Formik>
   );
 }