feat(mosaic): Move profile URLs and leave options to MosaicProvider

Author: alexcarpenter

.changeset/mosaic-profile-provider.md

@@ -15,6 +15,8 @@ Breaking changes:
 
 - `UserButton`: `mode` is replaced by `combined`, which only decides what the menu lists. `mode='user'` becomes `combined={false}`, and to keep the account-only profile too, also set `profile={{ combined: false }}` on `MosaicProvider`.
 - `UserButton` and `OrganizationSwitcher`: `userProfileProps` and `organizationProfileProps` move to `MosaicProvider`'s `profile`.
-- `UserProfile`: `mode` is replaced by `combined`. When unset it follows `profile.combined`, and it also picks up the provider's profile props, with its own props winning.
+- `UserButton` and `OrganizationSwitcher`: `userProfileUrl`, `userProfileMode`, `organizationProfileUrl` and `organizationProfileMode` move to `MosaicProvider`'s `profile`.
+- `UserButton` and `OrganizationSwitcher`: `afterLeaveOrganizationUrl` moves to `profile.organizationProfileProps`, which also takes `apiKeysProps`.
+- `UserProfile`: `mode` is replaced by `combined`. When unset it follows `profile.combined`, and it also picks up the provider's profile props, with its own props winning. `OrganizationProfile` picks them up the same way.
 - With `experimental.newProfiles`, `OrganizationSwitcher` now opens the combined profile by default. Set `profile={{ combined: false }}` for the standalone organization profile.
 - The `UserProfileMode` type is removed.

packages/mosaic/src/features/organization-profile/organization-profile.tsx

@@ -4,6 +4,8 @@ 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 { pagesOnly } from '../switcher/switcher.pages';
 import { organizationProfilePageIds } from './organization-profile.layout';
 import { useOrganizationProfileModel } from './organization-profile.model';
 import type { OrganizationProfileOptions } from './organization-profile.provider';
@@ -79,14 +81,16 @@ export interface OrganizationProfileProps
  * <OrganizationProfile afterLeaveOrganizationUrl='/organizations' />
  * ```
  */
-export function OrganizationProfile({
-  customPages,
-  pageOrder,
-  defaultPage,
-  afterLeaveOrganizationUrl,
-  fallback,
-  apiKeysProps,
-}: OrganizationProfileProps) {
+export function OrganizationProfile(props: OrganizationProfileProps) {
+  const { organizationProfileProps } = useMosaicProfile();
+  const {
+    customPages = pagesOnly(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(

packages/mosaic/src/features/organization-switcher/__tests__/organization-switcher.feature.test.tsx

@@ -17,6 +17,7 @@ import {
   fapiUser,
 } 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 { OrganizationSwitcher } from '../organization-switcher';
 
@@ -67,9 +68,13 @@ function tree(props: OrganizationSwitcherProps = {}) {
   );
 }
 
-function renderSwitcher(props: OrganizationSwitcherProps = {}, seed: FakeFapiSeed = signedIn()) {
+function renderSwitcher(
+  props: OrganizationSwitcherProps = {},
+  seed: FakeFapiSeed = signedIn(),
+  profile?: MosaicProfile,
+) {
   const fapi = serveFapi(seed);
-  return renderWithClerk(tree(props)).then(view => ({ ...view, fapi }));
+  return renderWithClerk(tree(props), undefined, undefined, undefined, profile).then(view => ({ ...view, fapi }));
 }
 
 const host = () => screen.getByTestId('host');
@@ -218,7 +223,9 @@ describe('OrganizationSwitcher', () => {
     });
 
     it('tells the organization profile where to land after leaving', async () => {
-      const { clerk } = await renderSwitcher({ afterLeaveOrganizationUrl: '/left' }, noOffers());
+      const { clerk } = await renderSwitcher({}, noOffers(), {
+        organizationProfileProps: { afterLeaveOrganizationUrl: '/left' },
+      });
       const openOrganizationProfile = vi.spyOn(clerk, 'openOrganizationProfile').mockImplementation(() => {});
       const user = await openWithList();
 
@@ -377,11 +384,11 @@ describe('OrganizationSwitcher custom trigger badges', () => {
 });
 
 describe('OrganizationSwitcher with experimental.newProfiles', () => {
-  async function renderWithNewProfiles(props: OrganizationSwitcherProps = {}) {
+  async function renderWithNewProfiles(profile: MosaicProfile = { combined: false }) {
     await page.viewport(1280, 800);
     onTestFinished(() => page.viewport(414, 896));
     serveFapi(noOffers());
-    return renderWithClerk(tree(props), undefined, undefined, { newProfiles: true }, { combined: false });
+    return renderWithClerk(tree(), undefined, undefined, { newProfiles: true }, profile);
   }
 
   it('opens the OrganizationProfile, without the account pages, from Settings', async () => {
@@ -396,8 +403,14 @@ describe('OrganizationSwitcher with experimental.newProfiles', () => {
     expect(openOrganizationProfile).not.toHaveBeenCalled();
   });
 
-  it('lands on afterLeaveOrganizationUrl after leaving from the opened profile', async () => {
-    const { navigate } = await renderWithNewProfiles({ afterLeaveOrganizationUrl: '/left' });
+  it.each([
+    { name: 'separate', combined: false },
+    { name: 'combined', combined: true },
+  ])('lands on afterLeaveOrganizationUrl after leaving from the opened profile: $name', async ({ combined }) => {
+    const { navigate } = await renderWithNewProfiles({
+      combined,
+      organizationProfileProps: { afterLeaveOrganizationUrl: '/left' },
+    });
     const user = await openWithList();
 
     await user.click(screen.getByRole('button', { name: 'Settings' }));

packages/mosaic/src/features/organization-switcher/organization-switcher.tsx

@@ -35,11 +35,11 @@ export type OrganizationSwitcherProps = OrganizationSwitcherModelOptions &
  * ```
  *
  * @example
