From 39cc358c660c642e686c0c54217db4e7c81e6dd5 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 30 Oct 2017 23:05:39 -0700
Subject: [PATCH] Make table rows selectable from name column as well as entire
 checkbox column

---
 .../components/chronograf/AllUsersTable.js    | 21 ++++++++++++-------
 ui/src/style/pages/admin.scss                 |  9 ++++++++
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/ui/src/admin/components/chronograf/AllUsersTable.js b/ui/src/admin/components/chronograf/AllUsersTable.js
index 5acd0d80f5..a491fb0e18 100644
--- a/ui/src/admin/components/chronograf/AllUsersTable.js
+++ b/ui/src/admin/components/chronograf/AllUsersTable.js
@@ -57,13 +57,16 @@ class ChronografAllUsersTable extends Component {
       const isSelected = selectedUsers.find(u => isSameUser(user, u))
       return (
         <tr key={i} className={isSelected ? 'selected' : null}>
-          <td>
-            <div
-              className="user-checkbox"
-              onClick={onToggleUserSelected(user)}
-            />
+          <td
+            onClick={onToggleUserSelected(user)}
+            className="chronograf-admin-table--check-col chronograf-admin-table--selectable"
+          >
+            <div className="user-checkbox" />
           </td>
-          <td>
+          <td
+            onClick={onToggleUserSelected(user)}
+            className="chronograf-admin-table--selectable"
+          >
             <strong>
               {user.name}
             </strong>
@@ -104,7 +107,7 @@ class ChronografAllUsersTable extends Component {
       <table className="table table-highlight chronograf-admin-table">
         <thead>
           <tr>
-            <th>
+            <th className="chronograf-admin-table--check-col">
               <div
                 className={
                   areAllSelected ? 'user-checkbox selected' : 'user-checkbox'
@@ -115,7 +118,9 @@ class ChronografAllUsersTable extends Component {
             <th>Username</th>
             <th>SuperAdmin</th>
             <th>
-              {organizationName ? 'Role' : 'Organization & Role'}
+              {organizationName === DEFAULT_ORG
+                ? 'Organization & Role'
+                : 'Role'}
             </th>
             <th>Provider</th>
             <th className="text-right">Scheme</th>
diff --git a/ui/src/style/pages/admin.scss b/ui/src/style/pages/admin.scss
index 03a1d7bbac..35c5f9f1aa 100644
--- a/ui/src/style/pages/admin.scss
+++ b/ui/src/style/pages/admin.scss
@@ -245,3 +245,12 @@ table.table.chronograf-admin-table tbody tr.selected td {
   font-weight: 500;
   color: $g13-mist;
 }
+table.table.chronograf-admin-table thead tr th.chronograf-admin-table--check-col,
+table.table.chronograf-admin-table tbody tr td.chronograf-admin-table--check-col {
+  width: 28px;
+  padding-right: 0;
+}
+table.table.chronograf-admin-table thead tr th.chronograf-admin-table--selectable,
+table.table.chronograf-admin-table tbody tr td.chronograf-admin-table--selectable {
+  &:hover {cursor: pointer;}
+}