@shipfox/client-projects 0.2.0

package/src/project-error.ts

@@ -0,0 +1,106 @@
+import {ApiError} from '@shipfox/client-api';
+
+export interface ProjectErrorCopy {
+  title: string;
+  message: string;
+  existingProjectId?: string | undefined;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function apiDetails(error: ApiError): Record<string, unknown> {
+  if (!isRecord(error.details)) return {};
+  const details = error.details.details;
+  return isRecord(details) ? details : {};
+}
+
+function stringDetail(error: ApiError, key: string): string | undefined {
+  const value = apiDetails(error)[key];
+  return typeof value === 'string' ? value : undefined;
+}
+
+function numberDetail(error: ApiError, key: string): number | undefined {
+  const value = apiDetails(error)[key];
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+
+export function projectErrorCopy(error: unknown): ProjectErrorCopy {
+  if (!(error instanceof ApiError)) {
+    return {
+      title: 'Something went wrong',
+      message: 'Try again in a moment.',
+    };
+  }
+
+  if (error.code === 'network-error') {
+    return {
+      title: 'Network problem',
+      message: 'We could not reach the API. Check your connection and try again.',
+    };
+  }
+  if (error.code === 'repository-not-found') {
+    return {
+      title: 'Repository not found',
+      message: 'Choose another repository and try again.',
+    };
+  }
+  if (error.code === 'source-connection-not-found') {
+    return {
+      title: 'Source connection not found',
+      message: 'Reconnect source control and try again.',
+    };
+  }
+  if (error.code === 'source-connection-inactive') {
+    return {
+      title: 'Source connection inactive',
+      message: 'Reconnect or choose another source-control connection.',
+    };
+  }
+  if (error.code === 'access-denied') {
+    return {
+      title: 'Repository access denied',
+      message: 'The selected connection cannot access this repository.',
+    };
+  }
+  if (error.code === 'rate-limited') {
+    const retryAfter = numberDetail(error, 'retry_after_seconds');
+    return {
+      title: 'Provider rate limited',
+      message: retryAfter
+        ? `Try again in about ${retryAfter} seconds.`
+        : 'The provider is asking us to slow down. Try again shortly.',
+    };
+  }
+  if (error.code === 'timeout') {
+    return {
+      title: 'Provider timed out',
+      message: 'The provider did not respond in time. Try again.',
+    };
+  }
+  if (error.code === 'provider-unavailable') {
+    return {
+      title: 'Provider unavailable',
+      message: 'The provider is unavailable right now. Try again shortly.',
+    };
+  }
+  if (error.code === 'malformed-provider-response') {
+    return {
+      title: 'Provider response changed',
+      message: 'The provider returned data Shipfox could not understand.',
+    };
+  }
+  if (error.code === 'project-already-exists') {
+    return {
+      title: 'Project already exists',
+      message: 'This repository is already connected to a Shipfox project.',
+      existingProjectId: stringDetail(error, 'existing_project_id'),
+    };
+  }
+
+  return {
+    title: 'Project request failed',
+    message: error.message || 'Try again in a moment.',
+  };
+}

package/src/routes/create-project.tsx

@@ -0,0 +1,4 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {CreateProjectPage} from '#pages/create-project-page.js';
+
+export default defineRoute({component: CreateProjectPage});

package/src/routes/home.tsx

@@ -0,0 +1,4 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {HomeRouter} from '#pages/home-router.js';
+
+export default defineRoute({component: HomeRouter});

package/src/routes/project-index.tsx

@@ -0,0 +1,11 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {redirect} from '@tanstack/react-router';
+
+export default defineRoute({
+  beforeLoad: ({params}: {params: {wid: string; pid: string}}) => {
+    throw redirect({
+      to: '/workspaces/$wid/projects/$pid/runs',
+      params: {wid: params.wid, pid: params.pid},
+    });
+  },
+});

package/src/routes/workflows.tsx

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

package/test/pages.tsx

@@ -0,0 +1,151 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {type AuthState, authStateAtom} from '@shipfox/client-auth';
+import {Toaster} from '@shipfox/react-ui/toast';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+  useParams,
+} 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 {CreateProjectPage} from '#pages/create-project-page.js';
+import {ProjectWorkflowsPage} from '#pages/project-workflows-page.js';
+import {ProjectsHubPage} from '#pages/projects-hub-page.js';
+
+// All test renders that exercise pages requiring `useActiveWorkspace()` mount
+// under `/workspaces/$wid`. The seeded workspace id (see authState) is the wid
+// used in routes.
+export const PROJECT_TEST_WID = '11111111-1111-4111-8111-111111111111';
+
+const authState: AuthState = {
+  status: 'authenticated',
+  token: 'token',
+  user: {
+    id: '22222222-2222-4222-8222-222222222222',
+    email: 'user@example.com',
+    name: null,
+    email_verified_at: new Date().toISOString(),
+    status: 'active',
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  },
+  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,
+    headers: {'content-type': 'application/json'},
+    ...init,
+  });
+}
+
+// The param-carrying routes below declare `$pid`/`$runId` in their path, so the value is
+// always present when their fallback page renders. A missing param means the harness
+// wired a route wrong — fail loudly instead of rendering a page with a fabricated id.
+function requireParam(value: string | undefined, name: string): string {
+  if (value === undefined) {
+    throw new Error(`Test router: route param "${name}" is missing`);
+  }
+  return value;
+}
+
+function createTestRouter(path: string, element: ReactElement) {
+  const initialPath = path.split('?')[0] ?? path;
+  const rootRoute = createRootRoute({component: Outlet});
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => (initialPath === '/' ? element : <ProjectsHubPage />),
+  });
+  const workspaceRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/workspaces/$wid',
+    component: () =>
+      initialPath === `/workspaces/${PROJECT_TEST_WID}` ? element : <ProjectsHubPage />,
+  });
+  const workspaceNewProjectRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/workspaces/$wid/projects/new',
+    component: () =>
+      initialPath === `/workspaces/${PROJECT_TEST_WID}/projects/new` ? (
+        element
+      ) : (
+        <CreateProjectPage />
+      ),
+  });
+  const integrationsRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/workspaces/$wid/integrations',
+    component: () => <div>Integrations gallery placeholder</div>,
+  });
+  const modelProviderSettingsRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/workspaces/$wid/settings/agents',
+    component: () => <div>Agent settings placeholder</div>,
+  });
+  const projectDetailRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/workspaces/$wid/projects/$pid',
+    component: () => {
+      const params = useParams({strict: false}) as {pid?: string};
+      if (initialPath === `/workspaces/${PROJECT_TEST_WID}/projects/${params.pid}`) {
+        return element;
+      }
+
+      // The harness only needs to prove project-detail navigation landed on the
+      // Runs surface, so it renders a minimal stand-in rather than depending on
+      // @shipfox/client-workflows.
+      return <h1>Runs</h1>;
+    },
+  });
+  const projectWorkflowsRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/workspaces/$wid/projects/$pid/workflows',
+    component: () => {
+      const params = useParams({strict: false}) as {pid?: string};
+      if (initialPath === `/workspaces/${PROJECT_TEST_WID}/projects/${params.pid}/workflows`) {
+        return element;
+      }
+
+      return <ProjectWorkflowsPage projectId={requireParam(params.pid, 'pid')} />;
+    },
+  });
+
+  return createRouter({
+    history: createMemoryHistory({initialEntries: [path]}),
+    routeTree: rootRoute.addChildren([
+      indexRoute,
+      workspaceRoute,
+      workspaceNewProjectRoute,
+      integrationsRoute,
+      modelProviderSettingsRoute,
+      projectDetailRoute,
+      projectWorkflowsRoute,
+    ]),
+  });
+}
+
+export function renderProjectPage(path: string, element: ReactElement): RenderResult {
+  const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}});
+  const router = createTestRouter(path, element);
+  const store = createStore();
+  store.set(authStateAtom, authState);
+
+  configureApiClient({baseUrl: 'https://api.example.test'});
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <JotaiProvider store={store}>
+        <RouterProvider router={router} />
+        <Toaster />
+      </JotaiProvider>
+    </QueryClientProvider>,
+  );
+}

package/test/setup.ts

@@ -0,0 +1,3 @@
+import {installClientDomTestEnv} from '@shipfox/client-test-setup';
+
+installClientDomTestEnv();

package/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@shipfox/ts-config/react",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["**/*.test.tsx", "**/*.test.ts"]
+}