fix(app-platform): Render unpublished integrations

A bug was causing Issue pages in Orgs that had an unpublished
Integration installed to error out. This was only case for one or two
Orgs, as far as I can tell (our test Orgs).

This fixes that bug and refactors some related things:

- Retrieve SentryAppInstallations from Store instead of passing down
through components
- Handle when the "give me all SentryApps" and "give me all MY
SentryApps" endpoints return the same records

Author: mnoble

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

@@ -3,7 +3,8 @@ import SentryAppComponentsActions from 'app/actions/sentryAppComponentActions';
 export function fetchSentryAppComponents(api, orgSlug, projectId) {
   const componentsUri = `/organizations/${orgSlug}/sentry-app-components/?projectId=${projectId}`;
 
-  const promise = api.requestPromise(componentsUri);
-  promise.then(res => SentryAppComponentsActions.loadComponents(res));
-  return promise;
+  return api.requestPromise(componentsUri).then(res => {
+    SentryAppComponentsActions.loadComponents(res);
+    return res;
+  });
 }

src/sentry/static/sentry/app/components/group/externalIssuesList.jsx

@@ -123,9 +123,8 @@ class ExternalIssueList extends AsyncComponent {
 
     return components.map(component => {
       const {sentryApp} = component;
-
       const installation = sentryAppInstallations.find(
-        i => i.sentryApp.uuid === sentryApp.uuid
+        i => i.app.uuid === sentryApp.uuid
       );
 
       const issue = (externalIssues || []).find(i => i.serviceType == sentryApp.slug);

src/sentry/static/sentry/app/components/group/sidebar.jsx

@@ -27,7 +27,6 @@ const GroupSidebar = createReactClass({
     group: SentryTypes.Group,
     event: SentryTypes.Event,
     environments: PropTypes.arrayOf(SentryTypes.Environment),
-    sentryAppInstallations: PropTypes.array,
   },
 
   getInitialState() {
@@ -228,13 +227,7 @@ const GroupSidebar = createReactClass({
   },
 
   render() {
-    const {
-      group,
-      organization,
-      project,
-      environments,
-      sentryAppInstallations,
-    } = this.props;
+    const {group, organization, project, environments} = this.props;
     const projectId = project.slug;
 
     return (
@@ -254,7 +247,6 @@ const GroupSidebar = createReactClass({
             group={this.props.group}
             project={project}
             orgId={organization.slug}
-            sentryAppInstallations={sentryAppInstallations}
           />
         </ErrorBoundary>
 

src/sentry/static/sentry/app/stores/sentryAppStore.jsx

@@ -1,4 +1,5 @@
 import Reflux from 'reflux';
+import {uniqBy} from 'lodash';
 
 const SentryAppStore = Reflux.createStore({
   init() {
@@ -11,7 +12,14 @@ const SentryAppStore = Reflux.createStore({
 
   load(items) {
     this.items = items;
-    this.trigger(items);
+    this.deDup();
+    this.trigger(this.items);
+  },
+
+  add(...apps) {
+    apps.forEach(app => this.items.push(app));
+    this.deDup();
+    this.trigger(this.items);
   },
 
   get(slug) {
@@ -21,6 +29,10 @@ const SentryAppStore = Reflux.createStore({
   getAll() {
     return this.items;
   },
+
+  deDup() {
+    this.items = uniqBy(this.items, i => i.uuid);
+  },
 });
 
 export default SentryAppStore;

src/sentry/static/sentry/app/utils/fetchSentryAppInstallations.jsx

@@ -3,12 +3,17 @@ import SentryAppStore from 'app/stores/sentryAppStore';
 
 const fetchSentryAppInstallations = (api, orgSlug) => {
   const sentryAppsUri = '/sentry-apps/';
+  const ownedSentryAppsUri = `/organizations/${orgSlug}/sentry-apps/`;
   const installsUri = `/organizations/${orgSlug}/sentry-app-installations/`;
 
   function updateSentryAppStore(sentryApps) {
     SentryAppStore.load(sentryApps);
   }
 
+  function fetchOwnedSentryApps() {
+    api.requestPromise(ownedSentryAppsUri).then(apps => SentryAppStore.add(...apps));
+  }
+
   function fetchInstalls() {
     api
       .requestPromise(installsUri)
@@ -28,6 +33,7 @@ const fetchSentryAppInstallations = (api, orgSlug) => {
   api
     .requestPromise(sentryAppsUri)
     .then(updateSentryAppStore)
+    .then(fetchOwnedSentryApps)
     .then(fetchInstalls);
 };
 

tests/js/spec/views/organizationGroupDetails/groupEventDetails.spec.jsx

@@ -12,22 +12,7 @@ describe('groupEventDetails', () => {
   let group;
   let event;
 
-  beforeEach(() => {
-    const props = initializeOrg();
-    org = props.organization;
-    project = props.project;
-    project.organization = org;
-    routerContext = props.routerContext;
-
-    group = TestStubs.Group();
-    event = TestStubs.Event({
-      size: 1,
-      dateCreated: '2019-03-20T00:00:00.000Z',
-      errors: [],
-      entries: [],
-      tags: [{key: 'environment', value: 'dev'}],
-    });
-
+  const mockGroupApis = () => {
     MockApiClient.addMockResponse({
       url: `/issues/${group.id}/`,
       body: group,
@@ -67,12 +52,36 @@ describe('groupEventDetails', () => {
       url: `/groups/${group.id}/integrations/`,
       body: [],
     });
+  };
+
+  beforeEach(() => {
+    const props = initializeOrg();
+    org = props.organization;
+    project = props.project;
+    project.organization = org;
+    routerContext = props.routerContext;
+
+    group = TestStubs.Group();
+    event = TestStubs.Event({
+      size: 1,
+      dateCreated: '2019-03-20T00:00:00.000Z',
+      errors: [],
+      entries: [],
+      tags: [{key: 'environment', value: 'dev'}],
+    });
+
+    mockGroupApis();
 
     MockApiClient.addMockResponse({
       url: '/sentry-apps/',
       body: [],
     });
 
+    MockApiClient.addMockResponse({
+      url: `/organizations/${org.slug}/sentry-apps/`,
+      body: [],
+    });
+
     MockApiClient.addMockResponse({
       url: `/organizations/${org.slug}/sentry-app-installations/`,
       body: [],
@@ -195,51 +204,100 @@ describe('groupEventDetails', () => {
     });
   });
 
-  it('loads Sentry Apps', () => {
-    const request = MockApiClient.addMockResponse({
-      url: '/sentry-apps/',
-      body: [],
+  describe('Platform Integrations', () => {
+    let wrapper;  // eslint-disable-line
+    let integrationsRequest;
+    let orgIntegrationsRequest;
+    let componentsRequest;
+
+    const mountWrapper = () => {
+      return mount(
+        <GroupEventDetails
+          api={new MockApiClient()}
+          group={group}
+          project={project}
+          organization={org}
+          environments={[{id: '1', name: 'dev', displayName: 'Dev'}]}
+          params={{orgId: org.slug, groupId: group.id, eventId: '1'}}
+          location={{query: {environment: 'dev'}}}
+        />,
+        routerContext
+      );
+    };
+
+    beforeEach(() => {
+      const integration = TestStubs.SentryApp();
+      const unpublishedIntegration = TestStubs.SentryApp({status: 'unpublished'});
+      const internalIntegration = TestStubs.SentryApp({status: 'internal'});
+
+      const unpublishedInstall = TestStubs.SentryAppInstallation({
+        app: {
+          slug: unpublishedIntegration.slug,
+          uuid: unpublishedIntegration.uuid,
+        },
+      });
+
+      const internalInstall = TestStubs.SentryAppInstallation({
+        app: {
+          slug: internalIntegration.slug,
+          uuid: internalIntegration.uuid,
+        },
+      });
+
+      const component = TestStubs.SentryAppComponent({
+        sentryApp: {
+          uuid: unpublishedIntegration.uuid,
+          slug: unpublishedIntegration.slug,
+          name: unpublishedIntegration.name,
+        },
+      });
+
+      MockApiClient.clearMockResponses();
+      mockGroupApis();
+
+      MockApiClient.addMockResponse({
+        url: `/projects/${org.slug}/${project.slug}/events/1/`,
+        body: event,
+      });
+
+      componentsRequest = MockApiClient.addMockResponse({
+        url: `/organizations/${org.slug}/sentry-app-components/?projectId=${project.id}`,
+        body: [component],
+      });
+
+      MockApiClient.addMockResponse({
+        url: `/projects/${org.slug}/${project.slug}/events/1/`,
+        body: event,
+      });
+
+      integrationsRequest = MockApiClient.addMockResponse({
+        url: '/sentry-apps/',
+        body: [integration],
+      });
+
+      MockApiClient.addMockResponse({
+        url: `/organizations/${org.slug}/sentry-app-installations/`,
+        body: [unpublishedInstall, internalInstall],
+      });
+
+      orgIntegrationsRequest = MockApiClient.addMockResponse({
+        url: `/organizations/${org.slug}/sentry-apps/`,
+        body: [unpublishedIntegration, internalIntegration],
+      });
+
+      wrapper = mountWrapper();
     });
 
-    project.organization = org;
-
-    mount(
-      <GroupEventDetails
-        api={new MockApiClient()}
-        group={group}
-        project={project}
-        organization={org}
-        environments={[{id: '1', name: 'dev', displayName: 'Dev'}]}
-        params={{}}
-        location={{}}
-      />,
-      routerContext
-    );
-
-    expect(request).toHaveBeenCalledTimes(1);
-  });
-
-  it('loads sentry app components when flagged in', () => {
-    const request = MockApiClient.addMockResponse({
-      url: `/organizations/${org.slug}/sentry-app-components/?projectId=${project.id}`,
-      body: [],
+    it('loads Integrations', () => {
+      expect(integrationsRequest).toHaveBeenCalled();
     });
 
-    project.organization = org;
-
-    mount(
-      <GroupEventDetails
-        api={new MockApiClient()}
-        group={group}
-        project={project}
-        organization={org}
-        environments={[{id: '1', name: 'dev', displayName: 'Dev'}]}
-        params={{}}
-        location={{}}
-      />,
-      routerContext
-    );
+    it('loads unpublished and internal Integrations', () => {
+      expect(orgIntegrationsRequest).toHaveBeenCalled();
+    });
 
-    expect(request).toHaveBeenCalledTimes(1);
+    it('loads Integration UI components', () => {
+      expect(componentsRequest).toHaveBeenCalled();
+    });
   });
 });