Add delete button on details page for user tokens

frontend/awx/access/users/UserPage/UserTokenDetails.tsx

@@ -25,13 +25,13 @@ export function UserTokenDetails() {
 
   if (!user || !token) return <LoadingPage breadcrumbs tabs />;
 
-  return <UserTokenDetailsInternal token={token} user={user} />;
+  return <UserTokenDetailsInternal token={token} />;
 }
 
-function UserTokenDetailsInternal(props: { token: Token; user: AwxUser }) {
-  const { token, user } = props;
+function UserTokenDetailsInternal(props: { token: Token }) {
+  const { token } = props;
 
-  const userTokensColumns = useUserTokensColumns(user, { disableLinks: true });
+  const userTokensColumns = useUserTokensColumns({ disableLinks: true });
 
   return (
     <PageDetails>

frontend/awx/access/users/UserPage/UserTokenPage.tsx

@@ -1,21 +1,63 @@
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
-import { PageHeader, PageLayout } from '../../../../../framework';
+import { TrashIcon } from '@patternfly/react-icons';
+import {
+  IPageAction,
+  PageActionType,
+  PageActionSelection,
+  PageHeader,
+  PageLayout,
+  usePageNavigate,
+  PageActions,
+  LoadingPage,
+} from '../../../../../framework';
 import { PageRoutedTabs } from '../../../../../framework/PageTabs/PageRoutedTabs';
 import { AwxRoute } from '../../../main/AwxRoutes';
 import { useGetPageUrl } from '../../../../../framework';
 import { useGetItem } from '../../../../common/crud/useGet';
 import { AwxUser } from '../../../interfaces/User';
+import { Token } from '../../../interfaces/Token';
 import { awxAPI } from '../../../common/api/awx-utils';
 import { AwxError } from '../../../common/AwxError';
+import { useDeleteUserTokens } from '../hooks/useDeleteUserTokens';
+import { useMemo } from 'react';
+import { DropdownPosition } from '@patternfly/react-core/deprecated';
 
 export function UserTokenPage() {
   const { t } = useTranslation();
   const getPageUrl = useGetPageUrl();
+  const pageNavigate = usePageNavigate();
   const params = useParams<{ id: string; tokenid: string }>();
-  const { error, data: user, refresh } = useGetItem<AwxUser>(awxAPI`/users`, params.id);
+  const { error: userError, data: user, refresh } = useGetItem<AwxUser>(awxAPI`/users`, params.id);
+  const {
+    error: tokenError,
+    data: token,
+    refresh: refreshToken,
+  } = useGetItem<Token>(awxAPI`/tokens`, params.tokenid);
 
-  if (error) return <AwxError error={error} handleRefresh={refresh} />;
+  const deleteTokens = useDeleteUserTokens((deleted: Token[]) => {
+    if (deleted.length > 0) {
+      pageNavigate(AwxRoute.UserTokens, { params: { id: params.id } });
+    }
+  });
+
+  const itemActions: IPageAction<Token>[] = useMemo(() => {
+    return [
+      {
+        type: PageActionType.Button,
+        selection: PageActionSelection.Single,
+        icon: TrashIcon,
+        label: t('Delete token'),
+        onClick: (token) => deleteTokens([token]),
+        isDanger: true,
+        isPinned: true,
+      },
+    ];
+  }, [deleteTokens, t]);
+
+  if (userError) return <AwxError error={userError} handleRefresh={refresh} />;
+  if (tokenError) return <AwxError error={tokenError} handleRefresh={refreshToken} />;
+  if (!token) return <LoadingPage breadcrumbs tabs />;
 
   return (
     <PageLayout>
@@ -34,6 +76,13 @@ export function UserTokenPage() {
             }),
           },
         ]}
+        headerActions={
+          <PageActions<Token>
+            actions={itemActions}
+            position={DropdownPosition.right}
+            selectedItem={token}
+          />
+        }
       ></PageHeader>
       <PageRoutedTabs
         backTab={{

frontend/awx/access/users/UserPage/UserTokens.tsx

@@ -51,15 +51,14 @@ function UserTokensInternal(props: { infoMessage?: string; user: AwxUser }) {
   const { t } = useTranslation();
   const getPageUrl = useGetPageUrl();
 
-  const tableColumns = useUserTokensColumns(user);
+  const tableColumns = useUserTokensColumns();
   const toolbarFilters = useUserTokensFilters();
   const view = useAwxView<Token>({
     url: awxAPI`/users/${user.id.toString()}/tokens/`,
     toolbarFilters,
     tableColumns,
   });
-  //const deleteTokens = useDeleteTokens(view.unselectItemsAndRefresh);
-  const deleteTokens = useDeleteUserTokens(user, view.unselectItemsAndRefresh);
+  const deleteTokens = useDeleteUserTokens(view.unselectItemsAndRefresh);
 
   const toolbarActions = useMemo<IPageAction<Token>[]>(
     () => [

frontend/awx/access/users/hooks/useDeleteUserTokens.tsx

@@ -5,11 +5,10 @@ import { awxAPI } from '../../../common/api/awx-utils';
 import { useAwxBulkConfirmation } from '../../../common/useAwxBulkConfirmation';
 import { Token } from '../../../interfaces/Token';
 import { useUserTokensColumns } from './useUserTokensColumns';
-import { AwxUser } from '../../../interfaces/User';
 
-export function useDeleteUserTokens(user: AwxUser, onComplete: (items: Token[]) => void) {
+export function useDeleteUserTokens(onComplete: (items: Token[]) => void) {
   const { t } = useTranslation();
-  const userTokensColumns = useUserTokensColumns(user, { disableLinks: true, disableSort: true });
+  const userTokensColumns = useUserTokensColumns({ disableLinks: true, disableSort: true });
   const bulkAction = useAwxBulkConfirmation<Token>();
   const deleteTokens = (tokens: Token[]) => {
     bulkAction({

frontend/awx/access/users/hooks/useUserTokensColumns.tsx

@@ -1,18 +1,11 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ITableColumn, TextCell, useGetPageUrl } from '../../../../../framework';
-import { AwxUser } from '../../../interfaces/User';
 import { Token } from '../../../interfaces/Token';
 import { AwxRoute } from '../../../main/AwxRoutes';
 import { useCreatedColumn, useModifiedColumn } from '../../../../common/columns';
 
-export function useUserTokensColumns(
-  user: AwxUser,
-  options?: {
-    disableLinks?: boolean;
-    disableSort?: boolean;
-  }
-) {
+export function useUserTokensColumns(options?: { disableLinks?: boolean; disableSort?: boolean }) {
   const { t } = useTranslation();
   const getPageUrl = useGetPageUrl();
   const createdColumn = useCreatedColumn(options);
@@ -33,7 +26,7 @@ export function useUserTokensColumns(
               options?.disableLinks
                 ? undefined
                 : getPageUrl(AwxRoute.UserTokenDetails, {
-                    params: { id: user.id, tokenid: token.id.toString() },
+                    params: { id: token.summary_fields.user.id, tokenid: token.id.toString() },
                   })
             }
           />
@@ -64,14 +57,6 @@ export function useUserTokensColumns(
       createdColumn,
       modifiedColumn,
     ],
-    [
-      createdColumn,
-      getPageUrl,
-      modifiedColumn,
-      options?.disableLinks,
-      options?.disableSort,
-      t,
-      user.id,
-    ]
+    [createdColumn, getPageUrl, modifiedColumn, options?.disableLinks, options?.disableSort, t]
   );
 }