feat(issue-diff): Update issue diff to use the project event endpoint (#12551)

Always use the project event detail endpoint instead of the event detail
endopint. We should always specify a project in order when using Snuba for
event data.

src/sentry/api/endpoints/event_details.py

@@ -20,6 +20,8 @@ class EventDetailsEndpoint(Endpoint):
         This endpoint returns the data for a specific event.  The event ID
         is the event as it appears in the Sentry database and not the event
         ID that is reported by the client upon submission.
+
+        This method is deprecated.
         """
         event = Event.objects.from_event_id(event_id, project_id=None)
         if event is None:

src/sentry/static/sentry/app/components/issueDiff.jsx

@@ -16,6 +16,8 @@ class IssueDiff extends React.Component {
     targetIssueId: PropTypes.string.isRequired,
     baseEventId: PropTypes.string.isRequired,
     targetEventId: PropTypes.string.isRequired,
+    orgId: PropTypes.string.isRequired,
+    projectId: PropTypes.string.isRequired,
   };
 
   static defaultProps = {
@@ -92,8 +94,10 @@ class IssueDiff extends React.Component {
   }
 
   getEndpoint(issueId, eventId) {
+    const {orgId, projectId} = this.props;
+
     if (eventId !== 'latest') {
-      return `/events/${eventId}/`;
+      return `/projects/${orgId}/${projectId}/events/${eventId}/`;
     }
 
     return `/issues/${issueId}/events/${eventId}/`;

src/sentry/static/sentry/app/views/groupDetails/shared/groupMerged/index.jsx

@@ -9,11 +9,15 @@ import GroupingActions from 'app/actions/groupingActions';
 import GroupingStore from 'app/stores/groupingStore';
 import LoadingError from 'app/components/loadingError';
 import LoadingIndicator from 'app/components/loadingIndicator';
+import SentryTypes from 'app/sentryTypes';
 
 import MergedList from './mergedList';
 
 const GroupMergedView = createReactClass({
   displayName: 'GroupMergedView',
+  propTypes: {
+    project: SentryTypes.Project,
+  },
   mixins: [ApiMixin, Reflux.listenTo(GroupingStore, 'onGroupingUpdate')],
 
   getInitialState() {
@@ -114,6 +118,8 @@ const GroupMergedView = createReactClass({
 
         {isLoadedSuccessfully && (
           <MergedList
+            orgId={this.props.params.orgId}
+            projectId={this.props.project.slug}
             items={this.state.mergedItems}
             pageLinks={this.state.mergedLinks}
             onUnmerge={this.handleUnmerge}

src/sentry/static/sentry/app/views/groupDetails/shared/groupMerged/mergedList.jsx

@@ -18,6 +18,8 @@ class MergedList extends React.Component {
     onToggleCollapse: PropTypes.func.isRequired,
     items: PropTypes.arrayOf(SentryTypes.Event),
     pageLinks: PropTypes.string,
+    orgId: PropTypes.string.isRequired,
+    projectId: PropTypes.string.isRequired,
   };
 
   renderEmpty = () => {
@@ -29,7 +31,7 @@ class MergedList extends React.Component {
   };
 
   render() {
-    const {items, pageLinks, onToggleCollapse, onUnmerge} = this.props;
+    const {items, pageLinks, onToggleCollapse, onUnmerge, orgId, projectId} = this.props;
     const itemsWithLatestEvent = items.filter(({latestEvent}) => !!latestEvent);
     const hasResults = itemsWithLatestEvent.length > 0;
 
@@ -44,7 +46,12 @@ class MergedList extends React.Component {
           <QueryCount count={itemsWithLatestEvent.length} />
         </h2>
 
-        <MergedToolbar onToggleCollapse={onToggleCollapse} onUnmerge={onUnmerge} />
+        <MergedToolbar
+          onToggleCollapse={onToggleCollapse}
+          onUnmerge={onUnmerge}
+          orgId={orgId}
+          projectId={projectId}
+        />
 
         <MergedItems>
           {itemsWithLatestEvent.map(({id, latestEvent}) => (

src/sentry/static/sentry/app/views/groupDetails/shared/groupMerged/mergedToolbar.jsx

@@ -18,6 +18,8 @@ const MergedToolbar = createReactClass({
   displayName: 'MergedToolbar',
 
   propTypes: {
+    orgId: PropTypes.string.isRequired,
+    projectId: PropTypes.string.isRequired,
     groupId: PropTypes.string,
     onUnmerge: PropTypes.func,
     onToggleCollapse: PropTypes.func,
@@ -53,7 +55,7 @@ const MergedToolbar = createReactClass({
   },
 
   handleShowDiff(e) {
-    const {groupId} = this.props;
+    const {groupId, projectId, orgId} = this.props;
     const entries = this.state.unmergeList.entries();
 
     // `unmergeList` should only have 2 items in map
@@ -71,6 +73,8 @@ const MergedToolbar = createReactClass({
       targetIssueId: groupId,
       baseEventId,
       targetEventId,
+      orgId,
+      projectId,
     });
 
     e.stopPropagation();

src/sentry/static/sentry/app/views/groupDetails/shared/groupSimilar/similarItem.jsx

@@ -24,6 +24,7 @@ const SimilarIssueItem = createReactClass({
   displayName: 'SimilarIssueItem',
 
   propTypes: {
+    orgId: PropTypes.string.isRequired,
     groupId: PropTypes.string.isRequired,
     score: PropTypes.object,
     scoresByInterface: PropTypes.shape({
@@ -73,10 +74,12 @@ const SimilarIssueItem = createReactClass({
   },
 
   handleShowDiff(e) {
-    const {groupId, issue} = this.props;
+    const {orgId, groupId, issue} = this.props;
     openDiffModal({
       baseIssueId: groupId,
       targetIssueId: issue.id,
+      projectId: issue.project.slug,
+      orgId,
     });
 
     e.stopPropagation();

src/sentry/static/sentry/app/views/groupDetails/shared/groupSimilar/similarList.jsx

@@ -22,6 +22,7 @@ const SimilarItemPropType = PropTypes.shape({
 
 class SimilarList extends React.Component {
   static propTypes = {
+    orgId: PropTypes.string.isRequired,
     groupId: PropTypes.string.isRequired,
     onMerge: PropTypes.func.isRequired,
     pageLinks: PropTypes.string,
@@ -55,7 +56,7 @@ class SimilarList extends React.Component {
   };
 
   render() {
-    const {groupId, items, filteredItems, pageLinks, onMerge} = this.props;
+    const {orgId, groupId, items, filteredItems, pageLinks, onMerge} = this.props;
     const hasHiddenItems = !!filteredItems.length;
     const hasResults = items.length > 0 || hasHiddenItems;
     const itemsWithFiltered = items.concat(
@@ -79,7 +80,7 @@ class SimilarList extends React.Component {
 
         <div className="similar-list">
           {itemsWithFiltered.map(item => (
-            <SimilarItem key={item.issue.id} groupId={groupId} {...item} />
+            <SimilarItem key={item.issue.id} orgId={orgId} groupId={groupId} {...item} />
           ))}
 
           {hasHiddenItems &&

tests/js/spec/components/__snapshots__/issueDiff.spec.jsx.snap

@@ -5,6 +5,8 @@ exports[`IssueDiff can diff message 1`] = `
   api={Client {}}
   baseEventId="latest"
   baseIssueId="base"
+  orgId="org-slug"
+  projectId="project-slug"
   targetEventId="latest"
   targetIssueId="target"
 >
@@ -132,6 +134,8 @@ exports[`IssueDiff can dynamically import SplitDiff 1`] = `
   api={Client {}}
   baseEventId="latest"
   baseIssueId="base"
+  orgId="org-slug"
+  projectId="project-slug"
   targetEventId="latest"
   targetIssueId="target"
 >

tests/js/spec/components/issueDiff.spec.jsx

@@ -11,7 +11,14 @@ describe('IssueDiff', function() {
   const api = new MockApiClient();
 
   it('is loading when initially rendering', function() {
-    const wrapper = shallow(<IssueDiff baseIssueId="base" targetIssueId="target" />);
+    const wrapper = shallow(
+      <IssueDiff
+        baseIssueId="base"
+        targetIssueId="target"
+        orgId="org-slug"
+        projectId="project-slug"
+      />
+    );
     expect(wrapper.find('SplitDiff')).toHaveLength(0);
     expect(wrapper).toMatchSnapshot();
   });
@@ -33,7 +40,13 @@ describe('IssueDiff', function() {
 
     // Need `mount` because of componentDidMount in <IssueDiff>
     const wrapper = mount(
-      <IssueDiff api={api} baseIssueId="base" targetIssueId="target" />,
+      <IssueDiff
+        api={api}
+        baseIssueId="base"
+        targetIssueId="target"
+        orgId="org-slug"
+        projectId="project-slug"
+      />,
       routerContext
     );
 
@@ -61,7 +74,13 @@ describe('IssueDiff', function() {
 
     // Need `mount` because of componentDidMount in <IssueDiff>
     const wrapper = mount(
-      <IssueDiff api={api} baseIssueId="base" targetIssueId="target" />,
+      <IssueDiff
+        api={api}
+        baseIssueId="base"
+        targetIssueId="target"
+        orgId="org-slug"
+        projectId="project-slug"
+      />,
       routerContext
     );
 

tests/js/spec/views/groupDetails/__snapshots__/groupMergedView.spec.jsx.snap

@@ -217,6 +217,8 @@ exports[`Issues -> Merged View renders with mocked data 1`] = `
     }
     onToggleCollapse={[Function]}
     onUnmerge={[Function]}
+    orgId="orgId"
+    projectId="projectId"
   />
 </div>
 `;