Create empty state for chronograf admin table

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

@@ -79,29 +79,44 @@ class ChronografUsersTable extends Component {
           </tr>
         </thead>
         <tbody>
-          {filteredUsers.map(
-            (user, i) =>
-              organizationName === DEFAULT_ORG
-                ? <UsersTableRow
-                    user={user}
-                    key={i}
-                    onToggleUserSelected={onToggleUserSelected}
-                    selectedUsers={selectedUsers}
-                    isSameUser={isSameUser}
-                    onChangeUserRole={this.handleChangeUserRole}
-                    onChooseFilter={this.handleChooseFilter}
-                    onChangeSuperAdmin={this.handleChangeSuperAdmin}
-                  />
-                : <OrgTableRow
-                    user={user}
-                    key={i}
-                    onToggleUserSelected={onToggleUserSelected}
-                    selectedUsers={selectedUsers}
-                    isSameUser={isSameUser}
-                    organizationName={organizationName}
-                    onChangeUserRole={this.handleChangeUserRole}
-                  />
-          )}
+          {filteredUsers.length
+            ? filteredUsers.map(
+                (user, i) =>
+                  organizationName === DEFAULT_ORG
+                    ? <UsersTableRow
+                        user={user}
+                        key={i}
+                        onToggleUserSelected={onToggleUserSelected}
+                        selectedUsers={selectedUsers}
+                        isSameUser={isSameUser}
+                        onChangeUserRole={this.handleChangeUserRole}
+                        onChooseFilter={this.handleChooseFilter}
+                        onChangeSuperAdmin={this.handleChangeSuperAdmin}
+                      />
+                    : <OrgTableRow
+                        user={user}
+                        key={i}
+                        onToggleUserSelected={onToggleUserSelected}
+                        selectedUsers={selectedUsers}
+                        isSameUser={isSameUser}
+                        organizationName={organizationName}
+                        onChangeUserRole={this.handleChangeUserRole}
+                      />
+              )
+            : <tr className="table-empty-state">
+                <Authorized
+                  requiredRole={SUPERADMIN_ROLE}
+                  replaceWith={
+                    <th colSpan="6">
+                      <p>No Users to display</p>
+                    </th>
+                  }
+                >
+                  <th colSpan="7">
+                    <p>No Users to display</p>
+                  </th>
+                </Authorized>
+              </tr>}
         </tbody>
       </table>
     )

ui/src/style/components/tables.scss

@@ -97,10 +97,14 @@ table.table thead th.sortable-header,
     Empty State for Tables
     ----------------------------------------------
 */
-.table-empty-state {
+tr.table-empty-state,
+.table-highlight tr.table-empty-state:hover {
+  background-color: transparent;
+
   > th {
     text-align: center;
-
+    @include no-user-select();
+    
     > p {
       font-weight: 400;
       font-size: 18px;