diff --git a/awx/ui_next/src/components/CollapsibleSection/ExpandingContainer.jsx b/awx/ui_next/src/components/CollapsibleSection/ExpandingContainer.jsx index 7046a29f85..07fd6d35b5 100644 --- a/awx/ui_next/src/components/CollapsibleSection/ExpandingContainer.jsx +++ b/awx/ui_next/src/components/CollapsibleSection/ExpandingContainer.jsx @@ -5,9 +5,7 @@ import styled from 'styled-components'; const Container = styled.div` margin: 15px 0; transition: all 0.2s ease-out; - ${props => !props.isExpanded && ` - overflow: hidden; - `} + ${props => !props.isExpanded && `overflow: hidden;`} `; function ExpandingContainer({ isExpanded, children }) { diff --git a/awx/ui_next/src/components/FormField/CheckboxField.jsx b/awx/ui_next/src/components/FormField/CheckboxField.jsx index 2f97e0dff5..185a40347f 100644 --- a/awx/ui_next/src/components/FormField/CheckboxField.jsx +++ b/awx/ui_next/src/components/FormField/CheckboxField.jsx @@ -30,7 +30,7 @@ function CheckboxField({ id, name, label, tooltip, validate, ...rest }) { } id={id} {...rest} - checked={field.value} + isChecked={field.value} {...field} onChange={(value, event) => { field.onChange(event); diff --git a/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx b/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx index 0cce199bc2..b348356db1 100644 --- a/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx +++ b/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx @@ -14,52 +14,57 @@ class InstanceGroupsLookup extends React.Component { render() { const { value, tooltip, onChange, className, i18n } = this.props; + /* + Wrapping
added to workaround PF bug: + https://github.com/patternfly/patternfly-react/issues/2855 + */ return ( - - {i18n._(t`Instance Groups`)}{' '} - {tooltip && ( - - - - )} - - } - fieldId="org-instance-groups" - > - - +
+ + {i18n._(t`Instance Groups`)}{' '} + {tooltip && ( + + + + )} + + } + fieldId="org-instance-groups" + > + + +
); } } diff --git a/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx b/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx index 5ebd17e2dc..472327aaad 100644 --- a/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx +++ b/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx @@ -7,37 +7,42 @@ function arrayToString(tags) { } function stringToArray(value) { - return value.split(',').filter(val => !!val).map(val => ({ - id: val, - name: val, - })); + return value + .split(',') + .filter(val => !!val) + .map(val => ({ + id: val, + name: val, + })); } /* * Adapter providing a simplified API to a MultiSelect. The value * is a comma-separated string. */ -function TagMultiSelect ({ onChange, value }) { +function TagMultiSelect({ onChange, value }) { const [options, setOptions] = useState(stringToArray(value)); return ( { onChange(arrayToString(val)) }} - onAddNewItem={(newItem) => { + onChange={val => { + onChange(arrayToString(val)); + }} + onAddNewItem={newItem => { if (!options.find(o => o.name === newItem.name)) { setOptions(options.concat(newItem)); } }} associatedItems={stringToArray(value)} options={options} - createNewItem={(name) => ({ id: name, name })} + createNewItem={name => ({ id: name, name })} /> - ) + ); } TagMultiSelect.propTypes = { onChange: func.isRequired, value: string.isRequired, -} +}; export default TagMultiSelect; diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx index 4b078e4308..10c6d83257 100644 --- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx +++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx @@ -85,6 +85,7 @@ class JobTemplateForm extends Component { this.loadLabels = this.loadLabels.bind(this); this.removeLabel = this.removeLabel.bind(this); this.handleProjectValidation = this.handleProjectValidation.bind(this); + this.loadRelatedInstanceGroups = this.loadRelatedInstanceGroups.bind(this); this.loadRelatedProjectPlaybooks = this.loadRelatedProjectPlaybooks.bind( this ); @@ -95,11 +96,11 @@ class JobTemplateForm extends Component { componentDidMount() { const { validateField } = this.props; - validateField('project'); this.setState({ contentError: null, hasContentLoading: true }); Promise.all([this.loadLabels(), this.loadRelatedInstanceGroups()]).then( () => { this.setState({ hasContentLoading: false }); + validateField('project'); } ); } @@ -242,8 +243,6 @@ class JobTemplateForm extends Component { inventory, project, relatedProjectPlaybooks = [], - newLabels, - removedLabels, relatedInstanceGroups, allowCallbacks, } = this.state; @@ -343,8 +342,7 @@ class JobTemplateForm extends Component { validate={required(null, i18n)} onBlur={handleBlur} render={({ form, field }) => { - const isValid = - form && (!form.touched[field.name] || !form.errors[field.name]); + const isValid = !form.touched.job_type || !form.errors.job_type; return ( @@ -391,34 +389,29 @@ class JobTemplateForm extends Component { { - const isValid = form && !form.errors.project; - return ( - ( + { - this.loadRelatedProjectPlaybooks(value.id); - form.setFieldValue('project', value.id); - form.setFieldTouched('project'); - this.setState({ project: value }); - }} - required - /> - ); - }} + onChange={value => { + this.loadRelatedProjectPlaybooks(value.id); + form.setFieldValue('project', value.id); + this.setState({ project: value }); + }} + required + /> + )} /> { - const isValid = - form && (!form.touched[field.name] || !form.errors[field.name]); + const isValid = !form.touched.playbook || !form.errors.playbook; return ( - + )} /> @@ -528,6 +525,7 @@ class JobTemplateForm extends Component { id="template-timeout" name="timeout" type="number" + min="0" label={i18n._(t`Timeout`)} tooltip={i18n._(t`The amount of time (in seconds) to run before the task is canceled. Defaults to 0 for no job @@ -653,7 +651,7 @@ class JobTemplateForm extends Component { } id="option-callbacks" - checked={allowCallbacks} + isChecked={allowCallbacks} onChange={checked => { this.setState({ allowCallbacks: checked }); }} @@ -724,7 +722,7 @@ const FormikApp = withFormik({ forks, limit, verbosity, - job_slicing, + job_slice_count, timeout, diff_mode, job_tags, @@ -733,6 +731,7 @@ const FormikApp = withFormik({ allow_callbacks, allow_simultaneous, use_fact_cache, + host_config_key, summary_fields = { labels: { results: [] } }, } = { ...template }; @@ -744,11 +743,11 @@ const FormikApp = withFormik({ project: project || '', playbook: playbook || '', labels: summary_fields.labels.results, - forks: forks || '', + forks: forks || 0, limit: limit || '', verbosity: verbosity || '0', - job_slice_count: job_slicing || '', - timout: timeout || '', + job_slice_count: job_slice_count || 1, + timeout: timeout || 0, diff_mode: diff_mode || false, job_tags: job_tags || '', skip_tags: skip_tags || '', @@ -756,6 +755,7 @@ const FormikApp = withFormik({ allow_callbacks: allow_callbacks || false, allow_simultaneous: allow_simultaneous || false, use_fact_cache: use_fact_cache || false, + host_config_key: host_config_key || '', }; }, handleSubmit: (values, bag) => bag.props.handleSubmit(values), diff --git a/awx/ui_next/src/util/omitProps.jsx b/awx/ui_next/src/util/omitProps.jsx index bb6b92f150..0184706d23 100644 --- a/awx/ui_next/src/util/omitProps.jsx +++ b/awx/ui_next/src/util/omitProps.jsx @@ -10,7 +10,7 @@ export default function omitProps(Component, ...omit) { const clean = { ...props }; omit.forEach(key => { delete clean[key]; - }) + }); return ; - } + }; } diff --git a/awx/ui_next/src/util/omitProps.test.jsx b/awx/ui_next/src/util/omitProps.test.jsx index d2aef5eac8..03fedcfcb1 100644 --- a/awx/ui_next/src/util/omitProps.test.jsx +++ b/awx/ui_next/src/util/omitProps.test.jsx @@ -32,4 +32,4 @@ describe('omitProps', () => { expect(div.prop('foo')).toEqual(undefined); expect(div.prop('bar')).toEqual('two'); }); -}) +});