fix(ui): Don't show project picker for alert wizard v3 (#33634)

* fix(ui): Don't show project picker for alert wizard v3

* add whitespace

Author: taylangocmen

static/app/components/createAlertButton.tsx

@@ -72,7 +72,7 @@ function IncompatibleQueryAlert({
   const {hasProjectError, hasEnvironmentError, hasEventTypeError, hasYAxisError} =
     incompatibleQuery;
 
-  const totalErrors = Object.values(incompatibleQuery).filter(val => val === true).length;
+  const totalErrors = Object.values(incompatibleQuery).filter(val => val).length;
 
   const eventTypeError = eventView.clone();
   eventTypeError.query += ' event.type:error';
@@ -360,7 +360,11 @@ const CreateAlertButton = withRouter(
         : `/organizations/${organization.slug}/alerts/${providedProj}`;
       const alertsArgs = [
         `${referrer ? `referrer=${referrer}` : ''}`,
-        `${hasAlertWizardV3 && providedProj ? `project=${providedProj}` : ''}`,
+        `${
+          hasAlertWizardV3 && providedProj && providedProj !== ':projectId'
+            ? `project=${providedProj}`
+            : ''
+        }`,
       ].filter(item => item !== '');
 
       return `${alertsBaseUrl}/wizard/${alertsArgs.length ? '?' : ''}${alertsArgs.join(

static/app/views/alerts/incidentRules/ruleNameOwnerForm.tsx

@@ -35,6 +35,7 @@ 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.')}
@@ -102,7 +103,10 @@ const StyledTextField = styled(TextField)<{hasAlertWizardV3: boolean}>`
   `}
 `;
 
-const StyledFormField = styled(FormField)<{hasAlertWizardV3: boolean}>`
+const StyledFormField = styled(FormField)<{
+  hasAlertWizardV3: boolean;
+  extraMargin?: boolean;
+}>`
   ${p =>
     p.hasAlertWizardV3 &&
     `
@@ -113,6 +117,6 @@ const StyledFormField = styled(FormField)<{hasAlertWizardV3: boolean}>`
       width: 100%;
     }
 
-    margin-bottom: ${space(1)};
+    margin-bottom: ${p.extraMargin ? '60px' : space(1)};
   `}
 `;

static/app/views/alerts/issueRuleEditor/index.tsx

@@ -612,6 +612,7 @@ class IssueRuleEditor extends AsyncView<Props, State> {
     return (
       <StyledField
         hasAlertWizardV3={hasAlertWizardV3}
+        extraMargin
         label={hasAlertWizardV3 ? null : t('Team')}
         help={hasAlertWizardV3 ? null : t('The team that can edit this alert.')}
         disabled={!hasAccess || !canEdit}
@@ -1145,7 +1146,7 @@ const SettingsContainer = styled('div')`
   gap: ${space(1)};
 `;
 
-const StyledField = styled(Field)<{hasAlertWizardV3?: boolean}>`
+const StyledField = styled(Field)<{extraMargin?: boolean; hasAlertWizardV3?: boolean}>`
   :last-child {
     padding-bottom: ${space(2)};
   }
@@ -1161,7 +1162,7 @@ const StyledField = styled(Field)<{hasAlertWizardV3?: boolean}>`
       width: 100%;
     }
 
-    margin-bottom: ${space(1)};
+    margin-bottom: ${p.extraMargin ? '60px' : space(1)};
   `}
 `;
 

static/app/views/alerts/list/header.tsx

@@ -16,10 +16,11 @@ import {Organization} from 'sentry/types';
 type Props = {
   activeTab: 'stream' | 'rules';
   organization: Organization;
+  projectSlugs: string[];
   router: InjectedRouter;
 };
 
-const AlertHeader = ({router, organization, activeTab}: Props) => {
+const AlertHeader = ({router, organization, activeTab, projectSlugs}: Props) => {
   /**
    * Incidents list is currently at the organization level, but the link needs to
    * go down to a specific project scope.
@@ -50,6 +51,7 @@ const AlertHeader = ({router, organization, activeTab}: Props) => {
             priority="primary"
             referrer="alert_stream"
             showPermissionGuide
+            projectSlug={projectSlugs.length === 1 ? projectSlugs[0] : undefined}
           >
             {t('Create Alert')}
           </CreateAlertButton>

static/app/views/alerts/list/index.tsx

@@ -1,7 +1,6 @@
 import {Component, Fragment} from 'react';
 import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
-import flatten from 'lodash/flatten';
 
 import {promptsCheck, promptsUpdate} from 'sentry/actionCreators/prompts';
 import Feature from 'sentry/components/acl/feature';
@@ -123,6 +122,12 @@ class IncidentsList extends AsyncComponent<Props, State & AsyncComponent['state'
     this.setState({hasAlertRule, firstVisitShown, loading: false});
   }
 
+  get projectsFromIncidents() {
+    const {incidentList} = this.state;
+
+    return [...new Set(incidentList?.map(({projects}) => projects).flat())];
+  }
+
   handleChangeSearch = (title: string) => {
     const {router, location} = this.props;
     const {cursor: _cursor, page: _page, ...currentQuery} = location.query;
@@ -199,13 +204,8 @@ class IncidentsList extends AsyncComponent<Props, State & AsyncComponent['state'
       organization,
     } = this.props;
 
-    const allProjectsFromIncidents = new Set(
-      flatten(incidentList?.map(({projects}) => projects))
-    );
     const checkingForAlertRules =
-      incidentList && incidentList.length === 0 && hasAlertRule === undefined
-        ? true
-        : false;
+      incidentList?.length === 0 && hasAlertRule === undefined;
     const showLoadingIndicator = loading || checkingForAlertRules;
 
     return (
@@ -231,7 +231,7 @@ class IncidentsList extends AsyncComponent<Props, State & AsyncComponent['state'
               t('Team'),
             ]}
           >
-            <Projects orgId={orgId} slugs={Array.from(allProjectsFromIncidents)}>
+            <Projects orgId={orgId} slugs={this.projectsFromIncidents}>
               {({initiallyLoaded, projects}) =>
                 incidentList.map(incident => (
                   <AlertListRow
@@ -263,7 +263,12 @@ class IncidentsList extends AsyncComponent<Props, State & AsyncComponent['state'
           showDateSelector={false}
           hideGlobalHeader
         >
-          <AlertHeader organization={organization} router={router} activeTab="stream" />
+          <AlertHeader
+            organization={organization}
+            router={router}
+            activeTab="stream"
+            projectSlugs={this.projectsFromIncidents}
+          />
           <Layout.Body>
             <Layout.Main fullWidth>
               {!this.tryRenderOnboarding() && (

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

@@ -1,7 +1,6 @@
 import {Component} from 'react';
 import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
-import flatten from 'lodash/flatten';
 
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import AsyncComponent from 'sentry/components/asyncComponent';
@@ -59,6 +58,12 @@ class AlertRulesList extends AsyncComponent<Props, State & AsyncComponent['state
     ];
   }
 
+  get projectsFromIncidents() {
+    const {ruleList = []} = this.state;
+
+    return [...new Set(ruleList?.map(({projects}) => projects).flat())];
+  }
+
   handleChangeFilter = (_sectionId: string, activeFilters: Set<string>) => {
     const {router, location} = this.props;
     const {cursor: _cursor, page: _page, ...currentQuery} = location.query;
@@ -115,10 +120,6 @@ class AlertRulesList extends AsyncComponent<Props, State & AsyncComponent['state
     const {loading, ruleList = [], ruleListPageLinks} = this.state;
     const {query} = location;
 
-    const allProjectsFromIncidents = new Set(
-      flatten(ruleList?.map(({projects}) => projects))
-    );
-
     const sort: {
       asc: boolean;
       field: 'date_added' | 'name' | ['incident_status', 'date_triggered'];
@@ -215,7 +216,7 @@ class AlertRulesList extends AsyncComponent<Props, State & AsyncComponent['state
                 isEmpty={ruleList?.length === 0}
                 emptyMessage={t('No alert rules found for the current query.')}
               >
-                <Projects orgId={orgId} slugs={Array.from(allProjectsFromIncidents)}>
+                <Projects orgId={orgId} slugs={this.projectsFromIncidents}>
                   {({initiallyLoaded, projects}) =>
                     ruleList.map(rule => (
                       <RuleListRow
@@ -268,7 +269,12 @@ class AlertRulesList extends AsyncComponent<Props, State & AsyncComponent['state
           showEnvironmentSelector={false}
           hideGlobalHeader
         >
-          <AlertHeader organization={organization} router={router} activeTab="rules" />
+          <AlertHeader
+            organization={organization}
+            router={router}
+            activeTab="rules"
+            projectSlugs={this.projectsFromIncidents}
+          />
           {this.renderList()}
         </PageFiltersContainer>
       </SentryDocumentTitle>