From d047bc876af3cb335e8ba89fbf9cb6687be332eb Mon Sep 17 00:00:00 2001
From: kialam <digitalanime@gmail.com>
Date: Mon, 10 Dec 2018 20:41:47 -0500
Subject: [PATCH 1/4] Basic Ansible Environment Select Component

- Component conditionally renders based on # of virtual environments.
- User can add an Organization and associate it with a virtual environment.
---
 .../AnsibleEnvironmentSelect.test.jsx         | 18 +++++++
 .../views/Organization.add.test.jsx           | 12 -----
 .../AnsibleEnvironmentSelect.jsx              | 53 +++++++++++++++++++
 .../AnsibleEnvironmentSelect/index.js         |  3 ++
 .../Organizations/views/Organization.add.jsx  | 28 ++++------
 5 files changed, 84 insertions(+), 30 deletions(-)
 create mode 100644 __tests__/components/AnsibleEnvironmentSelect.test.jsx
 create mode 100644 src/components/AnsibleEnvironmentSelect/AnsibleEnvironmentSelect.jsx
 create mode 100644 src/components/AnsibleEnvironmentSelect/index.js

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('<AnsibleEnvironmentSelect />', () => {
+  test('initially renders succesfully', async() => {
+    const wrapper = mount(<AnsibleEnvironmentSelect selected="foo" selectChange={() => {}} />);
+    wrapper.setState({ isHidden: false });
+  });
+  test('calls "onSelectChange" on dropdown select change', () => {
+    const spy = jest.spyOn(AnsibleEnvironmentSelect.prototype, 'onSelectChange');
+    const wrapper = mount(<AnsibleEnvironmentSelect selected="foo" selectChange={() => {}} />);
+    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('<OrganizationAdd />', () => {
       />
     );
   });
-  test('calls "onSelectChange" on dropdown select change', () => {
-    const spy = jest.spyOn(OrganizationAdd.prototype, 'onSelectChange');
-    const wrapper = mount(
-      <OrganizationAdd
-        match={{ path: '/organizations/add', url: '/organizations/add' }}
-        location={{ search: '', pathname: '/organizations/add' }}
-      />
-    );
-    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 (
+        <FormGroup label="Ansible Environment" fieldId="simple-form-instance-groups">
+          <Select value={this.props.selected} onChange={this.onSelectChange} aria-label="Select Input">
+            <SelectOption isDisabled value="Select Ansible Environment" label="Select Ansible Environment" />
+            {this.state.custom_virtualenvs.map((env, index) => (
+              <SelectOption isDisabled={env.disabled} key={index} value={env} label={env} />
+            ))}
+          </Select>
+        </FormGroup>
+      );
+    }
+  }
+}
+
+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}
                     />
                   </FormGroup>
-                  <FormGroup label="Ansible Environment" fieldId="simple-form-instance-groups">
-                    <Select value={this.state.ansible_environment} onChange={this.onSelectChange} aria-label="Select Input">
-                      {this.envs.map((env, index) => (
-                        <SelectOption isDisabled={env.disabled} key={index} value={env.ansible_environment} label={env.label} />
-                      ))}
-                    </Select>
-                  </FormGroup>
+                  <AnsibleEnvironmentSelect selected={this.state.custom_virtualenv} selectChange={this.onSelectChange} />
                 </Gallery>
                 <ActionGroup className="at-align-right">
                   <Toolbar>

From 9c7d449a4d334782e2f19369b85c1a9cfa95437c Mon Sep 17 00:00:00 2001
From: kialam <digitalanime@gmail.com>
Date: Tue, 11 Dec 2018 16:20:55 -0500
Subject: [PATCH 2/4] Abstract out API get request to Add Org component.

- This makes it so we now have a generic select dropdown where we can pass data down as props.
---
 .../AnsibleEnvironmentSelect.test.jsx         | 11 +++----
 .../AnsibleEnvironmentSelect.jsx              | 29 ++++---------------
 .../AnsibleEnvironmentSelect/index.js         |  4 +--
 .../Organizations/views/Organization.add.jsx  | 23 ++++++++++++---
 4 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/__tests__/components/AnsibleEnvironmentSelect.test.jsx b/__tests__/components/AnsibleEnvironmentSelect.test.jsx
index 312b033547..0bcf9d3ded 100644
--- a/__tests__/components/AnsibleEnvironmentSelect.test.jsx
+++ b/__tests__/components/AnsibleEnvironmentSelect.test.jsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import AnsibleEnvironmentSelect from '../../src/components/AnsibleEnvironmentSelect';
+import AnsibleSelect from '../../src/components/AnsibleEnvironmentSelect';
 
-describe('<AnsibleEnvironmentSelect />', () => {
+const mockData = ['foo', 'bar'];
+describe('<AnsibleSelect />', () => {
   test('initially renders succesfully', async() => {
-    const wrapper = mount(<AnsibleEnvironmentSelect selected="foo" selectChange={() => {}} />);
+    const wrapper = mount(<AnsibleSelect selected="foo" data={mockData} selectChange={() => {}} />);
     wrapper.setState({ isHidden: false });
   });
   test('calls "onSelectChange" on dropdown select change', () => {
-    const spy = jest.spyOn(AnsibleEnvironmentSelect.prototype, 'onSelectChange');
-    const wrapper = mount(<AnsibleEnvironmentSelect selected="foo" selectChange={() => {}} />);
+    const spy = jest.spyOn(AnsibleSelect.prototype, 'onSelectChange');
+    const wrapper = mount(<AnsibleSelect selected="foo" data={mockData} selectChange={() => {}} />);
     wrapper.setState({ isHidden: false });
     expect(spy).not.toHaveBeenCalled();
     wrapper.find('select').simulate('change');
diff --git a/src/components/AnsibleEnvironmentSelect/AnsibleEnvironmentSelect.jsx b/src/components/AnsibleEnvironmentSelect/AnsibleEnvironmentSelect.jsx
index d07bfdaac6..632a5b544f 100644
--- a/src/components/AnsibleEnvironmentSelect/AnsibleEnvironmentSelect.jsx
+++ b/src/components/AnsibleEnvironmentSelect/AnsibleEnvironmentSelect.jsx
@@ -4,43 +4,26 @@ import {
   Select,
   SelectOption,
 } from '@patternfly/react-core';
-import { API_CONFIG } from '../../endpoints';
-import api from '../../api';
 
-class AnsibleEnvironmentSelect extends React.Component {
+class AnsibleSelect 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) {
+    const hide = this.props.hidden;
+    if (hide) {
       return null;
     } else {
       return (
-        <FormGroup label="Ansible Environment" fieldId="simple-form-instance-groups">
+        <FormGroup label={this.props.labelName} fieldId="ansible-select">
           <Select value={this.props.selected} onChange={this.onSelectChange} aria-label="Select Input">
-            <SelectOption isDisabled value="Select Ansible Environment" label="Select Ansible Environment" />
-            {this.state.custom_virtualenvs.map((env, index) => (
+            {this.props.data.map((env, index) => (
               <SelectOption isDisabled={env.disabled} key={index} value={env} label={env} />
             ))}
           </Select>
@@ -50,4 +33,4 @@ class AnsibleEnvironmentSelect extends React.Component {
   }
 }
 
-export default AnsibleEnvironmentSelect;
+export default AnsibleSelect;
diff --git a/src/components/AnsibleEnvironmentSelect/index.js b/src/components/AnsibleEnvironmentSelect/index.js
index 2e7a7f44a3..1f2327e390 100644
--- a/src/components/AnsibleEnvironmentSelect/index.js
+++ b/src/components/AnsibleEnvironmentSelect/index.js
@@ -1,3 +1,3 @@
-import AnsibleEnvironmentSelect from './AnsibleEnvironmentSelect';
+import AnsibleSelect from './AnsibleEnvironmentSelect';
 
-export default AnsibleEnvironmentSelect;
+export default AnsibleSelect;
diff --git a/src/pages/Organizations/views/Organization.add.jsx b/src/pages/Organizations/views/Organization.add.jsx
index 0c8fc6c57d..3e03511a77 100644
--- a/src/pages/Organizations/views/Organization.add.jsx
+++ b/src/pages/Organizations/views/Organization.add.jsx
@@ -15,9 +15,9 @@ import {
   CardBody,
 } from '@patternfly/react-core';
 
-import { API_ORGANIZATIONS } from '../../../endpoints';
+import { API_ORGANIZATIONS, API_CONFIG } from '../../../endpoints';
 import api from '../../../api';
-import AnsibleEnvironmentSelect from '../../../components/AnsibleEnvironmentSelect'
+import AnsibleSelect from '../../../components/AnsibleEnvironmentSelect'
 const { light } = PageSectionVariants;
 
 class OrganizationAdd extends React.Component {
@@ -35,7 +35,8 @@ class OrganizationAdd extends React.Component {
     description: '',
     instanceGroups: '',
     custom_virtualenv: '',
-    post_endpoint: API_ORGANIZATIONS,
+    custom_virtualenvs: [],
+    hideAnsibleSelect: true,
   };
 
   onSelectChange(value, _) {
@@ -60,6 +61,14 @@ class OrganizationAdd extends React.Component {
     this.resetForm();
   }
 
+  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
@@ -104,7 +113,13 @@ class OrganizationAdd extends React.Component {
                       onChange={this.handleChange}
                     />
                   </FormGroup>
-                  <AnsibleEnvironmentSelect selected={this.state.custom_virtualenv} selectChange={this.onSelectChange} />
+                  <AnsibleSelect
+                    labelName="Ansible Environment"
+                    selected={this.state.custom_virtualenv}
+                    selectChange={this.onSelectChange}
+                    data={this.state.custom_virtualenvs}
+                    hidden={this.state.hideAnsibleSelect}
+                  />
                 </Gallery>
                 <ActionGroup className="at-align-right">
                   <Toolbar>

From 9627a73978a71b553097a18e89e897c4540759be Mon Sep 17 00:00:00 2001
From: kialam <digitalanime@gmail.com>
Date: Tue, 11 Dec 2018 16:42:24 -0500
Subject: [PATCH 3/4] Rename AnsibleEnvironmentSelect to AnsibleSelect

- Update references to the component.
---
 ...nsibleEnvironmentSelect.test.jsx => AnsibleSelect.test.jsx} | 2 +-
 src/components/AnsibleEnvironmentSelect/index.js               | 3 ---
 .../AnsibleSelect.jsx}                                         | 0
 src/components/AnsibleSelect/index.js                          | 3 +++
 src/pages/Organizations/views/Organization.add.jsx             | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)
 rename __tests__/components/{AnsibleEnvironmentSelect.test.jsx => AnsibleSelect.test.jsx} (90%)
 delete mode 100644 src/components/AnsibleEnvironmentSelect/index.js
 rename src/components/{AnsibleEnvironmentSelect/AnsibleEnvironmentSelect.jsx => AnsibleSelect/AnsibleSelect.jsx} (100%)
 create mode 100644 src/components/AnsibleSelect/index.js

diff --git a/__tests__/components/AnsibleEnvironmentSelect.test.jsx b/__tests__/components/AnsibleSelect.test.jsx
similarity index 90%
rename from __tests__/components/AnsibleEnvironmentSelect.test.jsx
rename to __tests__/components/AnsibleSelect.test.jsx
index 0bcf9d3ded..47a068ef4f 100644
--- a/__tests__/components/AnsibleEnvironmentSelect.test.jsx
+++ b/__tests__/components/AnsibleSelect.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import AnsibleSelect from '../../src/components/AnsibleEnvironmentSelect';
+import AnsibleSelect from '../../src/components/AnsibleSelect';
 
 const mockData = ['foo', 'bar'];
 describe('<AnsibleSelect />', () => {
diff --git a/src/components/AnsibleEnvironmentSelect/index.js b/src/components/AnsibleEnvironmentSelect/index.js
deleted file mode 100644
index 1f2327e390..0000000000
--- a/src/components/AnsibleEnvironmentSelect/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import AnsibleSelect from './AnsibleEnvironmentSelect';
-
-export default AnsibleSelect;
diff --git a/src/components/AnsibleEnvironmentSelect/AnsibleEnvironmentSelect.jsx b/src/components/AnsibleSelect/AnsibleSelect.jsx
similarity index 100%
rename from src/components/AnsibleEnvironmentSelect/AnsibleEnvironmentSelect.jsx
rename to src/components/AnsibleSelect/AnsibleSelect.jsx
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 3e03511a77..a95f69831b 100644
--- a/src/pages/Organizations/views/Organization.add.jsx
+++ b/src/pages/Organizations/views/Organization.add.jsx
@@ -17,7 +17,7 @@ import {
 
 import { API_ORGANIZATIONS, API_CONFIG } from '../../../endpoints';
 import api from '../../../api';
-import AnsibleSelect from '../../../components/AnsibleEnvironmentSelect'
+import AnsibleSelect from '../../../components/AnsibleSelect'
 const { light } = PageSectionVariants;
 
 class OrganizationAdd extends React.Component {

From 44029c2191224cbc384457a7ee41d07fbefebde3 Mon Sep 17 00:00:00 2001
From: kialam <digitalanime@gmail.com>
Date: Tue, 11 Dec 2018 16:57:38 -0500
Subject: [PATCH 4/4] Use object desctructuring.

---
 src/components/AnsibleSelect/AnsibleSelect.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AnsibleSelect/AnsibleSelect.jsx b/src/components/AnsibleSelect/AnsibleSelect.jsx
index 632a5b544f..d411c1d17a 100644
--- a/src/components/AnsibleSelect/AnsibleSelect.jsx
+++ b/src/components/AnsibleSelect/AnsibleSelect.jsx
@@ -16,8 +16,8 @@ class AnsibleSelect extends React.Component {
   }
 
   render() {
-    const hide = this.props.hidden;
-    if (hide) {
+    const { hidden } = this.props;
+    if (hidden) {
       return null;
     } else {
       return (