feat(mosaic): wire enterprise accounts

.changeset/bright-enterprise-accounts.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/__tests__/feature/fake-fapi.ts

@@ -1,6 +1,7 @@
 import { OAUTH_PROVIDERS } from '@clerk/shared/oauth';
 import type {
   ClientJSON,
+  EnterpriseConnectionJSON,
   OAuthProvider,
   OrganizationMembershipJSON,
   OrganizationSuggestionJSON,
@@ -36,6 +37,7 @@ export interface FakeFapiState {
   memberships: OrganizationMembershipJSON[];
   invitations: UserOrganizationInvitationJSON[];
   suggestions: OrganizationSuggestionJSON[];
+  enterpriseConnections: EnterpriseConnectionJSON[];
 }
 
 export type FakeFapiSeed = Partial<FakeFapiState>;
@@ -114,6 +116,7 @@ export function serveFapi(seed: FakeFapiSeed = {}): FakeFapiState {
     memberships: [],
     invitations: [],
     suggestions: [],
+    enterpriseConnections: [],
     ...seed,
   };
 
@@ -124,12 +127,39 @@ export function serveFapi(seed: FakeFapiSeed = {}): FakeFapiState {
       const user = activeUser(state);
       return user ? envelope(user, state.client) : missing();
     }),
+    http.get(fapiUrl('/v1/me/enterprise_connections'), ({ request }) => {
+      const url = new URL(request.url);
+      const withLinking = url.searchParams.get('with_organization_account_linking') === 'true';
+      const connections = withLinking
+        ? state.enterpriseConnections.filter(connection => connection.allow_organization_account_linking)
+        : state.enterpriseConnections;
+      return envelope(connections, state.client);
+    }),
     http.post(fapiUrl('/v1/me/external_accounts'), async ({ request }) => {
       const user = activeUser(state);
       if (!user) {
         return missing();
       }
       const body = new URLSearchParams(await request.text());
+      const enterpriseConnectionId = body.get('enterprise_connection_id');
+      if (enterpriseConnectionId) {
+        const connection = state.enterpriseConnections.find(item => item.id === enterpriseConnectionId);
+        if (!connection) {
+          return missing();
+        }
+        return envelope(
+          fapiExternalAccount({
+            id: `idn_${connection.id}`,
+            provider: 'google',
+            verification: fapiVerification({
+              status: 'unverified',
+              strategy: 'enterprise_sso',
+              external_verification_redirect_url: 'https://accounts.example/enterprise-authorize',
+            }),
+          }),
+          state.client,
+        );
+      }
       const strategy = body.get('strategy');
       if (!strategy) {
         return missing();

packages/mosaic/src/__tests__/feature/fapi.ts

@@ -6,6 +6,7 @@ import type {
   DisplayConfigJSON,
   EmailAddressJSON,
   EnterpriseAccountJSON,
+  EnterpriseConnectionJSON,
   EnvironmentJSON,
   ExternalAccountJSON,
   OAuthProviders,
@@ -332,6 +333,26 @@ export function fapiWeb3Wallet(
   };
 }
 
+export function fapiEnterpriseConnection(
+  overrides: Partial<EnterpriseConnectionJSON> & Pick<EnterpriseConnectionJSON, 'id'>,
+): EnterpriseConnectionJSON {
+  return {
+    object: 'enterprise_connection',
+    name: overrides.id,
+    active: true,
+    provider: 'saml_okta',
+    logo_public_url: null,
+    domains: [],
+    organization_id: null,
+    sync_user_attributes: false,
+    disable_additional_identifications: false,
+    allow_organization_account_linking: true,
+    created_at: createdAt,
+    updated_at: createdAt,
+    ...overrides,
+  };
+}
+
 export function fapiUser(overrides: Partial<UserJSON> & Pick<UserJSON, 'id'>): UserJSON {
   return {
     object: 'user',

packages/mosaic/src/features/user-profile/__tests__/user-profile-enterprise-accounts-compatibility.test.tsx

@@ -0,0 +1,48 @@
+import type * as SharedReact from '@clerk/shared/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expect, it, vi } from 'vitest';
+
+import { MosaicProvider } from '../../../MosaicProvider';
+import { UserProfileEnterpriseAccountsSection } from '../user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section';
+
+const fallbackNavigate = vi.fn();
+
+vi.mock('@clerk/shared/internal/clerk-js/windowNavigate', () => ({
+  windowNavigate: (url: URL | string) => fallbackNavigate(url),
+}));
+
+vi.mock('@clerk/shared/react', async importOriginal => {
+  const actual = await importOriginal<typeof SharedReact>();
+  return {
+    ...actual,
+    useUser: () => ({
+      isLoaded: true,
+      user: {
+        id: 'user_1',
+        enterpriseAccounts: [],
+        createExternalAccount: () =>
+          Promise.resolve({
+            verification: { externalVerificationRedirectURL: new URL('https://accounts.example/authorize') },
+          }),
+      },
+    }),
+    __internal_useUserEnterpriseConnections: () => ({
+      data: [{ id: 'okta', name: 'Acme Okta', allowOrganizationAccountLinking: true }],
+    }),
+    useClerk: () => ({
+      __internal_environment: { userSettings: { enterpriseSSO: { enabled: true } } },
+      __internal_getOption: () => undefined,
+    }),
+  };
+});
+
+it('uses the shared navigation fallback when an older Clerk lacks the internal method', async () => {
+  render(
+    <MosaicProvider>
+      <UserProfileEnterpriseAccountsSection />
+    </MosaicProvider>,
+  );
+  await userEvent.setup().click(screen.getByRole('button', { name: 'Connect Acme Okta' }));
+  await waitFor(() => expect(fallbackNavigate).toHaveBeenCalledWith(new URL('https://accounts.example/authorize')));
+});