@shipfox/client-workspace-settings 12.0.2 → 13.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workspace-settings",
   "license": "MIT",
-  "version": "12.0.2",
+  "version": "13.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -27,12 +27,12 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
+    "@shipfox/api-workspaces-dto": "12.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-auth": "12.0.2",
-    "@shipfox/api-workspaces-dto": "11.0.0",
-    "@shipfox/client-shell": "12.0.2",
-    "@shipfox/client-ui": "6.0.2",
-    "@shipfox/react-ui": "0.3.7"
+    "@shipfox/client-auth": "13.0.0",
+    "@shipfox/client-shell": "13.0.0",
+    "@shipfox/client-ui": "13.0.0",
+    "@shipfox/react-ui": "0.4.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/general/form-errors.ts

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

package/src/components/members/workspace-members-section.tsx

@@ -144,7 +144,7 @@ function MemberRow({
 
   return (
     <TableRow className={remove.isPending ? 'opacity-60' : undefined}>
-      <TableCell className="font-medium">{member.name ?? '—'}</TableCell>
+      <TableCell className="font-medium">{member.name ?? 'N/A'}</TableCell>
       <TableCell>
         <Code variant="paragraph">{member.email}</Code>
       </TableCell>
@@ -283,7 +283,7 @@ function InvitationRow({
       <TableCell>
         <Code variant="paragraph">{invitation.email}</Code>
       </TableCell>
-      <TableCell>{invitation.invitedByDisplay ?? '—'}</TableCell>
+      <TableCell>{invitation.invitedByDisplay ?? 'N/A'}</TableCell>
       <TableCell>
         <div className="flex items-center gap-8">
           <Text size="sm">{formatDate(invitation.expiresAt)}</Text>

package/src/components/workspace-settings-shell.tsx

@@ -1,12 +1,14 @@
-import {useActiveWorkspace} from '@shipfox/client-shell/runtime';
+import {useMaybeActiveWorkspace} from '@shipfox/client-shell/runtime';
+import {FullPageLoader} from '@shipfox/react-ui/loader';
 import type {ReactNode} from 'react';
 
 interface WorkspaceSettingsShellProps {
-  children: (workspace: ReturnType<typeof useActiveWorkspace>) => ReactNode;
+  children: (workspace: NonNullable<ReturnType<typeof useMaybeActiveWorkspace>>) => ReactNode;
 }
 
 export function WorkspaceSettingsShell({children}: WorkspaceSettingsShellProps) {
-  const workspace = useActiveWorkspace();
+  const workspace = useMaybeActiveWorkspace();
+  if (!workspace) return <FullPageLoader />;
 
   return children(workspace);
 }

package/src/feature.ts

@@ -9,12 +9,19 @@ export const workspaceSettingsNavigation = [
     id: 'nav.settings',
     scope: 'workspace',
     label: 'Settings',
-    to: '/workspaces/$wid/settings',
+    to: '/w/$workspaceSlug/settings',
     order: 200,
   },
 ] as const satisfies readonly NavTabEntry[];
 
 export const workspaceSettingsSections = [
+  {
+    id: 'settings.general',
+    pathSegment: 'general',
+    label: 'General',
+    icon: 'settings3Line',
+    order: 50,
+  },
   {
     id: 'settings.members',
     pathSegment: 'members',
@@ -28,15 +35,20 @@ export const workspaceSettingsFeature = defineClientFeature({
   id: 'shipfox.workspace-settings',
   routes: [
     {
-      path: '/workspaces/$wid/settings',
+      path: '/w/$workspaceSlug/settings',
       parent: 'workspaceSettings',
       impl: '@shipfox/client-workspace-settings/routes/index',
     },
     {
-      path: '/workspaces/$wid/settings/members',
+      path: '/w/$workspaceSlug/settings/members',
       parent: 'workspaceSettings',
       impl: '@shipfox/client-workspace-settings/routes/members',
     },
+    {
+      path: '/w/$workspaceSlug/settings/general',
+      parent: 'workspaceSettings',
+      impl: '@shipfox/client-workspace-settings/routes/general',
+    },
   ],
   navigation: workspaceSettingsNavigation,
   settingsSections: workspaceSettingsSections,

package/src/pages/general-settings-page.test.tsx

@@ -0,0 +1,91 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {fireEvent, screen, waitFor} from '@testing-library/react';
+import {jsonResponse, renderWorkspaceSettingsPage} from '#test/pages.js';
+import {GeneralSettingsPage} from './general-settings-page.js';
+
+describe('GeneralSettingsPage', () => {
+  test('saves a name change without opening the slug warning', async () => {
+    let patchBody: unknown;
+    const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.method === 'PATCH') {
+        patchBody = await request.clone().json();
+        return jsonResponse(workspaceDto({name: 'Acme Labs'}));
+      }
+      return jsonResponse({available: true});
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderWorkspaceSettingsPage('/w/acme/settings/general', <GeneralSettingsPage />);
+    fireEvent.change(await screen.findByLabelText('Workspace name'), {
+      target: {value: 'Acme Labs'},
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'Save changes'}));
+
+    await waitFor(() => expect(patchBody).toEqual({name: 'Acme Labs'}));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  test('requires confirmation before saving a slug change', async () => {
+    let patchBody: unknown;
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    try {
+      const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
+        const request = input as Request;
+        if (request.url.includes('/slug-availability')) {
+          return jsonResponse({available: true});
+        }
+        if (request.method === 'PATCH') {
+          patchBody = await request.clone().json();
+          return jsonResponse(workspaceDto({slug: 'acme-labs'}));
+        }
+        return jsonResponse({});
+      });
+      configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+      renderWorkspaceSettingsPage('/w/acme/settings/general', <GeneralSettingsPage />);
+      fireEvent.change(await screen.findByLabelText('Workspace slug'), {
+        target: {value: 'acme-labs'},
+      });
+      await waitFor(() =>
+        expect(
+          fetchImpl.mock.calls.some(([input]) =>
+            (input as Request).url.includes('/workspaces/slug-availability'),
+          ),
+        ).toBe(true),
+      );
+      fireEvent.click(screen.getByRole('button', {name: 'Save changes'}));
+
+      const dialog = await screen.findByRole('dialog');
+      expect(dialog).toHaveTextContent('old URL stop working');
+      expect(
+        fetchImpl.mock.calls.some(([input]) =>
+          (input as Request).url.includes('/workspaces/slug-availability'),
+        ),
+      ).toBe(true);
+      expect(patchBody).toBeUndefined();
+
+      fireEvent.click(screen.getByRole('button', {name: 'Change slug'}));
+      await waitFor(() => expect(patchBody).toEqual({slug: 'acme-labs'}));
+      expect(
+        consoleError.mock.calls.some((args) =>
+          args.some((argument) => String(argument).includes('useActiveWorkspace called outside')),
+        ),
+      ).toBe(false);
+    } finally {
+      consoleError.mockRestore();
+    }
+  });
+});
+
+function workspaceDto({name = 'Acme', slug = 'acme'}: {name?: string; slug?: string} = {}) {
+  return {
+    id: '11111111-1111-4111-8111-111111111111',
+    name,
+    slug,
+    status: 'active',
+    settings: {},
+    created_at: '2026-04-27T00:00:00.000Z',
+    updated_at: '2026-04-27T00:00:00.000Z',
+  };
+}

package/src/pages/general-settings-page.tsx

@@ -0,0 +1,198 @@
+import {createWorkspaceBodySchema} from '@shipfox/api-workspaces-dto';
+import {
+  checkWorkspaceSlugAvailability,
+  type useActiveWorkspace,
+  useUpdateWorkspaceMutation,
+} from '@shipfox/client-auth';
+import {displayNameFieldError, SlugChangeWarning, 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';
+import {toast} from '@shipfox/react-ui/toast';
+import {Header, Text} from '@shipfox/react-ui/typography';
+import {useForm} from '@tanstack/react-form';
+import {useNavigate} from '@tanstack/react-router';
+import {useState} from 'react';
+import {workspaceGeneralErrorToFormError} from '#components/general/form-errors.js';
+import {WorkspaceSettingsShell} from '#components/workspace-settings-shell.js';
+
+interface WorkspaceGeneralValues {
+  name: string;
+  slug: string;
+}
+
+function isSlugValid(value: string): boolean {
+  return createWorkspaceBodySchema.shape.slug.safeParse(value).success;
+}
+
+export function GeneralSettingsPage() {
+  return (
+    <WorkspaceSettingsShell>
+      {(workspace) => (
+        <WorkspaceGeneralForm
+          key={`${workspace.id}:${workspace.name}:${workspace.slug}`}
+          workspace={workspace}
+        />
+      )}
+    </WorkspaceSettingsShell>
+  );
+}
+
+function WorkspaceGeneralForm({workspace}: {workspace: ReturnType<typeof useActiveWorkspace>}) {
+  const updateWorkspace = useUpdateWorkspaceMutation();
+  const navigate = useNavigate();
+  const [warningOpen, setWarningOpen] = useState(false);
+  const [pendingValues, setPendingValues] = useState<WorkspaceGeneralValues>();
+  const [formError, setFormError] = useState<string>();
+
+  const form = useForm({
+    defaultValues: {name: workspace.name, slug: workspace.slug},
+    onSubmit: async ({value}) => {
+      if (value.slug !== workspace.slug) {
+        setPendingValues(value);
+        setWarningOpen(true);
+        return;
+      }
+      await save(value);
+    },
+  });
+
+  async function save(values: WorkspaceGeneralValues) {
+    setFormError(undefined);
+    const nameChanged = values.name !== workspace.name;
+    const slugChanged = values.slug !== workspace.slug;
+    if (!nameChanged && !slugChanged) return;
+    const command = {
+      workspaceId: workspace.id,
+      ...(nameChanged ? {name: values.name} : {}),
+      ...(slugChanged ? {slug: values.slug} : {}),
+    };
+
+    try {
+      const updated = await updateWorkspace.mutateAsync(command);
+      setPendingValues(undefined);
+      setWarningOpen(false);
+      toast.success('Workspace settings saved.');
+      await navigate({
+        to: '/w/$workspaceSlug/settings/general',
+        params: {workspaceSlug: updated.slug},
+      });
+    } catch (error) {
+      setPendingValues(undefined);
+      setWarningOpen(false);
+      const mapped = workspaceGeneralErrorToFormError(error);
+      if (mapped.kind === 'field') {
+        form.setFieldMeta(mapped.field, (previous) => ({
+          ...previous,
+          errorMap: {...previous.errorMap, onServer: mapped.message},
+        }));
+      } else {
+        setFormError(mapped.message);
+      }
+    }
+  }
+
+  return (
+    <>
+      <div className="flex min-w-0 flex-col gap-24">
+        <header className="flex flex-col gap-6">
+          <Header variant="h1">General</Header>
+          <Text size="sm" className="text-foreground-neutral-muted">
+            Update the workspace name and the slug used in its URLs.
+          </Text>
+        </header>
+
+        {formError ? (
+          <Callout role="alert" type="error">
+            {formError}
+          </Callout>
+        ) : null}
+
+        <form
+          className="flex max-w-[560px] flex-col gap-16"
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void form.handleSubmit();
+          }}
+        >
+          <form.Field
+            name="name"
+            validators={{
+              onBlur: ({value}) =>
+                displayNameFieldError(
+                  value,
+                  'Workspace name',
+                  createWorkspaceBodySchema.shape.name,
+                ),
+              onSubmit: ({value}) =>
+                displayNameFieldError(
+                  value,
+                  'Workspace name',
+                  createWorkspaceBodySchema.shape.name,
+                ),
+            }}
+          >
+            {(field) => (
+              <FormField
+                label="Workspace name"
+                id="workspace-settings-name"
+                error={fieldError(field)}
+              >
+                <FormFieldInput
+                  name="name"
+                  type="text"
+                  value={field.state.value}
+                  onChange={(event) => field.handleChange(event.target.value)}
+                  onBlur={field.handleBlur}
+                />
+              </FormField>
+            )}
+          </form.Field>
+
+          <form.Field
+            name="slug"
+            validators={{
+              onBlur: createWorkspaceBodySchema.shape.slug,
+              onSubmit: createWorkspaceBodySchema.shape.slug,
+            }}
+          >
+            {(field) => (
+              <SlugField
+                id="workspace-settings-slug"
+                label="Workspace slug"
+                name="slug"
+                value={field.state.value}
+                onChange={(value) => field.handleChange(value)}
+                onBlur={field.handleBlur}
+                error={fieldError(field)}
+                description={<span className="break-all font-code">/w/{field.state.value}</span>}
+                placeholder="acme"
+                className="font-code"
+                currentSlug={workspace.slug}
+                checkEnabled
+                isValid={isSlugValid}
+                checkAvailability={checkWorkspaceSlugAvailability}
+              />
+            )}
+          </form.Field>
+
+          <Button type="submit" isLoading={updateWorkspace.isPending} className="self-start">
+            Save changes
+          </Button>
+        </form>
+      </div>
+
+      <SlugChangeWarning
+        open={warningOpen}
+        onOpenChange={setWarningOpen}
+        entityLabel="workspace"
+        isLoading={updateWorkspace.isPending}
+        onConfirm={() => {
+          if (pendingValues) void save(pendingValues);
+        }}
+      />
+    </>
+  );
+}

package/src/routes/general.tsx

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

package/src/routes/index.tsx

@@ -2,7 +2,10 @@ import {defineRoute} from '@shipfox/client-shell/runtime';
 import {redirect} from '@tanstack/react-router';
 
 export default defineRoute({
-  beforeLoad: ({params}: {params: {wid: string}}) => {
-    throw redirect({to: '/workspaces/$wid/settings/members', params: {wid: params.wid}});
+  beforeLoad: ({params}: {params: {workspaceSlug: string}}) => {
+    throw redirect({
+      to: '/w/$workspaceSlug/settings/members',
+      params: {workspaceSlug: params.workspaceSlug},
+    });
   },
 });

package/test/pages.tsx

@@ -24,7 +24,7 @@ const authState: AuthState = {
     email: 'user@example.com',
     emailVerifiedAt: new Date().toISOString(),
   },
-  workspaces: [{id: WORKSPACE_SETTINGS_TEST_WID, name: 'Acme', membershipId: 'm-1'}],
+  workspaces: [{id: WORKSPACE_SETTINGS_TEST_WID, name: 'Acme', slug: 'acme', membershipId: 'm-1'}],
 };
 
 export function jsonResponse(body: unknown, init: ResponseInit = {}) {
@@ -39,22 +39,27 @@ function createTestRouter(path: string, element: ReactElement) {
   const rootRoute = createRootRoute({component: Outlet});
   const runnersRoute = createRoute({
     getParentRoute: () => rootRoute,
-    path: '/workspaces/$wid/settings/runners',
+    path: '/w/$workspaceSlug/settings/runners',
     component: () => element,
   });
   const provisionersRoute = createRoute({
     getParentRoute: () => rootRoute,
-    path: '/workspaces/$wid/settings/provisioners',
+    path: '/w/$workspaceSlug/settings/provisioners',
     component: () => element,
   });
   const modelProvidersRoute = createRoute({
     getParentRoute: () => rootRoute,
-    path: '/workspaces/$wid/settings/agents',
+    path: '/w/$workspaceSlug/settings/agents',
     component: () => element,
   });
   const integrationsRoute = createRoute({
     getParentRoute: () => rootRoute,
-    path: '/workspaces/$wid/settings/integrations',
+    path: '/w/$workspaceSlug/settings/integrations',
+    component: () => element,
+  });
+  const generalRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/w/$workspaceSlug/settings/general',
     component: () => element,
   });
 
@@ -65,6 +70,7 @@ function createTestRouter(path: string, element: ReactElement) {
       provisionersRoute,
       modelProvidersRoute,
       integrationsRoute,
+      generalRoute,
     ]),
   });
 }