feat(app-platform): Open in stacktrace button

src/sentry/mediators/sentry_app_components/preparer.py

@@ -1,5 +1,6 @@
 from __future__ import absolute_import
 
+from six.moves.urllib.parse import urlparse, urlencode, urlunparse
 from sentry.mediators import Mediator, Param
 from sentry.mediators.external_requests import SelectRequester
 
@@ -12,6 +13,23 @@ class Preparer(Mediator):
     def call(self):
         if self.component.type == 'issue-link':
             return self._prepare_issue_link()
+        if self.component.type == 'stacktrace-link':
+            return self._prepare_stacktrace_link()
+
+    def _prepare_stacktrace_link(self):
+        schema = self.component.schema
+        uri = schema.get('uri')
+
+        urlparts = list(urlparse(self.install.sentry_app.webhook_url))
+        urlparts[2] = uri
+
+        query = {'installationId': self.install.uuid}
+
+        if self.project:
+            query['projectSlug'] = self.project.slug
+
+        urlparts[4] = urlencode(query)
+        schema.update({'url': urlunparse(urlparts)})
 
     def _prepare_issue_link(self):
         schema = self.component.schema.copy()

src/sentry/static/sentry/app/components/events/interfaces/contextLine.jsx

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {defined} from 'app/utils';
+import OpenInButton from 'app/components/events/interfaces/openInButton';
 
 const ContextLine = function(props) {
-  const {line, isActive} = props;
+  const {line, isActive, filename} = props;
   let liClassName = 'expandable';
   if (isActive) {
     liClassName += ' active';
@@ -19,13 +20,15 @@ const ContextLine = function(props) {
     <li className={liClassName} key={line[0]}>
       <span className="ws">{lineWs}</span>
       <span className="contextline">{lineCode}</span>
+      {isActive && <OpenInButton filename={filename} lineNo={line[0]} />}
     </li>
   );
 };
 
 ContextLine.propTypes = {
   line: PropTypes.array.isRequired,
   isActive: PropTypes.bool,
+  filename: PropTypes.string,
 };
 
 export default ContextLine;

src/sentry/static/sentry/app/components/events/interfaces/frame.jsx

@@ -261,7 +261,12 @@ const Frame = createReactClass({
           {data.context &&
             contextLines.map((line, index) => {
               return (
-                <ContextLine key={index} line={line} isActive={data.lineNo === line[0]} />
+                <ContextLine
+                  key={index}
+                  line={line}
+                  isActive={data.lineNo === line[0]}
+                  filename={data.filename}
+                />
               );
             })}
 

src/sentry/static/sentry/app/components/events/interfaces/openInButton.jsx

@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import SentryTypes from 'app/sentryTypes';
+import Button from 'app/components/button';
+import qs from 'query-string';
+import styled from 'react-emotion';
+import {t} from 'app/locale';
+
+import withApi from 'app/utils/withApi';
+import withLatestContext from 'app/utils/withLatestContext';
+
+class OpenInButton extends React.Component {
+  static propTypes = {
+    api: PropTypes.object,
+    organization: SentryTypes.Organization,
+    project: SentryTypes.Project,
+    lineNo: PropTypes.number,
+    filename: PropTypes.string,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      error: false,
+      components: [],
+    };
+  }
+
+  componentWillMount() {
+    this.fetchIssueLinkComponents();
+  }
+
+  fetchIssueLinkComponents() {
+    const {api, organization, project} = this.props;
+    api
+      .requestPromise(
+        `/organizations/${organization.slug}/sentry-app-components/?filter=stacktrace-link&projectId=${project.id}`
+      )
+      .then(data => {
+        if (data.length) {
+          this.setState({components: data});
+        }
+      })
+      .catch(error => {
+        return;
+      });
+  }
+
+  getUrl() {
+    const {components} = this.state;
+    const {filename, lineNo} = this.props;
+
+    const queryParams = {
+      lineNo,
+      filename,
+    };
+    const query = qs.stringify(queryParams);
+    return components[0].schema.url + '&' + query;
+  }
+
+  render() {
+    const {components} = this.state;
+    if (!components.length) {
+      return null;
+    }
+
+    const url = this.getUrl();
+    return (
+      <StyledButtonContainer>
+        <StyledButton href={url} size="small" priority="primary">
+          {t(`Debug In ${components[0].sentryApp.name}`)}
+        </StyledButton>
+      </StyledButtonContainer>
+    );
+  }
+}
+
+export {OpenInButton};
+const OpenInButtonComponent = withLatestContext(OpenInButton);
+export default withApi(OpenInButtonComponent);
+
+const StyledButtonContainer = styled('div')`
+  height: 0;
+  position: relative;
+`;
+
+const StyledButton = styled(Button)`
+  position: absolute;
+  z-index: ${p => p.theme.zIndex.header};
+  height: 36px;
+  line-height: 1.5;
+  padding: 0px 5px;
+  top: -31px;
+  right: 30px;
+`;

src/sentry/static/sentry/less/group-detail.less

@@ -1669,7 +1669,6 @@ div.traceback > ul {
 
   .expandable {
     height: 0;
-    overflow: hidden;
     position: relative;
 
     .icon-plus {
@@ -1686,6 +1685,7 @@ div.traceback > ul {
 
     .ws {
       display: none;
+      overflow: hidden;
     }
 
     &:hover {
@@ -1697,12 +1697,12 @@ div.traceback > ul {
 
   .expanded {
     .expandable {
-      overflow: none;
       height: auto;
     }
 
     .ws {
       display: inline;
+      overflow: none;
     }
   }
 

tests/js/spec/components/events/interfaces/openInButton.spec.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import {Client} from 'app/api';
+import {mount} from 'enzyme';
+import qs from 'query-string';
+
+import {OpenInButton} from 'app/components/events/interfaces/openInButton';
+
+describe('OpenInButton', function() {
+  const api = new Client();
+  const filename = '/sentry/app.py';
+  const lineNo = 123;
+  const org = TestStubs.Organization();
+  const project = TestStubs.Project();
+  const install = TestStubs.SentryAppInstallation();
+
+  beforeEach(() => {
+    Client.clearMockResponses();
+  });
+
+  describe('with stacktrace-link component', function() {
+    it('renders button', async function() {
+      Client.addMockResponse({
+        method: 'GET',
+        url: `/organizations/${org.slug}/sentry-app-components/?filter=stacktrace-link&projectId=${project.id}`,
+        body: [
+          {
+            uuid: 'ed517da4-a324-44c0-aeea-1894cd9923fb',
+            type: 'stacktrace-link',
+            schema: {
+              uri: '/redirection',
+              url: `http://localhost:5000/redirection?installationId=${install.uuid}&projectSlug=${project.slug}`,
+            },
+            sentryApp: {
+              uuid: 'b468fed3-afba-4917-80d6-bdac99c1ec05',
+              slug: 'foo',
+              name: 'Foo',
+            },
+          },
+        ],
+      });
+      const wrapper = mount(
+        <OpenInButton
+          api={api}
+          organization={org}
+          project={project}
+          filename={filename}
+          lineNo={lineNo}
+        />,
+        TestStubs.routerContext()
+      );
+      await tick();
+      wrapper.update();
+      expect(wrapper.state().components[0].schema.url).toEqual(
+        `http://localhost:5000/redirection?installationId=${install.uuid}&projectSlug=${project.slug}`
+      );
+      const base = `http://localhost:5000/redirection?installationId=${install.uuid}&projectSlug=${project.slug}`;
+      const queryParams = {
+        lineNo,
+        filename,
+      };
+      const query = qs.stringify(queryParams);
+      expect(wrapper.find('Button').prop('href')).toEqual(base + '&' + query);
+      expect(wrapper.find('Button').text()).toEqual('Debug In Foo');
+    });
+  });
+
+  describe('without stacktrace-link component', function() {
+    it('renders button', async function() {
+      Client.addMockResponse({
+        method: 'GET',
+        url: `/organizations/${org.slug}/sentry-app-components/?filter=stacktrace-link&projectId=${project.id}`,
+        body: [],
+      });
+      const wrapper = mount(
+        <OpenInButton
+          api={api}
+          organization={org}
+          project={project}
+          filename={filename}
+          lineNo={lineNo}
+        />,
+        TestStubs.routerContext()
+      );
+      await tick();
+      wrapper.update();
+      expect(wrapper.state().components).toEqual([]);
+      expect(wrapper.find('Button').exists()).toEqual(false);
+    });
+  });
+});

tests/sentry/mediators/sentry_app_components/test_preparer.py

@@ -87,3 +87,43 @@ def test_prepares_components_requiring_requests(self, run):
             project=self.project,
             uri='/sentry/baz',
         ) in run.mock_calls
+
+
+class TestPreparerStacktraceLink(TestCase):
+    def setUp(self):
+        super(TestPreparerStacktraceLink, self).setUp()
+
+        self.sentry_app = self.create_sentry_app(
+            schema={
+                'elements': [{
+                    'type': 'stacktrace-link',
+                    'uri': '/redirection',
+                }]
+            }
+        )
+
+        self.install = self.create_sentry_app_installation(
+            slug=self.sentry_app.slug,
+        )
+
+        self.component = self.sentry_app.components.first()
+        self.project = self.install.organization.project_set.first()
+
+        self.preparer = Preparer(
+            component=self.component,
+            install=self.install,
+            project=self.project,
+        )
+
+    def test_prepares_components_url(self):
+        self.component.schema = {
+            'uri': '/redirection'
+        }
+
+        self.preparer.call()
+
+        assert self.component.schema['url'] == \
+            u'https://example.com/redirection?installationId={}&projectSlug={}'.format(
+                self.install.uuid,
+                self.project.slug,
+        )