feat(ui): Adds related issues to Incidents sidebar [SEN-695]

src/sentry/static/sentry/app/views/organizationIncidents/details/body.jsx

@@ -3,8 +3,8 @@ import styled from 'react-emotion';
 
 import {PageContent} from 'app/styles/organization';
 import {t} from 'app/locale';
-import IdBadge from 'app/components/idBadge';
 import Chart from 'app/views/organizationIncidents/details/chart';
+import IdBadge from 'app/components/idBadge';
 import Link from 'app/components/links/link';
 import NavTabs from 'app/components/navTabs';
 import Projects from 'app/utils/projects';
@@ -15,6 +15,7 @@ import space from 'app/styles/space';
 import theme from 'app/utils/theme';
 
 import Activity from './activity';
+import RelatedIssues from './relatedIssues';
 import Suspects from './suspects';
 
 export default class DetailsBody extends React.Component {
@@ -67,8 +68,6 @@ export default class DetailsBody extends React.Component {
               <ChartPlaceholder />
             )}
 
-            <Suspects params={params} />
-
             <div>
               <SideHeader loading={loading}>
                 {t('Projects Affected')} ({!loading ? incident.projects.length : '-'})
@@ -86,6 +85,10 @@ export default class DetailsBody extends React.Component {
                 </div>
               )}
             </div>
+
+            <Suspects params={params} />
+
+            <RelatedIssues params={params} incident={incident} />
           </PageContent>
         </Sidebar>
       </StyledPageContent>

src/sentry/static/sentry/app/views/organizationIncidents/details/placeholder.jsx

@@ -0,0 +1,11 @@
+import styled from 'react-emotion';
+
+import space from 'app/styles/space';
+
+const Placeholder = styled('div')`
+  background-color: ${p => p.theme.placeholderBackground};
+  padding: ${space(4)};
+  margin-bottom: ${space(1)};
+`;
+
+export default Placeholder;

src/sentry/static/sentry/app/views/organizationIncidents/details/relatedIssues/index.jsx

@@ -0,0 +1,82 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'react-emotion';
+
+import {Panel, PanelBody, PanelItem} from 'app/components/panels';
+import {t} from 'app/locale';
+import EventOrGroupExtraDetails from 'app/components/eventOrGroupExtraDetails';
+import EventOrGroupHeader from 'app/components/eventOrGroupHeader';
+import SentryTypes from 'app/sentryTypes';
+import space from 'app/styles/space';
+import withApi from 'app/utils/withApi';
+import withOrganization from 'app/utils/withOrganization';
+
+import IssuesFetcher from './issuesFetcher';
+import Placeholder from '../placeholder';
+import SideHeader from '../sideHeader';
+
+const RelatedIssues = styled(
+  class RelatedIssues extends React.Component {
+    static propTypes = {
+      api: PropTypes.object.isRequired,
+      params: PropTypes.object.isRequired,
+      incident: SentryTypes.Incident,
+      loading: PropTypes.bool,
+    };
+
+    render() {
+      const {className, api, params, incident} = this.props;
+
+      return (
+        <div className={className}>
+          <IssuesFetcher api={api} issueIds={incident && incident.groups}>
+            {({issues, loading, error}) => {
+              // If loading is finished, and there are no issues, do not display anything
+              if (!loading && issues && issues.length === 0) {
+                return null;
+              }
+
+              return (
+                <React.Fragment>
+                  <SideHeader loading={loading}>
+                    {t('Related Issues')} ({loading || !issues ? '-' : issues.length})
+                  </SideHeader>
+                  {loading ? (
+                    <Placeholder />
+                  ) : (
+                    issues &&
+                    issues.length > 0 && (
+                      <Panel>
+                        <PanelBody>
+                          {issues.map(issue => (
+                            <RelatedItem p={1} key={issue.id}>
+                              <EventOrGroupHeader
+                                params={params}
+                                size="small"
+                                hideLevel
+                                data={issue}
+                              />
+                              <EventOrGroupExtraDetails params={params} {...issue} />
+                            </RelatedItem>
+                          ))}
+                        </PanelBody>
+                      </Panel>
+                    )
+                  )}
+                </React.Fragment>
+              );
+            }}
+          </IssuesFetcher>
+        </div>
+      );
+    }
+  }
+)`
+  margin-top: ${space(1)};
+`;
+
+export default withOrganization(withApi(RelatedIssues));
+
+const RelatedItem = styled(PanelItem)`
+  flex-direction: column;
+`;

src/sentry/static/sentry/app/views/organizationIncidents/details/relatedIssues/issuesFetcher.jsx

