feat(profiling): profiling onboarding sidebar (#41322)

## Summary

**Important:** This PR depends on:
getsentry/sentry-docs#5778

Adds the new profiling onboarding sidebar behind a
`profiling-onboarding-checklist` feature flag.


Examples:

![image](https://user-images.githubusercontent.com/7349258/201730207-8f81480b-258c-4808-8545-3ef5f3684d81.png)


![image](https://user-images.githubusercontent.com/7349258/201730239-9678f3f3-9f3d-43a4-ab45-7ab8a8fb8123.png)

Author: Elias Hussary

build-utils/integration-docs-fetch-plugin.ts

@@ -2,12 +2,16 @@
 /* eslint import/no-nodejs-modules:0 */
 
 import fs from 'fs';
+import http from 'http';
 import https from 'https';
 import path from 'path';
+import url from 'url';
 
 import webpack from 'webpack';
 
-const PLATFORMS_URL = 'https://docs.sentry.io/_platforms/_index.json';
+const INTEGRATIONS_DOC_URL =
+  process.env.INTEGRATION_DOCS_URL || 'https://docs.sentry.io/_platforms/';
+const PLATFORMS_URL = INTEGRATIONS_DOC_URL + '_index.json';
 const DOCS_INDEX_PATH = 'src/sentry/integration-docs/_platforms.json';
 
 const alphaSortFromKey =
@@ -68,8 +72,13 @@ class IntegrationDocsFetchPlugin {
   fetch: Parameters<webpack.Compiler['hooks']['beforeRun']['tapAsync']>[1] = (
     _compilation,
     callback
-  ) =>
-    https
+  ) => {
+    let httpClient = https;
+    if (url.parse(PLATFORMS_URL).protocol === 'http:') {
+      // @ts-ignore
+      httpClient = http;
+    }
+    return httpClient
       .get(PLATFORMS_URL, res => {
         res.setEncoding('utf8');
         let buffer = '';
@@ -88,6 +97,7 @@ class IntegrationDocsFetchPlugin {
           );
       })
       .on('error', callback);
+  };
 
   apply(compiler: webpack.Compiler) {
     compiler.hooks.beforeRun.tapAsync('IntegrationDocsFetchPlugin', this.fetch);

src/sentry/utils/integrationdocs.py

@@ -35,7 +35,8 @@ class Platform(TypedDict):
     integrations: list[dict[str, str]]
 
 
-BASE_URL = "https://docs.sentry.io/_platforms/{}"
+INTEGRATION_DOCS_URL = os.environ.get("INTEGRATION_DOCS_URL", "https://docs.sentry.io/_platforms/")
+BASE_URL = INTEGRATION_DOCS_URL + "{}"
 
 # Also see INTEGRATION_DOC_FOLDER in setup.py
 DOC_FOLDER = os.environ.get("INTEGRATION_DOC_FOLDER") or os.path.abspath(

static/app/components/onboardingWizard/useOnboardingDocs.spec.tsx

@@ -6,6 +6,7 @@ import {
   generateDocKeys,
   isPlatformSupported,
 } from 'sentry/components/performanceOnboarding/utils';
+import {PlatformIntegration} from 'sentry/types';
 import {OrganizationContext} from 'sentry/views/organizationContext';
 
 describe('useOnboardingDocs', function () {
@@ -39,7 +40,13 @@ describe('useOnboardingDocs', function () {
     });
 
     const {result, waitForNextUpdate} = reactHooks.renderHook(useOnboardingDocs, {
-      initialProps: {project, generateDocKeys, isPlatformSupported},
+      initialProps: {
+        project,
+        docKeys,
+        isPlatformSupported: isPlatformSupported({
+          id: project.platform,
+        } as PlatformIntegration),
+      },
       wrapper,
     });
     await waitForNextUpdate();
@@ -87,7 +94,13 @@ describe('useOnboardingDocs', function () {
     });
 
     const {result} = reactHooks.renderHook(useOnboardingDocs, {
-      initialProps: {project, generateDocKeys, isPlatformSupported},
+      initialProps: {
+        project,
+        docKeys,
+        isPlatformSupported: isPlatformSupported({
+          id: project.platform,
+        } as PlatformIntegration),
+      },
       wrapper,
     });
     const {docContents, isLoading, hasOnboardingContents} = result.current;
@@ -130,7 +143,13 @@ describe('useOnboardingDocs', function () {
     });
 
     const {result} = reactHooks.renderHook(useOnboardingDocs, {
-      initialProps: {project, generateDocKeys, isPlatformSupported},
+      initialProps: {
+        project,
+        docKeys,
+        isPlatformSupported: isPlatformSupported({
+          id: project.platform,
+        } as PlatformIntegration),
+      },
       wrapper,
     });
     const {docContents, isLoading, hasOnboardingContents} = result.current;

static/app/components/onboardingWizard/useOnboardingDocs.tsx

@@ -2,22 +2,21 @@ import {useEffect, useState} from 'react';
 import * as Sentry from '@sentry/react';
 
 import {loadDocs} from 'sentry/actionCreators/projects';
-import {PlatformKey} from 'sentry/data/platformCategories';
 import platforms from 'sentry/data/platforms';
-import {PlatformIntegration, Project} from 'sentry/types';
+import {Project} from 'sentry/types';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
 
 const INITIAL_LOADING_DOCS = {};
 const INITIAL_DOC_CONTENTS = {};
 
 type Options = {
-  generateDocKeys: (platform: PlatformKey) => string[];
-  isPlatformSupported: (platform: undefined | PlatformIntegration) => boolean;
+  docKeys: string[];
+  isPlatformSupported: boolean;
   project: Project;
 };
 
-function useOnboardingDocs({generateDocKeys, isPlatformSupported, project}: Options) {
+function useOnboardingDocs({docKeys, isPlatformSupported, project}: Options) {
   const organization = useOrganization();
   const api = useApi();
 
@@ -30,11 +29,8 @@ function useOnboardingDocs({generateDocKeys, isPlatformSupported, project}: Opti
     ? platforms.find(p => p.id === project.platform)
     : undefined;
 
-  const isSupported = isPlatformSupported(currentPlatform);
-  const docKeys = currentPlatform && generateDocKeys(currentPlatform.id);
-
   useEffect(() => {
-    if (!isSupported) {
+    if (!isPlatformSupported) {
       if (loadingDocs !== INITIAL_LOADING_DOCS) {
         setLoadingDocs(INITIAL_LOADING_DOCS);
       }
@@ -44,7 +40,7 @@ function useOnboardingDocs({generateDocKeys, isPlatformSupported, project}: Opti
       return;
     }
 
-    docKeys?.forEach(docKey => {
+    docKeys.forEach(docKey => {
       if (docKey in loadingDocs) {
         // If a documentation content is loading, we should not attempt to fetch it again.
         // otherwise, if it's not loading, we should only fetch at most once.
@@ -91,15 +87,15 @@ function useOnboardingDocs({generateDocKeys, isPlatformSupported, project}: Opti
   }, [
     currentPlatform,
     docKeys,
-    isSupported,
+    isPlatformSupported,
     api,
     loadingDocs,
     organization.slug,
     project.slug,
     docContents,
   ]);
 
-  if (!currentPlatform || !isSupported) {
+  if (!currentPlatform || !isPlatformSupported) {
     return {
       isLoading: false,
       hasOnboardingContents: false,
@@ -121,6 +117,7 @@ function useOnboardingDocs({generateDocKeys, isPlatformSupported, project}: Opti
   );
 
   return {
+    docKeys,
     isLoading,
     hasOnboardingContents,
     docContents,

static/app/components/performanceOnboarding/sidebar.tsx

@@ -179,20 +179,21 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
     }
   }, [previousProject.id, currentProject.id]);
 
+  const currentPlatform = currentProject.platform
+    ? platforms.find(p => p.id === currentProject.platform)
+    : undefined;
+
+  const docKeys = currentPlatform ? generateDocKeys(currentPlatform.id) : [];
   const {docContents, isLoading, hasOnboardingContents} = useOnboardingDocs({
     project: currentProject,
-    generateDocKeys,
-    isPlatformSupported,
+    docKeys,
+    isPlatformSupported: isPlatformSupported(currentPlatform),
   });
 
   if (isLoading) {
     return <LoadingIndicator />;
   }
 
-  const currentPlatform = currentProject.platform
-    ? platforms.find(p => p.id === currentProject.platform)
-    : undefined;
-
   const doesNotSupportPerformance = currentProject.platform
     ? withoutPerformanceSupport.has(currentProject.platform)
     : false;
@@ -237,8 +238,6 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
     );
   }
 
-  const docKeys = generateDocKeys(currentPlatform.id);
-
   return (
     <Fragment>
       <div>