@shipfox/client-runners 0.2.0

package/src/components/provisioner-token-format.test.ts

@@ -0,0 +1,96 @@
+import type {ProvisionerTokenDto} from '@shipfox/api-runners-dto';
+import {
+  formatProvisionerTokenDate,
+  formatProvisionerTokenTimestamp,
+  provisionerConnectionStatus,
+  provisionerTokenDisplayName,
+} from './provisioner-token-format.js';
+
+const token: ProvisionerTokenDto = {
+  id: '33333333-3333-4333-8333-333333333333',
+  workspace_id: '11111111-1111-4111-8111-111111111111',
+  prefix: 'sf_pt_abcde',
+  name: 'Docker provisioner',
+  created_by_user_id: '22222222-2222-4222-8222-222222222222',
+  revoked_by_user_id: null,
+  expires_at: '2026-05-09T00:00:00.000Z',
+  revoked_at: null,
+  last_seen_at: null,
+  created_at: '2026-05-08T00:00:00.000Z',
+  updated_at: '2026-05-08T00:00:00.000Z',
+};
+
+describe('provisionerTokenDisplayName', () => {
+  test('uses the token name when present', () => {
+    const result = provisionerTokenDisplayName(token);
+
+    expect(result).toBe('Docker provisioner');
+  });
+
+  test('falls back for unnamed tokens', () => {
+    const result = provisionerTokenDisplayName({...token, name: null});
+
+    expect(result).toBe('Unnamed provisioner');
+  });
+});
+
+describe('formatProvisionerTokenDate', () => {
+  test('formats timestamps as dates', () => {
+    const result = formatProvisionerTokenDate('2026-05-08T00:00:00.000Z');
+
+    expect(result).not.toBe('Never');
+    expect(result).not.toContain(':');
+  });
+
+  test('formats null as never', () => {
+    const result = formatProvisionerTokenDate(null);
+
+    expect(result).toBe('Never');
+  });
+});
+
+describe('formatProvisionerTokenTimestamp', () => {
+  test('formats timestamps with time', () => {
+    const result = formatProvisionerTokenTimestamp('2026-05-08T00:00:00.000Z');
+
+    expect(result).toContain(':');
+  });
+
+  test('formats null as undefined', () => {
+    const result = formatProvisionerTokenTimestamp(null);
+
+    expect(result).toBeUndefined();
+  });
+});
+
+describe('provisionerConnectionStatus', () => {
+  test('returns connected when the token id is active', () => {
+    const result = provisionerConnectionStatus(token, new Set([token.id]));
+
+    expect(result).toEqual({kind: 'connected', dotVariant: 'success', label: 'Connected'});
+  });
+
+  test('returns last seen when inactive with a last seen timestamp', () => {
+    const result = provisionerConnectionStatus(
+      {...token, last_seen_at: '2026-05-08T01:00:00.000Z'},
+      new Set(),
+    );
+
+    expect(result).toEqual({
+      kind: 'last-seen',
+      dotVariant: 'neutral',
+      label: 'Last seen',
+      lastSeenAt: '2026-05-08T01:00:00.000Z',
+    });
+  });
+
+  test('returns never connected when inactive with no last seen timestamp', () => {
+    const result = provisionerConnectionStatus(token, new Set());
+
+    expect(result).toEqual({
+      kind: 'never-connected',
+      dotVariant: 'neutral',
+      label: 'Never connected',
+    });
+  });
+});

package/src/components/provisioner-token-format.ts

@@ -0,0 +1,40 @@
+import type {ProvisionerTokenDto} from '@shipfox/api-runners-dto';
+import type {DotVariant} from '@shipfox/react-ui/dot';
+import {formatDate, formatTimestamp} from '@shipfox/react-ui/utils';
+
+export type ProvisionerConnectionStatus =
+  | {kind: 'connected'; dotVariant: DotVariant; label: 'Connected'}
+  | {kind: 'last-seen'; dotVariant: DotVariant; label: 'Last seen'; lastSeenAt: string}
+  | {kind: 'never-connected'; dotVariant: DotVariant; label: 'Never connected'};
+
+export function formatProvisionerTokenDate(value: string | null): string {
+  if (!value) return 'Never';
+  return formatDate(value);
+}
+
+export function formatProvisionerTokenTimestamp(value: string | null): string | undefined {
+  if (!value) return undefined;
+  return formatTimestamp(value);
+}
+
+export function provisionerTokenDisplayName(token: Pick<ProvisionerTokenDto, 'name'>): string {
+  return token.name || 'Unnamed provisioner';
+}
+
+export function provisionerConnectionStatus(
+  token: Pick<ProvisionerTokenDto, 'id' | 'last_seen_at'>,
+  activeIds: ReadonlySet<string>,
+): ProvisionerConnectionStatus {
+  if (activeIds.has(token.id)) {
+    return {kind: 'connected', dotVariant: 'success', label: 'Connected'};
+  }
+  if (token.last_seen_at) {
+    return {
+      kind: 'last-seen',
+      dotVariant: 'neutral',
+      label: 'Last seen',
+      lastSeenAt: token.last_seen_at,
+    };
+  }
+  return {kind: 'never-connected', dotVariant: 'neutral', label: 'Never connected'};
+}

