@shipfox/client-workflows 0.2.0

package/src/components/workflow-run-list/workflow-run-row.tsx

@@ -0,0 +1,176 @@
+import {TriggerSourceIcon} from '@shipfox/client-triggers';
+import {RelativeTime} from '@shipfox/react-ui/relative-time';
+import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
+import {Code, Text} from '@shipfox/react-ui/typography';
+import {cn} from '@shipfox/react-ui/utils';
+import {Link} from '@tanstack/react-router';
+import {
+  useWorkflowRunDurationAccessibleLabel,
+  WorkflowRunDurationLabel,
+} from '#components/workflow-run-duration-label.js';
+import {getWorkflowStatusVisual} from '#components/workflow-status/status-visuals.js';
+import {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-icon.js';
+import type {WorkflowRunListItem} from '#core/workflow-run.js';
+import {withoutWorkflowRunSelectionSearch} from '#core/workflow-run-url-state.js';
+
+export function WorkflowRunRowList({
+  runs,
+  workspaceId,
+  projectId,
+  selectedWorkflowRunId,
+}: {
+  runs: WorkflowRunListItem[];
+  workspaceId: string;
+  projectId: string;
+  selectedWorkflowRunId?: string | undefined;
+}) {
+  return (
+    <nav aria-label="Run history">
+      <ul className="flex flex-col gap-4 p-8">
+        {runs.map((run) => (
+          <li key={run.id}>
+            <WorkflowRunRow
+              run={run}
+              workspaceId={workspaceId}
+              projectId={projectId}
+              selected={run.id === selectedWorkflowRunId}
+            />
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
+
+export function WorkflowRunRow({
+  run,
+  workspaceId,
+  projectId,
+  selected,
+}: {
+  run: WorkflowRunListItem;
+  workspaceId: string;
+  projectId: string;
+  selected: boolean;
+}) {
+  const durationLabel = useWorkflowRunDurationAccessibleLabel(run.runAttempt.displayDuration);
+  const statusLabel = getWorkflowStatusVisual(run.status).label;
+  const body = (
+    <>
+      {selected ? (
+        <span
+          aria-hidden="true"
+          className="absolute inset-y-8 left-0 w-3 rounded-full bg-border-highlights-interactive"
+        />
+      ) : null}
+
+      <div className="flex min-w-0 items-center gap-8">
+        <WorkflowStatusIcon status={run.status} size={14} />
+        <Code variant="label" bold className="truncate text-foreground-neutral-base">
+          {run.name}
+        </Code>
+      </div>
+
+      <div className="flex min-w-0 items-center gap-8">
+        {run.triggerDisplayLabel ? (
+          <TriggerLabel run={run} />
+        ) : (
+          <span className="flex min-w-0 flex-1 items-center gap-8 truncate text-foreground-neutral-muted">
+            <span aria-hidden="true" className="size-14 shrink-0" />
+            <span className="sr-only">Run updated </span>
+          </span>
+        )}
+        <span className="ml-auto flex shrink-0 items-center gap-6">
+          <WorkflowRunDurationLabel
+            duration={run.runAttempt.displayDuration}
+            className="text-foreground-neutral-disabled"
+          />
+          {durationLabel ? <RunMetadataSeparator /> : null}
+          <Code variant="label" className="shrink-0 text-foreground-neutral-disabled">
+            <RelativeTime value={run.updatedAt} />
+          </Code>
+        </span>
+      </div>
+    </>
+  );
+
+  // Optimistic manual runs (temp-<uuid>) have no detail page until the canonical row
+  // replaces them on the next poll, so they render non-interactively instead of as a link
+  // that would navigate to a workflow run id the detail route rejects.
+  if (run.isTemporary) {
+    return (
+      <div className="relative flex w-full flex-col gap-4 rounded-8 border border-transparent px-10 py-8 text-left">
+        {body}
+      </div>
+    );
+  }
+
+  const runLink = (
+    <Link
+      to="/workspaces/$wid/projects/$pid/runs/$workflowRunId"
+      params={{wid: workspaceId, pid: projectId, workflowRunId: run.id}}
+      search={
+        ((previous: Record<string, unknown>) =>
+          withoutWorkflowRunSelectionSearch(previous)) as never
+      }
+      aria-current={selected ? 'page' : undefined}
+      aria-label={[run.name, statusLabel, durationLabel, run.triggerLabel]
+        .filter((part): part is string => Boolean(part))
+        .join(', ')}
+      className={cn(
+        'group relative flex w-full flex-col gap-4 rounded-8 border border-transparent px-10 py-8 text-left transition-colors hover:bg-background-components-hover focus-visible:shadow-border-interactive-with-active focus-visible:outline-none',
+        selected && 'bg-background-components-hover',
+      )}
+    >
+      {body}
+    </Link>
+  );
+
+  return runLink;
+}
+
+function TriggerLabel({run}: {run: WorkflowRunListItem}) {
+  return (
+    <span className="flex min-w-0 flex-1 items-center">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="flex w-fit max-w-full min-w-0 items-center gap-8 rounded-6 outline-none">
+            <TriggerSourceIcon
+              provider={run.triggerProvider}
+              source={run.triggerSource}
+              aria-hidden
+              className="size-14 shrink-0 text-foreground-neutral-muted"
+            />
+            <Text as="span" size="xs" className="min-w-0 truncate text-foreground-neutral-subtle">
+              {run.triggerDisplayLabel}
+            </Text>
+          </span>
+        </TooltipTrigger>
+        <TriggerTooltip label={run.triggerLabel} />
+      </Tooltip>
+    </span>
+  );
+}
+
+function TriggerTooltip({label}: {label: string}) {
+  return (
+    <TooltipContent>
+      <Text as="span" size="xs" className="block max-w-[360px] break-words">
+        {label}
+      </Text>
+    </TooltipContent>
+  );
+}
+
+function RunMetadataSeparator() {
+  return (
+    <Code
+      as="span"
+      variant="label"
+      aria-hidden="true"
+      className="shrink-0 text-foreground-neutral-disabled"
+    >
+      ·
+    </Code>
+  );
+}

package/src/components/workflow-run-summary/index.ts

@@ -0,0 +1 @@
+export {WorkflowRunSummary} from './workflow-run-summary.js';

package/src/components/workflow-run-summary/workflow-run-attempt-switcher.test.tsx

@@ -0,0 +1,230 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {screen, waitFor, within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {workflowRunsQueryKeys} from '#hooks/api/workflow-runs.js';
+import {
+  runAttemptsResponseDto,
+  workflowRunAttemptDto,
+  workflowRunDetail,
+} from '#test/fixtures/workflow-run.js';
+import {jsonResponse, PROJECT_TEST_WID, renderProjectPage} from '#test/pages.js';
+import {WorkflowRunAttemptSwitcher} from './workflow-run-attempt-switcher.js';
+
+const ROOT_RUN_ID = '11111111-1111-4111-8111-111111111111';
+const CURRENT_RUN_ID = '22222222-2222-4222-8222-222222222222';
+const THIRD_RUN_ID = '33333333-3333-4333-8333-333333333333';
+const PROJECT_ID = '44444444-4444-4444-8444-444444444444';
+const SWITCH_ATTEMPT_PATTERN = /Switch attempt/;
+const ATTEMPT_1_PATTERN = /Attempt 1/;
+const ATTEMPT_2_PATTERN = /Attempt 2/;
+const ATTEMPT_3_PATTERN = /Attempt 3/;
+
+describe('WorkflowRunAttemptSwitcher', () => {
+  test('hides itself for a single-attempt run', async () => {
+    renderSwitcher({latestAttempt: 1});
+
+    await screen.findByTestId('attempt-switcher-test-mount');
+    expect(screen.queryByRole('button', {name: SWITCH_ATTEMPT_PATTERN})).not.toBeInTheDocument();
+  });
+
+  test('shows a loading row while attempts are loading', async () => {
+    const user = userEvent.setup();
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn(() => new Promise<Response>(() => undefined)),
+    });
+    renderSwitcher();
+
+    await user.click(await screen.findByRole('button', {name: 'Switch attempt, currently 2 of 4'}));
+
+    expect(await screen.findByText('Loading attempts...')).toBeInTheDocument();
+  });
+
+  test('shows an error row when attempts fail to load', async () => {
+    const user = userEvent.setup();
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn(() => Promise.resolve(jsonResponse({code: 'server-error'}, {status: 500}))),
+    });
+    renderSwitcher();
+
+    await user.click(await screen.findByRole('button', {name: 'Switch attempt, currently 2 of 4'}));
+
+    expect(
+      await screen.findByRole('menuitem', {name: 'Could not load attempts. Retry'}),
+    ).toBeInTheDocument();
+  });
+
+  test('lists attempts newest first, updates the max attempt, and marks the current row', async () => {
+    const user = userEvent.setup();
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn(() =>
+        Promise.resolve(
+          jsonResponse(
+            runAttemptsResponseDto({
+              attempts: [
+                workflowRunAttemptDto({
+                  id: ROOT_RUN_ID,
+                  attempt: 1,
+                  status: 'succeeded',
+                  created_at: '2026-05-07T01:00:00.000Z',
+                }),
+                workflowRunAttemptDto({
+                  id: CURRENT_RUN_ID,
+                  attempt: 2,
+                  status: 'failed',
+                  created_at: '2026-05-07T01:02:00.000Z',
+                  rerun_mode: 'all',
+                }),
+                workflowRunAttemptDto({
+                  id: THIRD_RUN_ID,
+                  attempt: 3,
+                  status: 'running',
+                  created_at: '2026-05-07T01:03:00.000Z',
+                  rerun_mode: 'failed',
+                }),
+              ],
+            }),
+          ),
+        ),
+      ),
+    });
+    renderSwitcher({latestAttempt: 2});
+
+    await user.click(await screen.findByRole('button', {name: 'Switch attempt, currently 2 of 2'}));
+
+    await waitFor(() => expect(screen.getByText('Attempt 2 of 3')).toBeInTheDocument());
+    const items = await screen.findAllByRole('menuitem');
+    expect(items.map((item) => item.textContent)).toEqual(
+      expect.arrayContaining([
+        expect.stringMatching(ATTEMPT_3_PATTERN),
+        expect.stringMatching(ATTEMPT_2_PATTERN),
+        expect.stringMatching(ATTEMPT_1_PATTERN),
+      ]),
+    );
+    expect(items[0]).toHaveTextContent('Attempt 3');
+    expect(items[1]).toHaveTextContent('Attempt 2');
+    expect(items[2]).toHaveTextContent('Attempt 1');
+    const current = screen.getByRole('menuitem', {name: ATTEMPT_2_PATTERN});
+    expect(current).toHaveAttribute('aria-current', 'page');
+    expect(current).not.toHaveClass('bg-background-highlight-base');
+    expect(within(current).getByRole('img', {name: 'Failed'})).toBeInTheDocument();
+  });
+
+  test('keeps the max attempt from dropping when cached attempts are stale', async () => {
+    const user = userEvent.setup();
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn(() =>
+        Promise.resolve(
+          jsonResponse(
+            runAttemptsResponseDto({
+              attempts: [
+                workflowRunAttemptDto({id: ROOT_RUN_ID, attempt: 1}),
+                workflowRunAttemptDto({id: CURRENT_RUN_ID, attempt: 2}),
+              ],
+            }),
+          ),
+        ),
+      ),
+    });
+    renderSwitcher({latestAttempt: 3});
+
+    await user.click(await screen.findByRole('button', {name: 'Switch attempt, currently 2 of 3'}));
+
+    await waitFor(() => expect(screen.getByText('Attempt 2 of 3')).toBeInTheDocument());
+  });
+
+  test('shows stale cached attempts with a loading row while fetching a known newer attempt', async () => {
+    const user = userEvent.setup();
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn(() => new Promise<Response>(() => undefined)),
+    });
+    const {queryClient} = renderSwitcher({latestAttempt: 3});
+    queryClient.setQueryData(
+      workflowRunsQueryKeys.attempts(CURRENT_RUN_ID),
+      runAttemptsResponseDto({
+        attempts: [
+          workflowRunAttemptDto({id: ROOT_RUN_ID, attempt: 1}),
+          workflowRunAttemptDto({id: CURRENT_RUN_ID, attempt: 2}),
+        ],
+      }),
+    );
+
+    await user.click(await screen.findByRole('button', {name: 'Switch attempt, currently 2 of 3'}));
+
+    expect(await screen.findByRole('menuitem', {name: ATTEMPT_2_PATTERN})).toBeInTheDocument();
+    expect(screen.getByRole('menuitem', {name: 'Loading attempts...'})).toBeInTheDocument();
+  });
+
+  test('links to an attempt and clears selected step search on navigation', async () => {
+    const user = userEvent.setup();
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn(() =>
+        Promise.resolve(
+          jsonResponse(
+            runAttemptsResponseDto({
+              attempts: [
+                workflowRunAttemptDto({id: ROOT_RUN_ID, attempt: 1}),
+                workflowRunAttemptDto({id: CURRENT_RUN_ID, attempt: 2}),
+              ],
+            }),
+          ),
+        ),
+      ),
+    });
+    const {router} = renderSwitcher({
+      path: `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${CURRENT_RUN_ID}?job=job-1&step=step-1&stepAttempt=attempt-1`,
+    });
+
+    await user.click(await screen.findByRole('button', {name: 'Switch attempt, currently 2 of 4'}));
+    const attemptLink = await screen.findByRole('menuitem', {name: ATTEMPT_1_PATTERN});
+
+    expect(attemptLink).toHaveAttribute(
+      'href',
+      `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${CURRENT_RUN_ID}?runAttempt=1`,
+    );
+
+    await user.click(attemptLink);
+
+    await waitFor(() =>
+      expect(router.state.location.pathname).toBe(
+        `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${CURRENT_RUN_ID}`,
+      ),
+    );
+    expect(router.state.location.search).toEqual({runAttempt: 1});
+  });
+});
+
+function renderSwitcher({
+  latestAttempt = 4,
+  path = `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${CURRENT_RUN_ID}`,
+}: {
+  latestAttempt?: number | undefined;
+  path?: string | undefined;
+} = {}) {
+  const run = workflowRunDetail({
+    id: CURRENT_RUN_ID,
+    current_attempt: 2,
+    latest_attempt: latestAttempt,
+    run_attempt: workflowRunAttemptDto({
+      id: CURRENT_RUN_ID,
+      workflow_run_id: CURRENT_RUN_ID,
+      attempt: 2,
+    }),
+  });
+
+  return renderProjectPage(path, () => (
+    <div data-testid="attempt-switcher-test-mount">
+      <WorkflowRunAttemptSwitcher
+        workspaceId={PROJECT_TEST_WID}
+        projectId={PROJECT_ID}
+        run={run}
+        latestAttempt={latestAttempt}
+      />
+    </div>
+  ));
+}

