feat(cmdk): Group project settings actions

Group the project settings command palette entries under a single parent so browse mode stays more compact and easier to scan.

Add section-specific icons for the main project settings groups, keep legacy integrations as a direct action, and cover the new structure in the existing command palette test.

Co-Authored-By: OpenAI Codex <noreply@openai.com>

Author: JonasBa

static/app/views/settings/project/projectSettingsCommandPaletteActions.spec.tsx

@@ -23,29 +23,32 @@ describe('ProjectSettingsCommandPaletteActions', () => {
     expect(sections).toEqual(
       expect.arrayContaining([
         expect.objectContaining({
-          label: 'Project',
+          label: 'Project Settings',
           items: expect.arrayContaining([
             expect.objectContaining({
-              display: expect.objectContaining({label: 'General Settings'}),
-              to: '/settings/acme/projects/frontend/',
+              label: 'General',
+              items: expect.arrayContaining([
+                expect.objectContaining({
+                  display: expect.objectContaining({label: 'General Settings'}),
+                  to: '/settings/acme/projects/frontend/',
+                }),
+              ]),
             }),
-          ]),
-        }),
-        expect.objectContaining({
-          label: 'Processing',
-          items: expect.arrayContaining([
             expect.objectContaining({
-              display: expect.objectContaining({label: 'Performance'}),
-              to: '/settings/acme/projects/frontend/performance/',
+              label: 'Processing',
+              items: expect.arrayContaining([
+                expect.objectContaining({
+                  display: expect.objectContaining({label: 'Performance'}),
+                  to: '/settings/acme/projects/frontend/performance/',
+                }),
+              ]),
+            }),
+            expect.objectContaining({
+              label: 'SDK setup',
             }),
-          ]),
-        }),
-        expect.objectContaining({
-          label: 'Legacy Integrations',
-          items: expect.arrayContaining([
             expect.objectContaining({
-              display: expect.objectContaining({label: 'GitHub'}),
-              to: '/settings/acme/projects/frontend/plugins/github/',
+              display: expect.objectContaining({label: 'Legacy Integrations'}),
+              to: '/settings/acme/projects/frontend/plugins/',
             }),
           ]),
         }),
@@ -55,8 +58,16 @@ describe('ProjectSettingsCommandPaletteActions', () => {
     expect(sections).not.toEqual(
       expect.arrayContaining([
         expect.objectContaining({
+          label: 'Project Settings',
           items: expect.arrayContaining([
-            expect.objectContaining({to: '/settings/acme/projects/frontend/replays/'}),
+            expect.objectContaining({
+              label: 'Processing',
+              items: expect.arrayContaining([
+                expect.objectContaining({
+                  to: '/settings/acme/projects/frontend/replays/',
+                }),
+              ]),
+            }),
           ]),
         }),
         expect.objectContaining({

static/app/views/settings/project/projectSettingsCommandPaletteActions.tsx

@@ -5,6 +5,7 @@ import {ProjectAvatar} from '@sentry/scraps/avatar';
 
 import {CMDKAction} from 'sentry/components/commandPalette/ui/cmdk';
 import {CommandPaletteSlot} from 'sentry/components/commandPalette/ui/commandPaletteSlot';
+import {IconCode, IconProject, IconStack} from 'sentry/icons';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import {replaceRouterParams} from 'sentry/utils/replaceRouterParams';
@@ -19,12 +20,66 @@ type ProjectSettingsCommandPaletteAction = {
   to: string;
 };
 
-type ProjectSettingsCommandPaletteSection = {
-  icon: ReactNode;
-  items: ProjectSettingsCommandPaletteAction[];
+type ProjectSettingsCommandPaletteNode = {
+  items: Array<ProjectSettingsCommandPaletteAction | ProjectSettingsCommandPaletteNode>;
   label: string;
+  icon?: ReactNode;
 };
 
+function getProjectSettingsSectionLabel(sectionName: string) {
+  switch (sectionName) {
+    case 'Project':
+      return 'General';
+    case 'SDK Setup':
+      return 'SDK setup';
+    default:
+      return sectionName;
+  }
+}
+
+function getProjectSettingsSectionIcon(sectionLabel: string): ReactNode | undefined {
+  switch (sectionLabel) {
+    case 'General':
+      return <IconProject />;
+    case 'Processing':
+      return <IconStack />;
+    case 'SDK setup':
+      return <IconCode />;
+    default:
+      return undefined;
+  }
+}
+
+function flattenSingleItemSection(
+  section: ProjectSettingsCommandPaletteNode
+): ProjectSettingsCommandPaletteNode | ProjectSettingsCommandPaletteAction {
+  if (section.label === 'Legacy Integrations' && section.items.length > 0) {
+    return section.items[0]!;
+  }
+
+  return section;
+}
+
+function isProjectSettingsCommandPaletteNode(
+  item: ProjectSettingsCommandPaletteAction | ProjectSettingsCommandPaletteNode
+): item is ProjectSettingsCommandPaletteNode {
+  return 'items' in item;
+}
+
+function renderProjectSettingsCommandPaletteNode(
+  node: ProjectSettingsCommandPaletteNode | ProjectSettingsCommandPaletteAction
+): React.ReactNode {
+  if (!isProjectSettingsCommandPaletteNode(node)) {
+    return <CMDKAction key={node.to} {...node} />;
+  }
+
+  return (
+    <CMDKAction key={node.label} display={{label: node.label, icon: node.icon}}>
+      {node.items.map(item => renderProjectSettingsCommandPaletteNode(item))}
+    </CMDKAction>
+  );
+}
+
 function shouldShowItem(
   item: NavigationItem,
   context: Omit<NavigationGroupProps, 'items' | 'name' | 'id'>,
@@ -43,36 +98,69 @@ export function getProjectSettingsCommandPaletteSections({
 }: {
   organization: Organization;
   project: Project;
-}): ProjectSettingsCommandPaletteSection[] {
+}): ProjectSettingsCommandPaletteNode[] {
   const context = {
     access: new Set(organization.access),
     features: new Set(organization.features),
     organization,
     project,
   };
+  const groupedSectionLabels = new Set([
+    'General',
+    'Processing',
+    'SDK setup',
+    'Legacy Integrations',
+  ]);
 
-  return getNavigationConfiguration({
+  const sections = getNavigationConfiguration({
     debugFilesNeedsReview: false,
     organization,
     project,
   })
-    .map(section => ({
-      icon: <ProjectAvatar project={project} size={16} />,
-      label: section.name,
-      items: section.items
-        .filter(item => shouldShowItem(item, context, section))
-        .map(item => ({
-          display: {
-            label: item.title,
-          },
-          keywords: [section.name, 'project settings', 'settings'],
-          to: replaceRouterParams(item.path, {
-            orgId: organization.slug,
-            projectId: project.slug,
-          }),
-        })),
-    }))
+    .map(section => {
+      const label = getProjectSettingsSectionLabel(section.name);
+
+      return {
+        icon: groupedSectionLabels.has(label) ? (
+          getProjectSettingsSectionIcon(label)
+        ) : (
+          <ProjectAvatar project={project} size={16} />
+        ),
+        label,
+        items: section.items
+          .filter(item => shouldShowItem(item, context, section))
+          .map(item => ({
+            display: {
+              label: item.title,
+            },
+            keywords: [section.name, 'project settings', 'settings'],
+            to: replaceRouterParams(item.path, {
+              orgId: organization.slug,
+              projectId: project.slug,
+            }),
+          })),
+      };
+    })
     .filter(section => section.items.length > 0);
+  const groupedSections = sections.filter(section =>
+    groupedSectionLabels.has(section.label)
+  );
+  const ungroupedSections = sections.filter(
+    section => !groupedSectionLabels.has(section.label)
+  );
+
+  if (groupedSections.length === 0) {
+    return ungroupedSections;
+  }
+
+  return [
+    {
+      icon: <ProjectAvatar project={project} size={16} />,
+      label: 'Project Settings',
+      items: groupedSections.map(flattenSingleItemSection),
+    },
+    ...ungroupedSections,
+  ];
 }
 
 export function ProjectSettingsCommandPaletteActions({
@@ -88,11 +176,7 @@ export function ProjectSettingsCommandPaletteActions({
     <Fragment>
       {sections.map(section => (
         <CommandPaletteSlot key={section.label} name="page">
-          <CMDKAction display={{label: section.label, icon: section.icon}}>
-            {section.items.map(item => (
-              <CMDKAction key={item.to} {...item} />
-            ))}
-          </CMDKAction>
+          {renderProjectSettingsCommandPaletteNode(section)}
         </CommandPaletteSlot>
       ))}
     </Fragment>