@shipfox/client-workflows 0.2.0

package/src/components/workflow-run-view/workflow-run-selection.test.ts

@@ -0,0 +1,280 @@
+import {
+  workflowJobDto,
+  workflowJobExecutionDto,
+  workflowRunDetail,
+  workflowStepAttemptDto,
+  workflowStepDto,
+} from '#test/fixtures/workflow-run.js';
+import {resolveWorkflowRunSelection} from './workflow-run-selection.js';
+
+describe('resolveWorkflowRunSelection', () => {
+  test('selects a valid job without expanding a step', () => {
+    const build = workflowJobDto({id: 'job-build', name: 'build'});
+    const deploy = workflowJobDto({id: 'job-deploy', name: 'deploy', position: 1});
+    const run = workflowRunDetail({jobs: [build, deploy]});
+
+    const resolved = resolveWorkflowRunSelection({
+      run,
+      selection: {jobId: 'job-deploy'},
+    });
+
+    expect(resolved.job?.id).toBe('job-deploy');
+    expect(resolved.step).toBeUndefined();
+    expect(resolved.attempt).toBeUndefined();
+    expect(resolved.selectedAttemptId).toBeNull();
+  });
+
+  test('selects a step owner job without an explicit job id', () => {
+    const attempt = workflowStepAttemptDto({id: 'attempt-1', step_id: 'step-deploy'});
+    const step = workflowStepDto({
+      id: 'step-deploy',
+      current_attempt: 1,
+      attempts: [attempt],
+    });
+    const run = workflowRunDetail({
+      jobs: [
+        workflowJobDto({id: 'job-build', name: 'build'}),
+        workflowJobDto({id: 'job-deploy', name: 'deploy', position: 1, steps: [step]}),
+      ],
+    });
+
+    const resolved = resolveWorkflowRunSelection({
+      run,
+      selection: {stepId: 'step-deploy'},
+    });
+
+    expect(resolved.job?.id).toBe('job-deploy');
+    expect(resolved.jobExecution?.id).toBeDefined();
+    expect(resolved.step?.id).toBe('step-deploy');
+    expect(resolved.attempt?.id).toBe('attempt-1');
+    expect(resolved.selectedAttemptId).toBe('attempt-1');
+  });
+
+  test('selects a valid job execution within the selected job', () => {
+    const firstExecution = workflowJobExecutionDto({
+      id: 'execution-1',
+      sequence: 1,
+      status: 'failed',
+    });
+    const secondExecution = workflowJobExecutionDto({
+      id: 'execution-2',
+      sequence: 2,
+      status: 'succeeded',
+    });
+    const run = workflowRunDetail({
+      jobs: [
+        workflowJobDto({
+          id: 'job-build',
+          name: 'build',
+          job_executions: [firstExecution, secondExecution],
+        }),
+      ],
+    });
+
+    const resolved = resolveWorkflowRunSelection({
+      run,
+      selection: {jobId: 'job-build', jobExecutionId: 'execution-1'},
+    });
+
+    expect(resolved.job?.id).toBe('job-build');
+    expect(resolved.jobExecution?.id).toBe('execution-1');
+    expect(resolved.step).toBeUndefined();
+    expect(resolved.selectedAttemptId).toBeNull();
+  });
+
+  test('falls back from an invalid job execution id to the running execution', () => {
+    const run = workflowRunDetail({
+      jobs: [
+        workflowJobDto({
+          id: 'job-build',
+          name: 'build',
+          job_executions: [
+            workflowJobExecutionDto({id: 'execution-1', sequence: 1, status: 'failed'}),
+            workflowJobExecutionDto({id: 'execution-2', sequence: 2, status: 'running'}),
+          ],
+        }),
+      ],
+    });
+
+    const resolved = resolveWorkflowRunSelection({
+      run,
+      selection: {jobId: 'job-build', jobExecutionId: 'missing-execution'},
+    });
+
+    expect(resolved.jobExecution?.id).toBe('execution-2');
+  });
+
+  test('defaults to the highest sequence when no execution is running', () => {
+    const run = workflowRunDetail({
+      jobs: [
+        workflowJobDto({
+          id: 'job-build',
+          name: 'build',
+          job_executions: [
+            workflowJobExecutionDto({id: 'execution-1', sequence: 1, status: 'failed'}),
+            workflowJobExecutionDto({id: 'execution-3', sequence: 3, status: 'succeeded'}),
+            workflowJobExecutionDto({id: 'execution-2', sequence: 2, status: 'cancelled'}),
+          ],
+        }),
+      ],
+    });
+
+    const resolved = resolveWorkflowRunSelection({
+      run,
+      selection: {jobId: 'job-build'},
+    });
+
+    expect(resolved.jobExecution?.id).toBe('execution-3');
+  });
+
+  test('uses the exact valid attempt id when present', () => {
+    const firstAttempt = workflowStepAttemptDto({
+      id: 'attempt-1',
+      step_id: 'step-deploy',
+      attempt: 1,
+    });
+    const secondAttempt = workflowStepAttemptDto({
+      id: 'attempt-2',
+      step_id: 'step-deploy',
+      attempt: 2,
+    });
+    const step = workflowStepDto({
+      id: 'step-deploy',
+      current_attempt: 1,
+      attempts: [firstAttempt, secondAttempt],
+    });
+    const run = workflowRunDetail({
+      jobs: [workflowJobDto({id: 'job-deploy', name: 'deploy', steps: [step]})],
+    });
+
+    const resolved = resolveWorkflowRunSelection({
+      run,
+      selection: {jobId: 'job-deploy', stepId: 'step-deploy', stepAttemptId: 'attempt-2'},
+    });
+
+    expect(resolved.attempt?.id).toBe('attempt-2');
+    expect(resolved.selectedAttemptId).toBe('attempt-2');
+  });
+
+  test('lets a valid step override a mismatched job id', () => {
+    const step = workflowStepDto({
+      id: 'step-deploy',
+      attempts: [workflowStepAttemptDto({id: 'attempt-1', step_id: 'step-deploy'})],
+    });
+    const run = workflowRunDetail({
+      jobs: [
+        workflowJobDto({id: 'job-build', name: 'build'}),
+        workflowJobDto({id: 'job-deploy', name: 'deploy', position: 1, steps: [step]}),
+      ],
+    });
+
+    const resolved = resolveWorkflowRunSelection({
+      run,
+      selection: {jobId: 'job-build', stepId: 'step-deploy'},
+    });
+
+    expect(resolved.job?.id).toBe('job-deploy');
+    expect(resolved.step?.id).toBe('step-deploy');
+  });
+
+  test('falls back from an invalid attempt id to the current attempt', () => {
+    const firstAttempt = workflowStepAttemptDto({
+      id: 'attempt-1',
+      step_id: 'step-deploy',
+      attempt: 1,
+    });
+    const secondAttempt = workflowStepAttemptDto({
+      id: 'attempt-2',
+      step_id: 'step-deploy',
+      attempt: 2,
+    });
+    const step = workflowStepDto({
+      id: 'step-deploy',
+      current_attempt: 2,
+      attempts: [firstAttempt, secondAttempt],
+    });
+    const run = workflowRunDetail({
+      jobs: [workflowJobDto({id: 'job-deploy', name: 'deploy', steps: [step]})],
+    });
+
+    const resolved = resolveWorkflowRunSelection({
+      run,
+      selection: {stepId: 'step-deploy', stepAttemptId: 'missing-attempt'},
+    });
+
+    expect(resolved.attempt?.id).toBe('attempt-2');
+    expect(resolved.selectedAttemptId).toBe('attempt-2');
+  });
+
+  test('falls back to the latest attempt when the current attempt is missing', () => {
+    const firstAttempt = workflowStepAttemptDto({
+      id: 'attempt-1',
+      step_id: 'step-deploy',
+      attempt: 1,
+      execution_order: 1,
+    });
+    const thirdAttempt = workflowStepAttemptDto({
+      id: 'attempt-3',
+      step_id: 'step-deploy',
+      attempt: 3,
+      execution_order: 3,
+    });
+    const step = workflowStepDto({
+      id: 'step-deploy',
+      current_attempt: 2,
+      attempts: [firstAttempt, thirdAttempt],
+    });
+    const run = workflowRunDetail({
+      jobs: [workflowJobDto({id: 'job-deploy', name: 'deploy', steps: [step]})],
+    });
+
+    const resolved = resolveWorkflowRunSelection({
+      run,
+      selection: {stepId: 'step-deploy'},
+    });
+
+    expect(resolved.attempt?.id).toBe('attempt-3');
+  });
+
+  test('falls back to the first job for invalid job or step ids', () => {
+    const run = workflowRunDetail({
+      jobs: [
+        workflowJobDto({id: 'job-build', name: 'build'}),
+        workflowJobDto({id: 'job-deploy', name: 'deploy', position: 1}),
+      ],
+    });
+
+    const resolved = resolveWorkflowRunSelection({
+      run,
+      selection: {jobId: 'missing-job', stepId: 'missing-step'},
+    });
+
+    expect(resolved.job?.id).toBe('job-build');
+    expect(resolved.step).toBeUndefined();
+    expect(resolved.selectedAttemptId).toBeNull();
+  });
+
+  test('handles empty runs and zero-attempt steps', () => {
+    const emptyRun = workflowRunDetail({jobs: []});
+    const zeroAttemptStep = workflowStepDto({id: 'step-empty', attempts: []});
+    const run = workflowRunDetail({
+      jobs: [workflowJobDto({id: 'job-build', name: 'build', steps: [zeroAttemptStep]})],
+    });
+
+    const emptyResolved = resolveWorkflowRunSelection({
+      run: emptyRun,
+      selection: {jobId: 'job-build'},
+    });
+    const zeroAttemptResolved = resolveWorkflowRunSelection({
+      run,
+      selection: {stepId: 'step-empty'},
+    });
+
+    expect(emptyResolved.job).toBeUndefined();
+    expect(emptyResolved.selectedAttemptId).toBeNull();
+    expect(zeroAttemptResolved.job?.id).toBe('job-build');
+    expect(zeroAttemptResolved.step?.id).toBe('step-empty');
+    expect(zeroAttemptResolved.attempt).toBeUndefined();
+    expect(zeroAttemptResolved.selectedAttemptId).toBeNull();
+  });
+});

