feat(aci): add environment selector to automation creation (#92077)

environment selector groups environments by the user's projects, then by
all other projects. dropdown is limited to 10 options shown at a time

<img width="684" alt="Screenshot 2025-05-21 at 2 54 17 PM"
src="https://github.com/user-attachments/assets/80d3b301-eede-4c04-b15a-905a46de70ee"
/>

Author: ameliahsu

static/app/components/workflowEngine/form/environmentSelector.spec.tsx

@@ -0,0 +1,54 @@
+import {initializeOrg} from 'sentry-test/initializeOrg';
+import {render, screen, userEvent, within} from 'sentry-test/reactTestingLibrary';
+
+import {EnvironmentSelector} from 'sentry/components/workflowEngine/form/environmentSelector';
+import ProjectsStore from 'sentry/stores/projectsStore';
+
+describe('EnvironmentSelector', function () {
+  it('renders & handles selection', async function () {
+    const {projects} = initializeOrg({
+      projects: [
+        {id: '1', slug: 'project-1', environments: ['prod', 'staging'], isMember: true},
+        {id: '2', slug: 'project-2', environments: ['prod', 'stage'], isMember: false},
+      ],
+    });
+    ProjectsStore.loadInitialData(projects);
+
+    const mockOnChange = jest.fn();
+
+    render(<EnvironmentSelector value={''} onChange={mockOnChange} />);
+
+    // Open list
+    await userEvent.click(screen.getByRole('button', {name: 'Environment None'}));
+
+    // Get groups
+    const userProjectEnvironments = screen.getByRole('group', {
+      name: 'Environments in My Projects',
+    });
+    const otherProjectEnvironments = screen.getByRole('group', {
+      name: 'Other Environments',
+    });
+
+    // Environments are correctly grouped
+    expect(
+      within(userProjectEnvironments).getByRole('option', {name: 'prod'})
+    ).toBeInTheDocument();
+    expect(
+      within(userProjectEnvironments).getByRole('option', {name: 'staging'})
+    ).toBeInTheDocument();
+    expect(
+      within(otherProjectEnvironments).getByRole('option', {name: 'stage'})
+    ).toBeInTheDocument();
+    // "prod" should not be shown twice
+    expect(
+      within(otherProjectEnvironments).queryByRole('option', {name: 'prod'})
+    ).not.toBeInTheDocument();
+
+    // Select "prod"
+    await userEvent.click(screen.getByRole('option', {name: 'prod'}));
+
+    // Trigger label is updated
+    expect(screen.getByRole('button', {name: 'Environment prod'})).toBeInTheDocument();
+    expect(mockOnChange).toHaveBeenCalledWith('prod');
+  });
+});

static/app/components/workflowEngine/form/environmentSelector.tsx

@@ -0,0 +1,64 @@
+import {useMemo} from 'react';
+
+import type {
+  SelectOption,
+  SelectOptionOrSection,
+} from 'sentry/components/core/compactSelect';
+import {CompactSelect} from 'sentry/components/core/compactSelect';
+import {t} from 'sentry/locale';
+import useProjects from 'sentry/utils/useProjects';
+
+interface EnvironmentSelectorProps {
+  onChange: (value: string) => void;
+  value: string;
+}
+
+export function EnvironmentSelector({value, onChange}: EnvironmentSelectorProps) {
+  const {projects, initiallyLoaded: projectsLoaded} = useProjects();
+
+  const options = useMemo<Array<SelectOptionOrSection<string>>>(() => {
+    const userEnvs = new Set<string>();
+    const otherEnvs = new Set<string>();
+
+    projects.forEach(project => {
+      if (project.isMember) {
+        project.environments.forEach(env => userEnvs.add(env));
+      } else {
+        project.environments.forEach(env => otherEnvs.add(env));
+      }
+    });
+
+    return [
+      {
+        key: 'my-projects',
+        label: t('Environments in My Projects'),
+        options: setToOptions(userEnvs),
+      },
+      {
+        key: 'other-projects',
+        label: t('Other Environments'),
+        options: setToOptions(otherEnvs.difference(userEnvs)),
+      },
+    ];
+  }, [projects]);
+
+  return (
+    <CompactSelect<string>
+      size="md"
+      triggerProps={{prefix: t('Environment')}}
+      options={options}
+      searchable
+      disabled={!projectsLoaded}
+      sizeLimit={10}
+      multiple={false}
+      value={value}
+      onChange={selected => onChange(selected.value)}
+    />
+  );
+}
+
+const setToOptions = (set: Set<string>): Array<SelectOption<string>> =>
+  Array.from(set).map(item => ({
+    value: item,
+    label: item,
+  }));

static/app/views/automations/components/automationForm.tsx

@@ -12,6 +12,7 @@ import useDrawer from 'sentry/components/globalDrawer';
 import {DrawerBody, DrawerHeader} from 'sentry/components/globalDrawer/components';
 import {useDocumentTitle} from 'sentry/components/sentryDocumentTitle';
 import {DebugForm} from 'sentry/components/workflowEngine/form/debug';
+import {EnvironmentSelector} from 'sentry/components/workflowEngine/form/environmentSelector';
 import {Card} from 'sentry/components/workflowEngine/ui/card';
 import {IconAdd, IconEdit} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -83,6 +84,8 @@ export default function AutomationForm() {
     }
   };
 
+  const [environment, setEnvironment] = useState<string>('');
+
   return (
     <Form
       hideFooter
@@ -110,6 +113,17 @@ export default function AutomationForm() {
               </Button>
             </ButtonWrapper>
           </Card>
+          <Card>
+            <Flex column gap={space(0.5)}>
+              <Heading>{t('Choose Environment')}</Heading>
+              <Description>
+                {t(
+                  'If you select environments different than your monitors then the automation will not fire.'
+                )}
+              </Description>
+            </Flex>
+            <EnvironmentSelector value={environment} onChange={setEnvironment} />
+          </Card>
           <Card>
             <Heading>{t('Automation Builder')}</Heading>
             <AutomationBuilder />
@@ -135,6 +149,13 @@ const Heading = styled('h2')`
   margin: 0;
 `;
 
+const Description = styled('span')`
+  font-size: ${p => p.theme.fontSizeMedium};
+  color: ${p => p.theme.subText};
+  margin: 0;
+  padding: 0;
+`;
+
 const ButtonWrapper = styled(Flex)`
   border-top: 1px solid ${p => p.theme.border};
   padding: ${space(2)};