feat(flags): add python onboarding sidebar

Author: michellewzhang

static/app/components/events/featureFlags/eventFeatureFlagList.tsx

@@ -1,7 +1,6 @@
 import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 
-import {openModal} from 'sentry/actionCreators/modal';
 import {Button} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
@@ -11,10 +10,7 @@ import {
   FeatureFlagDrawer,
 } from 'sentry/components/events/featureFlags/featureFlagDrawer';
 import FeatureFlagSort from 'sentry/components/events/featureFlags/featureFlagSort';
-import {
-  modalCss,
-  SetupIntegrationModal,
-} from 'sentry/components/events/featureFlags/setupIntegrationModal';
+import {useFeatureFlagOnboarding} from 'sentry/components/events/featureFlags/useFeatureFlagOnboarding';
 import {
   FlagControlOptions,
   OrderBy,
@@ -80,6 +76,7 @@ export function EventFeatureFlagList({
       statsPeriod: eventView.statsPeriod,
     },
   });
+  const {activateSidebar} = useFeatureFlagOnboarding();
 
   const {
     suspectFlags,
@@ -95,13 +92,6 @@ export function EventFeatureFlagList({
   const hasFlagContext = !!event.contexts.flags;
   const hasFlags = Boolean(hasFlagContext && event?.contexts?.flags?.values.length);
 
-  function handleSetupButtonClick() {
-    trackAnalytics('flags.setup_modal_opened', {organization});
-    openModal(modalProps => <SetupIntegrationModal {...modalProps} />, {
-      modalCss,
-    });
-  }
-
   const suspectFlagNames: Set<string> = useMemo(() => {
     return isSuspectError || isSuspectPending
       ? new Set()
@@ -195,7 +185,7 @@ export function EventFeatureFlagList({
           <Button
             aria-label={t('Set Up Integration')}
             size="xs"
-            onClick={handleSetupButtonClick}
+            onClick={activateSidebar}
           >
             {t('Set Up Integration')}
           </Button>

static/app/components/events/featureFlags/featureFlagOnboardingLayout.tsx

@@ -0,0 +1,138 @@
+import {useMemo} from 'react';
+import styled from '@emotion/styled';
+
+import OnboardingIntegrationSection from 'sentry/components/events/featureFlags/onboardingIntegrationSection';
+import {AuthTokenGeneratorProvider} from 'sentry/components/onboarding/gettingStartedDoc/authTokenGenerator';
+import type {OnboardingLayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/onboardingLayout';
+import {Step, StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import {useSourcePackageRegistries} from 'sentry/components/onboarding/gettingStartedDoc/useSourcePackageRegistries';
+import {useUrlPlatformOptions} from 'sentry/components/onboarding/platformOptionsControl';
+import ConfigStore from 'sentry/stores/configStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
+import {space} from 'sentry/styles/space';
+import useApi from 'sentry/utils/useApi';
+import useOrganization from 'sentry/utils/useOrganization';
+
+export function FeatureFlagOnboardingLayout({
+  docsConfig,
+  dsn,
+  platformKey,
+  projectId,
+  projectSlug,
+  newOrg,
+  projectKeyId,
+  configType = 'onboarding',
+  integration = '',
+  provider = '',
+}: OnboardingLayoutProps) {
+  const api = useApi();
+  const organization = useOrganization();
+  const {isPending: isLoadingRegistry, data: registryData} =
+    useSourcePackageRegistries(organization);
+  const selectedOptions = useUrlPlatformOptions(docsConfig.platformOptions);
+  const {isSelfHosted, urlPrefix} = useLegacyStore(ConfigStore);
+
+  const {introduction, steps} = useMemo(() => {
+    const doc = docsConfig[configType] ?? docsConfig.onboarding;
+
+    const docParams: DocsParams<any> = {
+      api,
+      projectKeyId,
+      dsn,
+      organization,
+      platformKey,
+      projectId,
+      projectSlug,
+      isFeedbackSelected: false,
+      isPerformanceSelected: false,
+      isProfilingSelected: false,
+      isReplaySelected: false,
+      sourcePackageRegistries: {
+        isLoading: isLoadingRegistry,
+        data: registryData,
+      },
+      platformOptions: selectedOptions,
+      newOrg,
+      isSelfHosted,
+      urlPrefix,
+      integration,
+    };
+
+    return {
+      introduction: doc.introduction?.(docParams),
+      steps: [
+        ...doc.install(docParams),
+        ...doc.configure(docParams),
+        ...doc.verify(docParams),
+      ],
+      nextSteps: doc.nextSteps?.(docParams) || [],
+    };
+  }, [
+    docsConfig,
+    dsn,
+    isLoadingRegistry,
+    newOrg,
+    organization,
+    platformKey,
+    projectId,
+    projectSlug,
+    registryData,
+    selectedOptions,
+    configType,
+    urlPrefix,
+    isSelfHosted,
+    api,
+    projectKeyId,
+    integration,
+  ]);
+
+  return (
+    <AuthTokenGeneratorProvider projectSlug={projectSlug}>
+      <Wrapper>
+        {introduction && <Introduction>{introduction}</Introduction>}
+        <Steps>
+          {steps.map(step =>
+            step.type === StepType.CONFIGURE ? (
+              <Step
+                key={step.title ?? step.type}
+                {...{
+                  ...step,
+                }}
+              />
+            ) : (
+              <Step key={step.title ?? step.type} {...step} />
+            )
+          )}
+        </Steps>
+        <OnboardingIntegrationSection provider={provider} integration={integration} />
+      </Wrapper>
+    </AuthTokenGeneratorProvider>
+  );
+}
+
+const Steps = styled('div')`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+`;
+
+const Wrapper = styled('div')`
+  h4 {
+    margin-bottom: 0.5em;
+  }
+  && {
+    p {
+      margin-bottom: 0;
+    }
+    h5 {
+      margin-bottom: 0;
+    }
+  }
+`;
+
+const Introduction = styled('div')`
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 ${space(2)} 0;
+`;