Usage
}] }, + organizationProfileProps: { customPages: [{ path: 'audit', label: 'Audit log', content:Audit
}] }, + }); + expect(tabNames()).toEqual(['General', 'Members', 'Audit log']); + }); + it('renders nothing when signed out', async () => { const fapi = serve(); fapi.client = fapiClient(); diff --git a/packages/mosaic/src/features/organization-profile/organization-profile.tsx b/packages/mosaic/src/features/organization-profile/organization-profile.tsx index c4d69f58f5f..c27713ab4f7 100644 --- a/packages/mosaic/src/features/organization-profile/organization-profile.tsx +++ b/packages/mosaic/src/features/organization-profile/organization-profile.tsx @@ -3,18 +3,9 @@ import type { ReactNode } from 'react'; import type { APIKeysPageProps } from '../api-keys/api-keys-table'; -import { useProfilePagesController } from '../profile-pages/profile-pages.controller'; -import { useMosaicProfile } from '../profile-pages/use-mosaic-profile'; -import { organizationProfilePageIds } from './organization-profile.layout'; -import { useOrganizationProfileModel } from './organization-profile.model'; +import { Profile } from '../profile/profile'; import type { OrganizationProfileOptions } from './organization-profile.provider'; -import { OrganizationProfileProvider } from './organization-profile.provider'; -import type { OrganizationProfilePageId, OrganizationProfilePages } from './organization-profile.types'; import type { OrganizationProfileViewProps } from './organization-profile.view'; -import { OrganizationProfileView } from './organization-profile.view'; -import { OrganizationProfileApiKeysPanel } from './organization-profile-api-keys-panel'; -import { OrganizationProfileGeneralPanel } from './organization-profile-general-panel'; -import { OrganizationProfileMembersPanel } from './organization-profile-members-panel/organization-profile-members-panel'; /** Everything `Usage
}] }, + organizationProfileProps: { customPages: [{ path: 'audit', label: 'Audit log', content:Audit
}] }, + }); + expect(tabsDescribedBy('Account')).toEqual(['Account', 'Security', 'Usage']); + expect(tabsDescribedBy('Organization')).toEqual(['General', 'Members', 'Audit log']); + }); +}); diff --git a/packages/mosaic/src/features/profile/profile.test-d.tsx b/packages/mosaic/src/features/profile/profile.test-d.tsx new file mode 100644 index 00000000000..246dd06030a --- /dev/null +++ b/packages/mosaic/src/features/profile/profile.test-d.tsx @@ -0,0 +1,90 @@ +import { describe, test } from 'vitest'; + +import { OrganizationProfile } from '../organization-profile/organization-profile'; +import { UserProfile } from '../user-profile/user-profile'; +import type { ProfileMode, ProfileProps } from './profile'; +import { Profile } from './profile'; + +describe('Profile props', () => { + test('takes every option in combined mode, with or without the mode', () => { + void ( +Terms body
}; + +function instanceWith({ + billing = false, + apiKeys = false, + sso = false, + directorySync = false, +}: { + billing?: boolean; + apiKeys?: boolean; + sso?: boolean; + directorySync?: boolean; +}) { + const base = fapiEnvironment({ + api_keys_settings: { user_api_keys_enabled: apiKeys, orgs_api_keys_enabled: apiKeys }, + }); + return { + ...base, + commerce_settings: { + ...base.commerce_settings, + billing: { + ...base.commerce_settings.billing, + user: { enabled: billing, has_paid_plans: false }, + organization: { enabled: billing, has_paid_plans: false }, + }, + }, + user_settings: { + ...base.user_settings, + enterprise_sso: { enabled: sso, self_serve_sso: sso, self_serve_directory_sync: directorySync }, + }, + }; +} + +async function openWithList() { + const user = await open(); + await waitFor(() => expect(screen.queryByText('Loading organizations…')).toBeNull()); + return user; +} + +describe('Switcher', () => { + describe.each(['combined', 'user'] as const)('in %s mode', mode => { + it('renders nothing while Clerk is still loading', async () => { + serveFapi(signedIn()); + const client = holdRequests('get', '/v1/client'); + const rendering = renderWithClerk(tree({ mode })); + + await waitFor(() => expect(client.requests).toHaveLength(1)); + expect(host()).toBeEmptyDOMElement(); + + client.release(); + await rendering; + expect(trigger()).toBeInTheDocument(); + }); + + it('renders nothing, not even its fallback, when nobody is signed in', async () => { + await renderSwitcher({ mode, fallback: }, signedIn({ client: fapiClient() })); + + expect(host()).toBeEmptyDOMElement(); + }); + + it('leaves organizations out entirely when the instance has them disabled', async () => { + await renderSwitcher( + { mode }, + signedIn({ environment: fapiEnvironment({ organization_settings: { enabled: false } }) }), + ); + + expect(screen.getByRole('button', { name: 'Open account menu for Alice Smith' })).toBeInTheDocument(); + const user = await open(); + + for (const name of ['Acme', 'Other', 'Beta', 'Gamma', 'Personal account']) { + expect(screen.queryByText(name)).toBeNull(); + } + expect(screen.queryByRole('button', { name: 'Add organization' })).toBeNull(); + expect(screen.queryByRole('button', { name: 'Invite members' })).toBeNull(); + + expect(screen.getByRole('button', { name: 'Sign out' })).toBeInTheDocument(); + const menu = await openAccounts(user); + expect(within(menu).getByRole('menuitem', { name: 'bob@example.com' })).toBeInTheDocument(); + }); + }); + + it('keeps the popover closed until the trigger is clicked', async () => { + await renderSwitcher(); + + expect(trigger()).toBeInTheDocument(); + expect(popup()).toBeNull(); + }); + + it('lists the organizations and the account when opened', async () => { + await renderSwitcher(); + await open(); + + expect(await screen.findByRole('button', { name: 'Other' })).toBeInTheDocument(); + expect(requiredPopup().querySelector('.cl-user-button-header-description')).toHaveTextContent('alice'); + }); + + describe('switching organization', () => { + it('makes the selected organization active and closes', async () => { + const { navigate } = await renderSwitcher(); + const user = await open(); + + await user.click(await screen.findByRole('button', { name: 'Other' })); + await waitFor(() => expect(popup()).toBeNull()); + + await open(); + expect(await screen.findByRole('button', { name: 'Acme' })).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Other' })).toBeNull(); + expect(navigate).not.toHaveBeenCalled(); + }); + + it('leaves the active organization for the personal account', async () => { + await renderSwitcher(); + const user = await open(); + + await user.click(await screen.findByRole('button', { name: 'Personal account' })); + await waitFor(() => expect(popup()).toBeNull()); + + await open(); + expect(await screen.findByRole('button', { name: 'Acme' })).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Personal account' })).toBeNull(); + }); + + it('drops the personal account where the app hides it', async () => { + await renderSwitcher({ hidePersonal: true }); + await open(); + + expect(await screen.findByRole('button', { name: 'Other' })).toBeInTheDocument(); + expect(screen.queryByText('Personal account')).toBeNull(); + }); + + it('leads with the account, and lists no personal account, when the instance forces an organization and none is active', async () => { + await renderSwitcher( + {}, + signedIn({ + environment: fapiEnvironment({ organization_settings: { force_organization_selection: true } }), + client: fapiClient([fapiSession({ id: 'sess_1', user: alice }), bobSession]), + }), + ); + + expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); + await openWithList(); + + expect(screen.queryByText('No organization selected')).toBeNull(); + expect(screen.queryByText('Personal account')).toBeNull(); + expect(screen.getByRole('button', { name: 'Settings' })).toBeInTheDocument(); + }); + + it('lists no organizations on an account-only surface', async () => { + await renderSwitcher({ mode: 'user' }); + const user = await open(); + + const menu = await openAccounts(user); + expect(within(menu).getByRole('menuitem', { name: 'bob@example.com' })).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Other' })).toBeNull(); + }); + }); + + describe('accounts', () => { + it('switches to another signed-in account and stays open', async () => { + await renderSwitcher(); + const user = await open(); + + const menu = await openAccounts(user); + await user.click(within(menu).getByRole('menuitem', { name: 'bob@example.com' })); + + await waitFor(() => expect(trigger()).toHaveAccessibleName('Open account menu for Bob Jones')); + await waitFor(() => expect(waiting()).toBe(false)); + expect(popup()).toBeInTheDocument(); + }); + + it('lands a switched account where the instance sends it', async () => { + const { navigate } = await renderSwitcher( + {}, + signedIn({ environment: fapiEnvironment({ display_config: { after_switch_session_url: '/switched' } }) }), + ); + const user = await open(); + + const menu = await openAccounts(user); + await user.click(within(menu).getByRole('menuitem', { name: 'bob@example.com' })); + + await waitFor(() => expect(navigate).toHaveBeenCalledWith(expect.stringMatching(/\/switched$/))); + }); + + it('signs out of the active account alone while another stays signed in', async () => { + const { fapi, navigate } = await renderSwitcher(); + const user = await open(); + + await user.click(signOut()); + + await waitFor(() => expect(navigate).toHaveBeenCalledWith('/after-single-sign-out')); + expect(fapi.client.sessions.map(session => session.id)).toEqual(['sess_2']); + }); + + it('does not reopen after signing out of the last account and signing back in', async () => { + const { clerk, fapi, navigate } = await renderSwitcher({}, signedIn({ client: fapiClient([aliceSession]) })); + const user = await open(); + + await user.click(signOut()); + await waitFor(() => expect(navigate).toHaveBeenCalledWith('/')); + await waitFor(() => expect(host()).toBeEmptyDOMElement()); + + fapi.client = fapiClient([aliceSession]); + await act(async () => { + await clerk.client?.reload(); + await clerk.setActive({ session: 'sess_1' }); + }); + + expect(trigger()).toBeInTheDocument(); + expect(popup()).toBeNull(); + }); + + it('does not reopen after signing out of all accounts and signing back in', async () => { + const { clerk, fapi, navigate } = await renderSwitcher(); + const user = await open(); + + const menu = await openAccounts(user); + await user.click(within(menu).getByRole('menuitem', { name: 'Sign out of all accounts' })); + await waitFor(() => expect(navigate).toHaveBeenCalledWith('/')); + await waitFor(() => expect(host()).toBeEmptyDOMElement()); + + fapi.client = fapiClient([aliceSession]); + await act(async () => { + await clerk.client?.reload(); + await clerk.setActive({ session: 'sess_1' }); + }); + + expect(trigger()).toBeInTheDocument(); + expect(popup()).toBeNull(); + }); + + it('drops add-account and sign-out-of-all in single-session mode', async () => { + await renderSwitcher( + {}, + signedIn({ + environment: fapiEnvironment({ auth_config: { single_session_mode: true } }), + client: fapiClient([aliceSession]), + }), + ); + await open(); + + expect(screen.queryByRole('button', { name: 'Switch account' })).toBeNull(); + expect(screen.queryByRole('button', { name: 'Add account' })).toBeNull(); + expect(signOut()).toBeInTheDocument(); + }); + }); + + describe('invitations and suggestions', () => { + it('accepts an invitation and stays open', async () => { + await renderSwitcher(); + const user = await open(); + + await user.click(await screen.findByRole('button', { name: 'Accept' })); + + await waitFor(() => expect(screen.queryByRole('button', { name: 'Accept' })).toBeNull()); + await waitFor(() => expect(waiting()).toBe(false)); + expect(popup()).toBeInTheDocument(); + }); + + it('stays busy until the memberships have reloaded', async () => { + await renderSwitcher(); + await open(); + await screen.findByRole('button', { name: 'Accept' }); + const reload = holdRequests('get', '/v1/me/organization_memberships'); + vi.useFakeTimers({ shouldAdvanceTime: true }); + + try { + const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime }); + await user.click(screen.getByRole('button', { name: 'Accept' })); + await waitFor(() => expect(reload.requests).toHaveLength(1)); + + await act(() => vi.advanceTimersByTimeAsync(400)); + expect(waiting()).toBe(true); + + reload.release(); + await waitFor(() => expect(waiting()).toBe(false)); + } finally { + vi.useRealTimers(); + } + expect(popup()).toBeInTheDocument(); + }); + + it('joins a suggested organization and stays open', async () => { + await renderSwitcher(); + const user = await open(); + + await user.click(await screen.findByRole('button', { name: 'Join' })); + + await waitFor(() => expect(screen.queryByRole('button', { name: 'Join' })).toBeNull()); + await waitFor(() => expect(waiting()).toBe(false)); + expect(popup()).toBeInTheDocument(); + }); + + it('reports a failed accept, and drops an invitation that is no longer pending', async () => { + const log = vi.spyOn(console, 'error').mockImplementation(() => {}); + const { fapi } = await renderSwitcher({}, noOffers({ invitations: [fapiInvitation('inv_1', gamma)] })); + const user = await openWithList(); + const accept = holdRequests('post', '/v1/me/organization_invitations/:id/accept'); + + await user.click(screen.getByRole('button', { name: 'Accept' })); + fapi.invitations = [fapiInvitation('inv_1', gamma, { status: 'revoked' })]; + accept.fail('organization_invitation_not_pending'); + + await waitFor(() => expect(screen.queryByRole('button', { name: 'Accept' })).toBeNull()); + expect(reading('Gamma')).toEqual([]); + expect(log).toHaveBeenCalledWith( + '[Clerk] User button action failed', + expect.objectContaining({ errors: [expect.objectContaining({ code: 'organization_invitation_not_pending' })] }), + ); + expect(popup()).toBeInTheDocument(); + }); + + it('shows a suggestion as requested when a failed join finds it already accepted', async () => { + vi.spyOn(console, 'error').mockImplementation(() => {}); + const { fapi } = await renderSwitcher({}, noOffers({ suggestions: [fapiSuggestion('sug_1', beta)] })); + const user = await openWithList(); + const join = holdRequests('post', '/v1/me/organization_suggestions/:id/accept'); + + await user.click(screen.getByRole('button', { name: 'Join' })); + fapi.suggestions = [fapiSuggestion('sug_1', beta, { status: 'accepted' })]; + join.fail('organization_suggestion_already_accepted'); + + await waitFor(() => expect(reading('Beta', 'Requested')).toEqual(['Beta', 'Requested'])); + expect(screen.queryByRole('button', { name: 'Join' })).toBeNull(); + }); + + it('spins inside the join button while the suggestion is joined', async () => { + await renderSwitcher(); + const user = await open(); + await screen.findByRole('button', { name: 'Join' }); + const join = holdRequests('post', '/v1/me/organization_suggestions/:id/accept'); + + await user.click(screen.getByRole('button', { name: 'Join' })); + + const button = screen.getByRole('button', { name: 'Join' }); + expect(button).toHaveAttribute('aria-busy', 'true'); + expect(within(button).getByRole('progressbar')).toBeInTheDocument(); + + join.release(); + await waitFor(() => expect(waiting()).toBe(false)); + expect(popup()).toBeInTheDocument(); + }); + }); + + describe('handing off', () => { + it('opens the UserProfile modal and closes when managing the account', async () => { + const { clerk, navigate } = await renderSwitcher(); + const openUserProfile = vi.spyOn(clerk, 'openUserProfile').mockImplementation(() => {}); + const user = await open(); + + await openSettings(user, 'Manage profile'); + + expect(openUserProfile).toHaveBeenCalled(); + expect(navigate).not.toHaveBeenCalled(); + await waitFor(() => expect(popup()).toBeNull()); + }); + + it('hands the opened profile the portal root the app provides', async () => { + const container = document.body.appendChild(document.createElement('div')); + onTestFinished(() => container.remove()); + serveFapi(signedIn()); + const { clerk } = await renderWithClerk(Terms body
}] }, + }); + const openUserProfile = vi.spyOn(clerk, 'openUserProfile').mockImplementation(() => {}); + const user = await open(); + + await openSettings(user, 'Manage profile'); + await waitFor(() => expect(popup()).toBeNull()); + + const customPages = openUserProfile.mock.calls[0]?.[0]?.customPages ?? []; + expect(customPages).toHaveLength(1); + expect(customPages[0]).toMatchObject({ label: 'Terms', url: 'terms' }); + + const el = document.createElement('div'); + document.body.appendChild(el); + act(() => { + customPages[0]?.mount?.(el); + }); + + expect(within(el).getByText('Terms body')).toBeInTheDocument(); + }); + + it('opens the profile with its pages in the order it was given', async () => { + const { clerk } = await renderSwitcher({}, undefined, { + userProfileProps: { + customPages: [{ label: 'Terms', path: 'terms', content:Terms body
}], + pageOrder: ['account', 'terms'], + }, + }); + const openUserProfile = vi.spyOn(clerk, 'openUserProfile').mockImplementation(() => {}); + const user = await open(); + + await openSettings(user, 'Manage profile'); + await waitFor(() => expect(popup()).toBeNull()); + + const customPages = openUserProfile.mock.calls[0]?.[0]?.customPages ?? []; + expect(customPages.map((page: CustomPage) => page.label)).toEqual(['account', 'Terms', 'security']); + }); + + it.each([ + { features: {}, pages: ['Terms', 'account', 'security'] }, + { features: { billing: true, apiKeys: true }, pages: ['Terms', 'account', 'security', 'billing', 'apiKeys'] }, + ])('orders the UserProfile pages the instance turns on: $features', async ({ features, pages }) => { + const { clerk } = await renderSwitcher({}, signedIn({ environment: instanceWith(features) }), { + userProfileProps: { customPages: [terms], pageOrder: ['terms'] }, + }); + const openUserProfile = vi.spyOn(clerk, 'openUserProfile').mockImplementation(() => {}); + const user = await open(); + + await openSettings(user, 'Manage profile'); + await waitFor(() => expect(popup()).toBeNull()); + + const customPages = openUserProfile.mock.calls[0]?.[0]?.customPages ?? []; + expect(customPages.map((page: CustomPage) => page.label)).toEqual(pages); + }); + + it.each([ + { features: {}, organization: {}, pages: ['Terms', 'general', 'members'] }, + { + features: { billing: true, apiKeys: true }, + organization: {}, + pages: ['Terms', 'general', 'members', 'billing', 'apiKeys'], + }, + { features: { sso: true }, organization: {}, pages: ['Terms', 'general', 'members'] }, + { + features: { sso: true }, + organization: { self_serve_sso_enabled: true }, + pages: ['Terms', 'general', 'members', 'security'], + }, + { + features: { sso: true, directorySync: true }, + organization: {}, + pages: ['Terms', 'general', 'members'], + }, + { + features: { sso: true, directorySync: true }, + organization: { self_serve_directory_sync_enabled: true }, + pages: ['Terms', 'general', 'members', 'security'], + }, + ])( + 'orders the OrganizationProfile pages the instance and organization turn on: $features $organization', + async ({ features, organization, pages }) => { + const selfServe = fapiOrganization({ id: 'org_1', name: 'Acme', members_count: 3, ...organization }); + const memberships = [fapiMembership(selfServe, { permissions: ['org:sys_memberships:manage'] })]; + const { clerk } = await renderSwitcher( + {}, + signedIn({ + environment: instanceWith(features), + client: fapiClient([ + fapiSession({ + id: 'sess_1', + user: { ...alice, organization_memberships: memberships }, + last_active_organization_id: 'org_1', + }), + ]), + memberships, + }), + { organizationProfileProps: { customPages: [terms], pageOrder: ['terms'] } }, + ); + const openOrganizationProfile = vi.spyOn(clerk, 'openOrganizationProfile').mockImplementation(() => {}); + const user = await open(); + + await openSettings(user, 'Manage organization'); + await waitFor(() => expect(popup()).toBeNull()); + + const customPages = openOrganizationProfile.mock.calls[0]?.[0]?.customPages ?? []; + expect(customPages.map((page: CustomPage) => page.label)).toEqual(pages); + }, + ); + + it('opens the InviteMembers modal and closes', async () => { + const { clerk, navigate } = await renderSwitcher(); + const openInviteMembers = vi.spyOn(clerk, 'openInviteMembers').mockImplementation(() => {}); + const user = await open(); + + await user.click(screen.getByRole('button', { name: 'Invite members' })); + + expect(openInviteMembers).toHaveBeenCalled(); + expect(navigate).not.toHaveBeenCalled(); + await waitFor(() => expect(popup()).toBeNull()); + }); + + it('offers no invite to a member who cannot manage memberships', async () => { + const plain = [fapiMembership(acme), fapiMembership(other)]; + await renderSwitcher( + {}, + signedIn({ + client: fapiClient([fapiSession({ ...aliceSession, user: { ...alice, organization_memberships: plain } })]), + memberships: plain, + }), + ); + await open(); + + expect(screen.getByRole('button', { name: 'Settings' })).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Invite members' })).toBeNull(); + }); + + it('opens the CreateOrganization modal and closes', async () => { + const { clerk, navigate } = await renderSwitcher(); + const openCreateOrganization = vi.spyOn(clerk, 'openCreateOrganization').mockImplementation(() => {}); + const user = await open(); + + await user.click(await screen.findByRole('button', { name: 'Add organization' })); + + expect(openCreateOrganization).toHaveBeenCalled(); + expect(navigate).not.toHaveBeenCalled(); + await waitFor(() => expect(popup()).toBeNull()); + }); + + it('hands the CreateOrganization modal the portal root the app provides', async () => { + const container = document.body.appendChild(document.createElement('div')); + onTestFinished(() => container.remove()); + serveFapi(signedIn()); + const { clerk } = await renderWithClerk(Terms body
}; -describe('UserButton with experimental.newProfiles', () => { +describe('Switcher with experimental.newProfiles', () => { const newProfiles = { newProfiles: true }; async function renderWithNewProfiles( - props: UserButtonProps = {}, + props: SwitcherProps = {}, seed: FakeFapiSeed = signedIn(), profile?: MosaicProfile, ) { @@ -127,8 +127,11 @@ describe('UserButton with experimental.newProfiles', () => { await waitFor(() => expect(popup()).toBeNull()); }); - it('opens the profile as a modal, so an OAuth connection returns to it', async () => { - await renderWithNewProfiles({}, withConnectedAccounts([])); + it.each([ + { name: 'combined', props: {}, expected: 'profile/account' }, + { name: 'user-only', props: { mode: 'user' as const }, expected: 'user-profile/account' }, + ])('opens the $name profile as a modal, so an OAuth connection returns to it', async ({ props, expected }) => { + await renderWithNewProfiles(props, withConnectedAccounts([])); const request = holdRequests('post', '/v1/me/external_accounts'); const user = await open(); @@ -138,7 +141,7 @@ describe('UserButton with experimental.newProfiles', () => { const body = new URLSearchParams(await request.requests[0]?.text()); const params = new URL(body.get('redirect_url') || '').searchParams; - expect(params.get('__clerk_mosaic_modal')).toBe('user-profile/account'); + expect(params.get('__clerk_mosaic_modal')).toBe(expected); expect(params.has('__clerk_modal_state')).toBe(false); request.fail(); }); @@ -200,7 +203,7 @@ describe('UserButton with experimental.newProfiles', () => { }); it("leaves the organization's pages out of a separate profile", async () => { - await renderWithNewProfiles({ combined: false }, undefined, { combined: false }); + await renderWithNewProfiles({ mode: 'user' }, undefined, { combined: false }); const user = await open(); await user.click(screen.getByRole('button', { name: 'Settings' })); diff --git a/packages/mosaic/src/features/switcher/__tests__/switcher.profile.feature.test.tsx b/packages/mosaic/src/features/switcher/__tests__/switcher.profile.feature.test.tsx index 37a9cdb2912..124c09cff26 100644 --- a/packages/mosaic/src/features/switcher/__tests__/switcher.profile.feature.test.tsx +++ b/packages/mosaic/src/features/switcher/__tests__/switcher.profile.feature.test.tsx @@ -19,9 +19,10 @@ import { openMenu } from '../../../__tests__/feature/menu'; import { renderWithClerk } from '../../../__tests__/feature/render'; import { OrganizationProfile } from '../../organization-profile/organization-profile'; import { OrganizationSwitcher } from '../../organization-switcher/organization-switcher'; +import { Profile } from '../../profile/profile'; import type { MosaicProfile } from '../../profile-pages/use-mosaic-profile'; import { UserButton } from '../../user-button/user-button'; -import { UserProfile } from '../../user-profile/user-profile'; +import { Switcher } from '../switcher'; const acme = fapiOrganization({ id: 'org_1', name: 'Acme', members_count: 3 }); const memberships = [fapiMembership(acme, { permissions: ['org:sys_memberships:manage'] })]; @@ -109,20 +110,20 @@ beforeEach(async () => { describe('the profile the switchers open', () => { it.each([ - { name: 'combined by default', profile: undefined, expected: allTabs }, - { name: 'combined when asked', profile: { combined: true }, expected: allTabs }, - { name: 'separate when opted out', profile: separate, expected: accountTabs }, - ])('a user-only button opens the account pages first: $name', async ({ profile, expected }) => { - await renderWithProfile(Terms body
}; - -function instanceWith({ - billing = false, - apiKeys = false, - sso = false, - directorySync = false, -}: { - billing?: boolean; - apiKeys?: boolean; - sso?: boolean; - directorySync?: boolean; -}) { - const base = fapiEnvironment({ - api_keys_settings: { user_api_keys_enabled: apiKeys, orgs_api_keys_enabled: apiKeys }, - }); - return { - ...base, - commerce_settings: { - ...base.commerce_settings, - billing: { - ...base.commerce_settings.billing, - user: { enabled: billing, has_paid_plans: false }, - organization: { enabled: billing, has_paid_plans: false }, - }, - }, - user_settings: { - ...base.user_settings, - enterprise_sso: { enabled: sso, self_serve_sso: sso, self_serve_directory_sync: directorySync }, - }, - }; -} - -async function openWithList() { - const user = await open(); - await waitFor(() => expect(screen.queryByText('Loading organizations…')).toBeNull()); - return user; + await user.click(trigger); + return { trigger, user, popup: await screen.findByRole('dialog', { name: 'Account' }) }; } describe('UserButton', () => { - describe.each(['combined', 'user'] as const)('in %s mode', mode => { - it('renders nothing while Clerk is still loading', async () => { - serveFapi(signedIn()); - const client = holdRequests('get', '/v1/client'); - const rendering = renderWithClerk(tree({ combined: mode === 'combined' })); - - await waitFor(() => expect(client.requests).toHaveLength(1)); - expect(host()).toBeEmptyDOMElement(); - - client.release(); - await rendering; - expect(trigger()).toBeInTheDocument(); - }); - - it('renders nothing, not even its fallback, when nobody is signed in', async () => { - await renderUserButton( - { combined: mode === 'combined', fallback: }, - signedIn({ client: fapiClient() }), - ); - - expect(host()).toBeEmptyDOMElement(); - }); - - it('leaves organizations out entirely when the instance has them disabled', async () => { - await renderUserButton( - { combined: mode === 'combined' }, - signedIn({ environment: fapiEnvironment({ organization_settings: { enabled: false } }) }), - ); - - expect(screen.getByRole('button', { name: 'Open account menu for Alice Smith' })).toBeInTheDocument(); - const user = await open(); - - for (const name of ['Acme', 'Other', 'Beta', 'Gamma', 'Personal account']) { - expect(screen.queryByText(name)).toBeNull(); - } - expect(screen.queryByRole('button', { name: 'Add organization' })).toBeNull(); - expect(screen.queryByRole('button', { name: 'Invite members' })).toBeNull(); - - expect(screen.getByRole('button', { name: 'Sign out' })).toBeInTheDocument(); - const menu = await openAccounts(user); - expect(within(menu).getByRole('menuitem', { name: 'bob@example.com' })).toBeInTheDocument(); - }); - }); - - it('keeps the popover closed until the trigger is clicked', async () => { - await renderUserButton(); - - expect(trigger()).toBeInTheDocument(); - expect(popup()).toBeNull(); - }); - - it('lists the organizations and the account when opened', async () => { - await renderUserButton(); - await open(); - - expect(await screen.findByRole('button', { name: 'Other' })).toBeInTheDocument(); - expect(requiredPopup().querySelector('.cl-user-button-header-description')).toHaveTextContent('alice'); - }); - - describe('switching organization', () => { - it('makes the selected organization active and closes', async () => { - const { navigate } = await renderUserButton(); - const user = await open(); - - await user.click(await screen.findByRole('button', { name: 'Other' })); - await waitFor(() => expect(popup()).toBeNull()); - - await open(); - expect(await screen.findByRole('button', { name: 'Acme' })).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: 'Other' })).toBeNull(); - expect(navigate).not.toHaveBeenCalled(); - }); - - it('leaves the active organization for the personal account', async () => { - await renderUserButton(); - const user = await open(); - - await user.click(await screen.findByRole('button', { name: 'Personal account' })); - await waitFor(() => expect(popup()).toBeNull()); - - await open(); - expect(await screen.findByRole('button', { name: 'Acme' })).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: 'Personal account' })).toBeNull(); - }); - - it('drops the personal account where the app hides it', async () => { - await renderUserButton({ hidePersonal: true }); - await open(); - - expect(await screen.findByRole('button', { name: 'Other' })).toBeInTheDocument(); - expect(screen.queryByText('Personal account')).toBeNull(); - }); - - it('leads with the account, and lists no personal account, when the instance forces an organization and none is active', async () => { - await renderUserButton( - {}, - signedIn({ - environment: fapiEnvironment({ organization_settings: { force_organization_selection: true } }), - client: fapiClient([fapiSession({ id: 'sess_1', user: alice }), bobSession]), - }), - ); - - expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); - await openWithList(); - - expect(screen.queryByText('No organization selected')).toBeNull(); - expect(screen.queryByText('Personal account')).toBeNull(); - expect(screen.getByRole('button', { name: 'Settings' })).toBeInTheDocument(); - }); - - it('lists no organizations on an account-only surface', async () => { - await renderUserButton({ combined: false }); - const user = await open(); - - const menu = await openAccounts(user); - expect(within(menu).getByRole('menuitem', { name: 'bob@example.com' })).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: 'Other' })).toBeNull(); - }); - }); - - describe('accounts', () => { - it('switches to another signed-in account and stays open', async () => { - await renderUserButton(); - const user = await open(); - - const menu = await openAccounts(user); - await user.click(within(menu).getByRole('menuitem', { name: 'bob@example.com' })); - - await waitFor(() => expect(trigger()).toHaveAccessibleName('Open account menu for Bob Jones')); - await waitFor(() => expect(waiting()).toBe(false)); - expect(popup()).toBeInTheDocument(); - }); - - it('lands a switched account where the instance sends it', async () => { - const { navigate } = await renderUserButton( - {}, - signedIn({ environment: fapiEnvironment({ display_config: { after_switch_session_url: '/switched' } }) }), - ); - const user = await open(); - - const menu = await openAccounts(user); - await user.click(within(menu).getByRole('menuitem', { name: 'bob@example.com' })); - - await waitFor(() => expect(navigate).toHaveBeenCalledWith(expect.stringMatching(/\/switched$/))); - }); - - it('signs out of the active account alone while another stays signed in', async () => { - const { fapi, navigate } = await renderUserButton(); - const user = await open(); - - await user.click(signOut()); - - await waitFor(() => expect(navigate).toHaveBeenCalledWith('/after-single-sign-out')); - expect(fapi.client.sessions.map(session => session.id)).toEqual(['sess_2']); - }); - - it('does not reopen after signing out of the last account and signing back in', async () => { - const { clerk, fapi, navigate } = await renderUserButton({}, signedIn({ client: fapiClient([aliceSession]) })); - const user = await open(); - - await user.click(signOut()); - await waitFor(() => expect(navigate).toHaveBeenCalledWith('/')); - await waitFor(() => expect(host()).toBeEmptyDOMElement()); - - fapi.client = fapiClient([aliceSession]); - await act(async () => { - await clerk.client?.reload(); - await clerk.setActive({ session: 'sess_1' }); - }); - - expect(trigger()).toBeInTheDocument(); - expect(popup()).toBeNull(); - }); - - it('does not reopen after signing out of all accounts and signing back in', async () => { - const { clerk, fapi, navigate } = await renderUserButton(); - const user = await open(); - - const menu = await openAccounts(user); - await user.click(within(menu).getByRole('menuitem', { name: 'Sign out of all accounts' })); - await waitFor(() => expect(navigate).toHaveBeenCalledWith('/')); - await waitFor(() => expect(host()).toBeEmptyDOMElement()); - - fapi.client = fapiClient([aliceSession]); - await act(async () => { - await clerk.client?.reload(); - await clerk.setActive({ session: 'sess_1' }); - }); - - expect(trigger()).toBeInTheDocument(); - expect(popup()).toBeNull(); - }); - - it('drops add-account and sign-out-of-all in single-session mode', async () => { - await renderUserButton( - {}, - signedIn({ - environment: fapiEnvironment({ auth_config: { single_session_mode: true } }), - client: fapiClient([aliceSession]), - }), - ); - await open(); - - expect(screen.queryByRole('button', { name: 'Switch account' })).toBeNull(); - expect(screen.queryByRole('button', { name: 'Add account' })).toBeNull(); - expect(signOut()).toBeInTheDocument(); - }); - }); - - describe('invitations and suggestions', () => { - it('accepts an invitation and stays open', async () => { - await renderUserButton(); - const user = await open(); - - await user.click(await screen.findByRole('button', { name: 'Accept' })); - - await waitFor(() => expect(screen.queryByRole('button', { name: 'Accept' })).toBeNull()); - await waitFor(() => expect(waiting()).toBe(false)); - expect(popup()).toBeInTheDocument(); - }); - - it('stays busy until the memberships have reloaded', async () => { - await renderUserButton(); - await open(); - await screen.findByRole('button', { name: 'Accept' }); - const reload = holdRequests('get', '/v1/me/organization_memberships'); - vi.useFakeTimers({ shouldAdvanceTime: true }); - - try { - const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime }); - await user.click(screen.getByRole('button', { name: 'Accept' })); - await waitFor(() => expect(reload.requests).toHaveLength(1)); - - await act(() => vi.advanceTimersByTimeAsync(400)); - expect(waiting()).toBe(true); - - reload.release(); - await waitFor(() => expect(waiting()).toBe(false)); - } finally { - vi.useRealTimers(); - } - expect(popup()).toBeInTheDocument(); - }); - - it('joins a suggested organization and stays open', async () => { - await renderUserButton(); - const user = await open(); - - await user.click(await screen.findByRole('button', { name: 'Join' })); - - await waitFor(() => expect(screen.queryByRole('button', { name: 'Join' })).toBeNull()); - await waitFor(() => expect(waiting()).toBe(false)); - expect(popup()).toBeInTheDocument(); - }); - - it('reports a failed accept, and drops an invitation that is no longer pending', async () => { - const log = vi.spyOn(console, 'error').mockImplementation(() => {}); - const { fapi } = await renderUserButton({}, noOffers({ invitations: [fapiInvitation('inv_1', gamma)] })); - const user = await openWithList(); - const accept = holdRequests('post', '/v1/me/organization_invitations/:id/accept'); - - await user.click(screen.getByRole('button', { name: 'Accept' })); - fapi.invitations = [fapiInvitation('inv_1', gamma, { status: 'revoked' })]; - accept.fail('organization_invitation_not_pending'); - - await waitFor(() => expect(screen.queryByRole('button', { name: 'Accept' })).toBeNull()); - expect(reading('Gamma')).toEqual([]); - expect(log).toHaveBeenCalledWith( - '[Clerk] User button action failed', - expect.objectContaining({ errors: [expect.objectContaining({ code: 'organization_invitation_not_pending' })] }), - ); - expect(popup()).toBeInTheDocument(); - }); - - it('shows a suggestion as requested when a failed join finds it already accepted', async () => { - vi.spyOn(console, 'error').mockImplementation(() => {}); - const { fapi } = await renderUserButton({}, noOffers({ suggestions: [fapiSuggestion('sug_1', beta)] })); - const user = await openWithList(); - const join = holdRequests('post', '/v1/me/organization_suggestions/:id/accept'); - - await user.click(screen.getByRole('button', { name: 'Join' })); - fapi.suggestions = [fapiSuggestion('sug_1', beta, { status: 'accepted' })]; - join.fail('organization_suggestion_already_accepted'); - - await waitFor(() => expect(reading('Beta', 'Requested')).toEqual(['Beta', 'Requested'])); - expect(screen.queryByRole('button', { name: 'Join' })).toBeNull(); - }); - - it('spins inside the join button while the suggestion is joined', async () => { - await renderUserButton(); - const user = await open(); - await screen.findByRole('button', { name: 'Join' }); - const join = holdRequests('post', '/v1/me/organization_suggestions/:id/accept'); - - await user.click(screen.getByRole('button', { name: 'Join' })); - - const button = screen.getByRole('button', { name: 'Join' }); - expect(button).toHaveAttribute('aria-busy', 'true'); - expect(within(button).getByRole('progressbar')).toBeInTheDocument(); - - join.release(); - await waitFor(() => expect(waiting()).toBe(false)); - expect(popup()).toBeInTheDocument(); - }); - }); - - describe('handing off', () => { - it('opens the UserProfile modal and closes when managing the account', async () => { - const { clerk, navigate } = await renderUserButton(); - const openUserProfile = vi.spyOn(clerk, 'openUserProfile').mockImplementation(() => {}); - const user = await open(); - - await openSettings(user, 'Manage profile'); - - expect(openUserProfile).toHaveBeenCalled(); - expect(navigate).not.toHaveBeenCalled(); - await waitFor(() => expect(popup()).toBeNull()); - }); - - it('hands the opened profile the portal root the app provides', async () => { - const container = document.body.appendChild(document.createElement('div')); - onTestFinished(() => container.remove()); - serveFapi(signedIn()); - const { clerk } = await renderWithClerk(Terms body
}] }, - }); - const openUserProfile = vi.spyOn(clerk, 'openUserProfile').mockImplementation(() => {}); - const user = await open(); - - await openSettings(user, 'Manage profile'); - await waitFor(() => expect(popup()).toBeNull()); - - const customPages = openUserProfile.mock.calls[0]?.[0]?.customPages ?? []; - expect(customPages).toHaveLength(1); - expect(customPages[0]).toMatchObject({ label: 'Terms', url: 'terms' }); - - const el = document.createElement('div'); - document.body.appendChild(el); - act(() => { - customPages[0]?.mount?.(el); - }); - - expect(within(el).getByText('Terms body')).toBeInTheDocument(); - }); - - it('opens the profile with its pages in the order it was given', async () => { - const { clerk } = await renderUserButton({}, undefined, { - userProfileProps: { - customPages: [{ label: 'Terms', path: 'terms', content:Terms body
}], - pageOrder: ['account', 'terms'], - }, - }); - const openUserProfile = vi.spyOn(clerk, 'openUserProfile').mockImplementation(() => {}); - const user = await open(); - - await openSettings(user, 'Manage profile'); - await waitFor(() => expect(popup()).toBeNull()); - - const customPages = openUserProfile.mock.calls[0]?.[0]?.customPages ?? []; - expect(customPages.map((page: CustomPage) => page.label)).toEqual(['account', 'Terms', 'security']); - }); - - it.each([ - { features: {}, pages: ['Terms', 'account', 'security'] }, - { features: { billing: true, apiKeys: true }, pages: ['Terms', 'account', 'security', 'billing', 'apiKeys'] }, - ])('orders the UserProfile pages the instance turns on: $features', async ({ features, pages }) => { - const { clerk } = await renderUserButton({}, signedIn({ environment: instanceWith(features) }), { - userProfileProps: { customPages: [terms], pageOrder: ['terms'] }, - }); - const openUserProfile = vi.spyOn(clerk, 'openUserProfile').mockImplementation(() => {}); - const user = await open(); - - await openSettings(user, 'Manage profile'); - await waitFor(() => expect(popup()).toBeNull()); - - const customPages = openUserProfile.mock.calls[0]?.[0]?.customPages ?? []; - expect(customPages.map((page: CustomPage) => page.label)).toEqual(pages); - }); - - it.each([ - { features: {}, organization: {}, pages: ['Terms', 'general', 'members'] }, - { - features: { billing: true, apiKeys: true }, - organization: {}, - pages: ['Terms', 'general', 'members', 'billing', 'apiKeys'], - }, - { features: { sso: true }, organization: {}, pages: ['Terms', 'general', 'members'] }, - { - features: { sso: true }, - organization: { self_serve_sso_enabled: true }, - pages: ['Terms', 'general', 'members', 'security'], - }, - { - features: { sso: true, directorySync: true }, - organization: {}, - pages: ['Terms', 'general', 'members'], - }, - { - features: { sso: true, directorySync: true }, - organization: { self_serve_directory_sync_enabled: true }, - pages: ['Terms', 'general', 'members', 'security'], - }, - ])( - 'orders the OrganizationProfile pages the instance and organization turn on: $features $organization', - async ({ features, organization, pages }) => { - const selfServe = fapiOrganization({ id: 'org_1', name: 'Acme', members_count: 3, ...organization }); - const memberships = [fapiMembership(selfServe, { permissions: ['org:sys_memberships:manage'] })]; - const { clerk } = await renderUserButton( - {}, - signedIn({ - environment: instanceWith(features), - client: fapiClient([ - fapiSession({ - id: 'sess_1', - user: { ...alice, organization_memberships: memberships }, - last_active_organization_id: 'org_1', - }), - ]), - memberships, - }), - { organizationProfileProps: { customPages: [terms], pageOrder: ['terms'] } }, - ); - const openOrganizationProfile = vi.spyOn(clerk, 'openOrganizationProfile').mockImplementation(() => {}); - const user = await open(); - - await openSettings(user, 'Manage organization'); - await waitFor(() => expect(popup()).toBeNull()); - - const customPages = openOrganizationProfile.mock.calls[0]?.[0]?.customPages ?? []; - expect(customPages.map((page: CustomPage) => page.label)).toEqual(pages); - }, - ); - - it('opens the InviteMembers modal and closes', async () => { - const { clerk, navigate } = await renderUserButton(); - const openInviteMembers = vi.spyOn(clerk, 'openInviteMembers').mockImplementation(() => {}); - const user = await open(); - - await user.click(screen.getByRole('button', { name: 'Invite members' })); - - expect(openInviteMembers).toHaveBeenCalled(); - expect(navigate).not.toHaveBeenCalled(); - await waitFor(() => expect(popup()).toBeNull()); - }); - - it('offers no invite to a member who cannot manage memberships', async () => { - const plain = [fapiMembership(acme), fapiMembership(other)]; - await renderUserButton( - {}, - signedIn({ - client: fapiClient([fapiSession({ ...aliceSession, user: { ...alice, organization_memberships: plain } })]), - memberships: plain, - }), - ); - await open(); - - expect(screen.getByRole('button', { name: 'Settings' })).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: 'Invite members' })).toBeNull(); - }); - - it('opens the CreateOrganization modal and closes', async () => { - const { clerk, navigate } = await renderUserButton(); - const openCreateOrganization = vi.spyOn(clerk, 'openCreateOrganization').mockImplementation(() => {}); - const user = await open(); - - await user.click(await screen.findByRole('button', { name: 'Add organization' })); - - expect(openCreateOrganization).toHaveBeenCalled(); - expect(navigate).not.toHaveBeenCalled(); - await waitFor(() => expect(popup()).toBeNull()); - }); - - it('hands the CreateOrganization modal the portal root the app provides', async () => { - const container = document.body.appendChild(document.createElement('div')); - onTestFinished(() => container.remove()); - serveFapi(signedIn()); - const { clerk } = await renderWithClerk(Usage
}] }, + organizationProfileProps: { customPages: [{ path: 'audit', label: 'Audit log', content:Audit
}] }, + }); + expect(tabNames()).toEqual(['Account', 'Security', 'Usage']); + }); + it('passes additional OAuth scopes to connected accounts', async () => { serveFapi(signedIn()); await renderWithClerk(Page
, undefined, undefined, undefined, profile); @@ -196,10 +196,18 @@ describe('UserProfile modal return', () => { expect(tabs).toContain('Terms'); }); - it('stays account-only when the provider turns combined off', async () => { - const tabs = await tabsAfterReturning({ combined: false }); - - expect(tabs).not.toContain('General'); + it.each([ + { name: 'a user profile', param: 'user-profile%2Faccount', profile: {}, expected: ['Account', 'Security'] }, + { + name: 'a combined profile', + param: 'profile%2Faccount', + profile: { combined: false }, + expected: ['Account', 'Security', 'General'], + }, + ])('reopens $name whatever the provider says', async ({ param, profile, expected }) => { + const tabs = await tabsAfterReturning(profile, param); + + expect(tabs).toEqual(expected); }); }); diff --git a/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.model.ts b/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.model.ts index 498e24fc37c..3f20842acdb 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.model.ts +++ b/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.model.ts @@ -227,7 +227,7 @@ function unavailable() { } export function useUserProfileConnectedAccountsModel(): UserProfileConnectedAccountsModel { - const { additionalOAuthScopes, mode } = useUserProfileOptions(); + const { additionalOAuthScopes, mode, combined } = useUserProfileOptions(); const clerk = useClerk(); const { isLoaded, user } = useUser(); const environment = useMosaicEnvironment(); @@ -283,7 +283,7 @@ export function useUserProfileConnectedAccountsModel(): UserProfileConnectedAcco }; const getRedirectUrl = async () => (transport ? String(await transport.getRedirectUrl()) : window.location.href); - const withModalState = (url: string) => withUserProfileModalReturn(url, mode); + const withModalState = (url: string) => withUserProfileModalReturn(url, { mode, combined }); const completeVerification = async (response: ExternalAccountResource): Promise+ + Sign in + {' '} + to use the live harness. +
+ ) : null} +- The connected user button, with the signed-in account, its organizations, and the profiles it opens. + The connected switcher in each mode, with the signed-in account, its organizations, and the profiles it + opens.
An app-provided page, passed to the profile modal as a custom page.
, +}; + +function FixtureUserProfile({ options }: UserProfileModalContentProps) { + const { pages } = useUserProfileFixture(); + const organization = useOrganizationProfileFixture(); + const [activePage, setActivePage] = useState(options?.page ?? 'account'); + + return ( +An app-provided page, passed to the profile modal as a custom page.
, -}; - -function FixtureUserProfile({ options }: UserProfileModalContentProps) { - const { pages } = useUserProfileFixture(); - const organization = useOrganizationProfileFixture(); - const [activePage, setActivePage] = useState(options?.page ?? 'account'); - - return ( -