@shipfox/client-integrations 3.0.1 → 5.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-integrations",
   "license": "MIT",
-  "version": "3.0.1",
+  "version": "5.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -31,17 +31,17 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
-    "@shipfox/api-integration-core-dto": "6.0.0",
-    "@shipfox/api-integration-gitea-dto": "6.0.0",
-    "@shipfox/api-integration-github-dto": "6.0.0",
-    "@shipfox/api-integration-linear-dto": "6.0.0",
-    "@shipfox/api-integration-slack-dto": "6.0.0",
-    "@shipfox/api-integration-sentry-dto": "6.0.0",
-    "@shipfox/api-integration-webhook-dto": "6.0.0",
-    "@shipfox/client-api": "1.0.0",
-    "@shipfox/client-auth": "3.0.1",
-    "@shipfox/client-shell": "3.0.1",
-    "@shipfox/client-ui": "3.0.1",
+    "@shipfox/api-integration-core-dto": "8.0.0",
+    "@shipfox/api-integration-gitea-dto": "8.0.0",
+    "@shipfox/api-integration-github-dto": "8.0.0",
+    "@shipfox/api-integration-linear-dto": "8.0.0",
+    "@shipfox/api-integration-slack-dto": "8.0.0",
+    "@shipfox/api-integration-sentry-dto": "8.0.0",
+    "@shipfox/api-integration-webhook-dto": "8.0.0",
+    "@shipfox/client-api": "4.0.0",
+    "@shipfox/client-auth": "5.0.0",
+    "@shipfox/client-shell": "5.0.0",
+    "@shipfox/client-ui": "4.0.0",
     "@shipfox/react-ui": "0.3.5"
   },
   "peerDependencies": {
@@ -51,39 +51,6 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "devDependencies": {
-    "@argos-ci/cli": "^5.0.0",
-    "@argos-ci/storybook": "^6.0.0",
-    "@storybook/addon-vitest": "^10.3.6",
-    "@storybook/react": "^10.0.0",
-    "@storybook/react-vite": "^10.0.0",
-    "@tailwindcss/vite": "^4.1.13",
-    "@tanstack/react-query": "^5.101.0",
-    "@tanstack/react-router": "^1.170.16",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.1.11",
-    "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react": "^6.0.0",
-    "@vitest/browser-playwright": "^4.1.5",
-    "jotai": "^2.19.1",
-    "jsdom": "^29.0.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "storybook": "^10.0.0",
-    "storybook-addon-pseudo-states": "^10.0.0",
-    "tailwindcss": "^4.1.13",
-    "vite": "^8.0.3",
-    "vitest": "^4.1.5",
-    "@shipfox/biome": "1.8.2",
-    "@shipfox/client-test-setup": "0.0.3",
-    "@shipfox/swc": "1.2.6",
-    "@shipfox/ts-config": "1.3.8",
-    "@shipfox/typescript": "1.1.7",
-    "@shipfox/vite": "1.2.5",
-    "@shipfox/vitest": "1.2.3"
-  },
   "scripts": {
     "build": "shipfox-swc",
     "check": "shipfox-biome-check",

package/src/feature.ts

@@ -53,5 +53,19 @@ export const integrationsFeature = defineClientFeature({
       parent: 'workspaceLayout',
       impl: '@shipfox/client-integrations/routes/slack',
     },
+    {
+      path: '/workspaces/$wid/settings/integrations',
+      parent: 'workspaceSettings',
+      impl: '@shipfox/client-integrations/routes/integrations-settings',
+    },
+  ],
+  settingsSections: [
+    {
+      id: 'settings.integrations',
+      pathSegment: 'integrations',
+      label: 'Integrations',
+      icon: 'plugLine',
+      order: 700,
+    },
   ],
 });

package/src/hooks/api/integrations.ts

@@ -33,7 +33,14 @@ import type {
   SlackCallbackResponseDto,
 } from '@shipfox/api-integration-slack-dto';
 import {apiRequest} from '@shipfox/client-api';
