ref(issues) cmdk actions

JonasBa · JonasBa · commit 449601156688 · 2026-04-09T06:48:21.000+02:00
diff --git a/static/app/components/commandPalette/ui/commandPalette.tsx b/static/app/components/commandPalette/ui/commandPalette.tsx
@@ -90,7 +90,7 @@ export function CommandPalette(props: CommandPaletteProps) {
 
   const actions = useMemo<CMDKFlatItem[]>(() => {
     if (!state.query) {
-      return flattenActions(currentNodes, null);
+      return flattenActions(currentNodes, null, !state.action);
     }
 
     const scores = new Map<
@@ -99,7 +99,7 @@ export function CommandPalette(props: CommandPaletteProps) {
     >();
     scoreTree(currentNodes, scores, state.query.toLowerCase());
     return flattenActions(currentNodes, scores);
-  }, [currentNodes, state.query]);
+  }, [currentNodes, state.query, state.action]);
 
   const analytics = useCommandPaletteAnalytics(actions.length);
 
@@ -459,12 +459,21 @@ function scoreTree(
   }
 }
 
+// Maximum number of children to show per group, in both browse and search mode.
+// Prevents groups with many items (e.g. per-project settings on large orgs)
+// from flooding the results list.
+const MAX_GROUP_CHILDREN = 4;
+
 function flattenActions(
   nodes: Array<CollectionTreeNode<CMDKActionData>>,
   scores: Map<
     string,
     {node: CollectionTreeNode<CMDKActionData>; score: {matched: boolean; score: number}}
-  > | null
+  > | null,
+  // Only expand groups inline at the true root level. When the user has
+  // navigated into a group, nested groups should appear as navigable actions
+  // rather than being pre-expanded as section headers with their children.
+  expandGroups = true
 ): CMDKFlatItem[] {
   // Browse mode: show each top-level node and its direct children.
   if (!scores) {
@@ -476,11 +485,19 @@ function flattenActions(
       if (!isGroup && !('to' in node) && !('onAction' in node)) {
         continue;
       }
-      results.push({...node, listItemType: isGroup ? 'section' : 'action'});
-      if (isGroup) {
-        for (const child of node.children) {
+      if (isGroup && expandGroups) {
+        // Expand the group inline: render it as a section header followed by
+        // its direct children. This only happens at the true root level so
+        // that nested groups (e.g. "Set Priority" inside "Select All") are
+        // shown as navigable actions rather than pre-expanded sections.
+        results.push({...node, listItemType: 'section'});
+        for (const child of node.children.slice(0, MAX_GROUP_CHILDREN)) {
           results.push({...child, listItemType: 'action'});
         }
+      } else {
+        // Leaf action or a group that should not be expanded inline — treat
+        // as a single navigable item regardless.
+        results.push({...node, listItemType: 'action'});
       }
     }
     return results;
@@ -526,6 +543,7 @@ function flattenActions(
               (scores.get(b.key)?.score.score ?? 0) -
               (scores.get(a.key)?.score.score ?? 0)
           )
+          .slice(0, MAX_GROUP_CHILDREN)
           .map(c => ({...c, listItemType: 'action' as const})),
       ];
     }
diff --git a/static/app/components/commandPalette/ui/commandPaletteGlobalActions.tsx b/static/app/components/commandPalette/ui/commandPaletteGlobalActions.tsx
@@ -220,6 +220,44 @@ export function GlobalCommandPaletteActions() {
             />
           ))}
         </CMDKAction>
+
+        {user.isStaff && (
+          <CMDKAction display={{label: t('Admin')}}>
+            <CMDKAction
+              display={{label: t('Open _admin'), icon: <IconOpen />}}
+              keywords={[t('superuser')]}
+              onAction={() => window.open('/_admin/', '_blank', 'noreferrer')}
+            />
+            <CMDKAction
+              display={{
+                label: t('Open %s in _admin', organization.name),
+                icon: <IconOpen />,
+              }}
+              keywords={[t('superuser')]}
+              onAction={() =>
+                window.open(
+                  `/_admin/customers/${organization.slug}/`,
+                  '_blank',
+                  'noreferrer'
+                )
+              }
+            />
+            {!isActiveSuperuser() && (
+              <CMDKAction
+                display={{label: t('Open Superuser Modal'), icon: <IconLock locked />}}
+                keywords={[t('superuser')]}
+                onAction={() => openSudo({isSuperuser: true, needsReload: true})}
+              />
+            )}
+            {isActiveSuperuser() && (
+              <CMDKAction
+                display={{label: t('Exit Superuser'), icon: <IconLock locked={false} />}}
+                keywords={[t('superuser')]}
+                onAction={() => exitSuperuser()}
+              />
+            )}
+          </CMDKAction>
+        )}
       </CMDKAction>
 
       <CMDKAction display={{label: t('Add')}}>
