ref(onboarding-docs): Nest replay options (#62152)

Nest the replay options `mask` and  `block` to give them more context.
Remove overrides for `isReplaySelected` as they are not needed anymore.
(It is set in `ReplayOnboardingLayout`)

---------

Co-authored-by: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com>

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

@@ -46,10 +46,12 @@ export interface DocsParams<
   projectId: Project['id'];
   projectSlug: Project['slug'];
   sourcePackageRegistries: {isLoading: boolean; data?: ReleaseRegistrySdk};
-  block?: boolean;
   cdn?: string;
-  mask?: boolean;
   newOrg?: boolean;
+  replayOptions?: {
+    block?: boolean;
+    mask?: boolean;
+  };
 }
 
 export interface NextStep {

static/app/components/onboarding/gettingStartedDoc/utils/index.tsx

@@ -83,10 +83,7 @@ export const getReplayJsLoaderSdkSetupSnippet = params => `
   Sentry.onLoad(function() {
     Sentry.init({
       integrations: [
-        new Sentry.Replay(${getReplayConfigOptions({
-          mask: params.mask,
-          block: params.block,
-        })}),
+        new Sentry.Replay(${getReplayConfigOptions(params.replayConfigOptions)}),
       ],
       // Session Replay
       replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
@@ -128,7 +125,7 @@ export const getReplayConfigOptions = ({
 }: {
   block?: boolean;
   mask?: boolean;
-}) => {
+} = {}) => {
   if (mask && block) {
     return ``;
   }

static/app/components/replaysOnboarding/replayOnboardingLayout.tsx

@@ -50,8 +50,10 @@ export function ReplayOnboardingLayout({
       },
       platformOptions: selectedOptions,
       newOrg,
-      mask,
-      block,
+      replayOptions: {
+        mask,
+        block,
+      },
     };
 
     return {

static/app/gettingStartedDocs/capacitor/capacitor.tsx

@@ -75,10 +75,9 @@ const getSentryInitLayout = (params: Params, siblingOption: string): string => {
   }${
     params.isReplaySelected
       ? `
-          new ${getSiblingImportName(siblingOption)}.Replay(${getReplayConfigOptions({
-            mask: params.mask,
-            block: params.block,
-          })}),`
+          new ${getSiblingImportName(siblingOption)}.Replay(${getReplayConfigOptions(
+            params.replayOptions
+          )}),`
       : ''
   }
   ],${
@@ -416,7 +415,7 @@ const replayOnboarding: OnboardingConfig<PlatformOptions> = {
         link: 'https://docs.sentry.io/platforms/javascript/guides/capacitor/session-replay/',
       }),
       configurations: getSetupConfiguration({
-        params: {...params, isReplaySelected: true},
+        params,
         showExtraStep: false,
         showDescription: false,
       }),

static/app/gettingStartedDocs/electron/electron.tsx

@@ -135,8 +135,8 @@ const replayOnboarding: OnboardingConfig = {
               code: getReplaySDKSetupSnippet({
                 importStatement: `import * as Sentry from "@sentry/electron";`,
                 dsn: params.dsn,
-                mask: params.mask,
-                block: params.block,
+                mask: params.replayOptions?.mask,
+                block: params.replayOptions?.block,
               }),
             },
           ],

static/app/gettingStartedDocs/javascript/angular.tsx

@@ -213,10 +213,7 @@ function getSdkSetupSnippet(params: Params) {
     }${
       params.isReplaySelected
         ? `
-          new Sentry.Replay(${getReplayConfigOptions({
-            mask: params.mask,
-            block: params.block,
-          })}),`
+          new Sentry.Replay(${getReplayConfigOptions(params.replayOptions)}),`
         : ''
     }
   ],${
@@ -284,7 +281,7 @@ const replayOnboarding: OnboardingConfig<PlatformOptions> = {
               label: 'JavaScript',
               value: 'javascript',
               language: 'javascript',
-              code: getSdkSetupSnippet({...params, isReplaySelected: true}),
+              code: getSdkSetupSnippet(params),
             },
           ],
         },

static/app/gettingStartedDocs/javascript/astro.tsx

@@ -213,8 +213,8 @@ const replayOnboarding: OnboardingConfig = {
               code: getReplaySDKSetupSnippet({
                 importStatement: `import * as Sentry from "@sentry/astro";`,
                 dsn: params.dsn,
-                mask: params.mask,
-                block: params.block,
+                mask: params.replayOptions?.mask,
+                block: params.replayOptions?.block,
               }),
             },
           ],

static/app/gettingStartedDocs/javascript/ember.tsx

@@ -35,10 +35,7 @@ Sentry.init({
   }${
     params.isReplaySelected
       ? `
-        new Sentry.Replay(${getReplayConfigOptions({
-          mask: params.mask,
-          block: params.block,
-        })}),`
+        new Sentry.Replay(${getReplayConfigOptions(params.replayOptions)}),`
       : ''
   }
 ],${
@@ -180,7 +177,7 @@ const replayOnboarding: OnboardingConfig = {
               label: 'JavaScript',
               value: 'javascript',
               language: 'javascript',
-              code: getSdkSetupSnippet({...params, isReplaySelected: true}),
+              code: getSdkSetupSnippet(params),
             },
           ],
         },

static/app/gettingStartedDocs/javascript/gatsby.tsx

@@ -30,10 +30,7 @@ Sentry.init({
   }${
     params.isReplaySelected
       ? `
-        new Sentry.Replay(${getReplayConfigOptions({
-          mask: params.mask,
-          block: params.block,
-        })}),`
+        new Sentry.Replay(${getReplayConfigOptions(params.replayOptions)}),`
       : ''
   }
 ],${
@@ -198,7 +195,7 @@ const replayOnboarding: OnboardingConfig = {
       description: getReplayConfigureDescription({
         link: 'https://docs.sentry.io/platforms/javascript/guides/gatsby/session-replay/',
       }),
-      configurations: [getConfigureStep({...params, isReplaySelected: true})],
+      configurations: [getConfigureStep(params)],
       additionalInfo: tct(
         'Note: If [codeGatsby:gatsby-config.js] has any settings for the [codeSentry:@sentry/gatsby] plugin, they need to be moved into [codeConfig:sentry.config.js]. The [codeGatsby:gatsby-config.js] file does not support non-serializable options, like [codeNew:new Replay()].',
         {

static/app/gettingStartedDocs/javascript/javascript.tsx

@@ -31,10 +31,7 @@ Sentry.init({
   }${
     params.isReplaySelected
       ? `
-        new Sentry.Replay(${getReplayConfigOptions({
-          mask: params.mask,
-          block: params.block,
-        })}),`
+        new Sentry.Replay(${getReplayConfigOptions(params.replayOptions)}),`
       : ''
   }
 ],${
@@ -176,7 +173,7 @@ const replayOnboarding: OnboardingConfig = {
               label: 'JavaScript',
               value: 'javascript',
               language: 'javascript',
-              code: getSdkSetupSnippet({...params, isReplaySelected: true}),
+              code: getSdkSetupSnippet(params),
             },
           ],
         },