ref(onboarding): Convert platform aspnetcore to new structure (#58229)

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

static/app/gettingStartedDocs/dotnet/aspnetcore.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 './aspnetcore';
 
-import {GettingStartedWithAspnetcore, steps} from './aspnetcore';
+describe('aspnetcore onboarding docs', function () {
+  it('renders gradle docs correctly', async function () {
+    renderWithOnboardingLayout(docs, {
+      releaseRegistry: {
+        'sentry.dotnet.aspnetcore': {
+          version: '1.99.9',
+        },
+      },
+    });
 
-describe('GettingStartedWithAspnetcore', function () {
-  it('renders doc correctly', function () {
-    render(<GettingStartedWithAspnetcore 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.AspNetCore -Version 1\.99\.9/)
+      )
+    ).toBeInTheDocument();
   });
 });

static/app/gettingStartedDocs/dotnet/aspnetcore.tsx

@@ -3,69 +3,32 @@ 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 type {
+  Docs,
+  DocsParams,
+  OnboardingConfig,
+} from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {t, tct} from 'sentry/locale';
+import {getPackageVersion} from 'sentry/utils/gettingStartedDocs/getPackageVersion';
 
-// Configuration Start
-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,
-        description: t('Package Manager:'),
-        code: `Install-Package Sentry.AspNetCore -Version ${
-          sourcePackageRegistries?.isLoading
-            ? t('\u2026loading')
-            : sourcePackageRegistries?.data?.['sentry.dotnet.aspnetcore']?.version ??
-              '3.34.0'
-        }`,
-      },
-      {
-        language: 'shell',
-        partialLoading: sourcePackageRegistries?.isLoading,
-        description: t('Or .NET Core CLI:'),
-        code: `dotnet add package Sentry.AspNetCore -v ${
-          sourcePackageRegistries?.isLoading
-            ? t('\u2026loading')
-            : sourcePackageRegistries?.data?.['sentry.dotnet.aspnetcore']?.version ??
-              '3.34.0'
-        }`,
-      },
-    ],
-  },
-  {
-    type: StepType.CONFIGURE,
-    description: (
-      <p>
-        {tct(
-          'Add Sentry to [programCode:Program.cs] through the [webHostCode:WebHostBuilder]:',
-          {
-            webHostCode: <code />,
-            programCode: <code />,
-          }
-        )}
-      </p>
-    ),
-    configurations: [
-      {
-        language: 'csharp',
-        code: `
+type Params = DocsParams;
+
+const getInstallSnippetPackageManager = (params: Params) => `
+Install-Package Sentry.AspNetCore -Version ${getPackageVersion(
+  params,
+  'sentry.dotnet.aspnetcore',
+  '3.34.0'
+)}`;
+
+const getInstallSnippetCoreCli = (params: Params) => `
+dotnet add package Sentry.AspNetCore -v ${getPackageVersion(
+  params,
+  'sentry.dotnet.aspnetcore',
+  '3.34.0'
+)}`;
+
+const getConfigureSnippet = (params: Params) => `
 public static IHostBuilder CreateHostBuilder(string[] args) =>
   Host.CreateDefaultBuilder(args)
       .ConfigureWebHostDefaults(webBuilder =>
@@ -73,57 +36,16 @@ public static IHostBuilder CreateHostBuilder(string[] args) =>
           // Add the following line:
           webBuilder.UseSentry(o =>
           {
-              o.Dsn = "${dsn}";
+              o.Dsn = "${params.dsn}";
               // When configuring for the first time, to see what the SDK is doing:
               o.Debug = true;
               // Set TracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
               // We recommend adjusting this value in production.
               o.TracesSampleRate = 1.0;
           });
-      });
-        `,
-      },
-    ],
-  },
-  {
-    type: StepType.VERIFY,
-    description: t('To verify your set up, you can capture a message with the SDK:'),
-    configurations: [
-      {
-        language: 'csharp',
-        code: 'SentrySdk.CaptureMessage("Hello Sentry");',
-      },
-    ],
-    additionalInfo: (
-      <p>
-        {tct(
-          "If you don't want to depend on the static class, the SDK registers a client in the DI container. In this case, you can [link:take [code:IHub] as a dependency].",
-          {
-            code: <code />,
-            link: (
-              <ExternalLink href="https://docs.sentry.io/platforms/dotnet/guides/aspnetcore/unit-testing/" />
-            ),
-          }
-        )}
-      </p>
-    ),
-  },
-  {
-    title: t('Performance Monitoring'),
-    description: (
-      <p>
-        {tct(
-          'You can measure the performance of your endpoints by adding a middleware to [code:Startup.cs]:',
-          {
-            code: <code />,
-          }
-        )}
-      </p>
-    ),
-    configurations: [
-      {
-        language: 'csharp',
-        code: `
+      });`;
+
+const getPerformanceMiddlewareSnippet = () => `
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.Extensions.Configuration;
@@ -149,15 +71,9 @@ public class Startup
                 pattern: "{controller=Home}/{action=Index}/{id?}");
         });
     }
