Merge pull request #10629 from nixocio/ui_issue_5687

Update User screens

Add modified field to user endpoints. The API returns the last login
date as the modified field to the users.
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: #5687
closes: #9564

Reviewed-by: Alex Corey <Alex.swansboro@gmail.com>
Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
Reviewed-by: Sarah Akus <sakus@redhat.com>

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`)}
+        />
+      )}
     </>
   );
 }