feat(getting-started-docs): Source SDK version from sentry release registry (#54943)

static/app/components/onboarding/gettingStartedDoc/sdkDocumentation.tsx

@@ -1,6 +1,7 @@
 import {useEffect, useState} from 'react';
 
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {useSourcePackageRegistries} from 'sentry/components/onboarding/gettingStartedDoc/useSourcePackageRegistries';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {PlatformKey} from 'sentry/data/platformCategories';
 import type {Organization, PlatformIntegration, Project, ProjectKey} from 'sentry/types';
@@ -22,6 +23,7 @@ export type ModuleProps = {
   organization?: Organization;
   platformKey?: PlatformKey;
   projectId?: Project['id'];
+  sourcePackageRegistries?: ReturnType<typeof useSourcePackageRegistries>;
 };
 
 // Loads the component containing the documentation for the specified platform
@@ -33,6 +35,8 @@ export function SdkDocumentation({
   organization,
   projectId,
 }: SdkDocumentationProps) {
+  const sourcePackageRegistries = useSourcePackageRegistries(organization);
+
   const [module, setModule] = useState<null | {
     default: React.ComponentType<ModuleProps>;
   }>(null);
@@ -95,6 +99,7 @@ export function SdkDocumentation({
   }
 
   const {default: GettingStartedDoc} = module;
+
   return (
     <GettingStartedDoc
       dsn={projectKeys[0].dsn.public}
@@ -103,6 +108,7 @@ export function SdkDocumentation({
       platformKey={platform?.id}
       organization={organization}
       projectId={projectId}
+      sourcePackageRegistries={sourcePackageRegistries}
     />
   );
 }

static/app/components/onboarding/gettingStartedDoc/step.tsx

@@ -47,6 +47,10 @@ type ConfigurationType = {
    * A callback to be invoked when the configuration is selected and copied to the clipboard
    */
   onSelectAndCopy?: () => void;
+  /**
+   * Whether or not the configuration or parts of it are currently being loaded
+   */
+  partialLoading?: boolean;
 };
 
 interface BaseStepProps {
@@ -79,6 +83,7 @@ function getConfiguration({
   additionalInfo,
   onCopy,
   onSelectAndCopy,
+  partialLoading,
 }: ConfigurationType) {
   return (
     <Configuration>
@@ -89,6 +94,8 @@ function getConfiguration({
           language={language}
           onCopy={onCopy}
           onSelectAndCopy={onSelectAndCopy}
+          hideCopyButton={partialLoading}
+          disableUserSelection={partialLoading}
         >
           {language === 'javascript'
             ? beautify.js(code, {indent_size: 2, e4x: true})

static/app/components/onboarding/gettingStartedDoc/useSourcePackageRegistries.tsx

@@ -0,0 +1,40 @@
+import {useEffect} from 'react';
+
+import {Organization} from 'sentry/types';
+import {handleXhrErrorResponse} from 'sentry/utils/handleXhrErrorResponse';
+import {useApiQuery} from 'sentry/utils/queryClient';
+
+type ReleaseRegistrySdk = Record<
+  string,
+  {
+    canonical: string;
+    main_docs_url: string;
+    name: string;
+    package_url: string;
+    repo_url: string;
+    version: string;
+  }
+>;
+
+/**
+ * Fetches the release registry list for SDKs
+ */
+export function useSourcePackageRegistries(organization: Organization) {
+  const releaseRegistrySdk = useApiQuery<ReleaseRegistrySdk>(
+    [`/organizations/${organization.slug}/sdks/`],
+    {
+      staleTime: Infinity,
+    }
+  );
+
+  useEffect(() => {
+    if (releaseRegistrySdk.error) {
+      handleXhrErrorResponse(
+        'Failed to fetch sentry release registry',
+        releaseRegistrySdk.error
+      );
+    }
+  }, [releaseRegistrySdk.error]);
+
+  return releaseRegistrySdk;
+}

static/app/gettingStartedDocs/android/android.tsx

@@ -7,9 +7,10 @@ import {t, tct} from 'sentry/locale';
 // Configuration Start
 export const steps = ({
   dsn,
-}: {
-  dsn?: string;
-} = {}): LayoutProps['steps'] => [
+  sourcePackageRegistries,
+}: Partial<
+  Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
+> = {}): LayoutProps['steps'] => [
   {
     type: StepType.INSTALL,
     description: (
@@ -28,10 +29,16 @@ export const steps = ({
     configurations: [
       {
         language: 'groovy',
+        partialLoading: sourcePackageRegistries?.isLoading,
         code: `
 plugins {
   id "com.android.application" // should be in the same module
-  id "io.sentry.android.gradle" version "3.12.0"
+  id "io.sentry.android.gradle" version "${
+    sourcePackageRegistries?.isLoading
+      ? t('\u2026loading')
+      : sourcePackageRegistries?.data?.['sentry.java.android.gradle-plugin']?.version ??
+        '3.12.0'
+  }"
 }
         `,
       },
@@ -139,8 +146,18 @@ export const nextSteps = [
 ];
 // Configuration End
 
-export function GettingStartedWithAndroid({dsn, ...props}: ModuleProps) {
-  return <Layout steps={steps({dsn})} nextSteps={nextSteps} {...props} />;
+export function GettingStartedWithAndroid({
+  dsn,
+  sourcePackageRegistries,
+  ...props
+}: ModuleProps) {
+  return (
+    <Layout
+      steps={steps({dsn, sourcePackageRegistries})}
+      nextSteps={nextSteps}
+      {...props}
+    />
+  );
 }
 
 export default GettingStartedWithAndroid;

static/app/gettingStartedDocs/apple/apple-ios.tsx

@@ -7,9 +7,10 @@ import {t, tct} from 'sentry/locale';
 // Configuration Start
 export const steps = ({
   dsn,
-}: {
-  dsn?: string;
-} = {}): LayoutProps['steps'] => [
+  sourcePackageRegistries,
+}: Partial<
+  Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
+> = {}): LayoutProps['steps'] => [
   {
     type: StepType.INSTALL,
     description: (
@@ -44,8 +45,13 @@ https://github.com/getsentry/sentry-cocoa.git
           </p>
         ),
         language: 'swift',
+        partialLoading: sourcePackageRegistries?.isLoading,
         code: `
-.package(url: "https://github.com/getsentry/sentry-cocoa", from: "8.9.3"),
+.package(url: "https://github.com/getsentry/sentry-cocoa", from: "${
+          sourcePackageRegistries?.isLoading
+            ? t('\u2026loading')
+            : sourcePackageRegistries?.data?.['sentry.cocoa']?.version ?? '8.9.3'
+        }"),
         `,
       },
     ],
@@ -231,8 +237,18 @@ export const nextSteps = [
 ];
 // Configuration End
 
-export function GettingStartedWithIos({dsn, ...props}: ModuleProps) {
-  return <Layout steps={steps({dsn})} nextSteps={nextSteps} {...props} />;
+export function GettingStartedWithIos({
+  dsn,
+  sourcePackageRegistries,
+  ...props
+}: ModuleProps) {
+  return (
+    <Layout
+      steps={steps({dsn, sourcePackageRegistries})}
+      nextSteps={nextSteps}
+      {...props}
+    />
+  );
 }
 
 export default GettingStartedWithIos;

static/app/gettingStartedDocs/apple/apple-macos.tsx

@@ -7,9 +7,10 @@ import {t, tct} from 'sentry/locale';
 // Configuration Start
 export const steps = ({
   dsn,
-}: {
-  dsn?: string;
-} = {}): LayoutProps['steps'] => [
+  sourcePackageRegistries,
+}: Partial<
+  Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
+> = {}): LayoutProps['steps'] => [
   {
     type: StepType.INSTALL,
     description: (
@@ -44,8 +45,13 @@ https://github.com/getsentry/sentry-cocoa.git
           </p>
         ),
         language: 'swift',
+        partialLoading: sourcePackageRegistries?.isLoading,
         code: `
-.package(url: "https://github.com/getsentry/sentry-cocoa", from: "8.9.3"),
+.package(url: "https://github.com/getsentry/sentry-cocoa", from: "${
+          sourcePackageRegistries?.isLoading
+            ? t('\u2026loading')
+            : sourcePackageRegistries?.data?.['sentry.cocoa']?.version ?? '8.9.3'
+        }"),
         `,
       },
     ],
@@ -183,8 +189,18 @@ export const nextSteps = [
 ];
 // Configuration End
 
-export function GettingStartedWithMacos({dsn, ...props}: ModuleProps) {
-  return <Layout steps={steps({dsn})} nextSteps={nextSteps} {...props} />;
+export function GettingStartedWithMacos({
+  dsn,
+  sourcePackageRegistries,
+  ...props
+}: ModuleProps) {
+  return (
+    <Layout
+      steps={steps({dsn, sourcePackageRegistries})}
+      nextSteps={nextSteps}
+      {...props}
+    />
+  );
 }
 
 export default GettingStartedWithMacos;

static/app/gettingStartedDocs/apple/apple.tsx

@@ -7,9 +7,10 @@ import {t, tct} from 'sentry/locale';
 // Configuration Start
 export const steps = ({
   dsn,
-}: {
-  dsn?: string;
-} = {}): LayoutProps['steps'] => [
+  sourcePackageRegistries,
+}: Partial<
+  Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
+> = {}): LayoutProps['steps'] => [
   {
     type: StepType.INSTALL,
     description: (
@@ -44,8 +45,13 @@ https://github.com/getsentry/sentry-cocoa.git
           </p>
         ),
         language: 'swift',
+        partialLoading: sourcePackageRegistries?.isLoading,
         code: `
-.package(url: "https://github.com/getsentry/sentry-cocoa", from: "8.9.3"),
+.package(url: "https://github.com/getsentry/sentry-cocoa", from: "${
+          sourcePackageRegistries?.isLoading
+            ? t('\u2026loading')
+            : sourcePackageRegistries?.data?.['sentry.cocoa']?.version ?? '8.9.3'
+        }"),
         `,
       },
     ],
@@ -183,8 +189,18 @@ export const nextSteps = [
 ];
 // Configuration End
 
-export function GettingStartedWithApple({dsn, ...props}: ModuleProps) {
-  return <Layout steps={steps({dsn})} nextSteps={nextSteps} {...props} />;
+export function GettingStartedWithApple({
+  dsn,
+  sourcePackageRegistries,
+  ...props
+}: ModuleProps) {
+  return (
+    <Layout
+      steps={steps({dsn, sourcePackageRegistries})}
+      nextSteps={nextSteps}
+      {...props}
+    />
+  );
 }
 
 export default GettingStartedWithApple;

static/app/gettingStartedDocs/capacitor/capacitor.tsx

@@ -8,9 +8,7 @@ import {t, tct} from 'sentry/locale';
 // Configuration Start
 export const steps = ({
   dsn,
-}: {
-  dsn?: string;
-} = {}): LayoutProps['steps'] => [
+}: Partial<Pick<ModuleProps, 'dsn'>> = {}): LayoutProps['steps'] => [
   {
     type: StepType.INSTALL,
     description: t(

static/app/gettingStartedDocs/cordova/cordova.tsx

@@ -9,9 +9,7 @@ import {t, tct} from 'sentry/locale';
 // Configuration Start
 export const steps = ({
   dsn,
-}: {
-  dsn?: string;
-} = {}): LayoutProps['steps'] => [
+}: Partial<Pick<ModuleProps, 'dsn'>> = {}): LayoutProps['steps'] => [
   {
     type: StepType.INSTALL,
     description: t('Install our SDK using the cordova command:'),

static/app/gettingStartedDocs/dart/dart.tsx

@@ -7,9 +7,10 @@ import {t, tct} from 'sentry/locale';
 // Configuration Start
 export const steps = ({
   dsn,
-}: {
-  dsn?: string;
-} = {}): LayoutProps['steps'] => [
+  sourcePackageRegistries,
+}: Partial<
+  Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
+> = {}): LayoutProps['steps'] => [
   {
     type: StepType.INSTALL,
     description: (
@@ -25,9 +26,14 @@ export const steps = ({
     configurations: [
       {
         language: 'yml',
+        partialLoading: sourcePackageRegistries?.isLoading,
         code: `
 dependencies:
-  sentry: ^7.8.0
+  sentry: ^${
+    sourcePackageRegistries?.isLoading
+      ? t('\u2026loading')
+      : sourcePackageRegistries?.data?.['sentry.dart']?.version ?? '7.8.0'
+  }
         `,
       },
     ],
@@ -162,8 +168,12 @@ Future<void> processOrderBatch(ISentrySpan span) async {
 ];
 // Configuration End
 
-export function GettingStartedWithDart({dsn, ...props}: ModuleProps) {
-  return <Layout steps={steps({dsn})} {...props} />;
+export function GettingStartedWithDart({
+  dsn,
+  sourcePackageRegistries,
+  ...props
+}: ModuleProps) {
+  return <Layout steps={steps({dsn, sourcePackageRegistries})} {...props} />;
 }
 
 export default GettingStartedWithDart;