ref(replays): [4/4] migrate capacitor and angular onboarding docs (#61232)

Closes https://github.com/getsentry/sentry/issues/61001

Lots of refactoring to come to make these files slimmer and reduce
duplication of code

<img width="492" alt="SCR-20231205-rpit"
src="https://github.com/getsentry/sentry/assets/56095982/01924ed4-f84f-49ac-92b3-ad69db3c802b">
<img width="500" alt="SCR-20231205-rphc"
src="https://github.com/getsentry/sentry/assets/56095982/1b1cb0ee-c436-46be-834c-311f1541858d">

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

@@ -96,6 +96,10 @@ type ConfigurationType = {
    * A brief description of the configuration
    */
   description?: React.ReactNode;
+  /**
+   * Header to be placed above the configuration
+   */
+  header?: React.ReactNode;
   /**
    * The language of the code to be rendered (python, javascript, etc)
    */
@@ -142,6 +146,7 @@ function getConfiguration({
   description,
   code,
   language,
+  header,
   additionalInfo,
   onCopy,
   onSelectAndCopy,
@@ -150,6 +155,7 @@ function getConfiguration({
   return (
     <Configuration>
       {description && <Description>{description}</Description>}
+      {header && <Header>{header}</Header>}
       {Array.isArray(code) ? (
         <TabbedCodeSnippet
           tabs={code}
@@ -236,6 +242,8 @@ const Description = styled('div')`
   }
 `;
 
+const Header = styled(Description)``;
+
 const AdditionalInfo = styled(Description)``;
 
 const GeneralAdditionalInfo = styled(Description)`

static/app/gettingStartedDocs/replay-onboarding/capacitor/capacitor.tsx

@@ -0,0 +1,160 @@
+import ExternalLink from 'sentry/components/links/externalLink';
+import {Layout, LayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/layout';
+import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDocumentation';
+import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import {t, tct} from 'sentry/locale';
+import type {Organization, PlatformKey} from 'sentry/types';
+
+type StepProps = {
+  newOrg: boolean;
+  organization: Organization;
+  platformKey: PlatformKey;
+  projectId: string;
+  sentryInitContent: string;
+};
+
+// Configuration Start
+const replayIntegration = `
+new Sentry.Replay(),
+`;
+
+const replayOtherConfig = `
+// This sets the sample rate to be 10%. You may want this to be 100% while
+// in development and sample at a lower rate in production.
+replaysSessionSampleRate: 0.1,
+// If the entire session is not sampled, use the below sample rate to sample
+// sessions when an error occurs.
+replaysOnErrorSampleRate: 1.0,
+`;
+
+export const steps = ({
+  sentryInitContent,
+}: Partial<StepProps> = {}): LayoutProps['steps'] => [
+  {
+    type: StepType.INSTALL,
+    description: t(
+      'Install the Sentry Capacitor SDK alongside the corresponding Sentry SDK for the framework you are using.'
+    ),
+    configurations: [
+      {
+        language: 'bash',
+        header: tct('Using [code:NPM:]', {code: <code />}),
+        code: [
+          {
+            label: 'Angular',
+            value: 'angular',
+            language: 'bash',
+            code: `npm install --save @sentry/capacitor @sentry/angular-ivy`,
+          },
+          {
+            label: 'React',
+            value: 'react',
+            language: 'bash',
+            code: `npm install --save @sentry/capacitor @sentry/react`,
+          },
+          {
+            label: 'Vue',
+            value: 'vue',
+            language: 'bash',
+            code: `npm install --save @sentry/capacitor @sentry/vue`,
+          },
+          {
+            label: 'Other',
+            value: 'other',
+            language: 'bash',
+            code: `npm install --save @sentry/capacitor @sentry/browser`,
+          },
+        ],
+      },
+      {
+        language: 'bash',
+        header: tct('Using [code:Yarn:]', {code: <code />}),
+        code: [
+          {
+            label: 'Angular',
+            value: 'angular',
+            language: 'bash',
+            code: `yarn add @sentry/capacitor @sentry/angular-ivy`,
+          },
+          {
+            label: 'React',
+            value: 'react',
+            language: 'bash',
+            code: `yarn add @sentry/capacitor @sentry/react`,
+          },
+          {
+            label: 'Vue',
+            value: 'vue',
+            language: 'bash',
+            code: `yarn add @sentry/capacitor @sentry/vue`,
+          },
+          {
+            label: 'Other',
+            value: 'other',
+            language: 'bash',
+            code: `yarn add @sentry/capacitor @sentry/browser`,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: StepType.CONFIGURE,
+    description: tct(
+      'Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set using the [code:integrations] constructor. Learn more about configuring Session Replay by reading the [link:configuration docs].',
+      {
+        code: <code />,
+        link: (
+          <ExternalLink href="https://docs.sentry.io/platforms/javascript/session-replay/" />
+        ),
+      }
+    ),
+    configurations: [
+      {
+        language: 'javascript',
+        code: `
+        import * as Sentry from "@sentry/capacitor";
+
+        Sentry.init({
+          ${sentryInitContent}
+        });
+        `,
+      },
+    ],
+  },
+];
+
+// Configuration End
+
+export function GettingStartedWithCapacitorReplay({
+  dsn,
+  organization,
+  newOrg,
+  platformKey,
+  projectId,
+  ...props
+}: ModuleProps) {
+  const integrations = replayIntegration.trim();
+  const otherConfigs = replayOtherConfig.trim();
+  let sentryInitContent: string[] = [`dsn: "${dsn}",`];
+  sentryInitContent = sentryInitContent.concat('integrations: [', integrations, '],');
+  sentryInitContent = sentryInitContent.concat(otherConfigs);
+
+  return (
+    <Layout
+      steps={steps({
+        sentryInitContent: sentryInitContent.join('\n'),
+        organization,
+        newOrg,
+        platformKey,
+        projectId,
+      })}
+      platformKey={platformKey}
+      newOrg={newOrg}
+      hideHeader
+      {...props}
+    />
+  );
+}
+
+export default GettingStartedWithCapacitorReplay;

static/app/gettingStartedDocs/replay-onboarding/javascript/angular.tsx

@@ -0,0 +1,118 @@
+import ExternalLink from 'sentry/components/links/externalLink';
+import {Layout, LayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/layout';
+import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDocumentation';
+import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import {tct} from 'sentry/locale';
+import type {Organization, PlatformKey} from 'sentry/types';
+
+type StepProps = {
+  newOrg: boolean;
+  organization: Organization;
+  platformKey: PlatformKey;
+  projectId: string;
+  sentryInitContent: string;
+};
+
+// Configuration Start
+const replayIntegration = `
+new Sentry.Replay(),
+`;
+
+const replayOtherConfig = `
+// This sets the sample rate to be 10%. You may want this to be 100% while
+// in development and sample at a lower rate in production.
+replaysSessionSampleRate: 0.1,
+// If the entire session is not sampled, use the below sample rate to sample
+// sessions when an error occurs.
+replaysOnErrorSampleRate: 1.0,
+`;
+
+export const steps = ({
+  sentryInitContent,
+}: Partial<StepProps> = {}): LayoutProps['steps'] => [
+  {
+    type: StepType.INSTALL,
+    description: tct(
+      'In order to use Session Replay, you will need version 7.27.0 of [codeAngular:@sentry/angular] or [codeIvy:@sentry/angular-ivy] at minimum. You do not need to install any additional packages.',
+      {codeAngular: <code />, codeIvy: <code />}
+    ),
+    configurations: [
+      {
+        language: 'bash',
+        code: [
+          {
+            label: 'npm',
+            value: 'npm',
+            language: 'bash',
+            code: `# Angular 12 and newer: \nnpm install --save @sentry/angular-ivy \n\n# Angular 10 and 11: \nnpm install --save @sentry/angular`,
+          },
+          {
+            label: 'yarn',
+            value: 'yarn',
+            language: 'bash',
+            code: `# Angular 12 and newer:\nyarn add @sentry/angular-ivy\n\n# Angular 10 and 11:\nyarn add @sentry/angular`,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: StepType.CONFIGURE,
+    description: tct(
+      'Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set using the [code:integrations] constructor. Learn more about configuring Session Replay by reading the [link:configuration docs].',
+      {
+        code: <code />,
+        link: (
+          <ExternalLink href="https://docs.sentry.io/platforms/javascript/session-replay/" />
+        ),
+      }
+    ),
+    configurations: [
+      {
+        language: 'javascript',
+        code: `
+        import * as Sentry from "@sentry/angular-ivy";
+
+        Sentry.init({
+          ${sentryInitContent}
+        });
+        `,
+      },
+    ],
+  },
+];
+
+// Configuration End
+
+export function GettingStartedWithAngularReplay({
+  dsn,
+  organization,
+  newOrg,
+  platformKey,
+  projectId,
+  ...props
+}: ModuleProps) {
+  const integrations = replayIntegration.trim();
+  const otherConfigs = replayOtherConfig.trim();
+  let sentryInitContent: string[] = [`dsn: "${dsn}",`];
+  sentryInitContent = sentryInitContent.concat('integrations: [', integrations, '],');
+  sentryInitContent = sentryInitContent.concat(otherConfigs);
+
+  return (
+    <Layout
+      steps={steps({
+        sentryInitContent: sentryInitContent.join('\n'),
+        organization,
+        newOrg,
+        platformKey,
+        projectId,
+      })}
+      platformKey={platformKey}
+      newOrg={newOrg}
+      hideHeader
+      {...props}
+    />
+  );
+}
+
+export default GettingStartedWithAngularReplay;

static/app/gettingStartedDocs/replay-onboarding/javascript/gatsby.tsx

@@ -1,5 +1,3 @@
-import {Fragment} from 'react';
-
 import ExternalLink from 'sentry/components/links/externalLink';
 import {Layout, LayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/layout';
 import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDocumentation';
@@ -108,6 +106,15 @@ export const steps = ({
         `,
       },
     ],
+    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()].',
+      {
+        codeGatsby: <code />,
+        codeSentry: <code />,
+        codeConfig: <code />,
+        codeNew: <code />,
+      }
+    ),
   },
 ];
 
@@ -128,33 +135,19 @@ export function GettingStartedWithGatsbyReplay({
   sentryInitContent = sentryInitContent.concat(otherConfigs);
 
   return (
-    <Fragment>
-      <Layout
-        steps={steps({
-          sentryInitContent: sentryInitContent.join('\n'),
-          organization,
-          newOrg,
-          platformKey,
-          projectId,
-        })}
-        platformKey={platformKey}
-        newOrg={newOrg}
-        hideHeader
-        {...props}
-      />
-      <div>
-        <br />
-        {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()].',
-          {
-            codeGatsby: <code />,
-            codeSentry: <code />,
-            codeConfig: <code />,
-            codeNew: <code />,
-          }
-        )}
-      </div>
-    </Fragment>
+    <Layout
+      steps={steps({
+        sentryInitContent: sentryInitContent.join('\n'),
+        organization,
+        newOrg,
+        platformKey,
+        projectId,
+      })}
+      platformKey={platformKey}
+      newOrg={newOrg}
+      hideHeader
+      {...props}
+    />
   );
 }
 

static/app/gettingStartedDocs/replay-onboarding/javascript/nextjs.tsx

@@ -50,13 +50,9 @@ export const steps = ({
   {
     type: StepType.CONFIGURE,
     description: tct(
-      'Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set using the [codeIntegrations:integrations] constructor. Learn more about configuring Session Replay by reading the [link:configuration docs]. [break] [break] Alert: The Replay integration must be added to your [codeClient:sentry.client.config.js] file. Adding it into [codeServer:sentry.server.config.js] or [codeEdge:sentry.edge.config.js] may break your build.',
+      'Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set using the [codeIntegrations:integrations] constructor. Learn more about configuring Session Replay by reading the [link:configuration docs].',
       {
         codeIntegrations: <code />,
-        codeClient: <code />,
-        codeServer: <code />,
-        codeEdge: <code />,
-        break: <br />,
         link: (
           <ExternalLink href="https://docs.sentry.io/platforms/javascript/session-replay/" />
         ),
@@ -74,6 +70,10 @@ export const steps = ({
         `,
       },
     ],
+    additionalInfo: tct(
+      'Note: The Replay integration must be added to your [codeClient:sentry.client.config.js] file. Adding it into [codeServer:sentry.server.config.js] or [codeEdge:sentry.edge.config.js] may break your build.',
+      {codeClient: <code />, codeServer: <code />, codeEdge: <code />}
+    ),
   },
 ];
 

static/app/gettingStartedDocs/replay-onboarding/javascript/remix.tsx

@@ -1,5 +1,3 @@
-import {Fragment} from 'react';
-
 import ExternalLink from 'sentry/components/links/externalLink';
 import {Layout, LayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/layout';
 import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDocumentation';
@@ -72,6 +70,10 @@ export const steps = ({
         `,
       },
     ],
+    additionalInfo: tct(
+      'Note: The Replay integration only needs to be added to your [codeEntry:entry.client.tsx] file. It will not run if it is added into [codeSentry:sentry.server.config.js].',
+      {codeEntry: <code />, codeSentry: <code />}
+    ),
   },
 ];
 
@@ -92,28 +94,19 @@ export function GettingStartedWithRemixReplay({
   sentryInitContent = sentryInitContent.concat(otherConfigs);
 
   return (
-    <Fragment>
-      <Layout
-        steps={steps({
-          sentryInitContent: sentryInitContent.join('\n'),
-          organization,
-          newOrg,
-          platformKey,
-          projectId,
-        })}
-        platformKey={platformKey}
-        newOrg={newOrg}
-        hideHeader
-        {...props}
-      />
-      <div>
-        <br />
-        {tct(
-          'Note: The Replay integration only needs to be added to your [codeEntry:entry.client.tsx] file. It will not run if it is added into [codeSentry:sentry.server.config.js].',
-          {codeEntry: <code />, codeSentry: <code />}
-        )}
-      </div>
-    </Fragment>
+    <Layout
+      steps={steps({
+        sentryInitContent: sentryInitContent.join('\n'),
+        organization,
+        newOrg,
+        platformKey,
+        projectId,
+      })}
+      platformKey={platformKey}
+      newOrg={newOrg}
+      hideHeader
+      {...props}
+    />
   );
 }