feat(aci): Add ability to create envs inline (#112558)

# Description
Updated the environment selector to be able to create a new environment
inline.

Right now, we can only select environments on Uptime and Metric
monitors. The Metric monitor will be able to save the new environments
after #112537 is deployed.

### Metric Monitor
<img width="1624" height="1061" alt="Screenshot 2026-04-08 at 4 56
33 PM"
src="https://github.com/user-attachments/assets/f6c2ebef-3b2c-45fe-bc29-839c4be81f35"
/>

### Uptime Monitor
<img width="1624" height="1061" alt="Screenshot 2026-04-08 at 4 58
48 PM"
src="https://github.com/user-attachments/assets/09b61794-3242-48ee-8f03-d3b0ecc05060"
/>

### Uptime Saves
<img width="1624" height="1061" alt="Screenshot 2026-04-08 at 4 59
33 PM"
src="https://github.com/user-attachments/assets/5783da6b-a7f7-4e07-b501-eb7eebcab22f"
/>

Author: saponifi3d

static/app/views/detectors/components/forms/common/environmentField.tsx

@@ -1,6 +1,8 @@
+import {useContext, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {SelectField} from 'sentry/components/forms/fields/selectField';
+import {FormContext} from 'sentry/components/forms/formContext';
 import {useFormField} from 'sentry/components/workflowEngine/form/useFormField';
 import {t} from 'sentry/locale';
 import {useProjects} from 'sentry/utils/useProjects';
@@ -14,29 +16,42 @@ type EnvironmentFieldProps = Partial<React.ComponentProps<typeof SelectField>> &
   includeAllEnvironments?: boolean;
 };
 
+const ENV_FIELD_NAME = 'environment';
+
 export function EnvironmentField({
   includeAllEnvironments = true,
   ...props
 }: EnvironmentFieldProps) {
   const {projects} = useProjects();
   const projectId = useFormField<string>('projectId')!;
+  const formContext = useContext(FormContext);
+
+  const [newEnvironment, setNewEnvironment] = useState<string | undefined>(undefined);
 
   const environments = projects.find(p => p.id === projectId)?.environments ?? [];
 
+  const choices = [
+    ...(includeAllEnvironments ? [['', t('All Environments')] as const] : []),
+    ...(newEnvironment ? [[newEnvironment, newEnvironment] as const] : []),
+    ...(environments?.map(environment => [environment, environment] as const) ?? []),
+  ];
+
   return (
     <StyledEnvironmentField
-      choices={[
-        ...(includeAllEnvironments ? [['', t('All Environments')] as const] : []),
-        ...(environments?.map(environment => [environment, environment] as const) ?? []),
-      ]}
+      choices={choices}
       inline={false}
       flexibleControlStateSize
       stacked
-      name="environment"
+      name={ENV_FIELD_NAME}
       label={t('Environment')}
       placeholder={t('Environment')}
       aria-label={t('Select Environment')}
       size="sm"
+      creatable
+      onCreateOption={env => {
+        setNewEnvironment(env);
+        formContext.form?.setValue(ENV_FIELD_NAME, env);
+      }}
       {...props}
     />
   );