From 9994c4521a19ead14fafc0717e70aa77549b7ea7 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 10 Nov 2026 13:33:25 -0500 Subject: [PATCH 1/6] feat(mosaic): add Switcher and make UserButton list accounts only --- .changeset/mosaic-switcher.md | 15 + .../src/app/custom/page.tsx | 4 +- .../src/app/mosaic-user-button.tsx | 4 +- .../.claude/skills/verify-mosaic/SKILL.md | 2 +- .../.claude/skills/verify-mosaic/notes.md | 2 +- packages/mosaic/README.md | 4 +- .../mosaic/docs/documenting-components.md | 12 +- packages/mosaic/docs/testing.md | 2 +- .../organization-switcher.tsx | 13 +- ...switcher-combined-open-chromium-linux.png} | Bin .../switcher-avatar.feature.test.tsx} | 6 +- .../__tests__/switcher.feature.test.tsx | 1543 ++++++++++++++++ .../switcher.new-profiles.feature.test.tsx} | 14 +- .../switcher.profile.feature.test.tsx | 19 +- .../__tests__/switcher.visual.test.tsx} | 8 +- .../src/features/switcher/switcher.model.tsx | 5 +- .../src/features/switcher/switcher.test-d.tsx | 98 ++ .../mosaic/src/features/switcher/switcher.tsx | 120 +- .../__tests__/user-button.feature.test.tsx | 1548 +---------------- .../src/features/user-button/user-button.tsx | 85 +- packages/mosaic/src/index.ts | 9 +- packages/mosaic/src/styles/index.ts | 1 + packages/swingset/src/app/(clerk)/layout.tsx | 4 +- .../src/app/(clerk)/live-switcher.tsx | 12 + .../src/app/(clerk)/live-user-button.tsx | 12 - .../switcher}/page.tsx | 14 +- .../swingset/src/components/Composition.tsx | 4 +- .../swingset/src/components/DocsViewer.tsx | 5 +- packages/swingset/src/lib/live-navigation.ts | 2 +- packages/swingset/src/lib/registry.ts | 20 +- .../swingset/src/stories/mosaic-provider.mdx | 20 +- .../src/stories/organization-switcher.mdx | 9 +- packages/swingset/src/stories/switcher.mdx | 306 ++++ .../swingset/src/stories/switcher.stories.tsx | 368 ++++ packages/swingset/src/stories/user-button.mdx | 297 +--- .../src/stories/user-button.stories.tsx | 367 +--- 36 files changed, 2616 insertions(+), 2338 deletions(-) create mode 100644 .changeset/mosaic-switcher.md rename packages/mosaic/src/features/{user-button/__tests__/__screenshots__/user-button.visual.test.tsx/user-button-combined-open-chromium-linux.png => switcher/__tests__/__screenshots__/switcher.visual.test.tsx/switcher-combined-open-chromium-linux.png} (100%) rename packages/mosaic/src/features/{user-button/__tests__/user-button-avatar.feature.test.tsx => switcher/__tests__/switcher-avatar.feature.test.tsx} (97%) create mode 100644 packages/mosaic/src/features/switcher/__tests__/switcher.feature.test.tsx rename packages/mosaic/src/features/{user-button/__tests__/user-button.new-profiles.feature.test.tsx => switcher/__tests__/switcher.new-profiles.feature.test.tsx} (95%) rename packages/mosaic/src/features/{user-button/__tests__/user-button.visual.test.tsx => switcher/__tests__/switcher.visual.test.tsx} (77%) create mode 100644 packages/mosaic/src/features/switcher/switcher.test-d.tsx create mode 100644 packages/swingset/src/app/(clerk)/live-switcher.tsx delete mode 100644 packages/swingset/src/app/(clerk)/live-user-button.tsx rename packages/swingset/src/app/(clerk)/live/{user-button/user-button => switcher/switcher}/page.tsx (69%) create mode 100644 packages/swingset/src/stories/switcher.mdx create mode 100644 packages/swingset/src/stories/switcher.stories.tsx diff --git a/.changeset/mosaic-switcher.md b/.changeset/mosaic-switcher.md new file mode 100644 index 00000000000..b3fe6cf83e0 --- /dev/null +++ b/.changeset/mosaic-switcher.md @@ -0,0 +1,15 @@ +--- +'@clerk/mosaic': minor +--- + +**Breaking:** Add `Switcher`, the account and organization menu, and make `UserButton` list accounts only. `Switcher` takes `mode`: `'combined'` (the default) lists accounts and organizations, `'user'` lists accounts only, and `'organization'` lists organizations. `` is now `` and `` is ``. Each mode takes only its own props, so TypeScript flags organization options on `UserButton` and `triggerVariant` outside `combined`. + +| Before | After | +| --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | +| `` (accounts and organizations) | `` | +| `` | `` or `` | +| `` | `` | +| Organization props on `UserButton` (`hidePersonal`, `afterSelectOrganizationUrl`, `createOrganizationUrl`, ...) | The same props on `Switcher` | +| `UserButtonMenuProps` | `CombinedSwitcherProps` | + +Find usages with `git grep -n "UserButton"`. diff --git a/integration/templates/next-app-router-mosaic/src/app/custom/page.tsx b/integration/templates/next-app-router-mosaic/src/app/custom/page.tsx index 766d3f60a90..7327a6332da 100644 --- a/integration/templates/next-app-router-mosaic/src/app/custom/page.tsx +++ b/integration/templates/next-app-router-mosaic/src/app/custom/page.tsx @@ -1,6 +1,6 @@ 'use client'; -import { MosaicProvider, UserButton } from '@clerk/mosaic'; +import { Switcher, MosaicProvider } from '@clerk/mosaic'; export default function Page() { return ( @@ -12,7 +12,7 @@ export default function Page() { }, }} > - + ); } diff --git a/integration/templates/next-app-router-mosaic/src/app/mosaic-user-button.tsx b/integration/templates/next-app-router-mosaic/src/app/mosaic-user-button.tsx index 8815431f838..278d8a112e2 100644 --- a/integration/templates/next-app-router-mosaic/src/app/mosaic-user-button.tsx +++ b/integration/templates/next-app-router-mosaic/src/app/mosaic-user-button.tsx @@ -1,11 +1,11 @@ 'use client'; -import { MosaicProvider, UserButton } from '@clerk/mosaic'; +import { Switcher, MosaicProvider } from '@clerk/mosaic'; export function MosaicUserButton() { return ( - + ); } diff --git a/packages/mosaic/.claude/skills/verify-mosaic/SKILL.md b/packages/mosaic/.claude/skills/verify-mosaic/SKILL.md index 4c3972ca719..b44f669e863 100644 --- a/packages/mosaic/.claude/skills/verify-mosaic/SKILL.md +++ b/packages/mosaic/.claude/skills/verify-mosaic/SKILL.md @@ -61,7 +61,7 @@ $ CS ab eval '(() => document.querySelector("[role=dialog]").dataset.variant)()' Conventions: -- Routes are `//`: `/components/button`, `/components/dialog`, `/user-button/user-button`, `/misc/organization-switcher`. The slug is the story's `meta.group` and `meta.title` run through `packages/swingset/src/lib/slug.ts`. A wrong path still returns 200 with `No docs found`, so check the level-1 heading. Read the paths of the expanded sidebar groups with `CS ab eval '(() => [...document.querySelectorAll("[data-sidebar] a")].map(a => a.getAttribute("href")))()'`, or click the link with `CS ab click 'a[href="/user-button/user-button"]'`. +- Routes are `//`: `/components/button`, `/components/dialog`, `/switcher/switcher`, `/misc/organization-switcher`. The slug is the story's `meta.group` and `meta.title` run through `packages/swingset/src/lib/slug.ts`. A wrong path still returns 200 with `No docs found`, so check the level-1 heading. Read the paths of the expanded sidebar groups with `CS ab eval '(() => [...document.querySelectorAll("[data-sidebar] a")].map(a => a.getAttribute("href")))()'`, or click the link with `CS ab click 'a[href="/switcher/switcher"]'`. - Prefer role and accessible name (`find role button --name …`). When `find` cannot resolve a name, as with the header switches, take `snapshot -i` and use the `@ref`. Refs change after every navigation and every re-render, so take a new snapshot first. - Mosaic parts carry their identity in the DOM: a `.cl-` class plus `data-` attributes (`data-variant`, `data-size`, `data-color`, `data-open`). Assert on those, not on computed colours or class hashes. `data-style-src` lists the StyleX source lines that styled the element. - Wrap every `eval` body in an IIFE. The page keeps `const`s between `eval` calls, and a second `const b` throws. diff --git a/packages/mosaic/.claude/skills/verify-mosaic/notes.md b/packages/mosaic/.claude/skills/verify-mosaic/notes.md index 099f82dd77d..dfde1c31405 100644 --- a/packages/mosaic/.claude/skills/verify-mosaic/notes.md +++ b/packages/mosaic/.claude/skills/verify-mosaic/notes.md @@ -26,7 +26,7 @@ Prove it looks right in every state you touched. Prove it works the way a user would test it: do the task end to end and check the result on the page. -- Pages are under the flow's group: `/user-button/...`, `/user-profile/...`, `/organization-profile/...`, `/misc/...`, `/blocks/...`. A section page such as `/user-profile/user-profile-email-section` has the default story first, then error and pending stories below it. +- Pages are under the flow's group: `/switcher/...`, `/user-profile/...`, `/organization-profile/...`, `/misc/...`, `/blocks/...`. A section page such as `/user-profile/user-profile-email-section` has the default story first, then error and pending stories below it. - The data is fixtures, and they keep state on the page. On the email section, `Add email` → type an address → `Continue` → type `424242` adds `Manage
` to the list. - Drive the default story through the change, then the error story for the failure path. Prove the end state with a snapshot, not a screenshot alone. - Turn on Chaos to check long and multi-script data. diff --git a/packages/mosaic/README.md b/packages/mosaic/README.md index 7475eb9e9e3..72a567c0f5f 100644 --- a/packages/mosaic/README.md +++ b/packages/mosaic/README.md @@ -58,13 +58,13 @@ Import the stylesheet and render Mosaic components beneath the SDK `ClerkProvide ```tsx import { ClerkProvider } from '@clerk/react'; -import { UserButton } from '@clerk/mosaic'; +import { Switcher } from '@clerk/mosaic'; import '@clerk/mosaic/styles.css'; export function App({ children }) { return ( - + {children} ); diff --git a/packages/mosaic/docs/documenting-components.md b/packages/mosaic/docs/documenting-components.md index a5fc421b76b..8314f49e846 100644 --- a/packages/mosaic/docs/documenting-components.md +++ b/packages/mosaic/docs/documenting-components.md @@ -2,7 +2,7 @@ Read this when you add or change a Swingset page for a Mosaic component, block, hook or style: a `.stories.tsx` or `.mdx` in `packages/swingset/src/stories/`. It covers what to write once the page is wired; how the app works is in `packages/swingset/CLAUDE.md`, and the registry, `docModules` and redirect wiring is in `packages/swingset/README.md`. -Worked examples: `button.stories.tsx` and `button.mdx` (archetype A, simple), `popover.component.mdx` (A, compound), `accordion.mdx` (B), `user-button.mdx` (C). +Worked examples: `button.stories.tsx` and `button.mdx` (archetype A, simple), `popover.component.mdx` (A, compound), `accordion.mdx` (B), `switcher.mdx` (C). ## Rules @@ -19,7 +19,7 @@ Worked examples: `button.stories.tsx` and `button.mdx` (archetype A, simple), `p | Group | What lives here | Archetype | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------- | -| `User Button` | Composed flow UI (e.g. `UserButton`) | C | +| `Switcher` | Composed flow UI (e.g. `Switcher`) | C | | `User Profile` | Composed flow UI (e.g. `UserProfileProfilePanel`) | C | | `Organization Profile` | Composed flow UI (e.g. `OrganizationProfileGeneralPanel`) | C | | `Misc` | Standalone composed components (e.g. `OrganizationSwitcher`, `Waitlist`) | C | @@ -30,7 +30,7 @@ Worked examples: `button.stories.tsx` and `button.mdx` (archetype A, simple), `p | `Hooks` | Headless hooks (`useForm`) | B (adapted) | | `Localization` | The `localization` prop on `MosaicProvider`: catalogs, overrides, locale, and the message helpers | B (adapted) | -`User Button` / `User Profile` / `Organization Profile` / `Misc` / `Blocks` → `Components` → `Primitives` runs high-level-composition → low-level-primitive. Composed layers are documented as compositions of lower layers (archetype C); leaf layers (Components, Primitives) get full prop/knob docs (archetypes A and B). +`Switcher` / `User Profile` / `Organization Profile` / `Misc` / `Blocks` → `Components` → `Primitives` runs high-level-composition → low-level-primitive. Composed layers are documented as compositions of lower layers (archetype C); leaf layers (Components, Primitives) get full prop/knob docs (archetypes A and B). `Styles` and `Hooks` are the non-component layers: there is no element to knob, so they follow archetype B's shape (Example → Usage → Parts → Styling) with `Props` replaced by whatever the export @@ -204,14 +204,14 @@ The story is `meta` (no `styles`) plus a single `Default` export that renders th Every props table has a **Default** column, and the `Type` stays a plain union, never with the default inlined. The auto `` fills it from `meta.styles._defaultVariants`; hand-written tables (`Prop | Type | Default | Description`) fill it by hand. Name the default member (`'bottom-start'`), use `—` when there is none and append `(required)` for a required prop, and state a behavioral default in words (`inherits Root`). -## Archetype C — composed layer (`User Button`, `User Profile`, `Organization Profile`, `Misc`, `Blocks`) +## Archetype C — composed layer (`Switcher`, `User Profile`, `Organization Profile`, `Misc`, `Blocks`) These compose lower layers, so the docs lead with the composition rather than knobs. Required MDX: ```mdx -import * as SwitcherStories from './user-button.stories'; +import * as SwitcherStories from './switcher.stories'; -# UserButton +# Switcher diff --git a/packages/mosaic/docs/testing.md b/packages/mosaic/docs/testing.md index 38860341941..70e63af38ca 100644 --- a/packages/mosaic/docs/testing.md +++ b/packages/mosaic/docs/testing.md @@ -2,7 +2,7 @@ Read this when you write, move or review a test in `packages/mosaic` (`*.test.ts(x)`, `*.feature.test.tsx`, `*.browser.test.tsx`, `*.visual.test.tsx`, `*.test-d.ts`, or anything under `__tests__/`). It covers which tier a behavior belongs in, where test files go, the feature-test toolkit and screenshot tests; what a feature test should assert for each layer is in the Testing section of [Models](models.md#testing), [Controllers](controllers.md#testing) and [Views](views.md#testing). -Worked example: `src/features/user-button/__tests__/user-button.feature.test.tsx`. +Worked example: `src/features/switcher/__tests__/switcher.feature.test.tsx`. ## Rules diff --git a/packages/mosaic/src/features/organization-switcher/organization-switcher.tsx b/packages/mosaic/src/features/organization-switcher/organization-switcher.tsx index 0e4ff5630b4..a6c6a8b5f07 100644 --- a/packages/mosaic/src/features/organization-switcher/organization-switcher.tsx +++ b/packages/mosaic/src/features/organization-switcher/organization-switcher.tsx @@ -2,24 +2,15 @@ import type { ReactElement } from 'react'; -import type { SwitcherProps } from '../switcher/switcher'; +import type { OrganizationSwitcherProps } from '../switcher/switcher'; import { Switcher } from '../switcher/switcher'; -import type { OrganizationSwitcherModelOptions } from '../switcher/switcher.model'; -import type { SwitcherMenuProps } from '../switcher/switcher.types'; -import type { SwitcherTriggerProps } from '../switcher/switcher.view'; - -/** Everything `` takes: trigger content, and the app's own menu rows. */ -export type OrganizationSwitcherProps = OrganizationSwitcherModelOptions & - SwitcherTriggerProps & - SwitcherMenuProps & - Pick; /** * The active organization's avatar, and the menu behind it: switch organization or back to the * personal account, join a suggested or invited one, create one, invite members, and open the * organization's settings. It reads the active session and organization from Clerk, so it takes no * data. It renders `fallback` until Clerk answers, and nothing at all when nobody is signed in or the - * instance has organizations turned off. + * instance has organizations turned off. It is ``. * * @example * ```tsx diff --git a/packages/mosaic/src/features/user-button/__tests__/__screenshots__/user-button.visual.test.tsx/user-button-combined-open-chromium-linux.png b/packages/mosaic/src/features/switcher/__tests__/__screenshots__/switcher.visual.test.tsx/switcher-combined-open-chromium-linux.png similarity index 100% rename from packages/mosaic/src/features/user-button/__tests__/__screenshots__/user-button.visual.test.tsx/user-button-combined-open-chromium-linux.png rename to packages/mosaic/src/features/switcher/__tests__/__screenshots__/switcher.visual.test.tsx/switcher-combined-open-chromium-linux.png diff --git a/packages/mosaic/src/features/user-button/__tests__/user-button-avatar.feature.test.tsx b/packages/mosaic/src/features/switcher/__tests__/switcher-avatar.feature.test.tsx similarity index 97% rename from packages/mosaic/src/features/user-button/__tests__/user-button-avatar.feature.test.tsx rename to packages/mosaic/src/features/switcher/__tests__/switcher-avatar.feature.test.tsx index 04c3d97e258..031326d3780 100644 --- a/packages/mosaic/src/features/user-button/__tests__/user-button-avatar.feature.test.tsx +++ b/packages/mosaic/src/features/switcher/__tests__/switcher-avatar.feature.test.tsx @@ -13,7 +13,7 @@ import { fapiUser, } from '../../../__tests__/feature/fapi'; import { renderWithClerk } from '../../../__tests__/feature/render'; -import { UserButton } from '../user-button'; +import { Switcher } from '../switcher'; const GAP = 4; @@ -27,7 +27,7 @@ const alice = fapiUser({ organization_memberships: memberships, }); -describe('UserButton badged avatar customization', () => { +describe('Switcher badged avatar customization', () => { it('keeps the gap around a resized badge in the trigger', async () => { customize(`.cl-user-button-avatar { --cl-avatar-badge-size: 24px; --cl-avatar-badge-gap: ${GAP}px; }`); await renderSignedIn(); @@ -74,7 +74,7 @@ async function renderSignedIn() { client: fapiClient([fapiSession({ id: 'sess_1', user: alice, last_active_organization_id: acme.id })]), memberships, }); - await renderWithClerk(); + await renderWithClerk(); } async function triggerAvatar(): Promise { diff --git a/packages/mosaic/src/features/switcher/__tests__/switcher.feature.test.tsx b/packages/mosaic/src/features/switcher/__tests__/switcher.feature.test.tsx new file mode 100644 index 00000000000..f52ac6b816a --- /dev/null +++ b/packages/mosaic/src/features/switcher/__tests__/switcher.feature.test.tsx @@ -0,0 +1,1543 @@ +import type { CustomPage, UserJSON, Web3WalletJSON } from '@clerk/shared/types'; +import { act, screen, waitFor, within } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { describe, expect, it, onTestFinished, vi } from 'vitest'; + +import { deferred } from '../../../__tests__/async'; +import { type FakeFapiSeed, holdRequests, serveFapi } from '../../../__tests__/feature/fake-fapi'; +import { + fapiClient, + fapiEmailAddress, + fapiEnvironment, + fapiInvitation, + fapiMembership, + fapiOrganization, + fapiPhoneNumber, + fapiSession, + fapiSuggestion, + fapiUser, +} from '../../../__tests__/feature/fapi'; +import { openMenu } from '../../../__tests__/feature/menu'; +import { renderWithClerk } from '../../../__tests__/feature/render'; +import { PortalProvider } from '../../../primitives/portal'; +import type { MosaicProfile } from '../../profile-pages/use-mosaic-profile'; +import type { SwitcherProps } from '../switcher'; +import { Switcher } from '../switcher'; + +const acme = fapiOrganization({ id: 'org_1', name: 'Acme', members_count: 3 }); +const other = fapiOrganization({ id: 'org_9', name: 'Other' }); +const beta = fapiOrganization({ id: 'org_2', name: 'Beta' }); +const gamma = fapiOrganization({ id: 'org_3', name: 'Gamma' }); + +const aliceMemberships = [fapiMembership(acme, { permissions: ['org:sys_memberships:manage'] }), fapiMembership(other)]; + +const alice = fapiUser({ + id: 'user_1', + first_name: 'Alice', + last_name: 'Smith', + username: 'alice', + email_addresses: [fapiEmailAddress({ id: 'idn_alice', email_address: 'alice@example.com' })], + organization_memberships: aliceMemberships, +}); + +const bob = fapiUser({ + id: 'user_2', + first_name: 'Bob', + last_name: 'Jones', + email_addresses: [fapiEmailAddress({ id: 'idn_bob', email_address: 'bob@example.com' })], +}); + +const aliceSession = fapiSession({ id: 'sess_1', user: alice, last_active_organization_id: 'org_1' }); +const bobSession = fapiSession({ id: 'sess_2', user: bob }); + +function signedIn(overrides: FakeFapiSeed = {}): FakeFapiSeed { + return { + client: fapiClient([aliceSession, bobSession]), + memberships: aliceMemberships, + invitations: [fapiInvitation('inv_1', gamma)], + suggestions: [fapiSuggestion('sug_1', beta)], + ...overrides, + }; +} + +function tree(props: SwitcherProps = {}) { + return ( +
+ +
+ ); +} + +function renderSwitcher(props: SwitcherProps = {}, seed: FakeFapiSeed = signedIn(), profile?: MosaicProfile) { + const fapi = serveFapi(seed); + return renderWithClerk(tree(props), undefined, undefined, undefined, profile).then(view => ({ ...view, fapi })); +} + +type User = ReturnType; + +const host = () => screen.getByTestId('host'); +const trigger = () => screen.getByRole('button', { name: /Open account menu/ }); +const popup = () => screen.queryByRole('dialog', { name: 'Account' }); +const waiting = () => + Array.from(popup()?.querySelectorAll('button') ?? []).some(button => button.getAttribute('aria-disabled') === 'true'); +const signOut = () => within(requiredPopup()).getByRole('button', { name: 'Sign out' }); + +async function open() { + const user = userEvent.setup(); + await user.click(trigger()); + expect(popup()).toBeInTheDocument(); + return user; +} + +async function openSettings(user: User, label: string) { + await openMenu(user, within(requiredPopup()).getByRole('button', { name: 'Settings' })); + await user.click(screen.getByRole('menuitem', { name: label })); +} + +async function openAccounts(user: User) { + return openMenu(user, screen.getByRole('button', { name: 'Switch account' })); +} + +function requiredPopup() { + const surface = popup(); + if (!surface) { + throw new Error('expected the popover to be open'); + } + return surface; +} + +const reading = (...names: string[]) => + within(requiredPopup()) + .queryAllByText(new RegExp(`^(${names.join('|')})$`)) + .filter(node => !node.closest('.cl-user-button-header')) + .map(node => node.textContent); + +const current = () => + Array.from(requiredPopup().querySelectorAll('[aria-current="true"]')).map(node => node.textContent); + +const alone = () => signedIn({ client: fapiClient([aliceSession]) }); + +const noOffers = (overrides = {}) => signedIn({ invitations: [], suggestions: [], ...overrides }); + +const personalSession = fapiSession({ id: 'sess_1', user: alice }); + +const terms = { label: 'Terms', path: 'terms', content:

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: Loading }, 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({tree()}); + const openUserProfile = vi.spyOn(clerk, 'openUserProfile').mockImplementation(() => {}); + const user = await open(); + + await openSettings(user, 'Manage profile'); + + expect(openUserProfile.mock.calls[0]?.[0]?.getContainer?.()).toBe(container); + }); + + it('runs a custom menu item and closes', async () => { + const onClick = vi.fn(); + await renderSwitcher({ customMenuItems: [{ id: 'terms', label: 'Terms of service', onClick }] }); + const user = await open(); + + await user.click(screen.getByRole('button', { name: 'Terms of service' })); + + expect(onClick).toHaveBeenCalledTimes(1); + await waitFor(() => expect(popup()).toBeNull()); + }); + + it('renders a custom page into the element the opened profile hands back', async () => { + const { clerk } = await renderSwitcher({}, undefined, { + userProfileProps: { customPages: [{ label: 'Terms', path: 'terms', content:

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({tree()}); + const openCreateOrganization = vi.spyOn(clerk, 'openCreateOrganization').mockImplementation(() => {}); + const user = await open(); + + await user.click(await screen.findByRole('button', { name: 'Add organization' })); + + expect(openCreateOrganization.mock.calls[0]?.[0]?.getContainer?.()).toBe(container); + }); + + it('navigates to create an organization when a URL routes it', async () => { + const { clerk, navigate } = await renderSwitcher({ createOrganizationUrl: '/new-org' }); + const openCreateOrganization = vi.spyOn(clerk, 'openCreateOrganization').mockImplementation(() => {}); + const user = await open(); + + await user.click(await screen.findByRole('button', { name: 'Add organization' })); + + expect(navigate).toHaveBeenCalledWith('/new-org'); + expect(openCreateOrganization).not.toHaveBeenCalled(); + await waitFor(() => expect(popup()).toBeNull()); + }); + + it('navigates to manage the account when a URL routes it', async () => { + const { clerk, navigate } = await renderSwitcher({}, undefined, { userProfileUrl: '/account' }); + const openUserProfile = vi.spyOn(clerk, 'openUserProfile').mockImplementation(() => {}); + const user = await open(); + + await openSettings(user, 'Manage profile'); + + expect(navigate).toHaveBeenCalledWith('/account'); + expect(openUserProfile).not.toHaveBeenCalled(); + }); + + it('navigates to manage the organization when a URL routes it', async () => { + const { clerk, navigate } = await renderSwitcher({}, undefined, { organizationProfileUrl: '/org' }); + const openOrganizationProfile = vi.spyOn(clerk, 'openOrganizationProfile').mockImplementation(() => {}); + const user = await open(); + + await openSettings(user, 'Manage organization'); + + expect(navigate).toHaveBeenCalledWith('/org'); + expect(openOrganizationProfile).not.toHaveBeenCalled(); + }); + + it('sends add-account to the sign-in page', async () => { + const { navigate } = await renderSwitcher({ signInUrl: '/sign-in' }); + const user = await open(); + + const menu = await openAccounts(user); + await user.click(within(menu).getByRole('menuitem', { name: 'Add account' })); + + await waitFor(() => expect(navigate).toHaveBeenCalledWith('/sign-in')); + }); + + it('sends a switched account with a pending task to finish it', async () => { + const pendingBob = fapiSession({ ...bobSession, status: 'pending', tasks: [{ key: 'choose-organization' }] }); + const { navigate } = await renderSwitcher( + { signInUrl: '/sign-in' }, + signedIn({ client: fapiClient([aliceSession, pendingBob]) }), + ); + 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('/sign-in#/tasks/choose-organization')); + }); + + it('leaves create-organization out for a user who cannot create one', async () => { + const restricted = fapiUser({ ...alice, create_organization_enabled: false }); + await renderSwitcher( + {}, + signedIn({ client: fapiClient([fapiSession({ ...aliceSession, user: restricted }), bobSession]) }), + ); + await open(); + + expect(await screen.findByRole('button', { name: 'Other' })).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Add organization' })).toBeNull(); + }); + }); + + describe('while an action is in flight', () => { + it('spins the clicked row and stands every other one down', async () => { + await renderSwitcher(); + const user = await open(); + await screen.findByRole('button', { name: 'Other' }); + const touch = holdRequests('post', '/v1/client/sessions/:id/touch'); + + await user.click(screen.getByRole('button', { name: 'Other' })); + + expect(waiting()).toBe(true); + expect(signOut()).toHaveAttribute('aria-disabled', 'true'); + expect(screen.getByRole('button', { name: 'Switch account' })).toHaveAttribute('aria-disabled', 'true'); + expect(screen.getByRole('button', { name: 'Settings' })).toHaveAttribute('aria-disabled', 'true'); + expect(screen.getByRole('button', { name: 'Invite members' })).toHaveAttribute('aria-disabled', 'true'); + expect(popup()).toBeInTheDocument(); + + touch.release(); + await waitFor(() => expect(popup()).toBeNull()); + }); + + it('holds the surface on the organization it started with while Clerk navigates after a switch', async () => { + const { navigate } = await renderSwitcher({ + afterSelectOrganizationUrl: '/org/:id', + fallback: Loading, + }); + let arrive: () => void = () => {}; + navigate.mockImplementationOnce( + () => + new Promise(resolve => { + arrive = resolve; + }), + ); + const user = await open(); + + await user.click(await screen.findByRole('button', { name: 'Other' })); + await waitFor(() => expect(navigate).toHaveBeenCalledWith('/org/org_9')); + + expect(screen.queryByTestId('fallback')).toBeNull(); + expect(current()).toEqual([expect.stringContaining('Acme')]); + + act(() => arrive()); + await waitFor(() => expect(popup()).toBeNull()); + }); + + it('stays open, clears busy state and logs the failure when the switch fails', async () => { + const log = vi.spyOn(console, 'error').mockImplementation(() => {}); + await renderSwitcher(); + const user = await open(); + await screen.findByRole('button', { name: 'Other' }); + const touch = holdRequests('post', '/v1/client/sessions/:id/touch'); + + await user.click(screen.getByRole('button', { name: 'Other' })); + expect(waiting()).toBe(true); + + touch.fail('session_touch_failed'); + + await waitFor(() => expect(waiting()).toBe(false)); + expect(popup()).toBeInTheDocument(); + expect(signOut()).toBeEnabled(); + expect(log).toHaveBeenCalledWith( + '[Clerk] User button action failed', + expect.objectContaining({ errors: [expect.objectContaining({ code: 'session_touch_failed' })] }), + ); + }); + + it('still shows the action when reopened before it settles, and starts no second one', async () => { + await renderSwitcher(); + await open(); + await screen.findByRole('button', { name: 'Other' }); + const touch = holdRequests('post', '/v1/client/sessions/:id/touch'); + vi.useFakeTimers({ shouldAdvanceTime: true }); + + try { + const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime }); + const menu = await openAccounts(user); + await user.click(within(menu).getByRole('menuitem', { name: 'bob@example.com' })); + expect(waiting()).toBe(true); + await waitFor(() => expect(touch.requests).toHaveLength(1)); + + await user.click(trigger()); + await waitFor(() => expect(popup()).toBeNull()); + + await act(() => vi.advanceTimersByTimeAsync(400)); + await user.click(trigger()); + + expect(popup()).toBeInTheDocument(); + expect(waiting()).toBe(true); + + await user.click(screen.getByRole('button', { name: 'Other' })); + expect(touch.requests).toHaveLength(1); + + touch.release(); + await waitFor(() => expect(waiting()).toBe(false)); + } finally { + vi.useRealTimers(); + } + expect(popup()).toBeInTheDocument(); + }); + + it('closes on success even if the popover was dismissed and reopened meanwhile', async () => { + await renderSwitcher(); + const user = await open(); + await screen.findByRole('button', { name: 'Other' }); + const touch = holdRequests('post', '/v1/client/sessions/:id/touch'); + + await user.click(screen.getByRole('button', { name: 'Other' })); + await user.click(trigger()); + await waitFor(() => expect(popup()).toBeNull()); + + await user.click(trigger()); + expect(waiting()).toBe(true); + + touch.release(); + await waitFor(() => expect(popup()).toBeNull()); + }); + + it('reopens ready to use after an action that closed it', async () => { + await renderSwitcher(); + const user = await open(); + + await user.click(await screen.findByRole('button', { name: 'Other' })); + await waitFor(() => expect(popup()).toBeNull()); + + await user.click(trigger()); + + expect(waiting()).toBe(false); + expect(signOut()).toBeEnabled(); + }); + }); + + it('loads the next page of organizations when the end of the list scrolls into view', async () => { + const many = Array.from({ length: 15 }, (_, i) => fapiOrganization({ id: `org_p${i + 1}`, name: `Org ${i + 1}` })); + await renderSwitcher({}, signedIn({ memberships: [fapiMembership(acme), ...many.map(o => fapiMembership(o))] })); + await open(); + + const last = await screen.findByRole('button', { name: 'Org 9' }); + last.scrollIntoView(); + + expect(await screen.findByRole('button', { name: 'Org 15' })).toBeInTheDocument(); + }); + + it('loads the next page of invitations when the end of the list scrolls into view', async () => { + const many = Array.from({ length: 15 }, (_, i) => + fapiInvitation(`inv_p${i + 1}`, fapiOrganization({ id: `org_i${i + 1}`, name: `Invited ${i + 1}` })), + ); + await renderSwitcher({}, noOffers({ invitations: many })); + await open(); + + const last = await screen.findByText('Invited 10'); + last.scrollIntoView(); + + expect(await screen.findByText('Invited 15')).toBeInTheDocument(); + }); + + it('lists the active organization where its page puts it, and lists it once', async () => { + const many = Array.from({ length: 15 }, (_, i) => fapiOrganization({ id: `org_p${i + 1}`, name: `Org ${i + 1}` })); + await renderSwitcher({}, signedIn({ memberships: [...many.map(o => fapiMembership(o)), fapiMembership(acme)] })); + await open(); + + const last = await screen.findByRole('button', { name: 'Org 9' }); + expect(reading('Acme', 'Personal account', 'Org 1')).toEqual(['Personal account', 'Org 1']); + + last.scrollIntoView(); + await screen.findByRole('button', { name: 'Org 15' }); + + expect(reading('Acme', 'Personal account', 'Org 15')).toEqual(['Personal account', 'Org 15', 'Acme']); + }); + + describe('in user mode', () => { + it('heads the surface with the account, never the active organization', async () => { + await renderSwitcher({ mode: 'user' }); + await open(); + + expect(within(requiredPopup()).getByText('Alice Smith')).toBeInTheDocument(); + expect(within(requiredPopup()).getByText('alice')).toBeInTheDocument(); + expect(within(requiredPopup()).queryByText('Acme')).toBeNull(); + }); + + it('drops the identifier line when it would only repeat the name', async () => { + const nameless = fapiUser({ ...alice, first_name: null, last_name: null }); + await renderSwitcher( + { mode: 'user' }, + signedIn({ client: fapiClient([fapiSession({ ...aliceSession, user: nameless }), bobSession]) }), + ); + await open(); + + expect(within(requiredPopup()).getAllByText('alice')).toHaveLength(1); + }); + + it('lists no organizations and offers no way to make one', async () => { + await renderSwitcher({ mode: 'user' }); + await open(); + + expect(screen.queryByText('Personal account')).toBeNull(); + expect(screen.queryByText('Gamma')).toBeNull(); + expect(screen.queryByRole('button', { name: 'Add organization' })).toBeNull(); + }); + + it('manages the account from its settings row, and signs out at the foot', async () => { + const { clerk } = await renderSwitcher({ mode: 'user' }); + const openUserProfile = vi.spyOn(clerk, 'openUserProfile').mockImplementation(() => {}); + const user = await open(); + + expect( + within(requiredPopup().querySelector('.cl-user-button-header') ?? requiredPopup()).queryAllByRole('button'), + ).toEqual([]); + expect(reading('Settings', 'Switch account', 'Sign out')).toEqual(['Settings', 'Switch account', 'Sign out']); + expect(screen.queryByRole('button', { name: 'Invite members' })).toBeNull(); + + await user.click(screen.getByRole('button', { name: 'Settings' })); + expect(screen.queryByRole('menu')).toBeNull(); + expect(openUserProfile).toHaveBeenCalled(); + }); + + it('lists every account in the flyout, then the way to add one, then signing out of them all', async () => { + await renderSwitcher({ mode: 'user' }); + const user = await open(); + + const items = within(await openAccounts(user)).getAllByRole('menuitem'); + + expect(items).toHaveLength(4); + expect(items[0]).toHaveAccessibleName('alice'); + expect(items[1]).toHaveAccessibleName('bob@example.com'); + expect(items[2]).toHaveAccessibleName('Add account'); + expect(items[3]).toHaveAccessibleName('Sign out of all accounts'); + }); + }); + + describe('in combined mode', () => { + it('heads the surface with the active organization, badged with the account, managing both', async () => { + const { clerk } = await renderSwitcher(); + const openOrganizationProfile = vi.spyOn(clerk, 'openOrganizationProfile').mockImplementation(() => {}); + + expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); + const user = await open(); + + const header = requiredPopup().querySelector('.cl-user-button-header'); + expect(header?.querySelector('.cl-user-button-header-title')).toHaveTextContent('Acme'); + expect(header?.querySelector('.cl-user-button-header-description')).toHaveTextContent('alice'); + expect(header?.querySelector('.cl-user-button-avatar > [data-shape]')).toHaveAttribute('data-shape', 'square'); + expect(header?.querySelector('.cl-user-button-avatar-badge > [data-shape]')).toHaveAttribute( + 'data-shape', + 'circle', + ); + expect(within(header ?? requiredPopup()).queryAllByRole('button')).toEqual([]); + expect(reading('Add organization', 'Settings', 'Invite members', 'Switch account', 'Sign out')).toEqual([ + 'Add organization', + 'Settings', + 'Invite members', + 'Switch account', + 'Sign out', + ]); + await openSettings(user, 'Manage organization'); + expect(openOrganizationProfile).toHaveBeenCalled(); + }); + + it('keeps the identifier beneath the organization even when it is all that names the account', async () => { + const nameless = fapiUser({ ...alice, first_name: null, last_name: null }); + await renderSwitcher({}, signedIn({ client: fapiClient([fapiSession({ ...aliceSession, user: nameless })]) })); + + expect(trigger()).toHaveAccessibleName('Open account menu for alice'); + await open(); + + expect(requiredPopup().querySelector('.cl-user-button-header-title')).toHaveTextContent('Acme'); + expect(requiredPopup().querySelector('.cl-user-button-header-description')).toHaveTextContent('alice'); + }); + + it('trails the foot with sign-out, behind the flyout of accounts', async () => { + await renderSwitcher(); + await open(); + + expect(reading('Switch account', 'Add account', 'Sign out', 'Sign out of all accounts')).toEqual([ + 'Switch account', + 'Sign out', + ]); + }); + + it('trails the organizations with create-organization', async () => { + await renderSwitcher({}, noOffers()); + await openWithList(); + + expect(reading('Personal account', 'Acme', 'Other', 'Add organization').at(-1)).toBe('Add organization'); + }); + + it('marks the account it is already on in the flyout', async () => { + await renderSwitcher(); + const user = await open(); + + const menu = await openAccounts(user); + + expect(within(menu).getByRole('menuitem', { name: 'alice' })).toHaveAttribute('aria-current', 'true'); + expect(within(menu).getByRole('menuitem', { name: 'bob@example.com' })).not.toHaveAttribute('aria-current'); + expect(within(menu).getByRole('menuitem', { name: 'Add account' })).toBeInTheDocument(); + expect(within(menu).getByRole('menuitem', { name: 'Sign out of all accounts' })).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Add account' })).toBeNull(); + }); + + it('takes add-account at the foot where there is no second account', async () => { + await renderSwitcher({}, alone()); + await open(); + + expect(screen.queryByRole('button', { name: 'Switch account' })).toBeNull(); + expect(screen.queryByRole('button', { name: 'Sign out of all accounts' })).toBeNull(); + expect(reading('Switch account', 'Add account', 'Sign out of all accounts')).toEqual(['Add account']); + }); + + it('heads an account with no organizations with the account alone', async () => { + const loner = fapiUser({ ...alice, organization_memberships: [] }); + await renderSwitcher( + {}, + noOffers({ memberships: [], client: fapiClient([fapiSession({ id: 'sess_1', user: loner }), bobSession]) }), + ); + await open(); + + expect(within(requiredPopup()).getByText('Alice Smith')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Settings' })).toBeInTheDocument(); + expect(screen.queryByText('Personal account')).toBeNull(); + }); + }); + + describe('naming the account', () => { + const phone = fapiPhoneNumber({ id: 'idn_phone', phone_number: '+15550100' }); + const wallet: Web3WalletJSON = { + object: 'web3_wallet', + id: 'idn_wallet', + web3_wallet: '0xabc', + verification: null, + }; + const noEmail = { username: null, email_addresses: [], primary_email_address_id: null }; + + const signedInAs = (overrides: Partial) => + signedIn({ client: fapiClient([fapiSession({ id: 'sess_1', user: fapiUser({ ...alice, ...overrides }) })]) }); + + it.each([ + ['first and last name', {}, 'Alice Smith'], + ['username', { first_name: null, last_name: null }, 'alice'], + ['email address', { first_name: null, last_name: null, username: null }, 'alice@example.com'], + ])('names it by its %s', async (_source, overrides, name) => { + await renderSwitcher({ mode: 'user' }, signedInAs(overrides)); + + expect(trigger()).toHaveAccessibleName(`Open account menu for ${name}`); + }); + + it.each([ + ['username', {}, 'alice'], + ['email address', { username: null }, 'alice@example.com'], + ['phone number', { ...noEmail, phone_numbers: [phone], primary_phone_number_id: 'idn_phone' }, '+15550100'], + ['web3 wallet', { ...noEmail, web3_wallets: [wallet], primary_web3_wallet_id: 'idn_wallet' }, '0xabc'], + ])('identifies it by its %s', async (_source, overrides, identifier) => { + await renderSwitcher({}, signedInAs(overrides)); + await open(); + + expect(within(requiredPopup()).getByText(identifier)).toBeInTheDocument(); + }); + }); + + describe('the organization list', () => { + it('lists the organizations held in the order they come, then the invitations, then the suggestions', async () => { + await renderSwitcher({}, signedIn({ memberships: [fapiMembership(other), fapiMembership(acme)] })); + await openWithList(); + + expect(reading('Gamma', 'Beta', 'Personal account', 'Acme', 'Other')).toEqual([ + 'Personal account', + 'Other', + 'Acme', + 'Gamma', + 'Beta', + ]); + }); + + it('names the active organization as the current one', async () => { + await renderSwitcher(); + await openWithList(); + + expect(current()).toEqual([expect.stringContaining('Acme')]); + }); + + it('checks the personal account, and offers no switch to it, where it is active', async () => { + await renderSwitcher({}, signedIn({ client: fapiClient([personalSession, bobSession]) })); + await openWithList(); + + expect(current()).toEqual([expect.stringContaining('Personal account')]); + expect(screen.queryByRole('button', { name: 'Personal account' })).toBeNull(); + }); + + it('describes each offer by the organization it acts on', async () => { + await renderSwitcher(); + await openWithList(); + + expect(screen.getByRole('button', { name: 'Accept' })).toHaveAccessibleDescription('Gamma'); + expect(screen.getByRole('button', { name: 'Join' })).toHaveAccessibleDescription('Beta'); + }); + + it('lists an invitation for an account that holds nothing else', async () => { + const loner = fapiUser({ ...alice, organization_memberships: [] }); + await renderSwitcher( + {}, + signedIn({ + memberships: [], + suggestions: [], + client: fapiClient([fapiSession({ id: 'sess_1', user: loner })]), + }), + ); + await open(); + + expect(await screen.findByRole('button', { name: 'Accept' })).toBeInTheDocument(); + expect(reading('Gamma', 'Personal account')).toEqual(['Personal account', 'Gamma']); + }); + + it('reports an accepted suggestion instead of offering to join it again', async () => { + await renderSwitcher({}, noOffers({ suggestions: [fapiSuggestion('sug_1', beta, { status: 'accepted' })] })); + await openWithList(); + + expect(screen.queryByRole('button', { name: 'Join' })).toBeNull(); + expect(reading('Beta', 'Requested')).toEqual(['Beta', 'Requested']); + }); + + it('lists an accepted invitation once, as an organization to switch to', async () => { + await renderSwitcher({}, noOffers({ invitations: [fapiInvitation('inv_1', gamma)] })); + const user = await openWithList(); + + await user.click(screen.getByRole('button', { name: 'Accept' })); + + expect(await screen.findByRole('button', { name: 'Gamma' })).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'Accept' })).toBeNull(); + expect(reading('Gamma')).toEqual(['Gamma']); + }); + + it('holds every row behind one placeholder until the first page lands', async () => { + serveFapi(signedIn()); + const invitations = holdRequests('get', '/v1/me/organization_invitations'); + await renderWithClerk(tree()); + await open(); + + expect(await screen.findByText('Loading organizations…')).toBeInTheDocument(); + expect(reading('Personal account', 'Other')).toEqual([]); + expect(requiredPopup().querySelector('.cl-user-button-header-title')).toHaveTextContent('Acme'); + + invitations.release(); + await waitFor(() => expect(screen.queryByText('Loading organizations…')).toBeNull()); + expect(reading('Personal account', 'Other')).toEqual(['Personal account', 'Other']); + }); + }); + + describe('the custom rows', () => { + const terms = { id: 'terms', label: 'Terms of service', onClick: () => {} }; + const support = { id: 'support', label: 'Support', href: '/support' }; + const group = (name: string) => + screen.getByRole(name === 'Support' ? 'link' : 'button', { name }).closest('.cl-user-button-group'); + + it('follow Settings and Invite members in their group, above the foot', async () => { + await renderSwitcher({ customMenuItems: [terms, support] }); + await open(); + + expect( + reading('Settings', 'Invite members', 'Terms of service', 'Support', 'Switch account', 'Sign out'), + ).toEqual(['Settings', 'Invite members', 'Terms of service', 'Support', 'Switch account', 'Sign out']); + expect(group('Terms of service')).toBe(group('Settings')); + expect(group('Switch account')).not.toBe(group('Settings')); + expect(screen.getByRole('link', { name: 'Support' })).toHaveAttribute('href', '/support'); + }); + + it('renders the icon a custom row brings', async () => { + await renderSwitcher({ customMenuItems: [{ ...terms, icon: }] }); + await open(); + + expect(screen.getByTestId('glyph')).toBeInTheDocument(); + }); + + it('orders the group by the ids it is given, leaving the foot as it is', async () => { + await renderSwitcher({ + customMenuItems: [terms, support], + menuItemOrder: ['support', 'inviteMembers', 'signOut', 'nonsense'], + }); + await open(); + + expect( + reading('Settings', 'Invite members', 'Terms of service', 'Support', 'Switch account', 'Sign out'), + ).toEqual(['Support', 'Invite members', 'Settings', 'Terms of service', 'Switch account', 'Sign out']); + }); + + it('replaces the built-in row whose id one takes, in its place', async () => { + const appSettings = { id: 'settings', label: 'App settings', onClick: () => {} }; + await renderSwitcher({ customMenuItems: [terms, appSettings] }); + await open(); + + expect(reading('Settings', 'App settings', 'Invite members', 'Terms of service')).toEqual([ + 'App settings', + 'Invite members', + 'Terms of service', + ]); + }); + + it('keeps a row whose id names a built-in the mode does not show', async () => { + const invite = { id: 'inviteMembers', label: 'Invite teammates', onClick: () => {} }; + await renderSwitcher({ customMenuItems: [invite] }, signedIn({ client: fapiClient([personalSession]) })); + await open(); + + expect(reading('Settings', 'Invite teammates')).toEqual(['Settings', 'Invite teammates']); + }); + + it('places a replacing row by the id it took', async () => { + const appSettings = { id: 'settings', label: 'App settings', onClick: () => {} }; + await renderSwitcher({ customMenuItems: [terms, appSettings], menuItemOrder: ['terms', 'inviteMembers'] }); + await open(); + + expect(reading('App settings', 'Invite members', 'Terms of service')).toEqual([ + 'Terms of service', + 'Invite members', + 'App settings', + ]); + }); + + it('signs the popup with Clerk where the instance is branded', async () => { + await renderSwitcher({}, signedIn({ environment: fapiEnvironment({ display_config: { branded: true } }) })); + await open(); + + expect(within(requiredPopup()).getByRole('link', { name: 'Clerk' })).toBeInTheDocument(); + }); + + it('carries no mark where the instance is unbranded', async () => { + await renderSwitcher(); + await open(); + + expect(within(requiredPopup()).queryByRole('link', { name: 'Clerk' })).toBeNull(); + }); + }); + + describe('while an action is in flight, beside the busy row', () => { + it.each(['Other', 'Personal account', 'Sign out'])( + 'holds "%s" in place, aria-disabled and still focusable', + async label => { + await renderSwitcher({}, noOffers()); + const user = await openWithList(); + const before = screen.getByRole('button', { name: label }); + const touch = holdRequests('post', '/v1/client/sessions/:id/touch'); + + await openAccounts(user).then(menu => + user.click(within(menu).getByRole('menuitem', { name: 'bob@example.com' })), + ); + + const after = screen.getByRole('button', { name: label }); + expect(after).toBe(before); + expect(after).toHaveAttribute('aria-disabled', 'true'); + expect(after).toBeEnabled(); + + touch.release(); + await waitFor(() => expect(waiting()).toBe(false)); + }, + ); + + it('reports the switch on the row that owns it, and nothing on the rows beside it', async () => { + await renderSwitcher({}, noOffers()); + const user = await openWithList(); + const touch = holdRequests('post', '/v1/client/sessions/:id/touch'); + + await user.click(screen.getByRole('button', { name: 'Other' })); + + const busy = screen.getByRole('button', { name: 'Other' }); + expect(busy).toHaveAttribute('aria-busy', 'true'); + expect(within(busy).getByRole('progressbar')).toHaveAccessibleName('pending'); + const idle = screen.getByRole('button', { name: 'Personal account' }); + expect(idle).not.toHaveAttribute('aria-busy'); + expect(within(idle).queryByRole('progressbar')).toBeNull(); + expect(signOut()).toHaveAttribute('aria-disabled', 'true'); + + touch.release(); + await waitFor(() => expect(popup()).toBeNull()); + }); + + it('stands a custom action down but leaves a custom link followable', async () => { + const onClick = vi.fn(); + await renderSwitcher( + { + customMenuItems: [ + { id: 'terms', label: 'Terms of service', onClick }, + { id: 'support', label: 'Support', href: '/support' }, + ], + }, + noOffers(), + ); + const user = await openWithList(); + const touch = holdRequests('post', '/v1/client/sessions/:id/touch'); + + await user.click(screen.getByRole('button', { name: 'Other' })); + + const action = screen.getByRole('button', { name: 'Terms of service' }); + expect(action).toHaveAttribute('aria-disabled', 'true'); + await user.click(action); + expect(onClick).not.toHaveBeenCalled(); + expect(screen.getByRole('link', { name: 'Support' })).toHaveAttribute('href', '/support'); + + touch.release(); + await waitFor(() => expect(popup()).toBeNull()); + }); + }); + + describe('the trigger', () => { + it.each([ + [{ mode: 'combined' }, 'Acme'], + [{ mode: 'user' }, 'Alice Smith'], + ] as const)('with %o names %s beside the avatar', async (props, name) => { + await renderSwitcher(props); + + expect(within(trigger()).getByText(name)).toBeInTheDocument(); + expect(popup()).toBeNull(); + }); + + it('names the active organization alone, badged with the account, and opens as the account', async () => { + await renderSwitcher(); + + expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); + expect(trigger()).toHaveAttribute('data-variant', 'full'); + expect(within(trigger()).getByText('Acme')).toBeInTheDocument(); + expect(within(trigger()).queryByText('alice')).toBeNull(); + expect(within(trigger()).queryByText('Alice Smith')).toBeNull(); + expect(trigger().querySelector('.cl-user-button-avatar > [data-shape]')).toHaveAttribute('data-shape', 'square'); + expect(trigger().querySelector('.cl-user-button-avatar-badge > [data-shape]')).toHaveAttribute( + 'data-shape', + 'circle', + ); + }); + + it('drops the account badge from a condensed trigger', async () => { + await renderSwitcher({ triggerVariant: 'condensed' }); + + expect(trigger()).toHaveAttribute('data-variant', 'condensed'); + expect(within(trigger()).getByText('Acme')).toBeInTheDocument(); + expect(trigger().querySelector('.cl-user-button-avatar-badge')).toBeNull(); + }); + + it('leads a full trigger with the account alone when no organization is active', async () => { + await renderSwitcher({}, signedIn({ client: fapiClient([personalSession]) })); + + expect(trigger()).toHaveAttribute('data-variant', 'full'); + expect(within(trigger()).getByText('Alice Smith')).toBeInTheDocument(); + expect(trigger().querySelector('[data-shape]')).toHaveAttribute('data-shape', 'circle'); + expect(trigger().querySelector('.cl-user-button-avatar-badge')).toBeNull(); + }); + + it('keeps the condensed trigger in user mode', async () => { + const props: SwitcherProps = { mode: 'user' }; + Object.assign(props, { triggerVariant: 'full' }); + await renderSwitcher(props); + + expect(trigger()).toHaveAttribute('data-variant', 'condensed'); + }); + + it('leads the avatar alone with the organization, unbadged', async () => { + await renderSwitcher({ showTriggerLabel: false }); + + expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); + expect(trigger().querySelector('[data-shape]')).toHaveAttribute('data-shape', 'square'); + expect(trigger().querySelector('.cl-user-button-avatar-badge')).toBeNull(); + }); + + it('names no organization beneath the account in user mode', async () => { + await renderSwitcher({ mode: 'user' }); + + expect(within(trigger()).queryByText('Acme')).toBeNull(); + }); + + it('still names the account in user mode where personal is hidden and none is active', async () => { + const props: SwitcherProps = { mode: 'user' }; + Object.assign(props, { hidePersonal: true }); + await renderSwitcher(props, signedIn({ client: fapiClient([personalSession]) })); + + expect(within(trigger()).getByText('Alice Smith')).toBeInTheDocument(); + }); + + it('renders the avatar alone when the label is off', async () => { + await renderSwitcher({ mode: 'user', showTriggerLabel: false }); + + expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); + expect(within(trigger()).queryByText('Alice Smith')).toBeNull(); + }); + + it('names the active organization before its membership list has loaded', async () => { + serveFapi(signedIn()); + const memberships = holdRequests('get', '/v1/me/organization_memberships'); + await renderWithClerk(tree()); + + expect(within(trigger()).getByText('Acme')).toBeInTheDocument(); + await userEvent.setup().click(trigger()); + expect(within(requiredPopup()).getByRole('button', { name: 'Invite members' })).toBeInTheDocument(); + + memberships.release(); + await waitFor(() => expect(screen.queryByText('Loading organizations…')).toBeNull()); + }); + }); +}); + +describe('Switcher custom trigger badges', () => { + it.each([ + { mode: 'combined', seed: signedIn(), badge: 'organization:org_1', name: 'Acme' }, + { mode: 'user', seed: signedIn(), badge: 'user:user_1', name: 'Alice Smith' }, + { + mode: 'combined', + seed: signedIn({ client: fapiClient([personalSession]) }), + badge: 'user:user_1', + name: 'Alice Smith', + }, + ] as const)('shows a badge for the displayed identity as $badge', async ({ mode, seed, badge, name }) => { + await renderSwitcher( + { mode, triggerBadge: ({ kind, id }) => Promise.resolve({ id: 'pro', label: `${kind}:${id}` }) }, + seed, + ); + + await waitFor(() => expect(within(trigger()).getByText(badge)).toBeInTheDocument()); + expect(within(trigger()).getByText(badge).closest('.cl-badge')).toHaveAttribute('data-badge-id', 'pro'); + expect(within(trigger()).getByText(name)).toBeInTheDocument(); + expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); + await open(); + expect(within(requiredPopup()).queryByText(badge)).toBeNull(); + }); + + it('hides the badge while pending and for null without changing the name', async () => { + const badge = deferred<{ id: string; label: string } | null>(); + const triggerBadge = vi.fn(({ id }: { id: string }) => (id === 'org_1' ? badge.promise : Promise.resolve(null))); + const { clerk } = await renderSwitcher({ triggerBadge }); + + expect(trigger()).toHaveTextContent('Acme'); + expect(trigger()).not.toHaveTextContent('Pro plan'); + await act(() => badge.resolve({ id: 'pro', label: 'Pro plan' })); + await waitFor(() => expect(within(trigger()).getByText('Pro plan')).toBeInTheDocument()); + expect(within(trigger()).getByText('Acme')).toBeInTheDocument(); + + await act(() => clerk.setActive({ organization: 'org_9' })); + await waitFor(() => expect(triggerBadge).toHaveBeenCalledWith({ kind: 'organization', id: 'org_9' })); + expect(trigger()).not.toHaveTextContent('Pro plan'); + expect(within(trigger()).getByText('Other')).toBeInTheDocument(); + }); + + it('discards the previous workspace badge after switching organizations', async () => { + const first = deferred<{ id: string; label: string } | null>(); + const triggerBadge = vi.fn(async ({ id }: { id: string }) => + id === 'org_1' ? first.promise : { id: 'other', label: 'Other plan' }, + ); + const { clerk } = await renderSwitcher({ triggerBadge }); + await waitFor(() => expect(triggerBadge).toHaveBeenCalledWith({ kind: 'organization', id: 'org_1' })); + + await act(() => clerk.setActive({ organization: 'org_9' })); + await waitFor(() => expect(within(trigger()).getByText('Other plan')).toBeInTheDocument()); + await act(() => first.resolve({ id: 'previous', label: 'Previous plan' })); + expect(within(trigger()).getByText('Other')).toBeInTheDocument(); + expect(within(trigger()).getByText('Other plan').closest('.cl-badge')).toHaveAttribute('data-badge-id', 'other'); + expect(trigger()).not.toHaveTextContent('Previous plan'); + }); + + it('keeps the badge mounted when opened with an inline callback', async () => { + const calls = vi.fn(); + const inline = () => { + calls(); + return Promise.resolve({ id: 'enterprise', label: 'Enterprise plan' }); + }; + const { rerender } = await renderSwitcher({ triggerBadge: () => inline() }); + await waitFor(() => expect(within(trigger()).getByText('Enterprise plan')).toBeInTheDocument()); + + let dropped = false; + const observer = new MutationObserver(() => { + dropped ||= !trigger().textContent?.includes('Enterprise plan'); + }); + observer.observe(trigger(), { childList: true, subtree: true, characterData: true }); + onTestFinished(() => observer.disconnect()); + + await open(); + rerender(tree({ triggerBadge: () => inline() })); + expect(within(trigger()).getByText('Enterprise plan')).toBeInTheDocument(); + await act(() => Promise.resolve()); + + expect(dropped).toBe(false); + expect(calls).toHaveBeenCalledTimes(1); + }); + + it('hides the badge for false or on failure', async () => { + const triggerBadge = vi.fn(({ id }: { id: string }) => + id === 'org_1' + ? Promise.resolve({ id: 'pro', label: 'Pro plan' }) + : Promise.reject(new Error('Plan unavailable')), + ); + const { clerk, rerender } = await renderSwitcher({ triggerBadge }); + await waitFor(() => expect(within(trigger()).getByText('Pro plan')).toBeInTheDocument()); + + rerender(tree({ triggerBadge: false })); + expect(trigger()).not.toHaveTextContent('Pro plan'); + expect(within(trigger()).getByText('Acme')).toBeInTheDocument(); + + rerender(tree({ triggerBadge })); + await waitFor(() => expect(within(trigger()).getByText('Pro plan')).toBeInTheDocument()); + + await act(() => clerk.setActive({ organization: 'org_9' })); + await waitFor(() => expect(triggerBadge).toHaveBeenCalledWith({ kind: 'organization', id: 'org_9' })); + expect(trigger()).not.toHaveTextContent('Pro plan'); + expect(within(trigger()).getByText('Other')).toBeInTheDocument(); + }); + + it('does not request a badge when the trigger label is hidden', async () => { + const triggerBadge = vi.fn(() => Promise.resolve({ id: 'pro', label: 'Pro plan' })); + await renderSwitcher({ showTriggerLabel: false, triggerBadge }); + + expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); + expect(trigger()).not.toHaveTextContent('Acme'); + expect(trigger()).not.toHaveTextContent('Pro plan'); + expect(triggerBadge).not.toHaveBeenCalled(); + }); +}); diff --git a/packages/mosaic/src/features/user-button/__tests__/user-button.new-profiles.feature.test.tsx b/packages/mosaic/src/features/switcher/__tests__/switcher.new-profiles.feature.test.tsx similarity index 95% rename from packages/mosaic/src/features/user-button/__tests__/user-button.new-profiles.feature.test.tsx rename to packages/mosaic/src/features/switcher/__tests__/switcher.new-profiles.feature.test.tsx index b940498f204..c1f1664560b 100644 --- a/packages/mosaic/src/features/user-button/__tests__/user-button.new-profiles.feature.test.tsx +++ b/packages/mosaic/src/features/switcher/__tests__/switcher.new-profiles.feature.test.tsx @@ -19,8 +19,8 @@ import { renderWithClerk } from '../../../__tests__/feature/render'; import { PortalProvider } from '../../../primitives/portal'; import type { MosaicProfile } from '../../profile-pages/use-mosaic-profile'; import { signedIn as withConnectedAccounts } from '../../user-profile/user-profile-connected-accounts-section/__tests__/user-profile-connected-accounts.fixtures'; -import type { UserButtonProps } from '../user-button'; -import { UserButton } from '../user-button'; +import type { SwitcherProps } from '../switcher'; +import { Switcher } from '../switcher'; beforeAll(async () => { await import('../../user-profile/user-profile.modal-content'); @@ -62,10 +62,10 @@ function signedIn(overrides: FakeFapiSeed = {}): FakeFapiSeed { }; } -function tree(props: UserButtonProps = {}) { +function tree(props: SwitcherProps = {}) { return (
- +
); } @@ -96,11 +96,11 @@ function requiredPopup() { } const terms = { label: 'Terms', path: 'terms', content:

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, ) { @@ -200,7 +200,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..e54e63a3459 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 @@ -22,6 +22,7 @@ import { OrganizationSwitcher } from '../../organization-switcher/organization-s 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'] })]; @@ -113,7 +114,7 @@ describe('the profile the switchers open', () => { { 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(, profile); + await renderWithProfile(, profile); await clickSettings(buttonTrigger); @@ -122,7 +123,7 @@ describe('the profile the switchers open', () => { }); it('a combined button opens one profile straight from Settings', async () => { - await renderWithProfile(); + await renderWithProfile(); await clickSettings(buttonTrigger); @@ -131,7 +132,7 @@ describe('the profile the switchers open', () => { }); it('a combined button offers two targets over separate profiles', async () => { - await renderWithProfile(, separate); + await renderWithProfile(, separate); await chooseSetting(buttonTrigger, 'Manage organization'); @@ -158,8 +159,8 @@ describe('the profile the switchers open', () => { }); it.each([ - { name: 'a user-only button', button: }, - { name: 'a combined button', button: }, + { name: 'a user-only button', button: }, + { name: 'a combined button', button: }, ])('a switcher beside $name keeps its Settings row', async ({ button }) => { await renderWithProfile( <> @@ -175,7 +176,7 @@ describe('the profile the switchers open', () => { }); it('leaves the organization pages out of the combined profile on a personal account', async () => { - await renderWithProfile(, undefined, inPersonalAccount); + await renderWithProfile(, undefined, inPersonalAccount); await clickSettings(buttonTrigger); @@ -226,7 +227,7 @@ describe('the profile the switchers open', () => { }); it('routes the one profile with a URL, and opens the other as a modal', async () => { - const { navigate } = await renderWithProfile(, { userProfileUrl: '/account' }); + const { navigate } = await renderWithProfile(, { userProfileUrl: '/account' }); await chooseSetting(buttonTrigger, 'Manage profile'); expect(navigate).toHaveBeenCalledWith('/account'); @@ -256,7 +257,7 @@ describe('the profile the switchers open', () => { }); it.each([ - { name: 'the button', ui: , trigger: buttonTrigger }, + { name: 'the button', ui: , trigger: buttonTrigger }, { name: 'the switcher', ui: , trigger: switcherTrigger }, ])('applies the custom pages and order set on the provider when $name opens it', async ({ ui, trigger }) => { await renderWithProfile(ui, { @@ -271,7 +272,7 @@ describe('the profile the switchers open', () => { it("hands the provider's custom pages to Clerk's modals without newProfiles", async () => { const { clerk } = await renderWithProfile( - , + , { userProfileProps: { customPages: [terms] } }, inOrganization, {}, diff --git a/packages/mosaic/src/features/user-button/__tests__/user-button.visual.test.tsx b/packages/mosaic/src/features/switcher/__tests__/switcher.visual.test.tsx similarity index 77% rename from packages/mosaic/src/features/user-button/__tests__/user-button.visual.test.tsx rename to packages/mosaic/src/features/switcher/__tests__/switcher.visual.test.tsx index b1f7a3c4ced..065d2cd497b 100644 --- a/packages/mosaic/src/features/user-button/__tests__/user-button.visual.test.tsx +++ b/packages/mosaic/src/features/switcher/__tests__/switcher.visual.test.tsx @@ -3,9 +3,9 @@ import { describe, expect, it } from 'vitest'; import { fapiEmailAddress, fapiSession, fapiUser } from '../../../__tests__/feature/fapi'; import { renderWithClerk } from '../../../__tests__/feature/render'; import { openSwitcher, serveSwitcherFixture } from '../../switcher/__tests__/switcher.visual.fixtures'; -import { UserButton } from '../user-button'; +import { Switcher } from '../switcher'; -describe('UserButton visual state', () => { +describe('Switcher visual state', () => { it('shows the combined account and organization menu open', async () => { const bob = fapiUser({ id: 'user_bob', @@ -14,9 +14,9 @@ describe('UserButton visual state', () => { email_addresses: [fapiEmailAddress({ id: 'email_bob', email_address: 'bob@example.com' })], }); serveSwitcherFixture({ otherSessions: [fapiSession({ id: 'session_bob', user: bob })] }); - await renderWithClerk(); + await renderWithClerk(); const popup = await openSwitcher(/Open account menu/); - await expect(popup).toMatchScreenshot('user-button-combined-open'); + await expect(popup).toMatchScreenshot('switcher-combined-open'); }); }); diff --git a/packages/mosaic/src/features/switcher/switcher.model.tsx b/packages/mosaic/src/features/switcher/switcher.model.tsx index a3a114e41a5..e5695b73340 100644 --- a/packages/mosaic/src/features/switcher/switcher.model.tsx +++ b/packages/mosaic/src/features/switcher/switcher.model.tsx @@ -70,8 +70,9 @@ type CreateOrganizationMode = createOrganizationMode?: 'modal'; }; -export type SwitcherModelOptions = OrganizationSwitcherModelOptions & - Pick; +export type SwitcherModelOptions = OrganizationSwitcherModelOptions & UserSwitcherModelOptions; + +export type UserSwitcherModelOptions = Pick; export type OrganizationSwitcherModelOptions = CreateOrganizationMode & Pick< diff --git a/packages/mosaic/src/features/switcher/switcher.test-d.tsx b/packages/mosaic/src/features/switcher/switcher.test-d.tsx new file mode 100644 index 00000000000..462683aff55 --- /dev/null +++ b/packages/mosaic/src/features/switcher/switcher.test-d.tsx @@ -0,0 +1,98 @@ +import { describe, test } from 'vitest'; + +import { OrganizationSwitcher } from '../organization-switcher/organization-switcher'; +import { UserButton } from '../user-button/user-button'; +import { Switcher } from './switcher'; + +describe('Switcher props', () => { + test('takes every option in combined mode, with or without the mode', () => { + void ( + + ); + void ( + + ); + }); + + test('takes account options in user mode and rejects the rest', () => { + void ( + + ); + // @ts-expect-error the trigger variant only applies to the combined menu + void ( + + ); + // @ts-expect-error a user menu lists no organizations + void ( + + ); + // @ts-expect-error a user menu lists no organizations + void ( + + ); + }); + + test('takes organization options in organization mode and rejects the rest', () => { + void ( + + ); + // @ts-expect-error the trigger variant only applies to the combined menu + void ( + + ); + // @ts-expect-error an organization menu lists no accounts + void ( + + ); + }); +}); + +describe('UserButton and OrganizationSwitcher props', () => { + test('match their Switcher mode and take no mode of their own', () => { + void (); + // @ts-expect-error a user menu lists no organizations + void (); + // @ts-expect-error the trigger variant only applies to the combined menu + void (); + // @ts-expect-error the mode is fixed + void (); + + void (); + // @ts-expect-error an organization menu lists no accounts + void (); + // @ts-expect-error the mode is fixed + void (); + }); +}); diff --git a/packages/mosaic/src/features/switcher/switcher.tsx b/packages/mosaic/src/features/switcher/switcher.tsx index 0190e871ee3..8ddee652616 100644 --- a/packages/mosaic/src/features/switcher/switcher.tsx +++ b/packages/mosaic/src/features/switcher/switcher.tsx @@ -4,15 +4,18 @@ import type { ReactElement, ReactNode } from 'react'; import { useMosaicProfile } from '../profile-pages/use-mosaic-profile'; import { useSwitcherController } from './switcher.controller'; -import type { SwitcherModelOptions } from './switcher.model'; +import type { + OrganizationSwitcherModelOptions, + SwitcherModelOptions, + UserSwitcherModelOptions, +} from './switcher.model'; import { useSwitcherModel } from './switcher.model'; import { useCustomPages, useOrganizationProfilePages, useUserProfilePages } from './switcher.pages'; -import type { SwitcherMenuProps, SwitcherMode } from './switcher.types'; +import type { SwitcherMenuProps } from './switcher.types'; import type { SwitcherTriggerProps, SwitcherTriggerVariant } from './switcher.view'; import { SwitcherView } from './switcher.view'; -export type SwitcherProps = SwitcherModelOptions & - SwitcherTriggerProps & +type SwitcherBaseProps = SwitcherTriggerProps & SwitcherMenuProps & { /** * Fallback while loading. @@ -23,11 +26,110 @@ export type SwitcherProps = SwitcherModelOptions & fallback?: ReactNode; }; -export function Switcher( - props: SwitcherProps & { mode: SwitcherMode; triggerVariant?: SwitcherTriggerVariant }, -): ReactElement | null { - const { showTriggerLabel, triggerBadge, triggerVariant, mode, customMenuItems, menuItemOrder, fallback, ...options } = - props; +/** Everything `` takes in `combined` mode. */ +export type CombinedSwitcherProps = SwitcherBaseProps & + SwitcherModelOptions & { + /** + * How much the labelled trigger carries: `full` badges the active organization with the account at a + * larger size, `condensed` shows the lead's avatar alone. + * + * @default 'full' + */ + triggerVariant?: SwitcherTriggerVariant; + }; + +/** Everything ``, or ``, takes. */ +export type UserButtonProps = SwitcherBaseProps & UserSwitcherModelOptions; + +/** Everything ``, or ``, takes. */ +export type OrganizationSwitcherProps = SwitcherBaseProps & OrganizationSwitcherModelOptions; + +/** + * What the menu lists, and the options that apply to it. `combined` lists accounts and organizations, + * `user` lists accounts alone and never an organization, even when one is active, and `organization` + * lists organizations and the personal account. The profile's shape is set by `MosaicProvider`'s + * `profile`. + */ +export type SwitcherProps = + | ({ mode?: 'combined' } & CombinedSwitcherProps) + | ({ mode: 'user' } & UserButtonProps) + | ({ mode: 'organization' } & OrganizationSwitcherProps); + +/** + * The signed-in user's avatar, and the menu behind it: switch organization, switch or add an account, + * open the profile, and sign out. `mode` narrows the menu to accounts or to organizations. It reads the + * active session and organization from Clerk, so it takes no data. It renders `fallback` until Clerk + * answers, and nothing at all when nobody is signed in. + * + * Each action is a request: the row you click spins, the others stand down, and the menu stays open on + * the result. Only an action that navigates closes it. + * + * @example + * ```tsx + * import { Switcher } from '@clerk/mosaic'; + * + * + * ``` + * + * @example + * `mode` narrows the menu. `` and `` are the same as + * `mode='user'` and `mode='organization'`. + * ```tsx + * + * + * ``` + * + * @example + * `triggerVariant` trades the badged trigger for the lead's avatar alone. It applies to the combined + * menu only; the other modes always show the avatar alone. + * ```tsx + * + * ``` + * + * @example + * `afterSelectOrganizationUrl` is where switching organization lands, and takes a `:param` template, + * a plain path, or a function. `afterSwitchSessionUrl` is where switching account lands. Set + * `userProfileUrl` and `organizationProfileUrl` on `MosaicProvider`'s `profile` to route Settings to + * pages of your own. + * ```tsx + * + * ``` + * + * @example + * `fallback` holds the space while Clerk is still answering. Size it to the trigger to keep the row + * it sits in from moving. Nothing stands in once the answer is that nobody is signed in. + * ```tsx + * } /> + * ``` + * + * @example + * `customMenuItems` adds your own rows beside Settings, each one either an `onClick` action or an + * `href` link. The profile's own pages are set on `MosaicProvider`'s `profile`. + * ```tsx + * , href: 'https://example.com/docs' }, + * { id: 'support', label: 'Contact support', icon: , onClick: () => openSupportChat() }, + * ]} + * menuItemOrder={['docs', 'support', 'settings', 'inviteMembers']} + * /> + * ``` + */ +export function Switcher(props: SwitcherProps = {}): ReactElement | null { + const { + showTriggerLabel, + triggerBadge, + mode = 'combined', + customMenuItems, + menuItemOrder, + fallback, + ...options + } = props; + const triggerVariant = + props.mode === 'user' || props.mode === 'organization' ? 'condensed' : (props.triggerVariant ?? 'full'); const profile = useMosaicProfile(); const { userProfileProps, organizationProfileProps } = profile; // The portals must outlive the popover, so custom pages are bridged here rather than inside it. diff --git a/packages/mosaic/src/features/user-button/__tests__/user-button.feature.test.tsx b/packages/mosaic/src/features/user-button/__tests__/user-button.feature.test.tsx index b20f5cc8723..76ba5f956aa 100644 --- a/packages/mosaic/src/features/user-button/__tests__/user-button.feature.test.tsx +++ b/packages/mosaic/src/features/user-button/__tests__/user-button.feature.test.tsx @@ -1,43 +1,33 @@ -import type { CustomPage, UserJSON, Web3WalletJSON } from '@clerk/shared/types'; -import { act, screen, waitFor, within } from '@testing-library/react'; +import { screen, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { describe, expect, it, onTestFinished, vi } from 'vitest'; +import { describe, expect, it } from 'vitest'; -import { deferred } from '../../../__tests__/async'; -import { type FakeFapiSeed, holdRequests, serveFapi } from '../../../__tests__/feature/fake-fapi'; +import { serveFapi } from '../../../__tests__/feature/fake-fapi'; import { fapiClient, fapiEmailAddress, - fapiEnvironment, fapiInvitation, fapiMembership, fapiOrganization, - fapiPhoneNumber, fapiSession, fapiSuggestion, fapiUser, } from '../../../__tests__/feature/fapi'; import { openMenu } from '../../../__tests__/feature/menu'; import { renderWithClerk } from '../../../__tests__/feature/render'; -import { PortalProvider } from '../../../primitives/portal'; -import type { MosaicProfile } from '../../profile-pages/use-mosaic-profile'; -import type { UserButtonProps } from '../user-button'; +import type { UserButtonProps } from '../../switcher/switcher'; import { UserButton } from '../user-button'; -const acme = fapiOrganization({ id: 'org_1', name: 'Acme', members_count: 3 }); +const acme = fapiOrganization({ id: 'org_1', name: 'Acme' }); const other = fapiOrganization({ id: 'org_9', name: 'Other' }); -const beta = fapiOrganization({ id: 'org_2', name: 'Beta' }); -const gamma = fapiOrganization({ id: 'org_3', name: 'Gamma' }); - -const aliceMemberships = [fapiMembership(acme, { permissions: ['org:sys_memberships:manage'] }), fapiMembership(other)]; +const memberships = [fapiMembership(acme), fapiMembership(other)]; const alice = fapiUser({ id: 'user_1', first_name: 'Alice', last_name: 'Smith', - username: 'alice', email_addresses: [fapiEmailAddress({ id: 'idn_alice', email_address: 'alice@example.com' })], - organization_memberships: aliceMemberships, + organization_memberships: memberships, }); const bob = fapiUser({ @@ -47,1508 +37,44 @@ const bob = fapiUser({ email_addresses: [fapiEmailAddress({ id: 'idn_bob', email_address: 'bob@example.com' })], }); -const aliceSession = fapiSession({ id: 'sess_1', user: alice, last_active_organization_id: 'org_1' }); -const bobSession = fapiSession({ id: 'sess_2', user: bob }); - -function signedIn(overrides: FakeFapiSeed = {}): FakeFapiSeed { - return { - client: fapiClient([aliceSession, bobSession]), - memberships: aliceMemberships, - invitations: [fapiInvitation('inv_1', gamma)], - suggestions: [fapiSuggestion('sug_1', beta)], - ...overrides, - }; -} - -function tree(props: UserButtonProps = {}) { - return ( -
- -
- ); -} - -function renderUserButton(props: UserButtonProps = {}, seed: FakeFapiSeed = signedIn(), profile?: MosaicProfile) { - const fapi = serveFapi(seed); - return renderWithClerk(tree(props), undefined, undefined, undefined, profile).then(view => ({ ...view, fapi })); -} - -type User = ReturnType; - -const host = () => screen.getByTestId('host'); -const trigger = () => screen.getByRole('button', { name: /Open account menu/ }); -const popup = () => screen.queryByRole('dialog', { name: 'Account' }); -const waiting = () => - Array.from(popup()?.querySelectorAll('button') ?? []).some(button => button.getAttribute('aria-disabled') === 'true'); -const signOut = () => within(requiredPopup()).getByRole('button', { name: 'Sign out' }); - -async function open() { +async function renderUserButton(props: UserButtonProps = {}) { + serveFapi({ + client: fapiClient([ + fapiSession({ id: 'sess_1', user: alice, last_active_organization_id: 'org_1' }), + fapiSession({ id: 'sess_2', user: bob }), + ]), + memberships, + invitations: [fapiInvitation('inv_1', fapiOrganization({ id: 'org_3', name: 'Gamma' }))], + suggestions: [fapiSuggestion('sug_1', fapiOrganization({ id: 'org_2', name: 'Beta' }))], + }); + await renderWithClerk(); + const trigger = screen.getByRole('button', { name: 'Open account menu for Alice Smith' }); const user = userEvent.setup(); - await user.click(trigger()); - expect(popup()).toBeInTheDocument(); - return user; -} - -async function openSettings(user: User, label: string) { - await openMenu(user, within(requiredPopup()).getByRole('button', { name: 'Settings' })); - await user.click(screen.getByRole('menuitem', { name: label })); -} - -async function openAccounts(user: User) { - return openMenu(user, screen.getByRole('button', { name: 'Switch account' })); -} - -function requiredPopup() { - const surface = popup(); - if (!surface) { - throw new Error('expected the popover to be open'); - } - return surface; -} - -const reading = (...names: string[]) => - within(requiredPopup()) - .queryAllByText(new RegExp(`^(${names.join('|')})$`)) - .filter(node => !node.closest('.cl-user-button-header')) - .map(node => node.textContent); - -const current = () => - Array.from(requiredPopup().querySelectorAll('[aria-current="true"]')).map(node => node.textContent); - -const alone = () => signedIn({ client: fapiClient([aliceSession]) }); - -const noOffers = (overrides = {}) => signedIn({ invitations: [], suggestions: [], ...overrides }); - -const personalSession = fapiSession({ id: 'sess_1', user: alice }); - -const terms = { label: 'Terms', path: 'terms', content:

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: Loading }, - 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({tree()}); - const openUserProfile = vi.spyOn(clerk, 'openUserProfile').mockImplementation(() => {}); - const user = await open(); - - await openSettings(user, 'Manage profile'); - - expect(openUserProfile.mock.calls[0]?.[0]?.getContainer?.()).toBe(container); - }); - - it('runs a custom menu item and closes', async () => { - const onClick = vi.fn(); - await renderUserButton({ customMenuItems: [{ id: 'terms', label: 'Terms of service', onClick }] }); - const user = await open(); - - await user.click(screen.getByRole('button', { name: 'Terms of service' })); - - expect(onClick).toHaveBeenCalledTimes(1); - await waitFor(() => expect(popup()).toBeNull()); - }); - - it('renders a custom page into the element the opened profile hands back', async () => { - const { clerk } = await renderUserButton({}, undefined, { - userProfileProps: { customPages: [{ label: 'Terms', path: 'terms', content:

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({tree()}); - const openCreateOrganization = vi.spyOn(clerk, 'openCreateOrganization').mockImplementation(() => {}); - const user = await open(); - - await user.click(await screen.findByRole('button', { name: 'Add organization' })); - - expect(openCreateOrganization.mock.calls[0]?.[0]?.getContainer?.()).toBe(container); - }); - - it('navigates to create an organization when a URL routes it', async () => { - const { clerk, navigate } = await renderUserButton({ createOrganizationUrl: '/new-org' }); - const openCreateOrganization = vi.spyOn(clerk, 'openCreateOrganization').mockImplementation(() => {}); - const user = await open(); - - await user.click(await screen.findByRole('button', { name: 'Add organization' })); - - expect(navigate).toHaveBeenCalledWith('/new-org'); - expect(openCreateOrganization).not.toHaveBeenCalled(); - await waitFor(() => expect(popup()).toBeNull()); - }); - - it('navigates to manage the account when a URL routes it', async () => { - const { clerk, navigate } = await renderUserButton({}, undefined, { userProfileUrl: '/account' }); - const openUserProfile = vi.spyOn(clerk, 'openUserProfile').mockImplementation(() => {}); - const user = await open(); - - await openSettings(user, 'Manage profile'); - - expect(navigate).toHaveBeenCalledWith('/account'); - expect(openUserProfile).not.toHaveBeenCalled(); - }); - - it('navigates to manage the organization when a URL routes it', async () => { - const { clerk, navigate } = await renderUserButton({}, undefined, { organizationProfileUrl: '/org' }); - const openOrganizationProfile = vi.spyOn(clerk, 'openOrganizationProfile').mockImplementation(() => {}); - const user = await open(); - - await openSettings(user, 'Manage organization'); - - expect(navigate).toHaveBeenCalledWith('/org'); - expect(openOrganizationProfile).not.toHaveBeenCalled(); - }); - - it('sends add-account to the sign-in page', async () => { - const { navigate } = await renderUserButton({ signInUrl: '/sign-in' }); - const user = await open(); - - const menu = await openAccounts(user); - await user.click(within(menu).getByRole('menuitem', { name: 'Add account' })); - - await waitFor(() => expect(navigate).toHaveBeenCalledWith('/sign-in')); - }); - - it('sends a switched account with a pending task to finish it', async () => { - const pendingBob = fapiSession({ ...bobSession, status: 'pending', tasks: [{ key: 'choose-organization' }] }); - const { navigate } = await renderUserButton( - { signInUrl: '/sign-in' }, - signedIn({ client: fapiClient([aliceSession, pendingBob]) }), - ); - 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('/sign-in#/tasks/choose-organization')); - }); - - it('leaves create-organization out for a user who cannot create one', async () => { - const restricted = fapiUser({ ...alice, create_organization_enabled: false }); - await renderUserButton( - {}, - signedIn({ client: fapiClient([fapiSession({ ...aliceSession, user: restricted }), bobSession]) }), - ); - await open(); - - expect(await screen.findByRole('button', { name: 'Other' })).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: 'Add organization' })).toBeNull(); - }); - }); - - describe('while an action is in flight', () => { - it('spins the clicked row and stands every other one down', async () => { - await renderUserButton(); - const user = await open(); - await screen.findByRole('button', { name: 'Other' }); - const touch = holdRequests('post', '/v1/client/sessions/:id/touch'); - - await user.click(screen.getByRole('button', { name: 'Other' })); - - expect(waiting()).toBe(true); - expect(signOut()).toHaveAttribute('aria-disabled', 'true'); - expect(screen.getByRole('button', { name: 'Switch account' })).toHaveAttribute('aria-disabled', 'true'); - expect(screen.getByRole('button', { name: 'Settings' })).toHaveAttribute('aria-disabled', 'true'); - expect(screen.getByRole('button', { name: 'Invite members' })).toHaveAttribute('aria-disabled', 'true'); - expect(popup()).toBeInTheDocument(); - - touch.release(); - await waitFor(() => expect(popup()).toBeNull()); - }); - - it('holds the surface on the organization it started with while Clerk navigates after a switch', async () => { - const { navigate } = await renderUserButton({ - afterSelectOrganizationUrl: '/org/:id', - fallback: Loading, - }); - let arrive: () => void = () => {}; - navigate.mockImplementationOnce( - () => - new Promise(resolve => { - arrive = resolve; - }), - ); - const user = await open(); - - await user.click(await screen.findByRole('button', { name: 'Other' })); - await waitFor(() => expect(navigate).toHaveBeenCalledWith('/org/org_9')); - - expect(screen.queryByTestId('fallback')).toBeNull(); - expect(current()).toEqual([expect.stringContaining('Acme')]); - - act(() => arrive()); - await waitFor(() => expect(popup()).toBeNull()); - }); - - it('stays open, clears busy state and logs the failure when the switch fails', async () => { - const log = vi.spyOn(console, 'error').mockImplementation(() => {}); - await renderUserButton(); - const user = await open(); - await screen.findByRole('button', { name: 'Other' }); - const touch = holdRequests('post', '/v1/client/sessions/:id/touch'); - - await user.click(screen.getByRole('button', { name: 'Other' })); - expect(waiting()).toBe(true); - - touch.fail('session_touch_failed'); - - await waitFor(() => expect(waiting()).toBe(false)); - expect(popup()).toBeInTheDocument(); - expect(signOut()).toBeEnabled(); - expect(log).toHaveBeenCalledWith( - '[Clerk] User button action failed', - expect.objectContaining({ errors: [expect.objectContaining({ code: 'session_touch_failed' })] }), - ); - }); - - it('still shows the action when reopened before it settles, and starts no second one', async () => { - await renderUserButton(); - await open(); - await screen.findByRole('button', { name: 'Other' }); - const touch = holdRequests('post', '/v1/client/sessions/:id/touch'); - vi.useFakeTimers({ shouldAdvanceTime: true }); - - try { - const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime }); - const menu = await openAccounts(user); - await user.click(within(menu).getByRole('menuitem', { name: 'bob@example.com' })); - expect(waiting()).toBe(true); - await waitFor(() => expect(touch.requests).toHaveLength(1)); - - await user.click(trigger()); - await waitFor(() => expect(popup()).toBeNull()); - - await act(() => vi.advanceTimersByTimeAsync(400)); - await user.click(trigger()); - - expect(popup()).toBeInTheDocument(); - expect(waiting()).toBe(true); - - await user.click(screen.getByRole('button', { name: 'Other' })); - expect(touch.requests).toHaveLength(1); - - touch.release(); - await waitFor(() => expect(waiting()).toBe(false)); - } finally { - vi.useRealTimers(); - } - expect(popup()).toBeInTheDocument(); - }); - - it('closes on success even if the popover was dismissed and reopened meanwhile', async () => { - await renderUserButton(); - const user = await open(); - await screen.findByRole('button', { name: 'Other' }); - const touch = holdRequests('post', '/v1/client/sessions/:id/touch'); - - await user.click(screen.getByRole('button', { name: 'Other' })); - await user.click(trigger()); - await waitFor(() => expect(popup()).toBeNull()); - - await user.click(trigger()); - expect(waiting()).toBe(true); - - touch.release(); - await waitFor(() => expect(popup()).toBeNull()); - }); - - it('reopens ready to use after an action that closed it', async () => { - await renderUserButton(); - const user = await open(); - - await user.click(await screen.findByRole('button', { name: 'Other' })); - await waitFor(() => expect(popup()).toBeNull()); - - await user.click(trigger()); - - expect(waiting()).toBe(false); - expect(signOut()).toBeEnabled(); - }); - }); - - it('loads the next page of organizations when the end of the list scrolls into view', async () => { - const many = Array.from({ length: 15 }, (_, i) => fapiOrganization({ id: `org_p${i + 1}`, name: `Org ${i + 1}` })); - await renderUserButton({}, signedIn({ memberships: [fapiMembership(acme), ...many.map(o => fapiMembership(o))] })); - await open(); - - const last = await screen.findByRole('button', { name: 'Org 9' }); - last.scrollIntoView(); - - expect(await screen.findByRole('button', { name: 'Org 15' })).toBeInTheDocument(); - }); - - it('loads the next page of invitations when the end of the list scrolls into view', async () => { - const many = Array.from({ length: 15 }, (_, i) => - fapiInvitation(`inv_p${i + 1}`, fapiOrganization({ id: `org_i${i + 1}`, name: `Invited ${i + 1}` })), - ); - await renderUserButton({}, noOffers({ invitations: many })); - await open(); - - const last = await screen.findByText('Invited 10'); - last.scrollIntoView(); - - expect(await screen.findByText('Invited 15')).toBeInTheDocument(); - }); - - it('lists the active organization where its page puts it, and lists it once', async () => { - const many = Array.from({ length: 15 }, (_, i) => fapiOrganization({ id: `org_p${i + 1}`, name: `Org ${i + 1}` })); - await renderUserButton({}, signedIn({ memberships: [...many.map(o => fapiMembership(o)), fapiMembership(acme)] })); - await open(); - - const last = await screen.findByRole('button', { name: 'Org 9' }); - expect(reading('Acme', 'Personal account', 'Org 1')).toEqual(['Personal account', 'Org 1']); - - last.scrollIntoView(); - await screen.findByRole('button', { name: 'Org 15' }); - - expect(reading('Acme', 'Personal account', 'Org 15')).toEqual(['Personal account', 'Org 15', 'Acme']); - }); - - describe('in user mode', () => { - it('heads the surface with the account, never the active organization', async () => { - await renderUserButton({ combined: false }); - await open(); - - expect(within(requiredPopup()).getByText('Alice Smith')).toBeInTheDocument(); - expect(within(requiredPopup()).getByText('alice')).toBeInTheDocument(); - expect(within(requiredPopup()).queryByText('Acme')).toBeNull(); - }); - - it('drops the identifier line when it would only repeat the name', async () => { - const nameless = fapiUser({ ...alice, first_name: null, last_name: null }); - await renderUserButton( - { combined: false }, - signedIn({ client: fapiClient([fapiSession({ ...aliceSession, user: nameless }), bobSession]) }), - ); - await open(); - - expect(within(requiredPopup()).getAllByText('alice')).toHaveLength(1); - }); - - it('lists no organizations and offers no way to make one', async () => { - await renderUserButton({ combined: false }); - await open(); - - expect(screen.queryByText('Personal account')).toBeNull(); - expect(screen.queryByText('Gamma')).toBeNull(); - expect(screen.queryByRole('button', { name: 'Add organization' })).toBeNull(); - }); - - it('manages the account from its settings row, and signs out at the foot', async () => { - const { clerk } = await renderUserButton({ combined: false }); - const openUserProfile = vi.spyOn(clerk, 'openUserProfile').mockImplementation(() => {}); - const user = await open(); - - expect( - within(requiredPopup().querySelector('.cl-user-button-header') ?? requiredPopup()).queryAllByRole('button'), - ).toEqual([]); - expect(reading('Settings', 'Switch account', 'Sign out')).toEqual(['Settings', 'Switch account', 'Sign out']); - expect(screen.queryByRole('button', { name: 'Invite members' })).toBeNull(); - - await user.click(screen.getByRole('button', { name: 'Settings' })); - expect(screen.queryByRole('menu')).toBeNull(); - expect(openUserProfile).toHaveBeenCalled(); - }); - - it('lists every account in the flyout, then the way to add one, then signing out of them all', async () => { - await renderUserButton({ combined: false }); - const user = await open(); - - const items = within(await openAccounts(user)).getAllByRole('menuitem'); - - expect(items).toHaveLength(4); - expect(items[0]).toHaveAccessibleName('alice'); - expect(items[1]).toHaveAccessibleName('bob@example.com'); - expect(items[2]).toHaveAccessibleName('Add account'); - expect(items[3]).toHaveAccessibleName('Sign out of all accounts'); - }); - }); - - describe('in combined mode', () => { - it('stands in for a mode it does not take', async () => { - const props: UserButtonProps = {}; - Object.assign(props, { mode: 'organization' }); - await renderUserButton(props); - - expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); - expect(document.querySelector('.cl-user-button-trigger')).not.toBeNull(); - }); - - it('heads the surface with the active organization, badged with the account, managing both', async () => { - const { clerk } = await renderUserButton(); - const openOrganizationProfile = vi.spyOn(clerk, 'openOrganizationProfile').mockImplementation(() => {}); - - expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); - const user = await open(); - - const header = requiredPopup().querySelector('.cl-user-button-header'); - expect(header?.querySelector('.cl-user-button-header-title')).toHaveTextContent('Acme'); - expect(header?.querySelector('.cl-user-button-header-description')).toHaveTextContent('alice'); - expect(header?.querySelector('.cl-user-button-avatar > [data-shape]')).toHaveAttribute('data-shape', 'square'); - expect(header?.querySelector('.cl-user-button-avatar-badge > [data-shape]')).toHaveAttribute( - 'data-shape', - 'circle', - ); - expect(within(header ?? requiredPopup()).queryAllByRole('button')).toEqual([]); - expect(reading('Add organization', 'Settings', 'Invite members', 'Switch account', 'Sign out')).toEqual([ - 'Add organization', - 'Settings', - 'Invite members', - 'Switch account', - 'Sign out', - ]); - await openSettings(user, 'Manage organization'); - expect(openOrganizationProfile).toHaveBeenCalled(); - }); - - it('keeps the identifier beneath the organization even when it is all that names the account', async () => { - const nameless = fapiUser({ ...alice, first_name: null, last_name: null }); - await renderUserButton({}, signedIn({ client: fapiClient([fapiSession({ ...aliceSession, user: nameless })]) })); - - expect(trigger()).toHaveAccessibleName('Open account menu for alice'); - await open(); - - expect(requiredPopup().querySelector('.cl-user-button-header-title')).toHaveTextContent('Acme'); - expect(requiredPopup().querySelector('.cl-user-button-header-description')).toHaveTextContent('alice'); - }); - - it('trails the foot with sign-out, behind the flyout of accounts', async () => { - await renderUserButton(); - await open(); - - expect(reading('Switch account', 'Add account', 'Sign out', 'Sign out of all accounts')).toEqual([ - 'Switch account', - 'Sign out', - ]); - }); - - it('trails the organizations with create-organization', async () => { - await renderUserButton({}, noOffers()); - await openWithList(); - - expect(reading('Personal account', 'Acme', 'Other', 'Add organization').at(-1)).toBe('Add organization'); - }); - - it('marks the account it is already on in the flyout', async () => { - await renderUserButton(); - const user = await open(); - - const menu = await openAccounts(user); - - expect(within(menu).getByRole('menuitem', { name: 'alice' })).toHaveAttribute('aria-current', 'true'); - expect(within(menu).getByRole('menuitem', { name: 'bob@example.com' })).not.toHaveAttribute('aria-current'); - expect(within(menu).getByRole('menuitem', { name: 'Add account' })).toBeInTheDocument(); - expect(within(menu).getByRole('menuitem', { name: 'Sign out of all accounts' })).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: 'Add account' })).toBeNull(); - }); - - it('takes add-account at the foot where there is no second account', async () => { - await renderUserButton({}, alone()); - await open(); - - expect(screen.queryByRole('button', { name: 'Switch account' })).toBeNull(); - expect(screen.queryByRole('button', { name: 'Sign out of all accounts' })).toBeNull(); - expect(reading('Switch account', 'Add account', 'Sign out of all accounts')).toEqual(['Add account']); - }); - - it('heads an account with no organizations with the account alone', async () => { - const loner = fapiUser({ ...alice, organization_memberships: [] }); - await renderUserButton( - {}, - noOffers({ memberships: [], client: fapiClient([fapiSession({ id: 'sess_1', user: loner }), bobSession]) }), - ); - await open(); - - expect(within(requiredPopup()).getByText('Alice Smith')).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'Settings' })).toBeInTheDocument(); - expect(screen.queryByText('Personal account')).toBeNull(); - }); - }); - - describe('naming the account', () => { - const phone = fapiPhoneNumber({ id: 'idn_phone', phone_number: '+15550100' }); - const wallet: Web3WalletJSON = { - object: 'web3_wallet', - id: 'idn_wallet', - web3_wallet: '0xabc', - verification: null, - }; - const noEmail = { username: null, email_addresses: [], primary_email_address_id: null }; - - const signedInAs = (overrides: Partial) => - signedIn({ client: fapiClient([fapiSession({ id: 'sess_1', user: fapiUser({ ...alice, ...overrides }) })]) }); - - it.each([ - ['first and last name', {}, 'Alice Smith'], - ['username', { first_name: null, last_name: null }, 'alice'], - ['email address', { first_name: null, last_name: null, username: null }, 'alice@example.com'], - ])('names it by its %s', async (_source, overrides, name) => { - await renderUserButton({ combined: false }, signedInAs(overrides)); - - expect(trigger()).toHaveAccessibleName(`Open account menu for ${name}`); - }); - - it.each([ - ['username', {}, 'alice'], - ['email address', { username: null }, 'alice@example.com'], - ['phone number', { ...noEmail, phone_numbers: [phone], primary_phone_number_id: 'idn_phone' }, '+15550100'], - ['web3 wallet', { ...noEmail, web3_wallets: [wallet], primary_web3_wallet_id: 'idn_wallet' }, '0xabc'], - ])('identifies it by its %s', async (_source, overrides, identifier) => { - await renderUserButton({}, signedInAs(overrides)); - await open(); - - expect(within(requiredPopup()).getByText(identifier)).toBeInTheDocument(); - }); - }); - - describe('the organization list', () => { - it('lists the organizations held in the order they come, then the invitations, then the suggestions', async () => { - await renderUserButton({}, signedIn({ memberships: [fapiMembership(other), fapiMembership(acme)] })); - await openWithList(); - - expect(reading('Gamma', 'Beta', 'Personal account', 'Acme', 'Other')).toEqual([ - 'Personal account', - 'Other', - 'Acme', - 'Gamma', - 'Beta', - ]); - }); - - it('names the active organization as the current one', async () => { - await renderUserButton(); - await openWithList(); - - expect(current()).toEqual([expect.stringContaining('Acme')]); - }); - - it('checks the personal account, and offers no switch to it, where it is active', async () => { - await renderUserButton({}, signedIn({ client: fapiClient([personalSession, bobSession]) })); - await openWithList(); - - expect(current()).toEqual([expect.stringContaining('Personal account')]); - expect(screen.queryByRole('button', { name: 'Personal account' })).toBeNull(); - }); - - it('describes each offer by the organization it acts on', async () => { - await renderUserButton(); - await openWithList(); - - expect(screen.getByRole('button', { name: 'Accept' })).toHaveAccessibleDescription('Gamma'); - expect(screen.getByRole('button', { name: 'Join' })).toHaveAccessibleDescription('Beta'); - }); - - it('lists an invitation for an account that holds nothing else', async () => { - const loner = fapiUser({ ...alice, organization_memberships: [] }); - await renderUserButton( - {}, - signedIn({ - memberships: [], - suggestions: [], - client: fapiClient([fapiSession({ id: 'sess_1', user: loner })]), - }), - ); - await open(); - - expect(await screen.findByRole('button', { name: 'Accept' })).toBeInTheDocument(); - expect(reading('Gamma', 'Personal account')).toEqual(['Personal account', 'Gamma']); - }); - - it('reports an accepted suggestion instead of offering to join it again', async () => { - await renderUserButton({}, noOffers({ suggestions: [fapiSuggestion('sug_1', beta, { status: 'accepted' })] })); - await openWithList(); - - expect(screen.queryByRole('button', { name: 'Join' })).toBeNull(); - expect(reading('Beta', 'Requested')).toEqual(['Beta', 'Requested']); - }); - - it('lists an accepted invitation once, as an organization to switch to', async () => { - await renderUserButton({}, noOffers({ invitations: [fapiInvitation('inv_1', gamma)] })); - const user = await openWithList(); - - await user.click(screen.getByRole('button', { name: 'Accept' })); - - expect(await screen.findByRole('button', { name: 'Gamma' })).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: 'Accept' })).toBeNull(); - expect(reading('Gamma')).toEqual(['Gamma']); - }); - - it('holds every row behind one placeholder until the first page lands', async () => { - serveFapi(signedIn()); - const invitations = holdRequests('get', '/v1/me/organization_invitations'); - await renderWithClerk(tree()); - await open(); - - expect(await screen.findByText('Loading organizations…')).toBeInTheDocument(); - expect(reading('Personal account', 'Other')).toEqual([]); - expect(requiredPopup().querySelector('.cl-user-button-header-title')).toHaveTextContent('Acme'); - - invitations.release(); - await waitFor(() => expect(screen.queryByText('Loading organizations…')).toBeNull()); - expect(reading('Personal account', 'Other')).toEqual(['Personal account', 'Other']); - }); - }); - - describe('the custom rows', () => { - const terms = { id: 'terms', label: 'Terms of service', onClick: () => {} }; - const support = { id: 'support', label: 'Support', href: '/support' }; - const group = (name: string) => - screen.getByRole(name === 'Support' ? 'link' : 'button', { name }).closest('.cl-user-button-group'); - - it('follow Settings and Invite members in their group, above the foot', async () => { - await renderUserButton({ customMenuItems: [terms, support] }); - await open(); - - expect( - reading('Settings', 'Invite members', 'Terms of service', 'Support', 'Switch account', 'Sign out'), - ).toEqual(['Settings', 'Invite members', 'Terms of service', 'Support', 'Switch account', 'Sign out']); - expect(group('Terms of service')).toBe(group('Settings')); - expect(group('Switch account')).not.toBe(group('Settings')); - expect(screen.getByRole('link', { name: 'Support' })).toHaveAttribute('href', '/support'); - }); - - it('renders the icon a custom row brings', async () => { - await renderUserButton({ customMenuItems: [{ ...terms, icon: }] }); - await open(); - - expect(screen.getByTestId('glyph')).toBeInTheDocument(); - }); - - it('orders the group by the ids it is given, leaving the foot as it is', async () => { - await renderUserButton({ - customMenuItems: [terms, support], - menuItemOrder: ['support', 'inviteMembers', 'signOut', 'nonsense'], - }); - await open(); - - expect( - reading('Settings', 'Invite members', 'Terms of service', 'Support', 'Switch account', 'Sign out'), - ).toEqual(['Support', 'Invite members', 'Settings', 'Terms of service', 'Switch account', 'Sign out']); - }); - - it('replaces the built-in row whose id one takes, in its place', async () => { - const appSettings = { id: 'settings', label: 'App settings', onClick: () => {} }; - await renderUserButton({ customMenuItems: [terms, appSettings] }); - await open(); - - expect(reading('Settings', 'App settings', 'Invite members', 'Terms of service')).toEqual([ - 'App settings', - 'Invite members', - 'Terms of service', - ]); - }); - - it('keeps a row whose id names a built-in the mode does not show', async () => { - const invite = { id: 'inviteMembers', label: 'Invite teammates', onClick: () => {} }; - await renderUserButton({ customMenuItems: [invite] }, signedIn({ client: fapiClient([personalSession]) })); - await open(); - - expect(reading('Settings', 'Invite teammates')).toEqual(['Settings', 'Invite teammates']); - }); - - it('places a replacing row by the id it took', async () => { - const appSettings = { id: 'settings', label: 'App settings', onClick: () => {} }; - await renderUserButton({ customMenuItems: [terms, appSettings], menuItemOrder: ['terms', 'inviteMembers'] }); - await open(); - - expect(reading('App settings', 'Invite members', 'Terms of service')).toEqual([ - 'Terms of service', - 'Invite members', - 'App settings', - ]); - }); - - it('signs the popup with Clerk where the instance is branded', async () => { - await renderUserButton({}, signedIn({ environment: fapiEnvironment({ display_config: { branded: true } }) })); - await open(); - - expect(within(requiredPopup()).getByRole('link', { name: 'Clerk' })).toBeInTheDocument(); - }); - - it('carries no mark where the instance is unbranded', async () => { - await renderUserButton(); - await open(); - - expect(within(requiredPopup()).queryByRole('link', { name: 'Clerk' })).toBeNull(); - }); - }); - - describe('while an action is in flight, beside the busy row', () => { - it.each(['Other', 'Personal account', 'Sign out'])( - 'holds "%s" in place, aria-disabled and still focusable', - async label => { - await renderUserButton({}, noOffers()); - const user = await openWithList(); - const before = screen.getByRole('button', { name: label }); - const touch = holdRequests('post', '/v1/client/sessions/:id/touch'); - - await openAccounts(user).then(menu => - user.click(within(menu).getByRole('menuitem', { name: 'bob@example.com' })), - ); - - const after = screen.getByRole('button', { name: label }); - expect(after).toBe(before); - expect(after).toHaveAttribute('aria-disabled', 'true'); - expect(after).toBeEnabled(); - - touch.release(); - await waitFor(() => expect(waiting()).toBe(false)); - }, - ); - - it('reports the switch on the row that owns it, and nothing on the rows beside it', async () => { - await renderUserButton({}, noOffers()); - const user = await openWithList(); - const touch = holdRequests('post', '/v1/client/sessions/:id/touch'); - - await user.click(screen.getByRole('button', { name: 'Other' })); - - const busy = screen.getByRole('button', { name: 'Other' }); - expect(busy).toHaveAttribute('aria-busy', 'true'); - expect(within(busy).getByRole('progressbar')).toHaveAccessibleName('pending'); - const idle = screen.getByRole('button', { name: 'Personal account' }); - expect(idle).not.toHaveAttribute('aria-busy'); - expect(within(idle).queryByRole('progressbar')).toBeNull(); - expect(signOut()).toHaveAttribute('aria-disabled', 'true'); - - touch.release(); - await waitFor(() => expect(popup()).toBeNull()); - }); - - it('stands a custom action down but leaves a custom link followable', async () => { - const onClick = vi.fn(); - await renderUserButton( - { - customMenuItems: [ - { id: 'terms', label: 'Terms of service', onClick }, - { id: 'support', label: 'Support', href: '/support' }, - ], - }, - noOffers(), - ); - const user = await openWithList(); - const touch = holdRequests('post', '/v1/client/sessions/:id/touch'); - - await user.click(screen.getByRole('button', { name: 'Other' })); - - const action = screen.getByRole('button', { name: 'Terms of service' }); - expect(action).toHaveAttribute('aria-disabled', 'true'); - await user.click(action); - expect(onClick).not.toHaveBeenCalled(); - expect(screen.getByRole('link', { name: 'Support' })).toHaveAttribute('href', '/support'); - - touch.release(); - await waitFor(() => expect(popup()).toBeNull()); - }); - }); - - describe('the trigger', () => { - it.each([ - [{ combined: true }, 'Acme'], - [{ combined: false }, 'Alice Smith'], - ])('with %o names %s beside the avatar', async (props, name) => { - await renderUserButton(props); - - expect(within(trigger()).getByText(name)).toBeInTheDocument(); - expect(popup()).toBeNull(); - }); - - it('names the active organization alone, badged with the account, and opens as the account', async () => { - await renderUserButton(); - - expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); - expect(trigger()).toHaveAttribute('data-variant', 'full'); - expect(within(trigger()).getByText('Acme')).toBeInTheDocument(); - expect(within(trigger()).queryByText('alice')).toBeNull(); - expect(within(trigger()).queryByText('Alice Smith')).toBeNull(); - expect(trigger().querySelector('.cl-user-button-avatar > [data-shape]')).toHaveAttribute('data-shape', 'square'); - expect(trigger().querySelector('.cl-user-button-avatar-badge > [data-shape]')).toHaveAttribute( - 'data-shape', - 'circle', - ); - }); - - it('drops the account badge from a condensed trigger', async () => { - await renderUserButton({ triggerVariant: 'condensed' }); - - expect(trigger()).toHaveAttribute('data-variant', 'condensed'); - expect(within(trigger()).getByText('Acme')).toBeInTheDocument(); - expect(trigger().querySelector('.cl-user-button-avatar-badge')).toBeNull(); - }); - - it('leads a full trigger with the account alone when no organization is active', async () => { - await renderUserButton({}, signedIn({ client: fapiClient([personalSession]) })); - - expect(trigger()).toHaveAttribute('data-variant', 'full'); - expect(within(trigger()).getByText('Alice Smith')).toBeInTheDocument(); - expect(trigger().querySelector('[data-shape]')).toHaveAttribute('data-shape', 'circle'); - expect(trigger().querySelector('.cl-user-button-avatar-badge')).toBeNull(); - }); - - it('keeps the condensed trigger in user mode', async () => { - await renderUserButton({ combined: false, triggerVariant: 'full' }); - - expect(trigger()).toHaveAttribute('data-variant', 'condensed'); - }); - - it('leads the avatar alone with the organization, unbadged', async () => { - await renderUserButton({ showTriggerLabel: false }); - - expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); - expect(trigger().querySelector('[data-shape]')).toHaveAttribute('data-shape', 'square'); - expect(trigger().querySelector('.cl-user-button-avatar-badge')).toBeNull(); - }); - - it('names no organization beneath the account in user mode', async () => { - await renderUserButton({ combined: false }); - - expect(within(trigger()).queryByText('Acme')).toBeNull(); - }); - - it('still names the account in user mode where personal is hidden and none is active', async () => { - await renderUserButton( - { combined: false, hidePersonal: true }, - signedIn({ client: fapiClient([personalSession]) }), - ); - - expect(within(trigger()).getByText('Alice Smith')).toBeInTheDocument(); - }); - - it('renders the avatar alone when the label is off', async () => { - await renderUserButton({ combined: false, showTriggerLabel: false }); - - expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); - expect(within(trigger()).queryByText('Alice Smith')).toBeNull(); - }); - - it('names the active organization before its membership list has loaded', async () => { - serveFapi(signedIn()); - const memberships = holdRequests('get', '/v1/me/organization_memberships'); - await renderWithClerk(tree()); - - expect(within(trigger()).getByText('Acme')).toBeInTheDocument(); - await userEvent.setup().click(trigger()); - expect(within(requiredPopup()).getByRole('button', { name: 'Invite members' })).toBeInTheDocument(); - - memberships.release(); - await waitFor(() => expect(screen.queryByText('Loading organizations…')).toBeNull()); - }); - }); -}); - -describe('UserButton custom trigger badges', () => { - it.each([ - { combined: true, seed: signedIn(), badge: 'organization:org_1', name: 'Acme' }, - { combined: false, seed: signedIn(), badge: 'user:user_1', name: 'Alice Smith' }, - { - combined: true, - seed: signedIn({ client: fapiClient([personalSession]) }), - badge: 'user:user_1', - name: 'Alice Smith', - }, - ])('shows a badge for the displayed identity as $badge', async ({ combined, seed, badge, name }) => { - await renderUserButton( - { combined, triggerBadge: ({ kind, id }) => Promise.resolve({ id: 'pro', label: `${kind}:${id}` }) }, - seed, - ); - - await waitFor(() => expect(within(trigger()).getByText(badge)).toBeInTheDocument()); - expect(within(trigger()).getByText(badge).closest('.cl-badge')).toHaveAttribute('data-badge-id', 'pro'); - expect(within(trigger()).getByText(name)).toBeInTheDocument(); - expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); - await open(); - expect(within(requiredPopup()).queryByText(badge)).toBeNull(); - }); - - it('hides the badge while pending and for null without changing the name', async () => { - const badge = deferred<{ id: string; label: string } | null>(); - const triggerBadge = vi.fn(({ id }: { id: string }) => (id === 'org_1' ? badge.promise : Promise.resolve(null))); - const { clerk } = await renderUserButton({ triggerBadge }); - - expect(trigger()).toHaveTextContent('Acme'); - expect(trigger()).not.toHaveTextContent('Pro plan'); - await act(() => badge.resolve({ id: 'pro', label: 'Pro plan' })); - await waitFor(() => expect(within(trigger()).getByText('Pro plan')).toBeInTheDocument()); - expect(within(trigger()).getByText('Acme')).toBeInTheDocument(); - - await act(() => clerk.setActive({ organization: 'org_9' })); - await waitFor(() => expect(triggerBadge).toHaveBeenCalledWith({ kind: 'organization', id: 'org_9' })); - expect(trigger()).not.toHaveTextContent('Pro plan'); - expect(within(trigger()).getByText('Other')).toBeInTheDocument(); - }); - - it('discards the previous workspace badge after switching organizations', async () => { - const first = deferred<{ id: string; label: string } | null>(); - const triggerBadge = vi.fn(async ({ id }: { id: string }) => - id === 'org_1' ? first.promise : { id: 'other', label: 'Other plan' }, - ); - const { clerk } = await renderUserButton({ triggerBadge }); - await waitFor(() => expect(triggerBadge).toHaveBeenCalledWith({ kind: 'organization', id: 'org_1' })); - - await act(() => clerk.setActive({ organization: 'org_9' })); - await waitFor(() => expect(within(trigger()).getByText('Other plan')).toBeInTheDocument()); - await act(() => first.resolve({ id: 'previous', label: 'Previous plan' })); - expect(within(trigger()).getByText('Other')).toBeInTheDocument(); - expect(within(trigger()).getByText('Other plan').closest('.cl-badge')).toHaveAttribute('data-badge-id', 'other'); - expect(trigger()).not.toHaveTextContent('Previous plan'); - }); - - it('keeps the badge mounted when opened with an inline callback', async () => { - const calls = vi.fn(); - const inline = () => { - calls(); - return Promise.resolve({ id: 'enterprise', label: 'Enterprise plan' }); - }; - const { rerender } = await renderUserButton({ triggerBadge: () => inline() }); - await waitFor(() => expect(within(trigger()).getByText('Enterprise plan')).toBeInTheDocument()); - - let dropped = false; - const observer = new MutationObserver(() => { - dropped ||= !trigger().textContent?.includes('Enterprise plan'); - }); - observer.observe(trigger(), { childList: true, subtree: true, characterData: true }); - onTestFinished(() => observer.disconnect()); - - await open(); - rerender(tree({ triggerBadge: () => inline() })); - expect(within(trigger()).getByText('Enterprise plan')).toBeInTheDocument(); - await act(() => Promise.resolve()); - - expect(dropped).toBe(false); - expect(calls).toHaveBeenCalledTimes(1); - }); - - it('hides the badge for false or on failure', async () => { - const triggerBadge = vi.fn(({ id }: { id: string }) => - id === 'org_1' - ? Promise.resolve({ id: 'pro', label: 'Pro plan' }) - : Promise.reject(new Error('Plan unavailable')), - ); - const { clerk, rerender } = await renderUserButton({ triggerBadge }); - await waitFor(() => expect(within(trigger()).getByText('Pro plan')).toBeInTheDocument()); - - rerender(tree({ triggerBadge: false })); - expect(trigger()).not.toHaveTextContent('Pro plan'); - expect(within(trigger()).getByText('Acme')).toBeInTheDocument(); + it('lists accounts and no organizations, even when one is active', async () => { + const { trigger, user, popup } = await renderUserButton(); - rerender(tree({ triggerBadge })); - await waitFor(() => expect(within(trigger()).getByText('Pro plan')).toBeInTheDocument()); + expect(within(trigger).queryByText('Acme')).toBeNull(); + for (const name of ['Acme', 'Other', 'Beta', 'Gamma', 'Personal account']) { + expect(within(popup).queryByText(name)).toBeNull(); + } + expect(within(popup).queryByRole('button', { name: 'Invite members' })).toBeNull(); - await act(() => clerk.setActive({ organization: 'org_9' })); - await waitFor(() => expect(triggerBadge).toHaveBeenCalledWith({ kind: 'organization', id: 'org_9' })); - expect(trigger()).not.toHaveTextContent('Pro plan'); - expect(within(trigger()).getByText('Other')).toBeInTheDocument(); + const menu = await openMenu(user, within(popup).getByRole('button', { name: 'Switch account' })); + expect(within(menu).getByRole('menuitem', { name: 'bob@example.com' })).toBeInTheDocument(); }); - it('does not request a badge when the trigger label is hidden', async () => { - const triggerBadge = vi.fn(() => Promise.resolve({ id: 'pro', label: 'Pro plan' })); - await renderUserButton({ showTriggerLabel: false, triggerBadge }); + it('stays an account menu when handed a mode it does not take', async () => { + const props: UserButtonProps = {}; + Object.assign(props, { mode: 'combined' }); + const { trigger, popup } = await renderUserButton(props); - expect(trigger()).toHaveAccessibleName('Open account menu for Alice Smith'); - expect(trigger()).not.toHaveTextContent('Acme'); - expect(trigger()).not.toHaveTextContent('Pro plan'); - expect(triggerBadge).not.toHaveBeenCalled(); + expect(trigger).toHaveAttribute('data-variant', 'condensed'); + expect(within(trigger).queryByText('Acme')).toBeNull(); + expect(within(popup).queryByRole('button', { name: 'Invite members' })).toBeNull(); }); }); diff --git a/packages/mosaic/src/features/user-button/user-button.tsx b/packages/mosaic/src/features/user-button/user-button.tsx index a547c08fa09..72bd4c3dbf9 100644 --- a/packages/mosaic/src/features/user-button/user-button.tsx +++ b/packages/mosaic/src/features/user-button/user-button.tsx @@ -2,97 +2,26 @@ import type { ReactElement } from 'react'; -import type { SwitcherProps } from '../switcher/switcher'; +import type { UserButtonProps } from '../switcher/switcher'; import { Switcher } from '../switcher/switcher'; -import type { SwitcherTriggerVariant } from '../switcher/switcher.view'; - -/** What the menu lists, and how much its trigger carries. */ -export interface UserButtonMenuProps { - /** - * Whether the menu lists organizations beside accounts. `false` lists accounts alone, and never shows - * an organization, even when one is active. The profile's shape is set by `MosaicProvider`'s `profile`. - * - * @default true - */ - combined?: boolean; - /** - * How much the labelled trigger carries when `combined`: `full` badges the active organization with - * the account at a larger size, `condensed` shows the lead's avatar alone. Otherwise it is always - * `condensed`. - * - * @default 'full' - */ - triggerVariant?: SwitcherTriggerVariant; -} - -/** Everything `` takes: trigger content, and the app's own menu rows. */ -export type UserButtonProps = SwitcherProps & UserButtonMenuProps; /** - * The signed-in user's avatar, and the menu behind it: switch organization, switch or add an account, - * open the profile, and sign out. It reads the active session and organization from Clerk, so it takes - * no data. It renders `fallback` until Clerk answers, and nothing at all when nobody is signed in. - * - * Each action is a request: the row you click spins, the others stand down, and the menu stays open on - * the result. Only an action that navigates closes it. + * The signed-in user's avatar, and the account menu behind it: switch or add an account, open the + * profile, and sign out. It never lists an organization, even when one is active. It is + * ``; use `` for accounts and organizations in one menu. * * @example * ```tsx * import { UserButton } from '@clerk/mosaic'; * - * - * ``` - * - * @example - * `combined={false}` narrows the menu to the account switcher. - * ```tsx - * - * ``` - * - * @example - * `triggerVariant` trades the badged trigger for the lead's avatar alone. - * ```tsx - * - * ``` - * - * @example - * `afterSelectOrganizationUrl` is where switching organization lands, and takes a `:param` template, - * a plain path, or a function. `afterSwitchSessionUrl` is where switching account lands. Set - * `userProfileUrl` and `organizationProfileUrl` on `MosaicProvider`'s `profile` to route Settings to - * pages of your own. - * ```tsx - * - * ``` - * - * @example - * `fallback` holds the space while Clerk is still answering. Size it to the trigger to keep the row - * it sits in from moving. Nothing stands in once the answer is that nobody is signed in. - * ```tsx - * } /> - * ``` - * - * @example - * `customMenuItems` adds your own rows beside Settings, each one either an `onClick` action or an - * `href` link. The profile's own pages are set on `MosaicProvider`'s `profile`. - * ```tsx - * , href: 'https://example.com/docs' }, - * { id: 'support', label: 'Contact support', icon: , onClick: () => openSupportChat() }, - * ]} - * menuItemOrder={['docs', 'support', 'settings', 'inviteMembers']} - * /> + * * ``` */ -export function UserButton({ combined = true, triggerVariant = 'full', ...props }: UserButtonProps = {}): ReactElement { +export function UserButton(props: UserButtonProps = {}): ReactElement { return ( ); } diff --git a/packages/mosaic/src/index.ts b/packages/mosaic/src/index.ts index a64f3111ea2..ed6c2cfc002 100644 --- a/packages/mosaic/src/index.ts +++ b/packages/mosaic/src/index.ts @@ -1,10 +1,15 @@ 'use client'; -export type { UserButtonProps } from './features/user-button/user-button'; +export type { + CombinedSwitcherProps, + OrganizationSwitcherProps, + SwitcherProps, + UserButtonProps, +} from './features/switcher/switcher'; +export { Switcher } from './features/switcher/switcher'; export { UserButton } from './features/user-button/user-button'; export type { UserAvatarProps } from './features/user-avatar/user-avatar'; export { UserAvatar } from './features/user-avatar/user-avatar'; -export type { OrganizationSwitcherProps } from './features/organization-switcher/organization-switcher'; export { OrganizationSwitcher } from './features/organization-switcher/organization-switcher'; export type { OrganizationProfileProps } from './features/organization-profile/organization-profile'; export { OrganizationProfile } from './features/organization-profile/organization-profile'; diff --git a/packages/mosaic/src/styles/index.ts b/packages/mosaic/src/styles/index.ts index c5b03f9c371..c65e4f48847 100644 --- a/packages/mosaic/src/styles/index.ts +++ b/packages/mosaic/src/styles/index.ts @@ -185,6 +185,7 @@ export type { export { CreateOrganization } from '../features/create-organization/create-organization'; export { OrganizationList } from '../features/organization-list/organization-list'; export { OrganizationSwitcher } from '../features/organization-switcher/organization-switcher'; +export { Switcher } from '../features/switcher/switcher'; export { TaskChooseOrganization } from '../features/task-choose-organization/task-choose-organization'; export { TaskSetupMFA } from '../features/task-setup-mfa/task-setup-mfa'; export { UserButton } from '../features/user-button/user-button'; diff --git a/packages/swingset/src/app/(clerk)/layout.tsx b/packages/swingset/src/app/(clerk)/layout.tsx index 45f75b113bd..34f8651f19c 100644 --- a/packages/swingset/src/app/(clerk)/layout.tsx +++ b/packages/swingset/src/app/(clerk)/layout.tsx @@ -7,7 +7,7 @@ import { Separator } from '@/components/ui/separator'; import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'; import { LiveSidebar } from './live-sidebar'; -import { LiveUserButton } from './live-user-button'; +import { LiveSwitcher } from './live-switcher'; function LiveChrome({ children, userButton }: { children: ReactNode; userButton?: ReactNode }) { return ( @@ -70,7 +70,7 @@ export default function ClerkLayout({ children }: { children: ReactNode }) { signUpFallbackRedirectUrl='/live' afterSignOutUrl='/live' > - }>{children} + }>{children} ); } diff --git a/packages/swingset/src/app/(clerk)/live-switcher.tsx b/packages/swingset/src/app/(clerk)/live-switcher.tsx new file mode 100644 index 00000000000..321b34b2f68 --- /dev/null +++ b/packages/swingset/src/app/(clerk)/live-switcher.tsx @@ -0,0 +1,12 @@ +'use client'; + +import { Switcher } from '@clerk/mosaic/features/switcher/switcher'; +import { MosaicProvider } from '@clerk/mosaic/mosaic-provider'; + +export function LiveSwitcher() { + return ( + + + + ); +} diff --git a/packages/swingset/src/app/(clerk)/live-user-button.tsx b/packages/swingset/src/app/(clerk)/live-user-button.tsx deleted file mode 100644 index ca8deb98b9c..00000000000 --- a/packages/swingset/src/app/(clerk)/live-user-button.tsx +++ /dev/null @@ -1,12 +0,0 @@ -'use client'; - -import { UserButton } from '@clerk/mosaic/features/user-button/user-button'; -import { MosaicProvider } from '@clerk/mosaic/mosaic-provider'; - -export function LiveUserButton() { - return ( - - - - ); -} diff --git a/packages/swingset/src/app/(clerk)/live/user-button/user-button/page.tsx b/packages/swingset/src/app/(clerk)/live/switcher/switcher/page.tsx similarity index 69% rename from packages/swingset/src/app/(clerk)/live/user-button/user-button/page.tsx rename to packages/swingset/src/app/(clerk)/live/switcher/switcher/page.tsx index b3321f42f96..ede2ebc54f9 100644 --- a/packages/swingset/src/app/(clerk)/live/user-button/user-button/page.tsx +++ b/packages/swingset/src/app/(clerk)/live/switcher/switcher/page.tsx @@ -1,20 +1,21 @@ 'use client'; -import { UserButton } from '@clerk/mosaic/features/user-button/user-button'; +import { Switcher } from '@clerk/mosaic/features/switcher/switcher'; import { MosaicProvider } from '@clerk/mosaic/mosaic-provider'; import { useUser } from '@clerk/nextjs'; import Link from 'next/link'; -export default function UserButtonLivePage() { +export default function SwitcherLivePage() { const { isLoaded, isSignedIn } = useUser(); return (
-

User button

+

Switcher

- 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.

{isLoaded && !isSignedIn ? ( @@ -29,8 +30,9 @@ export default function UserButtonLivePage() {

) : null}
- - + + +
diff --git a/packages/swingset/src/components/Composition.tsx b/packages/swingset/src/components/Composition.tsx index cb93cf6dee3..dd6011cb889 100644 --- a/packages/swingset/src/components/Composition.tsx +++ b/packages/swingset/src/components/Composition.tsx @@ -7,14 +7,14 @@ export interface CompositionPiece { name: string; /** Route to the piece's page in swingset (e.g. `/components/button`). */ href: string; - /** Which Mosaic layer the piece lives in (e.g. `User Button`, `Components`, `Primitives`). */ + /** Which Mosaic layer the piece lives in (e.g. `Switcher`, `Components`, `Primitives`). */ layer: string; } // Mosaic layers, high → low. Drives the order the composition groups render in. // Matches the sidebar group names. const LAYER_ORDER = [ - 'User Button', + 'Switcher', 'User Profile', 'Organization Profile', 'Misc', diff --git a/packages/swingset/src/components/DocsViewer.tsx b/packages/swingset/src/components/DocsViewer.tsx index 674dd120af6..185eb4aba2e 100644 --- a/packages/swingset/src/components/DocsViewer.tsx +++ b/packages/swingset/src/components/DocsViewer.tsx @@ -9,8 +9,8 @@ import { PlaygroundProvider } from './PlaygroundContext'; // MDX docs keyed by `group` slug → `component` slug. Group-aware so identically-named // entries (the headless `Dialog` primitive vs. the styled `Dialog` component) stay distinct. const docModules: Record> = { - 'user-button': { - 'user-button': dynamic(() => import('../stories/user-button.mdx')), + switcher: { + switcher: dynamic(() => import('../stories/switcher.mdx')), }, 'user-profile': { 'user-profile': dynamic(() => import('../stories/user-profile.mdx')), @@ -53,6 +53,7 @@ const docModules: Record> = { }, misc: { 'mosaic-provider': dynamic(() => import('../stories/mosaic-provider.mdx')), + 'user-button': dynamic(() => import('../stories/user-button.mdx')), 'organization-switcher': dynamic(() => import('../stories/organization-switcher.mdx')), 'create-organization': dynamic(() => import('../stories/create-organization.mdx')), 'organization-list': dynamic(() => import('../stories/organization-list.mdx')), diff --git a/packages/swingset/src/lib/live-navigation.ts b/packages/swingset/src/lib/live-navigation.ts index f551d0e8951..a89ca7e92b6 100644 --- a/packages/swingset/src/lib/live-navigation.ts +++ b/packages/swingset/src/lib/live-navigation.ts @@ -48,7 +48,7 @@ const livePages = new Set([ '/misc/sign-in-with-metamask-button', '/misc/sign-up-button', '/misc/sign-out-button', - '/user-button/user-button', + '/switcher/switcher', ]); const inventoriedGroups = new Set(['User Profile', 'Organization Profile']); diff --git a/packages/swingset/src/lib/registry.ts b/packages/swingset/src/lib/registry.ts index 2c05aa64f75..6bf90ed8e1a 100644 --- a/packages/swingset/src/lib/registry.ts +++ b/packages/swingset/src/lib/registry.ts @@ -398,6 +398,7 @@ import { States as SwitchStates, WithField as SwitchWithField, } from '../stories/switch.stories'; +import { Combined as SwitcherCombined, meta as switcherMeta } from '../stories/switcher.stories'; import { meta as tablePrimitiveMeta } from '../stories/table.primitive.stories'; import { Default as TableDefault, @@ -458,11 +459,7 @@ import { Shapes as UserAvatarShapes, Sizes as UserAvatarSizes, } from '../stories/user-avatar.stories'; -import { - Combined as UserButtonCombined, - meta as userButtonMeta, - User as UserButtonUser, -} from '../stories/user-button.stories'; +import { Default as UserButtonDefault, meta as userButtonMeta } from '../stories/user-button.stories'; import { Default as UserProfileDefault, meta as userProfileMeta, @@ -811,10 +808,14 @@ const itemModule: StoryModule = { Group: ItemGroup, }; +const switcherModule: StoryModule = { + meta: switcherMeta, + Combined: SwitcherCombined, +}; + const userButtonModule: StoryModule = { meta: userButtonMeta, - Combined: UserButtonCombined, - User: UserButtonUser, + Default: UserButtonDefault, }; const taskSetupMfaModule: StoryModule = { @@ -1277,8 +1278,8 @@ const organizationProfileMembersPanelModule: StoryModule = { }; export const registry: StoryModule[] = [ - // User Button - userButtonModule, + // Switcher + switcherModule, // User Profile userProfileModule, // User Profile · Panels @@ -1312,6 +1313,7 @@ export const registry: StoryModule[] = [ organizationProfileDangerSectionModule, // Misc { meta: mosaicProviderMeta }, + userButtonModule, organizationSwitcherModule, createOrganizationModule, organizationListModule, diff --git a/packages/swingset/src/stories/mosaic-provider.mdx b/packages/swingset/src/stories/mosaic-provider.mdx index 2e0ef5bbb75..2d62e1e6840 100644 --- a/packages/swingset/src/stories/mosaic-provider.mdx +++ b/packages/swingset/src/stories/mosaic-provider.mdx @@ -9,10 +9,10 @@ components open. Wrap the part of your app that uses Mosaic. Every prop is optional. ```tsx -import { MosaicProvider, UserButton } from '@clerk/mosaic'; +import { Switcher, MosaicProvider } from '@clerk/mosaic'; - + ; ``` @@ -29,13 +29,13 @@ import { MosaicProvider, UserButton } from '@clerk/mosaic'; ## Experimental -| Option | Type | Default | Description | -| ------------- | --------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- | -| `newProfiles` | `boolean` | `false` | `UserButton` and `OrganizationSwitcher` open Mosaic's own `UserProfile` and `OrganizationProfile` instead of Clerk's modals. | +| Option | Type | Default | Description | +| ------------- | --------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| `newProfiles` | `boolean` | `false` | `Switcher`, `UserButton` and `OrganizationSwitcher` open Mosaic's own `UserProfile` and `OrganizationProfile` instead of Clerk's modals. | ## Profile -`profile` configures the profile that `UserButton`, `OrganizationSwitcher`, `UserProfile` and +`profile` configures the profile that `Switcher`, `UserButton`, `OrganizationSwitcher`, `UserProfile` and `OrganizationProfile` share. `UserProfile` and `OrganizationProfile` use it for any prop they don't set themselves. @@ -50,14 +50,14 @@ themselves. }} > - + ``` -`combined` on `MosaicProvider` decides what the profile shows, and `combined` on `UserButton` decides what -its menu lists. +`combined` on `MosaicProvider` decides what the profile shows, and the button you pick (`Switcher`, +`UserButton` or `OrganizationSwitcher`) decides what its menu lists. -`profile.combined` takes effect only with `experimental.newProfiles`. Without it, `UserButton` and +`profile.combined` takes effect only with `experimental.newProfiles`. Without it, `Switcher`, `UserButton` and `OrganizationSwitcher` open Clerk's modals. | Option | Type | Default | Description | diff --git a/packages/swingset/src/stories/organization-switcher.mdx b/packages/swingset/src/stories/organization-switcher.mdx index 452d2872665..ce7bd6a2f19 100644 --- a/packages/swingset/src/stories/organization-switcher.mdx +++ b/packages/swingset/src/stories/organization-switcher.mdx @@ -5,12 +5,13 @@ import * as OrganizationSwitcherStories from './organization-switcher.stories'; The organization switcher on its own. The active organization heads the surface. The account's organizations sit under it: every one it belongs to, plus **suggested** and **invited** ones it can Join, with **Add organization** at their foot. **Settings** and **Invite members** follow them. There are no account rows; -for those, use `UserButton`. +for those, use `UserButton` or `Switcher`. It is ``, and +takes the same props minus the account options and `triggerVariant`. It renders nothing while Clerk loads, when nobody is signed in, and when the instance has organizations turned off. -It shares its view with `UserButton`, so the parts, loading state, and behavior are the same. Only the +It shares its view with [`Switcher`](/switcher/switcher), so the parts, loading state, and behavior are the same. Only the surface differs: its own `.cl-organization-switcher-*` classes and its own `organizationSwitcher` localization namespace. @@ -35,7 +36,7 @@ The avatar and name of the active organization. Where none is active, the accoun `showTriggerLabel={false}` leaves the avatar alone. -`triggerBadge` also supports supplying an async function to determine the badge shown alongside the trigger. The function receives an object with `kind` and `id`, and returns an object with `id` and `label`, or `null` to hide the badge. See the [UserButton trigger example](./user-button#trigger). +`triggerBadge` also supports supplying an async function to determine the badge shown alongside the trigger. The function receives an object with `kind` and `id`, and returns an object with `id` and `label`, or `null` to hide the badge. See the [Switcher trigger example](/switcher/switcher#trigger). + +## Usage + +`SwitcherView` renders trigger and popup from one prop-driven call: + +```tsx +import { SwitcherView } from '@clerk/mosaic/features/switcher/switcher.view'; + + setActive({ organization })} + onSwitchSession={session => setActive({ session })} + onSignOutAll={() => signOut()} +/> +``` + +To drop the popup into your own trigger, compose the parts. Data and callbacks live on +`SwitcherRoot`; the leaves read them from context: + +```tsx +import { + SwitcherRoot, + SwitcherTrigger, + SwitcherPopup, +} from '@clerk/mosaic/features/switcher/switcher.view'; + + + + + +``` + +Exports are flat (not `Switcher.Trigger`) so each part declares its own `'use client'` boundary. + +## Trigger + +The avatar and name of whatever leads the popup. With an organization active in `combined`, the +trigger leads with the organization, badged with the account. + +`triggerVariant='condensed'` makes the trigger smaller and drops the account's badge. It applies to +`combined` only; the other modes are always condensed. + + + +`showTriggerLabel={false}` leaves the avatar alone. A user's avatar on its own rounds the trigger +fully to match it; see [UserButton](/misc/user-button). + + + +`triggerBadge={false}` keeps the name. The badge is part of the label, so it needs both. + + + +`triggerBadge` also supports supplying an async function to determine the badge shown alongside the trigger. The function receives an object with `kind` and `id`, and returns an object with `id` and `label`, or `null` to hide the badge. The returned `label` is used as the text content of the label while the returned `id` is embedded into a `data-badge-id` attribute that can then be used to target specific badge types (such as with CSS). + +```tsx + { + const plan = await (kind === "organization" ? getOrganizationPlan(id) : getUserPlan(id)); + if (plan) { + return { id: plan.key, label: plan.name }; + } + + return null; + }} +/> +``` + + + +## Header + +The header names whatever leads, and carries no actions of its own. An organization is described by +its plan and member count. An account is described by its identifier, and so is an organization the +account badges. + +What you can do about the lead sits in its own group, under the organizations: **Settings**, plus +**Invite members** where an organization leads. With an organization active in `combined`, +**Settings** opens a menu of **Manage profile** and **Manage organization**. Where only one of them is +available, **Settings** opens it directly. + +## Modes + +`mode` picks which switchers the surface carries — the only prop that changes the popup's shape. +Everything else is data. Each mode takes only the props that apply to it, so TypeScript flags +`triggerVariant` outside `combined`, organization options on `user`, and account options on +`organization`. + +| Mode | Popup | Leads with | Same as | +| -------------------- | --------------------------------------- | ---------------------------------------- | -------------------------- | +| `combined` (default) | Organizations and accounts together. | The active org, badged with the account. | | +| `user` | Accounts only; never shows an org. | The account. | `` | +| `organization` | Organizations and the personal account. | The active org, or the account. | `` | + +```tsx +import { Switcher, OrganizationSwitcher, UserButton } from '@clerk/mosaic'; + + + // or + // or +``` + +What a mode leads with is named in the trigger and heads the popup — the two always agree. + +### Combined + +The active org heads it, badged with the account. The organizations sit under it, with **Add +organization** at their foot, then **Settings** and **Invite members**. **Switch account** opens the signed-in +accounts, with **Add account** and **Sign out of all accounts**, and **Sign out** at the foot signs +out of the active account. + + + + + +With one account signed in, the foot is **Add account** and **Sign out**. + + + +### User and organization only + +`mode='user'` and `mode='organization'` are documented on their own pages: +[UserButton](/misc/user-button) and [OrganizationSwitcher](/misc/organization-switcher). + +## Loading + +Memberships, invitations and suggestions are three separate requests, and the popup opens before any +of them land. `organizationsLoading` holds the organization list's place until the last one is in — one +placeholder for all three, so the list does not walk itself in a row at a time. The header is +already known, so it renders throughout. + +Reopen the popup to watch it again. + + + +## Single session + +An instance in single-session mode holds one account at a time, so there is nothing to switch to and +no second account to add. It hands the view an empty `additionalSessions` and leaves `onAddAccount` +and `onSignOutAll` off — the surface withholds **Switch account**, **Add account**, and **Sign out of +all accounts**. The foot keeps **Sign out**. + + + +## Profile modal + +Mosaic's profile modals are mounted by `MosaicProvider`, so neither the opener nor the app renders a +dialog. With `experimental={{ newProfiles: true }}` on `MosaicProvider`, the exported Switcher opens +Mosaic's `UserProfile` the same way, against the signed-in user; without it, it opens Clerk's profile. +This example backs the modal with fixture data, so it runs without a Clerk session. The profile is +combined: the active organization's pages follow the account's. **Manage account** calls `open()`, **Manage organization** calls +`open({ page: 'organization/general' })`, and the app's own buttons call `open({ page })` or +`open({ mode: 'user' })` on the same modal. Hovering one preloads the profile, so it opens without a +wait. + + + +## Menu items + +`customMenuItems` adds the app's own rows to the group with **Settings** and **Invite members**, after +Clerk's own. A row with `onClick` is an action and closes the popup on the way out; a row with `href` +is a link and navigates on its own, so it stays followable while another action is in flight. The +`icon` is optional — a row without one still holds the column, so labels stay in line. A custom item +whose `id` is `settings` or `inviteMembers` replaces that row, in its place. + +`menuItemOrder` names that group's rows by id, and whatever it leaves out follows what it named. The +ids it knows are `settings`, `inviteMembers`, and each custom item's `id`. The organizations above +and the account rows at the foot keep their own order. An id the group has not got is ignored rather +than an error, so one order can cover every mode. + + + +## Parts + +| Part | Description | +| ----------------- | -------------------------------------------------------------------------------- | +| `SwitcherRoot` | Owns the data, callbacks, and `mode`; forwards open state to `Popover.Root`. | +| `SwitcherTrigger` | The trigger: the active account or organization's avatar, and what it is called. | +| `SwitcherPopup` | The popover surface: header, organization list, Settings group, footer. | + +## Styling + +| Slot | Attributes | +| ------------------------------------ | --------------------------------------- | +| `.cl-user-button-trigger` | | +| `.cl-user-button-popover` | | +| `.cl-user-button-header` | | +| `.cl-user-button-header-content` | | +| `.cl-user-button-header-title` | | +| `.cl-user-button-header-description` | | +| `.cl-user-button-avatar` | | +| `.cl-user-button-avatar-badge` | | +| `.cl-user-button-group` | | +| `.cl-user-button-separator` | | +| `.cl-user-button-item` | `data-interactive` | +| `.cl-user-button-item-media` | | +| `.cl-user-button-item-content` | | +| `.cl-user-button-item-label` | `data-variant="default \| interactive"` | +| `.cl-user-button-item-description` | | +| `.cl-user-button-item-trailing` | | + +### Avatar + +`.cl-user-button-avatar` holds the account's badge on the organization's avatar. The cutout behind +the badge follows its size, so resizing either keeps the gap even. Set `width` and `height` on +`.cl-user-button-avatar` to resize it, and these variables on it to place the badge: + +| Variable | Default | Description | +| -------------------------- | ----------------------------- | --------------------------------------------------------------- | +| `--cl-avatar-badge-size` | `14px` trigger, `16px` header | The badge's width and height. | +| `--cl-avatar-badge-gap` | `1px` | The space cut out around the badge. | +| `--cl-avatar-badge-offset` | `2px` trigger, `4px` header | How far the badge sits past the corner of the avatar it badges. | + +```css +.cl-user-button-avatar { + width: 48px; + height: 48px; + --cl-avatar-badge-size: 20px; + --cl-avatar-badge-gap: 2px; +} +``` + +The trigger's avatar and the header's both read the sliders. A slider left at **default** sets +nothing. Swingset injects its styles at a specificity a plain rule cannot beat, so this example marks +the size `!important`; an app importing the layered stylesheet does not need to. Turn on **RTL** to +see the badge move to the other corner. + + diff --git a/packages/swingset/src/stories/switcher.stories.tsx b/packages/swingset/src/stories/switcher.stories.tsx new file mode 100644 index 00000000000..ba1e5eceabd --- /dev/null +++ b/packages/swingset/src/stories/switcher.stories.tsx @@ -0,0 +1,368 @@ +import { Button } from '@clerk/mosaic/components/button'; +import { Icon } from '@clerk/mosaic/components/icon'; +import { SwitcherView } from '@clerk/mosaic/features/switcher/switcher.view'; +import { BadgedAvatar } from '@clerk/mosaic/features/switcher/switcher-avatar.view'; +import type { + UserProfileModalContentProps, + UserProfileModalOptions, +} from '@clerk/mosaic/features/user-profile/user-profile.modal.types'; +import { UserProfileView } from '@clerk/mosaic/features/user-profile/user-profile.view'; +import { Cog6Teeth } from '@clerk/mosaic/icons/glyphs/cog-6-teeth'; +import { defineModalSurface } from '@clerk/mosaic/modals/define-modal-surface'; +import type { ModalSurfaces } from '@clerk/mosaic/modals/modal.types'; +import { ModalHost } from '@clerk/mosaic/modals/modal-host'; +import { useModal } from '@clerk/mosaic/modals/use-modal'; +import { useEffect, useState } from 'react'; + +import type { StoryMeta } from '@/lib/types'; + +import { useOrganizationProfileFixture } from './fixtures/organization-profile'; +import { nestLabsWithClerkApp, usePrototype } from './fixtures/switcher'; +import { useUserProfileFixture } from './fixtures/user-profile'; + +// Exposes this file's own source (via the `?raw` webpack rule) so each `` example +// renders a code footer with its function's source. See `StoryModule.__source`. +export { default as __source } from './switcher.stories?raw'; + +export const meta: StoryMeta = { + group: 'Switcher', + title: 'Switcher', + label: 'Switcher', + status: 'stable', + source: 'packages/mosaic/src/features/switcher/switcher.tsx', +}; + +// ─── Mode: Combined ───────────────────────────────────────────────────────── + +export function Combined(_args: Record) { + const prototype = usePrototype({ hidePersonal: true }); + + return ( + + ); +} + +export function CombinedCondensedTrigger(_args: Record) { + const prototype = usePrototype({ hidePersonal: true }); + + return ( + + ); +} + +export function CombinedIconTrigger(_args: Record) { + const prototype = usePrototype({ hidePersonal: true }); + + return ( + + ); +} + +export function CombinedSingleAccount(_args: Record) { + const prototype = usePrototype({ organizations: nestLabsWithClerkApp, singleSession: true, hidePersonal: true }); + + return ( + + ); +} + +// ─── Beyond the frames ────────────────────────────────────────────────────── + +export function WithoutTriggerBadge(_args: Record) { + const prototype = usePrototype({ hidePersonal: true }); + + return ( + + ); +} + +export function CustomTriggerBadge(_args: Record) { + const prototype = usePrototype({ hidePersonal: true }); + + return ( + Promise.resolve({ id: 'enterprise', label: 'Enterprise plan' })} + /> + ); +} + +const avatarControls = [ + { key: 'size', label: 'Avatar size', min: 24, max: 96, initial: 42 }, + { key: 'badgeSize', label: '--cl-avatar-badge-size', min: 8, max: 40, initial: 16 }, + { key: 'badgeGap', label: '--cl-avatar-badge-gap', min: 0, max: 8, initial: 1 }, + { key: 'badgeOffset', label: '--cl-avatar-badge-offset', min: -8, max: 16, initial: 4 }, +] as const; + +type AvatarControl = (typeof avatarControls)[number]['key']; + +export function CustomizedAvatar(_args: Record) { + const prototype = usePrototype({ hidePersonal: true }); + const [values, setValues] = useState>>({}); + const { activeOrganization, activeSession } = prototype; + + const declarations = [ + values.size === undefined ? '' : `width: ${values.size}px !important; height: ${values.size}px !important;`, + values.badgeSize === undefined ? '' : `--cl-avatar-badge-size: ${values.badgeSize}px;`, + values.badgeGap === undefined ? '' : `--cl-avatar-badge-gap: ${values.badgeGap}px;`, + values.badgeOffset === undefined ? '' : `--cl-avatar-badge-offset: ${values.badgeOffset}px;`, + ].join(' '); + + return ( +
+ +
+ + {activeOrganization ? ( + + ) : null} +
+
+ {avatarControls.map(control => ( +
+ + + + {values[control.key] === undefined ? 'default' : `${values[control.key]}px`} + + + setValues({ ...values, [control.key]: Number(event.target.value) })} + /> +
+ ))} +
+
+ +
+
+ ); +} + +export function SingleSession(_args: Record) { + const prototype = usePrototype({ singleSession: true, hidePersonal: true }); + + // What an instance in single-session mode hands the view: one account, and neither of the two + // actions that only make sense with a second one. The foot signs out of just that account. + return ( + + ); +} + +export function CustomMenuItems(_args: Record) { + const prototype = usePrototype({ singleSession: true, hidePersonal: true }); + + // The app's own rows join Settings, and `menuItemOrder` puts them wherever it names them. Ids for + // rows the surface does not carry are ignored, so one order can cover every mode. + return ( + + ), + onClick: () => {}, + }, + // `icon` takes any node, so an app brings its own glyph rather than picking from Mosaic's set. + { + id: 'docs', + label: 'Documentation', + icon: ( + + + + + ), + href: 'https://clerk.com/docs', + }, + ]} + menuItemOrder={['docs', 'settings', 'inviteMembers', 'app-settings']} + /> + ); +} + +const integrationsPage = { + label: 'Integrations', + path: 'integrations', + content:

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 ( + + ); +} + +const fixtureUserProfileModal = defineModalSurface({ + id: 'fixtureUserProfile', + variant: 'profile', + load: () => Promise.resolve({ default: FixtureUserProfile }), +}); + +const fixtureModalSurfaces: ModalSurfaces = [fixtureUserProfileModal]; + +export function ProfileModal(_args: Record) { + return ( + + + + ); +} + +function ProfileModalTriggers() { + const prototype = usePrototype({ singleSession: true }); + const userProfile = useModal(fixtureUserProfileModal); + + return ( +
+ { + prototype.onManageAccount?.(); + userProfile.open({ customPages: [integrationsPage] }); + }} + onManageOrganization={() => { + prototype.onManageOrganization?.(); + userProfile.open({ page: 'organization/general', customPages: [integrationsPage] }); + }} + /> + + + + +
+ ); +} + +// Longer than the action latency above: this one is there to be caught, not to be got past. +const ORGANIZATIONS_LATENCY_MS = 2500; + +/** + * The organization list's first page landing under a popup that is already open. The other examples + * are handed their organizations on the first render, so the placeholder they would show has + * nothing to show it. The wait restarts on every open, so it can be watched more than once. + */ +export function LoadingOrganizations(_args: Record) { + const prototype = usePrototype({ hidePersonal: true }); + const [organizationsLoading, setOrganizationsLoading] = useState(false); + + useEffect(() => { + if (!prototype.open) { + return; + } + // eslint-disable-next-line react/set-state-in-effect -- Simulate a new organization request each time the popup opens + setOrganizationsLoading(true); + const timer = setTimeout(() => setOrganizationsLoading(false), ORGANIZATIONS_LATENCY_MS); + return () => clearTimeout(timer); + }, [prototype.open]); + + return ( + + ); +} diff --git a/packages/swingset/src/stories/user-button.mdx b/packages/swingset/src/stories/user-button.mdx index 104bec6830d..7135e25638d 100644 --- a/packages/swingset/src/stories/user-button.mdx +++ b/packages/swingset/src/stories/user-button.mdx @@ -2,310 +2,51 @@ import * as UserButtonStories from './user-button.stories'; # UserButton -The account & organization switcher behind the user avatar. The active organization heads the surface, -badged with the account. The account's organizations sit under it: every one it belongs to, plus -**suggested** and **invited** ones it can Join. **Settings** and **Invite members** follow them, and -**Switch account** at the foot opens the signed-in -accounts as a flyout — the active one checked — so an account never reads as an organization. The -flyout also adds an account and signs out of all of them. With nobody to switch to, that row is -**Add account** instead. The foot signs out of the active account. `mode` narrows all of it; -see [Modes](#modes). For organizations alone, use `OrganizationSwitcher`. +The account menu on its own. The active account heads the surface. **Switch account** opens the +signed-in accounts as a flyout, with the active one checked, and also adds an account and signs out +of all of them. With nobody to switch to, that row is **Add account** instead. **Settings** opens the +profile, and the foot signs out of the active account. It never lists an organization, even when one +is active; for those, use `OrganizationSwitcher` or `Switcher`. It is +``, and takes the same props minus the organization options and +`triggerVariant`. -Only the active account's organizations are listed. Not a design choice: org requests are scoped to -the session that makes them, so another account's organizations are unknowable until it _is_ active. -Hence `additionalSessions` carries sessions alone, and `onSelectOrganization` takes no session. +It renders `fallback` while Clerk loads, and nothing when nobody is signed in. -Composed from `Popover`, `Card`, `Item`, `Avatar`, and `Menu`, so behavior, focus, and ARIA come from -them rather than being restyled. `SwitcherView` is presentational; the connected `UserButton` wraps -it with `useSwitcherController()` and needs no props. +It shares its view with [`Switcher`](/switcher/switcher), so the parts, loading +state, behavior, `.cl-user-button-*` classes and `userButton` localization namespace are the same. ## Example -A working prototype over mock accounts — try it. Nothing is instant: the clicked row spins, the rest -stand down, and the surface stays open so you land on the result. Only picking an organization closes it. -`pendingKey` drives that, and the connected `UserButton` sets it from the action in flight. Actions -that would navigate (Settings, Invite members, Add organization, Add account) only close the popover here. - ## Usage -`SwitcherView` renders trigger and popup from one prop-driven call: - ```tsx -import { SwitcherView } from '@clerk/mosaic/features/switcher/switcher.view'; +import { UserButton } from '@clerk/mosaic'; - setActive({ organization })} - onSwitchSession={session => setActive({ session })} - onSignOutAll={() => signOut()} -/> +; ``` -To drop the popup into your own trigger, compose the parts. Data and callbacks live on -`SwitcherRoot`; the leaves read them from context: - -```tsx -import { - SwitcherRoot, - SwitcherTrigger, - SwitcherPopup, -} from '@clerk/mosaic/features/switcher/switcher.view'; - - - - - -``` - -Exports are flat (not `UserButton.Trigger`) so each part declares its own `'use client'` boundary. - ## Trigger -The avatar and name of whatever leads the popup. With an organization active in `combined`, the -trigger leads with the organization, badged with the account. - -`triggerVariant='condensed'` makes the trigger smaller and drops the account's badge. `user` mode is -always condensed. - - - -`showTriggerLabel={false}` leaves the avatar alone. A user's avatar on its own rounds the trigger -fully to match it; see [User only](#user-only). - - - -`triggerBadge={false}` keeps the name. The badge is part of the label, so it needs both. - - - -`triggerBadge` also supports supplying an async function to determine the badge shown alongside the trigger. The function receives an object with `kind` and `id`, and returns an object with `id` and `label`, or `null` to hide the badge. The returned `label` is used as the text content of the label while the returned `id` is embedded into a `data-badge-id` attribute that can then be used to target specific badge types (such as with CSS). - -```tsx - { - const plan = await (kind === "organization" ? getOrganizationPlan(id) : getUserPlan(id)); - if (plan) { - return { id: plan.key, label: plan.name }; - } - - return null; - }} -/> -``` - - - -## Header - -The header names whatever leads, and carries no actions of its own. An organization is described by -its plan and member count. An account is described by its identifier, and so is an organization the -account badges. - -What you can do about the lead sits in its own group, under the organizations: **Settings**, plus -**Invite members** where an organization leads. With an organization active in `combined`, -**Settings** opens a menu of **Manage profile** and **Manage organization**. Where only one of them is -available, **Settings** opens it directly. - -## Modes - -`mode` picks which switchers the surface carries — the only prop that changes the popup's shape. -Everything else is data. - -| Mode | Popup | Leads with | -| -------------------- | ------------------------------------ | ---------------------------------------- | -| `combined` (default) | Organizations and accounts together. | The active org, badged with the account. | -| `user` | Accounts only; never shows an org. | The account. | - -What a mode leads with is named in the trigger and heads the popup — the two always agree. - -### Combined - -The active org heads it, badged with the account. The organizations sit under it, with **Add -organization** at their foot, then **Settings** and **Invite members**. **Switch account** opens the signed-in -accounts, with **Add account** and **Sign out of all accounts**, and **Sign out** at the foot signs -out of the active account. - - - - - -With one account signed in, the foot is **Add account** and **Sign out**. - - - -### User only - -The account heads it. No organizations are listed, so **Settings**, then **Switch account** and -**Sign out** at the foot, are the whole of it. - - - - - -With one account signed in, the foot is **Add account** and **Sign out**. - - - -## Loading - -Memberships, invitations and suggestions are three separate requests, and the popup opens before any -of them land. `organizationsLoading` holds the organization list's place until the last one is in — one -placeholder for all three, so the list does not walk itself in a row at a time. The header is -already known, so it renders throughout. - -Reopen the popup to watch it again. - - - -## Single session - -An instance in single-session mode holds one account at a time, so there is nothing to switch to and -no second account to add. It hands the view an empty `additionalSessions` and leaves `onAddAccount` -and `onSignOutAll` off — the surface withholds **Switch account**, **Add account**, and **Sign out of -all accounts**. The foot keeps **Sign out**. +The trigger is always condensed: the account's avatar and name. `showTriggerLabel={false}` leaves +the avatar alone, and rounds the trigger fully to match it. -## Profile modal - -Mosaic's profile modals are mounted by `MosaicProvider`, so neither the opener nor the app renders a -dialog. With `experimental={{ newProfiles: true }}` on `MosaicProvider`, the exported UserButton opens -Mosaic's `UserProfile` the same way, against the signed-in user; without it, it opens Clerk's profile. -This example backs the modal with fixture data, so it runs without a Clerk session. The profile is -combined: the active organization's pages follow the account's. **Manage account** calls `open()`, **Manage organization** calls -`open({ page: 'organization/general' })`, and the app's own buttons call `open({ page })` or -`open({ mode: 'user' })` on the same modal. Hovering one preloads the profile, so it opens without a -wait. +With a single session, the flyout gives way to **Add account**. ## Menu items -`customMenuItems` adds the app's own rows to the group with **Settings** and **Invite members**, after -Clerk's own. A row with `onClick` is an action and closes the popup on the way out; a row with `href` -is a link and navigates on its own, so it stays followable while another action is in flight. The -`icon` is optional — a row without one still holds the column, so labels stay in line. A custom item -whose `id` is `settings` or `inviteMembers` replaces that row, in its place. - -`menuItemOrder` names that group's rows by id, and whatever it leaves out follows what it named. The -ids it knows are `settings`, `inviteMembers`, and each custom item's `id`. The organizations above -and the account rows at the foot keep their own order. An id the group has not got is ignored rather -than an error, so one order can cover every mode. - - - -## Parts - -| Part | Description | -| ----------------- | -------------------------------------------------------------------------------- | -| `SwitcherRoot` | Owns the data, callbacks, and `mode`; forwards open state to `Popover.Root`. | -| `SwitcherTrigger` | The trigger: the active account or organization's avatar, and what it is called. | -| `SwitcherPopup` | The popover surface: header, organization list, Settings group, footer. | - -## Styling - -| Slot | Attributes | -| ------------------------------------ | --------------------------------------- | -| `.cl-user-button-trigger` | | -| `.cl-user-button-popover` | | -| `.cl-user-button-header` | | -| `.cl-user-button-header-content` | | -| `.cl-user-button-header-title` | | -| `.cl-user-button-header-description` | | -| `.cl-user-button-avatar` | | -| `.cl-user-button-avatar-badge` | | -| `.cl-user-button-group` | | -| `.cl-user-button-separator` | | -| `.cl-user-button-item` | `data-interactive` | -| `.cl-user-button-item-media` | | -| `.cl-user-button-item-content` | | -| `.cl-user-button-item-label` | `data-variant="default \| interactive"` | -| `.cl-user-button-item-description` | | -| `.cl-user-button-item-trailing` | | - -### Avatar - -`.cl-user-button-avatar` holds the account's badge on the organization's avatar. The cutout behind -the badge follows its size, so resizing either keeps the gap even. Set `width` and `height` on -`.cl-user-button-avatar` to resize it, and these variables on it to place the badge: - -| Variable | Default | Description | -| -------------------------- | ----------------------------- | --------------------------------------------------------------- | -| `--cl-avatar-badge-size` | `14px` trigger, `16px` header | The badge's width and height. | -| `--cl-avatar-badge-gap` | `1px` | The space cut out around the badge. | -| `--cl-avatar-badge-offset` | `2px` trigger, `4px` header | How far the badge sits past the corner of the avatar it badges. | - -```css -.cl-user-button-avatar { - width: 48px; - height: 48px; - --cl-avatar-badge-size: 20px; - --cl-avatar-badge-gap: 2px; -} -``` - -The trigger's avatar and the header's both read the sliders. A slider left at **default** sets -nothing. Swingset injects its styles at a specificity a plain rule cannot beat, so this example marks -the size `!important`; an app importing the layered stylesheet does not need to. Turn on **RTL** to -see the badge move to the other corner. - - +`customMenuItems` and `menuItemOrder` work as they do on `Switcher`. diff --git a/packages/swingset/src/stories/user-button.stories.tsx b/packages/swingset/src/stories/user-button.stories.tsx index 14e6e6b6de1..7727943c7c0 100644 --- a/packages/swingset/src/stories/user-button.stories.tsx +++ b/packages/swingset/src/stories/user-button.stories.tsx @@ -1,89 +1,20 @@ -import { Button } from '@clerk/mosaic/components/button'; -import { Icon } from '@clerk/mosaic/components/icon'; import { SwitcherView } from '@clerk/mosaic/features/switcher/switcher.view'; -import { BadgedAvatar } from '@clerk/mosaic/features/switcher/switcher-avatar.view'; -import type { - UserProfileModalContentProps, - UserProfileModalOptions, -} from '@clerk/mosaic/features/user-profile/user-profile.modal.types'; -import { UserProfileView } from '@clerk/mosaic/features/user-profile/user-profile.view'; -import { Cog6Teeth } from '@clerk/mosaic/icons/glyphs/cog-6-teeth'; -import { defineModalSurface } from '@clerk/mosaic/modals/define-modal-surface'; -import type { ModalSurfaces } from '@clerk/mosaic/modals/modal.types'; -import { ModalHost } from '@clerk/mosaic/modals/modal-host'; -import { useModal } from '@clerk/mosaic/modals/use-modal'; -import { useEffect, useState } from 'react'; import type { StoryMeta } from '@/lib/types'; -import { useOrganizationProfileFixture } from './fixtures/organization-profile'; -import { nestLabsWithClerkApp, usePrototype } from './fixtures/switcher'; -import { useUserProfileFixture } from './fixtures/user-profile'; +import { usePrototype } from './fixtures/switcher'; -// Exposes this file's own source (via the `?raw` webpack rule) so each `` example -// renders a code footer with its function's source. See `StoryModule.__source`. export { default as __source } from './user-button.stories?raw'; export const meta: StoryMeta = { - group: 'User Button', + group: 'Misc', title: 'UserButton', label: 'User button', status: 'stable', - source: 'packages/mosaic/src/features/switcher/switcher.view.tsx', + source: 'packages/mosaic/src/features/user-button/user-button.tsx', }; -// ─── Mode: Combined ───────────────────────────────────────────────────────── - -export function Combined(_args: Record) { - const prototype = usePrototype({ hidePersonal: true }); - - return ( - - ); -} - -export function CombinedCondensedTrigger(_args: Record) { - const prototype = usePrototype({ hidePersonal: true }); - - return ( - - ); -} - -export function CombinedIconTrigger(_args: Record) { - const prototype = usePrototype({ hidePersonal: true }); - - return ( - - ); -} - -export function CombinedSingleAccount(_args: Record) { - const prototype = usePrototype({ organizations: nestLabsWithClerkApp, singleSession: true, hidePersonal: true }); - - return ( - - ); -} - -// ─── Mode: User only ──────────────────────────────────────────────────────── - -export function User(_args: Record) { +export function Default(_args: Record) { const prototype = usePrototype(); return ( @@ -94,7 +25,7 @@ export function User(_args: Record) { ); } -export function UserAvatarTrigger(_args: Record) { +export function IconTrigger(_args: Record) { const prototype = usePrototype(); return ( @@ -106,7 +37,7 @@ export function UserAvatarTrigger(_args: Record) { ); } -export function UserAvatarSingleSession(_args: Record) { +export function IconTriggerSingleSession(_args: Record) { const prototype = usePrototype({ singleSession: true }); return ( @@ -117,289 +48,3 @@ export function UserAvatarSingleSession(_args: Record) { /> ); } - -// ─── Beyond the frames ────────────────────────────────────────────────────── - -export function WithoutTriggerBadge(_args: Record) { - const prototype = usePrototype({ hidePersonal: true }); - - return ( - - ); -} - -export function CustomTriggerBadge(_args: Record) { - const prototype = usePrototype({ hidePersonal: true }); - - return ( - Promise.resolve({ id: 'enterprise', label: 'Enterprise plan' })} - /> - ); -} - -const avatarControls = [ - { key: 'size', label: 'Avatar size', min: 24, max: 96, initial: 42 }, - { key: 'badgeSize', label: '--cl-avatar-badge-size', min: 8, max: 40, initial: 16 }, - { key: 'badgeGap', label: '--cl-avatar-badge-gap', min: 0, max: 8, initial: 1 }, - { key: 'badgeOffset', label: '--cl-avatar-badge-offset', min: -8, max: 16, initial: 4 }, -] as const; - -type AvatarControl = (typeof avatarControls)[number]['key']; - -export function CustomizedAvatar(_args: Record) { - const prototype = usePrototype({ hidePersonal: true }); - const [values, setValues] = useState>>({}); - const { activeOrganization, activeSession } = prototype; - - const declarations = [ - values.size === undefined ? '' : `width: ${values.size}px !important; height: ${values.size}px !important;`, - values.badgeSize === undefined ? '' : `--cl-avatar-badge-size: ${values.badgeSize}px;`, - values.badgeGap === undefined ? '' : `--cl-avatar-badge-gap: ${values.badgeGap}px;`, - values.badgeOffset === undefined ? '' : `--cl-avatar-badge-offset: ${values.badgeOffset}px;`, - ].join(' '); - - return ( -
- -
- - {activeOrganization ? ( - - ) : null} -
-
- {avatarControls.map(control => ( -
- - - - {values[control.key] === undefined ? 'default' : `${values[control.key]}px`} - - - setValues({ ...values, [control.key]: Number(event.target.value) })} - /> -
- ))} -
-
- -
-
- ); -} - -export function SingleSession(_args: Record) { - const prototype = usePrototype({ singleSession: true, hidePersonal: true }); - - // What an instance in single-session mode hands the view: one account, and neither of the two - // actions that only make sense with a second one. The foot signs out of just that account. - return ( - - ); -} - -export function CustomMenuItems(_args: Record) { - const prototype = usePrototype({ singleSession: true, hidePersonal: true }); - - // The app's own rows join Settings, and `menuItemOrder` puts them wherever it names them. Ids for - // rows the surface does not carry are ignored, so one order can cover every mode. - return ( - - ), - onClick: () => {}, - }, - // `icon` takes any node, so an app brings its own glyph rather than picking from Mosaic's set. - { - id: 'docs', - label: 'Documentation', - icon: ( - - - - - ), - href: 'https://clerk.com/docs', - }, - ]} - menuItemOrder={['docs', 'settings', 'inviteMembers', 'app-settings']} - /> - ); -} - -const integrationsPage = { - label: 'Integrations', - path: 'integrations', - content:

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 ( - - ); -} - -const fixtureUserProfileModal = defineModalSurface({ - id: 'fixtureUserProfile', - variant: 'profile', - load: () => Promise.resolve({ default: FixtureUserProfile }), -}); - -const fixtureModalSurfaces: ModalSurfaces = [fixtureUserProfileModal]; - -export function ProfileModal(_args: Record) { - return ( - - - - ); -} - -function ProfileModalTriggers() { - const prototype = usePrototype({ singleSession: true }); - const userProfile = useModal(fixtureUserProfileModal); - - return ( -
- { - prototype.onManageAccount?.(); - userProfile.open({ customPages: [integrationsPage] }); - }} - onManageOrganization={() => { - prototype.onManageOrganization?.(); - userProfile.open({ page: 'organization/general', customPages: [integrationsPage] }); - }} - /> - - - - -
- ); -} - -// Longer than the action latency above: this one is there to be caught, not to be got past. -const ORGANIZATIONS_LATENCY_MS = 2500; - -/** - * The organization list's first page landing under a popup that is already open. The other examples - * are handed their organizations on the first render, so the placeholder they would show has - * nothing to show it. The wait restarts on every open, so it can be watched more than once. - */ -export function LoadingOrganizations(_args: Record) { - const prototype = usePrototype({ hidePersonal: true }); - const [organizationsLoading, setOrganizationsLoading] = useState(false); - - useEffect(() => { - if (!prototype.open) { - return; - } - // eslint-disable-next-line react/set-state-in-effect -- Simulate a new organization request each time the popup opens - setOrganizationsLoading(true); - const timer = setTimeout(() => setOrganizationsLoading(false), ORGANIZATIONS_LATENCY_MS); - return () => clearTimeout(timer); - }, [prototype.open]); - - return ( - - ); -} From b6eb74ac6bb0e88810188f69af26e4d5274eeb9a Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 10 Nov 2026 13:47:47 -0500 Subject: [PATCH 2/6] test(mosaic): mark the rejected Switcher prop, not the JSX call --- .../mosaic/src/features/switcher/switcher.test-d.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mosaic/src/features/switcher/switcher.test-d.tsx b/packages/mosaic/src/features/switcher/switcher.test-d.tsx index 462683aff55..52d32c4922a 100644 --- a/packages/mosaic/src/features/switcher/switcher.test-d.tsx +++ b/packages/mosaic/src/features/switcher/switcher.test-d.tsx @@ -31,24 +31,24 @@ describe('Switcher props', () => { signInUrl='/sign-in' /> ); - // @ts-expect-error the trigger variant only applies to the combined menu void ( ); - // @ts-expect-error a user menu lists no organizations void ( ); - // @ts-expect-error a user menu lists no organizations void ( ); @@ -62,17 +62,17 @@ describe('Switcher props', () => { createOrganizationUrl='/orgs/new' /> ); - // @ts-expect-error the trigger variant only applies to the combined menu void ( ); - // @ts-expect-error an organization menu lists no accounts void ( ); From 4439b3a752829b83d8750daa86bc8e75db7266d8 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 10 Nov 2026 13:59:29 -0500 Subject: [PATCH 3/6] docs(mosaic): address PR #10752 review feedback --- .changeset/mosaic-switcher.md | 2 +- packages/mosaic/docs/testing.md | 2 +- .../__tests__/organization-switcher.feature.test.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/mosaic-switcher.md b/.changeset/mosaic-switcher.md index b3fe6cf83e0..60ece1ef52a 100644 --- a/.changeset/mosaic-switcher.md +++ b/.changeset/mosaic-switcher.md @@ -10,6 +10,6 @@ | `` | `` or `` | | `` | `` | | Organization props on `UserButton` (`hidePersonal`, `afterSelectOrganizationUrl`, `createOrganizationUrl`, ...) | The same props on `Switcher` | -| `UserButtonMenuProps` | `CombinedSwitcherProps` | +| `UserButtonProps` (combined menu) | `CombinedSwitcherProps` | Find usages with `git grep -n "UserButton"`. diff --git a/packages/mosaic/docs/testing.md b/packages/mosaic/docs/testing.md index 70e63af38ca..8b3dcdbefa1 100644 --- a/packages/mosaic/docs/testing.md +++ b/packages/mosaic/docs/testing.md @@ -64,7 +64,7 @@ it('makes the selected organization active and closes', async () => { client: fapiClient([fapiSession({ id: 'sess_1', user: alice, last_active_organization_id: 'org_1' })]), memberships: [fapiMembership(acme), fapiMembership(other)], }); - await renderWithClerk(); + await renderWithClerk(); const user = userEvent.setup(); await user.click(screen.getByRole('button', { name: /Open account menu/ })); diff --git a/packages/mosaic/src/features/organization-switcher/__tests__/organization-switcher.feature.test.tsx b/packages/mosaic/src/features/organization-switcher/__tests__/organization-switcher.feature.test.tsx index f8272ca6270..82529f9c1f1 100644 --- a/packages/mosaic/src/features/organization-switcher/__tests__/organization-switcher.feature.test.tsx +++ b/packages/mosaic/src/features/organization-switcher/__tests__/organization-switcher.feature.test.tsx @@ -18,7 +18,7 @@ import { } from '../../../__tests__/feature/fapi'; import { renderWithClerk } from '../../../__tests__/feature/render'; import type { MosaicProfile } from '../../profile-pages/use-mosaic-profile'; -import type { OrganizationSwitcherProps } from '../organization-switcher'; +import type { OrganizationSwitcherProps } from '../../switcher/switcher'; import { OrganizationSwitcher } from '../organization-switcher'; beforeAll(async () => { From 3d122eeedb031c4c18bab77cb9ccbd137bfc0f96 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 10 Nov 2026 14:02:44 -0500 Subject: [PATCH 4/6] fix(mosaic): let Switcher take a mode chosen at runtime --- .changeset/mosaic-switcher.md | 2 +- .../src/features/switcher/switcher.test-d.tsx | 77 ++++++++++--------- .../mosaic/src/features/switcher/switcher.tsx | 15 ++-- 3 files changed, 50 insertions(+), 44 deletions(-) diff --git a/.changeset/mosaic-switcher.md b/.changeset/mosaic-switcher.md index 60ece1ef52a..d3cef3a5ec5 100644 --- a/.changeset/mosaic-switcher.md +++ b/.changeset/mosaic-switcher.md @@ -2,7 +2,7 @@ '@clerk/mosaic': minor --- -**Breaking:** Add `Switcher`, the account and organization menu, and make `UserButton` list accounts only. `Switcher` takes `mode`: `'combined'` (the default) lists accounts and organizations, `'user'` lists accounts only, and `'organization'` lists organizations. `` is now `` and `` is ``. Each mode takes only its own props, so TypeScript flags organization options on `UserButton` and `triggerVariant` outside `combined`. +**Breaking:** Add `Switcher`, the account and organization menu, and make `UserButton` list accounts only. `Switcher` takes `mode`: `'combined'` (the default) lists accounts and organizations, `'user'` lists accounts only, and `'organization'` lists organizations. `` is now `` and `` is ``. Each mode takes only its own props, so TypeScript flags organization options on `UserButton` and `triggerVariant` outside `combined`. A `mode` chosen at runtime takes only the props every mode shares. | Before | After | | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | diff --git a/packages/mosaic/src/features/switcher/switcher.test-d.tsx b/packages/mosaic/src/features/switcher/switcher.test-d.tsx index 52d32c4922a..9f385170008 100644 --- a/packages/mosaic/src/features/switcher/switcher.test-d.tsx +++ b/packages/mosaic/src/features/switcher/switcher.test-d.tsx @@ -2,7 +2,9 @@ import { describe, test } from 'vitest'; import { OrganizationSwitcher } from '../organization-switcher/organization-switcher'; import { UserButton } from '../user-button/user-button'; +import type { SwitcherProps } from './switcher'; import { Switcher } from './switcher'; +import type { SwitcherMode } from './switcher.types'; describe('Switcher props', () => { test('takes every option in combined mode, with or without the mode', () => { @@ -31,27 +33,12 @@ describe('Switcher props', () => { signInUrl='/sign-in' /> ); - void ( - - ); - void ( - - ); - void ( - - ); + // @ts-expect-error -- the trigger variant only applies to the combined menu + void ({ mode: 'user', triggerVariant: 'full' } satisfies SwitcherProps); + // @ts-expect-error -- a user menu lists no organizations + void ({ mode: 'user', hidePersonal: true } satisfies SwitcherProps); + // @ts-expect-error -- a user menu lists no organizations + void ({ mode: 'user', createOrganizationUrl: '/orgs/new' } satisfies SwitcherProps); }); test('takes organization options in organization mode and rejects the rest', () => { @@ -62,37 +49,55 @@ describe('Switcher props', () => { createOrganizationUrl='/orgs/new' /> ); + // @ts-expect-error -- the trigger variant only applies to the combined menu + void ({ mode: 'organization', triggerVariant: 'full' } satisfies SwitcherProps); + // @ts-expect-error -- an organization menu lists no accounts + void ({ mode: 'organization', afterSwitchSessionUrl: '/dashboard' } satisfies SwitcherProps); + }); + + test('requires a URL to navigate to the create-organization page', () => { + // @ts-expect-error -- navigation needs a URL + void ({ createOrganizationMode: 'navigation' } satisfies SwitcherProps); + // @ts-expect-error -- navigation needs a URL + void ({ mode: 'organization', createOrganizationMode: 'navigation' } satisfies SwitcherProps); + }); + + test('takes a mode chosen at runtime with the props every mode shares', () => { + const mode = pickMode(); void ( - ); - void ( - ); + // @ts-expect-error -- only a static combined mode takes the trigger variant + void ({ mode, triggerVariant: 'full' } satisfies SwitcherProps); + // @ts-expect-error -- only a static mode takes that mode's options + void ({ mode, hidePersonal: true } satisfies SwitcherProps); + // @ts-expect-error -- only a static mode takes that mode's options + void ({ mode, createOrganizationMode: 'navigation' } satisfies SwitcherProps); }); }); describe('UserButton and OrganizationSwitcher props', () => { test('match their Switcher mode and take no mode of their own', () => { void (); - // @ts-expect-error a user menu lists no organizations + // @ts-expect-error -- a user menu lists no organizations void (); - // @ts-expect-error the trigger variant only applies to the combined menu + // @ts-expect-error -- the trigger variant only applies to the combined menu void (); - // @ts-expect-error the mode is fixed + // @ts-expect-error -- the mode is fixed void (); void (); - // @ts-expect-error an organization menu lists no accounts + // @ts-expect-error -- an organization menu lists no accounts void (); - // @ts-expect-error the mode is fixed + // @ts-expect-error -- the mode is fixed void (); }); }); + +function pickMode(): SwitcherMode { + return 'user'; +} diff --git a/packages/mosaic/src/features/switcher/switcher.tsx b/packages/mosaic/src/features/switcher/switcher.tsx index 8ddee652616..64f50e4950c 100644 --- a/packages/mosaic/src/features/switcher/switcher.tsx +++ b/packages/mosaic/src/features/switcher/switcher.tsx @@ -11,7 +11,7 @@ import type { } from './switcher.model'; import { useSwitcherModel } from './switcher.model'; import { useCustomPages, useOrganizationProfilePages, useUserProfilePages } from './switcher.pages'; -import type { SwitcherMenuProps } from './switcher.types'; +import type { SwitcherMenuProps, SwitcherMode } from './switcher.types'; import type { SwitcherTriggerProps, SwitcherTriggerVariant } from './switcher.view'; import { SwitcherView } from './switcher.view'; @@ -47,13 +47,14 @@ export type OrganizationSwitcherProps = SwitcherBaseProps & OrganizationSwitcher /** * What the menu lists, and the options that apply to it. `combined` lists accounts and organizations, * `user` lists accounts alone and never an organization, even when one is active, and `organization` - * lists organizations and the personal account. The profile's shape is set by `MosaicProvider`'s - * `profile`. + * lists organizations and the personal account. A mode chosen at runtime takes only the props every + * mode shares. The profile's shape is set by `MosaicProvider`'s `profile`. */ export type SwitcherProps = | ({ mode?: 'combined' } & CombinedSwitcherProps) - | ({ mode: 'user' } & UserButtonProps) - | ({ mode: 'organization' } & OrganizationSwitcherProps); + | ({ mode: 'user'; triggerVariant?: never } & UserButtonProps) + | ({ mode: 'organization'; triggerVariant?: never } & OrganizationSwitcherProps) + | ({ mode: SwitcherMode } & SwitcherBaseProps & { [K in keyof SwitcherModelOptions | 'triggerVariant']?: never }); /** * The signed-in user's avatar, and the menu behind it: switch organization, switch or add an account, @@ -123,13 +124,13 @@ export function Switcher(props: SwitcherProps = {}): ReactElement | null { showTriggerLabel, triggerBadge, mode = 'combined', + triggerVariant: requestedTriggerVariant, customMenuItems, menuItemOrder, fallback, ...options } = props; - const triggerVariant = - props.mode === 'user' || props.mode === 'organization' ? 'condensed' : (props.triggerVariant ?? 'full'); + const triggerVariant = mode === 'combined' ? (requestedTriggerVariant ?? 'full') : 'condensed'; const profile = useMosaicProfile(); const { userProfileProps, organizationProfileProps } = profile; // The portals must outlive the popover, so custom pages are bridged here rather than inside it. From 898a119492144c8c639710279c0cb78a7b85e7f1 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 10 Nov 2026 17:40:03 -0500 Subject: [PATCH 5/6] feat(mosaic): add Profile and match the opened profile to the menu --- .changeset/mosaic-profile-component.md | 30 ++ .../src/app/user-profile/page.tsx | 4 +- .../mosaic/docs/documenting-components.md | 5 +- .../organization-profile.feature.test.tsx | 9 + .../organization-profile.tsx | 67 +--- .../profile-pages/use-mosaic-profile.ts | 6 +- .../__tests__/profile.feature.test.tsx | 261 +++++++++++++++ .../src/features/profile/profile.test-d.tsx | 90 ++++++ .../mosaic/src/features/profile/profile.tsx | 298 ++++++++++++++++++ .../switcher.new-profiles.feature.test.tsx | 9 +- .../switcher.profile.feature.test.tsx | 113 ++++--- .../src/features/switcher/switcher.model.tsx | 25 +- .../__tests__/user-profile.feature.test.tsx | 197 +----------- ...user-profile.modal-return.feature.test.tsx | 20 +- ...rofile-connected-accounts-section.model.ts | 4 +- .../user-profile-email-section.model.ts | 13 +- ...ofile-enterprise-accounts-section.model.ts | 4 +- .../user-profile.modal-content.tsx | 5 +- .../user-profile/user-profile.modal-return.ts | 15 +- .../user-profile/user-profile.modal.types.ts | 9 +- .../user-profile/user-profile.provider.tsx | 9 +- .../features/user-profile/user-profile.tsx | 184 +---------- packages/mosaic/src/index.ts | 2 + .../app/(clerk)/live/profile/profile/page.tsx | 34 ++ .../swingset/src/components/Composition.tsx | 1 + .../swingset/src/components/DocsViewer.tsx | 3 + packages/swingset/src/lib/live-navigation.ts | 1 + packages/swingset/src/lib/registry.ts | 8 + .../swingset/src/stories/mosaic-provider.mdx | 7 +- packages/swingset/src/stories/profile.mdx | 17 + .../swingset/src/stories/profile.stories.tsx | 30 ++ 31 files changed, 958 insertions(+), 522 deletions(-) create mode 100644 .changeset/mosaic-profile-component.md create mode 100644 packages/mosaic/src/features/profile/__tests__/profile.feature.test.tsx create mode 100644 packages/mosaic/src/features/profile/profile.test-d.tsx create mode 100644 packages/mosaic/src/features/profile/profile.tsx create mode 100644 packages/swingset/src/app/(clerk)/live/profile/profile/page.tsx create mode 100644 packages/swingset/src/stories/profile.mdx create mode 100644 packages/swingset/src/stories/profile.stories.tsx diff --git a/.changeset/mosaic-profile-component.md b/.changeset/mosaic-profile-component.md new file mode 100644 index 00000000000..ec3e0d7209f --- /dev/null +++ b/.changeset/mosaic-profile-component.md @@ -0,0 +1,30 @@ +--- +'@clerk/mosaic': minor +--- + +**Breaking:** Add a `Profile` component that shows the account's pages, the active organization's pages, or both. `` now shows only the account's pages, and `` only the organization's. To keep both in one profile, render ``. + +```tsx + + + +``` + +`mode` defaults to `'combined'`. Without a `mode`, `Profile` follows `MosaicProvider`'s `profile.combined`, so `false` shows only the account's pages. + +With `experimental.newProfiles`, the profile a menu opens now matches the menu. `` and `` open the account's pages, a lone `` opens the organization's pages, and only a combined `` opens one profile with both. `profile.combined: false` still splits a combined menu's profile in two. + +| Before | After | +| --------------------------------------------------------- | --------------------------------------------- | +| `` | `` | +| `` | `` | +| `` | `` or `` | +| `` | `` | + +To find the code to update, run: + +```sh +git grep -n ' - custom-page-content

}]} /> + custom-page-content

}]} /> ); } diff --git a/packages/mosaic/docs/documenting-components.md b/packages/mosaic/docs/documenting-components.md index 8314f49e846..ff7869f205b 100644 --- a/packages/mosaic/docs/documenting-components.md +++ b/packages/mosaic/docs/documenting-components.md @@ -20,6 +20,7 @@ Worked examples: `button.stories.tsx` and `button.mdx` (archetype A, simple), `p | Group | What lives here | Archetype | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------- | | `Switcher` | Composed flow UI (e.g. `Switcher`) | C | +| `Profile` | Composed flow UI (`Profile`) | C | | `User Profile` | Composed flow UI (e.g. `UserProfileProfilePanel`) | C | | `Organization Profile` | Composed flow UI (e.g. `OrganizationProfileGeneralPanel`) | C | | `Misc` | Standalone composed components (e.g. `OrganizationSwitcher`, `Waitlist`) | C | @@ -30,7 +31,7 @@ Worked examples: `button.stories.tsx` and `button.mdx` (archetype A, simple), `p | `Hooks` | Headless hooks (`useForm`) | B (adapted) | | `Localization` | The `localization` prop on `MosaicProvider`: catalogs, overrides, locale, and the message helpers | B (adapted) | -`Switcher` / `User Profile` / `Organization Profile` / `Misc` / `Blocks` → `Components` → `Primitives` runs high-level-composition → low-level-primitive. Composed layers are documented as compositions of lower layers (archetype C); leaf layers (Components, Primitives) get full prop/knob docs (archetypes A and B). +`Switcher` / `Profile` / `User Profile` / `Organization Profile` / `Misc` / `Blocks` → `Components` → `Primitives` runs high-level-composition → low-level-primitive. Composed layers are documented as compositions of lower layers (archetype C); leaf layers (Components, Primitives) get full prop/knob docs (archetypes A and B). `Styles` and `Hooks` are the non-component layers: there is no element to knob, so they follow archetype B's shape (Example → Usage → Parts → Styling) with `Props` replaced by whatever the export @@ -204,7 +205,7 @@ The story is `meta` (no `styles`) plus a single `Default` export that renders th Every props table has a **Default** column, and the `Type` stays a plain union, never with the default inlined. The auto `` fills it from `meta.styles._defaultVariants`; hand-written tables (`Prop | Type | Default | Description`) fill it by hand. Name the default member (`'bottom-start'`), use `—` when there is none and append `(required)` for a required prop, and state a behavioral default in words (`inherits Root`). -## Archetype C — composed layer (`Switcher`, `User Profile`, `Organization Profile`, `Misc`, `Blocks`) +## Archetype C — composed layer (`Switcher`, `Profile`, `User Profile`, `Organization Profile`, `Misc`, `Blocks`) These compose lower layers, so the docs lead with the composition rather than knobs. Required MDX: diff --git a/packages/mosaic/src/features/organization-profile/__tests__/organization-profile.feature.test.tsx b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile.feature.test.tsx index f52f2cadd02..171a662e087 100644 --- a/packages/mosaic/src/features/organization-profile/__tests__/organization-profile.feature.test.tsx +++ b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile.feature.test.tsx @@ -66,6 +66,15 @@ describe('OrganizationProfile', () => { expect(screen.queryByText('Loading profile')).toBeNull(); }); + it("adds the provider's organization pages", async () => { + serve(); + await renderWithClerk(, undefined, undefined, undefined, { + userProfileProps: { customPages: [{ path: 'usage', label: 'Usage', content:

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 `` takes: your own pages and their order, the page it opens on, and where leaving the organization lands. */ export interface OrganizationProfileProps @@ -42,7 +33,7 @@ export interface OrganizationProfileProps } /** - * The active organization's profile: General, Members when the user may read or manage + * The active organization's profile, the same as ``: General, Members when the user may read or manage * memberships, and API keys when the instance enables them and the user may use them, with your own * pages alongside. It reads the organization from Clerk, so it takes no data. It renders `fallback` * until Clerk answers, and nothing at all when there is no active organization or nobody is signed in. @@ -80,55 +71,11 @@ export interface OrganizationProfileProps * * ``` */ -export function OrganizationProfile(props: OrganizationProfileProps) { - const { organizationProfileProps } = useMosaicProfile(); - const { - customPages = organizationProfileProps?.customPages, - pageOrder = organizationProfileProps?.pageOrder, - defaultPage, - afterLeaveOrganizationUrl = organizationProfileProps?.afterLeaveOrganizationUrl, - fallback, - apiKeysProps = organizationProfileProps?.apiKeysProps, - } = props; - const model = useOrganizationProfileModel(); - const pages = model.status === 'ready' ? organizationProfilePanels(model.pages, apiKeysProps) : undefined; - const navigation = useProfilePagesController( - defaultPage ?? pageOrder?.[0] ?? 'general', - pages && organizationProfilePageIds({ pages, customPages, pageOrder }), - ); - - if (model.status === 'loading') { - return fallback ?? null; - } - if (!pages) { - return null; - } - +export function OrganizationProfile(props: OrganizationProfileProps): ReactNode { return ( - - - + ); } - -/** - * The organization's built-in panels, for the pages the instance has turned on. `apiKeysProps.hide` - * leaves the API keys panel out; the rest of `apiKeysProps` goes to it. - */ -export function organizationProfilePanels( - available: readonly OrganizationProfilePageId[], - { hide: hideAPIKeys = false, ...apiKeysProps }: APIKeysPageProps = {}, -): OrganizationProfilePages { - return { - general: , - members: available.includes('members') ? : undefined, - apiKeys: - available.includes('apiKeys') && !hideAPIKeys ? : undefined, - }; -} diff --git a/packages/mosaic/src/features/profile-pages/use-mosaic-profile.ts b/packages/mosaic/src/features/profile-pages/use-mosaic-profile.ts index 820d90ff8ce..b50780905a5 100644 --- a/packages/mosaic/src/features/profile-pages/use-mosaic-profile.ts +++ b/packages/mosaic/src/features/profile-pages/use-mosaic-profile.ts @@ -7,8 +7,10 @@ import type { CustomProfilePage, UserProfilePageId } from '../user-profile/user- export interface MosaicProfile { /** - * Whether one profile carries the account's pages and the active organization's. `false` keeps them - * in separate profiles. It decides the profile's shape, not what `UserButton`'s menu lists. + * Whether a menu that carries both the account and the organization opens one profile with both + * groups of pages. `false` opens them as separate profiles. A menu that carries only one of them + * always opens that one's profile. It is also the mode of a `` without a `mode`: + * `false` shows the account's pages alone. * * @default true */ diff --git a/packages/mosaic/src/features/profile/__tests__/profile.feature.test.tsx b/packages/mosaic/src/features/profile/__tests__/profile.feature.test.tsx new file mode 100644 index 00000000000..59c1f0c2054 --- /dev/null +++ b/packages/mosaic/src/features/profile/__tests__/profile.feature.test.tsx @@ -0,0 +1,261 @@ +import { act, screen, waitFor, within } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { beforeAll, describe, expect, it } from 'vitest'; +import { page } from 'vitest/browser'; + +import { openDialog } from '../../../__tests__/feature/dialog'; +import { serveFapi } from '../../../__tests__/feature/fake-fapi'; +import { + fapiClient, + fapiEnvironment, + fapiMembership, + fapiOrganization, + fapiSession, + fapiUser, +} from '../../../__tests__/feature/fapi'; +import { renderWithClerk } from '../../../__tests__/feature/render'; +import { Profile } from '../profile'; + +beforeAll(() => page.viewport(1280, 800)); + +function tabNames() { + return screen.getAllByRole('tab').map(tab => tab.textContent); +} + +describe('Profile with an active organization', () => { + const acme = fapiOrganization({ id: 'org_1', name: 'Acme' }); + + function serveWithOrganization({ + permissions = ['org:sys_memberships:read'], + userAPIKeysEnabled = false, + orgAPIKeysEnabled = false, + activeOrganizationId = acme.id, + }: { + permissions?: string[]; + userAPIKeysEnabled?: boolean; + orgAPIKeysEnabled?: boolean; + activeOrganizationId?: string | null; + } = {}) { + const memberships = [fapiMembership(acme, { permissions })]; + const user = fapiUser({ id: 'user_1', organization_memberships: memberships }); + return serveFapi({ + environment: fapiEnvironment({ + api_keys_settings: { user_api_keys_enabled: userAPIKeysEnabled, orgs_api_keys_enabled: orgAPIKeysEnabled }, + }), + client: fapiClient([fapiSession({ id: 'sess_1', user, last_active_organization_id: activeOrganizationId })]), + memberships, + }); + } + + function tabsDescribedBy(description: string) { + return screen + .getAllByRole('tab') + .filter(tab => tab.getAttribute('aria-describedby') !== null) + .filter(tab => document.getElementById(tab.getAttribute('aria-describedby') ?? '')?.textContent === description) + .map(tab => tab.textContent); + } + + it('lists the organization pages under Organization after the account pages', async () => { + serveWithOrganization(); + await renderWithClerk(); + expect(tabsDescribedBy('Account')).toEqual(['Account', 'Security']); + expect(tabsDescribedBy('Organization')).toEqual(['General', 'Members']); + }); + + it('lists only the organization pages the user may see', async () => { + serveWithOrganization({ permissions: [] }); + await renderWithClerk(); + expect(tabsDescribedBy('Organization')).toEqual(['General']); + }); + + it.each([ + { hide: true, tabs: ['General'] }, + { hide: false, tabs: ['General', 'API Keys'] }, + ])('lists the organization API keys only when they are not hidden: $hide', async ({ hide, tabs }) => { + serveWithOrganization({ orgAPIKeysEnabled: true, permissions: ['org:sys_api_keys:read'] }); + await renderWithClerk(); + expect(tabsDescribedBy('Organization')).toEqual(tabs); + }); + + it('sends the user to afterLeaveOrganizationUrl after leaving the organization', async () => { + const fapi = serveWithOrganization(); + const { navigate } = await renderWithClerk( + , + ); + const user = userEvent.setup(); + const dialog = await openDialog(user, await screen.findByRole('button', { name: 'Leave organization' }), { + role: 'alertdialog', + }); + + await user.type(within(dialog).getByRole('textbox'), 'Acme'); + await user.click(within(dialog).getByRole('button', { name: 'Leave organization' })); + + await waitFor(() => expect(fapi.memberships).toHaveLength(0)); + await waitFor(() => expect(navigate).toHaveBeenCalledWith('/organizations')); + }); + + it('lists only the account pages without an active organization', async () => { + serveWithOrganization({ activeOrganizationId: null }); + await renderWithClerk(); + expect(tabNames()).toEqual(['Account', 'Security']); + }); + + it('opens on an organization page by its prefixed id', async () => { + serveWithOrganization(); + await renderWithClerk(); + expect(screen.getByRole('tab', { name: 'Members', description: 'Organization' })).toHaveAttribute( + 'aria-selected', + 'true', + ); + expect(screen.getByRole('heading', { level: 3, name: 'Members' })).toBeVisible(); + }); + + it('opens the organization page that shares an account page name', async () => { + serveWithOrganization(); + await renderWithClerk( + Organization security

}], + }} + />, + ); + const user = userEvent.setup(); + + await user.click(screen.getByRole('tab', { name: 'Security', description: 'Organization' })); + expect(screen.getByText('Organization security')).toBeVisible(); + }); + + it('skips an account page whose path is an organization page id', async () => { + serveWithOrganization(); + await renderWithClerk( + Imposter content

}]} + />, + ); + + expect(tabNames()).toEqual(['Account', 'Security', 'General', 'Members']); + expect(screen.getByRole('tab', { name: 'General', description: 'Organization' })).toHaveAttribute( + 'aria-selected', + 'true', + ); + expect(screen.queryByText('Imposter content')).not.toBeInTheDocument(); + }); + + it('passes the organization options to its pages', async () => { + serveWithOrganization(); + await renderWithClerk( + Audit content

}], + pageOrder: ['audit'], + }} + />, + ); + expect(tabsDescribedBy('Organization')).toEqual(['Audit log', 'General', 'Members']); + }); + + it('keeps the shown page after the open organization page leaves the navigation', async () => { + const globex = fapiOrganization({ id: 'org_2', name: 'Globex' }); + const memberships = [ + fapiMembership(acme, { permissions: ['org:sys_memberships:read'] }), + fapiMembership(globex, { permissions: [] }), + ]; + const user = fapiUser({ id: 'user_1', organization_memberships: memberships }); + serveFapi({ + environment: fapiEnvironment(), + client: fapiClient([fapiSession({ id: 'sess_1', user, last_active_organization_id: acme.id })]), + memberships, + }); + const { clerk } = await renderWithClerk(); + + await act(() => clerk.setActive({ organization: globex.id })); + await waitFor(() => expect(tabsDescribedBy('Organization')).toEqual(['General'])); + await act(() => clerk.setActive({ organization: acme.id })); + await waitFor(() => expect(tabsDescribedBy('Organization')).toEqual(['General', 'Members'])); + + expect(screen.getByRole('tab', { name: 'Account', description: 'Account' })).toHaveAttribute( + 'aria-selected', + 'true', + ); + }); + + it('stays on the organization page when the next organization lists it too', async () => { + const globex = fapiOrganization({ id: 'org_2', name: 'Globex' }); + const memberships = [ + fapiMembership(acme, { permissions: ['org:sys_memberships:read'] }), + fapiMembership(globex, { permissions: ['org:sys_memberships:read'] }), + ]; + const user = fapiUser({ id: 'user_1', organization_memberships: memberships }); + serveFapi({ + environment: fapiEnvironment(), + client: fapiClient([fapiSession({ id: 'sess_1', user, last_active_organization_id: acme.id })]), + memberships, + }); + const { clerk } = await renderWithClerk(); + + await act(() => clerk.setActive({ organization: globex.id })); + await waitFor(() => expect(clerk.organization?.id).toBe(globex.id)); + + expect(screen.getByRole('tab', { name: 'Members', description: 'Organization' })).toHaveAttribute( + 'aria-selected', + 'true', + ); + }); + + it.each([ + { name: 'combined by default', profile: undefined, tabs: ['Account', 'Security', 'General', 'Members'] }, + { + name: 'account only when the provider keeps profiles separate', + profile: { combined: false }, + tabs: ['Account', 'Security'], + }, + ])('without a mode, follows the provider: $name', async ({ profile, tabs }) => { + serveWithOrganization(); + await renderWithClerk(, undefined, undefined, undefined, profile); + expect(tabNames()).toEqual(tabs); + }); + + it('lists the organization pages when the mode is combined, whatever the provider says', async () => { + serveWithOrganization(); + await renderWithClerk(, undefined, undefined, undefined, { combined: false }); + expect(tabsDescribedBy('Organization')).toEqual(['General', 'Members']); + }); + + it('lists only the account pages in user mode', async () => { + serveWithOrganization(); + await renderWithClerk(); + expect(tabNames()).toEqual(['Account', 'Security']); + }); + + it('lists only the organization pages in organization mode', async () => { + serveWithOrganization(); + await renderWithClerk(); + expect(tabNames()).toEqual(['General', 'Members']); + }); + + it('leaves out the organization pages when the provider keeps profiles separate, even with organization options', async () => { + serveWithOrganization(); + await renderWithClerk( + , + undefined, + undefined, + undefined, + { combined: false }, + ); + expect(tabNames()).toEqual(['Account', 'Security']); + }); + + it("adds the provider's pages to both groups", async () => { + serveWithOrganization(); + await renderWithClerk(, undefined, undefined, undefined, { + userProfileProps: { customPages: [{ path: 'usage', label: 'Usage', content:

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 ( + + ); + void ( + + ); + }); + + test('takes account options in user mode and rejects the rest', () => { + void ( + + ); + // @ts-expect-error -- a user profile has no organization pages + void ({ mode: 'user', organizationProfileProps: {} } satisfies ProfileProps); + // @ts-expect-error -- a user profile has no organization pages + void ({ mode: 'user', afterLeaveOrganizationUrl: '/organizations' } satisfies ProfileProps); + }); + + test('takes organization options in organization mode and rejects the rest', () => { + void ( + + ); + // @ts-expect-error -- an organization profile has no account pages + void ({ mode: 'organization', additionalOAuthScopes: {} } satisfies ProfileProps); + // @ts-expect-error -- an organization profile is not combined + void ({ mode: 'organization', organizationProfileProps: {} } satisfies ProfileProps); + }); + + test('takes leaving the organization only through the organization options when combined', () => { + // @ts-expect-error -- a combined profile takes it in organizationProfileProps + void ({ afterLeaveOrganizationUrl: '/organizations' } satisfies ProfileProps); + }); + + test('takes a mode chosen at runtime', () => { + const mode = pickMode(); + void ( + + ); + }); +}); + +describe('UserProfile and OrganizationProfile props', () => { + test('match their Profile mode and take no mode of their own', () => { + void (); + // @ts-expect-error -- a user profile has no organization pages + void (); + // @ts-expect-error -- the mode is fixed + void (); + + void (); + // @ts-expect-error -- an organization profile has no account pages + void (); + // @ts-expect-error -- the mode is fixed + void (); + }); +}); + +function pickMode(): ProfileMode { + return 'user'; +} diff --git a/packages/mosaic/src/features/profile/profile.tsx b/packages/mosaic/src/features/profile/profile.tsx new file mode 100644 index 00000000000..e489b50e98b --- /dev/null +++ b/packages/mosaic/src/features/profile/profile.tsx @@ -0,0 +1,298 @@ +'use client'; + +import type { ReactNode } from 'react'; + +import type { APIKeysPageProps } from '../api-keys/api-keys-table'; +import type { OrganizationProfileProps } from '../organization-profile/organization-profile'; +import { organizationProfilePageIds } from '../organization-profile/organization-profile.layout'; +import { useOrganizationProfileModel } from '../organization-profile/organization-profile.model'; +import { OrganizationProfileProvider } from '../organization-profile/organization-profile.provider'; +import type { + OrganizationProfilePageId, + OrganizationProfilePages, +} from '../organization-profile/organization-profile.types'; +import { OrganizationProfileView } from '../organization-profile/organization-profile.view'; +import { OrganizationProfileApiKeysPanel } from '../organization-profile/organization-profile-api-keys-panel'; +import { OrganizationProfileGeneralPanel } from '../organization-profile/organization-profile-general-panel'; +import { OrganizationProfileMembersPanel } from '../organization-profile/organization-profile-members-panel/organization-profile-members-panel'; +import { useProfilePagesController } from '../profile-pages/profile-pages.controller'; +import { useMosaicProfile } from '../profile-pages/use-mosaic-profile'; +import { useUserProfilePages } from '../switcher/switcher.pages'; +import type { UserProfileProps } from '../user-profile/user-profile'; +import { ORGANIZATION_PAGE_PREFIX, userProfilePageIds } from '../user-profile/user-profile.layout'; +import type { UserProfileOptions } from '../user-profile/user-profile.provider'; +import { UserProfileProvider } from '../user-profile/user-profile.provider'; +import type { UserProfileViewProps } from '../user-profile/user-profile.view'; +import { UserProfileView } from '../user-profile/user-profile.view'; +import { UserProfileApiKeysPanel } from '../user-profile/user-profile-api-keys-panel'; +import { UserProfileProfilePanel } from '../user-profile/user-profile-profile-panel'; +import { UserProfileSecurityPanel } from '../user-profile/user-profile-security-panel'; +import { useUserProfileUserModel } from '../user-profile/user-profile-user.model'; + +/** Which pages the profile carries: the account's and the active organization's, or one of them alone. */ +export type ProfileMode = 'combined' | 'user' | 'organization'; + +/** Everything `` takes in `combined` mode. */ +export interface CombinedProfileProps extends UserProfileProps { + /** + * Options for the organization's pages: your own pages and their order, the API keys page, and + * where leaving the organization lands. `pageOrder` names the organization's pages without the + * `organization/` prefix, as in `['members', 'general']`. + */ + organizationProfileProps?: Pick< + OrganizationProfileProps, + 'customPages' | 'pageOrder' | 'apiKeysProps' | 'afterLeaveOrganizationUrl' + >; +} + +/** + * Everything `` takes. Each mode takes its own options: `combined` the account's with the + * organization's in `organizationProfileProps`, `user` the account's, and `organization` the + * organization's. A mode chosen at runtime takes any mode's options, and the ones its mode has no use for do nothing. + */ +export type ProfileProps = + | ({ mode?: 'combined' } & CombinedProfileProps) + | ({ mode: 'user' } & UserProfileProps) + | ({ mode: 'organization' } & OrganizationProfileProps); + +/** + * The signed-in user's profile. `combined` lists the account's pages and then the active + * organization's, `user` the account's alone, and `organization` the active organization's alone. + * Without a `mode`, it follows `MosaicProvider`'s `profile.combined`: `false` shows the account's + * pages alone. It reads from Clerk, so it takes no data. It renders `fallback` until Clerk answers, + * and nothing at all when there is nothing to show. + * + * @example + * ```tsx + * + * ``` + * + * @example + * `mode` narrows the profile. `` and `` are the same as + * `mode='user'` and `mode='organization'`. + * ```tsx + * + * + * ``` + * + * @example + * `defaultPage` picks the page the profile opens on without moving it in the navigation. An + * organization page's id is prefixed with `organization/` in `combined` mode. + * ```tsx + * + * ``` + * + * @example + * `organizationProfileProps` adds your own pages to the organization's group. + * ```tsx + * , content: }], + * }} + * /> + * ``` + */ +export function Profile(props: ProfileProps): ReactNode { + const provider = useMosaicProfile(); + + if (props.mode === 'organization') { + return ; + } + + const { mode = provider.combined === false ? 'user' : 'combined', ...ownProps } = props; + const userProps = withUserDefaults(ownProps, provider.userProfileProps); + + if (mode === 'user') { + return ( + + ); + } + + return ( + + ); +} + +function withUserDefaults( + props: UserProfileProps, + defaults: Pick = {}, +): UserProfileProps { + const { + customPages = defaults.customPages, + pageOrder = defaults.pageOrder, + additionalOAuthScopes = defaults.additionalOAuthScopes, + apiKeysProps = defaults.apiKeysProps, + defaultPage, + fallback, + } = props; + return { customPages, pageOrder, additionalOAuthScopes, apiKeysProps, defaultPage, fallback }; +} + +function withOrganizationDefaults>( + props: Props, + defaults: NonNullable = {}, +): Props { + const { + customPages = defaults.customPages, + pageOrder = defaults.pageOrder, + apiKeysProps = defaults.apiKeysProps, + afterLeaveOrganizationUrl = defaults.afterLeaveOrganizationUrl, + } = props; + return { ...props, customPages, pageOrder, apiKeysProps, afterLeaveOrganizationUrl }; +} + +export function UserProfileSurface({ + presentation, + combined, + organizationProfileProps, + customPages, + pageOrder, + defaultPage, + additionalOAuthScopes, + fallback, + apiKeysProps: { hide: hideAPIKeys = false, ...apiKeysProps } = {}, +}: CombinedProfileProps & { presentation: NonNullable; combined: boolean }) { + const model = useUserProfileUserModel(); + const builtInPages = useUserProfilePages(); + + if (model.status === 'loading') { + return fallback ?? null; + } + if (model.status === 'hidden') { + return null; + } + + const viewProps: AccountViewProps = { + elevation: 'flush', + initialPage: defaultPage ?? pageOrder?.[0] ?? 'account', + customPages, + pageOrder, + pages: { + account: , + security: , + apiKeys: + builtInPages.includes('apiKeys') && !hideAPIKeys ? : undefined, + }, + }; + + return ( + + {combined ? ( + + ) : ( + + )} + + ); +} + +type AccountViewProps = Omit & { + initialPage: UserProfileViewProps['activePage']; +}; + +function AccountUserProfileView({ initialPage, ...viewProps }: AccountViewProps) { + const navigation = useProfilePagesController(initialPage, userProfilePageIds(viewProps)); + + return ( + + ); +} + +function CombinedUserProfileView({ + initialPage, + organizationProfileProps: { customPages, pageOrder, apiKeysProps, afterLeaveOrganizationUrl } = {}, + ...viewProps +}: AccountViewProps & Pick) { + const model = useOrganizationProfileModel(); + const organization = + model.status === 'ready' + ? { pages: organizationProfilePanels(model.pages, apiKeysProps), customPages, pageOrder } + : undefined; + const pageIds = model.status === 'loading' ? undefined : userProfilePageIds({ ...viewProps, organization }); + const navigation = useProfilePagesController( + initialPage, + pageIds, + initialPage.startsWith(ORGANIZATION_PAGE_PREFIX) + ? pageIds?.find(id => id.startsWith(ORGANIZATION_PAGE_PREFIX)) + : undefined, + ); + + return ( + + + + ); +} + +export function OrganizationProfileSurface({ + customPages, + pageOrder, + defaultPage, + afterLeaveOrganizationUrl, + fallback, + apiKeysProps, +}: OrganizationProfileProps) { + const model = useOrganizationProfileModel(); + const pages = model.status === 'ready' ? organizationProfilePanels(model.pages, apiKeysProps) : undefined; + const navigation = useProfilePagesController( + defaultPage ?? pageOrder?.[0] ?? 'general', + pages && organizationProfilePageIds({ pages, customPages, pageOrder }), + ); + + if (model.status === 'loading') { + return fallback ?? null; + } + if (!pages) { + return null; + } + + return ( + + + + ); +} + +function organizationProfilePanels( + available: readonly OrganizationProfilePageId[], + { hide: hideAPIKeys = false, ...apiKeysProps }: APIKeysPageProps = {}, +): OrganizationProfilePages { + return { + general: , + members: available.includes('members') ? : undefined, + apiKeys: + available.includes('apiKeys') && !hideAPIKeys ? : undefined, + }; +} diff --git a/packages/mosaic/src/features/switcher/__tests__/switcher.new-profiles.feature.test.tsx b/packages/mosaic/src/features/switcher/__tests__/switcher.new-profiles.feature.test.tsx index c1f1664560b..b082a193f74 100644 --- a/packages/mosaic/src/features/switcher/__tests__/switcher.new-profiles.feature.test.tsx +++ b/packages/mosaic/src/features/switcher/__tests__/switcher.new-profiles.feature.test.tsx @@ -127,8 +127,11 @@ describe('Switcher 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('Switcher 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(); }); 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 e54e63a3459..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,9 @@ 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 }); @@ -110,16 +110,16 @@ 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 }) => { + { name: 'by default', profile: undefined }, + { name: 'with a combined provider', profile: { combined: true } }, + { name: 'with separate profiles', profile: separate }, + ])('a user-only button opens only the account pages: $name', async ({ profile }) => { await renderWithProfile(, profile); await clickSettings(buttonTrigger); expect(await selectedTab('Account')).toBeInTheDocument(); - expect(tabs()).toEqual(expected); + expect(tabs()).toEqual(accountTabs); }); it('a combined button opens one profile straight from Settings', async () => { @@ -140,17 +140,11 @@ describe('the profile the switchers open', () => { expect(tabs()).toEqual(organizationTabs); }); - it('a lone switcher lands on the organization pages of the combined profile', async () => { - await renderWithProfile(); - - await clickSettings(switcherTrigger); - - expect(await selectedTab('General')).toBeInTheDocument(); - expect(tabs()).toEqual(allTabs); - }); - - it('a lone switcher opens the standalone organization profile when opted out', async () => { - await renderWithProfile(, separate); + it.each([ + { name: 'by default', profile: undefined }, + { name: 'with separate profiles', profile: separate }, + ])('a lone switcher opens only the organization pages: $name', async ({ profile }) => { + await renderWithProfile(, profile); await clickSettings(switcherTrigger); @@ -172,7 +166,7 @@ describe('the profile the switchers open', () => { await clickSettings(switcherTrigger); expect(await selectedTab('General')).toBeInTheDocument(); - expect(tabs()).toEqual(allTabs); + expect(tabs()).toEqual(organizationTabs); }); it('leaves the organization pages out of the combined profile on a personal account', async () => { @@ -195,20 +189,17 @@ describe('the profile the switchers open', () => { expect(navigate).toHaveBeenCalledWith('/org'); }); - it.each([ - { name: 'separate', combined: false, expected: ['General'] }, - { name: 'combined', combined: true, expected: ['Account', 'Security', 'General'] }, - ])("hides the organization's API keys from the profile a switcher opens: $name", async ({ combined, expected }) => { + it("hides the organization's API keys from the profile a switcher opens", async () => { await renderWithProfile( , - { combined, organizationProfileProps: { apiKeysProps: { hide: true } } }, + { organizationProfileProps: { apiKeysProps: { hide: true } } }, withOrganizationApiKeys, ); await clickSettings(switcherTrigger); expect(await selectedTab('General')).toBeInTheDocument(); - expect(tabs()).toEqual(expected); + expect(tabs()).toEqual(['General']); }); it("hands the provider's organization options to Clerk's modal without newProfiles", async () => { @@ -237,38 +228,53 @@ describe('the profile the switchers open', () => { }); it('opens a combined profile on the first organization page in the configured order', async () => { - await renderWithProfile(, { + await renderWithProfile(, { + userProfileUrl: '/account', organizationProfileProps: { customPages: [terms], pageOrder: ['terms'] }, }); - await clickSettings(switcherTrigger); + await chooseSetting(buttonTrigger, 'Manage organization'); expect(await selectedTab('Terms')).toBeInTheDocument(); }); it('skips a page this organization does not have when opening a combined profile', async () => { - await renderWithProfile(, { + await renderWithProfile(, { + userProfileUrl: '/account', organizationProfileProps: { pageOrder: ['apiKeys', 'members'] }, }); - await clickSettings(switcherTrigger); + await chooseSetting(buttonTrigger, 'Manage organization'); expect(await selectedTab('Members')).toBeInTheDocument(); }); it.each([ - { name: 'the button', ui: , trigger: buttonTrigger }, - { name: 'the switcher', ui: , trigger: switcherTrigger }, - ])('applies the custom pages and order set on the provider when $name opens it', async ({ ui, trigger }) => { - await renderWithProfile(ui, { - userProfileProps: { customPages: [terms], pageOrder: ['account', 'terms'] }, - organizationProfileProps: { customPages: [{ ...terms, label: 'Audit', path: 'audit' }], pageOrder: ['audit'] }, - }); - - await clickSettings(trigger); - - await waitFor(() => expect(tabs()).toEqual(['Account', 'Terms', 'Security', 'Audit', 'General', 'Members'])); - }); + { + name: 'the button', + ui: , + trigger: buttonTrigger, + expected: ['Account', 'Terms', 'Security'], + }, + { + name: 'the switcher', + ui: , + trigger: switcherTrigger, + expected: ['Audit', 'General', 'Members'], + }, + ])( + 'applies the custom pages and order set on the provider when $name opens it', + async ({ ui, trigger, expected }) => { + await renderWithProfile(ui, { + userProfileProps: { customPages: [terms], pageOrder: ['account', 'terms'] }, + organizationProfileProps: { customPages: [{ ...terms, label: 'Audit', path: 'audit' }], pageOrder: ['audit'] }, + }); + + await clickSettings(trigger); + + await waitFor(() => expect(tabs()).toEqual(expected)); + }, + ); it("hands the provider's custom pages to Clerk's modals without newProfiles", async () => { const { clerk } = await renderWithProfile( @@ -325,9 +331,9 @@ describe('a mounted OrganizationProfile under a provider profile', () => { }); }); -describe('a mounted UserProfile under a provider profile', () => { +describe('a mounted Profile under a provider profile', () => { it('fills in what its own organizationProfileProps leave out from the provider', async () => { - await renderWithProfile(, { + await renderWithProfile(, { organizationProfileProps: { customPages: [{ ...terms, label: 'Audit', path: 'audit' }], pageOrder: ['general'] }, }); @@ -335,7 +341,7 @@ describe('a mounted UserProfile under a provider profile', () => { }); it('lands where the provider says after leaving the organization', async () => { - const { navigate } = await renderWithProfile(, { + const { navigate } = await renderWithProfile(, { organizationProfileProps: { afterLeaveOrganizationUrl: '/left' }, }); await leaveOrganization(); @@ -344,18 +350,23 @@ describe('a mounted UserProfile under a provider profile', () => { }); it.each([ - { name: 'follows the provider', profile: separate, combined: undefined, expected: accountTabs }, - { name: 'defaults to combined', profile: undefined, combined: undefined, expected: allTabs }, - { name: 'wins over the provider when combined', profile: separate, combined: true, expected: allTabs }, - { name: 'wins over the provider when not', profile: { combined: true }, combined: false, expected: accountTabs }, - ])('$name', async ({ profile, combined, expected }) => { - await renderWithProfile(, profile); + { name: 'follows the provider', profile: separate, mode: undefined, expected: accountTabs }, + { name: 'defaults to combined', profile: undefined, mode: undefined, expected: allTabs }, + { name: 'wins over the provider when combined', profile: separate, mode: 'combined' as const, expected: allTabs }, + { + name: 'wins over the provider when user', + profile: { combined: true }, + mode: 'user' as const, + expected: accountTabs, + }, + ])('$name', async ({ profile, mode, expected }) => { + await renderWithProfile(, profile); await waitFor(() => expect(tabs()).toEqual(expected)); }); it("uses the provider's profile props", async () => { - await renderWithProfile(, { + await renderWithProfile(, { userProfileProps: { customPages: [terms] }, organizationProfileProps: { customPages: [{ ...terms, label: 'Audit', path: 'audit' }] }, }); @@ -364,7 +375,7 @@ describe('a mounted UserProfile under a provider profile', () => { }); it('lets its own props win over the provider', async () => { - await renderWithProfile(, { + await renderWithProfile(, { userProfileProps: { customPages: [terms] }, }); diff --git a/packages/mosaic/src/features/switcher/switcher.model.tsx b/packages/mosaic/src/features/switcher/switcher.model.tsx index e5695b73340..b88047440d0 100644 --- a/packages/mosaic/src/features/switcher/switcher.model.tsx +++ b/packages/mosaic/src/features/switcher/switcher.model.tsx @@ -92,7 +92,10 @@ export interface SwitcherProfileContext { userProfile: CustomPage[] | undefined; organizationProfile: CustomPage[] | undefined; }; - /** Which switchers the opening menu carries. Only a menu with both has one Settings row for two targets. */ + /** + * Which switchers the opening menu carries. Only a menu with both has one Settings row for two + * targets, and only it can open a combined profile. + */ menuMode: SwitcherMode; } @@ -143,6 +146,10 @@ function toMembership(organization: OrganizationResource): SwitcherMembership { }; } +function opensCombinedProfile(menuMode: SwitcherMode, { combined = true }: MosaicProfile): boolean { + return menuMode === 'combined' && combined; +} + function toSession(sessionId: string, user: UserResource): SwitcherSession { return { sessionId, @@ -173,13 +180,7 @@ export function useSwitcherModel( const userProfile = useModal(userProfileModal); const organizationProfile = useModal(organizationProfileModal); const { newProfiles } = useMosaicExperimental(); - const { - combined = true, - userProfileProps, - organizationProfileProps, - userProfileUrl, - organizationProfileUrl, - } = profile; + const { userProfileProps, organizationProfileProps, userProfileUrl, organizationProfileUrl } = profile; // The modal must portal into the app's own dialog root, or it renders behind the surface that opened it. const getContainer = useGetPortalContainer(); const environment = useMosaicEnvironment(); @@ -191,7 +192,8 @@ export function useSwitcherModel( enabled: Boolean(environment?.organizationSettings.enabled), }); - const mosaicUserProfile = userProfileModalOptions(profile); + const profileCombined = opensCombinedProfile(menuMode, profile); + const mosaicUserProfile = userProfileModalOptions({ ...profile, combined: profileCombined }); const manageAccount = openOrNavigate({ url: userProfileUrl, @@ -218,7 +220,7 @@ export function useSwitcherModel( afterLeaveOrganizationUrl: organizationProfileProps?.afterLeaveOrganizationUrl, apiKeysProps: organizationProfileProps?.apiKeysProps, }); - } else if (combined) { + } else if (profileCombined) { userProfile.open( { ...mosaicUserProfile, @@ -234,8 +236,7 @@ export function useSwitcherModel( navigate: router.navigate, }); - const managesBothInOneProfile = - newProfiles && menuMode === 'combined' && combined && !userProfileUrl && !organizationProfileUrl; + const managesBothInOneProfile = newProfiles && profileCombined && !userProfileUrl && !organizationProfileUrl; const createOrganization = openOrNavigate({ url: options.createOrganizationUrl, diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile.feature.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile.feature.test.tsx index 7fbbdb778f2..eaf0fc37584 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile.feature.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile.feature.test.tsx @@ -1,4 +1,4 @@ -import { act, screen, waitFor, within } from '@testing-library/react'; +import { screen, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { beforeAll, describe, expect, it } from 'vitest'; import { page } from 'vitest/browser'; @@ -130,6 +130,15 @@ describe('UserProfile', () => { expect(screen.getByRole('tab', { name: 'Account' })).toHaveAttribute('aria-selected', 'true'); }); + it("adds the provider's account pages", async () => { + serve(); + await renderWithClerk(, undefined, undefined, undefined, { + userProfileProps: { customPages: [{ path: 'usage', label: 'Usage', content:

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(); @@ -141,192 +150,16 @@ describe('UserProfile', () => { }); describe('UserProfile with an active organization', () => { - const acme = fapiOrganization({ id: 'org_1', name: 'Acme' }); - - function serveWithOrganization({ - permissions = ['org:sys_memberships:read'], - userAPIKeysEnabled = false, - orgAPIKeysEnabled = false, - activeOrganizationId = acme.id, - }: { - permissions?: string[]; - userAPIKeysEnabled?: boolean; - orgAPIKeysEnabled?: boolean; - activeOrganizationId?: string | null; - } = {}) { - const memberships = [fapiMembership(acme, { permissions })]; - const user = fapiUser({ id: 'user_1', organization_memberships: memberships }); - return serveFapi({ - environment: fapiEnvironment({ - api_keys_settings: { user_api_keys_enabled: userAPIKeysEnabled, orgs_api_keys_enabled: orgAPIKeysEnabled }, - }), - client: fapiClient([fapiSession({ id: 'sess_1', user, last_active_organization_id: activeOrganizationId })]), - memberships, - }); - } - - function tabsDescribedBy(description: string) { - return screen - .getAllByRole('tab') - .filter(tab => tab.getAttribute('aria-describedby') !== null) - .filter(tab => document.getElementById(tab.getAttribute('aria-describedby') ?? '')?.textContent === description) - .map(tab => tab.textContent); - } - - it('lists the organization pages under Organization after the account pages', async () => { - serveWithOrganization(); - await renderWithClerk(); - expect(tabsDescribedBy('Account')).toEqual(['Account', 'Security']); - expect(tabsDescribedBy('Organization')).toEqual(['General', 'Members']); - }); - - it('lists only the organization pages the user may see', async () => { - serveWithOrganization({ permissions: [] }); - await renderWithClerk(); - expect(tabsDescribedBy('Organization')).toEqual(['General']); - }); - - it.each([ - { hide: true, tabs: ['General'] }, - { hide: false, tabs: ['General', 'API Keys'] }, - ])('lists the organization API keys only when they are not hidden: $hide', async ({ hide, tabs }) => { - serveWithOrganization({ orgAPIKeysEnabled: true, permissions: ['org:sys_api_keys:read'] }); - await renderWithClerk(); - expect(tabsDescribedBy('Organization')).toEqual(tabs); - }); - - it('sends the user to afterLeaveOrganizationUrl after leaving the organization', async () => { - const fapi = serveWithOrganization(); - const { navigate } = await renderWithClerk( - , - ); - const user = userEvent.setup(); - const dialog = await openDialog(user, await screen.findByRole('button', { name: 'Leave organization' }), { - role: 'alertdialog', - }); - - await user.type(within(dialog).getByRole('textbox'), 'Acme'); - await user.click(within(dialog).getByRole('button', { name: 'Leave organization' })); - - await waitFor(() => expect(fapi.memberships).toHaveLength(0)); - await waitFor(() => expect(navigate).toHaveBeenCalledWith('/organizations')); - }); - - it('lists only the account pages when not combined', async () => { - serveWithOrganization(); - await renderWithClerk(); - expect(tabNames()).toEqual(['Account', 'Security']); - }); - - it('lists only the account pages without an active organization', async () => { - serveWithOrganization({ activeOrganizationId: null }); - await renderWithClerk(); - expect(tabNames()).toEqual(['Account', 'Security']); - }); - - it('opens on an organization page by its prefixed id', async () => { - serveWithOrganization(); - await renderWithClerk(); - expect(screen.getByRole('tab', { name: 'Members', description: 'Organization' })).toHaveAttribute( - 'aria-selected', - 'true', - ); - expect(screen.getByRole('heading', { level: 3, name: 'Members' })).toBeVisible(); - }); - - it('opens the organization page that shares an account page name', async () => { - serveWithOrganization(); - await renderWithClerk( - Organization security

}], - }} - />, - ); - const user = userEvent.setup(); - - await user.click(screen.getByRole('tab', { name: 'Security', description: 'Organization' })); - expect(screen.getByText('Organization security')).toBeVisible(); - }); - - it('skips an account page whose path is an organization page id', async () => { - serveWithOrganization(); - await renderWithClerk( - Imposter content

}]} - />, - ); - - expect(tabNames()).toEqual(['Account', 'Security', 'General', 'Members']); - expect(screen.getByRole('tab', { name: 'General', description: 'Organization' })).toHaveAttribute( - 'aria-selected', - 'true', - ); - expect(screen.queryByText('Imposter content')).not.toBeInTheDocument(); - }); - - it('passes the organization options to its pages', async () => { - serveWithOrganization(); - await renderWithClerk( - Audit content

}], - pageOrder: ['audit'], - }} - />, - ); - expect(tabsDescribedBy('Organization')).toEqual(['Audit log', 'General', 'Members']); - }); - - it('keeps the shown page after the open organization page leaves the navigation', async () => { - const globex = fapiOrganization({ id: 'org_2', name: 'Globex' }); - const memberships = [ - fapiMembership(acme, { permissions: ['org:sys_memberships:read'] }), - fapiMembership(globex, { permissions: [] }), - ]; + it('lists only the account pages', async () => { + const acme = fapiOrganization({ id: 'org_1', name: 'Acme' }); + const memberships = [fapiMembership(acme)]; const user = fapiUser({ id: 'user_1', organization_memberships: memberships }); serveFapi({ environment: fapiEnvironment(), client: fapiClient([fapiSession({ id: 'sess_1', user, last_active_organization_id: acme.id })]), memberships, }); - const { clerk } = await renderWithClerk(); - - await act(() => clerk.setActive({ organization: globex.id })); - await waitFor(() => expect(tabsDescribedBy('Organization')).toEqual(['General'])); - await act(() => clerk.setActive({ organization: acme.id })); - await waitFor(() => expect(tabsDescribedBy('Organization')).toEqual(['General', 'Members'])); - - expect(screen.getByRole('tab', { name: 'Account', description: 'Account' })).toHaveAttribute( - 'aria-selected', - 'true', - ); - }); - - it('stays on the organization page when the next organization lists it too', async () => { - const globex = fapiOrganization({ id: 'org_2', name: 'Globex' }); - const memberships = [ - fapiMembership(acme, { permissions: ['org:sys_memberships:read'] }), - fapiMembership(globex, { permissions: ['org:sys_memberships:read'] }), - ]; - const user = fapiUser({ id: 'user_1', organization_memberships: memberships }); - serveFapi({ - environment: fapiEnvironment(), - client: fapiClient([fapiSession({ id: 'sess_1', user, last_active_organization_id: acme.id })]), - memberships, - }); - const { clerk } = await renderWithClerk(); - - await act(() => clerk.setActive({ organization: globex.id })); - await waitFor(() => expect(clerk.organization?.id).toBe(globex.id)); - - expect(screen.getByRole('tab', { name: 'Members', description: 'Organization' })).toHaveAttribute( - 'aria-selected', - 'true', - ); + await renderWithClerk(); + expect(tabNames()).toEqual(['Account', 'Security']); }); }); diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile.modal-return.feature.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile.modal-return.feature.test.tsx index 1c2532650fc..04adac2b49d 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile.modal-return.feature.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile.modal-return.feature.test.tsx @@ -175,9 +175,9 @@ describe('UserProfile modal return', () => { }); } - async function tabsAfterReturning(profile: MosaicProfile) { + async function tabsAfterReturning(profile: MosaicProfile, param = 'user-profile%2Faccount') { serveInOrganization(); - visit('?__clerk_mosaic_modal=user-profile%2Faccount'); + visit(`?__clerk_mosaic_modal=${param}`); 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 => { const url = response.verification?.externalVerificationRedirectURL; diff --git a/packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-email-section.model.ts b/packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-email-section.model.ts index fd4419a5ac8..e66eceb1f85 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-email-section.model.ts +++ b/packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-email-section.model.ts @@ -36,7 +36,7 @@ function startEmailVerification( email: EmailAddressResource, linkRedirectUrl: string | undefined, router: MosaicRouter, - mode: UserProfileOptions['mode'], + profile: Pick, ): UserProfileEmailVerification { if (email.matchesSsoConnection) { return { @@ -50,7 +50,7 @@ function startEmailVerification( save(async () => { const prepared = await email.prepareVerification({ strategy: 'enterprise_sso', - redirectUrl: withUserProfileModalReturn(window.location.href, mode), + redirectUrl: withUserProfileModalReturn(window.location.href, profile), }); const url = prepared.verification.externalVerificationRedirectURL; if (!url) { @@ -75,10 +75,10 @@ function toEmailVerifier( email: EmailAddressResource, linkRedirectUrl: string | undefined, router: MosaicRouter, - mode: UserProfileOptions['mode'], + profile: Pick, ): UserProfileEmailVerifier { return { - start: () => startEmailVerification(email, linkRedirectUrl, router, mode), + start: () => startEmailVerification(email, linkRedirectUrl, router, profile), verifyCode: code => save(() => email.attemptVerification({ code }), ADD_EMAIL_FIELDS), }; } @@ -86,7 +86,7 @@ function toEmailVerifier( export function useUserProfileEmailSectionModel(): UserProfileEmailSectionModel { const model = useUserProfileUserModel(); const router = useMosaicRouter(); - const { mode } = useUserProfileOptions(); + const { mode, combined } = useUserProfileOptions(); const [removeEmail, removeReverification] = useReverificationFlow((user: UserResource, id: string) => byId(user.emailAddresses, id, 'email address').destroy(), ); @@ -115,7 +115,8 @@ export function useUserProfileEmailSectionModel(): UserProfileEmailSectionModel const verifiesByLink = Boolean(attributes.email_address?.verifications.includes('email_link')); const linkRedirectUrl = verifiesByLink ? verifyRedirectUrl(environment.displayConfig.userProfileUrl) : undefined; - const verifierFor = (email: EmailAddressResource) => toEmailVerifier(email, linkRedirectUrl, router, mode); + const verifierFor = (email: EmailAddressResource) => + toEmailVerifier(email, linkRedirectUrl, router, { mode, combined }); return { status: 'ready', diff --git a/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.model.ts b/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.model.ts index 0c43e042e4e..b2c45aff52c 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.model.ts +++ b/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.model.ts @@ -83,7 +83,7 @@ export type UserProfileEnterpriseAccountsModel = }; export function useUserProfileEnterpriseAccountsModel(): UserProfileEnterpriseAccountsModel { - const { mode } = useUserProfileOptions(); + const { mode, combined } = useUserProfileOptions(); const clerk = useClerk(); const router = useMosaicRouter(); const [createAccount, connectReverification] = useReverificationFlow( @@ -137,7 +137,7 @@ export function useUserProfileEnterpriseAccountsModel(): UserProfileEnterpriseAc if (!projection.connections.some(connection => connection.id === connectionId)) { throw unavailable(); } - const redirectUrl = withUserProfileModalReturn(window.location.href, mode); + const redirectUrl = withUserProfileModalReturn(window.location.href, { mode, combined }); const account = await createAccount(current, { enterpriseConnectionId: connectionId, redirectUrl }); currentUser(); const redirect = account.verification?.externalVerificationRedirectURL; diff --git a/packages/mosaic/src/features/user-profile/user-profile.modal-content.tsx b/packages/mosaic/src/features/user-profile/user-profile.modal-content.tsx index c9d35d442de..d869390ea4f 100644 --- a/packages/mosaic/src/features/user-profile/user-profile.modal-content.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile.modal-content.tsx @@ -1,7 +1,7 @@ import { useUser } from '@clerk/shared/react'; import React from 'react'; -import { UserProfileSurface } from './user-profile'; +import { UserProfileSurface } from '../profile/profile'; import type { UserProfileModalContentProps } from './user-profile.modal.types'; export default function UserProfileModalContent({ options, close }: UserProfileModalContentProps): React.ReactElement { @@ -14,10 +14,11 @@ export default function UserProfileModalContent({ options, close }: UserProfileM } }, [signedOut, close]); - const { page, ...props } = options ?? {}; + const { page, combined = true, ...props } = options ?? {}; return ( diff --git a/packages/mosaic/src/features/user-profile/user-profile.modal-return.ts b/packages/mosaic/src/features/user-profile/user-profile.modal-return.ts index d0fd10c14f4..64b62722a62 100644 --- a/packages/mosaic/src/features/user-profile/user-profile.modal-return.ts +++ b/packages/mosaic/src/features/user-profile/user-profile.modal-return.ts @@ -6,14 +6,18 @@ import { userProfileModal } from './user-profile.modal'; import type { UserProfileOptions } from './user-profile.provider'; const MODAL_PARAM = '__clerk_mosaic_modal'; -const ACCOUNT_PAGE = 'user-profile/account'; +const USER_ACCOUNT_PAGE = 'user-profile/account'; +const COMBINED_ACCOUNT_PAGE = 'profile/account'; -export function withUserProfileModalReturn(url: string, mode: UserProfileOptions['mode']): string { +export function withUserProfileModalReturn( + url: string, + { mode, combined = false }: Pick, +): string { if (mode !== 'modal') { return url; } const next = new URL(url); - next.searchParams.set(MODAL_PARAM, ACCOUNT_PAGE); + next.searchParams.set(MODAL_PARAM, combined ? COMBINED_ACCOUNT_PAGE : USER_ACCOUNT_PAGE); return next.toString(); } @@ -24,12 +28,13 @@ export function UserProfileModalReturn(): null { React.useEffect(() => { queueMicrotask(() => { const url = new URL(window.location.href); - if (url.searchParams.get(MODAL_PARAM) !== ACCOUNT_PAGE) { + const page = url.searchParams.get(MODAL_PARAM); + if (page !== USER_ACCOUNT_PAGE && page !== COMBINED_ACCOUNT_PAGE) { return; } url.searchParams.delete(MODAL_PARAM); window.history.replaceState(withoutNextAppRouterMarker(window.history.state), '', url); - open({ ...userProfileModalOptions(profile), page: 'account' }); + open({ ...userProfileModalOptions(profile), combined: page === COMBINED_ACCOUNT_PAGE, page: 'account' }); }); }, [open, profile]); diff --git a/packages/mosaic/src/features/user-profile/user-profile.modal.types.ts b/packages/mosaic/src/features/user-profile/user-profile.modal.types.ts index c1c8d1e51b0..84d29e4f5e7 100644 --- a/packages/mosaic/src/features/user-profile/user-profile.modal.types.ts +++ b/packages/mosaic/src/features/user-profile/user-profile.modal.types.ts @@ -1,11 +1,12 @@ import type { ModalContentProps } from '../../modals/modal.types'; -import type { UserProfileProps } from './user-profile'; +import type { CombinedProfileProps } from '../profile/profile'; export interface UserProfileModalOptions extends Pick< - UserProfileProps, - 'customPages' | 'pageOrder' | 'additionalOAuthScopes' | 'apiKeysProps' | 'combined' | 'organizationProfileProps' + CombinedProfileProps, + 'customPages' | 'pageOrder' | 'additionalOAuthScopes' | 'apiKeysProps' | 'organizationProfileProps' > { - page?: UserProfileProps['defaultPage']; + combined?: boolean; + page?: CombinedProfileProps['defaultPage']; } export type UserProfileModalContentProps = ModalContentProps; diff --git a/packages/mosaic/src/features/user-profile/user-profile.provider.tsx b/packages/mosaic/src/features/user-profile/user-profile.provider.tsx index 5c2d61616fe..add24253b09 100644 --- a/packages/mosaic/src/features/user-profile/user-profile.provider.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile.provider.tsx @@ -11,6 +11,7 @@ export interface UserProfileOptions { */ additionalOAuthScopes?: AdditionalOAuthScopes; mode?: 'modal' | 'mounted'; + combined?: boolean; } export interface UserProfileProviderProps extends UserProfileOptions { @@ -19,8 +20,12 @@ export interface UserProfileProviderProps extends UserProfileOptions { const UserProfileContext = createContext({}); -export function UserProfileProvider({ additionalOAuthScopes, mode, children }: UserProfileProviderProps) { - return {children}; +export function UserProfileProvider({ additionalOAuthScopes, mode, combined, children }: UserProfileProviderProps) { + return ( + + {children} + + ); } export function useUserProfileOptions(): UserProfileOptions { diff --git a/packages/mosaic/src/features/user-profile/user-profile.tsx b/packages/mosaic/src/features/user-profile/user-profile.tsx index 754efaa863e..74699d4c9ce 100644 --- a/packages/mosaic/src/features/user-profile/user-profile.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile.tsx @@ -3,22 +3,9 @@ import type { ReactNode } from 'react'; import type { APIKeysPageProps } from '../api-keys/api-keys-table'; -import type { OrganizationProfileProps } from '../organization-profile/organization-profile'; -import { organizationProfilePanels } from '../organization-profile/organization-profile'; -import { useOrganizationProfileModel } from '../organization-profile/organization-profile.model'; -import { OrganizationProfileProvider } from '../organization-profile/organization-profile.provider'; -import { useProfilePagesController } from '../profile-pages/profile-pages.controller'; -import { useMosaicProfile } from '../profile-pages/use-mosaic-profile'; -import { useUserProfilePages } from '../switcher/switcher.pages'; -import { ORGANIZATION_PAGE_PREFIX, userProfilePageIds } from './user-profile.layout'; +import { Profile } from '../profile/profile'; import type { UserProfileOptions } from './user-profile.provider'; -import { UserProfileProvider } from './user-profile.provider'; import type { UserProfileViewProps } from './user-profile.view'; -import { UserProfileView } from './user-profile.view'; -import { UserProfileApiKeysPanel } from './user-profile-api-keys-panel'; -import { UserProfileProfilePanel } from './user-profile-profile-panel'; -import { UserProfileSecurityPanel } from './user-profile-security-panel'; -import { useUserProfileUserModel } from './user-profile-user.model'; /** Everything `` takes: your own pages and their order, the page it opens on, and the OAuth scopes it asks for. */ export interface UserProfileProps @@ -40,27 +27,12 @@ export interface UserProfileProps * keys a page lists, and `showDescription` adds an optional description when creating a key. */ apiKeysProps?: APIKeysPageProps; - /** - * Whether the surface adds the active organization's pages after the account's. `false` shows the - * account's alone, even when an organization is active. - * - * @default `MosaicProvider`'s `profile.combined`, which is `true` unless set - */ - combined?: boolean; - /** - * Options for the organization's pages when `combined`: your own pages and their order, the API - * keys page, and where leaving the organization lands. `pageOrder` names the organization's pages - * without the `organization/` prefix, as in `['members', 'general']`. - */ - organizationProfileProps?: Pick< - OrganizationProfileProps, - 'customPages' | 'pageOrder' | 'apiKeysProps' | 'afterLeaveOrganizationUrl' - >; } /** * The signed-in user's profile: Account, Security, and API keys when the instance enables them, - * with your own pages alongside, and the active organization's pages after them. It reads the user from Clerk, so it takes no data. It renders + * with your own pages alongside. It is ``, so it never lists the active + * organization's pages. It reads the user from Clerk, so it takes no data. It renders * `fallback` until Clerk answers, and nothing at all when nobody is signed in. * * @example @@ -76,29 +48,12 @@ export interface UserProfileProps * ``` * * @example - * `defaultPage` picks the page the profile opens on without moving it in the navigation. An - * organization page's id is prefixed with `organization/`. + * `defaultPage` picks the page the profile opens on without moving it in the navigation. * ```tsx * * ``` * * @example - * `combined={false}` leaves the active organization's pages out. - * ```tsx - * - * ``` - * - * @example - * `organizationProfileProps` adds your own pages to the organization's group. - * ```tsx - * , content: }], - * }} - * /> - * ``` - * - * @example * `customPages` adds your own pages; `pageOrder` places them among the built-in ones. * ```tsx * * ``` */ -export function UserProfile(props: UserProfileProps) { - const { combined, userProfileProps, organizationProfileProps: providerOrganization } = useMosaicProfile(); - const { - combined: ownCombined = combined, - customPages = userProfileProps?.customPages, - pageOrder = userProfileProps?.pageOrder, - additionalOAuthScopes = userProfileProps?.additionalOAuthScopes, - apiKeysProps = userProfileProps?.apiKeysProps, - organizationProfileProps: { - customPages: organizationCustomPages = providerOrganization?.customPages, - pageOrder: organizationPageOrder = providerOrganization?.pageOrder, - apiKeysProps: organizationApiKeysProps = providerOrganization?.apiKeysProps, - afterLeaveOrganizationUrl = providerOrganization?.afterLeaveOrganizationUrl, - } = {}, - ...rest - } = props; - - return ( - - ); -} - -export function UserProfileSurface({ - presentation, - combined = true, - organizationProfileProps, - customPages, - pageOrder, - defaultPage, - additionalOAuthScopes, - fallback, - apiKeysProps: { hide: hideAPIKeys = false, ...apiKeysProps } = {}, -}: UserProfileProps & { presentation: NonNullable }) { - const model = useUserProfileUserModel(); - const builtInPages = useUserProfilePages(); - - if (model.status === 'loading') { - return fallback ?? null; - } - if (model.status === 'hidden') { - return null; - } - - const viewProps: AccountViewProps = { - elevation: 'flush', - initialPage: defaultPage ?? pageOrder?.[0] ?? 'account', - customPages, - pageOrder, - pages: { - account: , - security: , - apiKeys: - builtInPages.includes('apiKeys') && !hideAPIKeys ? : undefined, - }, - }; - - return ( - - {combined ? ( - - ) : ( - - )} - - ); -} - -type AccountViewProps = Omit & { - initialPage: UserProfileViewProps['activePage']; -}; - -function AccountUserProfileView({ initialPage, ...viewProps }: AccountViewProps) { - const navigation = useProfilePagesController(initialPage, userProfilePageIds(viewProps)); - +export function UserProfile(props: UserProfileProps): ReactNode { return ( - ); } - -function CombinedUserProfileView({ - initialPage, - organizationProfileProps: { customPages, pageOrder, apiKeysProps, afterLeaveOrganizationUrl } = {}, - ...viewProps -}: AccountViewProps & Pick) { - const model = useOrganizationProfileModel(); - const organization = - model.status === 'ready' - ? { pages: organizationProfilePanels(model.pages, apiKeysProps), customPages, pageOrder } - : undefined; - const pageIds = model.status === 'loading' ? undefined : userProfilePageIds({ ...viewProps, organization }); - const navigation = useProfilePagesController( - initialPage, - pageIds, - initialPage.startsWith(ORGANIZATION_PAGE_PREFIX) - ? pageIds?.find(id => id.startsWith(ORGANIZATION_PAGE_PREFIX)) - : undefined, - ); - - return ( - - - - ); -} diff --git a/packages/mosaic/src/index.ts b/packages/mosaic/src/index.ts index ed6c2cfc002..82546b92007 100644 --- a/packages/mosaic/src/index.ts +++ b/packages/mosaic/src/index.ts @@ -13,6 +13,8 @@ export { UserAvatar } from './features/user-avatar/user-avatar'; export { OrganizationSwitcher } from './features/organization-switcher/organization-switcher'; export type { OrganizationProfileProps } from './features/organization-profile/organization-profile'; export { OrganizationProfile } from './features/organization-profile/organization-profile'; +export type { CombinedProfileProps, ProfileMode, ProfileProps } from './features/profile/profile'; +export { Profile } from './features/profile/profile'; export type { UserProfileProps } from './features/user-profile/user-profile'; export { UserProfile } from './features/user-profile/user-profile'; export type { MosaicProfile } from './features/profile-pages/use-mosaic-profile'; diff --git a/packages/swingset/src/app/(clerk)/live/profile/profile/page.tsx b/packages/swingset/src/app/(clerk)/live/profile/profile/page.tsx new file mode 100644 index 00000000000..1c4d6dc5259 --- /dev/null +++ b/packages/swingset/src/app/(clerk)/live/profile/profile/page.tsx @@ -0,0 +1,34 @@ +'use client'; + +import { Profile } from '@clerk/mosaic/features/profile/profile'; +import { MosaicProvider } from '@clerk/mosaic/mosaic-provider'; +import { useUser } from '@clerk/nextjs'; +import Link from 'next/link'; + +import { LivePageHeader } from '../../../live-page-header'; + +export default function ProfileLivePage() { + const { isLoaded, isSignedIn } = useUser(); + + return ( + +
+ + The connected profile: the signed-in account's pages, then the active organization's. + + {isLoaded && !isSignedIn ? ( +

+ + Sign in + {' '} + to use the live harness. +

+ ) : null} + Loading…

} /> +
+ + ); +} diff --git a/packages/swingset/src/components/Composition.tsx b/packages/swingset/src/components/Composition.tsx index dd6011cb889..c68a00d505e 100644 --- a/packages/swingset/src/components/Composition.tsx +++ b/packages/swingset/src/components/Composition.tsx @@ -15,6 +15,7 @@ export interface CompositionPiece { // Matches the sidebar group names. const LAYER_ORDER = [ 'Switcher', + 'Profile', 'User Profile', 'Organization Profile', 'Misc', diff --git a/packages/swingset/src/components/DocsViewer.tsx b/packages/swingset/src/components/DocsViewer.tsx index 185eb4aba2e..5e0233b0099 100644 --- a/packages/swingset/src/components/DocsViewer.tsx +++ b/packages/swingset/src/components/DocsViewer.tsx @@ -12,6 +12,9 @@ const docModules: Record> = { switcher: { switcher: dynamic(() => import('../stories/switcher.mdx')), }, + profile: { + profile: dynamic(() => import('../stories/profile.mdx')), + }, 'user-profile': { 'user-profile': dynamic(() => import('../stories/user-profile.mdx')), 'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')), diff --git a/packages/swingset/src/lib/live-navigation.ts b/packages/swingset/src/lib/live-navigation.ts index a89ca7e92b6..96e9c72eaff 100644 --- a/packages/swingset/src/lib/live-navigation.ts +++ b/packages/swingset/src/lib/live-navigation.ts @@ -15,6 +15,7 @@ type LiveSidebarGroup = { }; const livePages = new Set([ + '/profile/profile', '/user-profile/user-profile', '/user-profile/user-profile-profile-panel', '/user-profile/user-profile-security-panel', diff --git a/packages/swingset/src/lib/registry.ts b/packages/swingset/src/lib/registry.ts index 6bf90ed8e1a..c23edf58155 100644 --- a/packages/swingset/src/lib/registry.ts +++ b/packages/swingset/src/lib/registry.ts @@ -260,6 +260,7 @@ import { meta as profileComponentMeta, Transitions as ProfileTransitions, } from '../stories/profile.component.stories'; +import { Default as ProfileFeatureDefault, meta as profileFeatureMeta } from '../stories/profile.stories'; import { Default as ProviderButtonDefault, Many as ProviderButtonMany, @@ -1075,6 +1076,11 @@ const userProfileApiKeysPanelModule: StoryModule = { Default: UserProfileApiKeysPanelDefault, Empty: UserProfileApiKeysPanelEmpty, }; +const profileFeatureModule: StoryModule = { + meta: profileFeatureMeta, + Default: ProfileFeatureDefault, +}; + const userProfileModule: StoryModule = { meta: userProfileMeta, Default: UserProfileDefault, @@ -1280,6 +1286,8 @@ const organizationProfileMembersPanelModule: StoryModule = { export const registry: StoryModule[] = [ // Switcher switcherModule, + // Profile + profileFeatureModule, // User Profile userProfileModule, // User Profile · Panels diff --git a/packages/swingset/src/stories/mosaic-provider.mdx b/packages/swingset/src/stories/mosaic-provider.mdx index 2d62e1e6840..20b3b278d22 100644 --- a/packages/swingset/src/stories/mosaic-provider.mdx +++ b/packages/swingset/src/stories/mosaic-provider.mdx @@ -54,15 +54,16 @@ themselves. ``` -`combined` on `MosaicProvider` decides what the profile shows, and the button you pick (`Switcher`, -`UserButton` or `OrganizationSwitcher`) decides what its menu lists. +The button you pick (`Switcher`, `UserButton` or `OrganizationSwitcher`) decides what its menu lists and +which profile it opens. `combined` on `MosaicProvider` decides whether a combined `Switcher` opens one +profile or two, and what a `` without a `mode` shows. `profile.combined` takes effect only with `experimental.newProfiles`. Without it, `Switcher`, `UserButton` and `OrganizationSwitcher` open Clerk's modals. | Option | Type | Default | Description | | -------------------------- | -------------------------- | ------- | --------------------------------------------------------------------------------- | -| `combined` | `boolean` | `true` | Whether one profile carries the account's pages and the active organization's. | +| `combined` | `boolean` | `true` | Whether a combined menu, or a `` without a `mode`, shows both groups. | | `userProfileUrl` | `string` | — | Your own user profile page. Setting it routes there instead of opening the modal. | | `organizationProfileUrl` | `string` | — | Your own organization profile page. Setting it routes there instead of the modal. | | `userProfileProps` | `ProfileUserProps` | — | Options for the user profile. | diff --git a/packages/swingset/src/stories/profile.mdx b/packages/swingset/src/stories/profile.mdx new file mode 100644 index 00000000000..e47f8a6c491 --- /dev/null +++ b/packages/swingset/src/stories/profile.mdx @@ -0,0 +1,17 @@ +import * as Stories from './profile.stories'; + +# Profile + +The signed-in user's profile. In `combined` mode, the default, it lists the account's pages and then +the active organization's. `mode='user'` shows the account's pages alone, as `UserProfile` does, and +`mode='organization'` shows the organization's alone, as `OrganizationProfile` does. Without a +`mode`, `MosaicProvider`'s `profile.combined: false` shows the account's pages alone. + + diff --git a/packages/swingset/src/stories/profile.stories.tsx b/packages/swingset/src/stories/profile.stories.tsx new file mode 100644 index 00000000000..5b32aaeaab5 --- /dev/null +++ b/packages/swingset/src/stories/profile.stories.tsx @@ -0,0 +1,30 @@ +import { UserProfileView } from '@clerk/mosaic/features/user-profile/user-profile.view'; + +import type { StoryMeta } from '@/lib/types'; + +import { useOrganizationProfileFixture } from './fixtures/organization-profile'; +import { useUserProfileFixture } from './fixtures/user-profile'; + +export { default as __source } from './profile.stories?raw'; + +export const meta: StoryMeta = { + group: 'Profile', + status: 'wip', + title: 'Profile', + layout: 'wide', + source: 'packages/mosaic/src/features/profile/profile.tsx', +}; + +export function Default() { + const { activePage, setActivePage, pages } = useUserProfileFixture(); + const organization = useOrganizationProfileFixture(); + return ( + + ); +} From bd4ef2879d109526dc3f003f9da4b1427de84069 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 10 Nov 2026 19:26:37 -0500 Subject: [PATCH 6/6] docs(swingset): say profile.combined reaches a mode-less Profile without newProfiles --- packages/swingset/src/stories/mosaic-provider.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/swingset/src/stories/mosaic-provider.mdx b/packages/swingset/src/stories/mosaic-provider.mdx index 20b3b278d22..1b6ac9d5f35 100644 --- a/packages/swingset/src/stories/mosaic-provider.mdx +++ b/packages/swingset/src/stories/mosaic-provider.mdx @@ -58,8 +58,9 @@ The button you pick (`Switcher`, `UserButton` or `OrganizationSwitcher`) decides which profile it opens. `combined` on `MosaicProvider` decides whether a combined `Switcher` opens one profile or two, and what a `` without a `mode` shows. -`profile.combined` takes effect only with `experimental.newProfiles`. Without it, `Switcher`, `UserButton` and -`OrganizationSwitcher` open Clerk's modals. +For `Switcher`, `UserButton` and `OrganizationSwitcher`, `profile.combined` takes effect only with +`experimental.newProfiles`. Without it, they open Clerk's modals. A `` without a `mode` follows +`profile.combined` either way. | Option | Type | Default | Description | | -------------------------- | -------------------------- | ------- | --------------------------------------------------------------------------------- |