ref(onboarding-docs): Refactor native platforms (#63090)

- part of https://github.com/getsentry/sentry/issues/56549

static/app/gettingStartedDocs/native/native-qt.spec.tsx

@@ -1,18 +1,15 @@
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {renderWithOnboardingLayout} from 'sentry-test/onboarding/renderWithOnboardingLayout';
+import {screen} from 'sentry-test/reactTestingLibrary';
 
-import {StepTitle} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import docs from './native-qt';
 
-import {GettingStartedWithNativeQT, steps} from './native-qt';
+describe('GettingStartedWithSpring', function () {
+  it('renders gradle docs correctly', function () {
+    renderWithOnboardingLayout(docs);
 
-describe('GettingStartedWithNativeQT', function () {
-  it('renders doc correctly', function () {
-    render(<GettingStartedWithNativeQT dsn="test-dsn" projectSlug="test-project" />);
-
-    // Steps
-    for (const step of steps()) {
-      expect(
-        screen.getByRole('heading', {name: step.title ?? StepTitle[step.type]})
-      ).toBeInTheDocument();
-    }
+    // 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();
   });
 });

static/app/gettingStartedDocs/native/native-qt.tsx

@@ -1,49 +1,24 @@
 import {Fragment} from 'react';
 
 import ExternalLink from 'sentry/components/links/externalLink';
-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
-export const steps = ({
-  dsn,
-}: Partial<Pick<ModuleProps, 'dsn'>> = {}): LayoutProps['steps'] => [
-  {
-    type: StepType.INSTALL,
-    description: (
-      <p>
-        {tct(
-          'Install the SDK by downloading the [releasesLink:latest release]. Next, follow the instructions in the [nativeQTSDKDocumentationLink:Native SDK Documentation] to build the SDK library.',
-          {
-            releasesLink: (
-              <ExternalLink href="https://github.com/getsentry/sentry-native/releases" />
-            ),
-            nativeQTSDKDocumentationLink: (
-              <ExternalLink href="https://docs.sentry.io/platforms/native/guides/qt/" />
-            ),
-          }
-        )}
-      </p>
-    ),
-  },
-  {
-    type: StepType.CONFIGURE,
-    description: t(
-      'Import and initialize the Sentry SDK early in your application setup:'
-    ),
-    configurations: [
-      {
-        language: 'c',
-        code: `
+type Params = DocsParams;
+
+const getConfigureSnippet = (params: Params) => `
 #include <QtWidgets>
 #include <sentry.h>
 
 int main(int argc, char *argv[])
 {
     sentry_options_t *options = sentry_options_new();
-    sentry_options_set_dsn(options, "${dsn}");
+    sentry_options_set_dsn(options, "${params.dsn}");
     // This is also the default-path. For further information and recommendations:
     // https://docs.sentry.io/platforms/native/configuration/options/#database-path
     sentry_options_set_database_path(options, ".sentry-native");
@@ -57,54 +32,80 @@ int main(int argc, char *argv[])
     QApplication app(argc, argv);
     /* ... */
     return app.exec();
-}
-        `,
-      },
-    ],
-    additionalInfo: (
-      <p>
-        {tct(
-          'Alternatively, the DSN can be passed as [code:SENTRY_DSN] environment variable during runtime. This can be especially useful for server applications.',
-          {
-            code: <code />,
-          }
-        )}
-      </p>
-    ),
-  },
-  {
-    type: StepType.VERIFY,
-    description: t(
-      'The quickest way to verify Sentry in your Qt application is by capturing a message:'
-    ),
-    configurations: [
-      {
-        language: 'c',
-        code: `
+}`;
+
+const getVerifySnippet = () => `
 sentry_capture_event(sentry_value_new_message_event(
   /*   level */ SENTRY_LEVEL_INFO,
   /*  logger */ "custom",
   /* message */ "It works!"
-));
-        `,
-      },
-    ],
-    additionalInfo: (
-      <Fragment>
-        {t(
-          "If you're new to Sentry, use the email alert to access your account and complete a product tour."
-        )}
-        {t(
-          "If you're an existing user and have disabled alerts, you won't receive this email."
-        )}
-      </Fragment>
-    ),
-  },
-];
-// Configuration End
+));`;
+
+const onboarding: OnboardingConfig = {
+  install: () => [
+    {
+      type: StepType.INSTALL,
+      description: tct(
+        'Install the SDK by downloading the [releasesLink:latest release]. Next, follow the instructions in the [nativeQTSDKDocumentationLink:Native SDK Documentation] to build the SDK library.',
+        {
+          releasesLink: (
+            <ExternalLink href="https://github.com/getsentry/sentry-native/releases" />
+          ),
+          nativeQTSDKDocumentationLink: (
+            <ExternalLink href="https://docs.sentry.io/platforms/native/guides/qt/" />
+          ),
+        }
+      ),
+    },
+  ],
+  configure: params => [
+    {
+      type: StepType.CONFIGURE,
+      description: t(
+        'Import and initialize the Sentry SDK early in your application setup:'
+      ),
+      configurations: [
+        {
+          language: 'c',
+          code: getConfigureSnippet(params),
+        },
+      ],
+      additionalInfo: tct(
+        'Alternatively, the DSN can be passed as [code:SENTRY_DSN] environment variable during runtime. This can be especially useful for server applications.',
+        {
+          code: <code />,
+        }
+      ),
+    },
+  ],
+  verify: () => [
+    {
+      type: StepType.VERIFY,
+      description: t(
+        'The quickest way to verify Sentry in your Qt application is by capturing a message:'
+      ),
+      configurations: [
+        {
+          language: 'c',
+          code: getVerifySnippet(),
+        },
+      ],
+      additionalInfo: (
+        <Fragment>
+          {t(
+            "If you're new to Sentry, use the email alert to access your account and complete a product tour."
+          )}
+          {t(
+            "If you're an existing user and have disabled alerts, you won't receive this email."
+          )}
+        </Fragment>
+      ),
+    },
+  ],
+};
 
-export function GettingStartedWithNativeQT({dsn, ...props}: ModuleProps) {
-  return <Layout steps={steps({dsn})} {...props} />;
-}
+const docs: Docs = {
+  onboarding,
+};
 
-export default GettingStartedWithNativeQT;
+export default docs;

static/app/gettingStartedDocs/native/native.spec.tsx

@@ -1,18 +1,15 @@
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {renderWithOnboardingLayout} from 'sentry-test/onboarding/renderWithOnboardingLayout';
+import {screen} from 'sentry-test/reactTestingLibrary';
 
-import {StepTitle} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import docs from './native';
 
-import {GettingStartedWithNative, steps} from './native';
+describe('GettingStartedWithSpring', function () {
+  it('renders gradle docs correctly', function () {
+    renderWithOnboardingLayout(docs);
 
-describe('GettingStartedWithNative', function () {
-  it('renders doc correctly', function () {
-    render(<GettingStartedWithNative dsn="test-dsn" projectSlug="test-project" />);
-
-    // Steps
-    for (const step of steps()) {
-      expect(
-        screen.getByRole('heading', {name: step.title ?? StepTitle[step.type]})
-      ).toBeInTheDocument();
-    }
+    // 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();
   });
 });

static/app/gettingStartedDocs/native/native.tsx

@@ -1,47 +1,22 @@
 import {Fragment} from 'react';
 
 import ExternalLink from 'sentry/components/links/externalLink';
-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
-export const steps = ({
-  dsn,
-}: Partial<Pick<ModuleProps, 'dsn'>> = {}): LayoutProps['steps'] => [
-  {
-    type: StepType.INSTALL,
-    description: (
-      <p>
-        {tct(
-          'Install the SDK by downloading the [releasesLink:latest release]. Next, follow the instructions in the [nativeSDKDocumentationLink:Native SDK Documentation] to build and link the SDK library.',
-          {
-            releasesLink: (
-              <ExternalLink href="https://github.com/getsentry/sentry-native/releases" />
-            ),
-            nativeSDKDocumentationLink: (
-              <ExternalLink href="https://docs.sentry.io/platforms/native/" />
-            ),
-          }
-        )}
-      </p>
-    ),
-  },
-  {
-    type: StepType.CONFIGURE,
-    description: t(
-      'Import and initialize the Sentry SDK early in your application setup:'
-    ),
-    configurations: [
-      {
-        language: 'c',
-        code: `
+type Params = DocsParams;
+
+const getConfigureSnippet = (params: Params) => `
 #include <sentry.h>
 
 int main(void) {
   sentry_options_t *options = sentry_options_new();
-  sentry_options_set_dsn(options, "${dsn}");
+  sentry_options_set_dsn(options, "${params.dsn}");
   // This is also the default-path. For further information and recommendations:
   // https://docs.sentry.io/platforms/native/configuration/options/#database-path
   sentry_options_set_database_path(options, ".sentry-native");
@@ -53,54 +28,80 @@ int main(void) {
 
   // make sure everything flushes
   sentry_close();
-}
-        `,
-      },
-    ],
-    additionalInfo: (
-      <p>
-        {tct(
-          'Alternatively, the DSN can be passed as [code:SENTRY_DSN] environment variable during runtime. This can be especially useful for server applications.',
-          {
-            code: <code />,
-          }
-        )}
-      </p>
-    ),
-  },
-  {
-    type: StepType.VERIFY,
-    description: t(
-      'The quickest way to verify Sentry in your Native application is by capturing a message:'
-    ),
-    configurations: [
-      {
-        language: 'c',
-        code: `
+}`;
+
+const getVerifySnippet = () => `
 sentry_capture_event(sentry_value_new_message_event(
   /*   level */ SENTRY_LEVEL_INFO,
   /*  logger */ "custom",
   /* message */ "It works!"
-));
-        `,
-      },
-    ],
-    additionalInfo: (
-      <Fragment>
-        {t(
-          "If you're new to Sentry, use the email alert to access your account and complete a product tour."
-        )}
-        {t(
-          "If you're an existing user and have disabled alerts, you won't receive this email."
-        )}
-      </Fragment>
-    ),
-  },
-];
-// Configuration End
+));`;
+
+const onboarding: OnboardingConfig = {
+  install: () => [
+    {
+      type: StepType.INSTALL,
+      description: tct(
+        'Install the SDK by downloading the [releasesLink:latest release]. Next, follow the instructions in the [nativeSDKDocumentationLink:Native SDK Documentation] to build and link the SDK library.',
+        {
+          releasesLink: (
+            <ExternalLink href="https://github.com/getsentry/sentry-native/releases" />
+          ),
+          nativeSDKDocumentationLink: (
+            <ExternalLink href="https://docs.sentry.io/platforms/native/" />
+          ),
+        }
+      ),
+    },
+  ],
+  configure: params => [
+    {
+      type: StepType.CONFIGURE,
+      description: t(
+        'Import and initialize the Sentry SDK early in your application setup:'
+      ),
+      configurations: [
+        {
+          language: 'c',
+          code: getConfigureSnippet(params),
+        },
+      ],
+      additionalInfo: tct(
+        'Alternatively, the DSN can be passed as [code:SENTRY_DSN] environment variable during runtime. This can be especially useful for server applications.',
+        {
+          code: <code />,
+        }
+      ),
+    },
+  ],
+  verify: () => [
+    {
+      type: StepType.VERIFY,
+      description: t(
+        'The quickest way to verify Sentry in your Native application is by capturing a message:'
+      ),
+      configurations: [
+        {
+          language: 'c',
+          code: getVerifySnippet(),
+        },
+      ],
+      additionalInfo: (
+        <Fragment>
+          {t(
+            "If you're new to Sentry, use the email alert to access your account and complete a product tour."
+          )}
+          {t(
+            "If you're an existing user and have disabled alerts, you won't receive this email."
+          )}
+        </Fragment>
+      ),
+    },
+  ],
+};
 
-export function GettingStartedWithNative({dsn, ...props}: ModuleProps) {
-  return <Layout steps={steps({dsn})} {...props} />;
-}
+const docs: Docs = {
+  onboarding,
+};
 
-export default GettingStartedWithNative;
+export default docs;