feat(mosaic): Remove profile mode options from MosaicProvider

Author: alexcarpenter

.changeset/mosaic-profile-provider.md

@@ -15,7 +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`.
-- `UserButton` and `OrganizationSwitcher`: `userProfileUrl`, `userProfileMode`, `organizationProfileUrl` and `organizationProfileMode` move to `MosaicProvider`'s `profile`.
+- `UserButton` and `OrganizationSwitcher`: `userProfileUrl` and `organizationProfileUrl` move to `MosaicProvider`'s `profile`.
+- `UserButton` and `OrganizationSwitcher`: `userProfileMode` and `organizationProfileMode` are removed. Setting a URL routes there, and leaving it out opens the modal.
 - `UserButton` and `OrganizationSwitcher`: `appearance` is no longer accepted in `userProfileProps` or `organizationProfileProps`.
 - `UserButton` and `OrganizationSwitcher`: link items (`href`) are no longer accepted in `customPages`.
 - `UserButton` and `OrganizationSwitcher`: `afterLeaveOrganizationUrl` moves to `profile.organizationProfileProps`, which also takes `apiKeysProps`.

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

@@ -5,9 +5,7 @@ import type { OrganizationProfilePageId } from '../organization-profile/organiza
 import type { UserProfileProps } from '../user-profile/user-profile';
 import type { CustomProfilePage, UserProfilePageId } from '../user-profile/user-profile.types';
 
-export type MosaicProfile = MosaicProfileOptions & UserProfileRouting & OrganizationProfileRouting;
-
-interface MosaicProfileOptions {
+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.
@@ -24,37 +22,16 @@ interface MosaicProfileOptions {
    * whichever component opens or mounts it.
    */
   organizationProfileProps?: ProfileOrganizationProps;
+  /**
+   * Full URL or path of your own user profile page. Setting it routes there instead of opening the modal.
+   */
+  userProfileUrl?: string;
+  /**
+   * Full URL or path of your own organization profile page. Setting it routes there instead of opening the modal.
+   */
+  organizationProfileUrl?: string;
 }
 
-/** 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> {
   /**

packages/mosaic/src/features/switcher/switcher.model.tsx

@@ -107,10 +107,6 @@ export function resolveAfterUrl<T extends object>(
   return undefined;
 }
 
-function opensModal(url: string | undefined, mode: 'navigation' | 'modal' | undefined): boolean {
-  return (mode ?? (url ? 'navigation' : 'modal')) === 'modal';
-}
-
 /** Opens the modal unless a URL routes instead. An explicit mode wins; a URL on its own means navigation. */
 function openOrNavigate({
   url,
@@ -120,12 +116,13 @@ function openOrNavigate({
   navigate,
 }: {
   url: string | undefined;
-  mode: 'navigation' | 'modal' | undefined;
+  mode?: 'navigation' | 'modal';
   openModal: () => void;
   buildUrl: () => string;
   navigate: (to: string) => unknown;
 }): () => void {
-  return opensModal(url, mode) ? () => openModal() : () => void navigate(url ?? buildUrl());
+  const opensModal = (mode ?? (url ? 'navigation' : 'modal')) === 'modal';
+  return opensModal ? () => openModal() : () => void navigate(url ?? buildUrl());
 }
 
 function displayName(user: UserResource): string {
@@ -179,9 +176,7 @@ export function useSwitcherModel(
     userProfileProps,
     organizationProfileProps,
     userProfileUrl,
-    userProfileMode,
     organizationProfileUrl,
-    organizationProfileMode,
   } = profile;
   // The modal must portal into the app's own dialog root, or it renders behind the surface that opened it.
   const getContainer = useGetPortalContainer();
@@ -198,7 +193,6 @@ export function useSwitcherModel(
 
   const manageAccount = openOrNavigate({
     url: userProfileUrl,
-    mode: userProfileMode,
     openModal: () =>
       newProfiles
         ? userProfile.open(mosaicUserProfile, getContainer?.())
@@ -214,7 +208,6 @@ export function useSwitcherModel(
 
   const manageOrganization = openOrNavigate({
     url: organizationProfileUrl,
-    mode: organizationProfileMode,
     openModal: () => {
       if (!newProfiles) {
         clerk.openOrganizationProfile({
@@ -234,11 +227,7 @@ export function useSwitcherModel(
   });
 
   const managesBothInOneProfile =
-    newProfiles &&
-    menuMode === 'combined' &&
-    combined &&
-    opensModal(userProfileUrl, userProfileMode) &&
-    opensModal(organizationProfileUrl, organizationProfileMode);
+    newProfiles && menuMode === 'combined' && combined && !userProfileUrl && !organizationProfileUrl;
 
   const createOrganization = openOrNavigate({
     url: options.createOrganizationUrl,

packages/swingset/src/stories/mosaic-provider.mdx

@@ -60,9 +60,7 @@ its menu lists. [Profile permutations](/user-button/profile-permutations) shows
 | -------------------------- | -------------------------- | ------- | --------------------------------------------------------------------------------- |
 | `combined`                 | `boolean`                  | `true`  | Whether one profile carries the account's pages and the active organization's.    |
 | `userProfileUrl`           | `string`                   | —       | Your own user profile page. Setting it routes there instead of opening the modal. |
-| `userProfileMode`          | `'modal' \| 'navigation'`  | —       | How the user profile opens. Follows from whether `userProfileUrl` is set.         |
 | `organizationProfileUrl`   | `string`                   | —       | Your own organization profile page. Setting it routes there instead of the modal. |
-| `organizationProfileMode`  | `'modal' \| 'navigation'`  | —       | How the organization profile opens. Follows from `organizationProfileUrl`.        |
 | `userProfileProps`         | `ProfileUserProps`         | —       | Options for the user profile.                                                     |
 | `organizationProfileProps` | `ProfileOrganizationProps` | —       | Options for the organization profile, or its pages in a combined profile.         |