feat(onboarding): Simplify multi snippet docs javascript [part2] (#57200)

Simplify multi snippet docs for the platforms `node`, `node-awslambda`,
`node-azurefunctions`, `node-connect`, `node-express`, `node-koa`

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

static/app/gettingStartedDocs/node/awslambda.spec.tsx

@@ -10,7 +10,8 @@ describe('GettingStartedWithAwsLambda', function () {
 
     // Steps
     for (const step of steps({
-      installSnippet: 'test-install-snippet',
+      installSnippetYarn: 'test-install-snippet-yarn',
+      installSnippetNpm: 'test-install-snippet-npm',
       importContent: 'test-import-content',
       initContent: 'test-init-content',
       sourceMapStep: {

static/app/gettingStartedDocs/node/awslambda.tsx

@@ -16,12 +16,14 @@ import {
 interface StepsParams {
   importContent: string;
   initContent: string;
-  installSnippet: string;
+  installSnippetNpm: string;
+  installSnippetYarn: string;
   sourceMapStep: StepProps;
 }
 
 export const steps = ({
-  installSnippet,
+  installSnippetYarn,
+  installSnippetNpm,
   importContent,
   initContent,
   sourceMapStep,
@@ -31,8 +33,20 @@ export const steps = ({
     description: t('Add the Sentry Serverless SDK as a dependency:'),
     configurations: [
       {
-        language: 'bash',
-        code: installSnippet,
+        code: [
+          {
+            label: 'npm',
+            value: 'npm',
+            language: 'bash',
+            code: installSnippetNpm,
+          },
+          {
+            label: 'yarn',
+            value: 'yarn',
+            language: 'bash',
+            code: installSnippetYarn,
+          },
+        ],
       },
     ],
   },
@@ -92,10 +106,6 @@ export function GettingStartedWithAwsLambda({
 }: ModuleProps) {
   const productSelection = getProductSelectionMap(activeProductSelection);
 
-  const installSnippet = getInstallSnippet({
-    productSelection,
-    basePackage: '@sentry/serverless',
-  });
   const imports = getDefaulServerlessImports({productSelection});
   const integrations = getProductIntegrations({productSelection});
 
@@ -113,7 +123,16 @@ export function GettingStartedWithAwsLambda({
   return (
     <Layout
       steps={steps({
-        installSnippet,
+        installSnippetNpm: getInstallSnippet({
+          basePackage: '@sentry/serverless',
+          productSelection,
+          packageManager: 'npm',
+        }),
+        installSnippetYarn: getInstallSnippet({
+          basePackage: '@sentry/serverless',
+          productSelection,
+          packageManager: 'yarn',
+        }),
         importContent: imports.join('\n'),
         initContent,
         sourceMapStep: getUploadSourceMapsStep({

static/app/gettingStartedDocs/node/azurefunctions.spec.tsx

@@ -12,7 +12,8 @@ describe('GettingStartedWithAzurefunctions', function () {
 
     // Steps
     for (const step of steps({
-      installSnippet: 'test-install-snippet',
+      installSnippetYarn: 'test-install-snippet-yarn',
+      installSnippetNpm: 'test-install-snippet-npm',
       importContent: 'test-import-content',
       initContent: 'test-init-content',
       sourceMapStep: {

static/app/gettingStartedDocs/node/azurefunctions.tsx

@@ -16,12 +16,14 @@ import {
 interface StepsParams {
   importContent: string;
   initContent: string;
-  installSnippet: string;
+  installSnippetNpm: string;
+  installSnippetYarn: string;
   sourceMapStep: StepProps;
 }
 
 export const steps = ({
-  installSnippet,
+  installSnippetYarn,
+  installSnippetNpm,
   importContent,
   initContent,
   sourceMapStep,
@@ -31,8 +33,20 @@ export const steps = ({
     description: t('Add the Sentry Node SDK as a dependency:'),
     configurations: [
       {
-        language: 'bash',
-        code: installSnippet,
+        code: [
+          {
+            label: 'npm',
+            value: 'npm',
+            language: 'bash',
+            code: installSnippetNpm,
+          },
+          {
+            label: 'yarn',
+            value: 'yarn',
+            language: 'bash',
+            code: installSnippetYarn,
+          },
+        ],
       },
     ],
   },
@@ -93,7 +107,6 @@ export function GettingStartedWithAzurefunctions({
 }: ModuleProps) {
   const productSelection = getProductSelectionMap(activeProductSelection);
 
-  const installSnippet = getInstallSnippet({productSelection});
   const imports = getDefaultNodeImports({productSelection});
   const integrations = getProductIntegrations({productSelection});
 
@@ -111,7 +124,8 @@ export function GettingStartedWithAzurefunctions({
   return (
     <Layout
       steps={steps({
-        installSnippet,
+        installSnippetNpm: getInstallSnippet({productSelection, packageManager: 'npm'}),
+        installSnippetYarn: getInstallSnippet({productSelection, packageManager: 'yarn'}),
         importContent: imports.join('\n'),
         initContent,
         sourceMapStep: getUploadSourceMapsStep({

static/app/gettingStartedDocs/node/connect.spec.tsx

@@ -10,7 +10,8 @@ describe('GettingStartedWithConnect', function () {
 
     // Steps
     for (const step of steps({
-      installSnippet: 'test-install-snippet',
+      installSnippetYarn: 'test-install-snippet-yarn',
+      installSnippetNpm: 'test-install-snippet-npm',
       importContent: 'test-import-content',
       initContent: 'test-init-content',
       sourceMapStep: {

static/app/gettingStartedDocs/node/connect.tsx

@@ -16,12 +16,14 @@ import {
 interface StepsParams {
   importContent: string;
   initContent: string;
-  installSnippet: string;
+  installSnippetNpm: string;
+  installSnippetYarn: string;
   sourceMapStep: StepProps;
 }
 
 export const steps = ({
-  installSnippet,
+  installSnippetYarn,
+  installSnippetNpm,
   importContent,
   initContent,
   sourceMapStep,
@@ -31,8 +33,20 @@ export const steps = ({
     description: t('Add the Sentry Node SDK as a dependency:'),
     configurations: [
       {
-        language: 'bash',
-        code: installSnippet,
+        code: [
+          {
+            label: 'npm',
+            value: 'npm',
+            language: 'bash',
+            code: installSnippetNpm,
+          },
+          {
+            label: 'yarn',
+            value: 'yarn',
+            language: 'bash',
+            code: installSnippetYarn,
+          },
+        ],
       },
     ],
   },
@@ -93,7 +107,6 @@ export function GettingStartedWithConnect({
 }: ModuleProps) {
   const productSelection = getProductSelectionMap(activeProductSelection);
 
-  const installSnippet = getInstallSnippet({productSelection});
   const imports = getDefaultNodeImports({productSelection});
   imports.push('import connect from "connect";');
 
@@ -112,7 +125,8 @@ export function GettingStartedWithConnect({
   return (
     <Layout
       steps={steps({
-        installSnippet,
+        installSnippetNpm: getInstallSnippet({productSelection, packageManager: 'npm'}),
+        installSnippetYarn: getInstallSnippet({productSelection, packageManager: 'yarn'}),
         importContent: imports.join('\n'),
         initContent,
         sourceMapStep: getUploadSourceMapsStep({

static/app/gettingStartedDocs/node/express.spec.tsx

@@ -10,7 +10,8 @@ describe('GettingStartedWithExpress', function () {
 
     // Steps
     for (const step of steps({
-      installSnippet: 'test-install-snippet',
+      installSnippetYarn: 'test-install-snippet-yarn',
+      installSnippetNpm: 'test-install-snippet-npm',
       importContent: 'test-import-content',
       initContent: 'test-init-content',
       hasPerformanceMonitoring: true,

static/app/gettingStartedDocs/node/express.tsx

@@ -17,7 +17,8 @@ interface StepsParams {
   hasPerformanceMonitoring: boolean;
   importContent: string;
   initContent: string;
-  installSnippet: string;
+  installSnippetNpm: string;
+  installSnippetYarn: string;
   sourceMapStep: StepProps;
 }
 
@@ -29,7 +30,8 @@ const performanceIntegrations: string[] = [
 ];
 
 export const steps = ({
-  installSnippet,
+  installSnippetYarn,
+  installSnippetNpm,
   importContent,
   initContent,
   hasPerformanceMonitoring,
@@ -40,8 +42,20 @@ export const steps = ({
     description: t('Add the Sentry Node SDK as a dependency:'),
     configurations: [
       {
-        language: 'bash',
-        code: installSnippet,
+        code: [
+          {
+            label: 'npm',
+            value: 'npm',
+            language: 'bash',
+            code: installSnippetNpm,
+          },
+          {
+            label: 'yarn',
+            value: 'yarn',
+            language: 'bash',
+            code: installSnippetYarn,
+          },
+        ],
       },
     ],
   },
@@ -128,7 +142,6 @@ export function GettingStartedWithExpress({
 }: ModuleProps) {
   const productSelection = getProductSelectionMap(activeProductSelection);
 
-  const installSnippet = getInstallSnippet({productSelection});
   const imports = getDefaultNodeImports({productSelection});
   imports.push('import express from "express";');
 
@@ -151,7 +164,8 @@ export function GettingStartedWithExpress({
   return (
     <Layout
       steps={steps({
-        installSnippet,
+        installSnippetNpm: getInstallSnippet({productSelection, packageManager: 'npm'}),
+        installSnippetYarn: getInstallSnippet({productSelection, packageManager: 'yarn'}),
         importContent: imports.join('\n'),
         initContent,
         hasPerformanceMonitoring: productSelection['performance-monitoring'],

static/app/gettingStartedDocs/node/koa.spec.tsx

@@ -10,7 +10,8 @@ describe('GettingStartedWithKoa', function () {
 
     // Steps
     for (const step of steps({
-      installSnippet: 'test-install-snippet',
+      installSnippetYarn: 'test-install-snippet-yarn',
+      installSnippetNpm: 'test-install-snippet-npm',
       importContent: 'test-import-content',
       initContent: 'test-init-content',
       hasPerformanceMonitoring: true,

static/app/gettingStartedDocs/node/koa.tsx

@@ -17,7 +17,8 @@ interface StepsParams {
   hasPerformanceMonitoring: boolean;
   importContent: string;
   initContent: string;
-  installSnippet: string;
+  installSnippetNpm: string;
+  installSnippetYarn: string;
   sourceMapStep: StepProps;
 }
 
@@ -27,7 +28,8 @@ const performanceIntegrations: string[] = [
 ];
 
 export const steps = ({
-  installSnippet,
+  installSnippetYarn,
+  installSnippetNpm,
   importContent,
   initContent,
   hasPerformanceMonitoring,
@@ -38,8 +40,20 @@ export const steps = ({
     description: t('Add the Sentry Node SDK as a dependency:'),
     configurations: [
       {
-        language: 'bash',
-        code: installSnippet,
+        code: [
+          {
+            label: 'npm',
+            value: 'npm',
+            language: 'bash',
+            code: installSnippetNpm,
+          },
+          {
+            label: 'yarn',
+            value: 'yarn',
+            language: 'bash',
+            code: installSnippetYarn,
+          },
+        ],
       },
     ],
   },
@@ -186,7 +200,7 @@ export function GettingStartedWithKoa({
   const additionalPackages = productSelection['performance-monitoring']
     ? ['@sentry/utils']
     : [];
-  const installSnippet = getInstallSnippet({productSelection, additionalPackages});
+
   let imports = getDefaultNodeImports({productSelection});
   imports = imports.concat([
     'import { stripUrlQueryAndFragment } from "@sentry/utils";',
@@ -212,7 +226,16 @@ export function GettingStartedWithKoa({
   return (
     <Layout
       steps={steps({
-        installSnippet,
+        installSnippetNpm: getInstallSnippet({
+          additionalPackages,
+          productSelection,
+          packageManager: 'npm',
+        }),
+        installSnippetYarn: getInstallSnippet({
+          additionalPackages,
+          productSelection,
+          packageManager: 'yarn',
+        }),
         importContent: imports.join('\n'),
         initContent,
         hasPerformanceMonitoring: productSelection['performance-monitoring'],