feat(integration-directory): plugin detailed view

src/sentry/api/endpoints/organization_plugins_configs.py

@@ -105,6 +105,7 @@ def get(self, request, organization):
                         "projectName": project.name,  # TODO(steve): do we need?
                         "enabled": plugin_info["enabled"],
                         "configured": plugin_info["configured"],  # TODO(steve): do we need?
+                        "projectPlatform": project.platform,
                     }
                 )
             serialized_plugins.append(serialized_plugin)

src/sentry/static/sentry/app/routes.jsx

@@ -829,6 +829,20 @@ function routes() {
         </Route>
       </Route>
 
+      <Redirect from="plugins/" to="integrations/" />
+      <Route name="Integrations" path="plugins/">
+        <Route
+          name="Integration Details"
+          path=":pluginSlug/"
+          componentPromise={() =>
+            import(
+              /* webpackChunkName: "ConfigureIntegration" */ 'app/views/organizationIntegrations/pluginDetailedView'
+            )
+          }
+          component={errorHandler(LazyLoad)}
+        />
+      </Route>
+
       <Redirect from="sentry-apps/" to="integrations/" />
       <Route name="Integrations" path="sentry-apps/">
         <Route
@@ -842,6 +856,7 @@ function routes() {
           component={errorHandler(LazyLoad)}
         />
       </Route>
+
       <Route name="Integrations" path="integrations/">
         <IndexRoute
           componentPromise={() =>

src/sentry/static/sentry/app/types/index.tsx

@@ -305,20 +305,28 @@ export type PluginNoProject = {
   isHidden: boolean;
   description?: string;
   resourceLinks?: Array<{title: string; url: string}>;
+  features: string[];
+  featureDescriptions: Array<{
+    description: string;
+    featureGate: string;
+  }>;
 };
 
 export type Plugin = PluginNoProject & {
   enabled: boolean;
 };
 
+export type PluginProjectItem = {
+  projectId: string;
+  projectSlug: string;
+  projectName: string;
+  projectPlatform: string | null;
+  enabled: boolean;
+  configured: boolean;
+};
+
 export type PluginWithProjectList = PluginNoProject & {
-  projectList: Array<{
-    projectId: string;
-    projectSlug: string;
-    projectName: string;
-    enabled: boolean;
-    configured: boolean;
-  }>;
+  projectList: PluginProjectItem[];
 };
 
 export type GlobalSelection = {

src/sentry/static/sentry/app/views/organizationIntegrations/installedPlugin.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import {t} from 'app/locale';
+import Access from 'app/components/acl/access';
+import Button from 'app/components/button';
+import Confirm from 'app/components/confirm';
+import Alert from 'app/components/alert';
+import ProjectBadge from 'app/components/idBadge/projectBadge';
+import withApi from 'app/utils/withApi';
+import {Client} from 'app/api';
+import {
+  addErrorMessage,
+  addSuccessMessage,
+  addLoadingMessage,
+} from 'app/actionCreators/indicator';
+import {PluginNoProject, PluginProjectItem, Organization, AvatarProject} from 'app/types';
+
+export type Props = {
+  api: Client;
+  plugin: PluginNoProject;
+  projectItem: PluginProjectItem;
+  organization: Organization;
+  onResetConfiguration: (projectId: string) => void;
+  onEnablePlugin: (projectId: string) => void;
+  className?: string;
+};
+
+export class InstalledPlugin extends React.Component<Props> {
+  getConfirmMessage() {
+    return (
+      <React.Fragment>
+        <Alert type="error" icon="icon-circle-exclamation">
+          {t(
+            'Deleting this installation will disable the integration for this project and remove any configurations.'
+          )}
+        </Alert>
+      </React.Fragment>
+    );
+  }
+
+  pluginUpdate = async (data: object) => {
+    const {organization, projectItem, plugin} = this.props;
+    // no try/catch so the caller will have to have it
+    await this.props.api.requestPromise(
+      `/projects/${organization.slug}/${projectItem.projectSlug}/plugins/${plugin.id}/`,
+      {
+        method: 'POST',
+        data,
+      }
+    );
+  };
+
+  handleReset = async () => {
+    try {
+      addLoadingMessage(t('Removing...'));
+      await this.pluginUpdate({reset: true});
+      addSuccessMessage(t('Configuration was removed'));
+      this.props.onResetConfiguration(this.props.projectItem.projectId);
+    } catch (_err) {
+      addErrorMessage(t('Unable to remove configuration'));
+    }
+  };
+
+  handleUninstallClick = () => {
+    //TODO: Analytics
+  };
+
+  enablePlugin = async () => {
+    try {
+      addLoadingMessage(t('Enabling...'));
+      await this.pluginUpdate({enabled: true});
+      addSuccessMessage(t('Configuration was enabled'));
+      this.props.onEnablePlugin(this.props.projectItem.projectId);
+    } catch (_err) {
+      addErrorMessage(t('Unable to enable configuration'));
+    }
+  };
+
+  get projectForBadge(): AvatarProject {
+    //this function returns the project as needed for the ProjectBadge component
+    const {projectItem} = this.props;
+    return {
+      slug: projectItem.projectSlug,
+      platform: projectItem.projectPlatform ? projectItem.projectPlatform : undefined,
+    };
+  }
+
+  render() {
+    const {className, plugin, organization, projectItem} = this.props;
+
+    return (
+      <Container>
+        <Access access={['org:integrations']}>
+          {({hasAccess}) => (
+            <IntegrationFlex className={className}>
+              <IntegrationItemBox>
+                <ProjectBadge project={this.projectForBadge} />
+              </IntegrationItemBox>
+              <div>
+                {!projectItem.enabled ? (
+                  <Button size="small" priority="primary" onClick={this.enablePlugin}>
+                    {t('Enable')}
+                  </Button>
+                ) : (
+                  <StyledButton
+                    borderless
+                    icon="icon-settings"
+                    disabled={!hasAccess}
+                    to={`/settings/${organization.slug}/projects/${projectItem.projectSlug}/plugins/${plugin.id}/`}
+                    data-test-id="integration-configure-button"
+                  >
+                    {t('Configure')}
+                  </StyledButton>
+                )}
+              </div>
+              <div>
+                <Confirm
+                  priority="danger"
+                  onConfirming={this.handleUninstallClick}
+                  disabled={!hasAccess}
+                  confirmText="Delete Installation"
+                  onConfirm={() => this.handleReset()}
+                  message={this.getConfirmMessage()}
+                >
+                  <StyledButton
+                    disabled={!hasAccess}
+                    borderless
+                    icon="icon-trash"
+                    data-test-id="integration-remove-button"
+                  >
+                    {t('Uninstall')}
+                  </StyledButton>
+                </Confirm>
+              </div>
+            </IntegrationFlex>
+          )}
+        </Access>
+      </Container>
+    );
+  }
+}
+
+export default withApi(InstalledPlugin);
+
+const Container = styled('div')`
+  margin: 10px;
+`;
+
+const StyledButton = styled(Button)`
+  color: ${p => p.theme.gray2};
+`;
+
+const IntegrationFlex = styled('div')`
+  display: flex;
+  align-items: center;
+`;
+
+const IntegrationItemBox = styled('div')`
+  flex: 1;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  min-width: 0;
+`;

src/sentry/static/sentry/app/views/organizationIntegrations/integrationPluginRow.tsx

@@ -40,7 +40,7 @@ export default class PluginRow extends React.Component<Props> {
             <ProviderDetails>
               <Status enabled={this.isEnabled} />
               <StyledLink
-                to={`/settings/${slug}/plugins/${plugin.slug}?tab=configurations`}
+                to={`/settings/${slug}/plugins/${plugin.slug}/?tab=configurations`}
               >{`${plugin.projectList.length} Configurations`}</StyledLink>
             </ProviderDetails>
           </Container>

src/sentry/static/sentry/app/views/organizationIntegrations/integrationProviderRow.tsx

@@ -46,7 +46,7 @@ export default class ProviderRow extends React.Component<Props> {
             <ProviderDetails>
               <Status enabled={this.isEnabled} />
               <StyledLink
-                to={`/settings/${slug}/integrations/${provider.key}?tab=configurations`}
+                to={`/settings/${slug}/integrations/${provider.key}/?tab=configurations`}
               >{`${integrations.length} Configurations`}</StyledLink>
             </ProviderDetails>
           </div>