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} /> - - - +