package/src/components/workflow-run-view/workflow-run-selection.ts

@@ -0,0 +1,89 @@
+import {
+  type Job,
+  type JobExecution,
+  resolveJobExecution,
+  type Step,
+  type StepAttempt,
+  type WorkflowRunDetail,
+} from '#core/workflow-run.js';
+import type {WorkflowRunSelectionInput} from '#core/workflow-run-url-state.js';
+
+export interface ResolvedWorkflowRunSelection {
+  job: Job | undefined;
+  jobExecution: JobExecution | undefined;
+  step: Step | undefined;
+  attempt: StepAttempt | undefined;
+  selectedAttemptId: string | null;
+}
+
+export function resolveWorkflowRunSelection({
+  run,
+  selection,
+}: {
+  run: WorkflowRunDetail;
+  selection: WorkflowRunSelectionInput;
+}): ResolvedWorkflowRunSelection {
+  const jobById = new Map(run.jobs.map((job) => [job.id, job]));
+  const stepMatch = findStep(run, selection.stepId);
+
+  if (stepMatch) {
+    const attempt = resolveStepAttempt(stepMatch.step, selection.stepAttemptId);
+    return {
+      job: stepMatch.job,
+      jobExecution: stepMatch.jobExecution,
+      step: stepMatch.step,
+      attempt,
+      selectedAttemptId: attempt?.id ?? null,
+    };
+  }
+
+  const job = (selection.jobId ? jobById.get(selection.jobId) : undefined) ?? run.jobs.at(0);
+  const jobExecution = job ? resolveJobExecution(job, selection.jobExecutionId) : undefined;
+
+  return {
+    job,
+    jobExecution,
+    step: undefined,
+    attempt: undefined,
+    selectedAttemptId: null,
+  };
+}
+
+function findStep(
+  run: WorkflowRunDetail,
+  stepId: string | undefined,
+): {job: Job; jobExecution: JobExecution; step: Step} | undefined {
+  if (!stepId) return undefined;
+
+  for (const job of run.jobs) {
+    for (const jobExecution of job.jobExecutions) {
+      const step = jobExecution.steps.find((candidate) => candidate.id === stepId);
+      if (step) return {job, jobExecution, step};
+    }
+  }
+
+  return undefined;
+}
+
+function resolveStepAttempt(step: Step, attemptId: string | undefined): StepAttempt | undefined {
+  const attemptById = attemptId
+    ? step.attempts.find((attempt) => attempt.id === attemptId)
+    : undefined;
+  if (attemptById) return attemptById;
+
+  const currentAttempt = step.attempts.find((attempt) => attempt.attempt === step.currentAttempt);
+  if (currentAttempt) return currentAttempt;
+
+  return step.attempts.reduce<StepAttempt | undefined>((latest, attempt) => {
+    if (!latest) return attempt;
+    return compareAttempts(attempt, latest) > 0 ? attempt : latest;
+  }, undefined);
+}
+
+function compareAttempts(left: StepAttempt, right: StepAttempt): number {
+  return (
+    left.attempt - right.attempt ||
+    left.executionOrder - right.executionOrder ||
+    left.id.localeCompare(right.id)
+  );
+}

