@shipfox/client-workflows 20.0.0 → 21.0.0

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

@@ -0,0 +1,140 @@
+import type {WorkflowRunDetailResponseDto} from '@shipfox/api-workflows-dto';
+import {configureApiClient} from '@shipfox/client-api';
+import type {Decorator, Meta, StoryObj} from '@storybook/react';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {type ReactNode, useEffect, useState} from 'react';
+import {
+  runAttemptsResponseDto,
+  workflowJobDto,
+  workflowRunDetailDto,
+} from '#test/fixtures/workflow-run.js';
+import {WorkflowRunView} from './workflow-run-view.js';
+
+const PROJECT_ID = '22222222-2222-4222-8222-222222222222';
+const RUN_ID = '11111111-1111-4111-8111-111111111111';
+const RUN_STARTED_AT = '2026-06-26T11:57:00.000Z';
+const RUN_FINISHED_AT = '2026-06-26T11:59:00.000Z';
+
+const RUN_RESPONSE: WorkflowRunDetailResponseDto = workflowRunDetailDto({
+  id: RUN_ID,
+  project_id: PROJECT_ID,
+  name: 'deploy-web',
+  status: 'succeeded',
+  started_at: RUN_STARTED_AT,
+  finished_at: RUN_FINISHED_AT,
+  has_started_job_execution: true,
+  jobs: [
+    workflowJobDto({
+      key: 'build',
+      name: 'build',
+      status: 'succeeded',
+      position: 0,
+    }),
+    workflowJobDto({
+      key: 'deploy',
+      name: 'deploy',
+      status: 'succeeded',
+      position: 1,
+      dependencies: ['build'],
+    }),
+    workflowJobDto({
+      key: 'notify',
+      name: 'notify',
+      status: 'succeeded',
+      position: 2,
+      dependencies: ['deploy'],
+    }),
+  ],
+});
+const RUN_ATTEMPTS_RESPONSE = runAttemptsResponseDto({attempts: []});
+
+const withRunApi: Decorator = (Story) => (
+  <RunWorkspaceStoryProviders>
+    <Story />
+  </RunWorkspaceStoryProviders>
+);
+
+const meta = {
+  title: 'Workflows/WorkflowRunView',
+  component: WorkflowRunView,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      defaultViewport: 'wide',
+      options: {
+        wide: {
+          name: 'Wide',
+          styles: {width: '1440px', height: '720px'},
+          type: 'desktop',
+        },
+      },
+    },
+    globals: {
+      viewport: {value: 'wide'},
+    },
+    argos: {
+      modes: {dark: {theme: 'dark'}},
+      fitToContent: false,
+    },
+  },
+  decorators: [withRunApi],
+  args: {
+    projectId: PROJECT_ID,
+    workspaceSlug: 'acme',
+    projectSlug: 'platform',
+    workflowRunId: RUN_ID,
+  },
+} satisfies Meta<typeof WorkflowRunView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WideViewport: Story = {};
+
+function RunWorkspaceStoryProviders({children}: {children: ReactNode}) {
+  const [queryClient] = useState(
+    () => new QueryClient({defaultOptions: {queries: {retry: false}}}),
+  );
+  const [configured, setConfigured] = useState(false);
+
+  useEffect(() => {
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: (input) => {
+        const url =
+          input instanceof Request ? input.url : input instanceof URL ? input.href : String(input);
+        const path = new URL(url, 'https://api.example.test').pathname;
+        const response =
+          path === '/annotations'
+            ? {
+                body: {annotations: [], has_more: false, next_cursor: null},
+                status: 200,
+              }
+            : path === `/workflows/runs/${RUN_ID}/attempts`
+              ? {body: RUN_ATTEMPTS_RESPONSE, status: 200}
+              : path === `/workflows/runs/${RUN_ID}`
+                ? {body: RUN_RESPONSE, status: 200}
+                : {body: {code: 'not-found'}, status: 404};
+        return new Response(JSON.stringify(response.body), {
+          status: response.status,
+          headers: {'content-type': 'application/json'},
+        });
+      },
+    });
+    setConfigured(true);
+
+    return () => {
+      configureApiClient({baseUrl: '', fetchImpl: undefined});
+    };
+  }, []);
+
+  if (!configured) return null;
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div className="flex h-[720px] min-w-[1440px] w-[1440px] bg-background-subtle-base">
+        {children}
+      </div>
+    </QueryClientProvider>
+  );
+}

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

