ref(onboarding): Convert platform dotnet to new structure (#58217)

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

static/app/gettingStartedDocs/dotnet/dotnet.spec.tsx

@@ -1,18 +1,33 @@
-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 './dotnet';
 
-import {GettingStartedWithDotnet, steps} from './dotnet';
+describe('dotnet onboarding docs', function () {
+  it('renders gradle docs correctly', async function () {
+    renderWithOnboardingLayout(docs, {
+      releaseRegistry: {
+        'sentry.dotnet': {
+          version: '1.99.9',
+        },
+      },
+    });
 
-describe('GettingStartedWithDotnet', function () {
-  it('renders doc correctly', function () {
-    render(<GettingStartedWithDotnet dsn="test-dsn" projectSlug="test-project" />);
+    // 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();
+    expect(
+      screen.getByRole('heading', {name: 'Performance Monitoring'})
+    ).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Samples'})).toBeInTheDocument();
 
-    // Steps
-    for (const step of steps()) {
-      expect(
-        screen.getByRole('heading', {name: step.title ?? StepTitle[step.type]})
-      ).toBeInTheDocument();
-    }
+    // Renders SDK version from registry
+    expect(
+      await screen.findByText(
+        textWithMarkupMatcher(/Install-Package Sentry -Version 1\.99\.9/)
+      )
+    ).toBeInTheDocument();
   });
 });

static/app/gettingStartedDocs/dotnet/dotnet.tsx

@@ -3,77 +3,31 @@ import {Fragment} from 'react';
 import ExternalLink from 'sentry/components/links/externalLink';
 import List from 'sentry/components/list';
 import ListItem from 'sentry/components/list/listItem';
-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 {
+  Docs,
+  DocsParams,
+  OnboardingConfig,
+} from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {t, tct} from 'sentry/locale';
 
-// Configuration Start
-const introduction = (
-  <p>
-    {tct(
-      'Sentry for .NET is a collection of NuGet packages provided by Sentry; it supports .NET Framework 4.6.1 and .NET Core 2.0 and above. At its core, Sentry for .NET provides a raw client for sending events to Sentry. If you use a framework such as [strong:ASP.NET, WinForms, WPF, MAUI, Xamarin, Serilog], or similar, we recommend visiting our [link:Sentry .NET] documentation for installation instructions.',
-      {
-        strong: <strong />,
-        link: <ExternalLink href="https://docs.sentry.io/platforms/dotnet/" />,
-      }
-    )}
-  </p>
-);
-export const steps = ({
-  dsn,
-  sourcePackageRegistries,
-}: Partial<
-  Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
-> = {}): LayoutProps['steps'] => [
-  {
-    type: StepType.INSTALL,
-    description: (
-      <p>
-        {tct('Install the [strong:NuGet] package:', {
-          strong: <strong />,
-        })}
-      </p>
-    ),
-    configurations: [
-      {
-        language: 'shell',
-        partialLoading: sourcePackageRegistries?.isLoading,
-        code: `
-# Using Package Manager
+type Params = DocsParams;
+
+const installSnippetPackageManager = (params: Params) => `
 Install-Package Sentry -Version ${
-          sourcePackageRegistries?.isLoading
-            ? t('\u2026loading')
-            : sourcePackageRegistries?.data?.['sentry.dotnet']?.version ?? '3.34.0'
-        }
+  params.sourcePackageRegistries.isLoading
+    ? t('\u2026loading')
+    : params.sourcePackageRegistries.data?.['sentry.dotnet']?.version ?? '3.34.0'
+}`;
 
-# Or using .NET Core CLI
+const installSnippetCoreCli = (params: Params) => `
 dotnet add package Sentry -v ${
-          sourcePackageRegistries?.isLoading
-            ? t('\u2026loading')
-            : sourcePackageRegistries?.data?.['sentry.dotnet']?.version ?? '3.34.0'
-        }
-        `,
-      },
-    ],
-  },
-  {
-    type: StepType.CONFIGURE,
-    description: (
-      <p>
-        {tct(
-          'Initialize the SDK as early as possible. For example, call [sentrySdkCode:SentrySdk.Init] in your [programCode:Program.cs] file:',
-          {
-            sentrySdkCode: <code />,
-            programCode: <code />,
-          }
-        )}
-      </p>
-    ),
-    configurations: [
-      {
-        language: 'csharp',
-        code: `
+  params.sourcePackageRegistries.isLoading
+    ? t('\u2026loading')
+    : params.sourcePackageRegistries.data?.['sentry.dotnet']?.version ?? '3.34.0'
+}`;
+
+const getConfigureSnippet = (params: Params) => `
 using Sentry;
 
 SentrySdk.Init(options =>
@@ -81,7 +35,7 @@ SentrySdk.Init(options =>
     // A Sentry Data Source Name (DSN) is required.
     // See https://docs.sentry.io/product/sentry-basics/dsn-explainer/
     // You can set it in the SENTRY_DSN environment variable, or you can set it in code here.
-    options.Dsn = "${dsn}";
+    options.Dsn = "${params.dsn}";
 
     // When debug is enabled, the Sentry client will emit detailed debugging information to the console.
     // This might be helpful, or might interfere with the normal operation of your application.
@@ -98,30 +52,9 @@ SentrySdk.Init(options =>
 
     // This option will enable Sentry's tracing features. You still need to start transactions and spans.
     options.EnableTracing = true;
-});
-        `,
-      },
-    ],
-  },
-  {
-    type: StepType.VERIFY,
-    description: t('Verify Sentry is correctly configured by sending a message:'),
-    configurations: [
-      {
-        language: 'csharp',
-        code: 'SentrySdk.CaptureMessage("Something went wrong");',
-      },
-    ],
-  },
-  {
-    title: t('Performance Monitoring'),
-    description: t(
-      'You can measure the performance of your code by capturing transactions and spans.'
-    ),
-    configurations: [
-      {
-        language: 'csharp',
-        code: `
+});`;
+
+const getPerformanceMonitoringSnippet = () => `
 // Transaction can be started by providing, at minimum, the name and the operation
 var transaction = SentrySdk.StartTransaction(
   "test-transaction-name",
@@ -136,78 +69,144 @@ var span = transaction.StartChild("test-child-operation");
 // ...
 
 span.Finish(); // Mark the span as finished
-transaction.Finish(); // Mark the transaction as finished and send it to Sentry
-        `,
-      },
-    ],
-    additionalInfo: (
-      <p>
-        {tct(
-          'Check out [link:the documentation] to learn more about the API and automatic instrumentations.',
-          {
-            link: (
-              <ExternalLink href="https://docs.sentry.io/platforms/dotnet/performance/instrumentation/" />
-            ),
-          }
-        )}
-      </p>
+transaction.Finish(); // Mark the transaction as finished and send it to Sentry`;
+
+const onboarding: OnboardingConfig = {
+  introduction: () =>
+    tct(
+      'Sentry for .NET is a collection of NuGet packages provided by Sentry; it supports .NET Framework 4.6.1 and .NET Core 2.0 and above. At its core, Sentry for .NET provides a raw client for sending events to Sentry. If you use a framework such as [strong:ASP.NET, WinForms, WPF, MAUI, Xamarin, Serilog], or similar, we recommend visiting our [link:Sentry .NET] documentation for installation instructions.',
+      {
+        strong: <strong />,
+        link: <ExternalLink href="https://docs.sentry.io/platforms/dotnet/" />,
+      }
     ),
-  },
-  {
-    title: t('Samples'),
-    description: (
-      <Fragment>
-        <p>
-          {tct(
-            'You can find an example ASP.NET MVC 5 app with Sentry integrated [link:on this GitHub repository].',
+  install: params => [
+    {
+      type: StepType.INSTALL,
+      description: tct('Install the [strong:NuGet] package:', {
+        strong: <strong />,
+      }),
+      configurations: [
+        {
+          partialLoading: params.sourcePackageRegistries.isLoading,
+          code: [
             {
-              link: (
-                <ExternalLink href="https://github.com/getsentry/examples/tree/master/dotnet/AspNetMvc5Ef6" />
-              ),
-            }
-          )}
-        </p>
-        {t(
-          'In addition, these examples demonstrate how to integrate Sentry with various frameworks:'
-        )}
-        <List symbol="bullet">
-          <ListItem>
+              language: 'shell',
+              label: 'Package Manager',
+              value: 'packageManager',
+              code: installSnippetPackageManager(params),
+            },
+            {
+              language: 'shell',
+              label: '.NET Core CLI',
+              value: 'coreCli',
+              code: installSnippetCoreCli(params),
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  configure: params => [
+    {
+      type: StepType.CONFIGURE,
+      description: tct(
+        'Initialize the SDK as early as possible. For example, call [sentrySdkCode:SentrySdk.Init] in your [programCode:Program.cs] file:',
+        {
+          sentrySdkCode: <code />,
+          programCode: <code />,
+        }
+      ),
+      configurations: [
+        {
+          language: 'csharp',
+          code: getConfigureSnippet(params),
+        },
+      ],
+    },
+  ],
+  verify: () => [
+    {
+      type: StepType.VERIFY,
+      description: t('Verify Sentry is correctly configured by sending a message:'),
+      configurations: [
+        {
+          language: 'csharp',
+          code: 'SentrySdk.CaptureMessage("Something went wrong");',
+        },
+      ],
+    },
+    {
+      title: t('Performance Monitoring'),
+      description: t(
+        'You can measure the performance of your code by capturing transactions and spans.'
+      ),
+      configurations: [
+        {
+          language: 'csharp',
+          code: getPerformanceMonitoringSnippet(),
+        },
+      ],
+      additionalInfo: tct(
+        'Check out [link:the documentation] to learn more about the API and automatic instrumentations.',
+        {
+          link: (
+            <ExternalLink href="https://docs.sentry.io/platforms/dotnet/performance/instrumentation/" />
+          ),
+        }
+      ),
+    },
+    {
+      title: t('Samples'),
+      description: (
+        <Fragment>
+          <p>
             {tct(
-              '[link:Multiple samples in the [code:dotnet] SDK repository] [strong:(C#)]',
+              'You can find an example ASP.NET MVC 5 app with Sentry integrated [link:on this GitHub repository].',
               {
                 link: (
-                  <ExternalLink href="https://github.com/getsentry/sentry-dotnet/tree/main/samples" />
+                  <ExternalLink href="https://github.com/getsentry/examples/tree/master/dotnet/AspNetMvc5Ef6" />
                 ),
-                code: <code />,
-                strong: <strong />,
               }
             )}
-          </ListItem>
-          <ListItem>
-            {tct('[link:Basic F# sample] [strong:(F#)]', {
-              link: <ExternalLink href="https://github.com/sentry-demos/fsharp" />,
-              strong: <strong />,
-            })}
-          </ListItem>
-        </List>
-      </Fragment>
-    ),
-  },
-];
-// Configuration End
-
-export function GettingStartedWithDotnet({
-  dsn,
-  sourcePackageRegistries,
-  ...props
-}: ModuleProps) {
-  return (
-    <Layout
-      steps={steps({dsn, sourcePackageRegistries})}
-      introduction={introduction}
-      {...props}
-    />
-  );
-}
-
-export default GettingStartedWithDotnet;
+          </p>
+          {t(
+            'In addition, these examples demonstrate how to integrate Sentry with various frameworks:'
+          )}
+        </Fragment>
+      ),
+      configurations: [
+        {
+          description: (
+            <List symbol="bullet">
+              <ListItem>
+                {tct(
+                  '[link:Multiple samples in the [code:dotnet] SDK repository] [strong:(C#)]',
+                  {
+                    link: (
+                      <ExternalLink href="https://github.com/getsentry/sentry-dotnet/tree/main/samples" />
+                    ),
+                    code: <code />,
+                    strong: <strong />,
+                  }
+                )}
+              </ListItem>
+              <ListItem>
+                {tct('[link:Basic F# sample] [strong:(F#)]', {
+                  link: <ExternalLink href="https://github.com/sentry-demos/fsharp" />,
+                  strong: <strong />,
+                })}
+              </ListItem>
+            </List>
+          ),
+        },
+      ],
+    },
+  ],
+};
+
+const docs: Docs = {
+  onboarding,
+};
+
+export default docs;