@shipfox/client-integrations 12.0.2 → 14.0.0

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

@@ -0,0 +1,366 @@
+import {useAuthState, useRefreshAuth} from '@shipfox/client-auth';
+import {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';
+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 {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {
+  useCompleteIntegrationCallback,
+  useCompleteIntegrationCallbackResult,
+} from '#application/complete-integration-callback.js';
+import {CallbackStatusShell} from '#components/callback-status-shell.js';
+import type {IntegrationConnection, JiraSite} from '#core/models.js';
+import {
+  useCompleteJiraCallbackMutation,
+  useCompleteJiraSiteSelectionMutation,
+} from '#hooks/api/integrations.js';
+import {
+  clearJiraInstallWorkspace,
+  parseJiraCallbackQuery,
+  readJiraInstallWorkspace,
+  serializeJiraCallbackQuery,
+} from '#jira-callback.js';
+import {
+  JIRA_CALLBACK_CACHE_SIZE,
+  jiraCallbackRequests,
+  jiraCompletedConnections,
+  jiraSiteSelectionRequests,
+  jiraToastedCallbacks,
+} from '#jira-callback-state.js';
+import {classifyJiraCallbackError, type JiraCallbackFailure} from '#jira-form-errors.js';
+import {rememberCallbackKey, resolveWorkspaceSlug} from '#workspace-navigation.js';
+
+export function JiraCallbackPage() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const refreshAuth = useRefreshAuth();
+  const {workspaces, isLoading} = useAuthState();
+  const completeIntegrationCallback = useCompleteIntegrationCallback();
+  const completeIntegrationCallbackResult = useCompleteIntegrationCallbackResult();
+  const {mutateAsync: completeJiraCallback} = useCompleteJiraCallbackMutation();
+  const {mutateAsync: completeJiraSiteSelection} = useCompleteJiraSiteSelectionMutation();
+  const params = useRouteSearch(parseJiraCallbackQuery);
+  const callbackKey = params ? serializeJiraCallbackQuery(params) : undefined;
+  const workspaceId = useMemo(() => readJiraInstallWorkspace(sessionStorageOrUndefined()), []);
+  const [sites, setSites] = useState<JiraSite[] | undefined>();
+  const [failure, setFailure] = useState<JiraCallbackFailure | undefined>();
+  const [selectedCloudId, setSelectedCloudId] = useState<string | undefined>();
+  const [completedWorkspace, setCompletedWorkspace] = useState<{
+    slug?: string | undefined;
+  }>();
+  const disposedRef = useRef(false);
+  const callbackKeyRef = useRef(callbackKey);
+  callbackKeyRef.current = callbackKey;
+  const [callbackStateKey, setCallbackStateKey] = useState(callbackKey);
+
+  useEffect(() => {
+    disposedRef.current = false;
+    return () => {
+      disposedRef.current = true;
+    };
+  }, []);
+
+  const completeConnection = useCallback(
+    async (
+      connection: IntegrationConnection,
+      callbackKey: string,
+      isActive: () => boolean = () => true,
+    ) => {
+      if (disposedRef.current || !isActive()) return;
+      const completedConnection = jiraCompletedConnections.get(callbackKey);
+      if (completedConnection) {
+        const workspaceSlug = await resolveWorkspaceSlug({
+          workspaceId: completedConnection.workspaceId,
+          fallbackWorkspaces: workspaces,
+          queryClient,
+        });
+        if (!disposedRef.current && isActive())
+          setCompletedWorkspace(workspaceSlug ? {slug: workspaceSlug} : {});
+        return;
+      }
+      rememberCompletedConnection(callbackKey, connection);
+      try {
+        clearJiraInstallWorkspace(sessionStorageOrUndefined());
+      } catch {
+        // The successful API response remains the source of truth for navigation.
+      }
+      if (disposedRef.current || !isActive()) return;
+      if (!jiraToastedCallbacks.has(callbackKey)) {
+        rememberCallbackKey(jiraToastedCallbacks, callbackKey);
+        toast.success('Jira installed.');
+      }
+      let workspaceSlug: string | undefined;
+      try {
+        workspaceSlug = await resolveWorkspaceSlug({
+          workspaceId: connection.workspaceId,
+          fallbackWorkspaces: workspaces,
+          queryClient,
+        });
+        if (disposedRef.current || !isActive()) return;
+        if (!workspaceSlug) {
+          setCompletedWorkspace({});
+          return;
+        }
+        setCompletedWorkspace({slug: workspaceSlug});
+        await navigate({
+          to: '/w/$workspaceSlug/settings/integrations',
+          params: {workspaceSlug},
+          replace: true,
+        });
+      } catch {
+        if (!disposedRef.current && isActive()) setCompletedWorkspace({slug: workspaceSlug});
+      }
+    },
+    [navigate, queryClient, workspaces],
+  );
+
+  useEffect(() => {
+    if (callbackKey === undefined) return;
+    setCallbackStateKey(callbackKey);
+    setSites(undefined);
+    setSelectedCloudId(undefined);
+    setFailure(undefined);
+    setCompletedWorkspace(undefined);
+  }, [callbackKey]);
+
+  useEffect(() => {
+    if (!params || !callbackKey || isLoading) return;
+
+    let active = true;
+
+    const completedConnection = jiraCompletedConnections.get(callbackKey);
+    if (completedConnection) {
+      void completeConnection(completedConnection, callbackKey, () => active);
+      return () => {
+        active = false;
+      };
+    }
+
+    const request = jiraCallbackRequests.run(callbackKey, async () => {
+      return await completeIntegrationCallbackResult({
+        input: params,
+        refreshAuth,
+        complete: async (query, token) => await completeJiraCallback({query, token}),
+        getConnection: (result) => ('sites' in result ? undefined : result),
+      });
+    });
+
+    request.then(
+      async (result) => {
+        if (disposedRef.current || !active) return;
+        if ('sites' in result) {
+          setFailure(undefined);
+          setSites(result.sites);
+          return;
+        }
+        await completeConnection(result, callbackKey, () => active);
+      },
+      (error: unknown) => {
+        if (!disposedRef.current && active) setFailure(classifyJiraCallbackError(error));
+      },
+    );
+
+    return () => {
+      active = false;
+    };
+  }, [
+    callbackKey,
+    completeIntegrationCallbackResult,
+    completeJiraCallback,
+    completeConnection,
+    isLoading,
+    params,
+    refreshAuth,
+  ]);
+
+  function selectSite(site: JiraSite) {
+    if (!params || !callbackKey || selectedCloudId) return;
+    setSelectedCloudId(site.cloudId);
+    setFailure(undefined);
+    const selectionKey = callbackKey;
+    const request = jiraSiteSelectionRequests.run(params.state, async () => {
+      return await completeIntegrationCallback({
+        input: {cloud_id: site.cloudId, state: params.state},
+        refreshAuth,
+        complete: async (body, token) => await completeJiraSiteSelection({body, token}),
+      });
+    });
+    request.then(
+      async (connection) => {
+        if (disposedRef.current || callbackKeyRef.current !== selectionKey) return;
+        jiraCallbackRequests.clear(selectionKey);
+        await completeConnection(
+          connection,
+          selectionKey,
+          () => callbackKeyRef.current === selectionKey,
+        );
+      },
+      (error: unknown) => {
+        if (disposedRef.current || callbackKeyRef.current !== selectionKey) return;
+        setSelectedCloudId(undefined);
+        setFailure(classifyJiraCallbackError(error));
+      },
+    );
+  }
+
+  if (!params) {
+    return (
+      <JiraCallbackFailurePage
+        failure={classifyJiraCallbackError(new Error('invalid callback'))}
+        workspaceSlug={workspaces.find(({id}) => id === workspaceId)?.slug}
+      />
+    );
+  }
+
+  if (isLoading) return <FullPageLoader aria-label="Connecting Jira" />;
+
+  if (callbackStateKey === callbackKey && completedWorkspace)
+    return (
+      <CallbackStatusShell
+        title="Jira connected"
+        status="success"
+        message={
+          completedWorkspace.slug
+            ? 'Jira is connected. Continue in integrations settings.'
+            : 'Jira is connected. Return to Shipfox to continue.'
+        }
+        workspaceSlug={completedWorkspace.slug}
+        installPath="/w/$workspaceSlug/integrations/jira"
+      />
+    );
+
+  if (callbackStateKey === callbackKey && sites)
+    return (
+      <JiraSiteSelectionPage
+        sites={sites}
+        selectedCloudId={selectedCloudId}
+        failure={failure}
+        workspaceSlug={workspaces.find(({id}) => id === workspaceId)?.slug}
+        onSelect={selectSite}
+      />
+    );
+
+  if (callbackStateKey === callbackKey && failure)
+    return (
+      <JiraCallbackFailurePage
+        failure={failure}
+        workspaceSlug={workspaces.find(({id}) => id === workspaceId)?.slug}
+      />
+    );
+
+  return <FullPageLoader aria-label="Connecting Jira" />;
+}
+
+function rememberCompletedConnection(key: string, connection: IntegrationConnection): void {
+  jiraCompletedConnections.delete(key);
+  jiraCompletedConnections.set(key, connection);
+  while (jiraCompletedConnections.size > JIRA_CALLBACK_CACHE_SIZE) {
+    const oldestKey = jiraCompletedConnections.keys().next().value;
+    if (oldestKey === undefined) return;
+    jiraCompletedConnections.delete(oldestKey);
+  }
+}
+
+function JiraCallbackFailurePage({
+  failure,
+  workspaceSlug,
+}: {
+  failure: JiraCallbackFailure;
+  workspaceSlug: string | undefined;
+}) {
+  return (
+    <CallbackStatusShell
+      title={failure.title}
+      message={failure.message}
+      startOver={failure.startOver}
+      switchAccount={failure.signIn}
+      workspaceSlug={workspaceSlug}
+      installPath="/w/$workspaceSlug/integrations/jira"
+    />
+  );
+}
+
+function JiraSiteSelectionPage({
+  sites,
+  selectedCloudId,
+  failure,
+  workspaceSlug,
+  onSelect,
+}: {
+  sites: JiraSite[];
+  selectedCloudId: string | undefined;
+  failure: JiraCallbackFailure | undefined;
+  workspaceSlug: string | undefined;
+  onSelect: (site: JiraSite) => void;
+}) {
+  return (
+    <main className="flex min-h-screen bg-background-subtle-base px-16 py-32">
+      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-20">
+        <header className="flex flex-col gap-8">
+          <Header variant="h2">Choose a Jira site</Header>
+          <Text size="sm" className="text-foreground-neutral-muted">
+            Select the Jira site to connect to this Shipfox workspace.
+          </Text>
+        </header>
+
+        {failure ? (
+          <Callout role="alert" type="error">
+            <Text size="sm">{failure.message}</Text>
+          </Callout>
+        ) : null}
+
+        <section className="flex flex-col gap-8" aria-label="Choose a Jira site">
+          {sites.map((site) => (
+            <Card key={site.cloudId} className="p-16">
+              <div className="flex items-center justify-between gap-12">
+                <div className="min-w-0">
+                  <Text size="md" bold className="truncate">
+                    {site.name}
+                  </Text>
+                  <Text size="sm" className="truncate text-foreground-neutral-muted">
+                    {site.url}
+                  </Text>
+                </div>
+                <Button
+                  variant="secondary"
+                  disabled={selectedCloudId !== undefined}
+                  isLoading={selectedCloudId === site.cloudId}
+                  onClick={() => onSelect(site)}
+                >
+                  Connect
+                </Button>
+              </div>
+            </Card>
+          ))}
+        </section>
+
+        <div className="flex flex-col gap-8 sm:flex-row sm:items-center">
+          {failure?.startOver && workspaceSlug ? (
+            <ButtonLink asChild variant="muted" className="min-h-44 w-full sm:w-fit">
+              <Link to="/w/$workspaceSlug/integrations/jira" params={{workspaceSlug}}>
+                Start over
+              </Link>
+            </ButtonLink>
+          ) : null}
+          {workspaceSlug ? (
+            <ButtonLink asChild variant="muted" className="min-h-44 w-full sm:w-fit">
+              <Link to="/w/$workspaceSlug/settings/integrations" params={{workspaceSlug}}>
+                Back to integrations
+              </Link>
+            </ButtonLink>
+          ) : (
+            <ButtonLink asChild variant="muted" className="min-h-44 w-full sm:w-fit">
+              <Link to="/">Back to Shipfox</Link>
+            </ButtonLink>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}

package/src/pages/jira-install-page.tsx

@@ -0,0 +1,28 @@
+import {sessionStorageOrUndefined} from '@shipfox/client-ui';
+import {useCallback} from 'react';
+import {RedirectInstallPage} from '#components/redirect-install-page.js';
+import {useCreateJiraInstallMutation} from '#hooks/api/integrations.js';
+import {saveJiraInstallWorkspace} from '#jira-callback.js';
+
+export function JiraInstallPage() {
+  const createInstall = useCreateJiraInstallMutation();
+  const installRequest = useCallback(
+    async (body: {workspace_id: string}) => await createInstall.mutateAsync(body),
+    [createInstall],
+  );
+
+  return (
+    <RedirectInstallPage
+      installRequest={installRequest}
+      errorFallbackMessage="Could not start Jira install."
+      loadingLabel="Connecting Jira"
+      beforeRedirect={(workspaceId) => {
+        try {
+          saveJiraInstallWorkspace(sessionStorageOrUndefined(), workspaceId);
+        } catch {
+          // Storage is only a navigation hint; the signed state is authoritative.
+        }
+      }}
+    />
+  );
+}

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

@@ -4,7 +4,7 @@ import {ApiError} from '@shipfox/client-api';
 import {screen, waitFor} from '@testing-library/react';
 import {StrictMode} from 'react';
 import {LINEAR_INSTALL_WORKSPACE_KEY} from '#linear-callback.js';
-import {INTEGRATIONS_TEST_WID, renderIntegrationsPage} from '#test/render.js';
+import {INTEGRATIONS_TEST_WID, renderIntegrationsPage, testWorkspace} from '#test/render.js';
 import {LinearCallbackPage} from './linear-callback-page.js';
 
 const {completeCallbackMock} = vi.hoisted(() => ({completeCallbackMock: vi.fn()}));
@@ -37,8 +37,8 @@ function renderCallback(search: string, options?: {strict?: boolean}) {
       <LinearCallbackPage />
     ),
     extraRoutes: [
-      '/workspaces/$wid/settings/integrations',
-      '/workspaces/$wid/integrations/linear',
+      '/w/$workspaceSlug/settings/integrations',
+      '/w/$workspaceSlug/integrations/linear',
       '/auth/login',
     ],
   });
@@ -70,7 +70,7 @@ describe('LinearCallbackPage', () => {
     window.sessionStorage.setItem(LINEAR_INSTALL_WORKSPACE_KEY, INTEGRATIONS_TEST_WID);
     completeCallbackMock.mockResolvedValue({
       id: 'connection-1',
-      workspace_id: responseWorkspaceId,
+      workspaceId: responseWorkspaceId,
       provider: 'linear',
       external_account_id: 'linear-org',
       slug: 'linear_org',
@@ -81,7 +81,24 @@ describe('LinearCallbackPage', () => {
       updated_at: '2026-01-01T00:00:00.000Z',
     });
 
-    renderCallback('?code=grant-code-success&state=signed-state-success', {strict: true});
+    renderIntegrationsPage({
+      path: '/integrations/linear/callback?code=grant-code-success&state=signed-state-success',
+      routePath: '/integrations/linear/callback',
+      element: (
+        <StrictMode>
+          <LinearCallbackPage />
+        </StrictMode>
+      ),
+      workspaces: [
+        testWorkspace(),
+        testWorkspace({id: responseWorkspaceId, slug: 'response-workspace'}),
+      ],
+      extraRoutes: [
+        '/w/response-workspace/settings/integrations',
+        '/w/$workspaceSlug/integrations/linear',
+        '/auth/login',
+      ],
+    });
 
     await waitFor(() =>
       expect(completeCallbackMock).toHaveBeenCalledWith({
@@ -92,7 +109,7 @@ describe('LinearCallbackPage', () => {
     expect(completeCallbackMock).toHaveBeenCalledTimes(1);
     await waitFor(() =>
       expect(
-        screen.getByTestId('route:/workspaces/$wid/settings/integrations'),
+        screen.getByTestId('route:/w/response-workspace/settings/integrations'),
       ).toBeInTheDocument(),
     );
     expect(window.sessionStorage.getItem(LINEAR_INSTALL_WORKSPACE_KEY)).toBeNull();
@@ -136,14 +153,10 @@ describe('LinearCallbackPage', () => {
 
     expect(switchAccountLink).toHaveAttribute(
       'href',
-      `/auth/logout?redirect=${encodeURIComponent(
-        `/workspaces/${INTEGRATIONS_TEST_WID}/integrations/linear`,
-      )}`,
+      `/auth/logout?redirect=${encodeURIComponent('/w/acme/integrations/linear')}`,
     );
     expect(switchAccountUrl.pathname).toBe('/auth/logout');
-    expect(switchAccountUrl.searchParams.get('redirect')).toBe(
-      `/workspaces/${INTEGRATIONS_TEST_WID}/integrations/linear`,
-    );
+    expect(switchAccountUrl.searchParams.get('redirect')).toBe('/w/acme/integrations/linear');
     expect(screen.getByRole('link', {name: 'Start over'})).toBeVisible();
   });
 

package/src/pages/linear-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,26 +18,33 @@ import {
   readLinearInstallWorkspace,
   serializeLinearCallbackQuery,
 } from '#linear-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.
 const callbackRequests = createSingleFlight<string, IntegrationConnection>({
   maxTerminalResults: 32,
 });
+const completedCallbacks = new Set<string>();
 // 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>();
 
 export function LinearCallbackPage() {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const refreshAuth = useRefreshAuth();
   const completeIntegrationCallback = useCompleteIntegrationCallback();
   const {mutateAsync: completeLinearCallback} = useCompleteLinearCallbackMutation();
+  const {workspaces, isLoading} = useAuthState();
   const params = useRouteSearch(parseLinearCallbackQuery);
   const workspaceId = useMemo(() => readLinearInstallWorkspace(sessionStorageOrUndefined()), []);
   const [failure, setFailure] = useState<LinearCallbackFailure | undefined>();
+  const [completedWorkspace, setCompletedWorkspace] = useState<{
+    slug?: string | undefined;
+  }>();
   useEffect(() => {
-    if (!params) return;
+    if (!params || isLoading) return;
 
     let disposed = false;
     const key = serializeLinearCallbackQuery(params);
@@ -53,6 +61,16 @@ export function LinearCallbackPage() {
     request.then(
       async (connection) => {
         if (disposed) return;
+        if (completedCallbacks.has(key)) {
+          const workspaceSlug = await resolveWorkspaceSlug({
+            workspaceId: connection.workspaceId,
+            fallbackWorkspaces: workspaces,
+            queryClient,
+          });
+          if (!disposed) setCompletedWorkspace(workspaceSlug ? {slug: workspaceSlug} : {});
+          return;
+        }
+        rememberCallbackKey(completedCallbacks, key);
         try {
           clearLinearInstallWorkspace(sessionStorageOrUndefined());
         } catch {
@@ -60,17 +78,31 @@ export function LinearCallbackPage() {
         }
         if (disposed) return;
         if (!toastedCallbacks.has(key)) {
-          toastedCallbacks.add(key);
+          rememberCallbackKey(toastedCallbacks, key);
           toast.success('Linear 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 {
           // Keep the completed callback page visible if client navigation is interrupted.
+          if (!disposed) setCompletedWorkspace({slug: workspaceSlug});
         }
       },
       (error: unknown) => {
@@ -82,7 +114,16 @@ export function LinearCallbackPage() {
     return () => {
       disposed = true;
     };
-  }, [completeIntegrationCallback, completeLinearCallback, navigate, params, refreshAuth]);
+  }, [
+    completeIntegrationCallback,
+    completeLinearCallback,
+    isLoading,
+    navigate,
+    params,
+    queryClient,
+    refreshAuth,
+    workspaces,
+  ]);
 
   if (!params) {
     return (
@@ -93,22 +134,42 @@ export function LinearCallbackPage() {
           startOver: true,
           signIn: false,
         }}
-        workspaceId={workspaceId}
+        workspaceSlug={workspaces.find(({id}) => id === workspaceId)?.slug}
       />
     );
   }
 
+  if (completedWorkspace)
+    return (
+      <CallbackStatusShell
+        title="Linear connected"
+        status="success"
+        message={
+          completedWorkspace.slug
+            ? 'Linear is connected. Continue in integrations settings.'
+            : 'Linear is connected. Return to Shipfox to continue.'
+        }
+        workspaceSlug={completedWorkspace.slug}
+        installPath="/w/$workspaceSlug/integrations/linear"
+      />
+    );
+
   if (!failure) return <FullPageLoader aria-label="Connecting Linear" />;
 
-  return <LinearCallbackFailurePage failure={failure} workspaceId={workspaceId} />;
+  return (
+    <LinearCallbackFailurePage
+      failure={failure}
+      workspaceSlug={workspaces.find(({id}) => id === workspaceId)?.slug}
+    />
+  );
 }
 
 function LinearCallbackFailurePage({
   failure,
-  workspaceId,
+  workspaceSlug,
 }: {
   failure: LinearCallbackFailure;
-  workspaceId: string | undefined;
+  workspaceSlug: string | undefined;
 }) {
   return (
     <CallbackStatusShell
@@ -116,8 +177,8 @@ function LinearCallbackFailurePage({
       message={failure.message}
       startOver={failure.startOver}
       switchAccount={failure.signIn}
-      workspaceId={workspaceId}
-      installPath="/workspaces/$wid/integrations/linear"
+      workspaceSlug={workspaceSlug}
+      installPath="/w/$workspaceSlug/integrations/linear"
     />
   );
 }

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

@@ -41,7 +41,10 @@ function renderCallback(options: {
     path: `/integrations/sentry/callback${search}`,
     routePath: '/integrations/sentry/callback',
     element: <SentryCallbackPage />,
-    extraRoutes: ['/workspaces/$wid/settings/integrations', '/workspaces/$wid/integrations/sentry'],
+    extraRoutes: [
+      '/w/$workspaceSlug/settings/integrations',
+      '/w/$workspaceSlug/integrations/sentry',
+    ],
     ...(options.workspaces ? {workspaces: options.workspaces} : {}),
     ...(options.loadingAuth ? {loadingAuth: true} : {}),
   });
@@ -104,7 +107,7 @@ describe('SentryCallbackPage', () => {
 
     fireEvent.click(await screen.findByRole('button', {name: 'Install'}));
 
-    await screen.findByTestId('route:/workspaces/$wid/settings/integrations');
+    await screen.findByTestId('route:/w/$workspaceSlug/settings/integrations');
     expect(connectSentryMock).toHaveBeenCalledWith({
       body: {
         workspace_id: testWorkspace().id,
@@ -126,7 +129,7 @@ describe('SentryCallbackPage', () => {
     fireEvent.click(await screen.findByRole('button', {name: 'Install'}));
     fireEvent.click(await screen.findByRole('button', {name: 'Retry'}));
 
-    await screen.findByTestId('route:/workspaces/$wid/settings/integrations');
+    await screen.findByTestId('route:/w/$workspaceSlug/settings/integrations');
     expect(connectSentryMock).toHaveBeenCalledTimes(2);
   });
 
@@ -149,7 +152,7 @@ describe('SentryCallbackPage', () => {
     await waitFor(() => expect(screen.getByRole('button', {name: 'Retry'})).toBeDisabled());
 
     // A second attempt (via the still-enabled workspace Install) fails with no
-    // backoff hint — the lock must clear so the user is not stranded.
+    // backoff hint: the lock must clear so the user is not stranded.
     fireEvent.click(screen.getByRole('button', {name: 'Install'}));
     await waitFor(() => expect(screen.getByRole('button', {name: 'Retry'})).toBeEnabled());
   });
@@ -203,7 +206,7 @@ describe('SentryCallbackPage', () => {
     renderCallback({installationId: 'install-remount'});
     fireEvent.click(await screen.findByRole('button', {name: 'Install'}));
 
-    await screen.findByTestId('route:/workspaces/$wid/settings/integrations');
+    await screen.findByTestId('route:/w/$workspaceSlug/settings/integrations');
     await waitFor(() => expect(connectSentryMock).toHaveBeenCalledTimes(2));
   });
 });