feat(events-v2) Make tag values interactive in event modal

Upon clicking tag values should update dismiss the modal and update the
current search query with the key/value.

Refs SEN-648

Author: markstory

src/sentry/static/sentry/app/views/organizationEventsV2/eventDetails.jsx

@@ -14,6 +14,7 @@ class EventDetails extends AsyncComponent {
   static propTypes = {
     params: PropTypes.object,
     eventSlug: PropTypes.string.isRequired,
+    onTagSelect: PropTypes.func.isRequired,
   };
 
   getEndpoints() {

src/sentry/static/sentry/app/views/organizationEventsV2/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import DocumentTitle from 'react-document-title';
 import PropTypes from 'prop-types';
+import {browserHistory} from 'react-router';
 
 import {t} from 'app/locale';
 import SentryTypes from 'app/sentryTypes';
@@ -23,6 +24,25 @@ export default class OrganizationEventsV2 extends React.Component {
     location: PropTypes.object,
   };
 
+  // Called by the event modal tag table when a tag value is clicked.
+  handleTagSelect = tag => {
+    const {location} = this.props;
+    const query = {...location.query};
+    // Add tag key/value to search
+    if (query.query) {
+      query.query += ` ${tag.key}:"${tag.value}"`;
+    } else {
+      query.query = `${tag.key}:"${tag.value}"`;
+    }
+    // Remove the event slug so the user sees new search results.
+    delete query.eventSlug;
+
+    browserHistory.push({
+      pathname: location.pathname,
+      query,
+    });
+  };
+
   renderTabs() {
     const {organization} = this.props;
     const currentView = getCurrentView(this.props.location.query.view);
@@ -71,6 +91,7 @@ export default class OrganizationEventsV2 extends React.Component {
                 orgId={organization.slug}
                 params={this.props.params}
                 eventSlug={eventSlug}
+                onTagSelect={this.handleTagSelect}
               />
             )}
           </PageContent>

src/sentry/static/sentry/app/views/organizationEventsV2/tagsTable.jsx

@@ -5,6 +5,13 @@ import {t} from 'app/locale';
 import space from 'app/styles/space';
 
 const TagsTable = props => {
+  const handleSelect = tag => {
+    return event => {
+      event.preventDefault();
+      props.onTagSelect(tag);
+    };
+  };
+
   return (
     <div>
       <TagHeading>{t('Tags')}</TagHeading>
@@ -13,7 +20,11 @@ const TagsTable = props => {
           {props.tags.map(tag => (
             <StyledTr key={tag.key}>
               <TagKey>{tag.key}</TagKey>
-              <TagValue>{tag.value}</TagValue>
+              <TagValue>
+                <a href="#" onClick={handleSelect(tag)}>
+                  {tag.value}
+                </a>
+              </TagValue>
             </StyledTr>
           ))}
         </tbody>
@@ -23,6 +34,7 @@ const TagsTable = props => {
 };
 TagsTable.propTypes = {
   tags: PropTypes.array.isRequired,
+  onTagSelect: PropTypes.func.isRequired,
 };
 
 const TagHeading = styled('h5')`

tests/js/spec/views/organizationEventsV2/index.spec.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {mount} from 'enzyme';
+import {browserHistory} from 'react-router';
 
 import OrganizationEventsV2 from 'app/views/organizationEventsV2';
 
@@ -18,6 +19,7 @@ describe('OrganizationEventsV2', function() {
     });
     MockApiClient.addMockResponse({
       url: '/projects/org-slug/project-slug/events/deadbeef/',
+      method: 'GET',
       body: {
         id: '1234',
         size: 1200,
@@ -89,4 +91,65 @@ describe('OrganizationEventsV2', function() {
     const modal = wrapper.find('EventDetails');
     expect(modal).toHaveLength(1);
   });
+
+  it('navigates when tag values are clicked', async function() {
+    const organization = TestStubs.Organization({projects: [TestStubs.Project()]});
+    const wrapper = mount(
+      <OrganizationEventsV2
+        organization={organization}
+        location={{
+          pathname: '/organizations/org-slug/events/',
+          query: {eventSlug: 'project-slug:deadbeef'},
+        }}
+        params={{orgId: organization.slug}}
+      />,
+      TestStubs.routerContext()
+    );
+    await tick();
+    await wrapper.update();
+
+    const tagValue = wrapper.find('EventDetails TagsTable TagValue a');
+    expect(tagValue).toHaveLength(1);
+
+    tagValue.simulate('click');
+    expect(browserHistory.push).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pathname: '/organizations/org-slug/events/',
+        query: {query: 'browser:"Firefox"'},
+      })
+    );
+  });
+
+  it('appends tag value to existing query when clicked', async function() {
+    const organization = TestStubs.Organization({projects: [TestStubs.Project()]});
+    const wrapper = mount(
+      <OrganizationEventsV2
+        organization={organization}
+        location={{
+          pathname: '/organizations/org-slug/events/',
+          query: {
+            query: 'Dumpster',
+            eventSlug: 'project-slug:deadbeef',
+          },
+        }}
+        params={{orgId: organization.slug}}
+      />,
+      TestStubs.routerContext()
+    );
+    await tick();
+    await wrapper.update();
+
+    const tagValue = wrapper.find('EventDetails TagsTable TagValue a');
+    expect(tagValue).toHaveLength(1);
+
+    tagValue.simulate('click');
+    // Should remove eventSlug and append new tag value causing
+    // the view to re-render
+    expect(browserHistory.push).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pathname: '/organizations/org-slug/events/',
+        query: {query: 'Dumpster browser:"Firefox"'},
+      })
+    );
+  });
 });