Add IDs to the system console user list, its name and email (#6419)

* Update system_users.jsx

* Update user_list.jsx

* Update user_list.jsx

* Update user_list.jsx

* Update user_list_row.jsx

* Update user_list_row.jsx

3 files changed, 23 insertions, 5 deletions

diff --git a/webapp/components/admin_console/system_users/system_users.jsx b/webapp/components/admin_console/system_users/system_users.jsx
index 29fcd634b..d8c52c807 100644
--- a/webapp/components/admin_console/system_users/system_users.jsx
+++ b/webapp/components/admin_console/system_users/system_users.jsx
@@ -279,6 +279,7 @@ export default class SystemUsers extends React.Component {
             <div className='system-users__filter-row'>
                 <div className='system-users__filter'>
                     <input
+                        id='searchUsers'
                         ref='filter'
                         className='form-control filter-textbox'
                         placeholder={Utils.localizeMessage('filtered_user_list.search', 'Search users')}
diff --git a/webapp/components/user_list.jsx b/webapp/components/user_list.jsx
index 62301b852..ceb6f9780 100644
--- a/webapp/components/user_list.jsx
+++ b/webapp/components/user_list.jsx
@@ -7,6 +7,8 @@ import LoadingScreen from 'components/loading_screen.jsx';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import Constants from 'utils/constants.jsx';
+
 export default class UserList extends React.Component {
     constructor(props) {
         super(props);
@@ -27,7 +29,7 @@ export default class UserList extends React.Component {
         if (users == null) {
             return <LoadingScreen/>;
         } else if (users.length > 0) {
-            content = users.map((user) => {
+            content = users.map((user, index) => {
                 return (
                     <UserListRow
                         key={user.id}
@@ -36,6 +38,7 @@ export default class UserList extends React.Component {
                         actions={this.props.actions}
                         actionProps={this.props.actionProps}
                         actionUserProps={this.props.actionUserProps[user.id]}
+                        userCount={(index >= 0 && index < Constants.TEST_ID_COUNT) ? index : -1}
                     />
                 );
             });
diff --git a/webapp/components/user_list_row.jsx b/webapp/components/user_list_row.jsx
index 3a7fc5d1c..1f5eacd48 100644
--- a/webapp/components/user_list_row.jsx
+++ b/webapp/components/user_list_row.jsx
@@ -13,7 +13,7 @@ import Client from 'client/web_client.jsx';
 import React from 'react';
 import {FormattedHTMLMessage} from 'react-intl';
 
-export default function UserListRow({user, extraInfo, actions, actionProps, actionUserProps}) {
+export default function UserListRow({user, extraInfo, actions, actionProps, actionUserProps, userCount}) {
     const nameFormat = PreferenceStore.get(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', '');
 
     let name = user.username;
@@ -58,6 +58,13 @@ export default function UserListRow({user, extraInfo, actions, actionProps, acti
         status = UserStore.getStatus(user.id);
     }
 
+    let userCountID = null;
+    let userCountEmail = null;
+    if (userCount >= 0) {
+        userCountID = Utils.createSafeId('userListRowName' + userCount);
+        userCountEmail = Utils.createSafeId('userListRowEmail' + userCount);
+    }
+
     return (
         <div
             key={user.id}
@@ -72,10 +79,16 @@ export default function UserListRow({user, extraInfo, actions, actionProps, acti
             <div
                 className='more-modal__details'
             >
-                <div className='more-modal__name'>
+                <div
+                    id={userCountID}
+                    className='more-modal__name'
+                >
                     {name}
                 </div>
-                <div className={emailStyle}>
+                <div
+                    id={userCountEmail}
+                    className={emailStyle}
+                >
                     {email}
                 </div>
                 {extraInfo}
@@ -101,5 +114,6 @@ UserListRow.propTypes = {
     extraInfo: React.PropTypes.arrayOf(React.PropTypes.object),
     actions: React.PropTypes.arrayOf(React.PropTypes.func),
     actionProps: React.PropTypes.object,
-    actionUserProps: React.PropTypes.object
+    actionUserProps: React.PropTypes.object,
+    userCount: React.PropTypes.number
 };