@shipfox/client-projects 12.0.1 → 13.0.0

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

@@ -1,11 +1,19 @@
 import {configureApiClient} from '@shipfox/client-api';
+import {QueryClient} from '@tanstack/react-query';
 import {fireEvent, screen, waitFor} from '@testing-library/react';
-import {jsonResponse, PROJECT_TEST_WID, renderProjectPage} from '#test/pages.js';
+import {projectsQueryKeys} from '#hooks/api/projects.js';
+import {
+  jsonResponse,
+  PROJECT_TEST_WID,
+  PROJECT_TEST_WSLUG,
+  renderProjectPage,
+} from '#test/pages.js';
 import {CreateProjectPage} from './create-project-page.js';
 
 const CONNECTION_ID = '33333333-3333-4333-8333-333333333333';
 const SECOND_CONNECTION_ID = '66666666-6666-4666-8666-666666666666';
 const REPOSITORY_NOT_FOUND_RE = /Repository not found/;
+const PROJECT_REQUEST_FAILED_RE = /Project request failed/;
 const GITEA_RADIO_LABEL_RE = /^Gitea Source$/;
 
 describe('CreateProjectPage', () => {
@@ -31,20 +39,29 @@ describe('CreateProjectPage', () => {
     });
     configureApiClient({fetchImpl});
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}/projects/new`, <CreateProjectPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />);
     const nameInput = await screen.findByLabelText('Project name');
+    const slugInput = await screen.findByLabelText('Project slug');
     await waitFor(() => expect(nameInput).toHaveValue('Platform'));
+    expect(slugInput).toHaveValue('platform');
+    expect(slugInput).toHaveAttribute('aria-describedby', 'project-slug-description');
+    expect(screen.getByText('/w/acme/p/platform')).toBeInTheDocument();
     expect(screen.getByRole('radio', {name: GITEA_RADIO_LABEL_RE})).toBeChecked();
     expect(screen.getAllByText('gitea-owner/platform').length).toBeGreaterThan(0);
     fireEvent.change(nameInput, {
       target: {value: '  Launch Pad  '},
     });
+    fireEvent.change(slugInput, {
+      target: {value: 'launchpad'},
+    });
+    expect(screen.getByText('/w/acme/p/launchpad')).toBeInTheDocument();
     fireEvent.click(screen.getByRole('button', {name: 'Create project'}));
 
     expect(await screen.findByRole('heading', {name: 'Runs'})).toBeInTheDocument();
     expect(createProjectBody).toEqual({
       workspace_id: PROJECT_TEST_WID,
       name: 'Launch Pad',
+      slug: 'launchpad',
       source: {
         connection_id: CONNECTION_ID,
         external_repository_id: 'platform',
@@ -52,6 +69,106 @@ describe('CreateProjectPage', () => {
     });
   }, 10_000);
 
+  test('auto-derives the slug from each keystroke in the name field until the slug is touched', async () => {
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.url.includes('/integration-connections?')) {
+        return Promise.resolve(jsonResponse({connections: [connectionDto()]}));
+      }
+      if (request.url.includes(`/integration-connections/${CONNECTION_ID}/repositories`)) {
+        return Promise.resolve(jsonResponse({repositories: [repositoryDto()], next_cursor: null}));
+      }
+      return Promise.resolve(jsonResponse({}));
+    });
+    configureApiClient({fetchImpl});
+
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />);
+    const nameInput = await screen.findByLabelText('Project name');
+    const slugInput = await screen.findByLabelText('Project slug');
+    await waitFor(() => expect(nameInput).toHaveValue('Platform'));
+
+    fireEvent.change(nameInput, {target: {value: 'L'}});
+    fireEvent.change(nameInput, {target: {value: 'La'}});
+    fireEvent.change(nameInput, {target: {value: 'Launch Pad'}});
+
+    expect(slugInput).toHaveValue('launch-pad');
+    expect(screen.getByText('/w/acme/p/launch-pad')).toBeInTheDocument();
+  });
+
+  test('checks project slug availability authoritatively after a cache miss', async () => {
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.url.includes('/integration-connections?')) {
+        return Promise.resolve(jsonResponse({connections: [connectionDto()]}));
+      }
+      if (request.url.includes(`/integration-connections/${CONNECTION_ID}/repositories`)) {
+        return Promise.resolve(jsonResponse({repositories: [repositoryDto()], next_cursor: null}));
+      }
+      if (request.url.includes('/projects?')) {
+        return Promise.resolve(jsonResponse({projects: [], next_cursor: null}));
+      }
+      return Promise.resolve(jsonResponse({}));
+    });
+    configureApiClient({fetchImpl});
+
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />);
+    const slugInput = await screen.findByLabelText('Project slug');
+    fireEvent.change(slugInput, {target: {value: 'custom-project'}});
+
+    expect(await screen.findByText('Slug is available.')).toBeInTheDocument();
+    expect(
+      fetchImpl.mock.calls.some(
+        ([input]) =>
+          (input as Request).url.includes('/projects?') &&
+          (input as Request).url.includes('search=custom-project'),
+      ),
+    ).toBe(true);
+  });
+
+  test('reports a cached project slug conflict without another availability request', async () => {
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.url.includes('/integration-connections?')) {
+        return Promise.resolve(jsonResponse({connections: [connectionDto()]}));
+      }
+      if (request.url.includes(`/integration-connections/${CONNECTION_ID}/repositories`)) {
+        return Promise.resolve(jsonResponse({repositories: [repositoryDto()], next_cursor: null}));
+      }
+      return Promise.resolve(jsonResponse({}));
+    });
+    configureApiClient({fetchImpl});
+    const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}});
+    queryClient.setQueryData(projectsQueryKeys.list(PROJECT_TEST_WID, 'custom-project'), {
+      pages: [
+        {
+          projects: [
+            {
+              id: '55555555-5555-4555-8555-555555555555',
+              workspaceId: PROJECT_TEST_WID,
+              name: 'Custom project',
+              slug: 'custom-project',
+              source: {connectionId: CONNECTION_ID, externalRepositoryId: 'custom-project'},
+              createdAt: new Date().toISOString(),
+              updatedAt: new Date().toISOString(),
+            },
+          ],
+          nextCursor: null,
+        },
+      ],
+      pageParams: [undefined],
+    });
+
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />, queryClient);
+    fireEvent.change(await screen.findByLabelText('Project slug'), {
+      target: {value: 'custom-project'},
+    });
+
+    expect(await screen.findByText('This slug is already taken.')).toBeInTheDocument();
+    expect(
+      fetchImpl.mock.calls.some(([input]) => (input as Request).url.includes('/projects?')),
+    ).toBe(false);
+  });
+
   test('uses the current repository-derived name when submitted before touching the field', async () => {
     let createProjectBody: unknown;
     const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
@@ -70,7 +187,7 @@ describe('CreateProjectPage', () => {
     });
     configureApiClient({fetchImpl});
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}/projects/new`, <CreateProjectPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />);
     expect((await screen.findAllByText('gitea-owner/platform')).length).toBeGreaterThan(0);
     fireEvent.click(screen.getByRole('button', {name: 'Create project'}));
 
