@shipfox/client-integrations 17.0.0 → 22.0.0

package/src/components/repository-picker.test.tsx

@@ -17,6 +17,19 @@ afterEach(() => {
 });
 
 describe('RepositoryPicker', () => {
+  test('renders the default empty message without an internal search control', () => {
+    renderPicker();
+
+    expect(screen.getByText('No repositories found.')).toBeInTheDocument();
+    expect(screen.queryByRole('searchbox')).not.toBeInTheDocument();
+  });
+
+  test('renders a custom empty message', () => {
+    renderPicker({emptyMessage: 'No repositories visible to this connection.'});
+
+    expect(screen.getByText('No repositories visible to this connection.')).toBeInTheDocument();
+  });
+
   test('renders repository names without owner or default branch metadata', () => {
     renderPicker({
       repositories: [
@@ -65,27 +78,28 @@ describe('RepositoryPicker', () => {
     const {container} = renderPicker({
       repositories: [],
       isLoading: true,
-      searchValue: '',
-      onSearchChange: () => undefined,
     });
 
     expect(screen.getByRole('status')).toHaveTextContent('Loading repositories.');
-    expect(screen.getByRole('searchbox')).toBeInTheDocument();
+    expect(screen.queryByRole('searchbox')).not.toBeInTheDocument();
 
     const loadingGrid = container.querySelector('[aria-hidden="true"]');
     if (!loadingGrid) throw new Error('Repository loading grid was not rendered');
 
-    expect(loadingGrid).toHaveClass('grid', 'grid-cols-2', 'gap-inline', 'max-[760px]:grid-cols-1');
+    // The placeholders sit in the same hairline cell grid as the loaded cards,
+    // so the list does not change shape when the fetch resolves.
+    expect(loadingGrid).toHaveClass('grid', 'grid-cols-2', 'max-[760px]:grid-cols-1');
+    expect(loadingGrid).toHaveClass('min-[760px]:[&>*:nth-child(2n_of_:not(input))]:border-l');
+    expect(loadingGrid).not.toHaveClass('gap-inline');
     expect(loadingGrid.querySelectorAll('[data-slot="skeleton"]')).toHaveLength(4);
-    for (const placeholder of loadingGrid.querySelectorAll(':scope > div')) {
-      expect(placeholder).toHaveClass(
-        'h-50',
-        'rounded-8',
-        'border',
-        'border-border-neutral-base',
-        'bg-background-neutral-base',
-        'p-[14px]',
-      );
+    // The placeholder box belongs to `RadioGroupItemSkeleton`, so this only
+    // checks that each slot carries the indicator and one bar. react-ui owns
+    // keeping that surface identical to a real item.
+    const placeholders = loadingGrid.querySelectorAll(':scope > div');
+    expect(placeholders).toHaveLength(4);
+    for (const placeholder of placeholders) {
+      expect(placeholder.querySelector('[data-slot="radio-indicator"]')).not.toBeNull();
+      expect(placeholder.querySelector('[data-slot="skeleton"]')).not.toBeNull();
     }
   });
 });

package/src/components/repository-picker.tsx

@@ -1,15 +1,13 @@
 import {Button} from '@shipfox/react-ui/button';
 import {useIsTextTruncated} from '@shipfox/react-ui/hooks';
-import {Input} from '@shipfox/react-ui/input';
 import {Label} from '@shipfox/react-ui/label';
-import {RadioGroup, RadioGroupItem} from '@shipfox/react-ui/radio-group';
-import {Skeleton} from '@shipfox/react-ui/skeleton';
+import {PanelGrid} from '@shipfox/react-ui/panel';
+import {RadioGroup, RadioGroupItem, RadioGroupItemSkeleton} from '@shipfox/react-ui/radio-group';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
 import {Text} from '@shipfox/react-ui/typography';
 import {useId} from 'react';
 import type {Repository} from '#core/models.js';
 
-const REPOSITORY_GRID_CLASS_NAME = 'grid grid-cols-2 gap-inline max-[760px]:grid-cols-1';
 const REPOSITORY_SKELETON_WIDTHS = ['w-64', 'w-96', 'w-80', 'w-112'] as const;
 
 export function RepositoryPicker({
@@ -21,9 +19,6 @@ export function RepositoryPicker({
   hasNextPage,
   onLoadMore,
   emptyMessage = 'No repositories found.',
-  searchValue,
-  onSearchChange,
-  searchDisabled,
 }: {
   repositories: Repository[];
   selectedRepositoryId: string | undefined;
@@ -33,44 +28,29 @@ export function RepositoryPicker({
   hasNextPage?: boolean;
   onLoadMore?: () => void;
   emptyMessage?: string;
-  searchValue?: string;
-  onSearchChange?: (value: string) => void;
-  searchDisabled?: boolean;
 }) {
   const labelId = useId();
-  const showSearch = onSearchChange !== undefined;
 
   return (
-    <div className="flex flex-col gap-inline">
+    <div className="flex min-w-0 flex-col">
       <Label id={labelId} className="sr-only">
         Repository
       </Label>
 
-      {showSearch ? (
-        <Input
-          type="search"
-          placeholder="Search repositories…"
-          aria-label="Search repositories"
-          value={searchValue ?? ''}
-          onChange={(event) => onSearchChange?.(event.target.value)}
-          disabled={searchDisabled}
-        />
-      ) : null}
-
       {isLoading ? <RepositoryLoadingState /> : null}
 
       {!isLoading && repositories.length === 0 ? (
-        <div className="rounded-8 border border-border-neutral-base bg-background-subtle-base p-panel-compact">
-          <Text size="sm">{emptyMessage}</Text>
-        </div>
+        <Text size="sm" className="px-row py-row">
+          {emptyMessage}
+        </Text>
       ) : null}
 
       {repositories.length > 0 ? (
         <RadioGroup
+          variant="cell"
           aria-labelledby={labelId}
           value={selectedRepositoryId ?? ''}
           onValueChange={onSelect}
-          className={REPOSITORY_GRID_CLASS_NAME}
         >
           {repositories.map((repository) => (
             <RepositoryCard key={repository.externalRepositoryId} repository={repository} />
@@ -79,15 +59,17 @@ export function RepositoryPicker({
       ) : null}
 
       {hasNextPage && onLoadMore ? (
-        <Button
-          type="button"
-          variant="secondary"
-          size="sm"
-          isLoading={isFetchingNextPage ?? false}
-          onClick={onLoadMore}
-        >
-          Load more
-        </Button>
+        <div className="flex justify-center border-t border-border-neutral-base p-panel-compact">
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            isLoading={isFetchingNextPage ?? false}
+            onClick={onLoadMore}
+          >
+            Load more
+          </Button>
+        </div>
       ) : null}
     </div>
   );
@@ -99,7 +81,7 @@ function RepositoryCard({repository}: {repository: Repository}) {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <RadioGroupItem value={repository.externalRepositoryId} className="min-w-0">
+        <RadioGroupItem value={repository.externalRepositoryId}>
           <span ref={nameRef} className="block min-w-0 truncate">
             <Text as="span" size="sm" bold>
               {repository.name}
@@ -118,18 +100,11 @@ function RepositoryLoadingState() {
       <div role="status" className="sr-only">
         Loading repositories.
       </div>
-      <div aria-hidden="true" className={REPOSITORY_GRID_CLASS_NAME}>
-        {/* The skeleton mirrors RadioGroupItem's own 14px padding contract so the
-            placeholder and the loaded card stay the same height. */}
+      <PanelGrid as="div" aria-hidden="true">
         {REPOSITORY_SKELETON_WIDTHS.map((width) => (
-          <div
-            key={width}
-            className="h-50 min-w-0 rounded-8 border border-border-neutral-base bg-background-neutral-base p-[14px]"
-          >
-            <Skeleton className={`h-20 ${width}`} />
-          </div>
+          <RadioGroupItemSkeleton key={width} variant="cell" labelClassName={width} />
         ))}
-      </div>
+      </PanelGrid>
     </>
   );
 }

package/src/components/webhook/webhook-modals.stories.tsx

@@ -126,7 +126,7 @@ export const CopyableValueState: Story = {
 
 function StorySurface({scenario}: {scenario: Scenario}) {
   return (
-    <div className="min-h-screen bg-background-neutral-background p-24">
+    <div className="min-h-screen bg-background-subtle-base p-24">
       {scenario === 'create-form' ? (
         <WebhookCreateModal
           workspaceId={WORKSPACE_ID}

package/src/pages/gitea-install-page.tsx

@@ -40,7 +40,7 @@ export function GiteaInstallPage() {
   });
 
   return (
-    <div className="mx-auto flex w-full max-w-[480px] flex-col gap-section">
+    <div className="flex w-full flex-col gap-section">
       <header className="flex flex-col gap-inline">
         <Header variant="h1">Install Gitea</Header>
         <Text size="md" className="text-foreground-neutral-muted">

package/src/pages/jira-callback-page.tsx

@@ -1,10 +1,10 @@
 import {useAuthState, useRefreshAuth} from '@shipfox/client-auth';
-import {useRouteSearch} from '@shipfox/client-shell/runtime';
+import {FocusedFrame, useRouteSearch} from '@shipfox/client-shell/runtime';
 import {sessionStorageOrUndefined} from '@shipfox/client-ui';
 import {Button, ButtonLink} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
-import {Card} from '@shipfox/react-ui/card';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
+import {Panel} from '@shipfox/react-ui/panel';
 import {toast} from '@shipfox/react-ui/toast';
 import {Header, Text} from '@shipfox/react-ui/typography';
 import {useQueryClient} from '@tanstack/react-query';
@@ -300,8 +300,8 @@ function JiraSiteSelectionPage({
   onSelect: (site: JiraSite) => void;
 }) {
   return (
-    <main className="flex min-h-screen bg-background-subtle-base px-row py-frame">
-      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-section">
+    <main className="flex min-h-screen px-frame py-frame">
+      <FocusedFrame className="flex flex-col justify-center gap-section">
         <header className="flex flex-col gap-inline">
           <Header variant="h2">Choose a Jira site</Header>
           <Text size="sm" className="text-foreground-neutral-muted">
@@ -317,7 +317,7 @@ function JiraSiteSelectionPage({
 
         <section className="flex flex-col gap-inline" aria-label="Choose a Jira site">
           {sites.map((site) => (
-            <Card key={site.cloudId} className="p-panel-compact">
+            <Panel key={site.cloudId} className="p-panel-compact">
               <div className="flex items-center justify-between gap-cluster">
                 <div className="min-w-0">
                   <Text size="md" bold className="truncate">
@@ -336,7 +336,7 @@ function JiraSiteSelectionPage({
                   Connect
                 </Button>
               </div>
-            </Card>
+            </Panel>
           ))}
         </section>
 
@@ -360,7 +360,7 @@ function JiraSiteSelectionPage({
             </ButtonLink>
           )}
         </div>
-      </div>
+      </FocusedFrame>
     </main>
   );
 }

package/src/pages/sentry-callback-page.tsx

@@ -1,10 +1,10 @@
 import {useAuthState, useRefreshAuth} from '@shipfox/client-auth';
-import {useRouteSearch} from '@shipfox/client-shell/runtime';
+import {FocusedFrame, useRouteSearch} from '@shipfox/client-shell/runtime';
 import {createSingleFlight, sessionStorageOrUndefined} from '@shipfox/client-ui';
 import {Button, ButtonLink} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
-import {Card} from '@shipfox/react-ui/card';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
+import {Panel} from '@shipfox/react-ui/panel';
 import {toast} from '@shipfox/react-ui/toast';
 import {Header, Text} from '@shipfox/react-ui/typography';
 import {useQueryClient} from '@tanstack/react-query';
@@ -212,7 +212,7 @@ export function SentryCallbackPage() {
 
       <section className="flex flex-col gap-inline" aria-label="Choose a workspace">
         {orderedWorkspaces.map((workspace) => (
-          <Card key={workspace.id} className="p-panel-compact">
+          <Panel key={workspace.id} className="p-panel-compact">
             <div className="flex items-center justify-between gap-cluster">
               <Text size="md" bold className="truncate">
                 {workspace.name}
@@ -226,7 +226,7 @@ export function SentryCallbackPage() {
                 Install
               </Button>
             </div>
-          </Card>
+          </Panel>
         ))}
       </section>
 
@@ -246,10 +246,8 @@ export function SentryCallbackPage() {
 
 function CallbackColumn({children}: {children: React.ReactNode}) {
   return (
-    <main className="flex min-h-screen bg-background-subtle-base px-row py-frame">
-      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-section">
-        {children}
-      </div>
+    <main className="flex min-h-screen px-frame py-frame">
+      <FocusedFrame className="flex flex-col justify-center gap-section">{children}</FocusedFrame>
     </main>
   );
 }

package/src/pages/slack-callback-page.test.tsx

@@ -1,5 +1,6 @@
 // @vitest-environment jsdom
 import '@testing-library/jest-dom/vitest';
+import {configureApiClient} from '@shipfox/client-api';
 import {screen, waitFor} from '@testing-library/react';
 import {StrictMode} from 'react';
 import {SLACK_INSTALL_WORKSPACE_KEY} from '#slack-callback.js';
@@ -27,6 +28,12 @@ vi.mock('#hooks/api/integrations.js', async (importOriginal) => {
 beforeEach(() => {
   window.sessionStorage.clear();
   completeCallbackMock.mockReset();
+  configureApiClient({
+    baseUrl: 'https://api.example.test',
+    fetchImpl: vi.fn((_input: RequestInfo | URL) =>
+      Promise.reject(new Error('Workspace list unavailable')),
+    ),
+  });
 });
 
 describe('SlackCallbackPage', () => {

package/src/pages/source-control-onboarding-page.tsx

@@ -8,7 +8,7 @@ export function SourceControlOnboardingPage() {
   const providersQuery = useIntegrationProvidersQuery({capability: 'source_control'});
 
   return (
-    <div className="mx-auto flex w-full max-w-[640px] flex-col gap-section">
+    <div className="flex w-full flex-col gap-section">
       <header className="flex flex-col gap-inline">
         <Header variant="h1">Install source control</Header>
         <Text size="md" className="text-foreground-neutral-muted">

package/src/routes/gitea.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {GiteaInstallPage} from '#pages/gitea-install-page.js';
 
-export default defineRoute({component: GiteaInstallPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  component: GiteaInstallPage,
+});

package/src/routes/github-callback.tsx

@@ -29,6 +29,7 @@ const callbackRequests = createSingleFlight<string, void>({maxTerminalResults: 3
 const toastedCallbacks = new Set<string>();
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   validateSearch: validateGithubCallbackSearch,
   component: GithubCallbackRoute,
 });

package/src/routes/github.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {GithubInstallPage} from '#pages/github-install-page.js';
 
-export default defineRoute({component: GithubInstallPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  component: GithubInstallPage,
+});

package/src/routes/integrations-settings.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {IntegrationGallery} from '#index.js';
 
-export default defineRoute({component: IntegrationGallery});
+export default defineRoute({
+  staticData: {frame: 'content'},
+  component: IntegrationGallery,
+});

package/src/routes/integrations.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {SourceControlOnboardingPage} from '#pages/source-control-onboarding-page.js';
 
-export default defineRoute({component: SourceControlOnboardingPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  component: SourceControlOnboardingPage,
+});

package/src/routes/jira-callback.tsx

@@ -3,6 +3,7 @@ import {JiraCallbackPage} from '#pages/jira-callback-page.js';
 import {parseJiraCallbackQuery} from '../jira-callback.js';
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   validateSearch: parseJiraCallbackQuery,
   component: JiraCallbackPage,
 });

package/src/routes/jira.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {JiraInstallPage} from '#pages/jira-install-page.js';
 
-export default defineRoute({component: JiraInstallPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  component: JiraInstallPage,
+});

package/src/routes/linear-callback.tsx

@@ -3,6 +3,7 @@ import {LinearCallbackPage} from '#pages/linear-callback-page.js';
 import {parseLinearCallbackQuery} from '../linear-callback.js';
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   validateSearch: parseLinearCallbackQuery,
   component: LinearCallbackPage,
 });

package/src/routes/linear.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {LinearInstallPage} from '#pages/linear-install-page.js';
 
-export default defineRoute({component: LinearInstallPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  component: LinearInstallPage,
+});

package/src/routes/sentry-callback.tsx

@@ -3,6 +3,7 @@ import {SentryCallbackPage} from '#pages/sentry-callback-page.js';
 import {parseSentryCallbackParams} from '../sentry-callback.js';
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   validateSearch: parseSentryCallbackParams,
   component: SentryCallbackPage,
 });

package/src/routes/sentry.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {SentryInstallPage} from '#pages/sentry-install-page.js';
 
-export default defineRoute({component: SentryInstallPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  component: SentryInstallPage,
+});

package/src/routes/slack-callback.tsx

@@ -3,6 +3,7 @@ import {SlackCallbackPage} from '#pages/slack-callback-page.js';
 import {parseSlackCallbackQuery} from '../slack-callback.js';
 
 export default defineRoute({
+  staticData: {frame: 'focused'},
   validateSearch: parseSlackCallbackQuery,
   component: SlackCallbackPage,
 });

package/src/routes/slack.tsx

@@ -1,3 +1,6 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {SlackInstallPage} from '#pages/slack-install-page.js';
-export default defineRoute({component: SlackInstallPage});
+export default defineRoute({
+  staticData: {frame: 'focused'},
+  component: SlackInstallPage,
+});