fix(domains) Fix URL generation in alerts (#42883)

Update alerts URL generation and redirects to work under
customer-domains without redirects and requests to the undefined org.

static/app/views/alerts/create.tsx

@@ -27,7 +27,6 @@ import {
 import {getAlertTypeFromAggregateDataset} from 'sentry/views/alerts/wizard/utils';
 
 type RouteParams = {
-  orgId: string;
   alertType?: AlertRuleType;
   projectId?: string;
 };

static/app/views/alerts/edit.tsx

@@ -15,7 +15,6 @@ import MetricRulesEdit from 'sentry/views/alerts/rules/metric/edit';
 import {AlertRuleType} from 'sentry/views/alerts/types';
 
 type RouteParams = {
-  orgId: string;
   projectId: string;
   ruleId: string;
 };

static/app/views/alerts/incidentRedirect.spec.jsx

@@ -9,7 +9,7 @@ import IncidentRedirect from 'sentry/views/alerts/incidentRedirect';
 jest.mock('sentry/utils/analytics/trackAdvancedAnalyticsEvent');
 
 describe('IncidentRedirect', () => {
-  const params = {orgId: 'org-slug', alertId: '123'};
+  const params = {alertId: '123'};
   const {organization, project, routerContext} = initializeOrg({
     router: {
       params,

static/app/views/alerts/incidentRedirect.tsx

@@ -6,13 +6,14 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {Organization} from 'sentry/types';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import useApi from 'sentry/utils/useApi';
+import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 
 import {fetchIncident} from './utils/apiCalls';
 import {alertDetailsLink} from './utils';
 
 type Props = {
   organization: Organization;
-} & RouteComponentProps<{alertId: string; orgId: string}, {}>;
+} & RouteComponentProps<{alertId: string}, {}>;
 
 /**
  * Reirects from an incident to the incident's metric alert details page
@@ -32,15 +33,17 @@ function IncidentRedirect({organization, params}: Props) {
     setHasError(false);
 
     try {
-      const incident = await fetchIncident(api, params.orgId, params.alertId);
-      browserHistory.replace({
-        pathname: alertDetailsLink(organization, incident),
-        query: {alert: incident.identifier},
-      });
+      const incident = await fetchIncident(api, organization.slug, params.alertId);
+      browserHistory.replace(
+        normalizeUrl({
+          pathname: alertDetailsLink(organization, incident),
+          query: {alert: incident.identifier},
+        })
+      );
     } catch (err) {
       setHasError(true);
     }
-  }, [setHasError, api, params.orgId, params.alertId, organization]);
+  }, [setHasError, api, params.alertId, organization]);
 
   useEffect(() => {
     fetchData();

static/app/views/alerts/list/incidents/index.spec.jsx

@@ -26,11 +26,7 @@ describe('IncidentsList', () => {
     return {
       component: render(
         <AlertsContainer>
-          <IncidentsList
-            params={{orgId: org.slug}}
-            location={{query: {}, search: ''}}
-            router={router}
-          />
+          <IncidentsList params={{}} location={{query: {}, search: ''}} router={router} />
         </AlertsContainer>,
         {context: routerContext, organization: org}
       ),

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

@@ -31,7 +31,7 @@ import AlertListRow from './row';
 const DOCS_URL =
   'https://docs.sentry.io/workflow/alerts-notifications/alerts/?_ga=2.21848383.580096147.1592364314-1444595810.1582160976';
 
-type Props = RouteComponentProps<{orgId: string}, {}> & {
+type Props = RouteComponentProps<{}, {}> & {
   organization: Organization;
 };
 
@@ -51,14 +51,14 @@ type State = {
 
 class IncidentsList extends AsyncComponent<Props, State & AsyncComponent['state']> {
   getEndpoints(): ReturnType<AsyncComponent['getEndpoints']> {
-    const {params, location} = this.props;
+    const {organization, location} = this.props;
     const {query} = location;
     const status = getQueryStatus(query.status);
 
     return [
       [
         'incidentList',
-        `/organizations/${params?.orgId}/incidents/`,
+        `/organizations/${organization.slug}/incidents/`,
         {
           query: {
             ...query,
@@ -87,10 +87,10 @@ class IncidentsList extends AsyncComponent<Props, State & AsyncComponent['state'
 
     // Check if they have rules or not, to know which empty state message to
     // display
-    const {params, location, organization} = this.props;
+    const {location, organization} = this.props;
 
     const alertRules = await this.api.requestPromise(
-      `/organizations/${params?.orgId}/alert-rules/`,
+      `/organizations/${organization.slug}/alert-rules/`,
       {
         method: 'GET',
         query: location.query,
@@ -205,10 +205,7 @@ class IncidentsList extends AsyncComponent<Props, State & AsyncComponent['state'
 
   renderList() {
     const {loading, incidentList, incidentListPageLinks, hasAlertRule} = this.state;
-    const {
-      params: {orgId},
-      organization,
-    } = this.props;
+    const {organization} = this.props;
 
     const checkingForAlertRules =
       incidentList?.length === 0 && hasAlertRule === undefined;
@@ -237,7 +234,7 @@ class IncidentsList extends AsyncComponent<Props, State & AsyncComponent['state'
               t('Team'),
             ]}
           >
-            <Projects orgId={orgId} slugs={this.projectsFromIncidents}>
+            <Projects orgId={organization.slug} slugs={this.projectsFromIncidents}>
               {({initiallyLoaded, projects}) =>
                 incidentList.map(incident => (
                   <AlertListRow
@@ -258,11 +255,10 @@ class IncidentsList extends AsyncComponent<Props, State & AsyncComponent['state'
   }
 
   renderBody() {
-    const {params, router, location} = this.props;
-    const {orgId} = params;
+    const {organization, router, location} = this.props;
 
     return (
-      <SentryDocumentTitle title={t('Alerts')} orgSlug={orgId}>
+      <SentryDocumentTitle title={t('Alerts')} orgSlug={organization.slug}>
         <PageFiltersContainer>
           <AlertHeader router={router} activeTab="stream" />
           <Layout.Body>

static/app/views/alerts/list/rules/index.spec.jsx

@@ -28,7 +28,7 @@ describe('AlertRulesList', () => {
     <OrganizationContext.Provider value={props.organization ?? organization}>
       <AlertRulesList
         organization={props.organization ?? organization}
-        params={{orgId: organization.slug}}
+        params={{}}
         location={{query: {}, search: ''}}
         router={router}
         {...props}

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

@@ -25,7 +25,7 @@ import AlertHeader from '../header';
 
 import RuleListRow from './row';
 
-type Props = RouteComponentProps<{orgId: string}, {}> & {
+type Props = RouteComponentProps<{}, {}> & {
   organization: Organization;
   selection: PageFilters;
 };
@@ -37,7 +37,7 @@ type State = {
 
 class AlertRulesList extends AsyncComponent<Props, State & AsyncComponent['state']> {
   getEndpoints(): ReturnType<AsyncComponent['getEndpoints']> {
-    const {params, location} = this.props;
+    const {organization, location} = this.props;
     const {query} = location;
 
     query.expand = ['latestIncident', 'lastTriggered'];
@@ -50,7 +50,7 @@ class AlertRulesList extends AsyncComponent<Props, State & AsyncComponent['state
     return [
       [
         'ruleList',
-        `/organizations/${params && params.orgId}/combined-rules/`,
+        `/organizations/${organization.slug}/combined-rules/`,
         {
           query,
         },
@@ -93,9 +93,9 @@ class AlertRulesList extends AsyncComponent<Props, State & AsyncComponent['state
     rule: CombinedMetricIssueAlerts,
     ownerValue: string
   ) => {
-    const {orgId} = this.props.params;
+    const {organization} = this.props;
     const alertPath = rule.type === 'alert_rule' ? 'alert-rules' : 'rules';
-    const endpoint = `/projects/${orgId}/${projectId}/${alertPath}/${rule.id}/`;
+    const endpoint = `/projects/${organization.slug}/${projectId}/${alertPath}/${rule.id}/`;
     const updatedRule = {...rule, owner: ownerValue};
 
     this.api.request(endpoint, {
@@ -111,12 +111,12 @@ class AlertRulesList extends AsyncComponent<Props, State & AsyncComponent['state
   };
 
   handleDeleteRule = async (projectId: string, rule: CombinedMetricIssueAlerts) => {
-    const {orgId} = this.props.params;
+    const {organization} = this.props;
     const alertPath = isIssueAlert(rule) ? 'rules' : 'alert-rules';
 
     try {
       await this.api.requestPromise(
-        `/projects/${orgId}/${projectId}/${alertPath}/${rule.id}/`,
+        `/projects/${organization.slug}/${projectId}/${alertPath}/${rule.id}/`,
         {
           method: 'DELETE',
         }
@@ -132,12 +132,7 @@ class AlertRulesList extends AsyncComponent<Props, State & AsyncComponent['state
   }
 
   renderList() {
-    const {
-      params: {orgId},
-      location,
-      organization,
-      router,
-    } = this.props;
+    const {location, organization, router} = this.props;
     const {loading, ruleList = [], ruleListPageLinks} = this.state;
     const {query} = location;
     const hasEditAccess = organization.access.includes('alerts:write');
@@ -217,7 +212,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={this.projectsFromResults}>
+                <Projects orgId={organization.slug} slugs={this.projectsFromResults}>
                   {({initiallyLoaded, projects}) =>
                     ruleList?.map(rule => (
                       <RuleListRow
@@ -228,7 +223,7 @@ class AlertRulesList extends AsyncComponent<Props, State & AsyncComponent['state
                         projectsLoaded={initiallyLoaded}
                         projects={projects as Project[]}
                         rule={rule}
-                        orgId={orgId}
+                        orgId={organization.slug}
                         onOwnerChange={this.handleOwnerChange}
                         onDelete={this.handleDeleteRule}
                         userTeams={new Set(teams.map(team => team.id))}
@@ -261,11 +256,10 @@ class AlertRulesList extends AsyncComponent<Props, State & AsyncComponent['state
   }
 
   renderBody() {
-    const {params, router} = this.props;
-    const {orgId} = params;
+    const {organization, router} = this.props;
 
     return (
-      <SentryDocumentTitle title={t('Alerts')} orgSlug={orgId}>
+      <SentryDocumentTitle title={t('Alerts')} orgSlug={organization.slug}>
         <PageFiltersContainer>
           <AlertHeader router={router} activeTab="rules" />
           {this.renderList()}

static/app/views/alerts/rules/issue/details/alertChart.tsx

@@ -19,7 +19,6 @@ import withSentryRouter from 'sentry/utils/withSentryRouter';
 type Props = AsyncComponent['props'] &
   DateTimeObject &
   WithRouterProps & {
-    orgId: string;
     organization: Organization;
     project: Project;
     rule: IssueAlertRule;

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

@@ -5,8 +5,7 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 
-interface Props
-  extends RouteComponentProps<{orgId: string; projectId: string; ruleId: string}, {}> {
+interface Props extends RouteComponentProps<{projectId: string; ruleId: string}, {}> {
   children?: React.ReactNode;
 }