feat(onboarding): Add copy-as-markdown button to project creation and signup setup docs

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;
   }

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({
           </Stack>
           <Divider withBottomMargin />
           <div>
-            {steps.map((step, index) => (
-              <StyledStep key={step.title ?? step.type} stepIndex={index} {...step} />
-            ))}
+            {steps.map((step, index) => {
+              const copyButton =
+                copyEnabled && index === 0 ? (
+                  <OnboardingCopyMarkdownButton
+                    steps={steps}
+                    source={newOrg ? 'first_time_setup' : 'project_getting_started'}
+                  />
+                ) : null;
+
+              const trailingItems = copyButton ? (
+                step.trailingItems ? (
+                  <Fragment>
+                    {step.trailingItems}
+                    {copyButton}
+                  </Fragment>
+                ) : (
+                  copyButton
+                )
+              ) : (
+                step.trailingItems
+              );
+
+              return (
+                <StyledStep
+                  key={step.title ?? step.type}
+                  stepIndex={index}
+                  {...step}
+                  trailingItems={trailingItems}
+                />
+              );
+            })}
           </div>
           {nextSteps.length > 0 && (
             <Fragment>