ref(alerts): Remove alert wizard v3 flag from FE (#36806)

Co-authored-by: Scott Cooper <scttcper@gmail.com>

static/app/components/createAlertButton.tsx

@@ -38,7 +38,6 @@ export type CreateAlertFromViewButtonProps = ButtonProps & {
    */
   onClick?: () => void;
   referrer?: string;
-  useAlertWizardV3?: boolean;
 };
 
 /**
@@ -51,7 +50,6 @@ function CreateAlertFromViewButton({
   organization,
   referrer,
   onClick,
-  useAlertWizardV3,
   alertType,
   ...buttonProps
 }: CreateAlertFromViewButtonProps) {
@@ -69,20 +67,14 @@ function CreateAlertFromViewButton({
     : DEFAULT_WIZARD_TEMPLATE;
 
   const to = {
-    pathname: useAlertWizardV3
-      ? `/organizations/${organization.slug}/alerts/new/metric/`
-      : `/organizations/${organization.slug}/alerts/${project?.slug}/new/`,
+    pathname: `/organizations/${organization.slug}/alerts/new/metric/`,
     query: {
       ...queryParams,
       createFromDiscover: true,
       referrer,
-      ...(useAlertWizardV3
-        ? {
-            ...alertTemplate,
-            project: project?.slug,
-            aggregate: queryParams.yAxis ?? alertTemplate.aggregate,
-          }
-        : {}),
+      ...alertTemplate,
+      project: project?.slug,
+      aggregate: queryParams.yAxis ?? alertTemplate.aggregate,
     },
   };
 
@@ -133,16 +125,11 @@ const CreateAlertButton = withRouter(
   }: CreateAlertButtonProps) => {
     const api = useApi();
     const createAlertUrl = (providedProj: string) => {
-      const hasAlertWizardV3 = organization.features.includes('alert-wizard-v3');
-      const alertsBaseUrl = hasAlertWizardV3
-        ? `/organizations/${organization.slug}/alerts`
-        : `/organizations/${organization.slug}/alerts/${providedProj}`;
+      const alertsBaseUrl = `/organizations/${organization.slug}/alerts`;
       const alertsArgs = [
         `${referrer ? `referrer=${referrer}` : ''}`,
         `${
-          hasAlertWizardV3 && providedProj && providedProj !== ':projectId'
-            ? `project=${providedProj}`
-            : ''
+          providedProj && providedProj !== ':projectId' ? `project=${providedProj}` : ''
         }`,
         alertOption ? `alert_option=${alertOption}` : '',
       ].filter(item => item !== '');

static/app/views/alerts/builder/builderBreadCrumbs.tsx

@@ -1,16 +1,10 @@
-import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 import type {Location} from 'history';
 
 import Breadcrumbs, {Crumb, CrumbDropdown} from 'sentry/components/breadcrumbs';
-import IdBadge from 'sentry/components/idBadge';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
-import {isActiveSuperuser} from 'sentry/utils/isActiveSuperuser';
-import recreateRoute from 'sentry/utils/recreateRoute';
-import useProjects from 'sentry/utils/useProjects';
-import MenuItem from 'sentry/views/settings/components/settingsBreadcrumb/menuItem';
 import type {RouteWithName} from 'sentry/views/settings/components/settingsBreadcrumb/types';
 
 interface Props {
@@ -24,74 +18,13 @@ interface Props {
   canChangeProject?: boolean;
 }
 
-function BuilderBreadCrumbs({
-  title,
-  alertName,
-  projectSlug,
-  routes,
-  canChangeProject,
-  location,
-  organization,
-  alertType,
-}: Props) {
-  const {projects} = useProjects();
-  const isSuperuser = isActiveSuperuser();
-  const project = projects.find(({slug}) => projectSlug === slug);
-  const hasAlertWizardV3 = organization.features.includes('alert-wizard-v3');
-
-  const label = (
-    <IdBadge project={project ?? {slug: projectSlug}} avatarSize={18} disableLink />
-  );
-
-  const projectCrumbLink: Crumb = {
-    to: `/organizations/${organization.slug}/alerts/rules/?project=${project?.id}`,
-    label,
-  };
-
-  function getProjectDropdownCrumb(): CrumbDropdown {
-    return {
-      onSelect: ({value: projectId}) => {
-        // TODO(taylangocmen): recreating route doesn't update query, don't edit recreateRoute will add project selector for alert-wizard-v3
-        browserHistory.push(
-          recreateRoute('', {
-            routes,
-            params: hasAlertWizardV3
-              ? {orgId: organization.slug, alertType}
-              : {orgId: organization.slug, projectId},
-            location,
-          })
-        );
-      },
-      label,
-      items: projects
-        .filter(proj => proj.isMember || isSuperuser)
-        .map((proj, index) => ({
-          index,
-          value: proj.slug,
-          label: (
-            <MenuItem>
-              <IdBadge
-                project={proj}
-                avatarProps={{consistentWidth: true}}
-                avatarSize={18}
-                disableLink
-              />
-            </MenuItem>
-          ),
-          searchKey: proj.slug,
-        })),
-    };
-  }
-
-  const projectCrumb = canChangeProject ? getProjectDropdownCrumb() : projectCrumbLink;
-
+function BuilderBreadCrumbs({title, alertName, projectSlug, organization}: Props) {
   const crumbs: (Crumb | CrumbDropdown)[] = [
     {
       to: `/organizations/${organization.slug}/alerts/rules/`,
       label: t('Alerts'),
       preservePageFilters: true,
     },
-    ...(hasAlertWizardV3 ? [] : [projectCrumb]),
     {
       label: title,
       ...(alertName

static/app/views/alerts/builder/projectProvider.tsx

@@ -27,8 +27,7 @@ function AlertBuilderProjectProvider(props: Props) {
 
   const {children, params, organization, ...other} = props;
   const projectId = params.projectId || props.location.query.project;
-  const hasAlertWizardV3 = organization.features.includes('alert-wizard-v3');
-  const useFirstProject = hasAlertWizardV3 && projectId === undefined;
+  const useFirstProject = projectId === undefined;
 
   // calling useProjects() without args fetches all projects
   const {projects, initiallyLoaded, fetching, fetchError} = useProjects(
@@ -58,9 +57,7 @@ function AlertBuilderProjectProvider(props: Props) {
   // If there's no project show the project selector modal
   if (!project && !fetchError) {
     navigateTo(
-      hasAlertWizardV3
-        ? `/organizations/${organization.slug}/alerts/wizard/?referrer=${props.location.query.referrer}&project=:projectId`
-        : `/organizations/${organization.slug}/alerts/:projectId/wizard/?referrer=${props.location.query.referrer}`,
+      `/organizations/${organization.slug}/alerts/wizard/?referrer=${props.location.query.referrer}&project=:projectId`,
       props.router
     );
   }

static/app/views/alerts/create.tsx

@@ -45,49 +45,24 @@ class Create extends Component<Props, State> {
 
   getInitialState(): State {
     const {organization, location, project, params, router} = this.props;
-    const {
-      createFromDiscover,
-      createFromWizard,
-      aggregate,
-      dataset,
-      eventTypes,
-      createFromDuplicate,
-    } = location?.query ?? {};
-    let alertType = AlertRuleType.ISSUE;
-
-    const hasAlertWizardV3 = organization.features.includes('alert-wizard-v3');
-
-    // Alerts can only be created via create from discover or alert wizard, until alert-wizard-v3 is fully implemented
-    if (hasAlertWizardV3) {
-      alertType = params.alertType || AlertRuleType.METRIC;
-
-      // TODO(taylangocmen): Remove redirect with aggregate && dataset && eventTypes, init from template
-      if (
-        alertType === AlertRuleType.METRIC &&
-        !(aggregate && dataset && eventTypes) &&
-        !createFromDuplicate
-      ) {
-        router.replace({
-          ...location,
-          pathname: `/organizations/${organization.slug}/alerts/new/${alertType}`,
-          query: {
-            ...location.query,
-            ...DEFAULT_WIZARD_TEMPLATE,
-            project: project.slug,
-          },
-        });
-      }
-    } else if (createFromDiscover) {
-      alertType = AlertRuleType.METRIC;
-    } else if (createFromWizard) {
-      if (aggregate && dataset && eventTypes) {
-        alertType = AlertRuleType.METRIC;
-      } else {
-        // Just to be explicit
-        alertType = AlertRuleType.ISSUE;
-      }
-    } else {
-      router.replace(`/organizations/${organization.slug}/alerts/${project.slug}/wizard`);
+    const {aggregate, dataset, eventTypes, createFromDuplicate} = location?.query ?? {};
+    const alertType = params.alertType || AlertRuleType.METRIC;
+
+    // TODO(taylangocmen): Remove redirect with aggregate && dataset && eventTypes, init from template
+    if (
+      alertType === AlertRuleType.METRIC &&
+      !(aggregate && dataset && eventTypes) &&
+      !createFromDuplicate
+    ) {
+      router.replace({
+        ...location,
+        pathname: `/organizations/${organization.slug}/alerts/new/${alertType}`,
+        query: {
+          ...location.query,
+          ...DEFAULT_WIZARD_TEMPLATE,
+          project: project.slug,
+        },
+      });
     }
 
     return {alertType};
@@ -96,15 +71,13 @@ class Create extends Component<Props, State> {
   componentDidMount() {
     const {organization, project} = this.props;
 
-    const hasAlertWizardV3 = organization.features.includes('alert-wizard-v3');
-
     trackAdvancedAnalyticsEvent('new_alert_rule.viewed', {
       organization,
       project_id: project.id,
       session_id: this.sessionId,
       alert_type: this.state.alertType,
       duplicate_rule: this.isDuplicateRule ? 'true' : 'false',
-      wizard_v3: hasAlertWizardV3 ? 'true' : 'false',
+      wizard_v3: 'true',
     });
   }
 

static/app/views/alerts/rules/issue/index.tsx

@@ -1,4 +1,4 @@
-import {ChangeEvent, Fragment, ReactNode} from 'react';
+import {ChangeEvent, ReactNode} from 'react';
 import {browserHistory, RouteComponentProps} from 'react-router';
 import {components} from 'react-select';
 import styled from '@emotion/styled';
@@ -162,10 +162,6 @@ class IssueRuleEditor extends AsyncView<Props, State> {
     );
   }
 
-  get hasAlertWizardV3(): boolean {
-    return this.props.organization.features.includes('alert-wizard-v3');
-  }
-
   componentWillUnmount() {
     window.clearTimeout(this.pollingTimeout);
   }
@@ -446,7 +442,7 @@ class IssueRuleEditor extends AsyncView<Props, State> {
         data: rule,
         query: {
           duplicateRule: this.isDuplicateRule ? 'true' : 'false',
-          wizardV3: this.hasAlertWizardV3 ? 'true' : 'false',
+          wizardV3: 'true',
         },
       });
 
@@ -713,21 +709,20 @@ class IssueRuleEditor extends AsyncView<Props, State> {
 
     return (
       <StyledField
-        hasAlertWizardV3={this.hasAlertWizardV3}
-        label={this.hasAlertWizardV3 ? null : t('Alert name')}
-        help={this.hasAlertWizardV3 ? null : t('Add a name for this alert')}
+        label={null}
+        help={null}
         error={detailedError?.name?.[0]}
         disabled={disabled}
         required
         stacked
-        flexibleControlStateSize={this.hasAlertWizardV3 ? true : undefined}
+        flexibleControlStateSize
       >
         <Input
           type="text"
           name="name"
           value={name}
           data-test-id="alert-name"
-          placeholder={this.hasAlertWizardV3 ? t('Enter Alert Name') : t('My Rule Name')}
+          placeholder={t('Enter Alert Name')}
           onChange={(event: ChangeEvent<HTMLInputElement>) =>
             this.handleChange('name', event.target.value)
           }
@@ -744,12 +739,11 @@ class IssueRuleEditor extends AsyncView<Props, State> {
 
     return (
       <StyledField
-        hasAlertWizardV3={this.hasAlertWizardV3}
         extraMargin
-        label={this.hasAlertWizardV3 ? null : t('Team')}
-        help={this.hasAlertWizardV3 ? null : t('The team that can edit this alert.')}
+        label={null}
+        help={null}
         disabled={disabled}
-        flexibleControlStateSize={this.hasAlertWizardV3 ? true : undefined}
+        flexibleControlStateSize
       >
         <TeamSelector
           value={this.getTeamId()}
@@ -924,16 +918,12 @@ class IssueRuleEditor extends AsyncView<Props, State> {
         name="frequency"
         inline={false}
         style={{padding: 0, border: 'none'}}
-        flexibleControlStateSize={this.hasAlertWizardV3 ? true : undefined}
-        label={this.hasAlertWizardV3 ? null : t('Action Interval')}
-        help={
-          this.hasAlertWizardV3
-            ? null
-            : t('Perform these actions once this often for an issue')
-        }
+        label={null}
+        help={null}
         className={this.hasError('frequency') ? ' error' : ''}
         required
         disabled={disabled}
+        flexibleControlStateSize
       >
         {({onChange, onBlur}) => (
           <SelectControl
@@ -1003,20 +993,10 @@ class IssueRuleEditor extends AsyncView<Props, State> {
                 <List symbol="colored-numeric">
                   {loading && <SemiTransparentLoadingMask data-test-id="loading-mask" />}
                   <StyledListItem>{t('Add alert settings')}</StyledListItem>
-                  {this.hasAlertWizardV3 ? (
-                    <SettingsContainer>
-                      {this.renderEnvironmentSelect(disabled)}
-                      {this.renderProjectSelect(disabled)}
-                    </SettingsContainer>
-                  ) : (
-                    <Panel>
-                      <PanelBody>
-                        {this.renderEnvironmentSelect(disabled)}
-                        {this.renderTeamSelect(disabled)}
-                        {this.renderRuleName(disabled)}
-                      </PanelBody>
-                    </Panel>
-                  )}
+                  <SettingsContainer>
+                    {this.renderEnvironmentSelect(disabled)}
+                    {this.renderProjectSelect(disabled)}
+                  </SettingsContainer>
                   <SetConditionsListItem>
                     {t('Set conditions')}
                     <SetupAlertIntegrationButton
@@ -1217,20 +1197,10 @@ class IssueRuleEditor extends AsyncView<Props, State> {
                       {t('Perform the actions above once this often for an issue')}
                     </StyledFieldHelp>
                   </StyledListItem>
-                  {this.hasAlertWizardV3 ? (
-                    this.renderActionInterval(disabled)
-                  ) : (
-                    <Panel>
-                      <PanelBody>{this.renderActionInterval(disabled)}</PanelBody>
-                    </Panel>
-                  )}
-                  {this.hasAlertWizardV3 && (
-                    <Fragment>
-                      <StyledListItem>{t('Establish ownership')}</StyledListItem>
-                      {this.renderRuleName(disabled)}
-                      {this.renderTeamSelect(disabled)}
-                    </Fragment>
-                  )}
+                  {this.renderActionInterval(disabled)}
+                  <StyledListItem>{t('Establish ownership')}</StyledListItem>
+                  {this.renderRuleName(disabled)}
+                  {this.renderTeamSelect(disabled)}
                 </List>
               </StyledForm>
             </Main>
@@ -1347,24 +1317,20 @@ const SettingsContainer = styled('div')`
   gap: ${space(1)};
 `;
 
-const StyledField = styled(Field)<{extraMargin?: boolean; hasAlertWizardV3?: boolean}>`
+const StyledField = styled(Field)<{extraMargin?: boolean}>`
   :last-child {
     padding-bottom: ${space(2)};
   }
 
-  ${p =>
-    p.hasAlertWizardV3 &&
-    `
-    border-bottom: none;
-    padding: 0;
+  border-bottom: none;
+  padding: 0;
 
-    & > div {
-      padding: 0;
-      width: 100%;
-    }
+  & > div {
+    padding: 0;
+    width: 100%;
+  }
 
-    margin-bottom: ${p.extraMargin ? '60px' : space(1)};
-  `}
+  margin-bottom: ${p => `${p.extraMargin ? '60px' : space(1)}`};
 `;
 
 const Main = styled(Layout.Main)`

static/app/views/alerts/rules/metric/ruleConditionsForm.tsx

@@ -7,7 +7,6 @@ import pick from 'lodash/pick';
 
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import {Client} from 'sentry/api';
-import Feature from 'sentry/components/acl/feature';
 import Alert from 'sentry/components/alert';
 import SearchBar from 'sentry/components/events/searchBar';
 import FormField from 'sentry/components/forms/formField';
@@ -17,8 +16,6 @@ import IdBadge from 'sentry/components/idBadge';
 import ExternalLink from 'sentry/components/links/externalLink';
 import ListItem from 'sentry/components/list/listItem';
 import {Panel, PanelBody} from 'sentry/components/panels';
-import Tooltip from 'sentry/components/tooltip';
-import {IconQuestion} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Environment, Organization, Project, SelectValue} from 'sentry/types';
@@ -32,15 +29,10 @@ import {
   DATA_SOURCE_LABELS,
   DATA_SOURCE_TO_SET_AND_EVENT_TYPES,
 } from 'sentry/views/alerts/utils';
-import {AlertType, getFunctionHelpText} from 'sentry/views/alerts/wizard/options';
+import {AlertType} from 'sentry/views/alerts/wizard/options';
 
 import {isCrashFreeAlert} from './utils/isCrashFreeAlert';
-import {
-  COMPARISON_DELTA_OPTIONS,
-  DEFAULT_AGGREGATE,
-  DEFAULT_TRANSACTION_AGGREGATE,
-} from './constants';
-import MetricField from './metricField';
+import {DEFAULT_AGGREGATE, DEFAULT_TRANSACTION_AGGREGATE} from './constants';
 import {AlertRuleComparisonType, Dataset, Datasource, TimeWindow} from './types';
 
 const TIME_WINDOW_MAP: Record<TimeWindow, string> = {
@@ -61,7 +53,6 @@ type Props = {
   comparisonType: AlertRuleComparisonType;
   dataset: Dataset;
   disabled: boolean;
-  hasAlertWizardV3: boolean;
   onComparisonDeltaChange: (value: number) => void;
   onFilterSearch: (query: string) => void;
   onTimeWindowChange: (value: number) => void;
@@ -137,11 +128,9 @@ class RuleConditionsForm extends PureComponent<Props, State> {
 
     return Object.entries(options).map(([value, label]) => ({
       value: parseInt(value, 10),
-      label: this.props.hasAlertWizardV3
-        ? tct('[timeWindow] interval', {
-            timeWindow: label.slice(-1) === 's' ? label.slice(0, -1) : label,
-          })
-        : label,
+      label: tct('[timeWindow] interval', {
+        timeWindow: label.slice(-1) === 's' ? label.slice(0, -1) : label,
+      }),
     }));
   }
 
@@ -365,84 +354,43 @@ class RuleConditionsForm extends PureComponent<Props, State> {
   }
 
   renderInterval() {
-    const {
-      organization,
-      disabled,
-      alertType,
-      hasAlertWizardV3,
-      timeWindow,
-      comparisonDelta,
-      comparisonType,
-      onTimeWindowChange,
-      onComparisonDeltaChange,
-    } = this.props;
-
-    const {labelText, timeWindowText} = getFunctionHelpText(alertType);
-    const intervalLabelText = hasAlertWizardV3 ? t('Define your metric') : labelText;
+    const {organization, disabled, alertType, timeWindow, onTimeWindowChange} =
+      this.props;
 
     return (
       <Fragment>
         <StyledListItem>
           <StyledListTitle>
-            <div>{intervalLabelText}</div>
-            {!hasAlertWizardV3 && (
-              <Tooltip
-                title={t(
-                  'Time window over which the metric is evaluated. Alerts are evaluated every minute regardless of this value.'
-                )}
-              >
-                <IconQuestion size="sm" color="gray200" />
-              </Tooltip>
-            )}
+            <div>{t('Define your metric')}</div>
           </StyledListTitle>
         </StyledListItem>
         <FormRow>
-          {hasAlertWizardV3 ? (
-            <WizardField
-              name="aggregate"
-              help={null}
-              organization={organization}
-              disabled={disabled}
-              style={{
-                ...this.formElemBaseStyle,
-                flex: 1,
-              }}
-              inline={false}
-              flexibleControlStateSize
-              columnWidth={200}
-              alertType={alertType}
-              required
-            />
-          ) : (
-            <MetricField
-              name="aggregate"
-              help={null}
-              organization={organization}
-              disabled={disabled}
-              style={{
-                ...this.formElemBaseStyle,
-              }}
-              inline={false}
-              flexibleControlStateSize
-              columnWidth={200}
-              alertType={alertType}
-              required
-            />
-          )}
-          {!hasAlertWizardV3 && timeWindowText && (
-            <FormRowText>{timeWindowText}</FormRowText>
-          )}
+          <WizardField
+            name="aggregate"
+            help={null}
+            organization={organization}
+            disabled={disabled}
+            style={{
+              ...this.formElemBaseStyle,
+              flex: 1,
+            }}
+            inline={false}
+            flexibleControlStateSize
+            columnWidth={200}
+            alertType={alertType}
+            required
+          />
           <SelectControl
             name="timeWindow"
             styles={{
               control: (provided: {[x: string]: string | number | boolean}) => ({
                 ...provided,
-                minWidth: hasAlertWizardV3 ? 200 : 130,
+                minWidth: 200,
                 maxWidth: 300,
               }),
               container: (provided: {[x: string]: string | number | boolean}) => ({
                 ...provided,
-                margin: hasAlertWizardV3 ? `${space(0.5)}` : 0,
+                margin: `${space(0.5)}`,
               }),
             }}
             options={this.timeWindowOptions}
@@ -453,38 +401,6 @@ class RuleConditionsForm extends PureComponent<Props, State> {
             inline={false}
             flexibleControlStateSize
           />
-          {!hasAlertWizardV3 && (
-            <Feature
-              features={['organizations:change-alerts']}
-              organization={organization}
-            >
-              {comparisonType === AlertRuleComparisonType.CHANGE && (
-                <ComparisonContainer>
-                  {t(' compared to ')}
-                  <SelectControl
-                    name="comparisonDelta"
-                    styles={{
-                      container: (provided: {
-                        [x: string]: string | number | boolean;
-                      }) => ({
-                        ...provided,
-                        marginLeft: space(1),
-                      }),
-                      control: (provided: {[x: string]: string | number | boolean}) => ({
-                        ...provided,
-                        minWidth: 500,
-                        maxWidth: 1000,
-                      }),
-                    }}
-                    value={comparisonDelta}
-                    onChange={({value}) => onComparisonDeltaChange(value)}
-                    options={COMPARISON_DELTA_OPTIONS}
-                    required={comparisonType === AlertRuleComparisonType.CHANGE}
-                  />
-                </ComparisonContainer>
-              )}
-            </Feature>
-          )}
         </FormRow>
       </Fragment>
     );
@@ -496,7 +412,6 @@ class RuleConditionsForm extends PureComponent<Props, State> {
       disabled,
       onFilterSearch,
       allowChangeEventTypes,
-      hasAlertWizardV3,
       dataset,
       showMEPAlertBanner,
     } = this.props;
@@ -541,13 +456,10 @@ class RuleConditionsForm extends PureComponent<Props, State> {
               </Alert>
             </AlertContainer>
           )}
-        {hasAlertWizardV3 && this.renderInterval()}
+        {this.renderInterval()}
         <StyledListItem>{t('Filter events')}</StyledListItem>
-        <FormRow
-          noMargin
-          columns={1 + (allowChangeEventTypes ? 1 : 0) + (hasAlertWizardV3 ? 1 : 0)}
-        >
-          {hasAlertWizardV3 && this.renderProjectSelector()}
+        <FormRow noMargin columns={1 + (allowChangeEventTypes ? 1 : 0) + 1}>
+          {this.renderProjectSelector()}
           <SelectField
             name="environment"
             placeholder={t('All Environments')}
@@ -632,7 +544,6 @@ class RuleConditionsForm extends PureComponent<Props, State> {
             )}
           </FormField>
         </FormRow>
-        {!hasAlertWizardV3 && this.renderInterval()}
       </Fragment>
     );
   }
@@ -688,15 +599,4 @@ const FormRow = styled('div')<{columns?: number; noMargin?: boolean}>`
     `}
 `;
 
-const FormRowText = styled('div')`
-  margin: ${space(1)};
-`;
-
-const ComparisonContainer = styled('div')`
-  margin-left: ${space(1)};
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`;
-
 export default withProjects(RuleConditionsForm);

static/app/views/alerts/rules/metric/ruleForm.tsx

@@ -126,10 +126,6 @@ class RuleFormContainer extends AsyncComponent<Props, State> {
     return Boolean(this.props.isDuplicateRule);
   }
 
-  get hasAlertWizardV3(): boolean {
-    return this.props.organization.features.includes('alert-wizard-v3');
-  }
-
   get chartQuery(): string {
     const {query, eventTypes, dataset} = this.state;
     const eventTypeFilter = getEventTypeFilter(this.state.dataset, eventTypes);
@@ -618,7 +614,7 @@ class RuleFormContainer extends AsyncComponent<Props, State> {
         },
         {
           duplicateRule: this.isDuplicateRule ? 'true' : 'false',
-          wizardV3: this.hasAlertWizardV3 ? 'true' : 'false',
+          wizardV3: 'true',
           referrer: location?.query?.referrer,
           sessionId,
         }
@@ -850,7 +846,6 @@ class RuleFormContainer extends AsyncComponent<Props, State> {
         currentProject={project.slug}
         organization={organization}
         availableActions={this.state.availableActions}
-        hasAlertWizardV3={this.hasAlertWizardV3}
         onChange={this.handleChangeTriggers}
         onThresholdTypeChange={this.handleThresholdTypeChange}
         onThresholdPeriodChange={this.handleThresholdPeriodChange}
@@ -859,11 +854,7 @@ class RuleFormContainer extends AsyncComponent<Props, State> {
     );
 
     const ruleNameOwnerForm = (disabled: boolean) => (
-      <RuleNameOwnerForm
-        disabled={disabled}
-        project={project}
-        hasAlertWizardV3={this.hasAlertWizardV3}
-      />
+      <RuleNameOwnerForm disabled={disabled} project={project} />
     );
 
     const thresholdTypeForm = (disabled: boolean) => (
@@ -876,7 +867,6 @@ class RuleFormContainer extends AsyncComponent<Props, State> {
         }
         onComparisonTypeChange={this.handleComparisonTypeChange}
         organization={organization}
-        hasAlertWizardV3={this.hasAlertWizardV3}
         comparisonDelta={comparisonDelta}
       />
     );
@@ -975,7 +965,6 @@ class RuleFormContainer extends AsyncComponent<Props, State> {
                         alertType === 'custom' || dataset === Dataset.ERRORS
                       }
                       alertType={alertType}
-                      hasAlertWizardV3={this.hasAlertWizardV3}
                       dataset={dataset}
                       timeWindow={timeWindow}
                       comparisonType={comparisonType}
@@ -989,13 +978,8 @@ class RuleFormContainer extends AsyncComponent<Props, State> {
                       disableProjectSelector={disableProjectSelector}
                       showMEPAlertBanner={showMEPAlertBanner}
                     />
-                    {!this.hasAlertWizardV3 && thresholdTypeForm(disabled)}
-                    <AlertListItem>
-                      {this.hasAlertWizardV3
-                        ? t('Set thresholds')
-                        : t('Set thresholds to trigger alert')}
-                    </AlertListItem>
-                    {this.hasAlertWizardV3 && thresholdTypeForm(disabled)}
+                    <AlertListItem>{t('Set thresholds')}</AlertListItem>
+                    {thresholdTypeForm(disabled)}
                     {triggerForm(disabled)}
                     {ruleNameOwnerForm(disabled)}
                   </List>

static/app/views/alerts/rules/metric/ruleNameOwnerForm.tsx

@@ -5,29 +5,24 @@ import FormField from 'sentry/components/forms/formField';
 import TeamSelector from 'sentry/components/forms/teamSelector';
 import TextField from 'sentry/components/forms/textField';
 import ListItem from 'sentry/components/list/listItem';
-import {Panel, PanelBody} from 'sentry/components/panels';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Project, Team} from 'sentry/types';
 
 type Props = {
   disabled: boolean;
-  hasAlertWizardV3: boolean;
   project: Project;
 };
 
-export default function RuleNameOwnerForm({disabled, project, hasAlertWizardV3}: Props) {
+export default function RuleNameOwnerForm({disabled, project}: Props) {
   const renderRuleName = () => (
     <StyledTextField
       data-test-id="alert-name"
-      hasAlertWizardV3={hasAlertWizardV3}
       disabled={disabled}
       name="name"
-      label={hasAlertWizardV3 ? null : t('Rule Name')}
-      help={hasAlertWizardV3 ? null : t('Add a name so it’s easy to find later.')}
-      placeholder={
-        hasAlertWizardV3 ? t('Enter Alert Name') : t('Something really bad happened')
-      }
+      label={null}
+      help={null}
+      placeholder={t('Enter Alert Name')}
       required
       flexibleControlStateSize
     />
@@ -35,11 +30,10 @@ export default function RuleNameOwnerForm({disabled, project, hasAlertWizardV3}:
 
   const renderTeamSelect = () => (
     <StyledFormField
-      hasAlertWizardV3={hasAlertWizardV3}
       extraMargin
       name="owner"
-      label={hasAlertWizardV3 ? null : t('Team')}
-      help={hasAlertWizardV3 ? null : t('The team that can edit this alert.')}
+      label={null}
+      help={null}
       disabled={disabled}
       flexibleControlStateSize
     >
@@ -61,22 +55,12 @@ export default function RuleNameOwnerForm({disabled, project, hasAlertWizardV3}:
     </StyledFormField>
   );
 
-  return hasAlertWizardV3 ? (
+  return (
     <Fragment>
       <StyledListItem>{t('Establish ownership')}</StyledListItem>
       {renderRuleName()}
       {renderTeamSelect()}
     </Fragment>
-  ) : (
-    <Fragment>
-      <StyledListItem>{t('Add a rule name and team')}</StyledListItem>
-      <Panel>
-        <PanelBody>
-          {renderRuleName()}
-          {renderTeamSelect()}
-        </PanelBody>
-      </Panel>
-    </Fragment>
   );
 }
 
@@ -85,36 +69,25 @@ const StyledListItem = styled(ListItem)`
   font-size: ${p => p.theme.fontSizeExtraLarge};
 `;
 
-const StyledTextField = styled(TextField)<{hasAlertWizardV3: boolean}>`
-  ${p =>
-    p.hasAlertWizardV3 &&
-    `
-    border-bottom: none;
-    padding: 0;
+const StyledTextField = styled(TextField)`
+  border-bottom: none;
+  padding: 0;
 
-    & > div {
-      padding: 0;
-      width: 100%;
-    }
+  & > div {
+    padding: 0;
+    width: 100%;
+  }
 
-    margin-bottom: ${space(1)};
-  `}
+  margin-bottom: ${space(1)};
 `;
 
-const StyledFormField = styled(FormField)<{
-  hasAlertWizardV3: boolean;
-  extraMargin?: boolean;
-}>`
-  ${p =>
-    p.hasAlertWizardV3 &&
-    `
-    padding: 0;
+const StyledFormField = styled(FormField)<{extraMargin?: boolean}>`
+  padding: 0;
 
-    & > div {
-      padding: 0;
-      width: 100%;
-    }
+  & > div {
+    padding: 0;
+    width: 100%;
+  }
 
-    margin-bottom: ${p.extraMargin ? '60px' : space(1)};
-  `}
+  margin-bottom: ${p => `${p.extraMargin ? '60px' : space(1)}`};
 `;

static/app/views/alerts/rules/metric/thresholdTypeForm.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import Feature from 'sentry/components/acl/feature';
 import RadioGroup from 'sentry/components/forms/controls/radioGroup';
 import SelectControl from 'sentry/components/forms/selectControl';
-import ListItem from 'sentry/components/list/listItem';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
@@ -16,7 +15,6 @@ type Props = {
   comparisonType: AlertRuleComparisonType;
   dataset: Dataset;
   disabled: boolean;
-  hasAlertWizardV3: boolean;
   onComparisonDeltaChange: (value: number) => void;
   onComparisonTypeChange: (value: AlertRuleComparisonType) => void;
   organization: Organization;
@@ -30,68 +28,60 @@ const ThresholdTypeForm = ({
   comparisonType,
   onComparisonDeltaChange,
   onComparisonTypeChange,
-  hasAlertWizardV3,
   comparisonDelta,
-}: Props) =>
-  isCrashFreeAlert(dataset) ? null : (
+}: Props) => {
+  if (isCrashFreeAlert(dataset)) {
+    return null;
+  }
+
+  return (
     <Feature features={['organizations:change-alerts']} organization={organization}>
-      {!hasAlertWizardV3 && <StyledListItem>{t('Select threshold type')}</StyledListItem>}
-      <FormRow hasAlertWizardV3={hasAlertWizardV3}>
+      <FormRow>
         <StyledRadioGroup
-          hasAlertWizardV3={hasAlertWizardV3}
           disabled={disabled}
           choices={[
-            [
-              AlertRuleComparisonType.COUNT,
-              hasAlertWizardV3 ? 'Static: above or below {x}' : 'Count',
-            ],
+            [AlertRuleComparisonType.COUNT, 'Static: above or below {x}'],
             [
               AlertRuleComparisonType.CHANGE,
-              hasAlertWizardV3 ? (
-                comparisonType === AlertRuleComparisonType.COUNT ? (
-                  t('Percent Change: {x%} higher or lower compared to previous period')
-                ) : (
-                  // Prevent default to avoid dropdown menu closing on click
-                  <ComparisonContainer onClick={e => e.preventDefault()}>
-                    {t('Percent Change: {x%} higher or lower compared to')}
-                    <SelectControl
-                      name="comparisonDelta"
-                      styles={{
-                        container: (provided: {
-                          [x: string]: string | number | boolean;
-                        }) => ({
-                          ...provided,
-                          marginLeft: space(1),
-                        }),
-                        control: (provided: {
-                          [x: string]: string | number | boolean;
-                        }) => ({
-                          ...provided,
-                          minHeight: 30,
-                          minWidth: 500,
-                          maxWidth: 1000,
-                        }),
-                        valueContainer: (provided: {
-                          [x: string]: string | number | boolean;
-                        }) => ({
-                          ...provided,
-                          padding: 0,
-                        }),
-                        singleValue: (provided: {
-                          [x: string]: string | number | boolean;
-                        }) => ({
-                          ...provided,
-                        }),
-                      }}
-                      value={comparisonDelta}
-                      onChange={({value}) => onComparisonDeltaChange(value)}
-                      options={COMPARISON_DELTA_OPTIONS}
-                      required={comparisonType === AlertRuleComparisonType.CHANGE}
-                    />
-                  </ComparisonContainer>
-                )
+              comparisonType === AlertRuleComparisonType.COUNT ? (
+                t('Percent Change: {x%} higher or lower compared to previous period')
               ) : (
-                t('Percent Change')
+                // Prevent default to avoid dropdown menu closing on click
+                <ComparisonContainer onClick={e => e.preventDefault()}>
+                  {t('Percent Change: {x%} higher or lower compared to')}
+                  <SelectControl
+                    name="comparisonDelta"
+                    styles={{
+                      container: (provided: {
+                        [x: string]: string | number | boolean;
+                      }) => ({
+                        ...provided,
+                        marginLeft: space(1),
+                      }),
+                      control: (provided: {[x: string]: string | number | boolean}) => ({
+                        ...provided,
+                        minHeight: 30,
+                        minWidth: 500,
+                        maxWidth: 1000,
+                      }),
+                      valueContainer: (provided: {
+                        [x: string]: string | number | boolean;
+                      }) => ({
+                        ...provided,
+                        padding: 0,
+                      }),
+                      singleValue: (provided: {
+                        [x: string]: string | number | boolean;
+                      }) => ({
+                        ...provided,
+                      }),
+                    }}
+                    value={comparisonDelta}
+                    onChange={({value}) => onComparisonDeltaChange(value)}
+                    options={COMPARISON_DELTA_OPTIONS}
+                    required={comparisonType === AlertRuleComparisonType.CHANGE}
+                  />
+                </ComparisonContainer>
               ),
             ],
           ]}
@@ -102,19 +92,14 @@ const ThresholdTypeForm = ({
       </FormRow>
     </Feature>
   );
+};
 
-const StyledListItem = styled(ListItem)`
-  margin-bottom: ${space(1)};
-  font-size: ${p => p.theme.fontSizeExtraLarge};
-  line-height: 1.3;
-`;
-
-const FormRow = styled('div')<{hasAlertWizardV3: boolean}>`
+const FormRow = styled('div')`
   display: flex;
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
-  margin-bottom: ${p => (p.hasAlertWizardV3 ? space(2) : space(4))};
+  margin-bottom: ${space(2)};
 `;
 
 const ComparisonContainer = styled('div')`
@@ -123,12 +108,12 @@ const ComparisonContainer = styled('div')`
   align-items: center;
 `;
 
-const StyledRadioGroup = styled(RadioGroup)<{hasAlertWizardV3: boolean}>`
+const StyledRadioGroup = styled(RadioGroup)`
   flex: 1;
 
-  ${p => p.hasAlertWizardV3 && 'gap: 0;'}
+  gap: 0;
   & > label {
-    ${p => p.hasAlertWizardV3 && 'height: 33px;'}
+    height: 33px;
   }
 `;
 

static/app/views/alerts/rules/metric/triggers/actionsPanel/index.tsx

@@ -36,7 +36,6 @@ type Props = {
   currentProject: string;
   disabled: boolean;
   error: boolean;
-  hasAlertWizardV3: boolean;
   loading: boolean;
   onAdd: (triggerIndex: number, action: Action) => void;
   onChange: (triggerIndex: number, triggers: Trigger[], actions: Action[]) => void;
@@ -273,7 +272,6 @@ class ActionsPanel extends PureComponent<Props> {
       organization,
       projects,
       triggers,
-      hasAlertWizardV3,
     } = this.props;
 
     const project = projects.find(({slug}) => slug === currentProject);
@@ -310,16 +308,7 @@ class ActionsPanel extends PureComponent<Props> {
 
     return (
       <Fragment>
-        <PerformActionsListItem>
-          {hasAlertWizardV3 ? t('Set actions') : t('Perform actions')}
-          {!hasAlertWizardV3 && (
-            <AlertParagraph>
-              {t(
-                'When any of the thresholds above are met, perform an action such as sending an email or using an integration.'
-              )}
-            </AlertParagraph>
-          )}
-        </PerformActionsListItem>
+        <PerformActionsListItem>{t('Set actions')}</PerformActionsListItem>
         {loading && <LoadingIndicator />}
         {actions.map(({action, actionIdx, triggerIndex, availableAction}) => {
           const actionDisabled =
@@ -468,12 +457,6 @@ const ActionSection = styled('div')`
   margin-bottom: ${space(3)};
 `;
 
-const AlertParagraph = styled('p')`
-  color: ${p => p.theme.subText};
-  margin-bottom: ${space(1)};
-  font-size: ${p => p.theme.fontSizeLarge};
-`;
-
 const PanelItemGrid = styled(PanelItem)`
   display: flex;
   align-items: center;