package/src/components/provisioner-token-list.tsx

@@ -0,0 +1,280 @@
+import type {ProvisionerTokenDto} from '@shipfox/api-runners-dto';
+import {Button, IconButton} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {Dot} from '@shipfox/react-ui/dot';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@shipfox/react-ui/dropdown-menu';
+import {EmptyState} from '@shipfox/react-ui/empty-state';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+} from '@shipfox/react-ui/modal';
+import {RelativeTime} from '@shipfox/react-ui/relative-time';
+import {Skeleton} from '@shipfox/react-ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@shipfox/react-ui/table';
+import {Code, Text} from '@shipfox/react-ui/typography';
+import {useQueryClient} from '@tanstack/react-query';
+import {useState} from 'react';
+import {
+  provisionerTokenQueryKeys,
+  useRevokeProvisionerTokenMutation,
+} from '#hooks/api/provisioner-tokens.js';
+import {provisionerTokenErrorMessage} from './provisioner-token-errors.js';
+import {
+  formatProvisionerTokenDate,
+  formatProvisionerTokenTimestamp,
+  provisionerConnectionStatus,
+  provisionerTokenDisplayName,
+} from './provisioner-token-format.js';
+import {TokenDate} from './token-date.js';
+import {TokenName} from './token-name.js';
+
+export function ProvisionerTokenList({
+  workspaceId,
+  tokens,
+  activeIds,
+}: {
+  workspaceId: string;
+  tokens: ProvisionerTokenDto[];
+  activeIds: ReadonlySet<string>;
+}) {
+  return (
+    <>
+      <div className="max-[760px]:hidden">
+        <Table className="table-fixed">
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[28%]">Name</TableHead>
+              <TableHead>Prefix</TableHead>
+              <TableHead className="w-[18%]">Status</TableHead>
+              <TableHead className="w-112">Expires</TableHead>
+              <TableHead className="w-112">Created</TableHead>
+              <TableHead className="w-80 text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {tokens.map((token) => (
+              <TableRow key={token.id}>
+                <TableCell>
+                  <TokenName name={provisionerTokenDisplayName(token)} />
+                </TableCell>
+                <TableCell>
+                  <Code variant="paragraph" className="block truncate">
+                    {token.prefix}
+                  </Code>
+                </TableCell>
+                <TableCell>
+                  <ProvisionerStatusCell token={token} activeIds={activeIds} />
+                </TableCell>
+                <TableCell>
+                  <ProvisionerTokenDate value={token.expires_at} />
+                </TableCell>
+                <TableCell>
+                  <ProvisionerTokenDate value={token.created_at} />
+                </TableCell>
+                <TableCell className="text-right">
+                  <RevokeProvisionerTokenButton workspaceId={workspaceId} token={token} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <ul className="hidden flex-col gap-10 max-[760px]:flex" aria-label="Provisioner tokens">
+        {tokens.map((token) => (
+          <li
+            key={token.id}
+            className="rounded-8 border border-border-neutral-base bg-background-neutral-base p-14"
+          >
+            <div className="flex items-start justify-between gap-12">
+              <div className="min-w-0 flex-1">
+                <TokenName name={provisionerTokenDisplayName(token)} />
+                <Code variant="paragraph" className="block truncate text-foreground-neutral-muted">
+                  {token.prefix}
+                </Code>
+              </div>
+              <RevokeProvisionerTokenButton workspaceId={workspaceId} token={token} />
+            </div>
+            <dl className="mt-12 grid grid-cols-2 gap-10 text-sm">
+              <div>
+                <dt className="text-foreground-neutral-muted">Status</dt>
+                <dd>
+                  <ProvisionerStatusCell token={token} activeIds={activeIds} />
+                </dd>
+              </div>
+              <div>
+                <dt className="text-foreground-neutral-muted">Expires</dt>
+                <dd>
+                  <ProvisionerTokenDate value={token.expires_at} />
+                </dd>
+              </div>
+              <div>
+                <dt className="text-foreground-neutral-muted">Created</dt>
+                <dd>
+                  <ProvisionerTokenDate value={token.created_at} />
+                </dd>
+              </div>
+            </dl>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+function ProvisionerTokenDate({value}: {value: string | null}) {
+  return (
+    <TokenDate
+      value={value}
+      date={formatProvisionerTokenDate(value)}
+      timestamp={formatProvisionerTokenTimestamp(value)}
+    />
+  );
+}
+
+function ProvisionerStatusCell({
+  token,
+  activeIds,
+}: {
+  token: ProvisionerTokenDto;
+  activeIds: ReadonlySet<string>;
+}) {
+  const status = provisionerConnectionStatus(token, activeIds);
+
+  return (
+    <span className="inline-flex items-center gap-6">
+      <Dot variant={status.dotVariant} />
+      {status.kind === 'last-seen' ? (
+        <span>
+          {status.label} <RelativeTime value={status.lastSeenAt} />
+        </span>
+      ) : (
+        <span>{status.label}</span>
+      )}
+    </span>
+  );
+}
+
+function RevokeProvisionerTokenButton({
+  workspaceId,
+  token,
+}: {
+  workspaceId: string;
+  token: ProvisionerTokenDto;
+}) {
+  const queryClient = useQueryClient();
+  const revokeToken = useRevokeProvisionerTokenMutation();
+  const [open, setOpen] = useState(false);
+  const tokenName = provisionerTokenDisplayName(token);
+
+  async function handleRevoke() {
+    try {
+      await revokeToken.mutateAsync({workspaceId, tokenId: token.id});
+      await queryClient.invalidateQueries({
+        queryKey: provisionerTokenQueryKeys.list(workspaceId),
+      });
+      await queryClient.invalidateQueries({
+        queryKey: provisionerTokenQueryKeys.active(workspaceId),
+      });
+      setOpen(false);
+    } catch {
+      // React Query stores the error for the inline modal alert.
+    }
+  }
+
+  function handleOpenChange(nextOpen: boolean) {
+    setOpen(nextOpen);
+    if (nextOpen) {
+      revokeToken.reset();
+    }
+  }
+
+  function openRevokeConfirmation() {
+    revokeToken.reset();
+    setOpen(true);
+  }
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <IconButton
+            type="button"
+            size="sm"
+            variant="transparent"
+            icon="more2Line"
+            aria-label={`Open ${tokenName} token actions`}
+          />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" size="sm">
+          <DropdownMenuItem onSelect={openRevokeConfirmation}>Revoke token</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Modal open={open} onOpenChange={handleOpenChange}>
+        <ModalContent aria-describedby={undefined} className="max-w-[420px]">
+          <ModalTitle className="sr-only">Revoke token</ModalTitle>
+          <ModalHeader title="Revoke token?" />
+          <ModalBody className="gap-16">
+            <Text size="sm" className="text-foreground-neutral-muted">
+              {tokenName} will stop authenticating this provisioner. Runners it already provisioned
+              keep running until their leases expire.
+            </Text>
+            {revokeToken.isError ? (
+              <Callout role="alert" type="error">
+                <Text size="sm">{provisionerTokenErrorMessage(revokeToken.error)}</Text>
+              </Callout>
+            ) : null}
+          </ModalBody>
+          <ModalFooter>
+            <Button size="sm" variant="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              size="sm"
+              variant="danger"
+              isLoading={revokeToken.isPending}
+              onClick={handleRevoke}
+            >
+              Revoke
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+export function EmptyProvisionerTokens() {
+  return (
+    <EmptyState
+      icon="key2Line"
+      title="No usable provisioner registration tokens"
+      description="Create a token to connect a provisioner that provisions runners on demand."
+    />
+  );
+}
+
+export function ProvisionerTokenTableSkeleton() {
+  return (
+    <div role="status" aria-label="Loading provisioner tokens" className="flex flex-col gap-8">
+      {[0, 1, 2].map((row) => (
+        <Skeleton key={row} className="h-44 w-full" />
+      ))}
+    </div>
+  );
+}