-import {useInfiniteQuery, useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import {
+  type FetchQueryOptions,
+  queryOptions,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
 import {serializeLinearCallbackQuery} from '#linear-callback.js';
 import {serializeSlackCallbackQuery} from '#slack-callback.js';
 
@@ -54,6 +61,17 @@ export const integrationsQueryKeys = {
     [...integrationsQueryKeys.all, 'repositories', connectionId, search] as const,
 };
 
+type SourceConnectionsQueryKey =
+  | ReturnType<typeof integrationsQueryKeys.sourceConnections>
+  | readonly ['integrations', 'source-connections'];
+
+type SourceConnectionsQueryOptions = FetchQueryOptions<
+  ListIntegrationConnectionsResponseDto,
+  Error,
+  ListIntegrationConnectionsResponseDto,
+  SourceConnectionsQueryKey
+>;
+
 export async function listIntegrationProviders({
   capability,
   signal,
@@ -108,6 +126,18 @@ export async function listSourceConnections({
   };
 }
 
+export function sourceConnectionsQueryOptions(
+  workspaceId: string | undefined,
+): SourceConnectionsQueryOptions {
+  return queryOptions({
+    queryKey: workspaceId
+      ? integrationsQueryKeys.sourceConnections(workspaceId)
+      : ([...integrationsQueryKeys.all, 'source-connections'] as const),
+    enabled: Boolean(workspaceId),
+    queryFn: ({signal}) => listSourceConnections({workspaceId: workspaceId ?? '', signal}),
+  });
+}
+
 export async function createGiteaConnection(body: CreateGiteaConnectionBodyDto) {
   return await apiRequest<CreateGiteaConnectionResponseDto>('/integrations/gitea/connections', {
     method: 'POST',
@@ -228,13 +258,7 @@ export function useIntegrationProvidersQuery(params?: {capability?: IntegrationC
 }
 
 export function useSourceConnectionsQuery(workspaceId: string | undefined) {
-  return useQuery({
-    queryKey: workspaceId
-      ? integrationsQueryKeys.sourceConnections(workspaceId)
-      : [...integrationsQueryKeys.all, 'source-connections'],
-    enabled: Boolean(workspaceId),
-    queryFn: ({signal}) => listSourceConnections({workspaceId: workspaceId ?? '', signal}),
-  });
+  return useQuery(sourceConnectionsQueryOptions(workspaceId));
 }
 
 export function useIntegrationConnectionsQuery(workspaceId: string | undefined) {

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

@@ -13,7 +13,7 @@ vi.mock('@shipfox/client-auth', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@shipfox/client-auth')>();
   return {
     ...actual,
-    useRefreshAuth: () => () => Promise.resolve({token: 'test-token'}),
+    useRefreshAuth: () => () => Promise.resolve({accessToken: 'test-token'}),
   };
 });
 

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

@@ -1,5 +1,6 @@
 import type {LinearCallbackResponseDto} from '@shipfox/api-integration-linear-dto';
 import {useRefreshAuth} from '@shipfox/client-auth';
+import {createSingleFlight} from '@shipfox/client-ui';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
 import {toast} from '@shipfox/react-ui/toast';
 import {useQueryClient} from '@tanstack/react-query';
@@ -16,12 +17,11 @@ import {
   serializeLinearCallbackQuery,
 } from '#linear-callback.js';
 
-// Keyed by the callback's code+state. This page has no in-place Retry (failures
-// route to "Start over", which begins a fresh install with a new state+code), so
-// entries are intentionally never evicted: retaining them dedupes StrictMode and
-// remount re-runs so the single-use grant code is exchanged at most once. The
-// sibling Sentry page evicts on settle only because its Retry replays the code.
-const callbackRequests = new Map<string, Promise<LinearCallbackResponseDto>>();
+// Retain only recent completions: this bounds long-lived callback pages while
+// still covering StrictMode and immediate Back/Forward remounts.
+const callbackRequests = createSingleFlight<string, LinearCallbackResponseDto>({
+  maxTerminalResults: 32,
+});
 // Keeps the success toast firing once per distinct callback even though the
 // effect re-runs against the cached request as the mutation identity churns.
 const toastedCallbacks = new Set<string>();
@@ -46,13 +46,14 @@ export function LinearCallbackPage() {
 
     let disposed = false;
     const key = serializeLinearCallbackQuery(params);
-    let request = callbackRequests.get(key);
-    if (!request) {
-      request = refreshAuth().then(
-        async (session) => await completeLinearCallback({query: params, token: session.token}),
-      );
-      callbackRequests.set(key, request);
-    }
+    const request = callbackRequests.run(
+      key,
+      async () =>
+        await refreshAuth().then(
+          async (session) =>
+            await completeLinearCallback({query: params, token: session.accessToken}),
+        ),
+    );
 
     request.then(
       async (connection) => {

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

@@ -13,7 +13,7 @@ vi.mock('@shipfox/client-auth', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@shipfox/client-auth')>();
   return {
     ...actual,
-    useRefreshAuth: () => () => Promise.resolve({token: 'test-token'}),
+    useRefreshAuth: () => () => Promise.resolve({accessToken: 'test-token'}),
   };
 });
 

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

@@ -1,5 +1,6 @@
 import type {SentryConnectResponseDto} from '@shipfox/api-integration-sentry-dto';
 import {useAuthState, useRefreshAuth} from '@shipfox/client-auth';
+import {createSingleFlight} 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';
@@ -19,12 +20,7 @@ import {
   type SentryConnectFailure,
 } from '#sentry-callback.js';
 
-// De-dupes concurrent attempts for the same installation+workspace+code
-// (double click, remount while in flight). Entries are evicted once the
-// request settles, so Retry, and any later attempt carrying a fresh grant
-// code, always issues a genuinely new request instead of replaying a cached
-// outcome.
-const connectRequests = new Map<string, Promise<SentryConnectResponseDto>>();
+const connectRequests = createSingleFlight<string, SentryConnectResponseDto>();
 
 export function SentryCallbackPage() {
   const search = useSearch({strict: false});
@@ -102,26 +98,20 @@ export function SentryCallbackPage() {
     setConnectingId(workspaceId);
     setFailure(undefined);
     const key = `${params.installationId}|${workspaceId}|${params.code}`;
-    let request = connectRequests.get(key);
-    if (!request) {
-      request = refreshAuth().then((session) =>
-        connectSentry({
-          body: {
-            workspace_id: workspaceId,
-            code: params.code,
-            installation_id: params.installationId,
-          },
-          token: session.token,
-        }),
-      );
-      // Evict on settle (success or failure) so the key never replays a stale
-      // outcome. Two-arg `then` keeps this cleanup branch from surfacing the
-      // rejection as unhandled — the main chain below owns the user-facing
-      // failure handling.
-      const evict = () => connectRequests.delete(key);
-      request.then(evict, evict);
-      connectRequests.set(key, request);
-    }
+    const request = connectRequests.run(
+      key,
+      async () =>
+        await refreshAuth().then((session) =>
+          connectSentry({
+            body: {
+              workspace_id: workspaceId,
+              code: params.code,
+              installation_id: params.installationId,
+            },
+            token: session.accessToken,
+          }),
+        ),
+    );
 
     request
       .then(async () => {

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

@@ -1,5 +1,6 @@
 import type {SlackCallbackResponseDto} from '@shipfox/api-integration-slack-dto';
 import {useRefreshAuth} from '@shipfox/client-auth';
+import {createSingleFlight} from '@shipfox/client-ui';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
 import {toast} from '@shipfox/react-ui/toast';
 import {useQueryClient} from '@tanstack/react-query';
@@ -16,9 +17,11 @@ import {
   serializeSlackCallbackQuery,
 } from '#slack-callback.js';
 
-// Requests and committed keys remain for the document lifetime so Strict Mode,
-// browser Back, and remounts never replay Slack's single-use grant code.
-const callbackRequests = new Map<string, Promise<SlackCallbackResponseDto>>();
+// Retain only recent completions: this bounds long-lived callback pages while
+// still covering StrictMode and immediate Back/Forward remounts.
+const callbackRequests = createSingleFlight<string, SlackCallbackResponseDto>({
+  maxTerminalResults: 32,
+});
 const completedCallbacks = new Set<string>();
 const toastedCallbacks = new Set<string>();
 
@@ -37,13 +40,14 @@ export function SlackCallbackPage() {
     if (!params) return;
     let disposed = false;
     const key = serializeSlackCallbackQuery(params);
-    let request = callbackRequests.get(key);
-    if (!request) {
-      request = refreshAuth().then(
-        async (session) => await completeSlackCallback({query: params, token: session.token}),
-      );
-      callbackRequests.set(key, request);
-    }
+    const request = callbackRequests.run(
+      key,
+      async () =>
+        await refreshAuth().then(
+          async (session) =>
+            await completeSlackCallback({query: params, token: session.accessToken}),
+        ),
+    );
     request.then(
       async (connection) => {
         if (disposed) return;

package/src/routes/github-callback.test.ts

@@ -0,0 +1,17 @@
+import {ApiError} from '@shipfox/client-api';
+import {githubCallbackErrorMessage} from './github-callback.js';
+
+describe('githubCallbackErrorMessage', () => {
+  it('does not expose an API error message or request URL', () => {
+    const error = new ApiError({
+      code: 'request-failed',
+      message: 'GET https://api.example.test/integrations/github/callback failed',
+      status: 500,
+    });
+
+    const message = githubCallbackErrorMessage(error);
+
+    expect(message).toBe('GitHub could not be installed. Try again from settings.');
+    expect(message).not.toContain('https://');
+  });
+});

package/src/routes/github-callback.tsx

@@ -1,6 +1,7 @@
 import {ApiError, apiRequest} from '@shipfox/client-api';
 import {useRefreshAuth} from '@shipfox/client-auth';
 import {defineRoute} from '@shipfox/client-shell/runtime';
+import {createSingleFlight} from '@shipfox/client-ui';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
 import {toast} from '@shipfox/react-ui/toast';
 import {useNavigate, useSearch} from '@tanstack/react-router';
@@ -13,7 +14,9 @@ interface GithubCallbackParams {
   setupAction?: string;
 }
 
-const callbackRequests = new Map<string, Promise<void>>();
+// Retain only recent completions: this bounds long-lived callback pages while
+// still covering StrictMode and immediate Back/Forward remounts.
+const callbackRequests = createSingleFlight<string, void>({maxTerminalResults: 32});
 const toastedCallbacks = new Set<string>();
 
 export default defineRoute({component: GithubCallbackRoute});
@@ -40,14 +43,15 @@ function GithubCallbackRoute() {
     }
     let disposed = false;
     const key = encodeCallbackQuery(params);
-    const request =
-      callbackRequests.get(key) ??
-      refreshAuth().then(async (session) => {
-        await apiRequest(`/integrations/github/callback/api?${key}`, {
-          headers: {authorization: `Bearer ${session.token}`},
-        });
-      });
-    callbackRequests.set(key, request);
+    const request = callbackRequests.run(
+      key,
+      async () =>
+        await refreshAuth().then(async (session) => {
+          await apiRequest(`/integrations/github/callback/api?${key}`, {
+            headers: {authorization: `Bearer ${session.accessToken}`},
+          });
+        }),
+    );
     request
       .then(() => {
         if (disposed) return;
@@ -107,8 +111,7 @@ function numberParam(value: unknown): number | undefined {
   }
   return undefined;
 }
-function githubCallbackErrorMessage(error: unknown): string {
-  if (error instanceof ApiError) return error.message;
-  if (error instanceof Error) return error.message;
+export function githubCallbackErrorMessage(error: unknown): string {
+  if (error instanceof ApiError) return 'GitHub could not be installed. Try again from settings.';
   return 'Could not install GitHub.';
 }

package/src/routes/integrations-settings.tsx

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

package/test/render.tsx

@@ -41,11 +41,7 @@ function authState(workspaces: TestWorkspace[]): AuthState {
     user: {
       id: '22222222-2222-4222-8222-222222222222',
       email: 'user@example.com',
-      name: null,
-      email_verified_at: new Date().toISOString(),
-      status: 'active',
-      created_at: new Date().toISOString(),
-      updated_at: new Date().toISOString(),
+      emailVerifiedAt: new Date().toISOString(),
     },
     workspaces,
   };