feat(navigation): Add searchable project settings submenu by priscilawebdev · Pull Request #128150 · getsentry/sentry

priscilawebdev · 2026-10-20T08:15:57Z

Now it is possible to search for a project in the submenu. See the recording:

Screen.Recording.2026-10-21.at.11.40.28.mov

closes DE-1758

Create a context-free Menu presentation API from master. Compose it from DropdownMenu and CompactSelect while retaining each control’s interaction behavior.

Make Menu own the shared item implementation and retain the existing menuListItem import as a compatibility re-export.

Use Menu.Item selection state for Preferences options and remove CompactSelect's local item padding override so both controls follow the shared menu presentation.

Read React Aria node props directly and keep the menu item generic type without a memo assertion.

Preserve primary styling for selected single-select options and finish the menu item props rename.

Keep menu content responsible for query state and pass the list its value and change handler separately.

Pass the controlled search input as one object while menu content retains ownership of the query.

Use one public search options type for root menus and submenus. Name the private list prop searchState to distinguish its controlled input data.

Expose maxHeight and maxWidth in submenu options, mirroring content sizing props. Keep the project submenu within 240px height and 258px width while allowing smaller content to fit naturally.

Use maxHeight and maxWidth for root menus and submenus, and migrate existing root menu height callers.

Keep shared maxHeight and maxWidth options for root menus and submenus, and cap the organization menu width without forcing it.

Export the existing selector from its original module and remove the additional package entry.

priscilawebdev · 2026-10-22T06:52:51Z

bugbot run

cursor

Stale Bugbot comment from a previous run.

natemoo-re

Shaping up super well! Feel free to tackle my feedback/questions in a follow-up, I don't think any of these are a blocker but they would help with robustness.

natemoo-re · 2026-10-22T16:00:27Z

+  /**
+   * An interactive control rendered beside, rather than inside, the focusable menu item.
+   */
+  trailingAction?: ExtraContent;


Is trailingAction intended for select options too? Adding it to ListItemProps exposes it there, but CompactSelect drops it but the older Select renders it. Curious where we want that contract to live.

Good catch, it's meant for DropdownMenu only. I moved trailingAction out of the shared ListItemProps and into MenuListItem's own props, and it's now exposed through DropdownMenu's MenuItemProps. Select and CompactSelect no longer pick it up. If a select ever needs an interactive trailing control, we can design it there on purpose, since it has different keyboard and ARIA rules.

natemoo-re · 2026-10-22T16:00:27Z

          // gets 4px of space on each side. A `md` inset keeps leading items where
          // they sat before the slot existed, at every size.
          paddingLeft={leadingItems ? 'md' : undefined}
+          paddingRight={trailingAction ? '3xl' : undefined}


Similar to @TkDodo's comment here, do we want this slot to support anything beyond an icon button? It currently accepts arbitrary content, but the fixed right padding is designed around the bookmark star. Do we have an opinion on rendering the label when the action is wider?

Good point, and thanks for pushing on this. No, the slot isn't meant for anything beyond one icon button. It sits in the same right-hand column as the submenu chevron, so something wider would break that alignment or cover the label.

I have updated the code f7fd72e and now we only accept an icon, a label and onAction function. Hope it is better!

natemoo-re · 2026-10-22T16:00:27Z

+    label: project.slug,
+    leadingItems: <ProjectAvatar project={project} size={16} />,
+    trailingAction: <BookmarkStar project={project} organization={organization} />,
+    onAction: () => navigate(`/settings/${organization.slug}/projects/${project.slug}/`),


Could these be links through to, like Settings above? I'd expect cmd+click and "open in new tab" to work for project settings too.

great suggestion! d2824db

natemoo-re · 2026-10-22T16:00:27Z

+        e.key === 'ArrowUp' &&
+        searchRef.current &&
+        menuRef.current &&
+        document.activeElement === menuRef.current.querySelector('[role^="menuitem"]')


