Hook up Cancel button

- Update unit tests.
- Add basic error handling for API requests in Add Orgs component.

__tests__/pages/Organizations/views/Organization.add.test.jsx

@@ -1,39 +1,60 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import OrganizationAdd from '../../../../src/pages/Organizations/views/Organization.add';
+import { MemoryRouter } from 'react-router-dom';
 
 describe('<OrganizationAdd />', () => {
   test('initially renders succesfully', () => {
     mount(
-      <OrganizationAdd
+      <MemoryRouter>
-        match={{ path: '/organizations/add', url: '/organizations/add' }}
+        <OrganizationAdd
-        location={{ search: '', pathname: '/organizations/add' }}
+          match={{ path: '/organizations/add', url: '/organizations/add' }}
-      />
+          location={{ search: '', pathname: '/organizations/add' }}
+        />
+      </MemoryRouter>
     );
   });
   test('calls "handleChange" when input values change', () => {
-    const spy = jest.spyOn(OrganizationAdd.prototype, 'handleChange');
+    const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'handleChange');
     const wrapper = mount(
-      <OrganizationAdd
+      <MemoryRouter>
-        match={{ path: '/organizations/add', url: '/organizations/add' }}
+        <OrganizationAdd
-        location={{ search: '', pathname: '/organizations/add' }}
+          match={{ path: '/organizations/add', url: '/organizations/add' }}
-      />
+          location={{ search: '', pathname: '/organizations/add' }}
+        />
+      </MemoryRouter>
     );
     expect(spy).not.toHaveBeenCalled();
-    wrapper.find('input#add-org-form-name').simulate('change', {target: {value: 'foo'}});
+    wrapper.find('input#add-org-form-name').simulate('change', { target: { value: 'foo' } });
-    wrapper.find('input#add-org-form-description').simulate('change', {target: {value: 'bar'}});
+    wrapper.find('input#add-org-form-description').simulate('change', { target: { value: 'bar' } });
     expect(spy).toHaveBeenCalledTimes(2);
   });
   test('calls "onSubmit" when Save button is clicked', () => {
-    const spy = jest.spyOn(OrganizationAdd.prototype, 'onSubmit');
+    const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSubmit');
     const wrapper = mount(
-      <OrganizationAdd
+      <MemoryRouter>
-        match={{ path: '/organizations/add', url: '/organizations/add' }}
+        <OrganizationAdd
-        location={{ search: '', pathname: '/organizations/add' }}
+          match={{ path: '/organizations/add', url: '/organizations/add' }}
-      />
+          location={{ search: '', pathname: '/organizations/add' }}
+        />
+      </MemoryRouter>
     );
     expect(spy).not.toHaveBeenCalled();
     wrapper.find('button.at-C-SubmitButton').prop('onClick')();
     expect(spy).toBeCalled();
   });
+  test('calls "onCancel" when Cancel button is clicked', () => {
+    const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onCancel');
+    const wrapper = mount(
+      <MemoryRouter>
+        <OrganizationAdd
+          match={{ path: '/organizations/add', url: '/organizations/add' }}
+          location={{ search: '', pathname: '/organizations/add' }}
+        />
+      </MemoryRouter>
+    );
+    expect(spy).not.toHaveBeenCalled();
+    wrapper.find('button.at-C-CancelButton').prop('onClick')();
+    expect(spy).toBeCalled();
+  });
 });

src/pages/Organizations/views/Organization.add.jsx

@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import { withRouter } from 'react-router-dom';
 import { Trans } from '@lingui/macro';
 import {
   PageSection,
@@ -29,6 +30,7 @@ class OrganizationAdd extends React.Component {
     this.onSelectChange = this.onSelectChange.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
     this.resetForm = this.resetForm.bind(this);
+    this.onCancel = this.onCancel.bind(this);
   }
 
   state = {
@@ -38,6 +40,7 @@ class OrganizationAdd extends React.Component {
     custom_virtualenv: '',
     custom_virtualenvs: [],
     hideAnsibleSelect: true,
+    error:'',
   };
 
   onSelectChange(value, _) {
@@ -62,13 +65,22 @@ class OrganizationAdd extends React.Component {
     this.resetForm();
   }
 
+  onCancel() {
+    this.props.history.push('/organizations');
+  }
+
   async componentDidMount() {
-    const { data } = await api.get(API_CONFIG);
+    try {
-    this.setState({ custom_virtualenvs: [...data.custom_virtualenvs] });
+      const { data } = await api.get(API_CONFIG);
-    if (this.state.custom_virtualenvs.length > 1) {
+      this.setState({ custom_virtualenvs: [...data.custom_virtualenvs] });
-      // Show dropdown if we have more than one ansible environment
+      if (this.state.custom_virtualenvs.length > 1) {
-      this.setState({ hideAnsibleSelect: !this.state.hideAnsibleSelect });
+        // Show dropdown if we have more than one ansible environment
+        this.setState({ hideAnsibleSelect: !this.state.hideAnsibleSelect });
+      }
+    } catch (error) {
+      this.setState({ error })
     }
+    
   }
   render() {
     const { name } = this.state;
@@ -130,7 +142,7 @@ class OrganizationAdd extends React.Component {
                       <Button className="at-C-SubmitButton" variant="primary" onClick={this.onSubmit} isDisabled={!enabled}>Save</Button>
                     </ToolbarGroup>
                     <ToolbarGroup>
-                      <Button variant="secondary">Cancel</Button>
+                      <Button className="at-C-CancelButton" variant="secondary" onClick={this.onCancel}>Cancel</Button>
                     </ToolbarGroup>
                   </Toolbar>
                 </ActionGroup>
@@ -143,4 +155,4 @@ class OrganizationAdd extends React.Component {
   }
 }
 
-export default OrganizationAdd;
+export default withRouter(OrganizationAdd);