feat(app-platform): Sort Integrations (#12697)

"Sentry Apps" and Integrations are now sorted among one another. First
by Installed vs Uninstalled status, then alphabetically within each of
those groupos.

Author: mnoble

src/sentry/static/sentry/app/components/avatar/sentryAppAvatar.jsx

@@ -132,11 +132,9 @@ class OrganizationIntegrations extends AsyncComponent {
 
   // Rendering
 
-  renderBody() {
-    const {reloading, applications, appInstalls} = this.state;
-    const providers = this.providers
-      .sort((a, b) => b.isInstalled - a.isInstalled)
-      .map(provider => (
+  renderProvider(provider) {
+    return (
+      <IntegrationRow key={`row-${provider.key}`}>
         <ProviderRow
           key={provider.key}
           provider={provider}
@@ -148,7 +146,55 @@ class OrganizationIntegrations extends AsyncComponent {
           onReinstall={this.onInstall}
           enabledPlugins={this.enabledPlugins}
         />
-      ));
+      </IntegrationRow>
+    );
+  }
+
+  renderSentryApps(apps, key) {
+    const {appInstalls} = this.state;
+
+    return (
+      <IntegrationRow key={`row-${key}`}>
+        <SentryAppInstallations
+          key={key}
+          orgId={this.props.params.orgId}
+          installs={appInstalls}
+          applications={apps}
+        />
+      </IntegrationRow>
+    );
+  }
+
+  renderBody() {
+    const {reloading, applications, appInstalls} = this.state;
+
+    const installedProviders = this.providers
+      .filter(p => p.isInstalled)
+      .map(p => [p.name, this.renderProvider(p)]);
+
+    const uninstalledProviders = this.providers
+      .filter(p => !p.isInstalled)
+      .map(p => [p.name, this.renderProvider(p)]);
+
+    const installedSentryApps = (applications || [])
+      .filter(a => appInstalls.find(i => i.app.slug === a.slug))
+      .map(a => [a.name, this.renderSentryApps([a], a.slug)]);
+
+    const uninstalledSentryApps = (applications || [])
+      .filter(a => !appInstalls.find(i => i.app.slug === a.slug))
+      .map(a => [a.name, this.renderSentryApps([a], a.slug)]);
+
+    // Combine the list of Providers and Sentry Apps that have installations.
+    const installed = installedProviders
+      .concat(installedSentryApps)
+      .sort((a, b) => a[0].localeCompare(b[0]))
+      .map(i => i[1]);
+
+    // Combine the list of Providers and Sentry Apps that have no installations.
+    const uninstalled = uninstalledProviders
+      .concat(uninstalledSentryApps)
+      .sort((a, b) => a[0].localeCompare(b[0]))
+      .map(i => i[1]);
 
     return (
       <React.Fragment>
@@ -169,21 +215,17 @@ class OrganizationIntegrations extends AsyncComponent {
             {reloading && <StyledLoadingIndicator mini />}
           </PanelHeader>
           <PanelBody>
-            {providers}
-            {applications && (
-              <SentryAppInstallations
-                orgId={this.props.params.orgId}
-                installs={appInstalls}
-                applications={applications}
-              />
-            )}
+            {installed}
+            {uninstalled}
           </PanelBody>
         </Panel>
       </React.Fragment>
     );
   }
 }
 
+const IntegrationRow = styled.div``;
+
 const StyledLoadingIndicator = styled(LoadingIndicator)`
   position: absolute;
   right: 7px;

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

@@ -5,7 +5,6 @@ import Access from 'app/components/acl/access';
 import Button from 'app/components/button';
 import Confirm from 'app/components/confirm';
 import ConfirmDelete from 'app/components/confirmDelete';
-import SentryAppAvatar from 'app/components/avatar/sentryAppAvatar';
 import PropTypes from 'prop-types';
 import SentryTypes from 'app/sentryTypes';
 import Tooltip from 'app/components/tooltip';
@@ -15,6 +14,7 @@ import styled from 'react-emotion';
 import space from 'app/styles/space';
 import {withTheme} from 'emotion-theming';
 import CircleIndicator from 'app/components/circleIndicator';
+import PluginIcon from 'app/plugins/components/pluginIcon';
 
 export default class SentryApplicationRow extends React.PureComponent {
   static propTypes = {
@@ -72,7 +72,7 @@ export default class SentryApplicationRow extends React.PureComponent {
     return (
       <SentryAppItem>
         <StyledFlex>
-          <SentryAppAvatar size={36} sentryApp={app} />
+          <PluginIcon size={36} pluginId={app.slug} />
           <SentryAppBox>
             <SentryAppName>
               {showPublishStatus ? (