Could this boundary account for disabled items? With a disabled row first, Up Arrow from the first enabled row stays in the list instead of returning to search. CompactSelect already checks the first enabled collection key, so I wonder if there's a shared navigation rule here.

Fixed. Keyboard focus now uses the first and last enabled items, not the first and last DOM items, so Up Arrow from the first enabled row returns to search even when a disabled row comes first. The search field's ArrowDown had the same issue, and both use the same helper now. I added a test for a disabled first row. It follows the same aria-disabled rule CompactSelect uses.

great catch!! 5862cd9

natemoo-re · 2026-10-22T16:00:40Z

 const SIMPLE_CSS_IDENTIFIER = /^-?(?!\d)\w[-\w]*$/;

+/** Caps a requested menu height by the space available to its overlay. */
+export function minHeight(


I think this would fit best in the shared menu module! minHeight also feels a bit too generic for a global export so I'd prefer something like calculateMenuMinHeight.

Rename minHeight to calculateMenuMinHeight and export it from @sentry/scraps/menu instead of compactSelect utils.

Use `to` instead of an onAction navigate so project settings items support cmd+click and open in new tab, matching the Settings item.

Move trailingAction out of the shared ListItemProps so it is no longer exposed on Select and CompactSelect options. MenuListItem still renders it, and DropdownMenu's MenuItemProps is the only public API for it.

Replace the free-form trailingAction slot with {icon, label, onAction} so the menu always renders one icon-sized button in the column shared with the submenu chevron. The organization dropdown owns the bookmark mutation instead of rendering BookmarkStar inside the menu.

ArrowUp back to search and the search field's ArrowDown used the first menu item in the DOM, which may be disabled. Use the first and last enabled items instead, matching CompactSelect.

priscilawebdev · 2026-10-27T08:19:11Z

bugbot run

cursor

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit 5862cd9. Configure here.}

priscilawebdev · 2026-10-27T08:24:39Z

@TkDodo @natemoo-re Thanks for the great feedback! I've addressed all the comments and the PR looks good to go. I'll go ahead and merge this now. Happy to follow up with any further iterations if needed

priscilawebdev added 30 commits October 19, 2026 12:34

ref(menu): Share presentation primitives across dropdown controls

72c24bb

Create a context-free Menu presentation API from master. Compose it from DropdownMenu and CompactSelect while retaining each control’s interaction behavior.

ref(menu): Move shared item into Menu

fbc0d6b

Make Menu own the shared item implementation and retain the existing menuListItem import as a compatibility re-export.

ref(menu): Fold item component into Menu

efcbee8

ref(menu): Name shared item implementation listItem

a462fcd

docs(menu): Remove standalone Menu story

c1075ec

ref(menu): Name shared list item props explicitly

a4a470d

ref(menu): Consolidate presentation components

5540e2a

ref(menu): Default section items to presentational role

12c901c

docs(menu): Restore shared Menu story

a1d9b57

ref(menu): Use shared dropdown presentation defaults

05c0852

fix(menu): Share selected item presentation across controls

32136e6

Use Menu.Item selection state for Preferences options and remove CompactSelect's local item padding override so both controls follow the shared menu presentation.

fix(menu): Align shared menu groups and user preferences

5fa6014

ref(menu): Name shared item props after Menu.Item

8b82892

ref(menu): Centralize footer padding

76d72d0

fix(compact-select): Align section divider spacing with menu design

50e637c

docs(menu): Remove shared Menu story

0a49ef3

ref(menu): Name shared list item Menu.ListItems

7e4e88a

ref(menu): Expose Menu.ListItem from index

b0afb41

ref(menu): Remove unnecessary menu item type assertions

e607ab1

Read React Aria node props directly and keep the menu item generic type without a memo assertion.

fix(menu): Restore selected item priority in compact selects

00a55f5

Preserve primary styling for selected single-select options and finish the menu item props rename.

