ref(replay onboarding): convert vue and capacitor files (#61647)

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

In this PR:
- [x] vue and capacitor integrated for replay onboarding
- [x] deleted all old files and clean up extraneous code in
  - [x]  `gettingStartedDocs/replay-onboarding/`
  - [x]  `gettingStartedDoc/layout.tsx` (`hideHeader`)
- [x] `gettingStartedDoc/step.tsx` (`header` prop and
`StepType.REGISTER`)
  - [x]  `replaysOnboarding/sidebar.tsx` (`migrations = [] `not needed)

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

@@ -23,7 +23,6 @@ const ProductSelectionAvailabilityHook = HookOrDefault({
 export type LayoutProps = {
   projectSlug: string;
   steps: StepProps[];
-  hideHeader?: boolean;
   /**
    * An introduction displayed before the steps
    */
@@ -42,25 +41,22 @@ export function Layout({
   platformOptions,
   introduction,
   projectSlug,
-  hideHeader,
 }: LayoutProps) {
   const organization = useOrganization();
 
   return (
     <AuthTokenGeneratorProvider projectSlug={projectSlug}>
       <Wrapper>
-        {!hideHeader && (
-          <Header>
-            {introduction && <Introduction>{introduction}</Introduction>}
-            <ProductSelectionAvailabilityHook
-              organization={organization}
-              platform={platformKey}
-            />
-            {platformOptions ? (
-              <PlatformOptionsControl platformOptions={platformOptions} />
-            ) : null}
-          </Header>
-        )}
+        <Header>
+          {introduction && <Introduction>{introduction}</Introduction>}
+          <ProductSelectionAvailabilityHook
+            organization={organization}
+            platform={platformKey}
+          />
+          {platformOptions ? (
+            <PlatformOptionsControl platformOptions={platformOptions} />
+          ) : null}
+        </Header>
         <Divider withBottomMargin={newOrg} />
         <Steps>
           {steps.map(step => (

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

@@ -29,7 +29,6 @@ export type ModuleProps = {
   dsn: string;
   projectSlug: Project['slug'];
   activeProductSelection?: ProductSolution[];
-  hideHeader?: boolean;
   newOrg?: boolean;
   organization?: Organization;
   platformKey?: PlatformKey;

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

@@ -10,14 +10,12 @@ import {space} from 'sentry/styles/space';
 
 export enum StepType {
   INSTALL = 'install',
-  REGISTER = 'register',
   CONFIGURE = 'configure',
   VERIFY = 'verify',
 }
 
 export const StepTitle = {
   [StepType.INSTALL]: t('Install'),
-  [StepType.REGISTER]: t('Register'),
   [StepType.CONFIGURE]: t('Configure SDK'),
   [StepType.VERIFY]: t('Verify'),
 };
@@ -98,10 +96,6 @@ 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)
    */
@@ -152,7 +146,6 @@ function getConfiguration({
   description,
   code,
   language,
-  header,
   additionalInfo,
   onCopy,
   onSelectAndCopy,
@@ -161,7 +154,6 @@ function getConfiguration({
   return (
     <Configuration>
       {description && <Description>{description}</Description>}
-      {header && <Header>{header}</Header>}
       {Array.isArray(code) ? (
         <TabbedCodeSnippet
           tabs={code}
@@ -276,8 +268,6 @@ const Description = styled('div')`
   }
 `;
 
-const Header = styled(Description)``;
-
 const AdditionalInfo = styled(Description)``;
 
 const GeneralAdditionalInfo = styled(Description)`

static/app/components/replaysOnboarding/sidebar.tsx

@@ -260,21 +260,7 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
     );
   }
 
-  const migrated = [
-    'javascript',
-    'javascript-react',
-    'javascript-ember',
-    'javascript-sveltekit',
-    'javascript-svelte',
-    'javascript-astro',
-    'javascript-nextjs',
-    'javascript-remix',
-    'javascript-gatsby',
-    'javascript-angular',
-    'electron',
-  ];
   const newOnboarding = organization.features.includes('session-replay-new-zero-state');
-  const showNewOnboardingUI = newOnboarding && migrated.includes(currentPlatform.id);
 
   return (
     <Fragment>
@@ -284,7 +270,7 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
           {platform: currentPlatform?.name || currentProject.slug}
         )}
       </IntroText>
-      {showNewOnboardingUI ? (
+      {newOnboarding ? (
         <SdkDocumentation
           platform={currentPlatform}
           organization={organization}

static/app/gettingStartedDocs/capacitor/capacitor.tsx

@@ -5,7 +5,10 @@ import type {
   OnboardingConfig,
   PlatformOption,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
-import {getUploadSourceMapsStep} from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {
+  getReplayConfigureDescription,
+  getUploadSourceMapsStep,
+} from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {t, tct} from 'sentry/locale';
 
@@ -143,64 +146,66 @@ const performanceAngularErrorHandler = `,
   multi: true,
 },`;
 
+const getInstallStep = (params: Params) => [
+  {
+    type: StepType.INSTALL,
+    description: (
+      <p>
+        {tct(
+          `Install the Sentry Capacitor SDK as a dependency using [codeNpm:npm] or [codeYarn:yarn], alongside the Sentry [siblingName:] SDK:`,
+          {
+            codeYarn: <code />,
+            codeNpm: <code />,
+            siblingName: getSiblingName(params.platformOptions.siblingOption),
+          }
+        )}
+      </p>
+    ),
+    configurations: [
+      {
+        language: 'bash',
+        code: [
+          {
+            label: 'npm',
+            value: 'npm',
+            language: 'bash',
+            code: `npm install --save @sentry/capacitor ${getNpmPackage(
+              params.platformOptions.siblingOption
+            )}`,
+          },
+          {
+            label: 'yarn',
+            value: 'yarn',
+            language: 'bash',
+            code: `yarn add @sentry/capacitor ${getNpmPackage(
+              params.platformOptions.siblingOption
+            )} --exact`,
+          },
+        ],
+      },
+      {
+        additionalInfo: (
+          <p>
+            {tct(
+              `The version of the Sentry [siblingName:] SDK must match with the version referred by Sentry Capacitor. To check which version of the Sentry [siblingName:] SDK is installed, use the following command: [code:npm info @sentry/capacitor peerDependencies]`,
+              {
+                code: <code />,
+                siblingName: getSiblingName(params.platformOptions.siblingOption),
+              }
+            )}
+          </p>
+        ),
+      },
+    ],
+  },
+];
+
 const onboarding: OnboardingConfig<PlatformOptions> = {
-  install: params => [
-    {
-      type: StepType.INSTALL,
-      description: (
-        <p>
-          {tct(
-            `Install the Sentry Capacitor SDK as a dependency using [codeNpm:npm] or [codeYarn:yarn], alongside the Sentry [siblingName:] SDK:`,
-            {
-              codeYarn: <code />,
-              codeNpm: <code />,
-              siblingName: getSiblingName(params.platformOptions.siblingOption),
-            }
-          )}
-        </p>
-      ),
-      configurations: [
-        {
-          language: 'bash',
-          code: [
-            {
-              label: 'npm',
-              value: 'npm',
-              language: 'bash',
-              code: `npm install --save @sentry/capacitor ${getNpmPackage(
-                params.platformOptions.siblingOption
-              )}`,
-            },
-            {
-              label: 'yarn',
-              value: 'yarn',
-              language: 'bash',
-              code: `yarn add @sentry/capacitor ${getNpmPackage(
-                params.platformOptions.siblingOption
-              )} --exact`,
-            },
-          ],
-        },
-        {
-          additionalInfo: (
-            <p>
-              {tct(
-                `The version of the Sentry [siblingName:] SDK must match with the version referred by Sentry Capacitor. To check which version of the Sentry [siblingName:] SDK is installed, use the following command: [code:npm info @sentry/capacitor peerDependencies]`,
-                {
-                  code: <code />,
-                  siblingName: getSiblingName(params.platformOptions.siblingOption),
-                }
-              )}
-            </p>
-          ),
-        },
-      ],
-    },
-  ],
+  install: params => getInstallStep(params),
   configure: params => [
     {
       type: StepType.CONFIGURE,
-      configurations: getSetupConfiguration(params),
+      configurations: getSetupConfiguration({params, showExtraStep: true}),
     },
     getUploadSourceMapsStep({
       guideLink:
@@ -289,16 +294,23 @@ function getVueConstSetup(siblingOption: string): string {
   }
 }
 
-function getSetupConfiguration(params: Params) {
+function getSetupConfiguration({
+  params,
+  showExtraStep,
+}: {
+  params: Params;
+  showExtraStep: boolean;
+}) {
   const siblingOption = params.platformOptions.siblingOption;
   const sentryInitLayout = getSentryInitLayout(params, siblingOption);
 
   const configuration = [
     {
       description: tct(
-        `You should init the Sentry capacitor SDK in your main.ts file as soon as possible during application load up, before initializing Sentry [siblingName:]:`,
+        `You should init the Sentry capacitor SDK in your [code:main.ts] file as soon as possible during application load up, before initializing Sentry [siblingName:]:`,
         {
           siblingName: getSiblingName(siblingOption),
+          code: <code />,
         }
       ),
       language: 'javascript',
@@ -316,7 +328,7 @@ ${getSiblingImportName(siblingOption)}.init
 );`,
     },
   ];
-  if (isAngular(siblingOption)) {
+  if (isAngular(siblingOption) && showExtraStep) {
     configuration.push({
       description: tct(
         "The Sentry Angular SDK exports a function to instantiate ErrorHandler provider that will automatically send JavaScript errors captured by the Angular's error handler.",
@@ -387,9 +399,32 @@ function getSiblingImportName(siblingOption: string): string {
   }
 }
 
+const replayOnboarding: OnboardingConfig<PlatformOptions> = {
+  install: params => getInstallStep(params),
+  configure: params => [
+    {
+      type: StepType.CONFIGURE,
+      configurations: [
+        {
+          description: getReplayConfigureDescription({
+            link: 'https://docs.sentry.io/platforms/javascript/guides/capacitor/session-replay/',
+          }),
+          configurations: getSetupConfiguration({
+            params: {...params, isReplaySelected: true},
+            showExtraStep: false,
+          }),
+        },
+      ],
+    },
+  ],
+  verify: () => [],
+  nextSteps: () => [],
+};
+
 const docs: Docs<PlatformOptions> = {
   onboarding,
   platformOptions,
+  replayOnboardingNpm: replayOnboarding,
 };
 
 export default docs;

static/app/gettingStartedDocs/javascript/vue.tsx

@@ -5,7 +5,10 @@ import type {
   OnboardingConfig,
   PlatformOption,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
-import {getUploadSourceMapsStep} from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {
+  getReplayConfigureDescription,
+  getUploadSourceMapsStep,
+} from 'sentry/components/onboarding/gettingStartedDoc/utils';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {t, tct} from 'sentry/locale';
 
@@ -69,6 +72,26 @@ const getSentryInitLayout = (params: Params, siblingOption: string): string => {
   });`;
 };
 
+const getInstallConfig = () => [
+  {
+    language: 'bash',
+    code: [
+      {
+        label: 'npm',
+        value: 'npm',
+        language: 'bash',
+        code: `npm install --save @sentry/vue`,
+      },
+      {
+        label: 'yarn',
+        value: 'yarn',
+        language: 'bash',
+        code: `yarn add @sentry/vue`,
+      },
+    ],
+  },
+];
+
 const getNextStep = (
   params: Params
 ): {
@@ -108,30 +131,15 @@ const onboarding: OnboardingConfig<PlatformOptions> = {
           )}
         </p>
       ),
-      configurations: [
-        {
-          language: 'bash',
-          code: [
-            {
-              label: 'npm',
-              value: 'npm',
-              language: 'bash',
-              code: `npm install --save @sentry/vue`,
-            },
-            {
-              label: 'yarn',
-              value: 'yarn',
-              language: 'bash',
-              code: `yarn add @sentry/vue`,
-            },
-          ],
-        },
-      ],
+      configurations: getInstallConfig(),
     },
   ],
   configure: params => [
     {
       type: StepType.CONFIGURE,
+      description: t(
+        "Initialize Sentry as early as possible in your application's lifecycle."
+      ),
       configurations: getSetupConfiguration(params),
     },
     getUploadSourceMapsStep({
@@ -242,9 +250,6 @@ function getSetupConfiguration(params: Params) {
   const sentryInitLayout = getSentryInitLayout(params, siblingOption);
   const configuration = [
     {
-      description: t(
-        "Initialize Sentry as early as possible in your application's lifecycle."
-      ),
       language: 'javascript',
       code: `${getSiblingImportsSetupConfiguration(siblingOption)}
           import * as Sentry from "@sentry/vue";
@@ -258,9 +263,40 @@ function getSetupConfiguration(params: Params) {
   return configuration;
 }
 
+const replayOnboarding: OnboardingConfig<PlatformOptions> = {
+  install: () => [
+    {
+      type: StepType.INSTALL,
+      description: tct(
+        'You need a minimum version 7.27.0 of [code:@sentry/vue] in order to use Session Replay. You do not need to install any additional packages.',
+        {
+          code: <code />,
+        }
+      ),
+      configurations: getInstallConfig(),
+    },
+  ],
+  configure: params => [
+    {
+      type: StepType.CONFIGURE,
+      configurations: [
+        {
+          description: getReplayConfigureDescription({
+            link: 'https://docs.sentry.io/platforms/javascript/guides/vue/session-replay/',
+          }),
+          configurations: getSetupConfiguration({...params, isReplaySelected: true}),
+        },
+      ],
+    },
+  ],
+  verify: () => [],
+  nextSteps: () => [],
+};
+
 const docs: Docs<PlatformOptions> = {
   onboarding,
   platformOptions,
+  replayOnboardingNpm: replayOnboarding,
 };
 
 export default docs;

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

@@ -1,160 +0,0 @@
-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/vue.tsx

@@ -1,117 +0,0 @@
-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(
-      'The Replay integration is already included with the Vue SDK package.'
-    ),
-    configurations: [
-      {
-        language: 'bash',
-        code: [
-          {
-            label: 'npm',
-            value: 'npm',
-            language: 'bash',
-            code: 'npm install --save @sentry/vue',
-          },
-          {
-            label: 'yarn',
-            value: 'yarn',
-            language: 'bash',
-            code: 'yarn add @sentry/vue',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    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/vue";
-
-        Sentry.init({
-          ${sentryInitContent}
-        });
-        `,
-      },
-    ],
-  },
-];
-
-// Configuration End
-
-export function GettingStartedWithVueReplay({
-  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 GettingStartedWithVueReplay;