ref(cmdk) jsx powered cmdk (#112262)

Refactor CMDK to a composable JSX approach.

Previously, our CMDK required knowing actions aot and use a hook
registration process. We want to move to a fully JSX powered approach
and eventually also make actions render to the DOM (this is currently
not possible because virtualization is required and the listbox API
requires us to specify the full list)

This change brings us half way to being able to power the CMDK UI by
converting CMDK registration to JSX.

This enables some interesting patterns where the UI logic can be
colocated with the UI as seen
[here](0158ce5).

The way that this works is through the following mechanisms:
- Collection context responsible for storing nodes and edges
(essentially a recursive Context) that we use to maintain a
parent<->child mapping.
- A store with a `tree(root | undefined)` method which will reconstruct
the tree on-demand so that callers can have access to the most complete
UI at all times


The slots API mentioned above this are used in CMDK as contextual
priority slots that will appear as the first descendants of the CMDK
action (similar to how priority int value used to work before). CMDK now
has two slots, the first one is the `global` slot where global actions
should be registered, the second is the `page` where broader page
specific actions can be registered and the 3rd is the `task` slot, a
slot that is contextual to what the user is doing (e.g. if they are
editing a dashboard, saving or starring it might be a task they are
currently interested).

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: OpenAI Codex <noreply@openai.com>
Co-authored-by: OpenAI Codex <codex@openai.com>

Author: 3 people

static/app/bootstrap/processInitQueue.tsx

@@ -4,7 +4,7 @@ import {createBrowserRouter, RouterProvider} from 'react-router-dom';
 import throttle from 'lodash/throttle';
 
 import {exportedGlobals} from 'sentry/bootstrap/exportGlobals';
-import {CommandPaletteProvider} from 'sentry/components/commandPalette/context';
+import {CommandPaletteProvider} from 'sentry/components/commandPalette/ui/cmdk';
 import {DocumentTitleManager} from 'sentry/components/sentryDocumentTitle/documentTitleManager';
 import {ThemeAndStyleProvider} from 'sentry/components/themeAndStyleProvider';
 import {ScrapsProviders} from 'sentry/scrapsProviders';

static/app/components/commandPalette/__stories__/components.tsx

@@ -1,64 +1,51 @@
 import {useCallback} from 'react';
 
 import {addSuccessMessage} from 'sentry/actionCreators/indicator';
-import {CommandPaletteProvider} from 'sentry/components/commandPalette/context';
-import {useCommandPaletteActionsRegister} from 'sentry/components/commandPalette/context';
-import type {
-  CommandPaletteAction,
-  CommandPaletteActionWithKey,
-} from 'sentry/components/commandPalette/types';
+import {CommandPaletteProvider} from 'sentry/components/commandPalette/ui/cmdk';
+import {CMDKAction} from 'sentry/components/commandPalette/ui/cmdk';
+import type {CMDKActionData} from 'sentry/components/commandPalette/ui/cmdk';
+import type {CollectionTreeNode} from 'sentry/components/commandPalette/ui/collection';
 import {CommandPalette} from 'sentry/components/commandPalette/ui/commandPalette';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useNavigate} from 'sentry/utils/useNavigate';
 
