ref(app-platform): Add permissions to SentryAppDetails modal (#14417)

* ref(app-platform): Add permissions to SentryAppDetails modal

src/sentry/static/sentry/app/actionCreators/modal.jsx

@@ -156,16 +156,6 @@ export function openHelpSearchModal() {
     });
 }
 
-export function openSentryAppPermissionModal(options = {}) {
-  import(/* webpackChunkName: "SentryAppPermissionsModal" */ 'app/components/modals/sentryAppPermissionsModal')
-    .then(mod => mod.default)
-    .then(Modal => {
-      openModal(deps => <Modal {...deps} {...options} />, {
-        modalClassName: 'sentry-app-permissions',
-      });
-    });
-}
-
 export function openSentryAppDetailsModal(options = {}) {
   import(/* webpackChunkName: "SentryAppDetailsModal" */ 'app/components/modals/sentryAppDetailsModal')
     .then(mod => mod.default)

src/sentry/static/sentry/app/components/modals/sentryAppDetailsModal.jsx

@@ -15,6 +15,8 @@ import HookStore from 'app/stores/hookStore';
 import marked, {singleLineRenderer} from 'app/utils/marked';
 import InlineSvg from 'app/components/inlineSvg';
 import Tag from 'app/views/settings/components/tag';
+import ConsolidatedScopes from 'app/utils/consolidatedScopes';
+import CircleIndicator from 'app/components/circleIndicator';
 
 const defaultFeatureGateComponents = {
   IntegrationFeatures: p =>
@@ -54,8 +56,56 @@ export default class SentryAppDetailsModal extends AsyncComponent {
     });
   }
 
