@shipfox/client-integrations 21.0.0 → 22.0.1

package/src/components/redirect-install-page.tsx

@@ -1,5 +1,6 @@
 import {ApiError} from '@shipfox/client-api';
 import {useActiveWorkspace} from '@shipfox/client-auth';
+import {FocusedFrame} from '@shipfox/client-shell/runtime';
 import {ButtonLink} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
@@ -54,7 +55,7 @@ export function RedirectInstallPage({
 
   if (errorMessage) {
     return (
-      <div className="mx-auto flex w-full max-w-[480px] flex-col gap-group">
+      <FocusedFrame className="flex flex-col gap-group">
         <Callout role="alert" type="error">
           <Text size="sm">{errorMessage}</Text>
         </Callout>
@@ -63,7 +64,7 @@ export function RedirectInstallPage({
             Back to integrations
           </Link>
         </ButtonLink>
-      </div>
+      </FocusedFrame>
     );
   }
 

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-neutral-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/pages/gitea-install-page.tsx

@@ -40,7 +40,7 @@ export function GiteaInstallPage() {
   });
 
   return (
-    <div className="mx-auto flex w-full 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,5 +1,5 @@
 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';
@@ -300,8 +300,8 @@ function JiraSiteSelectionPage({
   onSelect: (site: JiraSite) => void;
 }) {
   return (
-    <main className="flex min-h-screen px-row py-frame">
-      <div className="mx-auto flex w-full 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">
@@ -360,7 +360,7 @@ function JiraSiteSelectionPage({
             </ButtonLink>
           )}
         </div>
-      </div>
+      </FocusedFrame>
     </main>
   );
 }

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

@@ -1,5 +1,5 @@
 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';
@@ -246,8 +246,8 @@ export function SentryCallbackPage() {
 
 function CallbackColumn({children}: {children: React.ReactNode}) {
   return (
-    <main className="flex min-h-screen px-row py-frame">
-      <div className="mx-auto flex w-full 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 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/integrations-settings.tsx

@@ -1,7 +1,13 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
+import {Header} from '@shipfox/react-ui/typography';
 import {IntegrationGallery} from '#index.js';
 
 export default defineRoute({
   staticData: {frame: 'content'},
-  component: IntegrationGallery,
+  component: () => (
+    <div className="flex min-w-0 flex-col gap-section">
+      <Header variant="h1">Integrations</Header>
+      <IntegrationGallery />
+    </div>
+  ),
 });