External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 02:50:02 -03: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
Show Stats 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);
return (
<Field
name={name}
render={({ field, form }) => (
<Field name={name}>
{({ 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 = {

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 { 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
initialValues={{ variables: value }}
render={() => (
<Formik initialValues={{ variables: value }}>
{() => (
<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
initialValues={{ variables: value }}
render={() => (
<Formik initialValues={{ variables: value }}>
{() => (
<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
initialValues={{ variables: value }}
render={() => (
<Formik initialValues={{ variables: value }}>
{() => (
<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
initialValues={{ variables: value }}
onSubmit={handleSubmit}
render={formik => (
<Formik initialValues={{ variables: value }} onSubmit={handleSubmit}>
{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')(

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 }) {
return (
<Field
name={name}
validate={validate}
render={({ field }) => (
<Field name={name} validate={validate}>
{({ field }) => (
<Checkbox
aria-label={label}
label={
@ -37,7 +35,7 @@ function CheckboxField({ id, name, label, tooltip, validate, ...rest }) {
}}
/>
)}
/>
</Field>
);
}
CheckboxField.propTypes = {

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

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

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

@ -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);

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(
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>
);
}

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

@ -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>
);
}

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

@ -28,10 +28,8 @@ function InventoryGroupForm({
return (
<Card className="awx-c-card">
<CardBody>
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
render={formik => (
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
{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>
);

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,
}}
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>
);
}

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',
}}
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
name="custom_virtualenv"
render={({ field }) => (
<Field name="custom_virtualenv">
{({ 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>
);
}

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 || '',
}}
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
name="custom_virtualenv"
render={({ field }) => (
<Field name="custom_virtualenv">
{({ 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>
);

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

@ -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} />
</>
);

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

@ -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>
)}
</>
);

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()(
({ i18n, credential, onCredentialSelection }) => (
<Field
name="credential"
render={({ form }) => (
<Field name="credential">
{({ form }) => (
<CredentialLookup
credentialTypeId={credential.typeId}
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 || '',
}}
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>
);
}

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

@ -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
name="project"
validate={this.handleProjectValidation()}
render={({ form }) => (
</Field>
<Field name="project" validate={this.handleProjectValidation()}>
{({ 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
name="labels"
render={({ field }) => (
<Field name="labels">
{({ 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
name="credentials"
fieldId="template-credentials"
render={({ field }) => (
<Field name="credentials" fieldId="template-credentials">
{({ 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
name="verbosity"
render={({ field }) => (
<Field name="verbosity">
{({ 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
name="diff_mode"
render={({ field, form }) => (
<Field name="diff_mode">
{({ 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
name="instanceGroups"
render={({ field, form }) => (
<Field name="instanceGroups">
{({ field, form }) => (
<InstanceGroupsLookup
css="margin-top: 20px"
value={field.value}
@ -446,10 +440,9 @@ class JobTemplateForm extends Component {
to run on.`)}
/>
)}
/>
<Field
name="job_tags"
render={({ field, form }) => (
</Field>
<Field name="job_tags">
{({ field, form }) => (
<FormGroup
label={i18n._(t`Job Tags`)}
css="margin-top: 20px"
@ -468,10 +461,9 @@ class JobTemplateForm extends Component {
/>
</FormGroup>
)}
/>
<Field
name="skip_tags"
render={({ field, form }) => (
</Field>
<Field name="skip_tags">
{({ 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

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

@ -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
name="user_type"
render={({ form, field }) => {
<Field name="user_type">
{({ 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>
);
}