fix(cmdk): Filter out async resource actions with 0 results

static/app/components/commandPalette/ui/commandPalette.spec.tsx

@@ -24,6 +24,7 @@ jest.mock('@tanstack/react-virtual', () => ({
 
 import {closeModal} from 'sentry/actionCreators/modal';
 import * as modalActions from 'sentry/actionCreators/modal';
+import type {CommandPaletteAction} from 'sentry/components/commandPalette/types';
 import {cmdkQueryOptions} from 'sentry/components/commandPalette/types';
 import {CommandPaletteProvider} from 'sentry/components/commandPalette/ui/cmdk';
 import {CMDKAction} from 'sentry/components/commandPalette/ui/cmdk';
@@ -834,4 +835,140 @@ describe('CommandPalette', () => {
       expect(screen.getAllByRole('option')).toHaveLength(1);
     });
   });
+
+  describe('resource action with 0 results', () => {
+    function emptyResource() {
+      return cmdkQueryOptions({
+        queryKey: ['test-empty-resource'] as const,
+        queryFn: (): CommandPaletteAction[] => [],
+      });
+    }
+
+    it('is omitted from browse mode at the top level', async () => {
+      render(
+        <CommandPaletteProvider>
+          <CMDKAction display={{label: 'Async Resource'}} resource={emptyResource}>
+            {data =>
+              data.map((_, i) => (
+                <CMDKAction key={i} to="/x/" display={{label: 'Result'}} />
+              ))
+            }
+          </CMDKAction>
+          <CMDKAction display={{label: 'Real Action'}} onAction={jest.fn()} />
+          <CommandPalette onAction={jest.fn()} />
+        </CommandPaletteProvider>
+      );
+
+      await screen.findByRole('option', {name: 'Real Action'});
+      expect(
+        screen.queryByRole('option', {name: 'Async Resource'})
+      ).not.toBeInTheDocument();
+    });
+
+    it('is omitted from browse mode when nested inside a group', async () => {
+      render(
+        <CommandPaletteProvider>
+          <CMDKAction display={{label: 'Group'}}>
+            <CMDKAction display={{label: 'Async Resource'}} resource={emptyResource}>
+              {data =>
+                data.map((_, i) => (
+                  <CMDKAction key={i} to="/x/" display={{label: 'Result'}} />
+                ))
+              }
+            </CMDKAction>
+            <CMDKAction display={{label: 'Real Action'}} onAction={jest.fn()} />
+          </CMDKAction>
+          <CommandPalette onAction={jest.fn()} />
+        </CommandPaletteProvider>
+      );
+
+      await screen.findByRole('option', {name: 'Real Action'});
+      expect(
+        screen.queryByRole('option', {name: 'Async Resource'})
+      ).not.toBeInTheDocument();
+    });
+
+    it('group whose only children are empty resource nodes is omitted entirely in browse mode', async () => {
+      // Regression: browse mode pushed the section header unconditionally before
+      // iterating children. If every child was an empty resource node and got
+      // skipped, an orphaned, non-selectable section header was left in the list.
+      render(
+        <CommandPaletteProvider>
+          <CMDKAction display={{label: 'All Empty Group'}}>
+            <CMDKAction display={{label: 'Async Resource'}} resource={emptyResource}>
+              {data =>
+                data.map((_, i) => (
+                  <CMDKAction key={i} to="/x/" display={{label: 'Result'}} />
+                ))
+              }
+            </CMDKAction>
+          </CMDKAction>
+          <CMDKAction display={{label: 'Real Action'}} onAction={jest.fn()} />
+          <CommandPalette onAction={jest.fn()} />
+        </CommandPaletteProvider>
+      );
+
+      await screen.findByRole('option', {name: 'Real Action'});
+      // Neither the section header nor any item for the all-empty group should appear.
+      expect(
+        screen.queryByRole('option', {name: 'All Empty Group'})
+      ).not.toBeInTheDocument();
+    });
+
+    it('is omitted from search mode when nested inside a group whose label matches the query', async () => {
+      render(
+        <CommandPaletteProvider>
+          <CMDKAction display={{label: 'Navigate'}}>
+            <CMDKAction display={{label: 'Async Resource'}} resource={emptyResource}>
+              {data =>
+                data.map((_, i) => (
+                  <CMDKAction key={i} to="/x/" display={{label: 'Result'}} />
+                ))
+              }
+            </CMDKAction>
+          </CMDKAction>
+          <CMDKAction display={{label: 'Other'}} onAction={jest.fn()} />
+          <CommandPalette onAction={jest.fn()} />
+        </CommandPaletteProvider>
+      );
+
+      const input = await screen.findByRole('textbox', {name: 'Search commands'});
+      await userEvent.type(input, 'navigate');
+
+      // Wait for search to take effect — 'Other' should be filtered out since it doesn't match
+      await waitFor(() => {
+        expect(screen.queryByRole('option', {name: 'Other'})).not.toBeInTheDocument();
+      });
+      expect(
+        screen.queryByRole('option', {name: 'Async Resource'})
+      ).not.toBeInTheDocument();
+    });
+
+    it('is omitted from search mode even when the label matches the query', async () => {
+      render(
+        <CommandPaletteProvider>
+          <CMDKAction display={{label: 'Async Resource'}} resource={emptyResource}>
+            {data =>
+              data.map((_, i) => (
+                <CMDKAction key={i} to="/x/" display={{label: 'Result'}} />
+              ))
+            }
+          </CMDKAction>
+          <CMDKAction display={{label: 'Other'}} onAction={jest.fn()} />
+          <CommandPalette onAction={jest.fn()} />
+        </CommandPaletteProvider>
+      );
+
+      const input = await screen.findByRole('textbox', {name: 'Search commands'});
+      await userEvent.type(input, 'async');
+
+      // Wait for search to take effect — 'Other' should be filtered out since it doesn't match
+      await waitFor(() => {
+        expect(screen.queryByRole('option', {name: 'Other'})).not.toBeInTheDocument();
+      });
+      expect(
+        screen.queryByRole('option', {name: 'Async Resource'})
+      ).not.toBeInTheDocument();
+    });
+  });
 });

