Api 726/integrations detailed view (#17038)

Author: Stephen Cefali

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

@@ -833,7 +833,7 @@ function routes() {
       <Route name="Integrations" path="plugins/">
         <Route
           name="Integration Details"
-          path=":pluginSlug/"
+          path=":integrationSlug/"
           componentPromise={() =>
             import(
               /* webpackChunkName: "ConfigureIntegration" */ 'app/views/organizationIntegrations/pluginDetailedView'
@@ -847,7 +847,7 @@ function routes() {
       <Route name="Integrations" path="sentry-apps/">
         <Route
           name="Details"
-          path=":appSlug"
+          path=":integrationSlug"
           componentPromise={() =>
             import(
               /* webpackChunkName: "ConfigureIntegration" */ 'app/views/organizationIntegrations/sentryAppDetailedView'
@@ -868,7 +868,7 @@ function routes() {
         />
         <Route
           name="Integration Details"
-          path=":providerKey"
+          path=":integrationSlug"
           componentPromise={() =>
             import(
               /* webpackChunkName: "ConfigureIntegration" */ 'app/views/organizationIntegrations/integrationDetailedView'

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

@@ -1,6 +1,16 @@
 import {SpanEntry} from 'app/components/events/interfaces/spans/types';
 import {API_ACCESS_SCOPES} from 'app/constants';
 import {Field} from 'app/views/settings/components/forms/type';
+import {
+  INSTALLED,
+  NOT_INSTALLED,
+  PENDING,
+} from 'app/views/organizationIntegrations/constants';
+
+export type IntegrationInstallationStatus =
+  | typeof INSTALLED
+  | typeof NOT_INSTALLED
+  | typeof PENDING;
 
 export type ObjectStatus =
   | 'active'
@@ -308,10 +318,7 @@ export type PluginNoProject = {
   description?: string;
   resourceLinks?: Array<{title: string; url: string}>;
   features: string[];
-  featureDescriptions: Array<{
-    description: string;
-    featureGate: string;
-  }>;
+  featureDescriptions: IntegrationFeature[];
 };
 
 export type Plugin = PluginNoProject & {
@@ -514,7 +521,7 @@ export type IntegrationProvider = BaseIntegrationProvider & {
 };
 
 export type IntegrationFeature = {
-  description: React.ReactNode;
+  description: React.ReactNode | string;
   featureGate: string;
 };
 

src/sentry/static/sentry/app/utils/integrationUtil.tsx

@@ -1,6 +1,11 @@
 import {uniqueId} from 'app/utils/guid';
+import capitalize from 'lodash/capitalize';
 import {trackAnalyticsEvent} from 'app/utils/analytics';
-import {Organization} from 'app/types';
+import {
+  Organization,
+  SentryAppInstallation,
+  IntegrationInstallationStatus,
+} from 'app/types';
 import {Hooks} from 'app/types/hooks';
 import HookStore from 'app/stores/hookStore';
 import React from 'react';
@@ -163,3 +168,10 @@ export const getIntegrationFeatureGate = () => {
   const featureHook = HookStore.get('integrations:feature-gates')[0] || defaultHook;
   return featureHook();
 };
+
+export const getSentryAppInstallStatus = (install: SentryAppInstallation | undefined) => {
+  if (install) {
+    return capitalize(install.status) as IntegrationInstallationStatus;
+  }
+  return 'Not Installed';
+};