package/src/components/workflow-run-summary/workflow-run-attempt-switcher.tsx

@@ -0,0 +1,146 @@
+import {Button} from '@shipfox/react-ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@shipfox/react-ui/dropdown-menu';
+import {RelativeTime} from '@shipfox/react-ui/relative-time';
+import {Code, Text} from '@shipfox/react-ui/typography';
+import {cn} from '@shipfox/react-ui/utils';
+import {Link} from '@tanstack/react-router';
+import {useState} from 'react';
+import type {WorkflowRunAttempt, WorkflowRunDetail} from '#core/workflow-run.js';
+import {withoutWorkflowRunSelectionSearch} from '#core/workflow-run-url-state.js';
+import {useWorkflowRunAttemptsQuery} from '#hooks/api/workflow-runs.js';
+import {WorkflowStatusIcon} from '../workflow-status/workflow-status-icon.js';
+
+export interface WorkflowRunAttemptSwitcherProps {
+  workspaceId: string;
+  projectId: string;
+  run: WorkflowRunDetail;
+  latestAttempt: number;
+}
+
+export function WorkflowRunAttemptSwitcher({
+  workspaceId,
+  projectId,
+  run,
+  latestAttempt,
+}: WorkflowRunAttemptSwitcherProps) {
+  const [open, setOpen] = useState(false);
+  const attemptsQuery = useWorkflowRunAttemptsQuery({
+    workflowRunId: run.id,
+    enabled: open,
+  });
+
+  if (latestAttempt <= 1) return null;
+
+  const attempts = attemptsQuery.data ?? [];
+  const latestLoadedAttempt = Math.max(0, ...attempts.map((attempt) => attempt.attempt));
+  const maxAttempt = Math.max(latestAttempt, run.runAttempt.attempt, latestLoadedAttempt);
+  const isLoadingMissingAttempt =
+    attempts.length > 0 && attemptsQuery.isFetching && latestLoadedAttempt < maxAttempt;
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="transparentMuted"
+          size="2xs"
+          iconRight="arrowDownSLine"
+          aria-label={`Switch attempt, currently ${run.runAttempt.attempt} of ${maxAttempt}`}
+          className="h-20 px-4 text-foreground-neutral-muted hover:text-foreground-neutral-base"
+        >
+          <Text as="span" size="xs" className="text-inherit">
+            Attempt {run.runAttempt.attempt} of {maxAttempt}
+          </Text>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" size="lg">
+        {attemptsQuery.isPending && attempts.length === 0 ? <LoadingRow /> : null}
+        {isLoadingMissingAttempt ? <LoadingRow /> : null}
+        {attemptsQuery.isError && attempts.length === 0 ? (
+          <ErrorRow onRetry={() => void attemptsQuery.refetch()} />
+        ) : null}
+        {attempts.length > 0
+          ? [...attempts]
+              .sort((left, right) => right.attempt - left.attempt)
+              .map((attempt) => (
+                <AttemptItem
+                  key={attempt.id}
+                  attempt={attempt}
+                  current={attempt.id === run.runAttempt.id}
+                  workflowRunId={run.id}
+                  workspaceId={workspaceId}
+                  projectId={projectId}
+                />
+              ))
+          : null}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function LoadingRow() {
+  return (
+    <DropdownMenuItem disabled>
+      <Text as="span" size="sm" className="text-foreground-neutral-muted">
+        Loading attempts...
+      </Text>
+    </DropdownMenuItem>
+  );
+}
+
+function ErrorRow({onRetry}: {onRetry: () => void}) {
+  return (
+    <DropdownMenuItem closeOnSelect={false} onSelect={onRetry}>
+      <Text as="span" size="sm" className="text-foreground-highlight-error">
+        Could not load attempts. Retry
+      </Text>
+    </DropdownMenuItem>
+  );
+}
+
+function AttemptItem({
+  attempt,
+  current,
+  workflowRunId,
+  workspaceId,
+  projectId,
+}: {
+  attempt: WorkflowRunAttempt;
+  current: boolean;
+  workflowRunId: string;
+  workspaceId: string;
+  projectId: string;
+}) {
+  return (
+    <DropdownMenuItem asChild className={cn(current && 'text-foreground-neutral-base')}>
+      <Link
+        to="/workspaces/$wid/projects/$pid/runs/$workflowRunId"
+        params={{wid: workspaceId, pid: projectId, workflowRunId}}
+        search={
+          ((previous: Record<string, unknown>) => {
+            if (current) return previous;
+            return {
+              ...withoutWorkflowRunSelectionSearch(previous),
+              runAttempt: attempt.attempt,
+            };
+          }) as never
+        }
+        aria-current={current ? 'page' : undefined}
+      >
+        <WorkflowStatusIcon status={attempt.status} size={14} tooltip={false} />
+        <Code as="span" variant="label" className="min-w-0 flex-1 truncate text-inherit">
+          Attempt {attempt.attempt}
+        </Code>
+        <RelativeTime
+          value={attempt.createdAt}
+          className="shrink-0 whitespace-nowrap font-code text-xs leading-20 text-foreground-neutral-muted"
+        />
+      </Link>
+    </DropdownMenuItem>
+  );
+}