added to workaround PF bug:
+ https://github.com/patternfly/patternfly-react/issues/2855
+ */
+ return (
+
+
+ {i18n._(t`Instance Groups`)}{' '}
+ {tooltip && (
+
+
+
+ )}
+
+ }
+ fieldId="org-instance-groups"
+ >
+
+
+
+ );
+ }
+}
+
+InstanceGroupsLookup.propTypes = {
+ value: PropTypes.arrayOf(PropTypes.object).isRequired,
+ tooltip: PropTypes.string,
+ onChange: PropTypes.func.isRequired,
+};
+
+InstanceGroupsLookup.defaultProps = {
+ tooltip: '',
+};
+
+export default withI18n()(InstanceGroupsLookup);
diff --git a/awx/ui_next/src/screens/Template/shared/InventoriesLookup.jsx b/awx/ui_next/src/components/Lookup/InventoriesLookup.jsx
similarity index 98%
rename from awx/ui_next/src/screens/Template/shared/InventoriesLookup.jsx
rename to awx/ui_next/src/components/Lookup/InventoriesLookup.jsx
index 3bef9f782a..f4ef84771d 100644
--- a/awx/ui_next/src/screens/Template/shared/InventoriesLookup.jsx
+++ b/awx/ui_next/src/components/Lookup/InventoriesLookup.jsx
@@ -27,6 +27,7 @@ class InventoriesLookup extends React.Component {
)}
}
+ isRequired={required}
fieldId="inventories-lookup"
>
{},
+ onRemoveItem: () => {},
+ onChange: () => {},
+ options: [],
+ createNewItem: null,
};
constructor(props) {
@@ -61,6 +73,7 @@ class MultiSelect extends Component {
this.handleSelection = this.handleSelection.bind(this);
this.removeChip = this.removeChip.bind(this);
this.handleClick = this.handleClick.bind(this);
+ this.createNewItem = this.createNewItem.bind(this);
}
componentDidMount() {
@@ -73,11 +86,7 @@ class MultiSelect extends Component {
getInitialChipItems() {
const { associatedItems } = this.props;
- return associatedItems.map(item => ({
- name: item.name,
- id: item.id,
- organization: item.organization,
- }));
+ return associatedItems.map(item => ({ ...item }));
}
handleClick(e, option) {
@@ -92,19 +101,33 @@ class MultiSelect extends Component {
handleSelection(e, item) {
const { chipItems } = this.state;
- const { onAddNewItem } = this.props;
+ const { onAddNewItem, onChange } = this.props;
e.preventDefault();
+ const items = chipItems.concat({ name: item.name, id: item.id });
this.setState({
- chipItems: chipItems.concat({ name: item.name, id: item.id }),
+ chipItems: items,
isExpanded: false,
});
onAddNewItem(item);
+ onChange(items);
+ }
+
+ createNewItem(name) {
+ const { createNewItem } = this.props;
+ if (createNewItem) {
+ return createNewItem(name);
+ }
+ return {
+ id: Math.random(),
+ name,
+ };
}
handleAddItem(event) {
const { input, chipItems } = this.state;
- const { onAddNewItem } = this.props;
+ const { options, onAddNewItem, onChange } = this.props;
+ const match = options.find(item => item.name === input);
const isIncluded = chipItems.some(chipItem => chipItem.name === input);
if (!input) {
@@ -118,30 +141,35 @@ class MultiSelect extends Component {
this.setState({ input: '', isExpanded: false });
return;
}
- if (event.key === 'Enter') {
+ const isNewItem = !match || !chipItems.find(item => item.id === match.id);
+ if (event.key === 'Enter' && isNewItem) {
event.preventDefault();
+ const items = chipItems.concat({ name: input, id: input });
+ const newItem = match || this.createNewItem(input);
this.setState({
- chipItems: chipItems.concat({ name: input, id: input }),
+ chipItems: items,
isExpanded: false,
input: '',
});
- onAddNewItem(input);
- } else if (event.key === 'Tab') {
- this.setState({ input: '' });
+ onAddNewItem(newItem);
+ onChange(items);
+ } else if (!isNewItem || event.key === 'Tab') {
+ this.setState({ isExpanded: false, input: '' });
}
}
- handleInputChange(e) {
- this.setState({ input: e, isExpanded: true });
+ handleInputChange(value) {
+ this.setState({ input: value, isExpanded: true });
}
removeChip(e, item) {
- const { onRemoveItem } = this.props;
+ const { onRemoveItem, onChange } = this.props;
const { chipItems } = this.state;
const chips = chipItems.filter(chip => chip.id !== item.id);
this.setState({ chipItems: chips });
onRemoveItem(item);
+ onChange(chips);
e.preventDefault();
}
@@ -214,5 +242,4 @@ class MultiSelect extends Component {
);
}
}
-export { MultiSelect as _MultiSelect };
-export default withI18n()(withRouter(MultiSelect));
+export default MultiSelect;
diff --git a/awx/ui_next/src/components/MultiSelect/MultiSelect.test.jsx b/awx/ui_next/src/components/MultiSelect/MultiSelect.test.jsx
index 66996fcdb7..e52e56b3c1 100644
--- a/awx/ui_next/src/components/MultiSelect/MultiSelect.test.jsx
+++ b/awx/ui_next/src/components/MultiSelect/MultiSelect.test.jsx
@@ -1,7 +1,7 @@
import React from 'react';
+import { mount } from 'enzyme';
import { sleep } from '@testUtils/testUtils';
-import MultiSelect, { _MultiSelect } from './MultiSelect';
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import MultiSelect from './MultiSelect';
describe('', () => {
const associatedItems = [
@@ -11,11 +11,7 @@ describe('', () => {
const options = [{ name: 'Angry', id: 3 }, { name: 'Potato', id: 4 }];
test('Initially render successfully', () => {
- const getInitialChipItems = jest.spyOn(
- _MultiSelect.prototype,
- 'getInitialChipItems'
- );
- const wrapper = mountWithContexts(
+ const wrapper = mount(
', () => {
);
const component = wrapper.find('MultiSelect');
- expect(getInitialChipItems).toBeCalled();
expect(component.state().chipItems.length).toBe(2);
});
+
test('handleSelection add item to chipItems', async () => {
- const wrapper = mountWithContexts(
+ const wrapper = mount(
', () => {
await sleep(1);
expect(component.state().chipItems.length).toBe(2);
});
+
test('handleAddItem adds a chip only when Tab is pressed', () => {
const onAddNewItem = jest.fn();
- const wrapper = mountWithContexts(
+ const onChange = jest.fn();
+ const wrapper = mount(
@@ -68,14 +67,18 @@ describe('', () => {
expect(component.state().input.length).toBe(0);
expect(component.state().isExpanded).toBe(false);
expect(onAddNewItem).toBeCalled();
+ expect(onChange).toBeCalled();
});
+
test('removeChip removes chip properly', () => {
const onRemoveItem = jest.fn();
+ const onChange = jest.fn();
- const wrapper = mountWithContexts(
+ const wrapper = mount(
@@ -89,5 +92,6 @@ describe('', () => {
.removeChip(event, { name: 'Foo', id: 1, organization: 1 });
expect(component.state().chipItems.length).toBe(1);
expect(onRemoveItem).toBeCalled();
+ expect(onChange).toBeCalled();
});
});
diff --git a/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx b/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx
new file mode 100644
index 0000000000..472327aaad
--- /dev/null
+++ b/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { func, string } from 'prop-types';
+import MultiSelect from './MultiSelect';
+
+function arrayToString(tags) {
+ return tags.map(v => v.name).join(',');
+}
+
+function stringToArray(value) {
+ 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 }) {
+ const [options, setOptions] = useState(stringToArray(value));
+
+ return (
+ {
+ 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 })}
+ />
+ );
+}
+
+TagMultiSelect.propTypes = {
+ onChange: func.isRequired,
+ value: string.isRequired,
+};
+
+export default TagMultiSelect;
diff --git a/awx/ui_next/src/components/MultiSelect/TagMultiSelect.test.jsx b/awx/ui_next/src/components/MultiSelect/TagMultiSelect.test.jsx
new file mode 100644
index 0000000000..41f4aa5540
--- /dev/null
+++ b/awx/ui_next/src/components/MultiSelect/TagMultiSelect.test.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import TagMultiSelect from './TagMultiSelect';
+
+describe('', () => {
+ it('should render MultiSelect', () => {
+ const wrapper = mount(
+
+ );
+ expect(wrapper.find('MultiSelect').prop('options')).toEqual([
+ { id: 'foo', name: 'foo' },
+ { id: 'bar', name: 'bar' },
+ ]);
+ });
+
+ it('should not treat empty string as an option', () => {
+ const wrapper = mount();
+ expect(wrapper.find('MultiSelect').prop('options')).toEqual([]);
+ });
+
+ it('should trigger onChange', () => {
+ const onChange = jest.fn();
+ const wrapper = mount(
+
+ );
+
+ const select = wrapper.find('MultiSelect');
+ select.invoke('onChange')([
+ { name: 'foo' },
+ { name: 'bar' },
+ { name: 'baz' },
+ ]);
+ expect(onChange).toHaveBeenCalledWith('foo,bar,baz');
+ });
+});
diff --git a/awx/ui_next/src/components/MultiSelect/index.js b/awx/ui_next/src/components/MultiSelect/index.js
index 8cda42c7cb..d983765272 100644
--- a/awx/ui_next/src/components/MultiSelect/index.js
+++ b/awx/ui_next/src/components/MultiSelect/index.js
@@ -1 +1,2 @@
export { default } from './MultiSelect';
+export { default as TagMultiSelect } from './TagMultiSelect';
diff --git a/awx/ui_next/src/screens/Organization/shared/InstanceGroupsLookup.jsx b/awx/ui_next/src/screens/Organization/shared/InstanceGroupsLookup.jsx
deleted file mode 100644
index a85e184f76..0000000000
--- a/awx/ui_next/src/screens/Organization/shared/InstanceGroupsLookup.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-import { FormGroup, Tooltip } from '@patternfly/react-core';
-import { QuestionCircleIcon } from '@patternfly/react-icons';
-
-import { InstanceGroupsAPI } from '@api';
-import Lookup from '@components/Lookup';
-
-const getInstanceGroups = async params => InstanceGroupsAPI.read(params);
-
-class InstanceGroupsLookup extends React.Component {
- render() {
- const { value, tooltip, onChange, i18n } = this.props;
-
- return (
-
- {i18n._(t`Instance Groups`)}{' '}
- {tooltip && (
-
-
-
- )}
-
- }
- fieldId="org-instance-groups"
- >
-
-
- );
- }
-}
-
-InstanceGroupsLookup.propTypes = {
- value: PropTypes.arrayOf(PropTypes.object).isRequired,
- tooltip: PropTypes.string,
- onChange: PropTypes.func.isRequired,
-};
-
-InstanceGroupsLookup.defaultProps = {
- tooltip: '',
-};
-
-export default withI18n()(InstanceGroupsLookup);
diff --git a/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx b/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx
index 360a195048..2bc0dcdc4d 100644
--- a/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx
+++ b/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx
@@ -15,10 +15,9 @@ import FormRow from '@components/FormRow';
import FormField from '@components/FormField';
import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
import AnsibleSelect from '@components/AnsibleSelect';
+import { InstanceGroupsLookup } from '@components/Lookup/';
import { required, minMaxValue } from '@util/validators';
-import InstanceGroupsLookup from './InstanceGroupsLookup';
-
class OrganizationForm extends Component {
constructor(props) {
super(props);
diff --git a/awx/ui_next/src/screens/Organization/shared/index.js b/awx/ui_next/src/screens/Organization/shared/index.js
index 7f931cff31..2ddcf675b7 100644
--- a/awx/ui_next/src/screens/Organization/shared/index.js
+++ b/awx/ui_next/src/screens/Organization/shared/index.js
@@ -1,2 +1,2 @@
-export { default as InstanceGroupsLookup } from './InstanceGroupsLookup';
+/* eslint-disable-next-line import/prefer-default-export */
export { default as OrganizationForm } from './OrganizationForm';
diff --git a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx
index b3b4d12f92..85bec5dfff 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx
@@ -17,23 +17,30 @@ function JobTemplateAdd({ history, i18n }) {
const [formSubmitError, setFormSubmitError] = useState(null);
async function handleSubmit(values) {
- const { newLabels, removedLabels } = values;
- delete values.newLabels;
- delete values.removedLabels;
+ const {
+ newLabels,
+ removedLabels,
+ addedInstanceGroups,
+ removedInstanceGroups,
+ ...remainingValues
+ } = values;
setFormSubmitError(null);
try {
const {
data: { id, type },
- } = await JobTemplatesAPI.create(values);
- await Promise.all([submitLabels(id, newLabels, removedLabels)]);
+ } = await JobTemplatesAPI.create(remainingValues);
+ await Promise.all([
+ submitLabels(id, newLabels, removedLabels),
+ submitInstanceGroups(id, addedInstanceGroups, removedInstanceGroups),
+ ]);
history.push(`/templates/${type}/${id}/details`);
} catch (error) {
setFormSubmitError(error);
}
}
- async function submitLabels(id, newLabels = [], removedLabels = []) {
+ function submitLabels(id, newLabels = [], removedLabels = []) {
const disassociationPromises = removedLabels.map(label =>
JobTemplatesAPI.disassociateLabel(id, label)
);
@@ -44,12 +51,18 @@ function JobTemplateAdd({ history, i18n }) {
.filter(label => label.organization)
.map(label => JobTemplatesAPI.generateLabel(id, label));
- const results = await Promise.all([
+ return Promise.all([
...disassociationPromises,
...associationPromises,
...creationPromises,
]);
- return results;
+ }
+
+ function submitInstanceGroups(templateId, addedGroups = []) {
+ const associatePromises = addedGroups.map(group =>
+ JobTemplatesAPI.associateInstanceGroup(templateId, group.id)
+ );
+ return Promise.all(associatePromises);
}
function handleCancel() {
diff --git a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx
index f5c68c7cf5..506b97958e 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx
@@ -6,6 +6,27 @@ import { JobTemplatesAPI, LabelsAPI } from '@api';
jest.mock('@api');
+const jobTemplateData = {
+ name: 'Foo',
+ description: 'Baz',
+ job_type: 'run',
+ inventory: 1,
+ project: 2,
+ playbook: 'Bar',
+ forks: 0,
+ limit: '',
+ verbosity: '0',
+ job_slice_count: 1,
+ timeout: 0,
+ job_tags: '',
+ skip_tags: '',
+ diff_mode: false,
+ allow_callbacks: false,
+ allow_simultaneous: false,
+ use_fact_cache: false,
+ host_config_key: '',
+};
+
describe('', () => {
const defaultProps = {
description: '',
@@ -63,14 +84,6 @@ describe('', () => {
});
test('handleSubmit should post to api', async done => {
- const jobTemplateData = {
- description: 'Baz',
- inventory: 1,
- job_type: 'run',
- name: 'Foo',
- playbook: 'Bar',
- project: 2,
- };
JobTemplatesAPI.create.mockResolvedValueOnce({
data: {
id: 1,
@@ -99,14 +112,6 @@ describe('', () => {
const history = {
push: jest.fn(),
};
- const jobTemplateData = {
- description: 'Baz',
- inventory: 1,
- job_type: 'run',
- name: 'Foo',
- playbook: 'Bar',
- project: 2,
- };
JobTemplatesAPI.create.mockResolvedValueOnce({
data: {
id: 1,
@@ -118,7 +123,9 @@ describe('', () => {
context: { router: { history } },
});
- await wrapper.find('JobTemplateForm').prop('handleSubmit')(jobTemplateData);
+ await wrapper.find('JobTemplateForm').invoke('handleSubmit')(
+ jobTemplateData
+ );
await sleep(0);
expect(history.push).toHaveBeenCalledWith(
'/templates/job_template/1/details'
@@ -134,7 +141,7 @@ describe('', () => {
context: { router: { history } },
});
await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
- wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
+ wrapper.find('button[aria-label="Cancel"]').invoke('onClick')();
expect(history.push).toHaveBeenCalledWith('/templates');
done();
});
diff --git a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx
index 51e5a3ff65..8771b7c3bf 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx
@@ -102,18 +102,22 @@ class JobTemplateEdit extends Component {
}
async handleSubmit(values) {
+ const { template, history } = this.props;
const {
- template: { id },
- history,
- } = this.props;
- const { newLabels, removedLabels } = values;
- delete values.newLabels;
- delete values.removedLabels;
+ newLabels,
+ removedLabels,
+ addedInstanceGroups,
+ removedInstanceGroups,
+ ...remainingValues
+ } = values;
this.setState({ formSubmitError: null });
try {
- await JobTemplatesAPI.update(id, values);
- await Promise.all([this.submitLabels(newLabels, removedLabels)]);
+ await JobTemplatesAPI.update(template.id, remainingValues);
+ await Promise.all([
+ this.submitLabels(newLabels, removedLabels),
+ this.submitInstanceGroups(addedInstanceGroups, removedInstanceGroups),
+ ]);
history.push(this.detailsUrl);
} catch (formSubmitError) {
this.setState({ formSubmitError });
@@ -121,18 +125,16 @@ class JobTemplateEdit extends Component {
}
async submitLabels(newLabels = [], removedLabels = []) {
- const {
- template: { id },
- } = this.props;
+ const { template } = this.props;
const disassociationPromises = removedLabels.map(label =>
- JobTemplatesAPI.disassociateLabel(id, label)
+ JobTemplatesAPI.disassociateLabel(template.id, label)
);
const associationPromises = newLabels
.filter(label => !label.organization)
- .map(label => JobTemplatesAPI.associateLabel(id, label));
+ .map(label => JobTemplatesAPI.associateLabel(template.id, label));
const creationPromises = newLabels
.filter(label => label.organization)
- .map(label => JobTemplatesAPI.generateLabel(id, label));
+ .map(label => JobTemplatesAPI.generateLabel(template.id, label));
const results = await Promise.all([
...disassociationPromises,
@@ -142,6 +144,17 @@ class JobTemplateEdit extends Component {
return results;
}
+ async submitInstanceGroups(addedGroups, removedGroups) {
+ const { template } = this.props;
+ const associatePromises = addedGroups.map(group =>
+ JobTemplatesAPI.associateInstanceGroup(template.id, group.id)
+ );
+ const disassociatePromises = removedGroups.map(group =>
+ JobTemplatesAPI.disassociateInstanceGroup(template.id, group.id)
+ );
+ return Promise.all([...associatePromises, ...disassociatePromises]);
+ }
+
handleCancel() {
const { history } = this.props;
history.push(this.detailsUrl);
diff --git a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx
index 682d29b01a..3f43faf279 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx
@@ -15,6 +15,18 @@ const mockJobTemplate = {
project: 3,
playbook: 'Baz',
type: 'job_template',
+ forks: 0,
+ limit: '',
+ verbosity: '0',
+ job_slice_count: 1,
+ timeout: 0,
+ job_tags: '',
+ skip_tags: '',
+ diff_mode: false,
+ allow_callbacks: false,
+ allow_simultaneous: false,
+ use_fact_cache: false,
+ host_config_key: '',
summary_fields: {
user_capabilities: {
edit: true,
@@ -92,6 +104,32 @@ const mockRelatedProjectPlaybooks = [
'vault.yml',
];
+const mockInstanceGroups = [
+ {
+ id: 1,
+ type: 'instance_group',
+ url: '/api/v2/instance_groups/1/',
+ related: {
+ jobs: '/api/v2/instance_groups/1/jobs/',
+ instances: '/api/v2/instance_groups/1/instances/',
+ },
+ name: 'tower',
+ capacity: 59,
+ committed_capacity: 0,
+ consumed_capacity: 0,
+ percent_capacity_remaining: 100.0,
+ jobs_running: 0,
+ jobs_total: 3,
+ instances: 1,
+ controller: null,
+ is_controller: false,
+ is_isolated: false,
+ policy_instance_percentage: 100,
+ policy_instance_minimum: 0,
+ policy_instance_list: [],
+ },
+];
+
JobTemplatesAPI.readCredentials.mockResolvedValue({
data: mockRelatedCredentials,
});
@@ -101,12 +139,25 @@ ProjectsAPI.readPlaybooks.mockResolvedValue({
LabelsAPI.read.mockResolvedValue({ data: { results: [] } });
describe('', () => {
- test('initially renders successfully', async done => {
+ beforeEach(() => {
+ LabelsAPI.read.mockResolvedValue({ data: { results: [] } });
+ JobTemplatesAPI.readCredentials.mockResolvedValue({
+ data: mockRelatedCredentials,
+ });
+ JobTemplatesAPI.readInstanceGroups.mockReturnValue({
+ data: { results: mockInstanceGroups },
+ });
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ test('initially renders successfully', async () => {
const wrapper = mountWithContexts(
);
await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
- done();
});
test('handleSubmit should call api update', async done => {
diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
index d7a699c387..26fdd4c6e1 100644
--- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
@@ -4,30 +4,45 @@ import { withRouter } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { withFormik, Field } from 'formik';
-import { Form, FormGroup, Tooltip, Card } from '@patternfly/react-core';
+import {
+ Form,
+ FormGroup,
+ Tooltip,
+ Card,
+ Switch,
+ Checkbox,
+ TextInput,
+} from '@patternfly/react-core';
import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons';
import ContentError from '@components/ContentError';
import ContentLoading from '@components/ContentLoading';
import AnsibleSelect from '@components/AnsibleSelect';
-import MultiSelect from '@components/MultiSelect';
+import MultiSelect, { TagMultiSelect } from '@components/MultiSelect';
import FormActionGroup from '@components/FormActionGroup';
-import FormField from '@components/FormField';
+import FormField, { CheckboxField } from '@components/FormField';
import FormRow from '@components/FormRow';
+import CollapsibleSection from '@components/CollapsibleSection';
import { required } from '@util/validators';
import styled from 'styled-components';
import { JobTemplate } from '@types';
-import InventoriesLookup from './InventoriesLookup';
+import { InventoriesLookup, InstanceGroupsLookup } from '@components/Lookup';
import ProjectLookup from './ProjectLookup';
-import { LabelsAPI, ProjectsAPI } from '@api';
+import { JobTemplatesAPI, LabelsAPI, ProjectsAPI } from '@api';
const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
margin-left: 10px;
`;
-const QSConfig = {
- page: 1,
- page_size: 200,
- order_by: 'name',
-};
+
+const GridFormGroup = styled(FormGroup)`
+ & > label {
+ grid-column: 1 / -1;
+ }
+
+ && {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ }
+`;
class JobTemplateForm extends Component {
static propTypes = {
@@ -49,6 +64,7 @@ class JobTemplateForm extends Component {
labels: { results: [] },
project: null,
},
+ isNew: true,
},
};
@@ -63,31 +79,45 @@ class JobTemplateForm extends Component {
project: props.template.summary_fields.project,
inventory: props.template.summary_fields.inventory,
relatedProjectPlaybooks: props.relatedProjectPlaybooks,
+ relatedInstanceGroups: [],
+ allowCallbacks: !!props.template.host_config_key,
};
this.handleNewLabel = this.handleNewLabel.bind(this);
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
);
+ this.handleInstanceGroupsChange = this.handleInstanceGroupsChange.bind(
+ this
+ );
}
- async componentDidMount() {
+ componentDidMount() {
const { validateField } = this.props;
- await this.loadLabels(QSConfig);
- validateField('project');
+ this.setState({ contentError: null, hasContentLoading: true });
+ Promise.all([this.loadLabels(), this.loadRelatedInstanceGroups()]).then(
+ () => {
+ this.setState({ hasContentLoading: false });
+ validateField('project');
+ }
+ );
}
- async loadLabels(QueryConfig) {
+ async loadLabels() {
// This function assumes that the user has no more than 400
// labels. For the vast majority of users this will be more thans
- // enough.This can be updated to allow more than 400 labels if we
+ // enough. This can be updated to allow more than 400 labels if we
// decide it is necessary.
- this.setState({ contentError: null, hasContentLoading: true });
let loadedLabels;
try {
- const { data } = await LabelsAPI.read(QueryConfig);
+ const { data } = await LabelsAPI.read({
+ page: 1,
+ page_size: 200,
+ order_by: 'name',
+ });
loadedLabels = [...data.results];
if (data.next && data.next.includes('page=2')) {
const {
@@ -102,8 +132,22 @@ class JobTemplateForm extends Component {
this.setState({ loadedLabels });
} catch (err) {
this.setState({ contentError: err });
- } finally {
- this.setState({ hasContentLoading: false });
+ }
+ }
+
+ async loadRelatedInstanceGroups() {
+ const { template } = this.props;
+ if (!template.id) {
+ return;
+ }
+ try {
+ const { data } = await JobTemplatesAPI.readInstanceGroups(template.id);
+ this.setState({
+ initialInstanceGroups: data.results,
+ relatedInstanceGroups: [...data.results],
+ });
+ } catch (err) {
+ this.setState({ contentError: err });
}
}
@@ -116,23 +160,6 @@ class JobTemplateForm extends Component {
newLabel => newLabel.name !== label
);
this.setState({ newLabels: filteredLabels });
- } else if (typeof label === 'string') {
- setFieldValue('newLabels', [
- ...newLabels,
- {
- name: label,
- organization: template.summary_fields.inventory.organization_id,
- },
- ]);
- this.setState({
- newLabels: [
- ...newLabels,
- {
- name: label,
- organization: template.summary_fields.inventory.organization_id,
- },
- ],
- });
} else {
setFieldValue('newLabels', [
...newLabels,
@@ -141,7 +168,12 @@ class JobTemplateForm extends Component {
this.setState({
newLabels: [
...newLabels,
- { name: label.name, associate: true, id: label.id },
+ {
+ name: label.name,
+ associate: true,
+ id: label.id,
+ organization: template.summary_fields.inventory.organization_id,
+ },
],
});
}
@@ -201,6 +233,30 @@ class JobTemplateForm extends Component {
};
}
+ handleInstanceGroupsChange(relatedInstanceGroups) {
+ const { setFieldValue } = this.props;
+ const { initialInstanceGroups } = this.state;
+ let added = [];
+ const removed = [];
+ if (initialInstanceGroups) {
+ initialInstanceGroups.forEach(group => {
+ if (!relatedInstanceGroups.find(g => g.id === group.id)) {
+ removed.push(group);
+ }
+ });
+ relatedInstanceGroups.forEach(group => {
+ if (!initialInstanceGroups.find(g => g.id === group.id)) {
+ added.push(group);
+ }
+ });
+ } else {
+ added = relatedInstanceGroups;
+ }
+ setFieldValue('addedInstanceGroups', added);
+ setFieldValue('removedInstanceGroups', removed);
+ this.setState({ relatedInstanceGroups });
+ }
+
render() {
const {
loadedLabels,
@@ -209,6 +265,8 @@ class JobTemplateForm extends Component {
inventory,
project,
relatedProjectPlaybooks = [],
+ relatedInstanceGroups,
+ allowCallbacks,
} = this.state;
const {
handleCancel,
@@ -255,6 +313,20 @@ class JobTemplateForm extends Component {
]
);
+ const verbosityOptions = [
+ { value: '0', key: '0', label: i18n._(t`0 (Normal)`) },
+ { value: '1', key: '1', label: i18n._(t`1 (Verbose)`) },
+ { value: '2', key: '2', label: i18n._(t`2 (More Verbose)`) },
+ { value: '3', key: '3', label: i18n._(t`3 (Debug)`) },
+ { value: '4', key: '4', label: i18n._(t`4 (Connection Debug)`) },
+ ];
+ let callbackUrl;
+ if (template && template.related) {
+ const { origin } = document.location;
+ const path = template.related.callback || `${template.url}callback`;
+ callbackUrl = `${origin}${path}`;
+ }
+
if (hasContentLoading) {
return (
@@ -270,7 +342,7 @@ class JobTemplateForm extends Component {
);
}
-
+ const AdvancedFieldsWrapper = template.isNew ? CollapsibleSection : 'div';
return (
);
@@ -429,8 +740,21 @@ const FormikApp = withFormik({
description = '',
job_type = 'run',
inventory = '',
- playbook = '',
project = '',
+ playbook = '',
+ forks,
+ limit,
+ verbosity,
+ job_slice_count,
+ timeout,
+ diff_mode,
+ job_tags,
+ skip_tags,
+ become_enabled,
+ allow_callbacks,
+ allow_simultaneous,
+ use_fact_cache,
+ host_config_key,
summary_fields = { labels: { results: [] } },
} = { ...template };
@@ -442,6 +766,19 @@ const FormikApp = withFormik({
project: project || '',
playbook: playbook || '',
labels: summary_fields.labels.results,
+ forks: forks || 0,
+ limit: limit || '',
+ verbosity: verbosity || '0',
+ job_slice_count: job_slice_count || 1,
+ timeout: timeout || 0,
+ diff_mode: diff_mode || false,
+ job_tags: job_tags || '',
+ skip_tags: skip_tags || '',
+ become_enabled: become_enabled || false,
+ 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/screens/Template/shared/JobTemplateForm.test.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx
index 1d6a46adb2..cc079ef9c1 100644
--- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx
+++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
import { sleep } from '@testUtils/testUtils';
import JobTemplateForm, { _JobTemplateForm } from './JobTemplateForm';
-import { LabelsAPI } from '@api';
+import { LabelsAPI, JobTemplatesAPI } from '@api';
jest.mock('@api');
@@ -29,17 +29,45 @@ describe('', () => {
labels: { results: [{ name: 'Sushi', id: 1 }, { name: 'Major', id: 2 }] },
},
};
+ const mockInstanceGroups = [
+ {
+ id: 1,
+ type: 'instance_group',
+ url: '/api/v2/instance_groups/1/',
+ related: {
+ jobs: '/api/v2/instance_groups/1/jobs/',
+ instances: '/api/v2/instance_groups/1/instances/',
+ },
+ name: 'tower',
+ capacity: 59,
+ committed_capacity: 0,
+ consumed_capacity: 0,
+ percent_capacity_remaining: 100.0,
+ jobs_running: 0,
+ jobs_total: 3,
+ instances: 1,
+ controller: null,
+ is_controller: false,
+ is_isolated: false,
+ policy_instance_percentage: 100,
+ policy_instance_minimum: 0,
+ policy_instance_list: [],
+ },
+ ];
beforeEach(() => {
LabelsAPI.read.mockReturnValue({
data: mockData.summary_fields.labels,
});
+ JobTemplatesAPI.readInstanceGroups.mockReturnValue({
+ data: { results: mockInstanceGroups },
+ });
});
afterEach(() => {
jest.clearAllMocks();
});
- test('initially renders successfully', async done => {
+ test('should render labels MultiSelect', async () => {
const wrapper = mountWithContexts(
', () => {
handleCancel={jest.fn()}
/>
);
-
- await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
+ await waitForElement(wrapper, 'Form', el => el.length === 0);
expect(LabelsAPI.read).toHaveBeenCalled();
+ expect(JobTemplatesAPI.readInstanceGroups).toHaveBeenCalled();
+ wrapper.update();
expect(
wrapper
- .find('FormGroup[fieldId="template-labels"] MultiSelect Chip')
- .first()
- .text()
- ).toEqual('Sushi');
- done();
+ .find('FormGroup[fieldId="template-labels"] MultiSelect')
+ .prop('associatedItems')
+ ).toEqual(mockData.summary_fields.labels.results);
});
- test('should update form values on input changes', async done => {
+ test('should update form values on input changes', async () => {
const wrapper = mountWithContexts(
', () => {
target: { value: 'new baz type', name: 'playbook' },
});
expect(form.state('values').playbook).toEqual('new baz type');
- done();
});
- test('should call handleSubmit when Submit button is clicked', async done => {
+ test('should call handleSubmit when Submit button is clicked', async () => {
const handleSubmit = jest.fn();
const wrapper = mountWithContexts(
', () => {
wrapper.find('button[aria-label="Save"]').simulate('click');
await sleep(1);
expect(handleSubmit).toBeCalled();
- done();
});
- test('should call handleCancel when Cancel button is clicked', async done => {
+ test('should call handleCancel when Cancel button is clicked', async () => {
const handleCancel = jest.fn();
const wrapper = mountWithContexts(
', () => {
expect(handleCancel).not.toHaveBeenCalled();
wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
expect(handleCancel).toBeCalled();
- done();
});
- test('should call loadRelatedProjectPlaybooks when project value changes', async done => {
+ test('should call loadRelatedProjectPlaybooks when project value changes', async () => {
const loadRelatedProjectPlaybooks = jest.spyOn(
_JobTemplateForm.prototype,
'loadRelatedProjectPlaybooks'
@@ -150,14 +174,9 @@ describe('', () => {
name: 'project',
});
expect(loadRelatedProjectPlaybooks).toHaveBeenCalledWith(10);
- done();
});
- test('handleNewLabel should arrange new labels properly', async done => {
- const handleNewLabel = jest.spyOn(
- _JobTemplateForm.prototype,
- 'handleNewLabel'
- );
+ test('handleNewLabel should arrange new labels properly', async () => {
const event = { key: 'Enter', preventDefault: () => {} };
const wrapper = mountWithContexts(
', () => {
/>
);
await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
- const multiSelect = wrapper.find('MultiSelect');
+ const multiSelect = wrapper.find(
+ 'FormGroup[fieldId="template-labels"] MultiSelect'
+ );
const component = wrapper.find('JobTemplateForm');
wrapper.setState({ newLabels: [], loadedLabels: [], removedLabels: [] });
multiSelect.setState({ input: 'Foo' });
- component.find('input[aria-label="labels"]').prop('onKeyDown')(event);
- expect(handleNewLabel).toHaveBeenCalledWith('Foo');
+ component
+ .find('FormGroup[fieldId="template-labels"] input[aria-label="labels"]')
+ .prop('onKeyDown')(event);
component.instance().handleNewLabel({ name: 'Bar', id: 2 });
- expect(component.state().newLabels).toEqual([
- { name: 'Foo', organization: 1 },
- { associate: true, id: 2, name: 'Bar' },
- ]);
- done();
+ const newLabels = component.state('newLabels');
+ expect(newLabels).toHaveLength(2);
+ expect(newLabels[0].name).toEqual('Foo');
+ expect(newLabels[0].organization).toEqual(1);
});
- test('disassociateLabel should arrange new labels properly', async done => {
+
+ test('disassociateLabel should arrange new labels properly', async () => {
const wrapper = mountWithContexts(
', () => {
component.instance().removeLabel({ name: 'Sushi', id: 1 });
expect(component.state().newLabels.length).toBe(0);
expect(component.state().removedLabels.length).toBe(1);
- done();
});
});
diff --git a/awx/ui_next/src/util/omitProps.jsx b/awx/ui_next/src/util/omitProps.jsx
new file mode 100644
index 0000000000..0184706d23
--- /dev/null
+++ b/awx/ui_next/src/util/omitProps.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+/*
+ * Prevents styled-components from passing down an unsupported
+ * props to children, resulting in console warnings.
+ * https://github.com/styled-components/styled-components/issues/439
+ */
+export default function omitProps(Component, ...omit) {
+ return function Omit(props) {
+ 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
new file mode 100644
index 0000000000..03fedcfcb1
--- /dev/null
+++ b/awx/ui_next/src/util/omitProps.test.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import omitProps from './omitProps';
+
+describe('omitProps', () => {
+ test('should render child component', () => {
+ const Omit = omitProps('div');
+ const wrapper = mount();
+
+ const div = wrapper.find('div');
+ expect(div).toHaveLength(1);
+ expect(div.prop('foo')).toEqual('one');
+ expect(div.prop('bar')).toEqual('two');
+ });
+
+ test('should not pass omitted props to child component', () => {
+ const Omit = omitProps('div', 'foo', 'bar');
+ const wrapper = mount();
+
+ const div = wrapper.find('div');
+ expect(div).toHaveLength(1);
+ expect(div.prop('foo')).toEqual(undefined);
+ expect(div.prop('bar')).toEqual(undefined);
+ });
+
+ test('should support mix of omitted and non-omitted props', () => {
+ const Omit = omitProps('div', 'foo');
+ const wrapper = mount();
+
+ const div = wrapper.find('div');
+ expect(div).toHaveLength(1);
+ expect(div.prop('foo')).toEqual(undefined);
+ expect(div.prop('bar')).toEqual('two');
+ });
+});