@@ -78,6 +195,7 @@ describe('CreateProjectPage', () => {
     expect(createProjectBody).toEqual({
       workspace_id: PROJECT_TEST_WID,
       name: 'Platform',
+      slug: 'platform',
       source: {
         connection_id: CONNECTION_ID,
         external_repository_id: 'platform',
@@ -100,7 +218,7 @@ describe('CreateProjectPage', () => {
     });
     configureApiClient({fetchImpl});
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}/projects/new`, <CreateProjectPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />);
     expect((await screen.findAllByText('Gitea Source')).length).toBeGreaterThan(0);
     expect(await screen.findByText('Other Gitea Source')).toBeInTheDocument();
     expect(screen.queryByText('gitea-owner/platform')).not.toBeInTheDocument();
@@ -123,7 +241,7 @@ describe('CreateProjectPage', () => {
     });
     configureApiClient({fetchImpl});
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}/projects/new`, <CreateProjectPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />);
     expect((await screen.findAllByText('gitea-owner/platform')).length).toBeGreaterThan(0);
     fireEvent.change(await screen.findByLabelText('Project name'), {
       target: {value: 'Bad\u202eName'},
@@ -154,9 +272,9 @@ describe('CreateProjectPage', () => {
       }),
     });
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}/projects/new`, <CreateProjectPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />);
     const link = await screen.findByRole('link', {name: 'Add another integration'});
-    expect(link).toHaveAttribute('href', `/workspaces/${PROJECT_TEST_WID}/integrations`);
+    expect(link).toHaveAttribute('href', `/w/${PROJECT_TEST_WSLUG}/integrations`);
   });
 
   test('shows the model provider reminder on project creation when no provider is configured', async () => {
@@ -177,12 +295,12 @@ describe('CreateProjectPage', () => {
     });
     configureApiClient({fetchImpl});
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}/projects/new`, <CreateProjectPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />);
 
     expect(await screen.findByText('Finish setting up a model provider')).toBeInTheDocument();
     expect(screen.getByRole('link', {name: 'Agents'})).toHaveAttribute(
       'href',
-      `/workspaces/${PROJECT_TEST_WID}/settings/agents`,
+      `/w/${PROJECT_TEST_WSLUG}/settings/agents`,
     );
   });
 
