@shipfox/client-projects 21.0.0 → 22.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-projects",
   "license": "MIT",
-  "version": "21.0.0",
+  "version": "22.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -31,13 +31,13 @@
     "@shipfox/api-definitions-dto": "12.3.0",
     "@shipfox/api-integration-core-dto": "12.2.0",
     "@shipfox/api-projects-dto": "12.2.0",
-    "@shipfox/client-agent": "21.0.0",
+    "@shipfox/client-agent": "22.0.1",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-auth": "21.0.0",
-    "@shipfox/client-integrations": "21.0.0",
-    "@shipfox/client-shell": "21.0.0",
-    "@shipfox/client-ui": "21.0.0",
-    "@shipfox/react-ui": "2.0.0"
+    "@shipfox/client-auth": "22.0.1",
+    "@shipfox/client-integrations": "22.0.1",
+    "@shipfox/client-shell": "22.0.1",
+    "@shipfox/client-ui": "22.0.0",
+    "@shipfox/react-ui": "2.1.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/source-strip.tsx

@@ -2,6 +2,7 @@ import {useActiveWorkspace} from '@shipfox/client-auth';
 import {useSourceConnectionsQuery} from '@shipfox/client-integrations';
 import {StatusBadge} from '@shipfox/react-ui/badge';
 import {Icon, type IconName} from '@shipfox/react-ui/icon';
+import {Panel} from '@shipfox/react-ui/panel';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
 import {Code, Text} from '@shipfox/react-ui/typography';
@@ -29,34 +30,36 @@ export function SourceStrip({
   const connection = connectionsQuery.data?.find((c) => c.id === connectionId);
 
   return (
-    <section
-      className="flex flex-col gap-inline rounded-8 border border-border-neutral-base bg-background-neutral-base px-row py-row sm:flex-row sm:items-center sm:justify-between"
-      aria-label="Project source"
+    <Panel
+      asChild
+      className="gap-inline px-row py-row sm:flex-row sm:items-center sm:justify-between"
     >
-      <div className="flex min-w-0 items-center gap-inline">
-        <Icon name={providerIconName(connection?.provider)} className="size-20 shrink-0" />
-        <div className="flex min-w-0 flex-col gap-tight sm:flex-row sm:items-center sm:gap-inline">
-          {connectionsQuery.isPending ? (
-            <Skeleton className="h-16 w-160" />
-          ) : (
-            <Text size="sm" bold className="truncate">
-              {connection?.displayName ?? 'Connected source'}
-            </Text>
-          )}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Code variant="label" className="truncate text-foreground-neutral-muted">
-                {externalRepositoryId}
-              </Code>
-            </TooltipTrigger>
-            <TooltipContent>{externalRepositoryId}</TooltipContent>
-          </Tooltip>
+      <section aria-label="Project source">
+        <div className="flex min-w-0 items-center gap-inline">
+          <Icon name={providerIconName(connection?.provider)} className="size-20 shrink-0" />
+          <div className="flex min-w-0 flex-col gap-tight sm:flex-row sm:items-center sm:gap-inline">
+            {connectionsQuery.isPending ? (
+              <Skeleton className="h-16 w-160" />
+            ) : (
+              <Text size="sm" bold className="truncate">
+                {connection?.displayName ?? 'Connected source'}
+              </Text>
+            )}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Code variant="label" className="truncate text-foreground-neutral-muted">
+                  {externalRepositoryId}
+                </Code>
+              </TooltipTrigger>
+              <TooltipContent>{externalRepositoryId}</TooltipContent>
+            </Tooltip>
+          </div>
         </div>
-      </div>
-      <div className="shrink-0">
-        <SyncBadge sync={sync} isPending={isPending} />
-      </div>
-    </section>
+        <div className="shrink-0">
+          <SyncBadge sync={sync} isPending={isPending} />
+        </div>
+      </section>
+    </Panel>
   );
 }
 

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

@@ -1,6 +1,7 @@
 import {configureApiClient} from '@shipfox/client-api';
 import {QueryClient} from '@tanstack/react-query';
-import {fireEvent, screen, waitFor} from '@testing-library/react';
+import {fireEvent, screen, waitFor, within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import {projectsQueryKeys} from '#hooks/api/projects.js';
 import {
   jsonResponse,
@@ -43,6 +44,24 @@ describe('CreateProjectPage', () => {
     const nameInput = await screen.findByLabelText('Project name');
     const slugInput = await screen.findByLabelText('Project slug');
     await waitFor(() => expect(nameInput).toHaveValue('Platform'));
+    expect(
+      screen.queryByText(
+        'A Shipfox project starts from a Git repository. Choose the repository Shipfox should track, then give the project a name.',
+      ),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole('searchbox', {name: 'Search repositories'})).toBeInTheDocument();
+    expect(document.querySelectorAll('[data-slot="panel"]')).toHaveLength(3);
+    expect(within(panelForHeading('Project details')).getByLabelText('Project name')).toBe(
+      nameInput,
+    );
+    expect(within(panelForHeading('Project details')).getByLabelText('Project slug')).toBe(
+      slugInput,
+    );
+    expect(
+      within(panelForHeading('Repository')).getByRole('searchbox', {
+        name: 'Search repositories',
+      }),
+    ).toBeInTheDocument();
     expect(slugInput).toHaveValue('platform');
     expect(slugInput).toHaveAttribute('aria-describedby', 'project-slug-description');
     expect(screen.getByText('/w/acme/p/platform')).toBeInTheDocument();
@@ -69,6 +88,65 @@ describe('CreateProjectPage', () => {
     });
   }, 10_000);
 
+  test('does not render an empty source panel when connections fail to load', async () => {
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.url.includes('/integration-connections?')) {
+        return Promise.resolve(jsonResponse({message: 'upstream unavailable'}, {status: 500}));
+      }
+      return Promise.resolve(jsonResponse({}));
+    });
+    configureApiClient({fetchImpl});
+
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />);
+
+    expect(
+      await screen.findByText(
+        'Could not load source integrations. Refresh the integrations list to continue.',
+      ),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('heading', {name: 'Source integration'})).not.toBeInTheDocument();
+    expect(document.querySelectorAll('[data-slot="panel"]')).toHaveLength(1);
+  });
+
+  test('passes the repository search filter to the query and renders the filtered empty state', 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`)) {
+        const search = new URL(request.url).searchParams.get('search');
+        return Promise.resolve(
+          jsonResponse(
+            search === 'xyz'
+              ? {repositories: [], next_cursor: null}
+              : {repositories: [repositoryDto()], next_cursor: null},
+          ),
+        );
+      }
+      return Promise.resolve(jsonResponse({}));
+    });
+    configureApiClient({fetchImpl});
+
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/projects/new`, <CreateProjectPage />);
+    expect((await screen.findAllByText('gitea-owner/platform')).length).toBeGreaterThan(0);
+
+    const user = userEvent.setup();
+    await user.type(screen.getByRole('searchbox', {name: 'Search repositories'}), 'xyz');
+
+    expect(await screen.findByText('No repositories matching "xyz".')).toBeInTheDocument();
+    expect(
+      fetchImpl.mock.calls.some(([input]) => {
+        const request = input as Request;
+        return (
+          request.url.includes(`/integration-connections/${CONNECTION_ID}/repositories`) &&
+          new URL(request.url).searchParams.get('search') === 'xyz'
+        );
+      }),
+    ).toBe(true);
+  });
+
   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;
