Fixes missing name bug

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

@@ -5,7 +5,6 @@ import { t } from '@lingui/macro';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import PaginatedDataList, {
   ToolbarAddButton,
-  ToolbarDeleteButton,
 } from '../../../components/PaginatedDataList';
 import useSelected from '../../../util/useSelected';
 import useRequest from '../../../util/useRequest';
@@ -39,7 +38,7 @@ function UserTokenList({ i18n }) {
           application: result.summary_fields.application,
           user_capabilities: { delete: true },
         };
-        result.username = result.summary_fields.user.username;
+        result.name = result.summary_fields.application?.name;
         return result;
       });
       return { tokens: modifiedResults, itemCount: count };
@@ -114,12 +113,6 @@ function UserTokenList({ i18n }) {
                   />,
                 ]
               : []),
-            <ToolbarDeleteButton
-              key="delete"
-              onDelete={() => {}}
-              itemsToDelete={selected}
-              pluralizedItemName="Tokens"
-            />,
           ]}
         />
       )}
@@ -130,7 +123,6 @@ function UserTokenList({ i18n }) {
           onSelect={() => {
             handleSelect(token);
           }}
-          detailUrl={`${location.pathname}/details`}
           isSelected={selected.some(row => row.id === token.id)}
         />
       )}

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

@@ -141,10 +141,6 @@ describe('<UserTokenList />', () => {
       wrapper = mountWithContexts(<UserTokenList />);
     });
     waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
-
-    expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
-      true
-    );
   });
 
   test('should enable edit button', async () => {
@@ -165,8 +161,5 @@ describe('<UserTokenList />', () => {
     expect(
       wrapper.find('DataListCheck[id="select-token-3"]').props().checked
     ).toBe(true);
-    expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
-      false
-    );
   });
 });

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Link } from 'react-router-dom';
 import {
   DataListItemCells,
   DataListCheck,
@@ -9,6 +8,7 @@ import {
   DataListItem,
 } from '@patternfly/react-core';
 import styled from 'styled-components';
+import { toTitleCase } from '../../../util/strings';
 
 import { formatDateStringUTC } from '../../../util/dates';
 import DataListCell from '../../../components/DataListCell';
@@ -16,7 +16,12 @@ import DataListCell from '../../../components/DataListCell';
 const Label = styled.b`
   margin-right: 20px;
 `;
-function UserTokenListItem({ i18n, token, isSelected, detailUrl, onSelect }) {
+
+const NameLabel = styled.b`
+  margin-right: 5px;
+`;
+
+function UserTokenListItem({ i18n, token, isSelected, onSelect }) {
   const labelId = `check-action-${token.id}`;
   return (
     <DataListItem key={token.id} aria-labelledby={labelId} id={`${token.id}`}>
@@ -29,14 +34,22 @@ function UserTokenListItem({ i18n, token, isSelected, detailUrl, onSelect }) {
         />
         <DataListItemCells
           dataListCells={[
-            <DataListCell aria-label={i18n._(t`name`)} key={token.id}>
-              <Link to={`${detailUrl}`}>
-                {token.summary_fields.application.name}
-              </Link>
+            <DataListCell
+              aria-label={i18n._(t`application name`)}
+              key={token.id}
+            >
+              {token.summary_fields?.application?.name ? (
+                <span>
+                  <NameLabel>{i18n._(t`Application:`)}</NameLabel>
+                  {token.summary_fields.application.name}
+                </span>
+              ) : (
+                i18n._(t`Personal access token`)
+              )}
             </DataListCell>,
             <DataListCell aria-label={i18n._(t`scope`)} key={token.scope}>
               <Label>{i18n._(t`Scope`)}</Label>
-              {token.scope}
+              {toTitleCase(token.scope)}
             </DataListCell>,
             <DataListCell aria-label={i18n._(t`expiration`)} key="expiration">
               <Label>{i18n._(t`Expires`)}</Label>

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

@@ -51,11 +51,11 @@ describe('<UserTokenListItem />', () => {
       );
     });
     expect(wrapper.find('DataListCheck').prop('checked')).toBe(false);
-    expect(wrapper.find('PFDataListCell[aria-label="name"]').text()).toBe(
-      'app'
-    );
+    expect(
+      wrapper.find('PFDataListCell[aria-label="application name"]').text()
+    ).toBe('Application:app');
     expect(wrapper.find('PFDataListCell[aria-label="scope"]').text()).toBe(
-      'Scoperead'
+      'ScopeRead'
     );
     expect(wrapper.find('PFDataListCell[aria-label="expiration"]').text()).toBe(
       'Expires10/25/3019, 3:06:43 PM'