@shipfox/client-integrations 12.0.2 → 14.0.0

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

@@ -7,6 +7,7 @@ import {Card} from '@shipfox/react-ui/card';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
 import {toast} from '@shipfox/react-ui/toast';
 import {Header, Text} from '@shipfox/react-ui/typography';
+import {useQueryClient} from '@tanstack/react-query';
 import {Link, useNavigate} from '@tanstack/react-router';
 import {useEffect, useMemo, useRef, useState} from 'react';
 import {useCompleteIntegrationCallback} from '#application/complete-integration-callback.js';
@@ -20,11 +21,13 @@ import {
   readSentryInstallWorkspace,
   type SentryConnectFailure,
 } from '#sentry-callback.js';
+import {resolveWorkspaceSlug} from '#workspace-navigation.js';
 
 const connectRequests = createSingleFlight<string, IntegrationConnection>();
 
 export function SentryCallbackPage() {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const refreshAuth = useRefreshAuth();
   const {workspaces, isLoading} = useAuthState();
   const completeIntegrationCallback = useCompleteIntegrationCallback();
@@ -124,11 +127,21 @@ export function SentryCallbackPage() {
         clearSentryInstallWorkspace(sessionStorageOrUndefined());
         if (disposedRef.current) return;
         toast.success('Sentry installed.');
-        await navigate({
-          to: '/workspaces/$wid/settings/integrations',
-          params: {wid: workspaceId},
-          replace: true,
+        const workspaceSlug = await resolveWorkspaceSlug({
+          workspaceId,
+          fallbackWorkspaces: workspaces,
+          queryClient,
         });
+        if (disposedRef.current) return;
+        await navigate(
+          workspaceSlug
+            ? {
+                to: '/w/$workspaceSlug/settings/integrations',
+                params: {workspaceSlug},
+                replace: true,
+              }
+            : {to: '/', replace: true},
+        );
       })
       .catch((error: unknown) => {
         if (disposedRef.current) return;
@@ -151,6 +164,9 @@ export function SentryCallbackPage() {
     : workspaces;
 
   const failureWorkspaceId = failure?.workspaceId ?? preselectedId ?? workspaces[0]?.id;
+  const failureWorkspace = failureWorkspaceId
+    ? workspaces.find(({id}) => id === failureWorkspaceId)
+    : undefined;
 
   return (
     <CallbackColumn>
@@ -178,9 +194,14 @@ export function SentryCallbackPage() {
                 Retry
               </Button>
             ) : null}
-            {failure.failure.kind === 'terminal' && failure.failure.startOver ? (
+            {failure.failure.kind === 'terminal' &&
+            failure.failure.startOver &&
+            failureWorkspace ? (
               <Button asChild size="sm" variant="secondary" className="w-fit">
-                <Link to="/workspaces/$wid/integrations/sentry" params={{wid: failure.workspaceId}}>
+                <Link
+                  to="/w/$workspaceSlug/integrations/sentry"
+                  params={{workspaceSlug: failureWorkspace.slug}}
+                >
                   Start over
                 </Link>
               </Button>
@@ -209,9 +230,12 @@ export function SentryCallbackPage() {
         ))}
       </section>
 
-      {failureWorkspaceId ? (
+      {failureWorkspace ? (
         <ButtonLink asChild variant="muted" className="w-fit">
-          <Link to="/workspaces/$wid/settings/integrations" params={{wid: failureWorkspaceId}}>
+          <Link
+            to="/w/$workspaceSlug/settings/integrations"
+            params={{workspaceSlug: failureWorkspace.slug}}
+          >
             Back to settings
           </Link>
         </ButtonLink>

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

@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest';
+import {screen, waitFor} from '@testing-library/react';
+import {StrictMode} from 'react';
+import {SLACK_INSTALL_WORKSPACE_KEY} from '#slack-callback.js';
+import {INTEGRATIONS_TEST_WID, renderIntegrationsPage, testWorkspace} from '#test/render.js';
+import {SlackCallbackPage} from './slack-callback-page.js';
+
+const {completeCallbackMock} = vi.hoisted(() => ({completeCallbackMock: vi.fn()}));
+
+vi.mock('@shipfox/client-auth', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@shipfox/client-auth')>();
+  return {
+    ...actual,
+    useRefreshAuth: () => () => Promise.resolve({accessToken: 'test-token'}),
+  };
+});
+
+vi.mock('#hooks/api/integrations.js', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('#hooks/api/integrations.js')>();
+  return {
+    ...actual,
+    useCompleteSlackCallbackMutation: () => ({mutateAsync: completeCallbackMock}),
+  };
+});
+
+beforeEach(() => {
+  window.sessionStorage.clear();
+  completeCallbackMock.mockReset();
+});
+
+describe('SlackCallbackPage', () => {
+  test('completes a callback once in Strict Mode and navigates to its workspace', async () => {
+    const responseWorkspaceId = '22222222-2222-4222-8222-222222222222';
+    window.sessionStorage.setItem(SLACK_INSTALL_WORKSPACE_KEY, INTEGRATIONS_TEST_WID);
+    completeCallbackMock.mockResolvedValue({
+      id: 'connection-1',
+      workspaceId: responseWorkspaceId,
+      provider: 'slack',
+      slug: 'slack_org',
+      displayName: 'Slack org',
+      capabilities: [],
+    });
+
+    renderIntegrationsPage({
+      path: '/integrations/slack/callback?code=grant-code-success&state=signed-state-success',
+      routePath: '/integrations/slack/callback',
+      element: (
+        <StrictMode>
+          <SlackCallbackPage />
+        </StrictMode>
+      ),
+      workspaces: [
+        testWorkspace(),
+        testWorkspace({id: responseWorkspaceId, slug: 'response-workspace'}),
+      ],
+      extraRoutes: [
+        '/w/response-workspace/settings/integrations',
+        '/w/$workspaceSlug/integrations/slack',
+        '/auth/login',
+      ],
+    });
+
+    await waitFor(() =>
+      expect(completeCallbackMock).toHaveBeenCalledWith({
+        query: {code: 'grant-code-success', state: 'signed-state-success'},
+        token: 'test-token',
+      }),
+    );
+    expect(completeCallbackMock).toHaveBeenCalledTimes(1);
+    await waitFor(() =>
+      expect(
+        screen.getByTestId('route:/w/response-workspace/settings/integrations'),
+      ).toBeInTheDocument(),
+    );
+    expect(screen.getByText('Slack installed.')).toBeInTheDocument();
+  });
+});

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

@@ -1,8 +1,9 @@
-import {useRefreshAuth} from '@shipfox/client-auth';
+import {useAuthState, useRefreshAuth} from '@shipfox/client-auth';
 import {useRouteSearch} from '@shipfox/client-shell/runtime';
 import {createSingleFlight, sessionStorageOrUndefined} from '@shipfox/client-ui';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
 import {toast} from '@shipfox/react-ui/toast';
+import {useQueryClient} from '@tanstack/react-query';
 import {useNavigate} from '@tanstack/react-router';
 import {useEffect, useMemo, useState} from 'react';
 import {useCompleteIntegrationCallback} from '#application/complete-integration-callback.js';
@@ -17,6 +18,7 @@ import {
   type SlackCallbackFailure,
   serializeSlackCallbackQuery,
 } from '#slack-callback.js';
+import {rememberCallbackKey, resolveWorkspaceSlug} from '#workspace-navigation.js';
 
 // Retain only recent completions: this bounds long-lived callback pages while
 // still covering StrictMode and immediate Back/Forward remounts.
@@ -28,16 +30,20 @@ const toastedCallbacks = new Set<string>();
 
 export function SlackCallbackPage() {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const refreshAuth = useRefreshAuth();
   const completeIntegrationCallback = useCompleteIntegrationCallback();
   const {mutateAsync: completeSlackCallback} = useCompleteSlackCallbackMutation();
+  const {workspaces, isLoading} = useAuthState();
   const params = useRouteSearch(parseSlackCallbackQuery);
   const workspaceId = useMemo(() => readSlackInstallWorkspace(sessionStorageOrUndefined()), []);
   const [failure, setFailure] = useState<SlackCallbackFailure>();
-  const [completedWorkspaceId, setCompletedWorkspaceId] = useState<string>();
+  const [completedWorkspace, setCompletedWorkspace] = useState<{
+    slug?: string | undefined;
+  }>();
 
   useEffect(() => {
-    if (!params) return;
+    if (!params || isLoading) return;
     let disposed = false;
     const key = serializeSlackCallbackQuery(params);
     const request = callbackRequests.run(
@@ -53,10 +59,15 @@ export function SlackCallbackPage() {
       async (connection) => {
         if (disposed) return;
         if (completedCallbacks.has(key)) {
-          setCompletedWorkspaceId(connection.workspaceId);
+          const workspaceSlug = await resolveWorkspaceSlug({
+            workspaceId: connection.workspaceId,
+            fallbackWorkspaces: workspaces,
+            queryClient,
+          });
+          if (!disposed) setCompletedWorkspace(workspaceSlug ? {slug: workspaceSlug} : {});
           return;
         }
-        completedCallbacks.add(key);
+        rememberCallbackKey(completedCallbacks, key);
         try {
           clearSlackInstallWorkspace(sessionStorageOrUndefined());
         } catch {
@@ -64,17 +75,30 @@ export function SlackCallbackPage() {
         }
         if (disposed) return;
         if (!toastedCallbacks.has(key)) {
-          toastedCallbacks.add(key);
+          rememberCallbackKey(toastedCallbacks, key);
           toast.success('Slack installed.');
         }
+        let workspaceSlug: string | undefined;
         try {
+          if (disposed) return;
+          workspaceSlug = await resolveWorkspaceSlug({
+            workspaceId: connection.workspaceId,
+            fallbackWorkspaces: workspaces,
+            queryClient,
+          });
+          if (disposed) return;
+          if (!workspaceSlug) {
+            setCompletedWorkspace({});
+            return;
+          }
+          setCompletedWorkspace({slug: workspaceSlug});
           await navigate({
-            to: '/workspaces/$wid/settings/integrations',
-            params: {wid: connection.workspaceId},
+            to: '/w/$workspaceSlug/settings/integrations',
+            params: {workspaceSlug},
             replace: true,
           });
         } catch {
-          if (!disposed) setCompletedWorkspaceId(connection.workspaceId);
+          if (!disposed) setCompletedWorkspace({slug: workspaceSlug});
         }
       },
       (error: unknown) => {
@@ -84,7 +108,16 @@ export function SlackCallbackPage() {
     return () => {
       disposed = true;
     };
-  }, [completeIntegrationCallback, completeSlackCallback, navigate, params, refreshAuth]);
+  }, [
+    completeIntegrationCallback,
+    completeSlackCallback,
+    isLoading,
+    navigate,
+    params,
+    queryClient,
+    refreshAuth,
+    workspaces,
+  ]);
 
   if (!params)
     return (
@@ -92,26 +125,31 @@ export function SlackCallbackPage() {
         title="Invalid Slack callback"
         message="This Slack link is missing required parameters. Start the install again from workspace settings."
         startOver
-        workspaceId={workspaceId}
-        installPath="/workspaces/$wid/integrations/slack"
+        workspaceSlug={workspaces.find(({id}) => id === workspaceId)?.slug}
+        installPath="/w/$workspaceSlug/integrations/slack"
       />
     );
-  if (completedWorkspaceId)
+  if (completedWorkspace)
     return (
       <CallbackStatusShell
         title="Slack connected"
-        message="Slack is connected. Continue in integrations settings."
-        workspaceId={completedWorkspaceId}
-        installPath="/workspaces/$wid/integrations/slack"
+        status="success"
+        message={
+          completedWorkspace.slug
+            ? 'Slack is connected. Continue in integrations settings.'
+            : 'Slack is connected. Return to Shipfox to continue.'
+        }
+        workspaceSlug={completedWorkspace.slug}
+        installPath="/w/$workspaceSlug/integrations/slack"
       />
     );
   if (failure)
     return (
       <CallbackStatusShell
         {...failure}
-        workspaceId={workspaceId}
+        workspaceSlug={workspaces.find(({id}) => id === workspaceId)?.slug}
         switchAccount={failure.signIn}
-        installPath="/workspaces/$wid/integrations/slack"
+        installPath="/w/$workspaceSlug/integrations/slack"
       />
     );
   return <FullPageLoader aria-label="Connecting Slack" />;

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

@@ -2,7 +2,7 @@
 import '@testing-library/jest-dom/vitest';
 import {configureApiClient} from '@shipfox/client-api';
 import {screen} from '@testing-library/react';
-import {INTEGRATIONS_TEST_WID, jsonResponse, renderIntegrationsPage} from '#test/render.js';
+import {jsonResponse, renderIntegrationsPage} from '#test/render.js';
 import {SourceControlOnboardingPage} from './source-control-onboarding-page.js';
 
 describe('SourceControlOnboardingPage', () => {
@@ -24,10 +24,10 @@ describe('SourceControlOnboardingPage', () => {
     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: <SourceControlOnboardingPage />,
-      extraRoutes: ['/workspaces/$wid/integrations/github'],
+      extraRoutes: ['/w/$workspaceSlug/integrations/github'],
     });
 
     expect(await screen.findByRole('heading', {name: 'Install source control'})).toBeVisible();

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

@@ -17,12 +17,12 @@ export function SourceControlOnboardingPage() {
       </header>
 
       <ProviderGrid
+        workspaceSlug={workspace.slug}
         providers={providersQuery.data ?? []}
         isPending={providersQuery.isPending}
         isFetching={providersQuery.isFetching}
         error={providersQuery.isError ? providersQuery.error : undefined}
         onRetry={() => void providersQuery.refetch()}
-        workspaceId={workspace.id}
         emptyMessage="Enable at least one source-control provider in the application settings."
       />
     </div>

package/src/provider-catalog.test.ts

@@ -4,20 +4,25 @@ describe('PROVIDER_CATALOG', () => {
   test('contains route entries for github, sentry, and gitea', () => {
     expect(PROVIDER_CATALOG.github).toMatchObject({
       kind: 'redirect-install',
-      setupPath: '/workspaces/$wid/integrations/github',
+      setupPath: '/w/$workspaceSlug/integrations/github',
     });
     expect(PROVIDER_CATALOG.sentry).toMatchObject({
       kind: 'redirect-install',
-      setupPath: '/workspaces/$wid/integrations/sentry',
+      setupPath: '/w/$workspaceSlug/integrations/sentry',
     });
     expect(PROVIDER_CATALOG.linear).toMatchObject({
       kind: 'redirect-install',
       iconName: 'linear',
-      setupPath: '/workspaces/$wid/integrations/linear',
+      setupPath: '/w/$workspaceSlug/integrations/linear',
+    });
+    expect(PROVIDER_CATALOG.jira).toMatchObject({
+      kind: 'redirect-install',
+      iconName: 'jira',
+      setupPath: '/w/$workspaceSlug/integrations/jira',
     });
     expect(PROVIDER_CATALOG.gitea).toMatchObject({
       kind: 'direct-connect',
-      setupPath: '/workspaces/$wid/integrations/gitea',
+      setupPath: '/w/$workspaceSlug/integrations/gitea',
     });
   });
 
@@ -25,6 +30,7 @@ describe('PROVIDER_CATALOG', () => {
     expect(PROVIDER_CATALOG.github?.kind).toBe('redirect-install');
     expect(PROVIDER_CATALOG.sentry?.kind).toBe('redirect-install');
     expect(PROVIDER_CATALOG.linear?.kind).toBe('redirect-install');
+    expect(PROVIDER_CATALOG.jira?.kind).toBe('redirect-install');
     expect(PROVIDER_CATALOG.gitea?.kind).toBe('direct-connect');
     expect(PROVIDER_CATALOG.webhook?.kind).toBe('modal-connect');
   });

package/src/provider-catalog.ts

@@ -4,11 +4,12 @@ import type {IconName} from '@shipfox/react-ui/icon';
 // Literal union (not string) so `<Link to={catalog.setupPath}>` stays typed
 // against TanStack Router's route tree.
 export type ProviderSetupPath =
-  | '/workspaces/$wid/integrations/github'
-  | '/workspaces/$wid/integrations/gitea'
-  | '/workspaces/$wid/integrations/sentry'
-  | '/workspaces/$wid/integrations/linear'
-  | '/workspaces/$wid/integrations/slack';
+  | '/w/$workspaceSlug/integrations/github'
+  | '/w/$workspaceSlug/integrations/gitea'
+  | '/w/$workspaceSlug/integrations/sentry'
+  | '/w/$workspaceSlug/integrations/linear'
+  | '/w/$workspaceSlug/integrations/slack'
+  | '/w/$workspaceSlug/integrations/jira';
 
 interface RouteProviderCatalogEntry {
   kind: 'redirect-install' | 'direct-connect';
@@ -27,27 +28,32 @@ export const PROVIDER_CATALOG: Record<string, ProviderCatalogEntry> = {
   github: {
     kind: 'redirect-install',
     iconName: PROVIDER_ICONS.github,
-    setupPath: '/workspaces/$wid/integrations/github',
+    setupPath: '/w/$workspaceSlug/integrations/github',
   },
   sentry: {
     kind: 'redirect-install',
     iconName: PROVIDER_ICONS.sentry,
-    setupPath: '/workspaces/$wid/integrations/sentry',
+    setupPath: '/w/$workspaceSlug/integrations/sentry',
   },
   linear: {
     kind: 'redirect-install',
     iconName: PROVIDER_ICONS.linear,
-    setupPath: '/workspaces/$wid/integrations/linear',
+    setupPath: '/w/$workspaceSlug/integrations/linear',
   },
   slack: {
     kind: 'redirect-install',
     iconName: PROVIDER_ICONS.slack,
-    setupPath: '/workspaces/$wid/integrations/slack',
+    setupPath: '/w/$workspaceSlug/integrations/slack',
+  },
+  jira: {
+    kind: 'redirect-install',
+    iconName: PROVIDER_ICONS.jira,
+    setupPath: '/w/$workspaceSlug/integrations/jira',
   },
   gitea: {
     kind: 'direct-connect',
     iconName: PROVIDER_ICONS.gitea,
-    setupPath: '/workspaces/$wid/integrations/gitea',
+    setupPath: '/w/$workspaceSlug/integrations/gitea',
   },
   webhook: {
     kind: 'modal-connect',

package/src/routes/jira-callback.tsx

@@ -0,0 +1,8 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {JiraCallbackPage} from '#pages/jira-callback-page.js';
+import {parseJiraCallbackQuery} from '../jira-callback.js';
+
+export default defineRoute({
+  validateSearch: parseJiraCallbackQuery,
+  component: JiraCallbackPage,
+});

package/src/routes/jira.tsx

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

package/src/sentry-callback.ts

@@ -20,7 +20,7 @@ const sentryInstallWorkspaceStorageKey = {
 } satisfies BrowserStorageKey<string>;
 
 // Storage helpers swallow failures (quota, private mode, disabled storage):
-// the handoff is an optimization, never a requirement — the callback always
+// the handoff is an optimization, never a requirement: the callback always
 // asks for explicit confirmation and only uses the stored id to pre-select.
 export function saveSentryInstallWorkspace(storage: WorkspaceStorage, workspaceId: string): void {
   installWorkspaceStorage(storage).write(workspaceId);
@@ -67,7 +67,7 @@ export type SentryWorkspacePreselection =
   | {kind: 'none'};
 
 // Sentry's redirect carries no state token, so the callback can never prove it
-// belongs to an install the user started — installation always requires an
+// belongs to an install the user started. Installation always requires an
 // explicit click. The stored id (and a sole workspace) only pre-select.
 export function preselectSentryWorkspace(
   storedId: string | undefined,

package/src/workspace-navigation.test.ts

@@ -0,0 +1,43 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {userWorkspacesQueryKey} from '@shipfox/client-shell/runtime';
+import {QueryClient} from '@tanstack/react-query';
+import {resolveWorkspaceSlug} from './workspace-navigation.js';
+
+function jsonResponse(body: unknown, init: ResponseInit = {}): Response {
+  return new Response(JSON.stringify(body), {
+    headers: {'content-type': 'application/json'},
+    status: 200,
+    ...init,
+  });
+}
+
+describe('resolveWorkspaceSlug', () => {
+  beforeEach(() => {
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl: undefined});
+  });
+
+  test('uses refreshed cached memberships when the follow-up list request fails', async () => {
+    configureApiClient({
+      fetchImpl: vi
+        .fn()
+        .mockResolvedValue(
+          jsonResponse(
+            {code: 'server-error', message: 'Workspace list unavailable'},
+            {status: 500},
+          ),
+        ),
+    });
+    const queryClient = new QueryClient();
+    queryClient.setQueryData(userWorkspacesQueryKey, {
+      memberships: [{id: 'response-workspace', slug: 'response-workspace'}],
+    });
+
+    await expect(
+      resolveWorkspaceSlug({
+        workspaceId: 'response-workspace',
+        fallbackWorkspaces: [{id: 'response-workspace', slug: 'old-slug'}],
+        queryClient,
+      }),
+    ).resolves.toBe('response-workspace');
+  });
+});

package/src/workspace-navigation.ts

@@ -0,0 +1,38 @@
+import {listUserWorkspaces, userWorkspacesQueryKey} from '@shipfox/client-shell/runtime';
+import type {QueryClient} from '@tanstack/react-query';
+
+interface WorkspaceSlugCandidate {
+  id: string;
+  slug: string;
+}
+
+interface UserWorkspacesQueryData {
+  memberships: WorkspaceSlugCandidate[];
+}
+
+export function rememberCallbackKey(keys: Set<string>, key: string, maxSize = 32): void {
+  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,
+}: {
+  workspaceId: string;
+  fallbackWorkspaces: readonly WorkspaceSlugCandidate[];
+  queryClient: QueryClient;
+}): Promise<string | undefined> {
+  const currentWorkspaces = await listUserWorkspaces()
+    .then(({memberships}) => memberships)
+    .catch(() => {
+      const refreshedWorkspaces =
+        queryClient.getQueryData<UserWorkspacesQueryData>(userWorkspacesQueryKey);
+      return refreshedWorkspaces?.memberships ?? fallbackWorkspaces;
+    });
+  return currentWorkspaces.find(({id}) => id === workspaceId)?.slug;
+}

package/test/render.tsx

@@ -19,11 +19,12 @@ export const INTEGRATIONS_TEST_WID = '11111111-1111-4111-8111-111111111111';
 export interface TestWorkspace {
   id: string;
   name: string;
+  slug: string;
   membershipId: string;
 }
 
 export function testWorkspace(overrides: Partial<TestWorkspace> = {}): TestWorkspace {
-  return {id: INTEGRATIONS_TEST_WID, name: 'Acme', membershipId: 'm-1', ...overrides};
+  return {id: INTEGRATIONS_TEST_WID, name: 'Acme', slug: 'acme', membershipId: 'm-1', ...overrides};
 }
 
 export function jsonResponse(body: unknown, init: ResponseInit = {}) {