shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-10-31 23:51:09 +03:00
Code Releases Activity

Uses formik hooks for JT Form

Browse Source
This commit is contained in:
Alex Corey 2020-03-23 15:18:50 -04:00
parent b6c272e946
commit a867a32b4e
1 changed files with 143 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { withFormik, Field } from 'formik'; import { withFormik, useField, useFormikContext } from 'formik';
import { import {
Form, Form,
FormGroup, FormGroup,
@ -47,7 +47,6 @@ function JobTemplateForm({
validateField, validateField,
handleCancel, handleCancel,
handleSubmit, handleSubmit,
handleBlur,
setFieldValue, setFieldValue,
submitError, submitError,
i18n, i18n,
@ -62,6 +61,38 @@ function JobTemplateForm({
Boolean(template?.host_config_key) Boolean(template?.host_config_key)
); );
const formikBag = useFormikContext();
const formikValues = formikBag.values;
const setFormikFieldValue = formikBag.setFieldValue;
const [jobTypeField, jobTypeMeta, jobTypeHelpers] = useField({
name: 'job_type',
validate: required(null, i18n),
});
const [, inventoryMeta, inventoryHelpers] = useField('inventory');
const [, projectMeta, projectHelpers] = useField({
name: 'project',
validate: () => handleProjectValidation(),
});
const [scmField] = useField('scm_branch');
const [playbookField, , playbookMeta] = useField({
name: 'playbook',
validate: required(i18n._(t`Select a value for this field`), i18n),
});
const [credentialField, , credentialHelpers] = useField('credentials');
const [labelsField, , labelsHelpers] = useField('labels');
const [limitField, limitMeta] = useField('limit');
const [verbosityField] = useField('verbosity');
const [diffModeField, , diffModeHelpers] = useField('diff_mode');
const [instanceGroupsField, , instanceGroupsHelpers] = useField(
'instanceGroups'
);
const [jobTagsField, , jobTagsHelpers] = useField('job_tags');
const [skipTagsField, , skipTagsHelpers] = useField('skip_tags');
const { const {
request: fetchProject, request: fetchProject,
error: projectContentError, error: projectContentError,
@ -184,26 +215,15 @@ function JobTemplateForm({
test environment setup, and report problems without test environment setup, and report problems without
executing the playbook.`)} executing the playbook.`)}
> >
<Field <AnsibleSelect
name="job_type" {...jobTypeField}
validate={required(null, i18n)} isValid={!jobTypeMeta.touched || !jobTypeMeta.error}
onBlur={handleBlur} id="template-job-type"
> data={jobTypeOptions}
{({ form, field }) => { onChange={(event, value) => {
const isValid = !form.touched.job_type || !form.errors.job_type; jobTypeHelpers.setValue(value);
return (
<AnsibleSelect
isValid={isValid}
id="template-job-type"
data={jobTypeOptions}
{...field}
onChange={(event, value) => {
form.setFieldValue('job_type', value);
}}
/>
);
}} }}
</Field> />
</FieldWithPrompt> </FieldWithPrompt>
<FieldWithPrompt <FieldWithPrompt
fieldId="template-inventory" fieldId="template-inventory"
@ -214,108 +234,73 @@ function JobTemplateForm({
tooltip={i18n._(t`Select the inventory containing the hosts tooltip={i18n._(t`Select the inventory containing the hosts
you want this job to manage.`)} you want this job to manage.`)}
> >
<Field name="inventory"> <InventoryLookup
{({ form }) => ( value={inventory}
<> onBlur={() => inventoryHelpers.setTouched()}
<InventoryLookup onChange={value => {
value={inventory} inventoryHelpers.setValue(value.id);
onBlur={() => { setFormikFieldValue('organizationId', value.organization);
form.setFieldTouched('inventory'); setInventory(value);
}} }}
onChange={value => { required
form.setValues({ touched={inventoryMeta.touched}
...form.values, error={inventoryMeta.error}
inventory: value.id, />
organizationId: value.organization, {(inventoryMeta.touched || formikValues.ask_inventory_on_launch) &&
}); inventoryMeta.error && (
setInventory(value); <div
}} className="pf-c-form__helper-text pf-m-error"
required aria-live="polite"
touched={form.touched.inventory} >
error={form.errors.inventory} {inventoryMeta.error}
/> </div>
{(form.touched.inventory ||
form.touched.ask_inventory_on_launch) &&
form.errors.inventory && (
<div
className="pf-c-form__helper-text pf-m-error"
aria-live="polite"
>
{form.errors.inventory}
</div>
)}
</>
)} )}
</Field>
</FieldWithPrompt> </FieldWithPrompt>
<Field name="project" validate={handleProjectValidation}>
{({ form }) => ( <ProjectLookup
<ProjectLookup value={project}
value={project} onBlur={() => projectHelpers.setTouched()}
onBlur={() => form.setFieldTouched('project')} tooltip={i18n._(t`Select the project containing the playbook
tooltip={i18n._(t`Select the project containing the playbook
you want this job to execute.`)} you want this job to execute.`)}
isValid={!form.touched.project || !form.errors.project} isValid={!projectMeta.touched || !projectMeta.error}
helperTextInvalid={form.errors.project} helperTextInvalid={projectMeta.error}
onChange={handleProjectUpdate} onChange={handleProjectUpdate}
required required
/> />
)} {project?.allow_override && (
</Field>
{project && project.allow_override && (
<FieldWithPrompt <FieldWithPrompt
fieldId="template-scm-branch" fieldId="template-scm-branch"
label={i18n._(t`SCM Branch`)} label={i18n._(t`SCM Branch`)}
promptId="template-ask-scm-branch-on-launch" promptId="template-ask-scm-branch-on-launch"
promptName="ask_scm_branch_on_launch" promptName="ask_scm_branch_on_launch"
> >
<Field name="scm_branch"> <TextInput
{({ field }) => { id="template-scm-branch"
return ( {...scmField}
<TextInput onChange={(value, event) => {
id="template-scm-branch" scmField.onChange(event);
{...field}
onChange={(value, event) => {
field.onChange(event);
}}
/>
);
}} }}
</Field> />
</FieldWithPrompt> </FieldWithPrompt>
)} )}
<Field <FormGroup
name="playbook" fieldId="template-playbook"
validate={required(i18n._(t`Select a value for this field`), i18n)} helperTextInvalid={playbookMeta.error}
onBlur={handleBlur} isRequired
label={i18n._(t`Playbook`)}
> >
{({ field, form }) => { <FieldTooltip
const isValid = !form.touched.playbook || !form.errors.playbook; content={i18n._(t`Select the playbook to be executed by this job.`)}
return ( />
<FormGroup <PlaybookSelect
fieldId="template-playbook" projectId={formikValues.project}
helperTextInvalid={form.errors.playbook} isValid={!(playbookMeta.touched || playbookMeta.error)}
isRequired form={formikBag}
isValid={isValid} field={playbookField}
label={i18n._(t`Playbook`)} onBlur={() => playbookMeta.setTouched()}
> onError={setContentError}
<FieldTooltip />
content={i18n._( </FormGroup>
t`Select the playbook to be executed by this job.`
)}
/>
<PlaybookSelect
projectId={form.values.project}
isValid={isValid}
form={form}
field={field}
onBlur={() => form.setFieldTouched('playbook')}
onError={setContentError}
/>
</FormGroup>
);
}}
</Field>
<FormFullWidthLayout> <FormFullWidthLayout>
<FieldWithPrompt <FieldWithPrompt
fieldId="template-credentials" fieldId="template-credentials"
@ -328,36 +313,26 @@ function JobTemplateForm({
credential at run time. If you select credentials and check "Prompt on launch", the selected credential at run time. If you select credentials and check "Prompt on launch", the selected
credential(s) become the defaults that can be updated at run time.`)} credential(s) become the defaults that can be updated at run time.`)}
> >
<Field name="credentials" fieldId="template-credentials"> <MultiCredentialsLookup
{({ field }) => { value={credentialField.value}
return ( onChange={newCredentials =>
<MultiCredentialsLookup credentialHelpers.setValue(newCredentials)
value={field.value} }
onChange={newCredentials => onError={setContentError}
setFieldValue('credentials', newCredentials) />
}
onError={setContentError}
/>
);
}}
</Field>
</FieldWithPrompt> </FieldWithPrompt>
<Field name="labels"> <FormGroup label={i18n._(t`Labels`)} fieldId="template-labels">
{({ field }) => ( <FieldTooltip
<FormGroup label={i18n._(t`Labels`)} fieldId="template-labels"> content={i18n._(t`Optional labels that describe this job template,
<FieldTooltip
content={i18n._(t`Optional labels that describe this job template,
such as 'dev' or 'test'. Labels can be used to group and filter such as 'dev' or 'test'. Labels can be used to group and filter
job templates and completed jobs.`)} job templates and completed jobs.`)}
/> />
<LabelSelect <LabelSelect
value={field.value} value={labelsField.value}
onChange={labels => setFieldValue('labels', labels)} onChange={labels => labelsHelpers.setValue(labels)}
onError={setContentError} onError={setContentError}
/> />
</FormGroup> </FormGroup>
)}
</Field>
<VariablesField <VariablesField
id="template-variables" id="template-variables"
name="extra_vars" name="extra_vars"
@ -394,20 +369,14 @@ function JobTemplateForm({
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 name="limit"> <TextInput
{({ form, field }) => { id="template-limit"
return ( {...limitField}
<TextInput isValid={!limitMeta.touched || !limitMeta.error}
id="template-limit" onChange={(value, event) => {
{...field} limitField.onChange(event);
isValid={!form.touched.job_type || !form.errors.job_type}
onChange={(value, event) => {
field.onChange(event);
}}
/>
);
}} }}
</Field> />
</FieldWithPrompt> </FieldWithPrompt>
<FieldWithPrompt <FieldWithPrompt
fieldId="template-verbosity" fieldId="template-verbosity"
@ -417,15 +386,11 @@ function JobTemplateForm({
tooltip={i18n._(t`Control the level of output ansible will tooltip={i18n._(t`Control the level of output ansible will
produce as the playbook executes.`)} produce as the playbook executes.`)}
> >
<Field name="verbosity"> <AnsibleSelect
{({ field }) => ( id="template-verbosity"
<AnsibleSelect data={verbosityOptions}
id="template-verbosity" {...verbosityField}
data={verbosityOptions} />
{...field}
/>
)}
</Field>
</FieldWithPrompt> </FieldWithPrompt>
<FormField <FormField
id="template-job-slicing" id="template-job-slicing"
@ -456,32 +421,20 @@ function JobTemplateForm({
Ansible tasks, where supported. This is equivalent Ansible tasks, where supported. This is equivalent
to Ansible&#x2019s --diff mode.`)} to Ansible&#x2019s --diff mode.`)}
> >
<Field name="diff_mode"> <Switch
{({ form, field }) => { id="template-show-changes"
return ( label={diffModeField.value ? i18n._(t`On`) : i18n._(t`Off`)}
<Switch isChecked={diffModeField.value}
id="template-show-changes" onChange={checked => diffModeHelpers.setValue(checked)}
label={field.value ? i18n._(t`On`) : i18n._(t`Off`)} />
isChecked={field.value}
onChange={checked =>
form.setFieldValue(field.name, checked)
}
/>
);
}}
</Field>
</FieldWithPrompt> </FieldWithPrompt>
<FormFullWidthLayout> <FormFullWidthLayout>
<Field name="instanceGroups"> <InstanceGroupsLookup
{({ field, form }) => ( value={instanceGroupsField.value}
<InstanceGroupsLookup onChange={value => instanceGroupsHelpers.setValue(value)}
value={field.value} tooltip={i18n._(t`Select the Instance Groups for this Organization
onChange={value => form.setFieldValue(field.name, value)}
tooltip={i18n._(t`Select the Instance Groups for this Organization
to run on.`)} to run on.`)}
/> />
)}
</Field>
<FieldWithPrompt <FieldWithPrompt
fieldId="template-tags" fieldId="template-tags"
label={i18n._(t`Job Tags`)} label={i18n._(t`Job Tags`)}
@ -493,14 +446,10 @@ function JobTemplateForm({
Refer to Ansible Tower documentation for details on Refer to Ansible Tower documentation for details on
the usage of tags.`)} the usage of tags.`)}
> >
<Field name="job_tags"> <TagMultiSelect
{({ field, form }) => ( value={jobTagsField.value}
<TagMultiSelect onChange={value => jobTagsHelpers.setValue(value)}
value={field.value} />
onChange={value => form.setFieldValue(field.name, value)}
/>
)}
</Field>
</FieldWithPrompt> </FieldWithPrompt>
<FieldWithPrompt <FieldWithPrompt
fieldId="template-skip-tags" fieldId="template-skip-tags"
@ -513,14 +462,10 @@ function JobTemplateForm({
to Ansible Tower documentation for details on the usage to Ansible Tower documentation for details on the usage
of tags.`)} of tags.`)}
> >
<Field name="skip_tags"> <TagMultiSelect
{({ field, form }) => ( value={skipTagsField.value}
<TagMultiSelect onChange={value => skipTagsHelpers.setValue(value)}
value={field.value} />
onChange={value => form.setFieldValue(field.name, value)}
/>
)}
</Field>
</FieldWithPrompt> </FieldWithPrompt>
<FormGroup <FormGroup
fieldId="template-option-checkboxes" fieldId="template-option-checkboxes"