ref(onboarding): Convert platform dart to new structure (#59418)

- relates to #56549
getsentry · Nov 6, 2023 · aa4197b · aa4197b
1 parent 2b472d9
commit aa4197b
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 144 deletions.
diff --git a/static/app/gettingStartedDocs/dart/dart.spec.tsx b/static/app/gettingStartedDocs/dart/dart.spec.tsx
@@ -1,18 +1,28 @@
-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 './dart';
 
-import {GettingStartedWithDart, steps} from './dart';
+describe('dart onboarding docs', function () {
+  it('renders docs correctly', async function () {
+    renderWithOnboardingLayout(docs, {
+      releaseRegistry: {
+        'sentry.dart': {
+          version: '1.99.9',
+        },
+      },
+    });
 
-describe('GettingStartedWithDart', function () {
-  it('renders doc correctly', function () {
-    render(<GettingStartedWithDart 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'})).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(/sentry: \^1\.99\.9/))
+    ).toBeInTheDocument();
   });
 });
diff --git a/static/app/gettingStartedDocs/dart/dart.tsx b/static/app/gettingStartedDocs/dart/dart.tsx
@@ -1,95 +1,34 @@
 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 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(
-          'Sentry captures data by using an SDK within your application’s runtime. Add the following to your [pubspec: pubspec.yaml]',
-          {
-            pubspec: <code />,
-          }
-        )}
-      </p>
-    ),
-    configurations: [
-      {
-        language: 'yml',
-        partialLoading: sourcePackageRegistries?.isLoading,
-        code: `
+type Params = DocsParams;
+
+const getInstallSnipet = (params: Params) => `
 dependencies:
-  sentry: ^${
-    sourcePackageRegistries?.isLoading
-      ? t('\u2026loading')
-      : sourcePackageRegistries?.data?.['sentry.dart']?.version ?? '7.8.0'
-  }
-        `,
-      },
-    ],
-  },
-  {
-    type: StepType.CONFIGURE,
-    description: (
-      <p>
-        {tct('Import [sentry: sentry] and initialize it', {
-          sentry: <code />,
-        })}
-      </p>
-    ),
-    configurations: [
-      {
-        language: 'dart',
-        code: `
+  sentry: ^${getPackageVersion(params, 'sentry.dart', '7.8.0')}`;
+
+const getConfigureSnippet = (params: Params) => `
 import 'package:sentry/sentry.dart';
 
 Future<void> main() async {
   await Sentry.init((options) {
-      options.dsn = '${dsn}';
-      // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
-      // We recommend adjusting this value in production.
-      options.tracesSampleRate = 1.0;
-    });
+    options.dsn = '${params.dsn}';
+    // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
+    // We recommend adjusting this value in production.
+    options.tracesSampleRate = 1.0;
+  });
 
   // or define SENTRY_DSN via Dart environment variable (--dart-define)
-}
-        `,
-        additionalInfo: (
-          <p>
-            {tct(
-              'You can configure the [sentryDsn: SENTRY_DSN], [sentryRelease: SENTRY_RELEASE], [sentryDist: SENTRY_DIST], and [sentryEnv: SENTRY_ENVIRONMENT] via the Dart environment variables passing the [dartDefine: --dart-define] flag to the compiler, as noted in the code sample.',
-              {
-                sentryDsn: <code />,
-                sentryRelease: <code />,
-                sentryDist: <code />,
-                sentryEnv: <code />,
-                dartDefine: <code />,
-              }
-            )}
-          </p>
-        ),
-      },
-    ],
-  },
-  {
-    type: StepType.VERIFY,
-    description: t(
-      'Create an intentional error, so you can test that everything is working:'
-    ),
-    configurations: [
-      {
-        language: 'dart',
-        code: `
+}`;
+
+const getVerifySnippet = () => `
 import 'package:sentry/sentry.dart';
 
 try {
@@ -99,31 +38,11 @@ try {
     exception,
     stackTrace: stackTrace,
   );
-}
-        `,
-        additionalInfo: (
-          <p>
-            {tct(
-              "If you're new to Sentry, use the email alert to access your account and complete a product tour.[break] If you're an existing user and have disabled alerts, you won't receive this email.",
-              {
-                break: <br />,
-              }
-            )}
-          </p>
-        ),
-      },
-    ],
-  },
-  {
-    title: t('Performance'),
-    description: t(
-      "You'll be able to monitor the performance of your app using the SDK. For example:"
-    ),
-    configurations: [
-      {
-        language: 'dart',
-        code: `
+}`;
+
+const getPerfomanceSnippet = () => `
 import 'package:sentry/sentry.dart';
+import { getPackageVersion } from 'sentry/utils/gettingStartedDocs/getPackageVersion';
 
 final transaction = Sentry.startTransaction('processOrderBatch()', 'task');
 
@@ -148,32 +67,95 @@ Future<void> processOrderBatch(ISentrySpan span) async {
   } finally {
     await innerSpan.finish();
   }
-}
-        `,
-        additionalInfo: (
-          <p>
-            {tct(
-              'To learn more about the API and automatic instrumentations, check out the [perfDocs: performance documentation].',
-              {
-                perfDocs: (
-                  <ExternalLink href="https://docs.sentry.io/platforms/dart/performance/instrumentation/" />
-                ),
-              }
-            )}
-          </p>
-        ),
-      },
-    ],
-  },
-];
-// Configuration End
+}`;
 