@@ -49,23 +49,54 @@ describe('WorkflowRunView', () => {
     const summary = await screen.findByRole('region', {name: 'deploy-web'});
     expect(within(summary).getByRole('heading', {name: 'deploy-web'})).toBeInTheDocument();
     expect(screen.getByRole('navigation', {name: 'Run workspace'})).toBeInTheDocument();
-    expect(
-      screen
-        .getByRole('navigation', {name: 'Run workspace'})
-        .closest('[data-run-workspace-layout]'),
-    ).toHaveClass('border-t', 'border-border-neutral-base', 'min-[768px]:flex-row');
+    const workspaceLayout = screen
+      .getByRole('navigation', {name: 'Run workspace'})
+      .closest('[data-run-workspace-layout]');
+    expect(workspaceLayout).toHaveClass('border-t', 'border-border-neutral-base');
+    expect(workspaceLayout).not.toHaveClass('max-w-[1360px]');
+    expect(workspaceLayout?.querySelector('[data-run-workspace-frame]')).toHaveClass(
+      'mx-auto',
+      'w-full',
+      'max-w-[calc(240px_+_1120px)]',
+      'min-[768px]:flex-row',
+    );
     expect(screen.getByRole('link', {name: 'Summary'})).toHaveAttribute('aria-current', 'page');
     expect(screen.getByRole('heading', {name: 'Jobs'})).toBeInTheDocument();
     expect(screen.getByRole('heading', {name: 'Run details'})).toBeInTheDocument();
     expect(screen.getByRole('region', {name: 'All jobs summary'})).toBeInTheDocument();
     expect(screen.getByRole('region', {name: 'Workflow jobs'})).toBeInTheDocument();
-    expect(container.querySelector('[data-run-workspace-content]')).toHaveClass(
+    expect(container.querySelector('[data-run-workspace-content]')).toHaveClass('flex-1');
+    expect(container.querySelector('[data-run-workspace-content]')).not.toHaveClass(
       'bg-background-neutral-base',
-      'flex-1',
     );
     expect(screen.queryByRole('tab', {name: 'Jobs'})).not.toBeInTheDocument();
   });
 
+  test.each([
+    {tab: undefined, region: 'All jobs summary'},
+    {tab: 'source', region: 'Workflow source'},
+    {tab: 'annotations', region: 'Run annotations'},
+  ] as const)('does not cap the $region section at 1120px', async ({tab, region}) => {
+    configureRunFetch();
+
+    renderView({tab});
+
+    const section = await screen.findByRole('region', {name: region});
+    expect(section.firstElementChild).not.toHaveClass('max-w-[1120px]');
+  });
+
+  test('keeps dedicated job content on the full-width data surface', async () => {
+    configureRunFetch();
+
+    renderView({jobContent: <div>Job logs</div>});
+
+    const jobContent = await screen.findByText('Job logs');
+    const workspaceFrame = jobContent.closest('[data-run-workspace-frame]');
+
+    expect(workspaceFrame).toHaveClass('w-full', 'min-[768px]:flex-row');
+    expect(workspaceFrame).not.toHaveClass('max-w-[calc(240px_+_1120px)]');
+  });
+
   test('treats the removed Jobs tab URL as the graph Summary', async () => {
     configureRunFetch();
 

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

@@ -11,6 +11,7 @@ import {
 } from '@shipfox/react-ui/select';
 import {toast} from '@shipfox/react-ui/toast';
 import {Text} from '@shipfox/react-ui/typography';
+import {cn} from '@shipfox/react-ui/utils';
 import {useNavigate} from '@tanstack/react-router';
 import {type ReactNode, useEffect, useMemo} from 'react';
 import {buildRunAnnotationList, type RunAnnotationSummary} from '#core/run-annotation.js';
@@ -53,6 +54,7 @@ import {
 } from './workflow-run-states.js';
 
 type RunWorkspaceSection = Exclude<WorkflowRunTab, 'jobs'>;
+const RUN_WORKSPACE_FRAME_CLASS_NAME = 'mx-auto w-full max-w-[calc(240px_+_1120px)]';
 
 export interface WorkflowRunViewProps {
   projectId: string;
@@ -157,6 +159,7 @@ function RunViewContent({
   const activeSection = runWorkspaceSection(tab);
   const cancelMutation = useCancelWorkflowRunMutation(runData);
   const sourceSnapshot = runData?.sourceSnapshot ?? null;
+  const hasJobContent = Boolean(jobContent);
   const resolvedSelection =
     runData && selection ? resolveWorkflowRunSelection({run: runData, selection}) : undefined;
   const highlightedLineRange = resolvedSelection?.step?.sourceLocation ?? null;
@@ -309,47 +312,52 @@ function RunViewContent({
 
       <div
         data-run-workspace-layout
-        className="flex min-h-0 min-w-0 flex-1 flex-col border-t border-border-neutral-base min-[768px]:flex-row"
+        className="flex min-h-0 min-w-0 flex-1 flex-col border-t border-border-neutral-base"
       >
-        {runData && workspaceSlug && projectSlug ? (
-          <RunWorkspaceNav
-            workspaceSlug={workspaceSlug}
-            projectSlug={projectSlug}
-            run={runData}
-            activeSection={activeSection}
-            currentJobId={activeJobId}
-            jobSearch={jobSearch}
-            annotationSummary={annotationSummary}
-          />
-        ) : (
-          <RunWorkspaceNavSkeleton />
-        )}
-
         <div
-          data-run-workspace-content
-          className="flex min-h-0 min-w-0 flex-1 flex-col bg-background-neutral-base"
+          data-run-workspace-frame
+          className={cn(
+            'flex min-h-0 min-w-0 w-full flex-1 flex-col min-[768px]:flex-row',
+            !hasJobContent && RUN_WORKSPACE_FRAME_CLASS_NAME,
+          )}
         >
-          {runData && jobContent ? (
-            jobContent
-          ) : runData ? (
-            <RunSectionContent
-              section={activeSection}
-              run={runData}
-              annotations={annotations}
-              annotationSummary={annotationSummary}
+          {runData && workspaceSlug && projectSlug ? (
+            <RunWorkspaceNav
               workspaceSlug={workspaceSlug}
               projectSlug={projectSlug}
-              selection={selection}
-              selectedJobId={selection?.jobId}
-              onSelectGraphJob={selectGraphJob}
-              onSelectAnnotationJob={selectAnnotationJob}
-              onClearAnnotationFilters={clearAnnotationFilters}
-              sourceSnapshot={sourceSnapshot}
-              highlightedLineRange={highlightedLineRange}
+              run={runData}
+              activeSection={activeSection}
+              currentJobId={activeJobId}
+              jobSearch={jobSearch}
+              annotationSummary={annotationSummary}
             />
           ) : (
-            <div className="min-h-0 flex-1 overflow-auto p-panel">{loadingOrError}</div>
+            <RunWorkspaceNavSkeleton />
           )}
+
+          <div data-run-workspace-content className="flex min-h-0 min-w-0 flex-1 flex-col">
+            {runData && jobContent ? (
+              jobContent
+            ) : runData ? (
+              <RunSectionContent
+                section={activeSection}
+                run={runData}
+                annotations={annotations}
+                annotationSummary={annotationSummary}
+                workspaceSlug={workspaceSlug}
+                projectSlug={projectSlug}
+                selection={selection}
+                selectedJobId={selection?.jobId}
+                onSelectGraphJob={selectGraphJob}
+                onSelectAnnotationJob={selectAnnotationJob}
+                onClearAnnotationFilters={clearAnnotationFilters}
+                sourceSnapshot={sourceSnapshot}
+                highlightedLineRange={highlightedLineRange}
+              />
+            ) : (
+              <div className="min-h-0 flex-1 overflow-auto p-panel">{loadingOrError}</div>
+            )}
+          </div>
         </div>
       </div>
     </div>
@@ -395,7 +403,7 @@ function RunSectionContent({
         aria-label="All jobs summary"
         className="min-h-0 flex-1 overflow-auto pb-panel pt-[16px]"
       >
-        <div className="mx-auto flex w-full max-w-[1120px] flex-col gap-group px-frame">
+        <div className="mx-auto flex w-full flex-col gap-group px-frame">
           <Text as="h2" className="sr-only">
             All jobs summary
           </Text>
@@ -431,7 +439,7 @@ function RunSectionContent({
       aria-label="Workflow source"
       className="min-h-0 flex-1 overflow-auto pb-panel pt-[16px]"
     >
-      <div className="mx-auto flex min-h-full w-full max-w-[1120px] flex-col px-frame">
+      <div className="mx-auto flex min-h-full w-full flex-col px-frame">
         <Text as="h2" className="sr-only">
           Workflow source
         </Text>
@@ -526,7 +534,7 @@ function RunAnnotationsSection({
       aria-label="Run annotations"
       className="min-h-0 flex-1 overflow-auto pb-panel pt-[16px]"
     >
-      <div className="mx-auto flex w-full max-w-[1120px] flex-col gap-group px-frame">
+      <div className="mx-auto flex w-full flex-col gap-group px-frame">
         <Text as="h2" className="sr-only">
           Annotations
         </Text>
@@ -666,7 +674,7 @@ function RunWorkspaceNavSkeleton() {
   return (
     <aside
       aria-label="Loading run navigation"
-      className="hidden w-240 shrink-0 border-r border-border-neutral-base bg-background-neutral-background p-panel-compact min-[768px]:block"
+      className="hidden w-240 shrink-0 border-r border-border-neutral-base p-panel-compact min-[768px]:block"
     >
       <div className="flex flex-col gap-group">
         <div className="h-32 rounded-4 bg-background-components-subtle" />

package/src/components/workflow-source-panel/workflow-source-content.tsx

@@ -63,8 +63,8 @@ export function WorkflowSourceContent({
             value={item.filename}
             className={cn(
               'min-h-full px-0 pb-0',
-              '[&>div]:rounded-none [&>div]:border-0 [&>div]:bg-background-contrast-base [&>div]:dark:bg-background-contrast-base',
-              '[&_code]:!text-sm [&_code]:!text-foreground-neutral-on-inverted [&_.line]:!text-sm [&_.line]:before:!text-sm [&_.line]:before:!text-foreground-neutral-muted',
+              '[&>div]:rounded-none [&>div]:border-0 [&>div]:bg-background-contrast-base',
+              '[&_code]:!text-sm [&_code]:!text-foreground-contrast-primary [&_.line]:!text-sm [&_.line]:before:!text-sm [&_.line]:before:!text-foreground-contrast-secondary',
             )}
           >
             <CodeBlockContent

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

@@ -12,6 +12,7 @@ import {Callout} from '@shipfox/react-ui/callout';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
 import {Icon, type IconName} from '@shipfox/react-ui/icon';
 import {LoadErrorState} from '@shipfox/react-ui/load-error-state';
+import {Panel} from '@shipfox/react-ui/panel';
 import {RelativeTime, RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
 import {
   Sheet,
@@ -195,7 +196,7 @@ function WorkflowDefinitionsList({
 
   return (
     <>
-      <div className="hidden rounded-8 border border-border-neutral-base md:block">
+      <Panel className="hidden md:flex">
         <Table>
           <TableHeader>
             <TableRow>
@@ -265,7 +266,7 @@ function WorkflowDefinitionsList({
             })}
           </TableBody>
         </Table>
-      </div>
+      </Panel>
 
       <div className="flex flex-col rounded-8 border border-border-neutral-base md:hidden">
         {definitions.map((definition) => {

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

@@ -41,6 +41,19 @@ describe('WorkflowJobDetailPage', () => {
     jobAnnotations.value = [];
   });
 
+  test('lets the job detail route inherit its shell canvas', async () => {
+    configureApiClient({fetchImpl: vi.fn(() => new Promise<Response>(() => undefined))});
+
+    const {container} = renderJobPath();
+
+    expect(await screen.findByRole('region', {name: 'Loading workflow run'})).toBeInTheDocument();
+
+    const pageRoot = container.querySelector('[data-workflow-page-root="job-detail"]');
+
+    expect(pageRoot).not.toBeNull();
+    expect(pageRoot).not.toHaveClass('bg-background-subtle-base');
+  });
+
   test('links the job to its annotations without rendering one', async () => {
     jobAnnotations.value = [
       {
@@ -88,6 +101,7 @@ describe('WorkflowJobDetailPage', () => {
   });
 
   test('resolves an exact job execution and step attempt from a deep link', async () => {
+    const user = userEvent.setup();
     configureApiClient({fetchImpl: vi.fn(jobDetailFetch)});
 
     renderJobPath(
@@ -104,6 +118,24 @@ describe('WorkflowJobDetailPage', () => {
       await screen.findByRole('region', {name: 'tests output, attempt 2'}),
     ).toBeInTheDocument();
     expect(screen.getByRole('region', {name: 'release logs'})).toBeInTheDocument();
+    expect(screen.getByRole('textbox', {name: 'Search logs'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Refresh logs'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Log settings'})).toBeInTheDocument();
+    const testsAttempt = screen.getByRole('button', {name: 'tests, Succeeded, attempt 2'});
+    await user.click(testsAttempt);
+    await waitFor(() =>
+      expect(
+        screen.queryByRole('region', {name: 'tests output, attempt 2'}),
+      ).not.toBeInTheDocument(),
+    );
+    expect(screen.getByRole('textbox', {name: 'Search logs'})).toBeDisabled();
+    expect(screen.getByRole('button', {name: 'Refresh logs'})).toBeDisabled();
+
+    await user.click(testsAttempt);
+    expect(
+      await screen.findByRole('region', {name: 'tests output, attempt 2'}),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('textbox', {name: 'Search logs'})).not.toBeDisabled();
     expect(screen.queryByRole('tab')).not.toBeInTheDocument();
     expect(screen.getByRole('img', {name: 'Job status: Succeeded'})).toBeInTheDocument();
     expect(screen.getByRole('heading', {name: 'deploy-web'})).toBeInTheDocument();

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

@@ -56,7 +56,10 @@ export function WorkflowJobDetailPage({
     [navigate],
   );
   return (
-    <div className="flex min-h-0 flex-1 overflow-hidden bg-background-neutral-background">
+    <div
+      data-workflow-page-root="job-detail"
+      className="flex min-h-0 min-w-0 flex-1 overflow-hidden"
+    >
       <WorkflowRunView
         projectId={projectId}
         workspaceSlug={workspaceSlug}
@@ -67,6 +70,7 @@ export function WorkflowJobDetailPage({
         jobSearch={search}
         jobContent={
           <JobDetailView
+            key={jobId}
             workspaceSlug={workspaceSlug}
             projectSlug={projectSlug}
             workflowRunId={workflowRunId}

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

@@ -17,7 +17,7 @@ export function WorkflowRunDetailPage({
   search = {},
 }: WorkflowRunDetailPageProps) {
   return (
-    <div className="flex min-h-0 flex-1 overflow-hidden bg-background-neutral-background">
+    <div data-workflow-page-root="run-detail" className="flex min-h-0 flex-1 overflow-hidden">
       <WorkflowRunView
         projectId={projectId}
         workspaceSlug={workspaceSlug}

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

@@ -49,17 +49,15 @@ 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-frame py-frame">
-        <WorkflowRunList
-          projectId={projectId}
-          workspaceSlug={workspaceSlug}
-          projectSlug={projectSlug}
-          search={search}
-          onFiltersChange={onFiltersChange}
-          onClearFilters={onClearFilters}
-        />
-      </div>
+    <div data-workflow-page-root="runs" className="flex min-h-0 flex-1 flex-col overflow-hidden">
+      <WorkflowRunList
+        projectId={projectId}
+        workspaceSlug={workspaceSlug}
+        projectSlug={projectSlug}
+        search={search}
+        onFiltersChange={onFiltersChange}
+        onClearFilters={onClearFilters}
+      />
     </div>
   );
 }

package/src/pages/workflow-run-pages.test.tsx

@@ -72,6 +72,19 @@ describe('WorkflowRunPages', () => {
     expect(screen.queryByLabelText('Loading workflow run')).not.toBeInTheDocument();
   });
 
+  test('lets the list route inherit its shell canvas and width', async () => {
+    configureApiClient({fetchImpl: vi.fn(() => new Promise<Response>(() => undefined))});
+
+    const {container} = renderRunsPath();
+
+    await screen.findByLabelText('Workflow runs');
+    const pageRoot = container.querySelector('[data-workflow-page-root="runs"]');
+
+    expect(pageRoot).not.toBeNull();
+    expect(pageRoot).not.toHaveClass('bg-background-neutral-base');
+    expect(pageRoot).not.toHaveClass('max-w-[1120px]');
+  });
+
   test('keeps the list route and filters in place instead of redirecting to a run', async () => {
     configureApiClient({fetchImpl: createRunsListFetch()});
 
@@ -184,6 +197,19 @@ describe('WorkflowRunPages', () => {
     expect(currentSearch(router).tab).toBeUndefined();
   });
 
+  test('lets the run detail route inherit its shell canvas', async () => {
+    configureApiClient({fetchImpl: vi.fn(() => new Promise<Response>(() => undefined))});
+
+    const {container} = renderRunPath();
+
+    expect(await screen.findByRole('region', {name: 'Loading workflow run'})).toBeInTheDocument();
+
+    const pageRoot = container.querySelector('[data-workflow-page-root="run-detail"]');
+
+    expect(pageRoot).not.toBeNull();
+    expect(pageRoot).not.toHaveClass('bg-background-subtle-base');
+  });
+
   test('maps the removed Jobs tab URL to the graph Summary', async () => {
     configureApiClient({fetchImpl: createRunDetailFetch()});
 

package/src/routes/job-detail.tsx

@@ -4,7 +4,7 @@ import {validateWorkflowJobSearch, workflowJobRouteParams} from './inputs.js';
 import {ProjectRoute} from './project-route.js';
 
 export default defineRoute({
-  staticData: {layout: 'full-bleed'},
+  staticData: {frame: 'data'},
   validateSearch: validateWorkflowJobSearch,
   component: () => {
     const {workspaceSlug, projectSlug, workflowRunId, jobId} =

package/src/routes/run-detail.tsx

@@ -4,7 +4,7 @@ import {validateWorkflowRunsSearch, workflowRouteParams} from './inputs.js';
 import {ProjectRoute} from './project-route.js';
 
 export default defineRoute({
-  staticData: {layout: 'full-bleed'},
+  staticData: {frame: 'data'},
   validateSearch: validateWorkflowRunsSearch,
   component: () => {
     const {workspaceSlug, projectSlug, workflowRunId} = useRouteParams(workflowRouteParams);

package/src/routes/runs.tsx

@@ -4,7 +4,7 @@ import {validateWorkflowRunsSearch, workflowRouteParams} from './inputs.js';
 import {ProjectRoute} from './project-route.js';
 
 export default defineRoute({
-  staticData: {layout: 'full-bleed'},
+  staticData: {frame: 'data'},
   validateSearch: validateWorkflowRunsSearch,
   component: () => {
     const {workspaceSlug, projectSlug} = useRouteParams(workflowRouteParams);

package/src/routes/workflows.tsx

@@ -3,6 +3,7 @@ import {ProjectWorkflowsPage} from '#pages/project-workflows-page.js';
 import {ProjectRoute} from './project-route.js';
 
 export default defineRoute({
+  staticData: {frame: 'data'},
   component: () => {
     return (
       <ProjectRoute>{(project) => <ProjectWorkflowsPage projectId={project.id} />}</ProjectRoute>