Move All New Users Are SuperAdmin toggle to AllUsersTable

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

@@ -25,6 +25,19 @@ class AllUsersTable extends Component {
     }
   }
 
+  handleUpdateAuthConfig = fieldName => updatedValue => {
+    const {
+      actionsConfig: {updateAuthConfigAsync},
+      authConfig,
+      links,
+    } = this.props
+    const updatedAuthConfig = {
+      ...authConfig,
+      [fieldName]: updatedValue,
+    }
+    updateAuthConfigAsync(links.config.auth, authConfig, updatedAuthConfig)
+  }
+
   handleAddUserToOrganization = user => newOrganization => {
     console.log('handleAddUserToOrganization', user.name, newOrganization.id)
     // const newOrganizationRole = newOrganization + newOrganizationDefaultRole -- need to get this fresh from server or have server determine it, which requires a change to ValidUpdate
@@ -48,7 +61,14 @@ class AllUsersTable extends Component {
   }
 
   render() {
-    const {users, organizations, onCreateUser, meID, notify} = this.props
+    const {
+      users,
+      organizations,
+      onCreateUser,
+      authConfig,
+      meID,
+      notify,
+    } = this.props
 
     const {isCreatingUser} = this.state
 
@@ -59,6 +79,8 @@ class AllUsersTable extends Component {
           numOrganizations={organizations.length}
           onClickCreateUser={this.handleClickCreateUser}
           isCreatingUser={isCreatingUser}
+          authConfig={authConfig}
+          onChangeAuthConfig={this.handleUpdateAuthConfig}
         />
         <div className="panel-body">
           <table className="table table-highlight v-center chronograf-admin-table">
@@ -117,6 +139,11 @@ class AllUsersTable extends Component {
 const {arrayOf, bool, func, shape, string} = PropTypes
 
 AllUsersTable.propTypes = {
+  links: shape({
+    config: shape({
+      auth: string.isRequired,
+    }).isRequired,
+  }).isRequired,
   users: arrayOf(
     shape({
       id: string,
@@ -145,6 +172,13 @@ AllUsersTable.propTypes = {
   onUpdateUserRole: func.isRequired,
   onUpdateUserSuperAdmin: func.isRequired,
   onDeleteUser: func.isRequired,
+  actionsConfig: shape({
+    getAuthConfigAsync: func.isRequired,
+    updateAuthConfigAsync: func.isRequired,
+  }),
+  authConfig: shape({
+    superAdminNewUsers: bool,
+  }),
   meID: string.isRequired,
   notify: func.isRequired,
 }

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

@@ -1,10 +1,14 @@
 import React, {PropTypes} from 'react'
 
+import SlideToggle from 'shared/components/SlideToggle'
+
 const AllUsersTableHeader = ({
   numUsers,
   numOrganizations,
   onClickCreateUser,
   isCreatingUser,
+  authConfig: {superAdminNewUsers},
+  onChangeAuthConfig,
 }) => {
   const numUsersString = `${numUsers} User${numUsers === 1 ? '' : 's'}`
   const numOrganizationsString = `${numOrganizations} Org${numOrganizations ===
@@ -17,6 +21,12 @@ const AllUsersTableHeader = ({
       <h2 className="panel-title">
         {numUsersString} in {numOrganizationsString}
       </h2>
+      <SlideToggle
+        size="xs"
+        active={superAdminNewUsers}
+        onToggle={onChangeAuthConfig('superAdminNewUsers')}
+      />
+      <span>All new users are SuperAdmins</span>
       <button
         className="btn btn-primary btn-sm"
         onClick={onClickCreateUser}
@@ -29,7 +39,7 @@ const AllUsersTableHeader = ({
   )
 }
 
-const {bool, func, number} = PropTypes
+const {bool, func, number, shape} = PropTypes
 
 AllUsersTableHeader.defaultProps = {
   numUsers: 0,
@@ -42,6 +52,10 @@ AllUsersTableHeader.propTypes = {
   numOrganizations: number.isRequired,
   onClickCreateUser: func,
   isCreatingUser: bool.isRequired,
+  onChangeAuthConfig: func.isRequired,
+  authConfig: shape({
+    superAdminNewUsers: bool,
+  }),
 }
 
 export default AllUsersTableHeader

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

@@ -5,7 +5,6 @@ import uuid from 'node-uuid'
 import OrganizationsTableRow from 'src/admin/components/chronograf/OrganizationsTableRow'
 import OrganizationsTableRowNew from 'src/admin/components/chronograf/OrganizationsTableRowNew'
 import QuestionMarkTooltip from 'shared/components/QuestionMarkTooltip'
-import SlideToggle from 'shared/components/SlideToggle'
 
 import {PUBLIC_TOOLTIP} from 'src/admin/constants/index'
 
@@ -40,8 +39,6 @@ class OrganizationsTable extends Component {
       onChooseDefaultRole,
       onTogglePublic,
       currentOrganization,
-      authConfig: {superAdminNewUsers},
-      onChangeAuthConfig,
     } = this.props
     const {isCreatingOrganization} = this.state
 
@@ -92,33 +89,13 @@ class OrganizationsTable extends Component {
               currentOrganization={currentOrganization}
             />
           )}
-          <table className="table v-center superadmin-config">
-            <thead>
-              <tr>
-                <th style={{width: 70}}>Config</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td style={{width: 70}}>
-                  <SlideToggle
-                    size="xs"
-                    active={superAdminNewUsers}
-                    onToggle={onChangeAuthConfig('superAdminNewUsers')}
-                  />
-                </td>
-                <td>All new users are SuperAdmins</td>
-              </tr>
-            </tbody>
-          </table>
         </div>
       </div>
     )
   }
 }
 
-const {arrayOf, bool, func, shape, string} = PropTypes
+const {arrayOf, func, shape, string} = PropTypes
 
 OrganizationsTable.propTypes = {
   organizations: arrayOf(
@@ -136,9 +113,5 @@ OrganizationsTable.propTypes = {
   onRenameOrg: func.isRequired,
   onTogglePublic: func.isRequired,
   onChooseDefaultRole: func.isRequired,
-  onChangeAuthConfig: func.isRequired,
-  authConfig: shape({
-    superAdminNewUsers: bool,
-  }),
 }
 export default OrganizationsTable

ui/src/admin/containers/chronograf/AllUsersPage.js

@@ -3,6 +3,7 @@ import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 
 import * as adminChronografActionCreators from 'src/admin/actions/chronograf'
+import * as configActionCreators from 'shared/actions/config'
 import {publishAutoDismissingNotification} from 'shared/dispatchers'
 
 import AllUsersTableEmpty from 'src/admin/components/chronograf/AllUsersTableEmpty'
@@ -17,13 +18,18 @@ class AllUsersPage extends Component {
     }
   }
 
+  componentDidMount() {
+    const {links, actionsConfig: {getAuthConfigAsync}} = this.props
+    getAuthConfigAsync(links.config.auth)
+  }
+
   handleCreateUser = user => {
-    const {links, actions: {createUserAsync}} = this.props
+    const {links, actionsAdmin: {createUserAsync}} = this.props
     createUserAsync(links.users, user)
   }
 
   handleUpdateUserRole = (user, currentRole, {name}) => {
-    const {actions: {updateUserAsync}} = this.props
+    const {actionsAdmin: {updateUserAsync}} = this.props
     const updatedRole = {...currentRole, name}
     const newRoles = user.roles.map(
       r => (r.organization === currentRole.organization ? updatedRole : r)
@@ -32,20 +38,20 @@ class AllUsersPage extends Component {
   }
 
   handleUpdateUserSuperAdmin = (user, superAdmin) => {
-    const {actions: {updateUserAsync}} = this.props
+    const {actionsAdmin: {updateUserAsync}} = this.props
     const updatedUser = {...user, superAdmin}
     updateUserAsync(user, updatedUser)
   }
 
   handleDeleteUser = user => {
-    const {actions: {deleteUserAsync}} = this.props
+    const {actionsAdmin: {deleteUserAsync}} = this.props
     deleteUserAsync(user)
   }
 
   async componentWillMount() {
     const {
       links,
-      actions: {loadOrganizationsAsync, loadUsersAsync},
+      actionsAdmin: {loadOrganizationsAsync, loadUsersAsync},
     } = this.props
 
     this.setState({isLoading: true})
@@ -59,7 +65,15 @@ class AllUsersPage extends Component {
   }
 
   render() {
-    const {organizations, meID, users, notify} = this.props
+    const {
+      organizations,
+      meID,
+      users,
+      authConfig,
+      actionsConfig,
+      links,
+      notify,
+    } = this.props
     const {isLoading} = this.state
 
     if (isLoading) {
@@ -75,39 +89,58 @@ class AllUsersPage extends Component {
         onUpdateUserRole={this.handleUpdateUserRole}
         onUpdateUserSuperAdmin={this.handleUpdateUserSuperAdmin}
         onDeleteUser={this.handleDeleteUser}
+        links={links}
+        authConfig={authConfig}
+        actionsConfig={actionsConfig}
         notify={notify}
       />
     )
   }
 }
 
-const {arrayOf, func, shape, string} = PropTypes
+const {arrayOf, bool, func, shape, string} = PropTypes
 
 AllUsersPage.propTypes = {
   links: shape({
     users: string.isRequired,
+    config: shape({
+      auth: string.isRequired,
+    }).isRequired,
   }),
   meID: string.isRequired,
   users: arrayOf(shape),
   organizations: arrayOf(shape),
-  actions: shape({
+  actionsAdmin: shape({
     loadUsersAsync: func.isRequired,
     loadOrganizationsAsync: func.isRequired,
     createUserAsync: func.isRequired,
     updateUserAsync: func.isRequired,
     deleteUserAsync: func.isRequired,
   }),
+  actionsConfig: shape({
+    getAuthConfigAsync: func.isRequired,
+    updateAuthConfigAsync: func.isRequired,
+  }),
+  authConfig: shape({
+    superAdminNewUsers: bool,
+  }),
   notify: func.isRequired,
 }
 
-const mapStateToProps = ({links, adminChronograf: {organizations, users}}) => ({
+const mapStateToProps = ({
+  links,
+  adminChronograf: {organizations, users},
+  config: {auth: authConfig},
+}) => ({
   links,
   organizations,
   users,
+  authConfig,
 })
 
 const mapDispatchToProps = dispatch => ({
-  actions: bindActionCreators(adminChronografActionCreators, dispatch),
+  actionsAdmin: bindActionCreators(adminChronografActionCreators, dispatch),
+  actionsConfig: bindActionCreators(configActionCreators, dispatch),
   notify: bindActionCreators(publishAutoDismissingNotification, dispatch),
 })
 

ui/src/admin/containers/chronograf/OrganizationsPage.js

@@ -3,20 +3,14 @@ import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 
 import * as adminChronografActionCreators from 'src/admin/actions/chronograf'
-import * as configActionCreators from 'shared/actions/config'
 import {getMeAsync} from 'shared/actions/auth'
 
 import OrganizationsTable from 'src/admin/components/chronograf/OrganizationsTable'
 
 class OrganizationsPage extends Component {
   componentDidMount() {
-    const {
+    const {links, actionsAdmin: {loadOrganizationsAsync}} = this.props
-      links,
-      actionsAdmin: {loadOrganizationsAsync},
-      actionsConfig: {getAuthConfigAsync},
-    } = this.props
     loadOrganizationsAsync(links.organizations)
-    getAuthConfigAsync(links.config.auth)
   }
 
   handleCreateOrganization = async organization => {
@@ -57,21 +51,8 @@ class OrganizationsPage extends Component {
     this.refreshMe()
   }
 
-  handleUpdateAuthConfig = fieldName => updatedValue => {
-    const {
-      actionsConfig: {updateAuthConfigAsync},
-      authConfig,
-      links,
-    } = this.props
-    const updatedAuthConfig = {
-      ...authConfig,
-      [fieldName]: updatedValue,
-    }
-    updateAuthConfigAsync(links.config.auth, authConfig, updatedAuthConfig)
-  }
-
   render() {
-    const {meCurrentOrganization, organizations, authConfig, me} = this.props
+    const {meCurrentOrganization, organizations, me} = this.props
 
     const organization = organizations.find(
       o => o.id === meCurrentOrganization.id
@@ -86,15 +67,13 @@ class OrganizationsPage extends Component {
           onRenameOrg={this.handleRenameOrganization}
           onTogglePublic={this.handleTogglePublic}
           onChooseDefaultRole={this.handleChooseDefaultRole}
-          authConfig={authConfig}
-          onChangeAuthConfig={this.handleUpdateAuthConfig}
           me={me}
         />
       : <div className="page-spinner" />
   }
 }
 
-const {arrayOf, bool, func, shape, string} = PropTypes
+const {arrayOf, func, shape, string} = PropTypes
 
 OrganizationsPage.propTypes = {
   links: shape({
@@ -116,18 +95,11 @@ OrganizationsPage.propTypes = {
     updateOrganizationAsync: func.isRequired,
     deleteOrganizationAsync: func.isRequired,
   }),
-  actionsConfig: shape({
-    getAuthConfigAsync: func.isRequired,
-    updateAuthConfigAsync: func.isRequired,
-  }),
   getMe: func.isRequired,
   meCurrentOrganization: shape({
     name: string.isRequired,
     id: string.isRequired,
   }),
-  authConfig: shape({
-    superAdminNewUsers: bool,
-  }),
   me: shape({
     organizations: arrayOf(
       shape({
@@ -142,18 +114,15 @@ OrganizationsPage.propTypes = {
 const mapStateToProps = ({
   links,
   adminChronograf: {organizations},
-  config: {auth: authConfig},
   auth: {me},
 }) => ({
   links,
   organizations,
-  authConfig,
   me,
 })
 
 const mapDispatchToProps = dispatch => ({
   actionsAdmin: bindActionCreators(adminChronografActionCreators, dispatch),
-  actionsConfig: bindActionCreators(configActionCreators, dispatch),
   getMe: bindActionCreators(getMeAsync, dispatch),
 })