Fix/decouple api token list (#3171)

Decouples the API token list and adds tracking.

frontend/src/component/admin/Admin.tsx

@@ -1,5 +1,5 @@
 import { Routes, Route } from 'react-router-dom';
-import { ApiPage } from './api';
+import { ApiTokenPage } from './apiToken/ApiTokenPage/ApiTokenPage';
 import { CreateApiToken } from './apiToken/CreateApiToken/CreateApiToken';
 import { AuthSettings } from './auth/AuthSettings';
 import { Billing } from './billing/Billing';
@@ -29,7 +29,7 @@ export const Admin = () => (
             <Route path="users" element={<UsersAdmin />} />
             <Route path="create-project-role" element={<CreateProjectRole />} />
             <Route path="roles/:id/edit" element={<EditProjectRole />} />
-            <Route path="api" element={<ApiPage />} />
+            <Route path="api" element={<ApiTokenPage />} />
             <Route path="api/create-token" element={<CreateApiToken />} />
             <Route path="users/:id/edit" element={<EditUser />} />
             <Route path="service-accounts" element={<ServiceAccounts />} />

frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx

@@ -1,19 +1,93 @@
 import { useContext } from 'react';
 import AccessContext from 'contexts/AccessContext';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { READ_API_TOKEN } from 'component/providers/AccessProvider/permissions';
+import {
+    CREATE_API_TOKEN,
+    DELETE_API_TOKEN,
+    READ_API_TOKEN,
+} from 'component/providers/AccessProvider/permissions';
 import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
-import { ApiTokenTable } from 'component/admin/apiToken/ApiTokenTable/ApiTokenTable';
+import { ApiTokenTable } from 'component/common/ApiTokenTable/ApiTokenTable';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
+import { CreateApiTokenButton } from 'component/common/ApiTokenTable/CreateApiTokenButton/CreateApiTokenButton';
+import { Search } from 'component/common/Search/Search';
+import { useApiTokenTable } from 'component/common/ApiTokenTable/useApiTokenTable';
 import { useApiTokens } from 'hooks/api/getters/useApiTokens/useApiTokens';
+import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell';
+import { CopyApiTokenButton } from 'component/common/ApiTokenTable/CopyApiTokenButton/CopyApiTokenButton';
+import { RemoveApiTokenButton } from 'component/common/ApiTokenTable/RemoveApiTokenButton/RemoveApiTokenButton';
+import useApiTokensApi from 'hooks/api/actions/useApiTokensApi/useApiTokensApi';
 
 export const ApiTokenPage = () => {
     const { hasAccess } = useContext(AccessContext);
-    const { tokens, loading } = useApiTokens();
+    const { tokens, loading, refetch } = useApiTokens();
+    const { deleteToken } = useApiTokensApi();
+
+    const {
+        getTableProps,
+        getTableBodyProps,
+        headerGroups,
+        rows,
+        prepareRow,
+        state: { globalFilter },
+        setGlobalFilter,
+        setHiddenColumns,
+        columns,
+    } = useApiTokenTable(tokens, props => (
+        <ActionCell>
+            <CopyApiTokenButton
+                token={props.row.original}
+                permission={READ_API_TOKEN}
+            />
+            <RemoveApiTokenButton
+                token={props.row.original}
+                permission={DELETE_API_TOKEN}
+                onRemove={async () => {
+                    await deleteToken(props.row.original.secret);
+                    refetch();
+                }}
+            />
+        </ActionCell>
+    ));
 
     return (
         <ConditionallyRender
             condition={hasAccess(READ_API_TOKEN)}
-            show={() => <ApiTokenTable tokens={tokens} loading={loading} />}
+            show={() => (
+                <PageContent
+                    header={
+                        <PageHeader
+                            title={`API access (${rows.length})`}
+                            actions={
+                                <>
+                                    <Search
+                                        initialValue={globalFilter}
+                                        onChange={setGlobalFilter}
+                                    />
+                                    <PageHeader.Divider />
+                                    <CreateApiTokenButton
+                                        permission={CREATE_API_TOKEN}
+                                        path="/admin/api/create-token"
+                                    />
+                                </>
+                            }
+                        />
+                    }
+                >
+                    <ApiTokenTable
+                        loading={loading}
+                        headerGroups={headerGroups}
+                        setHiddenColumns={setHiddenColumns}
+                        prepareRow={prepareRow}
+                        getTableBodyProps={getTableBodyProps}
+                        getTableProps={getTableProps}
+                        rows={rows}
+                        columns={columns}
+                        globalFilter={globalFilter}
+                    />
+                </PageContent>
+            )}
             elseShow={() => <AdminAlert />}
         />
     );