feat(mosaic): add user and organization profile providers (#10192)

Author: alexcarpenter

.changeset/mosaic-profile-providers.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/components/panel/index.ts

@@ -1,2 +1,2 @@
-export { Panel } from './panel';
+export { Panel, usePanelTitle } from './panel';
 export type { PanelRootProps, PanelSectionsProps, PanelTitleProps } from './panel';

packages/mosaic/src/components/panel/panel.tsx

@@ -1,3 +1,4 @@
+import { useMergeRefs } from '@floating-ui/react';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
@@ -13,13 +14,22 @@ export type PanelRootProps = MosaicComponentProps<'div'>;
 export type PanelTitleProps = MosaicComponentProps<'div'>;
 export type PanelSectionsProps = MosaicComponentProps<'div'>;
 
+const PanelTitleContext = React.createContext<React.RefObject<HTMLDivElement | null> | null>(null);
+
+export function usePanelTitle(): () => HTMLDivElement | null {
+  const titleRef = React.useContext(PanelTitleContext);
+  return () => titleRef?.current ?? null;
+}
+
 const Root = React.forwardRef<HTMLDivElement, PanelRootProps>(function PanelRoot({ render, xstyle, ...rest }, ref) {
-  return useRender({
+  const titleRef = React.useRef<HTMLDivElement>(null);
+  const element = useRender({
     defaultTagName: 'div',
     render,
     ref,
     props: mergeStyleProps(themeProps('panel'), stylex.props(reset.base, styles.root, xstyle), rest),
   });
+  return <PanelTitleContext.Provider value={titleRef}>{element}</PanelTitleContext.Provider>;
 });
 
 // Inside a profile page, the profile renders the page title, and the ref reaches that instead.
@@ -29,16 +39,21 @@ const Title = React.forwardRef<HTMLDivElement, PanelTitleProps>(function PanelTi
 ) {
   const inProfilePage = React.useContext(ContentPanelContext);
   const profile = React.useContext(ProfileContext);
+  const panelTitleRef = React.useContext(PanelTitleContext);
+  const titleRef = useMergeRefs([ref, panelTitleRef]);
   const level = useHeadingLevel();
   const pageTitleRef = inProfilePage ? profile?.pageTitleRef : undefined;
-  React.useImperativeHandle(pageTitleRef ? ref : null, () => pageTitleRef?.current as HTMLDivElement);
+  React.useImperativeHandle(pageTitleRef ? titleRef : null, () => pageTitleRef?.current as HTMLDivElement);
   return useRender({
     defaultTagName: 'div',
     render,
-    ref: pageTitleRef ? null : ref,
+    ref: pageTitleRef ? null : titleRef,
     enabled: !inProfilePage,
     props: {
-      ...mergeStyleProps(themeProps('panel-title'), stylex.props(reset.base, styles.title, xstyle), rest),
+      ...mergeStyleProps(themeProps('panel-title'), stylex.props(reset.base, styles.title, xstyle), {
+        tabIndex: -1,
+        ...rest,
+      }),
       children: (
         <Heading
           level={level}

packages/mosaic/src/components/profile/profile.test.tsx

@@ -10,7 +10,7 @@ import { Card } from '../card';
 import { Dialog } from '../dialog';
 import { HeadingLevelProvider } from '../heading';
 import { Icon } from '../icon';
-import { Panel } from '../panel';
+import { Panel, usePanelTitle } from '../panel';
 import { Section } from '../section';
 import type { ProfileRootProps } from './profile';
 import { Profile } from './profile';
@@ -551,6 +551,36 @@ describe('Profile', () => {
       expect(titleRef.current).toBe(title());
     });
 
+    it('makes the page title the panel title inside a profile page', () => {
+      let panelTitle: () => HTMLDivElement | null = () => null;
+      function ReadPanelTitle() {
+        panelTitle = usePanelTitle();
+        return null;
+      }
+      render(
+        <MosaicProvider>
+          <Profile.Root value='account'>
+            <Profile.Title>User profile</Profile.Title>
+            <Profile.Nav>
+              <Profile.NavItem value='account'>Account</Profile.NavItem>
+            </Profile.Nav>
+            <Profile.Content pageTitle='Account'>
+              <Profile.ContentPanel value='account'>
+                <Panel.Root>
+                  <Panel.Title>Account</Panel.Title>
+                  <Panel.Sections>
+                    <ReadPanelTitle />
+                  </Panel.Sections>
+                </Panel.Root>
+              </Profile.ContentPanel>
+            </Profile.Content>
+          </Profile.Root>
+        </MosaicProvider>,
+      );
+
+      expect(panelTitle()).toBe(screen.getByRole('heading', { level: 3, name: 'Account' }));
+    });
+
     it('returns the tablist to the column when the width comes back', () => {
       renderSurface();
       act(() => observe?.(3));

packages/mosaic/src/features/organization-profile/organization-profile-danger-section/__tests__/organization-profile-danger-section.feature.test.tsx

@@ -14,10 +14,8 @@ import {
   fapiUser,
 } from '../../../../__tests__/feature/fapi';
 import { renderWithClerk } from '../../../../__tests__/feature/render';
-import {
-  OrganizationProfileDangerSection,
-  type OrganizationProfileDangerSectionProps,
-} from '../organization-profile-danger-section';
+import { OrganizationProfileProvider } from '../../organization-profile.provider';
+import { OrganizationProfileDangerSection } from '../organization-profile-danger-section';
 
 const acme = fapiOrganization({ id: 'org_1', name: 'Acme', members_count: 20 });
 const deletePermission = ['org:sys_profile:delete'];
@@ -38,9 +36,9 @@ function signedIn({
   } satisfies FakeFapiSeed;
 }
 
-async function renderSection(seed: FakeFapiSeed = signedIn(), props: OrganizationProfileDangerSectionProps = {}) {
+async function renderSection(seed: FakeFapiSeed = signedIn()) {
   const fapi = serveFapi(seed);
-  const view = await renderWithClerk(<OrganizationProfileDangerSection {...props} />);
+  const view = await renderWithClerk(<OrganizationProfileDangerSection />);
   return { ...view, fapi };
 }
 
@@ -152,8 +150,13 @@ describe('OrganizationProfileDangerSection', () => {
       expect(dialog).toHaveTextContent('This removes 1 member and permanently deletes all organization data.');
     });
 
-    it('deletes the organization and sends the user to the url the host passed', async () => {
-      const { fapi, navigate } = await renderSection(signedIn(), { afterLeaveOrganizationUrl: '/organizations' });
+    it('deletes the organization and sends the user to the url from the provider', async () => {
+      const fapi = serveFapi(signedIn());
+      const { navigate } = await renderWithClerk(
+        <OrganizationProfileProvider afterLeaveOrganizationUrl='/organizations'>
+          <OrganizationProfileDangerSection />
+        </OrganizationProfileProvider>,
+      );
       const user = userEvent.setup();
       const dialog = await openDialog(user, await screen.findByRole('button', { name: 'Delete organization' }), {
         role: 'alertdialog',

packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.model.ts

@@ -2,6 +2,7 @@ import { useOrganization, useOrganizationList, useSession, useUser } from '@cler
 
 import { useMosaicEnvironment } from '../../../hooks/use-mosaic-environment';
 import { useMosaicRouter } from '../../../hooks/use-mosaic-router';
+import { useOrganizationProfileOptions } from '../organization-profile.provider';
 
 const organizationListParams = {
   userMemberships: { infinite: true },
@@ -20,11 +21,8 @@ export type OrganizationProfileDangerSectionModel =
       deleteOrganization?: () => Promise<void>;
     };
 
-export function useOrganizationProfileDangerSectionModel({
-  afterLeaveOrganizationUrl,
-}: {
-  afterLeaveOrganizationUrl?: string;
-}): OrganizationProfileDangerSectionModel {
+export function useOrganizationProfileDangerSectionModel(): OrganizationProfileDangerSectionModel {
+  const { afterLeaveOrganizationUrl } = useOrganizationProfileOptions();
   const { isLoaded, organization, membership } = useOrganization();
   const { user } = useUser();
   const { session } = useSession();

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

@@ -4,12 +4,11 @@ import { useOrganizationProfileDangerSectionModel } from './organization-profile
 import { OrganizationProfileDangerSectionView } from './organization-profile-danger-section.view';
 
 export type OrganizationProfileDangerSectionProps = {
-  afterLeaveOrganizationUrl?: string;
   fallback?: React.ReactNode;
 };
 
 export function OrganizationProfileDangerSection(props: OrganizationProfileDangerSectionProps) {
-  const model = useOrganizationProfileDangerSectionModel(props);
+  const model = useOrganizationProfileDangerSectionModel();
 
   if (model.status === 'loading') {
     return props.fallback ?? null;

packages/mosaic/src/features/organization-profile/organization-profile-general-panel.feature.test.tsx

@@ -15,6 +15,7 @@ import {
 } from '../../__tests__/feature/fapi';
 import { renderWithClerk } from '../../__tests__/feature/render';
 import { MosaicProvider } from '../../mosaic-provider';
+import { OrganizationProfileProvider } from './organization-profile.provider';
 import { OrganizationProfileDangerSection } from './organization-profile-danger-section/organization-profile-danger-section';
 import { OrganizationProfileGeneralPanel } from './organization-profile-general-panel';
 import { OrganizationProfileProfileSection } from './organization-profile-profile-section/organization-profile-profile-section';
@@ -112,6 +113,27 @@ describe('OrganizationProfileGeneralPanel', () => {
     it.todo('shows verified domains when enabled and the member can read them');
   });
 
+  describe('leave', () => {
+    it('sends the user to the provider url after leaving from the default sections', async () => {
+      const fapi = serveFapi(signedIn());
+      const { navigate } = await renderWithClerk(
+        <OrganizationProfileProvider afterLeaveOrganizationUrl='/organizations'>
+          <OrganizationProfileGeneralPanel />
+        </OrganizationProfileProvider>,
+      );
+      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'));
+    });
+  });
+
   describe('edit name', () => {
     it('updates only the changed name and shows the refreshed value', async () => {
       const { fapi } = await renderPanel();

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

@@ -0,0 +1,23 @@
+import { createContext, type ReactNode, useContext } from 'react';
+
+export interface OrganizationProfileOptions {
+  afterLeaveOrganizationUrl?: string;
+}
+
+export interface OrganizationProfileProviderProps extends OrganizationProfileOptions {
+  children: ReactNode;
+}
+
+const OrganizationProfileContext = createContext<OrganizationProfileOptions>({});
+
+export function OrganizationProfileProvider({ afterLeaveOrganizationUrl, children }: OrganizationProfileProviderProps) {
+  return (
+    <OrganizationProfileContext.Provider value={{ afterLeaveOrganizationUrl }}>
+      {children}
+    </OrganizationProfileContext.Provider>
+  );
+}
+
+export function useOrganizationProfileOptions(): OrganizationProfileOptions {
+  return useContext(OrganizationProfileContext);
+}

packages/mosaic/src/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx

@@ -1,7 +1,6 @@
 import { createDeferredPromise } from '@clerk/shared/utils';
 import { act, render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { createRef } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { useConfirmController } from '../../../blocks/confirm';
@@ -15,11 +14,9 @@ import { UserProfileWeb3WalletsSectionView } from '../user-profile-web3-wallets-
 
 function Web3Wallets({
   wallets,
-  fallbackFocus,
   onRemove,
 }: {
   wallets: UserProfileWeb3Wallet[];
-  fallbackFocus: () => HTMLElement | null;
   onRemove: (id: string) => Promise<void>;
 }) {
   const controller = useUserProfileWeb3WalletsController({
@@ -28,7 +25,6 @@ function Web3Wallets({
     connect: () => Promise.resolve(),
     setPrimary: () => Promise.resolve(),
     remove: onRemove,
-    fallbackFocus,
   });
   return <UserProfileWeb3WalletsSectionView {...controller} />;
 }
@@ -54,19 +50,16 @@ describe('UserProfileProfilePanelView', () => {
     expect(screen.queryByRole('tab')).toBeNull();
   });
 
-  it('keeps the final wallet confirmation mounted until removal settles', async () => {
+  it('keeps the final wallet confirmation mounted until removal settles, then focuses the title', async () => {
     const user = userEvent.setup();
-    const titleRef = createRef<HTMLDivElement>();
     const removal = createDeferredPromise();
     const onRemoveWeb3Wallet = vi.fn(async () => {
       await removal.promise;
     });
     const { rerender } = renderView({
-      titleRef,
       children: (
         <Web3Wallets
           wallets={[{ id: 'wallet_1', provider: 'MetaMask', address: '0x1234', isVerified: true }]}
-          fallbackFocus={() => titleRef.current}
           onRemove={onRemoveWeb3Wallet}
         />
       ),
@@ -76,10 +69,9 @@ describe('UserProfileProfilePanelView', () => {
     await user.click(within(screen.getByRole('alertdialog')).getByRole('button', { name: 'Remove' }));
     rerender(
       <MosaicProvider>
-        <UserProfileProfilePanelView titleRef={titleRef}>
+        <UserProfileProfilePanelView>
           <Web3Wallets
             wallets={[]}
-            fallbackFocus={() => titleRef.current}
             onRemove={onRemoveWeb3Wallet}
           />
         </UserProfileProfilePanelView>
@@ -92,6 +84,9 @@ describe('UserProfileProfilePanelView', () => {
       await removal.promise;
     });
     await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(screen.getByRole('heading', { name: 'Account', level: 2 }).closest('.cl-panel-title')).toHaveFocus(),
+    );
   });
 
   it('renders the danger zone when provided', () => {