ref(getting-started): move javascript to content blocks

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

@@ -1,8 +1,10 @@
 import {Alert} from 'sentry/components/core/alert';
 import {ExternalLink} from 'sentry/components/core/link';
 import type {
+  ContentBlock,
   DocsParams,
   OnboardingConfig,
+  OnboardingStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {t, tct} from 'sentry/locale';
@@ -125,26 +127,27 @@ export const getCrashReportModalIntroduction = () =>
     'Collect feedback on your errors by installing our crash-report modal. This allows users to submit feedback after they experience an error via an automatic modal that pops up after an error occurs. The default modal will prompt the user for their name, email address, and description of what occurred.'
   );
 
-export const getCrashReportModalInstallDescriptionJavaScript = () =>
-  tct(
+export const getCrashReportModalInstallDescriptionJavaScript = (): ContentBlock => ({
+  type: 'text',
+  text: tct(
     'You can collect feedback at the time the event is sent, using [code:beforeSend].',
     {code: <code />}
-  );
+  ),
+});
 
 export const getCrashReportModalConfigDescription = ({link}: {link: string}) =>
   tct(
     'There are many options you can pass to the [code:Sentry.showReportDialog] call to customize your form. Learn more about configuring the modal by reading the [link:configuration docs].',
     {code: <code />, link: <ExternalLink href={link} />}
   );
 
