refactor(account): migrate access tokens table to react [EE-4701] (#10669)

app/react/portainer/account/AccountView/AccessTokensDatatable/AccessTokensDatatable.tsx

@@ -0,0 +1,32 @@
+import { Key } from 'lucide-react';
+
+import { Datatable } from '@@/datatables';
+import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
+
+import { useAccessTokens } from '../../access-tokens/queries/useAccessTokens';
+
+import { columns } from './columns';
+import { TableActions } from './TableActions';
+
+const tableKey = 'access-tokens';
+const store = createPersistedStore(tableKey);
+
+export function AccessTokensDatatable({ canExit }: { canExit?: boolean }) {
+  const query = useAccessTokens();
+  const tableState = useTableState(store, tableKey);
+
+  return (
+    <Datatable
+      columns={columns}
+      isLoading={query.isLoading}
+      dataset={query.data || []}
+      settingsManager={tableState}
+      title="Access tokens"
+      titleIcon={Key}
+      renderTableActions={(selectedItems) => (
+        <TableActions selectedItems={selectedItems} canExit={canExit} />
+      )}
+    />
+  );
+}

app/react/portainer/account/AccountView/AccessTokensDatatable/TableActions.tsx

@@ -0,0 +1,41 @@
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { DeleteButton } from '@@/buttons/DeleteButton';
+import { AddButton } from '@@/buttons';
+
+import { AccessToken } from '../../access-tokens/types';
+
+import { useDeleteAccessTokensMutation } from './useDeleteAccessTokensMutation';
+
+export function TableActions({
+  selectedItems,
+  canExit,
+}: {
+  selectedItems: AccessToken[];
+  canExit?: boolean;
+}) {
+  const deleteMutation = useDeleteAccessTokensMutation();
+
+  return (
+    <>
+      <DeleteButton
+        disabled={selectedItems.length === 0}
+        confirmMessage="Do you want to remove the selected access token(s)? Any script or application using these tokens will no longer be able to invoke the Portainer API."
+        onConfirmed={handleRemove}
+      />
+
+      <AddButton to=".new-access-token" disabled={!canExit}>
+        Add access token
+      </AddButton>
+    </>
+  );
+
+  function handleRemove() {
+    const ids = selectedItems.map((item) => item.id);
+    deleteMutation.mutate(ids, {
+      onSuccess() {
+        notifySuccess('Success', 'Access token(s) removed');
+      },
+    });
+  }
+}

app/react/portainer/account/AccountView/AccessTokensDatatable/columns.ts

@@ -0,0 +1,24 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { isoDateFromTimestamp } from '@/portainer/filters/filters';
+
+import { AccessToken } from '../../access-tokens/types';
+
+const columnHelper = createColumnHelper<AccessToken>();
+
+export const columns = [
+  columnHelper.accessor('description', {
+    header: 'Description',
+  }),
+  columnHelper.accessor('prefix', {
+    header: 'Prefix',
+  }),
+  columnHelper.accessor('dateCreated', {
+    header: 'Created',
+    cell: ({ getValue }) => isoDateFromTimestamp(getValue()),
+  }),
+  columnHelper.accessor('lastUsed', {
+    header: 'Last Used',
+    cell: ({ getValue }) => isoDateFromTimestamp(getValue()),
+  }),
+];

app/react/portainer/account/AccountView/AccessTokensDatatable/index.ts

@@ -0,0 +1 @@
+export { AccessTokensDatatable } from './AccessTokensDatatable';

app/react/portainer/account/AccountView/AccessTokensDatatable/useDeleteAccessTokensMutation.ts

@@ -0,0 +1,40 @@
+import { useMutation, useQueryClient } from 'react-query';
+
+import { withError, withInvalidate } from '@/react-tools/react-query';
+import { useCurrentUser } from '@/react/hooks/useUser';
+import { promiseSequence } from '@/portainer/helpers/promise-utils';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { AccessToken } from '../../access-tokens/types';
+import { buildUrl } from '../../access-tokens/queries/build-url';
+import { queryKeys } from '../../access-tokens/queries/query-keys';
+
+export function useDeleteAccessTokensMutation() {
+  const { user } = useCurrentUser();
+
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (ids: Array<AccessToken['id']>) =>
+      deleteAccessTokens(user.Id, ids),
+    ...withError('Failed to delete access tokens'),
+    ...withInvalidate(queryClient, [queryKeys.base(user.Id)]),
+  });
+}
+
+async function deleteAccessTokens(
+  userId: number,
+  tokenIds: Array<AccessToken['id']>
+) {
+  return promiseSequence(
+    tokenIds.map((tokenId) => () => deleteAccessToken(userId, tokenId))
+  );
+}
+
+async function deleteAccessToken(userId: number, id: AccessToken['id']) {
+  try {
+    await axios.delete(buildUrl(userId, id));
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to delete access token');
+  }
+}

app/react/portainer/account/access-tokens/queries/build-url.ts

@@ -0,0 +1,8 @@
+import { UserId } from '@/portainer/users/types';
+
+import { AccessToken } from '../types';
+
+export function buildUrl(userId: UserId, id?: AccessToken['id']) {
+  const baseUrl = `/users/${userId}/tokens`;
+  return id ? `${baseUrl}/${id}` : baseUrl;
+}

app/react/portainer/account/access-tokens/queries/query-keys.ts

@@ -0,0 +1,6 @@
+import { userQueryKeys } from '@/portainer/users/queries/queryKeys';
+import { UserId } from '@/portainer/users/types';
+
+export const queryKeys = {
+  base: (userId: UserId) => [...userQueryKeys.user(userId), 'tokens'] as const,
+};

app/react/portainer/account/access-tokens/queries/useAccessTokens.ts

@@ -0,0 +1,27 @@
+import { useQuery } from 'react-query';
+
+import { useCurrentUser } from '@/react/hooks/useUser';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { AccessToken } from '../types';
+
+import { queryKeys } from './query-keys';
+import { buildUrl } from './build-url';
+
+export function useAccessTokens() {
+  const { user } = useCurrentUser();
+
+  return useQuery({
+    queryKey: queryKeys.base(user.Id),
+    queryFn: () => getAccessTokens(user.Id),
+  });
+}
+
+async function getAccessTokens(userId: number) {
+  try {
+    const { data } = await axios.get<Array<AccessToken>>(buildUrl(userId));
+    return data;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to get access tokens');
+  }
+}

app/react/portainer/account/access-tokens/types.ts

@@ -0,0 +1,22 @@
+/**
+ * AccessToken represents an API key
+ */
+export interface AccessToken {
+  id: number;
+
+  userId: number;
+
+  description: string;
+
+  /** API key identifier (7 char prefix) */
+  prefix: string;
+
+  /** Unix timestamp (UTC) when the API key was created */
+  dateCreated: number;
+
+  /** Unix timestamp (UTC) when the API key was last used */
+  lastUsed: number;
+
+  /** Digest represents SHA256 hash of the raw API key */
+  digest?: string;
+}