Modify JobTemplateForm to use formik setValue

Modify JobTemplateForm to use formik `setValue`. Following the same
convention used in the `.WorkflowJobTemplateForm`. Also, replace the
usage of `useFormikContext` to `useField`.
This commit is contained in:
nixocio 2020-06-03 16:03:01 -04:00
parent 7060fbd3c2
commit 9c57f550ed
2 changed files with 18 additions and 14 deletions

View File

@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { withFormik, useField, useFormikContext } from 'formik';
import { withFormik, useField } from 'formik';
import {
Form,
FormGroup,
@ -52,8 +52,6 @@ function JobTemplateForm({
submitError,
i18n,
}) {
const { values: formikValues } = useFormikContext();
const [contentError, setContentError] = useState(false);
const [inventory, setInventory] = useState(
template?.summary_fields?.inventory
@ -65,6 +63,7 @@ function JobTemplateForm({
Boolean(template.webhook_service)
);
const [askInventoryOnLaunchField] = useField('ask_inventory_on_launch');
const [jobTypeField, jobTypeMeta, jobTypeHelpers] = useField({
name: 'job_type',
validate: required(null, i18n),
@ -81,7 +80,7 @@ function JobTemplateForm({
});
const [credentialField, , credentialHelpers] = useField('credentials');
const [labelsField, , labelsHelpers] = useField('labels');
const [limitField, limitMeta] = useField('limit');
const [limitField, limitMeta, limitHelpers] = useField('limit');
const [verbosityField] = useField('verbosity');
const [diffModeField, , diffModeHelpers] = useField('diff_mode');
const [instanceGroupsField, , instanceGroupsHelpers] = useField(
@ -231,7 +230,7 @@ function JobTemplateForm({
</FieldWithPrompt>
<FieldWithPrompt
fieldId="template-inventory"
isRequired={!formikValues.ask_inventory_on_launch}
isRequired={!askInventoryOnLaunchField.value}
label={i18n._(t`Inventory`)}
promptId="template-ask-inventory-on-launch"
promptName="ask_inventory_on_launch"
@ -245,11 +244,11 @@ function JobTemplateForm({
inventoryHelpers.setValue(value ? value.id : null);
setInventory(value);
}}
required={!formikValues.ask_inventory_on_launch}
required={!askInventoryOnLaunchField.value}
touched={inventoryMeta.touched}
error={inventoryMeta.error}
/>
{(inventoryMeta.touched || formikValues.ask_inventory_on_launch) &&
{(inventoryMeta.touched || askInventoryOnLaunchField.value) &&
inventoryMeta.error && (
<div
className="pf-c-form__helper-text pf-m-error"
@ -283,8 +282,8 @@ function JobTemplateForm({
<TextInput
id="template-scm-branch"
{...scmField}
onChange={(value, event) => {
scmField.onChange(event);
onChange={value => {
scmHelpers.setValue(value);
}}
/>
</FieldWithPrompt>
@ -383,8 +382,8 @@ function JobTemplateForm({
id="template-limit"
{...limitField}
isValid={!limitMeta.touched || !limitMeta.error}
onChange={(value, event) => {
limitField.onChange(event);
onChange={value => {
limitHelpers.setValue(value);
}}
/>
</FieldWithPrompt>

View File

@ -29,6 +29,7 @@ describe('<JobTemplateForm />', () => {
playbook: 'Baz',
type: 'job_template',
scm_branch: 'Foo',
limit: '5000',
summary_fields: {
inventory: {
id: 2,
@ -184,9 +185,10 @@ describe('<JobTemplateForm />', () => {
wrapper.update();
await act(async () => {
wrapper.find('input#template-scm-branch').simulate('change', {
target: { value: 'devel', name: 'scm_branch' },
});
wrapper.find('TextInputBase#template-scm-branch').prop('onChange')(
'devel'
);
wrapper.find('TextInputBase#template-limit').prop('onChange')(1234567890);
wrapper.find('AnsibleSelect[name="playbook"]').simulate('change', {
target: { value: 'new baz type', name: 'playbook' },
});
@ -221,6 +223,9 @@ describe('<JobTemplateForm />', () => {
expect(wrapper.find('input#template-scm-branch').prop('value')).toEqual(
'devel'
);
expect(wrapper.find('input#template-limit').prop('value')).toEqual(
1234567890
);
expect(
wrapper.find('AnsibleSelect[name="playbook"]').prop('value')
).toEqual('new baz type');