package/src/components/workflow-run-view/workflow-run-states.tsx

@@ -0,0 +1,70 @@
+import type {QueryLoadErrorQuery} from '@shipfox/client-ui';
+import {Button} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {EmptyState} from '@shipfox/react-ui/empty-state';
+import {Skeleton} from '@shipfox/react-ui/skeleton';
+import {Text} from '@shipfox/react-ui/typography';
+
+export function WorkflowRunSkeleton() {
+  return (
+    <section
+      aria-label="Loading workflow run"
+      className="border-b border-border-neutral-base bg-background-subtle-base px-16 py-12"
+    >
+      <div className="flex min-w-0 flex-wrap items-center gap-x-12 gap-y-8">
+        <div className="flex min-w-0 items-center gap-8">
+          <Skeleton className="size-8 rounded-full" />
+          <Skeleton className="h-24 w-180 rounded-6" />
+        </div>
+        <Skeleton className="h-24 w-88 rounded-6" />
+        <span
+          aria-hidden="true"
+          className="hidden h-20 w-px shrink-0 bg-border-neutral-base sm:block"
+        />
+        <Skeleton className="h-20 w-64 rounded-4" />
+        <Skeleton className="h-20 w-112 rounded-4" />
+        <span className="min-w-0 flex-1" />
+        <Skeleton className="h-20 w-88 rounded-4" />
+        <Skeleton className="h-20 w-88 rounded-4" />
+      </div>
+    </section>
+  );
+}
+
+export function WorkflowRunNotFound() {
+  return (
+    <EmptyState
+      icon="pulseLine"
+      title="Run not found"
+      description="This run does not exist or is no longer available."
+    />
+  );
+}
+
+/**
+ * Slim non-blocking banner shown when a background refetch fails after the run already
+ * loaded (active-run polling can hit a transient API error), so the loaded run stays on
+ * screen with an inline retry instead of being wiped by a full error placeholder.
+ */
+export function WorkflowRunStaleError({query}: {query: QueryLoadErrorQuery}) {
+  return (
+    <div className="border-b border-border-neutral-base p-8">
+      <Callout role="alert" type="error">
+        <div className="flex items-center justify-between gap-8">
+          <Text size="xs">Could not refresh this run.</Text>
+          <Button
+            type="button"
+            size="2xs"
+            variant="secondary"
+            isLoading={query.isFetching}
+            onClick={() => {
+              void query.refetch();
+            }}
+          >
+            Retry
+          </Button>
+        </div>
+      </Callout>
+    </div>
+  );
+}