-}
-        `,
-      },
-      {
-        description: t(
-          "You'll be able to monitor the performance of your actions automatically. To add additional spans to it, you can use the API:"
-        ),
-        language: 'csharp',
-        code: `
+}`;
+
+const getPerformanceSpansSnippet = () => `
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Logging;
 using Sentry;
@@ -184,56 +100,137 @@ public class HomeController : Controller
             throw;
         }
     }
-}
-        `,
-      },
-    ],
-  },
-  {
-    title: t('Samples'),
-    description: (
-      <Fragment>
-        {t(
-          'See the following examples that demonstrate how to integrate Sentry with various frameworks.'
-        )}
-        <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 />,
+}`;
+
+const onboarding: OnboardingConfig = {
+  install: params => [
+    {
+      type: StepType.INSTALL,
+      description: tct('Install the [strong:NuGet] package:', {
+        strong: <strong />,
+      }),
+      configurations: [
+        {
+          partialLoading: params.sourcePackageRegistries.isLoading,
+          code: [
+            {
+              language: 'shell',
+              label: 'Package Manager',
+              value: 'packageManager',
+              code: getInstallSnippetPackageManager(params),
+            },
+            {
+              language: 'shell',
+              label: '.NET Core CLI',
+              value: 'coreCli',
+              code: getInstallSnippetCoreCli(params),
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  configure: params => [
+    {
+      type: StepType.CONFIGURE,
+      description: tct(
+        'Add Sentry to [programCode:Program.cs] through the [webHostCode:WebHostBuilder]:',
+        {
+          webHostCode: <code />,
+          programCode: <code />,
+        }
+      ),
+      configurations: [
+        {
+          language: 'csharp',
+          code: getConfigureSnippet(params),
+        },
+      ],
+    },
+  ],
+  verify: () => [
+    {
+      type: StepType.VERIFY,
+      description: t('To verify your set up, you can capture a message with the SDK:'),
+      configurations: [
+        {
+          language: 'csharp',
+          code: 'SentrySdk.CaptureMessage("Hello Sentry");',
+        },
+      ],
+      additionalInfo: tct(
+        "If you don't want to depend on the static class, the SDK registers a client in the DI container. In this case, you can [link:take [code:IHub] as a dependency].",
+        {
+          code: <code />,
+          link: (
+            <ExternalLink href="https://docs.sentry.io/platforms/dotnet/guides/aspnetcore/unit-testing/" />
+          ),
+        }
+      ),
+    },
+    {
+      title: t('Performance Monitoring'),
+      description: tct(
+        'You can measure the performance of your endpoints by adding a middleware to [code:Startup.cs]:',
+        {
+          code: <code />,
+        }
+      ),
+      configurations: [
+        {
+          language: 'csharp',
+          code: getPerformanceMiddlewareSnippet(),
+        },
+        {
+          description: t(
+            "You'll be able to monitor the performance of your actions automatically. To add additional spans to it, you can use the API:"
+          ),
+          language: 'csharp',
+          code: getPerformanceSpansSnippet(),
+        },
+      ],
+    },
+    {
+      title: t('Samples'),
+      description: (
+        <Fragment>
+          {t(
+            'See the following examples that demonstrate how to integrate Sentry with various frameworks.'
+          )}
+          <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>
+            <ListItem>
+              {tct('[link:Giraffe F# sample] [strong:(F#)]', {
+                link: <ExternalLink href="https://github.com/sentry-demos/giraffe" />,
                 strong: <strong />,
-              }
-            )}
-          </ListItem>
-          <ListItem>
-            {tct('[link:Basic F# sample] [strong:(F#)]', {
-              link: <ExternalLink href="https://github.com/sentry-demos/fsharp" />,
-              strong: <strong />,
-            })}
-          </ListItem>
-          <ListItem>
-            {tct('[link:Giraffe F# sample] [strong:(F#)]', {
-              link: <ExternalLink href="https://github.com/sentry-demos/giraffe" />,
-              strong: <strong />,
-            })}
-          </ListItem>
-        </List>
-      </Fragment>
-    ),
-  },
-];
-// Configuration End
-
-export function GettingStartedWithAspnetcore({
-  dsn,
-  sourcePackageRegistries,
-  ...props
-}: ModuleProps) {
-  return <Layout steps={steps({dsn, sourcePackageRegistries})} {...props} />;
-}
-
-export default GettingStartedWithAspnetcore;
+              })}
+            </ListItem>
+          </List>
+        </Fragment>
+      ),
+    },
+  ],
+};
+
+const docs: Docs = {
+  onboarding,
+};
+
+export default docs;