feat(ui): Add "Projects Affected" section in Incidents [WIP]

List projects affected inside of an Incident.

Author: billyvg

src/sentry/static/sentry/app/utils/projects.jsx

@@ -0,0 +1,104 @@
+import {partition} from 'lodash';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import SentryTypes from 'app/sentryTypes';
+import withApi from 'app/utils/withApi';
+import withProjects from 'app/utils/withProjects';
+
+class Projects extends React.Component {
+  static propTypes = {
+    api: PropTypes.object.isRequired,
+    orgId: PropTypes.string.isRequired,
+    slugs: PropTypes.arrayOf(PropTypes.string).isRequired,
+    projects: PropTypes.arrayOf(SentryTypes.Project).isRequired,
+  };
+
+  state = {
+    fetchedProjects: [],
+    projectsFromStore: [],
+    fetching: false,
+  };
+
+  componentDidMount() {
+    this.getDetails();
+  }
+
+  componentDidUpdate() {}
+
+  loaded = false;
+  fetchQueue = new Set();
+
+  getDetails() {
+    const {slugs, projects} = this.props;
+
+    // check if projects store has any items, if not we should wait
+    if (!projects.length) {
+      return;
+    }
+
+    this.loaded = true;
+
+    const [inStore, notInStore] = partition(slugs, slug =>
+      [].find(project => project.slug === slug)
+    );
+
+    // Check `projects` (from store)
+    const projectsFromStore = inStore.map(slug =>
+      projects.find(project => project.slug === slug)
+    );
+
+    this.setState({
+      projectsFromStore,
+    });
+
+    notInStore.forEach(slug => this.fetchQueue.add(slug));
+
+    // placeholders
+    this.setState({
+      fetchedProjects: notInStore.map(slug => ({slug})),
+    });
+
+    this.fetchProjects();
+  }
+
+  async fetchProjects() {
+    const {api, orgId} = this.props;
+
+    if (!this.fetchQueue.size) {
+      return;
+    }
+
+    this.setState({
+      fetching: true,
+    });
+
+    await new Promise(resolve => setTimeout(resolve, 2500));
+    const results = await Promise.all(
+      Array.from(this.fetchQueue).map(slug =>
+        api.requestPromise(`/organizations/${orgId}/projects/`, {
+          query: {
+            query: `slug:${slug}`,
+          },
+        })
+      )
+    );
+    this.setState({
+      fetchedProjects: results.map(([result]) => result),
+      fetching: false,
+    });
+  }
+
+  render() {
+    const {slugs, children} = this.props;
+    return children({
+      loaded: this.loaded,
+      projects: this.loaded
+        ? [...this.state.fetchedProjects, ...this.state.projectsFromStore]
+        : slugs.map(slug => ({slug})),
+      fetching: this.state.fetching,
+    });
+  }
+}
+
+export default withProjects(withApi(Projects));

src/sentry/static/sentry/app/utils/withProjectDetails.jsx

@@ -9,6 +9,7 @@ import LineChart from 'app/components/charts/lineChart';
 import Link from 'app/components/links/link';
 import MarkPoint from 'app/components/charts/components/markPoint';
 import NavTabs from 'app/components/navTabs';
+import Projects from 'app/utils/projects';
 import SeenByList from 'app/components/seenByList';
 import SentryTypes from 'app/sentryTypes';
 import space from 'app/styles/space';
@@ -112,7 +113,7 @@ export default class DetailsBody extends React.Component {
         </Main>
         <Sidebar>
           <PageContent>
-            {incident && (
+            {incident ? (
               <LineChart
                 isGroupedByDate
                 series={[
@@ -141,6 +142,8 @@ export default class DetailsBody extends React.Component {
                   },
                 ]}
               />
+            ) : (
+              <ChartPlaceholder />
             )}
 
             <IncidentsSuspects suspects={[]} />
@@ -152,9 +155,13 @@ export default class DetailsBody extends React.Component {
 
               {incident && (
                 <div>
-                  {incident.projects.map(project => {
-                    return <IdBadge key={project} project={{slug: project}} />;
-                  })}
+                  <Projects slugs={incident.projects} orgId={params.orgId}>
+                    {({projects, fetching}) => {
+                      return projects.map(project => (
+                        <StyledIdBadge key={project.slug} project={project} />
+                      ));
+                    }}
+                  </Projects>
                 </div>
               )}
             </div>
@@ -217,3 +224,7 @@ const SidebarHeading = styled('h6')`
   margin: ${space(2)} 0 ${space(1)} 0;
   text-transform: uppercase;
 `;
+
+const StyledIdBadge = styled(IdBadge)`
+  margin-bottom: ${space(1)};
+`;