@shipfox/client-runners 0.2.0

package/src/components/token-settings-sections.stories.tsx

@@ -0,0 +1,360 @@
+import type {ManualRegistrationTokenDto, ProvisionerTokenDto} from '@shipfox/api-runners-dto';
+import {configureApiClient} from '@shipfox/client-api';
+import {RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
+import {Toaster} from '@shipfox/react-ui/toast';
+import {Code} from '@shipfox/react-ui/typography';
+import type {Decorator, Meta, StoryObj} from '@storybook/react';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import type {ReactNode} from 'react';
+import {within} from 'storybook/test';
+import {CreatedManualRegistrationTokenPanel} from './create-manual-registration-token-form.js';
+import {CreatedProvisionerTokenPanel} from './create-provisioner-token-form.js';
+import {
+  EmptyManualRegistrationTokens,
+  ManualRegistrationTokenList,
+  ManualRegistrationTokenTableSkeleton,
+} from './manual-registration-token-list.js';
+import {WorkspaceManualRegistrationTokensSettingsSection} from './manual-registration-tokens-settings-section.js';
+import {
+  EmptyProvisionerTokens,
+  ProvisionerTokenList,
+  ProvisionerTokenTableSkeleton,
+} from './provisioner-token-list.js';
+import {WorkspaceProvisionerTokensSettingsSection} from './provisioner-tokens-settings-section.js';
+
+const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+const NOW = '2026-06-26T12:00:00.000Z';
+const EIGHT_MINUTES_AGO = '2026-06-26T11:52:00.000Z';
+const EXPIRES_AT = '2026-09-24T12:00:00.000Z';
+const CREATED_AT = '2026-06-20T12:00:00.000Z';
+
+type Scenario = 'populated' | 'empty' | 'loading' | 'errors';
+
+interface TokenSettingsSectionsStoryProps {
+  scenario: Scenario;
+}
+
+const withQueryClient: Decorator = (Story) => {
+  const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}});
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RelativeTimeProvider>
+        <Story />
+      </RelativeTimeProvider>
+      <Toaster />
+    </QueryClientProvider>
+  );
+};
+
+function TokenSettingsSectionsStory({scenario}: TokenSettingsSectionsStoryProps) {
+  configureApiClient({
+    baseUrl: 'https://api.example.test',
+    fetchImpl: fetchForScenario(scenario),
+  });
+
+  return (
+    <StorySurface>
+      <WorkspaceManualRegistrationTokensSettingsSection workspaceId={WORKSPACE_ID} />
+      <WorkspaceProvisionerTokensSettingsSection workspaceId={WORKSPACE_ID} />
+    </StorySurface>
+  );
+}
+
+const meta = {
+  title: 'Runners/TokenSettingsSections',
+  component: TokenSettingsSectionsStory,
+  parameters: {layout: 'fullscreen'},
+  decorators: [withQueryClient],
+  args: {scenario: 'populated'},
+} satisfies Meta<typeof TokenSettingsSectionsStory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await canvas.findAllByText('Deploy runner');
+    await canvas.findAllByText('Docker autoscaler');
+    await canvas.findAllByText('Connected');
+    await canvas.findAllByText('Never connected');
+  },
+};
+
+export const DataStates: Story = {
+  render: () => (
+    <StorySurface>
+      <StateExample label="Manual empty">
+        <EmptyManualRegistrationTokens />
+      </StateExample>
+      <StateExample label="Manual loading">
+        <ManualRegistrationTokenTableSkeleton />
+      </StateExample>
+      <StateExample label="Provisioner empty">
+        <EmptyProvisionerTokens />
+      </StateExample>
+      <StateExample label="Provisioner loading">
+        <ProvisionerTokenTableSkeleton />
+      </StateExample>
+    </StorySurface>
+  ),
+};
+
+export const Errors: Story = {
+  args: {scenario: 'errors'},
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("Couldn't load manual registration tokens");
+    await canvas.findByText("Couldn't load provisioner registration tokens");
+  },
+};
+
+export const Statuses: Story = {
+  render: () => (
+    <StorySurface>
+      <ProvisionerTokenList
+        workspaceId={WORKSPACE_ID}
+        tokens={[
+          provisionerToken({
+            id: '33333333-3333-4333-8333-333333333333',
+            name: 'Docker autoscaler',
+            last_seen_at: NOW,
+          }),
+          provisionerToken({
+            id: '44444444-4444-4444-8444-444444444444',
+            name: 'Kubernetes spot pool',
+            last_seen_at: EIGHT_MINUTES_AGO,
+          }),
+          provisionerToken({
+            id: '55555555-5555-4555-8555-555555555555',
+            name: 'Buildkite migration pool',
+            last_seen_at: null,
+          }),
+        ]}
+        activeIds={new Set(['33333333-3333-4333-8333-333333333333'])}
+      />
+    </StorySurface>
+  ),
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    await canvas.findAllByText('Connected');
+    await canvas.findAllByText('Last seen');
+    await canvas.findAllByText('Never connected');
+  },
+};
+
+export const Content: Story = {
+  render: () => (
+    <StorySurface>
+      <StateExample label="Existing tokens">
+        <div className="flex flex-col gap-24">
+          <ManualRegistrationTokenList
+            workspaceId={WORKSPACE_ID}
+            tokens={[
+              manualToken({name: 'Deploy runner', prefix: 'sf_mrt_deploy'}),
+              manualToken({
+                id: '66666666-6666-4666-8666-666666666666',
+                name: 'macOS build host',
+                prefix: 'sf_mrt_macos',
+                expires_at: null,
+              }),
+            ]}
+          />
+          <ProvisionerTokenList
+            workspaceId={WORKSPACE_ID}
+            tokens={provisionerTokens()}
+            activeIds={new Set(['33333333-3333-4333-8333-333333333333'])}
+          />
+        </div>
+      </StateExample>
+      <StateExample label="Long names">
+        <div className="flex flex-col gap-24">
+          <ManualRegistrationTokenList
+            workspaceId={WORKSPACE_ID}
+            tokens={[
+              manualToken({
+                name: 'self-hosted-runner-for-production-release-candidate-validation-on-metal',
+                prefix: 'sf_mrt_release_candidate_validation',
+              }),
+            ]}
+          />
+          <ProvisionerTokenList
+            workspaceId={WORKSPACE_ID}
+            tokens={[
+              provisionerToken({
+                name: 'docker-provisioner-for-west-coast-gpu-burst-capacity-and-fallback',
+                prefix: 'sf_pt_west_coast_gpu_burst',
+                last_seen_at: EIGHT_MINUTES_AGO,
+              }),
+            ]}
+            activeIds={new Set()}
+          />
+        </div>
+      </StateExample>
+    </StorySurface>
+  ),
+};
+
+export const CreatedTokenPanels: Story = {
+  render: () => (
+    <StorySurface>
+      <StateExample label="Manual token reveal">
+        <CreatedManualRegistrationTokenPanel
+          token={{
+            id: '77777777-7777-4777-8777-777777777777',
+            raw_token: 'sf_mrt_4nJvNrs23ExampleManualTokenValue',
+            prefix: 'sf_mrt_4nJv',
+            name: 'Deploy runner',
+            workspace_id: WORKSPACE_ID,
+            expires_at: EXPIRES_AT,
+            created_at: CREATED_AT,
+          }}
+        />
+      </StateExample>
+      <StateExample label="Provisioner token reveal">
+        <CreatedProvisionerTokenPanel
+          token={{
+            ...provisionerToken({name: 'Docker autoscaler'}),
+            raw_token: 'sf_pt_Rv8YwrExampleProvisionerTokenValue',
+          }}
+        />
+      </StateExample>
+    </StorySurface>
+  ),
+};
+
+function StorySurface({children}: {children: ReactNode}) {
+  return (
+    <div className="min-h-screen bg-background-neutral-background p-24">
+      <div className="mx-auto flex w-full max-w-[920px] flex-col gap-32">{children}</div>
+    </div>
+  );
+}
+
+function StateExample({label, children}: {label: string; children: ReactNode}) {
+  return (
+    <div className="flex flex-col gap-8">
+      <Code variant="label" className="text-foreground-neutral-subtle">
+        {label}
+      </Code>
+      <div className="rounded-8 border border-border-neutral-base bg-background-neutral-base p-16">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function fetchForScenario(scenario: Scenario): typeof fetch {
+  return (input) => {
+    const url = requestUrl(input);
+    if (scenario === 'loading') return new Promise<Response>(() => undefined);
+    if (url.pathname.endsWith('/runners/manual-registration-tokens')) {
+      if (scenario === 'errors') return Promise.resolve(errorResponse());
+      return Promise.resolve(
+        jsonResponse({
+          manual_registration_tokens: scenario === 'empty' ? [] : [manualToken()],
+        }),
+      );
+    }
+    if (url.pathname.endsWith('/provisioners/tokens')) {
+      if (scenario === 'errors') return Promise.resolve(errorResponse());
+      return Promise.resolve(
+        jsonResponse({
+          tokens: scenario === 'empty' ? [] : provisionerTokens(),
+        }),
+      );
+    }
+    if (url.pathname.endsWith('/provisioners/active')) {
+      return Promise.resolve(
+        jsonResponse({
+          provisioners:
+            scenario === 'empty'
+              ? []
+              : [
+                  {
+                    id: '33333333-3333-4333-8333-333333333333',
+                    name: 'Docker autoscaler',
+                    prefix: 'sf_pt_docker',
+                    last_seen_at: NOW,
+                  },
+                ],
+        }),
+      );
+    }
+    return Promise.resolve(jsonResponse({}, {status: 404}));
+  };
+}
+
+function provisionerTokens(): ProvisionerTokenDto[] {
+  return [
+    provisionerToken({
+      id: '33333333-3333-4333-8333-333333333333',
+      name: 'Docker autoscaler',
+      prefix: 'sf_pt_docker',
+      last_seen_at: NOW,
+    }),
+    provisionerToken({
+      id: '44444444-4444-4444-8444-444444444444',
+      name: 'Kubernetes spot pool',
+      prefix: 'sf_pt_spot',
+      last_seen_at: EIGHT_MINUTES_AGO,
+    }),
+    provisionerToken({
+      id: '55555555-5555-4555-8555-555555555555',
+      name: 'Buildkite migration pool',
+      prefix: 'sf_pt_migrate',
+      last_seen_at: null,
+    }),
+  ];
+}
+
+function manualToken(
+  overrides: Partial<ManualRegistrationTokenDto> = {},
+): ManualRegistrationTokenDto {
+  return {
+    id: '22222222-2222-4222-8222-222222222222',
+    workspace_id: WORKSPACE_ID,
+    prefix: 'sf_mrt_deploy',
+    name: 'Deploy runner',
+    expires_at: EXPIRES_AT,
+    revoked_at: null,
+    created_at: CREATED_AT,
+    updated_at: CREATED_AT,
+    ...overrides,
+  };
+}
+
+function provisionerToken(overrides: Partial<ProvisionerTokenDto> = {}): ProvisionerTokenDto {
+  return {
+    id: '33333333-3333-4333-8333-333333333333',
+    workspace_id: WORKSPACE_ID,
+    prefix: 'sf_pt_docker',
+    name: 'Docker autoscaler',
+    created_by_user_id: '99999999-9999-4999-8999-999999999999',
+    revoked_by_user_id: null,
+    expires_at: EXPIRES_AT,
+    revoked_at: null,
+    last_seen_at: NOW,
+    created_at: CREATED_AT,
+    updated_at: CREATED_AT,
+    ...overrides,
+  };
+}
+
+function requestUrl(input: RequestInfo | URL): URL {
+  if (typeof input === 'string') return new URL(input);
+  if (input instanceof URL) return input;
+  return new URL(input.url);
+}
+
+function jsonResponse(body: unknown, init: ResponseInit = {}) {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: {'content-type': 'application/json'},
+    ...init,
+  });
+}
+
+function errorResponse() {
+  return jsonResponse({code: 'server-error'}, {status: 500, statusText: 'Server error'});
+}

