Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
saponifi3d merged 4 commits into from
Apr 9, 2026
+20 −5
Merged

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

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7755268
WIP
saponifi3d Apr 8, 2026
bac9c80
WIP
saponifi3d Apr 8, 2026
8f810c3
Add support to send the env field, need to update the APIs
saponifi3d Apr 8, 2026
fce24e3
undo wrong formatter applied
saponifi3d Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 20 additions & 5 deletions static/app/views/detectors/components/forms/common/environmentField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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}
Comment on lines +51 to 55
Copy link
Copy Markdown
Contributor

@sentry sentry bot Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: The internal onCreateOption handler is placed before {...props}, so a caller-provided onCreateOption will override it, preventing new options from being saved.
Severity: MEDIUM

Suggested Fix

Move the component's props, including the internal onCreateOption handler, to be defined after the {...props} spread. This ensures the internal logic is preserved and can be extended by chaining any caller-provided onCreateOption function if needed.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location:
static/app/views/detectors/components/forms/common/environmentField.tsx#L51-L55

Potential issue: In the `EnvironmentField` component, the internal `onCreateOption`
handler is defined before the `{...props}` spread. This means any `onCreateOption` prop
passed by a parent component will silently override the internal logic. The internal
handler is responsible for adding newly created environment options to the dropdown
choices and updating the form's state. When this handler is overridden, these actions do
not occur, and the newly created option is effectively lost, not being reflected in the
UI or the form data.

Did we get this right? 👍 / 👎 to inform future reviews.

/>
);
Expand Down
Loading