@shipfox/client-projects 12.0.1 → 13.0.0

package/src/hooks/api/projects.ts

@@ -2,11 +2,13 @@ import {
   createProjectBodySchema,
   listProjectsResponseSchema,
   projectResponseSchema,
+  updateProjectBodySchema,
 } from '@shipfox/api-projects-dto';
 import {checkedApiRequest} from '@shipfox/client-api';
 import {
   type InfiniteData,
   keepPreviousData,
+  type QueryClient,
   queryOptions,
   type UseInfiniteQueryOptions,
   type UseQueryOptions,
@@ -15,13 +17,23 @@ import {
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
-import type {CreateProjectCommand, Project, ProjectList} from '#core/project.js';
+import {useCallback} from 'react';
+import type {
+  CreateProjectCommand,
+  Project,
+  ProjectList,
+  UpdateProjectCommand,
+} from '#core/project.js';
 import {toProject, toProjectList} from './mappers.js';
 
+const PROJECT_LIST_STALE_TIME = 30_000;
+
 export const projectsQueryKeys = {
   all: ['projects'] as const,
   list: (workspaceId: string, search = '') =>
     [...projectsQueryKeys.all, 'list', workspaceId, search] as const,
+  slug: (workspaceId: string, projectSlug: string) =>
+    [...projectsQueryKeys.all, 'slug', workspaceId, projectSlug] as const,
   exists: (workspaceId: string) => [...projectsQueryKeys.all, 'exists', workspaceId] as const,
   detail: (projectId: string) => [...projectsQueryKeys.all, 'detail', projectId] as const,
 };
@@ -32,6 +44,9 @@ type ProjectListQueryKey =
 type ProjectExistenceQueryKey =
   | ReturnType<typeof projectsQueryKeys.exists>
   | readonly ['projects', 'exists'];
+type ProjectSlugQueryKey =
+  | ReturnType<typeof projectsQueryKeys.slug>
+  | readonly ['projects', 'slug'];
 type ProjectDetailQueryKey =
   | ReturnType<typeof projectsQueryKeys.detail>
   | readonly ['projects', 'detail'];
@@ -49,6 +64,12 @@ type ProjectExistenceQueryOptions = UseQueryOptions<
   ProjectList,
   ProjectExistenceQueryKey
 >;
+type ProjectSlugQueryOptions = UseQueryOptions<
+  Project | null,
+  Error,
+  Project | null,
+  ProjectSlugQueryKey
+>;
 type ProjectDetailQueryOptions = UseQueryOptions<Project, Error, Project, ProjectDetailQueryKey>;
 
 export async function listProjects({
@@ -72,6 +93,112 @@ export async function listProjects({
   );
 }
 
+export async function resolveProjectSlug({
+  queryClient,
+  workspaceId,
+  projectSlug,
+}: {
+  queryClient: QueryClient;
+  workspaceId: string;
+  projectSlug: string;
+}): Promise<string | undefined> {
+  const queryKey = projectsQueryKeys.list(workspaceId);
+  let data = queryClient.getQueryData<InfiniteData<ProjectList, string | undefined>>(queryKey);
+
+  if (!data) {
+    await queryClient.fetchInfiniteQuery(projectsInfiniteQueryOptions(workspaceId));
+    data = queryClient.getQueryData<InfiniteData<ProjectList, string | undefined>>(queryKey);
+  }
+
+  if (data) {
+    const project = data.pages
+      .flatMap((page) => page.projects)
+      .find((candidate) => candidate.slug === projectSlug);
+    const dataUpdatedAt = queryClient.getQueryState(queryKey)?.dataUpdatedAt ?? 0;
+    if (project && Date.now() - dataUpdatedAt < PROJECT_LIST_STALE_TIME) {
+      cacheResolvedProject(queryClient, workspaceId, projectSlug, project);
+      return project.id;
+    }
+    const cursor = data.pages.at(-1)?.nextCursor;
+    if (project || !cursor) {
+      return await refetchAndResolveProjectSlug(queryClient, queryKey, workspaceId, projectSlug);
+    }
+    return await resolveProjectSlugBySearch(queryClient, workspaceId, projectSlug);
+  }
+
+  return undefined;
+}
+
+async function refetchAndResolveProjectSlug(
+  queryClient: QueryClient,
+  queryKey: ReturnType<typeof projectsQueryKeys.list>,
+  workspaceId: string,
+  projectSlug: string,
+): Promise<string | undefined> {
+  await queryClient.refetchQueries({queryKey, type: 'all'});
+  const data = queryClient.getQueryData<InfiniteData<ProjectList, string | undefined>>(queryKey);
+
+  if (!data) return undefined;
+  const project = data.pages
+    .flatMap((page) => page.projects)
+    .find((candidate) => candidate.slug === projectSlug);
+  if (project) {
+    cacheResolvedProject(queryClient, workspaceId, projectSlug, project);
+    return project.id;
+  }
+
+  if (!data.pages.at(-1)?.nextCursor) return undefined;
+  return await resolveProjectSlugBySearch(queryClient, workspaceId, projectSlug);
+}
+
+function cacheResolvedProject(
+  queryClient: QueryClient,
+  workspaceId: string,
+  projectSlug: string,
+  project: Project,
+): void {
+  queryClient.setQueryData(projectsQueryKeys.slug(workspaceId, projectSlug), project);
+  queryClient.setQueryData(projectsQueryKeys.detail(project.id), project);
+}
+
+async function resolveProjectSlugBySearch(
+  queryClient: QueryClient,
+  workspaceId: string,
+  projectSlug: string,
+  signal?: AbortSignal,
+): Promise<string | undefined> {
+  const project = await findProjectBySlug({workspaceId, projectSlug, signal});
+  if (project) {
+    cacheResolvedProject(queryClient, workspaceId, projectSlug, project);
+    return project.id;
+  }
+  return undefined;
+}
+
+async function findProjectBySlug({
+  workspaceId,
+  projectSlug,
+  signal,
+}: {
+  workspaceId: string;
+  projectSlug: string;
+  signal?: AbortSignal | undefined;
+}): Promise<Project | undefined> {
+  let result = await listProjects({workspaceId, search: projectSlug, limit: 100, signal});
+  while (true) {
+    const project = result.projects.find((candidate) => candidate.slug === projectSlug);
+    if (project) return project;
+    if (!result.nextCursor) return undefined;
+    result = await listProjects({
+      workspaceId,
+      search: projectSlug,
+      limit: 100,
+      cursor: result.nextCursor,
+      signal,
+    });
+  }
+}
+
 export async function getProject(projectId: string): Promise<Project> {
   return toProject(await checkedApiRequest(projectResponseSchema, `/projects/${projectId}`));
 }
@@ -80,6 +207,7 @@ export async function createProject(command: CreateProjectCommand): Promise<Proj
   const body = createProjectBodySchema.parse({
     workspace_id: command.workspaceId,
     name: command.name,
+    slug: command.slug,
     source: {
       connection_id: command.source.connectionId,
       external_repository_id: command.source.externalRepositoryId,
@@ -90,6 +218,54 @@ export async function createProject(command: CreateProjectCommand): Promise<Proj
   );
 }
 
+export async function updateProject(command: UpdateProjectCommand): Promise<Project> {
+  const body = updateProjectBodySchema.parse({name: command.name, slug: command.slug});
+  return toProject(
+    await checkedApiRequest(projectResponseSchema, `/projects/${command.projectId}`, {
+      method: 'PATCH',
+      body,
+    }),
+  );
+}
+
+export function isProjectSlugAvailable({
+  queryClient,
+  workspaceId,
+  projectSlug,
+  currentProjectId,
+}: {
+  queryClient: QueryClient;
+  workspaceId: string;
+  projectSlug: string;
+  currentProjectId?: string | undefined;
+}): boolean {
+  const cachedLists = queryClient.getQueriesData<InfiniteData<ProjectList, string | undefined>>({
+    queryKey: [...projectsQueryKeys.all, 'list', workspaceId],
+  });
+  const conflict = cachedLists
+    .flatMap(([, data]) => data?.pages.flatMap((page) => page.projects) ?? [])
+    .some((project) => project.slug === projectSlug && project.id !== currentProjectId);
+  return !conflict;
+}
+
+export function useProjectSlugAvailability(
+  workspaceId: string | undefined,
+  currentProjectId?: string,
+): (projectSlug: string) => Promise<boolean> {
+  const queryClient = useQueryClient();
+  return useCallback(
+    async (projectSlug: string) => {
+      if (!workspaceId) return false;
+      if (!isProjectSlugAvailable({queryClient, workspaceId, projectSlug, currentProjectId})) {
+        return false;
+      }
+      const project = await findProjectBySlug({workspaceId, projectSlug});
+      return project === undefined || project.id === currentProjectId;
+    },
+    [currentProjectId, queryClient, workspaceId],
+  );
+}
+
 export function projectsInfiniteQueryOptions(
   workspaceId: string | undefined,
   search?: string,
@@ -112,6 +288,7 @@ export function projectsInfiniteQueryOptions(
       }),
     getNextPageParam: (lastPage: ProjectList) => lastPage.nextCursor ?? undefined,
     placeholderData: keepPreviousData,
+    staleTime: PROJECT_LIST_STALE_TIME,
   };
 }
 
@@ -138,6 +315,33 @@ export function projectQueryOptions(projectId: string | undefined): ProjectDetai
   });
 }
 
