diff --git a/static/app/components/onboarding/gettingStartedDoc/onboardingCopyMarkdownButton.tsx b/static/app/components/onboarding/gettingStartedDoc/onboardingCopyMarkdownButton.tsx index 5223d8e7575982..c1c1a032c3b23d 100644 --- a/static/app/components/onboarding/gettingStartedDoc/onboardingCopyMarkdownButton.tsx +++ b/static/app/components/onboarding/gettingStartedDoc/onboardingCopyMarkdownButton.tsx @@ -90,20 +90,30 @@ export function OnboardingCopyMarkdownButton({ ); } -const FEATURE_FLAG = 'onboarding-copy-setup-instructions'; +const DEFAULT_FEATURE_FLAG = 'onboarding-copy-setup-instructions'; +export const PROJECT_CREATION_FEATURE_FLAG = + 'onboarding-copy-setup-instructions-project-creation'; /** - * Feature-gated wrapper that renders its children only when the - * `onboarding-copy-setup-instructions` flag is enabled. Includes spacing - * so callsites don't render an empty Container when the flag is off. + * Returns whether the copy setup instructions button should be shown. + * Defaults to the `onboarding-copy-setup-instructions` flag, but callers + * can pass a different flag name (e.g. for project-creation-specific gating). */ -export function useCopySetupInstructionsEnabled(): boolean { +export function useCopySetupInstructionsEnabled( + featureFlag: string = DEFAULT_FEATURE_FLAG +): boolean { const organization = useOrganization(); - return organization.features.includes(FEATURE_FLAG); + return organization.features.includes(featureFlag); } -export function CopySetupInstructionsGate({children}: {children: React.ReactNode}) { - const enabled = useCopySetupInstructionsEnabled(); +export function CopySetupInstructionsGate({ + children, + featureFlag, +}: { + children: React.ReactNode; + featureFlag?: string; +}) { + const enabled = useCopySetupInstructionsEnabled(featureFlag); if (!enabled) { return null; } diff --git a/static/app/components/onboarding/gettingStartedDoc/onboardingLayout.tsx b/static/app/components/onboarding/gettingStartedDoc/onboardingLayout.tsx index 8b5d8dbf6a835b..a1c7a4d5fa3c09 100644 --- a/static/app/components/onboarding/gettingStartedDoc/onboardingLayout.tsx +++ b/static/app/components/onboarding/gettingStartedDoc/onboardingLayout.tsx @@ -8,6 +8,11 @@ import HookOrDefault from 'sentry/components/hookOrDefault'; import List from 'sentry/components/list'; import ListItem from 'sentry/components/list/listItem'; import {AuthTokenGeneratorProvider} from 'sentry/components/onboarding/gettingStartedDoc/authTokenGenerator'; +import { + OnboardingCopyMarkdownButton, + PROJECT_CREATION_FEATURE_FLAG, + useCopySetupInstructionsEnabled, +} from 'sentry/components/onboarding/gettingStartedDoc/onboardingCopyMarkdownButton'; import {TabSelectionScope} from 'sentry/components/onboarding/gettingStartedDoc/selectedCodeTabContext'; import {Step} from 'sentry/components/onboarding/gettingStartedDoc/step'; import { @@ -62,6 +67,7 @@ export function OnboardingLayout({ }: OnboardingLayoutProps) { const api = useApi(); const organization = useOrganization(); + const copyEnabled = useCopySetupInstructionsEnabled(PROJECT_CREATION_FEATURE_FLAG); const {isPending: isLoadingRegistry, data: registryData} = useSourcePackageRegistries(organization); const selectedOptions = useUrlPlatformOptions(docsConfig.platformOptions); @@ -178,9 +184,37 @@ export function OnboardingLayout({
- {steps.map((step, index) => ( - - ))} + {steps.map((step, index) => { + const copyButton = + copyEnabled && index === 0 ? ( + + ) : null; + + const trailingItems = copyButton ? ( + step.trailingItems ? ( + + {step.trailingItems} + {copyButton} + + ) : ( + copyButton + ) + ) : ( + step.trailingItems + ); + + return ( + + ); + })}
{nextSteps.length > 0 && (