package/src/hooks/api/manual-registration-tokens.test.ts

@@ -0,0 +1,87 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {
+  createManualRegistrationToken,
+  revokeManualRegistrationToken,
+} from './manual-registration-tokens.js';
+
+function jsonResponse(body: unknown, init: ResponseInit = {}): Response {
+  return new Response(JSON.stringify(body), {
+    headers: {'content-type': 'application/json'},
+    status: 200,
+    ...init,
+  });
+}
+
+describe('createManualRegistrationToken', () => {
+  beforeEach(() => {
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl: undefined});
+  });
+
+  test('posts token creation body', async () => {
+    let requestBody: unknown;
+    const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
+      requestBody = await (input as Request).clone().json();
+      return jsonResponse(
+        {
+          id: '44444444-4444-4444-8444-444444444444',
+          raw_token: 'sf_mrt_raw-created-token',
+          prefix: 'sf_mrt_raw-c',
+          name: 'Local runner',
+          workspace_id: '11111111-1111-4111-8111-111111111111',
+          expires_at: '2026-05-09T00:00:00.000Z',
+          created_at: '2026-05-08T00:00:00.000Z',
+        },
+        {status: 201},
+      );
+    });
+    configureApiClient({fetchImpl});
+    const body = {name: 'Local runner', ttl_seconds: 86_400};
+
+    const result = await createManualRegistrationToken({
+      workspaceId: '11111111-1111-4111-8111-111111111111',
+      body,
+    });
+
+    const request = fetchImpl.mock.calls[0]?.[0] as Request;
+    expect(result.raw_token).toBe('sf_mrt_raw-created-token');
+    expect(request.url).toBe(
+      'https://api.example.test/workspaces/11111111-1111-4111-8111-111111111111/runners/manual-registration-tokens',
+    );
+    expect(request.method).toBe('POST');
+    expect(requestBody).toEqual(body);
+  });
+});
+
+describe('revokeManualRegistrationToken', () => {
+  beforeEach(() => {
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl: undefined});
+  });
+
+  test('posts to the token revoke endpoint', async () => {
+    const fetchImpl = vi.fn().mockResolvedValue(
+      jsonResponse({
+        id: '33333333-3333-4333-8333-333333333333',
+        workspace_id: '11111111-1111-4111-8111-111111111111',
+        prefix: 'sf_mrt_abcde',
+        name: 'Deploy runner',
+        expires_at: '2026-05-09T00:00:00.000Z',
+        revoked_at: '2026-05-08T01:00:00.000Z',
+        created_at: '2026-05-08T00:00:00.000Z',
+        updated_at: '2026-05-08T01:00:00.000Z',
+      }),
+    );
+    configureApiClient({fetchImpl});
+
+    const result = await revokeManualRegistrationToken({
+      workspaceId: '11111111-1111-4111-8111-111111111111',
+      tokenId: '33333333-3333-4333-8333-333333333333',
+    });
+
+    const request = fetchImpl.mock.calls[0]?.[0] as Request;
+    expect(result.revoked_at).toBe('2026-05-08T01:00:00.000Z');
+    expect(request.url).toBe(
+      'https://api.example.test/workspaces/11111111-1111-4111-8111-111111111111/runners/manual-registration-tokens/33333333-3333-4333-8333-333333333333/revoke',
+    );
+    expect(request.method).toBe('POST');
+  });
+});