@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+class IssuesFetcher extends React.PureComponent {
+  static propTypes = {
+    api: PropTypes.object,
+    issueIds: PropTypes.arrayOf(PropTypes.string),
+  };
+
+  state = {
+    loading: true,
+    issues: null,
+    error: null,
+  };
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.issueIds !== this.props.issueIds) {
+      this.fetchData();
+    }
+  }
+
+  fetchData = async () => {
+    const {api, issueIds} = this.props;
+
+    if (!issueIds) {
+      return;
+    }
+
+    this.setState({loading: true});
+
+    try {
+      const issues = await Promise.all(
+        issueIds.map(issueId => findIssueById(api, issueId))
+      );
+      this.setState({
+        loading: false,
+        issues,
+      });
+    } catch (error) {
+      console.error(error); // eslint-disable-line no-console
+      this.setState({loading: false, error});
+    }
+  };
+
+  render() {
+    return this.props.children(this.state);
+  }
+}
+
+function findIssueById(api, issueId) {
+  return api.requestPromise(`/issues/${issueId}/`);
+}
+
+export default IssuesFetcher;

src/sentry/static/sentry/app/views/organizationIncidents/details/suspects.jsx

@@ -8,11 +8,13 @@ import AsyncComponent from 'app/components/asyncComponent';
 import CommitLink from 'app/components/commitLink';
 import IdBadge from 'app/components/idBadge';
 import SentryTypes from 'app/sentryTypes';
-import SideHeader from 'app/views/organizationIncidents/details/sideHeader';
 import TimeSince from 'app/components/timeSince';
 import overflowEllipsis from 'app/styles/overflowEllipsis';
 import space from 'app/styles/space';
 
+import Placeholder from './placeholder';
+import SideHeader from './sideHeader';
+
 class Suspects extends React.Component {
   static propTypes = {
     suspects: PropTypes.arrayOf(SentryTypes.IncidentSuspect),
@@ -108,11 +110,6 @@ Message.propTypes = {
   suspect: SentryTypes.IncidentSuspectData,
 };
 
-const Placeholder = styled('div')`
-  background-color: ${p => p.theme.placeholderBackground};
-  padding: ${space(4)};
-`;
-
 const Type = styled('div')`
   text-transform: uppercase;
   color: ${p => p.theme.gray4};

tests/js/spec/views/organizationIncidents/details/index.spec.jsx

@@ -6,19 +6,17 @@ import IncidentDetails from 'app/views/organizationIncidents/details';
 import ProjectsStore from 'app/stores/projectsStore';
 
 describe('IncidentDetails', function() {
-  const {organization, project, routerContext} = initializeOrg();
+  const params = {orgId: 'org-slug', incidentId: '123'};
+  const {organization, project, routerContext} = initializeOrg({
+    router: {
+      params,
+    },
+  });
   const mockIncident = TestStubs.Incident({projects: [project.slug]});
-
   let activitiesList;
 
   const createWrapper = props =>
-    mount(
-      <IncidentDetails
-        params={{orgId: 'org-slug', incidentId: mockIncident.identifier}}
-        {...props}
-      />,
-      routerContext
-    );
+    mount(<IncidentDetails params={params} {...props} />, routerContext);
 
   beforeAll(function() {
     ProjectsStore.loadInitialData([project]);
@@ -160,4 +158,70 @@ describe('IncidentDetails', function() {
     wrapper.find('SubscribeButton').simulate('click');
     expect(subscribe).toHaveBeenCalled();
   });
+
+  it('loads related incidents', async function() {
+    MockApiClient.addMockResponse({
+      url: '/issues/1/',
+      body: TestStubs.Group({
+        id: '1',
+        organization,
+      }),
+    });
+    MockApiClient.addMockResponse({
+      url: '/issues/2/',
+      body: TestStubs.Group({
+        id: '2',
+        organization,
+      }),
+    });
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/incidents/123/',
+      body: {
+        ...mockIncident,
+
+        groups: ['1', '2'],
+      },
+    });
+
+    const wrapper = createWrapper();
+
+    await tick();
+    wrapper.update();
+
+    expect(wrapper.find('RelatedItem')).toHaveLength(2);
+
+    expect(
+      wrapper
+        .find('RelatedItem Title')
+        .at(0)
+        .text()
+    ).toBe('RequestErrorfetchData(app/components/group/suggestedOwners)');
+
+    expect(
+      wrapper
+        .find('RelatedItem GroupShortId')
+        .at(0)
+        .text()
+    ).toBe('JAVASCRIPT-6QS');
+  });
+
+  it('renders incident without issues', async function() {
+    MockApiClient.addMockResponse({
+      url: '/organizations/org-slug/incidents/123/',
+      body: {
+        ...mockIncident,
+        groups: [],
+      },
+    });
+
+    const wrapper = createWrapper();
+
+    expect(wrapper.find('RelatedIssues Placeholder')).toHaveLength(1);
+
+    await tick();
+    wrapper.update();
+
+    expect(wrapper.find('RelatedItem')).toHaveLength(0);
+    expect(wrapper.find('RelatedIssues Placeholder')).toHaveLength(0);
+  });
 });