feat(mosaic): add showSearch to UserProfile and OrganizationProfile

Search is now off by default. Pass showSearch to show it.

Author: alexcarpenter

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

@@ -106,6 +106,15 @@ describe('OrganizationProfile', () => {
     expect(tabNames()).toEqual(tabs);
   });
 
+  it.each([
+    { showSearch: undefined, shown: false },
+    { showSearch: true, shown: true },
+  ])('shows the search only when asked: $showSearch', async ({ showSearch, shown }) => {
+    serve();
+    await renderWithClerk(<OrganizationProfile showSearch={showSearch} />);
+    expect(screen.queryByRole('combobox', { name: 'Search' }) !== null).toBe(shown);
+  });
+
   it('passes the API keys options to the API keys page', async () => {
     serve({ orgAPIKeysEnabled: true, permissions: ['org:sys_api_keys:read', 'org:sys_api_keys:manage'] });
     await renderWithClerk(
@@ -141,6 +150,7 @@ describe('OrganizationProfile', () => {
     const user = userEvent.setup();
     await renderWithClerk(
       <OrganizationProfile
+        showSearch
         customPages={[
           {
             path: 'usage',

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

@@ -24,6 +24,24 @@ it('renders the content given for the active page', () => {
   expect(screen.getByText('Members content')).toBeVisible();
 });
 
+it.each([
+  { showSearch: undefined, shown: false },
+  { showSearch: true, shown: true },
+])('shows the search only when asked: $showSearch', ({ showSearch, shown }) => {
+  render(
+    <MosaicProvider>
+      <OrganizationProfileView
+        activePage='general'
+        onPageChange={vi.fn()}
+        showSearch={showSearch}
+        pages={{ general: <OrganizationProfileGeneralPanelView /> }}
+      />
+    </MosaicProvider>,
+  );
+
+  expect(screen.queryByRole('combobox', { name: 'Search' }) !== null).toBe(shown);
+});
+
 it('warns when there are no pages to show', () => {
   const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
 

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

@@ -19,7 +19,7 @@ import { OrganizationProfileMembersPanel } from './organization-profile-members-
 /** Everything `<OrganizationProfile />` takes: your own pages and their order, the page it opens on, and where leaving the organization lands. */
 export interface OrganizationProfileProps
   extends
-    Pick<OrganizationProfileViewProps, 'customPages' | 'pageOrder'>,
+    Pick<OrganizationProfileViewProps, 'customPages' | 'pageOrder' | 'showSearch'>,
     Pick<OrganizationProfileOptions, 'afterLeaveOrganizationUrl'> {
   /**
    * The page the profile opens on: a built-in page's id, or a custom page's `path`. Unlike
@@ -66,6 +66,12 @@ export interface OrganizationProfileProps
  * ```
  *
  * @example
+ * `showSearch` adds a search field above the navigation that finds pages, and the sections on them.
+ * ```tsx
+ * <OrganizationProfile showSearch />
+ * ```
+ *
+ * @example
  * `customPages` adds your own pages; `pageOrder` places them among the built-in ones.
  * ```tsx
  * <OrganizationProfile
@@ -86,6 +92,7 @@ export function OrganizationProfile({
   defaultPage,
   afterLeaveOrganizationUrl,
   fallback,
+  showSearch,
   apiKeysProps,
 }: OrganizationProfileProps) {
   const model = useOrganizationProfileModel();
@@ -109,6 +116,7 @@ export function OrganizationProfile({
         {...navigation}
         customPages={customPages}
         pageOrder={pageOrder}
+        showSearch={showSearch}
         pages={pages}
       />
     </OrganizationProfileProvider>

packages/mosaic/src/features/profile-pages/profile-pages.view.tsx

@@ -28,11 +28,18 @@ export interface ProfilePagesViewProps extends Omit<ProfileRootProps, 'children'
   activePage: string;
   /** Called with a page's id when the user picks it from the navigation. */
   onPageChange: (page: string) => void;
+  /**
+   * Shows a search field above the navigation that finds pages, and the sections on them. Only the
+   * column layout shows it.
+   *
+   * @default false
+   */
+  showSearch?: boolean;
 }
 
 /** A `Profile` built from groups of pages: their navigation, and the active page beside it. */
 export const ProfilePagesView = React.forwardRef<HTMLDivElement, ProfilePagesViewProps>(function ProfilePagesView(
-  { label, groups, activePage, onPageChange, ...rest },
+  { label, groups, activePage, onPageChange, showSearch = false, ...rest },
   ref,
 ) {
   const pages = groups.flatMap(group => group.pages);
@@ -52,7 +59,7 @@ export const ProfilePagesView = React.forwardRef<HTMLDivElement, ProfilePagesVie
       {...rest}
     >
       <Profile.Title>{label}</Profile.Title>
-      <Profile.Nav search={searchPages}>
+      <Profile.Nav search={showSearch ? searchPages : undefined}>
         {groups.map((group, index) =>
           group.label === undefined ? (
             <NavItems

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

@@ -108,6 +108,7 @@ describe('UserProfile', () => {
     const user = userEvent.setup();
     await renderWithClerk(
       <UserProfile
+        showSearch
         customPages={[
           {
             path: 'usage',
@@ -143,6 +144,7 @@ describe('UserProfile', () => {
     const user = userEvent.setup();
     await renderWithClerk(
       <UserProfile
+        showSearch
         customPages={[
           {
             path: 'usage',
@@ -177,6 +179,15 @@ describe('UserProfile', () => {
     expect(drawn.height).toBeCloseTo(around.height + 24);
   });
 
+  it.each([
+    { showSearch: undefined, shown: false },
+    { showSearch: true, shown: true },
+  ])('shows the search only when asked: $showSearch', async ({ showSearch, shown }) => {
+    serve();
+    await renderWithClerk(<UserProfile showSearch={showSearch} />);
+    expect(screen.queryByRole('combobox', { name: 'Search' }) !== null).toBe(shown);
+  });
+
   it('leaves the page where it is when the found target is already in view', async () => {
     serve();
     const user = userEvent.setup();
@@ -185,7 +196,7 @@ describe('UserProfile', () => {
         data-testid='scroller'
         style={{ height: 400, overflowY: 'auto' }}
       >
-        <UserProfile />
+        <UserProfile showSearch />
       </div>,
     );
     const scroller = screen.getByTestId('scroller');

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

@@ -257,10 +257,26 @@ describe('UserProfileView', () => {
     });
   });
 
+  it('shows the search only when asked', () => {
+    const { rerender, props } = renderView();
+    expect(screen.queryByRole('combobox', { name: 'Search' })).toBeNull();
+
+    rerender(
+      <MosaicProvider>
+        <UserProfileView
+          {...props}
+          showSearch
+        />
+      </MosaicProvider>,
+    );
+
+    expect(screen.getByRole('combobox', { name: 'Search' })).toBeVisible();
+  });
+
   it('finds a section on a page that is not open, and opens that page', async () => {
     const onPageChange = vi.fn();
     const user = userEvent.setup();
-    renderView({ onPageChange });
+    renderView({ onPageChange, showSearch: true });
 
     await user.type(screen.getByRole('combobox', { name: 'Search' }), 'subscr');
     const billing = screen.getByRole('group', { name: 'Billing' });
@@ -274,6 +290,7 @@ describe('UserProfileView', () => {
   it('finds a page of your own by its keywords', async () => {
     const user = userEvent.setup();
     renderView({
+      showSearch: true,
       customPages: [{ label: 'Usage', path: 'usage', keywords: ['quota'], content: <p>Usage content</p> }],
     });
 

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

@@ -29,7 +29,9 @@ export type UserProfileMode = Exclude<SwitcherMode, 'organization'>;
 
 /** Everything `<UserProfile />` takes: your own pages and their order, the page it opens on, and the OAuth scopes it asks for. */
 export interface UserProfileProps
-  extends Pick<UserProfileViewProps, 'customPages' | 'pageOrder'>, Pick<UserProfileOptions, 'additionalOAuthScopes'> {
+  extends
+    Pick<UserProfileViewProps, 'customPages' | 'pageOrder' | 'showSearch'>,
+    Pick<UserProfileOptions, 'additionalOAuthScopes'> {
   /**
    * The page the profile opens on: a built-in page's id, or a custom page's `path`. Unlike
    * `pageOrder`, it leaves the navigation order alone. A page the navigation does not list opens
@@ -106,6 +108,12 @@ export interface UserProfileProps
  * ```
  *
  * @example
+ * `showSearch` adds a search field above the navigation that finds pages, and the sections on them.
+ * ```tsx
+ * <UserProfile showSearch />
+ * ```
+ *
+ * @example
  * `customPages` adds your own pages; `pageOrder` places them among the built-in ones.
  * ```tsx
  * <UserProfile
@@ -138,6 +146,7 @@ export function UserProfileSurface({
   pageOrder,
   defaultPage,
   additionalOAuthScopes,
+  showSearch,
   fallback,
   apiKeysProps: { hide: hideAPIKeys = false, ...apiKeysProps } = {},
 }: UserProfileProps & { presentation: NonNullable<UserProfileOptions['mode']> }) {
@@ -156,6 +165,7 @@ export function UserProfileSurface({
     initialPage: defaultPage ?? pageOrder?.[0] ?? 'account',
     customPages,
     pageOrder,
+    showSearch,
     pages: {
       account: <UserProfileProfilePanel />,
       security: <UserProfileSecurityPanel />,

packages/swingset/src/app/(clerk)/live/organization-profile/organization-profile/page.tsx

@@ -33,7 +33,10 @@ export default function OrganizationProfileLivePage() {
         {isLoaded && isSignedIn && !organization ? (
           <p className='text-muted-foreground text-sm'>Pick an active organization to see its profile.</p>
         ) : null}
-        <OrganizationProfile fallback={<p className='text-muted-foreground text-sm'>Loading…</p>} />
+        <OrganizationProfile
+          showSearch
+          fallback={<p className='text-muted-foreground text-sm'>Loading…</p>}
+        />
       </div>
     </MosaicProvider>
   );

packages/swingset/src/app/(clerk)/live/user-profile/user-profile/page.tsx

@@ -31,6 +31,7 @@ export default function UserProfileLivePage() {
           </p>
         ) : null}
         <UserProfile
+          showSearch
           fallback={<p className='text-muted-foreground text-sm'>Loading…</p>}
           customPages={[
             {