Add type column to users list

Add type column to users list. Also, update `UserListItem` to be a
functional component.

See: https://github.com/ansible/awx/issues/5684

awx/ui_next/src/screens/User/UserList/UserListItem.jsx

@@ -19,17 +19,18 @@ import DataListCell from '../../../components/DataListCell';
 
 import { User } from '../../../types';
 
-class UserListItem extends React.Component {
+function UserListItem({ user, isSelected, onSelect, detailUrl, i18n }) {
-  static propTypes = {
-    user: User.isRequired,
-    detailUrl: string.isRequired,
-    isSelected: bool.isRequired,
-    onSelect: func.isRequired,
-  };
-
-  render() {
-    const { user, isSelected, onSelect, detailUrl, i18n } = this.props;
   const labelId = `check-action-${user.id}`;
+
+  let user_type;
+  if (user.is_superuser) {
+    user_type = i18n._(t`System Administrator`);
+  } else if (user.is_system_auditor) {
+    user_type = i18n._(t`System Auditor`);
+  } else {
+    user_type = i18n._(t`Normal User`);
+  }
+
   return (
     <DataListItem key={user.id} aria-labelledby={labelId} id={`${user.id}`}>
       <DataListItemRow>
@@ -41,12 +42,15 @@ class UserListItem extends React.Component {
         />
         <DataListItemCells
           dataListCells={[
-              <DataListCell key="username">
+            <DataListCell key="username" aria-label={i18n._(t`username`)}>
               <Link to={`${detailUrl}`} id={labelId}>
                 <b>{user.username}</b>
               </Link>
             </DataListCell>,
-              <DataListCell key="first-name">
+            <DataListCell
+              key="first-name"
+              aria-label={i18n._(t`user first name`)}
+            >
               {user.first_name && (
                 <Fragment>
                   <b css="margin-right: 24px">{i18n._(t`First Name`)}</b>
@@ -54,7 +58,10 @@ class UserListItem extends React.Component {
                 </Fragment>
               )}
             </DataListCell>,
-              <DataListCell key="last-name">
+            <DataListCell
+              key="last-name"
+              aria-label={i18n._(t`user last name`)}
+            >
               {user.last_name && (
                 <Fragment>
                   <b css="margin-right: 24px">{i18n._(t`Last Name`)}</b>
@@ -62,6 +69,9 @@ class UserListItem extends React.Component {
                 </Fragment>
               )}
             </DataListCell>,
+            <DataListCell key="user-type" aria-label={i18n._(t`user type`)}>
+              {user_type}
+            </DataListCell>,
           ]}
         />
         <DataListAction
@@ -86,5 +96,12 @@ class UserListItem extends React.Component {
     </DataListItem>
   );
 }
-}
+
+UserListItem.prototype = {
+  user: User.isRequired,
+  detailUrl: string.isRequired,
+  isSelected: bool.isRequired,
+  onSelect: func.isRequired,
+};
+
 export default withI18n()(UserListItem);

awx/ui_next/src/screens/User/UserList/UserListItem.test.jsx

@@ -28,12 +28,18 @@ describe('UserListItem with full permissions', () => {
       </I18nProvider>
     );
   });
-  test('initially renders succesfully', () => {
+  test('initially renders successfully', () => {
     expect(wrapper.length).toBe(1);
   });
   test('edit button shown to users with edit capabilities', () => {
     expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
   });
+
+  test('should display user type', () => {
+    expect(
+      wrapper.find('DataListCell[aria-label="user type"]').prop('children')
+    ).toEqual('System Administrator');
+  });
 });
 
 describe('UserListItem without full permissions', () => {