fix blur behavior/error messages in JT form

This commit is contained in:
Keith Grant 2019-10-18 08:40:48 -07:00
parent 8e2622d117
commit df7e034b96
3 changed files with 21 additions and 6 deletions

View File

@ -16,6 +16,7 @@ class InventoryLookup extends React.Component {
value,
tooltip,
onChange,
onBlur,
required,
isValid,
helperTextInvalid,
@ -37,6 +38,7 @@ class InventoryLookup extends React.Component {
name="inventory"
value={value}
onLookupSave={onChange}
onBlur={onBlur}
getItems={getInventories}
required={required}
qsNamespace="inventory"

View File

@ -233,16 +233,19 @@ class JobTemplateForm extends Component {
render={({ form }) => (
<InventoryLookup
value={inventory}
onBlur={() => form.setFieldTouched('inventory')}
tooltip={i18n._(t`Select the inventory containing the hosts
you want this job to manage.`)}
isValid={!form.touched.inventory || !form.errors.inventory}
helperTextInvalid={form.errors.inventory}
onChange={value => {
form.setFieldValue('inventory', value.id);
form.setFieldValue('organizationId', value.organization);
this.setState({ inventory: value });
}}
isValid={!form.errors.inventory}
helperTextInvalid={form.errors.inventory}
required
touched={form.touched.inventory}
error={form.errors.inventory}
/>
)}
/>
@ -251,12 +254,12 @@ class JobTemplateForm extends Component {
validate={this.handleProjectValidation()}
render={({ form }) => (
<ProjectLookup
helperTextInvalid={form.errors.project}
isValid={!form.errors.project}
value={project}
onBlur={handleBlur}
onBlur={() => form.setFieldTouched('project')}
tooltip={i18n._(t`Select the project containing the playbook
you want this job to execute.`)}
isValid={!form.touched.project || !form.errors.project}
helperTextInvalid={form.errors.project}
onChange={value => {
form.setFieldValue('project', value.id);
this.setState({ project: value });
@ -289,6 +292,7 @@ class JobTemplateForm extends Component {
isValid={isValid}
form={form}
field={field}
onBlur={() => form.setFieldTouched('playbook')}
onError={err => this.setState({ contentError: err })}
/>
</FormGroup>

View File

@ -5,7 +5,15 @@ import { t } from '@lingui/macro';
import AnsibleSelect from '@components/AnsibleSelect';
import { ProjectsAPI } from '@api';
function PlaybookSelect({ projectId, isValid, form, field, onError, i18n }) {
function PlaybookSelect({
projectId,
isValid,
form,
field,
onBlur,
onError,
i18n,
}) {
const [options, setOptions] = useState([]);
useEffect(() => {
if (!projectId) {
@ -40,6 +48,7 @@ function PlaybookSelect({ projectId, isValid, form, field, onError, i18n }) {
isValid={isValid}
form={form}
{...field}
onBlur={onBlur}
/>
);
}