@shipfox/client-integrations 12.0.2 → 14.0.0

package/dist/workspace-navigation.d.ts

@@ -0,0 +1,13 @@
+import type { QueryClient } from '@tanstack/react-query';
+interface WorkspaceSlugCandidate {
+    id: string;
+    slug: string;
+}
+export declare function rememberCallbackKey(keys: Set<string>, key: string, maxSize?: number): void;
+export declare function resolveWorkspaceSlug({ workspaceId, fallbackWorkspaces, queryClient, }: {
+    workspaceId: string;
+    fallbackWorkspaces: readonly WorkspaceSlugCandidate[];
+    queryClient: QueryClient;
+}): Promise<string | undefined>;
+export {};
+//# sourceMappingURL=workspace-navigation.d.ts.map

package/dist/workspace-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-navigation.d.ts","sourceRoot":"","sources":["../src/workspace-navigation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAEvD,UAAU,sBAAsB;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAMD,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,SAAK,GAAG,IAAI,CAMtF;AAED,wBAAsB,oBAAoB,CAAC,EACzC,WAAW,EACX,kBAAkB,EAClB,WAAW,GACZ,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,SAAS,sBAAsB,EAAE,CAAC;IACtD,WAAW,EAAE,WAAW,CAAC;CAC1B,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAS9B"}

package/dist/workspace-navigation.js

@@ -0,0 +1,17 @@
+import { listUserWorkspaces, userWorkspacesQueryKey } from '@shipfox/client-shell/runtime';
+export function rememberCallbackKey(keys, key, maxSize = 32) {
+    keys.delete(key);
+    keys.add(key);
+    if (keys.size <= maxSize) return;
+    const oldest = keys.values().next().value;
+    if (typeof oldest === 'string') keys.delete(oldest);
+}
+export async function resolveWorkspaceSlug({ workspaceId, fallbackWorkspaces, queryClient }) {
+    const currentWorkspaces = await listUserWorkspaces().then(({ memberships })=>memberships).catch(()=>{
+        const refreshedWorkspaces = queryClient.getQueryData(userWorkspacesQueryKey);
+        return refreshedWorkspaces?.memberships ?? fallbackWorkspaces;
+    });
+    return currentWorkspaces.find(({ id })=>id === workspaceId)?.slug;
+}
+
+//# sourceMappingURL=workspace-navigation.js.map

package/dist/workspace-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/workspace-navigation.ts"],"sourcesContent":["import {listUserWorkspaces, userWorkspacesQueryKey} from '@shipfox/client-shell/runtime';\nimport type {QueryClient} from '@tanstack/react-query';\n\ninterface WorkspaceSlugCandidate {\n  id: string;\n  slug: string;\n}\n\ninterface UserWorkspacesQueryData {\n  memberships: WorkspaceSlugCandidate[];\n}\n\nexport function rememberCallbackKey(keys: Set<string>, key: string, maxSize = 32): void {\n  keys.delete(key);\n  keys.add(key);\n  if (keys.size <= maxSize) return;\n  const oldest = keys.values().next().value;\n  if (typeof oldest === 'string') keys.delete(oldest);\n}\n\nexport async function resolveWorkspaceSlug({\n  workspaceId,\n  fallbackWorkspaces,\n  queryClient,\n}: {\n  workspaceId: string;\n  fallbackWorkspaces: readonly WorkspaceSlugCandidate[];\n  queryClient: QueryClient;\n}): Promise<string | undefined> {\n  const currentWorkspaces = await listUserWorkspaces()\n    .then(({memberships}) => memberships)\n    .catch(() => {\n      const refreshedWorkspaces =\n        queryClient.getQueryData<UserWorkspacesQueryData>(userWorkspacesQueryKey);\n      return refreshedWorkspaces?.memberships ?? fallbackWorkspaces;\n    });\n  return currentWorkspaces.find(({id}) => id === workspaceId)?.slug;\n}\n"],"names":["listUserWorkspaces","userWorkspacesQueryKey","rememberCallbackKey","keys","key","maxSize","delete","add","size","oldest","values","next","value","resolveWorkspaceSlug","workspaceId","fallbackWorkspaces","queryClient","currentWorkspaces","then","memberships","catch","refreshedWorkspaces","getQueryData","find","id","slug"],"mappings":"AAAA,SAAQA,kBAAkB,EAAEC,sBAAsB,QAAO,gCAAgC;AAYzF,OAAO,SAASC,oBAAoBC,IAAiB,EAAEC,GAAW,EAAEC,UAAU,EAAE;IAC9EF,KAAKG,MAAM,CAACF;IACZD,KAAKI,GAAG,CAACH;IACT,IAAID,KAAKK,IAAI,IAAIH,SAAS;IAC1B,MAAMI,SAASN,KAAKO,MAAM,GAAGC,IAAI,GAAGC,KAAK;IACzC,IAAI,OAAOH,WAAW,UAAUN,KAAKG,MAAM,CAACG;AAC9C;AAEA,OAAO,eAAeI,qBAAqB,EACzCC,WAAW,EACXC,kBAAkB,EAClBC,WAAW,EAKZ;IACC,MAAMC,oBAAoB,MAAMjB,qBAC7BkB,IAAI,CAAC,CAAC,EAACC,WAAW,EAAC,GAAKA,aACxBC,KAAK,CAAC;QACL,MAAMC,sBACJL,YAAYM,YAAY,CAA0BrB;QACpD,OAAOoB,qBAAqBF,eAAeJ;IAC7C;IACF,OAAOE,kBAAkBM,IAAI,CAAC,CAAC,EAACC,EAAE,EAAC,GAAKA,OAAOV,cAAcW;AAC/D"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-integrations",
   "license": "MIT",
