Refactor API token display (#9168)

* Refactor API token display

* Tweaks

- Fix accessor ID
- Add filtering

* Revert ordering fields

src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx

@@ -23,18 +23,23 @@ import { hideNotification, showNotification } from '@mantine/notifications';
 import {
   IconAlertCircle,
   IconAt,
+  IconCircleX,
   IconExclamationCircle,
   IconX
 } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { api } from '../../../../App';
-import { YesNoButton } from '../../../../components/buttons/YesNoButton';
 import { StylishText } from '../../../../components/items/StylishText';
 import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
 import { ProviderLogin, authApi } from '../../../../functions/auth';
+import { showApiErrorMessage } from '../../../../functions/notifications';
+import { useTable } from '../../../../hooks/UseTable';
 import { apiUrl, useServerApiState } from '../../../../states/ApiState';
 import type { AuthConfig, Provider } from '../../../../states/states';
+import { BooleanColumn } from '../../../../tables/ColumnRenderers';
+import { InvenTreeTable } from '../../../../tables/InvenTreeTable';
+import type { RowAction } from '../../../../tables/RowActions';
 import { QrRegistrationForm } from './QrRegistrationForm';
 import { useReauth } from './useConfirm';
 
@@ -710,83 +715,66 @@ async function runActionWithFallback(
 }
 
 function TokenSection() {
-  const { isLoading, data, refetch } = useQuery({
+  const table = useTable('api-tokens', 'id');
-    queryKey: ['token-list'],
-    queryFn: () =>
-      api.get(apiUrl(ApiEndpoints.user_tokens)).then((res) => res.data)
-  });
 
-  function revokeToken(id: string) {
+  const tableColumns = useMemo(() => {
+    return [
+      {
+        accessor: 'name'
+      },
+      BooleanColumn({
+        accessor: 'active'
+      }),
+      {
+        accessor: 'token'
+      },
+      {
+        accessor: 'last_seen'
+      },
+      {
+        accessor: 'expiry'
+      }
+    ];
+  }, []);
+
+  const rowActions = useCallback((record: any): RowAction[] => {
+    return [
+      {
+        title: t`Revoke`,
+        color: 'red',
+        hidden: !record.active || record.in_use,
+        icon: <IconCircleX />,
+        onClick: () => {
+          revokeToken(record.id);
+        }
+      }
+    ];
+  }, []);
+
+  const revokeToken = async (id: string) => {
     api
       .delete(apiUrl(ApiEndpoints.user_tokens, id))
       .then(() => {
-        refetch();
+        table.refreshTable();
       })
-      .catch((res) => console.log(res.data));
+      .catch((error) => {
-  }
+        showApiErrorMessage({
-
+          error: error,
-  const rows = useMemo(() => {
+          title: t`Error revoking token`
-    if (isLoading || !data) return null;
+        });
-    return data.map((token: any) => (
+      });
-      <Table.Tr key={token.id}>
+  };
-        <Table.Td>
-          <YesNoButton value={token.active} />
-        </Table.Td>
-        <Table.Td>{token.expiry}</Table.Td>
-        <Table.Td>{token.last_seen}</Table.Td>
-        <Table.Td>{token.token}</Table.Td>
-        <Table.Td>{token.name}</Table.Td>
-        <Table.Td>
-          {token.in_use ? (
-            <Trans>Token is used - no actions</Trans>
-          ) : (
-            <Button
-              onClick={() => revokeToken(token.id)}
-              color='red'
-              disabled={!token.active}
-            >
-              <Trans>Revoke</Trans>
-            </Button>
-          )}
-        </Table.Td>
-      </Table.Tr>
-    ));
-  }, [data, isLoading]);
-
-  if (isLoading) return <Loader />;
-
-  if (data.length == 0)
-    return (
-      <Alert icon={<IconAlertCircle size='1rem' />} color='green'>
-        <Trans>No tokens configured</Trans>
-      </Alert>
-    );
 
   return (
-    <Table stickyHeader striped highlightOnHover withTableBorder>
+    <InvenTreeTable
-      <Table.Thead>
+      tableState={table}
-        <Table.Tr>
+      url={apiUrl(ApiEndpoints.user_tokens)}
-          <Table.Th>
+      columns={tableColumns}
-            <Trans>Active</Trans>
+      props={{
-          </Table.Th>
+        rowActions: rowActions,
-          <Table.Th>
+        enableSearch: false,
-            <Trans>Expiry</Trans>
+        enableColumnSwitching: false
-          </Table.Th>
+      }}
-          <Table.Th>
+    />
-            <Trans>Last Seen</Trans>
-          </Table.Th>
-          <Table.Th>
-            <Trans>Token</Trans>
-          </Table.Th>
-          <Table.Th>
-            <Trans>Name</Trans>
-          </Table.Th>
-          <Table.Th>
-            <Trans>Actions</Trans>
-          </Table.Th>
-        </Table.Tr>
-      </Table.Thead>
-      <Table.Tbody>{rows}</Table.Tbody>
-    </Table>
   );
 }