@@ -395,44 +433,6 @@ export function GlobalCommandPaletteActions() {
           />
         </CMDKAction>
       </CMDKAction>
-
-      {user.isStaff && (
-        <CMDKAction display={{label: t('Admin')}}>
-          <CMDKAction
-            display={{label: t('Open _admin'), icon: <IconOpen />}}
-            keywords={[t('superuser')]}
-            onAction={() => window.open('/_admin/', '_blank', 'noreferrer')}
-          />
-          <CMDKAction
-            display={{
-              label: t('Open %s in _admin', organization.name),
-              icon: <IconOpen />,
-            }}
-            keywords={[t('superuser')]}
-            onAction={() =>
-              window.open(
-                `/_admin/customers/${organization.slug}/`,
-                '_blank',
-                'noreferrer'
-              )
-            }
-          />
-          {!isActiveSuperuser() && (
-            <CMDKAction
-              display={{label: t('Open Superuser Modal'), icon: <IconLock locked />}}
-              keywords={[t('superuser')]}
-              onAction={() => openSudo({isSuperuser: true, needsReload: true})}
-            />
-          )}
-          {isActiveSuperuser() && (
-            <CMDKAction
-              display={{label: t('Exit Superuser'), icon: <IconLock locked={false} />}}
-              keywords={[t('superuser')]}
-              onAction={() => exitSuperuser()}
-            />
-          )}
-        </CMDKAction>
-      )}
     </CommandPaletteSlot>
   );
 }
diff --git a/static/app/components/commandPalette/ui/commandPaletteStateContext.tsx b/static/app/components/commandPalette/ui/commandPaletteStateContext.tsx
@@ -46,11 +46,20 @@ function commandPaletteReducer(
 ): CommandPaletteState {
   const type = action.type;
   switch (type) {
-    case 'toggle modal':
+    case 'toggle modal': {
+      const nextOpen = !state.open;
       return {
         ...state,
-        open: !state.open,
+        open: nextOpen,
+        // Reset navigation and query when opening. The slot system portals
+        // CMDKAction children into the outlet's DOM element, so switching
+        // between portal and in-place rendering causes React to remount those
+        // components with fresh useId() keys. Any nav-stack key stored from a
+        // prior session is therefore stale — resetting here ensures the palette
+        // always opens at the root.
+        ...(nextOpen ? {action: null, query: ''} : {}),
       };
+    }
     case 'reset':
       return {
         ...state,
diff --git a/static/app/components/core/slot/slot.spec.tsx b/static/app/components/core/slot/slot.spec.tsx
@@ -11,7 +11,12 @@ describe('slot', () => {
     expect(SlotModule.Fallback).toBeDefined();
   });
 
-  it('renders children in place when no Outlet is registered', () => {
+  it('hides children in a detached container when no Outlet is registered', () => {
+    // Children are always portaled — to a stable hidden div before the outlet
+    // mounts, to the real outlet element once it registers. This prevents the
+    // in-place → portal type switch that would remount the subtree and lose
+    // component state (e.g. useId() keys). Content is intentionally invisible
+    // until an outlet is available.
     const SlotModule = slot(['header'] as const);
 
     render(
@@ -22,7 +27,7 @@ describe('slot', () => {
       </SlotModule.Provider>
     );
 
-    expect(screen.getByText('inline content')).toBeInTheDocument();
+    expect(screen.queryByText('inline content')).not.toBeInTheDocument();
   });
 
   it('portals children to the Outlet element', () => {
@@ -44,7 +49,7 @@ describe('slot', () => {
     );
   });
 
-  it('multiple slot consumers render their children independently', () => {
+  it('multiple slot consumers hide their children independently when no Outlet is registered', () => {
     const SlotModule = slot(['a', 'b'] as const);
 
     render(
@@ -58,8 +63,8 @@ describe('slot', () => {
       </SlotModule.Provider>
     );
 
-    expect(screen.getByText('slot a content')).toBeInTheDocument();
-    expect(screen.getByText('slot b content')).toBeInTheDocument();
+    expect(screen.queryByText('slot a content')).not.toBeInTheDocument();
+    expect(screen.queryByText('slot b content')).not.toBeInTheDocument();
   });
 
   it('consumer throws when rendered outside provider', () => {
diff --git a/static/app/components/core/slot/slot.tsx b/static/app/components/core/slot/slot.tsx
@@ -140,8 +140,6 @@ function makeSlotConsumer<T extends Slot>(
       return () => dispatch({type: 'decrement counter', name});
     }, [dispatch, name]);
 
-    const element = state[name]?.element;
-
     // Provide outletNameContext from the consumer so that portaled children
     // (which don't descend through the outlet in the component tree) can still
     // read which slot they belong to via useSlotOutletRef.
@@ -151,11 +149,27 @@ function makeSlotConsumer<T extends Slot>(
       </outletNameContext.Provider>
     );
 
-    if (!element) {
-      // Render in place as a fallback when no target element is registered yet
-      return wrappedChildren;
+    // A stable hidden container used as the portal target before an outlet
+    // mounts. Keeping children always inside a portal (rather than switching
+    // between portal and in-place rendering) means React never sees a
+    // different element type across renders, so component instances — and
+    // the ids they hold (e.g. useId()) — are preserved when the outlet mounts
+    // or unmounts. This also prevents a flash of content at the wrong DOM
+    // position that would occur with in-place rendering followed by a teleport.
+    const hiddenContainer = useRef<HTMLElement | null>(null);
+    if (!hiddenContainer.current && typeof document !== 'undefined') {
+      hiddenContainer.current = document.createElement('div');
+    }
+
+    const element = state[name]?.element;
+    const target = element ?? hiddenContainer.current;
+
+    if (!target) {
+      // SSR: document is not available, render nothing.
+      return null;
     }
-    return createPortal(wrappedChildren, element);
+
+    return createPortal(wrappedChildren, target);
   }
 
   SlotConsumer.displayName = 'Slot.Consumer';
diff --git a/static/app/views/issueList/actions/index.tsx b/static/app/views/issueList/actions/index.tsx
