ref(onboarding): Convert platform bun to new structure (#58751)

- relates to https://github.com/getsentry/sentry/issues/56549

static/app/gettingStartedDocs/bun/bun.spec.tsx

@@ -1,18 +1,37 @@
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {renderWithOnboardingLayout} from 'sentry-test/onboarding/renderWithOnboardingLayout';
+import {screen} from 'sentry-test/reactTestingLibrary';
+import {textWithMarkupMatcher} from 'sentry-test/utils';
 
-import {StepTitle} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import docs from './bun';
 
-import {GettingStartedWithBun, steps} from './bun';
-
-describe('GettingStartedWithBun', function () {
+describe('bun onboarding docs', function () {
   it('renders doc correctly', function () {
-    render(<GettingStartedWithBun dsn="test-dsn" projectSlug="test-project" />);
+    renderWithOnboardingLayout(docs);
+
+    // Renders main headings
+    expect(screen.getByRole('heading', {name: 'Install'})).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Configure SDK'})).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Verify'})).toBeInTheDocument();
+
+    // Renders config options
+    expect(
+      screen.getByText(textWithMarkupMatcher(/tracesSampleRate: 1\.0,/))
+    ).toBeInTheDocument();
+  });
+
+  it('renders without performance monitoring', function () {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [],
+    });
+
+    // Does not render config option
+    expect(
+      screen.queryByText(textWithMarkupMatcher(/tracesSampleRate: 1\.0,/))
+    ).not.toBeInTheDocument();
 
-    // Steps
-    for (const step of steps()) {
-      expect(
-        screen.getByRole('heading', {name: step.title ?? StepTitle[step.type]})
-      ).toBeInTheDocument();
-    }
+    // Renders next steps
+    expect(
+      screen.getByRole('link', {name: 'Performance Monitoring'})
+    ).toBeInTheDocument();
   });
 });

static/app/gettingStartedDocs/bun/bun.tsx

@@ -1,125 +1,93 @@
-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 {ProductSolution} from 'sentry/components/onboarding/productSelection';
+import type {
+  Docs,
+  DocsParams,
+  OnboardingConfig,
+} from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {t} from 'sentry/locale';
-import type {Organization, PlatformKey} from 'sentry/types';
 
-type StepProps = {
-  newOrg: boolean;
-  organization: Organization;
-  platformKey: PlatformKey;
-  projectId: string;
-  sentryInitContent: string;
-};
-
-const performanceOtherConfig = `
-// Performance Monitoring
-tracesSampleRate: 1.0, // Capture 100% of the transactions`;
+type Params = DocsParams;
 
-export const steps = ({
-  sentryInitContent,
-}: Partial<StepProps> = {}): LayoutProps['steps'] => [
-  {
-    type: StepType.INSTALL,
-    description: t(
-      "Sentry captures data by using an SDK within your application's runtime."
-    ),
-    configurations: [
-      {
-        language: 'bash',
-        code: 'bun add @sentry/bun',
-      },
-    ],
-  },
-  {
-    type: StepType.CONFIGURE,
-    description: t(
-      "Initialize Sentry as early as possible in your application's lifecycle."
-    ),
-    configurations: [
-      {
-        language: 'javascript',
-        code: `
+const getConfigureSnippet = (params: Params) => `
 //...
 import * as Sentry from "@sentry/bun";
 
 Sentry.init({
-  ${sentryInitContent}
-});
-        `,
-      },
-    ],
-  },
-  {
-    type: StepType.VERIFY,
-    description: t(
-      "This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected."
-    ),
-    configurations: [
-      {
-        language: 'javascript',
-        code: `try {
-            throw new Error('Sentry Bun test');
-          } catch (e) {
-            Sentry.captureException(e);
-          }`,
-      },
-    ],
-  },
-];
-
-export const nextSteps = [
-  {
-    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/bun/performance/',
-  },
-];
-// Configuration End
-
-export function GettingStartedWithBun({
-  dsn,
-  activeProductSelection = [],
-  newOrg,
-  platformKey,
-  ...props
-}: ModuleProps) {
-  const integrations: string[] = [];
-  const otherConfigs: string[] = [];
-  let nextStepDocs = [...nextSteps];
-
-  if (activeProductSelection.includes(ProductSolution.PERFORMANCE_MONITORING)) {
-    otherConfigs.push(performanceOtherConfig.trim());
-    nextStepDocs = nextStepDocs.filter(
-      step => step.id !== ProductSolution.PERFORMANCE_MONITORING
-    );
+  dsn: "${params.dsn}",${
+    params.isPerformanceSelected
+      ? `
+  // Performance Monitoring
+  tracesSampleRate: 1.0, // Capture 100% of the transactions`
+      : ''
   }
+});`;
 
-  let sentryInitContent: string[] = [`dsn: "${dsn}",`];
+const getVerifySnippet = () => `try {
+  throw new Error('Sentry Bun test');
+} catch (e) {
+  Sentry.captureException(e);
+}`;
 
-  if (integrations.length > 0) {
-    sentryInitContent = sentryInitContent.concat('integrations: [', integrations, '],');
-  }
-
-  if (otherConfigs.length > 0) {
-    sentryInitContent = sentryInitContent.concat(otherConfigs);
-  }
+const onboarding: OnboardingConfig = {
+  install: () => [
+    {
+      type: StepType.INSTALL,
+      description: t(
+        "Sentry captures data by using an SDK within your application's runtime."
+      ),
+      configurations: [
+        {
+          language: 'bash',
+          code: 'bun add @sentry/bun',
+        },
+      ],
+    },
+  ],
+  configure: params => [
+    {
+      type: StepType.CONFIGURE,
+      description: t(
+        "Initialize Sentry as early as possible in your application's lifecycle."
+      ),
+      configurations: [
+        {
+          language: 'javascript',
+          code: getConfigureSnippet(params),
+        },
+      ],
+    },
+  ],
+  verify: () => [
+    {
+      type: StepType.VERIFY,
+      description: t(
+        "This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected."
+      ),
+      configurations: [
+        {
+          language: 'javascript',
+          code: getVerifySnippet(),
+        },
+      ],
+    },
+  ],
+  nextSteps: params =>
+    params.isPerformanceSelected
+      ? []
+      : [
+          {
+            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/bun/performance/',
+          },
+        ],
+};
 
-  return (
-    <Layout
-      steps={steps({
-        sentryInitContent: sentryInitContent.join('\n'),
-      })}
-      nextSteps={nextStepDocs}
-      platformKey={platformKey}
-      newOrg={newOrg}
-      {...props}
-    />
-  );
-}
+const docs: Docs = {
+  onboarding,
+};
 
-export default GettingStartedWithBun;
+export default docs;