Show PAT as part of bulk delete list

* Show PAT as part of bulk delete list
* Update tooltip message in how to create a Personal Access Token

See: https://github.com/ansible/awx/issues/8680

awx/ui/src/components/DeleteButton/DeleteButton.js

@@ -20,7 +20,6 @@ function DeleteButton({
   onConfirm,
   modalTitle,
   name,
-
   variant,
   children,
   isDisabled,

awx/ui/src/screens/Application/shared/ApplicationForm.js

@@ -83,7 +83,7 @@ function ApplicationFormFields({
         label={t`Authorization grant type`}
         labelIcon={
           <Popover
-            content={t`The Grant type the user must use for acquire tokens for this application`}
+            content={t`The Grant type the user must use to acquire tokens for this application`}
           />
         }
       >

awx/ui/src/screens/User/UserTokenDetail/UserTokenDetail.js

@@ -68,7 +68,7 @@ function UserTokenDetail({ token }) {
       </DetailList>
       <CardActionsRow>
         <DeleteButton
-          name={summary_fields?.application?.name}
+          name={summary_fields?.application?.name || t`Personal Access Token`}
           modalTitle={t`Delete User Token`}
           onConfirm={deleteToken}
           isDisabled={isLoading}

awx/ui/src/screens/User/UserTokenList/UserTokenList.js

@@ -99,6 +99,16 @@ function UserTokenList() {
 
   const canAdd = true;
 
+  const modifiedSelected = selected.map((item) => {
+    if (item.application === null) {
+      return {
+        ...item,
+        name: t`Personal Access Token`,
+      };
+    }
+    return item;
+  });
+
   return (
     <>
       <PaginatedTable
@@ -162,7 +172,7 @@ function UserTokenList() {
               <ToolbarDeleteButton
                 key="delete"
                 onDelete={handleDelete}
-                itemsToDelete={selected}
+                itemsToDelete={modifiedSelected}
                 pluralizedItemName={t`User tokens`}
               />,
             ]}
@@ -170,7 +180,7 @@ function UserTokenList() {
         )}
         headerRow={
           <HeaderRow qsConfig={QS_CONFIG}>
-            <HeaderCell sortKey="application__name">{t`Name`}</HeaderCell>
+            <HeaderCell sortKey="application__name">{t`Application Name`}</HeaderCell>
             <HeaderCell sortKey="scope">{t`Scope`}</HeaderCell>
             <HeaderCell sortKey="expires">{t`Expires`}</HeaderCell>
           </HeaderRow>

awx/ui/src/screens/User/UserTokenList/UserTokenListItem.js

@@ -21,7 +21,7 @@ function UserTokenListItem({ token, isSelected, onSelect, rowIndex }) {
         <Link to={`/users/${id}/tokens/${token.id}/details`}>
           {token.summary_fields?.application
             ? token.summary_fields.application.name
-            : `Personal access token`}
+            : t`Personal access token`}
         </Link>
       </Td>
       <Td dataLabel={t`Scope`}>{toTitleCase(token.scope)}</Td>

awx/ui/src/screens/User/shared/UserTokenForm.js

@@ -46,7 +46,7 @@ function UserTokenFormFields() {
             <span>
               {t`Application`}
               <Popover
-                content={t`Select the application that this token will belong to.`}
+                content={t`Select the application that this token will belong to, or leave this field empty to create a Personal Access Token.`}
               />
             </span>
           }