-const getCrashReportModalSnippetJavaScript = (params: any) => [
-  {
-    code: [
-      {
-        label: 'HTML',
-        value: 'html',
-        language: 'html',
-        code: `<script>
+const getCrashReportModalSnippetJavaScript = (params: DocsParams): ContentBlock => ({
+  type: 'code',
+  tabs: [
+    {
+      label: 'HTML',
+      language: 'html',
+      code: `<script>
   Sentry.init({
     dsn: "${params.dsn.public}",
     beforeSend(event, hint) {
@@ -156,16 +159,19 @@ const getCrashReportModalSnippetJavaScript = (params: any) => [
     },
   });
 </script>`,
-      },
-    ],
-  },
-];
+    },
+  ],
+});
 
-export const getCrashReportJavaScriptInstallStep = (params: any) => [
+export const getCrashReportJavaScriptInstallStep = (
+  params: DocsParams
+): OnboardingStep[] => [
   {
     type: StepType.INSTALL,
-    description: getCrashReportModalInstallDescriptionJavaScript(),
-    configurations: getCrashReportModalSnippetJavaScript(params),
+    content: [
+      getCrashReportModalInstallDescriptionJavaScript(),
+      getCrashReportModalSnippetJavaScript(params),
+    ],
   },
 ];
 

static/app/gettingStartedDocs/electron/electron.tsx

@@ -215,10 +215,11 @@ const crashReportOnboarding: OnboardingConfig = {
   install: (params: Params) => [
     {
       type: StepType.INSTALL,
-      description: getCrashReportModalInstallDescriptionJavaScript(),
-      configurations: [
+      content: [
+        getCrashReportModalInstallDescriptionJavaScript(),
         {
-          code: [
+          type: 'code',
+          tabs: [
             {
               label: 'JavaScript',
               value: 'javascript',

static/app/gettingStartedDocs/javascript/angular.tsx

@@ -4,7 +4,7 @@ import widgetCallout from 'sentry/components/onboarding/gettingStartedDoc/feedba
 import TracePropagationMessage from 'sentry/components/onboarding/gettingStartedDoc/replay/tracePropagationMessage';
 import {
   type BasePlatformOptions,
-  type Configuration,
+  type ContentBlock,
   type Docs,
   type DocsParams,
   type OnboardingConfig,
@@ -214,54 +214,11 @@ export const appConfig: ApplicationConfig = {
 };
 `;
 
-const getVerifySnippetTemplate = () => `
-<button (click)="throwTestError()">Test Sentry Error</button>
-`;
-
 const getVerifySnippetComponent = () => `
 public throwTestError(): void {
   throw new Error("Sentry Test Error");
 }`;
 
-function getVerifyConfiguration(): Configuration {
-  return {
-    description: t(
-      'To verify that everything is working as expected, you can trigger a test error in your app. As an example we will add a button that throws an error when being clicked to your main app component.'
-    ),
-    configurations: [
-      {
-        description: tct(
-          'First add the button element to your [code:app.component.html]:',
-          {code: <code />}
-        ),
-        code: [
-          {
-            label: 'HTML',
-            value: 'html',
-            language: 'html',
-            filename: 'app.component.html',
-            code: getVerifySnippetTemplate(),
-          },
-        ],
-      },
-      {
-        description: tct('Then, in your [code:app.component.ts] add the event handler:', {
-          code: <code />,
-        }),
-        code: [
-          {
-            label: 'TypeScript',
-            value: 'typescript',
-            language: 'typescript',
-            filename: 'app.component.ts',
-            code: getVerifySnippetComponent(),
-          },
-        ],
-      },
-    ],
-  };
-}
-
 const getInstallConfig = () => [
   {
     language: 'bash',
@@ -288,6 +245,27 @@ const getInstallConfig = () => [
   },
 ];
 
+const installSnippetBlock: ContentBlock = {
+  type: 'code',
+  tabs: [
+    {
+      label: 'npm',
+      language: 'bash',
+      code: 'npm install --save @sentry/angular',
+    },
+    {
+      label: 'yarn',
+      language: 'bash',
+      code: 'yarn add @sentry/angular',
+    },
+    {
+      label: 'pnpm',
+      language: 'bash',
+      code: 'pnpm install @sentry/angular',
+    },
+  ],
+};
+
 const onboarding: OnboardingConfig<PlatformOptions> = {
   introduction: () =>
     tct(
@@ -299,29 +277,44 @@ const onboarding: OnboardingConfig<PlatformOptions> = {
   install: () => [
     {
       type: StepType.INSTALL,
-      description: tct(
-        'Add the Sentry SDK as a dependency using [code:npm], [code:yarn] or [code:pnpm]:',
-        {code: <code />}
-      ),
-      configurations: getInstallConfig(),
+      content: [
+        {
+          type: 'text',
+          text: tct(
+            'Add the Sentry SDK as a dependency using [code:npm], [code:yarn] or [code:pnpm]:',
+            {code: <code />}
+          ),
+        },
+        installSnippetBlock,
+      ],
     },
   ],
   configure: (params: Params) => [
     {
       type: StepType.CONFIGURE,
-      configurations: [
+      content: [
         {
-          description: tct(
+          type: 'text',
+          text: tct(
             `Initialize the Sentry Angular SDK in your [code:main.ts] file as early as possible, before initializing Angular:`,
             {
               code: <code />,
             }
           ),
-          language: 'javascript',
-          code: getSdkSetupSnippet(params),
         },
         {
-          description: isModuleConfig(params)
+          type: 'code',
+          tabs: [
+            {
+              label: 'JavaScript',
+              language: 'javascript',
+              code: getSdkSetupSnippet(params),
+            },
+          ],
+        },
+        {
+          type: 'text',
+          text: isModuleConfig(params)
             ? tct(
                 "Register the Sentry Angular SDK's ErrorHandler and Tracing providers in your [code:app.module.ts] file:",
                 {code: <code />}
@@ -330,10 +323,18 @@ const onboarding: OnboardingConfig<PlatformOptions> = {
                 "Register the Sentry Angular SDK's ErrorHandler and Tracing providers in your [code:app.config.ts] file:",
                 {code: <code />}
               ),
-          language: 'javascript',
-          code: isModuleConfig(params)
-            ? getConfigureAppModuleSnippet()
-            : getConfigureAppConfigSnippet(),
+        },
+        {
+          type: 'code',
+          tabs: [
+            {
+              label: 'JavaScript',
+              language: 'javascript',
+              code: isModuleConfig(params)
+                ? getConfigureAppModuleSnippet()
+                : getConfigureAppConfigSnippet(),
+            },
+          ],
         },
       ],
     },
@@ -345,10 +346,52 @@ const onboarding: OnboardingConfig<PlatformOptions> = {
   verify: () => [
     {
       type: StepType.VERIFY,
-      configurations: [
-        getVerifyConfiguration(),
+      content: [
+        {
+          type: 'text',
+          text: t(
+            'To verify that everything is working as expected, you can trigger a test error in your app. As an example we will add a button that throws an error when being clicked to your main app component.'
+          ),
+        },
+        {
+          type: 'text',
+          text: tct('First add the button element to your [code:app.component.html]:', {
+            code: <code />,
+          }),
+        },
+        {
+          type: 'code',
+          tabs: [
+            {
+              label: 'HTML',
+              value: 'html',
+              language: 'html',
+              filename: 'app.component.html',
+              code: '<button (click)="throwTestError()">Test Sentry Error</button>',
+            },
+          ],
+        },
+        {
+          type: 'text',
+          text: tct('Then, in your [code:app.component.ts] add the event handler:', {
+            code: <code />,
+          }),
+        },
+        {
+          type: 'code',
+          tabs: [
+            {
+              label: 'TypeScript',
+              value: 'typescript',
+              language: 'typescript',
+              filename: 'app.component.ts',
+              code: getVerifySnippetComponent(),
+            },
+          ],
+        },
         {
-          description: t(
+          type: 'text',
+          text: t(
             "After clicking the button, you should see the error on Sentry's Issues page."
           ),
         },