ref(ui): Allow ordering of groups in SentryProjectSelectorField (#69064)

Author: evanpurkhiser

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

@@ -43,9 +43,10 @@ describe('SentryProjectSelectorField', () => {
     render(
       <SentryProjectSelectorField
         groupProjects={project => (project.slug === 'other-project' ? 'other' : 'main')}
-        groupLabels={{
-          main: 'Main projects',
-        }}
+        groups={[
+          {key: 'main', label: 'Main projects'},
+          {key: 'other', label: 'Other'},
+        ]}
         onChange={mock}
         name="project"
         projects={projects}
@@ -55,6 +56,6 @@ describe('SentryProjectSelectorField', () => {
     await selectEvent.openMenu(screen.getByText(/choose sentry project/i));
 
     expect(screen.getByText('Main projects')).toBeInTheDocument();
-    expect(screen.getByText('other')).toBeInTheDocument();
+    expect(screen.getByText('Other')).toBeInTheDocument();
   });
 });

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

@@ -1,5 +1,3 @@
-import groupBy from 'lodash/groupBy';
-
 import IdBadge from 'sentry/components/idBadge';
 import {t} from 'sentry/locale';
 import type {Project} from 'sentry/types';
@@ -16,16 +14,16 @@ 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;
+  /**
+   * When using groupProjects you must specify the labels of the groups as a
+   * list of key and label. The ordering determines the order of the groups.
+   */
+  groups?: Array<{key: string; label: React.ReactNode}>;
   projects?: Project[];
   /**
    * Use the slug as the select field value. Without setting this the numeric id
@@ -37,7 +35,7 @@ export interface RenderFieldProps extends InputFieldProps {
 function SentryProjectSelectorField({
   projects,
   groupProjects,
-  groupLabels,
+  groups,
   avatarSize = 20,
   placeholder = t('Choose Sentry project'),
   valueIsSlug,
@@ -61,9 +59,11 @@ function SentryProjectSelectorField({
   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),
+        groups?.map(({key, label}) => ({
+          label,
+          options: projects
+            .filter(project => groupProjects(project) === key)
+            .map(projectToOption),
         }))
       : // Otherwise just map projects to the options
         projects?.map(projectToOption);

static/app/views/monitors/components/monitorForm.tsx

@@ -291,10 +291,10 @@ function MonitorForm({
             groupProjects={project =>
               platformsWithGuides.includes(project.platform) ? 'suggested' : 'other'
             }
-            groupLabels={{
-              suggested: t('Suggested Projects'),
-              other: t('Other Projects'),
-            }}
+            groups={[
+              {key: 'suggested', label: t('Suggested Projects')},
+              {key: 'other', label: t('Other Projects')},
+            ]}
             projects={filteredProjects}
             placeholder={t('Choose Project')}
             disabled={!!monitor}