+  get permissions() {
+    return new ConsolidatedScopes(this.props.sentryApp.scopes).toPermissions();
+  }
+
+  onInstall() {
+    const {onInstall, closeModal} = this.props;
+    onInstall();
+    closeModal();
+  }
+
+  renderPermissions() {
+    const permissions = this.permissions;
+    return (
+      <React.Fragment>
+        <Title>Permissions</Title>
+        {permissions.read.length > 0 && (
+          <Permission>
+            <Indicator />
+            <Text key="read">
+              <strong>{t('Read')}</strong>
+              {t(' access to %s resources', permissions.read.join(', '))}
+            </Text>
+          </Permission>
+        )}
+        {permissions.write.length > 0 && (
+          <Permission>
+            <Indicator />
+            <Text key="write">
+              <strong>{t('Read')}</strong>
+              {t(' and ')}
+              <strong>{t('write')}</strong>
+              {t(' access to %s resources', permissions.write.join(', '))}
+            </Text>
+          </Permission>
+        )}
+        {permissions.admin.length > 0 && (
+          <Permission>
+            <Indicator />
+            <Text key="admin">
+              <strong>{t('Admin')}</strong>
+              {t(' access to %s resources', permissions.admin.join(', '))}
+            </Text>
+          </Permission>
+        )}
+      </React.Fragment>
+    );
+  }
+
   renderBody() {
-    const {sentryApp, closeModal, onInstall, isInstalled, organization} = this.props;
+    const {sentryApp, closeModal, isInstalled, organization} = this.props;
     const {featureData} = this.state;
     // Prepare the features list
     const features = (featureData || []).map(f => ({
@@ -86,34 +136,37 @@ export default class SentryAppDetailsModal extends AsyncComponent {
         <Description dangerouslySetInnerHTML={{__html: marked(overview)}} />
         <FeatureList {...featureProps} provider={{...sentryApp, key: sentryApp.slug}} />
 
-        <Metadata>
-          <Author flex={1}>{t('By %s', sentryApp.author)}</Author>
-        </Metadata>
-
         <IntegrationFeatures {...featureProps}>
           {({disabled, disabledReason}) => (
-            <div className="modal-footer">
-              {disabled && <DisabledNotice reason={disabledReason} />}
-              <Button size="small" onClick={closeModal}>
-                {t('Cancel')}
-              </Button>
-
-              <Access organization={organization} access={['org:integrations']}>
-                {({hasAccess}) =>
-                  hasAccess && (
-                    <Button
-                      size="small"
-                      priority="primary"
-                      disabled={isInstalled || disabled}
-                      onClick={onInstall}
-                      style={{marginLeft: space(1)}}
-                    >
-                      {t('Install')}
-                    </Button>
-                  )
-                }
-              </Access>
-            </div>
+            <React.Fragment>
+              {!disabled && this.renderPermissions()}
+              <Footer>
+                <Author>{t('Authored By %s', sentryApp.author)}</Author>
+                <div>
+                  {disabled && <DisabledNotice reason={disabledReason} />}
+                  <Button size="small" onClick={closeModal}>
+                    {t('Cancel')}
+                  </Button>
+
+                  <Access organization={organization} access={['org:integrations']}>
+                    {({hasAccess}) =>
+                      hasAccess && (
+                        <Button
+                          size="small"
+                          priority="primary"
+                          disabled={isInstalled || disabled}
+                          onClick={() => this.onInstall()}
+                          style={{marginLeft: space(1)}}
+                          data-test-id="install"
+                        >
+                          {t('Accept & Install')}
+                        </Button>
+                      )
+                    }
+                  </Access>
+                </div>
+              </Footer>
+            </React.Fragment>
           )}
         </IntegrationFeatures>
       </React.Fragment>
@@ -137,15 +190,6 @@ const Description = styled('div')`
   }
 `;
 
-const Metadata = styled(Flex)`
-  font-size: 0.9em;
-  margin-bottom: ${space(2)};
-
-  a {
-    margin-left: ${space(1)};
-  }
-`;
-
 const Author = styled(Box)`
   color: ${p => p.theme.gray2};
 `;
@@ -165,3 +209,29 @@ const StyledTag = styled(Tag)`
     margin-left: ${space(0.5)};
   }
 `;
+
+const Text = styled('p')`
+  margin: 0px 6px;
+`;
+
+const Permission = styled('div')`
+  display: flex;
+`;
+
+const Footer = styled('div')`
+  display: flex;
+  padding: 20px 30px;
+  border-top: 1px solid #e2dee6;
+  margin: 20px -30px -30px;
+  justify-content: space-between;
+`;
+
+const Title = styled('p')`
+  margin-bottom: ${space(1)};
+  font-weight: bold;
+`;
+
+const Indicator = styled(p => <CircleIndicator size={7} {...p} />)`
+  margin-top: 7px;
+  color: ${p => p.theme.success};
+`;

src/sentry/static/sentry/app/components/modals/sentryAppPermissionsModal.jsx

@@ -1,115 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import Button from 'app/components/button';
-import {t} from 'app/locale';
-import {Panel, PanelItem} from 'app/components/panels';
-import SentryTypes from 'app/sentryTypes';
-import space from 'app/styles/space';
-import styled from 'react-emotion';
-import ConsolidatedScopes from 'app/utils/consolidatedScopes';
-
-class SentryAppPermissionsModal extends React.Component {
-  static propTypes = {
-    closeModal: PropTypes.func.isRequired,
-    onInstall: PropTypes.func.isRequired,
-    Body: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-    app: SentryTypes.SentryApplication.isRequired,
-    orgId: PropTypes.string.isRequired,
-  };
-
-  onInstall() {
-    const {onInstall, closeModal} = this.props;
-    onInstall();
-    closeModal();
-  }
-
-  get permissions() {
-    return new ConsolidatedScopes(this.props.app.scopes).toPermissions();
-  }
-
-  renderPermissions() {
-    const permissions = this.permissions;
-    return (
-      <React.Fragment>
-        {permissions.read.length > 0 && (
-          <PanelItem key="read">
-            <p>
-              <strong>{t('Read')}</strong>
-              {t(` access to ${permissions.read.join(', ')}`)}
-            </p>
-          </PanelItem>
-        )}
-        {permissions.write.length > 0 && (
-          <PanelItem key="write">
-            <p>
-              <strong>{t('Read')}</strong>
-              {t(' and ')}
-              <strong>{t('write')}</strong>
-              {t(` access to ${permissions.write.join(', ')}`)}
-            </p>
-          </PanelItem>
-        )}
-        {permissions.admin.length > 0 && (
-          <PanelItem key="admin">
-            <p>
-              <strong>{t('Admin')}</strong>
-              {t(` access to ${permissions.admin.join(', ')}`)}
-            </p>
-          </PanelItem>
-        )}
-      </React.Fragment>
-    );
-  }
-
-  render() {
-    const {closeModal, app, orgId, Header, Body} = this.props;
-    return (
-      <React.Fragment>
-        <Header closeButton onHide={closeModal}>
-          {t(`Install ${app.name}`)}
-        </Header>
-        <Body>
-          <Title>
-            {t('Install on your ')}
-            <strong>{orgId}</strong>
-            {t(' organization with the following permissions:')}
-          </Title>
-          <Panel>{this.renderPermissions()}</Panel>
-        </Body>
-        <div className="modal-footer">
-          {app.redirectUrl && (
-            <RedirectionInfo>
-              {t(
-                `After installation you'll be redirected to the ${
-                  app.name
-                } service to finish setup.`
-              )}
-            </RedirectionInfo>
-          )}
-          <StyledButton priority="success" onClick={() => this.onInstall()}>
-            {t('Install')}
-          </StyledButton>
-          <StyledButton onClick={closeModal}>{t('Cancel')}</StyledButton>
-        </div>
-      </React.Fragment>
-    );
-  }
-}
-
-export default SentryAppPermissionsModal;
-
-const StyledButton = styled(Button)`
-  margin-left: ${space(1)};
-`;
-
-const Title = styled('p')`
-  color: ${p => p.theme.gray5};
-`;
-
-const RedirectionInfo = styled('div')`
-  padding-right: 5px;
-  font-size: 12px;
-  color: ${p => p.theme.gray2};
-`;

src/sentry/static/sentry/app/views/organizationIntegrations/sentryAppInstallations.jsx

@@ -11,7 +11,6 @@ import {
   uninstallSentryApp,
 } from 'app/actionCreators/sentryAppInstallations';
 import {addQueryParamsToExistingUrl} from 'app/utils/queryString';
-import {openSentryAppPermissionModal} from 'app/actionCreators/modal';
 
 class SentryAppInstallations extends React.Component {
   static propTypes = {
@@ -73,9 +72,7 @@ class SentryAppInstallations extends React.Component {
   };
 
   openModal = app => {
-    const {organization} = this.props;
-    const onInstall = () => this.install(app);
-    openSentryAppPermissionModal({app, onInstall, orgId: organization.slug});
+    this.install(app);
   };
 
   get installsByApp() {

tests/acceptance/test_organization_sentry_app.py

@@ -51,10 +51,7 @@ class OrganizationSentryAppAcceptanceTestCase(AcceptanceTestCase):
 
         provider_element.install_button.click()
 
-        # need to press install twice
-        install_selecter = '.modal-dialog [aria-label="Install"]'
-        self.browser.wait_until(install_selecter)
-        self.browser.click(install_selecter)
+        install_selecter = '.modal-dialog [aria-label="Accept & Install"]'
         self.browser.wait_until(install_selecter)
         self.browser.click(install_selecter)
 

tests/js/spec/components/modals/__snapshots__/sentryAppPermissionsModal.spec.jsx.snap

@@ -1,477 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SentryAppPermissionsModal installs the application 1`] = `
-<SentryAppPermissionsModal
-  Body={[Function]}
-  Header={[Function]}
-  app={
-    Object {
-      "author": "Sentry",
-      "clientId": "client-id",
-      "clientSecret": "client-secret",
-      "events": Array [],
-      "isAlertable": false,
-      "name": "Sample App",
-      "overview": "This is an app.",
-      "redirectUrl": "https://example/com/setup",
-      "schema": Object {},
-      "scopes": Array [
-        "project:read",
-      ],
-      "slug": "sample-app",
-      "status": "unpublished",
-      "uuid": "123456123456123456123456",
-      "webhookUrl": "https://example.com/webhook",
-    }
-  }
-  closeModal={[MockFunction]}
-  onInstall={[MockFunction]}
-  orgId="org-slug"
->
-  <ModalHeader
-    bsClass="modal-header"
-    closeButton={true}
-    closeLabel="Close"
-    onHide={[MockFunction]}
-  >
-    <div
-      className="modal-header"
-    >
-      <CloseButton
-        label="Close"
-        onClick={[MockFunction]}
-      >
-        <button
-          className="close"
-          onClick={[MockFunction]}
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-          >
-            ×
-          </span>
-          <span
-            className="sr-only"
-          >
-            Close
-          </span>
-        </button>
-      </CloseButton>
-      Install Sample App
-    </div>
-  </ModalHeader>
-  <ModalBody
-    bsClass="modal-body"
-    componentClass="div"
-  >
-    <div
-      className="modal-body"
-    >
-      <Title>
-        <p
-          className="css-dvcemm-Title ey7jt0i1"
-        >
-          Install on your 
-          <strong>
-            org-slug
-          </strong>
-           organization with the following permissions:
-        </p>
-      </Title>
-      <Panel>
-        <Component
-          className="css-10qfvek-Panel e119nu470"
-        >
-          <div
-            className="css-10qfvek-Panel e119nu470"
-          >
-            <PanelItem
-              key="read"
-              p={2}
-            >
-              <Base
-                className="css-125s2dx-PanelItem eo8n7lk0"
-                p={2}
-              >
-                <div
-                  className="css-125s2dx-PanelItem eo8n7lk0"
-                  is={null}
-                >
-                  <p>
-                    <strong>
-                      Read
-                    </strong>
-                     access to Project
-                  </p>
-                </div>
-              </Base>
-            </PanelItem>
-          </div>
-        </Component>
-      </Panel>
-    </div>
-  </ModalBody>
-  <div
-    className="modal-footer"
-  >
-    <RedirectionInfo>
-      <div
-        className="css-ysuc35-RedirectionInfo ey7jt0i2"
-      >
-        After installation you'll be redirected to the Sample App service to finish setup.
-      </div>
-    </RedirectionInfo>
-    <StyledButton
-      align="center"
-      disabled={false}
-      onClick={[Function]}
-      priority="success"
-    >
-      <Button
-        align="center"
-        className="css-159raph-StyledButton ey7jt0i0"
-        disabled={false}
-        onClick={[Function]}
-        priority="success"
-      >
-        <StyledButton
-          aria-disabled={false}
-          aria-label="Install"
-          className="css-159raph-StyledButton ey7jt0i0"
-          disabled={false}
-          onClick={[Function]}
-          priority="success"
-          role="button"
-        >
-          <ForwardRef
-            aria-disabled={false}
-            aria-label="Install"
-            className="ey7jt0i0 css-1tzz3wq-StyledButton-getColors-StyledButton edwq9my0"
-            disabled={false}
-            onClick={[Function]}
-            priority="success"
-            role="button"
-          >
-            <button
-              aria-disabled={false}
-              aria-label="Install"
-              className="ey7jt0i0 css-1tzz3wq-StyledButton-getColors-StyledButton edwq9my0"
-              onClick={[Function]}
-              role="button"
-            >
-              <ButtonLabel
-                align="center"
-                priority="success"
-              >
-                <Component
-                  align="center"
-                  className="css-oo1m2a-ButtonLabel edwq9my1"
-                  priority="success"
-                >
-                  <span
-                    className="css-oo1m2a-ButtonLabel edwq9my1"
-                  >
-                    Install
-                  </span>
-                </Component>
-              </ButtonLabel>
-            </button>
-          </ForwardRef>
-        </StyledButton>
-      </Button>
-    </StyledButton>
-    <StyledButton
-      align="center"
-      disabled={false}
-      onClick={[MockFunction]}
-    >
-      <Button
-        align="center"
-        className="css-159raph-StyledButton ey7jt0i0"
-        disabled={false}
-        onClick={[MockFunction]}
-      >
-        <StyledButton
-          aria-disabled={false}
-          aria-label="Cancel"
-          className="css-159raph-StyledButton ey7jt0i0"
-          disabled={false}
-          onClick={[Function]}
-          role="button"
-        >
-          <ForwardRef
-            aria-disabled={false}
-            aria-label="Cancel"
-            className="ey7jt0i0 css-1v01il8-StyledButton-getColors-StyledButton edwq9my0"
-            disabled={false}
-            onClick={[Function]}
-            role="button"
-          >
-            <button
-              aria-disabled={false}
-              aria-label="Cancel"
-              className="ey7jt0i0 css-1v01il8-StyledButton-getColors-StyledButton edwq9my0"
-              onClick={[Function]}
-              role="button"
-            >
-              <ButtonLabel
-                align="center"
-              >
-                <Component
-                  align="center"
-                  className="css-oo1m2a-ButtonLabel edwq9my1"
-                >
-                  <span
-                    className="css-oo1m2a-ButtonLabel edwq9my1"
-                  >
-                    Cancel
-                  </span>
-                </Component>
-              </ButtonLabel>
-            </button>
-          </ForwardRef>
-        </StyledButton>
-      </Button>
-    </StyledButton>
-  </div>
-</SentryAppPermissionsModal>
-`;
-
-exports[`SentryAppPermissionsModal renders permissions modal 1`] = `
-<SentryAppPermissionsModal
-  Body={[Function]}
-  Header={[Function]}
-  app={
-    Object {
-      "author": "Sentry",
-      "clientId": "client-id",
-      "clientSecret": "client-secret",
-      "events": Array [],
-      "isAlertable": false,
-      "name": "Sample App",
-      "overview": "This is an app.",
-      "redirectUrl": "https://example/com/setup",
-      "schema": Object {},
-      "scopes": Array [
-        "project:read",
-      ],
-      "slug": "sample-app",
-      "status": "unpublished",
-      "uuid": "123456123456123456123456",
-      "webhookUrl": "https://example.com/webhook",
-    }
-  }
-  closeModal={[MockFunction]}
-  onInstall={[MockFunction]}
-  orgId="org-slug"
->
-  <ModalHeader
-    bsClass="modal-header"
-    closeButton={true}
-    closeLabel="Close"
-    onHide={[MockFunction]}
-  >
-    <div
-      className="modal-header"
-    >
-      <CloseButton
-        label="Close"
-        onClick={[MockFunction]}
-      >
-        <button
-          className="close"
-          onClick={[MockFunction]}
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-          >
-            ×
-          </span>
-          <span
-            className="sr-only"
-          >
-            Close
-          </span>
-        </button>
-      </CloseButton>
-      Install Sample App
-    </div>
-  </ModalHeader>
-  <ModalBody
-    bsClass="modal-body"
-    componentClass="div"
-  >
-    <div
-      className="modal-body"
-    >
-      <Title>
-        <p
-          className="css-dvcemm-Title ey7jt0i1"
-        >
-          Install on your 
-          <strong>
-            org-slug
-          </strong>
-           organization with the following permissions:
-        </p>
-      </Title>
-      <Panel>
-        <Component
-          className="css-10qfvek-Panel e119nu470"
-        >
-          <div
-            className="css-10qfvek-Panel e119nu470"
-          >
-            <PanelItem
-              key="read"
-              p={2}
-            >
-              <Base
-                className="css-125s2dx-PanelItem eo8n7lk0"
-                p={2}
-              >
-                <div
-                  className="css-125s2dx-PanelItem eo8n7lk0"
-                  is={null}
-                >
-                  <p>
-                    <strong>
-                      Read
-                    </strong>
-                     access to Project
-                  </p>
-                </div>
-              </Base>
-            </PanelItem>
-          </div>
-        </Component>
-      </Panel>
-    </div>
-  </ModalBody>
-  <div
-    className="modal-footer"
-  >
-    <RedirectionInfo>
-      <div
-        className="css-ysuc35-RedirectionInfo ey7jt0i2"
-      >
-        After installation you'll be redirected to the Sample App service to finish setup.
-      </div>
-    </RedirectionInfo>
-    <StyledButton
-      align="center"
-      disabled={false}
-      onClick={[Function]}
-      priority="success"
-    >
-      <Button
-        align="center"
-        className="css-159raph-StyledButton ey7jt0i0"
-        disabled={false}
-        onClick={[Function]}
-        priority="success"
-      >
-        <StyledButton
-          aria-disabled={false}
-          aria-label="Install"
-          className="css-159raph-StyledButton ey7jt0i0"
-          disabled={false}
-          onClick={[Function]}
-          priority="success"
-          role="button"
-        >
-          <ForwardRef
-            aria-disabled={false}
-            aria-label="Install"
-            className="ey7jt0i0 css-1tzz3wq-StyledButton-getColors-StyledButton edwq9my0"
-            disabled={false}
-            onClick={[Function]}
-            priority="success"
-            role="button"
-          >
-            <button
-              aria-disabled={false}
-              aria-label="Install"
-              className="ey7jt0i0 css-1tzz3wq-StyledButton-getColors-StyledButton edwq9my0"
-              onClick={[Function]}
-              role="button"
-            >
-              <ButtonLabel
-                align="center"
-                priority="success"
-              >
-                <Component
-                  align="center"
-                  className="css-oo1m2a-ButtonLabel edwq9my1"
-                  priority="success"
-                >
-                  <span
-                    className="css-oo1m2a-ButtonLabel edwq9my1"
-                  >
-                    Install
-                  </span>
-                </Component>
-              </ButtonLabel>
-            </button>
-          </ForwardRef>
-        </StyledButton>
-      </Button>
-    </StyledButton>
-    <StyledButton
-      align="center"
-      disabled={false}
-      onClick={[MockFunction]}
-    >
-      <Button
-        align="center"
-        className="css-159raph-StyledButton ey7jt0i0"
-        disabled={false}
-        onClick={[MockFunction]}
-      >
-        <StyledButton
-          aria-disabled={false}
-          aria-label="Cancel"
-          className="css-159raph-StyledButton ey7jt0i0"
-          disabled={false}
-          onClick={[Function]}
-          role="button"
-        >
-          <ForwardRef
-            aria-disabled={false}
-            aria-label="Cancel"
-            className="ey7jt0i0 css-1v01il8-StyledButton-getColors-StyledButton edwq9my0"
-            disabled={false}
-            onClick={[Function]}
-            role="button"
-          >
-            <button
-              aria-disabled={false}
-              aria-label="Cancel"
-              className="ey7jt0i0 css-1v01il8-StyledButton-getColors-StyledButton edwq9my0"
-              onClick={[Function]}
-              role="button"
-            >
-              <ButtonLabel
-                align="center"
-              >
-                <Component
-                  align="center"
-                  className="css-oo1m2a-ButtonLabel edwq9my1"
-                >
-                  <span
-                    className="css-oo1m2a-ButtonLabel edwq9my1"
-                  >
-                    Cancel
-                  </span>
-                </Component>
-              </ButtonLabel>
-            </button>
-          </ForwardRef>
-        </StyledButton>
-      </Button>
-    </StyledButton>
-  </div>
-</SentryAppPermissionsModal>
-`;

tests/js/spec/components/modals/sentryAppDetailsModal.spec.jsx

@@ -10,6 +10,7 @@ describe('SentryAppDetailsModal', function() {
   let onInstall;
   let isInstalled;
   let closeModal;
+  const installButton = 'Button[data-test-id="install"]';
 
   function render() {
     return mount(
@@ -54,7 +55,7 @@ describe('SentryAppDetailsModal', function() {
   });
 
   it('installs the Integration when Install is clicked', () => {
-    wrapper.find({onClick: onInstall}).simulate('click');
+    wrapper.find(installButton).simulate('click');
     expect(onInstall).toHaveBeenCalled();
   });
 
@@ -65,7 +66,7 @@ describe('SentryAppDetailsModal', function() {
     });
 
     it('does not display the Install button', () => {
-      expect(wrapper.find({onClick: onInstall}).length).toBe(0);
+      expect(wrapper.find(installButton).length).toBe(0);
     });
   });
 
@@ -76,7 +77,7 @@ describe('SentryAppDetailsModal', function() {
     });
 
     it('disabled the Install button', () => {
-      expect(wrapper.find({onClick: onInstall}).prop('disabled')).toBe(true);
+      expect(wrapper.find(installButton).prop('disabled')).toBe(true);
     });
   });
 });

tests/js/spec/components/modals/sentryAppPermissionsModal.spec.jsx

@@ -1,125 +0,0 @@
-import {Modal} from 'react-bootstrap';
-import React from 'react';
-
-import {mount} from 'enzyme';
-import SentryAppPermissionsModal from 'app/components/modals/sentryAppPermissionsModal';
-
-describe('SentryAppPermissionsModal', function() {
-  const org = TestStubs.Organization();
-  const routerContext = TestStubs.routerContext();
-
-  it('renders permissions modal', function() {
-    const onInstall = jest.fn();
-    const onClose = jest.fn();
-    const sentryApp = TestStubs.SentryApp();
-
-    const wrapper = mount(
-      <SentryAppPermissionsModal
-        app={sentryApp}
-        closeModal={onClose}
-        orgId={org.slug}
-        onInstall={onInstall}
-        Header={Modal.Header}
-        Body={Modal.Body}
-      />,
-      routerContext
-    );
-
-    expect(wrapper).toMatchSnapshot();
-    wrapper
-      .find('Button')
-      .last()
-      .simulate('click');
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  describe('displays resources that the Sentry App has access to', function() {
-    it('matches resource with highest level', function() {
-      const onInstall = jest.fn();
-      const onClose = jest.fn();
-      const scopes = [
-        'project:read',
-        'project:write',
-        'member:read',
-        'team:write',
-        'team:admin',
-        'org:admin',
-      ];
-      const sentryApp = TestStubs.SentryApp({scopes});
-
-      const wrapper = mount(
-        <SentryAppPermissionsModal
-          app={sentryApp}
-          closeModal={onClose}
-          orgId={org.slug}
-          onInstall={onInstall}
-          Header={Modal.Header}
-          Body={Modal.Body}
-        />,
-        routerContext
-      );
-      expect(
-        wrapper
-          .find('PanelItem')
-          .first()
-          .text()
-      ).toEqual('Read access to Member');
-      expect(
-        wrapper
-          .find('PanelItem')
-          .at(1)
-          .text()
-      ).toEqual('Read and write access to Project');
-      expect(
-        wrapper
-          .find('PanelItem')
-          .at(2)
-          .text()
-      ).toEqual('Admin access to Team, Organization');
-    });
-
-    it('matches releases with admin', function() {
-      const onInstall = jest.fn();
-      const onClose = jest.fn();
-      const sentryApp = TestStubs.SentryApp({scopes: ['project:releases']});
-
-      const wrapper = mount(
-        <SentryAppPermissionsModal
-          app={sentryApp}
-          closeModal={onClose}
-          orgId={org.slug}
-          onInstall={onInstall}
-          Header={Modal.Header}
-          Body={Modal.Body}
-        />,
-        routerContext
-      );
-      expect(wrapper.find('PanelItem').text()).toEqual('Admin access to Release');
-    });
-  });
-
-  it('installs the application', function() {
-    const onInstall = jest.fn();
-    const onClose = jest.fn();
-    const sentryApp = TestStubs.SentryApp();
-
-    const wrapper = mount(
-      <SentryAppPermissionsModal
-        app={sentryApp}
-        closeModal={onClose}
-        orgId={org.slug}
-        onInstall={onInstall}
-        Header={Modal.Header}
-        Body={Modal.Body}
-      />,
-      routerContext
-    );
-
-    expect(wrapper).toMatchSnapshot();
-    wrapper
-      .find('Button')
-      .first()
-      .simulate('click');
-    expect(onInstall).toHaveBeenCalled();
-  });
-});

tests/js/spec/views/settings/organizationIntegrations/sentryAppInstallations.spec.jsx

@@ -2,14 +2,10 @@ import React from 'react';
 
 import {Client} from 'app/api';
 import {mount} from 'enzyme';
-import {
-  openSentryAppPermissionModal,
-  openSentryAppDetailsModal,
-} from 'app/actionCreators/modal';
+import {openSentryAppDetailsModal} from 'app/actionCreators/modal';
 import SentryAppInstallations from 'app/views/organizationIntegrations/sentryAppInstallations';
 
 jest.mock('app/actionCreators/modal', () => ({
-  openSentryAppPermissionModal: jest.fn(),
   openSentryAppDetailsModal: jest.fn(),
 }));
 
@@ -103,10 +99,6 @@ describe('Sentry App Installations', function() {
             isInstalled: false,
           })
         );
-        wrapper.instance().openModal(sentryApp);
-        expect(openSentryAppPermissionModal).toHaveBeenCalledWith(
-          expect.objectContaining({app: sentryApp, orgId: org.slug})
-        );
       });
 
       it('sentry app is shown as installed', async () => {