Implement toggling selection of users

Signed-off-by: Jared Scheib <jared.scheib@gmail.com>

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

@@ -31,7 +31,13 @@ class ChronografAllUsersTable extends Component {
   }
 
   renderTableRows = () => {
-    const {users, organizationName} = this.props
+    const {
+      users,
+      organizationName,
+      onToggleUserSelected,
+      selectedUsers,
+      isSameUser,
+    } = this.props
 
     const filteredUsers = organizationName
       ? users.filter(user => {
@@ -41,38 +47,38 @@ class ChronografAllUsersTable extends Component {
         })
       : users
 
-    return filteredUsers.map((user, u) =>
-      <tr key={u}>
-        <td>
-          <div className="dark-checkbox">
-            <input
-              type="checkbox"
-              id={`chronograf-user-${u}`}
-              className="form-control-static"
-              value="off"
-            />
-            <label htmlFor={`chronograf-user-${u}`} />
-          </div>
-        </td>
-        <td>
-          <strong>
-            {user.name}
-          </strong>
-        </td>
-        <td>
-          {user.superadmin ? 'Yes' : '--'}
-        </td>
-        <td>
-          {this.renderOrgAndRoleCell(user)}
-        </td>
-        <td>
-          {user.provider}
-        </td>
-        <td className="text-right">
-          {user.scheme}
-        </td>
-      </tr>
-    )
+    return filteredUsers.map((user, i) => {
+      const isSelected = selectedUsers.find(u => isSameUser(user, u))
+      return (
+        <tr key={i}>
+          <td>
+            <div
+              className={isSelected ? 'active' : null}
+              onClick={onToggleUserSelected(user)}
+            >
+              {isSelected ? '[x]' : '[ ]'}
+            </div>
+          </td>
+          <td>
+            <strong>
+              {user.name}
+            </strong>
+          </td>
+          <td>
+            {user.superadmin ? 'Yes' : '--'}
+          </td>
+          <td>
+            {this.renderOrgAndRoleCell(user)}
+          </td>
+          <td>
+            {user.provider}
+          </td>
+          <td className="text-right">
+            {user.scheme}
+          </td>
+        </tr>
+      )
+    })
   }
 
   render() {
@@ -114,7 +120,10 @@ const {arrayOf, func, shape, string} = PropTypes
 
 ChronografAllUsersTable.propTypes = {
   users: arrayOf(shape()),
+  selectedUsers: arrayOf(shape()),
   onViewOrg: func.isRequired,
+  onToggleUserSelected: func.isRequired,
+  isSameUser: func.isRequired,
   organizationName: string,
 }
 export default ChronografAllUsersTable

ui/src/admin/constants/dummyUsers.js

@@ -80,7 +80,7 @@ export const DUMMY_USERS = [
   },
   {
     name: 'bob.builder@gmail.com',
-    provider: 'Generic',
+    provider: 'Heroku',
     scheme: 'LDAP',
     roles: [
       {organizationName: 'Red Team', organizationID: 1236, name: 'editor'},

ui/src/admin/containers/AdminChronografPage.js

@@ -14,15 +14,46 @@ class AdminChronografPage extends Component {
     this.state = {
       organizationName: null,
       users: DUMMY_USERS,
+      selectedUsers: [],
     }
   }
 
+  isSameUser = (userA, userB) => {
+    return userA.name === userB.name && userA.provider === userB.provider
+  }
+
   handleViewOrg = organizationName => () => {
+    this.handleDeselectAllUsers()
     this.setState({organizationName})
   }
 
+  handleToggleUserSelected = user => e => {
+    e.preventDefault()
+
+    const {selectedUsers} = this.state
+
+    const isUserSelected = selectedUsers.find(u => this.isSameUser(user, u))
+
+    const newSelectedUsers = isUserSelected
+      ? selectedUsers.filter(u => !this.isSameUser(user, u))
+      : [...selectedUsers, user]
+
+    this.setState({selectedUsers: newSelectedUsers})
+  }
+
+  handleSelectAllUsers = () => {
+    this.state.users.forEach(user => {
+      user.selected = true
+    })
+  }
+  handleDeselectAllUsers = () => {
+    this.state.users.forEach(user => {
+      user.selected = false
+    })
+  }
+
   render() {
-    const {organizationName, users} = this.state
+    const {organizationName, users, selectedUsers} = this.state
 
     return (
       <div className="page">
@@ -58,6 +89,9 @@ class AdminChronografPage extends Component {
                           users={users}
                           organizationName={organizationName}
                           onViewOrg={this.handleViewOrg}
+                          onToggleUserSelected={this.handleToggleUserSelected}
+                          selectedUsers={selectedUsers}
+                          isSameUser={this.isSameUser}
                         />
                       </div>
                     </div>