feat(ui): Add grouping capability to sentryProjectSelectorField (#69046)

Can be used to do things like this

<img width="292" alt="image"
src="https://github.com/getsentry/sentry/assets/1421724/123a8840-8f87-474b-bf84-540e5c5a451f">

Author: evanpurkhiser

static/app/components/forms/fields/sentryProjectSelectorField.spec.tsx

@@ -24,4 +24,37 @@ describe('SentryProjectSelectorField', () => {
 
     expect(mock).toHaveBeenCalledWith('23', expect.anything());
   });
+
+  it('can group values', async () => {
+    const mock = jest.fn();
+    const projects = [
+      ProjectFixture(),
+      ProjectFixture({
+        id: '23',
+        slug: 'my-proj',
+        name: 'My Proj',
+      }),
+      ProjectFixture({
+        id: '24',
+        slug: 'other-project',
+        name: 'My Other Project',
+      }),
+    ];
+    render(
+      <SentryProjectSelectorField
+        groupProjects={project => (project.slug === 'other-project' ? 'other' : 'main')}
+        groupLabels={{
+          main: 'Main projects',
+        }}
+        onChange={mock}
+        name="project"
+        projects={projects}
+      />
+    );
+
+    await selectEvent.openMenu(screen.getByText(/choose sentry project/i));
+
+    expect(screen.getByText('Main projects')).toBeInTheDocument();
+    expect(screen.getByText('other')).toBeInTheDocument();
+  });
 });

static/app/components/forms/fields/sentryProjectSelectorField.tsx

@@ -1,3 +1,5 @@
+import groupBy from 'lodash/groupBy';
+
 import IdBadge from 'sentry/components/idBadge';
 import {t} from 'sentry/locale';
 import type {Project} from 'sentry/types';
@@ -6,9 +8,24 @@ import type {Project} from 'sentry/types';
 import type {InputFieldProps} from './inputField';
 import SelectField from './selectField';
 
+/**
+ * Function used to group projects by returning the key of the group
+ */
+type GroupProjects = (project: Project) => string;
+
 // projects can be passed as a direct prop as well
 export interface RenderFieldProps extends InputFieldProps {
   avatarSize?: number;
+  /**
+   * When using groupProjects you can specify the labels of the groups as a
+   * mapping of the key returned for the groupProjects to the label
+   */
+  groupLabels?: Record<string, React.ReactNode>;
+  /**
+   * Controls grouping of projects within the field. Useful to prioritize some
+   * projects above others
+   */
+  groupProjects?: GroupProjects;
   projects?: Project[];
   /**
    * Use the slug as the select field value. Without setting this the numeric id
@@ -19,23 +36,37 @@ export interface RenderFieldProps extends InputFieldProps {
 
 function SentryProjectSelectorField({
   projects,
+  groupProjects,
+  groupLabels,
   avatarSize = 20,
   placeholder = t('Choose Sentry project'),
   valueIsSlug,
   ...props
 }: RenderFieldProps) {
-  const projectOptions = projects?.map(project => ({
-    value: project[valueIsSlug ? 'slug' : 'id'],
-    label: project.slug,
-    leadingItems: (
-      <IdBadge
-        project={project}
-        avatarSize={avatarSize}
-        avatarProps={{consistentWidth: true}}
-        hideName
-      />
-    ),
-  }));
+  function projectToOption(project: Project) {
+    return {
+      value: project[valueIsSlug ? 'slug' : 'id'],
+      label: project.slug,
+      leadingItems: (
+        <IdBadge
+          project={project}
+          avatarSize={avatarSize}
+          avatarProps={{consistentWidth: true}}
+          hideName
+        />
+      ),
+    };
+  }
+
+  const projectOptions =
+    projects && groupProjects
+      ? // Create project groups when groupProjects is in use
+        Object.entries(groupBy(projects, groupProjects)).map(([key, projectsGroup]) => ({
+          label: groupLabels?.[key] ?? key,
+          options: projectsGroup.map(projectToOption),
+        }))
+      : // Otherwise just map projects to the options
+        projects?.map(projectToOption);
 
   return <SelectField placeholder={placeholder} options={projectOptions} {...props} />;
 }