fix(menu): Use explicit priority for compact select options

3e67297

ref(menu): Rename section group components

e449211

fix(menu): Type compact select leading items safely

e1c8782

ref(menu): Shorten section list component name

d499fea

ref(menu): Rename section heading component

825cc6f

ref(menu): Name section separator explicitly

63ed306

ref(menu): Clarify list item padding by size

c9e215d

ref(menu): Use text variants for item labels

02722fe

ref(menu): Place heading color follow-up on section label

de5ff74

ref(menu): Use muted text variant for disabled labels

364d938

ref(dropdown-menu): Share search options between list and submenu

47ec908

Keep menu content responsible for query state and pass the list its value and change handler separately.

vercel Bot deployed to Preview October 21, 2026 20:33

View deployment

ref(dropdown-menu): Keep list search props grouped

7c18b46

Pass the controlled search input as one object while menu content retains ownership of the query.

vercel Bot deployed to Preview October 21, 2026 20:35

View deployment

priscilawebdev requested a review from a team October 21, 2026 20:48

ref(dropdown-menu): Share search options across menus

3c67639

Use one public search options type for root menus and submenus. Name the private list prop searchState to distinguish its controlled input data.

vercel Bot deployed to Preview October 22, 2026 06:23

View deployment

ref(dropdown-menu): Use content size caps for submenus

59cf964

Expose maxHeight and maxWidth in submenu options, mirroring content sizing props. Keep the project submenu within 240px height and 258px width while allowing smaller content to fit naturally.

vercel Bot deployed to Preview October 22, 2026 06:33

View deployment

ref(ui): Share dropdown menu content size options

9ced034

Use maxHeight and maxWidth for root menus and submenus, and migrate existing root menu height callers.

priscilawebdev requested review from a team as code owners October 22, 2026 06:35

vercel Bot deployed to Preview October 22, 2026 06:36

View deployment

ref(ui): Remove fixed dropdown menu dimensions

8696066

Keep shared maxHeight and maxWidth options for root menus and submenus, and cap the organization menu width without forcing it.

vercel Bot deployed to Preview October 22, 2026 06:43

View deployment

Merge branch 'master' into feat/searchable-project-submenu

7b1519d

vercel Bot deployed to Preview October 22, 2026 06:49

View deployment

ref(ui): Reuse interactive selector from existing hook

417d849

Export the existing selector from its original module and remove the additional package entry.

cursor Bot reviewed Oct 22, 2026

View reviewed changes

natemoo-re approved these changes Oct 22, 2026

View reviewed changes

priscilawebdev added 5 commits October 27, 2026 08:24

ref(ui): Move menu height helper to shared menu module

5906449

Rename minHeight to calculateMenuMinHeight and export it from @sentry/scraps/menu instead of compactSelect utils.

ref(nav): Render project menu items as links

d2824db

Use `to` instead of an onAction navigate so project settings items support cmd+click and open in new tab, matching the Settings item.

ref(ui): Scope trailingAction to DropdownMenu items

5d90a5f

Move trailingAction out of the shared ListItemProps so it is no longer exposed on Select and CompactSelect options. MenuListItem still renders it, and DropdownMenu's MenuItemProps is the only public API for it.

fix(dropdown-menu): Skip disabled items in keyboard navigation

5862cd9

ArrowUp back to search and the search field's ArrowDown used the first menu item in the DOM, which may be disabled. Use the first and last enabled items instead, matching CompactSelect.

cursor Bot reviewed Oct 27, 2026

View reviewed changes

Conversation

priscilawebdev commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

priscilawebdev commented Oct 22, 2026

Uh oh!

cursor Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

natemoo-re left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

priscilawebdev commented Oct 27, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

priscilawebdev commented Oct 27, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

priscilawebdev commented Oct 20, 2026 •

edited

Loading

cursor Bot left a comment •

edited

Loading