@@ -496,3 +574,9 @@ function projectPostCount(fetchImpl: ReturnType<typeof vi.fn>): number {
     return request.url.endsWith('/projects') && request.method === 'POST';
   }).length;
 }
+
+function panelForHeading(name: string): HTMLElement {
+  const panel = screen.getByRole('heading', {name}).closest('[data-slot="panel"]');
+  if (!(panel instanceof HTMLElement)) throw new Error(`Panel not found for heading: ${name}`);
+  return panel;
+}

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

@@ -13,7 +13,9 @@ 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';
+import {Input} from '@shipfox/react-ui/input';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
+import {Panel, PanelActions, PanelBody, PanelHeader, PanelTitle} from '@shipfox/react-ui/panel';
 import {toast} from '@shipfox/react-ui/toast';
 import {Header, Text} from '@shipfox/react-ui/typography';
 import {useForm} from '@tanstack/react-form';
@@ -199,15 +201,9 @@ export function CreateProjectPage() {
 
   return (
     <div className="flex w-full flex-col gap-section">
-      <header className="flex flex-col gap-inline">
-        <Header id="create-project-title" variant="h1">
-          Create project
-        </Header>
-        <Text size="sm" className="text-foreground-neutral-muted">
-          A Shipfox project starts from a Git repository. Choose the repository Shipfox should
-          track, then give the project a name.
-        </Text>
-      </header>
+      <Header id="create-project-title" variant="h1">
+        Create project
+      </Header>
 
       <ModelProviderReminderBanner workspaceId={workspace.id} />
 
@@ -240,161 +236,177 @@ export function CreateProjectPage() {
         className="grid items-start gap-region lg:grid-cols-[minmax(0,1fr)_340px]"
       >
         <div className="flex min-w-0 flex-col gap-region">
-          <section className="flex flex-col gap-group" aria-label="Source integration">
-            <div className="flex items-start justify-between gap-group">
-              <div className="flex flex-col gap-tight">
-                <Header variant="h3">Source integration</Header>
-                <Text size="sm" className="text-foreground-neutral-muted">
-                  Choose the integration that can access the repository.
-                </Text>
-              </div>
-
-              {connections.length === 1 ? (
-                <Button asChild variant="transparent" size="sm" className="shrink-0">
-                  <Link
-                    to="/w/$workspaceSlug/integrations"
-                    params={{workspaceSlug: workspace.slug}}
-                  >
-                    Add another integration
-                  </Link>
-                </Button>
-              ) : null}
-            </div>
-
-            {connections.length > 0 ? (
-              <ConnectionPicker
-                connections={connections}
-                selectedConnectionId={effectiveSelectedConnectionId}
-                onSelect={selectConnection}
-              />
-            ) : null}
-          </section>
+          {connections.length > 0 ? (
+            <section aria-label="Source integration">
+              <Panel>
+                <PanelHeader>
+                  <PanelTitle>Source integration</PanelTitle>
+                  {connections.length === 1 ? (
+                    <PanelActions>
+                      <Button asChild variant="transparent" size="sm" className="shrink-0">
+                        <Link
+                          to="/w/$workspaceSlug/integrations"
+                          params={{workspaceSlug: workspace.slug}}
+                        >
+                          Add another integration
+                        </Link>
+                      </Button>
+                    </PanelActions>
+                  ) : null}
+                </PanelHeader>
+
+                <PanelBody>
+                  <ConnectionPicker
+                    connections={connections}
+                    selectedConnectionId={effectiveSelectedConnectionId}
+                    onSelect={selectConnection}
+                  />
+                </PanelBody>
+              </Panel>
+            </section>
+          ) : null}
 
           {showRepoPicker ? (
-            <section className="flex flex-col gap-group" aria-label="Repository">
-              <div className="flex flex-col gap-tight">
-                <Header variant="h3">Repository</Header>
-                <Text size="sm" className="text-foreground-neutral-muted">
-                  Select the repository this project tracks.
-                </Text>
-              </div>
-
-              <RepositoryPicker
-                repositories={repositories}
-                selectedRepositoryId={selectedRepositoryId}
-                onSelect={setSelectedRepositoryId}
-                isLoading={repositoriesQuery.isPending}
-                isFetchingNextPage={repositoriesQuery.isFetchingNextPage}
-                hasNextPage={repositoriesQuery.hasNextPage}
-                onLoadMore={() => repositoriesQuery.fetchNextPage()}
-                emptyMessage={filteredEmptyMessage}
-                searchValue={repoFilter}
-                onSearchChange={setRepoFilter}
-              />
+            <section aria-label="Repository">
+              <Panel>
+                <PanelHeader className="flex-wrap">
+                  <PanelTitle>Repository</PanelTitle>
+                  <PanelActions className="min-w-0 max-[640px]:ml-0 max-[640px]:basis-full">
+                    <Input
+                      type="search"
+                      placeholder="Search repositories…"
+                      aria-label="Search repositories"
+                      value={repoFilter}
+                      onChange={(event) => setRepoFilter(event.target.value)}
+                      className="w-full max-w-[320px]"
+                    />
+                  </PanelActions>
+                </PanelHeader>
+                <PanelBody>
+                  <RepositoryPicker
+                    repositories={repositories}
+                    selectedRepositoryId={selectedRepositoryId}
+                    onSelect={setSelectedRepositoryId}
+                    isLoading={repositoriesQuery.isPending}
+                    isFetchingNextPage={repositoriesQuery.isFetchingNextPage}
+                    hasNextPage={repositoriesQuery.hasNextPage}
+                    onLoadMore={() => repositoriesQuery.fetchNextPage()}
+                    emptyMessage={filteredEmptyMessage}
+                  />
+                </PanelBody>
+              </Panel>
             </section>
           ) : null}
         </div>
 
         <aside className="lg:sticky lg:top-32">
-          <div className="flex flex-col gap-group rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel">
-            <div className="flex flex-col gap-tight">
-              <Header variant="h3">Project details</Header>
-              <Text size="sm" className="text-foreground-neutral-muted">
-                Confirm the source and create the project.
-              </Text>
-            </div>
-
-            {formError ? (
-              <Callout role="alert" type="error">
-                <div ref={errorRef} tabIndex={-1}>
-                  {formError}
-                </div>
-              </Callout>
-            ) : null}
-
-            <ProjectSummary
-              connection={selectedConnection}
-              repositoryName={selectedRepository?.fullName}
-            />
-
-            <form.Field
-              name="name"
-              validators={{
-                onBlur: ({value}) =>
-                  displayNameFieldError(value, 'Project name', createProjectBodySchema.shape.name),
-                onSubmit: ({value}) =>
-                  displayNameFieldError(value, 'Project name', createProjectBodySchema.shape.name),
-              }}
-            >
-              {(field) => (
-                <FormField label="Project name" id="project-name" error={fieldError(field)}>
-                  <FormFieldInput
-                    name="name"
-                    type="text"
+          <Panel>
+            <PanelHeader>
+              <PanelTitle>Project details</PanelTitle>
+            </PanelHeader>
+            <PanelBody className="gap-group p-panel">
+              {formError ? (
+                <Callout role="alert" type="error">
+                  <div ref={errorRef} tabIndex={-1}>
+                    {formError}
+                  </div>
+                </Callout>
+              ) : null}
+
+              <ProjectSummary
+                connection={selectedConnection}
+                repositoryName={selectedRepository?.fullName}
+              />
+
+              <form.Field
+                name="name"
+                validators={{
+                  onBlur: ({value}) =>
+                    displayNameFieldError(
+                      value,
+                      'Project name',
+                      createProjectBodySchema.shape.name,
+                    ),
+                  onSubmit: ({value}) =>
+                    displayNameFieldError(
+                      value,
+                      'Project name',
+                      createProjectBodySchema.shape.name,
+                    ),
+                }}
+              >
+                {(field) => (
+                  <FormField label="Project name" id="project-name" error={fieldError(field)}>
+                    <FormFieldInput
+                      name="name"
+                      type="text"
+                      value={field.state.value}
+                      onChange={(event) => {
+                        const nextName = event.target.value;
+                        setNameTouched(true);
+                        field.handleChange(nextName);
+                        if (!slugManuallyEdited) {
+                          setSlugCheckEnabled(true);
+                          setSlugConflict(false);
+                          form.setFieldValue('slug', slugifyName(nextName, {fallback: 'project'}));
+                        }
+                      }}
+                      onBlur={field.handleBlur}
+                      placeholder="Platform"
+                    />
+                  </FormField>
+                )}
+              </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={(event) => {
-                      const nextName = event.target.value;
-                      setNameTouched(true);
-                      field.handleChange(nextName);
-                      if (!slugManuallyEdited) {
-                        setSlugCheckEnabled(true);
-                        setSlugConflict(false);
-                        form.setFieldValue('slug', slugifyName(nextName, {fallback: 'project'}));
-                      }
+                    onChange={(value) => {
+                      setSlugManuallyEdited(true);
+                      setSlugCheckEnabled(true);
+                      setSlugConflict(false);
+                      field.handleChange(value);
                     }}
                     onBlur={field.handleBlur}
-                    placeholder="Platform"
+                    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}
                   />
-                </FormField>
-              )}
-            </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"
-              isLoading={createProject.isPending}
-              disabled={!selectedConnection || !selectedRepository}
-              className="w-full"
-            >
-              Create project
-            </Button>
-          </div>
+                )}
+              </form.Field>
+
+              <Button
+                type="submit"
+                iconRight="chevronRight"
+                isLoading={createProject.isPending}
+                disabled={!selectedConnection || !selectedRepository}
+                className="w-full"
+              >
+                Create project
+              </Button>
+            </PanelBody>
+          </Panel>
         </aside>
       </form>
     </div>

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

@@ -18,7 +18,8 @@ describe('HomeRouter', () => {
 
     renderProjectPage(`/w/${PROJECT_TEST_WSLUG}`, <HomeRouter />);
 
-    expect(await screen.findByRole('heading', {name: 'Projects'})).toBeInTheDocument();
+    expect(await screen.findByRole('region', {name: 'Projects'})).toBeInTheDocument();
+    expect(screen.getByRole('searchbox', {name: 'Search projects'})).toBeInTheDocument();
     const calledUrls = fetchImpl.mock.calls.map(([input]) =>
       input instanceof Request ? input.url : String(input),
     );

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

@@ -17,7 +17,16 @@ describe('ProjectSettingsPage', () => {
     configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
 
     renderProjectPage('/w/acme/p/platform/settings/general', <ProjectSettingsPage />);
-    fireEvent.change(await screen.findByLabelText('Project name'), {
+    const nameInput = await screen.findByLabelText('Project name');
+    expect(screen.getByRole('heading', {name: 'General'})).toBeInTheDocument();
+    const settingsForm = nameInput.closest('form');
+    expect(settingsForm).not.toBeNull();
+    expect(settingsForm).toHaveClass('max-w-[560px]');
+    expect(
+      screen.queryByText('Update the project name and the slug used in its URLs.'),
+    ).not.toBeInTheDocument();
+    expect(document.querySelectorAll('[data-slot="panel"]')).toHaveLength(1);
+    fireEvent.change(nameInput, {
       target: {value: 'Platform API'},
     });
     fireEvent.click(screen.getByRole('button', {name: 'Save changes'}));