feat(mosaic): export OrganizationProfile and open the Mosaic profiles from the switchers

Author: austincalvelage

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

@@ -0,0 +1,27 @@
+import { useOrganization } from '@clerk/shared/react';
+import React from 'react';
+
+import { OrganizationProfile } from './organization-profile';
+import type { OrganizationProfileModalContentProps } from './organization-profile.modal.types';
+
+export default function OrganizationProfileModalContent({
+  options,
+  close,
+}: OrganizationProfileModalContentProps): React.ReactElement {
+  const { isLoaded, organization } = useOrganization();
+  const inactive = isLoaded && !organization;
+
+  React.useEffect(() => {
+    if (inactive) {
+      close();
+    }
+  }, [inactive, close]);
+
+  const { page, ...props } = options ?? {};
+  return (
+    <OrganizationProfile
+      {...props}
+      defaultPage={page}
+    />
+  );
+}

packages/mosaic/src/features/organization-profile/organization-profile.modal.ts

@@ -0,0 +1,8 @@
+import { defineModalSurface } from '../../modals/define-modal-surface';
+import type { OrganizationProfileModalOptions } from './organization-profile.modal.types';
+
+export const organizationProfileModal = defineModalSurface<OrganizationProfileModalOptions>({
+  id: 'organizationProfile',
+  variant: 'profile',
+  load: () => import('./organization-profile.modal-content'),
+});

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

@@ -1,7 +1,9 @@
 import { act, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, onTestFinished, vi } from 'vitest';
+import { page } from 'vitest/browser';
 
