Generate proper link URLs for tag values in the event modal

Author: markstory

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

@@ -14,7 +14,6 @@ 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,7 +1,6 @@
 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';
@@ -21,26 +20,7 @@ import {getCurrentView} from './utils';
 export default class OrganizationEventsV2 extends React.Component {
   static propTypes = {
     organization: SentryTypes.Organization.isRequired,
-    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,
-    });
+    location: PropTypes.object.isRequired,
   };
 
   renderTabs() {
@@ -91,7 +71,6 @@ 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

@@ -1,17 +1,14 @@
 import React from 'react';
 import styled from 'react-emotion';
 import PropTypes from 'prop-types';
+import {withRouter} from 'react-router';
+
+import Link from 'app/components/links/link';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
+import {eventTagSearchUrl} from './utils';
 
 const TagsTable = props => {
-  const handleSelect = tag => {
-    return event => {
-      event.preventDefault();
-      props.onTagSelect(tag);
-    };
-  };
-
   return (
     <div>
       <TagHeading>{t('Tags')}</TagHeading>
@@ -21,9 +18,7 @@ const TagsTable = props => {
             <StyledTr key={tag.key}>
               <TagKey>{tag.key}</TagKey>
               <TagValue>
-                <a href="#" onClick={handleSelect(tag)}>
-                  {tag.value}
-                </a>
+                <Link to={eventTagSearchUrl(tag, props.location)}>{tag.value}</Link>
               </TagValue>
             </StyledTr>
           ))}
@@ -34,7 +29,7 @@ const TagsTable = props => {
 };
 TagsTable.propTypes = {
   tags: PropTypes.array.isRequired,
-  onTagSelect: PropTypes.func.isRequired,
+  location: PropTypes.object,
 };
 
 const TagHeading = styled('h5')`
@@ -60,4 +55,4 @@ const TagValue = styled(TagKey)`
   text-align: right;
 `;
 
-export default TagsTable;
+export default withRouter(TagsTable);

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

@@ -32,3 +32,28 @@ export function getQuery(view) {
 
   return data;
 }
+
+/**
+ * Return a location object for the current pathname
+ * with a query string reflected the provided tag.
+ *
+ * @param {Object} tag containing key/value properties
+ * @param {Object} browser location object.
+ * @return {Object} router target
+ */
+export function eventTagSearchUrl(tag, location) {
+  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;
+
+  return {
+    pathname: location.pathname,
+    query,
+  };
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {mount} from 'enzyme';
-import {browserHistory} from 'react-router';
+import {initializeOrg} from 'app-test/helpers/initializeOrg';
 
 import OrganizationEventsV2 from 'app/views/organizationEventsV2';
 
@@ -93,63 +93,71 @@ describe('OrganizationEventsV2', function() {
   });
 
   it('navigates when tag values are clicked', async function() {
-    const organization = TestStubs.Organization({projects: [TestStubs.Project()]});
+    const {organization, routerContext} = initializeOrg({
+      organization: TestStubs.Organization({projects: [TestStubs.Project()]}),
+      router: {
+        location: {
+          pathname: '/organizations/org-slug/events/',
+          query: {
+            eventSlug: 'project-slug:deadbeef',
+          },
+        },
+      },
+    });
     const wrapper = mount(
       <OrganizationEventsV2
         organization={organization}
-        location={{
-          pathname: '/organizations/org-slug/events/',
-          query: {eventSlug: 'project-slug:deadbeef'},
-        }}
         params={{orgId: organization.slug}}
+        location={routerContext.context.location}
       />,
-      TestStubs.routerContext()
+      routerContext
     );
     await tick();
     await wrapper.update();
 
-    const tagValue = wrapper.find('EventDetails TagsTable TagValue a');
-    expect(tagValue).toHaveLength(1);
+    // Get the first link as we wrap react-router's link
+    const tagLink = wrapper.find('EventDetails TagsTable TagValue Link').first();
 
-    tagValue.simulate('click');
-    expect(browserHistory.push).toHaveBeenCalledWith(
-      expect.objectContaining({
-        pathname: '/organizations/org-slug/events/',
-        query: {query: 'browser:"Firefox"'},
-      })
-    );
+    // Should remove eventSlug and append new tag value causing
+    // the view to re-render
+    expect(tagLink.props().to).toEqual({
+      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={{
+    const {organization, routerContext} = initializeOrg({
+      organization: TestStubs.Organization({projects: [TestStubs.Project()]}),
+      router: {
+        location: {
           pathname: '/organizations/org-slug/events/',
           query: {
             query: 'Dumpster',
             eventSlug: 'project-slug:deadbeef',
           },
-        }}
+        },
+      },
+    });
+    const wrapper = mount(
+      <OrganizationEventsV2
+        organization={organization}
         params={{orgId: organization.slug}}
+        location={routerContext.context.location}
       />,
-      TestStubs.routerContext()
+      routerContext
     );
     await tick();
     await wrapper.update();
 
-    const tagValue = wrapper.find('EventDetails TagsTable TagValue a');
-    expect(tagValue).toHaveLength(1);
+    // Get the first link as we wrap react-router's link
+    const tagLink = wrapper.find('EventDetails TagsTable TagValue Link').first();
 
-    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"'},
-      })
-    );
+    expect(tagLink.props().to).toEqual({
+      pathname: '/organizations/org-slug/events/',
+      query: {query: 'Dumpster browser:"Firefox"'},
+    });
   });
 });

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

@@ -1,4 +1,8 @@
-import {getCurrentView, getQuery} from 'app/views/organizationEventsV2/utils';
+import {
+  getCurrentView,
+  getQuery,
+  eventTagSearchUrl,
+} from 'app/views/organizationEventsV2/utils';
 import {ALL_VIEWS} from 'app/views/organizationEventsV2/data';
 
 describe('getCurrentView()', function() {
@@ -38,3 +42,36 @@ describe('getQuery()', function() {
     ]);
   });
 });
+
+describe('eventTagSearchUrl()', function() {
+  let location;
+  beforeEach(function() {
+    location = {
+      pathname: '/organization/org-slug/events/',
+      query: {},
+    };
+  });
+
+  it('adds a query', function() {
+    expect(eventTagSearchUrl({key: 'browser', value: 'firefox'}, location)).toEqual({
+      pathname: location.pathname,
+      query: {query: 'browser:"firefox"'},
+    });
+  });
+
+  it('removes eventSlug', function() {
+    location.query.eventSlug = 'project-slug:deadbeef';
+    expect(eventTagSearchUrl({key: 'browser', value: 'firefox'}, location)).toEqual({
+      pathname: location.pathname,
+      query: {query: 'browser:"firefox"'},
+    });
+  });
+
+  it('appends to an existing query', function() {
+    location.query.query = 'failure';
+    expect(eventTagSearchUrl({key: 'browser', value: 'firefox'}, location)).toEqual({
+      pathname: location.pathname,
+      query: {query: 'failure browser:"firefox"'},
+    });
+  });
+});