@shipfox/client-workflows 12.0.2 → 14.0.0

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

@@ -15,7 +15,7 @@ import {
   workflowStepAttemptDto,
   workflowStepDto,
 } from '#test/fixtures/workflow-run.js';
-import {jsonResponse, PROJECT_TEST_WID, renderProjectPage} from '#test/pages.js';
+import {jsonResponse, PROJECT_TEST_WSLUG, renderProjectPage} from '#test/pages.js';
 import {WorkflowRunView} from './workflow-run-view.js';
 
 const RUN_ID = '66666666-6666-4666-8666-666666666666';
@@ -26,12 +26,29 @@ const DEPLOY_JOB_ID = '88888888-8888-4888-8888-888888888888';
 const CHECKOUT_STEP_ID = '99999999-9999-4999-8999-999999999999';
 const CHECKOUT_ATTEMPT_ID = 'aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa';
 const RERUN_BUTTON_NAME = /^Re-run/;
+const BUILD_JOB_BUTTON_NAME = 'build, Succeeded';
+const DEPLOY_JOB_BUTTON_NAME = 'deploy, Running';
 const ATTEMPT_2_PATTERN = /Attempt 2/;
 const COPY_RUN_BUTTON_NAME = /Copy run/;
 const EXECUTION_ONE_MENU_ITEM_PATTERN = /#1/;