static/app/components/commandPalette/ui/commandPalette.tsx

@@ -517,16 +517,22 @@ function flattenActions(
       if (!isGroup && !('to' in node) && !('onAction' in node)) {
         const hasPromptOrResource =
           ('prompt' in node && !!node.prompt) || ('resource' in node && !!node.resource);
-        if (!hasPromptOrResource) {
+        if (!hasPromptOrResource || isEmptyResourceNode(node)) {
           continue;
         }
       }
 
-      results.push({...node, listItemType: isGroup ? 'section' : 'action'});
       if (isGroup) {
-        for (const child of node.children) {
-          results.push({...child, listItemType: 'action'});
+        const children = node.children
+          .filter(child => !isEmptyResourceNode(child))
+          .map(child => ({...child, listItemType: 'action' as const}));
+        if (!children.length) {
+          continue;
         }
+        results.push({...node, listItemType: 'section'});
+        results.push(...children);
+      } else {
+        results.push({...node, listItemType: 'action'});
       }
     }
     return results;
@@ -560,7 +566,9 @@ function flattenActions(
 
   const flattened = collected.flatMap((item): CMDKFlatItem[] => {
     if (item.children.length > 0) {
-      const matched = item.children.filter(c => scores.get(c.key)?.score.matched);
+      const matched = item.children.filter(
+        c => scores.get(c.key)?.score.matched && !isEmptyResourceNode(c)
+      );
       if (!matched.length) return [];
       return [
         // Suffix the header key so a group used as both a section header and
@@ -575,6 +583,11 @@ function flattenActions(
           .map(c => ({...c, listItemType: 'action' as const})),
       ];
     }
+    // Skip resource nodes with no children — they are async group containers that
+    // returned 0 results and have no executable action of their own.
+    if (isEmptyResourceNode(item)) {
+      return [];
+    }
     return scores.get(item.key)?.score.matched ? [{...item, listItemType: 'action'}] : [];
   });
 
@@ -586,6 +599,16 @@ function flattenActions(
   });
 }
 
+function isEmptyResourceNode(node: CollectionTreeNode<CMDKActionData>): boolean {
+  return (
+    node.children.length === 0 &&
+    'resource' in node &&
+    !('to' in node) &&
+    !('onAction' in node) &&
+    !('prompt' in node && node.prompt)
+  );
+}
+
 function makeMenuItemFromAction(action: CMDKFlatItem): CommandPaletteActionMenuItem {
   const isExternal = 'to' in action ? isExternalLocation(action.to) : false;
   const trailingItems =

static/app/components/commandPalette/useCommandPaletteActions.mdx

@@ -80,19 +80,20 @@ function YourComponent() {
         />
       </CMDKAction>
 
-      {/* The command palette UI — also accepts inline actions via children */}
-      <CommandPalette onAction={handleAction}>
-        <CMDKAction display={{label: 'Issues List'}}>
-          <CMDKAction
-            display={{label: 'Select all'}}
-            onAction={() => addSuccessMessage('Select all')}
-          />
-          <CMDKAction
-            display={{label: 'Deselect all'}}
-            onAction={() => addSuccessMessage('Deselect all')}
-          />
-        </CMDKAction>
-      </CommandPalette>
+      {/* Inline actions declared as siblings to the palette */}
+      <CMDKAction display={{label: 'Issues List'}}>
+        <CMDKAction
+          display={{label: 'Select all'}}
+          onAction={() => addSuccessMessage('Select all')}
+        />
+        <CMDKAction
+          display={{label: 'Deselect all'}}
+          onAction={() => addSuccessMessage('Deselect all')}
+        />
+      </CMDKAction>
+
+      {/* The command palette UI */}
+      <CommandPalette onAction={handleAction} />
     </CommandPaletteProvider>
   );
 }