Persist new defaultRole to server

ui/src/admin/actions/chronograf.js

@@ -102,7 +102,13 @@ export const loadUsersAsync = url => async dispatch => {
 export const loadOrganizationsAsync = url => async dispatch => {
   try {
     const {data} = await getOrganizationsAJAX(url)
-    dispatch(loadOrganizations(data))
+
+    const orgs = data.organizations.map(o => {
+      o.defaultRole = o.defaultRole || 'member'
+      return o
+    })
+
+    dispatch(loadOrganizations({organizations: orgs}))
   } catch (error) {
     dispatch(errorThrown(error))
   }

ui/src/admin/components/chronograf/OrganizationsTable.js

@@ -31,7 +31,12 @@ class OrganizationsTable extends Component {
   }
 
   render() {
-    const {organizations, onDeleteOrg, onRenameOrg} = this.props
+    const {
+      organizations,
+      onDeleteOrg,
+      onRenameOrg,
+      onChooseDefaultRole,
+    } = this.props
     const {isCreatingOrganization} = this.state
 
     const tableTitle = `${organizations.length} Organization${organizations.length ===
@@ -78,6 +83,7 @@ class OrganizationsTable extends Component {
                     organization={org}
                     onDelete={onDeleteOrg}
                     onRename={onRenameOrg}
+                    onChooseDefaultRole={onChooseDefaultRole}
                   />
           )}
         </div>
@@ -98,5 +104,6 @@ OrganizationsTable.propTypes = {
   onCreateOrg: func.isRequired,
   onDeleteOrg: func.isRequired,
   onRenameOrg: func.isRequired,
+  onChooseDefaultRole: func.isRequired,
 }
 export default OrganizationsTable

ui/src/admin/components/chronograf/OrganizationsTableRow.js

@@ -4,7 +4,6 @@ import ConfirmButtons from 'shared/components/ConfirmButtons'
 import Dropdown from 'shared/components/Dropdown'
 
 import {USER_ROLES} from 'src/admin/constants/dummyUsers'
-import {MEMBER_ROLE} from 'src/auth/Authorized'
 
 class OrganizationsTableRow extends Component {
   constructor(props) {
@@ -14,7 +13,6 @@ class OrganizationsTableRow extends Component {
       isEditing: false,
       isDeleting: false,
       workingName: this.props.organization.name,
-      defaultRole: MEMBER_ROLE,
     }
   }
 
@@ -80,11 +78,12 @@ class OrganizationsTableRow extends Component {
   }
 
   handleChooseDefaultRole = role => {
-    this.setState({defaultRole: role.name})
+    const {organization, onChooseDefaultRole} = this.props
+    onChooseDefaultRole(organization, role.name)
   }
 
   render() {
-    const {workingName, isEditing, isDeleting, defaultRole} = this.state
+    const {workingName, isEditing, isDeleting} = this.state
     const {organization} = this.props
 
     const dropdownRolesItems = USER_ROLES.map(role => ({
@@ -122,7 +121,7 @@ class OrganizationsTableRow extends Component {
           <Dropdown
             items={dropdownRolesItems}
             onChoose={this.handleChooseDefaultRole}
-            selected={defaultRole}
+            selected={organization.defaultRole}
             className="dropdown-stretch"
           />
         </div>
@@ -151,9 +150,11 @@ OrganizationsTableRow.propTypes = {
   organization: shape({
     id: string, // when optimistically created, organization will not have an id
     name: string.isRequired,
+    defaultRole: string.isRequired,
   }).isRequired,
   onDelete: func.isRequired,
   onRename: func.isRequired,
+  onChooseDefaultRole: func.isRequired,
 }
 
 export default OrganizationsTableRow

ui/src/admin/containers/OrganizationsPage.js

@@ -29,6 +29,11 @@ class OrganizationsPage extends Component {
     deleteOrganizationAsync(organization)
   }
 
+  handleChooseDefaultRole = (organization, defaultRole) => {
+    const {actions: {updateOrganizationAsync}} = this.props
+    updateOrganizationAsync(organization, {...organization, defaultRole})
+  }
+
   render() {
     const {organizations} = this.props
 
@@ -38,6 +43,7 @@ class OrganizationsPage extends Component {
         onCreateOrg={this.handleCreateOrganization}
         onDeleteOrg={this.handleDeleteOrganization}
         onRenameOrg={this.handleRenameOrganization}
+        onChooseDefaultRole={this.handleChooseDefaultRole}
       />
     )
   }