-export function RegisterActions({actions}: {actions: CommandPaletteAction[]}) {
-  useCommandPaletteActionsRegister(actions);
-  return null;
-}
-
 export function CommandPaletteDemo() {
   const navigate = useNavigate();
 
   const handleAction = useCallback(
-    (action: CommandPaletteActionWithKey) => {
+    (action: CollectionTreeNode<CMDKActionData>) => {
       if ('to' in action) {
         navigate(normalizeUrl(action.to));
       } else if ('onAction' in action) {
         action.onAction();
-      } else {
-        // @TODO: implement async actions
       }
     },
     [navigate]
   );
 
-  const demoActions: CommandPaletteAction[] = [
-    {
-      display: {label: 'Go to Flex story'},
-      to: '/stories/layout/flex/',
-    },
-    {
-      display: {label: 'Execute an action'},
-      onAction: () => {
-        addSuccessMessage('Action executed');
-      },
-    },
-    {
-      display: {label: 'Parent action'},
-      actions: [
-        {
-          display: {label: 'Child action'},
-          onAction: () => {
-            addSuccessMessage('Child action executed');
-          },
-        },
-      ],
-    },
-  ];
-
   return (
     <CommandPaletteProvider>
-      <RegisterActions actions={demoActions} />
+      <CMDKAction display={{label: 'Go to Flex story'}} to="/stories/layout/flex/" />
+      <CMDKAction
+        display={{label: 'Execute an action'}}
+        onAction={() => addSuccessMessage('Action executed')}
+      />
+      <CMDKAction display={{label: 'Parent action'}}>
+        <CMDKAction
+          display={{label: 'Child action'}}
+          onAction={() => addSuccessMessage('Child action executed')}
+        />
+      </CMDKAction>
+      <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 onAction={handleAction} />
     </CommandPaletteProvider>
   );

static/app/components/commandPalette/context.tsx

@@ -16,97 +16,23 @@ interface Action {
   keywords?: string[];
 }
 
-/**
- * Actions that can be returned from an async resource query.
- * Async results cannot themselves carry a `resource` — chained async lookups
- * are not supported. Use CommandPaletteAction for registering top-level actions.
- */
-interface CommandPaletteAsyncResultGroup extends Action {
-  actions: CommandPaletteAsyncResult[];
-}
-
-export type CommandPaletteAsyncResult =
-  | CommandPaletteActionLink
-  | CommandPaletteActionCallback
-  | CommandPaletteAsyncResultGroup;
-
-export type CMDKQueryOptions = UseQueryOptions<
-  any,
-  Error,
-  CommandPaletteAsyncResult[],
-  any
->;
+export type CMDKQueryOptions = UseQueryOptions<any, Error, CommandPaletteAction[], any>;
 
 export interface CommandPaletteActionLink extends Action {
   /** Navigate to a route when selected */
   to: LocationDescriptor;
 }
 
 interface CommandPaletteActionCallback extends Action {
-  /**
-   * Execute a callback when the action is selected.
-   * Use the `to` prop if you want to navigate to a route.
-   */
   onAction: () => void;
 }
 
-interface CommandPaletteAsyncAction extends Action {
-  /**
-   * Execute a callback when the action is selected.
-   * Use the `to` prop if you want to navigate to a route.
-   */
-  resource: (query: string) => CMDKQueryOptions;
-}
-
-interface CommandPaletteAsyncActionGroup extends Action {
-  actions: CommandPaletteAction[];
-  resource: (query: string) => CMDKQueryOptions;
-}
-
 export type CommandPaletteAction =
   | CommandPaletteActionLink
   | CommandPaletteActionCallback
-  | CommandPaletteActionGroup
-  | CommandPaletteAsyncAction
-  | CommandPaletteAsyncActionGroup;
+  | CommandPaletteActionGroup;
 
 interface CommandPaletteActionGroup extends Action {
   /** Nested actions to show when this action is selected */
   actions: CommandPaletteAction[];
 }
-
-// Internally, a key is added to the actions in order to track them for registration and selection.
-type CommandPaletteActionLinkWithKey = CommandPaletteActionLink & {key: string};
-type CommandPaletteActionCallbackWithKey = CommandPaletteActionCallback & {
-  key: string;
-};
-type CommandPaletteAsyncActionWithKey = CommandPaletteAsyncAction & {
-  key: string;
-};
-type CommandPaletteAsyncActionGroupWithKey = Omit<
-  CommandPaletteAsyncActionGroup,
-  'actions'
-> & {
-  actions: CommandPaletteActionWithKey[];
-  key: string;
-};
-
-export type CommandPaletteActionWithKey =
-  // Sync actions (to, callback, group)
-  | CommandPaletteActionLinkWithKey
-  | CommandPaletteActionCallbackWithKey
-  | CommandPaletteActionGroupWithKey
-  // Async actions
-  | CommandPaletteAsyncActionWithKey
-  | CommandPaletteAsyncActionGroupWithKey;
-
-interface CommandPaletteActionGroupWithKey extends CommandPaletteActionGroup {
-  actions: Array<
-    | CommandPaletteActionLinkWithKey
-    | CommandPaletteActionCallbackWithKey
-    | CommandPaletteActionGroupWithKey
-    | CommandPaletteAsyncActionWithKey
-    | CommandPaletteAsyncActionGroupWithKey
-  >;
-  key: string;
-}