External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-10 22:19:28 -02:30
Code Issues Packages Projects Releases Wiki Activity

update Formik formatting to remove warnings

Browse Source
This commit is contained in:
Keith Grant
2020-01-16 16:46:13 -08:00
parent 14990f7e98
commit e7fead0f2c
17 changed files with 126 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
View File

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

30
awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
View File

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

8
awx/ui_next/src/components/FormField/CheckboxField.jsx
View File

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

8
awx/ui_next/src/components/FormField/PasswordField.jsx
View File

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

10
awx/ui_next/src/components/FormField/PasswordField.test.jsx
View File

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

11
awx/ui_next/src/screens/Host/shared/HostForm.jsx
View File

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

20
awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx
View File

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

8
awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx
View File

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

5
awx/ui_next/src/screens/Inventory/shared/InventoryHostForm.jsx
View File

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

12
awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx
View File

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

22
awx/ui_next/src/screens/Project/shared/ProjectForm.jsx
View File

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

5
awx/ui_next/src/screens/Project/shared/ProjectSubForms/InsightsSubForm.jsx
View File

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

5
awx/ui_next/src/screens/Project/shared/ProjectSubForms/ManualSubForm.jsx
View File

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

7
awx/ui_next/src/screens/Project/shared/ProjectSubForms/SharedFields.jsx
View File

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

10
awx/ui_next/src/screens/Team/shared/TeamForm.jsx
View File

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

74
awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
View File

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

17
awx/ui_next/src/screens/User/shared/UserForm.jsx
View File

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