fix(alerts): Remove null projects from alerts list (#45202)

Author: scttcper

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

@@ -1,6 +1,7 @@
 import {Component} from 'react';
 import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
+import uniq from 'lodash/uniq';
 
 import {addErrorMessage, addMessage} from 'sentry/actionCreators/indicator';
 import AsyncComponent from 'sentry/components/asyncComponent';
@@ -13,6 +14,7 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {IconArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {Organization, PageFilters, Project} from 'sentry/types';
+import {defined} from 'sentry/utils';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import Projects from 'sentry/utils/projects';
 import Teams from 'sentry/utils/teams';
@@ -31,7 +33,7 @@ type Props = RouteComponentProps<{}, {}> & {
 };
 
 type State = {
-  ruleList?: CombinedMetricIssueAlerts[] | null;
+  ruleList?: Array<CombinedMetricIssueAlerts | null> | null;
   teamFilterSearch?: string;
 };
 
@@ -58,12 +60,6 @@ class AlertRulesList extends AsyncComponent<Props, State & AsyncComponent['state
     ];
   }
 
-  get projectsFromResults() {
-    const ruleList = this.state.ruleList ?? [];
-
-    return [...new Set(ruleList.map(({projects}) => projects).flat())];
-  }
-
   handleChangeFilter = (activeFilters: string[]) => {
     const {router, location} = this.props;
     const {cursor: _cursor, page: _page, ...currentQuery} = location.query;
@@ -133,9 +129,11 @@ class AlertRulesList extends AsyncComponent<Props, State & AsyncComponent['state
 
   renderList() {
     const {location, organization, router} = this.props;
-    const {loading, ruleList = [], ruleListPageLinks} = this.state;
+    const {loading, ruleListPageLinks} = this.state;
     const {query} = location;
     const hasEditAccess = organization.access.includes('alerts:write');
+    const ruleList = (this.state.ruleList ?? []).filter(defined);
+    const projectsFromResults = uniq(ruleList.flatMap(({projects}) => projects));
 
     const sort: {
       asc: boolean;
@@ -209,12 +207,12 @@ class AlertRulesList extends AsyncComponent<Props, State & AsyncComponent['state
                   t('Actions'),
                 ]}
                 isLoading={loading || !loadedTeams}
-                isEmpty={ruleList?.length === 0}
+                isEmpty={ruleList.length === 0}
                 emptyMessage={t('No alert rules found for the current query.')}
               >
-                <Projects orgId={organization.slug} slugs={this.projectsFromResults}>
+                <Projects orgId={organization.slug} slugs={projectsFromResults}>
                   {({initiallyLoaded, projects}) =>
-                    ruleList?.map(rule => (
+                    ruleList.map(rule => (
                       <RuleListRow
                         // Metric and issue alerts can have the same id
                         key={`${