- * Passing a URL routes to a page of your own instead of opening Clerk's modal. `afterSelectOrganizationUrl`
- * is where switching organization lands, and takes a `:param` template, a plain path, or a function.
+ * `createOrganizationUrl` routes to a page of your own instead of opening Clerk's modal. `afterSelectOrganizationUrl`
+ * is where switching organization lands, and takes a `:param` template, a plain path, or a function. Set
+ * `organizationProfileUrl` on `MosaicProvider`'s `profile` to route Settings to a page of your own.
  * ```tsx
  * <OrganizationSwitcher
- *   organizationProfileUrl='/settings/organization'
  *   createOrganizationUrl='/orgs/new'
  *   afterSelectOrganizationUrl='/orgs/:slug'
  *   afterSelectPersonalUrl='/dashboard'

packages/mosaic/src/features/profile-pages/use-mosaic-profile.ts

@@ -4,7 +4,9 @@ import { createContext, useContext } from 'react';
 import type { OrganizationProfilePageId } from '../switcher/switcher.pages';
 import type { CustomProfileItem, UserProfilePageId } from '../user-profile/user-profile.types';
 
-export interface MosaicProfile {
+export type MosaicProfile = MosaicProfileOptions & UserProfileRouting & OrganizationProfileRouting;
+
+interface MosaicProfileOptions {
   /**
    * 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.
@@ -23,6 +25,35 @@ export interface MosaicProfile {
   organizationProfileProps?: ProfileOrganizationProps;
 }
 
+/** A URL is the whole opt-in to navigation, and `modal` forbids one, so the pair cannot contradict itself. */
+type UserProfileRouting =
+  | {
+      /** Full URL or path of your own user profile page. Setting it routes there instead of opening the modal. */
+      userProfileUrl: string;
+      /** How the user profile opens: `modal` opens it in place, `navigation` goes to `userProfileUrl`. Follows from whether `userProfileUrl` is set. */
+      userProfileMode?: 'navigation';
+    }
+  | {
+      /** Full URL or path of your own user profile page. Setting it routes there instead of opening the modal. */
+      userProfileUrl?: never;
+      /** How the user profile opens: `modal` opens it in place, `navigation` goes to `userProfileUrl`. Follows from whether `userProfileUrl` is set. */
+      userProfileMode?: 'modal';
+    };
+
+type OrganizationProfileRouting =
+  | {
+      /** Full URL or path of your own organization profile page. Setting it routes there instead of opening the modal. */
+      organizationProfileUrl: string;
+      /** How the organization profile opens: `modal` opens it in place, `navigation` goes to `organizationProfileUrl`. Follows from whether `organizationProfileUrl` is set. */
+      organizationProfileMode?: 'navigation';
+    }
+  | {
+      /** Full URL or path of your own organization profile page. Setting it routes there instead of opening the modal. */
+      organizationProfileUrl?: never;
+      /** How the organization profile opens: `modal` opens it in place, `navigation` goes to `organizationProfileUrl`. Follows from whether `organizationProfileUrl` is set. */
+      organizationProfileMode?: 'modal';
+    };
+
 /** What a profile takes beyond the profile component's own props. */
 export interface ProfilePages<PageId extends string> {
   /**
@@ -47,7 +78,9 @@ export interface ProfileUserProps
 
 /** Options for the underlying `<OrganizationProfile />` component. */
 export interface ProfileOrganizationProps
-  extends ProfilePages<OrganizationProfilePageId>, Pick<OrganizationProfileProps, 'appearance'> {}
+  extends
+    ProfilePages<OrganizationProfilePageId>,
+    Pick<OrganizationProfileProps, 'afterLeaveOrganizationUrl' | 'apiKeysProps' | 'appearance'> {}
 
 const MosaicProfileContext = createContext<MosaicProfile>({});
 

packages/mosaic/src/features/switcher/__tests__/switcher.profile.feature.test.tsx

@@ -4,17 +4,20 @@ import type { ReactElement } from 'react';
 import { beforeEach, describe, expect, it, onTestFinished, vi } from 'vitest';
 import { page } from 'vitest/browser';
 
+import { openDialog } from '../../../__tests__/feature/dialog';
 import { type FakeFapiSeed, serveFapi } from '../../../__tests__/feature/fake-fapi';
 import {
   fapiClient,
   fapiEmailAddress,
+  fapiEnvironment,
   fapiMembership,
   fapiOrganization,
   fapiSession,
   fapiUser,
 } from '../../../__tests__/feature/fapi';
 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 type { MosaicProfile } from '../../profile-pages/use-mosaic-profile';
 import { UserButton } from '../../user-button/user-button';
@@ -75,6 +78,15 @@ async function chooseSetting(trigger: () => HTMLElement, label: string) {
   await user.click(screen.getByRole('menuitem', { name: label }));
 }
 
+async function leaveOrganization() {
+  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' }));
+}
+
 beforeEach(async () => {
   await page.viewport(1280, 800);
   onTestFinished(() => page.viewport(414, 896));
@@ -156,8 +168,45 @@ describe('the profile the switchers open', () => {
     expect(tabs()).toEqual(accountTabs);
   });
 
+  it('routes both profiles with URLs from the provider', async () => {
+    const { navigate } = await renderWithProfile(<OrganizationSwitcher />, {
+      userProfileUrl: '/account',
+      organizationProfileUrl: '/org',
+    });
+
+    await clickSettings(switcherTrigger);
+
+    expect(navigate).toHaveBeenCalledWith('/org');
+  });
+
+  it("hides the organization's API keys from the profile a switcher opens", async () => {
+    const keysMemberships = [fapiMembership(acme, { permissions: ['org:sys_api_keys:read'] })];
+    await renderWithProfile(
+      <OrganizationSwitcher />,
+      { combined: false, organizationProfileProps: { apiKeysProps: { hide: true } } },
+      {
+        environment: fapiEnvironment({
+          api_keys_settings: { user_api_keys_enabled: false, orgs_api_keys_enabled: true },
+        }),
+        client: fapiClient([
+          fapiSession({
+            id: 'sess_1',
+            user: { ...alice, organization_memberships: keysMemberships },
+            last_active_organization_id: 'org_1',
+          }),
+        ]),
+        memberships: keysMemberships,
+      },
+    );
+
+    await clickSettings(switcherTrigger);
+
+    expect(await selectedTab('General')).toBeInTheDocument();
+    expect(tabs()).toEqual(['General']);
+  });
+
   it('routes the one profile with a URL, and opens the other as a modal', async () => {
-    const { navigate } = await renderWithProfile(<UserButton userProfileUrl='/account' />);
+    const { navigate } = await renderWithProfile(<UserButton />, { userProfileUrl: '/account' });
 
     await chooseSetting(buttonTrigger, 'Manage profile');
     expect(navigate).toHaveBeenCalledWith('/account');
@@ -203,7 +252,48 @@ describe('the profile the switchers open', () => {
   });
 });
 
+describe('a mounted OrganizationProfile under a provider profile', () => {
+  const audit = { ...terms, label: 'Audit', path: 'audit' };
+
+  it("uses the provider's profile props, leaving links out", async () => {
+    await renderWithProfile(<OrganizationProfile />, {
+      organizationProfileProps: {
+        customPages: [audit, { label: 'Docs', path: 'docs', href: 'https://example.com/docs' }],
+        pageOrder: ['audit'],
+      },
+    });
+
+    await waitFor(() => expect(tabs()).toEqual(['Audit', 'General', 'Members']));
+  });
+
+  it('lets its own props win over the provider', async () => {
+    await renderWithProfile(<OrganizationProfile customPages={[{ ...terms, label: 'Own', path: 'own' }]} />, {
+      organizationProfileProps: { customPages: [audit] },
+    });
+
+    await waitFor(() => expect(tabs()).toEqual(['General', 'Members', 'Own']));
+  });
+
+  it('lands where the provider says after leaving the organization', async () => {
+    const { navigate } = await renderWithProfile(<OrganizationProfile />, {
+      organizationProfileProps: { afterLeaveOrganizationUrl: '/left' },
+    });
+    await leaveOrganization();
+
+    await waitFor(() => expect(navigate).toHaveBeenCalledWith('/left'));
+  });
+});
+
 describe('a mounted UserProfile under a provider profile', () => {
+  it('lands where the provider says after leaving the organization', async () => {
+    const { navigate } = await renderWithProfile(<UserProfile defaultPage='organization/general' />, {
+      organizationProfileProps: { afterLeaveOrganizationUrl: '/left' },
+    });
+    await leaveOrganization();
+
+    await waitFor(() => expect(navigate).toHaveBeenCalledWith('/left'));
+  });
+
   it.each([
     { name: 'follows the provider', profile: separate, combined: undefined, expected: accountTabs },
     { name: 'defaults to combined', profile: undefined, combined: undefined, expected: allTabs },