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,72 +19,89 @@ import DataListCell from '../../../components/DataListCell';
 
 import { User } from '../../../types';
 
-class UserListItem extends React.Component {
+function UserListItem({ user, isSelected, onSelect, detailUrl, i18n }) {
-  static propTypes = {
+  const labelId = `check-action-${user.id}`;
-    user: User.isRequired,
-    detailUrl: string.isRequired,
-    isSelected: bool.isRequired,
-    onSelect: func.isRequired,
-  };
 
-  render() {
+  let user_type;
-    const { user, isSelected, onSelect, detailUrl, i18n } = this.props;
+  if (user.is_superuser) {
-    const labelId = `check-action-${user.id}`;
+    user_type = i18n._(t`System Administrator`);
-    return (
+  } else if (user.is_system_auditor) {
-      <DataListItem key={user.id} aria-labelledby={labelId} id={`${user.id}`}>
+    user_type = i18n._(t`System Auditor`);
-        <DataListItemRow>
+  } else {
-          <DataListCheck
+    user_type = i18n._(t`Normal User`);
-            id={`select-user-${user.id}`}
-            checked={isSelected}
-            onChange={onSelect}
-            aria-labelledby={labelId}
-          />
-          <DataListItemCells
-            dataListCells={[
-              <DataListCell key="username">
-                <Link to={`${detailUrl}`} id={labelId}>
-                  <b>{user.username}</b>
-                </Link>
-              </DataListCell>,
-              <DataListCell key="first-name">
-                {user.first_name && (
-                  <Fragment>
-                    <b css="margin-right: 24px">{i18n._(t`First Name`)}</b>
-                    {user.first_name}
-                  </Fragment>
-                )}
-              </DataListCell>,
-              <DataListCell key="last-name">
-                {user.last_name && (
-                  <Fragment>
-                    <b css="margin-right: 24px">{i18n._(t`Last Name`)}</b>
-                    {user.last_name}
-                  </Fragment>
-                )}
-              </DataListCell>,
-            ]}
-          />
-          <DataListAction
-            aria-label="actions"
-            aria-labelledby={labelId}
-            id={labelId}
-          >
-            {user.summary_fields.user_capabilities.edit && (
-              <Tooltip content={i18n._(t`Edit User`)} position="top">
-                <Button
-                  aria-label={i18n._(t`Edit User`)}
-                  variant="plain"
-                  component={Link}
-                  to={`/users/${user.id}/edit`}
-                >
-                  <PencilAltIcon />
-                </Button>
-              </Tooltip>
-            )}
-          </DataListAction>
-        </DataListItemRow>
-      </DataListItem>
-    );
   }
+
+  return (
+    <DataListItem key={user.id} aria-labelledby={labelId} id={`${user.id}`}>
+      <DataListItemRow>
+        <DataListCheck
+          id={`select-user-${user.id}`}
+          checked={isSelected}
+          onChange={onSelect}
+          aria-labelledby={labelId}
+        />
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="username" aria-label={i18n._(t`username`)}>
+              <Link to={`${detailUrl}`} id={labelId}>
+                <b>{user.username}</b>
+              </Link>
+            </DataListCell>,
+            <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>
+                  {user.first_name}
+                </Fragment>
+              )}
+            </DataListCell>,
+            <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>
+                  {user.last_name}
+                </Fragment>
+              )}
+            </DataListCell>,
+            <DataListCell key="user-type" aria-label={i18n._(t`user type`)}>
+              {user_type}
+            </DataListCell>,
+          ]}
+        />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          {user.summary_fields.user_capabilities.edit && (
+            <Tooltip content={i18n._(t`Edit User`)} position="top">
+              <Button
+                aria-label={i18n._(t`Edit User`)}
+                variant="plain"
+                component={Link}
+                to={`/users/${user.id}/edit`}
+              >
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
+      </DataListItemRow>
+    </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', () => {