-  "version": "12.0.2",
+  "version": "14.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -27,19 +27,20 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
-    "@shipfox/api-integration-core-dto": "9.0.2",
-    "@shipfox/api-integration-gitea-dto": "9.0.2",
-    "@shipfox/api-integration-github-dto": "9.0.2",
-    "@shipfox/api-integration-linear-dto": "9.0.2",
-    "@shipfox/api-integration-slack-dto": "9.0.2",
-    "@shipfox/api-integration-sentry-dto": "9.0.2",
-    "@shipfox/api-integration-webhook-dto": "9.0.2",
+    "@shipfox/api-integration-core-dto": "12.0.0",
+    "@shipfox/api-integration-gitea-dto": "12.0.0",
+    "@shipfox/api-integration-github-dto": "12.0.0",
+    "@shipfox/api-integration-jira-dto": "12.0.0",
+    "@shipfox/api-integration-linear-dto": "12.0.0",
+    "@shipfox/api-integration-slack-dto": "12.0.0",
+    "@shipfox/api-integration-sentry-dto": "12.0.0",
+    "@shipfox/api-integration-webhook-dto": "12.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-auth": "12.0.2",
-    "@shipfox/client-shell": "12.0.2",
-    "@shipfox/client-ui": "6.0.2",
-    "@shipfox/integration-icons": "0.2.2",
-    "@shipfox/react-ui": "0.3.7"
+    "@shipfox/client-auth": "14.0.0",
+    "@shipfox/client-shell": "14.0.0",
+    "@shipfox/client-ui": "14.0.0",
+    "@shipfox/integration-icons": "0.3.0",
+    "@shipfox/react-ui": "0.5.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/application/complete-integration-callback.test.ts

@@ -1,7 +1,10 @@
 import {QueryClient} from '@tanstack/react-query';
 import type {IntegrationConnection} from '#core/models.js';
 import {integrationsQueryKeys} from '#hooks/api/integrations.js';
-import {completeIntegrationCallback} from './complete-integration-callback.js';
+import {
+  completeIntegrationCallback,
+  completeIntegrationCallbackResult,
+} from './complete-integration-callback.js';
 
 const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
 
@@ -38,4 +41,44 @@ describe('completeIntegrationCallback', () => {
       queryKey: integrationsQueryKeys.connectionsByWorkspace(WORKSPACE_ID),
     });
   });
