ref(onboarding): Simplify next steps logic (#72676)

Allow `nextSteps` entries to be `null` to ease the process of making
them conditional.

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

@@ -138,13 +138,15 @@ export function OnboardingLayout({
             <Divider />
             <h4>{t('Next Steps')}</h4>
             <List symbol="bullet">
-              {nextSteps.map(step => (
-                <ListItem key={step.name}>
-                  <ExternalLink href={step.link}>{step.name}</ExternalLink>
-                  {': '}
-                  {step.description}
-                </ListItem>
-              ))}
+              {nextSteps
+                .filter((step): step is Exclude<typeof step, null> => step !== null)
+                .map(step => (
+                  <ListItem key={step.name}>
+                    <ExternalLink href={step.link}>{step.name}</ExternalLink>
+                    {': '}
+                    {step.description}
+                  </ListItem>
+                ))}
             </List>
           </Fragment>
         )}

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

@@ -74,7 +74,7 @@ export interface OnboardingConfig<
       install: StepProps[];
       verify: StepProps[];
       introduction?: React.ReactNode | React.ReactNode[];
-      nextSteps?: NextStep[];
+      nextSteps?: (NextStep | null)[];
     },
     DocsParams<PlatformOptions>
   > {}

static/app/gettingStartedDocs/capacitor/capacitor.tsx

@@ -20,7 +20,6 @@ import {
   getReplayConfigOptions,
   getReplayConfigureDescription,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
-import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {t, tct} from 'sentry/locale';
 
 export enum SiblingOption {
@@ -114,30 +113,6 @@ ${getFeedbackConfigOptions(params.feedbackOptions)}}),`
   }`;
 };
 
-const getNextStep = (
-  params: Params
-): {
-  description: string;
-  id: string;
-  link: string;
-  name: string;
-}[] => {
-  let nextStepDocs = [...nextSteps];
-
-  if (params.isPerformanceSelected) {
-    nextStepDocs = nextStepDocs.filter(
-      step => step.id !== ProductSolution.PERFORMANCE_MONITORING
-    );
-  }
-
-  if (params.isReplaySelected) {
-    nextStepDocs = nextStepDocs.filter(
-      step => step.id !== ProductSolution.SESSION_REPLAY
-    );
-  }
-  return nextStepDocs;
-};
-
 const isAngular = (siblingOption: string): boolean =>
   siblingOption === SiblingOption.ANGULARV10 ||
   siblingOption === SiblingOption.ANGULARV12;
@@ -167,62 +142,60 @@ 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
-            )}@^7`,
-          },
-          {
-            label: 'yarn',
-            value: 'yarn',
-            language: 'bash',
-            code: `yarn add @sentry/capacitor ${getNpmPackage(
-              params.platformOptions.siblingOption
-            )}@^7 --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 => getInstallStep(params),
+  install: (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
+              )}@^7`,
+            },
+            {
+              label: 'yarn',
+              value: 'yarn',
+              language: 'bash',
+              code: `yarn add @sentry/capacitor ${getNpmPackage(
+                params.platformOptions.siblingOption
+              )}@^7 --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>
+          ),
+        },
+      ],
+    },
+  ],
   configure: params => [
     {
       type: StepType.CONFIGURE,
@@ -248,36 +221,38 @@ const onboarding: OnboardingConfig<PlatformOptions> = {
       ],
     },
   ],
-  nextSteps: params => getNextStep(params),
+  nextSteps: params => [
+    {
+      id: 'capacitor-android-setup',
+      name: t('Capacitor 2 Setup'),
+      description: t(
+        'If you are using Capacitor 2 or older, follow this step to add required changes in order to initialize the Capacitor SDK on Android.'
+      ),
+      link: 'https://docs.sentry.io/platforms/javascript/guides/capacitor/?#capacitor-2---android-specifics',
+    },
+    params.isPerformanceSelected
+      ? null
+      : {
+          id: 'performance-monitoring',
+          name: t('Performance Monitoring'),
+          description: t(
+            'Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries.'
+          ),
+          link: 'https://docs.sentry.io/platforms/javascript/guides/capacitor/performance/',
+        },
+    params.isReplaySelected
+      ? null
+      : {
+          id: 'session-replay',
+          name: t('Session Replay'),
+          description: t(
+            'Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application.'
+          ),
+          link: 'https://docs.sentry.io/platforms/javascript/guides/capacitor/session-replay/',
+        },
+  ],
 };
 
-export const nextSteps = [
-  {
-    id: 'capacitor-android-setup',
-    name: t('Capacitor 2 Setup'),
-    description: t(
-      'If you are using Capacitor 2 or older, follow this step to add required changes in order to initialize the Capacitor SDK on Android.'
-    ),
-    link: 'https://docs.sentry.io/platforms/javascript/guides/capacitor/?#capacitor-2---android-specifics',
-  },
-  {
-    id: 'performance-monitoring',
-    name: t('Performance Monitoring'),
-    description: t(
-      'Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries.'
-    ),
-    link: 'https://docs.sentry.io/platforms/javascript/guides/capacitor/performance/',
-  },
-  {
-    id: 'session-replay',
-    name: t('Session Replay'),
-    description: t(
-      'Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application.'
-    ),
-    link: 'https://docs.sentry.io/platforms/javascript/guides/capacitor/session-replay/',
-  },
-];
-
 function getSiblingImportsSetupConfiguration(siblingOption: string): string {
   switch (siblingOption) {
     case SiblingOption.VUE3:
@@ -425,7 +400,7 @@ function getSiblingImportName(siblingOption: string): string {
 }
 
 const replayOnboarding: OnboardingConfig<PlatformOptions> = {
-  install: params => getInstallStep(params),
+  install: params => onboarding.install(params),
   configure: params => [
     {
       type: StepType.CONFIGURE,
@@ -445,7 +420,7 @@ const replayOnboarding: OnboardingConfig<PlatformOptions> = {
 };
 
 const feedbackOnboarding: OnboardingConfig<PlatformOptions> = {
-  install: (params: Params) => getInstallStep(params),
+  install: (params: Params) => onboarding.install(params),
   configure: (params: Params) => [
     {
       type: StepType.CONFIGURE,