package/src/hooks/api/manual-registration-tokens.ts

@@ -0,0 +1,71 @@
+import type {
+  CreateManualRegistrationTokenBodyDto,
+  CreateManualRegistrationTokenResponseDto,
+  ListManualRegistrationTokensResponseDto,
+  RevokeManualRegistrationTokenResponseDto,
+} from '@shipfox/api-runners-dto';
+import {apiRequest} from '@shipfox/client-api';
+import {useMutation, useQuery} from '@tanstack/react-query';
+
+export const manualRegistrationTokenQueryKeys = {
+  all: ['manual-registration-tokens'] as const,
+  list: (workspaceId: string) =>
+    [...manualRegistrationTokenQueryKeys.all, 'list', workspaceId] as const,
+};
+
+export async function listManualRegistrationTokens({
+  workspaceId,
+  signal,
+}: {
+  workspaceId: string;
+  signal?: AbortSignal;
+}) {
+  return await apiRequest<ListManualRegistrationTokensResponseDto>(
+    `/workspaces/${workspaceId}/runners/manual-registration-tokens`,
+    {signal},
+  );
+}
+
+export async function createManualRegistrationToken({
+  workspaceId,
+  body,
+}: {
+  workspaceId: string;
+  body: CreateManualRegistrationTokenBodyDto;
+}) {
+  return await apiRequest<CreateManualRegistrationTokenResponseDto>(
+    `/workspaces/${workspaceId}/runners/manual-registration-tokens`,
+    {method: 'POST', body},
+  );
+}
+
+export async function revokeManualRegistrationToken({
+  workspaceId,
+  tokenId,
+}: {
+  workspaceId: string;
+  tokenId: string;
+}) {
+  return await apiRequest<RevokeManualRegistrationTokenResponseDto>(
+    `/workspaces/${workspaceId}/runners/manual-registration-tokens/${tokenId}/revoke`,
+    {method: 'POST'},
+  );
+}
+
+export function useManualRegistrationTokensQuery(workspaceId: string | undefined) {
+  return useQuery({
+    queryKey: workspaceId
+      ? manualRegistrationTokenQueryKeys.list(workspaceId)
+      : [...manualRegistrationTokenQueryKeys.all, 'list'],
+    enabled: Boolean(workspaceId),
+    queryFn: ({signal}) => listManualRegistrationTokens({workspaceId: workspaceId ?? '', signal}),
+  });
+}
+
+export function useCreateManualRegistrationTokenMutation() {
+  return useMutation({mutationFn: createManualRegistrationToken});
+}
+
+export function useRevokeManualRegistrationTokenMutation() {
+  return useMutation({mutationFn: revokeManualRegistrationToken});
+}

