@shipfox/client-workflows 15.0.0 → 17.0.0

package/src/pages/project-workflows-page.tsx

@@ -66,9 +66,9 @@ function ProjectWorkflowsPageInner({projectId}: {projectId: string}) {
   }
 
   return (
-    <div className="flex w-full flex-col gap-24">
+    <div className="flex w-full flex-col gap-section">
       {projectQuery.isPending ? (
-        <div className="flex flex-col gap-12">
+        <div className="flex flex-col gap-cluster">
           <Skeleton className="h-28 w-1/3" />
           <Skeleton className="h-18 w-1/2" />
         </div>
@@ -88,7 +88,7 @@ function ProjectWorkflowsPageInner({projectId}: {projectId: string}) {
 
       {projectQuery.data ? (
         <>
-          <header className="flex flex-col gap-4">
+          <header className="flex flex-col gap-tight">
             <Header variant="h2">Workflows</Header>
             <Text size="sm" className="text-foreground-neutral-muted">
               Synced workflow definitions for this project source.
@@ -170,7 +170,7 @@ function WorkflowDefinitionsList({
 }) {
   if (isPending) {
     return (
-      <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-inline">
         <Skeleton className="h-40 w-full" />
         <Skeleton className="h-40 w-full" />
         <Skeleton className="h-40 w-full" />
@@ -228,11 +228,11 @@ function WorkflowDefinitionsList({
                     />
                   </TableCell>
                   <TableCell className="max-w-260">
-                    <div className="flex min-w-0 flex-col gap-2">
+                    <div className="flex min-w-0 flex-col gap-tight">
                       <button
                         type="button"
                         onClick={() => onOpenDefinition(definition)}
-                        className="flex min-w-0 flex-col gap-2 text-left outline-none focus-visible:shadow-border-interactive-with-active rounded-4"
+                        className="flex min-w-0 flex-col gap-tight text-left outline-none focus-visible:shadow-border-interactive-with-active rounded-4"
                       >
                         <Text size="sm" bold className="truncate">
                           {definition.name}
@@ -276,11 +276,11 @@ function WorkflowDefinitionsList({
           return (
             <div
               key={definition.id}
-              className="flex flex-col gap-10 border-b border-border-neutral-base p-12 last:border-b-0"
+              className="flex flex-col gap-inline border-b border-border-neutral-base p-panel-compact last:border-b-0"
             >
               <button
                 type="button"
-                className="flex min-w-0 items-start gap-10 text-left"
+                className="flex min-w-0 items-start gap-inline text-left"
                 onClick={() => onOpenDefinition(definition)}
               >
                 <Icon
@@ -288,7 +288,7 @@ function WorkflowDefinitionsList({
                   className="size-16 shrink-0 text-foreground-neutral-muted"
                   aria-hidden="true"
                 />
-                <div className="flex min-w-0 flex-col gap-4">
+                <div className="flex min-w-0 flex-col gap-tight">
                   <Text size="sm" bold className="break-words">
                     {definition.name}
                   </Text>
@@ -297,7 +297,7 @@ function WorkflowDefinitionsList({
                   </Code>
                 </div>
               </button>
-              <div className="flex items-center justify-between gap-8">
+              <div className="flex items-center justify-between gap-inline">
                 <Text size="xs" className="text-foreground-neutral-muted">
                   Updated <RelativeTime value={definition.updatedAt} />
                 </Text>
@@ -319,7 +319,7 @@ function WorkflowDefinitionsList({
 
       {isFetchNextPageError ? (
         <Callout role="alert" type="error">
-          <div className="flex items-center justify-between gap-12">
+          <div className="flex items-center justify-between gap-cluster">
             <Text size="sm">Could not load more workflows.</Text>
             <Button size="sm" variant="secondary" onClick={onLoadMore}>
               Retry
@@ -363,7 +363,7 @@ function WorkflowSyncAlert({sync}: {sync: DefinitionSyncSummary | null | undefin
 
   return (
     <Callout role="alert" type="error">
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-tight">
         <Text size="sm" bold>
           Workflow sync failed
         </Text>
@@ -388,11 +388,11 @@ function WorkflowSyncWarnings({sync}: {sync: DefinitionSyncSummary | null | unde
 
   return (
     <Callout role="status" type="warning">
-      <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-inline">
         <Text size="sm" bold>
           Workflow definition warnings
         </Text>
-        <ul className="flex flex-col gap-4">
+        <ul className="flex flex-col gap-tight">
           {warningItems.map(({key, warning}) => (
             <li key={key}>
               <Text size="sm">{warning.message}</Text>
@@ -436,18 +436,18 @@ function DefinitionSheet({
                 {definition.configPath ?? 'Manual workflow definition'}
               </SheetDescription>
             </SheetHeader>
-            <SheetBody className="gap-18">
-              <div className="grid w-full gap-10">
+            <SheetBody className="gap-group">
+              <div className="grid w-full gap-inline">
                 <Metadata label="Definition id" value={definition.id} />
                 <Metadata label="Source" value={definition.source} />
                 <Metadata label="Ref" value={definition.ref ?? 'Not set'} />
                 <Metadata label="SHA" value={definition.sha ?? 'Not set'} />
               </div>
-              <div className="flex w-full flex-col gap-8">
+              <div className="flex w-full flex-col gap-inline">
                 <Text size="sm" bold>
                   Normalized definition
                 </Text>
-                <pre className="max-h-[52vh] w-full overflow-auto rounded-8 border border-border-neutral-base bg-background-neutral-subtle p-12 scrollbar">
+                <pre className="max-h-[52vh] w-full overflow-auto rounded-8 border border-border-neutral-base bg-background-neutral-subtle p-panel-compact scrollbar">
                   <Code as="code" className="whitespace-pre text-foreground-neutral-base">
                     {normalizedJson}
                   </Code>
@@ -463,7 +463,7 @@ function DefinitionSheet({
 
 function Metadata({label, value}: {label: string; value: string}) {
   return (
-    <div className="min-w-0 py-12 first:pt-0 last:pb-0">
+    <div className="min-w-0 py-row first:pt-0 last:pb-0">
       <Text size="xs" className="text-foreground-neutral-muted">
         {label}
       </Text>

package/src/pages/workflow-job-detail-page.test.tsx

@@ -1,5 +1,5 @@
 import {configureApiClient} from '@shipfox/client-api';
-import {act, screen} from '@testing-library/react';
+import {act, screen, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {workflowRunsQueryKeys} from '#hooks/api/workflow-runs.js';
 import type {WorkflowJobSearch, WorkflowRunsSearch} from '#routes/inputs.js';
@@ -33,8 +33,60 @@ const BACK_TO_SUMMARY_PATTERN = /Back to run summary/;
 const RUN_MOVED_ON_PATTERN = /Run moved on to/;
 const LINT_LINK_PATTERN = /lint/;
 const RELEASE_LINK_PATTERN = /release/;
+const ANNOTATION_LINK_PATTERN = /annotation/;
+const ANNOTATIONS_LINK_PATTERN = /Annotations/;
 
 describe('WorkflowJobDetailPage', () => {
+  beforeEach(() => {
+    jobAnnotations.value = [];
+  });
+
+  test('links the job to its annotations without rendering one', async () => {
+    jobAnnotations.value = [
+      {
+        id: 'aaaaaaaa-1111-4aaa-8aaa-000000000001',
+        job_id: JOB_ID,
+        job_execution_id: EXECUTION_ID,
+        origin_step_id: STEP_ID,
+        origin_step_attempt: 2,
+        context: 'smoke check',
+        style: 'error',
+        sequence: 1,
+        body: 'Task nine failed.',
+      },
+      {
+        id: 'aaaaaaaa-1111-4aaa-8aaa-000000000002',
+        job_id: SIBLING_JOB_ID,
+        job_execution_id: EXECUTION_ID,
+        origin_step_id: STEP_ID,
+        origin_step_attempt: 1,
+        context: 'other job',
+        style: 'info',
+        sequence: 2,
+        body: 'Not this job.',
+      },
+    ];
+    configureApiClient({fetchImpl: vi.fn(jobDetailFetch)});
+
+    renderJobPath(`?jobExecution=${EXECUTION_ID}&runAttempt=1`);
+
+    const chip = await screen.findByRole('link', {
+      name: 'View 1 annotation, highest severity error',
+    });
+    expect(chip.getAttribute('href')).toContain(`tab=annotations`);
+    expect(chip.getAttribute('href')).toContain(`job=${JOB_ID}`);
+    expect(screen.queryByText('Task nine failed.')).not.toBeInTheDocument();
+  });
+
+  test('omits the annotation chip when the job produced none', async () => {
+    configureApiClient({fetchImpl: vi.fn(jobDetailFetch)});
+
+    renderJobPath(`?jobExecution=${EXECUTION_ID}&runAttempt=1`);
+
+    await screen.findByRole('heading', {name: 'release'});
+    expect(screen.queryByRole('link', {name: ANNOTATION_LINK_PATTERN})).not.toBeInTheDocument();
+  });
+
   test('resolves an exact job execution and step attempt from a deep link', async () => {
     configureApiClient({fetchImpl: vi.fn(jobDetailFetch)});
 
@@ -177,6 +229,56 @@ describe('WorkflowJobDetailPage', () => {
     expect(screen.queryByText('This job has no annotations to show.')).not.toBeInTheDocument();
   });
 
+  test('keeps the job navigation count run-scoped', async () => {
+    jobAnnotations.value = Array.from({length: 5}, (_unused, index) => ({
+      id: `aaaaaaaa-1111-4aaa-8aaa-${String(index + 1).padStart(12, '0')}`,
+      job_id: JOB_ID,
+      job_execution_id: EXECUTION_ID,
+      origin_step_id: STEP_ID,
+      origin_step_attempt: 1,
+      context: `annotation-${index + 1}`,
+      style: 'error',
+      sequence: index + 1,
+      body: 'Body',
+    }));
+    const annotationRequests: URL[] = [];
+    const summaryRequests: URL[] = [];
+    configureApiClient({
+      fetchImpl: vi.fn((input: RequestInfo | URL) => {
+        const request = input as Request;
+        const url = new URL(request.url);
+        if (url.pathname.endsWith('/annotations')) {
+          annotationRequests.push(url);
+          return jobDetailFetch(input);
+        }
+        if (url.pathname.endsWith('/annotations/summary')) {
+          summaryRequests.push(url);
+          const executionScoped = url.searchParams.has('job_execution_id');
+          return Promise.resolve(
+            jsonResponse({
+              total: executionScoped ? 2 : 5,
+              error: executionScoped ? 2 : 5,
+              warning: 0,
+              info: 0,
+              success: 0,
+              step_counts: [],
+            }),
+          );
+        }
+        return jobDetailFetch(input);
+      }),
+    });
+
+    renderJobPath('?runAttempt=1');
+
+    const annotationsLink = await screen.findByRole('link', {name: ANNOTATIONS_LINK_PATTERN});
+    await waitFor(() => expect(annotationsLink).toHaveTextContent('5'));
+    expect(annotationRequests.some((url) => !url.searchParams.has('job_execution_id'))).toBe(true);
+    expect(
+      summaryRequests.some((url) => url.searchParams.get('job_execution_id') === EXECUTION_ID),
+    ).toBe(true);
+  });
+
   test('explains a failure that happened before the first step started', async () => {
     configureApiClient({
       fetchImpl: vi.fn(() => Promise.resolve(jsonResponse(failedBeforeStepsDetailDto()))),
@@ -247,10 +349,21 @@ function renderJobPath(path = '', jobId = JOB_ID) {
   );
 }
 
+/** Annotations for the job page, which renders their count and never their bodies. */
+const jobAnnotations: {value: unknown[]} = {value: []};
+
+function annotationsResponse() {
+  return {annotations: jobAnnotations.value, has_more: false, next_cursor: null};
+}
+
 function jobDetailFetch(input: RequestInfo | URL) {
   const request = input as Request;
   const url = new URL(request.url);
 
+  if (url.pathname.endsWith('/annotations')) {
+    return Promise.resolve(jsonResponse(annotationsResponse()));
+  }
+
   if (url.pathname.endsWith('/attempts')) {
     return Promise.resolve(
       jsonResponse(
@@ -287,6 +400,10 @@ function newerAttemptJobDetailFetch(input: RequestInfo | URL) {
   const request = input as Request;
   const url = new URL(request.url);
 
+  if (url.pathname.endsWith('/annotations')) {
+    return Promise.resolve(jsonResponse(annotationsResponse()));
+  }
+
   if (url.pathname.endsWith('/attempts')) {
     return Promise.resolve(
       jsonResponse(

package/src/pages/workflow-run-list-page.tsx

@@ -50,7 +50,7 @@ export function WorkflowRunsPage({
 
   return (
     <div className="flex min-h-0 flex-1 overflow-hidden bg-background-neutral-base">
-      <div className="mx-auto flex min-h-0 w-full max-w-[1120px] flex-1 flex-col px-24 py-24">
+      <div className="mx-auto flex min-h-0 w-full max-w-[1120px] flex-1 flex-col px-frame py-frame">
         <WorkflowRunList
           projectId={projectId}
           workspaceSlug={workspaceSlug}

package/src/routes/inputs.ts

@@ -1,3 +1,4 @@
+import {RUN_ANNOTATION_SEVERITIES, type RunAnnotationSeverity} from '#core/run-annotation.js';
 import type {WorkflowRunSelectionInput} from '#core/workflow-run-url-state.js';
 
 /**
@@ -12,9 +13,13 @@ export const WORKFLOW_RUN_TABS = ['summary', 'jobs', 'annotations', 'source'] as
 
 export type WorkflowRunTab = (typeof WORKFLOW_RUN_TABS)[number];
 
-export const WORKFLOW_RUN_ANNOTATION_SEVERITIES = ['error', 'warning', 'info', 'success'] as const;
+/**
+ * The `severity` parameter's vocabulary is the display severity set, not a second list: a URL
+ * that could name a severity the list cannot rank would be a filter with no matching rows.
+ */
+export const WORKFLOW_RUN_ANNOTATION_SEVERITIES = RUN_ANNOTATION_SEVERITIES;
 
-export type WorkflowRunAnnotationSeverity = (typeof WORKFLOW_RUN_ANNOTATION_SEVERITIES)[number];
+export type WorkflowRunAnnotationSeverity = RunAnnotationSeverity;
 
 export interface WorkflowRunsSearch extends WorkflowRunSelectionInput {
   search?: string;

package/test/fixtures/workflow-run.ts

@@ -233,6 +233,9 @@ export function workflowJobDto(overrides: JobDtoOverrides = {}): WorkflowRunJobD
     status: 'pending',
     status_reason: null,
     carried_over: false,
+    success: null,
+    runner: null,
+    evaluation_trace: null,
     listening: null,
     listener_status: 'inactive',
     resolution_reason: null,
@@ -271,8 +274,10 @@ export function workflowJobExecutionDto(
     name: 'build',
     status: 'pending',
     status_reason: null,
+    runner: null,
     trigger_events: [],
     outputs: null,
+    evaluation_trace: null,
     queued_at: null,
     started_at: null,
     finished_at: null,
@@ -296,8 +301,10 @@ export function workflowStepDto(
     name: 'build',
     source_location: null,
     status: 'pending',
+    status_reason: null,
     type: 'run',
     config: {},
+    evaluation_trace: null,
     error: null,
     position: 0,
     current_attempt: 1,