@shipfox/client-integrations 8.0.0 → 10.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-integrations",
   "license": "MIT",
-  "version": "8.0.0",
+  "version": "10.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -35,8 +35,8 @@
     "@shipfox/api-integration-sentry-dto": "9.0.2",
     "@shipfox/api-integration-webhook-dto": "9.0.2",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-auth": "8.0.0",
-    "@shipfox/client-shell": "8.0.0",
+    "@shipfox/client-auth": "10.0.0",
+    "@shipfox/client-shell": "10.0.0",
     "@shipfox/client-ui": "6.0.2",
     "@shipfox/integration-icons": "0.2.2",
     "@shipfox/react-ui": "0.3.7"

package/src/components/connection-picker.tsx

@@ -27,10 +27,10 @@ export function ConnectionPicker({
         aria-labelledby={labelId}
         value={selectedConnectionId ?? ''}
         onValueChange={onSelect}
-        className="grid grid-cols-2 gap-8 min-[1200px]:grid-cols-3 max-[760px]:grid-cols-1"
+        className="grid grid-cols-2 gap-8 max-[760px]:grid-cols-1"
       >
         {connections.map((connection) => (
-          <RadioGroupItem key={connection.id} value={connection.id} className="p-12">
+          <RadioGroupItem key={connection.id} value={connection.id}>
             <ConnectionOption connection={connection} />
           </RadioGroupItem>
         ))}

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

@@ -0,0 +1,145 @@
+import {fireEvent, render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type {Repository} from '#core/models.js';
+import {RepositoryPicker} from './repository-picker.js';
+
+const originalScrollWidth = Object.getOwnPropertyDescriptor(
+  window.HTMLElement.prototype,
+  'scrollWidth',
+);
+const originalClientWidth = Object.getOwnPropertyDescriptor(
+  window.HTMLElement.prototype,
+  'clientWidth',
+);
+
+afterEach(() => {
+  restoreElementWidthDescriptors();
+});
+
+describe('RepositoryPicker', () => {
+  test('renders repository names without owner or default branch metadata', () => {
+    renderPicker({
+      repositories: [
+        repository({name: 'platform', fullName: 'acme/platform', defaultBranch: 'main'}),
+      ],
+    });
+
+    expect(screen.getByRole('radio', {name: 'platform'})).toBeInTheDocument();
+    expect(screen.queryByText('acme/platform')).not.toBeInTheDocument();
+    expect(screen.queryByText('main')).not.toBeInTheDocument();
+  });
+
+  test('shows the name-only tooltip when a repository name is truncated on hover', async () => {
+    setElementWidths({scrollWidth: 220, clientWidth: 100});
+    const user = userEvent.setup();
+    const repositoryName = 'acme-platform-infrastructure-control-plane';
+
+    renderPicker({repositories: [repository({name: repositoryName})]});
+    const radio = screen.getByRole('radio', {name: repositoryName});
+
+    await user.hover(radio);
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(repositoryName);
+  });
+
+  test('shows the name-only tooltip when a truncated repository name receives keyboard focus', async () => {
+    setElementWidths({scrollWidth: 220, clientWidth: 100});
+    const repositoryName = 'acme-platform-infrastructure-control-plane';
+
+    renderPicker({repositories: [repository({name: repositoryName})]});
+    const radio = screen.getByRole('radio', {name: repositoryName});
+
+    fireEvent.focus(radio);
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(repositoryName);
+  });
+
+  test('does not render tooltip content when a repository name is not truncated', () => {
+    setElementWidths({scrollWidth: 80, clientWidth: 100});
+
+    renderPicker({repositories: [repository({name: 'platform'})]});
+    fireEvent.focus(screen.getByRole('radio', {name: 'platform'}));
+
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  });
+
+  test('renders four accessible loading placeholders in the repository grid', () => {
+    const {container} = renderPicker({
+      repositories: [],
+      isLoading: true,
+      searchValue: '',
+      onSearchChange: () => undefined,
+    });
+
+    expect(screen.getByRole('status')).toHaveTextContent('Loading repositories.');
+    expect(screen.getByRole('searchbox')).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-8', 'max-[760px]:grid-cols-1');
+    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-14',
+      );
+    }
+  });
+});
+
+function renderPicker(
+  props: Partial<Parameters<typeof RepositoryPicker>[0]> = {},
+): ReturnType<typeof render> {
+  return render(
+    <RepositoryPicker
+      repositories={[]}
+      selectedRepositoryId={undefined}
+      onSelect={() => undefined}
+      isLoading={false}
+      {...props}
+    />,
+  );
+}
+
+function repository(overrides: Partial<Repository> = {}): Repository {
+  return {
+    connectionId: 'connection-1',
+    externalRepositoryId: 'repository-1',
+    owner: 'acme',
+    name: 'platform',
+    fullName: 'acme/platform',
+    defaultBranch: 'main',
+    visibility: 'private',
+    cloneUrl: 'https://github.example.test/acme/platform.git',
+    htmlUrl: 'https://github.example.test/acme/platform',
+    ...overrides,
+  };
+}
+
+function setElementWidths(widths: {scrollWidth: number; clientWidth: number}) {
+  Object.defineProperty(window.HTMLElement.prototype, 'scrollWidth', {
+    configurable: true,
+    get: () => widths.scrollWidth,
+  });
+  Object.defineProperty(window.HTMLElement.prototype, 'clientWidth', {
+    configurable: true,
+    get: () => widths.clientWidth,
+  });
+}
+
+function restoreElementWidthDescriptors() {
+  if (originalScrollWidth) {
+    Object.defineProperty(window.HTMLElement.prototype, 'scrollWidth', originalScrollWidth);
+  } else {
+    delete (window.HTMLElement.prototype as {scrollWidth?: number}).scrollWidth;
+  }
+
+  if (originalClientWidth) {
+    Object.defineProperty(window.HTMLElement.prototype, 'clientWidth', originalClientWidth);
+  } else {
+    delete (window.HTMLElement.prototype as {clientWidth?: number}).clientWidth;
+  }
+}

package/src/components/repository-picker.tsx

@@ -1,12 +1,17 @@
 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 {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-8 max-[760px]:grid-cols-1';
+const REPOSITORY_SKELETON_WIDTHS = ['w-64', 'w-96', 'w-80', 'w-112'] as const;
+
 export function RepositoryPicker({
   repositories,
   selectedRepositoryId,
@@ -52,7 +57,7 @@ export function RepositoryPicker({
         />
       ) : null}
 
-      {isLoading ? <Skeleton className="h-58 w-full" /> : null}
+      {isLoading ? <RepositoryLoadingState /> : null}
 
       {!isLoading && repositories.length === 0 ? (
         <div className="rounded-8 border border-border-neutral-base bg-background-subtle-base p-14">
@@ -65,23 +70,10 @@ export function RepositoryPicker({
           aria-labelledby={labelId}
           value={selectedRepositoryId ?? ''}
           onValueChange={onSelect}
-          className="grid grid-cols-2 gap-8 min-[1200px]:grid-cols-3 max-[760px]:grid-cols-1"
+          className={REPOSITORY_GRID_CLASS_NAME}
         >
           {repositories.map((repository) => (
-            <RadioGroupItem
-              key={repository.externalRepositoryId}
-              value={repository.externalRepositoryId}
-              className="p-12"
-            >
-              <span className="flex min-w-0 items-center justify-between gap-10">
-                <Text as="span" size="sm" bold className="truncate">
-                  {repository.fullName}
-                </Text>
-                <Text as="span" size="xs" className="shrink-0 text-foreground-neutral-muted">
-                  {repository.defaultBranch}
-                </Text>
-              </span>
-            </RadioGroupItem>
+            <RepositoryCard key={repository.externalRepositoryId} repository={repository} />
           ))}
         </RadioGroup>
       ) : null}
@@ -100,3 +92,42 @@ export function RepositoryPicker({
     </div>
   );
 }
+
+function RepositoryCard({repository}: {repository: Repository}) {
+  const {ref: nameRef, isTruncated} = useIsTextTruncated<HTMLSpanElement>(repository.name);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <RadioGroupItem value={repository.externalRepositoryId} className="min-w-0">
+          <span ref={nameRef} className="block min-w-0 truncate">
+            <Text as="span" size="sm" bold>
+              {repository.name}
+            </Text>
+          </span>
+        </RadioGroupItem>
+      </TooltipTrigger>
+      {isTruncated ? <TooltipContent>{repository.name}</TooltipContent> : null}
+    </Tooltip>
+  );
+}
+
+function RepositoryLoadingState() {
+  return (
+    <>
+      <div role="status" className="sr-only">
+        Loading repositories.
+      </div>
+      <div aria-hidden="true" className={REPOSITORY_GRID_CLASS_NAME}>
+        {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-14"
+          >
+            <Skeleton className={`h-20 ${width}`} />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}