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