@shipfox/client-workflows 4.0.0 → 6.0.1

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

@@ -0,0 +1,448 @@
+import {ApiError} from '@shipfox/client-api';
+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';
+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 {RelativeTime, RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@shipfox/react-ui/sheet';
+import {Skeleton} from '@shipfox/react-ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@shipfox/react-ui/table';
+import {toast} from '@shipfox/react-ui/toast';
+import {Code, Header, Text} from '@shipfox/react-ui/typography';
+import {useState} from 'react';
+import {useFireManualWorkflowMutation} from '#hooks/api/workflow-runs.js';
+
+export function ProjectWorkflowsPage({projectId}: {projectId: string}) {
+  return (
+    <RelativeTimeProvider>
+      <ProjectWorkflowsPageInner projectId={projectId} />
+    </RelativeTimeProvider>
+  );
+}
+
+function ProjectWorkflowsPageInner({projectId}: {projectId: string}) {
+  const projectQuery = useProjectQuery(projectId);
+  const definitionsQuery = useDefinitionsInfiniteQuery(projectId);
+  const fireManual = useFireManualWorkflowMutation();
+  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: Definition) {
+    setRunError(null);
+    if (!definition.manualTrigger) return;
+    try {
+      await fireManual.mutateAsync({projectId, definitionId: definition.id});
+      toast.success('Run queued');
+    } catch (error) {
+      const message = errorMessage(error, 'Could not queue run.');
+      setRunError({definitionId: definition.id, message});
+      toast.error(message);
+    }
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-24">
+      {projectQuery.isPending ? (
+        <div className="flex flex-col gap-12">
+          <Skeleton className="h-28 w-1/3" />
+          <Skeleton className="h-18 w-1/2" />
+        </div>
+      ) : null}
+
+      {projectQuery.isError && projectQuery.data === undefined ? (
+        projectQuery.error instanceof ApiError && projectQuery.error.status === 404 ? (
+          <EmptyState
+            icon="errorWarningLine"
+            title="Project not found"
+            description="This project doesn't exist, or you don't have access to it."
+          />
+        ) : (
+          <QueryLoadError query={projectQuery} subject="project" />
+        )
+      ) : null}
+
+      {projectQuery.data ? (
+        <>
+          <header className="flex flex-col gap-4">
+            <Header variant="h2">Workflows</Header>
+            <Text size="sm" className="text-foreground-neutral-muted">
+              Synced workflow definitions for this project source.
+            </Text>
+          </header>
+
+          <SourceStrip
+            connectionId={projectQuery.data.source.connectionId}
+            externalRepositoryId={projectQuery.data.source.externalRepositoryId}
+            sync={sync}
+            isPending={definitionsQuery.isPending}
+          />
+
+          <WorkflowSyncAlert sync={sync} />
+
+          <WorkflowDefinitionsList
+            definitions={definitions}
+            isPending={definitionsQuery.isPending}
+            isError={definitionsQuery.isError}
+            sync={sync ?? null}
+            runError={runError}
+            runningDefinitionId={
+              fireManual.isPending && fireManual.variables
+                ? fireManual.variables.definitionId
+                : null
+            }
+            hasNextPage={definitionsQuery.hasNextPage}
+            isFetchingNextPage={definitionsQuery.isFetchingNextPage}
+            isFetchNextPageError={definitionsQuery.isFetchNextPageError}
+            onRetry={() => definitionsQuery.refetch()}
+            onLoadMore={() => definitionsQuery.fetchNextPage()}
+            onOpenDefinition={setSelectedDefinition}
+            onRun={(definition) => {
+              void handleRun(definition);
+            }}
+          />
+        </>
+      ) : null}
+
+      <DefinitionSheet
+        definition={selectedDefinition}
+        onOpenChange={(open) => {
+          if (!open) setSelectedDefinition(null);
+        }}
+      />
+    </div>
+  );
+}
+
+function WorkflowDefinitionsList({
+  definitions,
+  isPending,
+  isError,
+  sync,
+  runError,
+  runningDefinitionId,
+  hasNextPage,
+  isFetchingNextPage,
+  isFetchNextPageError,
+  onRetry,
+  onLoadMore,
+  onOpenDefinition,
+  onRun,
+}: {
+  definitions: Definition[];
+  isPending: boolean;
+  isError: boolean;
+  sync: DefinitionSyncSummary | null;
+  runError: {definitionId: string; message: string} | null;
+  runningDefinitionId: string | null;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchNextPageError: boolean;
+  onRetry: () => void;
+  onLoadMore: () => void;
+  onOpenDefinition: (definition: Definition) => void;
+  onRun: (definition: Definition) => void;
+}) {
+  if (isPending) {
+    return (
+      <div className="flex flex-col gap-8">
+        <Skeleton className="h-40 w-full" />
+        <Skeleton className="h-40 w-full" />
+        <Skeleton className="h-40 w-full" />
+      </div>
+    );
+  }
+
+  if (isError && definitions.length === 0) {
+    return (
+      <LoadErrorState
+        title="Couldn't load workflows"
+        description="Definitions could not be loaded. Source metadata remains visible."
+        onRetry={onRetry}
+        retryLabel="Retry loading workflows"
+      />
+    );
+  }
+
+  if (definitions.length === 0) {
+    return <WorkflowEmptyState sync={sync} />;
+  }
+
+  return (
+    <>
+      <div className="hidden rounded-8 border border-border-neutral-base md:block">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-40"></TableHead>
+              <TableHead>Workflow</TableHead>
+              <TableHead className="w-180">Updated</TableHead>
+              <TableHead className="w-80 text-right"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {definitions.map((definition) => {
+              const runErrorMessage =
+                runError?.definitionId === definition.id ? runError.message : null;
+              const isRunning = runningDefinitionId === definition.id;
+
+              return (
+                // The workflow-name cell holds a `<button>` so the row is
+                // keyboard-reachable (Tab focuses, Enter/Space activates
+                // via native button semantics). The TableRow itself is no
+                // longer clickable — a row-level onClick would be invisible
+                // to keyboard users and require custom keydown handling.
+                // The `group` class on the row still drives the Run button
+                // reveal on hover or focus-within.
+                <TableRow key={definition.id} className="group">
+                  <TableCell>
+                    <Icon
+                      name={sourceIcon(definition.source)}
+                      className="size-16 text-foreground-neutral-muted"
+                      aria-hidden="true"
+                    />
+                  </TableCell>
+                  <TableCell className="max-w-260">
+                    <div className="flex min-w-0 flex-col gap-2">
+                      <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"
+                      >
+                        <Text size="sm" bold className="truncate">
+                          {definition.name}
+                        </Text>
+                        <Code className="truncate text-foreground-neutral-muted">
+                          {definition.configPath ?? 'Manual definition'}
+                        </Code>
+                      </button>
+                      {runErrorMessage ? (
+                        <Text size="xs" className="text-tag-error-text">
+                          {runErrorMessage}
+                        </Text>
+                      ) : null}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-foreground-neutral-muted">
+                    <RelativeTime value={definition.updatedAt} />
+                  </TableCell>
+                  <TableCell>
+                    {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
+                        </Button>
+                      </div>
+                    ) : null}
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex flex-col rounded-8 border border-border-neutral-base md:hidden">
+        {definitions.map((definition) => {
+          const runErrorMessage =
+            runError?.definitionId === definition.id ? runError.message : null;
+          const isRunning = runningDefinitionId === definition.id;
+
+          return (
+            <div
+              key={definition.id}
+              className="flex flex-col gap-10 border-b border-border-neutral-base p-12 last:border-b-0"
+            >
+              <button
+                type="button"
+                className="flex min-w-0 items-start gap-10 text-left"
+                onClick={() => onOpenDefinition(definition)}
+              >
+                <Icon
+                  name={sourceIcon(definition.source)}
+                  className="size-16 shrink-0 text-foreground-neutral-muted"
+                  aria-hidden="true"
+                />
+                <div className="flex min-w-0 flex-col gap-4">
+                  <Text size="sm" bold className="break-words">
+                    {definition.name}
+                  </Text>
+                  <Code className="break-words text-foreground-neutral-muted">
+                    {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.updatedAt} />
+                </Text>
+                {definition.manualTrigger ? (
+                  <Button size="sm" isLoading={isRunning} onClick={() => onRun(definition)}>
+                    Run
+                  </Button>
+                ) : null}
+              </div>
+              {runErrorMessage ? (
+                <Text size="xs" className="text-tag-error-text">
+                  {runErrorMessage}
+                </Text>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+
+      {isFetchNextPageError ? (
+        <Callout role="alert" type="error">
+          <div className="flex items-center justify-between gap-12">
+            <Text size="sm">Could not load more workflows.</Text>
+            <Button size="sm" variant="secondary" onClick={onLoadMore}>
+              Retry
+            </Button>
+          </div>
+        </Callout>
+      ) : null}
+
+      {hasNextPage ? (
+        <div className="flex justify-center">
+          <Button size="sm" variant="secondary" isLoading={isFetchingNextPage} onClick={onLoadMore}>
+            Load more
+          </Button>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+function sourceIcon(source: 'manual' | 'vcs'): IconName {
+  return source === 'vcs' ? ('gitBranchLine' as IconName) : ('terminalLine' as IconName);
+}
+
+function WorkflowEmptyState({sync}: {sync: DefinitionSyncSummary | null}) {
+  const message =
+    sync?.status === 'failed' && sync.lastErrorCode === 'no-workflow-files'
+      ? 'No workflow files found under .shipfox/workflows/.'
+      : sync?.status === 'failed'
+        ? (sync.lastErrorMessage ?? 'Workflow definitions could not be synced.')
+        : sync?.status === 'syncing'
+          ? 'Workflow definitions are being discovered.'
+          : sync?.status === 'succeeded'
+            ? 'No workflow definitions found.'
+            : 'Workflow sync has not reported yet.';
+
+  return <EmptyState icon="flowChart" title="No workflows" description={message} />;
+}
+
+function WorkflowSyncAlert({sync}: {sync: DefinitionSyncSummary | null | undefined}) {
+  if (sync?.status !== 'failed') return null;
+
+  return (
+    <Callout role="alert" type="error">
+      <div className="flex flex-col gap-4">
+        <Text size="sm" bold>
+          Workflow sync failed
+        </Text>
+        <Text size="sm">
+          {sync.lastErrorMessage ?? 'The latest workflow sync failed before definitions updated.'}
+        </Text>
+      </div>
+    </Callout>
+  );
+}
+
+function DefinitionSheet({
+  definition,
+  onOpenChange,
+}: {
+  definition: Definition | null;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const normalizedJson = definition
+    ? JSON.stringify(
+        {
+          workflow_document: definition.workflowDocument,
+          workflow_model: definition.workflowModel,
+        },
+        null,
+        2,
+      )
+    : '';
+
+  return (
+    <Sheet open={Boolean(definition)} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-[560px]">
+        {definition ? (
+          <>
+            <SheetHeader>
+              <SheetTitle>{definition.name}</SheetTitle>
+              <SheetDescription>
+                {definition.configPath ?? 'Manual workflow definition'}
+              </SheetDescription>
+            </SheetHeader>
+            <SheetBody className="gap-18">
+              <div className="grid w-full gap-10">
+                <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">
+                <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">
+                  <Code as="code" className="whitespace-pre text-foreground-neutral-base">
+                    {normalizedJson}
+                  </Code>
+                </pre>
+              </div>
+            </SheetBody>
+          </>
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function Metadata({label, value}: {label: string; value: string}) {
+  return (
+    <div className="min-w-0 py-12 first:pt-0 last:pb-0">
+      <Text size="xs" className="text-foreground-neutral-muted">
+        {label}
+      </Text>
+      <Text size="sm" className="break-words">
+        {value}
+      </Text>
+    </div>
+  );
+}
+
+function errorMessage(error: unknown, fallback: string) {
+  if (error instanceof ApiError && error.message) return error.message;
+  if (error instanceof Error && error.message) return error.message;
+  return fallback;
+}

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)}
+      />
+    );
   },
 });