diff --git a/__tests__/components/AnsibleSelect.test.jsx b/__tests__/components/AnsibleSelect.test.jsx
new file mode 100644
index 0000000000..47a068ef4f
--- /dev/null
+++ b/__tests__/components/AnsibleSelect.test.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import AnsibleSelect from '../../src/components/AnsibleSelect';
+
+const mockData = ['foo', 'bar'];
+describe('', () => {
+ test('initially renders succesfully', async() => {
+ const wrapper = mount( {}} />);
+ wrapper.setState({ isHidden: false });
+ });
+ test('calls "onSelectChange" on dropdown select change', () => {
+ const spy = jest.spyOn(AnsibleSelect.prototype, 'onSelectChange');
+ const wrapper = mount( {}} />);
+ wrapper.setState({ isHidden: false });
+ expect(spy).not.toHaveBeenCalled();
+ wrapper.find('select').simulate('change');
+ expect(spy).toHaveBeenCalled();
+ });
+});
\ No newline at end of file
diff --git a/__tests__/pages/Organizations/views/Organization.add.test.jsx b/__tests__/pages/Organizations/views/Organization.add.test.jsx
index 2482c84984..434621985d 100644
--- a/__tests__/pages/Organizations/views/Organization.add.test.jsx
+++ b/__tests__/pages/Organizations/views/Organization.add.test.jsx
@@ -11,18 +11,6 @@ describe('', () => {
/>
);
});
- test('calls "onSelectChange" on dropdown select change', () => {
- const spy = jest.spyOn(OrganizationAdd.prototype, 'onSelectChange');
- const wrapper = mount(
-
- );
- expect(spy).not.toHaveBeenCalled();
- wrapper.find('select').simulate('change');
- expect(spy).toHaveBeenCalled();
- });
test('calls "handleChange" when input values change', () => {
const spy = jest.spyOn(OrganizationAdd.prototype, 'handleChange');
const wrapper = mount(
diff --git a/src/components/AnsibleSelect/AnsibleSelect.jsx b/src/components/AnsibleSelect/AnsibleSelect.jsx
new file mode 100644
index 0000000000..d411c1d17a
--- /dev/null
+++ b/src/components/AnsibleSelect/AnsibleSelect.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+ FormGroup,
+ Select,
+ SelectOption,
+} from '@patternfly/react-core';
+
+class AnsibleSelect extends React.Component {
+ constructor(props) {
+ super(props);
+ this.onSelectChange = this.onSelectChange.bind(this);
+ }
+
+ onSelectChange(val, _) {
+ this.props.selectChange(val);
+ }
+
+ render() {
+ const { hidden } = this.props;
+ if (hidden) {
+ return null;
+ } else {
+ return (
+
+
+
+ );
+ }
+ }
+}
+
+export default AnsibleSelect;
diff --git a/src/components/AnsibleSelect/index.js b/src/components/AnsibleSelect/index.js
new file mode 100644
index 0000000000..219abcfefd
--- /dev/null
+++ b/src/components/AnsibleSelect/index.js
@@ -0,0 +1,3 @@
+import AnsibleSelect from './AnsibleSelect';
+
+export default AnsibleSelect;
diff --git a/src/pages/Organizations/views/Organization.add.jsx b/src/pages/Organizations/views/Organization.add.jsx
index 6e3d9b860c..a95f69831b 100644
--- a/src/pages/Organizations/views/Organization.add.jsx
+++ b/src/pages/Organizations/views/Organization.add.jsx
@@ -11,14 +11,13 @@ import {
ToolbarGroup,
Button,
Gallery,
- Select,
- SelectOption,
Card,
CardBody,
} from '@patternfly/react-core';
-import { API_ORGANIZATIONS } from '../../../endpoints';
+import { API_ORGANIZATIONS, API_CONFIG } from '../../../endpoints';
import api from '../../../api';
+import AnsibleSelect from '../../../components/AnsibleSelect'
const { light } = PageSectionVariants;
class OrganizationAdd extends React.Component {
@@ -30,17 +29,20 @@ class OrganizationAdd extends React.Component {
this.onSubmit = this.onSubmit.bind(this);
this.resetForm = this.resetForm.bind(this);
}
+
state = {
name: '',
description: '',
instanceGroups: '',
- ansible_environment: 'default',
- post_endpoint: API_ORGANIZATIONS,
+ custom_virtualenv: '',
+ custom_virtualenvs: [],
+ hideAnsibleSelect: true,
};
- onSelectChange (value, _) {
- this.setState({ ansible_environment: value });
+ onSelectChange(value, _) {
+ this.setState({ custom_virtualenv: value });
};
+
resetForm() {
this.setState({
...this.state,
@@ -48,20 +50,25 @@ class OrganizationAdd extends React.Component {
description: ''
})
}
+
handleChange(_, evt) {
this.setState({ [evt.target.name]: evt.target.value });
}
+
async onSubmit() {
const data = Object.assign({}, { ...this.state });
await api.post(API_ORGANIZATIONS, data);
this.resetForm();
}
- envs = [ // Placeholder for Ansible Environment Dropdown
- { ansible_environment: 'default', label: 'Select Ansible Environment', disabled: true },
- { ansible_environment: '1', label: '1', disabled: false },
- { ansible_environment: '2', label: '2', disabled: false },
- { ansible_environment: '3', label: '3', disabled: false }
- ];
+
+ async componentDidMount() {
+ const { data } = await api.get(API_CONFIG);
+ this.setState({ custom_virtualenvs: [...data.custom_virtualenvs] });
+ if (this.state.custom_virtualenvs.length > 1) {
+ // Show dropdown if we have more than one ansible environment
+ this.setState({ hideAnsibleSelect: !this.state.hideAnsibleSelect });
+ }
+ }
render() {
const { name } = this.state;
const enabled = name.length > 0; // TODO: add better form validation
@@ -106,13 +113,13 @@ class OrganizationAdd extends React.Component {
onChange={this.handleChange}
/>
-
-
-
+