Utilizes UserDateDetail, Capitalizes Scope value, fixes spelling errors

awx/ui_next/src/components/Lookup/ApplicationLookup.jsx

@@ -44,7 +44,7 @@ function ApplicationLookup({ i18n, onChange, value, label }) {
           actionsResponse?.data?.related_search_fields || []
         ).map(val => val.slice(0, -8)),
         searchableKeys: Object.keys(
-          actionsResponse.data.actions?.GET || {}
+          actionsResponse?.data?.actions?.GET || {}
         ).filter(key => actionsResponse.data.actions?.GET[key].filterable),
       };
     }, [location]),

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

@@ -7,23 +7,26 @@ import { Button } from '@patternfly/react-core';
 import AlertModal from '../../../components/AlertModal';
 import { CardBody, CardActionsRow } from '../../../components/Card';
 import DeleteButton from '../../../components/DeleteButton';
-import { DetailList, Detail } from '../../../components/DetailList';
+import {
+  DetailList,
+  Detail,
+  UserDateDetail,
+} from '../../../components/DetailList';
 import ErrorDetail from '../../../components/ErrorDetail';
-import { formatDateString } from '../../../util/dates';
 import { TokensAPI } from '../../../api';
 import useRequest, { useDismissableError } from '../../../util/useRequest';
+import { toTitleCase } from '../../../util/strings';
 
 function UserTokenDetail({ token, canEditOrDelete, i18n }) {
   const { scope, description, created, modified, summary_fields } = token;
   const history = useHistory();
   const { id, tokenId } = useParams();
-  const { request: deleteTeam, isLoading, error: deleteError } = useRequest(
+  const { request: deleteToken, isLoading, error: deleteError } = useRequest(
     useCallback(async () => {
       await TokensAPI.destroy(tokenId);
       history.push(`/users/${id}/tokens`);
     }, [tokenId, id, history])
   );
-
   const { error, dismissError } = useDismissableError(deleteError);
 
   return (
@@ -32,14 +35,19 @@ function UserTokenDetail({ token, canEditOrDelete, i18n }) {
         <Detail
           label={i18n._(t`Application`)}
           value={summary_fields?.application?.name}
-          dataCy="team-detail-name"
+          dataCy="application-token-detail-name"
         />
         <Detail label={i18n._(t`Description`)} value={description} />
-        <Detail label={i18n._(t`Scope`)} value={scope} />
+        <Detail label={i18n._(t`Scope`)} value={toTitleCase(scope)} />
-        <Detail label={i18n._(t`Created`)} value={formatDateString(created)} />
+        <UserDateDetail
-        <Detail
+          label={i18n._(t`Created`)}
+          date={created}
+          user={summary_fields.user}
+        />
+        <UserDateDetail
           label={i18n._(t`Last Modified`)}
-          value={formatDateString(modified)}
+          date={modified}
+          user={summary_fields.user}
         />
       </DetailList>
       <CardActionsRow>
@@ -55,7 +63,7 @@ function UserTokenDetail({ token, canEditOrDelete, i18n }) {
             <DeleteButton
               name={summary_fields?.application?.name}
               modalTitle={i18n._(t`Delete User Token`)}
-              onConfirm={deleteTeam}
+              onConfirm={deleteToken}
               isDisabled={isLoading}
             >
               {i18n._(t`Delete`)}

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

@@ -58,13 +58,13 @@ describe('<UserTokenDetail/>', () => {
     expect(wrapper.find('Detail[label="Description"]').prop('value')).toBe(
       'cdfsg'
     );
-    expect(wrapper.find('Detail[label="Scope"]').prop('value')).toBe('read');
+    expect(wrapper.find('Detail[label="Scope"]').prop('value')).toBe('Read');
-    expect(wrapper.find('Detail[label="Created"]').prop('value')).toBe(
+    expect(wrapper.find('UserDateDetail[label="Created"]').prop('date')).toBe(
-      '6/23/2020, 7:56:38 PM'
+      '2020-06-23T19:56:38.422053Z'
-    );
-    expect(wrapper.find('Detail[label="Last Modified"]').prop('value')).toBe(
-      '6/23/2020, 7:56:38 PM'
     );
+    expect(
+      wrapper.find('UserDateDetail[label="Last Modified"]').prop('date')
+    ).toBe('2020-06-23T19:56:38.441353Z');
     expect(wrapper.find('Button[aria-label="Edit"]').length).toBe(1);
     expect(wrapper.find('Button[aria-label="Delete"]').length).toBe(1);
   });

awx/ui_next/src/screens/User/UserTokenList/UserTokenListItem.jsx

@@ -11,7 +11,7 @@ import {
 import styled from 'styled-components';
 import { toTitleCase } from '../../../util/strings';
 
-import { formatDateStringUTC } from '../../../util/dates';
+import { formatDateString } from '../../../util/dates';
 import DataListCell from '../../../components/DataListCell';
 
 const Label = styled.b`
@@ -48,7 +48,9 @@ function UserTokenListItem({ i18n, token, isSelected, onSelect }) {
                   </Link>
                 </span>
               ) : (
-                i18n._(t`Personal access token`)
+                <Link to={`/users/${id}/tokens/${token.id}/details`}>
+                  {i18n._(t`Personal access token`)}
+                </Link>
               )}
             </DataListCell>,
             <DataListCell aria-label={i18n._(t`scope`)} key={token.scope}>
@@ -57,7 +59,7 @@ function UserTokenListItem({ i18n, token, isSelected, onSelect }) {
             </DataListCell>,
             <DataListCell aria-label={i18n._(t`expiration`)} key="expiration">
               <Label>{i18n._(t`Expires`)}</Label>
-              {formatDateStringUTC(token.expires)}
+              {formatDateString(token.expires)}
             </DataListCell>,
           ]}
         />