+export function projectSlugQueryOptions(
+  workspaceId: string | undefined,
+  projectSlug: string | undefined,
+): ProjectSlugQueryOptions {
+  return queryOptions({
+    queryKey:
+      workspaceId && projectSlug
+        ? projectsQueryKeys.slug(workspaceId, projectSlug)
+        : ([...projectsQueryKeys.all, 'slug'] as const),
+    enabled: Boolean(workspaceId && projectSlug),
+    queryFn: async ({signal, client}) => {
+      const resolvedWorkspaceId = workspaceId ?? '';
+      const resolvedProjectSlug = projectSlug ?? '';
+      const project = await findProjectBySlug({
+        workspaceId: resolvedWorkspaceId,
+        projectSlug: resolvedProjectSlug,
+        signal,
+      });
+      if (project) {
+        cacheResolvedProject(client, resolvedWorkspaceId, resolvedProjectSlug, project);
+      }
+      return project ?? null;
+    },
+    staleTime: 30_000,
+  });
+}
+
 export function useProjectsInfiniteQuery(
   workspaceId: string | undefined,
   search?: string,
@@ -148,7 +352,12 @@ export function useProjectsInfiniteQuery(
 export function useProjectQuery(projectId: string | undefined) {
   return useQuery(projectQueryOptions(projectId));
 }
-
+export function useProjectSlugQuery(
+  workspaceId: string | undefined,
+  projectSlug: string | undefined,
+) {
+  return useQuery(projectSlugQueryOptions(workspaceId, projectSlug));
+}
 export function useCreateProjectMutation() {
   const queryClient = useQueryClient();
   return useMutation({
@@ -170,3 +379,19 @@ export function useCreateProjectMutation() {
     },
   });
 }
+
+export function useUpdateProjectMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: updateProject,
+    onSuccess: async (project) => {
+      queryClient.setQueryData(projectsQueryKeys.detail(project.id), project);
+      queryClient.setQueryData(projectsQueryKeys.slug(project.workspaceId, project.slug), project);
+      await queryClient.invalidateQueries({
+        queryKey: [...projectsQueryKeys.all, 'slug', project.workspaceId],
+      });
+      await queryClient.invalidateQueries({queryKey: projectsQueryKeys.list(project.workspaceId)});
+    },
+  });
+}