-export function GettingStartedWithDart({
-  dsn,
-  sourcePackageRegistries,
-  ...props
-}: ModuleProps) {
-  return <Layout steps={steps({dsn, sourcePackageRegistries})} {...props} />;
-}
+const onboarding: OnboardingConfig = {
+  install: params => [
+    {
+      type: StepType.INSTALL,
+      description: tct(
+        'Sentry captures data by using an SDK within your application’s runtime. Add the following to your [pubspec: pubspec.yaml]',
+        {
+          pubspec: <code />,
+        }
+      ),
+      configurations: [
+        {
+          language: 'yml',
+          partialLoading: params.sourcePackageRegistries.isLoading,
+          code: getInstallSnipet(params),
+        },
+      ],
+    },
+  ],
+  configure: params => [
+    {
+      type: StepType.CONFIGURE,
+      description: tct('Import [sentry: sentry] and initialize it', {
+        sentry: <code />,
+      }),
+      configurations: [
+        {
+          language: 'dart',
+          code: getConfigureSnippet(params),
+          additionalInfo: tct(
+            'You can configure the [sentryDsn: SENTRY_DSN], [sentryRelease: SENTRY_RELEASE], [sentryDist: SENTRY_DIST], and [sentryEnv: SENTRY_ENVIRONMENT] via the Dart environment variables passing the [dartDefine: --dart-define] flag to the compiler, as noted in the code sample.',
+            {
+              sentryDsn: <code />,
+              sentryRelease: <code />,
+              sentryDist: <code />,
+              sentryEnv: <code />,
+              dartDefine: <code />,
+            }
+          ),
+        },
+      ],
+    },
+  ],
+  verify: () => [
+    {
+      type: StepType.VERIFY,
+      description: t(
+        'Create an intentional error, so you can test that everything is working:'
+      ),
+      configurations: [
+        {
+          language: 'dart',
+          code: getVerifySnippet(),
+          additionalInfo: tct(
+            "If you're new to Sentry, use the email alert to access your account and complete a product tour.[break] If you're an existing user and have disabled alerts, you won't receive this email.",
+            {
+              break: <br />,
+            }
+          ),
+        },
+      ],
+    },
+    {
+      title: t('Performance'),
+      description: t(
+        "You'll be able to monitor the performance of your app using the SDK. For example:"
+      ),
+      configurations: [
+        {
+          language: 'dart',
+          code: getPerfomanceSnippet(),
+          additionalInfo: tct(
+            'To learn more about the API and automatic instrumentations, check out the [perfDocs: performance documentation].',
+            {
+              perfDocs: (
+                <ExternalLink href="https://docs.sentry.io/platforms/dart/performance/instrumentation/" />
+              ),
+            }
+          ),
+        },
+      ],
+    },
+  ],
+};
+
+const docs: Docs = {
+  onboarding,
+};
 
-export default GettingStartedWithDart;
+export default docs;