@shipfox/client-workflows 4.0.0 → 6.0.1

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

@@ -0,0 +1,10 @@
+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} = 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

@@ -1,4 +1,6 @@
 import {configureApiClient} from '@shipfox/client-api';
+import {type AuthState, authStateAtom} from '@shipfox/client-shell/runtime';
+import {Toaster} from '@shipfox/react-ui/toast';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {
   createMemoryHistory,
@@ -8,9 +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
@@ -19,6 +24,15 @@ import type {ReactElement} from 'react';
 // the real route wiring so a redirect re-renders the page with the run it landed on.
 export const PROJECT_TEST_WID = '11111111-1111-4111-8111-111111111111';
 
+// Pages that render components depending on `useActiveWorkspace()` (e.g. the project source
+// strip) need an authenticated workspace matching `$wid` in the atom `client-shell/runtime`
+// reads. A fixed membership id is fine here: nothing in these tests asserts on it.
+const authState: AuthState = {
+  status: 'authenticated',
+  token: 'token',
+  workspaces: [{id: PROJECT_TEST_WID, name: 'Acme', membershipId: 'm-1'}],
+};
+
 export function jsonResponse(body: unknown, init: ResponseInit = {}) {
   return new Response(JSON.stringify(body), {
     status: 200,
@@ -29,22 +43,37 @@ 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({search: {}}),
+  });
   const modelProviderSettingsRoute = createRoute({
     getParentRoute: () => rootRoute,
     path: '/workspaces/$wid/settings/agents',
@@ -53,25 +82,38 @@ function createTestRouter(
 
   return createRouter({
     history: createMemoryHistory({initialEntries: [path]}),
-    routeTree: rootRoute.addChildren([runsRoute, runDetailRoute, modelProviderSettingsRoute]),
+    routeTree: rootRoute.addChildren([
+      runsRoute,
+      runDetailRoute,
+      workflowsRoute,
+      modelProviderSettingsRoute,
+    ]),
   });
 }
 
 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>;
 } {
   const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}});
   const router = createTestRouter(path, renderPage);
+  const store = createStore();
+  store.set(authStateAtom, authState);
 
   configureApiClient({baseUrl: 'https://api.example.test'});
 
   const result = render(
     <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
+      <JotaiProvider store={store}>
+        <RouterProvider router={router} />
+        <Toaster />
+      </JotaiProvider>
     </QueryClientProvider>,
   );