@shipfox/client-workflows 5.0.0 → 6.0.1

package/src/index.ts

@@ -5,6 +5,7 @@ export type {
   JobExecutionStatus,
   JobExecutionTime,
   JobStatus,
+  ManualWorkflowLaunch,
   Step,
   StepAttempt,
   StepAttemptDisplayDuration,
@@ -40,6 +41,9 @@ export {
   useWorkflowRunQuery,
   useWorkflowRunsInfiniteQuery,
   type WorkflowRunFilters,
+  workflowRunAttemptsQueryOptions,
+  workflowRunQueryOptions,
+  workflowRunsInfiniteQueryOptions,
   workflowRunsQueryKeys,
 } from './hooks/api/workflow-runs.js';
 export {ProjectWorkflowsPage} from './pages/project-workflows-page.js';

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

@@ -243,5 +243,5 @@ function baseDefinitionsDto() {
 }
 
 function runDto() {
-  return {run_id: '66666666-6666-4666-8666-666666666666'};
+  return {workflow_run_id: '66666666-6666-4666-8666-666666666666'};
 }

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

@@ -1,6 +1,11 @@
-import type {DefinitionDto, DefinitionSyncSummaryDto} from '@shipfox/api-definitions-dto';
 import {ApiError} from '@shipfox/client-api';
-import {SourceStrip, useDefinitionsInfiniteQuery, useProjectQuery} from '@shipfox/client-projects';
+import {
+  type Definition,
+  type DefinitionSyncSummary,
+  SourceStrip,
+  useDefinitionsInfiniteQuery,
+  useProjectQuery,
+} from '@shipfox/client-projects';
 import {QueryLoadError} from '@shipfox/client-ui';
 import {Button} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
@@ -42,14 +47,14 @@ function ProjectWorkflowsPageInner({projectId}: {projectId: string}) {
   const projectQuery = useProjectQuery(projectId);
   const definitionsQuery = useDefinitionsInfiniteQuery(projectId);
   const fireManual = useFireManualWorkflowMutation();
-  const [selectedDefinition, setSelectedDefinition] = useState<DefinitionDto | null>(null);
+  const [selectedDefinition, setSelectedDefinition] = useState<Definition | null>(null);
   const [runError, setRunError] = useState<{definitionId: string; message: string} | null>(null);
   const definitions = definitionsQuery.data?.pages.flatMap((page) => page.definitions) ?? [];
   const sync = definitionsQuery.data?.pages[0]?.sync;
 
-  async function handleRun(definition: DefinitionDto) {
+  async function handleRun(definition: Definition) {
     setRunError(null);
-    if (!definition.manual_trigger) return;
+    if (!definition.manualTrigger) return;
     try {
       await fireManual.mutateAsync({projectId, definitionId: definition.id});
       toast.success('Run queued');
@@ -91,8 +96,8 @@ function ProjectWorkflowsPageInner({projectId}: {projectId: string}) {
           </header>
 
           <SourceStrip
-            connectionId={projectQuery.data.source.connection_id}
-            externalRepositoryId={projectQuery.data.source.external_repository_id}
+            connectionId={projectQuery.data.source.connectionId}
+            externalRepositoryId={projectQuery.data.source.externalRepositoryId}
             sync={sync}
             isPending={definitionsQuery.isPending}
           />
@@ -148,10 +153,10 @@ function WorkflowDefinitionsList({
   onOpenDefinition,
   onRun,
 }: {
-  definitions: DefinitionDto[];
+  definitions: Definition[];
   isPending: boolean;
   isError: boolean;
-  sync: DefinitionSyncSummaryDto | null;
+  sync: DefinitionSyncSummary | null;
   runError: {definitionId: string; message: string} | null;
   runningDefinitionId: string | null;
   hasNextPage: boolean;
@@ -159,8 +164,8 @@ function WorkflowDefinitionsList({
   isFetchNextPageError: boolean;
   onRetry: () => void;
   onLoadMore: () => void;
-  onOpenDefinition: (definition: DefinitionDto) => void;
-  onRun: (definition: DefinitionDto) => void;
+  onOpenDefinition: (definition: Definition) => void;
+  onRun: (definition: Definition) => void;
 }) {
   if (isPending) {
     return (
@@ -232,7 +237,7 @@ function WorkflowDefinitionsList({
                           {definition.name}
                         </Text>
                         <Code className="truncate text-foreground-neutral-muted">
-                          {definition.config_path ?? 'Manual definition'}
+                          {definition.configPath ?? 'Manual definition'}
                         </Code>
                       </button>
                       {runErrorMessage ? (
@@ -243,10 +248,10 @@ function WorkflowDefinitionsList({
                     </div>
                   </TableCell>
                   <TableCell className="text-foreground-neutral-muted">
-                    <RelativeTime value={definition.updated_at} />
+                    <RelativeTime value={definition.updatedAt} />
                   </TableCell>
                   <TableCell>
-                    {definition.manual_trigger ? (
+                    {definition.manualTrigger ? (
                       <div className="flex justify-end opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
                         <Button size="xs" isLoading={isRunning} onClick={() => onRun(definition)}>
                           Run
@@ -287,15 +292,15 @@ function WorkflowDefinitionsList({
                     {definition.name}
                   </Text>
                   <Code className="break-words text-foreground-neutral-muted">
-                    {definition.config_path ?? 'Manual definition'}
+                    {definition.configPath ?? 'Manual definition'}
                   </Code>
                 </div>
               </button>
               <div className="flex items-center justify-between gap-8">
                 <Text size="xs" className="text-foreground-neutral-muted">
-                  Updated <RelativeTime value={definition.updated_at} />
+                  Updated <RelativeTime value={definition.updatedAt} />
                 </Text>
-                {definition.manual_trigger ? (
+                {definition.manualTrigger ? (
                   <Button size="sm" isLoading={isRunning} onClick={() => onRun(definition)}>
                     Run
                   </Button>
@@ -337,12 +342,12 @@ function sourceIcon(source: 'manual' | 'vcs'): IconName {
   return source === 'vcs' ? ('gitBranchLine' as IconName) : ('terminalLine' as IconName);
 }
 
-function WorkflowEmptyState({sync}: {sync: DefinitionSyncSummaryDto | null}) {
+function WorkflowEmptyState({sync}: {sync: DefinitionSyncSummary | null}) {
   const message =
-    sync?.status === 'failed' && sync.last_error_code === 'no-workflow-files'
+    sync?.status === 'failed' && sync.lastErrorCode === 'no-workflow-files'
       ? 'No workflow files found under .shipfox/workflows/.'
       : sync?.status === 'failed'
-        ? (sync.last_error_message ?? 'Workflow definitions could not be synced.')
+        ? (sync.lastErrorMessage ?? 'Workflow definitions could not be synced.')
         : sync?.status === 'syncing'
           ? 'Workflow definitions are being discovered.'
           : sync?.status === 'succeeded'
@@ -352,7 +357,7 @@ function WorkflowEmptyState({sync}: {sync: DefinitionSyncSummaryDto | null}) {
   return <EmptyState icon="flowChart" title="No workflows" description={message} />;
 }
 
-function WorkflowSyncAlert({sync}: {sync: DefinitionSyncSummaryDto | null | undefined}) {
+function WorkflowSyncAlert({sync}: {sync: DefinitionSyncSummary | null | undefined}) {
   if (sync?.status !== 'failed') return null;
 
   return (
@@ -362,7 +367,7 @@ function WorkflowSyncAlert({sync}: {sync: DefinitionSyncSummaryDto | null | unde
           Workflow sync failed
         </Text>
         <Text size="sm">
-          {sync.last_error_message ?? 'The latest workflow sync failed before definitions updated.'}
+          {sync.lastErrorMessage ?? 'The latest workflow sync failed before definitions updated.'}
         </Text>
       </div>
     </Callout>
@@ -373,14 +378,14 @@ function DefinitionSheet({
   definition,
   onOpenChange,
 }: {
-  definition: DefinitionDto | null;
+  definition: Definition | null;
   onOpenChange: (open: boolean) => void;
 }) {
   const normalizedJson = definition
     ? JSON.stringify(
         {
-          workflow_document: definition.workflow_document,
-          workflow_model: definition.workflow_model,
+          workflow_document: definition.workflowDocument,
+          workflow_model: definition.workflowModel,
         },
         null,
         2,
@@ -395,7 +400,7 @@ function DefinitionSheet({
             <SheetHeader>
               <SheetTitle>{definition.name}</SheetTitle>
               <SheetDescription>
-                {definition.config_path ?? 'Manual workflow definition'}
+                {definition.configPath ?? 'Manual workflow definition'}
               </SheetDescription>
             </SheetHeader>
             <SheetBody className="gap-18">

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

@@ -257,11 +257,12 @@ describe('WorkflowRunPage', () => {
 function renderRunsPath(search = '') {
   return renderProjectPage(
     `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs${search}`,
-    ({workflowRunId}) => (
+    ({workflowRunId, search}) => (
       <WorkflowRunPage
         workspaceId={PROJECT_TEST_WID}
         projectId={PROJECT_ID}
         workflowRunId={workflowRunId}
+        search={search}
       />
     ),
   );
@@ -270,11 +271,12 @@ function renderRunsPath(search = '') {
 function renderRunPath(search = '') {
   return renderProjectPage(
     `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${RUN_ID}${search}`,
-    ({workflowRunId}) => (
+    ({workflowRunId, search}) => (
       <WorkflowRunPage
         workspaceId={PROJECT_TEST_WID}
         projectId={PROJECT_ID}
         workflowRunId={workflowRunId}
+        search={search}
       />
     ),
   );

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

@@ -1,20 +1,17 @@
-import {useNavigate, useSearch} from '@tanstack/react-router';
+import {useNavigate} from '@tanstack/react-router';
 import {useCallback, useEffect} from 'react';
 import {WorkflowRunList} from '#components/workflow-run-list/workflow-run-list.js';
 import {WorkflowRunView} from '#components/workflow-run-view/index.js';
-import {
-  type WorkflowRunSelectionInput,
-  withoutWorkflowRunSelectionSearch,
-  withWorkflowRunSelectionSearch,
-  workflowRunSelectionFromSearch,
-} from '#core/workflow-run-url-state.js';
+import type {WorkflowRunSelectionInput} from '#core/workflow-run-url-state.js';
 import {useWorkflowRunsInfiniteQuery} from '#hooks/api/workflow-runs.js';
+import {type WorkflowRunsSearch, workflowRunSearchParams} from '#routes/inputs.js';
 import {WorkflowRunFirstTimeUse} from './workflow-run-first-time-use.js';
 
 interface WorkflowRunPageProps {
   workspaceId: string;
   projectId: string;
   workflowRunId?: string | undefined;
+  search?: WorkflowRunsSearch;
 }
 
 /**
@@ -28,6 +25,7 @@ function useWorkflowRunPageTarget(
   workspaceId: string,
   projectId: string,
   workflowRunId: string | undefined,
+  search: WorkflowRunsSearch,
 ) {
   const navigate = useNavigate();
   const {data, isPending} = useWorkflowRunsInfiniteQuery(projectId, {});
@@ -42,28 +40,30 @@ function useWorkflowRunPageTarget(
     navigate({
       to: '/workspaces/$wid/projects/$pid/runs/$workflowRunId',
       params: {wid: workspaceId, pid: projectId, workflowRunId: firstWorkflowRunId},
-      search: ((previous: Record<string, unknown>) =>
-        withoutWorkflowRunSelectionSearch(previous)) as never,
+      search: workflowRunSearchParams(search, {}),
       replace: true,
     });
-  }, [navigate, workspaceId, projectId, workflowRunId, isLoaded, firstWorkflowRunId]);
+  }, [navigate, workspaceId, projectId, workflowRunId, isLoaded, firstWorkflowRunId, search]);
 
   return {hasNoRuns: isLoaded && firstWorkflowRunId === undefined};
 }
 
-export function WorkflowRunPage({workspaceId, projectId, workflowRunId}: WorkflowRunPageProps) {
-  const {hasNoRuns} = useWorkflowRunPageTarget(workspaceId, projectId, workflowRunId);
+export function WorkflowRunPage({
+  workspaceId,
+  projectId,
+  workflowRunId,
+  search = {},
+}: WorkflowRunPageProps) {
+  const {hasNoRuns} = useWorkflowRunPageTarget(workspaceId, projectId, workflowRunId, search);
   const navigate = useNavigate();
-  const search = useSearch({strict: false}) as Record<string, unknown>;
-  const selection = workflowRunSelectionFromSearch(search);
+  const selection: WorkflowRunSelectionInput = search;
   const onSelectionChange = useCallback(
     (nextSelection: WorkflowRunSelectionInput) => {
       navigate({
-        search: ((previous: Record<string, unknown>) =>
-          withWorkflowRunSelectionSearch(previous, nextSelection)) as never,
+        search: workflowRunSearchParams(search, nextSelection) as never,
       });
     },
-    [navigate],
+    [navigate, search],
   );
 
   if (!workflowRunId && hasNoRuns) {
@@ -76,6 +76,11 @@ export function WorkflowRunPage({workspaceId, projectId, workflowRunId}: Workflo
         workspaceId={workspaceId}
         projectId={projectId}
         selectedWorkflowRunId={workflowRunId}
+        search={search.search ?? ''}
+        statusFilter={search.status ?? 'all'}
+        onFiltersChange={(filters) =>
+          navigate({search: workflowRunSearchParams({...search, ...filters}) as never})
+        }
       />
       <WorkflowRunView
         workspaceId={workspaceId}

package/src/routes/inputs.test.ts

@@ -0,0 +1,22 @@
+import {validateWorkflowRunsSearch, workflowRouteParams} from './inputs.js';
+
+describe('workflow route inputs', () => {
+  it('normalizes malformed search values to safe defaults', () => {
+    expect(validateWorkflowRunsSearch({search: ['unexpected'], status: 'unknown'})).toEqual({});
+    expect(validateWorkflowRunsSearch({status: 'failed', runAttempt: '2'})).toEqual({
+      status: 'failed',
+      runAttempt: 2,
+    });
+  });
+
+  it('requires workspace and project path parameters', () => {
+    expect(workflowRouteParams({wid: 'workspace-1', pid: 'project-1'})).toEqual({
+      wid: 'workspace-1',
+      pid: 'project-1',
+    });
+    expect(() => workflowRouteParams({wid: 'workspace-1'})).toThrow(
+      'Workflow route is missing required path parameters.',
+    );
+    expect(() => workflowRouteParams({wid: 'workspace-1', pid: null})).toThrow();
+  });
+});

package/src/routes/inputs.ts

@@ -0,0 +1,58 @@
+import type {WorkflowRunListStatusFilter} from '#components/workflow-run-list/types.js';
+import type {WorkflowRunSelectionInput} from '#core/workflow-run-url-state.js';
+
+export interface WorkflowRunsSearch extends WorkflowRunSelectionInput {
+  search?: string;
+  status?: WorkflowRunListStatusFilter;
+}
+
+export function validateWorkflowRunsSearch(input: Record<string, unknown>): WorkflowRunsSearch {
+  const search = string(input.search);
+  const status = input.status === 'failed' || input.status === 'running' ? input.status : 'all';
+  const runAttempt = positiveInteger(input.runAttempt);
+  return {
+    ...(search ? {search} : {}),
+    ...(status === 'all' ? {} : {status}),
+    ...(string(input.job) ? {jobId: string(input.job)} : {}),
+    ...(string(input.jobExecution) ? {jobExecutionId: string(input.jobExecution)} : {}),
+    ...(string(input.step) ? {stepId: string(input.step)} : {}),
+    ...(string(input.stepAttempt) ? {stepAttemptId: string(input.stepAttempt)} : {}),
+    ...(runAttempt ? {runAttempt} : {}),
+  };
+}
+
+export function workflowRunSearchParams(
+  search: WorkflowRunsSearch,
+  selection: WorkflowRunSelectionInput = search,
+) {
+  return {
+    ...(search.search ? {search: search.search} : {}),
+    ...(search.status && search.status !== 'all' ? {status: search.status} : {}),
+    ...(selection.jobId ? {job: selection.jobId} : {}),
+    ...(selection.jobExecutionId ? {jobExecution: selection.jobExecutionId} : {}),
+    ...(selection.stepId ? {step: selection.stepId} : {}),
+    ...(selection.stepAttemptId ? {stepAttempt: selection.stepAttemptId} : {}),
+    ...(selection.runAttempt ? {runAttempt: String(selection.runAttempt)} : {}),
+  };
+}
+
+export function workflowRouteParams(input: Record<string, unknown>): {
+  wid: string;
+  pid: string;
+  workflowRunId?: string;
+} {
+  const wid = string(input.wid);
+  const pid = string(input.pid);
+  if (!wid || !pid) throw new Error('Workflow route is missing required path parameters.');
+  const workflowRunId = string(input.workflowRunId);
+  return workflowRunId ? {wid, pid, workflowRunId} : {wid, pid};
+}
+
+function string(value: unknown): string | undefined {
+  return typeof value === 'string' && value.length > 0 ? value : undefined;
+}
+
+function positiveInteger(value: unknown): number | undefined {
+  const number = typeof value === 'string' ? Number(value) : value;
+  return typeof number === 'number' && Number.isInteger(number) && number > 0 ? number : undefined;
+}

package/src/routes/run-detail.tsx

@@ -1,15 +1,19 @@
-import {defineRoute} from '@shipfox/client-shell/runtime';
-import {useParams} from '@tanstack/react-router';
+import {defineRoute, useRouteParams, useRouteSearch} from '@shipfox/client-shell/runtime';
 import {WorkflowRunPage} from '#pages/workflow-run-page.js';
+import {validateWorkflowRunsSearch, workflowRouteParams} from './inputs.js';
 
 export default defineRoute({
   staticData: {layout: 'full-bleed'},
+  validateSearch: validateWorkflowRunsSearch,
   component: () => {
-    const {wid, pid, workflowRunId} = useParams({strict: false}) as {
-      wid: string;
-      pid: string;
-      workflowRunId: string;
-    };
-    return <WorkflowRunPage workspaceId={wid} projectId={pid} workflowRunId={workflowRunId} />;
+    const {wid, pid, workflowRunId} = useRouteParams(workflowRouteParams);
+    return (
+      <WorkflowRunPage
+        workspaceId={wid}
+        projectId={pid}
+        workflowRunId={workflowRunId}
+        search={useRouteSearch(validateWorkflowRunsSearch)}
+      />
+    );
   },
 });

package/src/routes/runs.tsx

@@ -1,11 +1,18 @@
-import {defineRoute} from '@shipfox/client-shell/runtime';
-import {useParams} from '@tanstack/react-router';
+import {defineRoute, useRouteParams, useRouteSearch} from '@shipfox/client-shell/runtime';
 import {WorkflowRunPage} from '#pages/workflow-run-page.js';
+import {validateWorkflowRunsSearch, workflowRouteParams} from './inputs.js';
 
 export default defineRoute({
   staticData: {layout: 'full-bleed'},
+  validateSearch: validateWorkflowRunsSearch,
   component: () => {
-    const {wid, pid} = useParams({strict: false}) as {wid: string; pid: string};
-    return <WorkflowRunPage workspaceId={wid} projectId={pid} />;
+    const {wid, pid} = useRouteParams(workflowRouteParams);
+    return (
+      <WorkflowRunPage
+        workspaceId={wid}
+        projectId={pid}
+        search={useRouteSearch(validateWorkflowRunsSearch)}
+      />
+    );
   },
 });

package/src/routes/workflows.tsx

@@ -1,10 +1,10 @@
-import {defineRoute} from '@shipfox/client-shell/runtime';
-import {useParams} from '@tanstack/react-router';
+import {defineRoute, useRouteParams} from '@shipfox/client-shell/runtime';
 import {ProjectWorkflowsPage} from '#pages/project-workflows-page.js';
+import {workflowRouteParams} from './inputs.js';
 
 export default defineRoute({
   component: () => {
-    const {pid} = useParams({strict: false}) as {pid: string};
+    const {pid} = useRouteParams(workflowRouteParams);
     return <ProjectWorkflowsPage projectId={pid} />;
   },
 });

package/test/fixtures/workflow-run.ts

@@ -11,20 +11,22 @@ import type {
   WorkflowRunStatusDto,
   WorkflowRunStepDetailDto,
 } from '@shipfox/api-workflows-dto';
+import type {
+  Job,
+  Step,
+  StepAttempt,
+  WorkflowRunDetail,
+  WorkflowRunListItem,
+  WorkflowRunListPage,
+} from '#core/workflow-run.js';
 import {
-  type Job,
-  type Step,
-  type StepAttempt,
   toJob,
   toStep,
   toStepAttempt,
   toWorkflowRunDetail,
   toWorkflowRunListItem,
   toWorkflowRunListPage,
-  type WorkflowRunDetail,
-  type WorkflowRunListItem,
-  type WorkflowRunListPage,
-} from '#core/workflow-run.js';
+} from '#hooks/api/workflow-run-mapper.js';
 
 const RUN_ID = '11111111-1111-4111-8111-111111111111';
 const RUN_ATTEMPT_ID = '11111111-1111-4111-8111-111111111112';

package/test/pages.tsx

@@ -10,10 +10,12 @@ import {
   Outlet,
   RouterProvider,
   useParams,
+  useSearch,
 } from '@tanstack/react-router';
 import {type RenderResult, render} from '@testing-library/react';
 import {createStore, Provider as JotaiProvider} from 'jotai';
 import type {ReactElement} from 'react';
+import {validateWorkflowRunsSearch} from '#routes/inputs.js';
 
 // The workflow run page navigates with the router (run rows are links and the page redirects
 // to the first run), so the harness mounts the page under a memory router whose route tree
@@ -41,26 +43,36 @@ export function jsonResponse(body: unknown, init: ResponseInit = {}) {
 
 function createTestRouter(
   path: string,
-  renderPage: (params: {workflowRunId?: string | undefined}) => ReactElement,
+  renderPage: (params: {
+    workflowRunId?: string | undefined;
+    search: ReturnType<typeof validateWorkflowRunsSearch>;
+  }) => ReactElement,
 ) {
   const rootRoute = createRootRoute({component: Outlet});
   const runsRoute = createRoute({
     getParentRoute: () => rootRoute,
     path: '/workspaces/$wid/projects/$pid/runs',
-    component: () => renderPage({}),
+    component: function RunsRoute() {
+      return renderPage({
+        search: validateWorkflowRunsSearch(useSearch({strict: false}) as Record<string, unknown>),
+      });
+    },
   });
   const runDetailRoute = createRoute({
     getParentRoute: () => rootRoute,
     path: '/workspaces/$wid/projects/$pid/runs/$workflowRunId',
     component: function RunDetailRoute() {
       const {workflowRunId} = useParams({strict: false}) as {workflowRunId?: string};
-      return renderPage({workflowRunId});
+      return renderPage({
+        workflowRunId,
+        search: validateWorkflowRunsSearch(useSearch({strict: false}) as Record<string, unknown>),
+      });
     },
   });
   const workflowsRoute = createRoute({
     getParentRoute: () => rootRoute,
     path: '/workspaces/$wid/projects/$pid/workflows',
-    component: () => renderPage({}),
+    component: () => renderPage({search: {}}),
   });
   const modelProviderSettingsRoute = createRoute({
     getParentRoute: () => rootRoute,
@@ -81,7 +93,10 @@ function createTestRouter(
 
 export function renderProjectPage(
   path: string,
-  renderPage: (params: {workflowRunId?: string | undefined}) => ReactElement,
+  renderPage: (params: {
+    workflowRunId?: string | undefined;
+    search: ReturnType<typeof validateWorkflowRunsSearch>;
+  }) => ReactElement,
 ): RenderResult & {
   queryClient: QueryClient;
   router: ReturnType<typeof createTestRouter>;