- added delete button per spec

- implemented the logic for multiple tokens deletion
- some ui changes and cleanup

ui/src/app/tokens/Tokens.tsx

@@ -9,7 +9,7 @@ import ShowTokenPanel from '~/components/tokens/ShowTokenPanel';
 import TokenForm from '~/components/tokens/TokenForm';
 import TokenTable from '~/components/tokens/TokenTable';
 import Well from '~/components/Well';
-import { deleteToken, listAuthMethods, listTokens } from '~/data/api';
+import { deleteTokens, listAuthMethods, listTokens } from '~/data/api';
 import { useError } from '~/data/hooks/error';
 import { IAuthMethod, IAuthMethodList } from '~/types/Auth';
 import {
@@ -37,7 +37,7 @@ export default function Tokens() {
 
   const [showDeleteTokenModal, setShowDeleteTokenModal] =
     useState<boolean>(false);
-  const [deletingToken, setDeletingToken] = useState<IAuthToken | null>(null);
+  const [deletingTokens, setDeletingTokens] = useState<IAuthToken[]| null>(null);
 
   const tokenFormRef = useRef(null);
 
@@ -135,16 +135,16 @@ export default function Tokens() {
         <DeletePanel
           panelMessage={
             <>
-              Are you sure you want to delete the token{' '}
+              Are you sure you want to delete the token(s)
               <span className="text-violet-500 font-medium">
-                {deletingToken?.name}
+                {deletingTokens?.map((t) => ' ' + t.name)}
               </span>
               ? This action cannot be undone.
             </>
           }
-          panelType="Token"
+          panelType="Tokens"
           setOpen={setShowDeleteTokenModal}
-          handleDelete={() => deleteToken(deletingToken?.id ?? '')} // TODO: Determine impact of blank ID param
+          handleDelete={() => deleteTokens(deletingTokens?.map((t)=> t.id) || [])}
           onSuccess={() => {
             incrementTokensVersion();
           }}
@@ -186,7 +186,7 @@ export default function Tokens() {
             {tokens && tokens.length > 0 ? (
               <TokenTable
                 tokens={tokens}
-                setDeletingToken={setDeletingToken}
+                setDeletingTokens={setDeletingTokens}
                 setShowDeleteTokenModal={setShowDeleteTokenModal}
               />
             ) : (

ui/src/components/tokens/TokenTable.tsx

@@ -15,29 +15,30 @@ import { format, parseISO } from 'date-fns';
 import React, { HTMLProps, useState } from 'react';
 import Searchbox from '~/components/Searchbox';
 import { IAuthToken } from '~/types/auth/Token';
+import Button from '~/components/forms/buttons/Button';
 
 type TokenRowActionsProps = {
   row: Row<IAuthToken>;
-  setDeletingToken: (token: IAuthToken) => void;
+  setDeletingTokens: (tokens: IAuthToken[]) => void;
   setShowDeleteTokenModal: (show: boolean) => void;
 };
 
 function TokenRowActions(props: TokenRowActionsProps) {
-  const { row, setDeletingToken, setShowDeleteTokenModal } = props;
+  const { row, setDeletingTokens, setShowDeleteTokenModal } = props;
 
-  let classes ="text-violet-600 hover:text-violet-900"
+  let className ="text-violet-600 hover:text-violet-900"
   if (row.getIsSelected()) {
-    classes = "text-gray-400 hover:cursor-not-allowed"
+    className = "text-gray-400 hover:cursor-not-allowed"
   }
 
   return (
     <a
       href="#"
-      className={classes}
+      className={className}
       onClick={(e) => {
         e.preventDefault();
         if (!row.getIsSelected()){
-          setDeletingToken(row.original);
+          setDeletingTokens([row.original]);
           setShowDeleteTokenModal(true);
         }
       }}
@@ -50,20 +51,26 @@ function TokenRowActions(props: TokenRowActionsProps) {
 
 type TokenTableProps = {
   tokens: IAuthToken[];
-  setDeletingToken: (token: IAuthToken) => void;
+  setDeletingTokens: (tokens: IAuthToken[]) => void;
   setShowDeleteTokenModal: (show: boolean) => void;
 };
 
 
 export default function TokenTable(props: TokenTableProps) {
-  const { tokens, setDeletingToken, setShowDeleteTokenModal } = props;
+  const { tokens, setDeletingTokens, setShowDeleteTokenModal } = props;
   const searchThreshold = 10;
   const [sorting, setSorting] = useState<SortingState>([]);
 
   const [filter, setFilter] = useState<string>('');
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
   const columnHelper = createColumnHelper<IAuthToken>();
 
+  const deleteMultipleTokens = (table :Table) => {
+    setDeletingTokens(table.getSelectedRowModel().rows.map((r) => r.original));
+    setShowDeleteTokenModal(true);
+  }
+
+
   const columns = [
      {
       id: 'select',
@@ -84,11 +91,16 @@ export default function TokenTable(props: TokenTableProps) {
       />,
       meta: {
         className:
-          'whitespace-nowrap py-4 pl-3 pr-4 text-left text-sm font-medium sm:pr-6'
+          'whitespace-nowrap py-4 pl-3 pr-4 text-left'
       }
     },
     columnHelper.accessor('name', {
-      header: 'Name',
+      header:  ({ table }: Table) => {
+        if (table.getSelectedRowModel().rows.length > 0){
+          return <Button onClick={(e)=> {e.stopPropagation(); deleteMultipleTokens(table)}} title='Delete'>Delete</Button>
+        }
+        return 'Name'
+      },
       cell: (info) => info.getValue(),
       meta: {
         className:
@@ -142,7 +154,7 @@ export default function TokenTable(props: TokenTableProps) {
         <TokenRowActions
           // eslint-disable-next-line react/prop-types
           row={row}
-          setDeletingToken={setDeletingToken}
+          setDeletingTokens={setDeletingTokens}
           setShowDeleteTokenModal={setShowDeleteTokenModal}
         />
       ),
@@ -153,8 +165,6 @@ export default function TokenTable(props: TokenTableProps) {
     })
   ];
 
-
-
   const table = useReactTable({
     data: tokens,
     columns,
@@ -173,12 +183,6 @@ export default function TokenTable(props: TokenTableProps) {
 
   return (
     <>
-          <button
-          onClick={() => console.info('selection', table.getSelectedRowModel().flatRows)}
-        >
-          Log `rowSelection` state
-        </button>
-
       {tokens.length >= searchThreshold && (
         <Searchbox className="mb-6" value={filter ?? ''} onChange={setFilter} />
       )}
@@ -284,7 +288,7 @@ function IndeterminateCheckbox({
     <input
       type="checkbox"
       ref={ref}
-      className={className + ' cursor-pointer'}
+      className={className + ' cursor-pointer w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500'}
       {...rest}
     />
   )

ui/src/data/api.ts

@@ -102,8 +102,8 @@ export async function createToken(values: IAuthTokenBase) {
   return post('/method/token', values, authURL);
 }
 
-export async function deleteToken(id: string) {
-  return del(`/tokens/${id}`, authURL);
+export async function deleteTokens(ids: string[]) {
+  return Promise.all(ids.map((id) => del(`/tokens/${id}`, authURL)));
 }
 
 export async function listTokens(method = 'METHOD_TOKEN') {