Hook up Cancel button

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

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);
-    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 });
+    try {
+      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 });
+      }
+    } 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);