package/src/index.ts

@@ -6,8 +6,15 @@ export {
   type ProjectSource,
   projectNameFromRepository,
   selectProjectSource,
+  type UpdateProjectCommand,
 } from '#core/project.js';
-export {ProjectBreadcrumb, ProjectLayoutGuard} from './chrome.js';
+export {
+  ProjectBreadcrumb,
+  resolveProjectSlug,
+  useActiveProject,
+  useMaybeActiveProject,
+  useMaybeActiveProjectQuery,
+} from './chrome.js';
 export {ProjectCrumb, type ProjectCrumbProps} from './components/project-crumb.js';
 export {ProjectSwitcher, type ProjectSwitcherProps} from './components/project-switcher.js';
 export {SourceStrip} from './components/source-strip.js';
@@ -15,5 +22,6 @@ export * from './hooks/api/definitions.js';
 export * from './hooks/api/projects.js';
 export * from './pages/create-project-page.js';
 export * from './pages/home-router.js';
+export {ProjectSettingsPage} from './pages/project-settings-page.js';
 export * from './pages/projects-hub-page.js';
 export * from './project-error.js';

package/src/pages/create-project-page.stories.tsx

@@ -17,7 +17,7 @@ import {useMemo} from 'react';
 import {CreateProjectPage} from './create-project-page.js';
 
 const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
-const WORKSPACE_PATH = `/workspaces/${WORKSPACE_ID}/projects/new`;
+const WORKSPACE_PATH = '/w/acme/projects/new';
 const GITHUB_CONNECTION_ID = '33333333-3333-4333-8333-333333333333';
 const GITEA_CONNECTION_ID = '44444444-4444-4444-8444-444444444444';
 
@@ -41,7 +41,7 @@ const authState: AuthState = {
     name: 'Platform Engineer',
     emailVerifiedAt: '2026-01-01T00:00:00.000Z',
   },
-  workspaces: [{id: WORKSPACE_ID, name: 'Acme', membershipId: 'membership-1'}],
+  workspaces: [{id: WORKSPACE_ID, name: 'Acme', slug: 'acme', membershipId: 'membership-1'}],
 };
 
 function CreateProjectPageStory({scenario}: CreateProjectPageStoryProps) {
@@ -107,7 +107,7 @@ function createStoryRouter() {
   const rootRoute = createRootRoute({component: Outlet});
   const workspaceRoute = createRoute({
     getParentRoute: () => rootRoute,
-    path: '/workspaces/$wid',
+    path: '/w/$workspaceSlug',
     component: Outlet,
   });
   const createProjectRoute = createRoute({
@@ -127,7 +127,7 @@ function createStoryRouter() {
   });
   const projectRoute = createRoute({
     getParentRoute: () => workspaceRoute,
-    path: 'projects/$pid',
+    path: 'p/$projectSlug',
     component: () => <div />,
   });
 
@@ -176,6 +176,7 @@ function fetchForScenario(scenario: Scenario): typeof fetch {
           id: '99999999-9999-4999-8999-999999999999',
           workspace_id: WORKSPACE_ID,
           name: 'Platform',
+          slug: 'platform',
           source: {
             connection_id: GITHUB_CONNECTION_ID,
             external_repository_id: 'platform',