+
+  test('does not invalidate a connection view for a result without a connection', async () => {
+    const queryClient = new QueryClient();
+    const invalidateQueries = vi.spyOn(queryClient, 'invalidateQueries');
+    const refreshAuth = vi.fn().mockResolvedValue({accessToken: 'access-token'});
+    const complete = vi.fn().mockResolvedValue({sites: []});
+
+    const result = await completeIntegrationCallbackResult({
+      input: {code: 'grant-code'},
+      refreshAuth,
+      complete,
+      getConnection: () => undefined,
+      queryClient,
+    });
+
+    expect(result).toEqual({sites: []});
+    expect(complete).toHaveBeenCalledWith({code: 'grant-code'}, 'access-token');
+    expect(invalidateQueries).not.toHaveBeenCalled();
+  });
+
+  test('invalidates a connection view for a result with a connection', async () => {
+    const queryClient = new QueryClient();
+    const invalidateQueries = vi.spyOn(queryClient, 'invalidateQueries');
+    const refreshAuth = vi.fn().mockResolvedValue({accessToken: 'access-token'});
+    const complete = vi.fn(async () => connection);
+
+    const result = await completeIntegrationCallbackResult({
+      input: {code: 'grant-code'},
+      refreshAuth,
+      complete,
+      getConnection: (value) => value,
+      queryClient,
+    });
+
+    expect(result).toBe(connection);
+    expect(complete).toHaveBeenCalledWith({code: 'grant-code'}, 'access-token');
+    expect(invalidateQueries).toHaveBeenCalledWith({
+      queryKey: integrationsQueryKeys.connectionsByWorkspace(WORKSPACE_ID),
+    });
+  });
 });

package/src/application/complete-integration-callback.ts

@@ -10,22 +10,65 @@ export interface CompleteIntegrationCallbackOptions<TInput> {
   queryClient: QueryClient;
 }
 