@@ -223,7 +341,7 @@ describe('CreateProjectPage', () => {
     });
     configureApiClient({fetchImpl});
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}/projects/new`, <CreateProjectPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />);
     expect((await screen.findAllByText('gitea-owner/platform')).length).toBeGreaterThan(0);
     fireEvent.click(screen.getByRole('button', {name: 'Create project'}));
 
@@ -232,6 +350,66 @@ describe('CreateProjectPage', () => {
     expect(await screen.findByRole('heading', {name: 'Runs'})).toBeInTheDocument();
   });
 
+  test('surfaces a slug conflict on the slug field without a generic form error', async () => {
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.url.includes('/integration-connections?')) {
+        return Promise.resolve(jsonResponse({connections: [connectionDto()]}));
+      }
+      if (request.url.includes(`/integration-connections/${CONNECTION_ID}/repositories`)) {
+        return Promise.resolve(jsonResponse({repositories: [repositoryDto()], next_cursor: null}));
+      }
+      if (request.url.endsWith('/projects') && request.method === 'POST') {
+        return Promise.resolve(jsonResponse({code: 'slug-conflict'}, {status: 409}));
+      }
+      return Promise.resolve(jsonResponse({}));
+    });
+    configureApiClient({fetchImpl});
+
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />);
+    expect((await screen.findAllByText('gitea-owner/platform')).length).toBeGreaterThan(0);
+    fireEvent.click(screen.getByRole('button', {name: 'Create project'}));
+
+    expect(await screen.findByText('This project slug is already in use.')).toBeInTheDocument();
+    expect(screen.getByLabelText('Project slug')).toHaveAttribute(
+      'aria-describedby',
+      'project-slug-error',
+    );
+    await waitFor(() => expect(screen.getByLabelText('Project slug')).toHaveFocus());
+    expect(screen.queryByText(PROJECT_REQUEST_FAILED_RE)).not.toBeInTheDocument();
+  });
+
+  test('clears a slug conflict when the slug is regenerated from the project name', async () => {
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.url.includes('/integration-connections?')) {
+        return Promise.resolve(jsonResponse({connections: [connectionDto()]}));
+      }
+      if (request.url.includes(`/integration-connections/${CONNECTION_ID}/repositories`)) {
+        return Promise.resolve(jsonResponse({repositories: [repositoryDto()], next_cursor: null}));
+      }
+      if (request.url.endsWith('/projects') && request.method === 'POST') {
+        return Promise.resolve(jsonResponse({code: 'slug-conflict'}, {status: 409}));
+      }
+      return Promise.resolve(jsonResponse({}));
+    });
+    configureApiClient({fetchImpl});
+
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />);
+    expect((await screen.findAllByText('gitea-owner/platform')).length).toBeGreaterThan(0);
+    fireEvent.click(screen.getByRole('button', {name: 'Create project'}));
+
+    expect(await screen.findByText('This project slug is already in use.')).toBeInTheDocument();
+    fireEvent.change(await screen.findByLabelText('Project name'), {
+      target: {value: 'Launch Pad'},
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('This project slug is already in use.')).not.toBeInTheDocument();
+      expect(screen.getByLabelText('Project slug')).toHaveValue('launch-pad');
+    });
+  });
+
   test('shows provider-specific submit errors', async () => {
     const fetchImpl = vi.fn((input: RequestInfo | URL) => {
       const request = input as Request;
@@ -245,7 +423,7 @@ describe('CreateProjectPage', () => {
     });
     configureApiClient({fetchImpl});
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}/projects/new`, <CreateProjectPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />);
     expect((await screen.findAllByText('gitea-owner/platform')).length).toBeGreaterThan(0);
     fireEvent.click(screen.getByRole('button', {name: 'Create project'}));
 
