🎨 some pr comments

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

@@ -3,14 +3,13 @@ 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 {FeatureFlagOnboardingLayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/onboardingLayout';
+import {Step} 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';
 
@@ -20,20 +19,19 @@ export function FeatureFlagOnboardingLayout({
   platformKey,
   projectId,
   projectSlug,
-  newOrg,
   projectKeyId,
   configType = 'onboarding',
   integration = '',
   provider = '',
-}: OnboardingLayoutProps) {
+}: FeatureFlagOnboardingLayoutProps) {
   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 {steps} = useMemo(() => {
     const doc = docsConfig[configType] ?? docsConfig.onboarding;
 
     const docParams: DocsParams<any> = {
@@ -53,26 +51,20 @@ export function FeatureFlagOnboardingLayout({
         data: registryData,
       },
       platformOptions: selectedOptions,
-      newOrg,
       isSelfHosted,
       urlPrefix,
-      integration,
+      featureFlagOptions: {
+        integration,
+      },
     };
 
     return {
-      introduction: doc.introduction?.(docParams),
-      steps: [
-        ...doc.install(docParams),
-        ...doc.configure(docParams),
-        ...doc.verify(docParams),
-      ],
-      nextSteps: doc.nextSteps?.(docParams) || [],
+      steps: [...doc.install(docParams), ...doc.configure(docParams)],
     };
   }, [
     docsConfig,
     dsn,
     isLoadingRegistry,
-    newOrg,
     organization,
     platformKey,
     projectId,
@@ -90,20 +82,10 @@ export function FeatureFlagOnboardingLayout({
   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.map(step => (
+            <Step key={step.title ?? step.type} {...step} />
+          ))}
         </Steps>
         <OnboardingIntegrationSection provider={provider} integration={integration} />
       </Wrapper>
@@ -130,9 +112,3 @@ const Wrapper = styled('div')`
     }
   }
 `;
-
-const Introduction = styled('div')`
-  display: flex;
-  flex-direction: column;
-  margin: 0 0 ${space(2)} 0;
-`;

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

@@ -326,7 +326,7 @@ function OnboardingContent({
           // dropdown value (from either dropdown)
           setupMode() === 'openFeature' ? openFeatureProvider.value : sdkProvider.value
         }
-        configType={'featureFlagOnboarding'}
+        configType="featureFlagOnboarding"
       />
     </Fragment>
   );

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

@@ -66,7 +66,7 @@ export default function OnboardingIntegrationSection({
             <Input
               value={secret}
               type="text"
-              placeholder={'Signing Secret'}
+              placeholder={t('Signing Secret')}
               onChange={e => setSecret(e.target.value)}
             />
             <Button

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

@@ -123,7 +123,7 @@ type Labels = {
   pythonModule: string; // what's imported from sentry_sdk.integrations
 };
 
-export const PROVIDER_OPTION_TO_LABELS: Record<string, Labels> = {
+export const PROVIDER_OPTION_TO_LABELS: Record<ProviderOptions, Labels> = {
   [ProviderOptions.LAUNCHDARKLY]: {
     pythonModule: 'launchdarkly',
     pythonIntegration: 'LaunchDarklyIntegration',

static/app/components/onboarding/gettingStartedDoc/onboardingLayout.tsx

@@ -44,11 +44,14 @@ export type OnboardingLayoutProps = {
   projectSlug: Project['slug'];
   activeProductSelection?: ProductSolution[];
   configType?: ConfigType;
-  integration?: string;
   newOrg?: boolean;
-  provider?: string;
 };
 
+export interface FeatureFlagOnboardingLayoutProps extends OnboardingLayoutProps {
+  integration?: string;
+  provider?: string;
+}
+
 const EMPTY_ARRAY: never[] = [];
 
 export function OnboardingLayout({

static/app/components/onboarding/gettingStartedDoc/types.ts

@@ -62,12 +62,14 @@ export interface DocsParams<
    * The page where the docs are being displayed
    */
   docsLocation?: DocsPageLocation;
+  featureFlagOptions?: {
+    integration: string;
+  };
   feedbackOptions?: {
     email?: boolean;
     name?: boolean;
     screenshot?: boolean;
   };
-  integration?: string;
   newOrg?: boolean;
   profilingOptions?: {
     defaultProfilingMode?: 'transaction' | 'continuous';

static/app/gettingStartedDocs/python/python.tsx

@@ -217,25 +217,25 @@ export function AlternativeConfiguration() {
 
 export const featureFlagOnboarding: OnboardingConfig = {
   install: onboarding.install,
-  configure: ({integration = '', dsn}) => [
+  configure: ({featureFlagOptions = {integration: ''}, dsn}) => [
     {
       type: StepType.CONFIGURE,
       description: tct('Add [name] to your integrations list.', {
         name: (
-          <code>{`${PROVIDER_OPTION_TO_LABELS[integration].pythonIntegration}()`}</code>
+          <code>{`${PROVIDER_OPTION_TO_LABELS[featureFlagOptions.integration].pythonIntegration}()`}</code>
         ),
       }),
       configurations: [
         {
           language: 'python',
           code: `
 import sentry-sdk
-from sentry_sdk.integrations.${PROVIDER_OPTION_TO_LABELS[integration].pythonModule} import ${PROVIDER_OPTION_TO_LABELS[integration].pythonIntegration}
+from sentry_sdk.integrations.${PROVIDER_OPTION_TO_LABELS[featureFlagOptions.integration].pythonModule} import ${PROVIDER_OPTION_TO_LABELS[featureFlagOptions.integration].pythonIntegration}
 
 sentry_sdk.init(
   dsn="${dsn.public}",
   integrations=[
-    ${PROVIDER_OPTION_TO_LABELS[integration].pythonIntegration}(),
+    ${PROVIDER_OPTION_TO_LABELS[featureFlagOptions.integration].pythonIntegration}(),
   ]
 )`,
         },