+export interface CompleteIntegrationCallbackResultOptions<TInput, TResult> {
+  input: TInput;
+  refreshAuth: () => Promise<{accessToken: string}>;
+  complete: (input: TInput, accessToken: string) => Promise<TResult>;
+  getConnection: (result: TResult) => IntegrationConnection | undefined;
+  queryClient: QueryClient;
+}
+
 export async function completeIntegrationCallback<TInput>({
   input,
   refreshAuth,
   complete,
   queryClient,
 }: CompleteIntegrationCallbackOptions<TInput>): Promise<IntegrationConnection> {
+  return await completeIntegrationCallbackResultInternal({
+    input,
+    refreshAuth,
+    complete,
+    getConnection: (result) => result,
+    queryClient,
+  });
+}
+
+export async function completeIntegrationCallbackResult<TInput, TResult>({
+  input,
+  refreshAuth,
+  complete,
+  getConnection,
+  queryClient,
+}: CompleteIntegrationCallbackResultOptions<TInput, TResult>): Promise<TResult> {
+  return await completeIntegrationCallbackResultInternal({
+    input,
+    refreshAuth,
+    complete,
+    getConnection,
+    queryClient,
+  });
+}
+
+async function completeIntegrationCallbackResultInternal<TInput, TResult>({
+  input,
+  refreshAuth,
+  complete,
+  getConnection,
+  queryClient,
+}: CompleteIntegrationCallbackResultOptions<TInput, TResult>): Promise<TResult> {
   const session = await refreshAuth();
-  const connection = await complete(input, session.accessToken);
-  try {
-    await queryClient.invalidateQueries({
-      queryKey: integrationsQueryKeys.connectionsByWorkspace(connection.workspaceId),
-    });
-  } catch {
-    // Cache refresh is best effort: the successful callback is already committed server-side.
+  const result = await complete(input, session.accessToken);
+  const connection = getConnection(result);
+  if (connection) {
+    try {
+      await queryClient.invalidateQueries({
+        queryKey: integrationsQueryKeys.connectionsByWorkspace(connection.workspaceId),
+      });
+    } catch {
+      // Cache refresh is best effort: the callback is already committed server-side.
+    }
   }
-  return connection;
+  return result;
 }
 
 export function useCompleteIntegrationCallback() {
@@ -37,3 +80,13 @@ export function useCompleteIntegrationCallback() {
     [queryClient],
   );
 }
+
+export function useCompleteIntegrationCallbackResult() {
+  const queryClient = useQueryClient();
+  return useCallback(
+    async <TInput, TResult>(
+      options: Omit<CompleteIntegrationCallbackResultOptions<TInput, TResult>, 'queryClient'>,
+    ): Promise<TResult> => completeIntegrationCallbackResult({...options, queryClient}),
+    [queryClient],
+  );
+}

package/src/components/callback-status-shell.tsx

@@ -7,24 +7,29 @@ import {useEffect, useRef} from 'react';
 export function CallbackStatusShell({
   title,
   message,
+  status = 'error',
   startOver,
   switchAccount,
-  workspaceId,
+  workspaceSlug,
   installPath,
 }: {
   title: string;
   message: string;
+  status?: 'error' | 'success';
   startOver?: boolean;
   switchAccount?: boolean;
-  workspaceId?: string | undefined;
-  installPath: '/workspaces/$wid/integrations/linear' | '/workspaces/$wid/integrations/slack';
+  workspaceSlug?: string | undefined;
+  installPath:
+    | '/w/$workspaceSlug/integrations/linear'
+    | '/w/$workspaceSlug/integrations/slack'
+    | '/w/$workspaceSlug/integrations/jira';
 }) {
   const headingRef = useRef<HTMLHeadingElement>(null);
   useEffect(() => headingRef.current?.focus(), []);
   const recoveryVariant = startOver || switchAccount ? 'muted' : 'base';
-  const settings = workspaceId ? (
+  const settings = workspaceSlug ? (
     <ButtonLink asChild variant={recoveryVariant} className="min-h-44 w-full sm:w-fit">
-      <Link to="/workspaces/$wid/settings/integrations" params={{wid: workspaceId}}>
+      <Link to="/w/$workspaceSlug/settings/integrations" params={{workspaceSlug}}>
         Back to integrations
       </Link>
     </ButtonLink>
@@ -33,7 +38,9 @@ export function CallbackStatusShell({
       <Link to="/">Back to Shipfox</Link>
     </ButtonLink>
   );
-  const logoutRedirect = workspaceId ? installPath.replace('$wid', workspaceId) : undefined;
+  const logoutRedirect = workspaceSlug
+    ? installPath.replace('$workspaceSlug', workspaceSlug)
+    : undefined;
 
   return (
     <main className="flex min-h-screen bg-background-subtle-base px-16 py-32">
@@ -41,7 +48,7 @@ export function CallbackStatusShell({
         <h2 ref={headingRef} tabIndex={-1} className="text-24 font-semibold outline-none">
           {title}
         </h2>
-        <Callout role="alert" type="error">
+        <Callout role={status === 'error' ? 'alert' : 'status'} type={status}>
           <Text size="sm">{message}</Text>
         </Callout>
         <div className="flex flex-col gap-8 sm:flex-row sm:items-center">
@@ -49,15 +56,15 @@ export function CallbackStatusShell({
             <ButtonLink asChild className="min-h-44 w-full sm:w-fit">
               <Link
                 to="/auth/logout"
-                search={workspaceId ? {redirect: logoutRedirect ?? '/'} : undefined}
+                search={logoutRedirect ? {redirect: logoutRedirect} : undefined}
               >
                 Switch account
               </Link>
             </ButtonLink>
           ) : null}
-          {startOver && workspaceId ? (
+          {startOver && workspaceSlug ? (
             <ButtonLink asChild className="min-h-44 w-full sm:w-fit">
-              <Link to={installPath} params={{wid: workspaceId}}>
+              <Link to={installPath} params={{workspaceSlug}}>
                 Start over
               </Link>
             </ButtonLink>

package/src/components/installed-integrations-section.tsx

@@ -18,6 +18,7 @@ import {type IntegrationConnection, isUsableConnection} from '#core/models.js';
 import {usageEventsForConnection} from './integration-usage-events.js';
 
 interface InstalledIntegrationsSectionProps {
+  workspaceSlug?: string | undefined;
   connections: IntegrationConnection[];
   isPending: boolean;
   isFetching: boolean;
@@ -34,6 +35,7 @@ const INSTALLED_SURFACE_CLASS =
   'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
 
 export function InstalledIntegrationsSection({
+  workspaceSlug,
   connections,
   isPending,
   isFetching,
@@ -81,6 +83,7 @@ export function InstalledIntegrationsSection({
             <InstalledRow
               key={connection.id}
               connection={connection}
+              workspaceSlug={workspaceSlug}
               isMutating={isMutating}
               onUse={onUse}
               onSetActive={(nextActive) => onSetActive(connection, nextActive)}
@@ -96,6 +99,7 @@ export function InstalledIntegrationsSection({
 
 function InstalledRow({
   connection,
+  workspaceSlug,
   isMutating,
   onUse,
   onSetActive,
@@ -103,6 +107,7 @@ function InstalledRow({
   providerDisplayName,
 }: {
   connection: IntegrationConnection;
+  workspaceSlug?: string | undefined;
   isMutating: boolean;
   onUse: (connectionId: string) => void;
   onSetActive: (active: boolean) => void;
@@ -159,15 +164,17 @@ function InstalledRow({
           <DropdownMenuItem onSelect={() => onUse(connection.id)}>
             Use this integration
           </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <Link
-              to="/workspaces/$wid/settings/events"
-              params={{wid: connection.workspaceId}}
-              search={{source: [connection.slug], event: [recentEventsEvent]}}
-            >
-              View recent events
-            </Link>
-          </DropdownMenuItem>
+          {workspaceSlug ? (
+            <DropdownMenuItem asChild>
+              <Link
+                to="/w/$workspaceSlug/settings/events"
+                params={{workspaceSlug}}
+                search={{source: [connection.slug], event: [recentEventsEvent]}}
+              >
+                View recent events
+              </Link>
+            </DropdownMenuItem>
+          ) : null}
           <DropdownMenuSeparator />
           <DropdownMenuItem disabled={isMutating} onSelect={() => onSetActive(!active)}>
             {active ? 'Disable integration' : 'Enable integration'}

package/src/components/integration-gallery-for-workspace.tsx

@@ -1,3 +1,4 @@
+import {useAuthState} from '@shipfox/client-auth';
 import {toast} from '@shipfox/react-ui/toast';
 import {Header, Text} from '@shipfox/react-ui/typography';
 import {useState} from 'react';
@@ -35,6 +36,8 @@ export function IntegrationGalleryForWorkspace({
   emptyProvidersMessage,
   workspaceId,
 }: IntegrationGalleryForWorkspaceProps) {
+  const {workspaces} = useAuthState();
+  const workspaceSlug = workspaces.find((workspace) => workspace.id === workspaceId)?.slug;
   const [createProvider, setCreateProvider] = useState<string | undefined>();
   const [usageConnectionId, setUsageConnectionId] = useState<string | undefined>();
   const [createdUsageConnection, setCreatedUsageConnection] = useState<
@@ -122,6 +125,7 @@ export function IntegrationGalleryForWorkspace({
   return (
     <div className="flex flex-col gap-24">
       <InstalledIntegrationsSection
+        workspaceSlug={workspaceSlug}
         connections={sortedConnections}
         isPending={connectionsQuery.isPending}
         isFetching={connectionsQuery.isFetching}
@@ -149,16 +153,22 @@ export function IntegrationGalleryForWorkspace({
           </Text>
         </div>
 
-        <ProviderGrid
-          providers={providers}
-          isPending={providersQuery.isPending}
-          isFetching={providersQuery.isFetching}
-          error={providersQuery.isError ? providersQuery.error : undefined}
-          onRetry={() => void providersQuery.refetch()}
-          workspaceId={workspaceId}
-          emptyMessage={emptyProvidersMessage}
-          onOpenProvider={setCreateProvider}
-        />
+        {workspaceSlug ? (
+          <ProviderGrid
+            workspaceSlug={workspaceSlug}
+            providers={providers}
+            isPending={providersQuery.isPending}
+            isFetching={providersQuery.isFetching}
+            error={providersQuery.isError ? providersQuery.error : undefined}
+            onRetry={() => void providersQuery.refetch()}
+            emptyMessage={emptyProvidersMessage}
+            onOpenProvider={setCreateProvider}
+          />
+        ) : (
+          <Text size="sm" className="text-foreground-neutral-muted" aria-live="polite">
+            Loading workspace details…
+          </Text>
+        )}
       </section>
       <WebhookCreateModal
         workspaceId={workspaceId}

package/src/components/integration-gallery.stories.tsx

@@ -20,14 +20,14 @@ import {useMemo} from 'react';
 import {IntegrationGallery} from './integration-gallery.js';
 
 const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
-const WORKSPACE_PATH = `/workspaces/${WORKSPACE_ID}/settings/integrations`;
+const WORKSPACE_PATH = '/w/acme/settings/integrations';
 const SETUP_PATHS = [
-  '/workspaces/$wid/integrations/github',
-  '/workspaces/$wid/integrations/sentry',
-  '/workspaces/$wid/integrations/linear',
-  '/workspaces/$wid/integrations/slack',
-  '/workspaces/$wid/integrations/gitea',
-  '/workspaces/$wid/settings/events',
+  '/w/$workspaceSlug/integrations/github',
+  '/w/$workspaceSlug/integrations/sentry',
+  '/w/$workspaceSlug/integrations/linear',
+  '/w/$workspaceSlug/integrations/slack',
+  '/w/$workspaceSlug/integrations/gitea',
+  '/w/$workspaceSlug/settings/events',
 ] as const;
 
 type Scenario =
@@ -66,7 +66,7 @@ function IntegrationGalleryStory({scenario}: IntegrationGalleryStoryProps) {
     const nextStore = createStore();
     nextStore.set(authStateAtom, {
       status: 'authenticated',
-      workspaces: [{id: WORKSPACE_ID, name: 'Acme', membershipId: 'membership-1'}],
+      workspaces: [{id: WORKSPACE_ID, name: 'Acme', slug: 'acme', membershipId: 'membership-1'}],
     });
     return nextStore;
   }, []);
@@ -74,7 +74,7 @@ function IntegrationGalleryStory({scenario}: IntegrationGalleryStoryProps) {
     const rootRoute = createRootRoute({component: Outlet});
     const workspaceRoute = createRoute({
       getParentRoute: () => rootRoute,
-      path: '/workspaces/$wid',
+      path: '/w/$workspaceSlug',
       component: Outlet,
     });
     const galleryRoute = createRoute({
@@ -89,7 +89,7 @@ function IntegrationGalleryStory({scenario}: IntegrationGalleryStoryProps) {
     const setupRoutes = SETUP_PATHS.map((path) =>
       createRoute({
         getParentRoute: () => workspaceRoute,
-        path: path.replace('/workspaces/$wid/', ''),
+        path: path.replace('/w/$workspaceSlug/', ''),
         component: () => <div />,
       }),
     );

package/src/components/integration-gallery.test.tsx

@@ -3,7 +3,12 @@ import '@testing-library/jest-dom/vitest';
 import type {IntegrationConnectionDto} from '@shipfox/api-integration-core-dto';
 import {configureApiClient} from '@shipfox/client-api';
 import {fireEvent, screen, waitFor, within} from '@testing-library/react';
-import {INTEGRATIONS_TEST_WID, jsonResponse, renderIntegrationsPage} from '#test/render.js';
+import {
+  INTEGRATIONS_TEST_WID,
+  jsonResponse,
+  renderIntegrationsPage,
+  testWorkspace,
+} from '#test/render.js';
 import {IntegrationGallery} from './integration-gallery.js';
 
 if (!HTMLElement.prototype.hasPointerCapture) {
@@ -28,9 +33,9 @@ if (!HTMLElement.prototype.releasePointerCapture) {
 }
 
 const SETUP_ROUTES = [
-  '/workspaces/$wid/integrations/github',
-  '/workspaces/$wid/integrations/sentry',
-  '/workspaces/$wid/settings/events',
+  '/w/$workspaceSlug/integrations/github',
+  '/w/$workspaceSlug/integrations/sentry',
+  '/w/$workspaceSlug/settings/events',
 ];
 const EXTERNAL_SETTINGS_ACTION_RE = /Open.*settings/u;
 
@@ -183,16 +188,18 @@ function fetchForGallery(options: FetchOptions = {}) {
 function renderGallery(
   props: Parameters<typeof IntegrationGallery>[0] = {},
   options: FetchOptions = {},
+  renderOptions: {workspaces?: Parameters<typeof renderIntegrationsPage>[0]['workspaces']} = {},
 ) {
   configureApiClient({
     baseUrl: 'https://api.example.test',
     fetchImpl: fetchForGallery(options),
   });
   return renderIntegrationsPage({
-    path: `/workspaces/${INTEGRATIONS_TEST_WID}/integrations`,
-    routePath: '/workspaces/$wid/integrations',
+    path: '/w/acme/integrations',
+    routePath: '/w/$workspaceSlug/integrations',
     element: <IntegrationGallery workspaceId={INTEGRATIONS_TEST_WID} {...props} />,
     extraRoutes: SETUP_ROUTES,
+    ...(renderOptions.workspaces ? {workspaces: renderOptions.workspaces} : {}),
   });
 }
 
@@ -203,11 +210,19 @@ const openActions = async (name: string) => {
 };
 
 const SORTED_NAMES_RE = /acme-(early|late)/;
-// The meta line carries the date only — the provider is named once, by the
+// The meta line carries the date only: the provider is named once, by the
 // icon and the account name, never repeated as body text in the row.
 const ADDED_META_RE = /^Added /;
+const GITHUB_LINK_RE = /GitHub/u;
 
 describe('IntegrationGallery — installed section', () => {
+  test('waits for an explicit workspace id to hydrate before showing install links', async () => {
+    renderGallery({}, {}, {workspaces: [testWorkspace({id: 'stale-workspace', slug: 'acme'})]});
+
+    expect(await screen.findByText('Loading workspace details…')).toBeVisible();
+    expect(screen.queryByRole('link', {name: GITHUB_LINK_RE})).not.toBeInTheDocument();
+  });
+
   test('renders two distinct cards for two connections sharing one provider', async () => {
     renderGallery(
       {},
@@ -375,8 +390,8 @@ describe('IntegrationGallery — installed section', () => {
     });
     configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
     renderIntegrationsPage({
-      path: `/workspaces/${INTEGRATIONS_TEST_WID}/integrations`,
-      routePath: '/workspaces/$wid/integrations',
+      path: '/w/acme/integrations',
+      routePath: '/w/$workspaceSlug/integrations',
       element: <IntegrationGallery />,
       extraRoutes: SETUP_ROUTES,
     });
@@ -410,8 +425,8 @@ describe('IntegrationGallery — installed section', () => {
     });
     configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
     renderIntegrationsPage({
-      path: `/workspaces/${INTEGRATIONS_TEST_WID}/integrations`,
-      routePath: '/workspaces/$wid/integrations',
+      path: '/w/acme/integrations',
+      routePath: '/w/$workspaceSlug/integrations',
       element: <IntegrationGallery />,
       extraRoutes: SETUP_ROUTES,
     });
@@ -441,8 +456,8 @@ describe('IntegrationGallery — installed section', () => {
     const fetchImpl = fetchForGallery({connections: [webhookConnection]});
     configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
     renderIntegrationsPage({
-      path: `/workspaces/${INTEGRATIONS_TEST_WID}/integrations`,
-      routePath: '/workspaces/$wid/integrations',
+      path: '/w/acme/integrations',
+      routePath: '/w/$workspaceSlug/integrations',
       element: <IntegrationGallery />,
       extraRoutes: SETUP_ROUTES,
     });
@@ -511,7 +526,7 @@ describe('IntegrationGallery — installed section', () => {
     expect(within(installedRegion()).getByText(ADDED_META_RE)).toBeVisible();
   });
 
-  test('names the provider once per row — not repeated in the meta line', async () => {
+  test('names the provider once per row: not repeated in the meta line', async () => {
     renderGallery({}, {connections: [githubConnection]});
 
     await screen.findByText('acme-corp');
@@ -549,7 +564,7 @@ describe('IntegrationGallery — installed section', () => {
   });
 });
 
-describe('IntegrationGallery — available section', () => {
+describe('IntegrationGallery: available section', () => {
   test('lists every provider with an Install link, including installed ones', async () => {
     renderGallery({}, {connections: [githubConnection]});
 

package/src/components/integration-usage-events.test.ts

@@ -1,4 +1,5 @@
 import type {IntegrationConnectionDto} from '@shipfox/api-integration-core-dto';
+import {jiraWebhookEventNames} from '@shipfox/api-integration-jira-dto';
 import {linearWebhookEventNames} from '@shipfox/api-integration-linear-dto';
 import {WEBHOOK_RECEIVED_EVENT} from '@shipfox/api-integration-webhook-dto';
 import {usageEventsForConnection} from './integration-usage-events.js';
@@ -67,6 +68,18 @@ describe('usageEventsForConnection', () => {
     expect(events.map((event) => event.value)).toEqual(linearWebhookEventNames);
   });
 
+  it('uses Jira webhook names directly', () => {
+    const connection = {
+      ...baseConnection,
+      provider: 'jira',
+      capabilities: ['agent_tools'],
+    } satisfies IntegrationConnectionDto;
+
+    const events = usageEventsForConnection(connection);
+
+    expect(events.map((event) => event.value)).toEqual(jiraWebhookEventNames);
+  });
+
   it('falls back to a generic received event for uncataloged providers', () => {
     const connection = {
       ...baseConnection,