feat(pagefilters): Fix sentinel toggle behavior for All/My Projects quick-select (#109545)

Updates hybrid filters with My Projects and All Projects selection
mechanism

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Jonas <JonasBa@users.noreply.github.com>

Author: 3 people

static/app/components/core/compactSelect/compactSelect.tsx

@@ -123,7 +123,7 @@ export function CompactSelect<Value extends SelectKey>({
   const [measuredMenuWidth, setMeasuredMenuWidth] = useState<number>();
   const [hasMeasured, setHasMeasured] = useState(false);
   const needsMeasuring =
-    !menuWidth && !grid && !hasMeasured && shouldVirtualize(options, virtualizeThreshold);
+    !menuWidth && !hasMeasured && shouldVirtualize(options, virtualizeThreshold);
 
   const menuRef = useCallback(
     (element: HTMLDivElement | null) => {

static/app/components/core/compactSelect/gridList/index.tsx

@@ -12,9 +12,11 @@ import {
   ListWrap,
   SelectFilterContext,
   SizeLimitMessage,
+  useVirtualizedItems,
   type SelectKey,
   type SelectSection,
 } from '@sentry/scraps/compactSelect';
+import {Container} from '@sentry/scraps/layout';
 
 import {t} from 'sentry/locale';
 
@@ -63,6 +65,10 @@ interface GridListProps
    * Message to be displayed when some options are hidden due to `sizeLimit`.
    */
   sizeLimitMessage?: string;
+  /**
+   * If true, virtualization will be enabled for the list.
+   */
+  virtualized?: boolean;
 }
 
 /**
@@ -82,6 +88,7 @@ function GridList({
   onSectionToggle,
   sizeLimitMessage,
   keyDownHandler,
+  virtualized,
   ...props
 }: GridListProps) {
   const ref = useRef<HTMLUListElement>(null);
@@ -114,41 +121,61 @@ function GridList({
     [listState.collection, hiddenOptions]
   );
 
+  const virtualizer = useVirtualizedItems({
+    listItems,
+    virtualized,
+    size,
+  });
+
+  const mergedProps = mergeProps(gridProps, props);
+
   return (
     <Fragment>
       {listItems.length !== 0 && <ListSeparator role="separator" />}
       {listItems.length !== 0 && label && <ListLabel id={labelId}>{label}</ListLabel>}
       {overlayIsOpen && (
-        <ListWrap {...mergeProps(gridProps, props)} onKeyDown={onKeyDown} ref={ref}>
-          {listItems.map(item => {
-            if (item.type === 'section') {
-              return (
-                <GridListSection
-                  key={item.key}
-                  node={item}
-                  listState={listState}
-                  onToggle={onSectionToggle}
-                  size={size}
-                />
-              );
-            }
+        <Container ref={virtualizer.scrollElementRef} height="100%" overflowY="auto">
+          <Container {...virtualizer.wrapperProps}>
+            <ListWrap
+              {...mergedProps}
+              style={{...mergedProps.style, ...virtualizer.listWrapStyle}}
+              onKeyDown={onKeyDown}
+              ref={ref}
+            >
+              {virtualizer.items.map(row => {
+                const item = listItems[row.index]!;
+                if (item.type === 'section') {
+                  return (
+                    <GridListSection
+                      {...virtualizer.itemProps(row.index)}
+                      key={item.key}
+                      node={item}
+                      listState={listState}
+                      onToggle={onSectionToggle}
+                      size={size}
+                    />
+                  );
+                }
 
-            return (
-              <GridListOption
-                key={item.key}
-                node={item}
-                listState={listState}
-                size={size}
-              />
-            );
-          })}
+                return (
+                  <GridListOption
+                    key={item.key}
+                    {...virtualizer.itemProps(row.index)}
+                    node={item}
+                    listState={listState}
+                    size={size}
+                  />
+                );
+              })}
 
-          {!searchable && hiddenOptions.size > 0 && (
-            <SizeLimitMessage>
-              {sizeLimitMessage ?? t('Use search to find more options…')}
-            </SizeLimitMessage>
-          )}
-        </ListWrap>
+              {!searchable && hiddenOptions.size > 0 && (
+                <SizeLimitMessage>
+                  {sizeLimitMessage ?? t('Use search to find more options…')}
+                </SizeLimitMessage>
+              )}
+            </ListWrap>
+          </Container>
+        </Container>
       )}
     </Fragment>
   );

static/app/components/core/compactSelect/index.tsx

@@ -44,6 +44,8 @@ export {
   getEscapedKey,
 } from './utils';
 
+export {useVirtualizedItems} from './useVirtualizedItems';
+
 export {SelectFilterContext} from './list';
 export {TriggerLabel} from './control';
 

static/app/components/core/compactSelect/useVirtualizedItems.tsx

@@ -0,0 +1,78 @@
+import {useRef} from 'react';
+import type {Node} from '@react-types/shared';
+import {useVirtualizer} from '@tanstack/react-virtual';
+
+import type {FormSize} from 'sentry/utils/theme';
+
+const heightEstimations = {
+  sm: {regular: 32, large: 49},
+  md: {regular: 36, large: 53},
+  xs: {regular: 25, large: 42},
+} as const satisfies Record<FormSize, {large: number; regular: number}>;
+
+// explicitly using object here because Record<PropertyKey, unknown> requires an index signature
+// eslint-disable-next-line @typescript-eslint/no-restricted-types
+type ObjectLike = object;
+
+export function useVirtualizedItems<T extends ObjectLike>({
+  listItems,
+  virtualized = false,
+  size,
+}: {
+  listItems: Array<Node<T>>;
+  size: FormSize;
+  virtualized: boolean | undefined;
+}) {
+  const scrollElementRef = useRef<HTMLDivElement>(null);
+  const heightEstimation = heightEstimations[size];
+
+  const virtualizer = useVirtualizer({
+    count: listItems.length,
+    getScrollElement: () => scrollElementRef?.current,
+    estimateSize: index => {
+      const item = listItems[index];
+      if (item?.value && 'details' in item.value) {
+        return heightEstimation.large;
+      }
+      return heightEstimation.regular;
+    },
+    enabled: virtualized,
+  });
+
+  if (virtualized) {
+    const virtualizedItems = virtualizer.getVirtualItems();
+    return {
+      items: virtualizedItems,
+      scrollElementRef,
+      itemProps: (index: number) => ({
+        ref: virtualizer.measureElement,
+        'data-index': index,
+      }),
+      wrapperProps: {
+        'data-is-virtualized': true,
+        style: {
+          height: virtualizer.getTotalSize(),
+          width: '100%',
+          position: 'relative',
+        },
+      },
+      listWrapStyle: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        transform: `translateY(${virtualizedItems[0]?.start ?? 0}px)`,
+      },
+    } as const;
+  }
+
+  return {
+    items: listItems.map((_, index) => ({index, start: 0})),
+    scrollElementRef: undefined,
+    itemProps: () => undefined,
+    wrapperProps: {
+      'data-is-virtualized': false,
+    },
+    listWrapStyle: {},
+  } as const;
+}

static/app/components/pageFilters/environment/environmentPageFilter.tsx

@@ -259,11 +259,11 @@ export function EnvironmentPageFilter({
           <Flex gap="md" align="center" justify="end">
             <MenuComponents.CancelButton
               disabled={!hasStagedChanges}
-              onClick={() => dispatch({type: 'remove staged'})}
+              onClick={() => stagedSelect.dispatch({type: 'remove staged'})}
             />
             <MenuComponents.ApplyButton
               onClick={() => {
-                dispatch({type: 'remove staged'});
+                stagedSelect.dispatch({type: 'remove staged'});
                 handleChange(stagedSelect.value);
               }}
             />