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

@@ -17,7 +17,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
@@ -64,6 +64,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
@@ -84,6 +90,7 @@ export function OrganizationProfile({
   defaultPage,
   afterLeaveOrganizationUrl,
   fallback,
+  showSearch,
   apiKeysProps: { hide: hideAPIKeys = false, ...apiKeysProps } = {},
 }: OrganizationProfileProps) {
   const model = useOrganizationProfileModel();
@@ -106,6 +113,7 @@ export function OrganizationProfile({
         onPageChange={setActivePage}
         customPages={customPages}
         pageOrder={pageOrder}
+        showSearch={showSearch}
         pages={{
           general: <OrganizationProfileGeneralPanel />,
           members: model.pages.includes('members') ? <OrganizationProfileMembersPanel /> : undefined,

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

@@ -23,10 +23,20 @@ export interface OrganizationProfileViewProps extends Omit<ProfileRootProps, 'ch
   customPages?: readonly CustomOrganizationProfilePage[];
   pageOrder?: readonly (OrganizationProfilePageId | (string & {}))[];
   onPageChange: (page: OrganizationProfilePageId | (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;
 }
 
 export const OrganizationProfileView = React.forwardRef<HTMLDivElement, OrganizationProfileViewProps>(
-  function OrganizationProfileView({ activePage, pages, customPages, pageOrder, onPageChange, label, ...rest }, ref) {
+  function OrganizationProfileView(
+    { activePage, pages, customPages, pageOrder, onPageChange, label, showSearch = false, ...rest },
+    ref,
+  ) {
     const m = useMessages('organizationProfile');
     const entries = resolveOrganizationProfilePages(
       getAvailableOrganizationProfilePages(pages),
@@ -62,7 +72,7 @@ export const OrganizationProfileView = React.forwardRef<HTMLDivElement, Organiza
         {...rest}
       >
         <Profile.Title>{label ?? m.label}</Profile.Title>
-        <Profile.Nav search={navPages}>
+        <Profile.Nav search={showSearch ? navPages : undefined}>
           {navPages.map(page => (
             <Profile.NavItem
               key={page.value}

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

@@ -101,6 +101,7 @@ describe('UserProfile', () => {
     const user = userEvent.setup();
     await renderWithClerk(
       <UserProfile
+        showSearch
         customPages={[
           {
             path: 'usage',
@@ -136,6 +137,7 @@ describe('UserProfile', () => {
     const user = userEvent.setup();
     await renderWithClerk(
       <UserProfile
+        showSearch
         customPages={[
           {
             path: 'usage',
@@ -170,6 +172,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();
@@ -178,7 +189,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

@@ -195,10 +195,26 @@ describe('UserProfileView', () => {
     expect(warn).toHaveBeenCalledWith('[Clerk] UserProfile has no pages to show.');
   });
 
+  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' });
@@ -212,6 +228,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

@@ -17,7 +17,9 @@ import { useUserProfileUserModel } from './user-profile-user.model';
 
 /** 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
@@ -61,6 +63,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
@@ -81,6 +89,7 @@ export function UserProfile({
   pageOrder,
   defaultPage,
   additionalOAuthScopes,
+  showSearch,
   fallback,
   apiKeysProps: { hide: hideAPIKeys = false, ...apiKeysProps } = {},
 }: UserProfileProps) {
@@ -108,6 +117,7 @@ export function UserProfile({
         onPageChange={setActivePage}
         customPages={customPages}
         pageOrder={pageOrder}
+        showSearch={showSearch}
         pages={{
           account: <UserProfileProfilePanel />,
           security: <UserProfileSecurityPanel />,

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

@@ -22,6 +22,13 @@ export interface UserProfileViewProps extends Omit<ProfileRootProps, 'children'
    */
   pageOrder?: readonly (UserProfilePageId | (string & {}))[];
   onPageChange: (page: UserProfilePageId | (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;
 }
 
 /**
@@ -31,7 +38,7 @@ export interface UserProfileViewProps extends Omit<ProfileRootProps, 'children'
  * surface blank.
  */
 export const UserProfileView = React.forwardRef<HTMLDivElement, UserProfileViewProps>(function UserProfileView(
-  { activePage, pages, customPages, pageOrder, onPageChange, label, ...rest },
+  { activePage, pages, customPages, pageOrder, onPageChange, label, showSearch = false, ...rest },
   ref,
 ) {
   const m = useMessages('userProfile');
@@ -65,7 +72,7 @@ export const UserProfileView = React.forwardRef<HTMLDivElement, UserProfileViewP
       {...rest}
     >
       <Profile.Title>{label ?? m.label}</Profile.Title>
-      <Profile.Nav search={navPages}>
+      <Profile.Nav search={showSearch ? navPages : undefined}>
         {navPages.map(page => (
           <Profile.NavItem
             key={page.value}

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={[
             {