@shipfox/client-workflows 15.0.0 → 17.0.0

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

@@ -9,10 +9,10 @@ export function WorkflowRunSkeleton() {
   return (
     <section
       aria-label="Loading workflow run"
-      className="bg-background-neutral-background px-16 py-12"
+      className="bg-background-neutral-background px-row py-row"
     >
-      <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">
+      <div className="flex min-w-0 flex-wrap items-center gap-x-cluster gap-y-inline">
+        <div className="flex min-w-0 items-center gap-inline">
           <Skeleton className="size-8 rounded-full" />
           <Skeleton className="h-24 w-180 rounded-6" />
         </div>
@@ -35,7 +35,7 @@ export function WorkflowRunContentSkeleton() {
   return (
     <section
       aria-label="Loading workflow run content"
-      className="min-h-160 rounded-8 border border-border-neutral-base bg-background-components-base p-16"
+      className="min-h-160 rounded-8 border border-border-neutral-base bg-background-components-base p-panel-compact"
     >
       <Skeleton className="h-160 w-full rounded-6" />
     </section>
@@ -59,9 +59,9 @@ export function WorkflowRunNotFound() {
  */
 export function WorkflowRunStaleError({query}: {query: QueryLoadErrorQuery}) {
   return (
-    <div className="border-b border-border-neutral-base p-8">
+    <div className="border-b border-border-neutral-base p-tight">
       <Callout role="alert" type="error">
-        <div className="flex items-center justify-between gap-8">
+        <div className="flex items-center justify-between gap-inline">
           <Text size="xs">Could not refresh this run.</Text>
           <Button
             type="button"

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

@@ -1,10 +1,13 @@
+import type {AnnotationDto} from '@shipfox/annotations-dto';
 import type {WorkflowRunDetailResponseDto} from '@shipfox/api-workflows-dto';
 import {configureApiClient} from '@shipfox/client-api';
 import {screen, waitFor, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {
   workflowJobDto,
+  workflowJobExecutionDto,
   workflowRunDetailDto,
+  workflowStepAttemptDto,
   workflowStepDto,
 } from '#test/fixtures/workflow-run.js';
 import {jsonResponse, PROJECT_TEST_WSLUG, renderProjectPage} from '#test/pages.js';
@@ -14,6 +17,13 @@ const RUN_ID = '66666666-6666-4666-8666-666666666666';
 const PROJECT_ID = '44444444-4444-4444-8444-444444444444';
 const BUILD_JOB_ID = '77777777-7777-4777-8777-777777777777';
 const DEPLOY_JOB_ID = '88888888-8888-4888-8888-888888888888';
+const BUILD_EXECUTION_ID = '99999999-9999-4999-8999-000000000001';
+const BUILD_STEP_ID = '55555555-5555-4555-8555-000000000001';
+const BUILD_ATTEMPT_ID = '66666666-6666-4666-8666-000000000001';
+const ANNOTATION_ID_ONE = 'aaaaaaaa-aaaa-4aaa-8aaa-000000000001';
+const ANNOTATION_ID_TWO = 'aaaaaaaa-aaaa-4aaa-8aaa-000000000002';
+const TASK_NINE_PATTERN = /Task nine/;
+const SHOW_MORE_PATTERN = /Show \d+ more/;
 
 describe('WorkflowRunView', () => {
   beforeEach(() => {
@@ -32,9 +42,7 @@ describe('WorkflowRunView', () => {
   });
 
   test('opens the all-jobs Summary on the dependency graph by default', async () => {
-    configureApiClient({
-      fetchImpl: vi.fn(() => Promise.resolve(jsonResponse(workflowRunViewDetailDto()))),
-    });
+    configureRunFetch();
 
     const {container} = renderView();
 
@@ -59,9 +67,7 @@ describe('WorkflowRunView', () => {
   });
 
   test('treats the removed Jobs tab URL as the graph Summary', async () => {
-    configureApiClient({
-      fetchImpl: vi.fn(() => Promise.resolve(jsonResponse(workflowRunViewDetailDto()))),
-    });
+    configureRunFetch();
 
     renderView({tab: 'jobs'});
 
@@ -71,9 +77,7 @@ describe('WorkflowRunView', () => {
 
   test('navigates graph and rail jobs to their dedicated job routes', async () => {
     const user = userEvent.setup();
-    configureApiClient({
-      fetchImpl: vi.fn(() => Promise.resolve(jsonResponse(workflowRunViewDetailDto()))),
-    });
+    configureRunFetch();
 
     const {router} = renderView();
     await user.click(await screen.findByRole('button', {name: 'deploy, Running'}));
@@ -87,9 +91,7 @@ describe('WorkflowRunView', () => {
 
   test('keeps run Annotations and Source in the workspace navigation', async () => {
     const user = userEvent.setup();
-    configureApiClient({
-      fetchImpl: vi.fn(() => Promise.resolve(jsonResponse(workflowRunViewDetailDto()))),
-    });
+    configureRunFetch();
 
     const {router} = renderView();
     await screen.findByRole('region', {name: 'Workflow jobs'});
@@ -99,19 +101,182 @@ describe('WorkflowRunView', () => {
   });
 
   test('filters the single run-level Annotations page by job', async () => {
-    configureApiClient({
-      fetchImpl: vi.fn(() => Promise.resolve(jsonResponse(workflowRunViewDetailDto()))),
-    });
+    configureRunFetch();
 
     renderView({tab: 'annotations', selection: {jobId: BUILD_JOB_ID}});
 
     expect(
       await screen.findByRole('combobox', {name: 'Filter annotations by job'}),
     ).toHaveTextContent('build');
-    expect(screen.getByText('build has no annotations to show in this run.')).toBeInTheDocument();
+    expect(await screen.findByText('This run has no annotations to show.')).toBeInTheDocument();
     expect(screen.queryByRole('tab', {name: 'Annotations'})).not.toBeInTheDocument();
   });
 
+  test('renders annotation bodies once, severity first, with provenance', async () => {
+    configureRunFetch([
+      annotationDto({id: ANNOTATION_ID_ONE, context: 'coverage', style: 'info', sequence: 1}),
+      annotationDto({
+        id: ANNOTATION_ID_TWO,
+        context: 'smoke check',
+        style: 'error',
+        sequence: 2,
+        body: 'Task nine **failed**.',
+      }),
+    ]);
+
+    renderView({tab: 'annotations'});
+
+    const headings = await screen.findAllByRole('heading', {level: 3});
+    expect(headings.map((heading) => heading.textContent)).toEqual(['smoke check', 'coverage']);
+    expect(screen.getByText(TASK_NINE_PATTERN)).toBeInTheDocument();
+    expect(screen.getAllByText('build · checkout · attempt 1')).toHaveLength(2);
+    expect(screen.getByText('2 annotations')).toBeInTheDocument();
+  });
+
+  test('links an annotation back to the step that emitted it', async () => {
+    configureRunFetch([annotationDto({id: ANNOTATION_ID_ONE, context: 'coverage'})]);
+
+    renderView({tab: 'annotations'});
+
+    const href = (await screen.findByRole('link', {name: 'Open step'})).getAttribute('href') ?? '';
+    const [pathname, query = ''] = href.split('?');
+
+    expect(pathname).toBe(`/w/${PROJECT_TEST_WSLUG}/p/project/runs/${RUN_ID}/jobs/${BUILD_JOB_ID}`);
+    expect(Object.fromEntries(new URLSearchParams(query))).toEqual({
+      jobExecution: BUILD_EXECUTION_ID,
+      step: BUILD_STEP_ID,
+      stepAttempt: BUILD_ATTEMPT_ID,
+      runAttempt: '"1"',
+    });
+  });
+
+  test('shows a failed annotations read as an error, never as an empty run', async () => {
+    configureApiClient({
+      fetchImpl: vi.fn((input: RequestInfo | URL) =>
+        Promise.resolve(
+          requestUrl(input).includes('/annotations')
+            ? jsonResponse({code: 'internal'}, {status: 500})
+            : jsonResponse(workflowRunViewDetailDto()),
+        ),
+      ),
+    });
+
+    renderView({tab: 'annotations'});
+
+    expect(await screen.findByRole('button', {name: 'Retry loading annotations'})).toBeVisible();
+    expect(screen.queryByText('This run has no annotations to show.')).not.toBeInTheDocument();
+  });
+
+  test('bounds how many annotation bodies render at once', async () => {
+    configureRunFetch(
+      Array.from({length: 30}, (_unused, index) =>
+        annotationDto({
+          id: `aaaaaaaa-aaaa-4aaa-8aaa-${String(index).padStart(12, '0')}`,
+          context: `context-${index}`,
+          sequence: index + 1,
+        }),
+      ),
+    );
+
+    renderView({tab: 'annotations'});
+
+    expect(await screen.findAllByRole('heading', {level: 3})).toHaveLength(25);
+    const showMore = screen.getByRole('button', {name: 'Show 5 more of 30'});
+
+    await userEvent.click(showMore);
+
+    expect(screen.getAllByRole('heading', {level: 3})).toHaveLength(30);
+    expect(screen.queryByRole('button', {name: SHOW_MORE_PATTERN})).not.toBeInTheDocument();
+  });
+
+  test('focuses a deep-linked annotation beyond the render window', async () => {
+    const deepLinkedId = 'aaaaaaaa-aaaa-4aaa-8aaa-000000000029';
+    configureRunFetch(
+      Array.from({length: 30}, (_unused, index) =>
+        annotationDto({
+          id:
+            index === 29
+              ? deepLinkedId
+              : `aaaaaaaa-aaaa-4aaa-8aaa-${String(index).padStart(12, '0')}`,
+          context: `context-${index}`,
+          sequence: index + 1,
+        }),
+      ),
+    );
+
+    renderView({tab: 'annotations', selection: {annotation: deepLinkedId}});
+
+    const target = await screen.findByRole('heading', {level: 3, name: 'context-29'});
+    const selected = target.closest('li');
+    await waitFor(() => expect(selected).toHaveFocus());
+    expect(selected).toHaveAttribute('aria-current', 'true');
+    expect(selected).toHaveClass('shadow-border-interactive-with-active');
+  });
+
+  test('separates a filtered miss from a run with no annotations', async () => {
+    configureRunFetch([annotationDto({id: ANNOTATION_ID_ONE, context: 'coverage', style: 'info'})]);
+
+    renderView({tab: 'annotations', selection: {severity: 'error'}});
+
+    expect(await screen.findByText('No matching annotations')).toBeInTheDocument();
+    expect(
+      screen.getByText('This run has annotations, but none at error severity.'),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Clear filters'})).toBeInTheDocument();
+  });
+
+  test('does not claim a filtered miss beyond the loaded annotation budget', async () => {
+    configureRunFetch(
+      [annotationDto({id: ANNOTATION_ID_ONE, context: 'coverage', style: 'info'})],
+      {},
+      {has_more: true, next_cursor: 'next-page'},
+    );
+
+    renderView({tab: 'annotations', selection: {severity: 'error'}});
+
+    expect(await screen.findByText('No matches in loaded annotations')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'None of the loaded annotations are at error severity. Load more annotations to continue searching.',
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Load more annotations'})).toBeInTheDocument();
+    expect(screen.queryByText('No matching annotations')).not.toBeInTheDocument();
+  });
+
+  test('clears annotation filters and legacy step selection together', async () => {
+    const user = userEvent.setup();
+    configureRunFetch([annotationDto({id: ANNOTATION_ID_ONE, context: 'coverage', style: 'info'})]);
+
+    const {router} = renderView({
+      tab: 'annotations',
+      selection: {
+        jobId: DEPLOY_JOB_ID,
+        jobExecutionId: BUILD_EXECUTION_ID,
+        stepId: BUILD_STEP_ID,
+        stepAttemptId: BUILD_ATTEMPT_ID,
+        severity: 'error',
+        annotation: ANNOTATION_ID_ONE,
+      },
+    });
+
+    await user.click(await screen.findByRole('button', {name: 'Clear filters'}));
+
+    await waitFor(() => expect(router.state.location.search).toEqual({tab: 'annotations'}));
+  });
+
+  test('blames only the filters that are actually active', async () => {
+    // The annotation belongs to build, so filtering to deploy is a job-only miss. Naming
+    // severity here would send the reader to change a control they never touched.
+    configureRunFetch([annotationDto({id: ANNOTATION_ID_ONE, context: 'coverage', style: 'info'})]);
+
+    renderView({tab: 'annotations', selection: {jobId: DEPLOY_JOB_ID}});
+
+    expect(
+      await screen.findByText('This run has annotations, but none from deploy.'),
+    ).toBeInTheDocument();
+  });
+
   test('renders the captured workflow source in the Source section', async () => {
     configureApiClient({
       fetchImpl: vi.fn(() =>
@@ -132,9 +297,7 @@ describe('WorkflowRunView', () => {
   });
 
   test('explains when the run has no source snapshot', async () => {
-    configureApiClient({
-      fetchImpl: vi.fn(() => Promise.resolve(jsonResponse(workflowRunViewDetailDto()))),
-    });
+    configureRunFetch();
 
     renderView({tab: 'source'});
 
@@ -164,6 +327,48 @@ function renderView(props: Partial<Parameters<typeof WorkflowRunView>[0]> = {})
   ));
 }
 
+/** The API client hands `fetchImpl` a `Request`, whose URL only `.url` exposes. */
+function requestUrl(input: RequestInfo | URL): string {
+  if (typeof input === 'string') return input;
+  return input instanceof URL ? input.href : input.url;
+}
+
+/** Routes the run detail and the annotations read, which are two independent fetches. */
+function configureRunFetch(
+  annotations: AnnotationDto[] = [],
+  runOverrides: Partial<WorkflowRunDetailResponseDto> = {},
+  annotationPageOverrides: Partial<{has_more: boolean; next_cursor: string | null}> = {},
+) {
+  configureApiClient({
+    fetchImpl: vi.fn((input: RequestInfo | URL) =>
+      Promise.resolve(
+        requestUrl(input).includes('/annotations')
+          ? jsonResponse({
+              annotations,
+              has_more: false,
+              next_cursor: null,
+              ...annotationPageOverrides,
+            })
+          : jsonResponse(workflowRunViewDetailDto(runOverrides)),
+      ),
+    ),
+  });
+}
+
+function annotationDto(overrides: Partial<AnnotationDto> & {id: string}): AnnotationDto {
+  return {
+    job_id: BUILD_JOB_ID,
+    job_execution_id: BUILD_EXECUTION_ID,
+    origin_step_id: BUILD_STEP_ID,
+    origin_step_attempt: 1,
+    context: 'default',
+    style: 'default',
+    sequence: 1,
+    body: 'Body',
+    ...overrides,
+  };
+}
+
 function workflowRunViewDetailDto(
   overrides: Partial<WorkflowRunDetailResponseDto> = {},
 ): WorkflowRunDetailResponseDto {
@@ -181,7 +386,28 @@ function workflowRunViewDetailDto(
         run_attempt_id: RUN_ID,
         name: 'build',
         status: 'succeeded',
-        steps: [workflowStepDto({name: 'checkout', status: 'succeeded'})],
+        job_executions: [
+          workflowJobExecutionDto({
+            id: BUILD_EXECUTION_ID,
+            job_id: BUILD_JOB_ID,
+            status: 'succeeded',
+            steps: [
+              workflowStepDto({
+                id: BUILD_STEP_ID,
+                name: 'checkout',
+                status: 'succeeded',
+                attempts: [
+                  workflowStepAttemptDto({
+                    id: BUILD_ATTEMPT_ID,
+                    step_id: BUILD_STEP_ID,
+                    attempt: 1,
+                    status: 'succeeded',
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
       }),
       workflowJobDto({
         id: DEPLOY_JOB_ID,