Create dropdown for SuperAdmin status in super admin table view

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

@@ -23,6 +23,16 @@ class ChronografUsersTable extends Component {
     this.props.onUpdateUserRole(user, currentRole, newRole)
   }
 
+  handleChangeSuperAdmin = (user, currentState) => newState => {
+    console.log(
+      user.name,
+      'SuperAdmin - was:',
+      currentState,
+      'is now:',
+      newState.text
+    )
+  }
+
   areSameUsers = (usersA, usersB) => {
     if (usersA.length === 0 && usersB.length === 0) {
       return false
@@ -80,6 +90,7 @@ class ChronografUsersTable extends Component {
                     isSameUser={isSameUser}
                     onChangeUserRole={this.handleChangeUserRole}
                     onChooseFilter={this.handleChooseFilter}
+                    onChangeSuperAdmin={this.handleChangeSuperAdmin}
                   />
                 : <OrgTableRow
                     user={user}

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

@@ -2,8 +2,10 @@ import React, {PropTypes} from 'react'
 
 import UsersTableRoleCell from 'src/admin/components/chronograf/UsersTableRoleCell'
 import UsersTableOrgCell from 'src/admin/components/chronograf/UsersTableOrgCell'
+import UsersTableSuperAdminCell from 'src/admin/components/chronograf/UsersTableSuperAdminCell'
 
 import {USERS_TABLE} from 'src/admin/constants/chronografTableSizing'
+import {SUPERADMIN_ROLE} from 'src/auth/Authorized'
 
 const UsersTableRow = ({
   user,
@@ -12,8 +14,9 @@ const UsersTableRow = ({
   isSameUser,
   onChangeUserRole,
   onChooseFilter,
+  onChangeSuperAdmin,
 }) => {
-  const {colSuperAdmin, colProvider, colScheme} = USERS_TABLE
+  const {colProvider, colScheme} = USERS_TABLE
 
   const isSelected = selectedUsers.find(u => isSameUser(user, u))
 
@@ -39,9 +42,11 @@ const UsersTableRow = ({
         onChooseFilter={onChooseFilter}
       />
       <UsersTableRoleCell user={user} onChangeUserRole={onChangeUserRole} />
-      <td style={{width: colSuperAdmin}}>
-        {user.superadmin ? 'Yes' : '--'}
-      </td>
+      <UsersTableSuperAdminCell
+        superAdmin={user.role === SUPERADMIN_ROLE}
+        user={user}
+        onChangeSuperAdmin={onChangeSuperAdmin}
+      />
       <td style={{width: colProvider}}>
         {user.provider}
       </td>
@@ -61,6 +66,7 @@ UsersTableRow.propTypes = {
   isSameUser: func.isRequired,
   onChangeUserRole: func.isRequired,
   onChooseFilter: func.isRequired,
+  onChangeSuperAdmin: func.isRequired,
 }
 
 export default UsersTableRow

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

@@ -0,0 +1,36 @@
+import React, {PropTypes} from 'react'
+
+import Dropdown from 'shared/components/Dropdown'
+
+import {USERS_TABLE} from 'src/admin/constants/chronografTableSizing'
+
+const UsersTableSuperAdminCell = ({user, superAdmin, onChangeSuperAdmin}) => {
+  const {colSuperAdmin} = USERS_TABLE
+
+  const items = [{text: 'True'}, {text: 'False'}]
+  const selected =
+    String(superAdmin).charAt(0).toUpperCase() + String(superAdmin).slice(1)
+
+  return (
+    <td style={{width: colSuperAdmin}}>
+      <Dropdown
+        items={items}
+        selected={selected}
+        onChoose={onChangeSuperAdmin(user, superAdmin)}
+        buttonColor="btn-primary"
+        buttonSize="btn-xs"
+        className="super-admin-toggle"
+      />
+    </td>
+  )
+}
+
+const {bool, func, shape} = PropTypes
+
+UsersTableSuperAdminCell.propTypes = {
+  superAdmin: bool,
+  user: shape(),
+  onChangeSuperAdmin: func.isRequired,
+}
+
+export default UsersTableSuperAdminCell

ui/src/style/pages/admin.scss

@@ -292,3 +292,6 @@ table.table.chronograf-admin-table tbody tr td.chronograf-admin-table--selectabl
   font-weight: 500;
   color: $g13-mist;
 }
+.super-admin-toggle .dropdown-toggle {
+  width: 70px;
+}