@@ -297,11 +475,12 @@ function repositoryDto() {
   };
 }
 
-function projectDto({id}: {id: string}) {
+function projectDto({id, slug = 'project-detail'}: {id: string; slug?: string}) {
   return {
     id,
     workspace_id: '11111111-1111-4111-8111-111111111111',
     name: 'Project Detail',
+    slug,
     source: {
       connection_id: CONNECTION_ID,
       external_repository_id: 'platform',

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

@@ -1,3 +1,4 @@
+import {slugifyName, slugSchema} from '@shipfox/api-common-dto';
 import {createProjectBodySchema} from '@shipfox/api-projects-dto';
 import {useMaybeActiveWorkspace} from '@shipfox/client-auth';
 import {
@@ -8,7 +9,7 @@ import {
   useRepositoriesInfiniteQuery,
   useSourceConnectionsQuery,
 } from '@shipfox/client-integrations';
-import {displayNameFieldError} from '@shipfox/client-ui';
+import {displayNameFieldError, SlugField} from '@shipfox/client-ui';
 import {Button} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
 import {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';
@@ -20,9 +21,17 @@ import {Link, Navigate, useNavigate} from '@tanstack/react-router';
 import {useEffect, useRef, useState} from 'react';
 import {ModelProviderReminderBanner} from '#components/model-provider-reminder-banner.js';
 import {type CreateProjectCommand, projectNameFromRepository} from '#core/project.js';
-import {useCreateProjectMutation} from '#hooks/api/projects.js';
+import {
+  getProject,
+  useCreateProjectMutation,
+  useProjectSlugAvailability,
+} from '#hooks/api/projects.js';
 import {projectErrorCopy} from '#project-error.js';
 
+function isSlugValid(value: string): boolean {
+  return slugSchema.safeParse(value).success;
+}
+
 export function CreateProjectPage() {
   const workspace = useMaybeActiveWorkspace();
   const navigate = useNavigate();
@@ -69,21 +78,34 @@ export function CreateProjectPage() {
   const defaultProjectName = projectNameFromRepository(
     selectedRepository?.name ?? selectedRepositoryId ?? '',
   );
+  const defaultProjectSlug = slugifyName(defaultProjectName, {fallback: 'project'});
 
   const [formError, setFormError] = useState<string | undefined>();
+  const [slugManuallyEdited, setSlugManuallyEdited] = useState(false);
+  const [slugCheckEnabled, setSlugCheckEnabled] = useState(false);
+  const [slugConflict, setSlugConflict] = useState(false);
+  const workspaceId = workspace?.id;
+  const checkProjectSlugAvailability = useProjectSlugAvailability(workspaceId);
 
   const form = useForm({
-    defaultValues: {name: defaultProjectName},
+    defaultValues: {name: defaultProjectName, slug: defaultProjectSlug},
     onSubmit: async ({value}) => {
-      await createProjectFromForm(nameTouched ? value.name : defaultProjectName);
+      const projectSlug = slugManuallyEdited
+        ? value.slug
+        : slugifyName(value.name, {fallback: 'project'});
+      await createProjectFromForm(nameTouched ? value.name : defaultProjectName, projectSlug);
     },
   });
 
   useEffect(() => {
     if (!nameTouched && form.state.values.name !== defaultProjectName) {
       form.setFieldValue('name', defaultProjectName);
+      if (!slugManuallyEdited) {
+        setSlugConflict(false);
+        form.setFieldValue('slug', slugifyName(defaultProjectName, {fallback: 'project'}));
+      }
     }
-  }, [defaultProjectName, form, nameTouched]);
+  }, [defaultProjectName, form, nameTouched, slugManuallyEdited]);
 
   function selectConnection(connectionId: string) {
     setSelectedConnectionId(connectionId);
@@ -99,11 +121,18 @@ export function CreateProjectPage() {
   }
 
   if (!connectionsQuery.isError && connections.length === 0) {
-    return <Navigate to="/workspaces/$wid/integrations" params={{wid: workspace.id}} replace />;
+    return (
+      <Navigate
+        to="/w/$workspaceSlug/integrations"
+        params={{workspaceSlug: workspace.slug}}
+        replace
+      />
+    );
   }
 
-  async function createProjectFromForm(projectName: string) {
+  async function createProjectFromForm(projectName: string, projectSlug: string) {
     setFormError(undefined);
+    setSlugConflict(false);
     if (!workspace) {
       setFormError('Workspace is still loading. Try again in a moment.');
       errorRef.current?.focus();
@@ -124,6 +153,7 @@ export function CreateProjectPage() {
       const command: CreateProjectCommand = {
         workspaceId: workspace.id,
         name: projectName,
+        slug: projectSlug,
         source: {
           connectionId: selectedConnection.id,
           externalRepositoryId: selectedRepository.externalRepositoryId,
@@ -132,17 +162,29 @@ export function CreateProjectPage() {
       const project = await createProject.mutateAsync(command);
       toast.success('Project created.');
       await navigate({
-        to: '/workspaces/$wid/projects/$pid',
-        params: {wid: workspace.id, pid: project.id},
+        to: '/w/$workspaceSlug/p/$projectSlug',
+        params: {workspaceSlug: workspace.slug, projectSlug: project.slug},
       });
     } catch (error) {
       const copy = projectErrorCopy(error);
       if (copy.existingProjectId) {
         toast.info('Project already exists.');
-        await navigate({
-          to: '/workspaces/$wid/projects/$pid',
-          params: {wid: workspace.id, pid: copy.existingProjectId},
-        });
+        try {
+          const project = await getProject(copy.existingProjectId);
+          await navigate({
+            to: '/w/$workspaceSlug/p/$projectSlug',
+            params: {workspaceSlug: workspace.slug, projectSlug: project.slug},
+          });
+        } catch (recoveryError) {
+          const recoveryCopy = projectErrorCopy(recoveryError);
+          setFormError(`${recoveryCopy.title}: ${recoveryCopy.message}`);
+          requestAnimationFrame(() => errorRef.current?.focus());
+        }
+        return;
+      }
+      if (copy.slugConflict) {
+        setSlugConflict(true);
+        requestAnimationFrame(() => document.getElementById('project-slug')?.focus());
         return;
       }
       setFormError(`${copy.title}: ${copy.message}`);
@@ -209,7 +251,10 @@ export function CreateProjectPage() {
 
               {connections.length === 1 ? (
                 <Button asChild variant="transparent" size="sm" className="shrink-0">
-                  <Link to="/workspaces/$wid/integrations" params={{wid: workspace.id}}>
+                  <Link
+                    to="/w/$workspaceSlug/integrations"
+                    params={{workspaceSlug: workspace.slug}}
+                  >
                     Add another integration
                   </Link>
                 </Button>
@@ -288,8 +333,14 @@ export function CreateProjectPage() {
                     type="text"
                     value={field.state.value}
                     onChange={(event) => {
+                      const nextName = event.target.value;
                       setNameTouched(true);
-                      field.handleChange(event.target.value);
+                      field.handleChange(nextName);
+                      if (!slugManuallyEdited) {
+                        setSlugCheckEnabled(true);
+                        setSlugConflict(false);
+                        form.setFieldValue('slug', slugifyName(nextName, {fallback: 'project'}));
+                      }
                     }}
                     onBlur={field.handleBlur}
                     placeholder="Platform"
@@ -298,6 +349,42 @@ export function CreateProjectPage() {
               )}
             </form.Field>
 
+            <form.Field
+              name="slug"
+              validators={{
+                onBlur: createProjectBodySchema.shape.slug,
+                onSubmit: createProjectBodySchema.shape.slug,
+              }}
+            >
+              {(field) => (
+                <SlugField
+                  id="project-slug"
+                  label="Project slug"
+                  name="slug"
+                  value={field.state.value}
+                  onChange={(value) => {
+                    setSlugManuallyEdited(true);
+                    setSlugCheckEnabled(true);
+                    setSlugConflict(false);
+                    field.handleChange(value);
+                  }}
+                  onBlur={field.handleBlur}
+                  error={slugConflict ? 'This project slug is already in use.' : fieldError(field)}
+                  description={
+                    <span className="font-code">
+                      {`/w/${workspace.slug}/p/${field.state.value}`}
+                    </span>
+                  }
+                  placeholder="platform"
+                  className="font-code"
+                  checkEnabled={slugCheckEnabled}
+                  debounceMs={0}
+                  isValid={isSlugValid}
+                  checkAvailability={checkProjectSlugAvailability}
+                />
+              )}
+            </form.Field>
+
             <Button
               type="submit"
               iconRight="chevronRight"

package/src/pages/home-router.test.tsx

@@ -2,7 +2,7 @@
 import '@testing-library/jest-dom/vitest';
 import {configureApiClient} from '@shipfox/client-api';
 import {screen} from '@testing-library/react';
-import {jsonResponse, PROJECT_TEST_WID, renderProjectPage} from '#test/pages.js';
+import {jsonResponse, PROJECT_TEST_WSLUG, renderProjectPage} from '#test/pages.js';
 import {HomeRouter} from './home-router.js';
 
 describe('HomeRouter', () => {
@@ -16,7 +16,7 @@ describe('HomeRouter', () => {
     });
     configureApiClient({fetchImpl});
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}`, <HomeRouter />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}`, <HomeRouter />);
 
     expect(await screen.findByRole('heading', {name: 'Projects'})).toBeInTheDocument();
     const calledUrls = fetchImpl.mock.calls.map(([input]) =>

package/src/pages/project-settings-form-errors.ts

@@ -0,0 +1,17 @@
+import {ApiError} from '@shipfox/client-api';
+
+export type ProjectSettingsField = 'name' | 'slug';
+
+export type ProjectSettingsFormError =
+  | {kind: 'field'; field: ProjectSettingsField; message: string}
+  | {kind: 'form'; message: string};
+
+export function projectSettingsErrorToFormError(error: unknown): ProjectSettingsFormError {
+  if (error instanceof ApiError && error.code === 'slug-conflict') {
+    return {kind: 'field', field: 'slug', message: 'That project slug is already taken.'};
+  }
+  return {
+    kind: 'form',
+    message: error instanceof Error ? error.message : 'Could not update project settings.',
+  };
+}