package/src/hooks/api/provisioner-tokens.test.ts

@@ -0,0 +1,127 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {
+  createProvisionerToken,
+  listActiveProvisioners,
+  listProvisionerTokens,
+  revokeProvisionerToken,
+} from './provisioner-tokens.js';
+
+function jsonResponse(body: unknown, init: ResponseInit = {}): Response {
+  return new Response(JSON.stringify(body), {
+    headers: {'content-type': 'application/json'},
+    status: 200,
+    ...init,
+  });
+}
+
+const workspaceId = '11111111-1111-4111-8111-111111111111';
+const tokenId = '33333333-3333-4333-8333-333333333333';
+
+describe('provisioner token transports', () => {
+  beforeEach(() => {
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl: undefined});
+  });
+
+  test('lists provisioner tokens', async () => {
+    const fetchImpl = vi.fn().mockResolvedValue(jsonResponse({tokens: []}));
+    configureApiClient({fetchImpl});
+
+    const result = await listProvisionerTokens({workspaceId});
+
+    const request = fetchImpl.mock.calls[0]?.[0] as Request;
+    expect(result.tokens).toEqual([]);
+    expect(request.url).toBe(
+      `https://api.example.test/workspaces/${workspaceId}/provisioners/tokens`,
+    );
+    expect(request.method).toBe('GET');
+  });
+
+  test('posts token creation body', async () => {
+    let requestBody: unknown;
+    const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
+      requestBody = await (input as Request).clone().json();
+      return jsonResponse(
+        {
+          id: tokenId,
+          raw_token: 'sf_pt_raw-created-token',
+          prefix: 'sf_pt_raw-c',
+          name: 'Docker provisioner',
+          workspace_id: workspaceId,
+          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',
+        },
+        {status: 201},
+      );
+    });
+    configureApiClient({fetchImpl});
+    const body = {name: 'Docker provisioner', ttl_seconds: 86_400};
+
+    const result = await createProvisionerToken({workspaceId, body});
+
+    const request = fetchImpl.mock.calls[0]?.[0] as Request;
+    expect(result.raw_token).toBe('sf_pt_raw-created-token');
+    expect(request.url).toBe(
+      `https://api.example.test/workspaces/${workspaceId}/provisioners/tokens`,
+    );
+    expect(request.method).toBe('POST');
+    expect(requestBody).toEqual(body);
+  });
+
+  test('posts to the token revoke endpoint', async () => {
+    const fetchImpl = vi.fn().mockResolvedValue(
+      jsonResponse({
+        id: tokenId,
+        workspace_id: workspaceId,
+        prefix: 'sf_pt_abcde',
+        name: 'Docker provisioner',
+        created_by_user_id: '22222222-2222-4222-8222-222222222222',
+        revoked_by_user_id: '22222222-2222-4222-8222-222222222222',
+        expires_at: '2026-05-09T00:00:00.000Z',
+        revoked_at: '2026-05-08T01:00:00.000Z',
+        last_seen_at: null,
+        created_at: '2026-05-08T00:00:00.000Z',
+        updated_at: '2026-05-08T01:00:00.000Z',
+      }),
+    );
+    configureApiClient({fetchImpl});
+
+    const result = await revokeProvisionerToken({workspaceId, tokenId});
+
+    const request = fetchImpl.mock.calls[0]?.[0] as Request;
+    expect(result.revoked_at).toBe('2026-05-08T01:00:00.000Z');
+    expect(request.url).toBe(
+      `https://api.example.test/workspaces/${workspaceId}/provisioners/tokens/${tokenId}/revoke`,
+    );
+    expect(request.method).toBe('POST');
+  });
+
+  test('lists active provisioners', async () => {
+    const fetchImpl = vi.fn().mockResolvedValue(
+      jsonResponse({
+        provisioners: [
+          {
+            id: tokenId,
+            name: 'Docker provisioner',
+            prefix: 'sf_pt_abcde',
+            last_seen_at: '2026-05-08T01:00:00.000Z',
+          },
+        ],
+      }),
+    );
+    configureApiClient({fetchImpl});
+
+    const result = await listActiveProvisioners({workspaceId});
+
+    const request = fetchImpl.mock.calls[0]?.[0] as Request;
+    expect(result.provisioners).toHaveLength(1);
+    expect(request.url).toBe(
+      `https://api.example.test/workspaces/${workspaceId}/provisioners/active`,
+    );
+    expect(request.method).toBe('GET');
+  });
+});