diff --git a/__tests__/components/AnsibleEnvironmentSelect.test.jsx b/__tests__/components/AnsibleEnvironmentSelect.test.jsx
new file mode 100644
index 0000000000..312b033547
--- /dev/null
+++ b/__tests__/components/AnsibleEnvironmentSelect.test.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import AnsibleEnvironmentSelect from '../../src/components/AnsibleEnvironmentSelect';
+
+describe('', () => {
+ test('initially renders succesfully', async() => {
+ const wrapper = mount( {}} />);
+ wrapper.setState({ isHidden: false });
+ });
+ test('calls "onSelectChange" on dropdown select change', () => {
+ const spy = jest.spyOn(AnsibleEnvironmentSelect.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/AnsibleEnvironmentSelect/AnsibleEnvironmentSelect.jsx b/src/components/AnsibleEnvironmentSelect/AnsibleEnvironmentSelect.jsx
new file mode 100644
index 0000000000..d07bfdaac6
--- /dev/null
+++ b/src/components/AnsibleEnvironmentSelect/AnsibleEnvironmentSelect.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+ FormGroup,
+ Select,
+ SelectOption,
+} from '@patternfly/react-core';
+import { API_CONFIG } from '../../endpoints';
+import api from '../../api';
+
+class AnsibleEnvironmentSelect extends React.Component {
+ constructor(props) {
+ super(props);
+ this.onSelectChange = this.onSelectChange.bind(this);
+ }
+
+ state = {
+ custom_virtualenvs: [],
+ isHidden: true,
+ }
+
+ 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({ isHidden: !this.state.isHidden });
+ }
+ }
+
+ onSelectChange(val, _) {
+ this.props.selectChange(val);
+ }
+
+ render() {
+ const { isHidden } = this.state;
+ if (isHidden) {
+ return null;
+ } else {
+ return (
+
+
+
+ );
+ }
+ }
+}
+
+export default AnsibleEnvironmentSelect;
diff --git a/src/components/AnsibleEnvironmentSelect/index.js b/src/components/AnsibleEnvironmentSelect/index.js
new file mode 100644
index 0000000000..2e7a7f44a3
--- /dev/null
+++ b/src/components/AnsibleEnvironmentSelect/index.js
@@ -0,0 +1,3 @@
+import AnsibleEnvironmentSelect from './AnsibleEnvironmentSelect';
+
+export default AnsibleEnvironmentSelect;
diff --git a/src/pages/Organizations/views/Organization.add.jsx b/src/pages/Organizations/views/Organization.add.jsx
index 6e3d9b860c..0c8fc6c57d 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 from '../../../api';
+import AnsibleEnvironmentSelect from '../../../components/AnsibleEnvironmentSelect'
const { light } = PageSectionVariants;
class OrganizationAdd extends React.Component {
@@ -30,17 +29,19 @@ class OrganizationAdd extends React.Component {
this.onSubmit = this.onSubmit.bind(this);
this.resetForm = this.resetForm.bind(this);
}
+
state = {
name: '',
description: '',
instanceGroups: '',
- ansible_environment: 'default',
+ custom_virtualenv: '',
post_endpoint: API_ORGANIZATIONS,
};
- onSelectChange (value, _) {
- this.setState({ ansible_environment: value });
+ onSelectChange(value, _) {
+ this.setState({ custom_virtualenv: value });
};
+
resetForm() {
this.setState({
...this.state,
@@ -48,20 +49,17 @@ 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 }
- ];
+
render() {
const { name } = this.state;
const enabled = name.length > 0; // TODO: add better form validation
@@ -106,13 +104,7 @@ class OrganizationAdd extends React.Component {
onChange={this.handleChange}
/>
-
-
-
+