Skip to content

feat(onboarding): Support grouped options in ScmVirtualizedMenuList - #122103

Draft
jaydgoss wants to merge 1 commit into
jaygoss/scm-platform-picker-alphafrom
jaygoss/scm-virtualized-menu-groups
Draft

feat(onboarding): Support grouped options in ScmVirtualizedMenuList#122103
jaydgoss wants to merge 1 commit into
jaygoss/scm-platform-picker-alphafrom
jaygoss/scm-virtualized-menu-groups

Conversation

@jaydgoss

@jaydgoss jaydgoss commented Aug 14, 2026

Copy link
Copy Markdown
Member

TLDR

ScmVirtualizedMenuList can now render react-select grouped options, with section headings and options each becoming one virtualized row. Flat option lists render exactly as before.

Details

react-select renders each option group as a single Group element wrapping all of its Option children, so the row-per-child virtualizer would treat an entire section as one 36px row. The menu list now flattens Group children into heading and option rows, rendering headings the way react-select's own Group does so the core Select's groupHeading styles still apply.

Rows are measured on mount (measureElement) instead of assuming a fixed height, since headings are shorter than options and an empty-label heading collapses to zero, and getItemKey keeps those measurements attached to rows when filtering shifts the list. Keyboard-focus scrolling maps the focused option to its flattened row index, so headings count toward the scroll target. The next PR in the stack uses this to section the SCM platform picker.

Stack

  • PR 1: fix(onboarding): Sort SCM platform picker alphabetically
  • PR 2 (this): feat(onboarding): Support grouped options in ScmVirtualizedMenuList
  • PR 3: feat(onboarding): Section the SCM platform picker into Popular and Other

@github-actions

github-actions Bot commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

📊 Type Coverage Diff

Metric Before After Delta
Coverage 94.36% 94.36% ±0%
Typed 134,724 134,738 🟢 +14
Untyped 8,048 8,052 🔴 +4
🔍 4 new type safety issues introduced

any-typed symbols (4 new)

File Line Detail
static/app/components/onboarding/scm/scmVirtualizedMenuList.tsx 53 element (var)
static/app/components/onboarding/scm/scmVirtualizedMenuList.tsx 71 Heading (var(binding))
static/app/components/onboarding/scm/scmVirtualizedMenuList.tsx 87 groupOptions (var)
static/app/components/onboarding/scm/scmVirtualizedMenuList.tsx 90 option (var)

This is informational only and does not block the PR.

@sentry

sentry Bot commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

Sentry Snapshot Testing

Name Added Removed Changed Renamed Unchanged Skipped Status
sentry-frontend
sentry-frontend
0 0 0 0 473 0 ✅ Unchanged

⚙️ sentry-frontend Snapshot Settings

@jaydgoss
jaydgoss force-pushed the jaygoss/scm-platform-picker-alpha branch from 658ea9f to 2621d52 Compare August 14, 2026 23:18
@jaydgoss
jaydgoss force-pushed the jaygoss/scm-virtualized-menu-groups branch from 666f185 to f88eab6 Compare August 14, 2026 23:18
react-select renders each option group as a single Group element wrapping its Option children, which the virtualizer would treat as one fixed-height row. Flatten groups into heading and option rows, measured per row since headings differ in height from options. Flat option lists render exactly as before. Prepares the SCM platform picker for a sectioned dropdown.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant