Wire up create organization

Adds action creators & reducers for add, sync, & remove.

ui/src/admin/actions/chronograf.js

@@ -3,6 +3,7 @@ import {
   getOrganizations as getOrganizationsAJAX,
   createUser as createUserAJAX,
   deleteUser as deleteUserAJAX,
+  createOrganization as createOrganizationAJAX,
 } from 'src/admin/apis/chronograf'
 
 import {publishAutoDismissingNotification} from 'shared/dispatchers'
@@ -47,6 +48,28 @@ export const removeUser = user => ({
   },
 })
 
+export const addOrganization = organization => ({
+  type: 'CHRONOGRAF_ADD_ORGANIZATION',
+  payload: {
+    organization,
+  },
+})
+
+export const syncOrganization = (staleOrganization, syncedOrganization) => ({
+  type: 'CHRONOGRAF_SYNC_ORGANIZATION',
+  payload: {
+    staleOrganization,
+    syncedOrganization,
+  },
+})
+
+export const removeOrganization = organization => ({
+  type: 'CHRONOGRAF_REMOVE_ORGANIZATION',
+  payload: {
+    organization,
+  },
+})
+
 // async actions (thunks)
 export const loadUsersAsync = url => async dispatch => {
   try {
@@ -92,3 +115,17 @@ export const deleteUserAsync = user => async dispatch => {
     dispatch(addUser(user))
   }
 }
+
+export const createOrganizationAsync = (
+  url,
+  organization
+) => async dispatch => {
+  dispatch(addOrganization(organization))
+  try {
+    const {data} = await createOrganizationAJAX(url, organization)
+    dispatch(syncOrganization(organization, data))
+  } catch (error) {
+    dispatch(errorThrown(error))
+    dispatch(removeOrganization(organization))
+  }
+}

ui/src/admin/apis/chronograf.js

@@ -48,3 +48,16 @@ export const deleteUser = async url => {
     throw error
   }
 }
+
+export const createOrganization = async (url, organization) => {
+  try {
+    return await AJAX({
+      method: 'POST',
+      url,
+      data: organization,
+    })
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}

ui/src/admin/constants/dummyUsers.js

@@ -26,10 +26,3 @@ export const DUMMY_ORGS = [
   {id: '2', name: 'Blue Team'},
   {id: '3', name: 'Green Team'},
 ]
-
-export const MOAR_DUMMY_ORGS = [
-  {id: '128', name: 'Marketing'},
-  {id: '127', name: 'Exec Team'},
-  {id: '126', name: 'Lion Tamers'},
-  {id: '125', name: 'Susl0rds'},
-]

ui/src/admin/containers/AdminChronografPage.js

@@ -22,7 +22,6 @@ import {
   DEFAULT_ORG_NAME,
   NO_ORG,
   USER_ROLES,
-  MOAR_DUMMY_ORGS,
 } from 'src/admin/constants/dummyUsers'
 
 class AdminChronografPage extends Component {
@@ -143,7 +142,12 @@ class AdminChronografPage extends Component {
     this.setState({showManageOverlay: false, showCreateUserOverlay: false})
   }
 
-  handleCreateOrganization = _organizationName => {}
+  handleCreateOrganization = organizationName => {
+    const {links, actions: {createOrganizationAsync}} = this.props
+
+    createOrganizationAsync(links.organizations, {name: organizationName})
+  }
+
   handleDeleteOrganization = _organization => {}
   handleRenameOrganization = (_organization, _newOrgName) => {}
 
@@ -224,7 +228,7 @@ class AdminChronografPage extends Component {
               onCreateOrg={this.handleCreateOrganization}
               onDeleteOrg={this.handleDeleteOrganization}
               onRenameOrg={this.handleRenameOrganization}
-              organizations={MOAR_DUMMY_ORGS}
+              organizations={organizations}
             />
           : null}
         {showCreateUserOverlay
@@ -263,6 +267,7 @@ AdminChronografPage.propTypes = {
     loadOrganizationsAsync: func.isRequired,
     createUserAsync: func.isRequired,
     deleteUserAsync: func.isRequired,
+    createOrganizationAsync: func.isRequired,
   }),
   notify: func.isRequired,
 }

ui/src/admin/reducers/chronograf.js

@@ -39,6 +39,31 @@ const adminChronograf = (state = initialState, action) => {
         users: state.users.filter(u => !isSameUser(u, user)),
       }
     }
+
+    case 'CHRONOGRAF_ADD_ORGANIZATION': {
+      const {organization} = action.payload
+      return {...state, organizations: [organization, ...state.organizations]}
+    }
+
+    case 'CHRONOGRAF_SYNC_ORGANIZATION': {
+      const {staleOrganization, syncedOrganization} = action.payload
+      return {
+        ...state,
+        organizations: state.organizations.map(
+          o => (o.name === staleOrganization.name ? {...syncedOrganization} : o)
+        ),
+      }
+    }
+
+    case 'CHRONOGRAF_REMOVE_ORGANIZATION': {
+      const {organization} = action.payload
+      return {
+        ...state,
+        organizations: state.organizations.filter(
+          o => o.name !== organization.name
+        ),
+      }
+    }
   }
 
   return state