+const LISTENING_EXECUTION_SWITCHER_NAME =
+  'Switch job execution, currently execution 2: Deployment status event';
+const JOB_TEMPLATE_NAME = ['Implement $', '{{ event.issue.identifier }}'].join('');
 
 describe('WorkflowRunView', () => {
-  test('renders the run summary, jobs graph, and selected job step attempts when a run loads', async () => {
+  test('keeps the real tab strip visible while the run is loading', async () => {
+    configureApiClient({fetchImpl: vi.fn(() => new Promise<Response>(() => undefined))});
+
+    renderView({tab: 'summary'});
+
+    expect(await screen.findByRole('tab', {name: 'Summary'})).toBeInTheDocument();
+    expect(screen.getByRole('tab', {name: 'Jobs'})).toBeInTheDocument();
+    expect(screen.getByRole('tab', {name: 'Annotations'})).toBeInTheDocument();
+    expect(screen.getByRole('tab', {name: 'Source'})).toBeInTheDocument();
+    expect(screen.getByRole('region', {name: 'Loading workflow run content'})).toBeInTheDocument();
+  });
+
+  test('renders the run summary, jobs list, and selected job step attempts when a run loads', async () => {
     configureApiClient({
       fetchImpl: vi.fn(() => Promise.resolve(jsonResponse(workflowRunViewDetailDto()))),
     });
@@ -47,14 +64,50 @@ describe('WorkflowRunView', () => {
       within(summary).queryByRole('button', {name: COPY_RUN_BUTTON_NAME}),
     ).not.toBeInTheDocument();
     expect(await screen.findByRole('region', {name: 'Workflow jobs'})).toBeInTheDocument();
-    expect(screen.getByRole('button', {name: 'build, Succeeded'})).toBeInTheDocument();
-    expect(screen.getByRole('button', {name: 'deploy, Running'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: BUILD_JOB_BUTTON_NAME})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: DEPLOY_JOB_BUTTON_NAME})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: BUILD_JOB_BUTTON_NAME})).toHaveClass(
+      'bg-background-components-hover',
+      'hover:bg-background-components-pressed',
+    );
+    expect(screen.getByRole('tabpanel')).toHaveClass('max-w-[1120px]', 'px-24');
     expect(screen.getByRole('region', {name: 'build'})).toBeInTheDocument();
     expect(
       screen.getByRole('button', {name: 'checkout, Succeeded, attempt 1'}),
     ).toBeInTheDocument();
   });
 
+  test('uses the selected job execution name as the job card title', async () => {
+    configureApiClient({
+      fetchImpl: vi.fn(() =>
+        Promise.resolve(
+          jsonResponse(
+            workflowRunViewDetailDto({
+              jobs: [
+                workflowJobDto({
+                  id: BUILD_JOB_ID,
+                  run_attempt_id: RUN_ID,
+                  name: JOB_TEMPLATE_NAME,
+                  job_executions: [
+                    workflowJobExecutionDto({
+                      job_id: BUILD_JOB_ID,
+                      name: 'Implement ENG-123',
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          ),
+        ),
+      ),
+    });
+
+    renderView();
+
+    expect(await screen.findByRole('region', {name: 'Implement ENG-123'})).toBeInTheDocument();
+    expect(screen.queryByRole('region', {name: JOB_TEMPLATE_NAME})).not.toBeInTheDocument();
+  });
+
   test('renders active step attempt logs inline when the selected job is running', async () => {
     const stepId = '99999999-9999-4999-8999-000000000001';
     const fetchImpl = vi.fn((input: RequestInfo | URL) => {
@@ -125,6 +178,7 @@ describe('WorkflowRunView', () => {
                       id: '77777777-7777-4777-8777-000000000001',
                       job_id: BUILD_JOB_ID,
                       sequence: 1,
+                      name: 'Pull request event',
                       status: 'succeeded',
                       trigger_events: [
                         {
@@ -132,6 +186,10 @@ describe('WorkflowRunView', () => {
                           event: 'pull_request',
                           delivery_id: 'delivery-1',
                           received_at: '2026-05-07T01:00:00.000Z',
+                          project: null,
+                          repository: null,
+                          ref: null,
+                          commit: null,
                           data: {number: 12},
                         },
                       ],
@@ -155,6 +213,7 @@ describe('WorkflowRunView', () => {
                       id: '77777777-7777-4777-8777-000000000002',
                       job_id: BUILD_JOB_ID,
                       sequence: 2,
+                      name: 'Deployment status event',
                       status: 'failed',
                       status_reason: 'step_failed',
                       trigger_events: [
@@ -163,6 +222,10 @@ describe('WorkflowRunView', () => {
                           event: 'deployment_status',
                           delivery_id: 'delivery-2',
                           received_at: '2026-05-07T01:01:00.000Z',
+                          project: null,
+                          repository: null,
+                          ref: null,
+                          commit: null,
                           data: {state: 'success'},
                         },
                         {
@@ -170,6 +233,10 @@ describe('WorkflowRunView', () => {
                           event: 'check_run',
                           delivery_id: 'delivery-3',
                           received_at: '2026-05-07T01:01:10.000Z',
+                          project: null,
+                          repository: null,
+                          ref: null,
+                          commit: null,
                           data: {status: 'completed'},
                         },
                       ],
@@ -200,18 +267,20 @@ describe('WorkflowRunView', () => {
     });
 
     renderView();
+    expect(
+      await screen.findByRole('region', {name: 'Deployment status event'}),
+    ).toBeInTheDocument();
     expect(await screen.findByText('second-event')).toBeInTheDocument();
     expect(
       await screen.findByRole('button', {name: 'github · deployment_status (2 events)'}),
     ).toBeInTheDocument();
     expect(screen.getByText('deployment_status (2)')).toBeInTheDocument();
 
-    await user.click(
-      screen.getByRole('button', {name: 'Switch job execution, currently execution 2'}),
-    );
+    await user.click(screen.getByRole('button', {name: LISTENING_EXECUTION_SWITCHER_NAME}));
     await user.click(screen.getByRole('menuitem', {name: EXECUTION_ONE_MENU_ITEM_PATTERN}));
 
     expect(await screen.findByText('first-event')).toBeInTheDocument();
+    expect(screen.getByRole('region', {name: 'Pull request event'})).toBeInTheDocument();
     expect(screen.queryByText('second-event')).not.toBeInTheDocument();
     expect(await screen.findByRole('button', {name: 'github · pull_request'})).toBeInTheDocument();
     expect(screen.getByText('pull_request')).toBeInTheDocument();
@@ -301,7 +370,7 @@ describe('WorkflowRunView', () => {
     ).toBeInTheDocument();
     expect(screen.getByRole('link', {name: 'Configure Agents'})).toHaveAttribute(
       'href',
-      `/workspaces/${PROJECT_TEST_WID}/settings/agents`,
+      `/w/${PROJECT_TEST_WSLUG}/settings/agents`,
     );
   });
 
@@ -378,7 +447,7 @@ describe('WorkflowRunView', () => {
     expect(screen.getByText('Configure credentials for anthropic')).toBeInTheDocument();
     expect(screen.getByRole('link', {name: 'Configure Agents'})).toHaveAttribute(
       'href',
-      `/workspaces/${PROJECT_TEST_WID}/settings/agents`,
+      `/w/${PROJECT_TEST_WSLUG}/settings/agents`,
     );
   });
 
@@ -413,7 +482,7 @@ describe('WorkflowRunView', () => {
     expect(screen.queryByText('No steps recorded')).not.toBeInTheDocument();
   });
 
-  test('uses the selected execution status for zero-step execution states', async () => {
+  test('keeps a terminal job status over inconsistent zero-step execution activity', async () => {
     configureApiClient({
       fetchImpl: vi.fn(() =>
         Promise.resolve(
@@ -445,11 +514,9 @@ describe('WorkflowRunView', () => {
 
     renderView();
 
-    expect(await screen.findByText('Waiting for the first step')).toBeInTheDocument();
-    expect(
-      screen.getByText('This job is running, but no steps have started yet.'),
-    ).toBeInTheDocument();
-    expect(screen.queryByText('No steps recorded')).not.toBeInTheDocument();
+    expect(await screen.findByText('No steps recorded')).toBeInTheDocument();
+    expect(screen.getByText('Execution #2 finished without recorded steps.')).toBeInTheDocument();
+    expect(screen.queryByText('Waiting for the first step')).not.toBeInTheDocument();
   });
 
   test('renders pending zero-step jobs as waiting to start', async () => {
@@ -480,7 +547,7 @@ describe('WorkflowRunView', () => {
     expect(screen.queryByText('No steps recorded')).not.toBeInTheDocument();
   });
 
-  test('renders running zero-step jobs as waiting for the first step', async () => {
+  test('renders claimed idle jobs as runner preparation', async () => {
     configureApiClient({
       fetchImpl: vi.fn(() =>
         Promise.resolve(
@@ -509,10 +576,13 @@ describe('WorkflowRunView', () => {
 
     renderView();
 
-    expect(await screen.findByText('Waiting for the first step')).toBeInTheDocument();
+    expect(await screen.findByText('Runner preparing job')).toBeInTheDocument();
     expect(
-      screen.getByText('This job is running, but no steps have started yet.'),
+      screen.getByText('A runner is assigned. Steps will appear here when work begins.'),
     ).toBeInTheDocument();
+    expect(
+      screen.queryByText('This job is running, but no steps have started yet.'),
+    ).not.toBeInTheDocument();
     expect(screen.queryByText('No steps recorded')).not.toBeInTheDocument();
   });
 
@@ -634,8 +704,7 @@ describe('WorkflowRunView', () => {
     ).toBeInTheDocument();
   });
 
-  test('opens and closes workflow source without resetting the selected job', async () => {
-    const user = userEvent.setup();
+  test('renders the full workflow source in the Source tab', async () => {
     configureApiClient({
       fetchImpl: vi.fn(() =>
         Promise.resolve(
@@ -651,38 +720,20 @@ describe('WorkflowRunView', () => {
       ),
     });
 
-    renderView();
-
-    const deployNode = await screen.findByRole('button', {name: 'deploy, Running'});
-    await user.click(deployNode);
-    expect(deployNode).toHaveAttribute('aria-pressed', 'true');
+    renderView({tab: 'source'});
 
-    const sourceButton = within(screen.getByRole('region', {name: 'deploy-web'})).getByRole(
-      'button',
-      {name: 'View source'},
+    expect(await screen.findByRole('tab', {name: 'Source'})).toHaveAttribute(
+      'aria-selected',
+      'true',
     );
-    const panelId = sourceButton.getAttribute('aria-controls');
-    expect(panelId).toBeTruthy();
-    expect(sourceButton).toHaveAttribute('aria-expanded', 'false');
-
-    await user.click(sourceButton);
-
-    const sourcePanel = screen.getByRole('dialog', {name: 'Workflow source'});
-    expect(sourceButton).toHaveAttribute('aria-expanded', 'true');
-    expect(sourcePanel).toHaveAttribute('id', panelId);
-    expect(sourcePanel).toHaveTextContent('pnpm test');
-
-    await user.click(screen.getByRole('button', {name: 'Close source'}));
-
-    await waitFor(() => expect(sourceButton).toHaveFocus());
-    expect(sourceButton).toHaveAttribute('aria-expanded', 'false');
-    expect(deployNode).toHaveAttribute('aria-pressed', 'true');
-    expect(screen.getByRole('region', {name: 'deploy'})).toBeInTheDocument();
+    expect(await screen.findByText('pnpm test')).toBeInTheDocument();
+    expect(screen.queryByRole('dialog', {name: 'Workflow source'})).not.toBeInTheDocument();
   });
 
   test('highlights selected step source lines when the source panel opens', async () => {
     const user = userEvent.setup();
     const stepId = '99999999-9999-4999-8999-000000000003';
+    const stepAttemptId = 'aaaaaaaa-aaaa-4aaa-8aaa-000000000003';
     configureApiClient({
       fetchImpl: vi.fn(() =>
         Promise.resolve(
@@ -698,13 +749,27 @@ describe('WorkflowRunView', () => {
                   run_attempt_id: RUN_ID,
                   name: 'deploy',
                   status: 'running',
-                  steps: [
-                    workflowStepDto({
-                      id: stepId,
-                      key: 'deploy',
+                  job_executions: [
+                    workflowJobExecutionDto({
+                      job_id: DEPLOY_JOB_ID,
                       name: 'deploy',
-                      source_location: {start_line: 2, end_line: 3},
                       status: 'running',
+                      steps: [
+                        workflowStepDto({
+                          id: stepId,
+                          key: 'deploy',
+                          name: 'deploy',
+                          source_location: {start_line: 2, end_line: 3},
+                          status: 'running',
+                          attempts: [
+                            workflowStepAttemptDto({
+                              id: stepAttemptId,
+                              step_id: stepId,
+                              status: 'running',
+                            }),
+                          ],
+                        }),
+                      ],
                     }),
                   ],
                 }),
@@ -715,29 +780,29 @@ describe('WorkflowRunView', () => {
       ),
     });
 
-    renderView({selection: {stepId}});
-    const summary = await screen.findByRole('region', {name: 'deploy-web'});
-    await user.click(within(summary).getByRole('button', {name: 'View source'}));
+    renderView({tab: 'jobs', selection: {stepId, stepAttemptId}});
+    const jobRegion = await screen.findByRole('region', {name: 'deploy'});
+    await user.click(within(jobRegion).getByRole('button', {name: 'View source'}));
 
-    await screen.findByRole('dialog', {name: 'Workflow source'});
-    const highlightedLines = document.body.querySelectorAll('.line.highlighted-line');
+    const sourceDialog = await screen.findByRole('dialog', {name: 'Workflow source'});
+    const highlightedLines = sourceDialog.querySelectorAll('.line.highlighted-line');
     expect(highlightedLines).toHaveLength(2);
     expect(highlightedLines[0]).toHaveTextContent('deploy:');
     expect(highlightedLines[1]).toHaveTextContent('steps:');
   });
 
-  test('does not render a source control when the run has no source snapshot', async () => {
+  test('explains when the run has no source snapshot', async () => {
     configureApiClient({
       fetchImpl: vi.fn(() =>
         Promise.resolve(jsonResponse(workflowRunViewDetailDto({source_snapshot: null}))),
       ),
     });
 
-    renderView();
+    renderView({tab: 'source'});
 
     await screen.findByRole('region', {name: 'deploy-web'});
 
-    expect(screen.queryByRole('button', {name: 'View source'})).not.toBeInTheDocument();
+    expect(await screen.findByText('Source snapshot unavailable')).toBeInTheDocument();
   });
 
   test('opens the source panel highlighting a step from the job header Source button', async () => {
@@ -751,25 +816,17 @@ describe('WorkflowRunView', () => {
     const jobRegion = await screen.findByRole('region', {name: 'build'});
     await user.click(screen.getByRole('button', {name: 'checkout, Succeeded, attempt 1'}));
     const jobSourceButton = within(jobRegion).getByRole('button', {name: 'View source'});
-    const summaryButton = within(screen.getByRole('region', {name: 'deploy-web'})).getByRole(
-      'button',
-      {name: 'View source'},
-    );
     expect(jobSourceButton).toHaveAttribute('aria-expanded', 'false');
-    expect(jobSourceButton).toHaveAttribute(
-      'aria-controls',
-      summaryButton.getAttribute('aria-controls'),
-    );
+    expect(jobSourceButton).toHaveAttribute('aria-controls');
 
     await user.click(jobSourceButton);
 
-    await screen.findByRole('dialog', {name: 'Workflow source'});
-    const highlighted = document.body.querySelectorAll('.line.highlighted-line');
+    const sourceDialog = await screen.findByRole('dialog', {name: 'Workflow source'});
+    const highlighted = sourceDialog.querySelectorAll('.line.highlighted-line');
     expect(highlighted).toHaveLength(2);
     expect(highlighted[0]).toHaveTextContent('build:');
     expect(highlighted[1]).toHaveTextContent('steps:');
     expect(jobSourceButton).toHaveAttribute('aria-expanded', 'true');
-    expect(summaryButton).toHaveAttribute('aria-expanded', 'false');
   });
 
   test('returns focus to the job Source button on close and preserves the selected job', async () => {
@@ -793,7 +850,7 @@ describe('WorkflowRunView', () => {
     expect(screen.getByRole('region', {name: 'build'})).toBeInTheDocument();
   });
 
-  test('falls back to the summary Source button when refetch removes the focused step source', async () => {
+  test('closes the source panel when refetch removes the focused step source', async () => {
     const user = userEvent.setup();
     let detailRequests = 0;
     const fetchImpl = vi.fn((input: RequestInfo | URL) => {
@@ -842,10 +899,6 @@ describe('WorkflowRunView', () => {
     const jobRegion = await screen.findByRole('region', {name: 'build'});
     await user.click(screen.getByRole('button', {name: 'checkout, Succeeded, attempt 1'}));
     const jobSourceButton = within(jobRegion).getByRole('button', {name: 'View source'});
-    const summaryButton = within(screen.getByRole('region', {name: 'deploy-web'})).getByRole(
-      'button',
-      {name: 'View source'},
-    );
     await user.click(jobSourceButton);
     await screen.findByRole('dialog', {name: 'Workflow source'});
 
@@ -855,10 +908,7 @@ describe('WorkflowRunView', () => {
         within(jobRegion).queryByRole('button', {name: 'View source'}),
       ).not.toBeInTheDocument(),
     );
-    await user.click(screen.getByRole('button', {name: 'Close source'}));
-
-    await waitFor(() => expect(summaryButton).toHaveFocus());
-    expect(summaryButton).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByRole('dialog', {name: 'Workflow source'})).not.toBeInTheDocument();
   });
 
   test('re-runs all jobs from a succeeded run and navigates to the new run', async () => {
@@ -898,7 +948,7 @@ describe('WorkflowRunView', () => {
     expect(successSpy).toHaveBeenCalledWith('Re-run started');
     await waitFor(() =>
       expect(router.state.location.pathname).toBe(
-        `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${rerunId}`,
+        `/w/${PROJECT_TEST_WSLUG}/p/project/runs/${rerunId}`,
       ),
     );
     expect((router.state.location.search as Record<string, unknown>).runAttempt).toBeUndefined();
@@ -1008,11 +1058,12 @@ describe('WorkflowRunView', () => {
     configureApiClient({fetchImpl: fetchImpl as typeof fetch});
 
     const {router} = renderProjectPage(
-      `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${RUN_ID}?job=${BUILD_JOB_ID}&step=${CHECKOUT_STEP_ID}&stepAttempt=${CHECKOUT_ATTEMPT_ID}`,
+      `/w/${PROJECT_TEST_WSLUG}/p/project/runs/${RUN_ID}?job=${BUILD_JOB_ID}&step=${CHECKOUT_STEP_ID}&stepAttempt=${CHECKOUT_ATTEMPT_ID}`,
       () => (
         <WorkflowRunView
-          workspaceId={PROJECT_TEST_WID}
           projectId={PROJECT_ID}
+          workspaceSlug={PROJECT_TEST_WSLUG}
+          projectSlug="project"
           workflowRunId={RUN_ID}
         />
       ),
@@ -1023,7 +1074,7 @@ describe('WorkflowRunView', () => {
 
     await waitFor(() =>
       expect(router.state.location.pathname).toBe(
-        `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${RUN_ID}`,
+        `/w/${PROJECT_TEST_WSLUG}/p/project/runs/${RUN_ID}`,
       ),
     );
     expect(router.state.location.search).toEqual({runAttempt: 2});
@@ -1075,7 +1126,7 @@ describe('WorkflowRunView', () => {
     expect(
       await screen.findByRole('button', {name: 'build, Succeeded, reused'}),
     ).toBeInTheDocument();
-    expect(screen.getAllByText('reused')).toHaveLength(2);
+    expect(screen.getAllByText('reused')).toHaveLength(1);
     await user.click(screen.getByRole('button', {name: 'checkout, Succeeded, attempt 1'}));
 
     expect(await screen.findByText('Not executed in this run.')).toBeInTheDocument();
@@ -1086,17 +1137,16 @@ describe('WorkflowRunView', () => {
 });
 
 function renderView(props: Partial<Parameters<typeof WorkflowRunView>[0]> = {}, search = '') {
-  return renderProjectPage(
-    `/workspaces/${PROJECT_TEST_WID}/projects/x/runs/${RUN_ID}${search}`,
-    () => (
-      <WorkflowRunView
-        workspaceId={PROJECT_TEST_WID}
-        projectId={PROJECT_ID}
-        workflowRunId={RUN_ID}
-        {...props}
-      />
-    ),
-  );
+  return renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/p/project/runs/${RUN_ID}${search}`, () => (
+    <WorkflowRunView
+      projectId={PROJECT_ID}
+      workspaceSlug={PROJECT_TEST_WSLUG}
+      projectSlug="project"
+      workflowRunId={RUN_ID}
+      tab="jobs"
+      {...props}
+    />
+  ));
 }
 
 function requestUrl(input: RequestInfo | URL): URL {
@@ -1207,6 +1257,14 @@ function workflowRunViewDetailDto(
         status: 'running',
         position: 1,
         dependencies: ['build'],
+        job_executions: [
+          workflowJobExecutionDto({
+            job_id: DEPLOY_JOB_ID,
+            name: 'deploy',
+            status: 'running',
+            steps: [workflowStepDto({status: 'running'})],
+          }),
+        ],
       }),
     ],
     ...overrides,