+import { openDialog } from '../../../__tests__/feature/dialog';
 import { type FakeFapiSeed, holdRequests, serveFapi } from '../../../__tests__/feature/fake-fapi';
 import {
   fapiClient,
@@ -45,6 +47,11 @@ const aliceSession = fapiSession({ id: 'sess_1', user: alice, last_active_organi
 const bobSession = fapiSession({ id: 'sess_2', user: bob });
 const personalSession = fapiSession({ id: 'sess_1', user: alice });
 
+async function wideViewport() {
+  await page.viewport(1280, 800);
+  onTestFinished(() => page.viewport(414, 896));
+}
+
 function signedIn(overrides: FakeFapiSeed = {}): FakeFapiSeed {
   return {
     client: fapiClient([aliceSession, bobSession]),
@@ -128,8 +135,8 @@ describe('OrganizationSwitcher', () => {
   });
 
   it('heads the surface with the active organization, and manages it from the rows beneath', async () => {
-    const { clerk } = await renderSwitcher({}, noOffers());
-    const openOrganizationProfile = vi.spyOn(clerk, 'openOrganizationProfile').mockImplementation(() => {});
+    await wideViewport();
+    await renderSwitcher({}, noOffers());
     const user = await openWithList();
 
     const header = requiredPopup().querySelector('.cl-organization-switcher-header') ?? requiredPopup();
@@ -144,7 +151,8 @@ describe('OrganizationSwitcher', () => {
 
     await user.click(screen.getByRole('button', { name: 'Settings' }));
     expect(screen.queryByRole('menu')).toBeNull();
-    expect(openOrganizationProfile).toHaveBeenCalled();
+    expect(await screen.findByRole('tab', { name: 'General' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.queryByRole('tab', { name: 'Account' })).toBeNull();
   });
 
   it('falls back to the account, with nothing to manage, where no organization is active', async () => {
@@ -215,16 +223,19 @@ describe('OrganizationSwitcher', () => {
       await waitFor(() => expect(navigate).toHaveBeenCalledWith('/orgs/Other'));
     });
 
-    it('tells the organization profile where to land after leaving', async () => {
-      const { clerk } = await renderSwitcher({ afterLeaveOrganizationUrl: '/left' }, noOffers());
-      const openOrganizationProfile = vi.spyOn(clerk, 'openOrganizationProfile').mockImplementation(() => {});
+    it('lands on afterLeaveOrganizationUrl after leaving from the opened profile', async () => {
+      await wideViewport();
+      const { navigate } = await renderSwitcher({ afterLeaveOrganizationUrl: '/left' }, noOffers());
       const user = await openWithList();
 
       await user.click(screen.getByRole('button', { name: 'Settings' }));
+      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' }));
 
-      expect(openOrganizationProfile).toHaveBeenCalledWith(
-        expect.objectContaining({ afterLeaveOrganizationUrl: '/left' }),
-      );
+      await waitFor(() => expect(navigate).toHaveBeenCalledWith('/left'));
     });
 
     it('tells create-organization where to land and whether to skip inviting members', async () => {

packages/mosaic/src/features/switcher/__tests__/switcher.pages.test.tsx

@@ -2,7 +2,6 @@ import { buildTaskUrl } from '@clerk/shared/internal/clerk-js/sessionTasks';
 import { getFullName, getIdentifier } from '@clerk/shared/internal/clerk-js/user';
 import { useClerk, useOrganization, useSession, useUser } from '@clerk/shared/react';
 import type {
-  OrganizationProfileModalProps,
   OrganizationResource,
   OrganizationSwitcherProps,
   UserButtonProps as ClerkUserButtonProps,
@@ -15,6 +14,8 @@ import { useMosaicRouter } from '../../hooks/use-mosaic-router';
 import { useModal } from '../../modals/use-modal';
 import { useGetPortalContainer } from '../../primitives/portal';
 import { replaceInPages, shrinkTotal } from '../../utils/infinite-pages';
+import { organizationProfileModal } from '../organization-profile/organization-profile.modal';
+import type { OrganizationProfileModalOptions } from '../organization-profile/organization-profile.modal.types';
 import { userProfileModal } from '../user-profile/user-profile.modal';
 import type { UserProfileModalOptions } from '../user-profile/user-profile.modal.types';
 import type {
@@ -115,7 +116,7 @@ export interface SwitcherModalProps {
     UserProfileModalOptions,
     'customPages' | 'pageOrder' | 'additionalOAuthScopes' | 'apiKeysProps' | 'mode'
   >;
-  organizationProfile?: Pick<OrganizationProfileModalProps, 'customPages' | 'appearance'>;
+  organizationProfile?: Pick<OrganizationProfileModalOptions, 'customPages' | 'pageOrder'>;
 }
 
 function resolveAfterUrl<T extends object>(
@@ -178,8 +179,8 @@ function toSession(sessionId: string, user: UserResource): SwitcherSession {
 }
 
 /**
- * @param modals - Props forwarded to the profile modals. The organization profile's custom pages arrive
- *   already bridged, since only the wrapper can render the portals behind them.
+ * @param modals - Props forwarded to the profile modals. A `combined` user profile also carries the
+ *   organization's pages, so managing the organization opens it on them.
  */
 export function useSwitcherModel(options?: SwitcherModelOptions, modals?: SwitcherModalProps): SwitcherModel {
   const { isLoaded: isUserLoaded, user } = useUser();
@@ -191,6 +192,7 @@ export function useSwitcherModel(options?: SwitcherModelOptions, modals?: Switch
   const clerk = useClerk();
   const router = useMosaicRouter();
   const userProfile = useModal(userProfileModal);
+  const organizationProfile = useModal(organizationProfileModal);
   // 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();
@@ -202,17 +204,15 @@ export function useSwitcherModel(options?: SwitcherModelOptions, modals?: Switch
     enabled: Boolean(environment?.organizationSettings.enabled),
   });
 
+  const organizationProfileProps = {
+    ...modals?.organizationProfile,
+    afterLeaveOrganizationUrl: options?.afterLeaveOrganizationUrl,
+  };
+
   const manageAccount = openOrNavigate({
     url: options?.userProfileUrl,
     mode: options?.userProfileMode,
-    openModal: () =>
-      userProfile.open(
-        {
-          ...modals?.userProfile,
-          organizationProfileProps: { afterLeaveOrganizationUrl: options?.afterLeaveOrganizationUrl },
-        },
-        getContainer?.(),
-      ),
+    openModal: () => userProfile.open({ ...modals?.userProfile, organizationProfileProps }, getContainer?.()),
     buildUrl: () => clerk.buildUserProfileUrl(),
     navigate: router.navigate,
   });
@@ -221,11 +221,12 @@ export function useSwitcherModel(options?: SwitcherModelOptions, modals?: Switch
     url: options?.organizationProfileUrl,
     mode: options?.organizationProfileMode,
     openModal: () =>
-      clerk.openOrganizationProfile({
-        getContainer,
-        ...modals?.organizationProfile,
-        afterLeaveOrganizationUrl: options?.afterLeaveOrganizationUrl,
-      }),
+      modals?.userProfile?.mode === 'combined'
+        ? userProfile.open(
+            { ...modals.userProfile, organizationProfileProps, page: 'organization/general' },
+            getContainer?.(),
+          )
+        : organizationProfile.open(organizationProfileProps, getContainer?.()),
     buildUrl: () => clerk.buildOrganizationProfileUrl(),
     navigate: router.navigate,
   });