Update User screens

* Add `modified` field to user endpoints. The API returns the last login
date as the `modified` field to the users.
* Add modified to user details.
* Modify user form layout to be as per mockups.
* Remove `last name` and  `first name` from user row, since it is
already on the column title.

closes: https://github.com/ansible/awx/issues/5687
closes: https://github.com/ansible/awx/issues/9564

awx/api/serializers.py

@@ -948,7 +948,6 @@ class UserSerializer(BaseSerializer):
             '*',
             '-name',
             '-description',
-            '-modified',
             'username',
             'first_name',
             'last_name',

awx/ui_next/src/screens/User/UserDetail/UserDetail.jsx

@@ -22,6 +22,7 @@ function UserDetail({ user }) {
     last_name,
     last_login,
     created,
+    modified,
     is_superuser,
     is_system_auditor,
     summary_fields,
@@ -56,14 +57,14 @@ function UserDetail({ user }) {
   return (
     <CardBody>
       <DetailList>
+        <Detail label={t`First Name`} value={`${first_name}`} />
+        <Detail label={t`Last Name`} value={`${last_name}`} />
+        <Detail label={t`Email`} value={email} />
         <Detail
           label={t`Username`}
           value={username}
           dataCy="user-detail-username"
         />
-        <Detail label={t`Email`} value={email} />
-        <Detail label={t`First Name`} value={`${first_name}`} />
-        <Detail label={t`Last Name`} value={`${last_name}`} />
         <Detail label={t`User Type`} value={`${user_type}`} />
         {userAuthType && (
           <Detail
@@ -75,6 +76,9 @@ function UserDetail({ user }) {
           <Detail label={t`Last Login`} value={formatDateString(last_login)} />
         )}
         <Detail label={t`Created`} value={formatDateString(created)} />
+        {modified && (
+          <Detail label={t`Last Modified`} value={formatDateString(modified)} />
+        )}
       </DetailList>
       <CardActionsRow>
         {summary_fields.user_capabilities &&

awx/ui_next/src/screens/User/UserDetail/UserDetail.test.jsx

@@ -30,6 +30,7 @@ describe('<UserDetail />', () => {
     assertDetail('User Type', 'System Administrator');
     assertDetail('Last Login', `11/4/2019, 11:12:36 PM`);
     assertDetail('Created', `10/28/2019, 3:01:07 PM`);
+    assertDetail('Last Modified', `7/12/2021, 7:08:33 PM`);
     assertDetail('Type', `SOCIAL`);
   });
 

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

@@ -51,20 +51,10 @@ function UserListItem({ user, isSelected, onSelect, detailUrl, rowIndex }) {
         )}
       </Td>
       <Td dataLabel={t`First Name`}>
-        {user.first_name && (
-          <Fragment>
-            <b css="margin-right: 24px">{t`First Name`}</b>
-            {user.first_name}
-          </Fragment>
-        )}
+        {user.first_name && <Fragment>{user.first_name}</Fragment>}
       </Td>
       <Td dataLabel={t`Last Name`}>
-        {user.last_name && (
-          <Fragment>
-            <b css="margin-right: 24px">{t`Last Name`}</b>
-            {user.last_name}
-          </Fragment>
-        )}
+        {user.last_name && <Fragment>{user.last_name}</Fragment>}
       </Td>
       <Td dataLabel={t`Role`}>{user_type}</Td>
       <ActionsTd dataLabel={t`Actions`}>

awx/ui_next/src/screens/User/data.user.json

@@ -22,6 +22,7 @@
       }
   },
   "created": "2019-10-28T15:01:07.218634Z",
+  "modified": "2021-07-12T19:08:33.947072Z",
   "username": "admin",
   "first_name": "Admin",
   "last_name": "User",

awx/ui_next/src/screens/User/shared/UserForm.jsx

@@ -59,6 +59,19 @@ function UserFormFields({ user }) {
 
   return (
     <>
+      <FormField
+        id="user-first-name"
+        label={t`First Name`}
+        name="first_name"
+        type="text"
+      />
+      <FormField
+        id="user-last-name"
+        label={t`Last Name`}
+        name="last_name"
+        type="text"
+      />
+      <FormField id="user-email" label={t`Email`} name="email" type="text" />
       <FormField
         id="user-username"
         label={t`Username`}
@@ -69,7 +82,6 @@ function UserFormFields({ user }) {
         }
         isRequired={!ldapUser && !externalAccount}
       />
-      <FormField id="user-email" label={t`Email`} name="email" type="text" />
       {!ldapUser && !(socialAuthUser && externalAccount) && (
         <>
           <PasswordField
@@ -96,30 +108,7 @@ function UserFormFields({ user }) {
           />
         </>
       )}
-      <FormField
-        id="user-first-name"
-        label={t`First Name`}
-        name="first_name"
-        type="text"
-      />
-      <FormField
-        id="user-last-name"
-        label={t`Last Name`}
-        name="last_name"
-        type="text"
-      />
-      {!user.id && (
-        <OrganizationLookup
-          helperTextInvalid={organizationMeta.error}
-          isValid={!organizationMeta.touched || !organizationMeta.error}
-          onBlur={() => organizationHelpers.setTouched()}
-          onChange={handleOrganizationUpdate}
-          value={organizationField.value}
-          required
-          autoPopulate={!user?.id}
-          validate={required(t`Select a value for this field`)}
-        />
-      )}
+
       {me.is_superuser && (
         <FormGroup
           fieldId="user-type"
@@ -138,6 +127,19 @@ function UserFormFields({ user }) {
           />
         </FormGroup>
       )}
+
+      {!user.id && (
+        <OrganizationLookup
+          helperTextInvalid={organizationMeta.error}
+          isValid={!organizationMeta.touched || !organizationMeta.error}
+          onBlur={() => organizationHelpers.setTouched()}
+          onChange={handleOrganizationUpdate}
+          value={organizationField.value}
+          required
+          autoPopulate={!user?.id}
+          validate={required(t`Select a value for this field`)}
+        />
+      )}
     </>
   );
 }